Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Oyun Arayüzü Bağımsız Geliştirmenin En Zor Kısmıdır (ve Kimse Bundan Bahsetmez)
Çoğu bağımsız geliştirici iki hafta içinde çalışan bir oyun prototipi sunar. Ardından arayüzde takılı kalarak üç ay geçirirler. Programcı sanatı gibi görünen düğmeler. Kamerayla mücadele eden HUD kaplamaları. position: absolute ve dualarla oluşturulmuş envanter ızgaraları. Vibe Skills üzerindeki oyun arayüzü için yapay zeka becerileri, tek bir oturuşta tarayıcı oyunları için uyumlu menü sistemleri, HUD'lar ve kaplamalar oluşturarak oyununuzu değil, ayarlar ekranını göndermenizi sağlar.
Bu rehber, arayüzün oyuncu tutunmasını nasıl belirlediğini, her oyunun ihtiyaç duyduğu altı arayüz yüzeyini, Vibe Skills'de bulunan yapay zeka oyun arayüzü becerilerini ve tam bir arayüz kiti göndermek için hafta sonu iş akışını anlatmaktadır.
Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Oyun Arayüzü Oyuncu Tutunmasını Nasıl Belirler
Oyuncular oyununuzu ilk 90 saniyede yargılarlar ve bu saniyelerin çoğu arayüzde geçer. Ana menü, ayarlar, kontrol ipuçları, oyun başladığında gördükleri ilk HUD. Arayüz titrek hissettirirse, oynanış şans bulamaz.
Aklınızda tutmaya değer birkaç rakam:
- Tarayıcı oyunlarında oyuncuların %38'i, ana menü bozuk veya stilize edilmemiş hissettiğinde ilk oturumda oyunu bırakır (itch.io oyun test verileri, 2025).
- Hollow Knight'ın ana menüsü 4 düğmeden oluşur, elle çizilmiştir ve 60fps'de çalışır - ve oyuncuların acımasız ilk 30 dakika boyunca oyunda kalmasının en çok alıntılanan nedenlerinden biridir.
- Celeste'in duraklatma ekranı 3 yazı tipi boyutu ve 2 renk kullanır. Tüm arayüz sistemi budur. Kısıtlama kalite olarak algılanır.
- Büyük bütçeli oyunlar, toplam üretim bütçelerinin %15-20'sini arayüz/UX'e harcar. Bağımsız geliştiriciler tipik olarak %0 harcar.
Bu boşluğu kapatmak için yapay zeka becerileri tasarlanmıştır.
Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.
Her Oyunun İhtiyaç Duyduğu Altı Arayüz Yüzeyi
Bir şey oluşturmadan önce, ne oluşturduğunuzu bilin. Her tarayıcı oyunu - 2D platformer, 3D nişancı, boşta tıklayıcı, yürüme simülatörü - aynı altı arayüz yüzeyine ihtiyaç duyar. İyi bir yapay zeka becerisi, hepsini tek bir uyumlu stil sisteminde sunar.
| Yüzey | Amaç | Yaygın hatalar | "İyi" nasıl görünür |
|---|---|---|---|
| Ana menü | İlk izlenim. Sanat yönünü belirler. | Varsayılan tarayıcı yazı tipleri, ortalanmış metin, fareyle üzerine gelme durumları yok | Maksimum 3-5 düğme, özel tipografi, fareyle üzerine gelme mikro animasyonu, arka plan döngüsü |
| HUD kaplaması | Oyun içi bilgi: sağlık, puan, cephane, zamanlayıcı | Rastgele köşelerde yüzen sayılar, gruplama yok, kamerayla mücadele eder | Köşelere sabitlenmiş, yarı saydam, veri türüne göre gruplandırılmış, boşta kaldığında kaybolur |
| Envanter / yükleme ekranı | Öğe yönetim ekranı | 16 sütunlu ızgara, öğe nadirliği yok, ekranı engelleyen araç ipuçları | 4-8 sütunlu ızgara, renkle kodlanmış nadirlik, yanda araç ipucu, sürükle-bırak veya tıkla |
| Ayarlar / seçenekler | Ses, kontroller, grafikler | Açıp kapatma düğmelerinden oluşan devasa kaydırılabilir bir liste | Sekmeler (Ses / Video / Kontroller), açma/kapama yerine kaydırıcılar, "Uygula" + "Varsayılana Sıfırla" |
| Duraklatma menüsü | Oyun ortası kesintisi | Tüm oyunu gizleyen modal | %60 opaklıkta kaplama, 4-5 seçenek, klavye için otomatik olarak odaklanmış "Devam Et" |
| Bitiş ekranı | Kazanma, kaybetme veya tur özeti | Kırmızı Arial ile "Oyun Bitti", tekrar oynama düğmesi yok | İstatistik özeti, büyük "Tekrar Oyna" CTA, ikincil "Ana Menü" |
6 adet cilalı arayüz yüzeyine sahip bir oyun bitmiş gibi hissettirir. 6 adet stilize edilmemiş arayüz yüzeyine sahip bir oyun, oynanışı ne kadar iyi olursa olsun bir okul projesi gibi hissettirir.
En zor kısım 6'sını da uyumlu tutmaktır - aynı yazı tipi ailesi, aynı düğme yarıçapı, aynı fareyle üzerine gelme davranışı, aynı renk paleti. Yapay zeka becerileri burada değer kazanır.
Vibe Skills'de 5 Yapay Zeka Oyunu Arayüz Becerisi
Vibe Skills'deki 3D Oyunlar kategorisi, tam oynanabilir oyunları ve bunların etrafında sunulan arayüz sistemlerini kapsayan 30'dan fazla beceriye sahiptir. İşte en çok yüklenen beş arayüz odaklı beceri.
| Beceri | En iyi olduğu alan | Motorlar | Çıktı |
|---|---|---|---|
| Tarayıcı Oyunu Arayüz Kiti Oluşturucu | Tek bir uyumlu stilde tam 6 yüzeyli arayüz | Three.js, Phaser, saf JS | HTML/CSS kaplama sistemi + sprite kümeleri |
| HUD Kaplama Sistemi | Yalnızca oyun içi HUD (sağlık, puan, minimap, zamanlayıcı) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS konumlandırılmış kaplama veya tuval sprite'ları |
| Duraklatma + Ayarlar Ekran Paketi | Duraklatma, ayarlar, kontrol yeniden eşleme | Herhangi bir web tabanlı oyun motoru | React/HTML modal bileşenleri |
| Envanter + Ganimet Araç İpucu Sistemi | Öğe ızgaraları, sürükle-bırak, nadirlik renkleri, araç ipuçları | Three.js, Phaser, Unity WebGL | Bileşen kütüphanesi + öğe kartı şablonları |
| Ana Menü + Bitiş Ekranı Kombinasyonu | İlk ve son izlenimler | Herhangi biri | Lottie ile animasyonlu menü + oyun sonu istatistik ekranı |
Tüm 5 beceri, yüzeylerin aynı tasarımcıdan gelmiş gibi görünmesini sağlayan paylaşılan bir tasarım jetonu dosyasıyla (renkler, yazı tipleri, aralık, yumuşatma) birlikte gelir. Çoğu bağımsız arayüz kiti bu testte başarısız olur - menü bir yazı tipi kullanır, HUD başka bir yazı tipi kullanır ve oyuncular bunu hemen fark eder.
Vibe Skills'de 3D Oyun becerilerine göz atın →
Hafta Sonunda Tam Bir Oyun Arayüz Kiti Oluşturun
İşte itch.io ve Newgrounds'da tarayıcı oyunları yayınlayan bağımsız geliştiricilerin kullandığı gerçek iş akışı. Toplam süre: hafta sonu boyunca yaklaşık 12 çalışma saati.
Adım 1: Vibe Skills'de bir arayüz becerisi seçin
3D Oyunlar kategorisini açın ve Tarayıcı Oyunu Arayüz Kiti Oluşturucu becerisini yükleyin. Tek bir uyumlu jeton sisteminde tüm 6 yüzeyi sunan tek beceridir. Oyununuzda zaten çalışan menüler varsa ve yalnızca bir HUD'a ihtiyacınız varsa, bunun yerine bağımsız HUD Kaplama becerisini yükleyin.
Adım 2: Oyununuzun "hava akışını" 3 kelimeyle tanımlayın
Oluşturmadan önce, oyununuzun tonunu tanımlayan 3 kelime yazın. Örnekler: "neon, acımasız, hızlı" (bir synthwave nişancısı), "yumuşak, sulu, yavaş" (bir balık tutma oyunu), "iri, retro, piksel" (bir metroidvania). Beceri, renk paleti, tipografi seçimi ve animasyon yumuşatması için girdi olarak bunları kullanır. Bunu atlamayın - rastgele girdi rastgele arayüz üretir.
Adım 3: Önce tasarım jetonlarını oluşturun
Beceri, renk paletiniz, yazı tipi yığınınız, düğme yarıçaplarınız, aralık ölçeğiniz ve animasyon zamanlamanızla birlikte bir tokens.css dosyası veya Tailwind yapılandırması çıktısı verir. Herhangi bir gerçek arayüz oluşturmadan önce bunu gözden geçirin. Jetonlar burada yanlış görünürse, her yüzey yanlış görünecektir. Sevene kadar ince ayar yapın.
Adım 4: 6 yüzeyin tamamını tek bir toplu işte oluşturun
Onaylanmış jetonlarla, tam 6 yüzeyli oluşturmayı çalıştırın. Çıktı, bir klasör HTML/CSS dosyası (veya motorunuza bağlı olarak React bileşenleri) artı simgeler için bir SVG sprite kümesidir. Three.js veya Phaser için HTML kaplama yaklaşımını (DOM, pointer-events: none ile tuvalin üzerine yığılmış) kullanın. Unity WebGL veya Godot HTML5 için, becerinin sunduğu tuval tabanlı varyantı kullanın.
Adım 5: Oyun döngünüze bağlayın
HUD'u oyun durumunuza (sağlık değeri, puan, zamanlayıcı) bağlayın. Çoğu beceri, CSS değişkenlerini manuel olarak değiştirmeniz gerekmemesi için setHealth(0.7) gibi bir API sunan küçük bir GameUIState adaptörü içerir. Duraklatma, ayarlar ve bitiş ekranı olaylarını mevcut giriş işleyicinize bağlayın.
Adım 6: 3 yabancıyla test edin ve revize edin
Arkadaşlar size arayüzün harika olduğunu söyleyecektir. Yabancılar size gerçeği söyleyecektir. itch.io'ya bir yapı yayınlayın, 3 rastgele kişiden 5 dakika oynamasını isteyin ve kaydı izleyin. Önemli arayüz hataları ilk 60 saniyede ortaya çıkacaktır. Bunları düzeltin, etkilenen yüzeyi yeniden oluşturun, gönderin.
Toplam süre: Adım 1-3 (yaklaşık 1 saat) + Adım 4 (yaklaşık 30 dakika) + Adım 5 (yaklaşık 6-8 saat entegrasyon) + Adım 6 (yaklaşık 3 saat test döngüsü) = bir hafta sonu.
Serbest bir arayüz tasarımcısı, aynı kapsam için 3.000-8.000$ ücret talep eder ve 4-6 hafta sürer. Vibe Skills üzerindeki abonelikler ayda 39$'dan başlar ve sınırsız oluşturma imkanı sunar - böylece arayüz doğru hissedene kadar istediğiniz kadar yineleme yapabilirsiniz.
Vibe Skills'de bir oyun arayüzü becerisi yükleyin →
Sıkça Sorulan Sorular
Oyun arayüzümü HTML/CSS kaplaması olarak mı yoksa doğrudan tuval üzerine mi inşa etmeliyim?
Çoğu tarayıcı oyunu için, Three.js veya Phaser tuvali üzerine bir HTML/CSS kaplaması oluşturmak daha hızlıdır, erişilebilirliği daha kolaydır ve herhangi bir çözünürlükte net metin oluşturur. Piksel mükemmel sanat tutarlılığı (katı bir piksel sanatı oyunu) gerektirdiğinizde veya DOM olayları girişe müdahale ettiğinde yalnızca tuval tabanlı arayüz kullanın. Vibe Skills üzerindeki beceriler her iki varyantı da sunar.
Arayüz mobil cihazlarda çalışacak mı, yoksa ayrı bir mobil yapılandırma mı gerekiyor?
Vibe Skills'deki Tarayıcı Oyunu Arayüz Kiti, dokunmatik cihazlarda kutudan çıktığı gibi çalışan duyarlı düzenler oluşturur - daha büyük dokunma hedefleri, takılan mobil kontrol kaplamaları (D-pad ve eylem düğmeleri) ve mobil öncelikli bir duraklatma menüsü. Ayrı bir yapılandırmaya ihtiyacınız yok, ancak gerçek bir telefonda test etmeniz gerekiyor. Tarayıcı geliştirici araçları dokunmatik performans hakkında yalan söyler.
Oyun arayüzü ne kadar erişilebilir olabilir?
Tarayıcı oyunları, menüler, ayarlar ve HUD'lar için WCAG AA'ya kolayca ulaşabilir - klavye navigasyonu, odak halkaları, %4.5:1 renk kontrastı ve puan ve sağlık için ekran okuyucu etiketleri. HTML kaplama yaklaşımı bunların çoğunu neredeyse ücretsiz hale getirir. Vibe Skills üzerindeki beceriler varsayılan olarak erişilebilir işaretleme oluşturur. Gerçek oynanışın erişilebilir hale getirilmesi daha zordur, ancak arayüz engelleyici olmamalıdır.
Aynı arayüz kiti Unity WebGL ve Godot HTML5 yapılandırmaları için çalışır mı?
Çoğunlukla evet. Unity WebGL ve Godot HTML5, her ikisi de bir tuvale çıktı verir ve üstüne bir DOM kaplaması yığabilirsiniz. Beceri, arayüzün oyununuzun durumuyla konuşması için her iki motor için de adaptörler içerir. Unity'ye özgü özellikler (dahili olay sistemi gibi) ince bir köprü gerektirir - beceri bunun için örnek kod içerir.
Menü, HUD ve envanteri görsel olarak tutarlı nasıl tutabilirim?
Bağımsız oyun arayüzlerinin amatörce görünmesinin bir numaralı nedeni budur - izole tasarlanmış 6 yüzey. Çözüm, paylaşılan tasarım jetonlarıdır: renkleri, yazı tiplerini, aralığı ve yumuşatmayı tanımlayan tek bir dosya. Her yüzey bu dosyadan içe aktarır. Vibe Skills üzerindeki beceriler bunu otomatik olarak yapar - jetonları bir kez oluşturun, bu jetonlardan tüm 6 yüzeyi oluşturun, tamamdır.
Oluşturulan arayüzü beceriyi bozmadan özelleştirebilir miyim?
Evet. Beceri, düzenlenebilir HTML, CSS ve (isteğe bağlı olarak) React bileşenleri çıktısı verir. Dosyalar size aittir. Çoğu geliştirici renkleri ayarlar, bir logo değiştirir, simgeleri değiştirir ve bir veya iki düğme şeklini değiştirir - hepsi bu kadar. Büyük bir stil değişikliği gerekiyorsa, yüzeyleri elle yeniden yazmak yerine güncellenmiş jetonlardan yeniden oluşturun.
Oyunumda zaten yarı inşa edilmiş bir arayüz varsa - onu atmalı mıyım?
Hayır. HUD Kaplama becerisini veya Duraklatma + Ayarlar Paketi bağımsız olarak yükleyin ve yüzeyleri tek tek değiştirin. Çoğu bağımsız geliştirici önce ana menüyü (en yüksek görünürlük), ardından HUD'u (en çok kullanılan), ardından ayarları ve duraklatmayı (en az kullanılan ama en bozuk) yükseltir. İlk yüzey gönderildikten sonra kalite artışını hissedeceksiniz.
Arayüzü Gönder, Sonra Oyunu Gönder
Oyun arayüzü, bağımsız projelerin sessiz ölümüdür. Oynanış parlak olabilir, ancak menü varsayılan bir WordPress teması gibi görünüyorsa, oyuncular 90 saniyede geri döner. Cilalı arayüz - uyumlu jetonlar, sabitlenmiş HUD, temiz ayarlar, tatmin edici bitiş ekranı - 4 saatlik bir itch.io indirmesini gerçek bir ürün gibi gösteren şeydir.
4 haftalık arayüz yeniden tasarımını atlayın. Bir hafta sonu tam bir 6 yüzeyli kit oluşturun, bağlayın ve oyunu eğlenceli hale getirmeye geri dönün.
Vibe Skills'de oyun arayüzü becerilerine göz atın →
Oyun arayüzünü sıfırdan oluşturmayı bırakın. Vibe Skills'de bir arayüz kiti becerisi yükleyin ve menüyü, HUD'u, envanteri, ayarları, duraklatmayı ve bitiş ekranını tek bir oturuşta gönderin.