Bu öğretici, erkekler, menüler, arayüz eylemleri ve daha fazlası için ekranda düğmelere nasıl oluşturulacağını gösterir.
Buton Türleri
Kullanabileceğiniz UI tasarımlarında kullanabileceğiniz iki tür buton objesi var:
MetniButonu | GörüntüButonu |
---|---|
Bir TextButton bir TextLabel ile benzerdir, ancak oyuncular bir tık / dokunma ile etkinleştirebilir. Ayrıca birçok aynı görsel özelliği paylaşır - font, arka plan rengi, çizgi rengi vb. | Bir ImageButton bir Class.ImageLabel nesnelerinin etkileşimli versiyonudur. Ayrıca, düğme olmayan karşılığındaki çoğu aynı özellikleri paylaşır. |
Bir Düğme Oluşturulması
Aşağıdaki adımlar, ekrana bir ImageButton eklemek ve oyuncunun etkileşimine bağlı olarak üç görünüm arasında ekranını çevirmek için nasıl gösterilir.
Explorer penceresinde, StarterGui nesnesine fareyi taşıyıcı olarak getirin, + düğmesine tıklayın ve bir Ekran Güvenliği ekle.
Yeni Ekran Gui nesnesini seçin ve aynı şekilde bir Görüntü Butonu ekleyin.
Bu, oyun görüntüsünün köşesine boş bir görüntü düğmesi ekleyecektir.
En iyi uygulama olarak, yeni düğmeyi amaçına göre yeniden adlandırın, örneğin HaritaButonu .
Boyut
Butonların farklı cihazlarda ve ekranlarda dinamik olarak yeniden boyutlandırılması için, Ölçek özelliklerini kullanmak en iyidir.
Özellikler Penceresinde , Boyut özelliğini bulun ve okuktan ağacını genişletmek için okla tıklayın.
Aşağıdaki boyut özelliklerini ayarla:
Bir düğmeyi Yüz veya Yüz olarak ayarlayarak bir kare sınır kutusuna sınırlı bir şekilde bağlayın.
Büyütme
Mevcut boyut, bir telefonda iyi çalışır, ancak X/Y ölçeğinin 0.15 (15%) kadar büyük görüntülenmesi mümkündür. Bunu düzeltmek için bir UISizeConstraint ekleyebilirsiniz.
HaritaButonu'na Mouse etkinliği oluştur ve bir UISizeConstraint kaydı ekleyin.
Yeni boyut sınırı nesnesini seçin ve MaxSize özelliğini 90, 90 olarak ayarlayın.
Pozisyon
Butonlar genellikle bir oyuncunun başparmaklarının ulaşabileceği bir oyun cihazındaki bir oyuncu başparmakları arasında hareket edilmelidir, örneğin ekranın alt kısmındaki sağ alan.
Butonun AnchorPoint özelliğini 0.5, 1 olarak değiştirirseniz, pozisyonun alt merkez noktasına dayanacak şekilde yerleştirilmesi sağlanır.
Düğmenin Position ağacını genişletin ve aşağıdaki özellik değerlerini ayarlayın. Bu, düğmeyi telefon/tabletlerde görünen varsayılan zıplama düğmesinin yakınında hareket ettirecektir.
Görüntüler
Bu düğme üç özel görüntüye ihtiyaç duyar - ekranda normal görünümü, hover-over görünümü ve oyuncu tarafından basıldığında son bir görüntü.
Normal
Geçişlemeyi Etkinleştirmeyi Zorlaştırırız!
BASILDI
Bu görünümleri ayarlamak Görüntüyü , HoverImage ve PressedImage özellikleri aracılığıyla yapılabilir.
Butonun Görüntüsü özelliğini bul ve rbxassetid://6025368017 veya kendi varlığını kullan .
For the HoverImage property, paste in rbxassetid://6025452347 .
For the PressedImage property, paste in rbxassetid://6025454897 .
Görünüm
Düğmenin ekranda görünümünü finalize etmek için şu ayarlamaları yapın:
Set ArkaPlanTransparency to a value of 1 to make the background transparent.
Döndürmeyi Rotasyon değerini -5 olarak ayarlayarak hafif döndürün.
Buton Fonksiyonlari
Son görev, temel düğüm işlevlerini bağlantı kurmaktır.
Explorer penceresinde, HaritaButonu nesneye sağ tıklayın ve bir YerelScript girin.
Bu yeni satırlarda kopyalayıp yapıştırın:
local button = script.Parentlocal function onButtonActivated()print("Button activated!")-- Burada beklenen buton aksiyon(lerini) gerçekleştirinendbutton.Activated:Connect(onButtonActivated)
Bu basit buton kullanımı şu şekilde çalışır:
- İlk satır, ImageButton adlı çalıştırma aracının bağlandığı özellikli nesneyi belirtir. Bu durumda, Class.ImageButton , scriptin ebeveyni olarak bağlanır.
- The onButtonActivated function handle the button's activation. Inside it, you should perform the intended action like opening the oyun's main menu.
- Son satır butonu oyun içindeki onButtonActivated işlevine bağlar. Bu, işlevin her oyun içindeki oyuncu tarafından etkinleştirildiğinde her seferde işlevin çalışmasına neden olur.
Problem Çözme
Buton beklediğiniz gibi çalışmazsa, takip edilenkontrol edin: