Etkileşimli Butonlar

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

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.

  1. Explorer penceresinde, StarterGui nesnesine fareyi taşıyıcı olarak getirin, + düğmesine tıklayın ve bir Ekran Güvenliği ekle.

  2. 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.

  3. 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.

  1. Özellikler Penceresinde , Boyut özelliğini bulun ve okuktan ağacını genişletmek için okla tıklayın.

  2. Aşağıdaki boyut özelliklerini ayarla:

  3. 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.

  1. HaritaButonu'na Mouse etkinliği oluştur ve bir UISizeConstraint kaydı ekleyin.

  2. 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.

  1. Butonun AnchorPoint özelliğini 0.5, 1 olarak değiştirirseniz, pozisyonun alt merkez noktasına dayanacak şekilde yerleştirilmesi sağlanır.

  2. 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.

  1. Butonun Görüntüsü özelliğini bul ve rbxassetid://6025368017 veya kendi varlığını kullan .

  2. For the HoverImage property, paste in rbxassetid://6025452347 .

  3. 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:

  1. Set ArkaPlanTransparency to a value of 1 to make the background transparent.

  2. 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.

  1. Explorer penceresinde, HaritaButonu nesneye sağ tıklayın ve bir YerelScript girin.

  2. Bu yeni satırlarda kopyalayıp yapıştırın:


    local button = script.Parent
    local function onButtonActivated()
    print("Button activated!")
    -- Burada beklenen buton aksiyon(lerini) gerçekleştirin
    end
    button.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:

  • Aşağıdaki kodu kullandığınızdan emin olun: Class.LocalScript , Script değil.
  • Düğme nesnesinin bir doğrudan çocuğu olduğundan emin olun (ScreenGui kabının bir çocuğu değil).
  • Butonunuzun Görüntüsü , HoverImage ve PressedImage özelliklerinin uygun görüntü varlıklarına ayarlandığından emin olun.