Gombok – MRTK2

Button Main

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

Gombelőírások az MRTK-ban

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

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

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

Ütközőalapú gombok

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2 rendszerhéj stí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ülső lemezt

HoloLens 2 rendszerhéjstí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ület stí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ület stí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ület stílusú rádió 32x96mm

RadialRadiális

CheckboxJelölőnégyzetet

ToggleSwitchToggleSwitch

Tárcsagomb

Jelölőnégyzet

Kapcsoló váltása

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseGomb

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

Kerek alakzat nyomó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 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 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 mozgatá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 használhatósági és stabilitási problémák miatt a transzparens gombok használata 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
  • Hologramok átlátszó síkon keresztüli megjelenítése instabil lehet HoloLens 2 mélységi LSR-stabilizálásával

Button plated

Lenyomható gombok használata

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

Hozzon létre egy Canvas a jelenetben (GameObject –> Felhasználói felület –> Canvas). A Canvas Inspector paneljén:

  • Kattintson a "Konvertálás MRTK-Canvas" elemre.
  • 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 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 Canvas.

Ü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 úgy vannak konfigurálva, hogy hang-vizuális visszajelzést adjanak a különböző típusú bemenetekhez, beleértve a csuklós kézi bemenetet és a tekintetet.

Az előtagban közzétett események, valamint az Interakcióra alkalmas összetevő 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 megnyomható gombszkripten keresztül.

How to Use Interactable

A gombon keresztül PhysicalPressEventRouter konfigurálhatja, hogy a lenyomható gomb mikor aktiválja az OnClick eseményt. Beállíthatja például, hogy az OnClick a gomb első megnyomásakor aktiválódik, és ne nyomja meg és oldja fel a gombot, ha az Interactable On Click to Event On Press (Kattintásra az eseményre kattintáskor) beállítást adja meg.

How to use events

A kézi bevitel adott állapotinformációinak kihasználásához használhatja a megnyomható gombeseményeket : Touch Begin, Touch End, Button Pressed, Button Released. Ezek az események azonban nem aktiválódik 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.

How to use Pressable Buttons

Interakciós állapotok

Tétlen állapotban a gomb első lemeze nem látható. Amikor egy ujj közeledik, vagy a szemből érkező kurzor eléri a felületet, az első lemez ragyogó szegélye láthatóvá válik. Az első lemezfelületen az ujjbegy helyzete további kiemelést is biztosít. Ha egy ujjal toljuk, az első lemez az ujjhegyével 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ület stílusú gombon számos vizuális jelzés és megfizethetőség érhető el, amelyek növelik a felhasználó interakcióval kapcsolatos bizalmát.

Proximity light Focus highlight Compressing cage Pulse on trigger
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 megnyomható gomb aktiválja, amely megkeresi az éppen használt mutatón élő ProximityLight(ok) t. Ha bármilyen közelségi fény található, a ProximityLight.Pulse metódust meghívják, amely automatikusan animálja az árnyékoló paramétereit, hogy impulzust jelenítsen meg.

Vizsgáló tulajdonságai

Button Structure

Box ColliderBox Collider a gomb előlapjára.

Lenyomható gomb A gombmozgatás logikája kéznyomásos interakcióval.

Fizikai sajtóesemény-útválasztó Ez a szkript eseményeket küld a kézi sajtóműveletből az Interactable-be.

Az interakciós műveletek különböző típusú interakciós állapotokat és eseményeket kezelnek. HoloLens tekintetet, kézmozdulatot és hangbemenetet, valamint a modern headset mozgásvezérlő bemenetét közvetlenül ez a szkript kezeli.

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

NearInteractionTouchable.cs Minden objektum megérinthetővé tétele csuklós kézi bevitellel.

Előfab elrendezés

A ButtonContent objektum előlapot, szövegcímkét és ikont tartalmaz. A FrontPlate a Button_Box árnyékolóval 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övegcímke TextMesh Pro készült. A SeeItSayItLabel láthatóságát az Interactable témája szabályozza.

Button Layout

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.)

Button Config Helper

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 quad ikonok egy quadon jelennek meg egy MeshRenderer. Ez az alapértelmezett ikonstílus.
  • A sprite ikonok egy SpriteRenderer. 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 -> Csomagkezelő -> 2D Sprite)
  • A karakterikonok összetevő TextMeshPro használatával jelennek meg. Ez akkor hasznos, ha inkább ikon betűtípust használ. A HoloLens ikon betűtípusának használatához létre kell hoznia egy betűtípus-objektumotTextMeshPro.

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

