Gombok

Fő gomb

A gombokkal a felhasználó azonnali műveletet aktiválhat. Ez a vegyes valóság egyik legfontosabb összetevője. Az MRTK különböző típusú gomb-előtagokat biztosít.

Gomb-előfabs az MRTK-ban

Példák a mappában található gomb-előtagra MRTK/SDK/Features/UX/Interactable/Prefabs

Unity ui Image/Graphic-alapú gombok

  • UnityUIInteractableButton.prefab
  • PressableButtonUnityUI.prefab
  • PressableButtonUnityUICircular.prefab
  • PressableButtonHoloLens2UnityUI.prefab

Collider-alapú gombok

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2 héjstílusú gombját a hátlaptal, amely támogatja a különféle vizuális visszajelzéseket, például a szegélyvilágot, a közelségi világítást és a tömörített előlapot

HoloLens 2 héjstílusú gombja háttér nélkül

HoloLens 2 héjstílusú gombja körkörös alakkal

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

Wide HoloLens 2 héjstílusú gombja 32x96mm

Vízszintes HoloLens 2 gombsáv megosztott háttérlappal

Függőleges HoloLens 2 gombsáv megosztott háttérlappal

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2. héjstílusú jelölőnégyzete 32x32mm

HoloLens 2. rendszerhéj típusú kapcsolója 32x32mm

HoloLens 2. héjstílusú választógombja 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2. héjstílusú jelölőnégyzete 32x96mm

HoloLens 2. rendszerhéjstílusú kapcsoló 32x96mm

HoloLens 2. héjstílusú választógombja 32x96mm

Radiális radiális

Jelölőnégyzet jelölőnégyzet

VáltógombSwitch VáltógombSwitch

Radiális gomb

Jelölőnégyzet

Váltókapcsoló

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton PressableRoundButton

Gomb alapgombja

HoloLens első generációs héjstílus gombja

Kerek alakzat leküldése gomb

Alapszintű gomb

Az Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) az Interakcióra alkalmas koncepción alapul, hogy egyszerű felhasználói felületi vezérlőket biztosítson a gombokhoz vagy más típusú interaktív felületekhez. Az alapkonfiguráció gomb az összes elérhető beviteli módszert támogatja, beleértve a kis interakciókhoz használt kézzel bevitt adatokat, valamint a tekintet és a légi koppintás a távoli interakciókhoz. A gomb aktiválására hangparancsot is használhat.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) HoloLens 2 héjstílus gombját, amely támogatja a gomb pontos mozgását a közvetlen kézkövetési bemenethez. A szkriptet Interactable a szkriptekkel PressableButton kombinálja.

A 2 HoloLens esetén ajánlott átlátszatlan hátlapú gombokat használni. A átlátszó gombok használata és stabilitása a következő problémák miatt nem ajánlott:

  • Az ikon és a szöveg nehezen olvasható a fizikai környezetben
  • Nehéz megérteni, hogy mikor aktiválódik az esemény
  • Hologramok transzparens síkon megjelenő adatok instabilak HoloLens 2. mélységi LSR-stabilizálásával

Gomb bevasalva

A lenyomható gombok használata

Unity felhasználói felületi alapú gombok

Hozzon létre egy vásznat a jelenetben (GameObject -> UI -> Canvas). A vászon Inspector panelen:

  • Kattintson a "Convert to MRTK Canvas" (Átalakítás MRTK-vászonra) lehetőségre
  • Kattintson a "Add NearInteractionTouchableUnityUI" (NearInteractionTouchableUnityUI hozzáadása) elemre
  • Állítsa a Rect Transform összetevő X, Y és Z skáláját 0,001-re

Ezután húzza PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) vagy PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) a vászonra.

Collider-alapú gombok

Egyszerűen húzza a PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) vagy PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) szolgáltatásokat a jelenetbe. Ezek a gomb-előfedőfájlok már konfigurálva vannak, hogy hang-vizuális visszajelzést adjanak a különböző típusú bemenetekkel kapcsolatban, beleértve a kézbemenetet és a tekintetet is.

Az előzetesben elérhetővé tett események, valamint az Interakcióra alkalmas összetevő további műveletek aktiválását is kiválthatja. A HandInteractionExample jelenet megnyomható gombjai a Interactable OnClick eseményének használatával aktiválják a kocka színének változását. Ez az esemény különböző típusú beviteli módszerekhez aktiválódik, például a tekintethez, a légi koppintáshoz, a kézi sugárhoz és a fizikai gombnyomáshoz a gomb megnyomható szkriptén keresztül.

How to Use Interactable

