Knoppen — MRTK2

Een knop geeft de gebruiker een manier om een onmiddellijke actie te activeren. Het is een van de meest fundamentele onderdelen in mixed reality. MRTK biedt verschillende soorten knopprefabs.

Knopprefabs in MRTK

Voorbeelden van de knopprefabs onder MRTK/SDK/Features/UX/Interactable/Prefabs map

Op afbeeldingen/grafische afbeeldingen gebaseerde knoppen voor Unity UI

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

Knoppen op basis van Collider

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

De shell-stijlknop van HoloLens 2 met achterplaat die verschillende visuele feedback ondersteunt, zoals randlicht, nabijheidslicht en gecomprimeerde voorplaat

De shell-stijlknop van HoloLens 2 zonder achterplaat

De shell-stijlknop van HoloLens 2 met cirkelvormige vorm

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Brede HoloLens 2's shell-stijl knop 32x96mm

Horizontale HoloLens 2-knopbalk met gedeelde backplate

Verticale HoloLens 2-knopbalk met gedeelde achterplaat

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2's shell-stijl selectievakje 32x32mm

HoloLens 2's shell-stijl switch 32x32mm

HoloLens 2's shell-stijl radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2's shell-stijl selectievakje 32x96mm

HoloLens 2's shell-stijl switch 32x96mm

HoloLens 2's shell-stijl radio 32x96mm

Radiaal

Selectievakje

Wisselknop

Radiale knop

Selectievakje

Wisselknop

ButtonHoloLens1

PressableRoundButton

Knoop

Knop Shell-stijl van HoloLens 1e generatie

Drukknop ronde vorm

De knop Basis

De Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) is gebaseerd op het concept Interactiebaar om eenvoudige UI-besturingselementen te bieden voor knoppen of andere typen interactieve oppervlakken. De basislijnknop ondersteunt alle beschikbare invoermethoden, waaronder gearticuleerde handinvoer voor de bijna-interacties, en star + luchttik voor de verre interacties. U kunt ook spraakopdrachten gebruiken om de knop te activeren.

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) is de shellstijlknop van HoloLens 2 die ondersteuning biedt voor de precieze verplaatsing van de knop voor de invoer voor directe handtracering. Het combineert Interactable script met PressableButton script.

Voor HoloLens 2 is het raadzaam knoppen met een ondoorzichtige achterplaat te gebruiken. Transparante knoppen worden niet aanbevolen vanwege deze problemen met bruikbaarheid en stabiliteit:

• Pictogram en tekst zijn moeilijk te lezen met de fysieke omgeving
• Het is moeilijk te begrijpen wanneer de gebeurtenis wordt geactiveerd
• Hologrammen die via een transparant vlak worden weergegeven, kunnen instabiel zijn met de diepte-LSR-stabilisatie van HoloLens 2

Drukbare knoppen gebruiken

Knoppen op basis van unity-gebruikersinterface

Maak een canvas in uw scène (GameObject -> UI -> Canvas). In het deelvenster Inspector voor uw canvas:

• Klik op Converteren naar MRTK Canvas
• Klik op "Add NearInteractionTouchableUnityUI"
• Stel de X-, Y- en Z-schaal van het onderdeel Rect Transform in op 0,001

Sleep PressableButtonUnityUI vervolgens (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) of PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) naar het canvas.

Knoppen op basis van Collider

Sleep PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) of PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) naar de scène. Deze knopprefabs zijn al geconfigureerd voor audiovisual feedback voor de verschillende typen invoer, waaronder gearticuleerde handinvoer en blik.

De gebeurtenissen die worden weergegeven in de prefab zelf en het onderdeel Interactiebaar kunnen worden gebruikt om extra acties te activeren. De drukbare knoppen in de scène HandInteractionExample gebruiken de Gebeurtenis OnClick van Interactable om een wijziging in de kleur van een kubus te activeren. Deze gebeurtenis wordt geactiveerd voor verschillende typen invoermethoden, zoals staren, luchttik, hand-ray, en fysieke knop drukt via het drukbare knopscript.

