Wdrażanie projektów w Studio | Dokumentacja

Wdrażanie swoich projektów to proces tworzenia wireframe'ów w Studio przy użyciu zarówno wbudowanych, jak i niestandardowych elementów UI z skryptami, które wyzwalają UI kontekstowo. Ten ekscytujący krok w samouczku to moment, w którym możesz zobaczyć, jak wszystkie twoje projekty i ciężka praca łączą się w spójną grupę przepływów pracy, które są kompletne i gotowe do interakcji z graczami.

Korzystając z przykładowej gry w laser tag .rbxl jako odniesienia, ta sekcja programu nauczania dotyczącego projektowania interfejsu użytkownika pokazuje, jak ożywić swoje planowanie UI, w tym wskazówki dotyczące:

Pobierania identyfikatorów zasobów z biblioteki zasobów UI, aby móc odtworzyć komponenty UI przykładowej gry w laser tag.
Emulowania różnych urządzeń bezpośrednio w Studio, aby zobaczyć, jak twoje UI wyświetla się na różnych ekranach i proporcjach.
Tworzenia obiektów ScreenGui, SurfaceGui i BillboardGui, aby wyświetlić swoje UI na ekranach graczy, powierzchniach części i w przestrzeni 3D.

Po zapoznaniu się z technikami w tej sekcji możesz zastosować je w swoich projektach, aby stworzyć ekscytujące komponenty UI, które pomogą graczom nawigować po tym, co mogą robić w twoich grach.

Instrukcje w tej sekcji samouczka pokazują, jak dokładnie odtworzyć komponenty UI za pomocą Biblioteki Zasobów Projektowania UI. Proces ten zajmuje około 90 minut lub mniej od początku do końca. Jeśli nie chcesz używać podanych wartości, możesz dostosować każdy element UI, aby spełniał specyfikacje twojej własnej gry lub użyć samego przykładu do reszty samouczka.

Pobierz bibliotekę zasobów

Biblioteki zasobów to zbiory zasobów, które możesz dodać do swojego ekwipunku dla łatwego dostępu i ponownego użycia. Biblioteka zasobów, której użyjesz w swoim projekcie z Sklepu Twórcy, zawiera dziewięć indywidualnych zasobów elementów UI 2D oraz ostateczne wersje komponentów celu, selektora blasterów i informacji o graczach, które tworzysz w tej sekcji samouczka.

**Ikona MultiBlaster**
rbxassetid://14309094777

**Ikona SingleBlaster**
rbxassetid://14309094641

**Ikona Różowej Drużyny**
rbxassetid://14309678581

**Odwrócony Trapez**
rbxassetid://14304827304

**Ikona Zielonej Drużyny**
rbxassetid://14309678701

**Przejrzystość**
rbxassetid://14304826876

**Przejrzystość wielokierunkowa**
rbxassetid://14304827147

**Ikona Przycisku Strzału - Domyślna**
rbxassetid://18308375067

**Ikona Przycisku Strzału - Naciśnięta**
rbxassetid://18308372597

**Ikona Celownika**
rbxassetid://14400935532

Ikona Markera Trafienia
rbxassetid://14401148777

**Ikona Strzałki Wybierania**
rbxassetid://14309187282

**Przejrzystość Granicy**
rbxassetid://14309518632

Aby przenieść bibliotekę zasobów z ekwipunku do swojej gry:

Dodaj bibliotekę zasobów do swojego ekwipunku.
1. Przejdź do strony szczegółów biblioteki zasobów w Sklepie Twórcy.
2. W prawym górnym rogu kliknij przycisk Pobierz Model. Biblioteka zasobów jest teraz w twoim ekwipunku i możesz ponownie używać tych zasobów w każdym projekcie na platformie.
W Studio przejdź do zakładki Strona główna, a następnie kliknij przycisk Skrzynka narzędzi. Otwiera się okno Skrzynka narzędzi.
W oknie Skrzynka narzędzi kliknij zakładkę Ekwipunek. Wyświetla się sortowanie Moje modele.
Kliknij menu rozwijane, a następnie wybierz sortowanie Moje pakiety.
Kliknij kafelek Ostateczne komponenty UI ekranu, a następnie w oknie Eksplorator wybierz Zakończone komponenty, a następnie przeciągnij je do usługi StarterGui. Możesz teraz włączyć dowolny z ostatecznych komponentów, aby odwołać się do ich projektu.

Emuluj urządzenia

Emulator Urządzeń w Studio pozwala przetestować, jak gracze będą widzieć i wchodzić w interakcje z twoim UI na różnych urządzeniach. To narzędzie jest kluczową częścią procesu wdrażania, ponieważ proporcje twojego widoku w Studio niekoniecznie odzwierciedlają proporcje ekranów, które gracze używają do uzyskania dostępu do twojej gry, a ważne jest, aby twoje UI było zarówno czytelne, jak i dostępne na każdym urządzeniu.

Na przykład, jeśli nie przetestujesz swojego UI na różnych rozmiarach ekranów, gracze z dużymi ekranami mogą nie być w stanie przeczytać twojego tekstu lub zrozumieć twoich ikon, a gracze z małymi ekranami mogą nie być w stanie zobaczyć przestrzeni 3D, ponieważ twoje elementy UI zajmują zbyt dużo miejsca na wyświetlaczu.

Aby emulować swoje UI na różnych rozmiarach ekranów:

Z menu Test w Studio włącz Emulator Urządzeń.
W menu rozwijanym rozdzielczości wybierz Rzeczywista rozdzielczość. To pozwala zobaczyć prawdziwą rozdzielczość twoich elementów UI na urządzeniu, które emulujesz.
W menu rozwijanym urządzeń wybierz przynajmniej jedno urządzenie w sekcjach Telefon, Tablet, Komputer i Konsola.

Tworzenie obiektów ScreenGui

Aby wyświetlić elementy UI na ekranie każdego gracza, możesz stworzyć obiekt ScreenGui w usłudze StarterGui. Obiekty ScreenGui są głównymi kontenerami dla UI na ekranie, a usługa StarterGui kopiuje swoje zawartości do kontenera PlayerGui każdego gracza, gdy wchodzą do gry.

Możesz stworzyć wiele obiektów ScreenGui, aby zorganizować i wyświetlić grupy elementów UI kontekstowo w trakcie rozgrywki. Na przykład, przykładowa gra w laser tag zawiera pięć oddzielnych obiektów ScreenGui, które są początkowo wyłączone, aż gracze spełnią różne warunki podczas głównego przepływu użytkownika gry:

HUDGui - Wyświetla kluczowe informacje o rozgrywce, gdy gracze są aktywni w rundzie, takie jak cel i całkowite punkty każdej drużyny.
PickABlasterGui - Wyświetla wszystkie wybory blasterów, gdy gracze zaczynają lub dołączają ponownie do rundy.
ForceFieldGui - Wyświetla heksagonalną siatkę, gdy gracze wybierają blaster i podczas gdy są tymczasowo niewrażliwi.
OutStateGui - Wyświetla ciemną granicę wokół ekranu, gdy gracze zostaną wyeliminowani.
RoundResultsGui - Wyświetla ciemny nakładkę na górze ekranu z informacjami o tym, która drużyna wygrała rundę.

Po utworzeniu obiektu ScreenGui możesz tworzyć i dostosowywać jego dzieci GuiObjects zgodnie z celem każdego kontenera. Aby to zademonstrować, w kolejnych sekcjach nauczysz się, jak wdrożyć elementy UI dla trzech kategorii informacji, które gracze muszą znać, aby odnieść sukces w przykładowej grze w laser tag. Możesz dostosować dowolną część procesu, aby spełniała specyfikacje twojej własnej gry.

Aby stworzyć obiekt ScreenGui:

W oknie Eksplorator najedź na usługę StarterGui, a następnie kliknij ikonę ⊕. Wyświetla się menu kontekstowe.
Wstaw ScreenGui.
Zmień nazwę ScreenGui zgodnie z kontekstem jego dziecięcych elementów UI.
Powtórz ten proces dla każdej grupy elementów UI, które musisz wyświetlić na ekranie każdego gracza.

UI celu

Zgodnie z najlepszymi praktykami wizualnej hierarchii z Wireframe Your Layouts, ta sekcja uczy, jak wdrożyć wszystkie elementy UI na ekranie związane z celem gry. Ta grupa elementów UI znajduje się blisko górnej części ekranu, ponieważ cel i punkty każdej drużyny mają największe znaczenie dla wygrania gry.

Na przykład, przykład dostarcza komponent UI celu, do którego gracze się odwołują, aby wiedzieć, co muszą zrobić, aby odnieść sukces w rundzie. Gdy gracze eliminują członków drużyny przeciwnika i zdobywają punkty, ten komponent śledzi wynik każdej drużyny w stosunku do ogólnego celu w komunikacie nagłówka. Aby uzyskać przegląd wszystkich skryptów klienta i serwera, które współpracują, aby śledzić punkty, zobacz Śledź punkty w programie nauczania dotyczącego skryptów rozgrywki.

Aby dokładnie odtworzyć UI celu w przykładowej grze Laser Tag:

Utwórz kontener dla całego komponentu.
1. Wstaw Frame do obiektu HUDGui ScreenGui.
  1. W oknie Eksplorator przejdź do usługi StarterGui.
  2. Najedź na jego dziecko HUDGui, a następnie kliknij ikonę ⊕. Wyświetla się menu kontekstowe.
  3. Z menu kontekstowego wstaw Frame.
2. Wybierz nowy Frame, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0, aby ustawić punkt początkowy ramki w górnej części na środku (50% od lewej do prawej ramki, i 0% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.03, 0}, aby ustawić ramkę blisko górnego środka ekranu (50% od lewej do prawej ekranu, i 3% od góry do dołu ekranu, aby była mała przestrzeń).
  4. Ustaw Size na {0.5, 0},{0.13, 0}, aby elementy ramki zajmowały dużą część górnej części ekranu, aby przyciągnąć uwagę graczy (50% w poziomie, i 13% w pionie).
  5. Ustaw Name na Objective.
3. OPCJONALNE
  Wstaw UIAspectRatioConstraint do Objective, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 7.
