Interaktywne Przyciski

Ten samouczek pokazuje, jak zrobić przyciski na ekranie dla menu, akcji interfejsu i więcej.

Typy przycisków

Są dwa rodzaje obiektów przyciskowych, które możesz użyć w swoich projektach UI:

Przycisk tekstowy	Przycisk Zdjęcia
A TextButton jest podobny do a TextLabel z wyjątkiem tego, że gracze mogą go aktywować za pomocą kliknięcia/dotknięcia. Udostępnia również wiele tych samych właściwości wizualnych - czcionka, kolor tła, kolor krawędzi itp.	Class.ImageButton jest jak interaktywna wersja obiektu ImageLabel. Udostępnia również większość tych samych właściwości co jego nieobsługująca przycisków odpowiednik.

Tworzenie przycisku

Poniższe kroki pokazują, jak dodać ImageButton na ekran i zmienić go między trzema wyglądami w zależności od interakcji gracza.

1. W oknie Explorer, Przytrzymaj obiekt StarterGui, kliknij przycisk + i wklej 2>ScreenGui2>.

   

2. Wybierz nowy obiekt ScreenGUI i w podobny sposób wставь ImageButton .

   

   Dodano pusty przycisk obrazu do kąta widoku gry.

3. Jako dobrym praktykiem, zmień nazwę nowego przycisku zgodnie z jego przeznaczeniem, na przykład Przycisk Mapy .

   

Wielkość

Aby przycisk dynamycznie zmieniał rozmiar na różnych urządzeniach i ekranach, najlepiej użyć właściwości Skala .

1. W Oknie Proprietści, lokalizuj Wielkość właściwość i kliknij strzałkę, aby rozwinąć drzewo.

   

2. Ustaw następujące właściwości rozmiarowe:

   

3. Ogranicz przycisk do kваadratowej oprawy boundingowej ustawiając SizeConstraint na RelativeYY .

   

Skalowanie

Obecny rozmiar powinien dobrze działać na telefonie, ale skala X/Y o wartości 0.15 (15%) może wydawać się zbyt duża na ekranie komputera. Aby to naprawić, możesz dodać UISizeConstraint.

1. Przyciągnij PrzyciskMapy obiekt i wpisz UISizeConstraint.

   

2. Wybierz nowy obiekt ograniczenia rozmiaru i ustaw jego Maksymalny rozmiar wartość na 90, 90 .

   

Pozycja

Przyciski powinny być zwykle przesuwane w obszarze kciuka gracza na urządzeniach mobilnych, na przykład w dolnej prawnej obszarze ekranu.

1. Zmień właściwość AnchorPoint przycisku do 0,5, 1 , aby pozycjonowanie opierało się na jego dolnym środku.

   

2. Rozwój drzewa przycisku Pozycja i ustaw wartości poniższych parametrów. To przeniesie przycisk w pobliżu domyślnego przycisku skoku, który pojawia się na telefonach/komputerach stacjonarnych.

   

Obrazy

Ten przycisk wymaga trzech niestandardowych obrazów — jego normalny wygląd na ekranie, hover-over i ostateczny obraz dla gdy gracz go naciśnie.

Normalny

Wskażnik myszy

Naciśnij

Ustawienie tych wyglądów można dokonać poprzez właściwości Obrazu , HoverImage i Przytrzymywanej grafiki .

1. Lokalizuj właściwość Obrazu przycisku i wklej w rbxassetid://6025368017 lub użyj własnej właściwości użyj własnej właściwości .

   

2. Dla właściwości HoverImage , wklej w rbxassetid://6025452347 .

   

3. Dla właściwości PressedImage wklej w rbxassetid://6025454897 .

   

Stylowanie

Aby ukończyć wygląd przycisku na ekranie, dokonaj następujących dostosowań:

1. Ustaw Przezroczystość tła na wartość 1 , aby uczynić tło przejrzystym.

   

2. Obróć przycisk niewielko, ustawiając Rotację na -5 .

   

Funkcjonalność przycisków

Zadaniem końcowym jest przyłączenie podstawowej funkcjonalności przycisków.

1. W oknie Explorer, Przytrzymaj obiekt MapButton i wklej lokalny skrypt.

   

2. W skrypcie, skopiuj i wklej te nowe linijki:

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- Wykonaj tutaj oczekiwane akcjiprzycisku (jeśli dotyczy)
   end
   
   button.Activated:Connect(onButtonActivated)

Ten prosty skrypt przycisku działa następująco:

• Pierwsza linia ustawia zmienne przycisk, który mówi skryptowi, do którego obiektu jest powiązany. W tym przypadku jest powiązany z ImageButton , rodzicem skryptu.
• Funkcja onButtonActivated zarządza aktywacją przycisku. Wewnątrz wykonuje to intencjonalną akcję, taką jak otwarcie głównego menu gra.
• Następna linia łączy przycisk z funkcją onButtonActivated z wydarzeniem Activated. To powoduje, że funkcja będzie się wykonywać za każdym razem, gdy gracz aktywuje przycisk w grze.

Rozwiązywanie problemów

Jeśli przycisk nie działa zgodnie z oczekiwaniaми, sprawdź obserwuje:

• Upewnij się, że użyłeś LocalScript strony klienta, a nie strony serwera Script .
• Upewnij się, że LocalScript jest bezpośrednim dzieckiem obiektu przyciskowego (nie jest dzieckiem Class.ScreenGui kontenera).
• Potwierdź, że właściwości Obrazu , HoverImage i Przytrzymywanej grafiki przycisku są ustawione na odpowiednie zasoby obrazu.