Wdrażanie projektów w Studio | Dokumentacja

Wdrażanie projektów to proces tworzenia prototypów w Studio przy użyciu zarówno wbudowanych, jak i niestandardowych elementów UI z odpowiednimi skryptami, które wyzwalają UI kontekstowo. Ten ekscytujący krok w samouczku jest momentem, w którym możesz zobaczyć wszystkie swoje projekty i ciężką pracę połączyć w spójną całość przepływów pracy, które są gotowe do interakcji z graczami.

Używając pliku wykładniczego doświadczenia laserowego sample laser tag experience .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 odtworzyć komponenty UI doświadczenia laserowego.
Emulacji różnych urządzeń bezpośrednio w Studio, aby zobaczyć, jak wyświetla się Twoje UI 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 przestudiowaniu technik w tej sekcji możesz zastosować je w swoich projektach, aby tworzyć ekscytujące komponenty UI, które pomogą graczom nawigować w tym, co mogą zrobić w Twoich doświadczeniach.

Instrukcje w tej sekcji samouczka pokazują, jak dokładnie odtworzyć komponenty UI przy użyciu biblioteki zasobów projektowania UI. Proces ten zajmuje około 90 minut lub mniej od początku do końca. Jeśli nie chcesz korzystać z podanych wartości, możesz dostosować każdy element UI do specyfikacji swojego doświadczenia lub użyć samego wzoru przez resztę samouczka.

Uzyskaj bibliotekę zasobów

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

**Ikona MultiBlaster**
rbxassetid://14309094777

**Ikona SingleBlaster**
rbxassetid://14309094641

**Ikona Różowego Zespołu**
rbxassetid://14309678581

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

**Ikona Zielonego Zespołu**
rbxassetid://14309678701

**Wyblaknięcie**
rbxassetid://14304826876

**Wyblaknięcie Wielokierunkowe**
rbxassetid://14304827147

**Ikona Przyciski Blast - Domyślna**
rbxassetid://18308375067

**Ikona Przyciski Blast - Naciśnięta**
rbxassetid://18308372597

**Ikona Celownika**
rbxassetid://14400935532

Ikona Markera Trafienia
rbxassetid://14401148777

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

**Wyblaknięcie Granicy**
rbxassetid://14309518632

Aby przenieść bibliotekę zasobów z twojego ekwipunku do twojego doświadczenia:

Dodaj bibliotekę zasobów do swojego ekwipunku.
1. Przejdź do strony szczegółów biblioteki zasobów w Creator Store.
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 Home, a następnie kliknij przycisk Toolbox. Otwiera się okno Toolbox.
W oknie Toolbox kliknij zakładkę Inventory. Wyświetlany jest sort Moje Modele.
Kliknij menu rozwijane, a następnie wybierz sortowanie Moje Pakiety.
Kliknij kafelek Ostateczne Komponenty UI, a następnie w oknie Explorer wybierz Ukończone Komponenty, a następnie przeciągnij je do usługi StarterGui. Możesz teraz włączyć dowolny z finalnych komponentów, aby odnosił się do ich projektu.

Emuluj urządzenia

Emulator urządzeń w Studio pozwala testować, jak gracze będą widzieć i wchodzić w interakcję z twoim UI na różnych urządzeniach. To narzędzie jest kluczową częścią procesu wdrażania, ponieważ proporcje ekranu w twoim widoku w Studio niekoniecznie odzwierciedlają proporcje ekranów, na których gracze uzyskują dostęp do twojego doświadczenia, i 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:

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

Tworzenie obiektów ScreenGui

Aby wyświetlać elementy UI na ekranie każdego gracza, możesz stworzyć obiekt ScreenGui w usłudze StarterGui. Obiekty ScreenGui to główne kontenery dla UI na ekranie, a usługa StarterGui kopiuje swoje zawartości do każdego kontenera PlayerGui gracza, gdy wchodzi on do doświadczenia.

Możesz tworzyć wiele obiektów ScreenGui, aby zorganizować i wyświetlić grupy elementów UI kontekstowo w trakcie rozgrywki. Na przykład, przykładowe doświadczenie laserowe zawiera pięć oddzielnych obiektów ScreenGui, które są początkowo wyłączone, dopóki gracze nie spełnią różnych warunków w trakcie głównego przepływu użytkownika doświadczenia:

HUDGui - Wyświetla kluczowe informacje dotyczące rozgrywki doświadczenia, gdy gracze są aktywni w rundzie, takie jak cel i całkowite punkty każdej drużyny.
PickABlasterGui - Wyświetla wszystkie dostępne opcje miotaczy, gdy gracze rozpoczynają lub dołączają ponownie do rundy.
ForceFieldGui - Wyświetla sześciokątną siatkę, gdy gracze wybierają miotacz i 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, która drużyna wygrała rundę.

Po stworzeniu obiektu ScreenGui możesz tworzyć i dostosowywać jego elementy podrzędne GuiObjects zgodnie z przeznaczeniem każdego kontenera. Aby zademonstrować, w bezpośrednich sekcjach, które następują, nauczysz się, jak wdrożyć elementy UI dotyczące trzech kategorii informacji, które gracze muszą znać, aby odnieść sukces w przykładzie doświadczenia laserowego. Możesz dostosować dowolną część procesu do specyfikacji własnego doświadczenia.

Aby stworzyć obiekt ScreenGui:

W oknie Explorer najedź na usługę StarterGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Wstaw ScreenGui.
Zmień nazwę ScreenGui w zależności od kontekstu jego elementów UI jako dzieci.
Powtórz ten proces dla każdej grupy elementów UI, które chcesz wyświetlić na ekranie każdego gracza.

UI celu

W oparciu o najlepsze praktyki dotyczące hierarchii wizualnej z Wireframe Your Layouts, ta sekcja uczy, jak wdrożyć wszystkie elementy UI na ekranie związane z celem doświadczenia. 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, wzór zapewnia komponent UI celu, który gracze mogą odnosić się do, aby wiedzieć, co muszą robić, 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 promtp header'a. Aby uzyskać przegląd wszystkich skryptów klienta i serwera, które współpracują, aby śledzić punkty, zobacz Śledzenie punktów w programie nauczania dotyczącego skryptowania rozgrywki.

Aby dokładnie odtworzyć cel UI w próbce Laser Tag:

Stwórz pojemnik na cały komponent.
1. Wstaw Frame do obiektu HUDGui ScreenGui.
  1. W oknie Explorer przejdź do usługi StarterGui.
  2. Najedź na obiekt HUDGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
  3. Z menu kontekstowego wstaw Frame.
2. Wybierz nowy Frame, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0, aby ustawić punkt początkowy ramki w górnym środku (50% od lewego do prawego, 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 lewego do prawego ekranu, i 3% od góry do dołu ekranu, aby pozostawić mały margines).
  4. Ustaw Size na {0.5, 0},{0.13, 0}, aby elementy ramki zajmowały dużą część górnej części ekranu przyciągając uwagę graczy (50% poziomo i 13% pionowo).
  5. Ustaw Name na Cel.
3. (Opcjonalne) Wstaw UIAspectRatioConstraint do Cel, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór ustawia właściwość UIAspectRatioConstraint.AspectRatio na 7.
Stwórz pojemnik na obiekty promptu celu.
1. Wstaw Frame do Cel.
2. Wybierz nowy Frame, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0, aby ustawić punkt początkowy ramki w górnym środku siebie (50% od lewego do prawego, 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 lewego do prawego, i 0% od góry do dołu rodzica).
  4. Ustaw Size na {1, 0},{0.67, 0}, aby komponenty UI selekcji zajęły ponad połowę kontenera z góry na dół (100% poziomo i 67% pionowo, w stosunku do ramki rodzica).
  5. Ustaw Name na ObjectiveDisplay.
