Düzenlerinizi Taslaklayın

Düzenlerinizi taslaklamak, UI aracılığıyla iletmek istediğiniz bilgilerin yapısını ve akışını tasarlama sürecidir. Bu kritik adım, UI öğelerinizin düzenini gözden geçirmenizi, sorun noktalarını keşfetmenizi ve oyuncunun deneyimini geliştirmenizi sağlar; böylece oyununuz için işe yaramayan sorunlu bir tasarıma zaman ve kaynak harcamadan önce.

örnek lazer tag oyunu .rbxl dosyasını referans alarak, bu kullanıcı arayüzü müfredatının bu bölümü, ekranınızdaki UI öğelerinizi nasıl yapılandıracağınızı gösterir; buna aşağıdakiler hakkında rehberlik dahildir:

• Oyuncuları oyunda başarılı olmaları için ihtiyaç duydukları özelliklere ve bilgilere yönlendiren görsel bir hiyerarşi planlamak.
• UI öğelerini temel şekillerle bloklamak, böylece UI öğelerinizin Roblox'un temel UI'sı ve dokunmatik kontrolleri ile birlikte kompozisyonunu gözden geçirebilirsiniz.
• Oyuncuların hedeflerine ulaşmak için alması gereken gerekli eylemleri dikkate alarak kullanıcı akışları geliştirmek.

Bu bölümü tamamladıktan sonra, sanat stilinize ve taslaklarınıza saygı gösteren UI'nizi Studio'da nasıl inşa edip yapılandıracağınızı öğreneceksiniz.

Görsel Hiyerarşi Planlayın

Görsel hiyerarşi, UI öğelerini önem sırasına göre vurgulayan bir organizasyon yapısıdır. Oyununuzdaki farklı iş akışları için görsel bir hiyerarşi planlamak önemlidir çünkü bu, oyuncuların hedeflerine ulaşmalarında başarılı olmalarını sağlar; bu, hedeflerin anlık olarak değiştiği birinci şahıs nişancı oyunlarının hızlı oyun yapısı için özellikle gereklidir.

Etkili görsel hiyerarşiler, oyuncuları iş akışlarını tamamlamak için ekranın neresine doğal olarak baktıklarına göre oyun gereksinimlerinizi karşılamak için ihtiyaç duydukları özellikler ve bilgilerle yönlendirir. Örneğin, örnek lazer tag oyununun görsel hiyerarşisi, oyuncuların haritada gezinirken ve düşman takımındaki oyuncuları etiketlerken aşağıdaki UI öğeleri kategorileri arasında yönlendirilmelidir:

1. Oyunun amacı hakkında bilgi.
2. Blaster hakkında bilgi.
3. Oyuncunun durumu hakkında bilgi.

Bu kategorilerin her birinin ekran üzerindeki konumu, önem sıralarını vurgular:

• İlk kategori üstte yer alır çünkü oyunu kazanmak için en önemli UI öğelerini içerir.
• İkinci kategori, ekranın orta kısmında çoğunluğu kaplar çünkü bu, oyuncuların 3D alandaki eyleme dikkatini çekmek için odak noktası işlevi görür ve oyunu oynarken en fazla öneme sahiptir.
• Üçüncü kategori kenarlarda yer alır çünkü oyuncular bu çevresel bilgileri, oyun akışından dikkatlerini dağıtmadan okuyabilirler.

Bazı oyun türlerinde, bir seferde yalnızca bir bilgi kategorisini göstermeniz yeterlidir çünkü bu, o iş akışı sırasında oyuncu için önemli olan tek bilgi türüdür. Ancak, birinci şahıs nişancı oyunları için, oyuncuların aynı anda birden fazla kategoriye ait UI öğelerini görmeleri gerekir çünkü bunlar, oyuncunun başarılı olması için ihtiyaç duyduğu bilgileri sağlar; örneğin, takımın skoru, blaster için bekleme süresi ve eğer bir turdan etiketlenmişlerse.

Kendi oyununuzdaki iş akışları için görsel bir hiyerarşi planlarken, aşağıdakileri göz önünde bulundurun:

• Ekranda farklı kategorilerden UI öğelerini bir araya getirirseniz, oyuncular neye bakacaklarını bilemezler. Oyuncuların oyununuzda gezinmelerine yardımcı olmak için, aynı kategoriye ait UI öğelerini bir arada gruplandırın.
• Ekranda aynı anda çok fazla kategori varsa, oyuncular hangi bilgilere dikkat etmeleri gerektiğini bilemeyebilirler. Oyuncuları karmaşadan bunaltmamak için, farklı iş akışları için UI öğelerini bağlamsal olarak gösterin.
• Benzer şekilde, her kategori için çok fazla UI öğesi varsa, bu, oyuncuların bir eylemi veya süreci nasıl tamamlayacaklarını anlamalarını zorlaştırabilir. Bu nedenle, ideal etkileşim sıralarınız için görsel vurgular sağlamak üzere sanat stilinizi kullanın.

