Roblox doğası gereği çoklu platform'dur; oyuncular telefon veya tabletlerinde oyunları keşfedip katılabilir, ardından PC veya konsollarında kaldıkları yerden devam edebilirler. Genişleyen platform yelpazesini desteklemek için, giriş türüne (dokunma, oyun kumandası, fare/klavye), ekran boyutuna ve cihaz yönüne sorunsuz bir şekilde uyum sağlayan kullanıcı arayüzleri oluşturmalısınız. Bu kılavuz, uyumlu tasarım kılavuzu ve bağlantılı kaynaklar, tüm platformlarda uyumlu, erişilebilir ve keyifli bir çoklu platform oyunu tasarlamanıza yardımcı olabilir.
Aşağıdaki çoklu platform tasarım kavramlarını sergileyen önceden yapılmış bir oyunu keşfetmek için Etkileşimli Vitrin'i kontrol edin.
Giriş
İyi tasarlanmış bir oyun, fare ve klavye, dokunma ve oyun kumandası dahil olmak üzere tüm ana giriş türlerini desteklemelidir.
Çoklu platform eylemleri
Tüm ana giriş türlerini (fare/klavye, dokunma ve oyun kumandaları) Giriş Eylem Sistemi kullanarak destekleyin.
Çoklu platform girişlerini basitleştirmek için, Roblox, "zıpla", "koş" veya "ateş et" gibi eylemleri tanımlamak ve bu eylemleri yönlendirmek için birden fazla donanım girişi için bağlantılar ayarlamak üzere Giriş Eylem Sistemi sağlar. Donanım girişlerinin tüm teknik yönlerini düşünmenize gerek yoktur; sadece hangi girişlerin hangi eylemleri gerçekleştirdiğini tanımlarsınız.
Giriş türü tespiti
UI öğelerinin, giriş türü tespiti ile detaylandırıldığı gibi, oyuncunun ana giriş türüne yanıt vermesini ve uyum sağlamasını sağlayın. Ayrıca, oyuncuların belirli giriş değişikliklerini anlamalarına yardımcı olmak için yardımcı ipuçlarını dikkate alın.
Çoklu platform geliştirmede, bir oyuncunun kullandığı ana giriş türünü belirlemek ve buna yanıt vermek önemlidir; bu genellikle UI öğelerinin ekran üzerindeki düğmeler ve menüler gibi cihazlar arasında etkileşim sağlaması için gereklidir.
Örneğin, dokunma destekli bir cihaz, dokunmanın varsayılan giriş olduğunu varsayar ve eylemler için dokunmatik düğmelerin görünebileceğini kabul eder, ancak bir oyuncu bir bluetooth oyun kumandası bağlamayı seçebilir. Bu durumda, dokunma geçerli bir giriş olmaya devam eder, ancak oyuncunun bağlı oyun kumandasını ana giriş türü olarak kullanmak istediğini varsayabilirsiniz ve ekran üzerindeki UI için dokunmayı yedek giriş olarak kullanabilirsiniz.
Eylem Sistemi kullanıyorsanız, PreferredBinding özelliği, ana giriş tespitini tamamlar: PreferredInput oyuncunun mevcut ana giriş türünü raporlarken, PreferredBinding oyuncunun mevcut cihazıyla eşleşen belirli InputBinding'i raporlar. Her ikisi de oyuncu cihazları arasında geçiş yaptıkça otomatik olarak güncellenir, böylece cihaz farkındalığına sahip UI'yi kendiniz cihaz geçiş mantığı yazmadan yönlendirebilirsiniz.
Yardımcı ipuçları
Ana giriş türüne dayanarak, mümkün olduğunca yardımcı UI ipuçları eklemeniz önerilir. Örneğin, oyuncunun bir klavye kullanması durumunda, donanım spesifik ipuçları olarak 1–5 gibi girişleri gösterin veya oyuncunun bir oyun kumandası kullanması durumunda oyun kumandası tetikleyici ipuçları gösterin.
Oyuncu cihazları arasında geçiş yaptığında otomatik olarak güncellenen kodsuz yardımcı ipuçları için InputActionLabel kullanın ve bunu herhangi bir InputAction'a yönlendirin, böylece her platform için doğru girişi görüntüleyin. Tam detaylar için bağlantıları görüntüleme kısmına bakın.
Daha ayrıntılı kontrol için veya InputActionLabel'ın sunduğundan daha fazla özelleştirme yapmanız gerekiyorsa, platforma özgü resimleri ve metinleri manuel olarak toplamak için aşağıdaki UserInputService yöntemlerini kullanabilirsiniz:
GetImageForKeyCode() ve GetStringForKeyCode() yöntemleri, UI ipuçlarında kullanılacak platforma özgü bir resim veya metin toplamak için faydalıdır; aşağıdaki örnekler gibi:
| Tuşa Kodu | Xbox Resmi | PlayStation Resmi | Metin |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Kullanıcı arayüzü
İyi tasarlanmış bir kullanıcı arayüzü, tüm platformlardaki oyuncuların oyununuzla etkileşimde bulunması için gereklidir.
Konum ve boyut
Tüm UI öğelerinin tüm ekran boyutlarında ve yönlerinde görünür olduğundan emin olun.
Tüm düğmeler/kontrollerin etkileşimli olduğundan ve cihaz kesimleri veya Roblox UI öğeleri tarafından engellenmediğinden veya gizlenmediğinden emin olun.
Tüm UI öğeleri, birden fazla ekran boyutunda görünürlük ve etkileşim sağlamak için uygun şekilde konumlandırılmalı ve boyutlandırılmalıdır. UI öğelerini Scale ile konumlandırmak yaygın bir yaklaşımdır çünkü bu, ekranın X ve Y sınırlarının yüzde değerine dayanır, piksel değerine değil (pikseller cihazlar arasında hem sayı hem de yoğunluk açısından keyfi olarak değişebilir). Ayrıca, öğenin AnchorPoint özelliğini konumlandırma kökenini ayarlamak için kullanabilirsiniz. Örneğin, aşağıdaki resimdeki mücevher/para sayacı tutan UI konteyneri, X ölçeği 1 (sağ) ve Y ölçeği 0 (üst) ile üst sağ köşe noktasında konumlandırılmıştır.
Scale, UI öğelerinin boyutlandırılması için de önerilir; örneğin, bir UI konteynerinin her ekranda %75 genişlikte olmasını sağlamak. Ancak, %75, konsol oyuncuları için 4K TV'lerde büyük bir boyut olarak görüntülenecektir, bu nedenle UI düzenlerini farklı görüntüleme alanlarına uyarlamak için ekran boyutu adaptasyonu keşfetmenizi öneririz.
Ekran boyutu adaptasyonu
UI'yi çeşitli ekran boyutlarına uyarlamak için görüntüleme alanı boyutundaki değişiklikleri kontrol edin ve dinleyin.
Roblox platformuna erişilebilen çok sayıda olası ekran boyutu ile, ekran boyutunu piksel cinsinden tahmin etmeye çalışmak genellikle yanlış yorumlamalara yol açar. Bir oyuncunun ekran boyutunu belirlemek ve UI öğelerinin boyutunu/konumunu uyarlamak için Roblox, görüntüleme alanının içsel olarak kategorize edilmiş render boyutunu temsil eden salt okunur ViewportDisplaySize özelliğini sağlar.
| ViewportDisplaySize | Özet |
|---|---|
| Small | Çoğu tablet/mobil/taşınabilir cihaz |
| Medium | Çoğu dizüstü bilgisayar ve monitör |
| Large | Çoğu TV veya daha büyük |
Daha yerel özelleştirme için, UI Stil Editörü kullanarak ViewportDisplaySize ve PreferredInput değerleri için Stil Sorguları yapılandırabilirsiniz. @ViewportDisplaySizeSmall veya @PreferredInputTouch gibi içsel seçiciler kullanmak, UI'nizin oyuncunun cihaz ortamı veya ana giriş yöntemi değiştikçe metin boyutları, konteyner boyutları ve diğer ölçümler için otomatik olarak token değiştirmesini sağlar.
Düzen konteynerleri
Bireysel UI bileşenlerini düzenlemek için düzenleri kullanın ve konteynerlerin içlerindeki çocuk öğelere yanıt verecek şekilde ayarlandığından emin olun.
UI organizasyonunu kolaylaştırmak için, düzen bileşenleri kullanmalısınız. Düzen konteynerleri kullanırken, çocukların okunabilir, erişilebilir ve dağınık olmamasına dikkat edin. Yaygın bir düzen bileşeni UIListLayout'dır; bu, kardeş GuiObjects'ı satırlara veya sütunlara yerleştirir ve bir kardeş nesne eklediğinizde veya kaldırdığınızda buna göre ayarlama yapar.
Ayrıca, en iyi kullanıcı deneyimi için düzen konteynerleri içindeki öğelerin dağılımını ve göreli konumlandırmasını dikkate almalısınız. Bir liste düzenine flex entegre etmek, öğeleri satırları boyunca eşit şekilde doldurmak/dağıtmak veya hizalamak/germe için güçlü bir yoldur veya bireysel öğeleri esnetmek için değişken bir alan boyunca.
Erişilebilirlik
Tüm metinlerin tüm ekranlarda okunabilir olduğundan emin olun. Ayrıca, tüm UI'nın yeterli kontrasta sahip olduğundan ve hiçbir şeyin yalnızca renge dayanmadığından emin olun.
Tüm cihaz ekran boyutlarında doğru boyutlandırılmış UI öğeleri ile birlikte, genel oyun, görme engelli veya renk körlüğü olan oyuncular için erişilebilirlik standartlarını karşılamalıdır. Metin boyutu, metin tabanlı UI'nin okunabilirliğinde önemli bir faktör olabilir, bu nedenle metnin okunamaz (çok küçük) veya daha büyük ekranlarda görsel olarak çok büyük olmamasını sağlamak için bir metin boyutu kısıtlaması eklemelisiniz.
Erişilebilirlik hakkında daha fazla ipucu için erişilebilirlik kılavuzlarına bakın.
Son ipuçları ve püf noktaları
Tam bir çoklu platform oyunu oluştururken, aşağıdaki ipuçları ve püf noktalarını dikkate alın:
- Cihaz emülasyonu, Roblox'ta optimal bir oyun tasarlamak için gereklidir. Çeşitli cihazları ve oyun kumandalarını doğrudan Studio'da emüle etmek için yerleşik Cihaz Emülatörü ve Kumanda Emülatörü kullanın.
- Roblox'un UI stil pipeline'ı, CSS'ye benzer şekilde, UI örnek özelliklerine küresel olarak geçersiz kılmalar tanımlamanıza ve uygulamanıza olanak tanır. Entegre Stil Editörü ile birlikte, tamamen kolayca değiştirilebilir bir kullanıcı arayüzü kurabilirsiniz.
- Oyunuzu etkili bir şekilde çoklu platform hale getirdikten sonra, mobil ve oyun kumandaları üzerinde dokunsal geri bildirim gibi yerel özellikleri, TouchSwipe ve TouchPinch gibi dokunma hareketlerini veya AccelerometerEnabled ve GyroscopeEnabled cihazlar üzerindeki ivmeölçer ve jiroskop işlevselliğini keşfedin.