U kunt configureren wanneer met de drukbare knop de Gebeurtenis OnClick wordt geactiveerd via de PhysicalPressEventRouter knop. U kunt bijvoorbeeld instellen dat OnClick wordt geactiveerd wanneer de knop voor het eerst wordt ingedrukt, in plaats van te worden ingedrukt en vrijgegeven door Interactie bij klikken in te stellen op Gebeurtenis bij Druk.

Als u specifieke informatie over de handinvoer wilt gebruiken, kunt u drukbare knoppengebeurtenissen gebruiken : Aanraken, Touch End, Knop ingedrukt, Knop Vrijgegeven. Deze gebeurtenissen worden echter niet geactiveerd als reactie op luchtkraan, handstraal of ooginvoer. Voor ondersteuning van bijna- en verre interacties is het raadzaam om de OnClick-gebeurtenis van Interactable te gebruiken.

Interactiestatussen

In de niet-actieve toestand is de voorplaat van de knop niet zichtbaar. Als een vinger nadert of een cursor van de invoer van de blik gericht is op het oppervlak, wordt de gloeiende rand van de voorplaat zichtbaar. Er is extra markering van de vingertoppenpositie op het voorplaatoppervlak. Wanneer de voorplaat met een vinger wordt gepusht, beweegt de voorplaat met de vinger naar binnen. Wanneer de vingertoppen het oppervlak van de voorplaat raken, toont het een subtiel pulseffect om visuele feedback van het aanraakpunt te geven.

In de holoLens 2-shellknop zijn er veel visuele aanwijzingen en betaalbaarheid om het vertrouwen van de gebruiker op interactie te vergroten.

Nabijheidslicht	Focusmarkering	Comprimerende kooi	Pulse op trigger

Het subtiele pulseffect wordt geactiveerd door de drukbare knop, die zoekt naar ProximityLight(s) die op de huidige interactiepunt staan. Als er nabijheidslichten worden gevonden, wordt de ProximityLight.Pulse methode aangeroepen, die automatisch arceringsparameters aangeeft om een puls weer te geven.

Eigenschappen van inspector

Box ColliderBox Collider voor de voorplaat van de knop.

Druk op knop De logica voor de beweging van de knop met de hand.

Fysieke gebeurtenisrouter Dit script verzendt gebeurtenissen van handpersinteractie naar Interactiebaar.

Interactiebaar Interactiebaar verwerkt verschillende typen interactiestatussen en gebeurtenissen. HoloLens gaze, gesture, and voice input and immersive headset motion controller input are directly handled by this script.

Audio Source Unity-audiobron voor de audiofeedbackclips.

NearInteractionTouchable.cs Vereist om een object aanraakbaar te maken met gearticuleerde handinvoer.

Prefab-indeling

Het ButtonContent-object bevat voorplaat, tekstlabel en pictogram. De FrontPlate reageert op de nabijheid van de index binnen handbereik met behulp van de Button_Box arcering. Het toont gloeiende randen, nabijheidslicht en een pulseffect op aanraking. Het tekstlabel wordt gemaakt met TextMesh Pro. De zichtbaarheid van SeeItSayItLabel wordt bepaald door het thema van Interactable.

Het pictogram en de tekst wijzigen

MRTK-knoppen gebruiken een ButtonConfigHelper onderdeel om u te helpen bij het wijzigen van het pictogram, de tekst en het label van de knop. (Houd er rekening mee dat sommige velden mogelijk afwezig zijn als er geen elementen aanwezig zijn op de geselecteerde knop.)

Pictogrammensets maken en wijzigen

Een pictogrammenset is een gedeelde set pictogrammenassets die door het ButtonConfigHelper onderdeel worden gebruikt. Er worden drie pictogramstijlen ondersteund.

• Quad-pictogrammen worden weergegeven op een quad met behulp van een MeshRenderer. Dit is de standaardpictogramstijl.
• Sprite-pictogrammen worden weergegeven met behulp van een SpriteRenderer. Dit is handig als u uw pictogrammen liever als een spriteblad importeert of als u wilt dat uw pictogramassets worden gedeeld met Unity UI-onderdelen. Als u deze stijl wilt gebruiken, moet u het Sprite Editor-pakket installeren (Windows -> Pakketbeheer -> 2D Sprite)
• Tekenpictogrammen worden weergegeven met behulp van een TextMeshPro onderdeel. Dit is handig als u liever een pictogramlettertype gebruikt. Als u het lettertype voor het HoloLens-pictogram wilt gebruiken, moet u een TextMeshPro lettertypeasset maken.