Örnek lazer tag oyununun görsel hiyerarşisini tam olarak gözden geçirmek için aşağıdaki tabloya bakın:

UI Öğelerini Bloklayın

Artık aklınızda bir görsel hiyerarşi olduğuna göre, temel şekiller kullanarak bireysel UI öğelerini bloklayabilir ve özel UI düzeninizin kompozisyonunu Roblox'un temel UI'sı ile birlikte gözden geçirebilirsiniz. Bu süreç, tasarımınızı oyuncuların oyununuzu erişmek için kullanabileceği tüm ekran boyutlarında etkili olacak şekilde değiştirmek için nereleri modifiye etmeniz gerektiğini görmenizi sağlar; örneğin, mobil, tablet, dizüstü bilgisayar ve TV ekranlarında.

Başlamadan önce, Roblox'un temel UI'sını hesaba katarak özel UI öğeleriniz için ne kadar ekran alanı mevcut olduğunu belirlemeniz gerekir. Örneğin, varsayılan olarak, Roblox her oyunda aşağıdaki UI öğelerini gösterir:

• Oyundaki oyuncuların listesi.
• Karakterin sağlık çubuğu.
• Karakterin sırt çantası.
• Bir sohbet penceresi.
• Bir yakalama butonu.
• Karakter emojileri için bir açılır menü.

Bu öğelerden herhangi birini devre dışı bırakabilirsiniz eğer bunlar kendi oyununuzun oyun gereksinimlerini karşılamıyorsa, böylece özel UI'niz için ekran alanı tasarrufu sağlarsınız. Örneğin, örnek lazer tag oyunu bir sırt çantasına ihtiyaç duymaz çünkü oyuncular yalnızca tek bir blaster seçme yeteneğine sahiptir. Ancak, oyuncular birden fazla blaster'ı aynı anda seçebiliyorsa, oyun bu temel UI'yi devre dışı bırakabilir, böylece oyuncular yeniden doğduklarında blaster seçici için her zaman yer olduğundan emin olabilir ve ardından envanterinizden seçmek için başka bir yer sağlayabilir.

Roblox'un temel UI'sının yanı sıra, Roblox'un varsayılan dokunmatik kontrolleri için gerekli ekran alanını da göz önünde bulundurmalısınız. Örneğin, oyuncular oyununuzu bir mobil cihaz kullanarak eriştiğinde, ekranın sol alt köşesinde sanal bir parmak stick'i ve sağ alt köşede bir zıplama butonu görüntülenir. Bu, oyuncuların klavye veya kontrol cihazına erişimleri olmasa bile oyununuzda her zaman gezinmelerini sağlar.

Roblox'un oyununuza gerekli olan temel UI öğelerini ve dokunmatik kontrollerin olasılığını dikkate alarak, özel UI öğelerinizi cihazlar arasında uyumlu olan tek bir tasarımda bloklayabilirsiniz. Bu önemlidir çünkü bu, oyununuzu güncellerken UI'nizin ayrı sürümlerini sürdürmeniz gerekmediği anlamına gelir.

Bu yöntemi göstermek için, örnek lazer tag oyununun hem mobil hem de PC cihazları için özel UI öğelerini nasıl blokladığını gösteren aşağıdaki iki görüntüyü inceleyin. Her iki görüntü de şunları içerir:

• Özel UI'yi temsil etmek için temel şekiller, çünkü bu tasarımın nihai tasarıma ulaşmadan önce birkaç yinelemeden geçmesini kolaylaştırır.
• Bilgilerin gözün dikkatini dağıtan renkli bir arka plan ortamı olmadan takip edilmesini sağlayan gri tonlamalı renkler.
• Sohbet penceresinin açık durumu ve aktif oyuncuların listesi ile sohbet penceresinin ekran üzerinde ne kadar yer kapladığını görmek için.
• Mobil kontroller için alan, PC cihazları için gerekli olmasa bile.

Düzenlerinizi bu şekilde tasarlarken, aynı anda ekranda kaç tane UI öğesinin bulunabileceğini düşünerek, oyuncuların cihazları ve iş akışları doğrultusunda tüm potansiyel düzenler için geleceğe yönelik bir tasarım yapıyorsunuz.

Düzenleriniz için UI öğelerini bloklarken, aşağıdakileri göz önünde bulundurun:

