Bir skor çubuğu, deneyiminizin oyun dinamikleri açısından önemli olan oyuncu bilgilerini, örneğin seviye atlama istatistiklerini, para sayısını veya envanterlerindeki güçlendirici öğeleri görüntüleyen bir UI öğesidir. Skor çubuklarını doğrudan oyuncunun ekranında görüntüleyerek, deneyim içinde çeşitli hedeflere ulaşmak için ihtiyaç duydukları şeylere odaklanmalarını sağlayabilirsiniz.
Gold Rush .rbxl dosyasını referans olarak kullanarak, bu eğitim bir oyuncunun topladığı altın miktarını takip eden bir skor çubuğu oluşturmayı gösterir ve şunlar hakkında bilgiler sunar:
- Ekranın üst ortasında bir çerçeve oluşturma.
- Skor çubuğunun izlediği şeyi metin olmadan ileten bir taç simgesi ekleme.
- Oyuncunun topladığı altın miktarını kaydeden skor metni ekleme.
- UI tasarımınızı birden fazla emüle edilmiş cihazda test etme, böylece farklı ekranlar ve en-boy oranlarında görünümünü gözden geçirme.
Tüm 2D yaratımda olduğu gibi, belirli bir hedefe ulaşmanın birçok yolu vardır. Üçüncü taraf UI araçlarında kendi 2D varlıklarınızı oluşturabilir ve kendi tasarımınızla ilerleyebilirsiniz.
Çerçeveyi oluştur
UI öğelerini her oyuncunun ekranında görüntülemek için ScreenGui nesnesi oluşturabilirsiniz. ScreenGui nesneleri, ekran üzerindeki UI için ana konteynerlerdir ve StarterGui hizmeti içeriklerini her oyuncu deneyime girdiğinde PlayerGui konteynerine kopyalar.
Bir ScreenGui nesnesi oluşturduktan sonra, her konteynerin amacına göre çocuk GuiObjects'ı oluşturabilir ve özelleştirebilirsiniz. Bu kavramı göstermek için, bu bölüm bir ikon ve scored metnini içerecek bir Frame nesnesi ile ScreenGui nesnesi nasıl oluşturulacağını öğretir.
Çerçevenin özelliklerini özelleştirmenin yanı sıra, bu bölüm aynı zamanda çerçeveye bir çocuk UISizeConstraint ve UIListLayout nesnesi ekleme talimatları da sağlar. Bu teknik, GuiObjects'ın çerçevenin içine eklendiğinde otomatik olarak yan yana dizilmesini ve daha küçük ekran boyutlarında her zaman okunabilir olmasını sağlar. Bu talimatları takip etmezseniz, eklediğiniz her GuiObject çerçevenin perimetrinin dışına dizilecektir.
Örnek Gold Rush oyun alanı dosyasında çerçeve konteynerini yeniden oluşturmak için:
Ekranda UI'nızı içerecek bir ScreenGui nesnesi oluşturun.
- Explorer penceresinde StarterGui üzerine gelin ve ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
- Bir ScreenGui ekleyin.
Tüm skor çubuğu UI bileşeni için bir konteyner oluşturun.
ScreenGui nesnesine bir Frame ekleyin.
Yeni Frame'i seçin, ardından Properties penceresinde,
- AnchorPoint'u 0.5, 0 olarak ayarlayın, bu çerçevenin köşe noktası kendisinin üst ortasında olacak şekilde ayarlanır (çerçevenin solundan sağına %50, üstünden altına %0).
- BackgroundColor'u 0.6 olarak ayarlayın, bu çerçevenin arka planını siyah hale getirir.
- BackgroundTransparency'yi 0.6 olarak ayarlayın, böylece çerçeve arka planı yarı şeffaf olur.
- Position'u {0.5, 0},{0.01, 0} olarak ayarlayın, böylece çerçeve ekranın üst orta kısımda konumlanır (%50 soldan sağa ve %1 üstten alta).
- Size'ı {0.25, 0},{0.08, 0} olarak ayarlayın, böylece çerçeve ekranın ortasında büyük bir alan kaplar (yatayda %25 ve dikeyde %8).
- Name'i ScoreBarFrame olarak ayarlayın.
Çerçeveye bir kısıtlama ekleyin, böylece içeriği her zaman küçük ekran boyutlarında okunabilir olsun.
- ScoreBarFrame'e bir UISizeConstraint nesnesi ekleyin.
- Yeni kısıtlamayı seçin, ardından Properties penceresinde MinSize'ı 0, 40 olarak ayarlayın, böylece çerçeve asla dikeyde 40 pikseldan daha küçük olmaz.
Çerçeveye bir düzen nesnesi ekleyin, böylece içeriği soldan sağa dizilir ve çerçevenin perimetrinin içinde dikey olarak ortalanır.
- ScoreBarFrame'e bir UIListLayout nesnesi ekleyin.
- Yeni düzen nesnesini seçin, ardından Properties penceresinde,
- FillDirection'ı Horizontal olarak ayarlayın.
- VerticalAlignment'ı Center olarak ayarlayın.
Bir simge ekle
Bir simge, bir eylemi, nesneyi veya deneyimdeki bir kavramı temsil eden bir semboldür. Basit ve sezgisel simgeler kullanmak, oyuncuların UI'nızla neyi ilettiğinizi metin kullanmadan kolayca anlamalarını sağlar; çünkü metin ekranı karıştırabilir ve önemli içerikten dikkatlerini çekebilir.
Örneğin, örnek bir basit altın taç simgesi kullanarak bir oyuncunun topladığı altın miktarını belirtir. Bu simge, deneyimin en önemli amacını temsil ettiği için kolayca tanınabilir ve mobil cihaz ekranlarında okunabilir kalmasını sağlamak için az detay içerir.
Örnek Gold Rush oyun alanı dosyasında altın taç simgesini yeniden oluşturmak için:
ScoreBarFrame'e bir ImageLabel nesnesi ekleyin.
Explorer penceresinde ScoreBarFrame üzerine gelin ve ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
Bir ImageLabel ekleyin.
Yeni etiketi seçin, ardından Properties penceresinde,
Image'i rbxassetid://5673786644 olarak ayarlayın, böylece simge bir taç olur.
BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf hale gelir.
LayoutOrder'u 1 olarak ayarlayın. Bu, metni eklediğinizde simgenin çerçevenin soldan sağa diziliminde ilk GuiObject olarak kalmasını sağlar.
Size'ı {1.25,0},{1,0} olarak ayarlayın, böylece etiket alanı çerçevenin tam genişliğini aşar.
SizeConstraint'ı RelativeYY olarak ayarlayın, böylece simgenin oranını korumak için etiketin boyutu ana çerçevenin yüksekliğiyle ölçeklenir.
Skor metnini ekle
Skor metni, bir deneyim içinde oyuncunun skorunu kaydeder; örneğin bir maçta kaç puan kazandıklarını. Tüm UI metinlerinin hem net hem de okunabilir olması önemlidir, böylece oyuncular deneyiminiz içinde başarılı olmak için ihtiyaç duydukları bilgiyi hızlıca anlayabilirler.
Örneğin, örnek büyük metin kullanarak arka planın gürültüsü ile bütünleşmeyecek şekilde zıt bir renkte. Bu, erişilebilirlik için özellikle önemlidir çünkü metin, oyuncunun 3D alanda hareket ederken okuyabilmesi için okunabilir kalmalıdır; bu alan, metinle aynı renkte nesneleri içerebilir.
Örnek Gold Rush oyun alanı dosyasında skor metnini yeniden oluşturmak için:
ScoreBarFrame'e bir TextLabel nesnesi ekleyin.
Explorer penceresinde ScoreBarFrame üzerine gelin ve ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
Bir TextLabel ekleyin.
Yeni etiketi seçin, ardından Properties penceresinde,
BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf hale gelir.
Size'ı {1,0},{1,0} olarak ayarlayın, etiketin tam çerçeveye genişlemesini sağlar (çerçevenin %100 yatay ve %100 dikey). Etiket, simge tarafından kaydırıldığı için çerçevenin sınırlarının ötesine uzundur.
SizeConstraint'ı RelativeYY olarak ayarlayın, böylece etiketin boyutu ana çerçevenin yüksekliğiyle ölçeklensin ve simgenin oranını korusun. Bu adım ayrıca etiketi kare yapar ve çerçevenin sınırları içinde tutar.
Font'u GothamSSm olarak ayarlayın, böylece çevrenin estetiğiyle uyum sağlar.
Text'i 0 olarak ayarlayın, böylece skora sıfırdan başlar.
TextColor3'ü 255, 200, 100 olarak ayarlayın, böylece metin altın rengi alır.
TextSize'ı 30 olarak ayarlayın, böylece metin ekranda daha büyük görünsün.
TextXAlignment'ı Left olarak ayarlayın, böylece skor metni, oyuncunun skoru 0, 1,000 veya 1,000,000 olsa bile taç simgesinin yanına soldan hizalanmış kalır.
Tasarımı test et
Studio'nun Cihaz Emülatörü, oyuncuların UI'nızla çeşitli cihazlarda nasıl göreceğini ve etkileşimde bulunacağını test etmenize olanak tanır. Bu araç, UI tasarımının önemli bir parçasıdır çünkü Studio'daki görüntüleme alanınızın en-boy oranı, oyuncuların deneyiminize erişmek için kullandığı ekranların en-boy oranını yansıtmayabilir ve UI'nızın her cihazda hem okunabilir hem de erişilebilir olması önemlidir.
Örneğin, UI'nızı farklı ekran boyutlarında test etmezseniz, büyük ekranlı oyuncular metninizi okumakta veya simgelerinizi çözmekte zorluk yaşayabilir ve küçük ekranlı oyuncular UI öğelerinizin ekran üzerinde çok fazla alan kaplaması nedeniyle 3D alanı göremeyebilir.
UI'nızı çeşitli ekran boyutlarında emüle etmek için:
Studio'nun Test menüsünden Device Emulator seçeneğini etkinleştirin.
Çözünürlük açılır menüsünde, Actual Resolution'ı seçin. Bu, emüle ettiğiniz cihazdaki UI öğelerinizin gerçek çözünürlüğünü görmenizi sağlar.
Cihaz açılır menüsünde, Telefon, Tablet, Masaüstü ve Konsol bölümlerinden en az bir cihaz seçin.