A gomb on gombjával konfigurálhatja, hogy a megnyomható gomb mikor váltja ki az OnClick PhysicalPressEventRouter eseményt. Beállíthatja például, hogy az OnClick a gomb első megnyomásakor gombra váltsa ki a gomb első megnyomásakor és felszabadításakor, ha be van állítva a Interactable On Click to Event on Press (Interakció a Kattintás az eseményre gomb megnyomásakor) beállításával.

How to use events

A meghatározott, kézzel bevitt állapottal kapcsolatos információk kihasználása érdekében használhat lenyomható gombeseményeket : Touch Begin, Touch End, Button Pressed, Button Released. Ezek az események azonban nem fognak begyógyulni a légi koppintás, a kézi sugár vagy a szem bemenő adata esetén. A közeli és távoli interakciók támogatásához javasoljuk, hogy használja a Interactable OnClick eseményét.

How to use Pressable Buttons

Interakciós államok

Tétlen állapotban a gomb előtere nem látható. Ahogy egy ujjlenyomat közeledik, vagy a kurzor a tekintet bemenete felett a felületet célozza, az előlap izzott szegélye láthatóvá válik. Az előlapi felületen az érintéses pozíció is ki van emelve. Ha egy ujjlenyomatával lekérte, az előlap az érintéssel mozog. Amikor az érintés érinti az előlap felületét, egy apró pulzushatást mutat, amely vizuális visszajelzést ad az érintési pontról.

A HoloLens 2 felület stílusú gombban számos vizuális jel és megfizethetőség található, amelyek növelik a felhasználó interakcióba vetett bizalmát.

Közelségi fény Fókusz kiemelése Tömörített ék Pulse on trigger
Közelségi fény Fókusz kiemelése Tömörített ék Pulse on trigger

Az apró pulzushatást a lenyomható gomb aktiválja, amely a jelenleg kommunikáló mutatón élő ProximityLight(ok) et keres. Ha talál közelségi világítást, a rendszer a metódust hívja meg, amely automatikusan animálja a árnyékoló paramétereit, hogy ProximityLight.Pulse megjelenítsen egy pulzust.

Vizsgáló tulajdonságai

Gombstruktúra

Box Collider Box Collider a gomb előlapján.

Lenyomható gomb A gomb mozgásának logikája kézmozdulatokkal.

Fizikainyomás-esemény útválasztója Ez a szkript eseményeket küld a műveletek kézi lenyomásból a Interactable (Kommunikálható) számára.

Kezelhető Az interakciós műveletek különböző típusú interakciós államokat és eseményeket kezelnek. HoloLens tekintet, kézmozdulatok, hangbemenet és modern headset mozgásvezérlő-bemenetét közvetlenül ez a szkript kezeli.

Hangforrás Unity-hangforrás a hanggal kapcsolatos visszajelzési videóklipjeihez.

NearInteraction Touchable.cs Minden objektumnak kézbemenettel való érintéséhez szükséges.

Előrefab elrendezés

A ButtonContent objektum tartalmazza az előlapot, a szövegcímkét és az ikont. A FrontPlate az indexelőnyök közelségére válaszol a Button_Box használatával. Izzító szegélyeket, közelségi világítást és érintésre érzékeny pulzust mutat. A szövegfelirat a TextMesh Pro. A SeeItLabItLabel láthatóságát az Interactabletémája vezérli.

Gombelrendezés

Az ikon és a szöveg módosítása

Az MRTK-gombok egy összetevő használatával segítenek a gomb ikonjának, szövegének ButtonConfigHelper és címkéének módosításában. (Vegye figyelembe, hogy egyes mezők hiányozhatnak, ha a kiválasztott gombon nem található elem.)

Gomb konfigurációs segítője

Ikonkészletek létrehozása és módosítása

Az ikonkészlet az összetevő által használt ikoneszközök megosztott ButtonConfigHelper készlete. Három ikonstílus támogatott.

  • A quadikonok egy quadon jelennek meg a MeshRenderer használatával. Ez az alapértelmezett ikonstílus.
  • A Sprite-ikonok egy használatával jelennek SpriteRenderer meg. Ez akkor hasznos, ha inkább sprite-lapként szeretné importálni az ikonokat, vagy ha azt szeretné, hogy az ikon-adategységek meg lesznek osztva a Unity UI-összetevőivel. Ehhez a stílushoz telepítenie kell a Sprite-szerkesztőcsomagot (Windows -> Csomagkezelő -> 2D Sprite)
  • A karakterikonok egy összetevő használatával jelennek TextMeshPro meg. Ez akkor hasznos, ha inkább egy ikon betűtípusát szeretné használni. Az ikon HoloLens használnia kell egy TextMeshPro betűkészletet.