Als u wilt wijzigen welke stijl uw knop gebruikt, vouwt u de vervolgkeuzelijst Pictogrammen uit in de ButtonConfigHelper en selecteert u in de vervolgkeuzelijst Pictogramstijl .

Ga als volgt te werk om een nieuw knoppictogram te maken:

1. Klik in het venster Project met de rechtermuisknop op Assets om het contextmenu te openen. (U kunt ook met de rechtermuisknop op een spatie in de Map Activa of een van de bijbehorende submappen.)

2. Selecteer Pictogramset Mixed Reality > Toolkit > maken>.

   

Als u quad- en spritepictogrammen wilt toevoegen, sleept u ze naar hun respectieve matrices. Als u tekenpictogrammen wilt toevoegen, moet u eerst een lettertypeasset maken en toewijzen.

In MRTK 2.4 en hoger raden we aan om aangepaste pictogramtextuur te verplaatsen naar een IconSet. Als u de assets op alle knoppen in een project wilt upgraden naar de nieuwe aanbevolen indeling, gebruikt u ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Hulpprogramma's -> Migratievenster -> Selectie migratiehandler -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importeren van het pakket Microsoft.MixedRealityToolkit.Unity.Tools dat is vereist om de knoppen bij te werken.

Als er tijdens de migratie geen pictogram wordt gevonden in de standaardpictogramset, wordt er een aangepaste pictogrammenset gemaakt in MixedRealityToolkit.Generated/CustomIconSets. Er wordt een dialoogvenster weergegeven dat dit heeft plaatsgevonden.

Een lettertypeasset voor het HoloLens-pictogram maken

Importeer eerst het pictogramlettertype in Unity. Op Windows-computers vindt u het standaardlettertype HoloLens in Windows/Lettertypen/holomdl2.ttf. Kopieer en plak dit bestand in de map Assets.

Open vervolgens de TextMeshPro Font Asset Creator via Window > TextMeshPro > Font Asset Creator. Hier volgen de aanbevolen instellingen voor het genereren van een HoloLens-lettertype-atlas. Als u alle pictogrammen wilt opnemen, plakt u het volgende Unicode-bereik in het veld Tekenreeks :

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

Zodra de lettertypeasset is gegenereerd, slaat u het op in uw project en wijst u deze toe aan het veld Tekenpictogram van de pictogrammenset. De vervolgkeuzelijst Beschikbare pictogrammen wordt nu ingevuld. Als u een pictogram beschikbaar wilt maken voor gebruik door een knop, klikt u erop. Deze wordt toegevoegd aan de vervolgkeuzelijst Geselecteerde pictogrammen en wordt nu weergegeven in de ButtonConfigHelper. vervolgkeuzelijst U kunt desgewenst het pictogram een tag geven. Hiermee kunt u het pictogram tijdens runtime instellen.

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

Als u de pictogrammenset wilt gebruiken, selecteert u een knop, vouwt u de vervolgkeuzelijst Pictogrammen in de ButtonConfigHelper uit en wijst u deze toe aan het veld Pictogrammenset .

De grootte van een knop wijzigen

De grootte van de shell-stijlknop van HoloLens 2 is 32x32mm. Als u de dimensie wilt aanpassen, wijzigt u de grootte van deze objecten in de knopprefab:

1. FrontPlate
2. Quad onder BackPlate
3. Box Collider op de hoofdmap

Klik vervolgens op de knop Grenzen herstellen in het script NearInteractionTouchable, dat zich in de hoofdmap van de knop bevindt.

De grootte van de FrontPlate bijwerken

De grootte van de quad bijwerken

De grootte van de Box Collider bijwerken

Klik op 'Grenzen herstellen'

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

Spraakinvoerhandler Het interactiebare script in de drukbare knop implementeert IMixedRealitySpeechHandleral. Hier kunt u een trefwoord voor spraakopdrachten instellen.

Daarnaast moet u het trefwoord voor spraakopdrachten registreren in het algemene spraakopdrachtenprofiel.