• UI'nizi blokladığınız yer ve şekil, düzenlerinizin kompozisyonunu etkileyebilir. Özel UI öğelerinizin miktarı ve boyutu ile Roblox'un temel UI'sı arasında denge ve simetri sağlamaya çalışın.
• Bazı mobil ve tablet cihazların alt köşelerinden uzakta bulunan UI ile etkileşimde bulunmak ya rahatsız edici ya da imkansızdır. Etkileşimli öğeleri başparmakların doğal dinlenme pozisyonuna yakın kolay erişim alanlarına yerleştirin.
• Oyuncular çevrelerinde gezinirken, 3D alan ekranınızdaki UI'dan dikkat dağıtıcı hale gelebilir. Düzenlerinizi çeşitli olası arka planlarla test edin böylece ekranınızdaki UI öğelerinizin net ve okunabilir kalmasını sağlarsınız.

Kullanıcı Akışlarını Geliştirin

Kullanıcı akışı, oyuncuların bir oyunda bir görevi tamamlamak için alabileceği yolların bir koleksiyonudur; örneğin, bir silah seçmek, bir öğe satın almak veya bir karakteri iyileştirmek gibi. Kullanıcı akışları genellikle oyuncuların göreve başlamasını beklediğiniz yerden başlar ve görevin sonunda ulaşacakları son eylem veya başarı ile biter. Ayrıca, etkili kullanıcı akışları, oyuncuların aynı hedefe ulaşmak için kendi başlarına almak isteyebilecekleri alışılmadık yolları da dikkate alır.

Aşağıdaki akış diyagramı, bir oyuncunun örnek lazer tag oyununa girdiği ve oynadığı kullanıcı akışını gösterir. Bir oyuncu oyunu açtığında, bir lobide katılır. Eğer tur henüz başlamadıysa, tur döngüsünün başlamasını bekler; aksi takdirde, şu anda oyunu oynayan bir takıma katılır. Eğer bitiş koşulu karşılanmamışsa, örneğin bir zaman sınırına ulaşmak veya her takımda 10 oyuncuyu etiketlemek gibi, oyuncular blaster'larını seçer ve düşman takımı tarafından etiketlenme veya etiketleme, arenada yeni bir blaster ile donanma veya etiketlendikten sonra yeniden doğma gibi ana oyun deneyimini yaşarlar. Oyuncular bitiş koşulunu karşıladıklarında, turu tamamlar ve tekrar lobide katılırlar.

Oyuncuların oyununuzda yapabileceği her şey için kullanıcı akışları geliştirmek önemlidir çünkü bu, görevleri tamamlamaları için nerede ve nasıl yönlendirmek istediğinizi değerlendirmenizi sağlar ve kendi yollarını izleyenler için sorun noktalarını hafifletmek için nerelerde önlem alabileceğinizi tahmin etmenizi sağlar. Örneğin, örnek lazer tag oyunu için ek kullanıcı akışları geliştirirseniz, oyuncuların ne olacağını düşünün:

• Bitiş koşulu karşılanmadan önce bir turdan çıkarlarsa?
• Bir takıma katılırken oyunu terk ederlerse?
• Bir tur ortasında telefon görüşmesi alırlarsa?
• Bir turdan 15 saniyeden daha kısa bir süre için bağlantılarını kaybederlerse?

Oyuncuların görevleri tamamlarken alabileceği tüm potansiyel eylemleri veya başlarına gelebilecek senaryoları görselleştirerek, UI öğelerinizin düzeninin deneyimlerini olumsuz etkileyip etkilemediğini daha iyi belirleyebilir ve tasarımlarınızı Studio'da uygulamadan önce ayarlamalar yapabilirsiniz. Görevler sezgisel, rahatsız edici olmayan ve kullanışlı hissediliyorsa, oyuncular oyununuzda daha fazla zaman geçirme ve daha sonra geri dönme olasılıkları daha yüksektir.

Kendi oyununuz için kullanıcı akışları geliştirirken, aşağıdakileri göz önünde bulundurun:

• Oyuncuların oyununuzda ne yapmasını istediğiniz ile ne yapmak istediklerinin tamamen farklı olabileceği. Düzenlerinizi farklı türde oyuncularla test etmek, onların hedeflerine ulaşmak için almak istedikleri yolları anlamak için en iyisidir.
• Akış diyagramları, birden fazla senaryoyu aynı anda yakalamaya çalıştıklarında okunması zor ve etkisiz hale gelebilir. Her bir göreve odaklanmak için, akış diyagramlarını her seferinde bir ana görevle sınırlayın.
• Etkileşim desenleri, oyuncuların oyununuzla etkileşimde bulunmak için dokunmatik kontroller, oyun kumandaları veya bilgisayar fareleri kullanıp kullanmadıklarına bağlı olarak değişir. Birden fazla cihaz için tasarım yapıyorsanız, her cihaz için benzersiz kullanıcı akışları geliştirin böylece sorun noktalarını belirleyebilir ve iş akışlarını basitleştirebilirsiniz.

Tasarımınızı nihai hale getirdikten sonra, Studio'ya geçme ve UI'nizi hayata geçirme zamanı.