Pasek punktów to element interfejsu użytkownika, który wyświetla informacje o graczu, które są ważne dla rozgrywki w Twoim doświadczeniu, takie jak statystyki dotyczące poziomów, liczba waluty czy przedmioty w ekwipunku. Wyświetlając paski punktów bezpośrednio na ekranie gracza, możesz skupić ich uwagę na tym, co jest im potrzebne do osiągnięcia różnych celów w Twoim doświadczeniu.
Korzystając z pliku .rbxl Gold Rush jako odniesienia, ten samouczek pokazuje, jak stworzyć pasek punktów, który śledzi ilość złota zbieranego przez graczy, w tym wskazówki dotyczące:
- Tworzenia ramki w górnej części środka ekranu.
- Dodawania ikony korony, która komunikuje, co śledzi pasek punktów, bez jakiejkolwiek tekstowej wskazówki.
- Wstawiania tekstu punktów, który odnotowuje ilość złota zebranego przez gracza.
- Testowania projektu interfejsu użytkownika na różnych emulowanych urządzeniach, aby sprawdzić, jak wygląda na różnych ekranach i proporcjach.
Jak w przypadku wszystkich tworzeń 2D, istnieje wiele sposobów osiągnięcia konkretnego celu. Możesz stworzyć swoje własne zasoby 2D w zewnętrznych narzędziach interfejsu użytkownika i działać według własnego projektu.
Stwórz ramkę
Aby wyświetlić elementy interfejsu użytkownika na ekranie każdego gracza, możesz stworzyć obiekt ScreenGui w usłudze StarterGui. Obiekty ScreenGui są głównymi kontenerami interfejsu UI na ekranie, a usługa StarterGui kopiuje swoje zawartości do kontenera PlayerGui każdego gracza, gdy wchodzi do doświadczenia.
Po utworzeniu obiektu ScreenGui, możesz tworzyć i dostosowywać jego dzieci GuiObjects zgodnie z celem każdego kontenera. Aby zilustrować ten koncept, ta sekcja nauczy cię, jak stworzyć obiekt ScreenGui z dzieckiem Frame, które będzie zawierać zarówno ikonę, jak i tekst paska punktów.
Oprócz dostosowywania właściwości ramki, ta sekcja zawiera także instrukcje dotyczące dodawania dziecka UISizeConstraint i obiektu UIListLayout do ramki. Ta technika zapewnia, że GuiObjects automatycznie układają się poziomo, gdy je dodajesz do ramki, i że są zawsze czytelne na mniejszych ekranach. Jeśli nie zastosujesz się do tych wskazówek, każdy GuiObject, który dodasz do ramki, ułoży się poza jej obrysem.
Aby odtworzyć kontener ramki w przykładowym pliku Gold Rush:
Stwórz obiekt ScreenGui, aby zawierał twój interfejs UI na ekranie.
- W oknie Eksploratora, najedź na StarterGui i kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
- Wstaw ScreenGui.
Stwórz kontener dla całego komponentu interfejsu paska punktów.
Wstaw Frame do obiektu ScreenGui.
Wybierz nową Ramkę, a następnie w oknie Właściwości,
- Ustaw AnchorPoint na 0.5, 0, aby ustawić punkt początkowy ramki w górnej części na jej środku (50% od lewej do prawej strony ramki, i 0% od góry do dołu ramki).
- Ustaw BackgroundColor na 0.6, aby tło ramki było czarne.
- Ustaw BackgroundTransparency na 0.6, aby tło ramki było półprzezroczyste.
- Ustaw Position na {0.5, 0}, {0.01, 0}, aby ustawić ramkę blisko górnej części ekranu (50% od lewej do prawej strony ekranu i 1% od góry do dołu ekranu).
- Ustaw Size na {0.25, 0}, {0.08, 0}, aby ramka zajmowała dużą część środka ekranu, aby przyciągnąć uwagę gracza (25% w poziomie i 8% w pionie).
- Ustaw Name na ScoreBarFrame.
Dodaj ograniczenie do ramki, aby jej zawartość była zawsze czytelna na małych ekranach.
- Wstaw obiekt UISizeConstraint do ScoreBarFrame.
- Wybierz nowe ograniczenie, a następnie w oknie Właściwości ustaw MinSize na 0, 40, aby zapewnić, że ramka nigdy nie skurczy się do mniej niż 40 pikseli w pionie.
Dodaj obiekt układu do ramki, aby zawartość układała się od lewej do prawej i była wyśrodkowana w pionie w obrębie ramki.
- Wstaw obiekt UIListLayout do ScoreBarFrame.
- Wybierz nowy obiekt układu, a następnie w oknie Właściwości,
- Ustaw FillDirection na Horizontal.
- Ustaw VerticalAlignment na Center.
Dodaj ikonę
Ikona to symbol, który reprezentuje akcję, obiekt lub koncepcję w doświadczeniu. Używanie ikon, które są proste i intuicyjne, pozwala graczom łatwo rozpoznać, co komunikujesz za pomocą interfejsu, bez używania tekstu, który może zaśmiecać ekran i odciągać uwagę od istotnych treści.
Na przykład, w próbce użyto prostej ikony korony złotej, aby wskazać, ile złota gracz zebrał. Ta ikona jest łatwo rozpoznawalna jako najbardziej istotny cel w doświadczeniu i zawiera minimalne szczegóły, aby pozostać czytelną na ekranach urządzeń mobilnych.
Aby odtworzyć ikonę korony złotej w przykładowym pliku Gold Rush:
Wstaw obiekt ImageLabel do ScoreBarFrame.
W oknie Eksploratora, najedź na ScoreBarFrame i kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Wstaw ImageLabel.
Wybierz nową etykietę, a następnie w oknie Właściwości,
Ustaw Image na rbxassetid://5673786644, aby ikona była koroną.
Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
Ustaw LayoutOrder na 1. To zapewnia, że ikona pozostaje pierwszym GuiObject w ramce od lewej do prawej, gdy wstawiasz tekst w następnej sekcji samouczka.
Ustaw Size na {1.25, 0}, {1, 0}, aby poszerzyć obszar etykiety ponad pełną szerokość ramki.
Ustaw SizeConstraint na RelativeYY, aby zachować proporcje ikony, skalując rozmiar etykiety z wysokością ramki rodzica.
Wstaw tekst punktów
Tekst punktów rejestruje wynik gracza w doświadczeniu, np. ile punktów zdobywa w meczu. Ważne jest, aby cały tekst UI był zarówno jasny, jak i łatwy do odczytania, aby gracze szybko mogli zrozumieć informacje, które są im potrzebne do odniesienia sukcesu w Twoim doświadczeniu.
Na przykład, w próbce użyto dużego tekstu na tle kontrastowym, aby nie zlewał się z szumem tła. Jest to szczególnie istotne dla dostępności, ponieważ zapewnia, że tekst pozostaje czytelny, gdy gracz porusza się po przestrzeni 3D, która może zawierać obiekty w tym samym kolorze co tekst.
Aby odtworzyć tekst punktów w przykładowym pliku Gold Rush:
Wstaw obiekt TextLabel do ScoreBarFrame.
W oknie Eksploratora, najedź na ScoreBarFrame i kliknij ikonę ⊕. Wyświetli się menu kontekstowe.
Wstaw TextLabel.
Wybierz nową etykietę, a następnie w oknie Właściwości,
Ustaw BackgroundTransparency na 1, aby tło etykiety było całkowicie przezroczyste.
Ustaw Size na {1, 0}, {1, 0}, aby poszerzyć etykietę na cały obszar ramki (100% w poziomie i 100% w pionie ramki rodzica). Etykieta wychodzi poza granice ramki, ponieważ jest przesunięta przez ikonę.
Ustaw SizeConstraint na RelativeYY, aby upewnić się, że rozmiar etykiety skaluję się z wysokością ramki rodzica i zachowuje proporcje ikony. Ten krok również sprawia, że etykieta jest kwadratowa i utrzymuje się w obrębie granic ramki.
Ustaw Font na GothamSSm, aby dopasować estetykę do otoczenia.
Ustaw Text na 0, aby rozpocząć wynik od zera.
Ustaw TextColor3 na 255, 200, 100, aby nadać tekstowi złoty odcień.
Ustaw TextSize na 30, aby tekst był większy na ekranie.
Ustaw TextXAlignment na Left, aby zapewnić, że tekst punktów pozostaje wyrównany do lewej blisko ikony korony, niezależnie od tego, czy wynik gracza wynosi 0, 1 000 czy 1 000 000.
Testuj projekt
Emulator urządzenia w Studio umożliwia testowanie, jak gracze będą widzieć i wchodzić w interakcję z Twoim interfejsem na różnych urządzeniach. To narzędzie jest kluczową częścią projektowania interfejsu, ponieważ proporcje widoku w Studio niekoniecznie odzwierciedlają proporcje ekranów, które gracze używają do uzyskania dostępu do Twojego doświadczenia, a ważne jest, aby Twój interfejs był zarówno czytelny, jak i dostępny na każdym urządzeniu.
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 ani rozgryźć Twoich ikon, a gracze z małymi ekranami mogą nie być w stanie zobaczyć przestrzeni 3D, ponieważ elementy Twojego interfejsu zajmują zbyt dużo miejsca na wyświetlaczu.
Aby emulować swój interfejs na różnych rozmiarach ekranów:
W menu Test w Studio przełącz Emulator urządzenia.
W rozwijanym menu rozdzielczości wybierz Rzeczywista rozdzielczość. To pozwala zobaczyć prawdziwą rozdzielczość elementów interfejsu na urządzeniu, które emulujesz.
W rozwijanym menu urządzenia wybierz przynajmniej jedno urządzenie w sekcjach Telefon, Tablet, Desktop i Konsola.