See-it, Say-it label De drukbare knop prefab heeft een tijdelijke aanduiding TextMesh Pro label onder het SeeItSayItLabel-object . U kunt dit label gebruiken om het trefwoord voor de spraakopdracht voor de knop aan de gebruiker te communiceren.

Een volledig nieuwe knop maken

U vindt de voorbeelden van deze knoppen in de scène PressableButtonExample .

1. Een drukbare knop maken met kubus (alleen in de buurt van interactie)

1. Een Unity-kubus maken (GameObject > 3D-objectkubus > )
2. Script toevoegen PressableButton.cs
3. Script toevoegen NearInteractionTouchable.cs

Wijs in het PressableButtondeelvenster Inspector het kubusobject toe aan de visuals voor bewegende knoppen.

Wanneer u de kubus selecteert, ziet u meerdere gekleurde lagen op het object. Hiermee worden de afstandswaarden onder Druk op Instellingen gevisualiseerd. Met behulp van de ingangen kunt u configureren wanneer u moet beginnen met drukken (het object verplaatsen) en wanneer de gebeurtenis moet worden geactiveerd.

Wanneer u op de knop drukt, worden de juiste gebeurtenissen verplaatst en gegenereerd die worden weergegeven in het PressableButton.cs script, zoals TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Probleemoplossing

Als de knop een dubbele druk uitvoert, moet u ervoor zorgen dat de eigenschap Front Push afdwingen actief is en dat het vlak van de startpushafstand vóór het vlak van near Interaction Touchable wordt geplaatst. Het vlak Near Interaction Touchable wordt aangegeven door het blauwe vlak voor de oorsprong van de witte pijl in het gif hieronder:

2. Visuele feedback toevoegen aan de knop Basiskubus

MRTK Standard Shader biedt verschillende functies waarmee u eenvoudig visuele feedback kunt toevoegen. Maak een materiaal en selecteer shader Mixed Reality Toolkit/Standard. U kunt ook een van de bestaande materialen gebruiken of dupliceren waarvoor /SDK/StandardAssets/Materials/ MRTK Standard Shader wordt gebruikt.

Controleer Hover Light en Proximity Light onder Fluent Options. Dit maakt visuele feedback mogelijk voor interacties met zowel near hand(Proximity Light) als veel aanwijzer (Hover Light).

3. Audiofeedback toevoegen aan de eenvoudige kubusknop

Omdat PressableButton.cs script gebeurtenissen zoals TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() beschikbaar maakt, kunnen we eenvoudig audiofeedback toewijzen. Voeg Unity toe Audio Source aan het kubusobject en wijs vervolgens audioclips toe door AudioSource.PlayOneShot() te selecteren. U kunt MRTK_Select_Main en audioclips MRTK_Select_Secondary onder /SDK/StandardAssets/Audio/ map.

4. Visuele statussen toevoegen en veel interactie-gebeurtenissen verwerken

Interactiebaar is een script waarmee u eenvoudig een visuele status kunt maken voor de verschillende typen invoerinteracties. Het verwerkt ook veel interactie-gebeurtenissen. Voeg het kubusobject toe Interactable.cs en zet het neer op het veld Doel onder Profielen. Maak vervolgens een nieuw thema met een type ScaleOffsetColorTheme. Onder dit thema kunt u de kleur van het object opgeven voor de specifieke interactiestatussen, zoals Focus en Ingedrukt. U kunt ook de schaal en verschuiving beheren. Controleer de versoepeling en stel de duur in om de visuele overgang soepel te laten verlopen.

U ziet dat het object reageert op zowel verre interacties (handstraal of blikcursor) als near(hand).

Voorbeelden van aangepaste knoppen

Bekijk in de handInteractionExample-scène de voorbeelden van piano- en ronde knopen die beide worden gebruikt PressableButton.

Elke pianotoets heeft een PressableButton en een NearInteractionTouchable script toegewezen. Het is belangrijk om te controleren of de richting NearInteractionTouchable Lokaal doorsturen juist is. Deze wordt vertegenwoordigd door een witte pijl in de editor. Zorg ervoor dat de pijl naar het voorgezicht van de knop wijst:

Zie ook

• Interactiebaar
• Visuele thema's