Wdrożenie projektów to proces tworzenia prototypów w Studio za pomocą zarówno wbudowanych, jak i niestandardowych elementów interfejsu użytkownika za pomocą skryptów, które uruchamiają Twoje interakcje interfejsowe kontekstowo.Ten ekscytujący krok samouczka to miejsce, w którym możesz zobaczyć wszystkie swoje projekty i ciężką pracę połączyć w spójną serię przepływów pracy, które są kompletne i gotowe do interakcji z graczem.
Używając pliku próbnego tagu laserowego pliku jako odniesienia, ten rozdział projektu interfejsu użytkownika pokazuje, jak przynieść swoje plany UI do życia, w tym wskazówki dotyczące:
- Zbieranie identyfikatorów zasobów z biblioteki zasobów interfejsu użytkownika, abyś mógł odtworzyć komponenty interfejsu użytkownika próbnego tagu laserowego.
- Emulowanie różnych urządzeń bezpośrednio w Studio, aby zobaczyć, jak twoja interfejs wygląda na różnych ekranach i proporcjach aspektu.
- Tworzenie ScreenGui , SurfaceGui i BillboardGui obiektów do wyświetlania interfejsu użytkownika na ekranach graczy, powierzchni części i w przestrzeni 3D, odpowiednio.
Po przejrzeniu technik w tej sekcji możesz zastosować je do własnych projektów, aby stworzyć ekscytujące komponenty interfejsu użytkownika, które pomagają graczom przeglądać to, co mogą robić w twoich doświadczeniach.
Instrukcje w tej sekcji samouczka pokazują, jak dokładnie odtworzyć komponenty interfejsu za pomocą biblioteki zasobów projektu UI.Proces ten trwa około 90 minut lub mniej od początku do końca.Jeśli nie chcesz używać podanych wartości, możesz dostosować każdy element interfejsu użytkownika do specyfikacji własnego doświadczenia lub użyć próbki samej dla reszty samouczka.
Zdobądź bibliotekę zasobów
Biblioteki zasobów są kolekcjami zasobów, które możesz dodać do swojego zapasu, aby łatwo uzyskać dostęp i ponownie wykorzystać.Biblioteka zasobów, której użyjesz do swojego projektu z Sklepu twórców, zawiera dziewięć zasobów indywidualnych interfejsów 2D oraz ostateczne wersje celu, selektora blastera i komponentów informacji o graczu, które tworzysz w tej sekcji samouczka.
Możesz dodać większość biblioteki do swojego zapasu w Studio, klikając link Dodaj do zapasu w następnym składniku.Gdy aktywa znajdą się w Twoim ekwipunku, możesz ponownie ich użyć w dowolnym projekcie na platforma.
Aby uzyskać bibliotekę zasobów z twojego zapasu do twojego doświadczenia:
W pasku narzędzi wybierz zakładkę Widok .
Kliknij Pudełko narzędzi . Okno Pudełko narzędzi wyświetla się.
W oknie Pudełko z narzędziami , kliknij zakładkę Ekwipunek . Wyświetlają się sortowania Moje modele .
Kliknij menu rozwijane, a następnie wybierz sortować Moje pakiety .
Kliknij pasek Final Screen UI Components , 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ć dowolną z ostatecznych komponentów, aby odwoływać się do ich projektu.
Emuluj urządzenia
Emulator urządzeń w Studio pozwala testować, jak gracze będą widzieć i interakować z Twoją interfejsami na różnych urządzeniach. Narzędzie to jest niezbędną częścią procesu wdrożenia, ponieważ proporcja aspektu twojego widoku w Studio niekoniecznie odzwierciedla proporcję aspektu ekranów, z których korzystają gracze, aby uzyskać dostęp do Twojego doświadczenia, i ważne jest, aby Twoja interfejs był czytelny i dostępny na każdym urządzenie.
Na przykład, jeśli nie przetestujesz swojego interfejsu na różnych rozmiarach ekranów, gracze z dużymi ekranami mogą nie być w stanie odczytać twojego tekstu lub zdekodować twoje ikony, a gracze z małymi ekranami mogą nie być w stanie zobaczyć przestrzeni 3D, ponieważ twoje elementy interfejsu zajmują zbyt dużo miejsca na ekranie.
Aby odtworzyć swój ekran do najmniejszego rozmiaru ekranu:
W pasku narzędzi wybierz zakładkę Test .
Kliknij Urządzenie . Pole widzenia zmienia się, aby odzwierciedlić proporcję aspektu średniego laptopa.
W menu rozdzielania rozdzielczości wybierz Rzeczywistą rozdzielczość .Umożliwia to zobaczenie rzeczywitej rozdzielczości elementów interfejsu użytkownika na urządzeniu, które emulujesz.
W menu rozwijanym urządzenia wybierz urządzenie z najmniejszym rozmiarem ekranu, z którego gracze mogą uzyskać dostęp do Twojego doświadczenia.Chociaż najlepsza opcja zmienia się w zależności od urządzeń, które wspiera twoje doświadczenie, testy próbnego tagu laserowego z iPhone 4S sprawdzają, jak wygląda interfejs z ograniczoną przestrzenią ekranu.
Twórz obiekty ScreenGui
Aby wyświetlać elementy interfejsu użytkownika na ekranie każdego gracza, możesz utworzyć obiekt ScreenGui w usłudze StarterGui.Przedmioty ScreenGui są głównymi pojemnikami dla interfejsu użytkownika na ekranie, a StarterGui usługa kopiuje jej zawartość do każdego pojemnika gracza PlayerGui, gdy wchodzą do doświadczenia.
Możesz utworzyć wiele obiektów ScreenGui , aby zorganizować i wyświetlać grupy elementów interfejsu użytkownika kontekstowo w trakcie rozgrywka.Na przykład, przykładowe doświadczenie z etykietą laserową obejmuje pięć oddzielnych obiektów ScreenGui, które początkowo są wyłączone, dopóki gracze nie spełnią różnych warunków podczas głównego przepływu użytkownika doświadczenia:
- HUDGui - Wyświetla kluczowe informacje o grze doświadczenia, gdy gracze są aktywni w rundzie, takie jak cel i ogólna liczba punktów każdej drużyny.
- PickABlasterGui - Wyświetla wszystkie wybory blasterów, gdy gracze rozpoczynają lub dołączają do rundy.
- ForceFieldGui - Wyświetla sześciokątną siatkę, gdy gracze wybierają blaster i są tymczasowo niepokonani.
- OutStateGui - Wyświetla ciemną obwódkę wokół ekranu, gdy gracze są oznaczane.
- RoundResultsGui - Wyświetla ciemny przekładkę na górze ekranu z informacjami o tym, który zespół wygrał rundę.
Po utworzeniu obiektu ScreenGui możesz utworzyć i dostosować jego dziecko GuiObjects zgodnie z przeznaczeniem każdego kontenera.Aby pokazać, w bezpośrednich sekcjach, które obserwować, nauczysz się, jak wdrożyć elementy interfejsu użytkownika dla trzech kategorii informacji, które muszą wiedzieć gracze, aby odnieść sukces w próbnej laserowej etykiecie doświadczenia. Możesz dostosować dowolną część procesu, aby spełnić specyfikację własnego doświadczenia .
Aby utworzyć obiekt ScreenGui:
W oknie Eksploratora przewiń nad usługę StarterGui , a następnie kliknij ikona ⊕ . Wyświetli się menu kontekstowe.
Wstaw ScreenGui .
Zmień nazwę ScreenGui zgodnie z kontekstem elementów UI dziecka.
Powtórz ten proces dla każdej grupy elementów interfejsu, które musisz wyświetlać na ekranie każdego gracza.
Interfejs celowy
Po przestudiowaniu wizualnej hierarchii najlepszych praktyk z Wireframe Your Layouts, ten rozdział nauczy cię, jak wdrożyć wszystkie elementy interfejsu użytkownika na ekranie związane z celem doświadczenia.Ta grupowanie elementów interfejsu użytkownika jest blisko górnej części ekranu, ponieważ cel i punkty każdej drużyny mają największe znaczenie dla tego, jak wygrać grę.
Na przykład próbka dostarcza obiektywny komponent interfejsu użytkownika, do którego odwołują się gracze, aby wiedzieć, co muszą zrobić, aby odnieść sukces w rundzie.Gdy gracze oznaczają członków drużyny wroga i zdobywają punkty, ten komponent śledzi wynik każdej drużyny przeciwko ogólnemu celowi w ramach polecenia nagłówka.Aby uzyskać wysokopoziomową recenzję wszystkich skryptów klienta i serwera, które współpracują, aby śledzić punkty, zobacz Śledź punkty w programie szkolenia pisania skryptów w grze.
Aby dokładnie odtworzyć interfejs użytkownika celu w ramach próbnego doświadczenia Laser Tag:
Stwórz kontener dla całego komponentu.
Włóż ramę do obiektu HUDGui ScreenGui
- W oknie Eksploratora przełącz się do usługi StarterGui .
- Najedź na jego dziecko HUDGui obiekt, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
- Z menu kontekstowego wstaw ramę .
Wybierz nowe ramię , a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0 , aby ustawić punkt pochodzenia ramy w górnej części samej ramy (50% od lewej do prawej ramy i 0% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na aby ustawić ramę w pobliżu górnej części ekranu (50% od lewej do prawej ekranu i 3% od góry do dołu ekranu, więc jest trochę buforu).
- Ustaw rozmiar na tak, aby elementy ramy zajęły dużą część górnej części ekranu, aby przyciągnąć uwagę graczy (50% poziomo i 13% w pionie).
- Ustaw nazwę na cel .
(Opcjonalnie) Wprowadź wymóg proporcji interfejsu użytkownika do celu , aby zapewnić, że proporcje etykiety pozostają takie same bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 7.
Stwórz pojemnik dla szybkich obiektów celu.
Włóż ramę do celu .
Wybierz nowe ramię , a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0 , aby ustawić punkt pochodzenia ramy w górnej części samej ramy (50% od lewej do prawej ramy i 0% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na , aby ustawić ramę w środku pojemnika (50% od lewej do prawej ramy rodzica i 0% od góry do dołu ramy rodzica).
- Ustaw rozmiar na tak, aby komponenty interfejsu wyboru zajmowały około więcej niż połowę pojemnika od góry do dołu (100% poziomo i 67% w pionie ramy rodzica).
- Ustaw Nazwę na Wygląd celu .
Utwórz elementy tytułowe.
Wstaw etykietę obrazu do wyświetlania celu .
Wybierz Etykietę obrazu , a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej etykiety (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw kolejność układu na .
- Ustaw pozycję na , aby ustawić etykietę w pobliżu górnej środkowej części ramy (50% od lewej do prawej ramy rodzica i 34% od góry do dołu ramy rodzica).
- Ustaw rozmiar na {0.46, 0},{0.34, 0} w celu rozszerzenia obszaru monitu do prawie połowy ramy (46% poziomo i 34% w pionie ramy rodzica).
- Ustaw Nazwę na nagłowie.
- Ustaw Obraz na rbxassetid://14304828123, aby wyświetlić trapezoidę.
- Ustaw Przezroczystość obrazu na 0.15, aby uczynić nagłówek półprzezroczystym.
(Opcjonalnie) Wpisz wymóg proporcji interfejsu użytkownika do etykiety obrazu , aby zapewnić, że proporcje etykiety pozostają takie same bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 13.781 .
Wprowadź Etykietę tekstową w nagłowie , aby wyświetlić tytuł.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} (50% od lewej do prawej matki etykiety i 50% od góry do dołu matki etykiety).
- Ustaw rozmiar na aby rozszerzyć przestrzeń tekstową do więcej niż połowy przyległej etykiety (62% poziomo i 55% w pionie przyległej etykiety).
- Ustaw Nazwę na HeaderTextLabel .
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na średnią aby grubienie czcionki.
- Ustaw Tekst na CEL .
- Włącz Skalowanie tekstu .
Utwórz elementy monitu.
Wstaw etykietę obrazu do wyświetlania celu .
Wybierz Etykietę obrazu , a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej etykiety (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{1, 0}.
- Ustaw Rozmiar na {0.89, 0},{0.66, 0}.
- Ustaw Nazwę na Ciało .
- Ustaw Obraz na rbxassetid://14304827265, aby wyświetlić odwrócony trapezoid.
- Ustaw ImageColor3 na 0, 0, 0 aby zabarwić obraz czarnie.
- Ustaw Przezroczystość obrazu na 0.3, aby uczynić nagłówek półprzezroczystym.
(Opcjonalnie) Wpisz wymóg proporcji interfejsu użytkownika do etykiety obrazu , aby zapewnić, że proporcje etykiety pozostają takie same bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 13.781.
Wprowadź Etykietę tekstową do ciała , aby wyświetlić monit.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} (50% od lewej do prawej matki etykiety i 50% od góry do dołu matki etykiety).
- Ustaw rozmiar na aby rozszerzyć przestrzeń tekstową do więcej niż połowy przyległej etykiety (85% poziomo i 39% w pionie przyległej etykiety).
- Ustaw nazwę na BodyTextLabel .
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na średnią aby grubienie czcionki.
- Ustaw TextColor3 na 255, 255, 255, aby tekst był biały na ciemnym tle.
- Ustaw Tekst na Tag przeciwko graczom, aby zdobyć punkty! Pierwsza drużyna z punktami %d wygrywa. .
- Włącz Skalowanie tekstu .
Stwórz kontener dla liczników zespołów celowych.
Włóż ramę do celu .
Wybierz nowe ramię , a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej siebie (50% od lewej do prawej ramy i 100% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na aby ustawić ramę w dolnej części pojemnika (50% od lewej do prawej ramy rodzica i 100% od góry do dołu ramy rodzica).
- Ustaw rozmiar na tak, aby komponenty interfejsu wyboru zajmowały około mniej niż połowę pojemnika od lewej do prawej (44% poziomo i 27% w pionie ramy rodzica).
- Ustaw Nazwę na TeamPointCounter .
Twórz odpust dla liczników zespołów.
- Włóż obiekt UIListLayout do ramy z kroku 5.
- Wybierz obiekt UIListLayout , a następnie w oknie Właściwości ,
- Ustaw Przestrzeń na 0.025, 0,
- Ustaw kierunek wypełnienia na poziomy , tak aby każdy licznik zespołu wyświetlał się obok siebie.
- Ustaw poziome ustawienie na środek , tak aby każda drużyna skupiła się na środku siebie nawzajem.
Stwórz elementy licznika zielonego zespołu.
Wprowadź etykietę obrazu do TeamPointCounter .
Wybierz Etykietę obrazu , a następnie w oknie Właściwości ,
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{1, 0}.
- Ustaw rozmiar na aby rozszerzyć etykietę do połowy szerokości ramy rodzicielskiej (50% poziomo i 100% w pionie ramy rodzicielskiej).
- Ustaw Nazwę na TeamACounter .
- Ustaw Obraz na rbxassetid://14304826831, aby wyświetlić zanik kierunkowy.
- Ustaw ImageColor3 na 88, 218, 171 aby zabarwić obraz miętą zieloną.
Konfiguruj niestandardowy atrybut, aby śledzić, że ta etykieta jest dla zielonej drużyny.
- W oknie Właściwości , przejdź do sekcji Atrybuty , a następnie kliknij ikonaplusa. Wyświetla się dialog wyskakujący.
- W polu Nazwa , wprowadź teamColor .
- W menu rozwijanym Typ , wybierz BrickColor .
- Kliknij przycisk Zapisz .
- Ustaw nową atrybut teamColor na Miętę .
Wprowadź etykietę tekstową do licznika zespołów , aby wyświetlić monit.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 1, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środkowej części samej siebie (100% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw pozycję na , aby przenieść etykietę w prawo od etykiety rodzicielskiej (95% od lewej do prawej etykiety rodzicielskiej i 50% od góry do dołu etykiety rodzicielskiej).
- Ustaw rozmiar na aby rozszerzyć przestrzeń tekstową do więcej niż połowy przyległej etykiety (85% poziomo i 39% w pionie przyległej etykiety).
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na Pogrubienie aby grubienie czcionki.
- Ustaw TextColor3 na 255, 255, 255, aby tekst był biały na ciemnym tle.
- Ustaw tekst na - .
- Włącz Skalowanie tekstu .
- Ustaw TextXAlignment na Prawo .
Wprowadź obiekt UIStroke w okno TextLabel , a następnie w oknie Właściwości ustaw Kolor na 8, 78, 52, aby obrysować pasek za pomocą ciemnozielonego paska.
Stwórz elementy licznika zespołu różowego.
Powtórz TeamAICounter i jego dzieci.
Wybierz duplikat TeamACounter , a następnie w oknie Właściwości ,
- Ustaw Nazwę na TeamBCounter .
- Ustaw Obraz na rbxassetid://14305849451, aby wyświetlić zanik w kierunku przeciwnym.
- Ustaw ImageColor3 na 255, 170, 255 aby zabarwić różowy karnawał obrazu.
- Ustaw atrybut teamColor na Carnation Pink .
Wybierz duplikat etykietę tekstową dziecko TeamBCounter , a następnie w oknie właściwości ,
- Ustaw Punkt przyłączenia na 0, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w lewo-środku samej siebie (0% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw pozycję na , aby przenieść etykietę na lewo od etykiety rodzicielskiej (5% od lewej do prawej etykiety rodzicielskiej i 50% od góry do dołu etykiety rodzicielskiej).
- Ustaw TekstXAlignment na Lewo .
Wybierz powielone dziecko UIStroke z TeamBCounter , a następnie w oknie Właściwości ustaw Kolor na 158, 18, 94 aby obrysować pasek za pomocą ciemnoróżowego paska.
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbki Laser Tag, który programowo aktualizuje polecenie celu i śledzi punkty drużyny.
Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz ostrzeżeń (HUD), w tym setObjective i startSyncingTeamPoints.Po tym, jak gracz dołączy do rundy i wybierze swój blaster, ten skrypt zapewnia prawidłowe wyświetlanie wszystkich elementów interfejsu użytkownika HUD dla stanu, urządzeniei statusu drużyny gracza.
Teraz, po wybraniu przez gracza swojego blastera, interfejs użytkownika celu wyświetla się na górze jego ekranu i śledzi punkty każdej drużyny.
Interfejs użytkownika blastera
Po przejrzeniu najlepszych praktyk hierarchii wizualnej z Wireframe Your Layouts, ten rozdział nauczy cię, jak wdrożyć wszystkie elementy interfejsu użytkownika na ekranie związane z blasterem gracza.Ta grupowanie elementów interfejsu użytkownika zajmuje większość miejsca na ekranie w pobliżu centrum ekranu, ponieważ działa jako punkt fokalny, aby przyciągnąć uwagę graczy do akcji w przestrzeni 3D, i ma największe znaczenie dla gry.
Przybliżenie
Przybliżenie jest elementem interfejsu użytkownika, który informuje graczy, gdzie będą dokonywać wpływu, gdy wystrzelą swoją broń.Ten element interfejsu użytkownika jest niezbędnym wymogiem rozgrywki dla doświadczeń strzelców w pierwszej osobie, ponieważ gracze muszą być w stanie dokładnie celować w swojego blastera i oznaczać członków drużyny wroga.
Podobnie jak większość innych doświadczeń w gatunekstrzelaniny w pierwszej osobie, próbny tag laserowy pozycjonuje celownik w środku ekranu, tak że gracze mają coś statycznego, na którym się skupić, podczas gdy ich awatar porusza się w przestrzeni 3D.Oprócz zmniejszenia choroby lokomocyjnej umieszczenie to pozwala na postrzeganie celownika, jednocześnie wtapiając się w ogólne środowisko.
Aby dokładnie odtworzyć celownik w ramach próbnego doświadczenia Laser Tag:
Wstaw etykietę obrazu do obiektu HUDGui ScreenGui
W oknie Eksploratora przełącz się do usługi StarterGui .
Najedź na jego dziecko HUDGui obiekt, a następnie kliknij ikonę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wstaw Etykietę obrazu .
Wybierz nową Etykietę obrazu , a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://14400935446.
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw nazwę na celownik krzyżowy .
- Ustaw Pozycję na aby ustawić etykietę w środku ekranu.
- Ustaw Rodzaj skali na Pasuje , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
(Opcjonalnie) Wpisz wymóg proporcji interfejsu użytkownika do celownika , aby zapewnić, że proporcje etykiety pozostają takie same bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 0.895 .
Odznacz znacznik
Wskaźnik trafień to element interfejsu użytkownika, który wyświetla się tylko wtedy, gdy wybuch zadaje wpływ na innego gracza w drużynie wroga.Podobnie jak celownik, ten element interfejsu użytkownika jest niezbędnym wymogiem rozgrywki dla doświadczeń strzelca pierwszej osoby, ponieważ zapewnia wizualne zwroty informacji o tym, kiedy gracze odnoszą sukces w oznaczaniu swoich przeciwników.
Aby dokładnie odtworzyć znacznik trafień w ramach próbnego doświadczenia Laser Tag:
Wstaw etykietę obrazu do obiektu celownika ImageLabel
W oknie Eksploratora przełącz się do usługi StarterGui .
Najedź na jego dziecko Celownik obiekt, a następnie kliknij ikonę ⊕ . Wyświetli się menu kontekstowe.
Z menu kontekstowego wstaw Etykietę obrazu .
Wybierz nową Etykietę obrazu , a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://14401148736, aby wyświetlić ikonaowalnego znacznika trafień.
- Ustaw Punkt przyłączenia na 0.5, 0.5 aby ustawić punkt pochodzenia etykiety w środku etykiety.
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na aby ustawić etykietę w środku ekranu.
- Ustaw Nazwę na Hitmarker .
- Ustaw rozmiar na {0.6, 0},{0.06, 0} aby zmniejszyć rozmiar prostokątów wokół środka celownika
- Ustaw Przezroczystość obrazu na 1, aby uczynić znacznik trafień całkowicie przezroczystym.Skrypty w następnym kroku odwracają przejrzystość do 0 za każdym razem, gdy wybuch gracza oddziałuje na innego gracza w drużynie wroga.
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbnego Laser Tag, który wyświetla programatycznie znacznik trafień, gdy eksplozja zadaje wpływ na gracza z drużyny wroga.
Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz ostrzeżeń (HUD), w tym setupHitmarker.Po tym, jak gracz dołączy do rundy i wybierze swój blaster, ten skrypt zapewnia prawidłowe wyświetlanie wszystkich elementów interfejsu użytkownika HUD dla stanu, urządzeniei statusu drużyny gracza.
Teraz, za każdym razem, gdy gracz wystrzeliwuje swój blaster i wybuch ma wpływ na innego gracza, znacznik trafień momentalnie się wyświetla.
Selektor blasterów
Selektor blastera to komponent interfejsu, który gracze używają do wyboru typu blastera przed dołączeniem lub ponownym dołączeniem do rundy.Próbny tag laserowy zapewnia dwa rodzaje blasterów: jeden, który wytwarza kilka promieni z szerokim, poziomym rozprzestrzeniem, i drugi, który wytwarza pojedynczy promień.Typ blastera, który wybierają gracze, wpływa na ich strategię podczas rundy, czyniąc ten komponent interfejsu użytkownika niezbędnym przepływem pracy dla ogólnego doświadczenia.
Następujące kroki szczegółowo opisują, jak utworzyć kilka kontenerów dla różnych grup elementów interfejsu użytkownika, nagłówek z polem wskazującym, nawigację i przyciski wyboru oraz prefablikę przycisku blastera.Logika skryptowania dla ogólnego komponentu wypełnia różne cechy wizualne przycisku blastera przedfab według instancji Configuration, które reprezentują każdy wpisywaćblastera.
Ta konfiguracja pozwala na utworzenie dodatkowych instancji Configuration dla więcej typów blasterów, które automatycznie wyświetlają się poprawnie w wyborze blastera bez konieczności tworzenia indywidualnych przycisków w StarterGui.PickABlasterGui .
Aby dokładnie odtworzyć wybór blastera w ramach próbnego doświadczenia Laser Tag:
Stwórz kontener dla całego komponentu.
Włóż ramę do obiektu PickABlaster ScreenGui
- W oknie Eksploratora przełącz się do usługi StarterGui .
- Najedź na jego dziecko PickABlaster obiekt, a następnie kliknij ikonę ⊕ . Wyświetli się menu kontekstowe.
- Z menu kontekstowego wstaw ramę .
Wybierz nowe okno, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia ramy w dolnej części samej ramy (50% od lewej do prawej ramy i 100% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na aby ustawić ramę w pobliżu dolnej środkowej części ekranu (50% od lewej do prawej ekranu i 92,4% od góry do dołu ekranu).
- Ustaw rozmiar na tak, aby komponenty interfejsu użytkownika selektora blastera zajmowały dużą część ekranu, aby przyciągnąć uwagę graczy (80% poziomo i 25% w pionie).
- Ustaw Nazwę na Komponent .
(Opcjonalnie) Wpisz wymóg proporcji UIAspectRatio do komponentu , aby zapewnić, że proporcja ramki i jej elementów UI pozostaje taka sama bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 5 .
Stwórz kontener, aby przechować grupy elementów interfejsu użytkownika.
Wstaw ramę do komponentu .
Wybierz nowe okno, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia ram w środku samej siebie (50% od lewej do prawej ramy i 50% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na , aby ustawić ramę w pobliżu górnej części pojemnika (50% od lewej do prawej ramy rodzica i 37,5% od góry do dołu ramy rodzica).
- Ustaw rozmiar na tak, aby komponenty interfejsu wyboru zajęły 3/4 pojemności kontenera (100% poziomo i 75% w pionie w stosunku do ramy rodzica).
- Ustaw nazwę na SelectionFrame .
Utwórz monit o wybór blastera.
Wstaw etykietę obrazu do ramy wyboru .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej etykiety (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw kolejność układu na .
- Ustaw pozycję na , aby ustawić etykietę w pobliżu górnej środkowej części ramy (50% od lewej do prawej ramy rodzica i 22% od góry do dołu ramy rodzica).
- Ustaw rozmiar na {0.45, 0},{0.22, 0} w celu rozszerzenia obszaru monitu do prawie połowy ramy (45% poziomo i 22% w pionie ramy rodzica).
- Ustaw Nazwę na Tytuł .
- Ustaw Obraz na rbxassetid://14304828123, aby wyświetlić trapezoidę.
- Ustaw Przezroczystość obrazu na 0.15, aby uczynić nagłówek półprzezroczystym.
(Opcjonalnie) Wpisz wymóg proporcji interfejsu użytkownika do etykiety, aby zapewnić, że proporcje etykiety pozostają takie same bez względu na rozmiar ekranu gracza.Próbka ustawia swoją właściwość UIAspectRatioConstraint.AspectRatio na 13.78.
Wprowadź Etykietę tekstową w nagłowie , aby wyświetlić monit.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0} (50% od lewej do prawej matki etykiety i 50% od góry do dołu matki etykiety).
- Ustaw rozmiar na aby rozszerzyć przestrzeń tekstową do więcej niż połowy przyległej etykiety (60% poziomo i 55% w pionie przyległej etykiety).
- Ustaw Nazwę na HeaderTextLabel .
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na średnią aby grubienie czcionki.
- Ustaw Tekst na Wybierz blaster .
- Włącz Skalowanie tekstu .
Stwórz kontener dla pojemnika dla przycisku blastera i strzałek selekcji.
Wstaw etykietę obrazu do ramy wyboru .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej etykiety (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Tło koloru na 0, 0, 0, aby uczynić etykietę czarną.
- Ustaw Przezroczystość tła na 0.3, aby zmniejszyć przezroczystość etykiety o 30%, i dopasować wszystkie czarne elementy interfejsu w doświadczeniu.
- Ustaw pozycję na , aby ustawić etykietę na dole środka ramy (50% od lewej do prawej ramy rodzica i 100% od góry do dołu ramy rodzica).
- Ustaw rozmiar na aby rozszerzyć obszar etykiety do przestrzeni pod spodem okienka (100% poziomo i 77% w pionie w stosunku do ramy rodzicielskiej).
Okrągnij krawędzie kontenera.
- Wprowadź obiekt UICorner do etykiety.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Promień kąta na 0.075, 0, aby zaokrąglić krawędzie.
Stwórz kontener dla swoich przycisków blastera.
Wklej ramkę do etykiety z kroku 4.
Wybierz nowe okno, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowego ramy w środku samej siebie (50% od lewej do prawej ramy i 50% od góry do dołu ramy).
- Ustaw Przezroczystość tła na 1, aby uczynić tło ramy całkowicie przezroczystym.
- Ustaw pozycję na aby ustawić ramę w środku jej etykiety rodzica (50% od lewej do prawej ramy rodzica i 50% od góry do dołu ramy rodzica).
- Ustaw rozmiar na aby rozszerzyć obszar ramki do większości etykiety (85% poziomo i 77% w pionie w stosunku do matki etykiety).
- Ustaw Nazwę na Kontener .
Twórz odpust dla wszystkich przyszłych przycisków blastera.
- Włóż obiekt UIListLayout do ramy z kroku 5.
- Wybierz nowy obiekt układu, a następnie w oknie Właściwości ,
- Ustaw Przestrzeń na 0.035, 0.
- Ustaw Kierunek wypełnienia na Poziomy , aby każdy przycisk wyświetlał się obok siebie.
- Ustaw oba Poziomy wyравнивание i Poziomy wyравнивание na Środek , tak aby każdy przycisk dostosował się do środka jednego z drugiego.
Stwórz przycisk nawigacji lewej.
Wstaw obiekt Przycisk obrazu do Etykiety obrazu z kroku 4.
Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0, 0.5 , aby ustawić punkt pochodzenia nowego przycisku w lewo-środku (0% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
- Ustaw Przezroczystość tła na 0.15, aby zapewnić wizualną informację zwrotną podczas przewijania, że przycisk jest do wyboru.
- Ustaw Pozycję na {0.02, 0},{0.5, 0}.
- Ustaw rozmiar do {0.04, 0},{0.33, 0} tak, aby przycisk wyboru był o wiele mniejszy niż przyciski blastera (4% poziomo i 33% w pionie ramy rodzica).
- Ustaw nazwę na NavigationButtonLeft .
Okrągnij krawędzie przycisku.
- Włóż obiekt UICorner do przycisku.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Promień kąta na 0.1, 0, aby zaokrąglić krawędzie.
Wstaw obiekt Etykieta obrazu do przycisku.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw pozycję na , aby ustawić etykietę w pobliżu środka przycisku rodzica (45% od lewej do prawej przycisku rodzica i 50% od góry do dołu przycisku rodzica).Ta wartość nie jest w środku, ponieważ strzał nie wygląda wizualnie na to, że jest w środku przycisku w .
- Ustaw rozmiar na aby rozszerzyć obszar etykiety do przestrzeni poniżej pola wejściowego (80% poziomo i 80% w pionie ramy rodzica).
- Ustaw Przezroczystość tła na 1, aby uczynić tło obrazu całkowicie przezroczystym.
- Ustaw Obraz na rbxassetid://14309187238.
- Ustaw Rodzaj skali na Pasuje .
Stwórz odpowiedni przycisk nawigacji.
Powtórz NavigationButtonLeft .
Wybierz duplikatowy przycisk, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 1, 0.5 , aby ustawić punkt pochodzenia nowego przycisku w środkowej części samego (100% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
- Ustaw Pozycję na {0.98, 0},{0.5, 0} do prawej strony przycisku z jego pojemnika rodzica (98% od lewej do prawej strony pojemnika rodzica i 50% od góry do dołu pojemnika rodzica).
- Ustaw nazwę na NavigationButtonRight .
Wybierz jego Dziecko etykiety obrazu .
- Ustaw Rotację na 180, aby odwrócić obraz.
- Ustaw pozycję na , aby ustawić etykietę w pobliżu środka przycisku rodzica (55% od lewej do prawej przycisku rodzica i 50% od góry do dołu przycisku rodzica).Ta wartość nie jest w środku, ponieważ strzał nie wygląda wizualnie na to, że jest w środku przycisku w .
Stwórz przycisk WYBIERZ .
Wstaw przycisk obrazu do komponentu .Zauważ, jak ten proces utrzymuje przycisk wyboru oddzielony od SelectionFrame , abyś mógł dodać przestrzeń między główną częścią komponentu z przycisku wyboru.
Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia nowego przycisku w dolnej części samego (50% od lewej do prawej przycisku i 100% od góry do dołu przycisku).
- Ustaw Przezroczystość tła na 0.15, aby zapewnić wizualną informację zwrotną podczas przewijania, że przycisk jest do wyboru.
- Ustaw pozycję na , aby ustawić przycisk w pobliżu środkowej części pojemnika (50% od lewej do prawej ramy rodzica i 99% od góry do dołu ramy rodzica).
- Ustaw rozmiar na długość przycisku pod blasterami (17% poziomo i 18% w pionie ramy rodzica).
- Ustaw Nazwę na Przycisk wyboru .
Okrągnij krawędzie przycisku.
- Włóż obiekt UICorner do przycisku.
- Wybierz nowy obiekt kątowy, a następnie w oknie Właściwości ustaw Promień kąta na 0.2, 0, aby zaokrąglić krawędzie.
Włóż obiekt Etykieta tekstowa do przycisku, abyś mógł wyświetlić wezwanie do akcji.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0}.
- Ustaw rozmiar na aby rozszerzyć przestrzeń tekstową do prawie całej szerokości etykiety rodzicielskiej (90% poziomo i 55% w pionie etykiety rodzicielskiej).
- Ustaw nazwę na SelectTextLabel .
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na średnią aby grubienie czcionki.
- Ustaw Tekst na WYBIERZ .
- Włącz Skalowanie tekstu .
Stwórz prefabrykę przycisku blastera.
- W usłudze ReplicatedStorage , utwórz strukturę katalogu, aby zorganizować obiekty interfejsu użytkownika.Próbka używa katalogu Instancje z podkatalogiem dziecka Guis .
- Włóż obiekt Przycisk obrazu do katalogu Guis .
- Wybierz nowy przycisk, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowego przycisku w środku samego (50% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
- Ustaw Przezroczystość tła na 0.65, aby zapewnić wizualną informację zwrotną, że przycisk nie jest w fokusie.Skrypty w kroku 12 zapewniają wizualne zwroty programowe, gdy przycisk jest w fokusie.
- Ustaw kolejność układu na .
- Ustaw nazwę na BlasterButtonPrefab .
- Ustaw rozmiar na .
- Ustaw Przezroczystość obrazu na 1, aby uczynić obraz całkowicie przejrzystym.
- Wprowadź wymóg proporcji interfejsu użytkownika do BlasterButtonPrefab , aby zapewnić, że proporcje przycisku pozostają takie same wewnątrz komponentu bez względu na rozmiar ekranu gracza.
- Okrągnij krawędzie przycisku.
- Włóż obiekt UICorner do BlasterButtonPrefab .
- Wybierz UICorner , a następnie w oknie Właściwości ustaw Promień narożny na 0.05, 0, aby zaokrąglić rogi.
- Wstaw etykietę obrazu do BlasterButtonPrefab .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowej etykiety w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw pozycję na , aby ustawić etykietę w pobliżu środka przycisku rodzica (52% od lewej do prawej przycisku rodzica i 49,7% od góry do dołu przycisku rodzica).Ta wartość nie jest w środku, ponieważ blaster nie wygląda wizualnie na to, że jest w środku przycisku w .
- Ustaw rozmiar na {1.20, 0},{0.9, 0} w celu rozszerzenia obszaru etykiety poza przycisk (120% poziomo i 90% w pionie przycisku rodzica).
- Ustaw Rodzaj skali na Pasuje .
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbnym Laser Tag, który wyświetla programowo przyciski dla każdego blastera, skaluje przyciski, gdy gracz wybiera przycisk, który nie jest w fokusie, i przypina wybór blastera gracza do jego awatara.
Następujący skrypt wymaga zestawu skryptów, które współpracują, aby stworzyć wybór blastera.Kiedy gracz dołącza do doświadczenia lub odrodza się w rundzie po tym, jak jego zdrowie osiągnie zerowy poziom, ten skrypt aktywuje wszystkie elementy interfejsu użytkownika selektora blastera, dopóki gracz nie dokona wyboru.
Teraz, za każdym razem, gdy gracz dołącza do doświadczenia lub odrodza się w rundzie po tym, jak jego zdrowie osiągnie zerowy poziom, wyświetla się interfejs wyboru blastera, mogą dokonać wyboru, a każdy przycisk działa tak, jak oczekiwano.
Przycisk wybuchu
Przycisk wybuchu to komponent interfejsu użytkownika, którego używają gracze do wybuchu swojego blastera, jeśli uzyskują dostęp do doświadczenia za pomocą urządzeniemobilnego lub tabletu.Próbne doświadczenie z tagiem laserowym używa przycisku blastera z ikoną, która przedstawia zarówno celownik, jak i eksplozję, aby komunikować funkcję przycisku bez tekstu.
Aby dokładnie odtworzyć przycisk wybuchu w ramach próbnego doświadczenia Laser Tag:
Wstaw przycisk obrazu do obiektu HUDGui ScreenGui
W oknie Eksploratora przełącz się do usługi StarterGui .
Najedź na jego dziecko HUDGui obiekt, a następnie kliknij ikonę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wstaw Przycisk obrazu .
W widoku przesuń przycisk do miejsca, w którym naturalnie odpoczywa kciuk gracza, abyś mógł uzyskać wizualne wyczucie tego, jak będzie wyglądał przycisk na urządzeniegracza, a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://18308375035, aby wyświetlić ikonaprzycisku wybuchu.
- Ustaw Wciśnięte obraz na rbxassetid://18308372558, aby wyświetlić odwróconą wersję ikony przycisku wybuchu, gdy gracz naciśnie przycisk.
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw nazwę na BlastButton .
- Ustaw Rodzaj skali na Pasuje , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Ustaw Przezroczystość obrazu na 0.3.
Wprowadź wymóg proporcji interfejsu użytkownika do BlastButton , aby zapewnić, że proporcje przycisku pozostają takie same bez względu na rozmiar ekranu gracza.
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbki Laser Tag, który wyświetla programowo przycisk blastera, gdy gracz używa wejścia dotykowego na urządzeniu, które akceptuje elementy sterującedotykowe.
Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz ostrzeżeń (HUD), w tym setupTouchButtonAsync.Po tym, jak gracz dołączy do rundy i wybierze swój blaster, ten skrypt zapewnia prawidłowe wyświetlanie wszystkich elementów interfejsu użytkownika HUD dla stanu, urządzeniei statusu drużyny gracza.
Teraz, gdy gracz dołącza do doświadczenia i używa wejścia dotykowego na urządzeniu, które akceptuje sterowanie elementy sterujące, przycisk blastera wyświetla się w prawym górnym rogu przycisku skoku.
Interfejs użytkownika gracza
Po przestudiowaniu wizualnej hierarchii najlepszych praktyk z Wireframe Your Layouts, ten rozdział nauczy cię, jak wdrożyć wszystkie elementy interfejsu użytkownika na ekranie związane ze stanem gracza.Ta grupowanie elementów interfejsu użytkownika jest blisko boków ekranu, ponieważ gracze mogą zrozumieć te informacje peryferyjne bez odwracania uwagi od rozgrywka.
Wskaźnik gracza
Wskaźnik gracza to komponent interfejsu, do którego odwołują się gracze, aby szybko zdecydować, do jakiej drużyny należą, jak tylko pojawią się w strefie spawn swojej drużyny.Próbne doświadczenie z etykietą laserową zapewnia dwie wersje wskaźnika gracza w zależności od tego, czy gracz jest w drużynie zielonej lub różowej .
Po przestrzeganiu wytycznych z Wybierz temat koloru obie wersje wskaźnika gracza łączą kolor zespołu z unikalną, prostą ikoną z minimalnymi szczegółami, aby pozostały czytelne na małych ekranach.Dostarczanie dwóch form wizualnej informacji zwrotnej jest ważne, ponieważ pomaga utrzymać projekt dostępny dla graczy z niedowidzeniem kolorów.
Aby dokładnie odtworzyć komponent wskaźnika gracza w ramach próbnego Laser Tag doświadczenia:
Włóż ramę do obiektu HUDGui ScreenGui
- W oknie Eksploratora przełącz się do usługi StarterGui .
- Najedź na jego dziecko HUDGui obiekt, a następnie kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
- Z menu kontekstowego wstaw ramę .
Wybierz nowe ramię , a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0, 1 , aby ustawić punkt pochodzenia ramy w dolnej części samej ramy (0% od lewej do prawej ramy i 100% od góry do dołu ramy).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw Nazwę na Wygląd gracza .
Ustaw Pozycję na aby ustawić ramę w pobliżu lewej dolnej krawędzi ekranu.
Ustaw Rozmiar na {0.23, 0},{0.08, 0}, aby skrócić i poszerzyć ramę.
Włącz Descendenci klipsów , aby obciąć dziecięce obiekty GUI, które wykraczają poza ramę.
Stwórz kształt poligonalny.
Wstaw etykietę obrazu do wyświetlania gracza .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Obraz na rbxassetid://14304828123, aby wyświetlić ikonatrapezu.
- Ustaw Punkt przyłączenia na 1, 1 , aby ustawić punkt pochodzenia etykiety w prawym dolnym rogu (100% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Nazwę na Blok .
- Ustaw pozycję na {1,0},{1,0} aby ustawić etykietę po prawej stronie ramy.
- Ustaw rozmiar na {1.858, 0},{0.581, 0} aby rozszerzyć etykietę poza ramę i skrócić ją do nieco ponad połowy długości ramy.
- Ustaw Przezroczystość obrazu na 0.15, aby uczynić etykietę nieco przezroczystą.
- Ustaw Rodzaj skali na Pasuje , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Wprowadź wymóg proporcji UIAspectRatio do bloku , aby zapewnić, że proporcje etykiety i jej dzieci elementów UI pozostają takie same bez względu na rozmiar ekranu gracza.
- Wybierz nowe ograniczenie, a następnie w oknie Właściwości ustaw Proporcję aspektu na .
Stwórz pudełko na portret gracza.
Wstaw etykietę obrazu do wyświetlania gracza .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń znacznik assetID w ramach właściwości Obraz .Skrypty w kroku 7 wstawiają portret gracza programatycznie do etykiety obrazu.
- Ustaw Punkt przyłączenia na 0, 1 , aby ustawić punkt pochodzenia etykiety w lewym dolnym rogu (0% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Tło koloru3 na 0, 0, 0 aby ustawić kolor tła etykiety na czarny.
- Ustaw Przezroczystość tła na 0.3, aby zmniejszyć przezroczystość etykiety o 30%, i dopasować wszystkie czarne elementy interfejsu w doświadczeniu.
- Ustaw Nazwę na Portret gracza .
- Ustaw Pozycję na {0.11, 0},{1, 0}.
- Ustaw Rozmiar na {0.23, 0},{1, 0}.
- Ustaw Przezroczystość obrazu na 0.15, aby uczynić etykietę nieco przezroczystą.
- Ustaw Rodzaj skali na Pasuje , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
- Wprowadź wymóg proporcji interfejsu użytkownika do Portretu gracza , aby zapewnić, że proporcje etykiety i jej dzieci elementów interfejsu pozostają takie same bez względu na rozmiar ekranu gracza.
- Włóż UICorner do PlayerPortrait , a następnie w oknie Właściwości ustaw promień zakrętu na 0.05, 0, aby nieco zaokrąglić krawędzie.
Utwórz etykietę tekstową dla nazwy gracza.
Wstaw obiekt Etykieta tekstowa do Wyświetlania gracza .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0, 0.5 , aby ustawić punkt pochodzenia nowego przycisku w lewo-środku (0% od lewej do prawej przycisku i 50% od góry do dołu przycisku).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw nazwę na PlayerNameTextLabel .
- Ustaw Pozycję na {0.35, 0},{0.72, 0}.
- Ustaw rozmiar na tak, aby tekst zajmował większość obszaru kształtu poligonalnego (52% poziomo i 30% w pionie w stosunku do ramy rodzicielskiej).
- Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
- Ustaw wagę na Pogrubienie aby grubienie czcionki.
- Usuń tekst placeholdera w właściwości Tekst . Skrypty w kroku 7 wstawiają nazwę gracza do etykiety tekstowej programowo.
- Włącz Skalowanie tekstu .
- Ustaw TekstXAlignment na Lewo .
Stwórz ikony i kolory zespołu, które wyświetlają się po lewej stronie portretu gracza.
Włóż Katalog do Wyświetlacz gracza , a następnie zmień nazwę na Ikony drużyny .
Stwórz ikonę i kolor zespołu zielonego .
- Wstaw etykietę obrazu do ikon zespołu .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0, 1 , aby ustawić punkt pochodzenia etykiety w lewym dolnym rogu (0% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
- Ustaw Tło koloru3 na 88, 218, 171 aby ustawić kolor tła etykiety na miętowy.
- Ustaw Nazwę na TeamAIcon .
- Ustaw pozycję na {0, 0},{1, 0} aby ustawić etykietę po 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 zielonej drużyny. Ten krok jest bardzo ważny dla skryptów w kroku 7.
- W oknie Właściwości , przejdź do sekcji Atrybuty , a następnie kliknij ikonaplusa. Wyświetla się dialog wyskakujący.
- W polu Nazwa , wprowadź teamColor .
- W menu rozwijanym Typ , wybierz BrickColor .
- Kliknij przycisk Zapisz .
- Ustaw nową atrybut teamColor na Miętę .
- Wprowadź wymóg proporcji interfejsu użytkownika do TeamAIcon , aby zapewnić, że proporcje etykiety i jej dzieci elementów interfejsu pozostają takie same bez względu na rozmiar ekranu gracza.
- Stwórz ikona.
- Wstaw etykietę obrazu do TeamAIcon .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw obraz na rbxassetid://14309678670 aby wyświetlić zieloną ikonazespołu.
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Nazwę na Ikonę .
- Ustaw Pozycję na {0.5, 0},{0.5, 0}.
- Ustaw Rozmiar na {0.7, 0},{0.6, 0}.
- Ustaw Rodzaj skali na Pasuje , aby obraz pasował do swojego pojemnika i nie rozciągał się na różnych rozmiarach ekranu.
Stwórz ikonę i kolor zespołu różowy oraz kolor.
- Powtórz TeamAIcon i jego dzieci.
- Wybierz duplikat TeamAIcon , a następnie w oknie Właściwości ,
- Ustaw Tło koloru3 na 255, 170, 255 aby ustawić kolor tła etykiety na różowy karnawał.
- Ustaw Nazwę na TeamBIcon .
- Ustaw atrybut teamColor na Carnation Pink .
- Wybierz duplikat ikony dziecko TeamBIcon , a następnie w oknie Właściwości ustaw obraz na rbxassetid://14309678549 , aby wyświetlić różowy ikonazespołu.
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbki Laser Tag, który wyświetla programowo wskaznik gracza z odpowiednim kolorem zespołu i ikoną, gdy gracz jest aktywny w rundzie.
Następujący skrypt wymaga zestawu skryptów modułowych, które współpracują, aby skonfigurować główny wyświetlacz ostrzeżeń (HUD), w tym startSyncingTeamColor, setPlayerName i setPlayerPortrait.Po tym, jak gracz dołączy do rundy i wybierze swój blaster, ten skrypt zapewnia prawidłowe wyświetlanie wszystkich elementów interfejsu użytkownika HUD dla stanu, urządzeniei statusu drużyny gracza.
Teraz, za każdym razem, gdy gracz dołącza lub ponownie dołącza do rundy po odrodzeniu, wskaźnik gracza wyświetla się w lewym dolnym rogu ekranu.
Ekran pola siłowego
Ekran pola siłowego jest elementem interfejsu, który pokrywa okno widoku, aby poinformować graczy, że są bezpieczni przed ogniem zespołu wroga, dołączając lub dołączając do rundy.Po przestrzeganiu wytycznych estetycznych dla ikon z Wybierz styl artystyczny, próbna etykieta laserowa wykorzystuje półprzezroczysty sześciokątny wzór, aby symbolizować pole siłowe.Decyzja o tym projekcie nie tylko wzmacnia ogólny futurystyczny styl sztuki dla całego interfejsu w doświadczeniu, ale komunikuje również stan gracza bez żadnego tekstu ani dodatkowych wskazówek.
Aby dokładnie odtworzyć ekran pola siłowego w ramach próbnego doświadczenia Laser Tag:
Wstaw etykietę obrazu do obiektu ForceFieldGui ScreenGui
W oknie Eksploratora przełącz się do usługi StarterGui .
Najedź na jego dziecko ForceFieldGui obiekt, a następnie kliknij ikonę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wstaw Etykietę obrazu .
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 przezroczystym.
Ustaw rozmiar na aby wypełnić obraz cały ekran (100% poziomo i 100% w pionie w stosunku do matki ScreenGui).
Ustaw Rodzaj skali na Płytkę , aby uczynić płytkę sześciokąta na całym ekranie.
Ustaw rozmiar płytek na .
Wprowadź obiekt UIGradient do etykiety.
Wybierz nowy obiekt gradientu, a następnie w oknie Właściwości ,
Ustaw Kolor na sekwencję kolorów, która zaczyna się od niebieskiego, zamienia się w biały, a następnie zamienia się ponownie na niebieski.
Ustaw Kolor na 120, 192, 250.
Kliknij właściwość Kolor , a następnie kliknij przycisk ⋯ . Pojawi się okno z sekwencją kolorów.
Każdy trójkąt na osi dolnej sekwencji kolorów jest punktem kluczowym, który określa wartość koloru właściwości na tym punkcie obrazu od lewej do prawej.
Kliknij i przeciągnij sekwencję kolorów, aż osiągniesz wartość Czasu , następnie kliknij mały kwadrat obok Koloru , aby otworzyć okno Kolorów wyskakujące.
Wybierz jasno biały, a następnie zamknij okno wyskakujące.
Kliknij i przeciągnij sekwencję kolorów, aż osiągniesz wartość Czasu , a następnie ponownie otwórz okno wyskakujące Kolory i wybierz ten sam kolor biały, jak wcześniej.
Ustaw Rotację na 225.
Ustaw Przezroczystość na sekwencję liczb, która sprawia, że pole siłowe wygląda jakby migotało.
Kliknij właściwość Przezroczystość , a następnie kliknij przycisk ⋯ .Wyskakująca sekwencja liczb.Każdy kwadrat na początku i na końcu sekwencji liczbowej jest punktem kluczowym, który określa wartość przejrzystości właściwości w tym momencie obrazu od lewej do prawej.
Ustaw następujące właściwości czasu i wartości na całej sekwencji liczbowej:
- Czas = 0, Wartość = 0.25
- Czas = .101, Wartość = 0.875
- Czas = .183, Wartość = 0
- Czas = .3, Wartość = 1
- Czas = .7, Wartość = 1
- Czas = 1, Wartość = 0.9
Powtórz Etykietę obrazu z kroku 2.
Wybierz obiekt UIGradient w ramach powielonej etykiety, a następnie w oknie Właściwości ,
Ustaw Rotację na -45, aby odwrócić obraz, tak że prawie odzwierciedla się wzajemnie wzdłuż osi Y.
Dostosuj Przezroczystość , aby sprawić, że lśnienie wygląda bardziej organicznie.
- Kliknij właściwość Przezroczystość , a następnie kliknij przycisk ⋯ . Wyświetla się sekwencja liczb.
- Wybierz trzeci kluczowy klatka, a następnie kliknij przycisk Usuń .
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbnego Laser Tag, który wyświetla programowo ekran pola siły, gdy gracz dołącza lub dołącza ponownie do rundy.
Następujący ReplicatedStorage.ForceFieldClientVisuals skrypt klienta zastępuje domyślną wizualizację ForceField przez StarterGui.ForceFieldGui.Kiedy gracze wczytają się w doświadczenie i pojawią się na SpawnLocation z właściwością Duration, która jest większa niż 0, domyślne zachowanie w każdym doświadczeniu polega na dostarczeniu ich awatarowi ochronnej błękitnej kuli, która tymczasowo zapobiega utracie zdrowia.
Ten skrypt rozpoczyna się od wysłuchania, kiedy ForceField jest dodany do postaci, wyłącza domyślne wizualizacje pola siły pierwszej osoby, a następnie włącza obiekt ForceFieldGui ScreenGui.Zauważ, że to nie ma wpływu na wizualizacje osoby trzeciej, gdy gracze patrzą na innych graczy odrodzących się ponownie w doświadczeniu.
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 spawnowania 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 dołącza ponownie do rundy po odrodzeniu, nowy interfejs ekranu pola siły wyświetla się zamiast domyślnych wizualizacji pierwszej osoby ForceField.
Ekran odrodzenia
Ekran odrodzenia to element interfejsu, który przyćmnia widok, aby poinformować graczy, że zostali oznaczeni, a serwer jest w procesie odrodzenia ich z powrotem do ich strefy spawnu.Ten element interfejsu użytkownika jest ważny, ponieważ daje graczom czas na przetworzenie tego, że zostali oznaczeni, i strategizowanie ich następnego ruchu, zanim dołączą do aktywnej rundy.
Aby uzyskać więcej informacji o niestandardowym zachowaniu odrodzenia w próbnej laserowej etykiecie doświadczenia, zobacz Odrodzenie postaci z programu szkolenia Gameplay Scripting.
Aby dokładnie odtworzyć ekran odrodzenia w ramach próbnego doświadczenia Laser Tag:
Stwórz baner informacji środkowych.
Wstaw etykietę obrazu do obiektu OutStateGui ScreenGui
W oknie Eksploratora przełącz się do usługi StarterGui .
Najedź na jego dziecko OutStateGui obiekt, a następnie kliknij ikonę ⊕ . Wyświetla się menu kontekstowe.
Z menu kontekstowego wstaw Etykietę obrazu .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia nowego przycisku w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw Pozycję na {0.5, 0},{0.5, 0}.
Ustaw Rozmiar na aby rozszerzyć etykietę (48% poziomo i 6% w pionie w stosunku do matki ScreenGui).
Ustaw Nazwę na Blok .
Ustaw Obraz na rbxassetid://14304827265 uczynić obraz trapezoidalnym.
Ustaw Kolor obrazu na 0,0,0, aby uczynić trapezoid czarnym.
Ustaw Przezroczystość obrazu na 0.3, aby zmniejszyć przezroczystość etykiety o 30%, i dopasować wszystkie czarne elementy interfejsu w doświadczeniu.
Wprowadź wymóg proporcji UIAspectRatio do bloku , aby zapewnić, że proporcje etykiety i jej dzieci elementów UI pozostają takie same bez względu na rozmiar ekranu gracza.
Wybierz nowe ograniczenie, a następnie w oknie Właściwości ustaw Proporcję aspektu na .
Wprowadź etykietę tekstową do bloku dla tekstu informacyjnego.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw pozycję na aby ustawić etykietę w środku jej matki etykiety (50% od lewej do prawej matki etykiety i 50% od góry do dołu matki etykiety).
Ustaw rozmiar na tak, aby tekst zajmował większość powierzchni trapezu (85% poziomo i 55% w pionie w stosunku do matki etykiety).
Ustaw nazwę na BodyTextLabel .
Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
Ustaw wagę na Pogrubienie aby grubienie czcionki.
Ustaw Tekst na Odradzanie… .
Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
Włącz Skalowanie tekstu .
Stwórz nagłówek.
Wstaw etykietę obrazu do bloku .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 1 , aby ustawić punkt pochodzenia etykiety w dolnej części samej etykiety (50% od lewej do prawej etykiety i 100% od góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw pozycję na aby ustawić etykietę na górze środka jej matki (50% od lewej do prawej matki etykiety i 0% od góry do dołu matki etykiety).
Ustaw rozmiar na {0.46, 0},{0.56, 0} aby rozszerzyć etykietę (46% poziomo i 56% w pionie względem etykiety rodzicielskiej).
Ustaw Nazwę na Tytuł .
Ustaw Obraz na rbxassetid://14304826985, aby uczynić obraz wielokierunkowym rozmyciem.
Ustaw Kolor obrazu na 245, 46, 46 zrobić zanikający czerwony, aby oznaczyć, że gracz jest tymczasowo nieaktywny, gdy jest oznaczony z rundy.
Wprowadź Etykietę tekstową w nagłowie dla tekstu informacyjnego.
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw pozycję na aby ustawić etykietę w środku jej matki etykiety (50% od lewej do prawej matki etykiety i 50% od góry do dołu matki etykiety).
Ustaw rozmiar na tak, aby tekst zajmował większość obszaru zanikania (85% poziomo i 55% w pionie odpowiednio od etykiety rodzica).
Ustaw Nazwę na HeaderTextLabel .
Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
Ustaw wagę na Czarny aby grubienie czcionki.
Ustaw tekst na Oznaczony - jesteś wyłączony! 9. Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
Włącz Skalowanie tekstu .
Stwórz rozmycie wokół granic ekranu.
- Wstaw etykietę obrazu do OutStateGui .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Tło koloru3 na 0,0,0 aby ustawić kolor tła etykiety na czarny.
- Ustaw Przezroczystość tła na 0.5, aby uczynić tło etykiety półprzezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.5, 0}).
- Ustaw rozmiar na aby rozszerzyć etykietę na cały ekran (100% poziomo i 100% w pionie w stosunku do matki ScreenGui).
- Ustaw ZIndex na -1 aby wyświetlić zanikanie za innymi elementami interfejsu użytkownika.
- Ustaw Nazwę na Tytuł .
- Ustaw Obraz na rbxassetid://14309518613 uczynić obraz zanikającym brzegiem
- Ustaw Przezroczystość obrazu na 0.1, aby nieco uczynić rozmycie translucentnym.
Aby poprawić wykonywanie, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z sekwencją numerów przejrzystości niestandardowej.Aby dowiedzieć się więcej o tej technice zanikania, zobacz modyfikatory wyglądu interfejsu - gradient.
Odwołaj się do następującego ReplicatedStorage skryptu w pliku próbnym Laser Tag, który wyświetla programatycznie ekran odrodzenia, gdy zdrowie gracza osiągnie zerowy poziom, a są w procesie odrodzenia w strefie spawn swojej drużyny.
Następujący ReplicatedStorage.PlayerStateHandler skrypt klienta zawiera funkcje, które uruchamiają różne rodzaje zachowań zgodnie z atrybutem playerState.Wszystkie odpowiedzi na wydarzenia są logicznie grupowane w tym skrypcie, ponieważ wymagają podobnego zachowania aktywowania lub wyłączania sterowania elementy sterujące, ruchu kamery i widoczności warstwy interfejsu użytkownika.
Gdy zdrowie gracza osiągnie zero, jego playerState staje się TaggedOut, co uruchamia funkcję onTaggedOut().onTaggedOut() natychmiast uruchamia następujące zachowanie:
- Gracz nie może się poruszać na arenie.
- Gracz nie może przesuwać kamery.
- Gracz nie może używać swojego blastera.
- The StarterGui.OutStateGui staje się wyłącznie włączone.
Kiedy gracz odrodzi się, jego playerState staje się SelectingBlaster, co uruchamia funkcję onSelectingBlaster().onSelectingBlaster() następnie wyłącza wyłącznie StarterGui.PickABlasterGui, co automatycznie wyłącza ekran odrodzenia.Aby uzyskać więcej informacji o tych warunkach, zobacz obsługę stanu klienta z programu szkolenia Gameplay Scripting.
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 użytkownika, z wyjątkiem podanego wyjątku
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- GUI Layers zawiera listę guisów, które powinny być ustawione wyłącznie.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Włącz kamerę, aby gracze mogli się rozejrzeć, wybierając blaster
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- Wyłącz blaster podczas wyboru blastera
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlaying()
-- Włącz ruch gracza po wybraniu blastera
togglePlayerMovement(true)
setGuiExclusivelyEnabled(playerGui.HUDGui)
-- Aktywuj blaster podczas gry
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Umów harmonogram logiki pola siły zniszczenia, gdy gracz zaczyna grać
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Wyłącz sterowanie podczas oznaczania
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Wyłącz blaster podczas oznaczania
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Włącz sterowanie podczas przebywania w lobby
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Ukryj cały HUD podczas przebywania w lobby
setGuiExclusivelyEnabled(nil)
-- Wyłącz blaster, gdy jesteś 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
-- Ręcznie obsługuj stan początkowy gracza, jeśli jest ustawiać
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Radź sobie z przyszłymi aktualizacjami stanu gracza
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Upewnij się, że zmiany nadal są stosowane po odrodzeniu
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Teraz, za każdym razem, gdy zdrowie gracza osiągnie zerowy poziom, ekran odrodzenia wyświetla się, dopóki gracz nie odrodzi się w swojej strefie spawnu.
Teraz, gdy jesteś zaznajomiony z powszechnym GuiObjects dla interfejsu użytkownika na ekranie, spróbuj odtworzyć obiekt RoundResultsGui ScreenGui i wszystkie jego dzieci na wyświetlenie na ekranie, gdy gracze wygrywają lub przegrywają dopasowywać.Możesz użyć pliku próbnego tagu laserowego jako odniesienia lub dostosować wartości, aby spełnić wymagania dotyczące rozgrywki własnego doświadczenia.
Twórz obiekty SurfaceGui
Aby wyświetlić interfejs użytkownika na powierzchni części w przestrzeni 3D, która odpowiada logice programowania dla każdego pojedynczego gracza , możesz przypisać obiekt SurfaceGui do części, którą chcesz wyświetlić swoje UI w ramach usługi ReplicatedStorage.Ta technika zapewnia, że twoja interfejs użytkownika i jej logika skryptowania są dostępne zarówno dla serwera, jak i klienta każdego gracza.
SurfaceGui obiekty zawierają wszystko GuiObjects, co wyświetla się na powierzchni części w przestrzeni 3D.Próbne doświadczenie z tagiem laserowym obejmuje tylko jedną instancję obiektu SurfaceGui: licznik czasu odnowienia, który wyświetla się nad blasterem każdego gracza.Ten obiekt wymaga logiki skryptowania dla każdego gracza, ponieważ aktywnie reaguje na wejście każdego pojedynczego gracza i zapewnia wizualną informację zwrotną o tym, kiedy będą mogli ponownie wystrzelić swój blaster.
Aby utworzyć obiekt SurfaceGui:
W oknie Eksploratora przewiń nad usługę ReplicatedStorage , a następnie kliknij ikona ⊕ . Wyświetli się menu kontekstowe.
Z menu kontekstowego wstaw obiekt Część .
Włóż obiekt ScreenGui do części.
Zmień nazwę Powierzchnia GUI zgodnie z kontekstem elementów UI dziecka.
Powtórz ten proces dla każdego elementu interfejsu, który musisz wyświetlić na powierzchni części w przestrzeni 3D.
Miernik czasu odnowienia
Miernik czasu odnowienia to komponent interfejsu użytkownika, który informuje graczy, jak długo muszą czekać, zanim będą mogli ponownie wystrzelić swój blaster.Ta niewielka przerwa uniemożliwia graczom wystrzeliwanie tak szybko, jak mogą kliknąć lub naciśnąć przycisk, co jest nierealistyczne dla rozgrywkatagu laserowego.
Aby dokładnie odtworzyć licznik czasu odnowienia w ramach próbnego doświadczenia Laser Tag:
Stwórz część, aby utrzymać swój obiekt SurfaceGui .
- W oknie Eksploratora przewiń nad Przestrzenią roboczą , a następnie kliknij ikona⊕. Wyświetla się menu kontekstowe.
- Z menu kontekstowego wstaw część bloku .Jest to tymczasowe położenie dla części, abyś mógł wizualizować zmiany w każdym kroku procesu.
Pozycję i orientuj część wokół pozycji, w której postać gracza utrzyma swój blaster, a następnie w oknie Właściwości ,
Ustaw Przezroczystość na 1, aby część była całkowicie przejrzysta.
Ustaw nazwę na CooldownBarPrefab .
Ustaw rozmiar na aby skalować część do rozmiaru około długości blastera.
Wyłącz Możliwość kolizji i Możliwość zapytania .
Wprowadź Pulpit nawigacyjny powierzchni do CooldownBarPrefab .
Wybierz nowy SurfaceGui , a następnie w oknie Właściwości ,
Ustaw twarz na górę , aby interfejs użytkownika wyświetlał się w górę.
Ustaw wpływ światła i maksymalną odległość na .
Ustaw PixelsPerStud na 200.
Stwórz czarną barę.
Wstaw etykietę obrazu do powierzchni GUI .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Tło koloru3 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 aby ustawić etykietę w środku jej pojemnika (50% od lewej do prawej od rodzica SurfaceGui i 50% od góry do dołu od rodzica SurfaceGui).
- Ustaw rozmiar na aby rozszerzyć etykietę do całej części (100% poziomo i 100% w pionie w stosunku do matki SurfaceGui).
- Ustaw Nazwę na Kontener .
Okrągnij krawędzie kontenera.
Wstaw obiekt UICorner do pojemnika .
Wybierz UICorner , a następnie w oknie Właściwości ustaw Promień narożny na 0.15, 0, aby nieco zaokrąglić rogi.
Stwórz czerwoną barę.
- Włóż etykietę obrazu do pojemnika .
- Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Usuń domyślną wartość obrazu .
- Ustaw Punkt przyłączenia na 1, 0.5 , aby ustawić punkt pochodzenia etykiety w środkowej części samej etykiety (100% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Tło koloru3 na 172, 13, 13 aby ustawić kolor tła etykiety na ciemnoczerwony.
- Ustaw Przezroczystość tła na 0.2, aby nieco transparentnie uczynić tło etykiety.
- Ustaw Nazwę na Pasek .
- Ustaw pozycję na aby ustawić etykietę w środkowej części pojemnika (100% od lewej do prawej etykiety rodzica i 50% od góry do dołu etykiety rodzica).
- Ustaw rozmiar na {0, 0},{1, 0} aby wydłużyć etykietę do góry jej matki etykiety (0% poziomo i 100% pionowo matki etykiety).Ten krok jest również korzystny dla zachowania tweeningu, które występuje w skryptach w kroku 8.
Okrągnij krawędzie etykiety.
- Wstaw obiekt UICorner do paska .
- Wybierz UICorner , a następnie w oknie Właściwości ustaw Promień narożny na 0.15, 0, aby nieco zaokrąglić rogi.
Przenieś CooldownBarPrefab do ReplicatedStorage .
Utwórz strukturę katalogu, aby zorganizować obiekty interfejsu użytkownika. Próbka używa katalogu Instancje z podkatalogiem Guis .
Przenieś CooldownBarPrefab do Guis .
Odwołaj się do następujących ReplicatedStorage skryptów w pliku próbnym Laser Tag, który programatycznie przymocowuje licznik czasu odnowienia do blastera gracza, a następnie animuje czerwoną barę po wybuchu blastera gracza.
Następujący ReplicatedStorage.FirstPersonBlasterVisuals skrypt klienta obsługuje całą logikę wizualną dla blastera pierwszoosobowego gracza.Wymaga zestawu skryptów modułowych, które współpracują ze sobą, aby ustawić wizualizacje blastera, które wydają się bardziej realistyczne dla rozgrywkaw tagowaniu laserowym, 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 pierwszą osobę ryg
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Dodaj cooldownBar
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 pasek czasu odnowienia, ponieważ jest przypisany do ramy
rigModel:Destroy()
rigModel = nil
end
end
-- Uruchom efekty wizualne pierwszej osoby, gdy wystąpi wybuch
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Połącz ryg z kamerą, jeśli istnieje
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aktualizacja ramki CFrame względem pozycji kamery i RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Ręczne zmiany wizualizacji, gdy typ blastera zmienia się 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 wizualizacji, 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 z powrotem, gdy gracz zakończy wybór blastera.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Teraz, za każdym razem, gdy gracz wystrzeliwuje swój blaster, pasek odnowienia animuje się, aby komunikować, kiedy gracz może ponownie wystrzelić.
Twórz obiekty BillboardGui
Aby wyświetlić elementy interfejsu użytkownika w przestrzeni 3D, które odpowiadają logice programowania i zawsze odpowiadają kamerze każdego gracza niezależnie od jego kąta widzenia, takiego jak nazwy graczy lub znaczniki mapy, możesz utworzyć obiekt BillboardGui jako dziecko BasePart lub Attachment, który istnieje w przestrzeni 3D.
Próbne doświadczenie z tagiem laserowym obejmuje dwa oddzielne obiekty BillboardGui w ramach usługi ReplicatedStorage:
- OtherPlayerIndicatorGuiPrefab - Wyświetla różowy lub zielony okrąg nad głową każdego gracza, gdy jest aktywny w rundzie.
- TaggedOutIndicatorGuiPrefab - Wyświetla powyżej głowy gracza, gdy zostaną oznaczeni poza rundą.
Po utworzeniu obiektu BillboardGui możesz utworzyć i dostosować jego dziecko GuiObjects zgodnie z przeznaczeniem każdego kontenera.Aby pokazać, w bezpośrednich sekcjach, które obserwować, nauczysz się, jak wdrożyć elementy interfejsu dla obu typów wskaźników w ramach próbnego doświadczenia z tagiem laserowym. Możesz dostosować dowolną część procesu, aby spełnić specyfikację własnego doświadczenia .
Aby utworzyć obiekt BillboardGui:
- W oknie Eksploratora przewiń nad BasePart lub Attachment, a następnie kliknij ikona ⊕ . Wyświetli się menu kontekstowe.
- Z menu kontekstowego wstaw obiekt BillboardGui .
- Zmień nazwę BillboardGui zgodnie z kontekstem elementów UI dziecka.
- Powtórz ten proces dla każdego elementu interfejsu, który musisz wyświetlać kontekstowo nad głowami graczy.
Wskaźnik zespołu
Wskaźnik zespołu to element interfejsu użytkownika, który informuje graczy, do jakiego zespołu należą inni gracze w rundzie, aby mogli łatwo odróżniać między swoimi sojusznikami a członkami drużyny wroga.Informacja ta jest ważna, ponieważ rozgrywka w doświadczeniu strzelca pierwszoosobowego wymaga od graczy podejmowania szybkich decyzji strategicznych, gdy są w strefach bojowych, aby nie dostać się oznaczony i stracić dopasowywać.
Aby dokładnie odtworzyć wskaznik zespołu w ramach próbnego doświadczenia Laser Tag:
Włóż obiekt BillboardGui do tymczasowego ustawienia.
Z zakładki Awatar z paska narzędzi kliknij twórcę rigów .
Wybierz z dostępnych opcji.Próbka używa wpisywaćszablonu R15 , kształtu ciała kobiecego i awatara Rthro .Sprzęt wyświetla się zarówno w widoku 3D, jak i w oknie Eksploratora pod nazwą Sprzęt .
W oknie Eksploratora przeglądaj sieć dziecka rig'a Głowa , a następnie kliknij ikona ⊕ . Wyświetli się menu kontekstowe.
Z menu kontekstowego wstawь BillboardGui .
Wybierz nowy BillboardGui , a następnie w oknie Właściwości ,
Ustaw wpływ światła na 0, aby zapobiec oddziaływaniu światła środowiskowego na kolor wskaźnika.
Ustaw nazwę na OtherPlayerIndicatorPrefab .
Ustaw Rozmiar na {0, 10},{0, 10} znacznie zmniejszyć etykietę.
Ustaw StudsOffsetWorldSpace na 0, 4, 0 aby umieścić ją nad głową ryg.
Wstaw obiekt ramki do Innego wskaźnika gracza prefab .
Wybierz nowe okno, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia ramy w środku samej siebie (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
Ustaw BackgroundColor3 na 255, 3, 0 aby ustawić kolor tła ramy na czerwony jako kolor rezerwowy.
Ustaw pozycję na aby ustawić ramę w środku swojego pojemnika (50% od lewej do prawej od matki BillboardGui i 50% od góry do dołu matki BillboardGui).
Ustaw rozmiar na {1, -2},{1, -2} aby skrócić ramę do powierzchni BillboardGui.
Włóż obiekt UICorner do ramy , aby całkowicie zaokrążyć rogi.
Włóż obiekt UIStroke do ramy , aby obrysować okrąg wskaźnika.
Przenieś Inny wskaźnik prefiksu gracza do ReplicatedStorage .
Odwołaj się do następującego ReplicatedStorage skryptu w pliku próbnym Laser Tag 1A, który wyświetla programatycznie wskaźnik zespołu dla każdego gracza w aktywnej rundzie, chyba że jest na wrogiej drużynie i jest zablokowany.
Następujący ReplicatedStorage.OtherPlayerIndicatorGuiSetup skrypt uruchamia się, gdy gracze pojawiają się na arenie na aktywną rundę.Przyłącza wskaźnik zespołu, wywołując funkcję addIndicatorToCharacter(), która lokalizuje obiekt Head każdej postaci gracza uczestniczącej w rundzie.Jeśli nie mają jeszcze wskaźnika zespołu, skrypt następnie klonuje i dodaje inny wskaźnik zespołuPrefab UI do postaci Head i ustawia kolor wskaźnika zespołu na kolor zespołu.
Jeśli inni gracze są w tej samej drużynie, zawsze wyświetlany jest wskaźnik drużyny, nawet jeśli ukrywają się za obiektami w przestrzeni 3D; jeśli inni gracze są w wrogiej drużynie, wskaźnik drużyny wyświetlany jest tylko wtedy, gdy nie ma obiektu w przestrzeni 3D, aby ich ukryć.
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 do graczy uczestniczących w rundzie
if not otherPlayer.Team then
return
end
-- Unikaj dodawania duplikatowych wskaźników, twórz nowy tylko wtedy, gdy nie istnieje
local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
if not gui then
gui = otherPlayerIndicatorPrefab:Clone()
gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
gui.Parent = otherHead
end
-- Wskaźnik jest zawsze na górze tylko wtedy, gdy gracz jest przyjazny
local isFriendly = otherPlayer.Team == localPlayer.Team
gui.AlwaysOnTop = isFriendly
end)
end
local function addIndicatorWhenCharacterSpawns(player: Player)
if characterSpawnConnectionsByPlayer[player] then
return
end
local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
characterSpawnConnectionsByPlayer[player] = connection
end
local function stopSyncingIndicators()
for _, connection in characterSpawnConnectionsByPlayer do
connection:Disconnect()
end
table.clear(characterSpawnConnectionsByPlayer)
if playerAddedConnection then
playerAddedConnection:Disconnect()
playerAddedConnection = nil
end
for _, player in Players:GetPlayers() do
removeIndicatorFromPlayer(player)
end
end
local function addIndicatorToPlayer(player: Player)
if player == localPlayer then
return
end
addIndicatorToCharacter(player.Character)
addIndicatorWhenCharacterSpawns(player)
end
local function startSyncingIndicators()
for _, player in Players:GetPlayers() do
addIndicatorToPlayer(player)
end
if not playerAddedConnection then
playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
end
end
local function onLocalTeamChanged()
local localTeam = localPlayer.Team
if localTeam then
startSyncingIndicators()
else
stopSyncingIndicators()
end
end
localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()
Teraz, za każdym razem, gdy gracz jest w aktywnej rundzie, wskaźniki drużyn wyświetlają się nad głowami innych graczy, chyba że są w drużynie wroga i za obiektem.
Oznaczony wskaźnik
Oznaczony wskaźnik to element interfejsu użytkownika, który informuje graczy, gdy inni gracze nie są już aktywni w rundzie i znajdują się w procesie odrodzenia w strefie ich pochodzenia.Informacja ta jest ważna, ponieważ rozgrywka doświadczenia strzelca z pierwszej osoby wymaga, aby gracze przenieśli się na swoją następną celownicę, jak tylko oznaczą gracza, tak aby nie stali się podatni na arenie, grając zbyt długo w tym samym miejscu.
Aby dokładnie odtworzyć oznaczony wskaźnik w ramach próbnego doświadczenia Laser Tag:
Wstaw obiekt BillboardGui do tymczasowego ustawienia, abyś mógł wizualizować zmiany w każdym kroku procesu.
Z zakładki Awatar z paska narzędzi kliknij twórcę rigów .
Wybierz z dostępnych opcji.Próbka używa wpisywaćszablonu R15 , kształtu ciała męskiego i awatara Rthro .Sprzęt wyświetla się zarówno w widoku 3D, jak i w oknie Eksploratora pod nazwą Sprzęt .
W oknie Eksploratora przeglądaj sieć dziecka rig'a Głowa , a następnie kliknij ikona ⊕ . Wyświetli się menu kontekstowe.
Z menu kontekstowego wstawь BillboardGui .
Wybierz nowy BillboardGui , a następnie w oknie Właściwości ,
Ustaw wpływ światła na 0, aby zapobiec oddziaływaniu światła środowiskowego na kolor wskaźnika.
Ustaw nazwę na TaggedOutIndicatorGuiPrefab .
Ustaw Rozmiar na {3, 0},{0.5, 0}.
Ustaw StudsOffset na 0, 3.25, 0 aby umieścić ją nad głową gracza.
Włóż obiekt Etykieta obrazu do TaggedOutIndicatorGuiPrefab .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
- Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
- Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
- Ustaw Nazwę na Ramę .
- Ustaw Pozycję na {0.5, 0},{0.5, 0}.
- Ustaw rozmiar na aby rozszerzyć etykietę do całego BillboardGui (100% poziomo i 100% w pionie w stosunku do poprzedniego BillboardGui).
- Ustaw Obraz na rbxassetid://14304826985, aby uczynić obraz wielokierunkowym rozmyciem.
- Ustaw Kolor obrazu na 245, 46, 46 aby zabarwić etykietę na czerwono.
Aby poprawić wykonywanie, możesz pominąć zasób obrazu i zamiast tego użyć obiektu UIGradient z sekwencją numerów przejrzystości niestandardowej.Aby dowiedzieć się więcej o tej technice zanikania, zobacz modyfikatory wyglądu interfejsu - gradient.
Wstaw obiekt Etykieta tekstowa w Ramę .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Punkt przyłączenia na 0.5, 0.5 , aby ustawić punkt pochodzenia etykiety w środku samej etykiety (50% od lewej do prawej etykiety i 50% od góry do dołu etykiety).
Ustaw Przezroczystość tła na 1, aby uczynić tło etykiety całkowicie przezroczystym.
Ustaw nazwę na BodyTextLabel .
Ustaw pozycję na , aby ustawić etykietę w środku jej pojemnika (50% od lewej do prawej etykiety rodzica i 50% od góry do dołu etykiety rodzica).
Ustaw rozmiar na tak, aby tekst zajmował większość obszaru zanikania (85% poziomo i 70% w pionie odpowiednio od etykiety obrazu rodzica).
Ustaw FontFace na Montserrat aby pasował do futurystycznej estetyki.
Ustaw wagę na Pogrubienie aby grubienie czcionki.
Ustaw Tekst na Oznaczony .
Ustaw TextColor3 na 255, 255, 255, aby tekst był biały.
Włącz Skalowanie tekstu .
Przenieś TaggedOutIndicatorGuiPrefab do ReplicatedStorage .
Odwołaj się do następujących ServerScriptService skryptów w pliku próbnym Laser Tag 1A, który wyświetla oznaczony wskaźnik programatycznie, gdy gracz odrodzi się w strefie spawn swojej drużyny.
Następujący ServerScriptService.SetupHumanoid skrypt serwera uruchamia się, gdy gracz załadować doświadczenie.Gwarantuje, że za każdym razem, gdy postać gracza zostanie 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)
-- Wezwij funkcję onCharacterAdded, jeśli gracz ma już postać
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Wezwij onCharacterAdded za każdym razem, gdy pojawi się przyszły charakter dla tego gracza
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Wezwij onPlayerAdded dla każdego gracza, który już jest w grze
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Wezwij onPlayerAdded dla wszystkich przyszłych graczy
Players.PlayerAdded:Connect(onPlayerAdded)
Teraz, gdy zdrowie gracza osiągnie zerowy poziom, oznaczony wskaźnik wyświetlany jest nad jego głową, dopóki nie odrodzą się.
Gratulacje za ukończenie programu projektowania interfejsu użytkownika! Teraz, gdy masz doświadczenie w tworzeniu stylu artystycznego, projektowaniu układów i wdrażaniu projektów w Studio od początku do końca, możesz rozszerzyć swój projekt o nowe interfejsy i funkcjonalności lub przestrzegać dodatkowych programów szkoleniowych, takich jak Gameplay Scripting Curriculum, który nauczy cię o ogólnej organizacji i kluczowych szczegółach wdrożenia próbnego doświadczenia laserowego taga.Wesołego tworzenia!