Sed çîrokên amade ji bo Claude, Cursor, û bêtir bigerin.
UI ya Mchezo Ndio Sehemu Ngumu Zaidi ya Ukuzaji wa Indie (na Hakuna Mtu Anayezungumzia)
Wakuzaji wengi wa indie huwasilisha mchezo unaofanya kazi kwa siku mbili. Kisha hutumia miezi mitatu ijayo wakiwa wamekwama kwenye UI. Vitufe vinavyoonekana kama sanaa ya programu. Viwango vya juu vya HUD vinavyopigana na kamera. Gridi za hesabu zilizojengwa na position: absolute na maombi. Stadi za akili bandia kwa UI ya mchezo kwenye Vibe Skills huunda mifumo ya menyu yenye mshikamano, HUDs, na viwango vya juu kwa michezo ya kivinjari kwa kikao kimoja - ili uweze kuwasilisha mchezo, sio skrini ya mipangilio.
Mwongozo huu unatembea kupitia kwa nini UI huamua uhifadhi, nyuso sita za UI ambazo kila mchezo unahitaji, stadi za akili bandia za UI za mchezo zinazopatikana kwenye Vibe Skills, na mtiririko wa kazi wa wikendi ili kuwasilisha kifurushi kamili cha UI.
Sed çîrokên amade ji bo Claude, Cursor, û bêtir bigerin.
Kwa Nini UI ya Mchezo Huamua Uhifadhi
Wachezaji hukumu mchezo wako katika sekunde 90 za kwanza, na sekunde nyingi za hizo hutumiwa ndani ya UI. Menyu kuu, mipangilio, vidokezo vya udhibiti, HUD ya kwanza wanayoona mchezo unapoanza. Ikiwa UI inahisi ya kutatanisha, uchezaji hautapata nafasi kamwe.
Idadi chache za thamani ya kuzishika akilini:
- 38% ya wachezaji huacha mchezo wa kivinjari katika kipindi cha kwanza ikiwa menyu kuu inahisi imeharibika au haijapambwa kwa mtindo (data ya majaribio ya itch.io, 2025).
- Menyu kuu ya Hollow Knight's ina vitufe 4, imechorwa kwa mkono, na inafanya kazi kwa 60fps - na ni moja ya sababu zilizotajwa zaidi wachezaji hukaa kwa dakika 30 za kwanza za kikatili.
- Skrini ya kusimamisha ya Celeste's hutumia ukubwa wa fonti 3 na rangi 2. Hiyo ndiyo mfumo mzima wa UI. Kizuizi kinasomwa kama ubora.
- Michezo ya bajeti kubwa hutumia 15-20% ya bajeti nzima ya uzalishaji wao kwa UI/UX. Wakuzaji wa Indie kawaida hutumia 0%.
Pengo hilo ni hasa kile ambacho stadi za akili bandia zimejengwa ili kuziba.
Sed çîrokên amade ji bo Claude, Cursor, û bêtir bigerin.
Nyuso Sita za UI Ambazo Kila Mchezo Unahitaji
Kabla ya kutengeneza chochote, jua unachotengeneza. Kila mchezo wa kivinjari - mchezaji wa 2D, mpiga risasi wa 3D, kibofusha kisicho na maana, simu ya kutembea - unahitaji nyuso sita za UI sawa. Stadi nzuri ya akili bandia huwasilisha zote katika mfumo mmoja wa mtindo unaoshikamana.
| Uso | Madhumuni | Makosa ya kawaida | "Mzuri" huonekana kama nini |
|---|---|---|---|
| Menyu kuu | Hisia ya kwanza. Huweka mwelekeo wa sanaa. | Fonti za kivinjari za chaguo - msingi, maandishi yaliyotiwa katikati, hakuna hali za kuonyesha | Vituni 3-5 vya juu, tipografia maalum, uhuishaji mdogo wa kuonyesha, kitanzi cha nyuma |
| Kiwango cha juu cha HUD | Habari ndani ya mchezo: afya, alama, risasi, muda | Nambari zinazoelea katika pembe za nasibu, hakuna kuunganishwa, hupigana na kamera | Zilizounganishwa na pembe, nusu-wazi, zilizounganishwa na aina ya data, hupotea wakati haifanyi kazi |
| Hesabu / seti | Skrini ya usimamizi wa bidhaa | Gridi ya nguzo 16, hakuna nadra ya bidhaa, vidokezo vinavyozuia skrini | Gridi ya nguzo 4-8, nadra iliyopambwa kwa rangi, kidokezo kando, buruta-na-acha au bonyeza |
| Mipangilio / chaguzi | Sauti, udhibiti, michoro | Orodha kubwa moja inayoweza kusogeza ya vitufe | Tabo (Sauti / Video / Udhibiti), vifaa vya kuteleza sio vitufe, "Tumia" + "Rudisha kwa chaguo - msingi" |
| Menyu ya kusimamisha | Uingiliaji wa katikati ya mchezo | Modali inayoficha mchezo mzima | Kiwango cha juu kwa uwazi wa 60%, chaguzi 4-5, "Rejesha" imewashwa kiotomatiki kwa kibodi |
| Skrini ya mwisho | Ushindi, kupoteza, au muhtasari wa kukimbia | "Mchezo Umekamilika" kwa herufi nyekundu Arial, hakuna kitufe cha kucheza tena | Muhtasari wa takwimu, CTA kubwa ya "Cheza Tena", "Menyu Kuu" ya pili |
Mchezo wenye nyuso 6 za UI zilizopambwa kwa mtindo huonekana umekamilika. Mchezo wenye nyuso 6 za UI ambazo hazijapambwa kwa mtindo huonekana kama mradi wa shule, haijalishi uchezaji ni mzuri kiasi gani.
Sehemu ngumu zaidi ni kuweka zote 6 zishikamane - familia sawa ya fonti, radius sawa ya kitufe, tabia sawa ya kuonyesha, palette sawa ya rangi. Hapo ndipo stadi za akili bandia hupata thamani yao.
5 Stadi za Akili Bandia za UI za Mchezo kwenye Vibe Skills
Jamii ya Michezo ya 3D kwenye Vibe Skills ina stadi 30+ zinazoshughulikia michezo kamili inayoweza kuchezwa na mifumo ya UI inayowazunguka. Hizi hapa ni stadi tano zilizo na usakinishaji mwingi zaidi unaozingatia UI.
| Stadi | Bora kwa | Injini | Matokeo |
|---|---|---|---|
| Jenereta ya Kifurushi cha UI cha Mchezo wa Kivinjari | UI kamili ya nyuso 6 katika mfumo mmoja unaoshikamana | Three.js, Phaser, JS ya kawaida | Mfumo wa kiwango cha juu cha HTML/CSS + karatasi za michoro |
| Mfumo wa Kiwango cha Juu cha HUD | HUD ndani ya mchezo tu (afya, alama, ramani ndogo, muda) | Three.js, Phaser, Unity WebGL, Godot HTML5 | Kiwango cha juu kilicho wekwa na CSS au michoro ya turubai |
| Pakiti ya Skrini ya Kusimamisha + Mipangilio | Kusimamisha, mipangilio, ramani upya ya udhibiti | Injini yoyote ya mchezo inayotegemea wavuti | Vipengele vya moduli vya React/HTML |
| Mfumo wa Hesabu + Kidokezo cha Vitu | Gridi za bidhaa, buruta-na-acha, rangi za nadra, vidokezo | Three.js, Phaser, Unity WebGL | Maktaba ya vipengele + templeti za kadi za bidhaa |
| Mchanganyiko wa Menyu Kuu + Skrini ya Mwisho | Hisia za kwanza na za mwisho | Yoyote | Menyu yenye uhuishaji na Lottie + skrini ya takwimu za mwisho wa mchezo |
Stadi zote 5 huwasilishwa na faili ya tokeni za muundo zilizoshirikiwa (rangi, fonti, nafasi, wepesi) ili nyuso zionekane kuwa zilitoka kwa mbuni yule yule. Kifurushi nyingi za indie za UI hufeli mtihani huu - menyu hutumia fonti moja, HUD hutumia nyingine, na wachezaji huona mara moja.
Vinjari stadi za Michezo ya 3D kwenye Vibe Skills →
Tengeneza Kifurushi Kamili cha UI cha Mchezo Katika Wikendi
Huu hapa ndio mtiririko halisi wa kazi unaotumiwa na wakuzaji wa indie wanaowasilisha michezo ya kivinjari kwenye itch.io na Newgrounds. Jumla ya muda: ~12 saa za kazi wakati wa wikendi.
Hatua ya 1: Chagua stadi ya UI kwenye Vibe Skills
Fungua kategoria ya Michezo ya 3D na usakinishe stadi ya Jenereta ya Kifurushi cha UI cha Mchezo wa Kivinjari. Ni moja tu ambayo huwasilisha nyuso zote 6 katika mfumo mmoja wa tokeni unaoshikamana. Ikiwa mchezo wako tayari una menyu zinazofanya kazi na unahitaji tu HUD, sakinisha stadi ya kipekee ya Kiwango cha Juu cha HUD badala yake.
Hatua ya 2: Bainisha "vibe" ya mchezo wako kwa maneno 3
Kabla ya kutengeneza, andika maneno 3 yanayoelezea toni ya mchezo wako. Mifano: "neon, kikatili, haraka" (mpiga risasi wa synthwave), "laini, ya maji, polepole" (mchezo wa uvuvi), "ngumu, retro, pikseli" (metroidvania). Stadi hutumia hizi kama pembejeo kwa palette ya rangi, chaguo la tipografia, na wepesi wa uhuishaji. Usikose hii - pembejeo ya jumla hutoa UI ya jumla.
Hatua ya 3: Tengeneza tokeni za muundo kwanza
Stadi hutengeneza faili ya tokens.css au usanidi wa Tailwind na palette yako, mrundikano wa fonti, radii za vitufe, 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 kwa kundi moja
Na tokeni zilizoidhinishwa, endesha kizazi kamili cha nyuso 6. Matokeo ni folda ya faili za HTML/CSS (au vipengele vya React, kulingana na injini yako) pamoja na karatasi ya michoro ya SVG kwa ikoni. Kwa Three.js au Phaser, tumia njia ya kiwango cha juu cha HTML (DOM iliyowekwa juu ya turubai na pointer-events: none kwenye kipeperushi). Kwa Unity WebGL au Godot HTML5, tumia lahaja inayotegemea turubai ambayo stadi hutengeneza.
Hatua ya 5: Unganisha kwenye mzunguko wa mchezo wako
Unganisha HUD na hali ya mchezo wako (thamani ya afya, alama, muda). Stadi nyingi ni pamoja na adapta ndogo ya GameUIState ambayo hufichua API ya setHealth(0.7) ili usilazimike kugusa vigezo vya CSS mwenyewe. Unganisha matukio ya kusimamisha, mipangilio, na ya mwisho ya mchezo na kishughulikiaji chako kilichopo cha pembejeo.
Hatua ya 6: Jaribu na watu 3 wageni na urekebishe
Marafiki watakuambia UI ni nzuri. Wageni watakuambia ukweli. Chapisha build kwenye itch.io, waombe watu 3 wa nasibu kucheza kwa dakika 5, na uangalie rekodi. Hitilafu za UI ambazo ni muhimu zitaonekana katika dakika 60 za kwanza. Rekebisha hizo, tengeneza tena uso ulioathiriwa, wasilisha.
Jumla ya muda: Hatua ya 1-3 (~1 saa) + Hatua ya 4 (~30 dakika) + Hatua ya 5 (~6-8 saa za ujumuishaji) + Hatua ya 6 (~3 saa za mizunguko ya majaribio) = wikendi.
Mbuni wa UI wa kujitegemea angegharimu $3,000-$8,000 kwa kiwango sawa na kuchukua wiki 4-6. Usajili kwenye Vibe Skills huanza kwa $39/mwezi na hukupa vizazi visivyo na kikomo - kwa hivyo unaweza kurudia mara nyingi unavyotaka hadi UI iwe sawa.
Sakinisha stadi ya UI ya mchezo kwenye Vibe Skills →
Maswali Yanayoulizwa Sana
Je, nilitengeneza UI ya mchezo wangu kama kiwango cha juu cha HTML/CSS au moja kwa moja kwenye turubai?
Kwa michezo mingi ya kivinjari, kiwango cha juu cha HTML/CSS juu ya turubai ya Three.js au Phaser huwezesha uundaji haraka, ni rahisi kufanya ipatikane, na huonyesha maandishi kwa uwazi kwa azimio lolote. Tumia UI inayotegemea turubai tu wakati unahitaji uthabiti wa sanaa wa pikseli kamili (mchezo mgumu wa sanaa ya pikseli) au wakati matukio ya DOM yanapoingilia pembejeo. Stadi kwenye Vibe Skills hutengeneza lahaja zote mbili.
Je, UI itafanya kazi kwenye simu, au ninahitaji build tofauti ya simu?
Kifurushi cha UI cha Mchezo wa Kivinjari kwenye Vibe Skills hutengeneza mipangilio inayojibu ambayo hufanya kazi kwenye vifaa vya kugusa mara moja - malengo makubwa ya kugusa, badili-ndani ya viwango vya juu vya udhibiti wa simu (D-pad na vitufe vya vitendo), na menyu ya kusimamisha inayotangulia simu. Huwi na build tofauti, lakini unahitaji kujaribu kwenye simu halisi. Zana za kivinjari huwadanganya kuhusu utendaji wa kugusa.
Uhifadhi wa UI wa mchezo unaweza kuwa mzuri kiasi gani?
Michezo ya kivinjari inaweza kufikia WCAG AA kwa urahisi kwa menyu, mipangilio, na HUDs - urambazaji wa kibodi, pete za kuzingatia, utofauti wa rangi 4.5:1, na lebo za kisomaji skrini kwenye alama na afya. Njia ya kiwango cha juu cha HTML hufanya haya yote kuwa bure kabisa. Stadi kwenye Vibe Skills hutengeneza markup inayopatikana kwa chaguo - msingi. Uchezaji halisi ni mgumu zaidi kupatikana, lakini UI haipaswi kuwa kizuizi.
Je, kifurushi sawa cha UI hufanya kazi kwa build za Unity WebGL na Godot HTML5?
Ndio, kwa kiasi kikubwa. Unity WebGL na Godot HTML5 zote huonyesha kwenye turubai, na unaweza kuweka kiwango cha juu cha DOM juu yake. Stadi ni pamoja na adapta kwa injini zote mbili ili UI izungumze na hali ya mchezo wako. Vipengele maalum vya Unity (kama mfumo wa tukio uliojengwa ndani) vinahitaji daraja nyembamba - stadi hutengeneza sampuli ya nambari kwa daraja hilo.
Ninawezaje kuweka menyu, HUD, na hesabu ziwe sawa kwa kuonekana?
Hii ndiyo sababu #1 kwa nini UI ya mchezo wa indie huonekana amateurish - nyuso 6 zilizoundwa peke yao. Suluhisho ni tokeni za muundo zilizoshirikiwa: faili moja inayofafanua rangi, fonti, nafasi, na wepesi. Kila uso huagiza kutoka kwa faili hiyo. Stadi kwenye Vibe Skills hufanya hivi kiotomatiki - tengeneza tokeni mara moja, tengeneza nyuso zote 6 kutoka kwa tokeni hizo, umefanya.
Je, ninaweza kurekebisha UI iliyotengenezwa bila kuharibu stadi?
Ndio. Stadi hutengeneza HTML, CSS, na (hiari) vipengele vya React vinavyoweza kuhaririwa. Unamiliki faili. Wakuzaji wengi hurekebisha rangi, hubadilisha nembo, hubadilisha ikoni, na hubadilisha maumbo ya vitufe moja au mbili - hiyo ndiyo yote. Ikiwa unahitaji mabadiliko makubwa ya mtindo, tengeneza tena kutoka kwa tokeni zilizosasishwa badala ya kuandika nyuso kwa mkono.
Je, ikiwa mchezo wangu tayari una UI iliyojengwa nusu - je, nilitupa nje?
Hapana. Sakinisha stadi ya Kiwango cha Juu cha HUD au Pakiti ya Skrini ya Kusimamisha + Mipangilio pekee na ubadilishe uso mmoja kwa wakati. Wakuzaji wengi wa indie huboresha menyu kuu kwanza (muonekano wa juu zaidi), kisha HUD (inayotumiwa zaidi), kisha mipangilio na kusimamisha (inayotumiwa kidogo lakini imeharibika zaidi). Utahisi kuruka kwa ubora baada ya uso wa kwanza kusilishwa.
Wasilisha UI, Kisha Wasilisha Mchezo
UI ya mchezo ni muuaji kimya wa miradi ya indie. Uchezaji unaweza kuwa mzuri, lakini ikiwa menyu inaonekana kama mandhari chaguo-msingi ya WordPress, wachezaji huzunguka ndani ya sekunde 90. UI iliyopambwa kwa mtindo - tokeni zinazoshikamana, HUD iliyo na nanga, mipangilio safi, skrini ya mwisho ya kuridhisha - ndiyo inayofanya upakuaji wa saa 4 wa itch.io uhisi kama bidhaa halisi.
Ruka muundo upya wa UI wa wiki 4. Tengeneza kifurushi kamili cha nyuso 6 katika wikendi, unganisha, na urudi kwenye kufanya mchezo uwe wa kufurahisha.
Vinjari stadi za UI za mchezo kwenye Vibe Skills →
Acha kutengeneza UI ya mchezo kutoka mwanzo. Sakinisha stadi ya kifurushi cha UI kwenye Vibe Skills na wasilisha menyu, HUD, hesabu, mipangilio, kusimamisha, na skrini ya mwisho kwa kikao kimoja.