Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Agbára Ẹrọ Wiwádùn Ẹrọ Wiwádùn ni Pipá Lati Ẹrọ Agbátorí Ẹrọ (ati pe ko si ẹnikan ti o sọ nipa rẹ)
Ọpọlọpọ awọn oludasile agbátorí lati ṣafihan iwọn ere ti o ṣiṣẹ ni ọsẹ meji. Lẹhinna wọn lo oṣu mẹta ti n bo lori UI. Awọn bọtini ti o dabi aworan olùsọ. Awọn fifọ HUD ti o ja pẹlu kamẹra. Awọn aworan atokọ ti a kọ pẹlu position: absolute ati awọn adura. Awọn agbara AI fun UI ere lori Vibe Skills ṣẹda awọn eto akojọ aṣayan ti o yẹ, HUDs, ati awọn fifọ fun awọn ere lilọ kiri ayelujara ni ijoko kan - ki o le fi ere naa ranṣẹ, kii ṣe iboju eto.
Itọsọna yii rin irin-ajo nipasẹ idi ti UI ṣe pinnu ifarada, awọn oju UI mẹfa ti ere kọọkan nilo, awọn agbara UI ere AI ti o wa lori Vibe Skills, ati iṣẹ-ṣiṣe ipari-ọsẹ lati fi eto UI kikun ranṣẹ.
Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Idi Ti UI Ere Fi Pinnu Ifarada
Awọn oṣere ṣe idajọ ere rẹ ni iṣẹju 90 akọkọ, ati ọpọlọpọ ninu awọn iṣẹju wọnyẹn ni a lo laarin UI. Akojọ aṣayan akọkọ, awọn eto, awọn imọran iṣakoso, HUD akọkọ ti wọn rii nigbati ere naa bẹrẹ. Ti UI ba ni itara, imuṣere ori kọmputa ko ni aye.
Diẹ ninu awọn nọmba tọ lati mu ni ori rẹ:
- 38% awọn oṣere fi ere lilọ kiri ayelujara silẹ ni akoko akọkọ ti akojọ aṣayan akọkọ ba ni itara tabi ko ni ara (data itọwo-ere itch.io, 2025).
- Akojọ aṣayan akọkọ Hollow Knight jẹ bọtini 4, ti a ya ọwọ, ati pe o nṣiṣẹ ni 60fps - ati pe o jẹ ọkan ninu awọn idi ti a mẹnuba julọ ti awọn oṣere duro nipasẹ awọn iṣẹju 30 akọkọ ti o nira.
- Akojọ aṣayan ti Celeste nlo awọn iwọn iru 3 ati awọn awọ 2. Iyẹn ni gbogbo eto UI. Iyọda ni ifarahan didara.
- Awọn ere ti isuna-nla n lo 15-20% ti gbogbo isuna iṣelọpọ wọn lori UI/UX. Awọn oludasile agbátorí maa n lo 0%.
Iyẹn fa ni deede ohun ti awọn agbara AI ti wa ni lati pa.
Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Awọn Oju UI Mẹfa Ti Ere Kookan Nilo
Ṣaaju ki o to ṣẹda ohunkun, mọ ohun ti o n ṣẹda. Ere lilọ kiri ayelujara kọọkan - oluṣere-aye 2D, oludẹrùn 3D, oludapọ, oludari rin - nilo awọn oju UI mẹfa kanna. Agbara AI ti o dara n fi gbogbo wọn ranṣẹ ni eto ara ti o yẹ.
| Oju-ilẹ | Idi | Awọn aṣiṣe ti o wọpọ | Kini "ti o dara" dabi |
|---|---|---|---|
| Akojọ aṣayan akọkọ | Ifihan akọkọ. Ṣeto itọsọna aworan. | Awọn fonti lilọ kiri ayelujara ti o wa tẹlẹ, ọrọ aarin, ko si awọn ipinlẹ hover | 3-5 bọtini max, titẹ sita aṣa, micro-animation hover, yika pada |
| Fifi HUD silẹ | Alaye ti ere: ilera, iṣiro, ohun ija, akoko | Awọn nọmba ti o nwaye ni awọn igun ti ko ni iyasọtọ, ko si iṣọpọ, ja pẹlu kamẹra | Ti sopọ mọ awọn igun, idaji-ṣiṣeeṣe, ti o ṣọpọ nipasẹ iru data, awọn fifọ nigbati o ba nṣiṣẹ |
| Akojọ tabi akoonu | Akojọ iṣakoso ohun | 16-awọn ẹsẹ iṣiro, ko si ipele ohun, awọn imọran ti o dina iboju | 4-8 awọn ẹsẹ iṣiro, awọ ti a so mọ ipele, imọran ni ẹgbẹ, fa-ati-ju tabi tẹ |
| Eto tabi awọn aṣayan | Ohun, iṣakoso, awọn aworan | Iwọn atokọ nla kan ti awọn iyipada | Awọn taabu (Ohun / Fidio / Iṣakoso), awọn oluyipada kii ṣe awọn iyipada, "Fọwọsi" + "Tun pada si aiyipada" |
| Akojọ duro | Isinmi aarin-ere | Awoṣe ti o bo gbogbo ere | Fifi si 60% opacity, awọn aṣayan 4-5, "Tun bẹrẹ" ti a fojusi laifọwọyi fun keyboard |
| Iboju ipari | Bori, padanu, tabi ṣoki ṣoki | "Ere Ti Pari" ni Arial pupa, ko si bọtini atunṣe | Atọju awọn iṣiro, nla "Mu lẹẹkansi" CTA, iṣẹju keji "Akojọ aṣayan akọkọ" |
Ere kan pẹlu awọn oju UI ti o yẹ 6 ni rilara pari. Ere kan pẹlu awọn oju UI ti ko ni ara 6 ni rilara bi iṣẹ-ṣiṣe ile-iwe, laibikita bawo ni imuṣere ori kọmputa ti dara to.
Apá tó nira jù lọ ni jíjẹ́ kí gbogbo 6 jọ̀wọ́ pọ̀ - ìdíléwọ̀ fọ́nti kan náà, ìwòǹgbà bọtini kan náà, ìwà ìgbésẹ̀ kan náà, àwọ̀ kan náà. Iyẹn ni ibi ti awọn agbara AI ṣe n sanwo.
5 Agbara UI Ere AI lori Vibe Skills
Ẹka Awọn ere 3D lori Vibe Skills ni awọn agbara 30+ ti o ṣafihan awọn ere ere ni kikun ati awọn eto UI ti o firanṣẹ ni ayika wọn. Eyi ni awọn agbara ti o ni agbara UI marun-un ti o nifẹ julọ.
| Agbara | Ti o dara julọ fun | Awọn ẹrọ | Ọja |
|---|---|---|---|
| Ẹrọ Iṣelọpọ Kit UI Ere Lilọ kiri ayelujara | 6-oju UI ni kikun ni eto ara ti o yẹ | Three.js, Phaser, JS lasan | Eto fifi HTML/CSS silẹ + awọn sheets ere |
| Eto fifi HUD silẹ | HUD ti ere nikan (ilera, iṣiro, minimap, akoko) | Three.js, Phaser, Unity WebGL, Godot HTML5 | Eto fifi CSS ti a fi silẹ tabi awọn aworan kanfasi |
| Apo Akojọ duro + Eto | Duro, eto, awọn atunṣe iṣakoso | Eyikeyi ere ti o da lori wẹẹbu | React/HTML awọn paati awoṣe |
| Akojọ + Eto Iṣowo Pipọn | Awọn iṣiro ohun, fa-ati-ju, awọn awọ ipele, awọn imọran | Three.js, Phaser, Unity WebGL | Iyika ile-ikawe + awọn awoṣe kaadi ohun |
| Akojọ akọkọ + Apo ipari | Awọn ifihan akọkọ ati ipari | Eyikeyi | Akojọ aṣayan ti nṣiṣẹ pẹlu Lottie + iboju iṣiro ipari-ere |
Gbogbo awọn agbara 5 n firanṣẹ pẹlu faili awọn ami apẹrẹ ti o pin (awọn awọ, awọn fonti, aaye, irọra) ki awọn oju-ilẹ naa dabi pe wọn wa lati ọdọ oluṣewọn kanna. Pupọ julọ awọn eto UI agbátorí kuna idanwo yii - akojọ aṣayan nlo fonti kan, HUD nlo omiran, ati pe awọn oṣere ṣe akiyesi lẹsẹkẹsẹ.
Ṣawari awọn agbara ere 3D lori Vibe Skills →
Kọ Kit UI Ere Ni kikun Ni Ọsẹ Kan
Eyi ni iṣẹ-ṣiṣe gangan ti awọn oludasile agbátorí ti o fi awọn ere lilọ kiri ayelujara ranṣẹ lori itch.io ati Newgrounds lo. Akoko lapapọ: ~12 wakati iṣẹ lori ipari ọsẹ.
Igbesẹ 1: Yan agbara UI kan lori Vibe Skills
Ṣii ẹka Awọn ere 3D ki o fi agbara Ẹrọ Iṣelọpọ Kit UI Ere Lilọ kiri ayelujara sii. O jẹ ọkan nikan ti o fi gbogbo awọn oju 6 ranṣẹ ni eto ami ti o yẹ. Ti ere rẹ ba ti ni awọn akojọ aṣayan ti n ṣiṣẹ tẹlẹ ati pe o nilo HUD nikan, fi agbara fifi HUD silẹ ti o wa nikan dipo.
Igbesẹ 2: Pinnu "vibe" ere rẹ ni awọn ọrọ 3
Ṣaaju ki o to ṣẹda, kọ awọn ọrọ 3 ti o ṣe apejuwe ohun orin ere rẹ. Awọn apeere: "neon, brutal, fast" (oludẹrùn synthwave), "rọ, ti omi, lọra" (ere ipeja), "chunky, retro, pixel" (metroidvania). Agbara naa nlo wọnyi bi titẹ sii fun paleti awọ, yiyan titẹ sita, ati irọra išipopada. Maṣe padanu eyi - titẹ sii gbogbogbo n ṣelọpọ UI gbogbogbo.
Igbesẹ 3: Ṣẹda awọn ami apẹrẹ ni akọkọ
Agbara naa n ṣelọpọ faili tokens.css kan tabi iṣeto Tailwind pẹlu paleti rẹ, idii fonti, radii bọtini, iwọn aaye, ati akoko išipopada. Ṣe atunyẹwo eyi ṣaaju ṣiṣẹda eyikeyi UI gangan. Ti awọn ami naa ba dabi aṣiṣe nibi, gbogbo oju-ilẹ yoo dabi aṣiṣe. Ṣatunṣe titi iwọ o fi fẹran rẹ.
Igbesẹ 4: Ṣẹda gbogbo awọn oju 6 ni iṣatunṣe kan
Pẹlu awọn ami ti a fọwọsi, ṣiṣe iṣelọpọ kikun ti awọn oju 6. Ọja jẹ folda ti awọn faili HTML/CSS (tabi awọn paati React, ti o da lori ẹrọ rẹ) pẹlu iwe ayaworan SVG fun awọn aami. Fun Three.js tabi Phaser, lo ọna fifi HTML silẹ (DOM ti o nwaye loke kanfasi pẹlu pointer-events: none lori apoti). Fun Unity WebGL tabi Godot HTML5, lo iyatọ ti o da lori kanfasi ti agbara n ṣelọpọ.
Igbesẹ 5: So o pọ si iṣẹ-ṣiṣe ere rẹ
Sopọ HUD si ipo ere rẹ (iye ilera, iṣiro, akoko). Pupọ julọ awọn agbara pẹlu imọran oluyipada GameUIState kekere kan ti o ṣafihan API setHealth(0.7) ki o ko ni lati fi awọn oniyipada CSS pọọlu ni ọwọ. So awọn iṣẹlẹ iduro, eto, ati ipari si oluṣakoso titẹ sii rẹ ti o wa tẹlẹ.
Igbesẹ 6: Ṣayẹwo pẹlu awọn ajeji 3 ati tunṣe
Awọn ọrẹ yoo sọ fun ọ pe UI ti dara. Awọn ajeji yoo sọ otitọ fun ọ. Fi ẹda kan ranṣẹ si itch.io, beere lọwọ awọn eniyan 3 ti ko ni idi lati ṣere fun iṣẹju 5, ki o wo igbasilẹ naa. Awọn kokoro UI ti o ṣe pataki yoo farahan ni iṣẹju 60 akọkọ. Ṣe atunṣe iwọnyi, tunṣe oju-ilẹ ti o kan, ki o si fi ranṣẹ.
Akoko lapapọ: Igbesẹ 1-3 (~1 wakati) + Igbesẹ 4 (~30 iṣẹju) + Igbesẹ 5 (~6-8 wakati ti iṣọpọ) + Igbesẹ 6 (~3 wakati ti awọn iyipo itọwo) = ipari ọsẹ kan.
Oluṣewadii UI alafẹfẹ yoo gba owo $3,000-$8,000 fun iwọn kanna ti o si gba awọn ọsẹ 4-6. Isanwo lori Vibe Skills bẹrẹ ni $39/oṣu ati fun ọ ni awọn ipilẹṣẹ ti ko ni opin - nitorina o le ṣe atunṣe ni ọpọlọpọ awọn igba ti o fẹ titi UI yoo fi ni itara.
Fi agbara UI ere kan sii lori Vibe Skills →
Awọn ibeere ti a n bèèrè nigbagbogbo
Ṣe Mo yẹ ki n kọ UI ere mi gẹgẹbi fifi HTML/CSS silẹ tabi taara lori kanfasi?
Fun awọn ere lilọ kiri ayelujara pupọ julọ, fifi HTML/CSS silẹ lori oke kanfasi Three.js tabi Phaser jẹ iyara lati kọ, rọrun lati jẹ ki o le wọle, ati pe o nṣe ọrọ ni kedere ni eyikeyi ipinnu. Lo UI ti o da lori kanfasi nikan nigbati o ba nilo ibaramu aworan ti o ni pipe (ere aworan pixel ti o muna) tabi nigbati awọn iṣẹlẹ DOM ba ṣe idiwọ titẹ sii. Awọn agbara lori Vibe Skills n firanṣẹ awọn iyatọ mejeeji.
Ṣe UI yoo ṣiṣẹ lori alagbeka, tabi Ṣe Mo nilo ẹya alagbeka ti o yatọ?
Iwe Ẹrọ Iṣelọpọ Kit Ere Lilọ kiri ayelujara lori Vibe Skills n ṣelọpọ awọn atunto ti n dahun ti o ṣiṣẹ lori awọn ẹrọ ifọwọkan ni pipa apoti - awọn ibi ifọwọkan ti o tobi julọ, awọn fifọ iṣakoso alagbeka (D-pad ati awọn bọtini iṣe), ati akojọ aṣayan iduro ti o jẹ akọkọ-alagbeka. O ko nilo ẹya ti o yatọ, ṣugbọn o nilo lati ṣe idanwo lori foonu gidi. Awọn irinṣẹ oludasile lilọ kiri ayelujara dubulẹ nipa iṣẹ ṣiṣe ifọwọkan.
Bawo ni o ṣe le wọle si UI ni otitọ?
Awọn ere lilọ kiri ayelujara le de WCAG AA ni irọrun fun awọn akojọ aṣayan, awọn eto, ati awọn HUDs - lilọ kiri keyboard, awọn oruka ifojusi, iyatọ awọ 4.5:1, ati awọn akọle oluka iboju lori iṣiro ati ilera. Ọna fifi HTML silẹ jẹ ki gbogbo eyi ni ọfẹ fere. Awọn agbara lori Vibe Skills n ṣelọpọ awọn akọle ti o le wọle ni aiyipada. Imọṣere gangan le nira lati jẹ ki o le wọle, ṣugbọn UI ko yẹ ki o jẹ idena.
Ṣe Kit UI kanna ṣiṣẹ fun awọn ẹya Unity WebGL ati Godot HTML5?
Pupọ julọ bẹẹni. Unity WebGL ati Godot HTML5 mejeeji n ṣelọpọ si kanfasi, ati pe o le fi fifi silẹ DOM kan si oke. Awọn agbara pẹlu awọn oluyipada fun awọn ẹrọ mejeeji ki UI ba sọrọ si ipo ere rẹ. Awọn ẹya Unity pato (gẹgẹbi eto iṣẹlẹ ti a ṣe sinu) nilo afara tinrin - agbara naa n ṣelọpọ koodu ayẹwo fun afara yẹn.
Bawo ni MO ṣe le jẹ ki akojọ aṣayan, HUD, ati atokọ jẹ iyatọ ni wiwo?
Eyi ni idi #1 idi ti UI ere agbátorí n wo alaroyele - awọn oju 6 ti a ṣe apẹrẹ ni ipinya. Atunṣe naa jẹ awọn ami apẹrẹ ti o pin: faili kan ti o ṣalaye awọn awọ, awọn fonti, aaye, ati irọra. Oju kookan n gbe wọle lati faili yẹn. Awọn agbara lori Vibe Skills ṣe eyi laifọwọyi - ṣẹda awọn ami lẹẹkan, ṣẹda gbogbo awọn oju 6 lati awọn ami wọnyẹn, ti pari.
Ṣe Mo le ṣe deede UI ti a ṣelọpọ laisi fifọ agbara?
Bẹẹni. Awọn agbara n ṣelọpọ HTML, CSS, ati (aṣayan) awọn paati React ti o le ṣatunṣe. O ni awọn faili. Pupọ julọ awọn oludasile ṣe deede awọn awọ, paarọ aami, rọpo awọn aami, ati yi ohun kan tabi meji pada - iyẹn ni gbogbo rẹ. Ti o ba nilo iyipada ara nla, tunṣe lati awọn ami ti a tunṣe dipo ki o tun kọ awọn oju-ilẹ ni ọwọ.
Kini ti ere mi ba ti ni UI ti a kọ ni idaji - Ṣe Mo yẹ ki n sọ ọ nù?
Rara. Fi agbara fifi HUD silẹ tabi Apo Akojọ duro + Eto nikan ki o rọpo oju kan ni akoko kan. Pupọ julọ awọn oludasile agbátorí n mu akojọ aṣayan akọkọ dara si ni akọkọ (wiwa ti o ga julọ), lẹhinna HUD (ti a lo julọ), lẹhinna awọn eto ati iduro (ti a lo diẹ sii ṣugbọn ti o bajẹ julọ). Iwọ yoo ni rilara fo didara lẹhin oju-ilẹ akọkọ ti a fi ranṣẹ.
Fi UI ranṣẹ, Lẹhinna Fi Ere ranṣẹ
UI ere ni apani ti o dakẹ ti awọn iṣẹ akanṣe agbátorí. Imọṣere le jẹ onitumọ, ṣugbọn ti akojọ aṣayan ba dabi akori WordPress ti o wa tẹlẹ, awọn oṣere yoo yipada ni awọn iṣẹju 90. UI ti o yẹ - awọn ami ti o yẹ, HUD ti o sopọ, awọn eto mimọ, iboju ipari ti o ni itẹlọrun - ni ohun ti o jẹ ki igbasilẹ itutu agbáles 4-wakati kan dabi ọja gidi.
Foju awọn ọsẹ 4 ti atunṣe UI. Ṣẹda kit oju-6 kikun ni ipari ọsẹ kan, so o pọ, ki o si pada si ṣiṣe ere naa ni igbadun.
Ṣawari awọn agbara UI ere lori Vibe Skills →
Duro kikọ UI ere lati ibere. Fi agbara kit UI kan sii lori Vibe Skills ki o si fi akojọ aṣayan, HUD, atokọ, eto, iduro, ati iboju ipari ranṣẹ ni ijoko kan.