Stwórz elementy tytułowe.
1. Wstaw ImageLabel do ObjectiveDisplay.
2. Wybierz ImageLabel, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy etykiety w dolnym środku (50% od lewego do prawego, 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órnej górnej części ramki (50% od lewego do prawego rodzica, i 34% od góry do dołu rodzica).
  5. Ustaw Size na {0.46, 0},{0.34, 0}, aby powiększyć obszar prompt do prawie połowy ramki (46% poziomo i 34% pionowo, w stosunku do rodzica).
  6. Ustaw Name na Header.
  7. Ustaw Image na rbxassetid://14304828123, aby wyświetlić trapez.
  8. Ustaw ImageTransparency na 0.15, aby uczynić nagłówek półprzezroczystym.
3. (Opcjonalne) Wstaw UIAspectRatioConstraint do ImageLabel, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór 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 Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt etykiety w środku samej siebie (50% od lewego do prawego, i 50% od górnego do dolnego).
  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 przesunąć etykietę do środka etykiety rodzica (50% od lewego do prawego, i 50% od górnego do dolnego).
  4. Ustaw Size na {0.62, 0},{0.55, 0}, aby powiększyć obszar tekstu do ponad połowy rodzica (62% poziomo i 55% pionowo).
  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.
Stwórz elementy promptu.
1. Wstaw ImageLabel do ObjectiveDisplay.
2. Wybierz ImageLabel, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt etykiety w dolnym środku (50% od lewego do prawego, i 100% od górnego do dolnego).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw Position na {0.5, 0},{1, 0}, aby przesunąć etykietę do dolnego środka jej rodzica (50% od lewego do prawego rodzica, i 100% od góry do dołu rodzica).
  4. Ustaw Size na {0.89, 0},{0.66, 0}, aby powiększyć przestrzeń tekstu do prawie pełnej szerokości rodzica (89% poziomo i 66% pionowo, w stosunku do rodzica).
  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 przyciemniony kolor zdjęcia na czarny.
  8. Ustaw ImageTransparency na 0.3, aby uczynić nagłówek półprzezroczystym.
3. (Opcjonalne) Wstaw UIAspectRatioConstraint do ImageLabel, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór ustawia właściwość UIAspectRatioConstraint.AspectRatio na 13.781.
4. Wstaw TextLabel do Body, aby wyświetlić prompt.
5. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt etykiety w środku samej siebie (50% od lewego do prawego, i 50% od górnego do dolnego).
  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 przesunąć etykietę do środka etykiety rodzica (50% od lewego do prawego rodzica, i 50% od górnego do dolnego).
  4. Ustaw Size na {0.85, 0},{0.39, 0}, aby powiększyć obszar tekstu do ponad połowy etykiety rodzica (85% poziomo i 39% pionowo, w stosunku do etykiety rodzica).
  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 Taguj przeciwników, aby zdobywać punkty! Pierwsza drużyna do %d punktów wygrywa..
  10. Włącz TextScaled.
Stwórz pojemnik dla liczników punktów drużynowych.
1. Wstaw Frame do Cel.
2. Wybierz nowy Frame, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt etykiety w dolnym środku ramki (50% od lewego do prawego ramki, i 100% od górnej do dolnej).
  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 lewego do prawego rodzica, i 100% od góry do dołu rodzica).
  4. Ustaw Size na {0.44, 0},{0.27, 0}, aby komponenty UI selekcji zajmowały mniej niż połowę kontenera od lewego do prawego (44% poziomo i 27% pionowo, w stosunku do rodzica).
  5. Ustaw Name na TeamPointCounter.
Stwórz padding dla liczników drużynowych.
1. Wstaw obiekt UIListLayout do ramki z krok 5.
2. Wybierz obiekt UIListLayout, a następnie w oknie Properties,
  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 był wyświetlany obok siebie.
  3. Ustaw HorizontalAlignment na Center, aby każdy licznik drużynowy był wyśrodkowany nawzajem.
Stwórz elementy licznika drużyny zielonej.
1. Wstaw ImageLabel do TeamPointCounter.
2. Wybierz element ImageLabel, a następnie w oknie Properties,
  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 rodzica (50% od lewego do prawego, i 100% od góry do dołu rodzica).
  3. Ustaw Size na {0.5, 0},{1, 0}, aby powiększyć etykietę do połowy szerokości rodzica (50% poziomo i 100% pionowo, w stosunku do rodzica).
  4. Ustaw Name na TeamACounter.
  5. Ustaw Image na rbxassetid://14304826831, aby wyświetlić wyblaknięcie kierunkowe.
  6. Ustaw ImageColor3 na 88, 218, 171, aby przyciemnić obraz na miętowy zielony.
3. Skonfiguruj niestandardowy atrybut, aby śledzić, że ta etykieta dotyczy drużyny zielonej.
  1. W oknie Properties przejdź do sekcji Attributes, a następnie kliknij ikonę plusa. Pojawi się okno dialogowe.
  2. W polu Name wpisz teamColor.
  3. W menu rozwijanym Type wybierz BrickColor.
  4. Kliknij przycisk Zapisz.
  5. Ustaw nowy atrybut teamColor na Mint.
