Wdrożenie Twoich projektów to proces tworzenia Twoich wireframe w Studio przy użyciu zarówno elementów UI zbudowanych wbudowanymi, jak i niestandardowych elementów UI z wbudowanymi skryptami, które aktywują Twoje konteksty UI. Ten ekscytujący krok samouczka to miejsce, w którym widzisz wszystkie swoje projekty i ciężko pracujesz nad zespojem roboczych przepływów, które są gotowe i gotowe do interakcji z graczami.
Używając doświadczenia laserowego tagu próbkowego.rbxl jako przykładu, ta sekcja kursu projektowania interfejsu użytkownika pokazuje, jak włączyć swoją planowanie UI, w tym przewodnika na temat:
- Odzyskiwanie ID zasobów z biblioteki zasobów UI, abyś mógł ponownie stworzyć komponenty interfejsu użytkownika do doświadczenia laserowego.
- Emulowanie różnych urządzeń bezpośrednio w Studio, aby zobaczyć, jak wygląda Twoja interfejs użytkownika na różnych ekranach i proporcjach aspektu.
- Tworzenie ScreenGui, SurfaceGui i BillboardGui obiektów do wyświetlania UI na ekranach graczy, części powierzchni i w przestrzeni 3D, odpowiednio.
Po przesłuchaniu technik w tej sekcji możesz je zastosować do własnych projektów, aby stworzyć ekscytujące komponenty interfejsu użytkownika, które pomagają graczom przeglądać to, co mogą zrobić w Twoich doświadczeniach.
Instrukcje w tej sekcji samoucznia pokazują, jak dokładnie odtworzyć komponenty UI używając biblioteki komponentów UI. Proces ten trwa około 90 minut lub mniej od początku do końca. Jeśli nie chcesz używać dostarczonych wartości, możesz dostosować każdy element UI do specyfikacji własnego doświadczenia lub użyć próbki sama w reszcie samoucznia.
Zdobądź bibliotekę zasobów
Biblioteki zasobów to kolekcje zasobów, które możesz dodać do swojego ekwipunku, aby uzyskać łatwy dostęp i ponowne użycie. Biblioteka zasobów używana do projektu z Sklepu Creatora zawiera dziewięć 2D pojedynczych elementów interfejsu użytkownika i finalne wersje celu, blastera selektora i komponentów gracza tworzonych w tej sekcji tutorialu.
Możesz dodać większość zasobów do swojego ekwipunku w Studio, klikając link Dodaj do ekwipunku w następującym komponente. Po umieszczeniu zasobów w wyposażeniemożesz je ponownie użyć w dowolnym projekcie na platforma.
Aby uzyskać bibliotekę zasobów z Twojego ekwipunku do swojego doświadczenia:
W menu Zakładka widok wybierz Zobacz tab.
W sekcji Pokaż, kliknij Skrzynię narzędziową. Wyświetla się okno Skrzynię narzędziową.
W okieniu Toolbox , kliknij Inventar tab. The Moje modele sortowanie wyświetli.
Kliknij menu rozwijanego, a następnie wybierz sortować Moje Pakiety .
Kliknij Komponenty interfejsu użytkownika końcowego płytki, a następnie w oknie Explorer wybierz Ukończone komponenty , a następnie przeciągnij je do usługi 1>StarterGui1>. Teraz możesz włączyć dowolny z końcowych komponentów do odniesienia ich projektu.
Emuluj urządzenia
Studio's Emulator urządzeń pozwala na testowanie tego, jak gracze będą widzieć i wchodzić w interakcję z twoją interfejsem na różnych urządzenie. Ten narzędzie jest istotnym elementem procesu implementacji, ponieważ proporcja aspektu twojego okienka w Studio nie odzwierciedla automatycznie proporcji aspektu używanych przez graczy do dostępu do twojego doświadc
Na przykład, jeśli nie testujesz swojej interfejsu na zestawie różnych rozmiarów ekranu, gracze z dużymi ekranami mogą nie być w stanie czytać twojego tekstu lub odczytywać twoich ikonek, a gracze z małymi ekranami mogą nie być w stanie zobaczyć przestrzeń 3D, ponieważ elementy twojego interfejsu zajmują zbyt wiele miejsca na ekranie.
Aby odzwierciedlić swój ekran na najmniejszy rozmiar ekranu:
W menu Przycisk wybierz Test tab.
W sekcji Emulacja, kliknij Urządzenie. Okienko widoku zmienia się, aby odzwierciedlić proporcje aspektu przeciętnego laptopa.
W menu rozdziału wybierz Rozdział aktualny . Dzięki temu możesz zobaczyć prawdziwą rozdzdzielczość swoich elementów UI na urządzeniu, na którym emitujesz.
W menu urządzenia wybierz urządzenie z najmniejszym rozmiarem ekranu, którym gracze mogą korzystać, aby uzyskać dostęp do swojego doświadczenia. Podczas gdy najlepszy opcja zmienia się w zależności od urządzeń, które wspierasz, doświadczenie laserowe przy użyciu przycisku laserowego na iPhone 4S sprawdza, czy interfejs wygląda z ograniczoną ilością miejsca na ekranie.
Tworzenie obiektów GUI
Aby wyświetlić elementy interfejsu użytkownika na każdym ekranie gracza, możesz utworzyć obiekt ScreenGui w usłudze StarterGui. Objekty ScreenGui są głównymi kontenerami dla interfejsu użytkownika na ekranie, a
Możesz utworzyć wiele obiektów ScreenGui, aby zorganizować i wyświetlić grupy elementów interfejsu użytkownika w grze w ciągu całego procesu gry. Na przykład wzorowa laserowa etykieta eksperymentuje pięć osobnych obiektów ScreenGui, które są pierwotnie nieaktywne, aż gracze spełniają różne warunki podczas głównego przepływ
- HUDGui - Wyświetla kluczowe informacje o grze w tle, gdy gracze są aktywni w rundzie, takie jak cel i całkowite punkty każdej drużyny.
- PickABlasterGui - Wyświetla wszystkie opcje blastera, gdy gracz rozpoczyna lub dołącza do rundy.
- ForceFieldGui - Wyświetla hexagonalną grę, gdy gracze wybierają broń i są tymczasowo niezawodni.
- OutStateGui - Wyświetla ciemny pasek na ekranie, gdy gracze są opisane.
- 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 utworzyć i dostosować jego dziecko GuiObjects zgodnie z celami każdego kontenera. Aby pokazać, w bezpośrednich sekcjach, które obserwować, nauczysz się implementować elementy UI dla trzech kategorii inform
Aby utworzyć obiekt ScreenGui :
W oknie Explorer , serwisie StarterGui , kliknij ikona1> ⊕ 1>. Wyświetlony zostanie menu kontekstowe.
Wprowadź ScreenGUI .
Zmień ScreenGUI według kontekstu jego elementów interfejsu dziecięcego.
Powtórz ten proces dla każdej grupy elementów UI, które musisz wyświetlić na ekranie każdego gracza.
Interfejs celu
Po wdrożeniu najlepszych praktyk z Wireframe Your Layouts , ta sekcja uczy cię, jak zaimplementować wszystkie elementy interfejsu użytkownika związane z celem eksperymentu. Grupowanie elementów interfejsu jest blisko góry ekranu, ponieważ cel i punkty każdej zespołu mają największe znaczenie dla tego, jak wygrać grę.
Na przykład, próbka dostarcza obiektowy komponent UI, do którego gracze odsyłają się, aby wiedzieć, co muszą zrobić, aby odnieść sukces w rundzie. Podczas gdy gracze oznaczają członków zespołu wrogiego i zarabiają punkty, ten komponent śledzi wynik każdego zespołu w stosunku do ogólnego celu w nagłówku. W przypadku wys
Aby dokładnie odtworzyć interfejs użytkownika celowego w eksperymencie Laser Tag :
Utwórz kontener dla całego komponentu.
Utwórz Ramę w obiekcie HUDGui ScreenGui.
- W oknie Explorer przeglądaj się do usługi StarterGui .
- Przytrzymajте kursor nad jego obiektem HUDGui , a następnie kliknijте ikona⊕. Wyświetlony zostanie menu kontekstowe.
- Z menu kontekstowego wpisz Rama .
Wybierz nowy Rama, a następnie w oknie Właściwości,
- Ustaw AnchorPoint na 0.5, 0 aby ustawić punkt pochodzenia ramy w górnym środku samej siebie (50% z lewej do prawnej strony ramy i 0% z górnej do dolnej strony ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw pozycję na {0.5, 0},{0.03, 0} do ustawienia ramy w pobliżu góry środkowej ekranu (50% z lewej do prawnej strony ekranu, 3% z góry do dołu ekranu, aby zminimalizować boczny bufer).
- Ustaw Wielkość na {0.5, 0},{0.13, 0} , aby elementy ramy zajmowały dużą część góry ekranu, aby przyciągnąć uwagę graczy (50% poziomie poziomie i 13% poziomie poziomie).
- Ustaw Nazwę na Cel .
(Opcjonalne) Wstaw UIAspectRatioConstraint do Celu , aby upewnić się, że stosunkiem aspektu labela pozostaje taki sam bez względu na rozmiar ekranu gracza. Samples ustawuje jego właściwość 0> Class.UIAspectRatioConstraint.AspectRatio0> na 3> 7 3> .
Utwórz kontener dla obiektów celu.
Umieść Ramę w Celu .
Wybierz nowy Rama, a następnie w oknie Właściwości,
- Ustaw AnchorPoint na 0.5, 0 aby ustawić punkt pochodzenia ramy w górnym środku samej siebie (50% z lewej do prawnej strony ramy i 0% z górnej do dolnej strony ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw Pozycję na {0.5, 0},{0, 0} aby ustawić ramę w środku kontenera (50% od lewej do prawnej strony ramy rodzicielskiej i 0% od góry do dołu ramy rodzicielskiej).
- Ustaw wielkość na {1, 0},{0.67, 0}, aby komponenty interfejsu wyboru zajmowały około połowy kontenera od góry do dołu (100% poziomie poziomu i 67% poziomie poziomu).
- Ustaw Nazwę na OtoDisplay .
Utwórz elementy tytułu.
Umieść ImageLabel w ObjectiveDisplay .
Wybierz ImageLabel , a następnie w oknie Właściwości
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony etykiety i 100% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw LayoutOrder na -1.
- Ustaw pozycję na {0.5, 0},{0.34, 0} do ustawienia etykiety w pobliżu górnej góry środka ramy (50% z lewej do prawej strony ramy rodzicielskiej i 34% z góry do dołu ramy rodzicielskiej).
- Ustaw wielkość na 0.46, 0,0.34, 0 #0.46, 0,0.34, 0 do rozszerzenia obszaru formularza o prawie połowę ramy (46% poziomie poziomie i 34% poziomie poziomie).
- Ustaw imię na nagłówku.
- Ustaw Obraz na rbxassetid://14304828123 aby wyświetlić trapezoid.
- Ustaw Przezroczystość Zdjęcia na 0.15, aby uczynić nagłówkę półprzezroczystą.
(Opcjonalne) Wstaw UIAspectRatioConstraint do ImageLabel , aby upewnić się, że stosunkiem aspektu labela pozostaje taki sam bez względu na rozmiar ekranu gracza. Samples ustaw jego właściwość 0> Class.UIAspectRatioConstraint.AspectRatio0> na 3>13.781 3>.
Umieść TextLabel w Title, aby wyświetlić tytuł.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby przenieść etykietę do centrum jej ojca label (50% z lewej do prawnej strony labelu, i 50% z góry do dołu labelu).
- Ustaw Rozmiar na 0.62, 0,0.55, 0 #0.62, 0,0.55, 0 do rozszerzenia przestrzeni tekstu o ponad połowę więcej niż połowa znacznika rodzica (62% poziomie poziomu i 55% poziomie poziomu).
- Ustaw imię na HeaderTextLabel .
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Średni aby zgrubić czcionkę.
- Ustaw tekst na celu .
- Włącz TextScaled .
Twórz elementy pytania.
Umieść ImageLabel w ObjectiveDisplay .
Wybierz ImageLabel , a następnie w oknie Właściwości
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony etykiety i 100% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{1, 0} aby przenieść etykietę do dolnej części jej ramy ojca (50% z lewej do prawnej strony ramy ojca i 100% z górnej do dolnej strony ramy ojca).
- Ustaw Rozmiar na {0.89, 0},{0.66, 0} aby rozszerzyć przestrzeń tekstową do prawie pełnej szerokości ramy rodzicielskiej (89% poziomie poziomie i 66% poziomie poziomie).
- Ustaw Imię na Ciało .
- Ustaw Obraz na rbxassetid://14304827265 aby wyświetlić odwrócony trapezoid.
- Ustaw KolorZdjecia3 na 0, 0, 0 aby nasycić obraz czarny.
- Ustaw Przezroczystość Zdjęcia na 0.3, aby uczynić nagłówkę półprzezroczystą.
(Opcjonalne) Wstaw UIAspectRatioConstraint do ImageLabel , aby upewnić się, że stosunkiem aspektu labela pozostaje taki sam bez względu na rozmiar ekranu gracza. Samples ustaw jego 0> Class.UIAspectRatioConstraint.AspectRatio0> wartość na 3> 13.781 3> .
Umieść TextLabel w Body, aby wyświetlić wiadomość.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby przenieść etykietę do centrum jej ojca label (50% z lewej do prawnej strony labelu, i 50% z góry do dołu labelu).
- Ustaw Rozmiar na {0.85, 0},{0.39, 0} aby rozszerzyć przestrzeń tekstową o ponad połowę znacznika rodzica (85% poziomie poziomie i 39% poziomie poziomie).
- Ustaw Imię na BodyTextLabel .
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Średni aby zgrubić czcionkę.
- Ustaw Kolor tekstu3 na 255, 255, 255 , aby tekst był biały na tle ciemnym.
- Ustaw tekst na Taguj graczy, aby zdobyć punkty! Pierwszy zespół do %d punktów wygrywa. .
- Włącz TextScaled .
Utwórz kontener dla liczników zespołu celu.
Umieść Ramę w Celu .
Wybierz nowy Rama, a następnie w oknie Właściwości,
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony klatki prawnej i 100% z góry do dolnej części klatki prawnej).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw Pozycję na {0.5, 0},{1, 0} aby ustawić ramę w dolnej części kontenera (50% z lewej do prawnej strony ramy rodzicielskiej i 100% z góry do dolnej strony ramy rodzicielskiej).
- Ustaw wielkość na {0.44, 0},{0.27, 0} , aby komponenty interfejsu wyboru zajmowały około połowy kontenera z lewej do prawej (44% poziomie poziomu i 27% poziomie poziomu).
- Ustaw Nazwę na TeamPointCounter .
Utwórz wypełnienie dla liczników zespołu.
- Wstaw obiekt UIListLayout do ramy z kroku 5.
- Wybierz obiekt UIListLayout i w oknie Właściwości,
- Ustaw Padzenie na 0.025, 0 aby zapewnić przestrzeń między przyszłymi licznikami zespołu.
- Ustaw FillDirection na Pionowy , aby każdy zespół miał obok siebie następny po drugim.
- Ustaw Poziom poziomu na Centrum , aby każdy zespół był skalowany pośród siebie.
Utwórz elementy licznika zielonej drużyny.
Wprowadź ImageLabel do TeamPointCounter .
Wybierz ImageLabel , a następnie w oknie Właściwości
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{1, 0} aby przenieść etykietę do dolnej części jej ramy ojca (50% z lewej do prawnej strony ramy ojca i 100% z górnej do dolnej strony ramy ojca).
- Ustaw wielkość na {0.5, 0},{1, 0} , aby rozszerzyć etykietę o połowę wysokości ramy rodzicielskiej (50% poziomie poziomu i 100% poziomie poziomu).
- Ustaw Nazwę na TeamACount .
- Ustaw Obraz na rbxassetid://14304826831 aby wyświetlić kierunkową zaniknięcie.
- Ustaw KolorZdjecia3 na 88, 218, 171 aby nasycić obraz zielony miętą.
Konfiguruj niestandardowy atribut, aby śledzić, że ta etykieta jest dla zespołu zielonego.
- W Oknie Proprietści, przejdź do sekcji tryb atrybutów, a następnie kliknij ikonaplusa. Wyświetli się okienko dialogowe.
- W polu imię wpisz kolor zespołu .
- W menu Typ w menu spadającym, wybierz KolorKlocki .
- Kliknij przycisk Zapisz .
- Ustaw nowy atribut teamColor na Mint .
Wprowadź TextLabel do TeamACountera , aby wyświetlić wiadomość.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 1, 0.5 aby ustawić nowy punkt pochodzenia w środku prawego centrum siebie (100% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw pozycję na 0.95, 0,0.5, 0 #0.95, 0,0.5, 0>, aby przenieść etykietę na prawy jej rodzicielski label (95% z lewej do lewej strony rodzicielskiego labelu, i 50% z góry do dołu rodzicielskiego labelu).
- Ustaw Rozmiar na {0.85, 0},{0.39, 0} aby rozszerzyć przestrzeń tekstową o ponad połowę znacznika rodzica (85% poziomie poziomie i 39% poziomie poziomie).
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Bold aby zgrubić czcionkę.
- Ustaw Kolor tekstu3 na 255, 255, 255 , aby tekst był biały na tle ciemnym.
- Ustaw tekst na - .
- Włącz TextScaled .
- Ustaw TextXAlignment na Prawo .
Utwórz obiekt UIStroke w TextLabel , a następnie w oknie Właściwości ustaw 1>Kolor1> na 4> 8, 78, 524> , aby wybrać cienką zieloną kreślkę.
Utwórz elementy meczącego się zespołu róż.
Duplikuj TeamAICount i jego dzieci.
Wybierz podwójny KontoZespołu, a następnie w oknie Właściwości,
- Ustaw Nazwę na TeamBCount .
- Ustaw Obraz na rbxassetid://14305849451 aby wyświetlić kierunkowy zanik w przeciwległym kierunku.
- Ustaw Kolor Obrazu3 na 255, 170, 255 aby nasycić obraz karnacji róż.
- Ustaw atrybut teamColor na Karnacja Różowa .
Wybierz duplikowane TextLabel dziecko TeamBCounter , a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0, 0.5 , aby ustawić nowy punkt pochodzenia w lewym środku siebie (0% z lewego do prawego lewego kąta labelu i 50% z góry do dołu labelu).
- Ustaw Pozycję na {0.05, 0},{0.5, 0} aby przenieść etykietę do lewej strony jej rodzic % lewej strony (5% z lewej strony do prawic i 50% z góry do dołu rodzic).
- Ustaw TextXAlignment na Left .
Wybierz duplikat UIStroke dziecko TeamBCounter , a następnie w oknie Właściwości ustaw 1>Kolor1> na 4> 158, 18, 944> , aby wyrysować ciemny różowy śluz.
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag położenie pliku, który programowo aktualizuje celne wezwanie i śledzenie punktów zespołu.
Poniższy skrypt wymaga zestawu skrypt modułowych, które działają razem, aby ustawić główny Heads Up Display (HUD), w tym setObjective i startSyncingTeamPoints. Po dołączeniu gracza do rundy i wyboru ich blastera, ten skrypt zapewnia, że wszystkie elementy interfejsu HUD są odpowiednio wyświetlane dla stanu, urządzeniei statusu zespołu gracza.
Teraz, po wyborze gracza przez niego wybranego, interfejs celu pojawia się na górze ekranu i śledzi punkty każdej drużyny.
Interfejs użytkownika Blaster
Po wdrożeniu zalecanych praktyk z Wireframe Your Layouts , ta sekcja nauczy cię, jak zaimplementować wszystkie elementy interfejsu użytkownika związane z ruchem gracza. Grupowanie elementów interfejsu zajmuje większość obszaru ekranu w pobliżu centrum ekranu, ponieważ działa jako punkt fokusowy do przyciągnięcia uwagi graczy na dz
Krosy
Crossbow to element UI, który informuje graczy, gdzie będą mieć wpływ, gdy wybuchną swoją bronią. Ten element UI jest istotnym wymogiem gry dla doświadczeń strzelcy pierwszej osoby, ponieważ gracze muszą być w stanie celować dokładnie swoją broń i oznaczać członków zespołu wrogiego.
Podobnie jak w większości innych doświadczeń w gatunekstrzelców pierwszej osoby, doświadczenie laserowe przykładowego tagu pozwala na umieszczenie crosshara w centrum ekranu, aby gracze mieli coś statycznego do skupienia się podczas gdy ich awatar porusza się przez 3D-przestrzeń. Oprócz zmniejszenia zmęczenia ruchu, to umieszczenie pozwala crossharowi być widoczny, jednocześnie łącząc
Aby dokładnie odtworzyć krosiarz w eksperyencji Laser Tag :
Utwórz ImageLabel w obiekcie HUDGui ScreenGui
W oknie Explorer przeglądaj się do usługi StarterGui .
Przytrzymajте kursor nad jego dzieckiem HUDGui i kliknijте na ikę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wpisz ImageLabel .
Wybierz nowy ImageLabel , a następnie w oknie Właściwości
- Ustaw Obraz na rbxassetid://14400935446 .
- Ustaw AnchorPoint na 0.5, 0.5 aby ustawić punkt pochodzenia etykiety w środku etykiety (50% z lewej do prawnej strony etykiety, 50% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Nazwę na Krosiarz .
- Ustaw Pozycję na {0.5,0},{0.5,0} aby ustawić etykietę w środku ekranu.
- Ustaw ScaleType na Fit , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
(Opcjonalne) Wprowadź UIAspectRatioLimit do Crosshair , aby upewnić się, że stosunkiem aspektu labela pozostaje taki sam bez względu na rozmiar ekranu gracza. Samples ustawia jego właściwość 0>Class.UIAspectRatioLimit.AspectRatio0> na 3>0.895 3>.
Znacznik trafienia
Marker trafienia to element UI, który jest wyświetlany tylko wtedy, gdy eksplozja zadaje wpływ na inną graczą w drużynie wrogiej. Podobnie jak krosiarz, ten element UI jest wymogiem gry w pierwszym rzędzie doświadczeń strzelcy w pierwszej osobie, ponieważ zapewnia wizualne powiadomienia o tym, kiedy gracze są sukcesyjnie tagują swoich przeciwników.
Aby dokładnie odtworzyć znak trafienia w eksperymencie Laser Tag :
Umieść ImageLabel w obiekcie Crosshair ImageLabel .
W oknie Explorer przeglądaj się do usługi StarterGui .
Następnie kliknij na jego dziecko Crosshair obiekt, a następnie kliknij na ikę ⊕ . Wyświetlony zostanie kontekstowy menu.
Z menu kontekstowego wpisz ImageLabel .
Wybierz nowy ImageLabel , a następnie w oknie Właściwości
- Ustaw Obraz na rbxassetid://14401148736 aby wyświetlić ikonanarożnika trafienia.
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku etykiety.
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5,0},{0.5,0} aby ustawić etykietę w środku ekranu.
- Ustaw Imię na Hitmarker .
- Ustaw Rozmiar na {0.6, 0},{0.06, 0} aby zmniejszyć rozmiar prostopadłości wokół środka krosiarza.
- Ustaw Przezroczystość Zdjęcia na 1, aby uczynić znak trafienia całkowicie przejrzystym. Skrypty w następnym kroku zwracają przejrzystość z powrotem na 0 za każdym razem, gdy gracz zadaje trafienie innemu graczowi w zespole wrogim.
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag położenie pliku, które programowo wyświetla znacznik trafienia, gdy laser zadaje wpływ na zespół wrogów.
Poniższy skrypt wymaga zestawu skrypt modułowych, które działają razem, aby ustawić główny Heads Up Display (HUD), w tym setupHitmarker . Po dołączeniu gracza do rundy i wyboru ich blastera, ten skrypt zapewnia, że wszystkie elementy interfejsu HUD są odpowiednio wyświetlane dla stanu, urządzeniei statusu zespołu gracza.
Teraz, gdy gracz wyrzuci swoją broń i eksplozja zostanie zadana innemu graczowi, momentarnie wyświetla się moment znaku trafienia.
Selektor Blastera
A selektor blastera jest komponentem UI, który gracze używają do wyboru swojego typu blastera przed dołączeniem lub ponownym dołączeniem do rundy. Doświadczenie laserowe przykładu dostarcza dwa rodzaje blasterów: jeden, który produkuje kilka promieni z dużą rozległością poziomą, a drugi, który produkuje pojedynczy promień. Typ blastera, który gracze wybierają, wpływa na ich strategię podczas rundy, cz
Poniższe kroki szczegółowo opisują, jak utworzyć kilka kontenerów dla różnych grup elementów interfejsu, witrynę z prośbą, przyciskami do nawigacji i wyboru i zapisem blastera. Logika skryptu dla całego komponentu populuje różne cechy wizualne w witrynie blastera w zależności od instancji Configuration reprezentującej każdy wpisywaćblastra.
Ta konfiguracja umożliwia stworzenie dodatkowych instancji Configuration dla więcej typów blasterów, które automatycznie wyświetlają poprawnie w wybieraźniku blastera bez konieczności tworzenia indywidualnych przycisków w StarterGui.PickABlasterGui.
Aby dokładnie odtworzyć selektor laserowy w eksperyencji Laser Tag :
Utwórz kontener dla całego komponentu.
Umieść Ramę w obiekcie PickABlaster ScreenGui.
- W oknie Explorer przeglądaj się do usługi StarterGui .
- Następnie kliknij na jego dziecko PickABlaster obiekt, a następnie kliknij na ikę ⊕ . Wyświetlony zostanie kontekstowy menu.
- Z menu kontekstowego wpisz Rama .
Wybierz nową ramę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia ramy w dolnej części samej siebie (50% z lewej do prawnej strony ramy i 100% z góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw Pozycję na {0.5, 0},{0.9, 0} do ustawienia ramy w pobliżu środka dołu ekranu (50% z lewej do prawy strony ekranu i 92,4% z góry do dołu ekranu).
- Ustaw wielkość na {0.8, 0},{0.25, 0} , aby komponenty interfejsu selektora laserowego zajmowały dużą część ekranu, aby przyciągnąć uwagę graczy (80% poziomie poziomu i 25% poziomie poziomu).
- Ustaw Nazwę na Komponent .
(Opcjonalne) Wstaw UIAspectRatioConstraint do Komponentu , aby upewnić się, że stosunk napięcia i jego dzieci elementy UI pozostaną tych samych bez względu na rozmiar ekranu gracza. Samples ustaw jego 0> Class.UIAspectRatioConstraint.AspectRatio0> właściwość na 3> 5 3>.
Utwórz kontener do przechowywania grup elementów interfejsu.
Utwórz Ramę w komponent .
Wybierz nową ramę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 aby ustawić punkt pochodzenia ramy w środku siebie (50% z lewej do prawnej strony ramy i 50% z góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw pozycję na {0.5, 0},{0.375, 0} do ustawienia ramy w pobliżu góry środkowej kontenera (50% z lewej do prawy ramy lewej i 37,5% z góry do dołu ramy rodzic).
- Ustaw wielkość na {1, 0},{0.75, 0}, aby komponenty interfejsu wyboru zajmowały 3/4 kontenera (100% poziomo i 75% poziomo w górę).
- Ustaw Imię na SelectionFrame .
Utwórz wskazówkę dla wyboru blastera.
Wpisz ImageLabel do SelectionFrame .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony etykiety i 100% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw LayoutOrder na -1.
- Ustaw pozycję na {0.5, 0},{0.22, 0} do ustawienia etykiety w pobliżu górnej góry środka ramy (50% z lewej do prawej strony ramy rodzicielskiej i 22% z góry do dołu ramy rodzicielskiej).
- Ustaw wielkość na {0.45, 0},{0.22, 0} aby ujściową obszar prom示ty do prawie połowy ramy (45% poziomie poziomie poziomie poziomie poziomie).
- Ustaw imię na nagłówku .
- Ustaw Obraz na rbxassetid://14304828123 aby wyświetlić trapezoid.
- Ustaw Przezroczystość Zdjęcia na 0.15, aby uczynić nagłówkę półprzezroczystą.
(Opcjonalne) Wklej UIAspectRatioConstraint do etykiety, aby upewnić się, że proporcja aspektu zachowuje się taka sama bez względu na rozmiar ekranu gracza. Samples ustawia jego właściwość UIAspectRatioConstraint.AspectRatio na 0> 13.780> .
Umieść TextLabel w Header , aby wyświetlić pro prompt.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby przenieść etykietę do centrum jej ojca label (50% z lewej do prawnej strony labelu, i 50% z góry do dołu labelu).
- Ustaw Rozmiar na {0.6, 0},{0.55, 0} aby rozszerzyć przestrzeń tekstową o ponad połowę znacznika rodzica (60% poziomowo i 55% poziomo).
- Ustaw imię na HeaderTextLabel .
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Średni aby zgrubić czcionkę.
- Ustaw tekstu na wybierz blaster .
- Włącz TextScaled .
Utwórz kontener dla swojego pojemnika przycisków blastera i strzałek wyboru.
Wpisz ImageLabel do SelectionFrame .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony etykiety i 100% z góry do dołu etykiety).
- Ustaw Kolor tła na 0, 0, 0 , aby uczynić etykietę czarną.
- Ustaw Przezroczystość tła na 0.3, aby zmniejszyć nieskazitelną część interfejsu o 30%, i zbazować wszystkie czarne elementy interfejsu w doświadczeniu.
- Ustaw Pozycję na {0.5, 0},{1, 0} aby ustawić etykietę na dole środka ramy (50% z lewej do prawnej strony ramy rodzicielskiej i 100% z górnej do dolnej strony ramy rodzicielskiej).
- Ustaw wielkość na {1, 0},{0.77, 0} aby rozszerzyć obszar etykiety do przestrzeni poniżej wiersza (100% poziomo i 77% poziomo w górę ramy rodzicielskiej).
Okrągaj kąty kontenera.
- Utwórz obiekt UICorner w etykiecie.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Kąt kątowy na 0.075, 0 do zaokrąglenia kątów.
Utwórz kontener dla swoich przycisków blastera.
Użyj Ramy w etykiecie z kroku 4.
Wybierz nową ramę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 aby ustawić nowy punkt początku w środku siebie (50% z lewej do prawnej strony ramy i 50% z góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przejrzystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić ramę w środku jej etykiety rodzicielskiej (50% z lewej do prawnej strony ramy rodzicielskiej, i 50% z góry do dołu ramy rodzicielskiej).
- Ustaw wielkość na {0.85, 0},{0.77, 0} aby rozszerzyć obszar ramy do większości obszaru etykiety (85% poziomie poziomu i 77% poziomie poziomu).
- Ustaw Nazwę na Kontener .
Utwórz wypełnienie dla wszystkich przyszłych przycisków blastera.
- Wstaw obiekt UIListLayout do ramy z kroku 5.
- Wybierz nowy obiekt layoutu, a następnie w oknie Właściwości ,
- Ustaw Padzenie na 0.035, 0 aby zapewnić przestrzeń między wszystkimi przyszłymi przyciskami.
- Ustaw FillDirection na Pion , aby każdy przycisk wyświetlał obok siebie.
- Ustaw obie poziomy skalowania poziomego i poziomy skalowania pionowego na Centrum , aby każdy przycisk zgadzał się z centrum nawzajem.
Utwórz lewy przycisk nawigacji.
Wpisz obiekt ImageButton w ImageLabel z kroku 4.
Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0, 0.5 aby ustawić nowy punkt pochodzenia przycisku w środku lewej strony (0% z lewej strony na prawą i 50% z góry na dołę strony).
- Ustaw Przezroczystość tła na 0.15, aby zapewnić wizualne zwrotki z myszy, że przycisk jest dobieralny.
- Ustaw pozycję na {0.02, 0},{0.5, 0} aby zapewnić poduszkę lewej przycisku z jego pojemnika rodzica (2% lewej do prawej strony etykiety rodzica i 50% od góry do dołu etykiety rodzica).
- Ustaw Wielkość na {0.04, 0},{0.33, 0} , aby uczynić przycisk wyboru znacznie mniejszy niż przyciski blasterowe (4% poziomowo i 33% poziomo).
- Ustaw Nazwę na NavigateButtonLeft .
Okrąć kąty przycisku.
- Wprowadź obiekt UICorner w przycisku.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Kąt kątowy na 0.1, 0 do zaokrąglenia kątów.
Użyj obiektu ImageLabel w przycisku.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw pozycję na 0.45, 0,0.5, 0 5> do ustawienia etykiety w pobliżu środka jego przyciska rodzicielskiego (45% z lewej do prawy z lewej strony przycisku, i 50% z góry do do
- Ustaw wielkość na {0.8, 0},{0.8, 0} aby rozszerzyć obszar etykiety do przestrzeni poniżej pola wyboru (80% poziomie poziomie i 80% poziomie poziomie).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść przezroczystość tła.
- Ustaw Obraz na rbxassetid://14309187238 .
- Ustaw typ skalowania na dopasuj .
Utwórz odpowiedni przycisk nawigacji.
Duplicate NavigationButtonLeft .
Wybierz przycisk duplikatowy, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 1, 0.5 aby ustawić nowy punkt pochodzenia przycisku w środku prawego środka (100% z lewej do prawego strzałki, 50% z góry do dołu strzałki).
- Ustaw Pozycję na {0.98, 0},{0.5, 0} aby zapewnić poduszkę prawą przycisku z jego pojemnika rodzica (98% z lewej do prawnej strony rodzica i 50% z góry do dołu rodzica).
- Ustaw Nazwę na PrzyciskPomocniczy .
Wybierz jego Obiekt Labelu Bildu dziecko.
- Ustaw Rotation na 180 , aby obrócić obraz.
- Ustaw Pozycję na {0.55, 0},{0.5, 0} do ustawienia etykiety w pobliżu środka jego przyciska rodzicielskiego (50% z lewej do prawnej strony przycisku rodzicielskiego i 45% z góry do dołu
Utwórz przycisk WYBIERZ .
Umieść Przycisk Zdjęcia w komponent. Zauważ, jak ten proces utrzymuje przycisk wyboru oddzielnym od Frame Wyboru, abyś mógł dodać między główną częścią komponentu z przyciskiem wyboru.
Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0.5, 1 aby ustawić nowy punkt pochodzenia przycisku w dolnej części siebie (50% z lewej do prawego kąta przycisku i 100% z góry do dołu przycisku).
- Ustaw Przezroczystość tła na 0.15, aby zapewnić wizualne zwrotki z myszy, że przycisk jest dobieralny.
- Ustaw Pozycję na {0.5, 0},{0.99, 0} do ustawienia przycisku w pobliżu środka dolnego jego pojemnika (50% z lewej do prawej strony ramy rodzicielskiej i 99% z góry do dolnej ramy rodzicielskiej).
- Ustaw rozmiar na {0.17, 0},{0.18, 0} do długości przycisku pod spustami blasterowymi (17% poziomie horontalnie i 18% poziomie vertically).
- Ustaw Nazwę na Przycisk Wyboru .
Okrąć kąty przycisku.
- Wprowadź obiekt UICorner w przycisku.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Kąt kąta na 0.2, 0 do zaokrąglenia kątów.
Utwórz obiekt TextLabel w przycisku, aby możesz wyświetlić wezwanie do akcji.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby przenieść etykietę do środka przycisku (50% z lewej do prawnej strony przycisku, i 50% z góry do dołu przycisku rodzicielskiego).
- Ustaw Rozmiar na {0.9, 0},{0.55, 0} aby rozszerzyć przestrzeń tekstową do prawie całej szerokości etykiety rodzicielskiej (90% poziomie poziomu i 55% poziomie poziomu).
- Ustaw Imię na SelectTextLabel .
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Średni aby zgrubić czcionkę.
- Ustaw tekst na WYBIERZ .
- Włącz TextScaled .
Utwórz gotowy wzór przycisku blastera.
- W ReplicatedStorage usłudze utwórz strukturę katalogu, aby zorganizować swoje obiekty UI. Sampl używa Instances katalogu z dzieckiem Guis katalogu.
- Utwórz obiekt Przycisk Zdjęcia w katalogu Przyciski.
- Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0.5, 0.5 aby ustawić nowy punkt pochodzenia przycisku w środku siebie (50% z lewej do prawnej strony przycisku i 50% z góry do dołu przycisku).
- Ustaw Przezroczystość tła na 0.65 aby zapewnić wizualne zwroty danych, że przycisk nie jest w skupieniu. Skrypty w kroku 12 dostarczają programowe wizualne zwroty danych, gdy przycisk jest w skupieniu.
- Ustaw LayoutOrder na 2 .
- Ustaw Nazwę na BlasterButtonPrefab .
- Ustaw rozmiar na {0.8, 0},{0.8, 0} .
- Ustaw Przezroczystość Zdjęcia na 1, aby zrobić zdjęcie całkowicie przejrzystym.
- Utwórz UIAspectRatioConstraint w BlasterButtonPrefab , aby upewnić się, że proporcje aspektu przycisku pozostaną takie same w komponente, niezależnie od rozmiaru ekranu gracza.
- Okrąć kąty przycisku.
- Wpisz obiekt UICorner w BlasterButtonPrefab.
- Wybierz Róg, a następnie w oknie Właściwości ustaw KątPodziału na 2> 0.05, 02> do zaokrąglenia kątów.
- Umieść ImageLabel w BlasterButtonPrefab .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku siebie (50% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Pozycję na {0.52, 0},{0.497, 0} do ustawienia etykiety w pobliżu środka jego przycisku rodzicielskiego (52% z lewej do prawnej strony przycisku rodzicielskiego, i 49
- Ustaw wielkość na {1.20, 0},{0.9, 0} aby rozszerzyć obszar etykiety poza przyciskiem (120% poziomie poziomie i 90% poziomie poziomie).
- Ustaw typ skalowania na dopasuj .
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag miejscu pliku, który programowo wyświetla przyciski dla każdego blastera, skaluje przyciski, gdy gracz wybiera przycisk, który nie jest w centrum uwagi, i przywiąż wybór blastera gracza do ich awatara.
Poniższy skrypt wymaga zestawu skryptów, które działają razem, aby stworzyć wybiór blastera. Gdy gracz dołącza do doświadczenia lub respawnuje w rundę po ich zdrowiu osiągającym zero, ten skrypt aktywuje wszystkie elementy interfejsu użytkownika blastera do momentu, aż gracz wybierze swoją decyzję.
Teraz, gdy gracz dołącza do doświadczenia lub respawnuje w rundę po ich zdrowiu osiągającym zero, interfejs wyboru blastera wyświetla się, mogą one dokonywać wyboru i każdy przycisk funkcjonuje jak oczekiwano.
Przycisk wybuchowy
Przycisk wybuchowy jest komponentem interfejsu, który gracze używają, aby wybuchić swojego blastera, jeśli mają dostęp do doświadczenia za pośrednictwem urządzeniemobilnego lub tabletowego. Doświadczenie laserowe przycisk wybuchu używa przycisku blastera z ikoną przedstawiającą zarówno kroszyk, jak i eksplozję, aby komunikować funkcję przycisku bez tekstu.
Aby dokładnie odtworzyć przycisk wybuchu w eksperymencie Laser Tag :
Utwórz Przycisk Obrazu w obiekcie HUDGui ScreenGui .
W oknie Explorer przeglądaj się do usługi StarterGui .
Przytrzymajте kursor nad jego dzieckiem HUDGui i kliknijте na ikę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wpisz Przycisk Zdjęcia .
W oknie widoku przesuń przycisk, aby gdzieś na naturalny sposób odpoczywał palec gracza, tak abyś mógł zobaczyć wizualne poczucie tego, jak wygląda przycisk na urządzeniegracza, a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://18308375035 aby wyświetlić ikonaprzycisku eksplozji.
- Ustaw PrzyciskNaciśnijObraz na rbxassetid://18308372558 aby wyświetlić odwróconą wersję ikony przycisku kiedy gracz naciśnie przycisk.
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Nazwę na Przycisk wybuchowy .
- Ustaw ScaleType na Fit , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Ustaw Przezroczystość Zdjęcia na 0.3 aby zmniejszyć nieskończoność etykiety aby pasowała do wszystkich czarnych elementów interfejsu w doświadczeniu.
Wpisz UIAspectRatioConstraint do BlastButton , aby upewnić się, że proporcje aspektu przycisku pozostaną takie same bez względu na rozmiar ekranu gracza.
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag pliku, który programowo wyświetla przycisk blastera, gdy gracz używa przycisku dotykowego na urządzeniu, które akceptuje elementy sterującedotykowym.
Poniższy skrypt wymaga zestawu skrypt modułowych, które działają razem, aby ustawić główny Heads Up Display (HUD), w tym setupTouchButtonAsync . Po dołączeniu gracza do rundy i wyboru ich blastera, ten skrypt zapewnia, że wszystkie elementy interfejsu HUD są odpowiednio wyświetlane dla stanu, urządzeniei statusu zespołu gracza.
Teraz, gdy gracz dołącza do doświadczenia i używa dotykowego wejścia na urządzeniu, które akceptuje sterowanie dotykowym, przycisk blastera wyświetla się w górnym prawym rogu przycisku elementy sterujące.
Interfejs gracza
Po wdrożeniu zalecanych praktyk z Wireframe Your Layouts , ta sekcja nauczy cię, jak zaimplementować wszystkie elementy interfejsu użytkownika związane ze stanem gracza. Grupowanie elementów interfejsu jest blisko stron ekranu, ponieważ gracze mogą zrozumieć tę peryferalną informację bez odwracania uwagi od rozgrywka.
Wskaźnik gracza
Indykator gracza to komponent UI, do którego gracze odsyłają szybko, aby zrozumieć, do którego zespołu należą, gdy pojawiają się w ich strefie zespołu. Doświadczenie przyciska laserowego zielonego lub różowego zapewnia dwie wersje komponentu gracza w zależności od tego, czy gracz jest na zespołu zielonego lub 2>różowego2>.
Po kierowaniu z Wybierz Motyw Koloru obie wersje wskaźnika gracza łączą kolor zespołu z unikalnym, prostym ikona z minimalnym szczególem, aby pozostały legible na małych ekranach. Dostarczanie dwóch form wizualnych opinii jest ważne, ponieważ pomaga to utrzymać projekt dostępny dla graczy z niedostatecznością wzroku.
Aby dokładnie odtworzyć komponent wskaźnika gracza w eksperymencie Laser Tag :
Utwórz Ramę w obiekcie HUDGui ScreenGui.
- W oknie Explorer przeglądaj się do usługi StarterGui .
- Przytrzymajте kursor nad jego obiektem HUDGui , a następnie kliknijте ikona⊕. Wyświetlony zostanie menu kontekstowe.
- Z menu kontekstowego wpisz Rama .
Wybierz nowy Rama, a następnie w oknie Właściwości,
Ustaw AnchorPoint na 0, 1 , aby ustawić punkt pochodzenia ramy w dolnej części samej siebie (0% z lewej do prawnej strony ramy i 100% z góry do dolnej części ramy).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Nazwę na PlayerDisplay .
Ustaw Pozycję na {0.02, 0},{0.97, 0} aby ustawić ramę blisko dołu lewej strony ekranu.
Ustaw Rozmiar na {0.23, 0},{0.08, 0} aby skrócić i rozszerzyć ramę.
Włącz ClipsDescendants , aby przyciąć dziecię GuiObjects, które się rozciągają poza ramy.
Utwórz kształt poligonalny.
Umieść ImageLabel w PlayerDisplay .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://14304828123 aby wyświetlić ikonatrójkąta.
- Ustaw AnchorPoint na 1, 1 aby ustawić punkt pochodzenia etykiety w lewym dole (100% od lewego do prawego końca etykiety, 100% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw imię na blok .
- Ustaw Pozycję na {1,0},{1,0} aby ustawić etykietę na prawym侧iu ramy.
- Ustaw Rozmiar na 1.858, 0,0.581, 0 , aby rozszerzyć etykietę poza ramy i skrócić ją o niemal połowę długości ramy.
- Ustaw Przezroczystość Zdjęcia na 0.15, aby uczynić etykietę nieco przejrzystą.
- Ustaw ScaleType na Fit , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Umieść UIAspectRatioConstraint w Block , aby upewnić się, że aspekty labelu i jego dzieci UI pozostaną tych samych, niezależnie od rozmiaru ekranu gracza.
- Wybierz nowy wymiar, a następnie w oknie Właściwości ustaw AspectRatio na 13.78.
Utwórz skrzynię dla portretu gracza.
Umieść ImageLabel w PlayerDisplay .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń wskaźnik znaków widocznych assetID w właściwościach Obsługi zdjęć . Skrypty w kroku 7 programowo wpisują portret gracza w etykietę obrazu.
- Ustaw AnchorPoint na 0, 1 , aby ustawić punkt pochodzenia etykiety w lewym dole samej siebie (0% z lewej do prawy lewej strony znaku, 100% z góry do dołu znaku).
- Ustaw Kolor tła3 na 0, 0, 0, aby ustawić kolor tła etykiety na czarny.
- Ustaw Przezroczystość tła na 0.3, aby zmniejszyć nieskazitelną część interfejsu o 30%, i zbazować wszystkie czarne elementy interfejsu w doświadczeniu.
- Ustaw Nazwę na PlayerPortrait .
- Ustaw Pozycję na {0.11, 0},{1, 0} aby ustawić etykietę na lewej stronie kształtu poligonalnego.
- Ustaw Rozmiar na {0.23, 0},{1, 0} aby zmniejszyć etykietę.
- Ustaw Przezroczystość Zdjęcia na 0.15, aby uczynić etykietę nieco przejrzystą.
- Ustaw ScaleType na Fit , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Utwórz UIAspectRatioConstraint w PlayerPortrait , aby upewnić się, że aspekt rozmiaru etykiety i jej dzieci pozostaje ten sam, niezależnie od rozmiaru ekranu gracza.
- Utwórz Róg w PlayerPortrait , a następnie w oknie 1>Właściwości1> ustaw 4>CornerRadius4> na 7> 0.05, 07> do nieco zaokrąglenia kątów.
Utwórz etykietę tekstową dla imienia gracza.
Utwórz obiekt TextLabel w PlayerDisplay.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0, 0.5 aby ustawić nowy punkt pochodzenia przycisku w środku lewej strony (0% z lewej strony na prawą i 50% z góry na dołę strony).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Nazwę na PlayerNameTextLabel .
- Ustaw Pozycję na {0.35, 0},{0.72, 0} do ustawienia etykiety na prawym侧u jej pojemnika (35% z lewej do prawnej strony rodzicielskiej etykiety i 72% z góry do dołu rodzicielskiej etykiety).
- Ustaw Rozmiar na {0.52, 0},{0.3, 0} , aby tekst zajmował większość obszaru kształtu poligonalnego (52% poziomie i 30% poziomie wysokości).
- Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
- Ustaw Ciężar na Bold aby zgrubić czcionkę.
- Usuń tekst placeholder w właściwości tekst . Skrypty w kroku 7 programowo wpisują imię gracza w polu labelu tekstu.
- Włącz TextScaled .
- Ustaw TextXAlignment na Left .
Utwórz ikony i kolory zespołu, które są pokazane po lewej stronie portretu gracza.
Utwórz katalog w PlayerDisplay i zmień jego nazwę na TeamIcons .
Utwórz zielony znak zespołu i kolor.
- Wpisz ImageLabel do TeamIcons .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0, 1 , aby ustawić punkt pochodzenia etykiety w lewym dole samej siebie (0% z lewej do prawy lewej strony znaku, 100% z góry do dołu znaku).
- Ustaw Kolor tła3 na 88, 218, 171, aby ustawić kolor tła etykiety na zielony ment.
- Ustaw Nazwę na TeamAIcon .
- Ustaw Pozycję na {0, 0},{1, 0} aby ustawić etykietę na lewej stronie ramy.
- Ustaw Rozmiar na {0.135, 0},{0.58, 0} aby zmniejszyć etykietę po lewej stronie portretu gracza.
- Ustaw Przezroczystość obrazu na 1, aby uczynić etykietę przejrzystą.
- Konfiguruj niestandardowy atrybut, aby śledzić, że ta etykieta jest dla zespołu zielonego. Ten krok jest bardzo ważny dla skryptów w kroku 7.
- W Oknie Proprietści, przejdź do sekcji tryb atrybutów, a następnie kliknij ikonaplusa. Wyświetli się okienko dialogowe.
- W polu imię wpisz kolor zespołu .
- W menu Typ w menu spadającym, wybierz KolorKlocki .
- Kliknij przycisk Zapisz .
- Ustaw nowy atribut teamColor na Mint .
- Utwórz UIAspectRatioConstraint w TeamAIcon , aby upewnić się, że aspekt rozmiaru etykiety i jej dzieci pozostaje ten sam, niezależnie od rozmiaru ekranu gracza.
- Utwórz ikona.
- Wpisz ImageLabel do TeamAIcon .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://14309678670 aby wyświetlić zielony ikonazespołu.
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Nazwę na Ikone .
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jej ojcowskiej etykiety.
- Ustaw Rozmiar na {0.7, 0},{0.6, 0} aby zmniejszyć etykietę.
- Ustaw ScaleType na Fit , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
Utwórz różowy znak zespołu i kolor.
- Duplikuj TeamAIcon i jego dzieci.
- Wybierz podwójny Ikona Zespołu , a następnie w oknie Właściwości ,
- Ustaw Kolor tła3 na 255, 170, 255 , aby ustawić kolor tła etykiety na carnation pink.
- Ustaw Nazwę na TeamBIcon .
- Ustaw atrybut teamColor na Karnacja Różowa .
- Wybierz duplikat Icon dziecko TeamBIcon , a następnie w oknie Właściwości ustaw 1> Obraz1> na 4> rbxassetid://14309678549 4> , aby wyświetlić różowy ikonazespołu.
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag położenie pliku, który programowo wyświetla wskazówkę gracza z odpowiednim kolorem i ikoną, gdy gracz jest aktywny w rundzie.
Poniższy skrypt wymaga zestawu skrypt modułowych, które działają razem, aby ustawić główny Heads Up Display (HUD), w tym startSyncingTeamColor, setPlayerName i setPlayerPortrait. Po dołączeniu gracza do rundy i wyboru jego blastera ten skrypt zapewnia, że wszystkie elementy interfejsu HUD są odpowiednio wy
Teraz, gdy gracz dołącza lub ponownie do rundy po odrodzeniu, wskaźnik gracza wyświetlany jest w dolnej lewej części ekranu.
Ekran sił pola
Ekran sił pola możliwości to element interfejsu, który okrywa widok, aby poinformować graczy, że są bezpieczni przed wrogim ogniem zespołu, podczas gdy dołączają lub dołączają ponownie do rundy. Śledząc zasadnicze kierunki kryształków z Wybierz styl artystyczny, interfejs sił
Aby dokładnie odtworzyć ekran pola siłowego w ramach doświadczenia Laser Tag :
Umieść ImageLabel w objekcie ForceFieldGui ScreenGui
W oknie Explorer przeglądaj się do usługi StarterGui .
Następnie kliknij na jego dziecko ForceFieldGui obiekt, a następnie kliknij na ikę ⊕ . Wyświetlony zostanie kontekstowy menu.
Z menu kontekstowego wpisz ImageLabel .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Obraz na rbxassetid://14462567888 .
Ustaw Przezroczystość tła na 0.8, aby uczynić pole siłowe przejrzystym.
Ustaw Rozmiar na {1, 0},{1, 0} aby wypełnić obraz cały ekran (100% poziomie poziomie i 100% poziomie poziomie rodzic ScreenGUI).
Ustaw ScaleType na Płytki , aby ułożyć płytki hexagonowe na całym ekranie.
Ustaw rozmiar płytki na {0, 104},{0, 180} .
Utwórz obiekt UIGradient w etykiecie.
Wybierz nowy obiekt gradientowy, a następnie w oknie Właściwości ,
Ustaw Kolor na kolej kolorów, która zaczyna się od niebieskiego, zamienia biały, a następnie zamienia się na niebieski ponownie.
Ustaw Kolor na 120, 192, 250, aby zastosować jaśniejszy odcień niebieskiego do wszystkich sześciokątów.
Kliknij właściwość Kolor, a następnie kliknij przycisk ⋯. Wyświetli się wtedy okienko koloru.
Każdy trójkąt na osi dolnej koloru jest punkt kluczowy, który określa wartość koloru właściwości w tym punkcie obrazu z lewej do prawej strony.
Kliknij i przeciągnij na kolej kolorów, aż dotrzesz do wartości Czas0.05, a następnie kliknij mały kwadrat obok Kolor, aby otworzyć okienko 2>Kolory2>.
Wybierz białą, a następnie zamknij okno.
Kliknij i przeciągnij na kolej kolorów, aż osiągniesz wartość Czas w wartości 0.95, a następnie otwórz okienko Kolory ponownie i wybierz biały kolor, jaki było przedtem.
Ustaw Rotation na 225, aby wyświetlić część niebieską w Twojej kolejności kolorów w górnym lewym i dolnym prawym kątach.
Ustaw Przezroczystość na sequencję liczb, która sprawia, że pole siłowe wygląda jak migota.
Kliknij właściwość Przezroczystość , a następnie kliknij przycisk ⋯ . Wyświetli się numeryczna kolejka znaków. Każdy kuadr na początku i końcu numerynej kolejki jest punktem dostępu, który określa wartość przejrzystości w danym momencie obrazu z lewej do prawej strony.
Ustaw następujące wartości czasowe i parametry w kolejności liczb:
- Czas = 0 , Wartość = 0> 0.250>
- Czas = .101 , Wartość = 0> 0.8750>
- Czas = .183 , Wartość = 0> 00>
- Czas = .3 , Wartość = 0> 10>
- Czas = .7 , Wartość = 0> 10>
- Czas = 1 , Wartość = 0> 0.90>
Powtórz ImageLabel z kroku 2.
Wybierz obiekt UIGradient w duplikowanej etykiecie, a następnie w oknie Właściwości ,
Ustaw Rotację na -45, aby odwrócić obraz tak, aby prawie się odzwierciedlały jeden drugiemu wzdłuż osi Y.
Zmodyfikuj Przezroczystość , aby uczynić migotać bardziej organiczne.
- Kliknij właściwość Przezroczystość , a następnie kliknij przycisk ⋯ . Wyświetla się numeryczna kolejka.
- Wybierz trzeci klucz, a następnie kliknij przycisk Usuń .
Odwołaj się do następujących ReplicatedStorage skryptów w Laser Tag położenie pliku, który programowo wyświetla ekran pola sił podczas gdy gracz dołącza lub dołącza ponownie do rundy.
Kolejny ReplicatedStorage.ForceFieldClientVisuals skrypt klienta zastępuje domyślny ForceField wizual z StarterGui.ForceFieldGui . Gdy gracze ładową się do doświadczenia i pojawiają się na 2>Class.Spawn
Ten skrypt zaczyna się słuchać, gdy ForceField jest dodany do postaci, wyłącza wizualne w polu sił postaci, a następnie włącza obiekt ForceFieldGui ScreenGui. Uwaga, że to nie wpływa na wizualne postaci graczy, gdy gracze patrzą na innych graczy respawning back into the experience.
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 pojawi się na punkcie z siłami pola dezaktywowanymi
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 rundy po odrodzeniu, nowy interfejs użytkownika pola siłowego wyświetla się zamiast standardowych wizualizacji pierwszej osoby ForceField .
Odrodzić ekran
Ekran respawnu jest elementem UI, który zmniejsza widok, aby poinformować graczy, że zostali wyeliminowani, a że serwer jest w trakcie respawningu ich ponownie do ich strefy spawnu. Ten element UI jest ważny, ponieważ daje graczom czas na przetrawienie tego, że zostali wyeliminowani, i strategizują ich następny ruch, zanim dołączą do aktywnej rundy.
Dla więcej informacji na temat niestandardowego zachowania respawnowania w eksperymentalnej wersji Tagu Laserowego, zobacz Respawn Characters z kuratorium Gameplay Scripting.
Aby dokładnie odtworzyć ekran respawn w ramach doświadczenia Laser Tag :
Utwórz baner informacji w centrum.
Utwórz ImageLabel w obiekcie OutStateGui ScreenGui
W oknie Explorer przeglądaj się do usługi StarterGui .
Przytrzymajте kursor nad jego dzieckiem OutStateGui i kliknijте na ikę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wpisz ImageLabel .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić nowy punkt pochodzenia przycisku w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jej kontenera (50% z lewej do prawy z lewej strony ekranu głównego, i 50% z góry do dołu z lewej strony ekranu głównego).
Ustaw Rozmiar na {0.48, 0},{0.06, 0} aby zmniejszyć etykietę (48% poziomowo i 6% poziomo rodzicielskiego GUI ekranu).
Ustaw imię na blok .
Ustaw Obraz na rbxassetid://14304827265 , aby uczynić obraz trapezoidem.
Ustaw Kolor obrazu na 0,0,0, aby uczynić czarny trapezoid.
Ustaw Przezroczystość Zdjęcia na 0.3 aby zmniejszyć niewidzialność etykiety o 30% i zbierać wszystkie czarne elementy interfejsu w doświadczeniu.
Umieść UIAspectRatioConstraint w Block , aby upewnić się, że aspekty labelu i jego dzieci UI pozostaną tych samych, niezależnie od rozmiaru ekranu gracza.
Wybierz nowy wymiar, a następnie w oknie Właściwości ustaw AspectRatio na 13.78.
Wpisz TextLabel do Block dla tekstu informacyjnego.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jej ojcze {0.5, 0},{0.5, 0} do 0.5, 0,0.5, 0 aby ustawić label na górze 2>do2> do dna 5>0.5, 0,0.5, 05>).
Ustaw Rozmiar na {.85, 0},{0.55, 0}, aby tekst zajmował większość obszaru trapezu (85% poziomo i 55% poziomo rodzicielskiego etykiety).
Ustaw Imię na BodyTextLabel .
Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
Ustaw Ciężar na Bold aby zgrubić czcionkę.
Ustaw tekst na respawning… .
Ustaw Kolor tekstu3 na 255, 255, 255 , aby tekst był biały.
Włącz TextScaled .
Utwórz nagłówkę.
Wpisz ImageLabel do Block .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części siebie (50% z lewej do prawnej strony etykiety i 100% z góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Pozycję na {0.5, 0},{0, 0} aby ustawić etykietę na górze środku jego rodzic {0.5, 0},{0, 0} (50% z lewej do prawy z lewej strony rodzic Tagu i 0% z górnej do dołu jego rodzic 2>Tagu2>).
Ustaw rozmiar na 0.46, 0,0.56, 0 #0.46, 0,0.56, 0, aby rozszerzyć etykietę (46% poziomo i 56% poziomo w przypadku rodzicielskiej etykiety).
Ustaw imię na nagłówku .
Ustaw Obraz na rbxassetid://14304826985, aby uczynić obraz wielowymiarowym zanikiem.
Ustaw Kolor obrazu na 245, 46, 46 , aby uczynić czerwony zaniknąć, aby oznaczyć, że gracz jest tymczasowo nieaktywny, gdy są wyłączeni z rundy.
Wprowadź TextLabel do Header dla tekstu informacyjnego.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jej ojcze {0.5, 0},{0.5, 0} do 0.5, 0,0.5, 0 aby ustawić label na górze 2>do2> do dna 5>0.5, 0,0.5, 05>).
Ustaw rozmiar na {.85, 0},{0.55, 0} , aby tekst zajmował większość obszaru zanikania (85% poziomie i 55% poziomie względem rodzicielskiej etykiety).
Ustaw imię na HeaderTextLabel .
Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
Ustaw Ciężar na Czarny aby zwiększyć czcionkę.
Ustaw tekst na zaznaczone - WYJDŁEŚ! 9. Ustaw Kolor tekstu3 na 255, 255, 255 , aby tekst był biały.
Włącz TextScaled .
Utwórz zanikanie po obwodach ekranu.
- Wpisz ImageLabel do OutstateGui .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
- Ustaw Kolor tła3 na 0,0,0, aby ustawić kolor tła etykiety na czarny.
- Ustaw Przezroczystość tła na 0.5, aby uczynić tło etykiety przezrożystszym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jego kontenera (50% z lewej do prawnej strony GUI rodzica i 50% z góry do dołu GUI rodzica).
- Ustaw Rozmiar na 1, 0,1, 0 5> aby rozszerzyć etykietę na cały ekran (100% poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie poziomie po
- Ustaw ZINDEX na -1, aby wyświetlić zanikanie za pozostałymi elementami interfejsu.
- Ustaw imię na nagłówku .
- Ustaw Obraz na rbxassetid://14309518613 aby uczynić obraz zanikającym granicą.
- Ustaw Przezroczystość Zdjęcia na 0.1, aby uczynić zmniejszenie nieznacznie translucentne.
Aby poprawić wykonywanie, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z niestandardową kolejnością liczb transparency. Aby dowiedzieć się więcej o tej technice wyblokowania, zobacz Wygląd UI - Gradient.
Zobacz przykładowy ReplicatedStorage skrypt w Laser Tag położenie pliku, który programowo wyświetla ekran respawn, gdy zdrowie gracza osiągnie zero, a oni są w trakcie respawningu do swojego teamu's spawn zone.
Kolejny ReplicatedStorage.PlayerStateHandler skrypt klienta zawiera funkcje, które wykonują różne rodzaje zachowań, w zależności od właściwości playerState. Wszystkie odpowiadające wydarzenia są logycznie zespożone w tym skrypcie, ponieważ wymagają podobnego zachowania włączania lub wyłączania sterowania elementy sterujące, ruchu kamery i która warstwa UI jest widoczna.
Gdy zdrowie gracza osiągnie zero, jego playerState staje się TaggedOut, co wyzwala funkcję onTaggedOut(). 2>onTaggedOut2> natychmiastowo wyzwala następujące zachowanie:
- Gracz nie może się poruszać po arenie.
- Gracz nie może poruszać swoją kamerą.
- Gracz nie może użyć swojego blastera.
- StarterGui.OutStateGui staje się wyłącznie włączony.
Gdy gracz się odrodzi, jego playerState staje się SelectingBlaster, co wyzwala funkcję onSelectingBlaster(). Następnie wyłącznie włącza 2>StarterGui.PickABlasterGui2>, co automatycznie wyłącza ekr
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 interfejsu, z wyjątkiem podanego wyjątku
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- GUILAYERS zawiera listę guis, 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 rozejrzeć się, wybierając broń
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)
-- Zapisz logikę sił zniszczenia, gdy gracz zacznie grać
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Wyłącz sterowanie podczas gdy jesteś wyłączony
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Wyłącz blaster, gdy jesteś niemarkowany
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Włącz sterowanie podczas lokatora
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Ukryj wszystkie HUD w lobby
setGuiExclusivelyEnabled(nil)
-- Wyłącz blaster 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(`Invalid player state ({newPlayerState})`)
end
end
-- Zarządzaj początkowym stanem gracza, jeśli ustawiać
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Zarządzaj przyszłymi aktualizacjami stanu gracza
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Upewnij się, że zmiany nadal zastosowane są po odrodzeniu
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Teraz, gdy zdrowie gracza osiągnie zero, ekran odrodzenia się wyświetla, aż gracz odrodzi się ponownie w swojej strefie odrodzenia.
Teraz, gdy jesteś zapoznany z common GuiObjects for on-screen UI, spróbuj ponownie stworzyć RoundResultsGui ScreenGui obiekt i wszystkie jego dzieci dla ekranu podczas gdy gracze wygrywają lub
Utwórz obiekty SurfaceGui
Aby wyświetlić UI na powierzchni części w przestrzeni 3D, która reaguje na logikę skryptową dla każdego pojedynczego gracza, możesz zroodować obiekt Class.SurfaceGui do części, którą chcesz wyświetlić swoją UI w usłudze SurfaceGui. Ta technika zapewnia, że Twoja interfejs i jego logika
SurfaceGui obiekty zawierają wszystkie GuiObjects które wyświetlają się na powierzchni części w przestrzeni 3D. Doświadczenie laserowe tagu sampla tylko uwzględnia jedną instancję SurfaceGui obiektu: coold
Aby utworzyć obiekt SurfaceGui :
W oknie Explorer , serwis ReplicatedStorage , nawiguj po 1> ikonamenu kontekstowego.
Z menu kontekstowego wpisz obiekt Część .
Utwórz obiekt ScreenGUI w części.
Zmień nazwę SurfaceGui zgodnie z kontekstem jego elementów interfejsu dzieci.
Powtórz ten proces dla każdego elementu interfejsu, który musisz wyświetlić na powierzchni części w przestrzeni 3D.
Miernik czasu odnowienia
Mierzalnik czasu odnowienia to komponent interfejsu, który informuje graczy, ile czasu muszą czekać, zanim mogą wybuchnąć swojego blastera ponownie. Ta niewielka przerwa zapobiega graczom odkrywaniu, jak szybko mogą kliknąć lub nacisnąć przycisk, co jest nieprawdopodobne dla rozgrywkaw laser tagi.
Aby dokładnie odtworzyć licznik czasu odnowienia w eksperymencie Laser Tag :
Utwórz część, aby trzymać twój obiekt SurfaceGui.
- W oknie Explorer, Przyciskiem Pracy, ikona⊕. Wyświetla się menu kontekstowe.
- Z menu kontekstowego wstaw część blok . Jest to tymczasowa lokalizacja dla części, abyś mógł zobaczyć zmiany w każdym kroku procesu.
Pozycjonuj i orientuj część wokół pozycji, w której znajduje się ich narczyńca, a następnie w oknie Właściwości ,
Ustaw Przezroczystość na 1, aby całkowicie przepuścić część.
Ustaw Nazwę na CooldownBarPrefab .
Ustaw Rozmiar na 0.169, 0.027, 2.537 aby skalować część do rozmiaru około długości blastera.
Wyłącz Możliwość kolidy i Możliwość zapytania .
Wprowadź SurfGuigui do CooldownBarPrefab.
Wybierz nowy SurfaceGui, a następnie w oknie Właściwości,
Ustaw Twarz na Górę , aby UI wyświetlała się w kierunku w górę.
Ustaw LightInfluence i MaxDistance na 0.
Ustaw Pikseli na studiu na 200.
Utwórz czarną linię.
Wprowadź ImageLabel w SurfaceGui .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
- Ustaw Kolor tła3 na 0,0,0, aby ustawić kolor tła etykiety na czarny.
- Ustaw Przezroczystość tła na 0.4, aby uczynić tło etykiety półprzezroczystym.
- Ustaw pozycję na {0.5, 0},{0.5, 0} , aby ustawić etykietę w środku jej kontenera (50% z lewej do prawy róg SurfaceGui i 50% z góry do dołu SurfaceGui).
- Ustaw rozmiar na {1, 0},{1, 0} aby rozszerzyć etykietę na całą część (100% poziomie i 100% poziomie SurfaceGui).
- Ustaw Nazwę na Kontener .
Okrągaj kąty kontenera.
Utwórz obiekt Kąt Uliczny w Container.
Wybierz Róg, a następnie w oknie Właściwości ustaw KątPodziału na 2> 0.15, 02> do nieco zaokrąglenia kątów.
Utwórz czerwony pasek.
- Umieść ImageLabel w Container .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość Obrazu .
- Ustaw AnchorPoint na 1, 0.5 aby ustawić punkt pochodzenia etykiety w środku prawego centrum siebie (100% z lewej do prawnej strony labelu i 50% z góry do dołu labelu).
- Ustaw Kolor tła3 na 172, 13, 13 aby ustawić kolor tła etykiety na czerwony.
- Ustaw Przezroczystość tła na 0.2, aby zrobić tło labelu nieco przejrzystym.
- Ustaw Nazwę na Bar .
- Ustaw Pozycję na {1, 0},{0.5, 0} aby ustawić etykietę w środku prawego jego pojemnika (100% z lewej do prawnej strony rodzicielskiej etykiety i 50% z góry do dołu jego rodzicielskiej etykiety).
- Ustaw Rozmiar na {0, 0},{1, 0} , aby wydłużyć etykietę do góry jej ojczyka label (0% poziomie poziomu i 100% poziomie poziomu). Ten krok jest również korzystny dla zachowania tweeningu, które następuje w skryptach w kroku 8.
Okrągaj kąty etykiety.
- Wprowadź obiekt UICorner w Bar.
- Wybierz Róg, a następnie w oknie Właściwości ustaw KątPodziału na 2> 0.15, 02> do nieco zaokrąglenia kątów.
Przenieś CooldownBarPrefab do ReplicatedStorage .
Utwórz strukturę katalogu, aby zorganizować swoje obiekty UI. Przykład używa Instancje katalogu z dzieckiem Guis katalogu.
Przenieś CooldownBarPrefab do Guis .
Zweryfikuj następujące ReplicatedStorage skrypcje w Laser Tag położeniu pliku, który programowo przywiązuje miernik przeciągu do blastera gracza, a następnie animuje czerwone pasek po wybuchu blastera gracza.
Kolejny ReplicatedStorage.FirstPersonBlasterVisuals skrypt kliencki traktuje wszystkie obliczenia wizualne dla gracza w pierwszej osobie. Wymaga zestawu skryptów modułowych, które działają razem, aby ustawić wizualne animacje blastera, które czują się bardziej realistyczne dla rozgrywkaw tagi laserowe, w tym
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 pierwszą osobę rygiel
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Dodaj barwę spadkową
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 barwę odliczania, ponieważ jest ona powiązana z wiertnicą
rigModel:Destroy()
rigModel = nil
end
end
-- Bieżące efekty wizualne pierwszej osoby po pojściu w爆炸
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Zwiąż ryg z kamerą, jeśli istnieje
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aktualizuj CFrame rygielu w odniesieniu do pozycji kamery i RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Ręczne zmiany wizualne, gdy zmienia się blasterType podczas gry
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Ręczne zmiany wizualne, gdy zmienia się stan gracza
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Usuń wizualizacje, gdy gracz wybiera blaster lub jest w lobby
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Dodaj wizualizacje, gdy gracz skończy z wyborem broni.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Teraz, gdy gracz wali swojego blastera, animacja baru spadku pozwala komunikować się, gdy gracz może zaatakować ponownie.
Utwórz obiekty BillboardGui
Aby wyświetlić elementy UI w przestrzeni 3D, które odpowiadają na zachowanie skryptu i zawsze stoją przed każdą kamerą gracza, niezależnie od ich kąta widzenia, takich jak imiona graczy lub znaki mapy, możesz utworzyć obiekt BillboardGui jako dziecko BasePart lub Attachment, które istnieje
Doświadczenie laserowego tagu przykładowego obejmuje dwa osobne obiekty BillboardGui w usłudze ReplicatedStorage :
- OtherPlayerIndicatorGuiPrefab - Wyświetla różowy lub zielony krążek nad każdą głową gracza, gdy jest aktywny w rundzie.
- TaggedOutIndicatorGuiPrefab - Wyświetla powyżej głowy gracza, gdy zostanie wyeliminowany z rundy.
Po utworzeniu obiektu BillboardGui możesz utworzyć i dostosować jego dziecko GuiObjects zgodnie z celami każdego pojemnika. Aby pokazać, w natychmiastowych sekcjach, które obserwować, nauczysz się implementować elementy UI dla obu typów znaków laserowych w doświadczeniu laser tagu próbkowego. <
Aby utworzyć obiekt BillboardGui :
- W oknie Explorer, nadajте kursor nad Class.BasePart lub 2> Class.Attachment2>, a następnie kliknijте na ikę 5> ⊕5>. Wyświetla się menu kontekstowe.
- Z menu kontekstowego wpisz obiekt BillboardGui .
- Zmień nazwę BillboardGui zgodnie z kontekstem jego elementów interfejsu dzieci.
- Powtórz ten proces dla każdego elementu interfejsu, który musisz wyświetlić w odpowiednim kontekście nad głowami graczy.
Wskaźnik zespołu
Indykatór zespołu to element UI, który informuje graczy, do którego zespołu należą inni gracze w rundzie, aby mogli łatwo rozróżnić między swoimi sprzymierzeńcami a członkami zespołu wrogiego. Ta informacja jest ważna, ponieważ w grze pierwszej osoby doświadczenie strzelca wymaga graczy, aby podjęli szybkie strategiczne decyzje, gdy są w strefach dopasowywać, aby nie zostali oznaczen
Aby dokładnie odtworzyć wskaźnik zespołu w eksperyencji Laser Tag :
Umieść obiekt BillboardGui na tymczasowej rygze.
W menu Przejdź do zakładki Awatar, a następnie kliknij na Budowniczy Rozkładu.
Wybierz z dostępnych opcji. Samplik używa R15 wpisywaćrury, kształtu żeńskiego ciała i Rthro awatara. Rig wyświetla obie w oknie 3D pod nazwą 2> Rig2>.
W oknie Explorer , przejдиź do dzieci Head siatki, a następnie kliknij ikona ⊕ . Wyświetlony zostanie menu kontekstowe.
Z menu kontekstowego wpisz BillboardGui .
Wybierz nowy BillboardGui, a następnie w oknie Właściwości,
Ustaw LightInfluence na 0, aby zapobiec wpływowi środowiskowego światła na kolor wskaźnika.
Ustaw Nazwę na OtherPlayerIndicatorPrefab .
Ustaw Rozmiar na {0, 10},{0, 10} aby znacznie zmniejszyć etykietę.
Ustaw StudsOffsetWorldSpace na 0, 4, 0 aby położyć go ponad głową kadłubu.
Utwórz obiekt Rama w OtherPlayerIndicatorPrefab .
Wybierz nową ramę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia ramy w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw Kolor tła3 na 255, 3, 0 aby ustawić kolor tła ramy jako kolor zapasowy.
Ustaw pozycję na {0.5, 0},{0.5, 0} , aby ustawić ramę w środku jego kontenera (50% z lewej do prawnej strony BillboardGUI i 50% z góry do dołu BillboardGUI).
Ustaw Rozmiar na {1, -2},{1, -2} aby skrócić ramę do powierzchni obszaru BillboardGUI.
Utwórz obiekt UICorner w Ramie , aby całkowicie zaokrącić kąty.
Utwórz obiekt UIStroke w Ramie , aby zarysować krąg wskaźnika.
Przenieś OtherPlayerIndicatorPrefab do ReplicatedStorage .
Odwołaj się do poniższego ReplicatedStorage skryptu w pliku źródłowym Laser Tag 1A położenie, które programowo wyświetla identyfikator zespołu dla każdego gracza w aktywnej rundzie, chyba że są na zespołach wrogich i zamkniętych.
Następujący ReplicatedStorage.OtherPlayerIndicatorGuiSetup skrypt zostaje uruchomiony, gdy gracze zostaną przywołani na arenę na rundę aktywną. Przywiązuje on składnik zespołu, wykonując funkcję
Jeśli inni gracze są w tej samej drużynie, wskaźnik zespołu zawsze się wyświetla, nawet jeśli ukrywają się za obiektami w przestrzeni 3D; jeśli inni gracze są w drużynie wroga, wskaźnik zespołu wyświetla się tylko wtedy, gdy nie ma obiektu w przestrzeni 3D, aby je pokryć.
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 tylko wskaźniki graczom uczestniczącym w rundzie
if not otherPlayer.Team then
return
end
-- Unikaj dodawania podwójnych wskaźników, tworzenia nowego tylko wtedy, jeśli 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 zawsze jest na górze, chyba że 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 zespołu wyświetlają się nad głowami innych graczy, chyba że są na zespołach wrogich i za obiektem.
Wskaźnik zaznaczony
Wyznaczony przez określonego oznaczenia identyfikator jest elementem interfejsu użytkownika, który informuje graczy, gdy inni gracze nie są już aktywni w rundzie i są w trakcie re生u w powrót do ich strefy spawn. Ta informacja jest ważna, ponieważ interfejs gry w trybie pierwszej osoby strzelającej wymaga graczy, aby przenieść się na następny cel, gdy gracze tagują innego grac
Aby dokładnie odtworzyć oznaczonego wskaźnika w eksperyencji Laser Tag :
Utwórz obiekt BillboardGui w tymczasowej rygiel, abyś mógł wizualizować zmiany w każdym kroku procesu.
W menu Przejdź do zakładki Awatar, a następnie kliknij na Budowniczy Rozkładu.
Wybierz z dostępnych opcji. Samples używa R15 wpisywaćrury, męskiego kształtu ciała i Rthro awatara. Rig wyświetla obie w oknie 3D pod nazwą 2> Rig2> .
W oknie Explorer , przejдиź do dzieci Head siatki, a następnie kliknij ikona ⊕ . Wyświetlony zostanie menu kontekstowe.
Z menu kontekstowego wpisz BillboardGui .
Wybierz nowy BillboardGui, a następnie w oknie Właściwości,
Ustaw LightInfluence na 0, aby zapobiec wpływowi środowiskowego światła na kolor wskaźnika.
Ustaw imię na TaggedOutIndicatorGuiPrefab .
Ustaw Rozmiar na {3, 0},{0.5, 0} aby powiększyć przestrzeń dla etykiety.
Ustaw StudsOffset na 0, 3.25, 0 aby położyć go ponad głową gracza.
Utwórz obiekt ImageLabel w TaggedOutIndicatorGuiPrefab .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
- Ustaw Imię na Rama .
- Ustaw pozycję na {0.5, 0},{0.5, 0} , aby ustawić etykietę w środku jej kontenera (50% z lewej do prawy z lewej strony głównego bilboardu GUI i 50% z góry do dołu głównego bilboardu GUI).
- Ustaw wielkość na {1, 0},{1, 0} aby rozszerzyć etykietę do całego BillboardGui (100% poziomie i 100% poziomie w górę od rodziciela BillboardGui).
- Ustaw Obraz na rbxassetid://14304826985, aby uczynić obraz wielowymiarowym zanikiem.
- Ustaw Kolor obrazu na 245, 46, 46 , aby nadać etykietom czerwony kolor.
Aby poprawić wykonywanie, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z niestandardową kolejnością liczb transparency. Aby dowiedzieć się więcej o tej technice wyblokowania, zobacz Wygląd UI - Gradient.
Wprowadź obiekt TextLabel do ramy.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw AnchorPoint na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku siebie (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Imię na BodyTextLabel .
Ustaw Pozycję na {0.5, 0},{0.5, 0} aby ustawić etykietę w środku jej pojemnika (50% z lewej do prawnej strony etykiety i 50% z góry do dołu etykiety).
Ustaw wielkość na {0.85, 0},{0.7, 0}, aby tekst mógł zająć większość obszaru zanikania (85% poziomie i 70% poziomie względem etykiety rodzicielskiej).
Ustaw FontFace na Montserrat , aby pasować do estetyki przyszłości.
Ustaw Ciężar na Bold aby zgrubić czcionkę.
Ustaw tekst na zaznaczony .
Ustaw Kolor tekstu3 na 255, 255, 255 , aby tekst był biały.
Włącz TextScaled .
Przenieś TaggedOutIndicatorGuiPrefab do ReplicatedStorage .
Odwołaj się do następujących ServerScriptService skryptów w Laser Tag 1A pliku, który programowo wyświetla znacznik zaznaczony, gdy gracz powraca do swojego zespołu.
Następny ServerScriptService.SetupHumanoid skrypt serwera zostanie uruchomiony, gdy gracz ładowałby doświadczenie. Zapewnia to, że za każdym razem, gdy postać gracza jest dodana do modelu danych, setupHumanoidAsync jest wzywana 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)
-- Zadzwoń naCharacterAdded, jeśli gracz już ma postać
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Zadzwoń naCharacterAdded dla wszystkich przyszłych spawów postaci dla tego gracza
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Weź callPlayerAdded dla dowolnych graczy już w grze
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Call onPlayerAdded dla wszystkich przyszłych graczy
Players.PlayerAdded:Connect(onPlayerAdded)
Teraz, gdy zdrowie gracza osiągnie zero, wskaźnik oznaczony pojawia się nad ich głową, aż do czasu respawnu.
Gratulacje za ukończenie kursu projektowania interfejsu użytkownika! Teraz, gdy masz doświadczenie w tworzeniu stylu artystycznego, wireframing swoich layoutów i implementowania swoich projektów w Studio od początku do końca, możesz rozszerzyć swoje projekty nowymi interfejsami użytkownika i funkcjonalnościami, takimi jak Gameplay Scripting Curriculum, który