Interaktive Schaltflächen

Dieses Tutorial zeigt dir, wie du auf dem Bildschirm Schaltflächen für Menüs, Interaktions-Aktionen und mehr erstellen kannst.

Button-Typen

Es gibt zwei Arten von Button-Objekten, die Sie in Ihrem UI-Design verwenden können:

Text-Schaltfläche	BildSchaltfläche
Ein TextButton ist ähnlich zu einem TextLabel, mit der Besucher es mit einem Klick/Tap aktivieren können. Es teilt auch viele der gleichen visuellen Eigenschaften — Schriftart, Hintergrundfarbe, Umrissfarbe usw.	Ein ImageButton ist wie eine interaktive Version des ImageLabel Objekts. Es teilt auch die meisten der gleichen Eigenschaften wie seine non-Button-Kontraparteil.

Einen Button erstellen

Die folgenden Schritte zeigen, wie man einen ImageButton auf den Bildschirm hinzufügt und ihn zwischen drei Ansichten umwandelt, abhängig von der Interaktion des Spieler:in.

1. In dem Explorer-Fenster bewegen Sie den Mauszeiger über das StarterGui-Objekt, klicken Sie auf die Schaltfläche + und fügen Sie ein ScreenGui ein.

   

2. Wählen Sie das neue ScreenGUI-Objekt und fügen Sie in ähnlicher Weise einen BildButton ein.

   

   Dies fügt eine leere Bildschaltfläche am Ecke der Ansichthinzu.

3. Als beste Praktikabilität, benennen Sie den neuen Button nach seinem Zweck um, z. B. Karten-Button .

   

Größe

Für die dynamische Größenanpassung auf verschiedenen Geräten und Anzeigen ist es am besten, Skala -Eigenschaften zu verwenden.

1. In dem Eigenschaften -Fenster suchen Sie die Größe -Eigenschaft und klicken Sie auf die Pfeile, um ihren Baum zu erweitern.

   

2. Setzen Sie die folgenden Größen属性:

   

3. Beschränken Sie die Schaltfläche auf ein quadratisches Schachtelgehäuse, indem Sie SizeConstraint auf RelativeYY einstellen.

   

Skalierung

Die aktuelle Größe sollte auf einem Telefon gut funktionieren, aber die X/Y-Skala von 0.15 (15%) kann auf einem Computer-Bildschirm zu groß erscheinen. Um dies zu korrigieren, kannst du einen UISizeConstraint hinzufügen.

1. Bewegen Sie den Mauszeiger über das MapButton -Objekt und fügen Sie einen UISizeConstraint ein.

   

2. Wählen Sie das neue Size Constraint-Objekt und setzen Sie seine MaxSize Eigenschaft auf 90, 90 .

   

Position

Knöpfe sollten in der Regel innerhalb des Daumenbereichs eines Spieler:inauf mobilen Geräten bewegt werden, z. B. der untere rechte Bereich des Bildschirms.

1. Ändern Sie die Eigenschaft AnkerPunkt der Schaltfläche auf 0,5, 1 , so dass das Platzieren basiert auf seinem unteren-Mittelpunkt.

   

2. Erweitern Sie den Position -Baum der Schaltfläche und setzen Sie die folgenden Eigenschaftswerte. Dies wird die Schaltfläche in der Nähe des Standard-Sprungknopfes, der auf Telefonen/Tablets erscheint, bewegen.

   

Bilder

Diese Schaltfläche benötigt drei benutzerdefinierte Bilder - ihr normales Aussehen auf dem Bildschirm, eine Hover-over-Ansicht und ein endgültiges Bild für wenn der Spieler sie drückt.

Normal

hovern

gedrückt

Diese Ansichten können über die Bild-, HoverImage- und gedruckte Bild- Eigenschaften konfiguriert werden.

1. Suchen Sie die Eigenschaft Bild des Buttons und fügen Sie sie in rbxassetid://6025368017 oder verwenden Sie Ihr eigenes Asset ein.

   

2. Für die HoverImage Eigenschaften, fügen Sie in rbxassetid://6025452347 ein.

   

3. Für die gedruckte Bild Eigenschaften, fügen Sie in rbxassetid://6025454897 ein.

   

Stil

Um die Schaltfläche auf dem Bildschirm anzuzeigen, stelle die folgenden Anpassungen vor:

1. Setze HintergrundTransparenz auf einen Wert von 1 , um den Hintergrund durchsichtig zu machen.

   

2. Drehen Sie die Schaltfläche leicht, indem Sie Rotation auf -5 einstellen.

   

Button-Funktionalität

Die letzte Aufgabe ist es, grundlegende Button-Funktionen zu verbinden.

1. In dem Explorer-Fenster bewegen Sie den Mauszeiger über das Kartentaste -Objekt und fügen Sie einen lokalen Skript ein.

   

2. In dem Skript, das. PL: die Skriptskopieren und fügen Sie diese neuen Zeilen ein:

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- Führen Sie hier die erwartete(n) Action(en) aus
   end
   
   button.Activated:Connect(onButtonActivated)

Dieses einfache Buttonskript funktioniert wie folgt:

• Die erste Zeile setzt einen Variablen-Button, der dem Skript sagt, zu welchem bestimmten Objekt es verknüpft ist. In diesem Fall ist es mit dem ImageButton verbunden, der der Eltern des Skript, das. PL: die Skriptsist.
• Die onButtonActivated Funktion behandelt die Aktivierung der Schaltfläche. Innerhalb von ihm solltest du die beabsichtigte Aktion ausführen, wie das Öffnen des Hauptmenüs des Spiels.
• Die letzte Zeile verbindet die Schaltfläche mit der onButtonActivated Funktion mit dem Activated Ereignis. Dies wird die Funktion jedes Mal ausführen, wenn ein Spieler die Schaltfläche im Spiel aktiviert.

Problemlösung

Wenn die Schaltfläche nicht wie erwartet funktioniert, überprüfen Sie die gefolgte Profile:

• Stellen Sie sicher, dass Sie ein client-seitiges LocalScript verwendet haben, nicht ein server-seitiges Script .
• Stellen Sie sicher, dass das LocalScript ein direktes Kind des Buttons-Objekts ist (kein Kind des ScreenGui-Containers).
• Bestätigen Sie, dass die Eigenschaften Ihrer Schaltfläche Bild , HoverImage und PressedImage auf die entsprechenden Bild-Assets eingestellt sind.