4. Wstaw TextLabel do TeamACounter, aby wyświetlić prompt.
5. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 1, 0.5, aby ustawić nowy punkt etykiety w prawym środku (100% od lewego do prawego 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 przesunąć etykietę w prawo rodzica (95% od lewego do prawego rodzica, i 50% od góry do dołu rodzica).
  4. Ustaw Size na {0.85, 0},{0.39, 0}, aby powiększyć obszar tekstu do ponad połowy etykiety rodzica (85% poziomo i 39% pionowo, w stosunku do etykiety rodzica).
  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 Properties ustaw Color na 8, 78, 52, aby obrysować myślnik ciemnozielonym obramowaniem.
Stwórz elementy licznika drużyny różowej.
1. Duplikuj TeamAICounter i jego dzieci.
2. Wybierz duplikat TeamACounter, a następnie w oknie Properties,
  1. Ustaw Name na TeamBCounter.
  2. Ustaw Image na rbxassetid://14305849451, aby wyświetlić wyblaknięcie kierunkowe w przeciwnym kierunku.
  3. Ustaw ImageColor3 na 255, 170, 255, aby przyciemnić obraz na kolor carnation różowy.
  4. Ustaw atrybut teamColor na Carnation Pink.
3. Wybierz duplikat etykiety TextLabel dziecko TeamBCounter, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0, 0.5, aby ustawić nowy punkt etykiety w lewym środku (0% od lewego do prawego etykiety, i 50% od góry do dołu etykiety).
  2. Ustaw Position na {0.05, 0},{0.5, 0}, aby przesunąć etykietę w lewo rodzica (5% od lewego do prawego rodzica, i 50% od góry do dołu rodzica).
  3. Ustaw TextXAlignment na Left.
4. Wybierz duplikat UIStroke dziecko TeamBCounter, a następnie w oknie Properties ustaw Color na 158, 18, 94, aby obrysować myślnik ciemnoróżowym obramowaniem.
Odwołaj się do następujących skryptów w ReplicatedStorage w przykładowym pliku miejsca Laser Tag, które programowo aktualizują prompt celu i śledzą punkty drużyn.

Następujący skrypt wymaga zestawu modułowych skryptów, które współpracują ze sobą, aby skonfigurować główny Wyświetlacz na Ekranie (HUD), w tym setObjective i startSyncingTeamPoints. Po tym, jak gracz dołączy do rundy i wybierze swój miotacz, skrypt ten 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, po tym, jak gracz wybierze swój miotacz, UI celu wyświetla się na górze jego ekranu i śledzi punkty każdej drużyny.

UI miotacza

W oparciu o najlepsze praktyki dotyczące hierarchii wizualnej z Wireframe Your Layouts, ta sekcja uczy, jak wdrożyć wszystkie elementy UI na ekranie związane z miotaczem gracza. Ta grupa elementów UI zajmuje większość przestrzeni ekranu w pobliżu środka ekranu, ponieważ działa jako punkt skupienia, aby przyciągnąć uwagę graczy do akcji w przestrzeni 3D, a także ma najważniejsze znaczenie dla grania w grę.

Celownik

Celownik to element UI, który informuje graczy, gdzie będą mieli wpływ, gdy wystrzelą swoją broń. Ten element UI jest kluczowym wymaganiem rozgrywki dla doświadczeń FPS, ponieważ gracze muszą dokładnie celować swoją bronią i eliminować członków drużyny przeciwnika.

Jak w większości innych doświadczeń w gatunku FPS, w przykładowym doświadczeniu laserowym, celownik jest umieszczony w centrum ekranu, tak aby gracze mieli coś statycznego do skupienia podczas poruszania się w przestrzeni 3D. Oprócz zmniejszenia choroby lokomocyjnej, to umiejscowienie pozwala, aby celownik był dostrzegalny, a także stapiał się z ogólnym otoczeniem.

Aby dokładnie odtworzyć celownik w przykładowym doświadczeniu Laser Tag:

Wstaw ImageLabel do obiektu HUDGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź na obiekt HUDGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageLabel.
Wybierz nowy ImageLabel, a następnie w oknie Properties,
1. Ustaw Image na rbxassetid://14400935446.
2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt etykiety w środku etykiety (50% od lewego do prawego etykiety, i 50% od górnego do dolnego etykiety).
3. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
4. Ustaw Name na Celownik.
5. Ustaw Position na {0.5,0},{0.5,0} aby ustawić etykietę w środku ekranu.
6. Ustaw ScaleType na Fit, aby obraz pasował do kontenera i nie rozciągał się na różnych rozmiarach ekranów.
(Opcjonalne) Wstaw UIAspectRatioConstraint do Celownik, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór ustawia właściwość UIAspectRatioConstraint.AspectRatio na 0.895.

Marker trafienia

Marker trafienia to element UI, który wyświetla się tylko wtedy, gdy strzał ma wpływ na innego gracza z drużyny przeciwnika. Podobnie jak celownik, ten element UI jest kluczowym wymaganiem rozgrywki dla doświadczeń FPS, ponieważ zapewnia wizualną informację, kiedy gracze odnoszą sukces w eliminowaniu swoich przeciwników.

Aby dokładnie odtworzyć marker trafienia w przykładowym doświadczeniu Laser Tag:

Wstaw ImageLabel do obiektu Crosshair ImageLabel.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź na obiekt Crosshair, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw ImageLabel.
Wybierz nowy ImageLabel, a następnie w oknie Properties,
1. Ustaw Image na rbxassetid://14401148736, aby wyświetlić prostokątny oznaczający trafienie.
2. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt 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 Marker trafienia.
6. Ustaw Size na {0.6, 0},{0.06, 0}, aby zmniejszyć wielkość prostokątów wokół środka celownika.
7. Ustaw ImageTransparency na 1, aby marker trafienia był całkowicie przezroczysty. Skrypty w następnym kroku zmieniają przejrzystość z powrotem na 0 za każdym razem, gdy strzał gracza ma wpływ na innego gracza z drużyny przeciwnej.
Odwołaj się do następujących skryptów w ReplicatedStorage w przykładowym pliku miejsca Laser Tag, które programowo wyświetlają marker trafienia, gdy strzał ma wpływ na gracza z drużyny przeciwnej.

Następujący skrypt wymaga zestawu modułowych skryptów, które współpracują ze sobą, aby skonfigurować główny Wyświetlacz na Ekranie (HUD), w tym setupHitmarker. Po tym, jak gracz dołączy do rundy i wybierze swój miotacz, skrypt ten 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 strzela swoją bronią i strzał ma wpływ na drugiego gracza, znacznik trafienia chwilowo wyświetla się.

Selekcja miotacza

Selekcja miotacza to komponent UI, którego gracze używają do wyboru rodzaju miotacza przed przystąpieniem lub ponownym przystąpieniem do rundy. Przykładowe doświadczenie laserowe zapewnia dwa rodzaje miotaczy: jeden, który produkuje kilka wiązek z szerokim, poziomym rozrzutem, oraz drugi, który produkuje pojedynczą wiązkę. Typ miotacza, który gracz wybiera, wpływa na strategię podczas rundy, co czyni ten komponent UI istotnym krokiem w całym doświadczeniu.

Następujące kroki szczegółowo opisują, jak stworzyć kilka pojemników dla różnych grup elementów UI, nagłówka z promptem, przycisków nawigacji i wyboru, a także prefabrykatu przycisku miotacza. Logika skryptowa dla ogólnego komponentu wypełnia różne cechy wizualne w prefabrykacie przycisku miotacza zgodnie z instancjami Configuration, które reprezentują każdy typ miotacza.

To ustawienie pozwala na tworzenie dodatkowych instancji Configuration dla większej liczby typów miotaczy, które automatycznie będą poprawnie wyświetlane w selekcji miotacza, bez konieczności tworzenia indywidualnych przycisków w StarterGui.PickABlasterGui.

Aby dokładnie odtworzyć selektor miotacza w przykładowym doświadczeniu Laser Tag:

Stwórz pojemnik dla całego komponentu.
1. Wstaw Frame do obiektu PickABlaster ScreenGui.
  1. W oknie Explorer przejdź do usługi StarterGui.
  2. Najedź na obiekt PickABlaster, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
  3. Z menu kontekstowego wstaw Frame.
2. Wybierz nowy frame, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy ramki w dolnym środku (50% od lewego do prawego, i 100% od góry do dołu).
  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 lewego do prawego ekranu, i 92.4% od góry do dołu ekranu).
  4. Ustaw Size na {0.8, 0},{0.25, 0}, aby komponenty UI selekcji miotacza zajmowały dużą część ekranu, aby przyciągnąć uwagę graczy (80% poziomo i 25% pionowo).
  5. Ustaw Name na Component.
3. (Opcjonalne) Wstaw UIAspectRatioConstraint do Component, aby zapewnić, że proporcje ramki i jej elementy UI pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór ustawia właściwość UIAspectRatioConstraint.AspectRatio na 5.
Stwórz pojemnik, aby pomieścić grupy elementów UI.
1. Wstaw Frame do Component.
2. Wybierz nowy frame, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy ramki w środku samej siebie (50% od lewego do prawego, i 50% od górnego do dolnego).
  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 lewego do prawego rodzica, i 37.5% od góry do dołu).
  4. Ustaw Size na {1, 0},{0.75, 0}, aby komponenty UI selekcji zajmowały 3/4 kontenera (100% poziomo i 75% pionowo, w stosunku do rodzica).
  5. Ustaw Name na SelectionFrame.
Stwórz prompt dla selektora miotacza.
1. Wstaw ImageLabel do SelectionFrame.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt etykiety w dolnym środku (50% od lewego do prawego, i 100% od góry do dołu).
  2. Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
  3. Ustaw LayoutOrder на -1.
  4. Ustaw Position na {0.5, 0},{0.22, 0}, aby ustawić etykietę blisko górnej górnej części ramki (50% od lewego do prawego rodzica, i 22% od góry do dołu).
  5. Ustaw Size na {0.45, 0},{0.22, 0}, aby powiększyć obszar promptu do prawie połowy ramki (45% poziomo i 22% pionowo, w stosunku do rodzica).
  6. Ustaw Name na Header.
  7. Ustaw Image na rbxassetid://14304828123, aby wyświetlić trapez.
  8. Ustaw ImageTransparency na 0.15, aby uczynić nagłówek półprzezroczystym.
3. (Opcjonalne) Wstaw UIAspectRatioConstraint do etykiety, aby zapewnić, że proporcje etykiety pozostaną takie same, niezależnie od rozmiaru ekranu gracza. Wzór ustawia właściwość UIAspectRatioConstraint.AspectRatio na 13.78.
4. Wstaw TextLabel do Header, aby wyświetlić prompt.
5. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić nowy punkt etykiety w środku samej siebie (50% od lewego do prawego, i 50% od górnego do dolnego).
  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 przesunąć etykietę do środka etykiety rodzica (50% od lewego do prawego, i 50% od górnego do dolnego).
  4. Ustaw Size na {0.6, 0},{0.55, 0}, aby powiększyć obszar tekstu do ponad połowy etykiety rodzica (60% poziomo i 55% pionowo, w stosunku do rodzica).
  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 MIOTACZ.
  9. Włącz TextScaled.
