Roblox doğal olarak çoklu platform olarak tasarlanmıştır; oyuncular oyunları telefon veya tabletlerinde keşfedip katılabilir, daha sonra PC veya konsol aracılığıyla kaldıkları yerden devam edebilirler. Genişleyen platform yelpazesini desteklemek için, kullanıcı arayüzlerini girdinin türüne (dokunma, oyun kumandası, fare/klavye), ekran boyutuna ve cihazın yönüne göre sorunsuz bir şekilde uyum sağlayacak şekilde geliştirmelisiniz. Bu kılavuz, uyarlanabilir tasarım kılavuzu ve bağlantılı kaynaklar, gerçekten çoklu platform uyumlu, erişilebilir ve keyifli bir oyun tasarlamanıza yardımcı olabilir.
Aşağıdaki çoklu platform tasarım kavramlarını sergileyen önceden hazırlanmış bir oyunu keşfetmek için, Etkileşimli Gösterimi kontrol edin.
Girdi
İyi tasarlanmış bir oyun, fare ve klavye, dokunma ve oyun kumandaları gibi tüm ana girdi türlerini desteklemelidir.
Çoklu platform eylemleri
Aksiyon Girişi Sistemi kullanarak tüm ana girdi türlerini (fare/klavye, dokunma ve oyun kumandaları) destekleyin.
Çoklu platform girdilerini basit hale getirmek için, Roblox, "zıpla", "koş" veya "ateş et" gibi hareketleri tanımlamak ve bu hareketleri gerçekleştirmek için birden fazla donanım girişi için bağlantılar kurmak üzere Aksiyon Girişi Sistemini sağlar. Tüm donanım girişi teknik yönleri ve belirli girdi tetikleyicilerini ne zaman dinleyeceğiniz hakkında düşünmenize gerek yok; sadece hangi girdilerin hangi hareketleri gerçekleştirdiğini tanımlarsınız.
Girdi türü tespiti
Kullanıcı arayüzü öğelerinin oyuncunun ana girdi türüne yanıt vermesini ve uyum sağlamasını sağlamak için girdi türü tespiti ayrıntılarına göz atın. Ayrıca oyuncuların belirli girdi değişikliklerini anlamalarına yardımcı olacak destekleyici ipuçlarını dikkate alın.
Çoklu platform geliştirmede, oyuncunun kullandığı ana girdi türünü belirlemeniz ve buna yanıt vermeniz önemlidir; genellikle, UI öğeleri gibi ekran üzerindeki butonların ve menülerin zarif bir şekilde çalışmasını ve cihazlar arasında etkileşimi desteklemesini sağlamak için.
Örneğin, dokunma ile etkinleştirilmiş bir cihaz dokunmanın varsayılan girdi olduğunu ve eylemler için dokunma butonlarının görünebileceğini varsayar, ancak bir oyuncu bir Bluetooth oyun kumandası bağlamayı seçebilir. Bu durumda, dokunma geçerli bir girdi olmaya devam eder, ancak oyuncunun bağlanan oyun kumandasını ana girdi türü olarak kullanmak istediğini varsayabilirsiniz ve ekran üzerindeki UI için yedek bir girdi olarak dokunmayı kullanabilirsiniz.
Destekleyici ipuçları
Girdi türü temelinde, mümkün olduğunca destekleyici UI ipuçları eklemeniz önerilir. Örneğin, oyuncunun bir klavye kullanıyorken eşya donatmak için aletleri seçerken, girişe özgü ipuçları görüntüleyin, örneğin klavye kullanırken 1–5 veya oyun kumandası kullanırken oyun kumandası tetikleyici ipuçları.
GetImageForKeyCode() ve GetStringForKeyCode() yöntemleri, bir UI ipucu için kullanılan platforma özgü bir görüntü veya dize toplamakta yardımcı olur, aşağıdaki örnekler gibi:
| TuŞ Kodu | Xbox Görüntüsü | PlayStation Görüntüsü | Dize |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | yok | yok | 1 |
| Enum.KeyCode.Five | yok | yok | 5 |
Kullanıcı arayüzü
İyi tasarlanmış bir kullanıcı arayüzü, tüm platformlarda oyuncuların oyununuzla etkileşime girmesi için gereklidir.
Konum ve boyut
Tüm UI öğelerinin tüm ekran boyutlarına ve yönlerine görünür olduğundan emin olun.
Tüm butonların/kontrol araçlarının etkileşime geçilebilir olduğundan emin olun ve cihaz kesim alanları 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 yerleştirilmiş ve boyutlandırılmış olmalıdır. UI öğelerini Scale kullanarak konumlandırmak, ekranın X ve Y sınırlarının bir yüzdesine dayandığından, piksel değerine (pikseller, cihazlara göre hem sayı hem yoğunluk bakımından keyfi olarak değişebilir) dayandığı için yaygın bir yaklaşımdır. Ayrıca, öğenin AnchorPoint'ini kullanarak pozitif kökünü ayarlayabilirsiniz. Örneğin, aşağıdaki resimdeki değerli taş/sikke sayaçlarını tutan UI kabı, X ölçeği 1 (sağ) ve Y ölçeği 0 (üst) ile üst sağ köşe noktasında yerleştirilmiştir.
Scale aynı zamanda UI öğelerini boyutlandırmak için de önerilir, örneğin bir UI kabının her ekranda %75 genişlikte olmasını sağlamada. Ancak, %75, konsol oyuncuları için 4K TV'lerde çok büyük bir boyutta görünür, bu nedenle UI düzenlerini farklı görünüm alanlarında uyarlamak için ekran boyutu uyarlamasını keşfetmeniz önerilir.
Ekran boyutu uyarlaması
UI'yi çeşitli ekran boyutlarına uyarlamak için görünüm alanı boyutu değişikliklerini kontrol edin ve dinleyin.
Roblox platformuna erişilebilir bir dizi olası ekran boyutu mevcut olduğundan, ekran boyutunu piksellerle tahmin etmeye çalışmak genellikle yanlış yorumlamalara yol açar. Bir oyuncunun ekran boyutunu belirleyip UI öğelerinin boyutunu/konumunu uyarlamak için Roblox, görünüm alanının içsel olarak kategorize edilmiş render boyutunu temsil eden yalnızca okunabilir ViewportDisplaySize özelliğini sağlar.
| ViewportDisplaySize | Özet |
|---|---|
| Small | En fazla tablet/mobil/taşınabilir cihazlar |
| Medium | En fazla dizüstü bilgisayarlar ve monitörler |
| Large | En fazla TV'ler veya daha büyükleri |
Daha yerel özelleştirmeler için, hem ViewportDisplaySize hem de PreferredInput değerleri için UI Stil Editörü kullanarak Stil Sorguları yapılandırabilirsiniz. @ViewportDisplaySizeSmall veya @PreferredInputTouch gibi içsel seçicileri kullanmak, UI'nizin otomatik olarak yazı boyutları, konteyner boyutları ve diğer ölçümler için sembolleri değiştirmesini sağlar, çünkü oyuncunun cihaz ortamı veya ana girdi yöntemi değiştikçe.
Düzen konteynerleri
Bireysel UI bileşenlerini düzenlemek için düzen kullanın ve konteynerlerin içindeki çocuk öğelere göre yanıt veren bir şekilde ayarlandığından emin olun.
UI organizasyonunu kolaylaştırmak için, düzen bileşenlerini çocukları organize etmek üzere kullanmalısınız. Düzen konteynerlerini kullanırken, çocukların okunabilir, erişilebilir ve dağınık olmamasına dikkat edin. Yaygın bir düzen bileşeni UIListLayoutdır; bu, kardeş GuiObjects'u sıralara veya sütunlara yerleştirir ve kardeş bir nesne eklediğinizde veya kaldırdığınızda buna göre ayarlanır.
Ayrıca, en iyi kullanıcı deneyimi için düzen konteynerleri içindeki öğelerin dağılımını ve ilişkiselliğini dikkate almalısınız. Bir liste düzenine flex entegre etmek, öğeleri hat boyunca eşit olarak doldurmak/dağıtmak veya hizalamak/germe için güçlü bir yoldur veya öğeleri bireysel olarak esnetmek için de kullanılabilir.
Erişilebilirlik
Tüm metinlerin tüm ekranlarda okunabilir olduğundan emin olun. Ayrıca tüm UI'nin yeterli kontrast sağladığından ve hiçbir şeyin renk yalnızca üzerinde ayrım yapmadığından emin olun.
Tüm cihaz ekran boyutları boyunca doğru boyutlandırılmış UI bileşenleri ile birlikte, genel oyunun erişilebilirlik standartları için görme veya renk körlüğü sorunu yaşayan oyuncular ile uyumlu olması gerekir. Metin boyutu, metin tabanlı UI'nin okunabilirliği açısından önemli bir faktördür, bu nedenle metnin okunamaz (çok küçük) hale gelmemesi veya büyük ekranlarda (4K TV'ler gibi) görsel olarak çok büyük olmaması için bir metin boyutu kısıtlaması eklemelisiniz.
Erişilebilirlik hakkında daha fazla ipucu için, buradan bakın.
Son ipuçları ve hileler
Tam bir çoklu platform oyunu oluştururken, aşağıdaki ipuçlarını ve hileleri göz önünde bulundurun:
- Cihaz emülasyonu, Roblox'ta optimal bir oyun tasarlamak için esastır. Çeşitli cihazları ve oyun kumandalarını doğrudan Stüdyo'da emüle etmek için yerleşik Cihaz Emülatörünü ve Kontrolcü Emülatörünü kullanın.
- Roblox'un UI stil iş akışı, CSS'ye benzer şekilde, UI örneği özelliklerine küresel olarak uygulama değişiklikleri yapmanızı sağlar. Entegre Stil Editörü ile birlikte, tamamen değiştirilebilir bir kullanıcı arayüzü oluşturabilirsiniz.
- Oyununuz etkili bir şekilde çoklu platforma geçtikten sonra, mobil ve oyun kumandaları üzerinde dokunsal geri bildirim, TouchSwipe ve TouchPinch gibi dokunma hareketleri ya da AccelerometerEnabled ve GyroscopeEnabled cihazlarda ivmeölçer ve jiroskop işlevselliği gibi yerel özellikleri keşfedin.