Knoppen

Hoofdknop

Een knop biedt de gebruiker een manier om een onmiddellijke actie te activeren. Het is een van de meest basisonderdelen in mixed reality. MRTK biedt verschillende soorten prefabs voor knoppen.

Knop prefabs in MRTK

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

Knoppen op basis van afbeelding/afbeelding in de gebruikersinterface van Unity

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

Knoppen op basis van Collider

PressableButtonOlooLens2 PressableButtonOlooLens2

PressableButtonOlooLens2Unplated PressableButtonOlooLens2Unplated

PressableButtonOlooLens2Circular PressableButtonOlooLens2Circular

HoloLens 2 knop in shellstijl met backplate die ondersteuning biedt voor verschillende visuele feedback, zoals randlicht, nabijheidslicht en gecomprimeerde voorste bord

HoloLens 2 shell-stijlknop zonder backplate

HoloLens 2 shell-stijlknop met ronde vorm

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonOloLens2Bar3H PressableButtonOlooLens2Bar3H

PressableButtonOloLens2Bar3V PressableButtonOlooLens2Bar3V

De shell HoloLens 2 knop 32x96mm van Wide HoloLens 2

Horizontale HoloLens 2 knopbalk met gedeelde backplate

Verticale HoloLens 2 knopbalk met gedeelde backplate

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 het selectievakje shell-style 32x32mm

HoloLens 2 32x32mm-switch in shellstijl van HoloLens 2

HoloLens 2 shell-stijl radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 het selectievakje shell-style 32x96mm

HoloLens 2 shell-stijlschakelaar 32x96mm

HoloLens 2's shell-style radio 32x96mm

Radiale radiale

Selectievakje

ToggleSwitch toggleSwitch

Radiale knop

Checkbox

Wisselknop

ButtonOlooLens1 ButtonOlooLens1

PressableRoundButton PressableRoundButton

Knop Basisknop

HoloLens de shellstijlknop van de eerste generatie

De knop Round shape push

De knop Basic

De Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) is gebaseerd op het concept Interactable om eenvoudige UI-besturingselementen te bieden voor knoppen of andere typen interactieve oppervlakken. De basislijnknop ondersteunt alle beschikbare invoermethoden, met inbegrip van verwoorde handinvoer voor de bijna-interacties en staren en tikken op de verre interacties. U kunt ook spraakopdracht gebruiken om de knop te activeren.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonOlooLens2.prefab) is de shell-stijlknop van HoloLens 2 die ondersteuning biedt voor de precieze verplaatsing van de knop voor de invoer voor het direct bijhouden van de hand. Het Interactable combineert script met PressableButton script.

Voor HoloLens 2 is het raadzaam om knoppen met een ondoorzichtige backplate te gebruiken. Transparante knoppen worden niet aanbevolen vanwege deze bruikbaarheids- en stabiliteitsproblemen:

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

Knop geseed

Knoppen indrukken gebruiken

Knoppen op basis van de gebruikersinterface van Unity

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 vervolgens PressableButtonUnityUI (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/PressableButtonOlooLens2UnityUI.prefab) op het canvas.

Knoppen op basis van Collider

Sleep PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonOlooLens2.prefab) of PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonOlooLens2Unplated.prefab) naar de scène. Deze knop-prefabs zijn al geconfigureerd voor feedback op audiovisu visuals voor de verschillende soorten invoer, waaronder verwoorde handinvoer en staren.

De gebeurtenissen die worden blootgesteld in de prefab zelf, evenals het interactable-onderdeel, kunnen worden gebruikt om extra acties te activeren. De 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 soorten invoermethoden, zoals staren, tikken in de lucht, handfoto's, evenals fysieke knoppen die door het script met de knop drukken kunnen.

How to Use Interactable

U kunt configureren wanneer de on-klikknop de gebeurtenis OnClick start via PhysicalPressEventRouter de knop . U kunt bijvoorbeeld OnClick instellen op fire wanneer de knop voor het eerst wordt ingedrukt, in plaats van in te drukken en te worden vrijgegeven, door Interactable On Click to Event On Press in te stellen.

How to use events

Als u gebruik wilt maken van specifieke informatie over de tekst van de handinvoer, kunt u knoppen indrukken - Touch Begin, Touch End, Knop ingedrukt, Vrijgegeven knop. Deze gebeurtenissen worden echter niet gegeven als reactie op in de lucht tikken, hand ray of ooginvoer. Als u zowel near- als far-interacties wilt ondersteunen, is het raadzaam om de OnClick-gebeurtenis van Interactable te gebruiken.

How to use Pressable Buttons

Interactie-staten