Stwórz kontener dla kontenera przycisków miotacza 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.
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).
Ustaw BackgroundColor na 0, 0, 0, aby etykieta była czarna.
Ustaw BackgroundTransparency na 0.3, aby zmniejszyć przezroczystość etykiety o 30% i dopasować wszystkie czarne elementy interfejsu użytkownika w doświadczeniu.
Ustaw Position na {0.5, 0},{1, 0}, aby ustawić etykietę w dolnym środku ramki (50% od lewej do prawej ramki rodzica i 100% od góry do dołu ramki rodzica).
Ustaw Size na {1, 0},{0.77, 0}, aby poszerzyć obszar etykiety do przestrzeni poniżej zapytania (100% poziomo i 77% pionowo ramki rodzica).

Zaokrągl corners kontenera.
1. Wstaw obiekt UICorner do etykiety.
2. Wybierz nowy obiekt zaokrąglający, a następnie w oknie Properties ustaw CornerRadius na 0.075, 0, aby zaokrąglić rogi.
Stwórz kontener dla przycisków blast.
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 swojej rodzicielskiej etykiety (50% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  4. Ustaw Size na {0.85, 0},{0.77, 0}, aby poszerzyć obszar ramki do większości etykiety (85% poziomo i 77% pionowo ramki rodzica).
  5. Ustaw Name na Container.
Stwórz odstęp dla wszystkich przyszłych przycisków blast.
1. Wstaw obiekt UIListLayout do ramki z kroku 5.
2. Wybierz nowy obiekt layoutu, 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 siebie w środku.
Stwórz przycisk nawigacyjny po lewej stronie.
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ć wizualne sprzężenie zwrotne podczas najeżdżania, że przycisk jest wybieralny.
  4. Ustaw Position na {0.02, 0},{0.5, 0}, aby zapewnić odstęp po lewej stronie przycisku od pojemnika rodzica (2% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  5. Ustaw Size na {0.04, 0},{0.33, 0}, aby przycisk wyboru był znacznie mniejszy niż przyciski blast (4% poziomo i 33% pionowo ramki rodzica).
  6. Ustaw Name na NavigationButtonLeft.
3. Zaokrągl corners przycisku.
  1. Wstaw obiekt UICorner do przycisku.
  2. Wybierz nowy obiekt zaokrąglający, 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 rodzica przycisku (45% od lewej do prawej rodzica przycisku i 50% od góry do dołu rodzica przycisku). Ta wartość nie jest w środku, ponieważ strzałka nie wizualnie wygląda, 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 zapytania (80% poziomo i 80% pionowo ramki rodzica).
  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.
Stwórz przycisk nawigacyjny po prawej stronie.
1. Duplikuj NavigationButtonLeft.
2. Wybierz skopiowany 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 pojemnika rodzica (98% od lewej do prawej rodzica etykiety i 50% od góry do dołu rodzica etykiety).
  3. Ustaw Name na NavigationButtonRight.
3. Wybierz dziecko obiektu ImageLabel.
  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 rodzica przycisku (55% od lewej do prawej rodzica przycisku i 50% od góry do dołu rodzica przycisku). Ta wartość nie jest w środku, ponieważ strzałka nie wizualnie wygląda, jakby była w środku przycisku przy {0.5, 0},{0.5, 0}.
Stwórz przycisk SELECT.
1. Wstaw obiekt ImageButton do Component. Zauważ, jak ten proces trzyma przycisk wyboru oddzielnie od SelectionFrame, aby można było 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ć wizualne sprzężenie zwrotne podczas najeżdżania, że przycisk jest wybieralny.
  4. Ustaw Position na {0.5, 0},{0.99, 0}, aby ustawić przycisk blisko dolnego środka swojego pojemnika (50% od lewej do prawej rodzica ramki i 99% od góry do dołu rodzica ramki).
  5. Ustaw Size na {0.17, 0},{0.18, 0}, aby wydłużyć przycisk pod przyciskami blast (17% poziomo i 18% pionowo ramki rodzica).
  6. Ustaw Name na SelectButton.
3. Zaokrągl corners przycisku.
  1. Wstaw obiekt UICorner do przycisku.
  2. Wybierz nowy obiekt zaokrąglający, 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 rodzica przycisku i 50% od góry do dołu rodzica przycisku).
  4. Ustaw Size na {0.9, 0},{0.55, 0}, aby poszerzyć przestrzeń tekstową do prawie całej szerokości rodzicielskiej etykiety (90% poziomo i 55% pionowo rodzica etykiety).
  5. Ustaw Name na SelectTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasować do futurystycznego stylu.
  7. Ustaw Weight na Medium, aby pogrubić czcionkę.
  8. Ustaw Text na SELECT.
  9. Włącz TextScaled.
Stwórz prefabrykowany przycisk blast.
1. W usłudze ReplicatedStorage stwórz strukturę folderów, aby zorganizować swoje obiekty interfejsu użytkownika. Przykład używa folderu Instances z dzieckiem 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ć wizualne sprzężenie zwrotne, że przycisk nie jest w fokusie. Skrypty w kroku 12 zapewniają programatyczne sprzężenie zwrotne, 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 UIAspectRatioConstraint do BlasterButtonPrefab, aby upewnić się, że proporcje przycisku pozostaną takie same w obrębie komponentu, niezależnie od rozmiaru ekranu gracza.
5. Zaokrągl corners 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ślny identyfikator zasobu w atrybucie Image. Skrypty w kroku 7 programatycznie wstawiają portret gracza do etykiety obrazu.
  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 rodzica przycisku (52% od lewej do prawej rodzica przycisku i 49.7% od góry do dołu rodzica przycisku). Ta wartość nie jest w środku, ponieważ blaster nie wizualnie wygląda na to, 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 przyciskiem (120% poziomo i 90% pionowo rodzica przycisku).
  6. Ustaw ScaleType na Fit.
Zreferuj poniższe skrypty ReplicatedStorage w pliku miejsca Laser Tag, które programatycznie wyświetlają przyciski dla każdego blastera, skalują przyciski, gdy gracz wybiera przycisk, który nie jest w fokusie, oraz przypisują wybór blastera gracza do ich awatara.

Następujący skrypt wymaga zestawu skryptów, które współpracują, aby stworzyć selektor blastera. Kiedy gracz dołącza do doświadczenia lub ponownie się odradza po osiągnięciu zerowego zdrowia, ten skrypt aktywuje wszystkie elementy interfejsu użytkownika 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, za każdym razem, gdy gracz dołącza do doświadczenia lub ponownie się odradza po osiągnięciu zerowego zdrowia, interfejs użytkownika selektora blastera jest wyświetlany, mogą dokonać wyboru, a każdy przycisk działa zgodnie z oczekiwaniami.

Przyciski blast

Przycisk blast to komponent interfejsu użytkownika, którego gracze używają do strzelania z blastera, jeśli uzyskują dostęp do doświadczenia przez urządzenie mobilne lub tablet. Przykładowe doświadczenie laser tag wykorzystuje przycisk blast z ikoną przedstawiającą zarówno celownik, jak i strzał, aby komunikować funkcję przycisku bez tekstu.

Aby dokładnie odtworzyć przycisk blast w przykładowym doświadczeniu Laser Tag:

Wstaw obiekt ImageButton do obiektu HUDGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź kursorem na dziecko obiektu HUDGui, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
3. Z menu kontekstowego wstaw obiekt ImageButton.
W widoku 3D, przesuń przycisk w miejsce, gdzie kciuk gracza naturalnie odpoczywa, 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 blast.
2. Ustaw PressedImage na rbxassetid://18308372558, aby wyświetlać odwróconą wersję ikony przycisku blast, kiedy 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, tak aby pasowała do wszystkich czarnych elementów interfejsu użytkownika w doświadczeniu.
Wstaw UIAspectRatioConstraint do BlastButton, aby upewnić się, że proporcje przycisku pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
Zreferuj poniższe skrypty ReplicatedStorage w pliku miejsca Laser Tag, które programatycznie wyświetlają przycisk blast, gdy gracz używa wejścia dotykowego na urządzeniu akceptującym kontrolki dotykowe.

Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny interfejs wyświetlania (HUD), w tym setupTouchButtonAsync. Po tym, jak gracz dołączy do rundy i wybierze swój blaster, 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 doświadczenia i korzysta z dotykowego wejścia na urządzeniu, które akceptuje kontrolki dotykowe, przycisk blast wyświetla się w górnym prawym rogu przycisku skoku.

Interfejs Użytkownika Gracza

Podążając za najlepszymi praktykami hierarchii wizualnej z Wireframe Your Layouts, ta sekcja nauczy cię, jak wdrożyć wszystkie elementy interfejsu użytkownika na ekranie dotyczące stanu gracza. Ta grupa elementów UI znajduje się blisko boków ekranu, ponieważ gracze mogą zrozumieć te informacje peryferyjne bez odwracania uwagi od gry.

Wskaźnik gracza

Wskaźnik gracza to komponent interfejsu użytkownika, którego gracze używają, aby szybko zrozumieć, do której drużyny należą, gdy tylko pojawią się w strefie spawnu swojej drużyny. Przykładowe doświadczenie laser tag oferuje dwie wersje wskaźnika gracza, w zależności od tego, czy gracz znajduje się w drużynie zielonej, czy różowej.

Podążając za wskazówkami z Wybierz motyw kolorystyczny, 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 wizualnego sprzężenia zwrotnego jest ważne, ponieważ pomaga to w utrzymaniu dostępności projektu dla graczy z daltonizmem.

Aby dokładnie odtworzyć komponent wskaźnika gracza w przykładowym doświadczeniu Laser Tag:

Wstaw Frame do obiektu HUDGui ScreenGui.
1. W oknie Explorer przejdź do usługi StarterGui.
2. Najedź kursorem na dziecko obiektu 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 boku ekranu.
5. Ustaw Size na {0.23, 0},{0.08, 0}, aby zarówno skrócić, jak i poszerzyć ramkę.
6. Włącz ClipsDescendants, aby przyciąć obiekty Gui, które wychodzą poza ramkę.
Stwórz kształt wielokątny.
1. Wstaw obiekt 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ć etykletę po prawej stronie ramki.
  6. Ustaw Size na {1.858, 0},{0.581, 0}, aby poszerzyć etykietę poza ramkę i skrócić 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 UIAspectRatioConstraint do Block, aby upewnić się, że proporcje etykiety i jej elementów dziecinnych pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  2. Wybierz nowy ogranicznik, a następnie w oknie Properties ustaw AspectRatio na 13.78.
Stwórz pole dla portretu gracza.
1. Wstaw ImageLabel do PlayerDisplay.
2. Wybierz nową etykietę, a następnie w oknie Properties,
  1. Usuń identyfikator zasobu zastępczego w atrybucie 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 doświadczeniu.
  5. Ustaw Name na PlayerPortrait.
  6. Ustaw Position na {0.11, 0},{1, 0}, aby ustawić etykiety po lewej stronie kształtu wielokątnego.
  7. Ustaw Size na {0.23, 0},{1, 0}, aby skrócić 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 UIAspectRatioConstraint do PlayerPortrait, aby upewnić się, że proporcje etykiety i jej elementów dziecinnych pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  2. Wstaw UICorner do PlayerPortrait, następnie w oknie Properties ustaw CornerRadius na 0.05, 0, aby lekko zaokrąglić rogi.
Stwó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 nowego przycisku w lewym środku (0% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
  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 pojemnika (35% od lewej do prawej rodzica etykiety i 72% od góry do dołu rodzica etykiety).
  5. Ustaw Size na {0.52, 0},{0.3, 0}, aby tekst mógł zajmować większość obszaru kształtu wielokątnego (52% poziomo i 30% pionowo ramki rodzica).
  6. Ustaw FontFace na Montserrat, aby pasować do futurystycznego stylu.
  7. Ustaw Weight na Bold, aby pogrubić czcionkę.
  8. Usuń tekst zastępczy w atrybucie Text. Skrypty w kroku 7 programatycznie wstawiają nazwę gracza do etykiety tekstowej.
  9. Włącz TextScaled.
  10. Ustaw TextXAlignment na Left.
Stwórz ikony drużyny i kolory, które będą wyświetlane po lewej stronie portretu gracza.
1. Wstaw Folder do PlayerDisplay, następnie zmień nazwę na TeamIcons.
2. Stwórz ikonę drużyny zielonej i kolor.
  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ęta.
    
    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 skrócić etykietę po lewej stronie portretu gracza.
    
    Ustaw ImageTransparency na 1, aby etykieta stała się przezroczysta.
  1. Skonfiguruj niestandardowy atrybut, aby śledzić, że ten 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.
    
    Z rozwijanej listy Type wybierz BrickColor.
    
    Kliknij przycisk Save.
    
    Ustaw nowy atrybut teamColor na Mint.
  2. Wstaw UIAspectRatioConstraint do TeamAIcon, aby upewnić się, że proporcje etykiety i jej elementów dziecinnych pozostaną takie same, niezależnie od rozmiaru ekranu gracza.
  3. Stwórz ikonę.
    
    Wstaw ImageLabel do TeamAIcon.
    
    Wybierz nową etykietę, a następnie w oknie Properties,
    
    Ustaw Image na rbxassetid://14309678670, aby wyświetlić ikonę drużyny zielonej.
    
    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).
    
    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 rodzica.
    
    Ustaw Size na {0.7, 0},{0.6, 0}, aby skrócić etykietę.
    
    Ustaw ScaleType na Fit, aby obraz pasował do swojego kontenera i nie rozciągał się na różnych rozmiarach ekranów.
3. Stwórz ikonę drużyny i kolor różowej.
  1. Duplikuj TeamAIcon i jego dzieci.
  2. Wybierz duplikat TeamAIcon, a następnie w oknie Properties,
    
    Ustaw BackgroundColor3 na 255, 170, 255, aby ustawić kolor tła etykiety na carnation pink.
    
    Ustaw Name na TeamBIcon.
    
    Ustaw atrybut teamColor na Carnation Pink.
    
    Wybierz duplikat dziecka Icon TeamBIcon, a następnie w oknie Properties ustaw Image na rbxassetid://14309678549, aby wyświetlić ikonę drużyny różowej.
Zreferuj poniższe skrypty ReplicatedStorage w pliku miejsca Laser Tag, które programatycznie wyświetlają wskaźnik gracza z odpowiednim kolorem i ikoną drużyny, gdy gracz jest aktywny w rundzie.

Następujący skrypt wymaga zestawu modułowych skryptów, które współpracują, aby skonfigurować główny interfejs wyświetlania (HUD), w tym startSyncingTeamColor, setPlayerName i setPlayerPortrait. Po tym, jak gracz dołączy do rundy i wybierze swój blaster, 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, za każdym razem, gdy gracz dołącza lub ponownie dołącza do rundy po respawnie, wskaźnik gracza jest wyświetlany w dolnym lewym rogu ich ekranu.

Ekran pola siłowego

Ekran 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ładowe doświadczenie laser tag wykorzystuje półprzezroczysty, sześciokątny wzór, aby symbolizować pole siłowe. Ta decyzja projektowa nie tylko wzmacnia ogólny futurystyczny styl artystyczny dla wszystkich elementów interfejsu użytkownika w doświadczeniu, ale także komunikuje stan gracza bez jakiegokolwiek tekstu lub dodatkowych wskazówek.

Aby dokładnie odtworzyć ekran pola siłowego w przykładowym doświadczeniu Laser Tag:1. Wstaw obiekt ImageLabel do obiektu ForceFieldGui ScreenGui.

W oknie Explorer przejdź do usługi StarterGui.
Najedź kursorem na obiekt ForceFieldGui będący dzieckiem, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Z menu kontekstowego wstaw obiekt ImageLabel.
Wybierz nowy label, a następnie w oknie Properties,
1. Ustaw Image na rbxassetid://14462567888.
2. Ustaw BackgroundTransparency na 0.8, aby sprawić, że pole siłowe będzie pół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 sprawić, że sześciokąt będzie układał się na całym ekranie.
5. Ustaw TileSize na {0, 104},{0, 180}.
Wstaw obiekt UIGradient do labela.
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 sześciokątów.
  2. Kliknij właściwość Color, a następnie kliknij przycisk ⋯. Wyświetli się okno pop-up sekwencji kolorów.
    
    Każdy trójkąt na dolnej osi sekwencji kolorów jest punktem kluczowym, który określa wartość koloru właściwości w tym punkcie obrazu z lewej do prawej.
  3. Kliknij i przeciągnij w 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 w sekwencji kolorów, aż osiągniesz wartość Time równą 0.95, a następnie ponownie otwórz okno pop-up Colors i wybierz tę samą biel 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 sprawi, że pole siłowe będzie wyglądać, jakby migotało.
  1. Kliknij właściwość Transparency, a następnie kliknij przycisk ⋯. Wyświetli się okno pop-up sekwencji liczb. Każdy kwadrat na początku i końcu sekwencji liczb jest punktem kluczowym, który określa wartość przezroczystości właściwości w tym punkcie obrazu z 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 duplikacie labela, a następnie w oknie Properties,
1. Ustaw Rotation na -45, aby odwrócić obraz tak, aby niemal lustrzanie się odbijał wokół osi Y.
2. Zmodyfikuj Transparency, aby sprawić, że migotanie będzie wyglądać bardziej organicznie.
  1. Kliknij właściwość Transparency, a następnie kliknij przycisk ⋯. Wyświetli się okno pop-up sekwencji liczb.
  2. Wybierz trzeci kluczowy punkt, a następnie kliknij przycisk Delete.
Odwołaj się do poniższych skryptów ReplicatedStorage w próbce pliku Laser Tag, które programowo wyświetlają ekran z polem siłowym podczas, gdy gracz dołącza lub ponownie dołącza do rundy.

Poniższy skrypt klienta ReplicatedStorage.ForceFieldClientVisuals zastępuje domyślne wizualizacje ForceField wizualizacjami StarterGui.ForceFieldGui. Kiedy gracze wchodzą do doświadczenia i pojawiają się w SpawnLocation z właściwością Duration większą niż 0, domyślne zachowanie w każdym doświadczeniu polega na przydzieleniu ich awatarowi ochronnej niebieskiej kuli, która chwilowo uniemożliwia im utratę zdrowia.

Ten skrypt zaczyna od nasłuchiwania, gdy ForceField zostaje dodany 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 na nowo pojawiają się w doświadczeniu.

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen. — Wizualizacje pola siłowego w pierwszej osobie

Third-person force field visuals include a blue sparkling orb around the player spawning into the experience. — 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, za każdym razem, gdy gracz dołącza lub ponownie dołącza do rundy po respawn, nowy interfejs użytkownika z polem siłowym wyświetla się zamiast domyślnych wizualizacji pierwszoosobowych ForceField.

Ekran respawnu

Ekran respawnu to element UI, który przyciemnia widok, aby poinformować graczy, że zostali wyeliminowani, a serwer przetwarza ich respawn z powrotem do strefy respawnu. Ten element UI jest ważny, ponieważ daje graczom czas na przetworzenie, że zostali wyeliminowani i na opracowanie swojej następnej strategii przed powrotem do aktywnej rundy.

Aby uzyskać więcej informacji o dostosowanym zachowaniu respawnu w przykładowym doświadczeniu laser tag, zapoznaj się z Respawn postaci w programie nauczania skryptów rozgrywki.

Aby dokładnie odtworzyć ekran respawnu w przykładowym doświadczeniu Laser Tag:

Utwórz centralny baner informacyjny.
1. Wstaw obiekt ImageLabel do obiektu OutStateGui ScreenGui.
  1. W oknie Explorer przejdź do usługi StarterGui.
  2. Najedź kursorem na obiekt OutStateGui będący dzieckiem, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
  3. Z menu kontekstowego wstaw obiekt ImageLabel.
2. Wybierz nowy label, 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 strony labela i 50% od góry do dołu labela).
  2. Ustaw BackgroundTransparency na 1, aby całkowicie uczynić tło labela przezroczystym.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić label na środku swojego 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ć label (48% w poziomie i 6% w pionie rodzica ScreenGui).
  5. Ustaw Name na Block.
  6. Ustaw Image na rbxassetid://14304827265, aby obraz stał się trapezem.
  7. Ustaw ImageColor na 0,0,0, aby trapez był czarny.
  8. Ustaw ImageTransparency na 0.3, aby zmniejszyć przezroczystość labela o 30% i dopasować do wszystkich czarnych elementów UI w doświadczeniu.
