Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.
Oyun interfeysi, müstəqil oyunların hazırlanmasındakı ən çətin hissədir (və heç kim bu barədə danışmır)
Əksər müstəqil oyun tərtibatçıları iki həftə ərzində işləyən bir oyun prototipi təqdim edirlər. Sonra UI üzərində üç ay ilişib qalırlar. Proqramçı rəsm əsərləri kimi görünən düymələr. Kamera ilə mübarizə aparan HUD örtükləri. position: absolute və dualarla hazırlanmış inventar qrafikləri. Vibe Skills saytındakı oyun interfeysi üçün AI bacarıqları bir oturuşda vahid menyu sistemləri, HUD-lar və örtüklər yaradır - beləliklə, təkcə parametrlər ekranını deyil, oyunu təqdim edə bilərsiniz.
Bu təlimat, UI-nin niyə oyunçuların qalmasını müəyyən etdiyini, hər oyunun ehtiyac duyduğu altı UI səthini, Vibe Skills-də mövcud olan AI oyun interfeysi bacarıqlarını və tam bir UI dəstini təqdim etmək üçün həftə sonu iş axınını izah edir.
Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.
Oyun interfeysi, niyə oyunçuların qalmasını müəyyən edir
Oyuncular oyununuzu ilk 90 saniyədə mühakimə edirlər və bu saniyələrin çoxu UI içində keçir. Əsas menyu, parametrlər, idarəetmə ipuçları, oyun başlayanda gördükləri ilk HUD. UI cılız hiss olunursa, oyun heç vaxt şans qazanmaz.
Yadda saxlamağa dəyər bir neçə rəqəm:
- Oyunçuların 38%-i əsas menyu qırıq və ya stilizə olunmamış hiss olunarsa, ilk sessiyada brauzer oyunundan imtina edir (itch.io playtest məlumatları, 2025).
- Hollow Knight-ın əsas menyusu 4 düymədir, əl ilə çəkilmişdir və 60fps-də işləyir - və bu, oyunçuların ilk 30 dəqiqə ərzində qalmasının səbəblərindən biridir.
- Celeste-in fasilə ekranı 3 tip ölçüsü və 2 rəngdən istifadə edir. Bütövlükdə UI sistemidir. Məhdudiyyət keyfiyyət kimi qəbul edilir.
- Böyük büdcəli oyunlar bütün istehsal büdcəsinin 15-20%-ni UI/UX-ə xərcləyirlər. Müstəqil tərtibatçılar adətən 0% xərcləyirlər.
Bu fərqi bağlamaq üçün AI bacarıqları yaradılmışdır.
Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.
Hər oyunun ehtiyac duyduğu altı UI səthi
Hər hansı bir şey yaratmadan əvvəl, nə yaratdığınızı bilin. Hər bir brauzer oyunu - 2D platformer, 3D atıcı, sakit dayanan, gəzinti simulyatoru - eyni altı UI səthinə ehtiyac duyur. Yaxşı bir AI bacarığı, hamısını vahid bir stil sistemində təqdim edir.
| Səth | Məqsəd | Ümumi səhvlər | "Yaxşı" necə görünür |
|---|---|---|---|
| Əsas menyu | İlk təəssürat. Rəsm istiqamətini müəyyən edir. | Standart brauzer şriftləri, mərkəzlənmiş mətn, hover vəziyyətləri yoxdur | Maksimum 3-5 düymə, xüsusi tipologiya, hover mikro-animasiyası, fon dövrü |
| HUD örtüyü | Oyun içi məlumat: can, bal, güllə, taymer | Təsadüfi künclərdə üzən rəqəmlər, qruplaşdırma yoxdur, kamera ilə mübarizə | Künclərə bərkidilmiş, yarı şəffaf, məlumat növünə görə qruplaşdırılmış, sakit olduqda yox olur |
| İnventar / yük | Əşya idarəetmə ekranı | 16 sütunlu qrafik, əşya nadirliyi yoxdur, ekranı bloklayan vasitə ipuçları | 4-8 sütunlu qrafik, rənglə kodlanmış nadirlik, yan tərəfdə vasitə ipucu, sürükləmə və buraxma və ya kliklə |
| Parametrlər / Seçimlər | Səs, idarəetmə, qrafika | Açarların bir nəhəng fırlanan siyahısı | Tablar (Səs / Video / İdarəetmələr), açarlar deyil, sürgülər, "Tətbiq et" + "Defolta sıfırla" |
| Fasilə menyusu | Oyunun ortasında fasilə | Bütün oyunu gizləyən modal | 60% şəffaflıqda örtük, 4-5 seçim, klaviatura üçün avto-fokuslanmış "Davam et" |
| Son ekran | Qalibiyyət, məğlubiyyət və ya oyun xülasəsi | Qırmızı Arial-da "Oyun Bitti", təkrar oynama düyməsi yoxdur | Statistikalar xülasəsi, böyük "Bir Daha Oyna" CTA, ikinci dərəcəli "Əsas Menyu" |
Parıldayan 6 UI səthi olan bir oyun tamamlanmış hiss olunur. Stilizə olunmamış 6 UI səthi olan bir oyun, oyunun nə qədər yaxşı olmasından asılı olmayaraq, bir məktəb layihəsi kimi hiss olunur.
Ən çətin hissə hamısını vahid saxlamaqdır - eyni şrift ailəsi, eyni düymə radiusu, eyni hover davranışı, eyni rəng palitrası. AI bacarıqları öz dəyərini burada göstərir.
Vibe Skills-də 5 AI Oyun interfeysi Bacarığı
Vibe Skills-dəki 3D Oyun kateqoriyası tam oynanışlı oyunları və onların ətrafında təqdim edilən UI sistemlərini əhatə edən 30-dan çox bacarığa malikdir. Budur ən çox quraşdırılan beş UI-fokuslu bacarıq.
| Bacarıq | Ən yaxşısı üçün | Mühərriklər | Məhsul |
|---|---|---|---|
| Brauzer Oyun Interfeysi Dəst Generatoru | Bir vahid stildə tam 6 səthi UI | Three.js, Phaser, vanilla JS | HTML/CSS örtük sistemi + sprite cədvəlləri |
| HUD Örtük Sistemi | Yalnız oyun içi HUD (can, bal, minimapa, taymer) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS ilə yerləşdirilmiş örtük və ya kətan sprite-ları |
| Fasilə + Parametrlər Ekranı Paketi | Fasilə, parametrlər, idarəetmə yenidən təyin etməsi | İstənilən veb əsaslı oyun mühərriki | React/HTML modal komponentləri |
| İnventar + Əşya Vasitə İpucu Sistemi | Əşya qrafikləri, sürükləmə və buraxma, nadirlik rəngləri, vasitə ipucları | Three.js, Phaser, Unity WebGL | Komponent kitabxanası + əşya kartı şablonları |
| Əsas Menyu + Son Ekran Kombinasiyası | İlk və son təəssüratlar | İstənilən | Lottie ilə animasiyalı menyu + oyun sonu statistika ekranı |
Bütün 5 bacarıq paylaşılan dizayn token faylı ilə təqdim olunur (rənglər, şriftlər, boşluqlar, yumşalma) buna görə də səthlər eyni dizaynerdən gəlmiş kimi görünür. Əksər müstəqil UI dəstləri bu testi keçə bilmir - menyu bir şrift, HUD başqa bir şrift istifadə edir və oyunçular dərhal fərq edirlər.
Vibe Skills-də 3D Oyun bacarıqlarına baxın →
Bir həftə sonu tam oyun interfeysi dəsti yaradın
Budur itch.io və Newgrounds-da brauzer oyunları təqdim edən müstəqil tərtibatçıların istifadə etdiyi əsl iş axını. Ümumi vaxt: həftə sonu boyunca təxminən 12 iş saatı.
Addım 1: Vibe Skills-də bir UI bacarığı seçin
3D Oyun kateqoriyasına keçin və Brauzer Oyun Interfeysi Dəst Generatoru bacarığını quraşdırın. Bu, bütün 6 səthi vahid bir token sistemində təqdim edən yeganə bacarıqdır. Oyununuzda onsuz da işləyən menyular varsa və yalnız HUD-a ehtiyacınız varsa, bunun əvəzinə ayrıca HUD Örtük bacarığını quraşdırın.
Addım 2: Oyununuzun "vibe"ni 3 sözlə müəyyənləşdirin
Yaratmadan əvvəl, oyununuzun tonunu təsvir edən 3 söz yazın. Nümunələr: "neon, qəddar, sürətli" (bir synthwave atıcı), "yumşaq, sulu, yavaş" (bir balıqçılıq oyunu), "qalın, retro, piksel" (bir metroidvania). Bacarıq rəng palitrası, tipologiya seçimi və animasiya yumşalması üçün bunları giriş kimi istifadə edir. Bunu atlamayın - ümumi giriş ümumi UI yaradır.
Addım 3: Əvvəlcə dizayn tokenlərini yaradın
Bacarıq palitanız, şrift yığınınız, düymə radiuslarınız, boşluq şkalası və animasiya vaxtını ehtiva edən tokens.css faylını və ya Tailwind konfiqurasiyasını çıxarır. Həqiqi UI yaratmazdan əvvəl bunu nəzərdən keçirin. Tokenlər burada səhv görünürsə, hər səth səhv görünəcək. Sevdiyinizə qədər düzəldin.
Addım 4: Bir dəstədə bütün 6 səthi yaradın
Təsdiq edilmiş tokenlərlə tam 6 səthi yaratma prosesini işə salın. Məhsul, HTML/CSS fayllarının (və ya mühərrikdən asılı olaraq React komponentlərinin) bir qovluğu və ya nişanlar üçün bir SVG sprite cədvəlidir. Three.js və ya Phaser üçün HTML örtük yanaşmasını istifadə edin (DOM kətanın üstündə pointer-events: none ilə yığılmışdır). Unity WebGL və ya Godot HTML5 üçün, bacarığın təqdim etdiyi kətan əsaslı variantdan istifadə edin.
Addım 5: Oyun dövrünüzə inteqrasiya edin
HUD-u oyun vəziyyətinizə (can dəyəri, bal, taymer) bağlayın. Əksər bacarıqlar setHealth(0.7) API-ni təqdim edən kiçik bir GameUIState adapteri ehtiva edir, beləliklə CSS dəyişənlərini əl ilə dəyişdirməli deyilsiniz. Fasilə, parametrlər və son ekran hadisələrini mövcud giriş idarəçinizə bağlayın.
Addım 6: 3 yabancı ilə test edin və düzəliş edin
Dostlar UI-nin möhtəşəm olduğunu söyləyəcəklər. Yabançılar isə həqiqəti söyləyəcəklər. itch.io-da bir build yerləşdirin, 3 rastgele adamdan 5 dəqiqə oynamasını xahiş edin və qeydi izləyin. Əhəmiyyətli UI səhvləri ilk 60 saniyədə görünəcək. Bunları düzəldin, əlaqədar səthi yenidən yaradın, təqdim edin.
Ümumi vaxt: Addım 1-3 (~1 saat) + Addım 4 (~30 dəqiqə) + Addım 5 (~6-8 saat inteqrasiya) + Addım 6 (~3 saat test dövrləri) = bir həftə sonu.
Sərbəst UI dizayneri eyni məqsədlə 3.000-8.000 dollar tələb edər və 4-6 həftə vaxt aparardı. Vibe Skills abunəliyi ayda 39 dollardan başlayır və sizə limitsiz yaradıcılıq imkanı verir - beləliklə, UI düzgün hiss olunana qədər istədiyiniz qədər təkrarlaya bilərsiniz.
Vibe Skills-də oyun interfeysi bacarığı quraşdırın →
Tez-tez verilən suallar
Oyun UI-mi HTML/CSS örtüyü kimimi yaratmalıyam, yoxsa birbaşa kətan üzərindəmi?
Əksər brauzer oyunları üçün Three.js və ya Phaser kətanının üzərində HTML/CSS örtüyü yaratmaq daha sürətlidir, əlçatandır və istənilən qətnamədə mətni kəskin şəkildə göstərir. Kətan əsaslı UI yalnız piksel mükəmməl rəsm tutarlılığı (sıkı bir piksel-rəsm oyunu) tələb etdiyinizdə və ya DOM hadisələri girişə mane olduqda istifadə edilməlidir. Vibe Skills -dəki bacarıqlar hər iki variantı təqdim edir.
UI mobil cihazlarda işləyəcəkmi, yoxsa mənə ayrıca mobil build lazımdırmı?
Vibe Skills-dəki Brauzer Oyun Interfeysi Dəsti, toxunma cihazlarında dərhal işləyən cavabdehləyi olan layoutlar yaradır - daha böyük toxunma hədəfləri, mobil idarəetmə örtüklərinin (D-pad və hərəkət düymələri) dəyişdirilməsi və mobilə-əsaslı fasilə menyusu. Sizə ayrıca build lazım deyil, lakin real telefonda test etməlisiniz. Brauzer geliştirici alətləri toxunma performansını yalançı göstərir.
Oyun interfeysi realistik olaraq nə qədər əlçatan ola bilər?
Brauzer oyunları menyular, parametrlər və HUD-lar üçün WCAG AA-ya asanlıqla nail ola bilər - klaviatura naviqasiyası, fokus halqaları, 4.5:1 rəng kontrastı və bal və can üçün ekran oxuyucu etiketləri. HTML örtük yanaşması bütün bunları demək olar ki, pulsuz edir. Vibe Skills-dəki bacarıqlar standart olaraq əlçatan işarələmə yaradır. Əsl oyunun əlçatan olması daha çətindir, lakin UI maneə olmamalıdır.
Eyni UI dəsti Unity WebGL və Godot HTML5 buildləri üçün işləyirmi?
Çox güman ki, bəli. Unity WebGL və Godot HTML5 hər ikisi bir kətan üzərində göstərilir və siz yuxarıda bir DOM örtüyü yığa bilərsiniz. Bacarıqlar hər iki mühərrik üçün adapterlər ehtiva edir, beləliklə UI oyununuzun vəziyyəti ilə danışır. Unity-ə xas xüsusiyyətlər (daxili hadisə sistemi kimi) nazik bir körpü tələb edir - bacarıq bunun üçün nümunə kodu təqdim edir.
Mənim menyu, HUD və inventarımın vizual olaraq tutarlı qalmasını necə təmin edərəm?
Bu, müstəqil oyun UI-sinin həvəskar görünməsinin #1 səbəbidir - təcrid olunmuş şəkildə dizayn edilmiş 6 səth. Düzəliş, paylaşılan dizayn tokenləridir: rəngləri, şriftləri, boşluqları və yumşalmanı müəyyən edən bir fayl. Hər səth bu fayldan idxal edir. Vibe Skills -dəki bacarıqlar bunu avtomatik olaraq edir - tokenləri bir dəfə yaradın, bu tokenlərdən bütün 6 səthi yaradın, bitdi.
Yaradılan UI-ni bacarığı pozmadan fərdiləşdirə bilərəmmi?
Bəli. Bacarıqlar tənzimlənə bilən HTML, CSS və (ixtiyari) React komponentlərini çıxarır. Fayllar sizindir. Əksər tərtibatçılar rəngləri düzəldir, bir logo dəyişir, nişanları dəyişdirir və bir-iki düymə formasını dəyişdirir - budur. Əsaslı bir stil dəyişikliyi etmək lazım gəlsə, səthləri əl ilə yenidən yazmaq əvəzinə yenilənmiş tokenlərdən yenidən yaradın.
Oyunumda artıq yarımçıq bir UI varsa - onu atmalıyamı?
Xeyr. Əlavə HUD Örtük bacarığı və ya Fasilə + Parametrlər Paketi-ni ayrıca quraşdırın və bir səthi bir vaxtda əvəz edin. Əksər müstəqil tərtibatçılar əvvəlcə əsas menyunu (ən yüksək görünürlük), sonra HUD-u (ən çox istifadə edilən), sonra parametrlər və fasiləni (ən az istifadə edilən, lakin ən çox qırıq) yeniləyirlər. Birinci səth təqdim edildikdən sonra keyfiyyətin artdığını hiss edəcəksiniz.
UI-ni təqdim edin, sonra oyunu təqdim edin
Oyun interfeysi, müstəqil layihələrin sakit öldürücüsüdür. Oyunun özü parlaq ola bilər, lakin menyu standart WordPress mövzusu kimi görünürsə, oyunçular 90 saniyə ərzində tərk edirlər. Parıldayan UI - vahid tokenlər, bərkidilmiş HUD, təmiz parametrlər, məmnunedici son ekran - 4 saatlıq itch.io yükləməsini real məhsul kimi hiss etdirən şeydir.
4 həftəlik UI yenidən dizaynını keçin. Bir həftə sonu tam 6 səthi dəst yaradın, onu inteqrasiya edin və oyunu əyləncəli etməyə geri dönün.
Vibe Skills-də oyun interfeysi bacarıqlarına baxın →
Oyun interfeysini sıfırdan yaratmağı dayandırın. Vibe Skills-də bir UI dəsti bacarığı quraşdırın və menyu, HUD, inventar, parametrlər, fasilə və son ekranı bir oturuşda təqdim edin.