Tirohia ngā rau mahi ā-AI kua oti te whakarite mō Claude, Cursor, me ētahi atu.
UI ya Michezo Ndiyo Sehemu Ngumu Zaidi ya Utengenezaji wa Indie (na Hakuna Mtu Anayezungumzia)
Wasanidi wengi wa indie huwasilisha mfano unaofanya kazi wa mchezo kwa wiki mbili. Kisha hutumia miezi mitatu ijayo wakiwa wamekwama kwenye UI. Vifungo vinavyoonekana kama sanaa ya programu. Miundo ya juu ya HUD inayopambana na kamera. Gridi za hesabu zilizojengwa kwa position: absolute na maombi. Maarifa ya akili bandia kwa UI ya mchezo kwenye Vibe Skills huunda mifumo ya menyu iliyoungana, HUDs, na miundo ya juu kwa michezo ya vivinjari kwa muda mmoja - ili uweze kuwasilisha mchezo, sio skrini ya mipangilio.
Mwongozo huu unajadili kwa nini UI huamua uhifadhi, nyuso sita za UI ambazo kila mchezo unahitaji, maarifa ya akili bandia ya mchezo UI zinazopatikana kwenye Vibe Skills, na mtiririko wa kazi wa wikendi ili kuwasilisha kifaa kamili cha UI.
Tirohia ngā rau mahi ā-AI kua oti te whakarite mō Claude, Cursor, me ētahi atu.
Kwa Nini UI ya Michezo Huamua Uhifadhi
Wachezaji hukumu mchezo wako katika dakika 90 za kwanza, na dakika hizo nyingi hutumiwa ndani ya UI. Menyu kuu, mipangilio, vidokezo vya udhibiti, HUD ya kwanza wanayoona wakati mchezo unapoanza. Ikiwa UI inahisi haina maana, uchezaji kamwe haupati nafasi.
Takwimu chache za kuzingatia:
- 38% ya wachezaji huacha mchezo wa kivinjari katika kipindi cha kwanza ikiwa menyu kuu inahisi imeharibika au haijapambwa (data ya majaribio ya itch.io, 2025).
- Menyu kuu ya Hollow Knight ina vifungo 4, imechorwa kwa mkono, na inafanya kazi kwa 60fps - na ni moja ya sababu zinazotajwa zaidi wachezaji hukaa kwa dakika 30 za kwanza ngumu.
- Skrini ya kusitisha ya Celeste hutumia saizi 3 za aina na rangi 2. Hiyo ndiyo mfumo mzima wa UI. Kujizuia kunasomwa kama ubora.
- Michezo ya bajeti kubwa hutumia 15-20% ya bajeti yao yote ya uzalishaji kwa UI/UX. Wasanidi wa indie kwa kawaida hutumia 0%.
Pengo hilo ndilo hasa akili bandia zinaundwa kufidia.
Tirohia ngā rau mahi ā-AI kua oti te whakarite mō Claude, Cursor, me ētahi atu.
Nyuso Sita za UI Kila Mchezo Unazohitaji
Kabla ya kutengeneza chochote, jua unachotengeneza. Kila mchezo wa kivinjari - mpiganaji wa 2D, mpiga risasi wa 3D, kibofusha tupu, kiigamizi cha kutembea - unahitaji nyuso sita za UI sawa. Maarifa mazuri ya akili bandia huwasilisha zote katika mfumo mmoja wa mtindo ulioambatana.
| Uso | Kusudi | Makosa ya kawaida | "Nzuri" inaonekanaje |
|---|---|---|---|
| Menyu kuu | Kwanza kuona. Huweka mwelekeo wa sanaa. | Fonti za kivinjari za kiwango, maandishi yaliyowekwa katikati, hakuna hali za kubandika | Vifungo 3-5 vya juu, tipografia maalum, uhuishaji mdogo wa kubandika, kitanzi cha usuli |
| Muundo wa juu wa HUD | Taarifa ya ndani ya mchezo: afya, alama, risasi, muda | Nambari zinazoelea kwenye pembe za nasibu, hakuna upangaji, hupambana na kamera | Zimeunganishwa kwenye pembe, nusu-wazi, zimepangwa na aina ya data, hufifia wakati haifanyi kazi |
| Hesabu / mzigo | Skrini ya usimamizi wa bidhaa | Gridi ya safu 16, hakuna nadra ya bidhaa, vidokezo vinavyofunika skrini | Gridi ya safu 4-8, nadra ya kupangwa kwa rangi, kidokezo upande, buruta na uangushe au bonyeza |
| Mipangilio / chaguo | Sauti, udhibiti, picha | Orodha moja kubwa inayoweza kusogeza ya vibadilishaji | Tabo (Sauti / Video / Udhibiti), viwezeshi sio vibadilishaji, "Weka" + "Rudisha kwa chaguo-msingi" |
| Menyu ya kusitisha | Kuingiliwa katikati ya mchezo | Kiini kinachoficha mchezo mzima | Muundo wa juu kwa uwazi wa 60%, chaguo 4-5, "Rejesha" imeangaziwa kiotomatiki kwa kibodi |
| Skrini ya mwisho | Ushindi, kupoteza, au muhtasari wa kukimbia | "Mchezo Umekwisha" kwa herufi nyekundu Arial, hakuna kitufe cha kucheza tena | Muhtasari wa takwimu, wito mkuu wa "Cheza Tena" CTA, "Menyu Kuu" ya pili |
Mchezo wenye nyuso 6 za UI zilizopambwa unahisi umekamilika. Mchezo wenye nyuso 6 za UI zisizo na mtindo unahisi kama mradi wa shule, haijalishi uchezaji ni mzuri kiasi gani.
Sehemu ngumu zaidi ni kuweka zote 6 kuwa sawa - familia sawa ya fonti, radius sawa ya kifungo, tabia sawa ya kubandika, palette sawa ya rangi. Hapo ndipo akili bandia hupata thamani yake.
5 Maarifa ya Akili Bandia ya UI ya Michezo kwenye Vibe Skills
Kategoria ya Michezo ya 3D kwenye Vibe Skills ina maarifa 30+ yanayohusu michezo kamili inayochezwa na mifumo ya UI inayowazunguka. Hapa kuna maarifa matano yanayowekwa zaidi yanayolenga UI.
| Maarifa | Bora kwa | Injini | Matokeo |
|---|---|---|---|
| Jenereta ya Kifaa cha UI cha Mchezo wa Kivinjari | UI kamili ya nyuso 6 katika mtindo mmoja ulioambatana | Three.js, Phaser, JS ya kawaida | Mfumo wa muundo wa juu wa HTML/CSS + karatasi za sprite |
| Mfumo wa Muundo wa Juu wa HUD | HUD tu ya ndani ya mchezo (afya, alama, ramani ndogo, muda) | Three.js, Phaser, Unity WebGL, Godot HTML5 | Muundo wa juu uliopangwa kwa CSS au sprites za turubai |
| Pakiti ya Skrini ya Kusitisha + Mipangilio | Kusitisha, mipangilio, ramani tena udhibiti | Injini yoyote ya mchezo inayotokana na wavuti | Vipengele vya kiini vya React/HTML |
| Mfumo wa Hesabu + Kidokezo cha Mzigo | Gridi za bidhaa, buruta na uangushe, rangi za nadra, vidokezo | Three.js, Phaser, Unity WebGL | Maktaba ya vipengele + templeti za kadi za bidhaa |
| Mchanganyiko wa Menyu Kuu + Skrini ya Mwisho | Kwanza na mwisho kuona | Yoyote | Menyu iliyohuishwa na Lottie + skrini ya takwimu za mwisho wa mchezo |
Maarifa yote 5 huwasilisha faili ya tokeni za muundo zilizoshirikiwa (rangi, fonti, nafasi, kufifia) ili nyuso zionekane kama zilitoka kwa mbuni yuleyule. Vifaa vingi vya indie UI vinashindwa mtihani huu - menyu hutumia fonti moja, HUD hutumia nyingine, na wachezaji hutambua mara moja.
Vinjari maarifa ya Michezo ya 3D kwenye Vibe Skills →
Tengeneza Kifaa Kamili cha UI cha Mchezo kwa Wikendi
Huu hapa ndio mtiririko wa kazi halisi unaotumiwa na wasanidi wa indie wanaowasilisha michezo ya kivinjari kwenye itch.io na Newgrounds. Wakati jumla: ~12 masaa ya kufanya kazi katika wikendi.
Hatua ya 1: Chagua maarifa ya UI kwenye Vibe Skills
Fungua kategoria ya Michezo ya 3D na usakinishe maarifa ya Jenereta ya Kifaa cha UI cha Mchezo wa Kivinjari. Ni moja tu inayowasilisha nyuso zote 6 katika mfumo mmoja wa tokeni ulioambatana. Ikiwa mchezo wako tayari una menyu zinazofanya kazi na unahitaji tu HUD, sakinisha maarifa ya Muundo wa Juu wa HUD pekee badala yake.
Hatua ya 2: Bainisha "vibe" ya mchezo wako kwa maneno 3
Kabla ya kutengeneza, andika maneno 3 yanayoelezea sauti ya mchezo wako. Mifano: "neon, kikatili, haraka" (mpiga risasi wa synthwave), "laini, yenye maji, polepole" (mchezo wa uvuvi), "nzito, retro, pikseli" (metroidvania). Maarifa hutumia haya kama pembejeo kwa palette ya rangi, uchaguzi wa tipografia, na kufifia kwa uhuishaji. Usikose hii - pembejeo ya kawaida hutoa UI ya kawaida.
Hatua ya 3: Tengeneza tokeni za muundo kwanza
Maarifa huwasilisha faili ya tokens.css au usanidi wa Tailwind na palette yako, rundo la fonti, radii za vifungo, kiwango cha nafasi, na muda wa uhuishaji. Kagua hii kabla ya kutengeneza UI halisi. Ikiwa tokeni zinaonekana vibaya hapa, kila uso utaonekana vibaya. Rekebisha hadi uipende.
Hatua ya 4: Tengeneza nyuso zote 6 katika kundi moja
Pamoja na tokeni zilizoidhinishwa, endesha utengenezaji kamili wa nyuso 6. Matokeo ni folda ya faili za HTML/CSS (au vipengele vya React, kulingana na injini yako) pamoja na karatasi ya sprite ya SVG kwa aikoni. Kwa Three.js au Phaser, tumia njia ya muundo wa juu wa HTML (DOM iliyowekwa juu ya turubai na pointer-events: none kwenye kishikiliaji). Kwa Unity WebGL au Godot HTML5, tumia lahaja inayotokana na turubai ambayo maarifa huwasilisha.
Hatua ya 5: Unganisha kwenye kitanzi cha mchezo wako
Unganisha HUD kwenye hali ya mchezo wako (thamani ya afya, alama, muda). Maarifa mengi yanajumuisha adapta ndogo ya GameUIState inayofunua API ya setHealth(0.7) ili usilazimike kugusa vigezo vya CSS mwenyewe. Unganisha matukio ya kusitisha, mipangilio, na mwisho wa mchezo kwenye kidhibiti chako cha pembejeo kilichopo.
Hatua ya 6: Jaribu na watu 3 wasiojulikana na urekebishe
Marafiki watakuambia UI ni nzuri. Watu wasiojulikana watakuambia ukweli. Chapisha toleo kwenye itch.io, waombe watu 3 wasiojulikana wacheze kwa dakika 5, na uangalie rekodi. Hitilafu za UI ambazo ni muhimu zitatokea katika dakika 60 za kwanza. Rekebisha hizo, tengeneza tena uso ulioathiriwa, wasilisha.
Wakati jumla: Hatua ya 1-3 (~1 saa) + Hatua ya 4 (~30 dakika) + Hatua ya 5 (~6-8 masaa ya ujumuishaji) + Hatua ya 6 (~3 masaa ya mizunguko ya majaribio) = wikendi.
Mbuni wa UI huru angeomba $3,000-$8,000 kwa wigo sawa na kuchukua wiki 4-6. Usajili kwenye Vibe Skills huanza kwa $39/mwezi na hukupa vizazi visivyo na kikomo - kwa hivyo unaweza kurekebisha mara nyingi unavyotaka hadi UI ihisi sawa.
Sakinisha maarifa ya UI ya mchezo kwenye Vibe Skills →
Maswali Yanayoulizwa Sana
Je, nipaswa kuunda UI ya mchezo wangu kama muundo wa juu wa HTML/CSS au moja kwa moja kwenye turubai?
Kwa michezo mingi ya vivinjari, muundo wa juu wa HTML/CSS juu ya turubai ya Three.js au Phaser huwezesha uundaji haraka, ni rahisi kufanya ipatikane, na huonyesha maandishi kwa ukali katika azimio lolote. Tumia UI inayotokana na turubai tu wakati unahitaji uthabiti wa sanaa unaofaa pikseli (mchezo mkali wa sanaa ya pikseli) au wakati matukio ya DOM yanapoingilia pembejeo. Maarifa kwenye Vibe Skills huwasilisha lahaja zote mbili.
Je, UI itafanya kazi kwenye vifaa vya rununu, au ninahitaji toleo tofauti la rununu?
Kifaa cha UI cha Mchezo wa Kivinjari kwenye Vibe Skills hutengeneza miundo inayorejesha inayofanya kazi kwenye vifaa vya kugusa nje ya boksi - malengo makubwa ya kugusa, badilisha juu miundo ya udhibiti wa rununu (D-pad na vifungo vya vitendo), na menyu ya kusitisha kwanza kwa rununu. Huendi kuhitaji toleo tofauti, lakini unahitaji kujaribu kwenye simu halisi. Zana za watengenezaji wa vivinjari hughuudhi utendaji wa kugusa.
Je, UI ya mchezo inaweza kupatikana kwa kweli?
Michezo ya vivinjari inaweza kufikia WCAG AA kwa urahisi kwa menyu, mipangilio, na HUDs - urambazaji wa kibodi, pete za kuzingatia, utofautishaji wa rangi 4.5:1, na lebo za kisomaji skrini kwa alama na afya. Njia ya muundo wa juu wa HTML hufanya haya yote kuwa karibu bure. Maarifa kwenye Vibe Skills hutengeneza alama inayopatikana kwa chaguo-msingi. Uchezaji halisi ni ngumu zaidi kufanya upatikane, lakini UI haipaswi kuwa kizuizi.
Je, kifaa sawa cha UI hufanya kazi kwa Unity WebGL na Godot HTML5?
Ndio, zaidi ya yote. Unity WebGL na Godot HTML5 zote huonyesha kwenye turubai, na unaweza kuweka muundo wa juu wa DOM juu yake. Maarifa hujumuisha adapta kwa injini zote mbili ili UI izungumze na hali ya mchezo wako. Vipengele maalum vya Unity (kama mfumo wa matukio uliojengwa ndani) vinahitaji daraja nyembamba - maarifa huwasilisha nambari ya sampuli kwa daraja hilo.
Ninawezaje kuweka menyu, HUD, na hesabu kuwa sawa kimuonekano?
Hii ndiyo sababu #1 ambayo UI ya mchezo wa indie inaonekana amateurish - nyuso 6 zilizoundwa kwa kutengwa. Suluhisho ni tokeni za muundo zilizoshirikiwa: faili moja inayobainisha rangi, fonti, nafasi, na kufifia. Kila uso huagiza kutoka kwa faili hiyo. Maarifa kwenye Vibe Skills hufanya hivi kiotomatiki - tengeneza tokeni mara moja, tengeneza nyuso zote 6 kutoka kwa tokeni hizo, umemaliza.
Je, ninaweza kubadilisha UI iliyotengenezwa bila kuharibu maarifa?
Ndio. Maarifa huwasilisha faili za HTML, CSS, na (hiari) vipengele vya React zinazoweza kuhaririwa. Unamiliki faili hizo. Wasanidi wengi hubadilisha rangi, hubadilisha nembo, hubadilisha aikoni, na hubadilisha maumbo ya vifungo moja au mawili - ndio hiyo tu. Ikiwa unahitaji mabadiliko makubwa ya mtindo, tengeneza tena kutoka kwa tokeni zilizosasishwa badala ya kuandika nyuso kwa mikono.
Je, ikiwa mchezo wangu tayari una UI iliyojengwa nusu - je, nilitakiwa kuiondoa?
Hapana. Sakinisha maarifa ya Muundo wa Juu wa HUD au Pakiti ya Kusitisha + Mipangilio pekee na ubadilishe uso mmoja kwa wakati. Wasanidi wengi wa indie huboresha menyu kuu kwanza (mwonekano wa juu zaidi), kisha HUD (inayotumiwa zaidi), kisha mipangilio na kusitisha (inayotumiwa kidogo lakini imeharibika zaidi). Utahisi kuruka kwa ubora baada ya uso wa kwanza kuwasilishwa.
Washa UI, Kisha Washa Mchezo
UI ya mchezo ndiyo muuaji kimya wa miradi ya indie. Uchezaji unaweza kuwa mzuri, lakini ikiwa menyu inaonekana kama mandhari chaguomsingi ya WordPress, wachezaji wataondoka baada ya dakika 90. UI iliyopambwa - tokeni zilizoambatana, HUD iliyowekwa, mipangilio safi, skrini ya mwisho ya kuridhisha - ndiyo inayofanya upakuaji wa saa 4 wa itch.io uhisi kama bidhaa halisi.
Ruka muundo mpya wa UI wa wiki 4. Tengeneza kifaa kamili cha nyuso 6 kwa wikendi, uunganishe, na urudi kwenye kutengeneza mchezo uwe wa kufurahisha.
Vinjari maarifa ya UI ya mchezo kwenye Vibe Skills →
Acha kutengeneza UI ya mchezo kutoka mwanzo. Sakinisha maarifa ya kifaa cha UI kwenye Vibe Skills na wasilisha menyu, HUD, hesabu, mipangilio, kusitisha, na skrini ya mwisho kwa muda mmoja.