3. Wstaw obiekt UIAspectRatioConstraint do Block, aby zapewnić, że proporcje labela i jego dzieci będą się utrzymywać niezależnie od rozmiaru ekranu gracza.
4. Wybierz nową restrykcję, a następnie w oknie Properties ustaw AspectRatio na 13.78.
5. Wstaw obiekt TextLabel do Block dla tekstu informacyjnego.
6. Wybierz nowy label, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy labela w środku (50% od lewej do prawej strony labela i 50% od góry do dołu labela).
  2. Ustaw BackgroundTransparency na 1, aby całkowicie uczynić tło labela przezroczystym.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić label na środku swojego rodzica labela (50% od lewej do prawej strony rodzica labela i 50% od góry do dołu rodzica labela).
  4. Ustaw Size na {.85, 0},{0.55, 0}, aby tekst mógł zająć większość obszaru trapezu (85% w poziomie i 55% w pionie rodzica labela).
  5. Ustaw Name na BodyTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasować do futurystycznego stylu.
  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 obiekt ImageLabel do Block.
2. Wybierz nowy label, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 1, aby ustawić punkt początkowy labela w dolnym środku (50% od lewej do prawej strony labela i 100% od góry do dołu labela).
  2. Ustaw BackgroundTransparency na 1, aby całkowicie uczynić tło labela przezroczystym.
  3. Ustaw Position na {0.5, 0},{0, 0}, aby ustawić label na górze swojego rodzica labela (50% od lewej do prawej strony rodzica labela i 0% od góry do dołu rodzica labela).
  4. Ustaw Size na {0.46, 0},{0.56, 0}, aby poszerzyć label (46% w poziomie i 56% w pionie rodzica labela).
  5. Ustaw Name na Header.
  6. Ustaw Image na rbxassetid://14304826985, aby obraz stał się wielokierunkowym blaskiem.
  7. Ustaw ImageColor na 245, 46, 46, aby blask był czerwony, aby zaznaczyć, że gracz jest tymczasowo nieaktywny, gdy został wyeliminowany z rundy.