A gomb által használt stílust úgy módosíthatja, hogy kibontja az Ikonok legördülő menüt a ButtonConfigHelper menüben, és kiválasztja az Ikonstílus legördülő menüt.

Az eszközmenüvel létrehozhat egy új gombikonkészletet: Create > Mixed Reality Toolkit > Icon Set (Eszközkészlet létrehozása > Ikonkészlet). Quad- és sprite-ikonok hozzáadásához egyszerűen húzza őket a megfelelő tömbökbe. Karakter ikonok hozzáadásához először létre kell hoznia és hozzá kell rendelnie egy betűkészletet.

Az MRTK 2.4-es és az azt túllépő alkalmazásokban azt javasoljuk, hogy az egyéni ikon-textúra-szerkezeteket egy IkonKészletbe kell áthelyezni. A projekt összes gombja eszközeinek az új ajánlott formátumra való frissítéséhez használja a ButtonConfigHelperMigrationHandler eszközt. (Mixed Reality Toolkit -> Utilities -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

A gombok frissítéséhez szükséges Microsoft.MixedRealityToolkit.Unity.Tools csomag importálása.

Frissítési ablak párbeszédablaka

Ha nem található ikon az alapértelmezett ikonkészletben a migrálás során, egy egyéni ikonkészlet jön létre a MixedRealityToolkit.Generated/CustomIconSets fájlban. Egy párbeszédpanel jelzi, hogy ez történt.

Egyéni ikon értesítése

Ikon HoloLens betűkészlet létrehozása

Először importálja az ikon betűtípusát a Unitybe. A Windows gépeken az alapértelmezett betűkészlet HoloLens a Windows/holomdl2.ttf fájlban található. Másolja és illessze be ezt a fájlt az Assets mappába.

Ezután nyissa meg a TextMeshPro betűkészlet-létrehozót a TextMeshPro > a TextMeshPro > Font Asset Creator ablakban. Íme az ajánlott beállítások a font atlas HoloLens létrehozásához. Az összes ikon beillesztéshez illessze be a következő Unicode-tartományt a Karaktersorozat mezőbe:

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

Gomb létrehozása 1

A betűkészlet létrehozása után mentse a projektet, és rendelje hozzá az ikonkészlet Karakter ikon betűkészletéhez. Az Elérhető ikonok legördülő menü most már ki van töltve. Ha egy ikont egy gomb számára elérhetővé tenni, kattintson rá. Ez megjelenik a Selected Icons (Kiválasztott ikonok) legördülő menüben, és megjelenik a You can optionally give the icon a tag (Az ikont meg is adhat ButtonConfigHelper. címkével). Ez lehetővé teszi az ikon futásidőben való beállítását.

Gomb létrehozása 3

Gomb létrehozása 2

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

Az Ikonkészlet gomb kiválasztásához bontsa ki az Ikonok legördülő menüt, és rendelje hozzá ButtonConfigHelper az Ikonkészlet mezőhöz.

Gomb ikonkészlet

Gomb méretének módosítása

HoloLens 2 héjstílusú gombmérete 32x32mm. A dimenzió testreszabásához módosítsa ezeknek az objektumoknak a méretét a gomb előfedőben:

  1. FrontPlate (Előlap)
  2. Quad a BackPlate alatt
  3. Box Collider a gyökéren

Ezután kattintson a Fix Bounds (Kötések kijavítása) gombra a NearInteractionTouchable szkriptben, amely a gomb gyökerében található.

A FrontPlate gombméret testreszabásának  módosítása 1

A Quad Gombméret testreszabás  méretének módosítása 2

A Box Collider Gombméret testreszabás  méretének módosítása 3

Kattintson a "Fix Bounds" (Kötések kijavítása)  Gombméret testreszabása 4

Hangparancs ('see-it, say-it')

Beszédbemenet-kezelő A Megnyomható gomb Kezelhető szkripte már implementálja a et. IMixedRealitySpeechHandler A hangparancsok kulcsszavát itt állíthatja be.

Buttons Speech

Speech Input-profil Emellett regisztrálnia kell a hangparancs kulcsszót a globális Speech Commands-profilban.

Button speech 2

See-it, Say-it label A lenyomható gomb előlapja egy textMesh Pro a SeeItLabItLabel objektum alatt. Ezzel a címkével közölheti a gomb hangparancs-kulcsszavát a felhasználóval.

Button Speech 3

Gomb létrehozása az nulláról

Ezekre a gombokra a PressableButtonExample jelenetben találhat példákat.

Pressable button cube 0

1. Lenyomható gomb létrehozása kockával (csak közel interakció esetén)

  1. Unity-kocka létrehozása (GameObject > 3D Object > Cube)
  2. Szkript PressableButton.cs hozzáadása
  3. Szkript NearInteractionTouchable.cs hozzáadása

Az Inspector panelen rendelje hozzá a PressableButton kockaobjektumot a Mozgó gomb vizualizációkhoz.

pressable button cube 3

Ha kijelöli a kockát, több színes réteget fog látni az objektumon. Ez a Press (Billentyűk) alatti távolságértékeket Gépház. A leírók használatával beállíthatja, hogy mikor kezdje meg a billentyű lenyomása (az objektum áthelyezése) és mikor aktiválódjon az esemény.

Pressable Buton cube 1 Pressable button cube 2

Ha lenyomja a gombot, az át fog lépni, és létrehozza a szkriptben a megfelelő eseményeket, például PressableButton.cs a TouchBegin(), a TouchEnd(), a ButtonPressed(), a ButtonReleased() eseményt.

Pressable button cube run 1

Hibaelhárítás

Ha a gomb dupla lenyomást hajt végre, győződjön meg arról, hogy az Előlapi leküldés kényszerítve tulajdonság aktív, és a Start Push Distance (Leküldéses távolság kezdete) sík a Near Interaction Touchable (Érintéshez közel) sík elé van helyezve. A Near Interaction Touchable síkot az alábbi GIF-képen a fehér nyíl eredetének elejére helyezett kék sík jelzi:

Lenyomható gombszk szkriptösszetevő, kiemelt Front Push tulajdonság kényszerítve

Animált példa a leküldés kezdő távolságának mozgatásán a közel interakciós, érintéssel kezelhető sík előtt

2. Vizuális visszajelzés hozzáadása az alapszintű kockához gomb

Az MRTK Standard Shader számos olyan funkciót biztosít, amelyek megkönnyítik a vizuális visszajelzések hozzáadását. Hozzon létre egy anyagot, és válassza a shader (árnyékoló) Mixed Reality Toolkit/Standard lehetőséget. Másik módszerként használhatja vagy duplikálhatja az MRTK Standard Shadert használó meglévő /SDK/StandardAssets/Materials/ anyagok valamelyikét.

Pressable button cube 4

Jelölje be Hover Light a és a Fluent lehetőségek Proximity Light alatt. Ez vizuális visszajelzést tesz lehetővé a közel-kéz (Közelségi fény) és a távoli mutató (Hover Light) interakciókhoz is.

pressable button cube 5 pressable button cube run 2

3. Hanggal kapcsolatos visszajelzés hozzáadása az alapszintű kockagombhoz

Mivel a szkript olyan eseményeket fed fel, mint a PressableButton.cs TouchBegin(), a TouchEnd(), a ButtonPressed(), a ButtonReleased(), könnyen hozzárendelhet hanggal kapcsolatos visszajelzéseket. Egyszerűen adja hozzá a Unity-fájlokat a kockaobjektumhoz, majd rendeljen Audio Source hozzá hangklipeket az AudioSource.PlayOneShot() kiválasztásával. A mappában MRTK_Select_Main MRTK_Select_Secondary hangklipeket is /SDK/StandardAssets/Audio/ használhat.

pressable button cube 7 Pressable Button Cube 6

4. Vizualizációs államok hozzáadása és távoli interakciós események kezelésével

A kezelhető egy szkript, amely megkönnyíti a vizualizációs állapotok a különböző típusú bemeneti interakciókhoz való létrehozásához. Emellett a távoli interakciós eseményeket is kezeli. Adja Interactable.cs hozzá, majd húzza a kockaobjektumot a Profilok terület Cél mezőjébe. Ezután hozzon létre egy új témát ScaleOffsetColorTheme típussal. Ebben a témában megadhatja az objektum színét az adott interakciós államokhoz, például a Fókusz és a Lenyomás értékhez. A méretezést és az eltolást is szabályozhatja. A vizualizáció áttűnésének zökkenőmentes megjelenítéséhez ellenőrizze a vizualizációk közötti váltást, és állítsa be az időtartamot.

Profiltéma kiválasztása

Láthatja, hogy az objektum távoli (kézre mutató sugár vagy tekinteti kurzor) és közel(kéz) interakciókra is reagál.

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Példák egyéni gombokra

A HandInteractionExamplejelenetben tekintse meg a és a kerek gomb példákat, amelyek mindkettőt PressableButton használják.

Pressable Custom1 Pressable Custom2

Mindegyik kulcshoz egy PressableButton és egy szkript van NearInteractionTouchable hozzárendelve. Fontos ellenőrizni, hogy a Helyi továbbítás iránya NearInteractionTouchable megfelelő-e. Ezt egy fehér nyíl jelzi a szerkesztőben. Győződjön meg arról, hogy a nyíl a gomb elülső arcáról mutat:

Pressable Custom3

Lásd még