Pregledajte stotine gotovih vještina za Claude, Cursor i više.
Igračko sučelje najteži je dio indie razvoja (i nitko o tome ne govori)
Većina indie developera isporučuje radni prototip igre za dva tjedna. Zatim sljedeća tri mjeseca provedu zaglavljeni na korisničkom sučelju. Gumbi koji izgledaju kao programerska umjetnost. HUD prekrivanja koja se bore s kamerom. Inventarni mreže izgrađene s position: absolute i molitvama. Vještine umjetne inteligencije za igračko sučelje na Vibe Skills generiraju kohezivne sustave izbornika, HUD-ove i prekrivanja za pregledničke igre u jednom potezu - tako da možete isporučiti igru, a ne zaslon postavki.
Ovaj vodič prolazi kroz to zašto korisničko sučelje odlučuje o zadržavanju, šest površina korisničkog sučelja koje svaka igra treba, vještine igračkog sučelja umjetne inteligencije dostupne na Vibe Skills i radni tijek vikendom za isporuku punog kompleta korisničkog sučelja.
Pregledajte stotine gotovih vještina za Claude, Cursor i više.
Zašto igračko sučelje odlučuje o zadržavanju
Igrači procjenjuju vašu igru u prvih 90 sekundi, a većina tih sekundi provodi se unutar korisničkog sučelja. Glavni izbornik, postavke, nagovještaji za kontrolu, prvi HUD koji vide kad igra započne. Ako se sučelje čini nespretno, igranje nikada neće dobiti priliku.
Nekoliko brojeva koje vrijedi imati na umu:
- 38% igrača napušta pregledničku igru u prvoj sesiji ako se glavni izbornik čini pokvarenim ili nestiliziranim (podaci s playtesta itch.io, 2025.).
- Glavni izbornik Hollow Knighta sastoji se od 4 gumba, ručno je nacrtan i radi pri 60 sličica u sekundi - i to je jedan od najčešće navođenih razloga zašto igrači izdrže brutalnih prvih 30 minuta.
- Zaslon za pauzu Celeste koristi 3 veličine fonta i 2 boje. To je cijeli sustav sučelja. Suzdržanost se čita kao kvaliteta.
- Igre s velikim budžetom troše 15-20% svog cjelokupnog budžeta za produkciju na UI/UX. Indie developeri obično troše 0%.
Taj jaz je upravo ono za što su vještine umjetne inteligencije stvorene.
Pregledajte stotine gotovih vještina za Claude, Cursor i više.
Šest površina korisničkog sučelja koje svaka igra treba
Prije nego što generirate bilo što, znajte što generirate. Svaka preglednička igra - 2D platformer, 3D pucačina, idle clicker, walking sim - treba istih šest površina korisničkog sučelja. Dobra vještina umjetne inteligencije isporučuje sve njih u jednom kohezivnom sustavu stila.
| Površina | Svrha | Uobičajene greške | Kako izgleda "dobro" |
|---|---|---|---|
| Glavni izbornik | Prvi dojam. Postavlja umjetnički smjer. | Zadani fontovi preglednika, centrirani tekst, bez stanja lebdenja | Maksimalno 3-5 gumba, prilagođena tipografija, mikroanimacija lebdenja, pozadinska petlja |
| HUD prekrivanje | Informacije u igri: zdravlje, rezultat, streljivo, tajmer | Plutajući brojevi u slučajnim kutovima, nema grupiranja, sukobljava se s kamerom | U sidru kutova, polutransparentno, grupirano po vrsti podataka, blijedi kad je u stanju mirovanja |
| Inventar / oprema | Zaslon za upravljanje stavkama | Mreža od 16 stupaca, bez rijetkosti stavki, savjeti koji blokiraju zaslon | Mreža od 4-8 stupaca, rijetkost kodirana bojama, savjet sa strane, povuci i ispusti ili klik |
| Postavke / opcije | Audio, kontrole, grafika | Jedan ogroman popis kliznih prekidača koji se može pomicati | Kartice (Audio / Video / Kontrole), klizači, a ne prekidači, "Primijeni" + "Vrati na zadano" |
| Izbornik za pauzu | Prekid usred igre | Modalni prozor koji skriva cijelu igru | Prekrivanje s 60% neprozirnosti, 4-5 opcija, "Nastavi" automatski fokusirano za tipkovnicu |
| Završni zaslon | Pobjeda, poraz ili sažetak runde | "Game Over" u crvenom Arialu, bez gumba za ponovnu igru | Sažetak statistika, veliki CTA "Igraj ponovno", sekundarni "Glavni izbornik" |
Igra sa 6 uglađenih površina korisničkog sučelja osjeća se dovršeno. Igra sa 6 nestiliziranih površina korisničkog sučelja osjeća se kao školski projekt, bez obzira koliko je dobra igra.
Najteži dio je zadržati svih 6 kohezivnih - ista obitelj fontova, isti radijus gumba, isto ponašanje lebdenja, ista paleta boja. Tu AI vještine zarađuju svoj kruh.
5 AI vještina za igračko sučelje na Vibe Skills
Kategorija 3D igara na Vibe Skills ima preko 30 vještina koje pokrivaju potpune igrive igre i sustave sučelja koji se isporučuju oko njih. Evo pet najčešće instaliranih vještina usmjerenih na sučelje.
| Vještina | Najbolje za | Motori | Izlaz |
|---|---|---|---|
| Generator kompleta UI-a za pregledničke igre | Potpunih 6 površina UI-a u jednom kohezivnom stilu | Three.js, Phaser, vanilla JS | HTML/CSS sustav prekrivanja + listovi spriteova |
| Sustav prekrivanja HUD-a | Samo HUD u igri (zdravlje, rezultat, minimapa, tajmer) | Three.js, Phaser, Unity WebGL, Godot HTML5 | Prekrivanje pozicionirano CSS-om ili spriteovi platna |
| Paket zaslona za pauzu + postavke | Pauza, postavke, ponovno mapiranje kontrola | Bilo koji web-bazirani motor za igre | React/HTML modalne komponente |
| Sustav inventara + savjeta za plijen | Inventarne mreže, povuci i ispusti, boje rijetkosti, savjeti | Three.js, Phaser, Unity WebGL | Knjižnica komponenti + predlošci kartica stavki |
| Kombinacija glavnog izbornika + završnog zaslona | Prvi i posljednji dojmovi | Bilo koji | Animiran izbornik s Lottie + zaslon sa statistikom kraja igre |
Sve 5 vještina isporučuje se sa zajedničkom datotekom dizajnerskih tokena (boje, fontovi, razmaci, ublažavanje) tako da površine izgledaju kao da potječu od istog dizajnera. Većina indie kompleta korisničkog sučelja ne uspijeva na ovom testu - izbornik koristi jedan font, HUD koristi drugi, a igrači to odmah primijete.
Pregledajte vještine za 3D igre na Vibe Skills →
Izgradite puni komplet igračkog sučelja tijekom vikenda
Evo stvarnog radnog toka koji koriste indie developeri koji isporučuju pregledničke igre na itch.io i Newgrounds. Ukupno vrijeme: ~12 radnih sati tijekom vikenda.
Korak 1: Odaberite vještinu UI-a na Vibe Skills
Otvorite kategoriju 3D igara i instalirajte vještinu Generator kompleta UI-a za pregledničke igre. To je jedina koja isporučuje svih 6 površina u jednom kohezivnom sustavu tokena. Ako vaša igra već ima radne izbornike i treba vam samo HUD, umjesto toga instalirajte samostalnu vještinu HUD prekrivanja.
Korak 2: Definirajte "vibru" svoje igre u 3 riječi
Prije generiranja, napišite 3 riječi koje opisuju ton vaše igre. Primjeri: "neonski, brutalni, brzi" (synthwave pucačina), "mekani, vodeni, spori" (ribolovna igra), "grub, retro, piksel" (metroidvania). Vještina koristi ove kao unos za paletu boja, odabir tipografije i ublažavanje animacije. Nemojte ovo preskočiti - generički unos proizvodi generički UI.
Korak 3: Prvo generirajte dizajnerske tokene
Vještina izlazi s datotekom tokens.css ili Tailwind konfiguracijom s vašom paletom, skupom fontova, radijusima gumba, ljestvicom razmaka i vremenom animacije. Pregledajte ovo prije generiranja bilo kakvog stvarnog UI-a. Ako tokeni ovdje izgledaju pogrešno, svaka će površina izgledati pogrešno. Prilagodite dok vam se ne svidi.
Korak 4: Generirajte sve 6 površina u jednoj seriji
S odobrenim tokenima, pokrenite potpuno generiranje 6 površina. Izlaz je mapa HTML/CSS datoteka (ili React komponenti, ovisno o vašem motoru) plus SVG list spriteova za ikone. Za Three.js ili Phaser, upotrijebite pristup HTML prekrivanja (DOM složen iznad platna s pointer-events: none na omotu). Za Unity WebGL ili Godot HTML5, upotrijebite varijantu temeljenu na platnu koju isporučuje vještina.
Korak 5: Povežite ga sa svojim igračkim petljom
Povežite HUD sa stanjem vaše igre (vrijednost zdravlja, rezultat, tajmer). Većina vještina uključuje mali adapter GameUIState koji izlaže API setHealth(0.7) tako da ne morate ručno uređivati CSS varijable. Povežite događaje pauze, postavki i završnog zaslona s vašim postojećim rukovateljem unosa.
Korak 6: Testirajte s 3 stranca i revidirajte
Prijatelji će vam reći da je UI sjajan. Stranci će vam reći istinu. Objavite build na itch.io, zamolite 3 nasumične osobe da igraju 5 minuta i gledajte snimku. Bugovi UI-a koji su važni pojavit će se u prvih 60 sekundi. Popravite ih, regenerirajte pogođenu površinu, isporučite.
Ukupno vrijeme: Korak 1-3 (~1 sat) + Korak 4 (~30 minuta) + Korak 5 (~6-8 sati integracije) + Korak 6 (~3 sata ciklusa testiranja) = vikend.
Freelance dizajner UI-a naplatio bi 3.000-8.000 USD za isti opseg i uzeo 4-6 tjedana. Pretplata na Vibe Skills počinje od 39 USD/mjesečno i omogućuje vam neograničeno generiranje - tako da možete iterirati onoliko puta koliko želite dok se UI ne čini ispravnim.
Instalirajte vještinu igračkog UI-a na Vibe Skills →
Često postavljana pitanja
Trebam li izgraditi igračko sučelje igre kao HTML/CSS prekrivanje ili izravno na platnu?
Za većinu pregledničkih igara, HTML/CSS prekrivanje na vrhu Three.js ili Phaser platna brže je za izradu, lakše ga je učiniti dostupnim i renderira tekst oštro pri bilo kojoj rezoluciji. Koristite UI temeljen na platnu samo kada vam je potrebna savršena dosljednost umjetnosti piksela (stroga pixel-art igra) ili kada DOM događaji ometaju unos. Vještine na Vibe Skills isporučuju obje varijante.
Hoće li UI raditi na mobitelu ili mi treba zaseban mobilni build?
Komplet UI-a za pregledničke igre na Vibe Skills generira responzivne rasporede koji rade na dodirnim uređajima odmah - veće ciljne površine, zamjenske prekrivanje kontrola za mobitele (D-pad i akcijski gumbi) i izbornik za pauzu prvo za mobitele. Ne treba vam zaseban build, ali ga morate testirati na pravom telefonu. Alati za razvoj preglednika lažu o performansama dodira.
Koliko realno dostupan može biti igrački UI?
Pregledničke igre mogu lako doseći WCAG AA za izbornike, postavke i HUD-ove - navigacija tipkovnicom, prstenovi fokusa, kontrast boja 4,5:1 i naljepnice čitača zaslona za rezultat i zdravlje. Pristup HTML prekrivanja čini sve ovo gotovo besplatnim. Vještine na Vibe Skills generiraju pristupačan HTML po zadanim postavkama. Sam igrački proces teže je učiniti dostupnim, ali UI ne bi trebao biti prepreka.
Radi li isti komplet UI-a za Unity WebGL i Godot HTML5 buildove?
Uglavnom da. Unity WebGL i Godot HTML5 renderiraju se na platno, a možete složiti DOM prekrivanje na vrh. Vještine uključuju adaptere za oba motora tako da UI komunicira sa stanjem vaše igre. Značajke specifične za Unity (poput ugrađenog sustava događaja) trebaju tanki most - vještina isporučuje uzorak koda za taj most.
Kako zadržati izbornik, HUD i inventar vizualno dosljednima?
Ovo je razlog broj 1 zašto igrački UI izgleda amaterski - 6 površina dizajniranih izolirano. Rješenje su zajednički dizajnerski tokeni: jedna datoteka koja definira boje, fontove, razmake i ublažavanje. Svaka površina uvozi iz te datoteke. Vještine na Vibe Skills to rade automatski - generirajte tokene jednom, generirajte svih 6 površina iz tih tokena, gotovo.
Mogu li prilagoditi generirani UI bez razbijanja vještine?
Da. Vještine izlaze s HTML, CSS i (opcionalno) React komponentama koje se mogu uređivati. Vlasnik ste datoteka. Većina developera prilagođava boje, zamjenjuje logotip, zamjenjuje ikone i mijenja jedan ili dva oblika gumba - to je to. Ako vam je potrebna velika promjena stila, regenerirajte iz ažuriranih tokena umjesto da ručno prepisujete površine.
Što ako moja igra već ima polugrađen UI - trebam li ga baciti?
Ne. Instalirajte samostalnu vještinu HUD prekrivanja ili paket za pauzu + postavke i zamijenite jednu površinu odjednom. Većina indie developera prvo nadogradi glavni izbornik (najveća vidljivost), zatim HUD (najčešće korišten), zatim postavke i pauzu (najmanje korištene, ali najviše pokvarene). Osjetit ćete skok kvalitete nakon što se prva površina isporuči.
Isporučite UI, zatim isporučite igru
Igračko sučelje je tihi ubojica indie projekata. Igra može biti briljantna, ali ako izbornik izgleda kao zadana tema WordPressa, igrači će odustati za 90 sekundi. Uglađeno sučelje - kohezivni tokeni, ukotvljen HUD, čiste postavke, zadovoljavajući završni zaslon - ono je što čini 4-satni preuzimanje s itch.io da se osjeća kao pravi proizvod.
Preskočite 4-tjedni redizajn UI-a. Generirajte puni komplet od 6 površina tijekom vikenda, povežite ga i vratite se na to da igra bude zabavna.
Pregledajte vještine igračkog UI-a na Vibe Skills →
Prestanite graditi igračko sučelje od nule. Instalirajte vještinu UI kompleta na Vibe Skills i isporučite izbornik, HUD, inventar, postavke, pauzu i završni zaslon u jednom potezu.