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 MRTK/SDK/Features/UX/Interactable/Prefabs előtagjára

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 különféle vizuális visszajelzéseket támogat, például szegélyvilágot, közelségi világítást és tömörített előlapot

HoloLens 2 héjstílusú gombja visszalap nélkül

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

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

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_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

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

HoloLens 2 héjstílusú kapcsolója 32x32mm

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

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

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

HoloLens 2 héjstílusú kapcsolója 32x96mm

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

Radiálisradiális

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

ToggleSwitchToggleSwitch

Radiális gomb

Jelölőnégyzet

Kapcsoló átkapcsolása

ButtonHoloLens1GombHoloLens1

PressableRoundButtonPressableRoundButton

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 Button 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 + légi koppintás a távoli interakciókat. 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 HoloLens 2 esetén átlátszatlan hátlapú gombokat ajánlott használni. A transzparens 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 síkon megjelenő adatok instabilak HoloLens 2. mélységi LSR-stabilitással

Gomb berakva

A lenyomható gombok használata

Unity felhasználói felületen alapuló gombok

Hozzon létre egy vásznat a jelenetben (GameObject – > felhasználói felület – > Vászon). A vászon Inspector panelen:

  • Kattintson a "Convert to MRTK Canvas" (Átalakítás MRTK-vászonvá) lehetőségre
  • 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 a PressableButtonUnityUIPressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab) (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 az 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őlapok már úgy vannak konfigurálva, hogy hang vizuális visszajelzést adjanak a különböző típusú bemenetekkel kapcsolatban, beleértve a kézbemenetet és a tekintetet.

Az előzetesfabban 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ét használják a kocka színének megváltoztatására. 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.

A kezelhető használat

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

Az események használata

A speciális 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özel és távoli interakciók támogatása érdekében javasoljuk, hogy használja az Interactable OnClick eseményét.

A lenyomható gombok használata

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 első lemezfelületen az ujjlenyomatok pozíciója is ki van emelve. Ha egy ujjlenyomatával lekérte, az előlap az érintéssel mozog. Amikor az ujjlenyomat az első lemez felszínét érinti, egy apró pulzushatást mutat, amely vizuális visszajelzést ad az érintési pontról.

A HoloLens 2 felület stílusú gomb számos vizuális jel és megfizethetőség segítségével növelheti a felhasználó interakcióba vetett bizalmát.

Közelségi jelzőfény Fókusz kiemelése Tömörített ék Pulse on trigger
Közelségi jelző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)t keres. Ha a rendszer közelségi világítást talál, a rendszer a metódust hívja meg, amely automatikusan animálja az árnyékoló paramétereit, hogy ProximityLight.Pulse megjelenítsen egy pulzust.

Vizsgáló tulajdonságai

Gombstruktúra

Box Collider a gomb előlapjára.

Lenyomható gomb A gomb mozgásának logikája kézzel nyomja le az interakciót.

Fizikai lenyomás esemény-útválasztója Ez a szkript kézzel nyomja le az eseményeket a Interactable (Kommunikálható) szolgáltatásba küldi.

A kezelhetőinterakciós funkciók különböző típusú interakciós államokat és eseményeket kezelnek. HoloLens tekintetét, kézmozdulatát és hangbevitelét, valamint a modern headset mozgásvezérlő bemenetét közvetlenül ez a szkript kezeli.

Hangforrás Unity-hangforrás a hang 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 elülső lemezt, szövegcímkét és ikont tartalmaz. 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 gyakorolt pulzust mutat. A szövegfelirat a TextMesh Pro. A SeeIt NyilItLabelláthatóságát az Interakcióstéma vezérli.

Gombelrendezés

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

