Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Jokoaren UI-a da Indie Garapenaren Zailena (Eta Inork Ez Du Honi Buruz Hitz E ten)
Indie garatzaile gehienek joko prototipo funtzional bat ateratzen dute bi astean. Gero, hurrengo hiru hilabeteak UI-an trabatuta pasatzen dituzte. Programatzaileen artea diruditen botoiak. Kamerarekin borrokatzen diren HUD gainjarriak. position: absolute eta otoitzekin egindako inbentario-sareak. Vibe Skills gunean jokoaren UI-rako gaitasun adimendunek menu-sistema koherenteak, HUDak eta arakatzaile-jokoetarako gainjarriak sortzen dituzte saio bakar batean - horrela jokoa aterako duzu, ez ezarpenen pantaila.
Gida honek azalduko du zergatik UI-ak erabakitzen duen atxikipena, joko bakoitzak behar dituen sei UI-azal, Vibe Skills-en eskuragarri dauden jokoaren UI gaitasun adimendunak eta asteburu bateko lan-prozesu bat UI kit oso bat ateratzeko.
Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Zergatik Jokoaren UI-ak Erabakitzen Du Atxikipena
Jokalariek zure jokoa epaitzen dute lehen 90 segundoetan, eta segundu horietatik gehienak UI-an pasatzen dira. Menu nagusia, ezarpenak, kontrolen pistak, jokoa hasten denean ikusten duten lehen HUDa. UI-a trakets sentitzen bada, jokagarritasunak ez du inoiz aukerarik jasotzen.
Buruan edukitzeko zenbaki batzuk:
- Arakatzaile-joko bateko jokalarien %38ak uzten du lehen saioan, menu nagusia hondatuta edo apaindu gabe badago (itch.io playtest datuak, 2025).
- Hollow Knight-en menu nagusiak 4 botoi ditu, eskuz marraztuta, eta 60fps-tan funtzionatzen du - eta jokalariak lehen 30 minutu gogorretan jarraitzeko arrazoi nagusienetako bat da.
- Celeste-en pausatzeko pantailak 3 letra-tamaina eta 2 kolore erabiltzen ditu. Hori da UI sistema osoa. Edukitzak kalitatea irakurtzen du.
- Aurrekontu handiko jokoek beren ekoizpen-aurrekontu osoaren %15-20 gastatzen dute UI/UX-ean. Indie garatzaileek, normalean, %0 gastatzen dute.
Hutsune hori da zehazki gaitasun adimendunak ixteko eraiki direnak.
Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Joko Bakoitzak Behar Dituen Sei UI-Azalak
Ezer sortu aurretik, jakin zer sortzen ari zaren. Arakatzaile-joko orok - 2D plataformeroa, 3D shooterra, klik-joko geldiak, ibiltzeko simulazioa - UI-azal berberak behar ditu. Gaitasun adimendun on batek guztiak ateratzen ditu estilo-sistema koherente batean.
| Azala | Helburua | Ohiko akatsak | Zer dirudi "ona"? |
|---|---|---|---|
| Menu nagusia | Lehen inpresioa. Arte-zuzendaritza ezartzen du. | Arakatzaileko letra tipo lehenetsiak, testua zentraturik, hover-egoerarik gabe | 3-5 botoi gehienez, tipografia pertsonalizatua, hover mikro-animazioa, atzeko planoaren begizta |
| HUD gainjarria | Jokoaren barruko informazioa: osasuna, puntuazioa, munizioa, tenporizadorea | Zenbakiak leku zehaztugabeetan flotatzen, taldekaturik gabe, kamerarekin borrokan | Ertzetan ainguratuta, erdi-gardena, datu-motaren arabera taldekatuta, geldi dagoenean desagertzen da |
| Inbentarioa / Ekipamendua | Elementuen kudeaketa-pantaila | 16 zutabetako sarea, elementuen arrartasunik gabe, pantaila blokeatzen duten tresna-aholkuak | 4-8 zutabetako sarea, kolorez kodetutako arrartasuna, alboan tresna-aholkuak, arrastatu eta jaregiteko edo klik egiteko |
| Ezarpenak / Aukerak | Audioa, kontrolak, grafikoak | Txandakatzeen zerrenda erraldoi bakarra | Fitxak (Audio / Bideoa / Kontrolak), txandakatzeak baino graduatzaileak, "Aplikatu" + "Berrezarri lehenetsira" |
| Pausatzeko menua | Jokoaren erdiko etenaldia | Joko osoa ezkutatzen duen modal bat | %60ko opakutasuneko gainjarria, 4-5 aukera, teklaturako "Berrekin" automatikoki fokuratuta |
| Amaiera-pantaila | Irabazi, galdu edo lasterketaren laburpena | "Jokoa Amaitu" letra gorriz Arialen, erreproduzitzeko botoirik gabe | Estatistiken laburpena, "Berriro Jokatu" CTA handia, bigarren mailako "Menu Nagusia" |
UI gainjarri landu batekin joko batek amaituta dirudi. UI moldatu gabeko 6 batek, berriz, eskola-proiektu baten antzera dirudi, jokagarritasuna ona izan arren.
Zailena 6ak koherente mantentzea da - letra-familia bera, botoi-erradio bera, hover-portaera bera, kolore-paleta bera. Hor dira gaitasun adimendunak beren balioa erakusten dutenak.
Vibe Skills-en 5 Jokoaren UI Gaitasun Adimendun
Vibe Skills-en 3D Jokoak kategoria lanean, 30+ gaitasun daude joko osoak eta hauen inguruan ateratzen diren UI sistemak hartzen dituztenak. Hona hemen gehien instalatutako bost gaitasun, UI-an zentratuta.
| Gaitasuna | Onena | Motorrak | Irteera |
|---|---|---|---|
| Arakatzaile Jokoaren UI Kit Generatzailea | UI 6-azal oso bat estilo koherente batean | Three.js, Phaser, JS hutsik | HTML/CSS gainjarri sistema + sprite orriak |
| HUD Gainjarri Sistema | Jokoaren barruko HUDa bakarrik (osasuna, puntuazioa, minimapa, tenporizadorea) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-posizionaturiko gainjarria edo canvas sprites |
| Pausatu + Ezarpenak Pantaila Paketea | Pausa, ezarpenak, kontrolak berriro mapatzea | Web-oinarritutako edozein joko-motor | React/HTML modal osagaiak |
| Inbentarioa + Loot Tresna-Aholku Sistema | Elementu-sareak, arrastatu eta jaregiteko, arrartasun koloreak, tresna-aholkuak | Three.js, Phaser, Unity WebGL | Osagaien liburutegia + elementu-txartel txantiloiak |
| Menu Nagusia + Amaiera-Pantaila Konbinazioa | Lehen eta azken inpresioak | Edonola | Animaziozko menua Lottie-rekin + joko amaierako estatistika pantaila |
5 gaitasunek diseinu-token fitxategi partekatua dute (koloreak, letra tipoak, tartea, erraztasuna) beraz, azalak diseinatzaile beretik datozela dirudi. Indie UI kit gehienek huts egiten dute proba honetan - menuan letra tipo bat erabiltzen da, HUDean beste bat, eta jokalariek berehala nabaritzen dute.
Arakatu 3D Jokoen gaitasunak Vibe Skills-en →
Eraiki Jokoaren UI Kit Oso Bat Asteburu Batean
Hona hemen itch.io eta Newgrounds-en arakatzaile-jokoak ateratzen dituzten indie garatzaileek erabiltzen duten benetako lan-prozesua. Denbora guztira: ~12 ordu lan asteburu batean.
1. Urratsea: Aukeratu UI gaitasun bat Vibe Skills-en
Ireki 3D Jokoak kategoria eta instalatu Arakatzaile Jokoaren UI Kit Generatzailea gaitasuna. Hau da 6 azala sistema token koherente batean ateratzen dituen bakarra. Zure jokoak dagoeneko menu funtzionalak baditu eta HUD bat bakarrik behar baduzu, instalatu HUD Gainjarri gaitasun autonomoa ordez.
2. Urratsea: Definitu zure jokoaren "vibea" 3 hitzetan
Sortu aurretik, idatzi zure jokoaren tonua deskribatzen duten 3 hitz. Adibideak: "neon, bortitza, azkarra" (synthwave shooter bat), "leuna, urtsua, polita" (arrantza joko bat), "lodia, retro, pixel" (metroidvania bat). Gaitasunak hauek sarrera gisa erabiltzen ditu kolore-paletarako, tipografia-aukeraketarako eta animazio-erraztasunetarako. Ez ezazu hau galdu - sarrera generikoak UI generikoa sortzen du.
3. Urratsea: Sortu diseinu-tokenak lehenengo
Gaitasunak tokens.css fitxategi bat edo zure paleta, letra-mota-pila, botoi-erradioak, tarte-eskala eta animazio-denbora duten Tailwind konfigurazio bat ateratzen du. Berrikusi hau benetako UI sortu aurretik. Tokenak hemen oker badaude, azal guztiak oker egongo dira. Doitu gustuko izan arte.
4. Urratsea: Sortu 6 azala aldi berean
Token onartuekin, exekutatu 6 azala sortzeko prozesu osoa. Irteera HTML/CSS fitxategien karpeta bat da (edo React osagaiak, zure motorraren arabera) eta ikonoetarako SVG sprite orri bat. Three.js edo Phaserrentzat, erabili HTML gainjarriaren ikuspegia (DOM canvasaren gainean pilatuta pointer-events: none dakarren wrapper-arekin). Unity WebGL edo Godot HTML5entzat, erabili gaitasunak ateratzen duen canvas-oinarritutako aldaera.
5. Urratsea: Kableatu zure joko-begiztan
Konektatu HUDa zure jokoaren egoerara (osasun-balioa, puntuazioa, tenporizadorea). Gaitasun gehienek GameUIState egokigailu txiki bat dute, setHealth(0.7) API bat eskaintzen duena, horrela ez duzu CSS aldagaiak eskuz ukitu beharrik. Kableatu pauso, ezarpen eta amaiera-pantailako gertaerak zure lehendik dagoen sarrera-hartzaileari.
6. Urratsea: Jokatu 3 ezezagunekin eta berrikusi
Lagunek esango dizute UI-a bikaina dela. Ezezagunek egia esango dizute. Argitaratu build bat itch.io-ra, eskatu 3 pertsona anonimori 5 minutuz jolasteko, eta ikusi grabazioa. Garrantzitsuak diren UI akatsak lehen 60 segunduetan agertuko dira. Konpondu horiek, sortu berriro kaltetutako azal bat, atera.
Denbora guztira: 1-3 urratsak (~1 ordu) + 4. urratsa (~30 minutu) + 5. urratsa (~6-8 ordu integrazio) + 6. urratsa (~3 ordu playtest zikloak) = asteburu bat.
Freelance UI diseinatzaile batek $3.000-$8.000 kobratuko luke antzeko eskaintzagatik eta 4-6 aste beharko lituzke. Vibe Skills harpidetza batek 39 $/hilean hasten da eta mugagabeko sorrerak ematen dizkizu - horrela, nahi adina aldiz egin dezakezu iteration UI egokia izan arte.
Instalatu jokoaren UI gaitasun bat Vibe Skills-en →
Galdera Ohikoenak
Nire jokoaren UI-a HTML/CSS gainjarri gisa eraiki behar dut ala zuzenean canvas-ean?
Arakatzaile-joko gehienentzat, Three.js edo Phaser canvas gainean HTML/CSS gainjarri bat eraikitzeko azkarragoa da, irisgarriagoa egiteko errazagoa eta testua bereizmen guztietan zorrotz errendatzen du. Erabili canvas-oinarritutako UI soilik pixel-perfektua den arte-koherentzia behar baduzu (pixel-arteko joko zorrotza) edo DOM gertaerek sarrerarekin oztopatzen badute. Vibe Skills gaitasunek bi aldaera ateratzen dituzte.
UI-ak mugikorrean funtzionatuko du, ala aparteko mugikor-build bat behar dut?
Vibe Skills-en Arakatzaile Jokoaren UI Kitak diseinu moldagarriak sortzen ditu, ukitu-gailuetan zuzenean funtzionatzen dutenak - sakatu-target handiagoak, mugikorreko kontrol-gainjarriak (D-pad eta ekintza-botoiak), eta mugikorreko lehen pauso-menua. Ez duzu aparteko build beharrik, baina telefono batean probatu behar duzu. Arakatzailearen garapen-tresnak gezurrak esaten dituzte ukipen-errendimenduari buruz.
Zenbateko irisgarria izan daiteke jokoaren UI-a errealistatik?
Arakatzaile-jokoek WCAG AA erraz lor dezakete menu, ezarpen eta HUDentzat - teklatu bidezko nabigazioa, fokuzko eraztunak, kontraste kolorea 4.5:1, eta pantaila-irakurleen etiketak puntuazioan eta osasunean. HTML gainjarriaren ikuspegiak ia doako egiten du hori guztia. Vibe Skills-en gaitasunek irisgarri markak sortzen dituzte lehenetsita. Benetako jokagarritasuna irisgarriagoa egitea zailagoa da, baina UI-ak ez du oztopo izan behar.
UI kit berak funtzionatzen du Unity WebGL eta Godot HTML5 build-ekin?
Oro har, bai. Unity WebGL eta Godot HTML5ek canvas-era errendatzen dute, eta gainean DOM gainjarri bat jar dezakezu. Gaitasunek bi motorrentzako egokigailuak dituzte, horrela UI-ak zure jokoaren egoerarekin hitz egiten du. Unity-ren ezaugarri espezifikoek (bere gertakari-sistema integratua bezala) zubi mehe bat behar dute - gaitasunak horretarako adibide-kodea ateratzen du.
Nola mantentzen dut menua, HUDa eta inbentarioa bisualki koherenteak?
Hau da indie jokoaren UI amateurra dirudien arrazoi nagusia - isolatuta diseinatutako 6 azalak. Konponbidea diseinu-token partekatuak dira: koloreak, letra tipoak, tartea eta erraztasuna definitzen dituen fitxategi bakarra. Azal bakoitzak fitxategi horretatik inportatzen du. Vibe Skills gaitasunek hau automatikoki egiten dute - tokenak behin sortu, 6 azalak token horietatik sortu, egina.
Sortutako UI-a pertsonaliza dezaket gaitasuna hautsi gabe?
Bai. Gaitasunak editagarriak diren HTML, CSS eta (aukerako) React osagaiak ateratzen ditu. Fitxategien jabe zara. Garatzaile gehienek koloreak doitu, logo bat aldatu, ikonoak ordezkatu eta botoi batzuk edo biren formak aldatu egiten dituzte - horixe da dena. Estilo-aldaketa handia behar baduzu, sortu berriro token eguneratuetatik azalak eskuz berriro idatzi beharrean.
Zer gertatzen da nire jokoak erdi-eraikitako UI bat badu jada - bota behar dut?
Ez. Instalatu HUD Gainjarri gaitasuna edo Pausatu + Ezarpenak Pakete autonomoa eta ordezkatu azal bat aldi berean. Indie garatzaile gehienek menu nagusia berritzen dute lehenik (ikusgarritasun handiena), gero HUDa (gehien erabiltzen dena), gero ezarpenak eta pausoa (gutxien erabiltzen direnak baina gehien hondatuta). Kalitate-saltoa sentituko duzu lehen azal bat atera ondoren.
Atera UI-a, Gero Jokoa
Jokoaren UI-a indie proiektuen hiltzaile isila da. Jokagarritasuna bikaina izan daiteke, baina menua WordPress lehenetsiaren antzera badirudi, jokalariek 90 segundotan jauzi egiten dute. UI landuak - token koherenteak, ainguratutako HUDa, ezarpen garbiak, amaiera-pantaila atsegina - horixe da 4 orduko itch.io deskarga produktu erreal bat bezala sentiarazten duena.
Salto egin 4 asteko UI berritasunari. Sortu 6 azala kit bat asteburu batean, kableatu, eta itzuli jokoa dibertigarriagoa egiten.
Arakatu jokoaren UI gaitasunak Vibe Skills-en →
Utzi jokoaren UI-a hutsetik eraikitzen. Instalatu UI kit gaitasun bat Vibe Skills-en eta atera menua, HUDa, inbentarioa, ezarpenak, pausoa eta amaiera-pantaila saio bakar batean.