Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.
Mängude kasutajaliides on indie-arenduse kõige raskem osa (ja sellest keegi ei räägi)
Enamik indie-arendajaid saadab kahe nädalaga töötava mänguprototüübi välja. Seejärel kulutavad nad järgmised kolm kuud kasutajaliidese kallal. Nupud, mis näevad välja nagu programmeerija kunst. HUD-i kihid, mis võitlevad kaameraga. Inventarivõrgud, mis on ehitatud position: absolute ja palvetega. Mängude kasutajaliidese jaoks mõeldud tehisintellekti oskused saidil Vibe Skills loovad ühtsed menüüsüsteemid, HUD-id ja kihid brauserimängude jaoks ühe istungiga - et saaksite mängu välja anda, mitte seadete ekraani.
See juhend selgitab, miks kasutajaliides määrab mängijate püsimise, kuus kasutajaliidese pinda, mida iga mäng vajab, tehisintellekti mängude kasutajaliidese oskused, mis on saadaval Vibe Skills, ja nädalavahetuse töövoo täieliku kasutajaliidese komplekti väljastamiseks.
Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.
Miks mängude kasutajaliides määrab mängijate püsimise
Mängijad hindavad teie mängu esimese 90 sekundi jooksul ja enamik neist sekunditest möödub kasutajaliideses. Peamenüü, seaded, juhtnuppude vihjed, esimene HUD, mida nad mängu alustades näevad. Kui kasutajaliides tundub kohmakas, ei saa mängumehaanika kunagi võimalust.
Mõned numbrid, mida tasub meeles pidada:
- 38% mängijatest lahkub brauserimängust esimesel mängukorral, kui peamenüü tundub rikutud või stiilitu (itch.io mängutestimise andmed, 2025).
- Hollow Knighti peamenüüs on 4 nuppu, käsitsi joonistatud ja töötab 60 kaadrit sekundis - ja see on üks enim viidatud põhjustest, miks mängijad esimese 30 raske minuti jooksul püsivad.
- Celeste'i pausi ekraanil kasutatakse 3 tüpograafia suurust ja 2 värvi. See on kogu kasutajaliidesesüsteem. Piiratus tähendab kvaliteeti.
- Suure eelarvega mängudele kulutatakse 15 - 20% kogu nende tootmiseelarvest kasutajaliidesele/kasutajakogemusele. Indie-arendajad kulutavad tavaliselt 0%.
Just seda tühimikku tehisintellekti oskused täitma ongi loodud.
Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.
Kuus kasutajaliidese pinda, mida iga mäng vajab
Enne millegi genereerimist teadke, mida te genereerite. Iga brauserimäng - 2D platvormer, 3D-tulistaja, tühikäigul klõpsija, kõndimisimulaator - vajab samu kuut kasutajaliidese pinda. Hea tehisintellekti oskus tarnib kõik need ühes ühtses stiilisüsteemis.
| Pind | Otstarve | Levinud vead | Kuidas "hea" välja näeb |
|---|---|---|---|
| Peamenüü | Esimene mulje. Määrab kunstisuuna. | Vaikimisi brauseri fondid, keskele paigutatud tekst, pole hoiuseisundeid | Maksimaalselt 3 - 5 nuppu, kohandatud tüpograafia, hoiatusmikroanimatsioon, taustal olev silmus |
| HUD-i kiht | Mängusisene teave: tervis, skoor, laskemoon, taimer | Ujuvad numbrid juhuslikes nurkades, pole rühmitatud, võitleb kaameraga | Nurgaga ankurdatud, poolläbipaistev, rühmitatud andmetüübi järgi, tühikäigul tuhmub |
| Inventaar / koormus | Esemete haldamise ekraan | 16-veeruline võrk, pole esemete haruldust, ekraani blokeerivad tööriistavihjed | 4 - 8 veeruline võrk, värvikoodiga haruldus, tööriistavihje küljel, lohistamine või klõpsamine |
| Seaded / valikud | Heli, juhtnupud, graafika | Üks suur keritav lülitite loend | Vahelehed (Heli / Video / Juhtnupud), liugurid, mitte lülitid, "Rakenda" + "Reset vaikeseadetele" |
| Pausi menüü | Mängu keskel katkestamine | Dialoogiboks, mis peidab kogu mängu | 60% läbipaistvusega kiht, 4 - 5 valikut, klaviatuuri jaoks automaatselt fookustatud "Jätka" |
| Lõpuekraan | Võit, kaotus või mängu kokkuvõte | "Mäng läbi" punase Arialiga, pole kordusnuppu | Statistika kokkuvõte, suur "Mängi uuesti" CTA, sekundaarne "Peamenüü" |
6 poleeritud kasutajaliidese pinnaga mäng tundub lõpetatud. 6 stiilitu kasutajaliidese pinnaga mäng tundub nagu kooliprojekt, olenemata sellest, kui hea mängumehaanika on.
Kõige raskem on hoida kõiki 6 ühtlast - sama fondiperekond, sama nupu raadius, sama hoiukäitumine, sama värvipalett. Siin tehisintellekti oskused oma hinda väärivad.
5 tehisintellekti mängude kasutajaliidese oskust Vibe Skills'is
3D-mängude kategooria Vibe Skills'is sisaldab üle 30 oskuse, mis hõlmavad täielikke mängitavaid mänge ja nende ümber olevate kasutajaliideste süsteeme. Siin on viis eniminstallitud kasutajaliidesele keskendunud oskust.
| Oskus | Parim jaoks | Mootorid | Väljund |
|---|---|---|---|
| Brauserimängude kasutajaliidese komplekti generaator | Täielik 6-pinnaline kasutajaliides ühes ühtses stiilis | Three.js, Phaser, tavaline JS | HTML/CSS kihtide süsteem + ikoonilehed |
| HUD-i kihtide süsteem | Ainult mängusisene HUD (tervis, skoor, minimap, taimer) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-i abil paigutatud kiht või lõuendiikoonid |
| Pausi + seadete ekraanipakett | Paus, seaded, juhtnuppude ümber määramine | Mis tahes veebipõhine mängumootor | React/HTML dialoogikomponendid |
| Inventari + saagi tööriistavihje süsteem | Esemete võrgud, lohistamine, haruldusvärvid, tööriistavihjed | Three.js, Phaser, Unity WebGL | Komponentide kogu + esemekaartide mallid |
| Peamenüü + lõpuekraani kombinatsioon | Esimene ja viimane mulje | Mis tahes | Animeeritud menüü Lottie'iga + mängu lõpu statistikaekraan |
Kõik 5 oskust tarnitakse koos ühise kujundusmärkide failiga (värvid, fondid, vahed, järk-järgult aeglustuv) nii, et pinnad näeksid välja, nagu oleksid nad pärit samalt disainerilt. Enamik indie-kasutajaliidese komplekte ei läbi seda testi - menüü kasutab ühte fonti, HUD teist ja mängijad märkavad seda kohe.
Sirvi 3D-mängude oskusi Vibe Skills'is →
Looge nädalavahetuse jooksul täielik mängude kasutajaliidese komplekt
Siin on tegelik töövoog, mida kasutavad indie-arendajad, kes tarnivad brauserimänge itch.io ja Newgrounds platvormil. Koguaeg: umbes 12 töötundi nädalavahetuse jooksul.
1. samm: valige Vibe Skills'ist kasutajaliidese oskus
Avage 3D-mängude kategooria ja installige Brauserimängude kasutajaliidese komplekti generaator oskus. See on ainus, mis tarnib kõik 6 pinda ühes ühtses märgistussüsteemis. Kui teie mängul on juba töötavad menüüd ja vajate ainult HUD-i, installige selle asemel eraldiseisev HUD-i kihtide süsteem.
2. samm: määrake oma mängu "vibe" 3 sõnaga
Enne genereerimist kirjutage üles 3 sõna, mis kirjeldavad teie mängu tooni. Näited: "neoon, brutaalne, kiire" (süntwave'i tulistaja), "pehme, vesine, aeglane" (kalapüügimäng), "klotsikas, retro, piksel" (metroidvania). Oskus kasutab neid sisendina värvipaleti, tüpograafiavaliku ja animatsiooni järkjärgulise aeglustumise jaoks. Ärge jätke seda vahele - generiline sisend toodab generilist kasutajaliidest.
3. samm: genereerige esmalt kujundusmärgised
Oskus väljastab tokens.css faili või Tailwindi konfiguratsiooni teie paleti, fondikuhja, nupu raadiuste, vahemiku skaala ja animatsiooni ajastusega. Vaadake seda enne tegeliku kasutajaliidese genereerimist üle. Kui märgid tunduvad siin valed, tundub iga pind vale. Tugevdage, kuni see teile meeldib.
4. samm: genereerige kõik 6 pinda ühes partiis
Pärast märkide kinnitamist käivitage kogu 6-pinnaline genereerimine. Väljundiks on HTML/CSS-failide kaust (või React komponendid, sõltuvalt teie mootorist) pluss SVG ikoonilehtede komplekt. Three.js või Phaseri jaoks kasutage HTML-i kihtide lähenemisviisi (DOM virnastatud lõuendi peale pointer-events: none ümbrisel). Unity WebGL või Godot HTML5 jaoks kasutage lõuendipõhist varianti, mida oskus tarnib.
5. samm: ühendage see oma mängu silmusesse
Ühendage HUD oma mängu olekuga (tervise väärtus, skoor, taimer). Enamik oskusi sisaldab väikest GameUIState adapterit, mis paljastab setHealth(0.7) API, nii et te ei pea CSS-muutujaid käsitsi muutma. Ühendage pausi-, sätte- ja lõpuekraani sündmused oma olemasoleva sisendihalduriga.
6. samm: testige 3 võõraga ja parandage
Sõbrad ütlevad teile, et kasutajaliides on suurepärane. Võõrad räägivad teile tõtt. Postitage ehitis itch.io, paluge 3 juhuslikul inimesel mängida 5 minutit ja vaadake salvestist. Tähtsad kasutajaliidese vead ilmnevad esimeste 60 sekundi jooksul. Parandage need, genereerige mõjutatud pind uuesti, saatke välja.
Koguaeg: 1. - 3. samm (umbes 1 tund) + 4. samm (umbes 30 minutit) + 5. samm (umbes 6 - 8 tundi integreerimist) + 6. samm (umbes 3 tundi testimise tsüklit) = nädalavahetus.
Väljaandeline kasutajaliidese disainer küsiks sama töömahu eest 3000 - 8000 dollarit ja võtaks selleks 4 - 6 nädalat. Vibe Skills'i tellimus algab 39 dollarist kuus ja annab teile piiramatud generatsioonid - nii et saate itereerida nii mitu korda kui soovite, kuni kasutajaliides tundub õige.
Installige mängude kasutajaliidese oskus Vibe Skills'is →
Korduma kippuvad küsimused
Kas peaksin oma mängu kasutajaliidest ehitama HTML/CSS-i kihina või otse lõuendil?
Enamiku brauserimängude jaoks on Three.js või Phaseri lõuendi peal olev HTML/CSS-kiht kiirem ehitada, seda on lihtsam juurdepääsetavaks muuta ja see renderdab teksti teravalt igal eraldusvõimel. Lõuendipõhist kasutajaliidest kasutage ainult siis, kui vajate pikslitäpset kunstilist järjepidevust (rangelt pikselkunsti mäng) või kui DOM-i sündmused segavad sisendit. Vibe Skills'i oskused pakuvad mõlemat varianti.
Kas kasutajaliides töötab mobiilis või vajan eraldi mobiiliversiooni?
Vibe Skills'i brauserimängude kasutajaliidese komplekt genereerib reageerivad paigutused, mis töötavad kohe puutetundlikel seadmetel - suuremad puutepinnad, mobiilsete juhtnuppude vahetamise kihid (D-pad ja tegevusnupud) ning mobiilsõbralik pausi menüü. Te ei vaja eraldi versiooni, kuid peate testima tõelisel telefonil. Brauseri arendajavahendid valetavad puutefunktsiooni jõudluse kohta.
Kui ligipääsetav saab mängude kasutajaliides realistlikult olla?
Brauserimängud võivad menüüd, seadeid ja HUD-e jaoks kergesti saavutada WCAG AA - klaviatuuriga navigeerimine, fookusrõngad, värvikontrast 4,5:1 ja ekraanilugeja etiketid skoorile ja tervisele. HTML-i kihtide lähenemisviis muudab selle kõik peaaegu tasuta. Vibe Skills'i oskused genereerivad vaikimisi ligipääsetava märgistuse. Tegelik mängumehaanika on raskem ligipääsetavaks muuta, kuid kasutajaliides ei tohiks olla takistus.
Kas sama kasutajaliidese komplekt töötab Unity WebGL ja Godot HTML5 versioonide jaoks?
Enamasti jah. Unity WebGL ja Godot HTML5 renderdavad mõlemad lõuendile ja saate selle peale DOM-i kihi virnastada. Oskused sisaldavad mõlema mootori jaoks kohandajaid, nii et kasutajaliides suhtleb teie mängu olekuga. Unity-spetsiifilised funktsioonid (nagu sisseehitatud sündmustesüsteem) vajavad õhukest silda - oskus tarnib selle silla näidiskoodi.
Kuidas ma hoian menüü, HUD-i ja inventaari visuaalselt ühtlastena?
See on peamine põhjus, miks indie-mängude kasutajaliides näeb välja amatöörlik - 6 eraldi kujundatud pinda. Lahendus on ühised kujundusmärgised: üks fail, mis määratleb värvid, fondid, vahed ja järkjärgulise aeglustumise. Iga pind impordib sellest failist. Vibe Skills'i oskused teevad seda automaatselt - genereerige märgised üks kord, genereerige kõik 6 pinda nendest märkidest, valmis.
Kas ma saan genereeritud kasutajaliidest kohandada, ilma oskust rikkumata?
Jah. Oskused väljastavad redigeeritavad HTML-, CSS- ja (valikuliselt) React-komponendid. Teie omate faile. Enamik arendajaid muudab värve, vahetab logo välja, asendab ikoone ja muudab ühe või kaks nupu kuju - see on kõik. Kui vajate suurt stiilimuutust, genereerige uuendatud märkidest uuesti, selle asemel et pinnad käsitsi ümber kirjutada.
Mis siis, kui minu mängul on juba poolikult ehitatud kasutajaliides - kas peaksin selle välja viskama?
Ei. Installige eraldiseisvalt HUD-i kihtide süsteem või Pausi + Seadete pakett ja asendage üks pind korraga. Enamik indie-arendajaid uuendab esmalt peamenüü (kõige suurem nähtavus), seejärel HUD (enimkasutatud), seejärel seaded ja paus (vähemkasutatud, kuid kõige rikutumad). Kvaliteedi hüppe tunnete pärast esimese pinna väljaandmist.
Saatke välja kasutajaliides, seejärel saatke välja mäng
Mängude kasutajaliides on indie-projektide vaikne tapja. Mängumehaanika võib olla geniaalne, kuid kui menüü näeb välja nagu WordPressi vaiketeema, põgenevad mängijad 90 sekundi pärast. Poleeritud kasutajaliides - ühtsed märgid, ankurdatud HUD, puhas seadistus, rahuldav lõpuekraan - on see, mis muudab 4-tunnise itch.io allalaadimise reaalseks tooteks.
Jätke 4-nädalane kasutajaliidese ümberkujundus vahele. Genereerige nädalavahetuse jooksul täielik 6-pinnaline komplekt, ühendage see ja jätkake mängu lõbusaks muutmisega.
Sirvi mängude kasutajaliidese oskusi Vibe Skills'is →
Lõpetage mängude kasutajaliidese ehitamine algusest peale. Installige kasutajaliidese komplekti oskus Vibe Skills'is ja saatke menüü, HUD, inventaar, seaded, paus ja lõpuekraan ühe istungiga välja.