Gombok – MRTK2

Gomb főkapcsolója

A gomb lehetővé teszi a felhasználó számára, hogy azonnali műveletet aktiváljon. Ez a vegyes valóság egyik legalapvetőbb összetevője. Az MRTK különböző típusú gombelőtagokat biztosít.

Gombelőfabs az MRTK-ban

Példák a mappa alatti MRTK/SDK/Features/UX/Interactable/Prefabs gombelőtagokra

Unity felhasználói felület képe/grafikus gombjai

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

Ütközőalapú gombok

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2 felületstílusú gombja háttérlappal, amely támogatja a különböző vizuális visszajelzéseket, például a szegélyfényt, a közelségi fényt és a tömörített előlapot

HoloLens 2 felületstílusú gombja háttérlemez nélkül

HoloLens 2 felületstílusú gombja körkörös alakzattal

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Széles HoloLens 2 felületstílusú gombja 32x96mm

Vízszintes HoloLens 2 gombsáv megosztott hátlappal

Függőleges HoloLens 2 gombsáv megosztott hátlappal

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 felületstílusú jelölőnégyzete 32x32mm

HoloLens 2 rendszerhéj stílusú kapcsolója 32x32mm

HoloLens 2 felületstílusú rádió 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 felületstílusú jelölőnégyzete 32x96mm

HoloLens 2 rendszerhéj stílusú kapcsolója 32x96mm

HoloLens 2 felületi stílusú rádió 32x96mm

Radiálistárcsa

Jelölőnégyzetbejelölve

ToggleSwitchToggleSwitch

Radiális gomb

Jelölőnégyzet

Kapcsoló kapcsolója

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Gombalapgombja

HoloLens 1. generációs rendszerhéjstílus gombja

Kerek alakzat leküldéses gombja

Alapszintű gomb

Az Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) az Interakciós 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 támogatja az összes rendelkezésre álló beviteli módszert, beleértve a csuklós kézi bevitelt a közeli interakciókhoz, valamint a tekintet + levegő koppintás a távoli interakciókhoz. A gomb aktiválásához hangparancsot is használhat.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) HoloLens 2 felületstílus gombja, amely támogatja a gomb pontos mozgását a közvetlen kézkövetési bemenethez. A szkriptet a szkripttel PressableButton kombináljaInteractable.

A HoloLens 2 esetében ajánlott átlátszatlan hátlappal rendelkező gombokat használni. A transzparens gombok használata és stabilitása miatt nem ajánlott:

  • A fizikai környezettel nehezen olvasható ikonok és szövegek
  • Nehéz megérteni, hogy mikor aktiválódik az esemény
  • A transzparens síkon keresztül megjelenített hologramok instabilak lehetnek HoloLens 2 mélységi LSR-stabilizálásával

Gomb be van állítva

Lenyomható gombok használata

Unity felhasználói felületre épülő gombok

Vászon létrehozása a jelenetben (GameObject –> Felhasználói felület –> Vászon). A Vászon Felügyelő paneljén:

  • Kattintson az "Átalakítás MRTK-vászonra" gombra
  • Kattintson a "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 az ( 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.

Ütközőalapú gombok

Egyszerűen húzza PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) vagy PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) a jelenetbe. Ezek a gombelőtagok már konfigurálva vannak, hogy hang-vizuális visszajelzést adjanak a különböző típusú bemenetekhez, beleértve a csuklós kézi bevitelt és a tekintetet.

Az előlapon és az Interakciós összetevőben közzétett események további műveletek indítására használhatók. A HandInteractionExample jelenet lenyomható gombjai az Interactable OnClick eseményével váltják ki a kocka színét. Ezt az eseményt különböző típusú beviteli módszerek aktiválják, például a tekintet, a légcsapás, a kézi sugár, valamint a fizikai gombnyomások a lenyomható gombszkripten keresztül.

Az interakciós lehetőség használata

Konfigurálhatja, ha a lenyomható gomb aktiválja az OnClick eseményt a PhysicalPressEventRouter gombon keresztül. Beállíthatja például, hogy az OnClick aktiválódjon a gomb első megnyomásakor, ahelyett, hogy lenyomva lett és ki lett adva, ha az Interakcióra kattintáskor beállítást az Esemény lenyomásakor beállításra állítja.

