Bir skor çubuğu is a UI element that displays player information that is important for your experience's oynanış, such as their leveling up istatistikler, currency count, or power-up items in their envanter. By displaying score bars directly on the oyuncu's screen, you can keep their attention on what they need in order to accomplish various goals within your experience.
Bu nedenle, bu öğretici, Altın Rush.rbxl dosyasını bir referans olarak kullanarak, nasıl bir puan çubuğu oluşturacağınızı gösterir, hướnglendirme dahil:
- Ekranın üst kısmındaki bir kare oluşturulur.
- Puan çubuğunun ne olduğunu gösteren bir taç simgesi eklemek.
- Oyuncunun topladığı altın miktarını kaydeden skor metni girilir.
- Dizaynınızı farklı ekranlarda ve yön oranlarında görünümünüzü gözden geçirmek için birden fazla emüle edilmiş cihazda test edin.
Tüm 2D yaratımolduğu gibi, herhangi bir hedefe ulaşmak için birçok yol var. Kendi 2D varlıklarınızı üçüncü parti UI araçlarında oluşturabilir ve kendi tasarımınızla birlikte takip edebilirsiniz.
Çerçeveyi Oluştur
Her oyuncunun ekranında UI elemanları göstermek için, ScreenGui hizmetinde bir StarterGui nesnesi oluşturabilirsiniz. ScreenGui nesneleri deneyim için ekranındaki ana kay
Bir ScreenGui nesneyi oluşturduktan sonra, onun çocuğunu GuiObjects olarak her bir konteynerin amaçlarına göre oluşturup özelleştirebilirsiniz. Bu konsepti göstermek için, bu bölüm size her bir konteyner
Ayrıca çerçevenin özelliklerini özelleştirmekle kalmaz, bu bölüm ayrıca çocuk UISizeConstraint ve UIListLayout nesneleri çerçevaya eklemek
Örnek Altın Rüzgarı içindeki kare kutusunu yeniden oluşturmak için dosyayı yerleştirin:
Ekran üzeri UI'nizi içeren bir ScreenGui nesneyi oluşturun.
- Arayüzde Explorer penceresinde, Başlangıç Gui'si üzerine fareyi taşıyın ve ⊕ simgesine tıklayın. Bir konteyner menüsü görüntülenir.
- Bir Ekran Güvenliği ekranı girin.
Tüm puan barı UI komünitesi için bir küme oluşturun.
Bir Frame kaynağını ScreenGui nesneyine girin.
Yeni Frame 'ı seçin, sonra Özellikler pencereden
- Set AnchorPoint to 0.5, 0 to set the frame's origin point in the top-mid of itself (50% from the left to the right of the frame, and 0% from the top to the bottom of the frame).
- Çerçevenin arka planını siyah hale getirmek için Yükseklik 0.6Yüksekliğ 2>Yüksekliğ2> 5>Yüksekliğ5> 8>Yüksekliğ8> 1>Yüksekliğ1> 4>Yüksekliğ4> 7>Yüksekliğ7> 9>Yüksekliğ 9> 2>Yüksekliğ2> 5>Yüksekliğ5> 8>Yüksekliğ
- Set ArkaPlanTransparency to 0.6 to make the frame's background semi-transparent.
- Ekranın üst ortasına yakın bir çerçevesi ayarlamak için Position bir {0.5, 0},{0.01, 0} ile ayarlanır Ekranın üst ortasına yakın bir çerçevesi ayarlamak için2>Ekranın üst ortasına yakın bir çerçevesi ayarlamak için2> 5>Ekranın ü
- Set Boyutu {0.25, 0},{0.08, 0} paraşürmek için oyuncuortasını alanının büyük bir kısmını kaplayacak şekilde ayarla (25% yatay olarak ve 8% yukarıda).
- İsim bir PuanTablosu için
Küçük ekran boyutları için içeriği her zaman görüntülenebilmesi için bir kısıtlayıcı eklemeniz gerekir.
- Bir UISizeConstraint nesneyi ScoreBarFrame içine girin.
- Yeni kısıtlayıcıyı seçin, sonra Özellikler penceresinde MinSize 'i 0, 40'e ayarlayın, çerçevenin yatay olarak 0>'den daha az küçük olmasını sağlayın.
İçeriğini soldan sağa ve çerçevenin merkezinde doğru sıralayabilmek için bir sayfa öğesi ekleyin.
- Bir UIListLayout nesneyi ScoreBarFrame içine yerleştir.
- Yeni yerleştirme nesnesini seçin, sonra Özellikler penceredinde,
- Set FillDirection to Yatay .
- Set Sıralama to Ortası .
Bir Simge Ekle
Bir simge, deneyimdeki bir aksiyon, nesne veya kavramı temsil eden bir semboldür. Basit ve mantıksal olmayan simgeler kullanmak, oyuncuların tekst kullanmadan UI ile iletişim kurduğunuzu kolayca fark etmesine izin verir, cezahını çekip önemli içeriği çekmeyi çekmeyi çekmeyi çekmeyi çekmeyi çekmeyi çekmeyi çekmeyi çekmeyi ç
Örneğin, örnek, bir oyuncunun topladığı altın miktarını göstermek için basit bir altın tacı kullanır. Bu ikon deneyim içindeki en önemli hedef olarak kolayca fark edilebilir ve açık açıkta kalabilmesi için minimum ayrıntıları içerir.
Örnek Altın Rush içindeki altın tacı ikonunu yeniden oluşturmak için dosya yerleştirmeyi:
Bir Görüntü Etiketiyle Etiketlemeyi İçe aktar .
In the Explorer window, hover over ScoreBarFrame and click the ⊕ simge. A contextual menu displays.
Bir Görüntü Etiketi ekleyin.
Yeni etiketi seçin, sonra Özellikler penceresinde,
Simge yapmak için Resim bir rbxassetid://5673786644 ile ayarlanır.
Etiketin arka planını 1 olarak ayarla, etiketin arka planının tamamen şeffaf olmasını sağla.
Set LayoutOrder to 1 . Bu, ikonun önbelleğinin sağdan sola yazıldığında çerçevedeki ilk GuiObject olmasını sağlar.
Etiket alanını genişletmek için Boyutu {1.25,0},{1,0} olarak ayarlayın.
Ebat kısıtlayıcıyı RelativeYY olarak ayarlayarak etiketin yüksekliğiyle birlikte simgegenişleterek ikonun yüzdesini korur.
Puan Tablosunu Gir
Oyun içinde oyuncunun puanını tutar, bir eşleşmekaç puan kazandığı gibi. Arayüzün tüm metni açık ve okunabilir olmalıdır, böylece oyuncular başarılı olmak için ihtiyaç duyduğunuz bilgileri hızlıca anlayabilirler.
Örneğin, örnek, bir kontrast renk üzerinde büyük metni kullanır, böylece arka planın gürültüsüyle karışmaz. Bu özellikle aksesibilite için önemlidir, çünkü metni oyuncu 3D alanında hareket ederken okunabilir olarak kalır, bu da metni aynı renk olarak hareket ettirebilir.
Puan metnisini Altın Rüzgarı yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştirme yerleştir
Bir MetinEtiketi nesneyi SCOREBARFRAME içine yazın.
In the Explorer window, hover over ScoreBarFrame and click the ⊕ simge. A contextual menu displays.
Bir TextLabel girin.
Yeni etiketi seçin, sonra Özellikler penceresinde,
Etiketin arka planını 1 olarak ayarla, etiketin arka planının tamamen şeffaf olmasını sağla.
Ebatı genişletmek için {1,0},{1,0} ile Etiket genişletilmiştir ın etiketini genişletin. Etiket, simgeçerçevenin 100%'i kadar genişletilmiştir. Etiket, ebeveyn çerçevenin 100%'i kadar genişletilmiştir.
Etiketin boyutunu Yüzdesi belirlemek için Ebeveyn Kutusu ile bir Yüzde arasında ayarlayın ve 2>Etkisi2> etiketin boyutunu ayarlayın. Bu adım ayrıca etiketi bir kare yapar ve ebeveyn kutunun sınırları içinde tutar.
Set Font Font'ınızı GothamSSm ile eşleştirmek için estetikleri eşleştirmek için.
Sıfırdan başlamak için Score'ı yazıya ayarla 0
Metni renklemek için TextColor3’i 255, 200, 100’e ayarla.
Ekranda daha büyük yazı yapmak için YazıBoyutu değerini 30 ile ayarla.
oyuncupuanı 0, 1,000 veya 1,000,000 olmasına bağlı olarak puanın sol tarafta корона simgesinin yakınında sol tarafta kalmasını sağlayan TextXAlignment yı ayarla Sol tarafta kalmasını sağlayın.
Tasarımı Test Et
Studio'nun Oyuncu Emuyatörü oyuncuların zamanlayıcıyla etkileşim kurduğunuzda oyununuzun görünümünü test etmenizi sağlar. Bu araç, UI tasarımının Studio'nun görünümüyle ilgili kısmının görünümüne ilişkin bir kısmını temsil eder ve Studio'nun görünümü herhangi bir cihaz
Örneğin, bir dizi ekran boyutu arasında UI'nizi test etmezseniz, büyük ekranlı oyuncular metni okuyamayabilir ve küçük ekranlı oyuncular 3D alanı göremeyebilir, çünkü UI öğeleriniz ekranda çok fazla yer kaplıyor.
Çeşitli ekran boyutlarındaki UI'nizi taklit etmek için:
Menü çubuğunda, Test sekmesini seçin.
In the Emulation section, click Cihaz . The viewport changes to reflect the aspect ratio of an average laptop.
Çözünürlük menüsünde, Gerçek Çözünürlük seçin. Bu, emulate olduğunuz cihazda UI öğelerinizin gerçek çözünürlüğünü görmenizi sağlar.
Cihaz menüsünde, Telefon , Tablet , Masaüstü ve 1>Konsol1> bölümleri arasından en az bir cihaz seçin.
