Claude, Cursor болон бусад хэрэгслүүдэд зориулсан бэлэн зуун ур чадваруудыг үзнэ үү.
Тоглоомны UI нь Инди хөгжүүлэлтийн хамгийн хэцүү хэсэг юм (мөн хэн ч үүний тухай ярьдаггүй)
Ихэнх инди хөгжүүлэгчид хоёр долоо хоногт боловсронгуй тоглоомны загварыг гаргадаг. Дараа нь тэд UI дээрээ гурван сар тэмцдэг. Програмчдын зураг шиг харагддаг товчлуурууд. Камертайгаа тэмцэлдэг HUD давхаргууд. position: absolute болон залбиралаар бүтээгдсэн агуулахны сүлжээ. Vibe Skills дээрх тоглоомны UI-ийн хиймэл оюун ухааны чадварууд нь нэг суудалдаа браузер тоглоомд зориулсан нэгдмэл цэс систем, HUD, давхаргуудыг үүсгэдэг - ингэснээр та тоглоомыг, тохиргооны дэлгэцийг биш, тээвэрлэх боломжтой.
Энэхүү гарын авлага нь UI яагаад тогтвортой байдлыг шийддэг, тоглоомд хэрэгтэй зургаан UI гадаргуу, Vibe Skills дээр байдаг хиймэл оюун ухааны тоглоомны UI чадварууд, мөн бүрэн UI иж бүрдлийг гаргах амралтын өдрийн ажлын урсгал зэргийг авч үзнэ.
Claude, Cursor болон бусад хэрэгслүүдэд зориулсан бэлэн зуун ур чадваруудыг үзнэ үү.
Яагаад тоглоомны UI тогтвортой байдлыг шийддэг
Тоглогчид таны тоглоомыг эхний 90 секундын дотор шүүдэг бөгөөд эдгээр секундүүдийн ихэнх нь UI дотор өнгөрдөг. Үндсэн цэс, тохиргоо, хяналтын тэмдэглэгээ, тоглоом эхлэхэд гарч ирдэг анхны HUD. Хэрэв UI нь муу мэдрэгдвэл, тоглоомын явц хэзээ ч боломж олдохгүй.
Санах нь зүйтэй зарим тоо:
- Браузер тоглоомыг анхны сесст тоглогчдын 38% нь орхидог, хэрэв үндсэн цэс нь эвдэрсэн эсвэл загваргүй мэт санагдвал (itch.io playtest data, 2025).
- Hollow Knight-ын үндсэн цэс нь 4 товчлуур, гараар зурсан, 60fps-т ажилладаг - мөн энэ нь тоглогчдыг эхний 30 минутын хүндрэлийг даван туулахад хүргэдэг хамгийн их дурдагддаг шалтгаануудын нэг юм.
- Celeste-ийн паузын дэлгэц нь 3 төрлийн хэмжээ, 2 өнгө ашигладаг. Энэ нь UI системийн бүхэл бүтэн хэсэг юм. Хязгаарлалт нь чанарыг харуулдаг.
- Их хэмжээний төсөвтэй тоглоомууд нийт үйлдвэрлэлийн төсвийн 15-20%-ийг UI/UX-д зарцуулдаг. Инди хөгжүүлэгчид ихэвчлэн 0% зарцуулдаг.
Энэхүү ялгааг хиймэл оюун ухааны чадварууд арилгах зорилготой юм.
Claude, Cursor болон бусад хэрэгслүүдэд зориулсан бэлэн зуун ур чадваруудыг үзнэ үү.
Тоглоомд хэрэгтэй зургаан UI гадаргуу
Юу ч үүсгэхээсээ өмнө юу үүсгэж байгаагаа мэдэж аваарай. Бүх браузер тоглоом - 2D платформер, 3D буудлага, idle clicker, алхах сим - ижил зургаан UI гадаргууг шаарддаг. Сайн хиймэл оюун ухааны чадвар нь тэдгээрийг нэгдмэл хэв маягийн системээр бүгдийг нь гаргадаг.
| Гадаргуу | Зорилго | Нийтлэг алдаанууд | "Сайн" гэж юу харагддаг |
|---|---|---|---|
| Үндсэн цэс | Анхны сэтгэгдэл. Урлагийн чиглэлийг тогтоодог. | Анхдагч браузер фонт, төвлөрсөн текст, hover байдалгүй | Хамгийн ихдээ 3-5 товчлуур, тусгай типографи, hover микро-хөдөлгөөнт байдал, дэвсгэр давталт |
| HUD давхарга | Тоглоомын явцад мэдээлэл: эрүүл мэнд, оноо, сум, цаг | Санамсаргүй буланд байрлах тоонууд, бүлэглэлгүй, камертай тэмцэлдэх | Буланд бэхлэгдсэн, хагас ил тод, өгөгдлийн төрлөөр бүлэглэгдсэн, idle үед арилдаг |
| Агуулах / тоног төхөөрөмж | Зүйлсийг удирдах дэлгэц | 16 баганын сүлжээ, зүйлийн ховор байдалгүй, дэлгэцийг хаадаг хэрэгслийн зөвлөмж | 4-8 баганын сүлжээ, өнгөөр ялгагдсан ховор байдал, хажуу талд нь хэрэгслийн зөвлөмж, чирэх-буулгах эсвэл товших |
| Тохиргоо / сонголтууд | Аудио, хяналт, график | Нэг том гүйлгэдэг жагсаалт | Табууд (Аудио / Видео / Хяналт), товчлуурууд биш слайдерууд, "Хэрэглэх" + "Анхдагч байдалд буцаах" |
| Пауз цэс | Тоглоомын дундах тасалдал | Тоглоомыг бүхэлд нь нуудаг модал | 60% ил тод байдалтай давхарга, 4-5 сонголт, "Дахин эхлүүлэх" нь гар дээр автоматаар төвлөрсөн |
| Төгсгөлийн дэлгэц | Хожих, алдах, эсвэл хураангуй | Улаан Arial-д "Game Over", дахин тоглуулах товчлуургүй | Статистикийн хураангуй, том "Дахин тоглох" CTA, хоёрдогч "Үндсэн цэс" |
Боловсронгуй болсон 6 UI гадаргуутай тоглоом нь төгссөн мэт санагддаг. Загваргүй 6 UI гадаргуутай тоглоом нь тоглоомын явц хэр сайн байхаас үл хамааран сургуулийн төсөл шиг санагддаг.
Хамгийн хэцүү хэсэг нь бүх 6 гадаргууг нэгдмэл байлгах явдал юм - ижил фонтны гэр бүл, ижил товчлуурын радиус, ижил hover зан үйл, ижил өнгөний палитр. Хиймэл оюун ухааны чадварууд үнэ цэнээ харуулах газар энэ юм.
Vibe Skills дээрх 5 хиймэл оюун ухааны тоглоомны UI чадварууд
Vibe Skills дээрх 3D тоглоомын ангилал нь бүрэн тоглох боломжтой тоглоом болон тэдгээрийг дагалдах UI системүүдийг багтаасан 30+ чадвартай. Энд хамгийн их суулгагдсан таван UI-д төвлөрсөн чадварууд байна.
| Чадвар | Хамгийн сайн тохиромжтой | Хөдөлгүүр | Үр дүн |
|---|---|---|---|
| Браузер тоглоомын UI иж бүрдэл үүсгэгч | Бүрэн 6 гадаргуутай UI нэгдмэл хэв маягт | Three.js, Phaser, vanilla JS | HTML/CSS давхаргын систем + спрайтын багц |
| HUD давхаргын систем | Зөвхөн тоглоомын доторх HUD (эрүүл мэнд, оноо, мини-газрын зураг, цаг) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-байрлалтай давхарга эсвэл canvas спрайт |
| Пауз + Тохиргооны дэлгэцийн багц | Пауз, тохиргоо, хяналтыг дахин тохируулах | Аливаа вэб-д суурилсан тоглоомны хөдөлгүүр | React/HTML модал бүрэлдэхүүн хэсгүүд |
| Агуулах + Луутын зөвлөмжийн систем | Зүйлсийн сүлжээ, чирэх-буулгах, ховор өнгө, зөвлөмжүүд | Three.js, Phaser, Unity WebGL | Бүрэлдэхүүн хэсгийн сан + зүйлийн картны загварууд |
| Үндсэн цэс + Төгсгөлийн дэлгэцийн хослол | Эхний болон эцсийн сэтгэгдэл | Аливаа | Lottie-тай хөдөлгөөнт цэс + тоглоомын төгсгөлийн статистикийн дэлгэц |
Бүх 5 чадвар нь хамтарсан дизайны токен файлтай (өнгө, фонт, зай, хөнгөлөлт) ирдэг тул гадаргуу нь ижил дизайнерийнх шиг харагддаг. Ихэнх инди UI иж бүрдлүүд энэ шалгалтыг хангадаггүй - цэс нэг фонт, HUD өөр фонт хэрэглэдэг бөгөөд тоглогчид үүнийг шууд мэддэг.
Vibe Skills дээр 3D тоглоомны чадваруудыг үзэх →
Амралтын өдөр тоглоомны UI иж бүрдлийг бүтээцгээе
Энэ бол itch.io болон Newgrounds дээр браузер тоглоом гаргадаг инди хөгжүүлэгчид ашигладаг бодит ажлын урсгал юм. Нийт хугацаа: амралтын өдөр 12 цагийн ажил.
Алхам 1: Vibe Skills дээр UI чадварыг сонгоно уу
3D тоглоомын ангиллыг нээж, Browser Game UI Kit Generator чадварыг суулгана уу. Энэ нь бүх 6 гадаргууг нэгдмэл токен системээр гаргадаг цорын ганц чадвар юм. Хэрэв таны тоглоом аль хэдийн ажиллаж байгаа цэсүүдтэй бөгөөд танд зөвхөн HUD хэрэгтэй бол оронд нь дан HUD Overlay чадварыг суулгана уу.
Алхам 2: Тоглоомны "vibe"-ийг 3 үгээр тодорхойлно уу
Үүсгэхээсээ өмнө тоглоомныхоо аялгууг тодорхойлдог 3 үгийг бичнэ үү. Жишээ нь: "неон, харгис, хурдан" (синтезатор буудлага), "зөөлөн, услаг, удаан" (загасчлах тоглоом), "бүдүүн, ретро, пиксел" (метроидвания). Чадвар нь өнгөний палитр, типографийн сонголт, хөдөлгөөнт байдлын хөнгөлөлтийн оролт болгон үүнийг ашигладаг. Үүнийг алгасах хэрэггүй - энгийн оролт нь энгийн UI-г үүсгэдэг.
Алхам 3: Эхлээд дизайны токенуудыг үүсгэнэ үү
Энэ чадвар нь таны палитр, фонтны багц, товчлуурын радиус, зайны хэмжээ, хөдөлгөөнт байдлын цагийг агуулсан tokens.css файл эсвэл Tailwind тохиргоог гаргана. Бодит UI-ийг үүсгэхээсээ өмнө үүнийг шалгана уу. Хэрэв энд токенууд буруу харагдвал бүх гадаргуу буруу харагдах болно. Та үүнд дуртай болтол нь тохируулна уу.
Алхам 4: Бүх 6 гадаргууг нэг багцаар үүсгэнэ үү
Баталгаажсан токенуудтай, 6 гадаргуутай бүрэн үүсгэлтийг ажиллуулна уу. Гаргах нь HTML/CSS файлууд (эсвэл таны хөдөлгүүрээс хамааран React бүрэлдэхүүн хэсгүүд) болон дүрсийн SVG спрайтын багц юм. Three.js эсвэл Phaser-ийн хувьд HTML давхаргын аргыг ашиглана уу (DOM нь pointer-events: none функцтэй canvas-ын дээгүүр байрласан). Unity WebGL эсвэл Godot HTML5-ийн хувьд чадвараас гарсан canvas-д суурилсан хувилбарыг ашиглана уу.
Алхам 5: Тоглоомын мөчлөгтөө холбоно уу
HUD-ийг тоглоомын төлөвт (эрүүл мэндийн утга, оноо, цаг) холбоно уу. Ихэнх чадварууд нь жижиг GameUIState адаптерыг агуулдаг бөгөөд энэ нь setHealth(0.7) API-г ил болгодог тул та CSS хувьсагчдыг гараар өөрчлөх шаардлагагүй болно. Пауз, тохиргоо, төгсгөлийн дэлгэцийн үйл явдлуудыг одоо байгаа оролтын удирдлагатайгаа холбоно уу.
Алхам 6: 3 харь хүмүүстэй хамт туршиж, засварлана уу
Найзууд таны UI-г гайхалтай гэж хэлнэ. Харь хүмүүс танд үнэнийг хэлнэ. Itch.io руу нэг багц байршуулж, 3 санамсаргүй хүмүүсээс 5 минут тоглохыг хүсэж, бичлэгийг нь үзнэ үү. Хамаатай UI алдаанууд эхний 60 секундын дотор гарч ирнэ. Эдгээрийг засаад, холбогдох гадаргууг дахин үүсгэж, тээвэрлэнэ.
Нийт хугацаа: Алхам 1-3 (~1 цаг) + Алхам 4 (~30 минут) + Алхам 5 (~6-8 цаг интеграц) + Алхам 6 (~3 цаг туршилтын мөчлөг) = амралтын өдөр.
Чөлөөт UI дизайнер нь ижил хэмжээний ажлыг $3,000-$8,000 үнээр авч, 4-6 долоо хоног зарцуулна. Vibe Skills дээрх захиалга нь сард $39-аас эхэлдэг бөгөөд танд хязгааргүй үүсгэлт хийх боломжийг олгодог - ингэснээр та UI зөв мэт санагдах хүртэл хэчнээн ч удаа давтаж хийх боломжтой.
Vibe Skills дээр тоглоомны UI чадварыг суулгана уу →
Түгээмэл асуултууд
Тоглоомны UI-г HTML/CSS давхарга эсвэл canvas дээр шууд бүтээх ёстой юу?
Ихэнх браузер тоглоомуудын хувьд Three.js эсвэл Phaser canvas-ын дээгүүр HTML/CSS давхарга нь илүү хурдан бүтээгддэг, хэрэглэхэд хялбар, мөн ямар ч нягтралтай текст сайн харагддаг. Canvas-д суурилсан UI-г зөвхөн пикселээр төгс зурагтай байдал (хатуу пиксел-зурагтай тоглоом) хэрэгтэй бол эсвэл DOM үйл явдлууд нь оролцоонд саад болвол л ашиглана уу. Vibe Skills дээрх чадварууд нь хоёр хувилбарыг гаргадаг.
UI нь мобайл төхөөрөмж дээр ажиллах уу, эсвэл тусдаа мобайл багц хэрэгтэй юу?
Vibe Skills дээрх Браузер тоглоомын UI иж бүрдэл нь мэдрэгчтэй төхөөрөмжүүд дээр шууд ажилладаг хариуцлагатай байршлыг үүсгэдэг - том товших боломжууд, мобайл хяналтын давхаргуудыг (D-pad ба үйлдлийн товчлуурууд) солих, мөн мобайл-төвтэй паузын цэс. Танд тусдаа багц хэрэггүй, гэхдээ та жинхэнэ утсаар турших хэрэгтэй. Браузер хөгжүүлэгчийн хэрэгслүүд нь мэдрэгчтэй гүйцэтгэлийн талаар худал хэлдэг.
Тоглоомны UI бодит байдалд хэр хүртээмжтэй байж болох вэ?
Браузер тоглоомууд нь цэс, тохиргоо, HUD-уудын хувьд WCAG AA-г амархан хангаж чадна - гар удирдлага, фокусын цагираг, 4.5:1 өнгөний тодосгол, мөн оноо болон эрүүл мэндийн дэлгэцэн дээрх дэлгэц уншигч шошго. HTML давхаргын арга нь эдгээрийг бараг үнэ төлбөргүй болгодог. Vibe Skills дээрх чадварууд нь анхдагчаар хүртээмжтэй тэмдэглэгээг үүсгэдэг. Бодит тоглоомын явцыг хүртээмжтэй болгоход илүү хэцүү байдаг, гэхдээ UI нь саад болох ёсгүй.
Unity WebGL болон Godot HTML5 багцуудтай адил UI иж бүрдэл ажилладаг уу?
Ихэнхдээ тийм ээ. Unity WebGL болон Godot HTML5 хоёулаа canvas руу гаргадаг бөгөөд та дээр нь DOM давхаргыг байрлуулж болно. Чадварууд нь хоёр хөдөлгүүрт зориулсан адаптеруудыг агуулдаг бөгөөд ингэснээр UI нь таны тоглоомын төлөвтэй ярилцдаг. Unity-ийн тусгай функцууд (жишээ нь, анхдагч үйл явдлын систем) нь нимгэн гүүр шаарддаг - чадвар нь тэр гүүрний жишээ кодыг гаргадаг.
Цэс, HUD, агуулахыг визуал байдлаар хэрхэн нэгдмэл байлгах вэ?
Энэ бол инди тоглоомны UI нь мэргэжлийн бус харагддаг #1 шалтгаан юм - 6 гадаргуу нь тус тусад нь зохион бүтээгдсэн. Үүний шийдэл нь хуваалцсан дизайны токенууд юм: өнгө, фонт, зай, хөнгөлөлтийг тодорхойлдог нэг файл. Бүх гадаргуу нь энэ файлаас импортолдог. Vibe Skills дээрх чадварууд үүнийг автоматаар хийдэг - нэг удаа токенуудыг үүсгэж, тэдгээр токенуудаас бүх 6 гадаргууг үүсгэнэ, дууслаа.
Гаргасан UI-г чадварыг эвдэлгүйгээр өөрчилж болох уу?
Тийм ээ. Чадварууд нь засах боломжтой HTML, CSS, мөн (нэмэлт байдлаар) React бүрэлдэхүүн хэсгүүдийг гаргадаг. Та эдгээр файлуудын эзэн болно. Ихэнх хөгжүүлэгчид өнгө өөрчилж, лого солих, дүрсийг орлуулах, нэг эсвэл хоёр товчлуурын хэлбэрийг өөрчилдөг - энэ л болно. Хэрэв танд томоохон хэв маягийн өөрчлөлт хэрэгтэй бол гадаргууг гараар дахин бичихээс илүү өөрчилсөн токенуудаас дахин үүсгэнэ үү.
Хэрэв миний тоглоом аль хэдийнээ хагас бүтээгдсэн UI-тай бол би үүнийг хаях ёстой юу?
Үгүй ээ. HUD Overlay чадвар эсвэл Pause + Settings Pack-ийг дангаар нь суулгаж, нэг гадаргууг нэг нэгээр нь сольж болно. Ихэнх инди хөгжүүлэгчид эхлээд үндсэн цэсийг (хамгийн их харагдацтай) сайжруулж, дараа нь HUD (хамгийн их ашиглагддаг), дараа нь тохиргоо, паузыг (хамгийн бага ашиглагддаг ч хамгийн их эвдэрдэг) сайжруулдаг. Эхний гадаргууг гаргасны дараа чанарын үсрэлтийг мэдрэх болно.
UI-ийг тээвэрлэ, дараа нь тоглоомыг тээвэрлэ
Тоглоомны UI нь инди төслүүдийг алдагч болон далд алах явдал юм. Тоглоомын явц нь гайхалтай байж болох ч, хэрэв цэс нь анхдагч WordPress сэдэв шиг харагдвал, тоглогчид 90 секундын дотор буцаад явна. Боловсронгуй UI - нэгдмэл токенууд, бэхлэгдсэн HUD, цэвэрхэн тохиргоо, сэтгэл ханамжтай төгсгөлийн дэлгэц - нь 4 цагийн itch.io татацыг жинхэнэ бүтээгдэхүүн шиг болгодог зүйл юм.
4 долоо хоногийн UI-ийг дахин хийхээс зайлсхий. Амралтын өдөр бүрэн 6 гадаргуутай иж бүрдлийг үүсгэж, холбож, тоглоомыг хөгжилтэй болгохоор буцаж очно уу.
Vibe Skills дээр тоглоомны UI чадваруудыг үзэх →
Тоглоомны UI-г эхнээс нь бүтээхээ болино уу. Vibe Skills дээр UI иж бүрдэл чадварыг суулгана уу болон цэс, HUD, агуулах, тохиргоо, паузыг, төгсгөлийн дэлгэцийг нэг суудалдаа тээвэрлэнэ.