Események használata

Adott csuklós kézi beviteli állapotadatok felhasználásához használhatja a lenyomható gombeseményeket – Touch Begin, Touch End, Button Pressed, Button Released. Ezek az események azonban nem aktiválódnak a légcsapás, a kézi sugár vagy a szem bemenetére reagálva. A közeli és a távoli interakciók támogatásához ajánlott az Interactable OnClick eseményét használni.

A lenyomható gombok használata

Interakciós állapotok

Tétlen állapotban a gomb első lemeze nem látható. Amikor egy ujj közeledik, vagy egy kurzor a tekintet bemenete eléri a felületet, az első lemez ragyogó szegélye láthatóvá válik. Az első lemezfelületen további kiemelések találhatók az ujjbegy helyzetéről. Az ujjal történő leküldéskor az első lemez az ujjhegytel mozog. Amikor az ujjhegy megérinti az első lemez felületét, finom impulzushatást mutat, hogy vizuális visszajelzést adjon az érintési pontról.

A HoloLens 2 felületstílus gombon számos vizuális jelzés és megfizethetőség található, amelyek növelik a felhasználó megbízhatóságát az interakcióval kapcsolatban.

Közelségi fény Fókusz kiemelése Ketrec tömörítése Impulzus az eseményindítón
Közelségi fény Fókusz kiemelése Ketrec tömörítése Impulzus az eseményindítón

A finom impulzushatást a lenyomható gomb aktiválja, amely az éppen használt mutatón élő ProximityLight(ok) t keresi. Ha bármilyen közelségi fény található, a ProximityLight.Pulse metódust hívják meg, amely automatikusan animálja a shader paramétereket a pulzus megjelenítéséhez.

Felügyelő tulajdonságai

Gombstruktúra

Box ColliderBox Collider a gomb előlapjára.

Lenyomható gomb A gomb mozgásának logikája a kézművelettel.

Fizikai nyomja le az esemény útválasztója Ez a szkript a kézműveletből az Interakcióba küld eseményeket.

Az interakciós interakció különböző típusú állapotokat és eseményeket kezel. A HoloLens-tekintetet, a kézmozdulatot és a hangbemenetet, valamint a magával ragadó headsetes mozgásvezérlő bemenetét ez a szkript közvetlenül kezeli.

Hangforrás Unity hangforrás a hangvisszajelzési klipekhez.

NearInteractionTouchable.cs A csuklós kézzel történő érintéshez szükséges.

Előfab elrendezés

A ButtonContent objektum előlapot, szövegfeliratot és ikont tartalmaz. A FrontPlate a Button_Box shaderrel válaszol az index ujjhegyének közelségére. Ragyogó szegélyeket, közelségi fényt és érintésre ható impulzushatást mutat. A szövegfelirat TextMesh Pro-val készült. A SeeItSayItLabel láthatóságát az Interakció téma szabályozza.

Gombelrendezés

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

Az MRTK-gombok egy ButtonConfigHelper összetevő használatával segítenek a gomb ikonjának, szövegének és címkéjének módosításában. (Vegye figyelembe, hogy egyes mezők hiányoznak, ha a kijelölt gombon nincsenek elemek.)

Gombkonfigurálási segéd

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

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

  • A quadikonok egy quadon jelennek meg egy MeshRendererparanccsal. Ez az alapértelmezett ikonstílus.
  • A sprite ikonok egy SpriteRendererparanccsal jelennek meg. Ez akkor hasznos, ha az ikonokat sprite lapként szeretné importálni, vagy ha azt szeretné, hogy az ikoneszközök meg legyenek osztva a Unity felhasználói felületének összetevőivel. A stílus használatához telepítenie kell a Sprite Editor csomagot (Windows -> Package Manager -> 2D Sprite)
  • A karakterikonok összetevővel TextMeshPro jelennek meg. Ez akkor hasznos, ha ikon betűtípust szeretne használni. A HoloLens ikon betűtípusának használatához létre kell hoznia egy betűtípus-objektumot TextMeshPro .

A gomb által használt stílus módosításához bontsa ki az Ikonok legördülő listát a ButtonConfigHelperben, és válassza ki az Ikonstílus legördülő menüt.

