Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Žaidimo vartotojo sąsaja - sunkiausia nepriklausomų kūrėjų dalis (ir apie tai niekas nekalba)
Dauguma nepriklausomų kūrėjų per dvi savaites pristato veikiantį žaidimo prototipą. Tada kitus tris mėnesius jie įstringa prie vartotojo sąsajos. Mygtukai, atrodantys kaip programuotojo menas. HUD perdangos, kurios trukdo kamerai. Inventoriaus tinklai, sukurti naudojant position: absolute ir maldas. Dirbtinio intelekto įgūdžiai, skirti žaidimų vartotojo sąsajai Vibe Skills platformoje, leidžia vienu prisėdimu sukurti vientisas meniu sistemas, HUD ir perdangas naršyklės žaidimams - kad galėtumėte pristatyti žaidimą, o ne nustatymų ekraną.
Šis vadovas paaiškina, kodėl vartotojo sąsaja lemia išlaikymą, šešias vartotojo sąsajos dalis, kurių reikia kiekvienam žaidimui, dirbtinio intelekto žaidimų vartotojo sąsajos įgūdžius, pasiekiamus Vibe Skills, ir savaitgalio darbo eigą, kad būtų sukurtas pilnas vartotojo sąsajos rinkinys.
Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Kodėl žaidimo vartotojo sąsaja lemia išlaikymą
Žaidėjai vertina jūsų žaidimą per pirmas 90 sekundžių, ir didžioji dalis to laiko praleidžiama vartotojo sąsajoje. Pagrindinis meniu, nustatymai, valdymo užuominos, pirmasis HUD, kurį jie pamato žaidimui prasidėjus. Jei vartotojo sąsaja atrodo prastai, žaidimo eiga niekada negauna progos.
Keletas skaičių, kuriuos verta turėti omenyje:
- 38 % žaidėjų meta naršyklės žaidimą pirmojoje sesijoje, jei pagrindinis meniu atrodo sugadintas ar neestetiškas (itch.io žaidimo testavimo duomenys, 2025 m.).
- Hollow Knight pagrindinis meniu susideda iš 4 mygtukų, nupieštų ranka, ir veikia 60 kadrų per sekundę - ir tai yra vienas dažniausiai minimų priežasčių, kodėl žaidėjai ištveria pirmas 30 žiaurių minučių.
- Celeste pauzės ekrane naudojami 3 skirtingi šrifto dydžiai ir 2 spalvos. Tai visa vartotojo sąsajos sistema. Atidumas skaitomas kaip kokybė.
- Didelio biudžeto žaidimai skiria 15 - 20 % viso savo gamybos biudžeto vartotojo sąsajai / patirčiai. Nepriklausomi kūrėjai paprastai skiria 0 %.
Šį atotrūkį būtent ir siekia užpildyti dirbtinio intelekto įgūdžiai.
Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Šešios vartotojo sąsajos dalys, kurių reikia kiekvienam žaidimui
Prieš ką nors kurdami, žinokite, ką kuriate. Kiekvienam naršyklės žaidimui - 2D platformeriui, 3D šaudyklei, tuščiosios eigos žaidimui, ėjimo simuliatoriui - reikalingos tos pačios šešios vartotojo sąsajos dalys. Geras dirbtinio intelekto įgūdis pateikia visas jas vienoje vientisoje stiliaus sistemoje.
| Dalys | Paskirtis | Dažnos klaidos | Kaip atrodo "gerai" |
|---|---|---|---|
| Pagrindinis meniu | Pirma įspūdis. Nustato meno kryptį. | Numatytieji naršyklės šriftai, centravimas, nėra užvedimo būsenų | Ne daugiau kaip 3 - 5 mygtukai, pasirinkta tipografija, animacija užvedus, fono ciklas |
| HUD perdanga | Informacija žaidimo metu: sveikata, rezultatas, amunicija, laikmatis | Plaukiojantys skaičiai atsitiktiniuose kampuose, nėra grupavimo, trukdo kamerai | Pritvirtinti prie kampų, pusiau permatomi, sugrupuoti pagal duomenų tipą, išnyksta neveikiant |
| Inventorius / įrangos sistema | Prekių valdymo ekranas | 16-os stulpelių tinklas, nėra prekių retumo, ekrano neuždengiantys patarimai | 4 - 8 stulpelių tinklas, spalvomis pažymėtas retumas, patarimas šone, vilkimas ir numetimas arba spustelėjimas |
| Nustatymai / parinktys | Garsas, valdikliai, grafika | Vienas didelis slankiojamasis jungiklių sąrašas | Skirtukai (Garsas / Vaizdas / Valdikliai), slankikliai, o ne jungikliai, "Taikyti" + "Atstatyti į numatytuosius" |
| Pauzės meniu | Pertraukimas žaidimo metu | Modalinis langas, kuris uždengia visą žaidimą | 60 % nepermatomumo perdanga, 4 - 5 parinktys, "Tęsti" automatiškai sufokusuotas klaviatūrai |
| Pabaigos ekranas | Pergalė, pralaimėjimas arba apibendrinimas | "Žaidimas baigtas" raudonais Arial, nėra pakartojimo mygtuko | Statistikos santrauka, didelis "Žaisti dar kartą" raginimas veikti, papildomas "Pagrindinis meniu" |
Žaidimas su 6 profesionaliai atliktomis vartotojo sąsajos dalimis atrodo užbaigtas. Žaidimas su 6 neestetiškomis vartotojo sąsajos dalimis atrodo kaip mokyklos projektas, nesvarbu, koks geras būtų žaidimo eiga.
Sunkiausia dalis yra išlaikyti visas 6 dalis vientisas - ta pati šrifto šeima, tas pats mygtuko spindulys, tas pats užvedimo elgesys, ta pati spalvų paletė. Būtent čia dirbtinio intelekto įgūdžiai atsiperka.
5 Dirbtinio Intelekto Žaidimų Vartotojo Sąsajos Įgūdžiai Vibe Skills platformoje
3D žaidimų kategorijoje Vibe Skills yra daugiau nei 30 įgūdžių, apimančių pilnus žaidimus ir juos lydinčias vartotojo sąsajos sistemas. Štai penki dažniausiai įdiegti vartotojo sąsajai skirti įgūdžiai.
| Įgūdis | Geriausiai tinka | Varikliai | Rezultatas |
|---|---|---|---|
| Naršyklės žaidimo vartotojo sąsajos rinkinio generatorius | Pilna 6 dalių vartotojo sąsaja vientisoje stiliaus sistemoje | Three.js, Phaser, vanilla JS | HTML/CSS perdangos sistema + sprite lakštai |
| HUD perdangos sistema | Tik žaidimo HUD (sveikata, rezultatas, minimapa, laikmatis) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS pozicionuojama perdanga arba drobės sprite |
| Pauzės + Nustatymų ekrano paketas | Pauzė, nustatymai, valdiklių perkonfigūravimas | Bet koks žiniatinklio pagrindu veikiantis žaidimų variklis | React/HTML modaliniai komponentai |
| Inventoriaus + grobio patarimų sistema | Prekių tinklai, vilkimas ir numetimas, retumo spalvos, patarimai | Three.js, Phaser, Unity WebGL | Komponentų biblioteka + prekių kortelių šablonai |
| Pagrindinis meniu + Pabaigos ekrano derinys | Pirmo ir paskutinio įspūdžio dalys | Bet koks | Animacinis meniu su Lottie + žaidimo pabaigos statistikos ekranas |
Visi 5 įgūdžiai pateikiami su bendra dizaino žetonų failu (spalvos, šriftai, tarpai, animacijos laikas), todėl dalys atrodo taip, tarsi jas būtų sukūręs tas pats dizaineris. Dauguma nepriklausomų vartotojo sąsajos rinkinių nepraeina šio patikrinimo - meniu naudoja vieną šriftą, HUD naudoja kitą, ir žaidėjai tai iškart pastebi.
Naršyti 3D žaidimų įgūdžius Vibe Skills platformoje →
Sukurkite pilną žaidimo vartotojo sąsajos rinkinį savaitgalį
Štai tikra darbo eiga, kurią naudoja nepriklausomi kūrėjai, pristatantys naršyklės žaidimus itch.io ir Newgrounds. Bendras laikas: ~12 darbo valandų per savaitgalį.
1 žingsnis: Pasirinkite vartotojo sąsajos įgūdį Vibe Skills platformoje
Atidarykite 3D žaidimų kategoriją ir įdiekite Naršyklės žaidimo vartotojo sąsajos rinkinio generatoriaus įgūdį. Tai vienintelis įgūdis, pateikiantis visas 6 dalis vienoje vientisoje žetonų sistemoje. Jei jūsų žaidime jau veikia meniu ir jums reikia tik HUD, vietoj to įdiekite atskirą HUD perdangos įgūdį.
2 žingsnis: Apibrėžkite savo žaidimo "nuotaiką" trimis žodžiais
Prieš generuodami, užsirašykite tris žodžius, apibūdinančius jūsų žaidimo toną. Pavyzdžiai: "neoninis, brutalus, greitas" (synthwave šaudyklė), "švelnus, vandeninis, lėtas" (žvejybos žaidimas), "stambus, retro, pikselis" (metroidvanija). Įgūdis naudoja juos kaip spalvų paletės, tipografijos pasirinkimo ir animacijos laiko įvedimo duomenis. Nepraleiskite to - bendri įvedimo duomenys sukuria bendrą vartotojo sąsają.
3 žingsnis: Pirmiausia sugeneruokite dizaino žetonus
Įgūdis pateikia tokens.css failą arba "Tailwind" konfigūraciją su jūsų palečių, šriftų rinkiniu, mygtukų spinduliais, tarpų skale ir animacijos laiku. Peržiūrėkite tai prieš generuodami bet kokią tikrą vartotojo sąsają. Jei žetonai čia atrodo neteisingai, kiekviena dalis atrodys neteisingai. Pritaikykite, kol jums patiks.
4 žingsnis: Generuokite visas 6 dalis viename pakete
Su patvirtintais žetonais paleiskite visą 6 dalių generavimą. Rezultatas - aplankas su HTML/CSS failais (arba React komponentais, priklausomai nuo jūsų variklio) ir SVG sprite lakštu piktogramoms. "Three.js" arba "Phaser" naudokite HTML perdangos metodą (DOM sukrautas virš drobės su pointer-events: none ant konteinerio). "Unity WebGL" arba "Godot HTML5" naudokite drobės pagrindu veikiantį variantą, kurį pateikia įgūdis.
5 žingsnis: Susiekite su savo žaidimo kilpa
Prijunkite HUD prie savo žaidimo būsenos (sveikatos vertė, rezultatas, laikmatis). Dauguma įgūdžių apima nedidelį GameUIState adapterį, kuris atskleidžia setHealth(0.7) API, kad jums nereikėtų rankiniu būdu keisti CSS kintamųjų. Pauzės, nustatymų ir pabaigos ekrano įvykius prijunkite prie savo esamo įvesties tvarkytuvo.
6 žingsnis: Testuokite su 3 nepažįstamaisiais ir peržiūrėkite
Draugai jums sakys, kad vartotojo sąsaja yra puiki. Svetimi žmonės pasakys tiesą. Paskelbkite versiją itch.io, paprašykite 3 atsitiktinių žmonių žaisti 5 minutes ir stebėkite įrašą. Svarbios vartotojo sąsajos klaidos pasirodys per pirmas 60 sekundžių. Jas pataisykite, iš naujo sugeneruokite paveiktą dalį, pristatykite.
Bendras laikas: 1 - 3 žingsniai (~1 valanda) + 4 žingsnis (~30 minučių) + 5 žingsnis (~6 - 8 valandos integravimo) + 6 žingsnis (~3 valandos testavimo ciklų) = savaitgalis.
Laisvai samdomas vartotojo sąsajos dizaineris už tą patį darbą paprašytų 3000 - 8000 USD ir užtruktų 4 - 6 savaites. Prenumerata Vibe Skills prasideda nuo 39 USD per mėnesį ir suteikia neribotas generavimo galimybes - todėl galite kartoti tiek kartų, kiek norite, kol vartotojo sąsaja atrodys tinkamai.
Įdiekite žaidimo vartotojo sąsajos įgūdį Vibe Skills platformoje →
Dažnai užduodami klausimai
Ar turėčiau kurti savo žaidimo vartotojo sąsają kaip HTML/CSS perdangą ar tiesiogiai ant drobės?
Daugumai naršyklės žaidimų, HTML/CSS perdanga virš Three.js arba Phaser drobės yra greitesnė sukurti, lengviau padaryti prieinamą ir rodo tekstą aiškiai bet kokia raiška. Drobės pagrindu veikiančią vartotojo sąsają naudokite tik tada, kai jums reikia tiksliai pikselių atitinkančio meno nuoseklumo (griežtas pikselių meno žaidimas) arba kai DOM įvykiai trukdo įvesties signalams. Vibe Skills platformos įgūdžiai pateikia abu variantus.
Ar vartotojo sąsaja veiks mobiliajame telefone, ar man reikia atskiro mobiliojo ryšio leidimo?
Naršyklės žaidimo vartotojo sąsajos rinkinys Vibe Skills platformoje sukuria responsyvias išdėstymus, kurie veikia liečiamuose įrenginiuose iš karto - didesni paspaudimų taikiniai, perjungiami mobiliųjų įrenginių valdymo perdangos (D-pad ir veiksmo mygtukai) ir mobiliuosius įrenginius pirmiausia orientuotas pauzės meniu. Jums nereikės atskiro leidimo, bet reikės testuoti realiu telefonu. Naršyklės kūrėjo įrankiai meluoja apie lietimo našumą.
Kiek realistiškai prieinama gali būti žaidimo vartotojo sąsaja?
Naršyklės žaidimai gali lengvai pasiekti WCAG AA meniu, nustatymams ir HUD - klaviatūros navigacija, fokusavimo žiedai, spalvų kontrastas 4,5:1 ir ekrano skaitytuvų etiketės rezultatui ir sveikatai. HTML perdangos metodas beveik nemokamai suteikia visa tai. Vibe Skills platformos įgūdžiai pagal numatytuosius nustatymus generuoja prieinamą žymėjimą. Pačios žaidimo eigos prieinamumą padaryti sunkiau, tačiau vartotojo sąsaja neturėtų būti kliūtimi.
Ar tas pats vartotojo sąsajos rinkinys veikia Unity WebGL ir Godot HTML5 leidimuose?
Daugiausia taip. Unity WebGL ir Godot HTML5 abu atvaizduoja drobėje, ir jūs galite sukrauti DOM perdangą ant viršaus. Įgūdžiai apima adapterius abiem varikliams, kad vartotojo sąsaja bendrautų su jūsų žaidimo būkle. Unity specifinės funkcijos (pvz., integruota įvykių sistema) reikalauja plono tilto - įgūdis pateikia to tilto pavyzdinį kodą.
Kaip išlaikyti meniu, HUD ir inventorių vizualiai nuoseklius?
Tai yra pagrindinė priežastis, kodėl nepriklausomų žaidimų vartotojo sąsaja atrodo amatininkiškai - 6 dalys, sukurtos atskirai. Sprendimas yra bendri dizaino žetonai: vienas failas, apibrėžiantis spalvas, šriftus, tarpus ir animacijos laikus. Kiekviena dalis importuojama iš to failo. Vibe Skills platformos įgūdžiai tai daro automatiškai - sugeneruokite žetonus vieną kartą, sugeneruokite visas 6 dalis iš tų žetonų, baigta.
Ar galiu tinkinti sugeneruotą vartotojo sąsają, nesugadindamas įgūdžio?
Taip. Įgūdžiai pateikia redaguojamus HTML, CSS ir (pasirenkamai) React komponentus. Jums priklauso failai. Dauguma kūrėjų pakeičia spalvas, pakeičia logotipą, pakeičia piktogramas ir pakeičia vieną ar du mygtukų formas - tai viskas. Jei jums reikia didelio stiliaus pakeitimo, geriau generuoti iš atnaujintų žetonų, nei perrašyti dalis rankiniu būdu.
Ką daryti, jei mano žaidime jau yra pusiau pastatyta vartotojo sąsaja - ar turėčiau ją išmesti?
Ne. Įdiekite atskirą HUD perdangos įgūdį arba Pauzės + Nustatymų paketo įgūdį ir pakeiskite po vieną dalį. Dauguma nepriklausomų kūrėjų pirmiausia atnaujina pagrindinį meniu (didžiausias matomumas), tada HUD (dažniausiai naudojamas), tada nustatymus ir pauzę (mažiausiai naudojami, bet labiausiai sugedę). Kokybės šuolį pajusite po pirmosios dalies pristatymo.
Pristatykite vartotojo sąsają, tada pristatykite žaidimą
Žaidimo vartotojo sąsaja yra tylus nepriklausomų projektų žudikas. Žaidimo eiga gali būti puiki, bet jei meniu atrodo kaip numatytasis "WordPress" temos šablonas, žaidėjai išeis po 90 sekundžių. Profesionaliai atlikta vartotojo sąsaja - vientisi žetonai, pritvirtintas HUD, švarūs nustatymai, tenkinantis pabaigos ekranas - tai, kas leidžia 4 valandų "itch.io" atsisiuntimą jaustis kaip tikram produktui.
Praleiskite 4 savaičių vartotojo sąsajos pertvarkymą. Generuokite pilną 6 dalių rinkinį savaitgalį, prijunkite jį ir grįžkite prie žaidimo darymo linksmo.
Naršyti žaidimų vartotojo sąsajos įgūdžius Vibe Skills platformoje →
Nustokite kurti žaidimų vartotojo sąsają nuo nulio. Įdiekite vartotojo sąsajos rinkinio įgūdį Vibe Skills platformoje ir pristatykite meniu, HUD, inventorių, nustatymus, pauzę ir pabaigos ekraną vienu prisėdimu.