Ćwiczenie — panel przycisków i menu dynamicznych

  • 10 min

Istnieje kilka sposobów dostarczania danych wejściowych. Dane wejściowe wyzwalają pewne zdarzenia i wykonują pewne zmiany. Składniki interfejsu użytkownika ułatwiają użytkownikom interakcję z hologramami na scenie.

Tworzenie statycznego panelu przycisków

  1. W oknie Hierarchia kliknij prawym przyciskiem myszy obiekt RoverExplorer i wybierz polecenie Utwórz pusty , aby dodać pusty obiekt jako element podrzędny RoverExplorer. Nadaj przyciskom obiekt nazwę i skonfiguruj składnik Przekształć w następujący sposób:

    • Pozycja: X = -0,6, Y = 0,036, Z = -0,5
    • Obrót: X = 90, Y = 0, Z = 0
    • Skala: X = 1, Y = 1, Z = 1

    Screenshot of Unity with newly created Buttons object selected and positioned.

  2. W oknie Projekt przejdź do zestawu narzędzi Assets>MRTK. Tutorials.GettingStarted>Prefabs folder, kliknij i przeciągnij prefab PressableCylinderButton na obiekt Buttons , a następnie kliknij prawym przyciskiem myszy przycisk PressableCylinderButton i wybierz polecenie Duplikuj , aby utworzyć kopię, powtarzaj, aż do łącznej liczby trzech obiektów PressableCylinderButton w obszarze Przyciski:

    Screenshot of Unity with newly added PressableRoundButton prefabs.

    Zostanie wyświetlone okno z monitem o zaimportowanie elementu TextMesh Pro. Wybierz pierwszą opcję "Importuj podstawowe elementy TMP".

  3. W okienku Hierarchia wybierz obiekt Przyciski , a następnie w okienku Inspektor wybierz pozycję Dodaj składnik , aby dodać składnik paska obiektów. Skonfiguruj ją w następujący sposób:

    • Kierunek przepływu paska obiektu: poziomy
    • Odstępy między: X = 0,2, Y = 0

    Przypisz każdy obiekt w obszarze Przyciski do listy Obiekty pasków obiektów w składniku Pasek obiektów:

    Screenshot of Unity Buttons object with GridObjectCollection component added, configured, and applied.

  4. W okienku Hierarchia nazwij przyciski Wskazówki, Eksploduj i Resetuj. Dla każdego przycisku zmień właściwość SpeechRecognitionKeyword w obszarze Advanced StatefulInteractable Ustawienia w składniku Pressable Button, aby dopasować nazwy przycisków:

    Screenshot showing button text labels configured.

  5. W okienku Hierarchia wybierz obiekt przycisku Wskazówki , a następnie w oknie Inspector (Inspektor) skonfiguruj zdarzenie PressableButton.OnClicked () w następujący sposób:

    • Przypisz obiekt RoverAssembly do pola None (Object)
    • Z listy rozwijanej Brak funkcji wybierz pozycję PlacementHintsController>TogglePlacementHints (), aby ustawić tę funkcję jako akcję do uruchomienia po wyzwoleniu zdarzenia

    Screenshot of Hints button object OnClick event configured.

  6. W okienku Hierarchia wybierz obiekt przycisku Eksploduj , a następnie w oknie Inspector (Inspektor) skonfiguruj zdarzenie PressableButton.OnClicked () w następujący sposób:

    • Przypisz obiekt RoverAssembly do pola None (Object)
    • Z listy rozwijanej Brak funkcji wybierz pozycję EksplodViewController>ToggleExplodedView(), aby ustawić tę funkcję jako akcję do wykonania po wyzwoleniu zdarzenia

    Screenshot of Unity with Explode button object OnClick event configured.

  7. Naciśnij przycisk Odtwórz, aby wprowadzić tryb gry. Naciśnij i przytrzymaj pasek spacji, aby aktywować rękę i użyć myszy, aby nacisnąć przycisk Wskazówki , aby przełączyć widoczność obiektów wskazówek umieszczania:

    Screenshot of Unity Play mode split view with Hints button being pressed.

  8. Przycisk Eksploduje przełączy eksplodowany widok na i wyłączone:

    Screenshot of Unity Play mode split view with Explode button being pressed.

    W dalszej części modułu zaimplementujemy przycisk Resetuj.