Új gomb ikon létrehozása:

  1. A Projekt ablakban kattintson a jobb gombbal az Eszközök elemre a helyi menü megnyitásához. (Az Eszközök mappában vagy annak almappáiban lévő üres területekre is kattinthat a jobb gombbal.)

  2. Válassza a Create Mixed Reality Toolkit > Icon Set (Eszközkészlet létrehozása > ) > lehetőséget.

    Képernyőkép az Ikonkészlet menüelemről.

Quad és sprite ikonok hozzáadásához egyszerűen húzza őket a megfelelő tömbökbe. Karakterikonok hozzáadásához először létre kell hoznia és hozzá kell rendelnie egy betűtípus-objektumot.

Az MRTK 2.4-ben és azon túl azt javasoljuk, hogy az egyéni ikonmintázatokat egy IconSetbe lehessen áthelyezni. Ha a projekt összes gombján lévő objektumot az új ajánlott formátumra szeretné frissíteni, használja a ButtonConfigHelperMigrationHandler parancsot. (Mixed Reality Eszközkészlet –> Segédprogramok –> Migrálási ablak –> Migrálási kezelő kiválasztása –> 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éde

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

Egyéni ikon értesítése

HoloLens Icon Font Asset létrehozása

Először importálja az ikon betűtípusát a Unitybe. Windows rendszerű gépeken megtalálhatja az alapértelmezett HoloLens betűtípust a Windows/Fonts/holomdl2.ttf fájlban. Másolja és illessze be ezt a fájlt az Assets mappába.

Ezután nyissa meg a TextMeshPro Font Asset Creator eszközt a Window > TextMeshPro > Font Asset Creator használatával. Az alábbiakban a HoloLens betűtípus-atlasz létrehozásához ajánlott beállításokat talál. Az összes ikon hozzáadásához illessze be a következő Unicode-tartományt a Karakterütemezés 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

Gomblétrehozás 1

A betűtípus-objektum létrehozása után mentse a projektbe, és rendelje hozzá az Ikonkészlet Karakter ikon betűtípus mezőjéhez. Az Elérhető ikonok legördülő lista ekkor fel lesz töltve. Ha egy ikont elérhetővé szeretne tenni egy gomb használatával, kattintson rá. A kijelölt ikonok legördülő listához kerül, és megjelenik a ButtonConfigHelper. Tetszés szerint adhat az ikonnak címkét. Ez lehetővé teszi az ikon beállítását futásidőben.

Gomblétrehozás 3

Gomblétrehozás 2

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

Az ikonkészlet használatához jelöljön ki egy gombot, bontsa ki az Ikonok legördülő menüt, ButtonConfigHelper és rendelje hozzá az Ikonkészlet mezőhöz.

Gomb ikonkészlet

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

HoloLens 2 felületstílusú gombjának mérete 32x32 mm. A dimenzió testreszabásához módosítsa ezeknek az objektumoknak a méretét a gombelőtagban:

  1. FrontPlate
  2. Quad a BackPlate alatt
  3. Box Collider a gyökér

Ezután kattintson a Kötések javítása gombra a gomb gyökerében található NearInteractionTouchable szkriptben.

A FrontPlate gomb méretének módosítása 1

A quad gomb méretének módosítása 2

A Box Collider gomb méretének módosítása 3

Kattintson a "Kötött elemek javítása" gomb méretének testreszabása 4

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

Beszédbeviteli kezelő A Lenyomható gomb interakciós szkriptje már implementálja a következőt IMixedRealitySpeechHandler: . Itt adhatja meg a hangparancs kulcsszót.

Gombok beszéde

Beszédbeviteli profil Emellett regisztrálnia kell a hangparancs kulcsszót a globális Beszédparancsok profilban.

Gomb beszéde 2

See-it, Say-it címke A lenyomható gomb előlapján egy TextMesh Pro felirat található a SeeItSayItLabel objektum alatt. Ezzel a címkével közölheti a gombhoz tartozó hangparancs kulcsszót a felhasználóval.

Button Speech 3

Gomb létrehozása az alapoktól

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

Lenyomható gombkocka 0

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

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

PressableButtonA Felügyelő panelen rendelje hozzá a kockaobjektumot a Mozgó gomb vizualizációihoz.

lenyomható gombkocka 3

A kocka kijelölésekor több színes réteg jelenik meg az objektumon. Ez megjeleníti a távolságértékeket a Beállítások gomb alatt. A fogópontok használatával konfigurálhatja, hogy mikor kezdje el lenyomni (áthelyezni az objektumot), és mikor aktiválja az eseményt.

Lenyomható buton kocka 1Lenyomható gombkocka 2

Amikor lenyomja a gombot, az áthelyezi és létrehozza a szkriptben közzétett megfelelő eseményeket, például a TouchBegin(), a TouchEnd(), a ButtonPressed(), a PressableButton.cs ButtonReleased() parancsot.

Lenyomható gombkocka futtatása 1

Hibaelhárítás

Ha a gomb dupla lenyomást hajt végre, győződjön meg arról, hogy az Előtérbeli leküldés kényszerítése tulajdonság aktív, és a Leküldéses távolság indítása sík a Közel interakció érintéses sík elé kerül. A Közel interakció érinthető síkot az alábbi GIF-beli fehér nyíl eredete előtt elhelyezett kék sík jelzi:

Lenyomható gombszkript-összetevő, kiemelve az Előtérbeli leküldés kényszerítése tulajdonsággal

Animált példa a start leküldési távolságának mozgatására a közel interakciós érinthető sík előtt

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

Az MRTK Standard Shader különböző funkciókat 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 Mixed Reality Toolkit/Standardlehetőséget. Vagy használhatja vagy duplikálhatja az MRTK Standard Shadert használó meglévő anyagok /SDK/StandardAssets/Materials/ egyikét.

Megnyomható gombkocka 4

Jelölje be Hover Light a Fluent-beállításokProximity Light elemet. Ez vizuális visszajelzést tesz lehetővé a kézközeli (közelségi fény) és a távoli mutató (Hover Light) interakciókhoz is.

lenyomható gombkocka 5lenyomható gombkocka futtatása 2

3. Hangvisszajelzés hozzáadása az alapkockagombhoz

Mivel PressableButton.cs a szkript olyan eseményeket tesz elérhetővé, mint a TouchBegin(), a TouchEnd(), a ButtonPressed(), a ButtonReleased(), egyszerűen hozzárendelhetjük a hangvisszajelzéseket. Egyszerűen adja hozzá a Unity-eket Audio Source a kockaobjektumhoz, majd rendeljen hozzá hangklipeket az AudioSource.PlayOneShot() kiválasztásával. A mappában MRTK_Select_Main és MRTK_Select_Secondary hangklipeket /SDK/StandardAssets/Audio/ használhat.

lenyomható gombkocka 7Megnyomható gombkocka 6

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

Az interakciós lehetőség egy olyan szkript, amely megkönnyíti a különböző típusú bemeneti interakciók vizuális állapotának létrehozását. A távoli interakciós eseményeket is kezeli. Adja hozzáInteractable.cs, majd húzza a kockaobjektumot a Profilok terület Cél mezőjébe. Ezután hozzon létre egy új témát a ScaleOffsetColorTheme típussal. Ebben a témában megadhatja az objektum színét az adott interakciós állapotokhoz, például a Fókusz és a Lenyomva állapothoz. A skálázást és az eltolást is szabályozhatja. A vizualizáció zökkenőmentessé tétele érdekében ellenőrizze az Easing (Enyhítés ) és az duration (Időtartam) beállítást.

Profiltéma kiválasztása

Látni fogja, hogy az objektum reagál a távoli (kézsugarú vagy tekintetes kurzor) és a közel(kéz) interakciókra is.

Lenyomható gombkocka futtatása 3Megnyomható gombkocka futtatása 4

Példák egyéni gombra

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

Lenyomható Custom1Lenyomható Egyéni2

Minden zongorakulcshoz egy és egy NearInteractionTouchable szkript van PressableButton hozzárendelve. Fontos ellenőrizni, hogy a helyi előrefelé irány helyes-e NearInteractionTouchable . Ezt egy fehér nyíl jelöli a szerkesztőben. Győződjön meg arról, hogy a nyíl távolodik a gomb elülső oldalától:

Lenyomható Egyéni3

Lásd még