Gyakorlat – Gombok és dinamikus menük panelje

  • 10 perc

A bemenetek többféleképpen is megadhatóak. A bemenetek bizonyos eseményeket aktiválnak, és módosításokat hajtanak végre. A felhasználói felület összetevői segítenek a felhasználóknak a hologramokkal való interakcióban a helyszínen.

Statikus gombpanel létrehozása

  1. A Hierarchia ablakban kattintson a jobb gombbal a RoverExplorer objektumra, és válassza az Üres létrehozása lehetőséget, ha üres objektumot szeretne hozzáadni a RoverExplorer gyermekéhez. Nevezze el az objektumgombokat, és konfigurálja az átalakítás összetevőt az alábbiak szerint:

    • Pozíció: X = -0,6, Y = 0,036, Z = -0,5
    • Forgatás: X = 90, Y = 0, Z = 0
    • Méretezés: X = 1, Y = 1, Z = 1

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

  2. A Projekt ablakban keresse meg az Eszközök>MRTK-t. Tutorials.GettingStarted>Prefabs mappa, kattintson és húzza a PressableCylinderButton előfabát a Gombok objektumra, majd kattintson a jobb gombbal a PressableCylinderButton elemre, és válassza a Duplikálás lehetőséget egy másolat létrehozásához. Ismételje meg, amíg összesen három PressableCylinderButton objektumot nem talál a Gombok területen:

    Screenshot of Unity with newly added PressableRoundButton prefabs.

    Egy ablak arra kéri, hogy importálja a TextMesh Pro-t. Válassza az első lehetőséget a "TMP Essentials importálása" elemre.

  3. A Hierarchia panelen válassza a Gombok objektumot, majd a Felügyelő panelen válassza az Összetevő hozzáadása lehetőséget az objektumsáv-összetevő hozzáadásához. Konfigurálja az alábbiak szerint:

    • Objektumsáv folyamatiránya: Vízszintes
    • Térköz: X = 0,2, Y = 0

    Rendelje hozzá az egyes objektumokat a Gombok területen az Objektumsáv-összetevő Objektumsáv-objektumok listájához:

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

  4. A Hierarchia panelen adja meg a Tippek, a Robbantás és az Alaphelyzetbe állítás gombot. Minden gombnál módosítsa a SpeechRecognitionKeyword tulajdonságot az Advanced StatefulInteractable Gépház alatt a Lenyomható gomb összetevőben a gombneveknek megfelelően:

    Screenshot showing button text labels configured.

  5. A Hierarchia panelen válassza a Tippek gombobjektumot, majd a Felügyelő ablakban konfigurálja a PressableButton.OnClicked () eseményt az alábbiak szerint:

    • A RoverAssembly objektum hozzárendelése a Nincs (Objektum) mezőhöz
    • A Nincs függvény legördülő listából válassza a PlacementHintsController>TogglePlacementHints () lehetőséget a függvénynek az esemény aktiválásakor futtatandó műveletként való beállításához

    Screenshot of Hints button object OnClick event configured.

  6. A Hierarchia panelen válassza a Robbantás gomb objektumot, majd a Felügyelő ablakban konfigurálja a PressableButton.OnClicked () eseményt az alábbiak szerint:

    • A RoverAssembly objektum hozzárendelése a Nincs (Objektum) mezőhöz
    • A Nincs függvény legördülő menüben válassza a ExplodedViewController>ToggleExplodedView() lehetőséget a függvénynek az esemény aktiválásakor végrehajtandó műveletként való beállításához

    Screenshot of Unity with Explode button object OnClick event configured.

  7. A Játék mód megadásához nyomja le a Lejátszás gombot. Nyomja le és tartsa lenyomva a szóközbillentyűt a kéz aktiválásához, és az egérrel nyomja le a Tippek gombot az elhelyezési tippobjektumok láthatóságának váltásához:

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

  8. A Robbantás gomb be- és kikapcsolja a robbantott nézetet:

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

    A Modul későbbi részében implementáljuk az Alaphelyzetbe állítás gombot.