Tworzenie menu dynamicznego, które jest zgodne z użytkownikiem

  1. W okienku Projekt przejdź do folderu Packages>MRTK UX Components>Near Menu, kliknij i przeciągnij prefab NearMenuBase do okna Hierarchia, ustaw pozycję przekształcenia na X = 0, Y = -0,4, Z = 0 i skonfiguruj go w następujący sposób:

    • Sprawdź, czy śledzony typ docelowy składnika SolverHandler ma wartość Head
    • Zaznacz pole wyboru obok składnika Moduł rozwiązywania RadialView , aby było ono domyślnie włączone

    Screenshot of Unity with newly added near menu prefab selected.

  2. W oknie Hierarchia zmień nazwę obiektu na Menu, a następnie rozwiń jego menuContent-HorizontalLayout (Menu i przypnij) > Przyciski-GridLayout (Przyciski) obiektu podrzędnego, aby wyświetlić trzy przyciski:

    Screenshot of Unity with Menu object selected and ButtonCollection object expanded.

  3. Zmień nazwę pierwszego przycisku na Buttons-GridLayout (Przyciski) na Wskaźnik, a następnie w oknie Hierarchia skonfiguruj obiekt gry Wskaźnik w następujący sposób:

    • Wybierz obiekt Etykieta ikony Animowania > FrontplateContent >> i zmień składnik TextMesh Pro, aby był zgodny z nazwą przycisku. Upewnij się, że obiekt Label jest aktywowany w hierarchii
    • Skonfiguruj zdarzenie PressableButton.OnClicked(), przypisując obiekt Wskaźnik, który wygląda jak cudzysłów, do pola Brak (obiekt) i wybierając pozycję GameObject > SetActive (bool) z listy rozwijanej Brak funkcji (sprawdź, czy pole wyboru argumentu jest zaznaczone)
    • Wybierz obiekt UIButtonFontIcon ikony > Frontplate > AnimatedCon > i zmień ikonę na ikonę wyszukiwania w składniku Selektor ikony czcionki. Możesz to znaleźć na liście ikon lub ustawić bieżącą nazwę ikony na "Ikona 130"

    Screenshot of Unity with Indicator button object Button Config Helper configured.

  4. Aby wyłączyć obiekt wskaźnika pagonu, w okienku Hierarchia wybierz obiekt Wskaźnik, który wygląda jak cudzysłów, a następnie w okienku Inspector (Inspektor):

    • Wyczyść pole wyboru obok jego nazwy, aby było domyślnie nieaktywne
    • Użyj przycisku Dodaj składnik, aby dodać składnik Kontroler wskaźnika kierunkowego (skrypt)

    Screenshot of Unity with Indicator object selected, disabled, and DirectionalIndicatorController component added.

  5. Zmień nazwę drugiego przycisku na TapToPlace, a następnie w oknie Hierarchia skonfiguruj obiekt gry TapToPlace w następujący sposób:

    • Wybierz obiekt Etykieta ikony Animowania > FrontplateContent >> i zmień składnik TextMesh Pro, aby był zgodny z nazwą przycisku. Upewnij się, że obiekt Label jest aktywowany w hierarchii
    • Skonfiguruj zdarzenie PressableButton.OnClicked(), przypisując obiekt RoverExplorer> RoverAssembly do pola None (Object) i wybierając pozycję TapToPlace>bool Enabled z listy rozwijanej No Function (Sprawdź, czy pole wyboru argumentu jest zaznaczone)
    • Wybierz obiekt UIButtonFontIcon ikony > Frontplate > AnimatedCon > i zmień ikonę na ikonę dłoni w składniku Selektor ikony czcionki. Możesz to znaleźć na liście ikon lub ustawić bieżącą nazwę ikony na "Ikona 13"

    Screenshot of Unity with TapToPlace button object Button Config Helper configured.

  6. W oknie Hierarchia wybierz obiekt RoverAssembly , a następnie w oknie Inspector (Inspektor) skonfiguruj składnik Tap To Place (Script) w następujący sposób:

    • Usuń zaznaczenie pola wyboru obok jego nazwy, aby było domyślnie nieaktywne
    • W sekcji zdarzeń Przy zatrzymaniu () wybierz ikonę +, aby dodać nowe zdarzenie:
    • Przypisz obiekt RoverExplorer>RoverAssembly do pola None (Object)
    • Z listy rozwijanej No Function (Brak funkcji) wybierz pozycję TapToPlace bool Enabled (Włącz wartość logiczną TapToPlace>), aby zaktualizować tę wartość właściwości po wyzwoleniu zdarzenia
    • Sprawdź, czy pole wyboru argumentu jest niezaznaczone

    Screenshot of Unity with TapToPlace component reconfigured.