Utwórz kontener dla obiektów komunikatu celu.
1. Wstaw Frame do Objective.
2. Wybierz nowy Frame, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0, aby ustawić punkt początkowy ramki w górnej części na środku (50% od lewej do prawej ramki, i 0% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0, 0}, aby ustawić ramkę w środku kontenera (50% od lewej do prawej ramki nadrzędnej, i 0% od góry do dołu ramki nadrzędnej).
  4. Ustaw Size na {1, 0},{0.67, 0}, aby komponenty UI wyboru zajmowały ponad połowę kontenera od góry do dołu (100% w poziomie i 67% w pionie ramki nadrzędnej).
  5. Ustaw Name na ObjectiveDisplay.
Utwórz elementy tytułowe.
1. Wstaw ImageLabel do ObjectiveDisplay.
2. Wybierz ImageLabel, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnej części na środku (50% od lewej do prawej etykiety, i 100% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw LayoutOrder na -1.
  4. Ustaw Position na {0.5, 0},{0.34, 0}, aby ustawić etykietę blisko górnego środka ramki (50% od lewej do prawej ramki nadrzędnej, i 34% od góry do dołu ramki nadrzędnej).
  5. Ustaw Size na {0.46, 0},{0.34, 0}, aby poszerzyć obszar komunikatu do prawie połowy ramki (46% w poziomie i 34% w pionie ramki nadrzędnej).
  6. Ustaw Name na Header.
  7. Ustaw Image na rbxassetid://14304828123, aby wyświetlić trapez.
  8. Ustaw ImageTransparency na 0.15, aby nagłówek był półprzezroczysty.
3. OPCJONALNE
  Wstaw UIAspectRatioConstraint do ImageLabel, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 13.781.
4. Wstaw TextLabel do Header, aby wyświetlić tytuł.
5. Wybierz nową etykietę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt początkowy etykiety w środku (50% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby przenieść etykietę do środka etykiety nadrzędnej (50% od lewej do prawej etykiety nadrzędnej, i 50% od góry do dołu etykiety nadrzędnej).
  4. Ustaw Size na {0.62, 0},{0.55, 0}, aby poszerzyć przestrzeń tekstową do ponad połowy etykiety nadrzędnej (62% w poziomie i 55% w pionie etykiety nadrzędnej).
  5. Ustaw Name na HeaderTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  7. Ustaw Weight na Medium, aby pogrubić czcionkę.
  8. Ustaw Text na CELE.
  9. Włącz TextScaled.
Utwórz elementy komunikatu.
1. Wstaw ImageLabel do ObjectiveDisplay.
2. Wybierz ImageLabel, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnej części na środku (50% od lewej do prawej etykiety, i 100% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{1, 0}, aby przenieść etykietę do dolnego środka ramki nadrzędnej (50% od lewej do prawej ramki nadrzędnej, i 100% od góry do dołu ramki nadrzędnej).
  4. Ustaw Size na {0.89, 0},{0.66, 0}, aby poszerzyć przestrzeń tekstową do prawie pełnej szerokości ramki nadrzędnej (89% w poziomie i 66% w pionie ramki nadrzędnej).
  5. Ustaw Name na Body.
  6. Ustaw Image na rbxassetid://14304827265, aby wyświetlić odwrócony trapez.
  7. Ustaw ImageColor3 na 0, 0, 0, aby zabarwić obrazek na czarno.
  8. Ustaw ImageTransparency na 0.3, aby nagłówek był półprzezroczysty.
3. OPCJONALNE
  Wstaw UIAspectRatioConstraint do ImageLabel, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 13.781.
4. Wstaw TextLabel do Body, aby wyświetlić komunikat.
5. Wybierz nową etykietę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt początkowy etykiety w środku (50% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby przenieść etykietę do środka etykiety nadrzędnej (50% od lewej do prawej etykiety nadrzędnej, i 50% od góry do dołu etykiety nadrzędnej).
  4. Ustaw Size na {0.85, 0},{0.39, 0}, aby poszerzyć przestrzeń tekstową do ponad połowy etykiety nadrzędnej (85% w poziomie i 39% w pionie etykiety nadrzędnej).
  5. Ustaw Name na BodyTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  7. Ustaw Weight na Medium, aby pogrubić czcionkę.
  8. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały na ciemnym tle.
  9. Ustaw Text na Oznacz przeciwników, aby zdobyć punkty! Pierwsza drużyna, która zdobędzie %d punktów, wygrywa..
  10. Włącz TextScaled.
Utwórz kontener dla liczników punktów drużynowych.
1. Wstaw Frame do Objective.
2. Wybierz nowy Frame, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy ramki w dolnej części na środku (50% od lewej do prawej ramki, i 100% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{1, 0}, aby ustawić ramkę w dolnym środku kontenera (50% od lewej do prawej ramki nadrzędnej, i 100% od góry do dołu ramki nadrzędnej).
  4. Ustaw Size na {0.44, 0},{0.27, 0}, aby komponenty UI wyboru zajmowały mniej niż połowę kontenera od lewej do prawej (44% w poziomie i 27% w pionie ramki nadrzędnej).
  5. Ustaw Name na TeamPointCounter.
Utwórz odstęp dla liczników drużynowych.
1. Wstaw obiekt UIListLayout do ramki z kroku 5.
2. Wybierz obiekt UIListLayout, a następnie w oknie Właściwości,
  1. Ustaw Padding na 0.025, 0, aby zapewnić przestrzeń między przyszłymi licznikami drużynowymi.
  2. Ustaw FillDirection na Horizontal, aby każdy licznik drużynowy wyświetlał się obok siebie.
  3. Ustaw HorizontalAlignment na Center, aby każdy licznik drużynowy był wyrównany do środka względem siebie.
Utwórz elementy licznika drużyny zielonej.
1. Wstaw ImageLabel do TeamPointCounter.
2. Wybierz ImageLabel, a następnie w oknie Właściwości,
  1. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  2. Ustaw Position na {0.5, 0},{1, 0}, aby przenieść etykietę do dolnego środka ramki nadrzędnej (50% od lewej do prawej ramki nadrzędnej, i 100% od góry do dołu ramki nadrzędnej).
  3. Ustaw Size na {0.5, 0},{1, 0}, aby poszerzyć etykietę do połowy szerokości ramki nadrzędnej (50% w poziomie i 100% w pionie ramki nadrzędnej).
  4. Ustaw Name na TeamACounter.
  5. Ustaw Image na rbxassetid://14304826831, aby wyświetlić przejrzystość kierunkową.
  6. Ustaw ImageColor3 na 88, 218, 171, aby zabarwić obrazek na miętowy zielony.
3. Skonfiguruj niestandardowy atrybut, aby śledzić, że ta etykieta jest dla drużyny zielonej.
  1. W oknie Właściwości przejdź do sekcji Atrybuty, a następnie kliknij ikonę plusa. Wyświetla się okno dialogowe.
  2. W polu Nazwa wpisz teamColor.
  3. W menu rozwijanym Typ wybierz BrickColor.
  4. Kliknij przycisk Zapisz.
  5. Ustaw nowy atrybut teamColor na Mint.
4. Wstaw TextLabel do TeamACounter, aby wyświetlić komunikat.
5. Wybierz nową etykietę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 1, 0.5, aby ustawić nowy punkt początkowy etykiety w prawym środku (100% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.95, 0},{0.5, 0}, aby przenieść etykietę do prawej strony etykiety nadrzędnej (95% od lewej do prawej etykiety nadrzędnej, i 50% od góry do dołu etykiety nadrzędnej).
  4. Ustaw Size na {0.85, 0},{0.39, 0}, aby poszerzyć przestrzeń tekstową do ponad połowy etykiety nadrzędnej (85% w poziomie i 39% w pionie etykiety nadrzędnej).
  5. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  6. Ustaw Weight na Bold, aby pogrubić czcionkę.
  7. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały na ciemnym tle.
  8. Ustaw Text na -.
  9. Włącz TextScaled.
  10. Ustaw TextXAlignment na Right.
6. Wstaw obiekt UIStroke do TextLabel, a następnie w oknie Właściwości ustaw Color na 8, 78, 52, aby obrysować kreskę ciemnozielonym obrysem.
Utwórz elementy licznika drużyny różowej.
1. Duplikuj TeamAICounter i jego dzieci.
2. Wybierz duplikat TeamACounter, a następnie w oknie Właściwości,
  1. Ustaw Name na TeamBCounter.
  2. Ustaw Image na rbxassetid://14305849451, aby wyświetlić przejrzystość kierunkową w przeciwnym kierunku.
  3. Ustaw ImageColor3 na 255, 170, 255, aby zabarwić obrazek na różowo.
  4. Ustaw atrybut teamColor na Carnation Pink.
3. Wybierz duplikat TextLabel dziecka TeamBCounter, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0, 0.5, aby ustawić nowy punkt początkowy etykiety w lewym środku (0% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw Position na {0.05, 0},{0.5, 0}, aby przenieść etykietę do lewej strony etykiety nadrzędnej (5% od lewej do prawej etykiety nadrzędnej, i 50% od góry do dołu etykiety nadrzędnej).
  3. Ustaw TextXAlignment na Left.
4. Wybierz duplikat UIStroke dziecka TeamBCounter, a następnie w oknie Właściwości ustaw Color na 158, 18, 94, aby obrysować kreskę ciemnoróżowym obrysem.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programowo aktualizują komunikat celu i śledzą punkty drużynowe.

Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz Heads Up (HUD), w tym setObjective i startSyncingTeamPoints. Po dołączeniu gracza do rundy i wybraniu swojego blastera, ten skrypt zapewnia, że wszystkie elementy UI HUD wyświetlają się odpowiednio w zależności od stanu gracza, urządzenia i statusu drużyny.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Teraz, po wybraniu blastera przez gracza, UI celu wyświetla się na górze ich ekranu i śledzi punkty każdej drużyny.

UI blastera

Zgodnie z najlepszymi praktykami wizualnej hierarchii z Wireframe Your Layouts, ta sekcja uczy, jak wdrożyć wszystkie elementy UI na ekranie związane z blasterem gracza. Ta grupa elementów UI zajmuje większość przestrzeni ekranu w pobliżu środka ekranu, ponieważ działa jako punkt centralny, aby przyciągnąć uwagę graczy do akcji w przestrzeni 3D, i ma największe znaczenie dla rozgrywki.

Celownik

Celownik to element UI, który informuje graczy, gdzie będą mieli wpływ, gdy wystrzelą swoją broń. Ten element UI jest kluczowym wymogiem rozgrywki w grach typu first-person shooter, ponieważ gracze muszą być w stanie dokładnie celować swoim blasterem i eliminować członków drużyny przeciwnika.

Jak w większości innych gier w gatunku first-person shooter, przykładowa gra w laser tag umieszcza celownik w centrum ekranu, aby gracze mieli coś statycznego, na czym mogą się skupić, podczas gdy ich awatar porusza się w przestrzeni 3D. Oprócz zmniejszenia choroby lokomocyjnej, to umiejscowienie pozwala, aby celownik był dostrzegalny, a jednocześnie wtopił się w ogólne otoczenie.

Aby dokładnie odtworzyć celownik w przykładowej grze Laser Tag:

Wstaw ImageLabel do obiektu HUDGui ScreenGui.
1. W oknie Eksplorator przejdź do usługi StarterGui.
2. Najedź na jego dziecko HUDGui, a następnie kliknij ikonę ⊕. Wyświetla się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageLabel.
Wybierz nowy ImageLabel, a następnie w oknie Właściwości,
1. Ustaw Image na rbxassetid://14400935446.
2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku etykiety (50% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
4. Ustaw Name na Crosshair.
5. Ustaw Position na {0.5,0},{0.5,0}, aby ustawić etykietę w środku ekranu.
6. Ustaw ScaleType na Fit, aby obrazek pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
OPCJONALNE
Wstaw UIAspectRatioConstraint do Crosshair, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 0.895.

Marker trafienia

Marker trafienia to element UI, który wyświetla się tylko wtedy, gdy wystrzał trafia w innego gracza z drużyny przeciwnika. Podobnie jak celownik, ten element UI jest kluczowym wymogiem rozgrywki w grach typu first-person shooter, ponieważ zapewnia wizualną informację zwrotną, kiedy gracze odnoszą sukces w eliminowaniu swoich przeciwników.

Aby dokładnie odtworzyć marker trafienia w przykładowej grze Laser Tag:

Wstaw ImageLabel do obiektu Crosshair ImageLabel.
1. W oknie Eksplorator przejdź do usługi StarterGui.
2. Najedź na jego dziecko Crosshair, a następnie kliknij ikonę ⊕. Wyświetla się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageLabel.
Wybierz nowy ImageLabel, a następnie w oknie Właściwości,
1. Ustaw Image na rbxassetid://14401148736, aby wyświetlić prostokątną ikonę markera trafienia.
2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku etykiety.
3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
4. Ustaw Position na {0.5,0},{0.5,0}, aby ustawić etykietę w środku ekranu.
5. Ustaw Name na Hitmarker.
6. Ustaw Size na {0.6, 0},{0.06, 0}, aby zmniejszyć rozmiar prostokątów wokół środka celownika.
7. Ustaw ImageTransparency na 1, aby marker trafienia był całkowicie przezroczysty. Skrypty w następnym kroku przywracają przezroczystość do 0 za każdym razem, gdy wystrzał gracza trafia w innego gracza z drużyny przeciwnika.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programowo wyświetlają marker trafienia, gdy wystrzał trafia w gracza z drużyny przeciwnika.

Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz Heads Up (HUD), w tym setupHitmarker. Po dołączeniu gracza do rundy i wybraniu swojego blastera, ten skrypt zapewnia, że wszystkie elementy UI HUD wyświetlają się odpowiednio w zależności od stanu gracza, urządzenia i statusu drużyny.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Teraz, gdy gracz wystrzeliwuje swój blaster i wystrzał trafia w innego gracza, marker trafienia wyświetla się na chwilę.

Selekcja blastera

Selekcja blastera to komponent UI, którego gracze używają do wyboru typu blastera przed dołączeniem lub ponownym dołączeniem do rundy. Przykładowa gra w laser tag oferuje dwa typy blasterów: jeden, który produkuje kilka wiązek z szerokim, poziomym rozprzestrzenieniem, oraz drugi, który produkuje pojedynczą wiązkę. Typ blastera, który wybierają gracze, wpływa na ich strategię podczas rundy, co czyni ten komponent UI istotnym elementem przepływu gry.

Następujące kroki szczegółowo opisują, jak stworzyć kilka kontenerów dla różnych grup elementów UI, nagłówek z komunikatem, przyciski nawigacyjne i wybór oraz prefabrykowany przycisk blastera. Logika skryptowa dla całego komponentu popularyzuje różne cechy wizualne w prefabrykowanym przycisku blastera zgodnie z instancjami Configuration, które reprezentują każdy typ blastera.

To ustawienie pozwala na tworzenie dodatkowych instancji Configuration dla większej liczby typów blasterów, które automatycznie wyświetlają się poprawnie w selektorze blasterów, bez potrzeby tworzenia indywidualnych przycisków w StarterGui.PickABlasterGui.

Aby dokładnie odtworzyć selektor blastera w przykładowej grze Laser Tag:

Utwórz kontener dla całego komponentu.
1. Wstaw Frame do obiektu PickABlaster ScreenGui.
  1. W oknie Eksplorator przejdź do usługi StarterGui.
  2. Najedź na jego dziecko PickABlaster, a następnie kliknij ikonę ⊕. Wyświetla się menu kontekstowe.
  3. Z menu kontekstowego wstaw Frame.
2. Wybierz nowy ramkę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy ramki w dolnej części na środku (50% od lewej do prawej ramki, i 100% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.9, 0}, aby ustawić ramkę blisko dolnego środka ekranu (50% od lewej do prawej ekranu, i 92.4% od góry do dołu ekranu).
  4. Ustaw Size na {0.8, 0},{0.25, 0}, aby komponenty UI selektora blasterów zajmowały dużą część ekranu, aby przyciągnąć uwagę graczy (80% w poziomie, i 25% w pionie).
  5. Ustaw Name na Component.
3. OPCJONALNE
  Wstaw UIAspectRatioConstraint do Component, aby zapewnić, że proporcje ramki i jej dziecięcych elementów UI pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 5.
Utwórz kontener do przechowywania grup elementów UI.
1. Wstaw Frame do Component.
2. Wybierz nowy ramkę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy ramki w środku (50% od lewej do prawej ramki, i 50% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.375, 0}, aby ustawić ramkę blisko górnego środka kontenera (50% od lewej do prawej ramki nadrzędnej, i 37.5% od góry do dołu ramki nadrzędnej).
  4. Ustaw Size na {1, 0},{0.75, 0}, aby komponenty UI wyboru zajmowały 3/4 kontenera (100% w poziomie i 75% w pionie ramki nadrzędnej).
  5. Ustaw Name na SelectionFrame.
Utwórz komunikat dla selektora blastera.
1. Wstaw ImageLabel do SelectionFrame.
2. Wybierz nową etykietę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnej części na środku (50% od lewej do prawej etykiety, i 100% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw LayoutOrder na -1.
  4. Ustaw Position na {0.5, 0},{0.22, 0}, aby ustawić etykietę blisko górnego środka ramki (50% od lewej do prawej ramki nadrzędnej, i 22% od góry do dołu ramki nadrzędnej).
  5. Ustaw Size na {0.45, 0},{0.22, 0}, aby poszerzyć obszar komunikatu do prawie połowy ramki (45% w poziomie i 22% w pionie ramki nadrzędnej).
  6. Ustaw Name na Header.
  7. Ustaw Image na rbxassetid://14304828123, aby wyświetlić trapez.
  8. Ustaw ImageTransparency na 0.15, aby nagłówek był półprzezroczysty.
3. OPCJONALNE
  Wstaw UIAspectRatioConstraint do etykiety, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Przykład ustawia właściwość UIAspectRatioConstraint.AspectRatio na 13.78.
4. Wstaw TextLabel do Header, aby wyświetlić komunikat.
5. Wybierz nową etykietę, a następnie w oknie Właściwości,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt początkowy etykiety w środku (50% od lewej do prawej etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby przenieść etykietę do środka etykiety nadrzędnej (50% od lewej do prawej etykiety nadrzędnej, i 50% od góry do dołu etykiety nadrzędnej).
  4. Ustaw Size na {0.6, 0},{0.55, 0}, aby poszerzyć przestrzeń tekstową do ponad połowy etykiety nadrzędnej (60% w poziomie i 55% w pionie etykiety nadrzędnej).
  5. Ustaw Name na HeaderTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  7. Ustaw Weight na Medium, aby pogrubić czcionkę.
  8. Ustaw Text na WYBIERZ BLASTER.
  9. Włącz TextScaled.
Utwórz kontener dla przycisku blastera i strzałek wyboru.
1. Wstaw ImageLabel do SelectionFrame.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnym środku (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
  3. Ustaw BackgroundColor na 0, 0, 0, aby etykieta była czarna.
  4. Ustaw BackgroundTransparency na 0.3, aby zmniejszyć przezroczystość etykiety o 30% i dopasować do wszystkich czarnych elementów UI w grze.
  5. Ustaw Position na {0.5, 0},{1, 0}, aby ustawić etykietę w dolnym środku ramki (50% od lewej do prawej ramki nadrzędnej i 100% od góry do dołu ramki nadrzędnej).
  6. Ustaw Size na {1, 0},{0.77, 0}, aby poszerzyć obszar etykiety do przestrzeni poniżej komunikatu (100% w poziomie i 77% w pionie ramki nadrzędnej).
3. Zaokrągl rogi kontenera.
  1. Wstaw obiekt UICorner do etykiety.
  2. Wybierz nowy obiekt rogu, a następnie w oknie Properties ustaw CornerRadius na 0.075, 0, aby zaokrąglić rogi.
Utwórz kontener dla przycisków blastera.
1. Wstaw Frame do etykiety z kroku 4.
2. Wybierz nową ramkę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowej ramki w jej środku (50% od lewej do prawej ramki i 50% od góry do dołu ramki).
  2. Ustaw BackgroundTransparency na 1, aby tło ramki było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić ramkę w środku jej nadrzędnej etykiety (50% od lewej do prawej ramki nadrzędnej i 50% od góry do dołu ramki nadrzędnej).
  4. Ustaw Size na {0.85, 0},{0.77, 0}, aby poszerzyć obszar ramki do większości etykiety (85% w poziomie i 77% w pionie etykiety nadrzędnej).
  5. Ustaw Name na Container.
Utwórz odstęp dla wszystkich przyszłych przycisków blastera.
1. Wstaw obiekt UIListLayout do ramki z kroku 5.
2. Wybierz nowy obiekt układu, a następnie w oknie Properties,
  1. Ustaw Padding na 0.035, 0, aby zapewnić przestrzeń między wszystkimi przyszłymi przyciskami.
  2. Ustaw FillDirection na Horizontal, aby każdy przycisk wyświetlał się obok siebie.
  3. Ustaw zarówno HorizontalAlignment, jak i VerticalAlignment na Center, aby każdy przycisk był wyrównany do środka względem siebie.
Utwórz lewy przycisk nawigacyjny.
1. Wstaw obiekt ImageButton do ImageLabel z kroku 4.
2. Wybierz nowy przycisk, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0, 0.5, aby ustawić punkt początkowy nowego przycisku w lewym środku (0% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
  3. Ustaw BackgroundTransparency na 0.15, aby zapewnić wizualną informację zwrotną przy najechaniu, że przycisk jest wybieralny.
  4. Ustaw Position na {0.02, 0},{0.5, 0}, aby zapewnić odstęp po lewej stronie przycisku od jego nadrzędnego kontenera (2% od lewej do prawej etykiety nadrzędnej i 50% od góry do dołu etykiety nadrzędnej).
  5. Ustaw Size na {0.04, 0},{0.33, 0}, aby uczynić przycisk wyboru znacznie mniejszym niż przyciski blastera (4% w poziomie i 33% w pionie ramki nadrzędnej).
  6. Ustaw Name na NavigationButtonLeft.
3. Zaokrągl rogi przycisku.
  1. Wstaw obiekt UICorner do przycisku.
  2. Wybierz nowy obiekt rogu, a następnie w oknie Properties ustaw CornerRadius na 0.1, 0, aby zaokrąglić rogi.
4. Wstaw obiekt ImageLabel do przycisku.
5. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowej etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw Position na {0.45, 0},{0.5, 0}, aby ustawić etykietę blisko środka swojego nadrzędnego przycisku (45% od lewej do prawej przycisku nadrzędnego i 50% od góry do dołu przycisku nadrzędnego). Ta wartość nie jest w środku, ponieważ strzałka nie wygląda wizualnie jakby była w środku przycisku przy {0.5, 0},{0.5, 0}.
  3. Ustaw Size na {0.8, 0},{0.8, 0}, aby poszerzyć obszar etykiety do przestrzeni poniżej komunikatu (80% w poziomie i 80% w pionie ramki nadrzędnej).
  4. Ustaw BackgroundTransparency na 1, aby tło obrazu było całkowicie przezroczyste.
  5. Ustaw Image na rbxassetid://14309187238.
  6. Ustaw ScaleType na Fit.
Utwórz prawy przycisk nawigacyjny.
1. Duplikuj NavigationButtonLeft.
2. Wybierz duplikowany przycisk, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 1, 0.5, aby ustawić punkt początkowy nowego przycisku w prawym środku (100% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
  2. Ustaw Position na {0.98, 0},{0.5, 0}, aby zapewnić odstęp po prawej stronie przycisku od jego nadrzędnego kontenera (98% od lewej do prawej etykiety nadrzędnej i 50% od góry do dołu etykiety nadrzędnej).
  3. Ustaw Name na NavigationButtonRight.
3. Wybierz obiekt ImageLabel będący dzieckiem.
  1. Ustaw Rotation na 180, aby obrócić obraz.
  2. Ustaw Position na {0.55, 0},{0.5, 0}, aby ustawić etykietę blisko środka swojego nadrzędnego przycisku (55% od lewej do prawej przycisku nadrzędnego i 50% od góry do dołu przycisku nadrzędnego). Ta wartość nie jest w środku, ponieważ strzałka nie wygląda wizualnie jakby była w środku przycisku przy {0.5, 0},{0.5, 0}.
Utwórz przycisk SELECT.
1. Wstaw ImageButton do Component. Zauważ, jak ten proces utrzymuje przycisk wyboru oddzielnie od SelectionFrame, abyś mógł dodać odstęp między główną częścią komponentu a przyciskiem wyboru.
2. Wybierz nowy przycisk, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy nowego przycisku w dolnym środku (50% od lewej do prawej przycisku i 100% od góry do dołu przycisku).
  3. Ustaw BackgroundTransparency na 0.15, aby zapewnić wizualną informację zwrotną przy najechaniu, że przycisk jest wybieralny.
  4. Ustaw Position na {0.5, 0},{0.99, 0}, aby ustawić przycisk blisko dolnego środka swojego kontenera (50% od lewej do prawej ramki nadrzędnej i 99% od góry do dołu ramki nadrzędnej).
  5. Ustaw Size na {0.17, 0},{0.18, 0}, aby wydłużyć przycisk pod przyciskami blastera (17% w poziomie i 18% w pionie ramki nadrzędnej).
  6. Ustaw Name na SelectButton.
3. Zaokrągl rogi przycisku.
  1. Wstaw obiekt UICorner do przycisku.
  2. Wybierz nowy obiekt rogu, a następnie w oknie Properties ustaw CornerRadius na 0.2, 0, aby zaokrąglić rogi.
4. Wstaw obiekt TextLabel do przycisku, aby wyświetlić wezwanie do działania.
5. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowej etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby przenieść etykietę do środka przycisku (50% od lewej do prawej przycisku nadrzędnego i 50% od góry do dołu przycisku nadrzędnego).
  4. Ustaw Size na {0.9, 0},{0.55, 0}, aby poszerzyć przestrzeń tekstową do prawie całej szerokości etykiety nadrzędnej (90% w poziomie i 55% w pionie etykiety nadrzędnej).
  5. Ustaw Name na SelectTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  7. Ustaw Weight na Medium, aby pogrubić czcionkę.
  8. Ustaw Text na SELECT.
  9. Włącz TextScaled.
Utwórz prefabrykowany przycisk blastera.
1. W usłudze ReplicatedStorage utwórz strukturę folderów, aby zorganizować swoje obiekty UI. Przykład używa folderu Instances z podfolderem Guis.
2. Wstaw obiekt ImageButton do folderu Guis.
3. Wybierz nowy przycisk, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowego przycisku w jego środku (50% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
  3. Ustaw BackgroundTransparency na 0.65, aby zapewnić wizualną informację zwrotną, że przycisk nie jest w fokusie. Skrypty w kroku 12 zapewniają programatyczną informację zwrotną wizualną, gdy przycisk jest w fokusie.
  4. Ustaw LayoutOrder na 2.
  5. Ustaw Name na BlasterButtonPrefab.
  6. Ustaw Size na {0.8, 0},{0.8, 0}.
  7. Ustaw ImageTransparency na 1, aby obraz był całkowicie przezroczysty.
4. Wstaw obiekt UIAspectRatioConstraint do BlasterButtonPrefab, aby zapewnić, że proporcje przycisku pozostaną takie same w obrębie komponentu, niezależnie od rozmiaru ekranu gracza.
5. Zaokrągl rogi przycisku.
  1. Wstaw obiekt UICorner do BlasterButtonPrefab.
  2. Wybierz UICorner, a następnie w oknie Properties ustaw CornerRadius na 0.05, 0, aby zaokrąglić rogi.
6. Wstaw obiekt ImageLabel do BlasterButtonPrefab.
7. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowej etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  4. Ustaw Position na {0.52, 0},{0.497, 0}, aby ustawić etykietę blisko środka swojego nadrzędnego przycisku (52% od lewej do prawej przycisku nadrzędnego i 49.7% od góry do dołu przycisku nadrzędnego). Ta wartość nie jest w środku, ponieważ blaster nie wygląda wizualnie jakby był w środku przycisku przy {0.5, 0},{0.5, 0}.
  5. Ustaw Size na {1.20, 0},{0.9, 0}, aby poszerzyć obszar etykiety poza przycisk (120% w poziomie i 90% w pionie przycisku nadrzędnego).
  6. Ustaw ScaleType na Fit.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programatycznie wyświetlają przyciski dla każdego blastera, skalują przyciski, gdy gracz wybiera przycisk, który nie jest w fokusie, i przypisują wybór blastera gracza do jego awatara.

Następujący skrypt wymaga zestawu skryptów, które współpracują, aby stworzyć selektor blasterów. Gdy gracz dołącza do gry lub respawnuje się w rundzie po osiągnięciu zera zdrowia, ten skrypt aktywuje wszystkie elementy UI selektora blasterów, aż gracz dokona wyboru.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Teraz, gdy gracz dołącza do gry lub respawnuje się w rundzie po osiągnięciu zera zdrowia, UI selektora blasterów jest wyświetlane, mogą dokonać wyboru, a każdy przycisk działa zgodnie z oczekiwaniami.

Przycisk blastera

Przycisk blastera to komponent UI, którego gracze używają do strzelania z blastera, jeśli uzyskują dostęp do gry za pomocą urządzenia mobilnego lub tabletu. Przykładowa gra w laser tag używa przycisku blastera z ikoną, która przedstawia zarówno celownik, jak i wybuch, aby komunikować funkcję przycisku bez tekstu.

Aby dokładnie odtworzyć przycisk blastera w przykładowej grze Laser Tag:

Wstaw ImageButton do obiektu HUDGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź na jego dziecko HUDGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageButton.
W widoku, przesuń przycisk w miejsce, gdzie naturalnie spoczywa kciuk gracza, aby uzyskać wizualne poczucie, jak przycisk będzie wyglądał na urządzeniu gracza, a następnie w oknie Properties,
1. Ustaw Image na rbxassetid://18308375035, aby wyświetlić ikonę przycisku blastera.
2. Ustaw PressedImage na rbxassetid://18308372558, aby wyświetlić odwróconą wersję ikony przycisku blastera, gdy gracz naciska przycisk.
3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
4. Ustaw Name na BlastButton.
5. Ustaw ScaleType na Fit, aby obraz pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
6. Ustaw ImageTransparency na 0.3, aby zmniejszyć przezroczystość etykiety, aby pasowała do wszystkich czarnych elementów UI w grze.
Wstaw obiekt UIAspectRatioConstraint do BlastButton, aby zapewnić, że proporcje przycisku pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programatycznie wyświetlają przycisk blastera, gdy gracz używa dotykowego wejścia na urządzeniu, które akceptuje dotykowe sterowanie.

Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz HUD (Heads Up Display), w tym setupTouchButtonAsync. Po dołączeniu gracza do rundy i wybraniu blastera, ten skrypt zapewnia, że wszystkie elementy UI HUD wyświetlają się odpowiednio dla stanu gracza, urządzenia i statusu drużyny.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Teraz, gdy gracz dołącza do gry i używa dotykowego wejścia na urządzeniu, które akceptuje dotykowe sterowanie, przycisk blastera wyświetla się w górnym prawym rogu przycisku skoku.

UI gracza

Zgodnie z najlepszymi praktykami wizualnej hierarchii z Wireframe Your Layouts, ta sekcja uczy, jak wdrożyć wszystkie elementy UI na ekranie związane ze stanem gracza. Ta grupa elementów UI znajduje się blisko boków ekranu, ponieważ gracze mogą zrozumieć te peryferyjne informacje, nie odwracając uwagi od rozgrywki.

Wskaźnik gracza

Wskaźnik gracza to komponent UI, do którego gracze odwołują się, aby szybko zrozumieć, do której drużyny należą, gdy tylko pojawią się w strefie respawnu swojej drużyny. Przykładowa gra w laser tag oferuje dwie wersje wskaźnika gracza, w zależności od tego, czy gracz jest w drużynie zielonej, czy różowej.

Zgodnie z wytycznymi z Select a Color Theme, obie wersje wskaźnika gracza łączą kolor drużyny z unikalną, prostą ikoną o minimalnych detalach, aby pozostały czytelne na małych ekranach. Zapewnienie dwóch form informacji zwrotnej wizualnej jest ważne, ponieważ pomaga utrzymać projekt dostępny dla graczy z daltonizmem.

Aby dokładnie odtworzyć komponent wskaźnika gracza w przykładowej grze Laser Tag:

Wstaw Frame do obiektu HUDGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź na jego dziecko HUDGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw Frame.
Wybierz nowy Frame, a następnie w oknie Properties,
1. Ustaw AnchorPoint na 0, 1, aby ustawić punkt początkowy ramki w dolnym środku (0% od lewej do prawej ramki i 100% od góry do dołu ramki).
2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
3. Ustaw Name na PlayerDisplay.
4. Ustaw Position na {0.02, 0},{0.97, 0}, aby ustawić ramkę blisko dolnego lewego rogu ekranu.
5. Ustaw Size na {0.23, 0},{0.08, 0}, aby skrócić i poszerzyć ramkę.
6. Włącz ClipsDescendants, aby przyciąć obiekty Gui, które wychodzą poza ramkę.
Utwórz kształt wielokątny.
1. Wstaw ImageLabel do PlayerDisplay.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw Image na rbxassetid://14304828123, aby wyświetlić ikonę trapezu.
  2. Ustaw AnchorPoint na 1, 1, aby ustawić punkt początkowy etykiety w dolnym prawym rogu (100% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
  3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  4. Ustaw Name na Block.
  5. Ustaw Position na {1,0},{1,0}, aby ustawić etykietę po prawej stronie ramki.
  6. Ustaw Size na {1.858, 0},{0.581, 0}, aby poszerzyć etykietę poza ramkę i skrócić ją do nieco ponad połowy długości ramki.
  7. Ustaw ImageTransparency na 0.15, aby etykieta była lekko przezroczysta.
  8. Ustaw ScaleType na Fit, aby obraz pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
  1. Wstaw obiekt UIAspectRatioConstraint do Block, aby zapewnić, że proporcje etykiety i jej dzieci pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  2. Wybierz nowy constraint, a następnie w oknie Properties ustaw AspectRatio na 13.78.
Utwórz pole dla portretu gracza.
1. Wstaw ImageLabel do PlayerDisplay.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń domyślny identyfikator zasobu w właściwości Image. Skrypty w kroku 7 programatycznie wstawiają portret gracza do etykiety obrazu.
  2. Ustaw AnchorPoint na 0, 1, aby ustawić punkt początkowy etykiety w dolnym lewym rogu (0% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
  3. Ustaw BackgroundColor3 na 0, 0, 0, aby ustawić kolor tła etykiety na czarny.
  4. Ustaw BackgroundTransparency na 0.3, aby zmniejszyć przezroczystość etykiety o 30% i dopasować do wszystkich czarnych elementów UI w grze.
  5. Ustaw Name na PlayerPortrait.
  6. Ustaw Position na {0.11, 0},{1, 0}, aby ustawić etykietę po lewej stronie kształtu wielokątnego.
  7. Ustaw Size na {0.23, 0},{1, 0}, aby zmniejszyć etykietę.
  8. Ustaw ImageTransparency na 0.15, aby etykieta była lekko przezroczysta.
  9. Ustaw ScaleType na Fit, aby obraz pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
  1. Wstaw obiekt UIAspectRatioConstraint do PlayerPortrait, aby zapewnić, że proporcje etykiety i jej dzieci pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  2. Wstaw obiekt UICorner do PlayerPortrait, a następnie w oknie Properties ustaw CornerRadius na 0.05, 0, aby lekko zaokrąglić rogi.
Utwórz etykietę tekstową dla nazwy gracza.
1. Wstaw obiekt TextLabel do PlayerDisplay.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0, 0.5, aby ustawić punkt początkowy nowej etykiety w lewym środku (0% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Name na PlayerNameTextLabel.
  4. Ustaw Position na {0.35, 0},{0.72, 0}, aby ustawić etykietę po prawej stronie swojego kontenera (35% od lewej do prawej etykiety nadrzędnej i 72% od góry do dołu etykiety nadrzędnej).
  5. Ustaw Size na {0.52, 0},{0.3, 0}, aby tekst mógł zajmować większość obszaru kształtu wielokątnego (52% w poziomie i 30% w pionie ramki nadrzędnej).
  6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
  7. Ustaw Weight na Bold, aby pogrubić czcionkę.
  8. Usuń domyślny tekst w właściwości Text. Skrypty w kroku 7 programatycznie wstawiają nazwę gracza do etykiety tekstowej.
  9. Włącz TextScaled.
  10. Ustaw TextXAlignment na Left.
Utwórz ikony drużyn i kolory, które wyświetlają się po lewej stronie portretu gracza.
1. Wstaw Folder do PlayerDisplay, a następnie zmień nazwę na TeamIcons.
2. Utwórz ikonę i kolor drużyny zielonej.
  1. Wstaw ImageLabel do TeamIcons.
  2. Wybierz nową etykietę, a następnie w oknie Properties,
    
    Ustaw AnchorPoint na 0, 1, aby ustawić punkt początkowy etykiety w dolnym lewym rogu (0% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
    
    Ustaw BackgroundColor3 na 88, 218, 171, aby ustawić kolor tła etykiety na miętowy zielony.
    
    Ustaw Name na TeamAIcon.
    
    Ustaw Position na {0, 0},{1, 0}, aby ustawić etykietę po lewej stronie ramki.
    
    Ustaw Size na {0.135, 0},{0.58, 0}, aby zmniejszyć etykietę po lewej stronie portretu gracza.
    
    Ustaw ImageTransparency na 1, aby etykieta była przezroczysta.
  1. Skonfiguruj niestandardowy atrybut, aby śledzić, że ta etykieta jest dla zielonej drużyny. Ten krok jest bardzo ważny dla skryptów w kroku 7.
    
    W oknie Properties przejdź do sekcji Attributes, a następnie kliknij ikonę plusa. Wyświetli się okno dialogowe.
    
    W polu Name wpisz teamColor.
    
    W menu rozwijanym Type wybierz BrickColor.
    
    Kliknij przycisk Save.
    
    Ustaw nowy atrybut teamColor na Mint.
  2. Wstaw obiekt UIAspectRatioConstraint do TeamAIcon, aby zapewnić, że proporcje etykiety i jej dzieci pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  3. Utwórz ikonę.
    
    Wstaw ImageLabel do TeamAIcon.
    
    Wybierz nową etykietę, a następnie w oknie Properties,
    
    Ustaw Image na rbxassetid://14309678670, aby wyświetlić ikonę zielonej drużyny.
    
    Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
    
    Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
    
    Ustaw Name na Icon.
    
    Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku swojej etykiety nadrzędnej.
    
    Ustaw Size na {0.7, 0},{0.6, 0}, aby zmniejszyć etykietę.
    
    Ustaw ScaleType na Fit, aby obraz pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
3. Utwórz ikonę i kolor drużyny różowej.
  1. Duplikuj TeamAIcon i jego dzieci.
  2. Wybierz duplikowany TeamAIcon, a następnie w oknie Properties,
    
    Ustaw BackgroundColor3 na 255, 170, 255, aby ustawić kolor tła etykiety na różowy.
    
    Ustaw Name na TeamBIcon.
    
    Ustaw atrybut teamColor na Carnation Pink.
    
    Wybierz duplikowaną etykietę Icon będącą dzieckiem TeamBIcon, a następnie w oknie Properties ustaw Image na rbxassetid://14309678549, aby wyświetlić ikonę różowej drużyny.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programatycznie wyświetlają wskaźnik gracza z odpowiednim kolorem drużyny i ikoną, gdy gracz jest aktywny w rundzie.

Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz HUD (Heads Up Display), w tym startSyncingTeamColor, setPlayerName i setPlayerPortrait. Po dołączeniu gracza do rundy i wybraniu blastera, ten skrypt zapewnia, że wszystkie elementy UI HUD wyświetlają się odpowiednio dla stanu gracza, urządzenia i statusu drużyny.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)

Teraz, gdy gracz dołącza lub ponownie dołącza do rundy po respawnie, wskaźnik gracza wyświetla się w dolnym lewym rogu ich ekranu.

Ekran pola siłowegoEkran pola siłowego to element interfejsu użytkownika, który nakłada się na widok, aby poinformować graczy, że są bezpieczni przed ogniem drużyny wroga podczas dołączania lub ponownego dołączania do rundy. Zgodnie z wytycznymi estetycznymi dla ikon z Wybierz styl artystyczny, przykładowa gra w laserowy tag wykorzystuje półprzezroczysty heksagonalny wzór, aby symbolizować pole siłowe. Ta decyzja projektowa nie tylko wzmacnia ogólny futurystyczny styl artystyczny dla całego interfejsu użytkownika w grze, ale także komunikuje stan gracza bez użycia tekstu lub dodatkowych wskazówek.

Aby dokładnie odtworzyć ekran pola siłowego w przykładowej grze Laser Tag:

Wstaw ImageLabel do obiektu ForceFieldGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź na jego podrzędny obiekt ForceFieldGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageLabel.
Wybierz nową etykietę, a następnie w oknie Properties,
1. Ustaw Image na rbxassetid://14462567888.
2. Ustaw BackgroundTransparency na 0.8, aby pole siłowe było przezroczyste.
3. Ustaw Size na {1, 0},{1, 0}, aby obraz wypełniał cały ekran (100% w poziomie i 100% w pionie rodzica ScreenGui).
4. Ustaw ScaleType na Tile, aby heksagon układał się na całym ekranie.
5. Ustaw TileSize na {0, 104},{0, 180}.
Wstaw obiekt UIGradient do etykiety.
Wybierz nowy obiekt gradientu, a następnie w oknie Properties,
1. Ustaw Color na sekwencję kolorów, która zaczyna się od niebieskiego, przechodzi w biały, a następnie znowu w niebieski.
  1. Ustaw Color na 120, 192, 250, aby zastosować jasnoniebieski odcień do wszystkich heksagonów.
  2. Kliknij właściwość Color, a następnie kliknij przycisk ⋯. Wyświetli się okno sekwencji kolorów.
    
    Każdy trójkąt na dolnej osi sekwencji kolorów to punkt kluczowy, który określa wartość koloru właściwości w tym punkcie obrazu od lewej do prawej.
  3. Kliknij i przeciągnij na sekwencji kolorów, aż osiągniesz wartość Time równą 0.05, a następnie kliknij mały kwadrat obok Color, aby otworzyć okno pop-up Colors.
  4. Wybierz jasną biel, a następnie zamknij okno pop-up.
  5. Kliknij i przeciągnij na sekwencji kolorów, aż osiągniesz wartość Time równą 0.95, a następnie ponownie otwórz okno pop-up Colors i wybierz ten sam kolor biały co wcześniej.
2. Ustaw Rotation na 225, aby niebieska część twojej sekwencji kolorów wyświetlała się w lewym górnym i prawym dolnym rogu.
3. Ustaw Transparency na sekwencję liczb, która sprawia, że pole siłowe wygląda, jakby migotało.
  1. Kliknij właściwość Transparency, a następnie kliknij przycisk ⋯. Wyświetli się okno sekwencji liczb. Każdy kwadrat na początku i końcu sekwencji liczb to punkt kluczowy, który określa wartość przezroczystości właściwości w tym punkcie obrazu od lewej do prawej.
  2. Ustaw następujące właściwości czasu i wartości w całej sekwencji liczb:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
Duplikuj ImageLabel z kroku 2.
Wybierz obiekt UIGradient w duplikowanej etykiecie, a następnie w oknie Properties,
1. Ustaw Rotation na -45, aby odwrócić obraz, tak aby prawie się lustrzanie odbijał wzdłuż osi Y.
2. Zmień Transparency, aby sprawić, że migotanie wygląda bardziej organicznie.
  1. Kliknij właściwość Transparency, a następnie kliknij przycisk ⋯. Wyświetli się okno sekwencji liczb.
  2. Wybierz trzeci kluczowy punkt, a następnie kliknij przycisk Delete.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programowo wyświetlają ekran pola siłowego, gdy gracz dołącza lub ponownie dołącza do rundy.

Następujący skrypt klienta ReplicatedStorage.ForceFieldClientVisuals zastępuje domyślne wizualizacje ForceField wizualizacjami StarterGui.ForceFieldGui. Gdy gracze wchodzą do gry i pojawiają się w SpawnLocation z właściwością Duration, która jest większa niż 0, domyślne zachowanie w każdej grze polega na zapewnieniu ich awatarowi ochronnej niebieskiej kuli, która chwilowo zapobiega utracie zdrowia.

Skrypt ten zaczyna od nasłuchiwania, kiedy ForceField jest dodawane do postaci, wyłącza domyślne wizualizacje pola siłowego w pierwszej osobie, a następnie włącza obiekt ForceFieldGui ScreenGui. Należy zauważyć, że nie wpływa to na wizualizacje w trzeciej osobie, gdy gracze patrzą na innych graczy, którzy ponownie wchodzą do gry.

Wizualizacje pola siłowego w pierwszej osobie obejmują futurystyczną heksagonalną siatkę na obwodzie ekranu. — Wizualizacje pola siłowego w pierwszej osobie

Wizualizacje pola siłowego w trzeciej osobie obejmują niebieską błyszczącą kulę wokół gracza pojawiającego się w grze. — Wizualizacje pola siłowego w trzeciej osobie

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Jeśli gracz pojawia się w punkcie respawnu z wyłączonym polem siłowym
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Teraz, gdy gracz dołącza lub ponownie dołącza do rundy po respawnie, nowy interfejs użytkownika ekranu pola siłowego wyświetla się zamiast domyślnych wizualizacji pola siłowego w pierwszej osobie ForceField.

Ekran respawnu

Ekran respawnu to element interfejsu użytkownika, który przyciemnia widok, aby poinformować graczy, że zostali wyeliminowani, a serwer jest w trakcie respawnowania ich z powrotem do strefy respawnu. Ten element interfejsu użytkownika jest ważny, ponieważ daje graczom czas na przetworzenie, że zostali wyeliminowani, i zaplanowanie swojego następnego ruchu, zanim ponownie dołączą do aktywnej rundy.

Aby uzyskać więcej informacji na temat niestandardowego zachowania respawnu w przykładowej grze w laserowy tag, zobacz Respawn Characters w programie nauczania dotyczącego skryptów rozgrywki.

Aby dokładnie odtworzyć ekran respawnu w przykładowej grze Laser Tag:

Utwórz centralny baner informacyjny.
1. Wstaw ImageLabel do obiektu OutStateGui ScreenGui.
  1. W oknie Explorer przejdź do usługi StarterGui.
  2. Najedź na jego podrzędny obiekt OutStateGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
  3. Z menu kontekstowego wstaw ImageLabel.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy nowego przycisku w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku kontenera (50% od lewej do prawej rodzica ScreenGui i 50% od góry do dołu rodzica ScreenGui).
  4. Ustaw Size na {0.48, 0},{0.06, 0}, aby poszerzyć etykietę (48% w poziomie i 6% w pionie rodzica ScreenGui).
  5. Ustaw Name na Block.
  6. Ustaw Image na rbxassetid://14304827265, aby obraz był trapezem.
  7. Ustaw ImageColor na 0,0,0, aby trapez był czarny.
  8. Ustaw ImageTransparency na 0.3, aby zmniejszyć przezroczystość etykiety o 30% i dopasować wszystkie czarne elementy interfejsu użytkownika w grze.
3. Wstaw UIAspectRatioConstraint do Block, aby zapewnić, że proporcje etykiety i jej elementów interfejsu użytkownika pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
4. Wybierz nowy ogranicznik, a następnie w oknie Properties ustaw AspectRatio na 13.78.
5. Wstaw TextLabel do Block dla tekstu informacyjnego.
6. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku rodzica etykiety (50% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  4. Ustaw Size na {.85, 0},{0.55, 0}, aby tekst mógł zajmować większość obszaru trapezu (85% w poziomie i 55% w pionie rodzica etykiety).
  5. Ustaw Name na BodyTextLabel.
  6. Ustaw FontFace na Montserrat, aby dopasować do futurystycznej estetyki.
  7. Ustaw Weight na Bold, aby pogrubić czcionkę.
  8. Ustaw Text na Respawning….
  9. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
  10. Włącz TextScaled.
Utwórz nagłówek.
1. Wstaw ImageLabel do Block.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnym środku (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0, 0}, aby ustawić etykietę na górze środka rodzica etykiety (50% od lewej do prawej rodzica etykiety i 0% od góry do dołu rodzica etykiety).
  4. Ustaw Size na {0.46, 0},{0.56, 0}, aby poszerzyć etykietę (46% w poziomie i 56% w pionie rodzica etykiety).
  5. Ustaw Name na Header.
  6. Ustaw Image na rbxassetid://14304826985, aby obraz był wielokierunkowym zanikiem.
  7. Ustaw ImageColor na 245, 46, 46, aby zanik był czerwony, co oznacza, że gracz jest tymczasowo nieaktywny, gdy został wyeliminowany z rundy.
3. Wstaw TextLabel do Header dla tekstu informacyjnego.
4. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku rodzica etykiety (50% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  4. Ustaw Size na {.85, 0},{0.55, 0}, aby tekst mógł zajmować większość obszaru zaniku (85% w poziomie i 55% w pionie rodzica etykiety).
  5. Ustaw Name na HeaderTextLabel.
  6. Ustaw FontFace na Montserrat, aby dopasować do futurystycznej estetyki.
  7. Ustaw Weight na Black, aby pogrubić czcionkę.
  8. Ustaw Text na TAGGED - JESTEŚ NA ZEW!.
  9. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
  10. Włącz TextScaled.
Utwórz zanik wokół krawędzi ekranu.
1. Wstaw ImageLabel do OutStateGui.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  2. Ustaw BackgroundColor3 na 0,0,0, aby ustawić kolor tła etykiety na czarny.
  3. Ustaw BackgroundTransparency na 0.5, aby tło etykiety było w połowie przezroczyste.
  4. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku kontenera (50% od lewej do prawej rodzica ScreenGui i 50% od góry do dołu rodzica ScreenGui).
  5. Ustaw Size na {1, 0},{1, 0}, aby poszerzyć etykietę na cały ekran (100% w poziomie i 100% w pionie rodzica ScreenGui).
  6. Ustaw ZIndex na -1, aby wyświetlić zanik za innymi elementami interfejsu użytkownika.
  7. Ustaw Name na Header.
  8. Ustaw Image na rbxassetid://14309518613, aby obraz był zanikającą krawędzią.
  9. Ustaw ImageTransparency na 0.1, aby zanik był lekko przezroczysty.
Aby poprawić wydajność, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z niestandardową sekwencją przezroczystości. Aby dowiedzieć się więcej o tej technice zaniku, zobacz Modyfikatory wyglądu UI - Gradient.
Odwołaj się do następującego skryptu ReplicatedStorage w przykładowym pliku Laser Tag, który programowo wyświetla ekran respawnu, gdy zdrowie gracza osiąga zero, a oni są w trakcie respawnowania z powrotem do strefy respawnu swojej drużyny.

Następujący skrypt klienta ReplicatedStorage.PlayerStateHandler zawiera funkcje, które wyzwalają różne typy zachowań zgodnie z atrybutem playerState. Wszystkie odpowiedzi na zdarzenia są logicznie grupowane w tym skrypcie, ponieważ wymagają podobnego zachowania włączania lub wyłączania kontroli gracza, ruchu kamery i widoczności warstwy UI.

Gdy zdrowie gracza osiąga zero, ich playerState staje się TaggedOut, co wyzwala funkcję onTaggedOut(). onTaggedOut() natychmiast wyzwala następujące zachowanie:

Gracz nie może się poruszać w arenie.
Gracz nie może poruszać kamerą.
Gracz nie może używać swojego blastera.
StarterGui.OutStateGui staje się wyłącznie włączone.

Gdy gracz respawnuje, ich playerState staje się SelectingBlaster, co wyzwala funkcję onSelectingBlaster(). onSelectingBlaster() następnie wyłącznie włącza StarterGui.PickABlasterGui, co automatycznie wyłącza ekran respawnu. Aby uzyskać więcej informacji na temat tych warunków, zobacz Zarządzaj stanem klienta w programie nauczania dotyczącego skryptów rozgrywki.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Wyłącz wszystkie warstwy UI z wyjątkiem podanej wyjątku
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers zawiera listę gui, które powinny być ustawione wyłącznie.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Włącz kamerę, aby gracze mogli się rozglądać podczas wybierania blastera
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Wyłącz blaster podczas wybierania blastera
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Włącz ruch gracza po wybraniu blastera
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Włącz blaster podczas gry
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Zaplanuj logikę zniszczenia pola siłowego, gdy gracz zaczyna grać
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Wyłącz kontrole podczas wyeliminowania
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Wyłącz blaster podczas wyeliminowania
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Włącz kontrole podczas w lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Ukryj cały HUD podczas w lobby
	setGuiExclusivelyEnabled(nil)

	-- Wyłącz blaster podczas w lobby
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Nieprawidłowy stan gracza ({newPlayerState})`)
	end
end

-- Obsłuż początkowy stan gracza, jeśli jest ustawiony
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Obsłuż przyszłe aktualizacje stanu gracza
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Upewnij się, że zmiany są nadal stosowane po respawnie
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Teraz, gdy zdrowie gracza osiąga zero, ekran respawnu wyświetla się, aż gracz respawnuje z powrotem do swojej strefy respawnu.

Teraz, gdy znasz powszechne GuiObjects dla interfejsu użytkownika na ekranie, spróbuj odtworzyć obiekt RoundResultsGui ScreenGui i wszystkie jego dzieci dla wyświetlania na ekranie, gdy gracze wygrywają lub przegrywają mecz. Możesz użyć przykładowej gry w laserowy tag Laser Tag jako odniesienia lub dostosować wartości, aby spełnić wymagania rozgrywki twojej własnej gry.

Tworzenie obiektów SurfaceGui

Aby wyświetlić interfejs użytkownika na powierzchni części w przestrzeni 3D, który reaguje na logikę skryptową dla każdego indywidualnego gracza, możesz przypiąć obiekt SurfaceGui do części, na której chcesz wyświetlić swój interfejs użytkownika w usłudze ReplicatedStorage. Ta technika zapewnia, że twój interfejs użytkownika i jego logika skryptowa są dostępne zarówno dla serwera, jak i dla klienta każdego gracza.

Obiekty SurfaceGui zawierają wszystkie GuiObjects, które wyświetlają się na powierzchni części w przestrzeni 3D. Przykładowa gra w laserowy tag zawiera tylko jedną instancję obiektu SurfaceGui: wskaźnik chłodzenia, który wyświetla się nad blasterem każdego gracza. Ten obiekt potrzebuje logiki skryptowej dla każdego gracza, ponieważ aktywnie reaguje na wejście każdego indywidualnego gracza i zapewnia wizualne informacje o tym, kiedy mogą ponownie strzelać ze swojego blastera.

Aby stworzyć obiekt SurfaceGui:

W oknie Explorer najedź na usługę ReplicatedStorage, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Z menu kontekstowego wstaw obiekt Part.
Wstaw obiekt ScreenGui do części.
Zmień nazwę SurfaceGui zgodnie z kontekstem jego dziecięcych elementów interfejsu użytkownika.
Powtórz ten proces dla każdego elementu interfejsu użytkownika, który chcesz wyświetlić na powierzchni części w przestrzeni 3D.

Wskaźnik chłodzenia

Wskaźnik chłodzenia to komponent interfejsu użytkownika, który informuje graczy, jak długo muszą czekać, zanim będą mogli ponownie strzelić ze swojego blastera. Ta krótka przerwa zapobiega temu, aby gracze mogli strzelać tak szybko, jak mogą klikać lub naciskać przycisk, co jest nierealistyczne w rozgrywce w laserowy tag.

Aby dokładnie odtworzyć wskaźnik chłodzenia w przykładowej grze Laser Tag:

Utwórz część, aby pomieścić swój obiekt SurfaceGui.
1. W oknie Explorer najedź na Workspace, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
2. Z menu kontekstowego wstaw część block. To jest tymczasowa lokalizacja dla części, abyś mógł wizualizować zmiany w każdym kroku procesu.
Ustaw i zorientuj część wokół pozycji, w której gracz trzymałby swój blaster, a następnie w oknie Properties,
1. Ustaw Transparency na 1, aby część była całkowicie przezroczysta.
2. Ustaw Name na CooldownBarPrefab.
3. Ustaw Size na 0.169, 0.027, 2.537, aby skalować część do rozmiaru około długości blastera.
4. Wyłącz CanCollide i CanQuery.
Wstaw SurfaceGui do CooldownBarPrefab.
Wybierz nowy SurfaceGui, a następnie w oknie Properties,
1. Ustaw Face na Top, aby interfejs użytkownika wyświetlał się w górę.
2. Ustaw LightInfluence i MaxDistance na 0.
3. Ustaw PixelsPerStud na 200.
Utwórz czarny pasek.
1. Wstaw ImageLabel do SurfaceGui.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  3. Ustaw BackgroundColor3 na 0,0,0, aby ustawić kolor tła etykiety na czarny.
  4. Ustaw BackgroundTransparency na 0.4, aby tło etykiety było półprzezroczyste.
  5. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku kontenera (50% od lewej do prawej rodzica SurfaceGui i 50% od góry do dołu rodzica SurfaceGui).
  6. Ustaw Size na {1, 0},{1, 0}, aby poszerzyć etykietę na całą część (100% w poziomie i 100% w pionie rodzica SurfaceGui).
  7. Ustaw Name na Container.
Zaokrągl rogi kontenera.
1. Wstaw obiekt UICorner do Container.
2. Wybierz UICorner, a następnie w oknie Properties ustaw CornerRadius na 0.15, 0, aby lekko zaokrąglić rogi.
Utwórz czerwony pasek.
1. Wstaw ImageLabel do Container.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 1, 0.5, aby ustawić punkt początkowy etykiety w prawym środku (100% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
  3. Ustaw BackgroundColor3 na 172, 13, 13, aby ustawić kolor tła etykiety na ciemnoczerwony.
  4. Ustaw BackgroundTransparency na 0.2, aby tło etykiety było lekko przezroczyste.
  5. Ustaw Name na Bar.
  6. Ustaw Position na {1, 0},{0.5, 0}, aby ustawić etykietę w prawym środku kontenera (100% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  7. Ustaw Size na {0, 0},{1, 0}, aby wydłużyć etykietę do góry rodzica etykiety (0% w poziomie i 100% w pionie rodzica etykiety). Ten krok jest również korzystny dla zachowania tweeningu, które występuje w skryptach w kroku 8.
Zaokrągl rogi etykiety.
1. Wstaw obiekt UICorner do Bar.
2. Wybierz UICorner, a następnie w oknie Properties ustaw CornerRadius na 0.15, 0, aby lekko zaokrąglić rogi.
Przenieś CooldownBarPrefab do ReplicatedStorage.
1. Utwórz strukturę folderów, aby zorganizować swoje obiekty UI. Przykład używa folderu Instances z podrzędnym folderem Guis.
2. Przenieś CooldownBarPrefab do Guis.
Odwołaj się do następujących skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programowo przymocowują wskaźnik chłodzenia do blastera gracza, a następnie animują czerwony pasek po tym, jak gracz strzela ze swojego blastera.

Następujący skrypt klienta ReplicatedStorage.FirstPersonBlasterVisuals obsługuje całą logikę wizualną dla blastera gracza w pierwszej osobie. Wymaga zestawu modułowych skryptów, które współpracują, aby ustawić wizualizacje blastera, które wydają się bardziej realistyczne w rozgrywce w laserowy tag, w tym FirstPersonBlasterVisuals.addCooldownBar i FirstPersonBlasterVisuals.runCooldownBarEffect.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- Dodaj rig w pierwszej osobie
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Dodaj wskaźnik chłodzenia
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- To również niszczy wskaźnik chłodzenia, ponieważ jest przypięty do rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Uruchom efekty wizualne w pierwszej osobie, gdy występuje strzał
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Przypnij rig do kamery, jeśli istnieje
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Zaktualizuj CFrame rig w odniesieniu do pozycji kamery i RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Obsługuje zmiany wizualizacji, gdy typ blastera się zmienia podczas gry
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Obsługuje zmiany wizualizacji, gdy zmienia się stan gracza
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Usuń wizualizacje, gdy gracz wybiera blastera lub jest w lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Dodaj wizualizacje z powrotem, gdy gracz kończy wybierać blastera.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Teraz, gdy gracz strzela ze swojego blastera, wskaźnik chłodzenia animuje się, aby komunikować, kiedy gracz może ponownie strzelać.

Tworzenie obiektów BillboardGui

Aby wyświetlić elementy interfejsu użytkownika w przestrzeni 3D, które reagują na logikę skryptową i zawsze zwracają się w kierunku kamery każdego gracza, niezależnie od kąta widzenia, takich jak nazwy graczy lub znaczniki mapy, możesz stworzyć obiekt BillboardGui jako dziecko BasePart lub Attachment, które istnieje w przestrzeni 3D.

Przykładowa gra w laserowy tag zawiera dwa oddzielne obiekty BillboardGui w usłudze ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Wyświetla różową lub zieloną kółko nad głowami każdego gracza, gdy są aktywni w rundzie.
TaggedOutIndicatorGuiPrefab - Wyświetla się nad głową gracza, gdy zostali wyeliminowani z rundy.

Po utworzeniu obiektu BillboardGui możesz stworzyć i dostosować jego dzieci GuiObjects zgodnie z celem każdego kontenera. Aby to zademonstrować, w kolejnych sekcjach nauczysz się implementować elementy interfejsu użytkownika dla obu typów wskaźników w przykładowej grze w laserowy tag. Możesz dostosować dowolną część procesu, aby spełnić specyfikacje swojej własnej gry.

Aby stworzyć obiekt BillboardGui:

W oknie Explorer najedź na BasePart lub Attachment, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Z menu kontekstowego wstaw obiekt BillboardGui.
Zmień nazwę BillboardGui zgodnie z kontekstem jego dziecięcych elementów interfejsu użytkownika.
Powtórz ten proces dla każdego elementu interfejsu użytkownika, który chcesz kontekstowo wyświetlić nad głowami graczy.

Wskaźnik drużyny

Wskaźnik drużyny to element interfejsu użytkownika, który informuje graczy, do której drużyny należą inni gracze w rundzie, aby mogli łatwo odróżnić swoich sojuszników od członków drużyny wroga. Ta informacja jest ważna, ponieważ rozgrywka w grze strzelance z perspektywy pierwszej osoby wymaga od graczy podejmowania szybkich decyzji strategicznych podczas walki, aby nie zostali wyeliminowani i nie przegrali meczu.

Aby dokładnie odtworzyć wskaźnik drużyny w przykładowej grze Laser Tag:

Wstaw obiekt BillboardGui do tymczasowego rig.
1. Z zakładki Home lub Avatar na pasku narzędzi kliknij Character.
2. Wybierz z dostępnych opcji. Przykład używa typu rig R15, żeńskiego kształtu ciała i awatara Rthro. Rig wyświetla się zarówno w widoku 3D, jak i w oknie Explorer pod nazwą Rig.
3. W oknie Explorer przejdź do podrzędnego obiektu Head rig, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
4. Z menu kontekstowego wstaw BillboardGui.
Wybierz nowy BillboardGui, a następnie w oknie Properties,
1. Ustaw LightInfluence na 0, aby zapobiec wpływowi światła otoczenia na kolor wskaźnika.
2. Ustaw Name na OtherPlayerIndicatorPrefab.
3. Ustaw Size na {0, 10},{0, 10}, aby etykieta była znacznie mniejsza.
4. Ustaw StudsOffsetWorldSpace na 0, 4, 0, aby umieścić ją nad głową rig.
Wstaw obiekt Frame do OtherPlayerIndicatorPrefab.
Wybierz nową ramkę, a następnie w oknie Properties,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy ramki w środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
2. Ustaw BackgroundColor3 na 255, 3, 0, aby ustawić kolor tła ramki na czerwony jako kolor zastępczy.
3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić ramkę w środku kontenera (50% od lewej do prawej rodzica BillboardGui i 50% od góry do dołu rodzica BillboardGui).
4. Ustaw Size na {1, -2},{1, -2}, aby skrócić ramkę do powierzchni BillboardGui.
Wstaw obiekt UICorner do Frame, aby całkowicie zaokrąglić rogi.
Wstaw obiekt UIStroke do Frame, aby obrysować okrąg wskaźnika.
Przenieś OtherPlayerIndicatorPrefab do ReplicatedStorage.
Odwołaj się do następującego skryptu ReplicatedStorage w przykładowym pliku Laser Tag 1A, który programowo wyświetla wskaźnik drużyny dla każdego gracza w aktywnej rundzie, chyba że są w drużynie wroga i są zasłonięci.

Następujący skrypt ReplicatedStorage.OtherPlayerIndicatorGuiSetup uruchamia się, gdy gracze pojawiają się na arenie w aktywnej rundzie. Przypina wskaźnik drużyny, wywołując funkcję addIndicatorToCharacter(), która lokalizuje obiekt Head każdej postaci gracza biorącego udział w rundzie. Jeśli nie mają już wskaźnika drużyny, skrypt klonuje i dodaje interfejs użytkownika otherPlayerIndicatorPrefab do Head postaci, a kolor wskaźnika drużyny ustawia na kolor ich drużyny.

Jeśli inni gracze są w tej samej drużynie, wskaźnik drużyny zawsze się wyświetla, nawet jeśli ukryją się za obiektami w przestrzeni 3D; jeśli inni gracze są w drużynie wroga, wskaźnik drużyny wyświetla się tylko wtedy, gdy nie ma obiektu w przestrzeni 3D, który by ich zasłaniał.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Dodaj wskaźniki tylko do graczy biorących udział w rundzie
		if not otherPlayer.Team then
			return
		end

		-- Unikaj dodawania duplikatów wskaźników, tworząc nowy tylko wtedy, gdy nie istnieje
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- Wskaźnik jest zawsze na górze tylko wtedy, gdy gracz jest przyjazny

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Teraz, gdy gracz jest w aktywnej rundzie, wskaźniki drużyny wyświetlają się nad głowami innych graczy, chyba że są w drużynie wroga i za obiektem.

Wskaźnik wyeliminowania

Wskaźnik wyeliminowania to element interfejsu użytkownika, który informuje graczy, gdy inni gracze nie są już aktywni w rundzie i są w trakcie respawnowania z powrotem do swojej strefy respawnu. Ta informacja jest ważna, ponieważ rozgrywka w grze strzelance z perspektywy pierwszej osoby wymaga od graczy przejścia do następnego celu, gdy tylko wyeliminują gracza, aby nie stali się wrażliwi w arenie, grając w tym samym miejscu zbyt długo.

Aby dokładnie odtworzyć wskaźnik wyeliminowania w przykładowej grze Laser Tag:

Wstaw obiekt BillboardGui do tymczasowego rig, aby móc wizualizować zmiany w każdym kroku procesu.
1. Z zakładki Home lub Avatar na pasku narzędzi kliknij Character.
2. Wybierz z dostępnych opcji. Przykład używa typu rig R15, męskiego kształtu ciała i awatara Rthro. Rig wyświetla się zarówno w widoku 3D, jak i w oknie Explorer pod nazwą Rig.
3. W oknie Explorer przejdź do podrzędnego obiektu Head rig, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
4. Z menu kontekstowego wstaw BillboardGui.
  
  1. Wybierz nowy BillboardGui, a następnie w oknie Właściwości,
5. Ustaw LightInfluence na 0, aby zapobiec wpływowi światła otoczenia na kolor wskaźnika.
6. Ustaw Name na TaggedOutIndicatorGuiPrefab.
7. Ustaw Size na {3, 0},{0.5, 0}, aby poszerzyć przestrzeń na etykietę.
8. Ustaw StudsOffset na 0, 3.25, 0, aby umieścić go nad głową gracza.
Wstaw obiekt ImageLabel do TaggedOutIndicatorGuiPrefab.
Wybierz nową etykietę, a następnie w oknie Właściwości,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
3. Ustaw Name na Frame.
4. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku jej kontenera (50% od lewej do prawej rodzica BillboardGui i 50% od góry do dołu rodzica BillboardGui).
5. Ustaw Size na {1, 0},{1, 0}, aby poszerzyć etykietę na całe BillboardGui (100% w poziomie i 100% w pionie rodzica BillboardGui).
6. Ustaw Image na rbxassetid://14304826985, aby uczynić obraz wielokierunkowym zanikiem.
7. Ustaw ImageColor na 245, 46, 46, aby zabarwić etykietę na czerwono.
Aby poprawić wydajność, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z niestandardową sekwencją przezroczystości. Aby dowiedzieć się więcej o tej technice zanikania, zobacz UI Appearance Modifiers - Gradient.
Wstaw obiekt TextLabel do Frame.
Wybierz nową etykietę, a następnie w oknie Właściwości,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety w jej środku (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
3. Ustaw Name na BodyTextLabel.
4. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić etykietę w środku jej kontenera (50% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
5. Ustaw Size na {0.85, 0},{0.7, 0}, aby tekst zajmował większość obszaru zanikania (85% w poziomie i 70% w pionie rodzica etykiety obrazu).
6. Ustaw FontFace na Montserrat, aby pasował do futurystycznej estetyki.
7. Ustaw Weight na Bold, aby pogrubić czcionkę.
8. Ustaw Text na TAGGED.
9. Włącz TextScaled.
Przenieś TaggedOutIndicatorGuiPrefab do ReplicatedStorage.
Odwołaj się do następujących skryptów ServerScriptService w przykładowym pliku Laser Tag 1A, które programowo wyświetlają wskaźnik tagged out, gdy gracz respawnuje się z powrotem do strefy spawnu swojej drużyny.

Następujący skrypt serwera ServerScriptService.SetupHumanoid uruchamia się, gdy gracz ładuje grę. Zapewnia, że za każdym razem, gdy postać gracza jest dodawana do modelu danych, wywoływana jest funkcja setupHumanoidAsync z ich Humanoid.

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Wywołaj onCharacterAdded, jeśli gracz ma już postać
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Wywołaj onCharacterAdded dla wszystkich przyszłych spawnow postaci tego gracza
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Wywołaj onPlayerAdded dla wszystkich graczy już w grze
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Wywołaj onPlayerAdded dla wszystkich przyszłych graczy
Players.PlayerAdded:Connect(onPlayerAdded)

Teraz, gdy zdrowie gracza osiągnie zero, wskaźnik tagged out wyświetla się nad ich głową, aż do respawnu.

Gratulacje z ukończenia programu nauczania dotyczącego projektowania interfejsu użytkownika! Teraz, gdy masz doświadczenie w tworzeniu stylu artystycznego, projektowaniu układów i wdrażaniu swoich projektów w Studio od początku do końca, możesz rozszerzyć swój projekt o nowy interfejs użytkownika i funkcjonalność lub śledzić dodatkowe programy nauczania, takie jak Gameplay Scripting Curriculum, który uczy o ogólnej organizacji i kluczowych szczegółach implementacji przykładowej gry w laser tag. Miłego tworzenia!