A score bar jest elementem interfejsu, który wyświetla informacje o graczu, które są ważne dla rozgrywkaw Twoim doświadczeniu, takie jak ich statystyki levelingu, liczba walut lub przedmioty w ich ekwipunku. Poprzez bezpośrednie wyświetlanie linii na ekranie gracza możesz utrzymać ich uwagę na tym, co muszą zrobić, aby osiągnąć różne cele w Twoim doświadczeniu.
Używając pliku Złota Rush.rbxl jako referencji, ten samouczek pokazuje, jak stworzyć bar liczby, który śledzi ilość zbieranych graczy złota, w tym instrukcje:
- Tworzenie ramy w górnym centrum ekranu.
- Dodanie ikony korony, która komunikuje, co śledzi wynik baru bez żadnego kierunkowego tekstu.
- Umieszczenie tekstu wyniku, który zapisuje ilość złota, którą zbiera gracz.
- Testowanie twojego projektu UI na kilku emulowanych urządzeniach, aby przeglądać jego wygląd na różnych ekranach i proporcjach aspektu.
Podobnie jak w przypadku wszystkich 2D, istnieje wiele sposobów na dziełodowolnego celu. Możesz tworzyć własne 2D-zasoby w narzędziach interfejsu użytkownika stron trzecich i podążać za własnym projektem.
Utwórz ramę
Aby wyświetlić elementy interfejsu użytkownika na każdym ekranie gracza, możesz utworzyć obiekt ScreenGui w usłudze StarterGui. Objekty ScreenGui są głównymi kontenerami dla interfejsu użytkownika na ekranie, a
Po utworzeniu obiektu ScreenGui możesz utworzyć i dostosować jego dziecko GuiObjects zgodnie z celem każdego pojemnika. Aby pokazać ten koncept, ta sekcja uczy cię, jak utworzyć obiekt ScreenGui z dzieckiem 1> Class.
Oprócz dostosowywania właściwości ramy dostępne jest również instrukcje na temat dodawania dziecka UISizeConstraint i UIListLayout obiektu do ramy. Ta technika zapewnia, że
Aby odtworzyć kontener ramy w ramach złotego rajdu umieść plik:
Utwórz obiekt ScreenGui, aby zawierać swoją interfejs użytkownika na ekranie.
- W oknie Explorer , kliknij na StarterGui i kliknij ikone ⊕. Wyświetlony zostanie menu kontekstowe.
- Wprowadź ScreenGUI .
Utwórz komponent interfejsu kalkulatora dla całego interfejsu kalkulatora.
Utwórz Ramę w obiekcie ScreenGUI.
Wybierz nowy Rama, a następnie w oknie Właściwości,
- Ustaw AnchorPoint na 0.5, 0 aby ustawić punkt pochodzenia ramy w górnym środku samej siebie (50% z lewej do prawnej strony ramy i 0% z górnej do dolnej strony ramy).
- Ustaw Kolor tła na 0.6, aby uczynić tło ramy czarnym.
- Ustaw Przezroczystość tła na 0.6, aby uczynić tło ramy półprzezroczystym.
- Ustaw Pozycję na {0.5, 0},{0.01, 0} do ustawienia ramy w pobliżu góry środkowej ekranu (50% z lewej do prawy strony ekranu i 1% z góry do dołu ekranu).
- Ustaw Wielkość na {0.25, 0},{0.08, 0} , aby ramy zajmowały dużą część środka ekranu, aby przyciągnąć uwagę gracza (25% poziomie poziomie i 8% poziomie poziomie).
- Ustaw Nazwę na ScoreBarFrame .
Dodaj ograniczenie do ramy, aby jej treść była zawsze czytelna na małych rozmiarach ekranu.
- Wprowadź obiekt UISizeConstraint do ScoreBarFrame.
- Wybierz nowy wymiar, a następnie w oknie Właściwości ustaw MinSize na 0, 40, aby upewnić się, że ramy nigdy nie skrumpną do mniej niż 40 pikseli poziomowo.
Dodaj obiekt layout do ramy, aby treści w niej układały się od lewej do prawej i poziomie w centrum ramy.
- Wprowadź obiekt UIListLayout do ScoreBarFrame .
- Wybierz nowy obiekt layoutu, a następnie w oknie Właściwości ,
- Ustaw Kierunek wypełnienia na Pionowy .
- Ustaw Poziom wysokości na Centrum .
Dodaj Ikone
Ikona to symbol, który представia akcji, obiekt lub koncepcję w doświadczeniu. Używając ikonek, które są proste i intuicyjne, gracze łatwo rozpoznają, z czego komunikujesz się ze swoim interfejsem użytkownika bez używania tekstu, co może zacząć zadawać ekran i przyciągnąć uwagę od treści, która jest ważna.
Na przykład wzór używa prostej złotej korony, aby wskazać, ile złota zebrał gracz. Ten wzór jest łatwo rozpoznawalny jako główny cel w doświadczeniu i zawiera minimalne szczegóły, aby pozostał na ekranie urządzenia mobilnego.
Aby odtworzyć ikónę złotej korony w próbce Złota Rush położenie pliku:
Utwórz obiekt ImageLabel w ScoreBarFrame.
W oknie Explorer , Przycisk należy postawić na ScoreBarFrame i kliknąć ikona⊕. Wyświetla się menu kontekstowe.
Wpisz ImageLabel .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Obraz na rbxassetid://5673786644 aby uczynić ikone koronę.
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw LayoutOrder na 1 . To gwarantuje, że ikona pozostaje pierwszym GuiObject w ramach od lewej do prawej, gdy wpiszesz tekst w następnym sekcji tutorialu.
Ustaw rozmiar na {1.25,0},{1,0} aby rozszerzyć obszar etykiety poza pełną szerokość ramy.
Ustaw Ograniczenie rozmiaru na Relatywne YY , aby zachować względny rozmiar ikony poprzez skalowanie rozmiaru ikonaz wysokością ramy rodzicielskiej.
Utwórz tekst wyniku
Wynik tekstu zapisuje wynik gracza w doświadczeniu, takich jak liczba punktów, które zarabia w dopasowywać. W ważne, aby cały tekst UI był jasny i łatwy do czytania, aby gracze mogli szybko zrozumieć informacje, które potrzebują, aby odnieść sukces w swoim doświadczeniu.
Na przykład, próbka używa dużego tekstu na górze koloru kontrastującego, aby nie kolidowała z hałasem tła. Jest to szczególnie ważne dla dostępności, ponieważ zapewnia to, że tekst pozostaje czytelny, gdy gracz porusza się przez przestrzeń 3D, która może zawierać obiekty tego samego koloru co tekst.
Aby odszukać tekst wyniku w próbce Złota Rush umieść plik:
Wpisz obiekt TextLabel do ScoreBarFrame.
W oknie Explorer , Przycisk należy postawić na ScoreBarFrame i kliknąć ikona⊕. Wyświetla się menu kontekstowe.
Wpisz TextLabel .
Wybierz nową etykietę, a następnie w oknie Właściwości ,
Ustaw Przezroczystość tła na 1, aby całkowicie przejść tło etykiety.
Ustaw Rozmiar na {1,0},{1,0} aby rozszerzyć etykietę na cały kadrowy (100% poziomo i 100% poziomo w górę). Label rozciąga się poza granice kadrowy, ponieważ jest odległy od ikona.
Ustaw Ograniczenie rozmiaru na RelativeYY , aby upewnić się, że rozmiar etykiety skala się z wysokością ramy rodzicielskiej i zachować proporcje aspektu ikona. Ten krok uczynia etykietę kwadratem i utrzymuje ją w granicach ramy.
Ustaw Czcionkę na GothamSSm aby dopasować estetykę środowisko.
Ustaw tekst na 0, aby rozpocząć wynik od zero.
Ustaw Kolor tekstu3 na 255, 200, 100 do nakolorowania tekstu złotym.
Ustaw Rozmiar tekstu na 30, aby uczynić tekst większym na ekranie.
Ustaw TextXAlignment na Lewo , aby upewnić się, że tekst wyniku pozostanie lewy w pobliżu ikony korony, niezależnie od tego, czy wynik gracza jest 0, 1,000 lub 1,000,000.
Zdobądź dostęp do projektu
Studio's Emulator Urządzeń pozwala na testowanie tego, jak gracze będą widzieć i wchodzić w interakcję z Twoją interfejsą na różnych urządzenie. Ten narzędzie jest istotnym elementem projektowania interfejsu, ponieważ proporcja aspektu Twojego okienka w Studio nie odzwierciedla automatycznie proporcji ekranu, z którego gracze korzystają do dostępu do Twoj
Na przykład, jeśli nie testujesz swojej interfejsu na zestawie różnych rozmiarów ekranu, gracze z dużymi ekranami mogą nie być w stanie czytać twojego tekstu lub odczytywać twoich ikonek, a gracze z małymi ekranami mogą nie być w stanie zobaczyć przestrzeń 3D, ponieważ elementy twojego interfejsu zajmują zbyt wiele miejsca na ekranie.
Aby odwzorować swoją UI na różnych rozmiarach ekranu:
W menu Przycisk wybierz Test tab.
W sekcji Emulacja, kliknij Urządzenie. Okienko widoku zmienia się, aby odzwierciedlić proporcje aspektu przeciętnego laptopa.
W menu rozdziału wybierz Rozdział aktualny . Dzięki temu możesz zobaczyć prawdziwą rozdzdzielczość swoich elementów UI na urządzeniu, na którym emitujesz.
W menu urządzeń wybierz co najmniej jeden urząd w Telefonie , Tablecie , Desktopie i 1> Konsoli1> sekcji.
