Stwórz własny animowany licznik czasu do gier, w których liczy się każda sekunda. Dzięki animacjom UI możesz sprawić, że licznik czasu będzie pulsował i znikał, a nawet dodać niestandardowy materiał odliczania czasu, który otacza zegar.
Z tego samouczka dowiesz się, jak:
Skonfigurować materiał.
Animować tarczę zegara.
Zmienić kolor zegara.
Utwórz widżet użytkownika w Przeglądarce zawartości, postępując zgodnie z instrukcjami zawartymi w samouczku Wyskakujące okienka UI.
Krok 1: Konfiguracja widżetów
Po utworzeniu widżetu użytkownika kliknij dwukrotnie miniaturę widżetu użytkownika, aby otworzyć edytor widżetów.
Przeciągnij widżet Nakładka do grafu widżetu i zmień jego rozmiar do 1920x1080, przeciągając prawy dolny róg. Ten widżet działa jako ekran, na którym będzie wyświetlany UI.
Kliknij prawym przyciskiem myszy widżet Nakładka w panelu Hierarchia, aby zmienić nazwę widżetu na Główny. Ta nazwa przypomina również, że jest to widżet działający jako model ekranu.
Przeciągnij drugi widżet Nakładka do widżetu Głównego. Ten widżet będzie zawierał wszystkie widżety, które tworzą konstrukcję i funkcję animowanego licznika czasu.
Zmień nazwę drugiego widżetu Nakładka na ParentContainer w panelu Hierarchia.
W panelu Szczegóły ustaw następujące właściwości:
Odstęp wewnętrzny = 25.0
Wyrównanie poziome = Wyrównanie do środka poziomo
Przeciągnij widżet Pole rozmiaru do widżetu ParentContainer. To określi i wymusi rozmiar widżetów podrzędnych. Widżety podrzędne pola rozmiaru staną się tarczą zegara.
Zmień nazwę widżetu Pole rozmiaru na BGSizeBox w panelu Hierarchia.
W panelu Szczegóły ustaw opcje Wyrównanie poziome i Wyrównanie pionowe na Wyrównanie do środka.
Zaznacz, aby wybrać minimalną żądaną szerokość i maksymalną żądaną wysokość, aby włączyć tę opcję, a następnie ustaw właściwości na 130.0.
Kontener powinien znajdować się w widżecie Głównym, jak pokazano poniżej
Przeciągnij widżet Obraz do widżetu BGizeBox.
Zmień nazwę widżetu Obraz na Licznik czasu w panelu Hierarchia.
W panelu Szczegóły ustaw opcje Wyrównanie poziome i Wyrównanie pionowe na Wyrównanie do środka.
Dodaj instancję materiału do właściwości Pędzel > Obraz. Może to być materiał odliczający czas.
Materiał wypełnia przestrzeń wewnątrz widżetu Kontener nadrzędny.
Przeciągnij widżet Pole tekstowe do widżetu Kontener nadrzędny.
Zmień nazwę widżetu Pole tekstowe na TimerText w panelu Hierarchia.
W panelu Szczegóły ustaw właściwość Tekst na 00:00.
Widżet Tekst licznika czasu znajduje się bezpośrednio pośrodku widżetu użytkownika.
W następnym kroku utworzysz animację widżetu Tekst licznika czasu, aby wyświetlany czas był bardziej dynamiczny w stanie przynaglenia.
Krok 2: Animowanie tekstu licznika czasu
Aby wywołać poczucie zbliżającego się niebezpieczeństwa w ostatnich sekundach odliczania, animuj czas na zegarze.
W poniższej animacji tekst licznika czasu powiększy się, zmieni kolor na czerwony, a następnie zniknie. Animacja będzie powtarzana przez cały czas trwania trybu przynaglenia ustawionego w urządzeniu licznika czasu.
Kliknij Animacje na dole ekranu Edytor widżetów. Spowoduje to otwarcie panelu Sequencera, w którym można tworzyć animacje i dodawać widżety do sekwencji animacji.
Kliknij +Animacja, aby utworzyć plik animacji w widżecie użytkownika.
Nazwij animację Przynaglenie. Ta animacja zostanie ustawiona później, gdy dodasz powiązania do widżetu użytkownika.
Niebieski WYBRANY kwadrat otacza graf widżetu.
Kliknij +Dodaj, aby otworzyć listę obiektów, które można dodać do animacji w widżecie użytkownika.
W panelu Hierarchia wybierz widżet TimerText.
Wybierz TimerText z listy, aby dodać TimerText do panelu Sequencera.
Obok TimerText wybierz ikonę +, aby otworzyć listę właściwości, które można animować.
Z listy wybierz opcję Przekształć. Powoduje to dodanie wszystkich sposobów przekształcania tekstu: translacji, obrotu, skalowania i zniekształcenia.
Otwórz opcje skala i wybierz ikonę + Klatka kluczowa, aby dodać klatki kluczowe do osi czasu. Opcje Oś X i Oś Y zwiększają lub zmniejszają rozmiar tekstu, gdy wprowadzasz nowe wartości.
Przesuń wskaźnik odtwarzania na osi czasu do 0.25 sekundy, zmień wartości osi X i osi Y na 1.5, a następnie naciśnij ikonę +Klatka kluczowa obok opcji Oś X i Oś Y. Klatki kluczowe pojawiają się na osi czasu, pokazując postęp na TimerText.
Przesuń wskaźnik odtwarzania na osi czasu do 0.5 sekundy, zmień wartości osi X i osi Y na 2.0, a następnie naciśnij ikonę +Klatka kluczowa obok opcji Oś X i Oś Y. Na osi czasu pojawiają się dodatkowe klatki kluczowe, pokazując postęp tekstu.
Wybierz ikonę + obok TimerText, a następnie z listy wybierz opcję Kolor i nieprzezroczystość. Powoduje to dodanie do Sequencera właściwości Czerwony, Zielony, Niebieski i Alfa.
Zresetuj wskaźnik odtwarzania na osi czasu i wybierz ikonę + Klatka kluczowa obok Kolor i nieprzezroczystość. To ustawia pierwszą klatkę kluczową dla każdej właściwości Kolor i nieprzezroczystość na osi czasu.
Rozwiń Kolor i nieprzezroczystość, zmień wartość Czerwony na 1.0, wartość Zielony na 0.0, a wartość Niebieski na 0.0. To tworzy kolor czerwony.
Przesuń wskaźnik odtwarzani na 0.25 sekundy, a następnie wybierz ikonę + Klatka kluczowa obok każdej z właściwości w sekcji Kolor i nieprzezroczystość. Powoduje to dodanie klatek kluczowych do osi czasu.
Przesuń wskaźnik odtwarzania na 0.5 sekundy, zmień wartość Alfa na 0.0 i wybierz ikonę + Klatka kluczowa. Gdy animacja osiągnie ostatnie klatki kluczowe na osi czasu, tekst zniknie.
Jeśli przesuniesz wskaźnik odtwarzania w przód i w tył po osi czasu, utworzona animacja będzie odtwarzana na grafie widżetu.
W następnym kroku dodasz model widoku i powiązania widoku, aby zastąpić urządzenie licznika czasu widżetem użytkownika.
Krok 3: Dodawanie powiązań widoku
Aby zastąpić domyślny UI urządzenia licznika czasu, powiąż widżet Pole tekstowe (TimerText) z ustawieniami urządzenia licznika czasu.
Z menu Okna wybierz Model widoku. Zostanie otwarte okno Model widoku.
Kliknij +Model widoku, następnie wybierz Urządzenie – Model widoku licznika czasu > Wybierz. Wszystkie modele widoku urządzenia licznika czasu są teraz dostępne do powiązania z widżetem użytkownika.
W panelu Hierarchia wybierz widżet TimerText.
Na dolnym pasku narzędzi kliknij opcję Powiązania widoku, aby otworzyć panel Powiązania widoku.
Kliknij widżet +TimerText, aby dodać widżet TimerText do panelu Powiązania widoku.
Wybierz pole TimerText, aby otworzyć menu rozwijane właściwości widżetu.
W menu rozwijanym wybierz TimerText > Tekst > Wybierz. To identyfikuje tekst widżetu TimerText jako właściwość powiązaną.
Wybierz puste pole z prawej strony, aby otworzyć menu rozwijane powiązań.
Z menu rozwijanego powiązań wybierz kolejno opcje Model widoku TimerText> Bieżący czas > Wybierz. Spowoduje to powiązanie widżetu TimerText z bieżącym czasem urządzenia licznika czasu i wyświetlenie bieżącego czasu na ekranie.
W następnym kroku dodasz animację do modelu widoku, aby odtwarzała się na ekranie w trybie pilności.
Krok 4: Dodawanie animacji
Dodasz animację podobnie, jak w przypadku dodawania powiązań dla TimerText w panelu Powiązania widoku.
Wybierz opcję +Dodaj warunek u góry panelu Powiązania widoku. Powoduje to dodanie wiersza warunkowego do panelu Powiązania widoku.
Otwórz menu rozwijane modelu widoku i wybierz Widżet użytkownika > Wybierz. Powoduje to dodanie widżetu użytkownika do warunku.
Wybierz pole z lewej strony, aby otworzyć menu rozwijane powiązania modelu widoku.
W liczniku czasu trybu kreatywnego wybierz Model widoku > Przynaglenie > Wybierz. Wykorzystuje IsUrgency jako właściwość porównania, aby sprawdzić, czy jest ona równa określonej wartości, a następnie, na podstawie zwróconej wartości (true/false), aktywuje animację.
Zmień pole czasu na 1.0. Oznacza to, że jeśli wartość Przynaglenie jest równa 1.0, wówczas wartością będzie true i animacja zostanie odtworzona.
Wybierz pole z prawej strony, aby otworzyć menu rozwijane kolejki, i wybierz Widżet użytkownika > Kolejkuj odtwarzanie animacji > Wybierz. Teraz utworzona animacja pojawi się w kolejce do odtwarzania, gdy tryb przynaglenia jest równy 1.0.
Obok pola W animacji wybierz ikonę powiązania, aby zmieniła się w niebieską ikonę łącza.
Wybierz pole W animacji, a następnie wybierz Widżet użytkownika > Nazwa animacji > Wybierz. Wybrana animacja jest odtwarzana po dodaniu do kolejki.
Ustaw wartość Czas rozpoczęcia na 10.0. Ta wartość to sekunda/klatka, kiedy ma się rozpocząć odtwarzanie animacji. Jeśli jest ustawiona na 0.0, oznacza to, że animacja zostanie odtworzona od punktu 0.0 sekundy/klatki.
Ustaw Prędkość odtwarzania na 0.5. Dzięki temu animacja będzie odtwarzana z połową szybkości ustawionej w Sequencerze.
Kliknij Skompiluj, aby zapisać widżet użytkownika.
Krok 5: Dodawanie urządzenia licznika czasu
Ostatnim krokiem jest dodanie urządzenia licznika czasu do okna wizualizacji i dostosowanie jego ustawień.
W Przeglądarce zawartości wybierz folder Fortnite > Urządzenia, aby otworzyć wszystkie foldery urządzeń.
W pasku wyszukiwania widoku zasobów wpisz Licznik czasu, aby wyświetlić urządzenie licznika czasu.
Przeciągnij urządzenie licznika czasu do okna wizualizacji.
W panelu Szczegóły ustaw Czas trwania na 30.0 sekund.
Rozwiń opcję Zaawansowane, aby wyświetlić Własną klasę widżetu.
Wybierz swój Widżet użytkownika z menu rozwijanego Własna klasa widżetu.
W drugim zestawie opcji Zaawansowane użyj następujących ustawień:
Może wchodzić w interakcję = Nie
Zachowanie po zakończeniu = Reset
Widoczność podczas gry = Ukryte
Włącz tryb przynaglenia = Zaznaczone
Czas trybu przynaglenia = 10.0 sekund
Teraz gracze nie mogą wchodzić w interakcje z urządzeniem, a gdy licznik czasu osiągnie ustawiony czas trwania, zostanie on zresetowany. Po włączeniu trybu pilnego twoja niestandardowa animacja zostanie umieszczona w kolejce i odtworzona w czasie ustawionym w opcji Czas trybu przynaglenia.
Zapisz zmiany, a następnie przetestuj projekt, aby zobaczyć działający widżet użytkownika w interfejsie.
Test powinien zakończyć się zastąpieniem domyślnego urządzenia licznika czasu przez niestandardowy czas i odtworzeniem animacji w określonym czasie.
Praca własna
Istnieje kilka sposobów, aby dostosować licznik czasu do własnego projektu.
Dodaj materiał wokół TimerText, który powoli znika w miarę odliczania czasu.
Dodaj teksturę otaczającą TimerText, która wygląda jak zegar.
Przesuń licznik czasu do rogu, a nie na środek ekranu.