Metlivi Blog

Kompakt Bir Oyun Arayüzünde Evcil Hayvan Kontrolleri ve Karakter Nasıl Görünür Tutulur?

Bir evcil hayvan karakteri etrafında tasarlanan küçük ekranlı oyunlarda; net bir oyun alanı ayırarak, kenarlara yalnızca temel kontrolleri yerleştirerek ve ikincil kontrolleri mevcut eyleme göre uyarlayarak karakterin görünür kalmasını sağlayın. Temel etkileşim için gereken en az sayıda kontrolle başlayın; ardından karakterin, dokunma hedeflerinin ve önemli durum ipuçlarının farklı ekran boyutlarında ve cihaz güvenli alanlarında görünür kaldığından emin olun.

15 Ekim 20266 dk okuma süresiYazan: Metlivi Editorial Team
Bölüm 1

Ekranda Nelerin Kalması Gerektiğine Karar Verin

Bir oyuncunun ana oyun döngüsü sırasında ihtiyaç duyduğu bilgi ve eylemleri listeleyin. Yararlı bir ilk taslak; evcil hayvanı, besleme veya oyun oynama gibi bir birincil eylemi ve bu eylemin kullanılabilir olup olmadığını netleştiren kompakt bir göstergeyi içerebilir. Ayarları, koleksiyonları ve daha seyrek kullanılan eylemleri ikincil bir menüye veya kısa bir bağlamsal panele taşıyın. Bu evrensel bir kural değil, bir tasarım yöntemidir: Temel görevi birkaç eylem arasından seçim yapmak olan bir oyun, aynı anda daha fazla kontrolün görünür olmasına ihtiyaç duyabilir.

Kontrolleri yerleştirmeden önce karaktere tanımlı bir görsel alan ayırın. Silüetinin ve yüz ifadesinin önemli kısımlarını açıkta bırakın; üzerlerine buton veya etiket yerleştirmekten kaçının. Bir eylem doğrudan evcil hayvana dokunmayı gerektiriyorsa bu etkileşim alanını engelsiz bırakın; kontroller oyun sahnesinin üzerindeyse, karakterin oyuncuların görmesi gereken kısmını kapatmadığından emin olun. Apple'ın oyun kontrolü kılavuzu, oyun nesneleriyle doğrudan etkileşimin yeterli olduğu durumlarda sanal kontrollerin azaltılmasını önerir (Oyun kontrolleri).

Bölüm 2

Birincil Kontrolleri Oyun Alanının Çevresine Yerleştirin

Sık kullanılan eylemleri kolayca erişilebilecek yerlerde gruplandırın ve ikincil eylemleri daha uzağa ya da bir menünün arkasına yerleştirin. Dokunmatik ekranda, butonları oyuncunun elinin evcil hayvanı kapattığı bölgeye yığmaktan kaçının. Apple, sık kullanılan dokunmatik kontrollerin başparmağa yakın, ikincil kontrollerin ise ekranın üst kısmına yakın yerleştirilmesini önerir; kılavuzu ayrıca rahat erişim mesafesinin ve cihaz sınırlarının hesaba katılmasını belirtir. Bunları her oyun için değişmez bir yerleşim olarak değil, hedeflenen cihaz ve yönelimde test edilecek başlangıç noktaları olarak değerlendirin.

Görünür simgeyi, gerçek dokunma hedefini onunla eşleşecek şekilde küçültmeden kompakt tutun. Apple, kendi platformlarında sık kullanılan kontroller için en az 44x44 nokta, daha az önemli kontroller içinse 28x28 nokta önermektedir. Android, etkileşimli dokunma hedefleri için en az 48x48 yoğunluktan bağımsız piksel (dp) önerir. Bunlar platforma özgü ölçümlerdir; bu nedenle rakamları birbirinin yerine kullanılabilecek değerler olarak görmek yerine ilgili platformun birimlerini ve kılavuzunu kullanın (Apple oyun kontrolleri, Android erişilebilirlik kılavuzu). Özellikle iki eylem farklı sonuçlar doğuruyorsa, yanlışlıkla dokunmaları önlemek için yeterli boşluk bırakın.

Bölüm 3

Karakterin Arayüz Karşısında Okunabilirliğini Koruyun

Bir evcil hayvan teknik olarak ekranda kalsa bile, kontroller, etiketler veya dekoratif paneller onunla rekabet ettiğinde fark edilmesi zorlaşabilir. İkincil arayüz ögeleri için dengeli bir görsel ağırlık kullanın: küçük simgeler, kısa etiketler ve yalnızca ihtiyaç duydukları alanı kaplayan paneller. En önemli eylemler sırasında karakterin yüzünü ve diğer kritik detaylarını net tutun. Oyun sahnesi metin veya simgelerin arkasında değişiyorsa, büyük ve opak bir panel eklemeden arayüzün okunabilir kalması için hafif bir arka plan veya dış hat kullanmayı değerlendirin.

Metin ve simgeleri sahnenin hem aydınlık hem de karanlık bölümleri üzerinde kontrol edin. Bir arka planda işe yarayan kontrast, evcil hayvan hareket ettiğinde veya sahne değiştiğinde kaybolabilir. Metinler için W3C'nin WCAG kılavuzu, normal boyuttaki metinler için 4,5:1, büyük metinler içinse 3:1 kontrast oranı belirler. WCAG, oyuna özgü bir kuraldan ziyade bir web içeriği kılavuzudur; ancak kontrast eşikleri, değişken arka planlar üzerindeki arayüz metinleri için faydalı bir kontrol görevi görebilir (W3C kontrast kılavuzu). Kullanılamayan bir eylemi iletmek için yalnızca renge güvenmeyin; etiketini, şeklini veya durumunu da görünür şekilde değiştirin.