Új gomb ikon létrehozása:

  1. Az Project 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 a jobb gombbal bármelyik üres területre kattinthat.)

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

    Screenshot of the Icon Set menu item.

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 helyezzük át. 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 –> Áttelepítési ablak –> Áttelepítéskezelő 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.

Upgrade window dialogue

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

Custom icon notification

HoloLens Icon Font Asset létrehozása

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

Ezután nyissa meg a TextMeshPro Betűtípuseszköz-létrehozót 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 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

Button creation 1

A betűtípus-objektum létrehozása után mentse a projektbe, és rendelje hozzá az ikonkészlet Karakter ikon betűtípusmezőjéhez . Ekkor megjelenik az Elérhető ikonok legördülő lista. Ha elérhetővé szeretne tenni egy ikont egy gombra kattintva. Megjelenik a Kijelölt ikonok legördülő menüben, és megjelenik a ButtonConfigHelper. Tetszés szerint címkét adhat az ikonnak. Ez lehetővé teszi az ikon beállítását futásidőben.

Button creation 3

Button creation 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.

Button Icon set

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

HoloLens 2 felület stílusú gombjának mérete 32x32mm. A dimenzió testreszabásához módosítsa az objektumok méretét a gombelőtagban:

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

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

A FrontPlate méretének frissítése Button Size customization 1

A quad méretének frissítése Button Size customization 2

A Box Collider méretének frissítése Button Size customization 3

Kattintson a "Kötött korlátok javítása" elemre Button Size customization 4

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

Beszédbeviteli kezelő A Lenyomható gomb interakcióba léptethető szkriptje már implementálható IMixedRealitySpeechHandler. Itt adhatja meg a hangparancs kulcsszót.

Buttons Speech

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

Button speech 2

See-it, Say-it címke A lenyomható gomb előlapja egy Helyőrző TextMesh Pro címkével rendelkezik 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álhat példákat.

Pressable button cube 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 Vizsgáló panelen rendelje hozzá a kockaobjektumot a Mozgó gomb vizualizációihoz.

pressable button cube 3

A kocka kijelölésekor több színes réteg jelenik meg az objektumon. Ez a Gépház billentyű lenyomása alatti távolságértékeket jeleníti meg. A fogópontok használatával konfigurálhatja, hogy mikor kezdje el lenyomni (áthelyezni az objektumot), és mikor aktiválja az eseményt.

Pressable Buton cube 1Pressable button cube 2

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

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őtérbeli leküldés kényszerítése tulajdonság aktív, és a Start menü Leküldéses távolság síkja a Near Interaction touchable sík elé kerül. A Near Interaction érinthető síkot az alábbi GIF-fájlban lévő fehér nyíl origója elé helyezett kék sík jelzi:

Pressable button script component with Enforce Front Push property highlighted

Animated example of moving the start push distance in front of the near interaction touchable plane

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 az árnyékolót Mixed Reality Toolkit/Standard. Vagy használhatja vagy duplikálhatja az MRTK Standard Shadert használó meglévő anyagok /SDK/StandardAssets/Materials/ egyikét.

Pressable button cube 4

Jelölje be Hover Light a Proximity LightFluent Beállítások gombra. 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.

pressable button cube 5pressable button cube run 2

3. Hangvisszajelzés hozzáadása az alapkockához gomb

Mivel PressableButton.cs a szkript olyan eseményeket tesz közzé, mint a TouchBegin(), a TouchEnd(), a ButtonPressed(), a ButtonReleased(), könnyen hozzárendelhetünk 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 /SDK/StandardAssets/Audio/ MRTK_Select_Main és MRTK_Select_Secondary hangklipeket használhat.

pressable button cube 7Pressable Button Cube 6

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

Az interakciós műveletek olyan szkriptek, amelyek megkönnyítik 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 csoport 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. Ellenőrizze a lazítást , és állítsa be az időtartamot a vizualizáció zökkenőmentessé tétele érdekében.

Select profile theme

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.

Pressable Button Cube Run 3Pressable Button Cube Run 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.

Pressable Custom1Pressable Custom2

Minden zongorakulcshoz van egy PressableButton és egy NearInteractionTouchable szkript hozzárendelve. Fontos ellenőrizni, hogy a helyi továbbítás iránya NearInteractionTouchable helyes-e. 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:

Pressable Custom3

Lásd még