Az MRTK-gombok egy összetevő segítségével módosítják a gomb ButtonConfigHelper ikonját, szövegét és címkéjét. (Vegye figyelembe, hogy egyes mezők hiányozhatnak, ha nincsenek elemek a kiválasztott gombon.)

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 készlete. Három ikonstílus támogatott.

  • A quadikonok egy quadon jelennek meg a használatával. Ez az alapértelmezett ikonstílus.
  • A Sprite-ikonok egy használatával jelennek meg. Ez akkor hasznos, ha inkább sprite-lapként szeretné importálni az ikonokat, vagy ha azt szeretné, hogy az ikoneszközöket megosssuk Unity UI-összetevőkkel. Ehhez a stílushoz telepítenie kell a Sprite Editor csomagot (Windows - Csomagkezelő - > 2D Sprite)
  • A karakterikonok egy összetevő használatával jelennek meg. Ez akkor hasznos, ha inkább egy ikon betűtípusát szeretné használni. Az ikon HoloLens használni, létre kell hoznia egy TextMeshPro betűkészlet-eszközt.

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: Eszközkészlet Mixed Reality > Ikonkészlet létrehozása. 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észlet-eszközt.

Az MRTK 2.4-es és az azt túllépő alkalmazásokban azt javasoljuk, hogy az egyéni ikon-mintázatokat áthelyezni kell egy IconSetbe. 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 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édablak

Ha a migrálás során beállított alapértelmezett ikon nem tartalmaz ikont, a MixedRealityToolkit.Generated/CustomIconSets alatt létrejön egy egyéni ikonkészlet. Egy párbeszédpanel jelzi, hogy ez történt.

Egyéni ikon értesítése

Ikon HoloLens betűkészlet-eszköz létrehozása

Először importálja az ikon betűkészletét a Unitybe. A Windows gépeken az alapértelmezett betűkészletet HoloLens a Windows/holomdl2.ttf fájlban. 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 Window TextMeshPro > font Asset Creator segítségével. Íme az ajánlott beállítások egy 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-eszköz létrehozása után mentse a projektet, és rendelje hozzá az ikonkészlet Karakter ikon Betűkészlet mezőjéhez. Az Elérhető ikonok legördülő lista jelennek meg. Ha egy ikont egy gombbal is használni akar, 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 lehet adni címkével is). 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 ButtonConfigHelper

Gomb ikonkészlet

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

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

  1. 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ó.

Az előlapi gomb méretének módosítása 1

A Quad Gombméret testreszabási méretének frissítése 2

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

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

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

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

Gombok beszéde

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

Gomb beszéde 2

See-it, Say-it címke 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.

3. gombbeszéd

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

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

Megnyomható gombkocka 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 PressableButton Inspector panelen rendelje hozzá a kockaobjektumot a Mozgó PressableButton

megnyomható gombkocka 3

Amikor kiválasztja a kockát, több színes réteget fog látni az objektumon. Ez a Press Gépház 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 1Pressable button cube 2

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

Gombkocka megnyomható 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őkü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 közelében elhelyezett kék sík jelzi:

A gomb megnyomásra használható szkriptösszetevője, kiemelt Front Push tulajdonság kényszerítésével

Animált példa a kezdő leküldéses távolság áthelyezésre a közel interakciós, érintéses sík előtt

2. Vizuális visszajelzés hozzáadása az alapszintű kockagombhoz

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.

Megnyomható gombkocka 4

Jelölje be Hover Light a és a Fluent lehetőségek Proximity LightHover Light 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.

gombkocka 5megnyomható gombkocka futtatása 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 hozzá Audio Source hangklipeket az AudioSource.PlayOneShot() kiválasztásával. A mappában MRTK_Select_Main MRTK_Select_Secondary hangklipeket is /SDK/StandardAssets/Audio/ használhat.

megnyomható gombkocka 7Gombkocka 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 távoli interakciós eseményeket is kezel. Adja Interactable.cs hozzá, majd húzza a kockaobjektumot a Interactable.csmező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 az elsimítást és az időtartam beállítását.

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.

Gombkocka megnyomható futtatása 3Gombkocka futtatása 4

Példák egyéni gombokra

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

Pressable Custom1Pressable Custom2

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

Lenyomható Custom3

Lásd még