3. Wstaw obiekt TextLabel do Header dla tekstu informacyjnego.
4. Wybierz nowy label, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy labela w środku (50% od lewej do prawej strony labela i 50% od góry do dołu labela).
  2. Ustaw BackgroundTransparency na 1, aby całkowicie uczynić tło labela przezroczystym.
  3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić label na środku swojego rodzica labela (50% od lewej do prawej strony rodzica labela i 50% od góry do dołu rodzica labela).
  4. Ustaw Size na {.85, 0},{0.55, 0}, aby tekst mógł zająć większość obszaru blasku (85% w poziomie i 55% w pionie rodzica labela).
  5. Ustaw Name na HeaderTextLabel.
  6. Ustaw FontFace na Montserrat, aby pasować do futurystycznego stylu.
  7. Ustaw Weight na Black, aby pogrubić czcionkę.
  8. Ustaw Text na TAGGED - JESTEŚ NA ZEWĄTRZ!
  9. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
  10. Włącz TextScaled.
Utwórz blask wokół krawędzi ekranu.
1. Wstaw obiekt ImageLabel do OutStateGui.
2. Wybierz nowy label, a następnie w oknie Properties,
  1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy labela w środku (50% od lewej do prawej strony labela i 50% od góry do dołu labela).
  2. Ustaw BackgroundColor3 na 0,0,0, aby ustawić kolor tła labela na czarny.
  3. Ustaw BackgroundTransparency na 0.5, aby uczynić tło labela w połowie przezroczystym.
  4. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić label na środku swojego kontenera (50% od lewej do prawej strony rodzica ScreenGui i 50% od góry do dołu rodzica ScreenGui).
  5. Ustaw Size na {1, 0},{1, 0}, aby rozciągnąć label na cały ekran (100% w poziomie i 100% w pionie rodzica ScreenGui).
  6. Ustaw ZIndex na -1, aby wyświetlić blask za innymi elementami UI.
  7. Ustaw Name na Header.
  8. Ustaw Image na rbxassetid://14309518613, aby obraz stał się blaskiem na krawędzi.
  9. Ustaw ImageTransparency na 0.1, aby blask był lekko przezroczysty.