In de niet-actieve status is het voorste bord van de knop niet zichtbaar. Wanneer een vinger of een cursor van starende invoer op het oppervlak gericht is, wordt de oplichtende rand van het voorste bord zichtbaar. Er is extra markering van de positie van de hand in de hand op het voorste oppervlak. Wanneer u met een vinger wordt ge pusht, wordt het voorste bord met de hand in de hand verplaatst. Wanneer de hand in de hand het oppervlak van de voorste bord raakt, geeft het een subtiele pulse-effect weer om visuele feedback van het aanraakpunt te geven.

In HoloLens 2 shell-stijlknop zijn er veel visuele aanwijzingen en betaalbaarheid om het vertrouwen van de gebruiker in de interactie te vergroten.

Nabijheidslicht Focus markeren Gecomprimeerde compressie Pulse on trigger
Nabijheidslicht Focus markeren Gecomprimeerde compressie Pulse on trigger

Het subtiele pulse-effect wordt geactiveerd door de drukknop, die zoekt naar ProximityLight(s) die live zijn op de momenteel communicerende aanwijzer. Als er nabijheidslichten worden gevonden, wordt de methode aangeroepen, waarmee automatisch shaderparameters worden geimimed ProximityLight.Pulse om een pulse weer te geven.

Eigenschappen van Inspector

Knopstructuur

Box Collider Box Collider voor het voorste bord van de knop.

Op de knop Drukken De logica voor de verplaatsing van de knop met interactie met de hand.

Fysieke druk op gebeurtenisrouter Met dit script worden gebeurtenissen van interactie met de hand naar Interactable verzendt.

Interactie mogelijk Interactable verwerkt verschillende typen interactie-staten en -gebeurtenissen. HoloLens staren, gebaren en spraakinvoer en immersive headset invoer van de bewegingscontroller worden rechtstreeks verwerkt door dit script.

Audiobron Unity-audiobron voor de audiofeedbackclips.

NearInteractionTouchable.cs vereist om elk object aanraakbaar te maken met verwoorde handinvoer.

Prefab-indeling

Het object ButtonContent bevat een voorste bord, tekstlabel en pictogram. De FrontPlate reageert op de nabijheid van de index met behulp van de Button_Box shader. Het geeft oplichtende randen, nabijheidslicht en een pulse-effect op aanraking weer. Het tekstlabel is gemaakt met TextMesh Pro. De zichtbaarheid van SeeItSayItLabel wordt bepaald door het thema van Interactable.

Knopindeling

Het pictogram en de tekst wijzigen

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

Knop config Helper

Pictogrammensets maken en wijzigen

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

  • Quad-pictogrammen worden weergegeven op een quad met behulp van een MeshRenderer . Dit is de standaardstijl voor het pictogram.
  • Sprite-pictogrammen worden weergegeven met behulp van een SpriteRenderer . Dit is handig als u liever uw pictogrammen als een spriteblad importeert of als u wilt dat uw pictogramactiva worden gedeeld met onderdelen van de Unity-gebruikersinterface. Als u deze stijl wilt gebruiken, moet u het sprite-editorpakket installeren (Windows -> Pakketbeheer -> 2D Sprite)
  • Pictogrammen met char worden weergegeven met behulp van een TextMeshPro onderdeel. Dit is handig als u liever een pictogramlettertype gebruikt. Als u het HoloLens wilt gebruiken, moet u een TextMeshPro lettertype-asset maken.

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

U kunt een nieuwe knoppictogramset maken met het assetmenu: > Mixed Reality Toolkit > Pictogramset. Als u pictogrammen voor quads en sprite wilt toevoegen, sleept u ze gewoon naar hun respectieve matrices. Als u pictogrammen voor teken wilt toevoegen, moet u eerst een lettertype-asset maken en toewijzen.

In MRTK 2.4 en daarna raden we u aan om aangepaste pictogramtexturen te verplaatst naar een IconSet. Als u de assets op alle knoppen in een project wilt upgraden naar de nieuwe aanbevolen indeling, gebruikt u de ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality. Toolkit. Utilities.ButtonConfigHelperMigrationHandler)

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

Het venster Upgradevenster

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

Melding voor aangepast pictogram

Een lettertype-asset HoloLens een nieuw pictogram maken

Importeer eerst het lettertype van het pictogram in Unity. Op Windows machines kunt u het standaardlettertype HoloLens vinden in Windows/Fonts/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 zijn 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

Knop maken 1

Zodra de lettertype-asset is gegenereerd, kunt u deze opslaan in uw project en deze toewijzen aan het veld Tekenpictogram lettertype van de pictogrammenset. De vervolgkeuzekeuze wordt nu ingevuld. Als u een pictogram beschikbaar wilt maken voor gebruik door een knop, klikt u erop. Deze wordt toegevoegd aan de vervolgkeuzebalk Geselecteerde pictogrammen en wordt nu weergegeven in De optie U kunt ButtonConfigHelper. het pictogram desgewenst een tag geven. Hiermee schakelt u het instellen van het pictogram tijdens runtime in.