A felhasználót követő dinamikus menü létrehozása

  1. A Projekt panelen lépjen a Packages>MRTK UX Components>Near Menu mappára, kattintson és húzza a NearMenuBase előfabot a Hierarchia ablakba, állítsa az átalakítás helyét X = 0, Y = -0,4, Z = 0 értékre, és konfigurálja az alábbiak szerint:

    • Ellenőrizze, hogy a SolverHandler összetevő nyomon követett céltípusa fejre van-e állítva
    • Jelölje be a RadialView Solver összetevő melletti jelölőnégyzetet, hogy alapértelmezés szerint engedélyezve legyen

    Screenshot of Unity with newly added near menu prefab selected.

  2. A Hierarchia ablakban nevezze át az objektumot menüre, majd bontsa ki a MenuContent-HorizontalLayout (Menü és Rögzítés) > Buttons-GridLayout (Gombok) gyermekobjektumot a három gomb megjelenítéséhez:

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

  3. Nevezze át a Buttons-GridLayout (Gombok) első gombját mutatóra, majd a Hierarchia ablakban konfigurálja a Mutató játék objektumot az alábbiak szerint:

    • Válassza ki a Frontplate > AnimatedContent > Icon > Label objektumot, és módosítsa a TextMesh Pro összetevőt a gomb nevének megfelelően. Győződjön meg arról, hogy a Címke objektum aktiválva van a hierarchiában
    • Konfigurálja a PressableButton.OnClicked() eseményt úgy, hogy a Jelző objektumot chevronként rendeli hozzá a Nincs (Objektum) mezőhöz, és a Nincs függvény legördülő listából válassza a GameObject > SetActive (bool) lehetőséget (ellenőrizze, hogy az argumentum jelölőnégyzet be van-e jelölve)
    • Válassza ki a Frontplate > AnimatedContent > Icon > UIButtonFontIcon objektumot, és módosítsa az ikont a Betűtípus ikonválasztó összetevő keresési ikonjára. Ezt megtalálhatja az ikonok listájában, vagy beállíthatja az aktuális ikon nevét "Icon 130" értékre

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

  4. A sávjelző objektum letiltásához a Hierarchia panelen válassza ki a sávjelként megjelenő Jelző objektumot, majd a Felügyelő panelen:

    • Törölje a jelet a neve melletti jelölőnégyzetből, hogy alapértelmezés szerint inaktívvá tegye
    • Az Irányított jelzővezérlő (Szkript) összetevő hozzáadásához használja az Összetevő hozzáadása gombot

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

  5. Nevezze át a második gombot a TapToPlace névre, majd a Hierarchia ablakban konfigurálja a TapToPlace játékobjektumot az alábbiak szerint:

    • Válassza ki a Frontplate > AnimatedContent > Icon > Label objektumot, és módosítsa a TextMesh Pro összetevőt a gomb nevének megfelelően. Győződjön meg arról, hogy a Címke objektum aktiválva van a hierarchiában
    • Konfigurálja a PressableButton.OnClicked() eseményt úgy, hogy hozzárendeli a RoverExplorer> RoverAssembly objektumot a Nincs (Objektum) mezőhöz, és a Nincs függvény legördülő listából kiválasztja a TapToPlace>bool Engedélyezve lehetőséget (ellenőrizze, hogy az argumentum jelölőnégyzet be van-e jelölve)
    • Válassza ki az Előlapi > AnimatedContent > Icon > UIButtonFontIcon objektumot, és módosítsa az ikont a Kéz ikonra a Betűtípus ikonválasztó összetevőn. Ezt megtalálhatja az ikonok listájában, vagy beállíthatja az aktuális ikon nevét "Icon 13" (Ikon 13) értékre

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

  6. A Hierarchia ablakban válassza ki a RoverAssembly objektumot, majd a Felügyelő ablakban konfigurálja a Tap To Place (Script) összetevőt az alábbiak szerint:

    • Törölje a jelet a neve melletti jelölőnégyzetből, hogy alapértelmezés szerint inaktívvá tegye
    • Az On Placing Stopped () eseményszakaszban kattintson a + ikonra egy új esemény hozzáadásához:
    • A RoverExplorer>RoverAssembly objektum hozzárendelése a Nincs (Objektum) mezőhöz
    • A Nincs függvény legördülő listában válassza a TapToPlace>bool Engedélyezve lehetőséget a tulajdonság értékének frissítéséhez az esemény aktiválásakor
    • Ellenőrizze, hogy az argumentum jelölőnégyzet nincs-e bejelölve

    Screenshot of Unity with TapToPlace component reconfigured.