Aby poprawić wydajność, możesz pominąć aktywa graficzne i zamiast tego użyć obiektu UIGradient z niestandardową sekwencją liczb przezroczystości. Aby dowiedzieć się więcej o tej technice blasku, zobacz Modyfikatory wyglądu UI - Gradient.
Odwołaj się do poniższego skryptu ReplicatedStorage w przykładowym pliku Laser Tag, który programowo wyświetla ekran respawnu, gdy zdrowie gracza osiąga zero i są w trakcie respawnu z powrotem do strefy respawnu swojej drużyny.

Poniższy skrypt klienta ReplicatedStorage.PlayerStateHandler zawiera funkcje, które wyzwalają różne typy zachowań zgodnie z atrybutem playerState. Wszystkie odpowiedzi zdarzeń są logicznie grupowane w tym skrypcie, ponieważ wymagają podobnego zachowania odnośnie włączania lub wyłączania kontroli gracza, ruchu kamery i które warstwy UI są widoczne.

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

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

Kiedy gracz respawnuje, ich playerState zmienia się na SelectingBlaster, co wyzwala funkcję onSelectingBlaster(). onSelectingBlaster() następnie wyłącznie włącza StarterGui.PickABlasterGui, co automatycznie dezaktywuje ekran respawnu. Aby uzyskać więcej informacji o tych warunkach, zapoznaj się z Zarządzanie stanem klienta w programie nauczania 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 rozglądać się podczas wyboru 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 bycia oznaczonym
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

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

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

	-- Ukryj wszystkie HUD-y 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ż aktualizacje stanu gracza w przyszłości
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

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

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

Teraz, gdy zapoznałeś się ze wspólnymi obiektami GuiObjects dla UI na ekranie, spróbuj odtworzyć obiekt RoundResultsGui ScreenGui i wszystkie jego dzieci do wyświetlenia na ekranie, gdy gracze wygrywają lub przegrywają mecz. Możesz użyć pliku doświadczenia laser tag .rbxl jako odniesienia lub dostosować wartości, aby spełnić wymagania rozgrywki w twoim doświadczeniu.

Tworzenie obiektów SurfaceGui

Aby wyświetlić UI na powierzchni części w przestrzeni 3D, która reaguje na logikę skryptową dla każdego indywidualnego gracza, możesz połączyć obiekt SurfaceGui z częścią, w której chcesz wyświetlić swoje UI w usłudze ReplicatedStorage. Ta technika zapewnia, że twoje UI i jego logika skryptowa są dostępne zarówno dla serwera, jak i każdego klienta gracza.

Obiekty SurfaceGui zawierają wszystkie GuiObjects, które wyświetlają się na powierzchni części w przestrzeni 3D. Przykładowe doświadczenie laser tag zawiera tylko jedną instancję obiektu SurfaceGui: wskaźnik schłodzenia, który wyświetla się nad blasterem każdego gracza. Ten obiekt potrzebuje logiki skryptowej dla każdego gracza, ponieważ aktywnie reaguje na interakcje każdego indywidualnego gracza i dostarcza wizualne informacje o tym, kiedy mogą ponownie wystrzelić swój blaster.

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ę obiektu SurfaceGui zgodnie z kontekstem jego dzieci.
Powtórz ten proces dla każdego elementu UI, który musisz wyświetlić na powierzchni części w przestrzeni 3D.

Wskaźnik schłodzenia

Wskaźnik schłodzenia to komponent UI, który informuje graczy, jak długo muszą czekać, zanim będą mogli ponownie uruchomić swój blaster. Ta krótka przerwa uniemożliwia graczom wystrzeliwanie tak szybko, jak potrafią klikać lub naciskać przycisk, co jest nierealistyczne dla rozgrywki laser tag.

Aby dokładnie odtworzyć wskaźnik schłodzenia w przykładowym doświadczeniu 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 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 uczynić część całkowicie przezroczystą.
2. Ustaw Name na CooldownBarPrefab.
3. Ustaw Size na 0.169, 0.027, 2.537, aby skalować część do rozmiaru mniej więcej długości blastera.
4. Wyłącz CanCollide i CanQuery.
Wstaw obiekt SurfaceGui do CooldownBarPrefab.
Wybierz nowy SurfaceGui, a następnie w oknie Properties,
1. Ustaw Face na Top, aby UI wyświetlało się w górę.
2. Ustaw LightInfluence i MaxDistance na 0.
3. Ustaw PixelsPerStud na 200.
Utwórz czarny pasek.
1. Wstaw obiekt ImageLabel do SurfaceGui.
2. Wybierz nowy label, 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 labela w środku (50% od lewej do prawej strony labela i 50% od góry do dołu labela).
  3. Ustaw BackgroundColor3 na 0,0,0, aby ustawić kolor tła labela na czarny.
  4. Ustaw BackgroundTransparency na 0.4, aby uczynić tło labela półprzezroczystym.
  5. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić label w środku swojego kontenera (50% od lewej do prawej strony rodzica SurfaceGui i 50% od góry do dołu rodzica SurfaceGui).
  6. Ustaw Size na {1, 0},{1, 0}, aby powiększyć label na całą część (100% w poziomie i 100% w pionie rodzica SurfaceGui).
  7. Ustaw Name na Container.
Zaokrągl rogi pojemnika.
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 obiekt ImageLabel do Container.
2. Wybierz nowy label, a następnie w oknie Properties,
  1. Usuń domyślną wartość Image.
  2. Ustaw AnchorPoint na 1, 0.5, aby ustawić punkt początkowy labela w prawym środku (100% od lewej do prawej strony labela i 50% od góry do dołu labela).
  3. Ustaw BackgroundColor3 na 172, 13, 13, aby ustawić kolor tła labela na ciemnoczerwony.
  4. Ustaw BackgroundTransparency na 0.2, aby uczynić tło labela nieco przezroczystym.
  5. Ustaw Name na Bar.
  6. Ustaw Position na {1, 0},{0.5, 0}, aby ustawić label w prawym środku swojego kontenera (100% od lewej do prawej strony rodzica labela i 50% od góry do dołu rodzica labela).
  7. Ustaw Size na {0, 0},{1, 0}, aby wydłużyć label do górnej części swojego rodzica labela (0% w poziomie i 100% w pionie rodzica labela). Ten krok jest również korzystny dla zachowania tweeningu, które występuje w skryptach w kroku 8.
Zaokrągl rogi labela.
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 poniższych skryptów ReplicatedStorage w przykładowym pliku Laser Tag, które programowo przyczepiają wskaźnik schłodzenia do blastera gracza, a następnie animują czerwony pasek po tym, jak gracz wystrzeli swój blaster.