Bölüm 4

Kontrolleri Yalnızca İlgili Olduklarında Gösterin

Sürekli ekranda kalan kontroller çok fazla yer kaplıyorsa, oyuncu bir menü açtığında veya evcil hayvanı seçtiğinde isteğe bağlı eylemleri gösterin. Mevcut durumda kullanılamayan eylemleri gizleyin ve bir kontrole basıldığında net bir durum değişikliği gösterin. Apple, hangi sanal kontrollerin görüneceğinin oyun bağlamına göre uyarlanmasını (ilgili olmayan kontrollerin gizlenmesi ve aktif kontrollerin daha görünür kılınması dahil) özellikle tavsiye eder. Pratik bir yöntem; birincil eylemi erişilebilir tutup ilgili seçenekleri seçimden sonra kapanan küçük bir menüde göstermektir.

Durum değişikliklerinin öngörülebilir olmasını sağlayın. Bir oyuncu tam kullanmak üzereyken kaybolan bir kontrol kafa karışıklığına yol açabilir; bu nedenle gizleme/gösterme davranışını, kullanılabilirliği mevcut durumdan açıkça anlaşılan eylemlere saklayın. Bir buton pasif hale gelirse bu durumu belirtin ve gerektiğinde neyin değiştiğini kısaca açıklayın. Genişleyen bir menünün evcil hayvanın yüzünü veya oyuncunun bir sonraki adımda dokunması gereken alanı kapatmasına izin vermeyin.

Bölüm 5

Güvenli Alanlara ve Ekran Şekillerine Uyum Sağlayın

Yalnızca ekranın dış dikdörtgenine göre değil, kullanılabilir alana göre tasarım yapın. Çentikler, kamera delikleri, sistem çubukları ve hareket (jest) alanları kenara yakın önemli kontrollerle çakışabilir. Apple'ın yerleşim kılavuzu; güvenli alanları, içeriğin arayüz ögelerinden ve cihaz özelliklerinden uzakta tutulmasına yardımcı olan bölgeler olarak tanımlar. Android de benzer şekilde sistem çubuğu, hareket ve ekran kesiği (cutout) girintilerine uyulmasını ve kritik kontrollerin kesiklerden uzak tutulmasını önerir (Apple yerleşim kılavuzu, Android uçtan uca kılavuzu). Etkileşimli ögeler içeride kalırken, arka plan grafikleri kenarlara kadar uzanabilir.

Tek bir kompakt düzenin her en-boy oranına uyacağını varsaymayın. Kontrolleri kullanılabilir alana sabitleyin ve kullanılabilir genişlik değiştiğinde aralıkların veya gruplandırmanın uyum sağlamasına izin verin. Android'in Unity için oyun kılavuzu, güvenli alan API'sinin kullanılmasını ve farklı ekran boyutları ile en-boy oranlarının desteklenmesini önerir. Dikey veya yatay düzenleri yalnızca oyun bunları destekliyorsa test edin; eğer bu konfigürasyonlar kapsam dahilindeyse döndürme, pencere boyutlandırma veya cihaz katlama işlemlerinden sonra yeniden kontrol edin (Büyük ekranlarda Unity oyunları için Android kılavuzu).

Bölüm 6

Yerleşimi Gerçek Oynanış Sırasında Kontrol Edin

Statik bir maket, kullanım sırasında oyuncunun parmaklarının hangi alanları kapattığını gösteremez. Arayüzü hedeflenen fiziksel ekran boyutunda inceleyin; ardından kapanan karakter detaylarına, ıskalanan dokunmalara ve sistem özellikleriyle çakışan kontrollere dikkat ederek ana eylemleri deneyin. Kontrolü desteklenen en küçük ekranla ve daha geniş veya daha uzun bir en-boy oranıyla tekrarlayın. Mümkünse, yerleşime aşina olmayan birinden ana görevi gerçekleştirmesini isteyin ve nereye dokunduğunu, nerede tereddüt ettiğini veya evcil hayvanı nerede gözden kaçırdığını not edin.

Desteklenen her yerleşim için kısa bir başarılı/başarısız kontrol listesi kullanın:

  • Yüzü veya diğer önemli detayları da dahil olmak üzere evcil hayvan ana eylem sırasında görünür kalıyor.

  • Birincil eyleme ulaşılabiliyor, net bir basılma durumu var ve başka bir hedefle çakışmıyor.

  • Etiketler ve önemli durum ipuçları, değişen sahne arka planlarına karşı okunabilirliğini koruyor.

  • Kamera kesiğinin, sistem çubuğunun veya hareket alanının altında hiçbir temel kontrol yer almıyor.

  • İkincil bir kontrolün açılması, karakterin veya oyun alanının bir sonraki adım için gereken kısmını gizlemiyor.

Bir kontrol başarısız olursa her seferinde tek bir şeyi değiştirin: düşük öncelikli bir ögeyi kaldırın, güvenli girintilere uyarak bir kontrolü oyun alanının kenarına doğru kaydırın veya ikincil eylemleri yalnızca gerektiğinde gösterin. Aynı etkileşimi yeniden test edin. Bu, değişikliğin görünürlük sorununu gerçekten çözüp çözmediğini yoksa yalnızca başka bir yere mi taşıdığını görmeyi kolaylaştırır.

Bölüm 7

Kaynaklar

İlgili okumalar

Bu konuyu keşfetmeye devam et