Sura ibihumbi by'ibikorwa byiteguye kuri Claude, Cursor, n'ibindi.
Umukino w'ikoranabuhanga ureshya niwo munini kubadandaza bo hagati ( kandi nta muntu ubivuga)
Abakora ibikorwa byo hagati benshi bashyira ku murongo umukino wakora mu minsi ibiri. Hanyuma bakamara amezi atatu bakikoreye ibijyanye na UI. Ibishobore bigaragara nk'ubuhanzi bw'abateguye. Igikoresho cy'ikibaho kidashimishije kimwe n'ikindi gifite imbogamizi ku bintu bigaragara. Ibice by'ububiko byubatswe hamwe na position: absolute n'amasengesho. Ubuhanga bwa mudasobwa ku mukino w'ikoranabuhanga kuri Vibe Skills buhanga imikoro ihamye, ibikoresho byo hejuru, n'ibikoresho by'ububiko by'imikino yo ku rubuga mu gihe kimwe - bityo ushobora kohereza umukino, atari urupapuro rw'ibishobore.
Iyi ntwaro igenda inyura muri impamvu UI yemeza gusubira inyuma, ibice bitandatu UI buri mukino uba ukeneye, ubuhanga bwa mudasobwa kuri UI y'umukino buri kuri Vibe Skills, hamwe n'akazi k'icyumweru kugirango wohereze ibikoresho byose bya UI.
Sura ibihumbi by'ibikorwa byiteguye kuri Claude, Cursor, n'ibindi.
Impamvu UI y'umukino yemeza gusubira inyuma
Abakinnyi bagucira urubanza umukino wawe mu minota 90 ya mbere, kandi hafi yawo myinshi imara igihe mu UI. Ikibaho cy'ibanze, ibishobore, inama z'uruhare, HUD ya mbere babona iyo umukino utangira. Niba UI isanzwe igaragara nabi, umukino ntuzigera ugira amahirwe.
Imibare mike yo kuzirikana:
- 38% y'abakinnyi bareka umukino wo ku rubuga mu gihe cya mbere niba ikibaho cy'ibanze kigaragara nk'icyacitse cyangwa kidafite uburyo bwiza (am statistic zo gukina kuri itch.io, 2025).
- Ikibaho cy'ibanze cya Hollow Knight ni ibishobore 4, gikozwe mu buryo bwo kwerekana amashusho, kandi gikora kuri 60fps - kandi ni kimwe mu bintu bivugwa cyane bituma abakinnyi baguma mu masaha 30 yambere agoye.
- Igipapuro cyo guhagarara cya Celeste gikoresha ubunini bw'inyuguti 3 n'ibara 2. Uwo niwo mwanzuro wose wa UI. Gusubira inyuma biragaragaza ubuziranenge.
- Imikino ihenze cyane ikoresha 15-20% y'ingengo y'imari yose y'ibikorwa byayo kuri UI/UX. Abadandaza bo hagati bakoresha 0%.
Iyo nterahamyi ni yo AI ikoreshwa kugirango ikureho.
Sura ibihumbi by'ibikorwa byiteguye kuri Claude, Cursor, n'ibindi.
Ibice 6 by'ububiko buri mukino ukeneye
Mbere yuko uhanga ikintu, menya icyo uhanga. Burimukino wo ku rubuga - uw'ibice bibiri, uw'ibice bitatu, uw'ubutega-bw'ikanda, umukino wo kugenda - ukeneye ibice 6 by'ububiko kimwe. Ubuhanga bwa mudasobwa bwiza bushira ibyo byose mu mwanya umwe.
| Igice | Igikorwa | Amakosa asanzwe | Iki "cyiza" kimeze |
|---|---|---|---|
| Ikibaho cy'ibanze | Igitekerezo cya mbere. Gishyiraho imiterere y'ubuhanzi. | Inyuguti z'ibanza ku rubuga, ibivugwa hagati, nta bikoresho byo kwerekana | Ibishobore 3-5 byonyine, inyandiko zihamye, kwerekana amashusho no kwihutisha, ibishushanyo by'inyuma. |
| Igikoresho cyo hejuru cy'umukino | Amakuru yo mu mukino: ubuzima, amanota, imbunda, igihe | Imibare y'impinga mu nguni zidasanzwe, nta guhuza, bifitanye ikibazo n'ikamera. | Bijye ku nguni, bizigame, bigabanyijwe n'ubwoko bw'amakuru, bikizimye iyo bidakoreshwa. |
| Ububiko / guhitamo | Ikibazo cy'ibintu bifitanye isano | Ikibanza cya 16, nta bwoko bw'ibintu, ibyemezo bihindura urupapuro. | Ikibanza cya 4-8, cyanditse mu mabara ku bwoko, ikemezo ku ruhande, gutwara no gutakaza cyangwa gukanda. |
| Ibishobore / amahitamo | Amajwi, imikoro, ibishushanyo | Urutonde runini rw'ibinyuzwagwa. | Ibice (Amajwi / Ibishushanyo / Imikoro), ibinyuzagurika aho kuba ibinyuzwa, "Kwishyira mu bikorwa" + "Kugarura gusanzwe". |
| Igipapuro cyo guhagarara | Guhagarika hagati y'umukino. | Igikoresho cyica umukino wose. | Igipapuro cyijimye kuri 60% y'ubunini, amahitamo 4-5, "Komeza" kwihutishwa kuri mudasobwa. |
| Igipapuro cyo kurangiza | Watsinze, wabuze, cyangwa icyerekezo cy'umukino. | "Umukino urangiye" w'umutuku Arial, nta gukina noneho. | Ihuzwa ry'ibigize, ikintu gikomeye cyo "Kwakira", "Ikibaho cy'ibanze". |
Umukino ufite ibice 6 by'ububiko by'ububiko bwose biragaragara nk'ibyuzuye. Umukino ufite ibice 6 by'ububiko bidafite imiterere bisa nk'ikigo cy'ishuri, uko umukino waba umeze neza kose.
Ikintu gikomeye ni uguhuriza ibice 6 byose - umuryango wa font imwe, inguni y'ikishobore imwe, uburyo bwo kwerekana ibishushanyo kimwe, imiterere y'ibara imwe. Niho ubuhanga bwa mudasobwa bubona agaciro.
5 Ubuhanga bwa mudasobwa bwa UI y'umukino kuri Vibe Skills
Icyiciro cy'imikino 3D kuri Vibe Skills gifite ubuhanga 30+ buvuga ku mikino ikora n'ububiko bw'imikino bukora ibyo. Hano hari ubuhanga 5 bukoreshwa cyane kuri UI.
| Ubuhanga | Byiza cyane ku | Imashini | Ibyasohowe |
|---|---|---|---|
| Igikoresho cyo gukora UI y'umukino wo ku rubuga | Igice cyose cy'ububiko 6 mu mwanya umwe. | Three.js, Phaser, JS isanzwe | Igikoresho cy'ikibaho kimwe + ibishushanyo by'amashusho |
| Igikoresho cy'igikoresho cyo hejuru cy'umukino | Igikoresho cyo hejuru cy'umukino gusa (ubuzima, amanota, ikarita ntoya, igihe). | Three.js, Phaser, Unity WebGL, Godot HTML5 | Igikoresho cy'ikibaho gikoresha CSS cyangwa ibishushanyo by'amashusho. |
| Igikoresho cyo guhagarara + Igikoresho cy'ibishobore | Guhagarara, ibishobore, gusubizamo imikoro. | Imashini yose yo kuri webi. | Ibice bya React/HTML. |
| Igikoresho cy'ububiko + Igikoresho cy'ibitekerezo by'ibihangano. | Ibice by'ibintu, gutwara no gutakaza, amabara, ibitekerezo by'ibintu. | Three.js, Phaser, Unity WebGL | Igice cy'inyongeramusanzu + ibishushanyo by'ibirango by'ibintu. |
| Igikoresho cy'ikibaho cy'ibanze + Igikoresho cyo kurangiza cyo guhuza. | Igitekerezo cya mbere n'icyanyuma. | Imashini yose. | Ikibaho gifuhuje hamwe na Lottie + igipapuro cy'amakuru y'umukino wa nyuma. |
Bwose 5 bw'ubuhanga bushya urwandiko ruhuza imiterere (amabara, inyuguti, igice, guhitamo) kugirango ibice bigaragarwe nk'ibyakozwe n'umuntu umwe. Benshi mu bikoresho by'abakora ibikorwa bo hagati ntibishobora kuba byiza - ikibaho gikoresha font imwe, igikoresho cyo hejuru gikoresha iyindi, kandi abakinnyi babibona ako kanya.
Shakisha ubuhanga bw'imikino 3D kuri Vibe Skills →
Shyira hamwe igikoresho cyose cya UI y'umukino mu cyumweru kimwe
Hano hari inzira isanzwe ikoreshwa n'abadandaza bo hagati bakora imikino yo ku rubuga kuri itch.io na Newgrounds. Igikorwa cyose: ~ amasaha 12 y'akazi mu cyumweru.
Intambwe 1: Hitamo ubuhanga bwa UI kuri Vibe Skills
Fungura Icyiciro cy'imikino 3D kandi shyiramo ubuhanga bw' Igikoresho cyo gukora UI y'umukino wo ku rubuga. Ni bwo bwonyine bushira ibice 6 byose mu mwanzuro umwe. Niba umukino wawe umaze kugira ibibaho bikora kandi ukeneye gusa igikoresho cyo hejuru, shyiramo ubuhanga bwa standalone HUD Overlay.
Intambwe ya 2: Shaka "umwuka" w'umukino wawe mu magambo 3
Mbere yo gukora, andika amagambo 3 asobanura imiterere y'umukino wawe. Ingero: "neon, ibisharira, byihuse" (umukino wa synthwave), "binyuze, amazi, byihuse" (umukino wo kuroba), "bigaragara, bya cyera, pixeli" (umukino wa metroidvania). Ubuhanga buzakoresha ibi nk'ibisubizo by'amabara, guhitamo inyuguti, n'ibyihutisha amashusho. Ntube wabyirengagiza - ibisubizo bisanzwe bitanga UI isanzwe.
Intambwe ya 3: Shyiramo ibikoresho bya design mbere
Ubuhanga busohora urupapuro rwa tokens.css cyangwa imikoranire ya Tailwind hamwe n'amabara yawe, urutonde rw'inyuguti, inguni y'ibishobore, igice cy'ibice, n'igihe cyo kwihutisha. Koresha ibi mbere yuko uhanga ibikoresho byose. Niba ibikoresho bisa nabi hano, buri gice kizasa nabi. Hindura kugeza ubikunze.
Intambwe ya 4: Shyiramo ibice 6 byose mu gihe kimwe
Hamwe n'ibikorwa byemerewe, koresha igikorwa cyose cy'ibice 6. Igisohoka ni urupapuro rwa HTML/CSS (cyangwa ibice bya React, bitewe n'imashini yawe) hamwe n'urwandiko rwa SVG rushushanyije amashusho. Kubijyanye na Three.js cyangwa Phaser, koresha inzira yo hejuru ya HTML (DOM ihereye ku muryango w'ikamera hamwe na pointer-events: none kumuryango). Kubijyanye na Unity WebGL cyangwa Godot HTML5, koresha ihinduka rishingiye kuri canvas ry'ubuhanga bushya.
Intambwe ya 5: Guhuza n'umukino wawe
Hambana igikoresho cyo hejuru n'imigendekere y'umukino wawe (ubuzima, amanota, igihe). Benshi mu buhanga busohora umuto GameUIState ugaburira API ya setHealth(0.7) kugirango utagomba guhindura CSS wenyine. Hambana ibibazo byo guhagarara, ibishobore, n'ibyerekana kurangira n'umuhuza wawe w'ibisubizo.
Intambwe ya 6: Kina na 3 b'abanyamahanga kandi wongere ubikore.
Inshuti zizakubwira ko UI ari nziza. Abanyamahanga bazakubwira ukuri. Shyira ahagaragara umushinga kuri itch.io, usabe abantu 3 batangiye gukina iminota 5, kandi urebe uko bafashe ifoto. Imikoro ya UI ibonetse izagaragara mu isaha ya mbere. Gukosora ibyo, kongera gukora igice cy'icyo kibazo, kohereza.
Igikorwa cyose: Intambwe 1-3 (~ amasaha 1) + Intambwe ya 4 (~30 iminota) + Intambwe ya 5 (~6-8 amasaha yo guhuza) + Intambwe ya 6 (~3 amasaha y'ibikorwa byo gukina) = icyumweru.
Umuntu w'umuhanga mu gukora UI yishyuza $3,000-$8,000 kubikoresho bimwe kandi akamara ibyumweru 4-6. Kwiyandikisha kuri Vibe Skills bitangira ku $39/kwezi kandi biguha ubushobozi bwo gukora ibintu uko ushaka kugeza UI yumvikanye neza.
Shyiramo ubuhanga bwa UI y'umukino kuri Vibe Skills →
Ibigeragezo Bisanzwe
Noneho, shyira UI y'umukino nk'ikibazo cya HTML/CSS cyangwa mubisanzwe kuri canvas?
Kubikoresho byinshi by'umukino wo ku rubuga, ikibazo cya HTML/CSS hejuru y'ikamera ya Three.js cyangwa Phaser kirihuta gukora, kiroroshye kugira uburyo bwo kugera kuri buri wese, kandi kigaragaza inyuguti zifite ubwiza kuri buri buri. Koresha UI ishingiye kuri canvas gusa iyo ukeneye ubwiza bw'amashusho bw'ibintu byinshi (umukino w'amashusho ufite ubwiza budahinduka) cyangwa iyo ibikorwa by'ibintu byinjira mu mikoro. Ubuhanga kuri Vibe Skills bushya impinduka zombi.
Noneho, UI izakora kuri terefone, cyangwa ngomba gukora igice cyihariye kuri terefone?
Igikoresho cy'umukino wo ku rubuga kuri Vibe Skills gihanga ibirere bikora ku bikoresho bifata - ibishobore binini, guhinduranya ibikoresho byo kuri terefone (D-pad n'ibishobore by'ibikorwa), hamwe n'ikibaho cy'ibanze ku terefone. Ntabwo ukeneye igice cyihariye, ariko ugomba kugerageza kuri terefone nyayo. Ibiro by'ibigeragezo kuri webi birabeshyera kubijyanye n'imyifatire yo gufata.
Noneho, UI y'umukino ishobora kugera he mu buryo bukwiriye?
Imikino yo ku rubuga ishobora kugera kuri WCAG AA byoroshye kubijyanye n'ibibaho, ibishobore, n'ibikoresho byo hejuru - imikoro y'ibishobore, imirongo igaragara, amabara ahuzwa 4.5:1, n'amazina y'abakoresha ibikoresho bya mudasobwa kubijyanye n'amanota n'ubuzima. Inzira yo hejuru ya HTML ikora ibi byose byoroshye. Ubuhanga kuri Vibe Skills buhanga uburyo bwo kugerwa kuri buri wese. Umukino ubwawo uragoye kugira uburyo bwo kugerwa kuri buri wese, ariko UI ntikagire imbogamizi.
Noneho, kimwe UI kit kimwe gikorana kuri Unity WebGL na Godot HTML5?
Muburyo bwinshi, yego. Unity WebGL na Godot HTML5 byose bikora mu canvas, kandi ushobora guhuza ikibazo hejuru. Ubuhanga burimo abahuza bombi kugirango UI ivugane n'imigendekere y'umukino wawe. Ibintu byihariye kuri Unity (nk'uburyo bwo gukorana) bisaba umuyoboro muto - ubuhanga bushya inzira y'urugero iryo.
Noneho, uko nishyiraho ikibaho, igikoresho cyo hejuru, n'ububiko kugirango biboneke kimwe?
Ni cyo gituma UI y'umukino y'abadandaza bo hagati igaragara nabi - ibice 6 byakozwe mu buryo bwo kwihahira. Igisubizo ni ibikoresho by'imiterere bihuza: urupapuro rumwe rushyiraho amabara, inyuguti, igice, n'ibyihutisha. Buri gice gikora icyo cyerekano. Ubuhanga kuri Vibe Skills bukora ibi byonyine - shyira ibikoresho rimwe, shyiramo ibice 6 byose bivuye kuri ibyo bikoresho, byararangiye.
Noneho, nkunda guhindura UI yakozwe ntanangiza ubuhanga?
Yego. Ubuhanga busohora HTML, CSS, kandi (nibyo ukeneye) ibice bya React. Ni wowe ufite urupapuro. Benshi mu bakora ibikorwa bahindura amabara, bashyiraho ikirango, bashyiraho amashusho, kandi bahindura imwe cyangwa ebyiri inguni z'ibishobore - ni ibyo. Niba ukeneye impinduka nini y'imiterere, shyiramo ibikoresho byavuguruwe aho gusubira inyuma kubikoresho wenyine.
Noneho, niba umukino wanjye umaze kugira UI yakozwe igice - noneho, ngomba kuyi-guta?
Oya. Shyiramo ubuhanga bwa HUD Overlay cyangwa Igikoresho cyo guhagarara + Igikoresho cy'ibishobore standalone kandi wongere igice kimwe icyarimwe. Benshi mu badandaza bo hagati bongera ikibaho cy'ibanze (cyerekana kinini), hanyuma igikoresho cyo hejuru (cyakoreshejwe cyane), hanyuma ibishobore n'igipapuro cyo guhagarara (cyakoreshejwe bike ariko cyacitse cyane). Uzumva ubuzima bw'ubuzima bwiza nyuma y'igice cya mbere cyahoherejwe.
Shyira UI, Noneho Shyira Umukino
UI y'umukino ni yo nyicanyi idasanzwe y'imishinga y'abadandaza bo hagati. Umukino ushobora kuba mwiza, ariko niba ikibaho kigaragara nk'igishushanyo cya WordPress, abakinnyi bazahagarara mu gihe cy'iminota 90. UI yuzuye - ibikoresho bihuza, igikoresho cyo hejuru kijyanye n'umukino, ibishobore bifunze, igipapuro cyiza cyo kurangiza - ni cyo gituma igikoresho cy'isaha 4 cyo kuri itch.io kigaragara nk'ikintu nyacyo.
Reka kwirinda iminsi 4 yo gukora UI. Shyiramo igikoresho cyose cy'ibice 6 mu cyumweru, uhuze, kandi wongere ukonogora umukino kugirango ugarure umukino.
Shakisha ubuhanga bwa UI y'umukino kuri Vibe Skills →
Reka gukora UI y'umukino uhereye hasi. Shyiramo ubuhanga bwa UI kit kuri Vibe Skills kandi shyira ikibaho, igikoresho cyo hejuru, ububiko, ibishobore, igipapuro cyo guhagarara, n'igipapuro cyo kurangiza mu gihe kimwe.