Poniższy skrypt klienta ReplicatedStorage.FirstPersonBlasterVisuals obsługuje całą logikę wizualną dla blastera gracza w pierwszej osobie. Wymaga zestawu skryptów modułowych, które współpracują, aby ustawić wizualizacje blastera, które wydają się bardziej realistyczne dla rozgrywki w laser 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 schł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 schłodzenia, ponieważ jest powiązany z rigem
		rigModel:Destroy()
		rigModel = nil
	end
end

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

-- Powiąż rig z kamerą, jeśli istnieje
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Zaktualizuj CFrame riga względem 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, gdy gracz zakończy wybieranie blastera.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Teraz, gdy gracz wystrzeli swój blaster, wskaźnik schłodzenia animuje się, aby komunikować, kiedy gracz może ponownie strzelić.

Tworzenie obiektów BillboardGui

Aby wyświetlić elementy UI w przestrzeni 3D, które reagują na logikę skryptową i zawsze zwracają się w stronę kamery każdego gracza, niezależnie od ich kąta widzenia, takie jak nazwy graczy lub wskaźniki mapy, możesz utworzyć obiekt BillboardGui jako dziecko BasePart lub Attachment, który istnieje w przestrzeni 3D.

Przykładowe doświadczenie laser tag zawiera dwa oddzielne obiekty BillboardGui w usłudze ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Wyświetla różową lub zieloną kółko nad głową 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 zaprezentować, w kolejnych sekcjach nauczysz się, jak zaimplementować elementy UI dla obu typów wskaźników w przykładowym doświadczeniu laser tag. Możesz dostosować dowolną część procesu, aby spełnić specyfikacje swojego doświadczenia.

Aby utworzyć 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ę obiektu BillboardGui zgodnie z kontekstem jego dzieci.
Powtórz ten proces dla każdego elementu UI, który musisz kontekstowo wyświetlić nad głowami graczy.

Wskaźnik drużyny

Wskaźnik drużyny to element UI, 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 przeciwnika. Te informacje są ważne, ponieważ rozgrywka w doświadczeniu strzelanki z perspektywy pierwszej osoby wymaga od graczy szybkich decyzji strategicznych podczas walki, aby nie zostali wyeliminowani i nie przegrali meczu.

Aby dokładnie odtworzyć wskaźnik drużyny w przykładowym doświadczeniu 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ńskiej formy 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 dziecka rig'a, którym jest siatka Head, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
4. Z menu kontekstowego wstaw obiekt 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 uczynić label znacznie mniejszym.
4. Ustaw StudsOffsetWorldSpace na 0, 4, 0, aby pozycjonować go nad głową rig'a.
Wstaw obiekt Frame do OtherPlayerIndicatorPrefab.
Wybierz nowy frame, a następnie w oknie Properties,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy frame'a w środku (50% od lewej do prawej strony labela i 50% od góry do dołu labela).
2. Ustaw BackgroundColor3 na 255, 3, 0, aby ustawić kolor tła frame'a na czerwony jako kolor zastępczy.
3. Ustaw Position na {0.5, 0},{0.5, 0}, aby ustawić frame na środku swojego kontenera (50% od lewej do prawej strony rodzica BillboardGui i 50% od góry do dołu rodzica BillboardGui).
4. Ustaw Size na {1, -2},{1, -2}, aby skrócić framea do powierzchni BillboardGui.
Wstaw obiekt UICorner do Frame, aby całkowicie zaokrąglić rogi.
Wstaw obiekt UIStroke do Frame, aby konturować okrąg wskaźnika.
Przenieś OtherPlayerIndicatorPrefab do ReplicatedStorage.
Odwołaj się do poniższego 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 przeciwnika i są zasłonięci.

Poniższy skrypt ReplicatedStorage.OtherPlayerIndicatorGuiSetup uruchamia się, gdy gracze pojawiają się na arenie w aktywnej rundzie. Przyczepia 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 WSZKAŹNIKOtherPlayerIndicatorPrefab UI do głowy postaci, a następnie ustawia kolor wskaźnika drużyny do koloru ich drużyny.

Jeżeli inni gracze są w tej samej drużynie, wskaźnik drużyny jest zawsze wyświetlany, nawet jeśli są zasłonięci przez obiekty w przestrzeni 3D; jeżeli inni gracze są w drużynie przeciwnika, wskaźnik drużyny wyświetla się tylko wtedy, gdy nie ma obiektu w przestrzeni 3D, który by ich zasłonił.


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 jeśli gracz jest przyjacielem

		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 bierze udział w aktywnej rundzie, wskaźniki drużynowe wyświetlają się nad głowami innych graczy, chyba że są w drużynie przeciwnika i zasłonięci przez obiekt.

Wskaźnik oznaczenia

Wskaźnik oznaczenia to element UI, który informuje graczy, kiedy inni gracze są już nieaktywni w rundzie i są w trakcie respawnu z powrotem do swojej strefy respawnu. Te informacje są ważne, ponieważ rozgrywka w doświadczeniu strzelanki z perspektywy pierwszej osoby wymaga od graczy przechodzenia do następnego celu, gdy tylko oznaczą gracza, aby nie stali się wrażliwi na arenie, grając w tej samej lokalizacji przez zbyt długi czas.

Aby dokładnie odtworzyć wskaźnik oznaczenia w przykładowym doświadczeniu 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ęskiej formy 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 dziecka rig'a, którym jest siatka Head, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
4. Z menu kontekstowego wstaw obiekt 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 TaggedOutIndicatorGuiPrefab.
3. Ustaw Size na {3, 0},{0.5, 0}, aby poszerzyć miejsce na label.
4. Ustaw StudsOffset na 0, 3.25, 0, aby pozycjonować go nad głową gracza.
  
  1. Wstaw obiekt ImageLabel do TaggedOutIndicatorGuiPrefab.
Wybierz nową etykietę, a następnie w oknie Properties,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety na środku samej siebie (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ę na środku swojego 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ły 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 nadać etykiecie czerwony kolor.
Aby poprawić wydajność, możesz pominąć zasób graficzny i zamiast tego użyć obiektu UIGradient z niestandardową sekwencją przezroczystości. Aby dowiedzieć się więcej o tej technice zaniku, zobacz UI Appearance Modifiers - Gradient.
Wstaw obiekt TextLabel do Frame.
Wybierz nową etykietę, a następnie w oknie Properties,
1. Ustaw AnchorPoint na 0.5, 0.5, aby ustawić punkt początkowy etykiety na środku samej siebie (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ę na środku swojego 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 zaniku (85% w poziomie i 70% w pionie rodzica etykiety obrazowej).
6. Ustaw FontFace na Montserrat, aby dopasować się do futurystycznej estetyki.
7. Ustaw Weight na Bold, aby pogrubić czcionkę.
8. Ustaw Text na TAGGED.
9. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
10. Włącz TextScaled.
Przenieś TaggedOutIndicatorGuiPrefab do ReplicatedStorage.
Odwołaj się do następujących skryptów ServerScriptService w pliku przykładzie Laser Tag 1A, które programowo wyświetlają wskaźnik tagu podczas respawnowania się gracza z powrotem do strefy odrodzenia swojej drużyny.

Następujący skrypt serwerowy ServerScriptService.SetupHumanoid uruchamia się, gdy gracz wczytuje doświadczenie. Upewnia się, że za każdym razem, gdy postać gracza jest dodawana do modelu danych, wywoływana jest funkcja setupHumanoidAsync z jej 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 respawnów 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 spadnie do zera, wskaźnik tagu wyświetla się nad ich głową, aż się respawnuje.

Gratulacje za zakończenie programu nauczania dotyczącego projektowania interfejsu użytkownika! Teraz, gdy masz doświadczenie w tworzeniu stylu artystycznego, projektowaniu układów oraz wprowadzaniu 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 realizacji przykładowego doświadczenia laserowego. Powodzenia w tworzeniu!