Knop maken 3

Knop maken 2

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

Als u de pictogramset wilt gebruiken, vouwt u de vervolgkeuzeknop Pictogrammen in de uit ButtonConfigHelper en wijst u deze toe aan het veld Pictogrammenset.

Knoppictogram instellen

De grootte van een knop wijzigen

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

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

Klik vervolgens op de knop Grenzen herstellen in het NearInteractionTouchable-script in de hoofdmap van de knop.

De grootte van de aanpassing van de  frontPlate-knopgrootte bijwerken 1

De grootte van de aanpassing van de  quad-knopgrootte bijwerken 2

De grootte van de aanpassing van de Box  Collider-knopgrootte bijwerken 3

Klik op Aanpassing van de knop Grootte van de knop Grenzen  herstellen 4

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

Spraakinvoer-handler Met het script Interactable in Pressable Button wordt al IMixedRealitySpeechHandler geïmplementeerd. Een spraakopdrachttrefwoord kan hier worden ingesteld.

Buttons Speech

Spraakinvoerprofiel Daarnaast moet u het sleutelwoord spraakopdracht registreren in het algemene profiel voor spraakopdrachten.

Button speech 2

See-it, Say-it label De prefab van de opdrukbare knop bevat een tijdelijke aanduiding TextMesh Pro label onder het object SeeItSayItLabel. U kunt dit label gebruiken om het trefwoord voor de spraakopdracht voor de knop aan de gebruiker door te geven.

Button Speech 3

Een nieuwe knop maken

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

Pressable button cube 0

1. Een opdrukknop met kubus maken (alleen bijna interactie)

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

Wijs PressableButton in het deelvenster Inspector het kubusobject toe aan de visuals van de knop verplaatsen.

pressable button cube 3

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

Pressable Buton cube 1 Pressable button cube 2

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

Pressable button cube run 1

Problemen oplossen

Als met uw knop dubbel wordt gedrukt, controleert u of de eigenschap Front-push afdwingen actief is en dat het vlak Pushafstand starten wordt geplaatst voor het vlak Near Interaction Touchable. Het vlak Near Interaction Touchable wordt aangegeven door het blauwe vlak dat voor de oorsprong van de witte pijl in de onderstaande GIF is geplaatst:

Het scriptonderdeel Pressable button met de eigenschap Enforce Front Push gemarkeerd

Geanimeerd voorbeeld van het verplaatsen van de begin-pushafstand voor het vlak dat bijna kan worden gebruikt

2. Visuele feedback toevoegen aan de basisknop van de kubus

MRTK Standard Shader biedt verschillende functies die het eenvoudig maken om visuele feedback toe te voegen. Maak een materiaal en selecteer shader Mixed Reality Toolkit/Standard . U kunt ook een van de bestaande materialen onder gebruiken of dupliceren /SDK/StandardAssets/Materials/ die gebruikmaakt van MRTK Standard Shader.

Pressable button cube 4

Controleer Hover Light en onder Fluent Proximity Light Opties. Hierdoor is visuele feedback mogelijk voor interacties met zowel Near Hand (Proximity Light) als interacties met veel aanwijzers (Hover Light).

pressable button cube 5 pressable button cube run 2

3. Audiofeedback toevoegen aan de basisknop van de kubus

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

pressable button cube 7 Pressable Button Cube 6

4. Visuele staten toevoegen en veel interactiegebeurtenissen verwerken

Interactable is een script dat het eenvoudig maakt om een visuele status te maken voor de verschillende typen invoerinteracties. Ook worden gebeurtenissen met veel interactie verwerkt. Voeg Interactable.cs het kubusobject toe en sleep het naar het veld Doel onder Profielen. Maak vervolgens een nieuw Thema met het type ScaleOffsetColorTheme. Onder dit thema kunt u de kleur van het object opgeven voor de specifieke interactie-staten, zoals Focus en Pressed. U kunt ook Schalen en Offset bepalen. Controleer Easing en stel de duur in om de visuele overgang soepel te laten verlopen.

Profielthema selecteren

U ziet dat het object reageert op zowel verre interacties (hand ray or star cursor) als near(hand)-interacties.

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Voorbeelden van aangepaste knoppen

In de scène HandInteractionExampleziet u de voorbeelden van de knoppen en ronde knoppen die beide gebruikmaken van PressableButton .

Pressable Custom1 Pressable Custom2

Aan elke sleutel is een PressableButton en een NearInteractionTouchable script toegewezen. Het is belangrijk om te controleren of de richting Lokaal doorsturen van juist NearInteractionTouchable is. Deze wordt weergegeven door een witte pijl in de editor. Zorg ervoor dat de pijl weg wijst van het voorste gezicht van de knop:

Pressable Custom3

Zie ook