Knappar – MRTK2

En knapp ger användaren ett sätt att utlösa en omedelbar åtgärd. Det är en av de mest grundläggande komponenterna i mixad verklighet. MRTK tillhandahåller olika typer av knappprefabs.

Knappprefabs i MRTK

Exempel på knappprefabs under MRTK/SDK/Features/UX/Interactable/Prefabs mappen

Unity UI Image/Graphic-baserade knappar

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

Collider-baserade knappar

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

HoloLens 2 knapp i gränssnittsstil med backplate som stöder olika visuell feedback, till exempel kantljus, närhetsljus och komprimerad frontplatta

HoloLens 2-knapp i gränssnittsstil utan backplate

HoloLens 2 knapp i skalformat med cirkulär form

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Wide HoloLens 2's shell-style knapp 32x96mm

Vågrät HoloLens 2 knappfält med delad backplate

Lodrät HoloLens 2 knappfält med delad backplate

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 kryssruta i shell-stil 32x32mm

HoloLens 2 gränssnittsväxel 32x32mm

HoloLens 2 s shell-stil radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 kryssruta i shell-stil 32x96mm

HoloLens 2 gränssnittsväxel 32x96mm

HoloLens 2 s shell-stil radio 32x96mm

Radiell knapp

Checkbox

Växla växel

ButtonHoloLens1

PressableRoundButton

HoloLens 1:a gens gränssnittsformatknapp

Snabbknapp för rund form

Knappen Basic

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) baseras på begreppet Interaktionsbar för att tillhandahålla enkla gränssnittskontroller för knappar eller andra typer av interaktiva ytor. Baslinjeknappen stöder alla tillgängliga indatametoder, inklusive ledade handindata för nära interaktioner samt blick + lufttryck för de avlägsna interaktionerna. Du kan också använda röstkommando för att utlösa knappen.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) är HoloLens 2 gränssnittsformatknapp som stöder knappens exakta förflyttning för direkt indata för handspårning. Den kombinerar Interactable skript med PressableButton skript.

För HoloLens 2 rekommenderar vi att du använder knappar med en ogenomskinlig bakplatta. Transparenta knappar rekommenderas inte på grund av dessa problem med användbarhet och stabilitet:

• Ikon och text är svåra att läsa med den fysiska miljön
• Det är svårt att förstå när händelsen utlöses
• Hologram som visas via ett transparent plan kan vara instabila med HoloLens 2 djup LSR-stabilisering

Så här använder du tryckbara knappar

Unity UI-baserade knappar

Skapa en arbetsyta i din scen (GameObject –> UI –> Canvas). I panelen Kontroll för din arbetsyta:

• Klicka på "Konvertera till MRTK-arbetsyta"
• Klicka på "Lägg till NearInteractionTouchableUnityUI"
• Ange rekt transformeringskomponentens X-, Y- och Z-skala till 0,001

Dra PressableButtonUnityUI sedan (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs /PressableButtonUnityUICircular.prefab) eller PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) på arbetsytan.

Collider-baserade knappar

PressableButtonHoloLens2 Dra bara (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) eller PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) till scenen. Dessa knappprefabs är redan konfigurerade för att ha audiovisuell feedback för de olika typerna av indata, inklusive ledad handinmatning och blick.

De händelser som exponeras i själva prefab och den interaktionsbara komponenten kan användas för att utlösa ytterligare åtgärder. De pressbara knapparna i HandInteractionExample-scenen använder händelsen Interactables OnClick för att utlösa en ändring i färgen på en kub. Den här händelsen utlöses för olika typer av indatametoder, till exempel blick, lufttryckning, handstråle samt fysiska knapptryckningar via det tryckbara knappskriptet.

Du kan konfigurera när den tryckbara knappen utlöser OnClick-händelsen via PhysicalPressEventRouter knappen på. Du kan till exempel ange att OnClick ska utlösas när knappen först trycks in, i stället för att tryckas på och släppas, genom att ange Interaktionsbar vid klickning till Händelse vid tryckning.

Om du vill använda specifik information om handinmatningstillstånd kan du använda händelser med tryckbara knappar – Touch Begin, Touch End, Knapptryckt, Knapp släppt. Dessa händelser utlöses dock inte som svar på lufttryck, handstråle eller ögonindata. För att stödja både när- och fjärranvända interaktioner rekommenderar vi att du använder OnClick-händelsen för Interactable.

Interaktionstillstånd

I inaktivt tillstånd är knappens främre plåt inte synlig. När ett finger närmar sig eller en markör från blickens indata riktar sig mot ytan blir frontplattans glödande kantlinje synlig. Det finns ytterligare markering av fingertoppspositionen på den främre plattans yta. När den skjuts med ett finger rör sig den främre plattan med fingertoppen. När fingertoppen rör vid frontplattans yta visar den en diskret pulseffekt för att ge visuell feedback om beröringspunkten.

I HoloLens 2 gränssnittsliknande knapp finns det många visuella tips och råd för att öka användarens förtroende för interaktionen.

Närhetsljus	Fokusmarkering	Komprimera bur	Puls vid utlösare

Den subtila pulseffekten utlöses av den tryckbara knappen, som letar efter ProximityLight(er) som finns på den aktuella interagerande pekaren. Om några närhetsljus hittas ProximityLight.Pulse anropas metoden, som automatiskt animerar skuggningsparametrar för att visa en puls.

Egenskaper för kontroll

Box ColliderBox Collider för knappens främre plåt.

Tryckbar knapp Logiken för knappflytten med handpressinteraktion.

Händelserouter för fysisk press Det här skriptet skickar händelser från handpressinteraktion till Interactable.

Interaktionsbarinteragerande hanterar olika typer av interaktionstillstånd och händelser. HoloLens blick, gest och röstinmatning och integrerande indata från headsetets rörelsestyrenhet hanteras direkt av det här skriptet.

Ljudkälla Unity-ljudkälla för ljudfeedbackklippen.

NearInteractionTouchable.cs Krävs för att göra alla objekt pekbara med ledad handinmatning.

Prefab-layout

ButtonContent-objektet innehåller frontplåt, textetikett och ikon. FrontPlate svarar på pekfingrets närhet med hjälp av Button_Box skuggning. Den visar glödande kantlinjer, närhetsljus och en pulseffekt vid beröring. Textetiketten skapas med TextMesh Pro. SeeItSayItLabels synlighet styrs av Interactables tema.

Så här ändrar du ikonen och texten

MRTK-knappar använder en ButtonConfigHelper komponent för att hjälpa dig att ändra knappens ikon, text och etikett. (Observera att vissa fält kanske saknas om elementen inte finns på den valda knappen.)

Skapa och ändra ikonuppsättningar

En ikonuppsättning är en delad uppsättning ikontillgångar som används av komponenten ButtonConfigHelper . Tre ikonformat stöds.

• Quad-ikoner återges på en quad med hjälp av en MeshRenderer. Det här är standardformatet för ikon.
• Sprite-ikoner återges med hjälp av en SpriteRenderer. Detta är användbart om du föredrar att importera dina ikoner som ett sprite-blad, eller om du vill att dina ikontillgångar ska delas med Unity UI-komponenter. Om du vill använda det här formatet måste du installera Sprite Editor-paketet (Windows –> Package Manager –> 2D Sprite)
• Teckenikoner renderas med hjälp av en TextMeshPro komponent. Detta är användbart om du föredrar att använda ett ikonteckensnitt. Om du vill använda HoloLens-ikonteckensnittet måste du skapa en TextMeshPro teckensnittstillgång.

Om du vill ändra vilket format knappen använder expanderar du listrutan Ikoner i ButtonConfigHelper och väljer i listrutan Ikonformat .

Så här skapar du en ny knappikon:

1. I fönstret Projekt högerklickar du på Tillgångar för att öppna snabbmenyn. (Du kan också högerklicka på ett tomt utrymme i mappen Tillgångar eller någon av dess undermappar.)

2. Välj Skapa > Mixed Reality > Toolkit-ikonuppsättning>.

   

Om du vill lägga till quad- och sprite-ikoner drar du dem helt enkelt till respektive matriser. Om du vill lägga till teckenikoner måste du först skapa och tilldela en teckensnittstillgång.

I MRTK 2.4 och senare rekommenderar vi att anpassade ikonstrukturer flyttas till en IconSet. Om du vill uppgradera tillgångarna på alla knappar i ett projekt till det nya rekommenderade formatet använder du ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit –> Verktyg –> Migreringsfönster –> Val av migreringshanterare –> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importera paketet Microsoft.MixedRealityToolkit.Unity.Tools som krävs för att uppgradera knapparna.

Om det inte finns någon ikon i standardikonen som angavs under migreringen skapas en anpassad ikonuppsättning i MixedRealityToolkit.Generated/CustomIconSets. En dialogruta visar att detta har skett.

Skapa en HoloLens-ikonteckensnittstillgång

Importera först ikonteckensnittet till Unity. På Windows-datorer hittar du standardteckensnittet HoloLens i Windows/Fonts/holomdl2.ttf. Kopiera och klistra in den här filen i mappen Tillgångar.

Öppna sedan TextMeshPro Font Asset Creator via Fönstret > TextMeshPro > Font Asset Creator. Här är de rekommenderade inställningarna för att generera en HoloLens-teckensnittsatlas. Om du vill inkludera alla ikoner klistrar du in följande Unicode-intervall i fältet Teckensekvens :

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

När teckensnittstillgången har genererats sparar du den i projektet och tilldelar den till ikonuppsättningens teckenikonteckensnittsfält . Listrutan Tillgängliga ikoner fylls nu i. Om du vill göra en ikon tillgänglig för användning av en knapp klickar du på den. Den läggs till i listrutan Valda ikoner och visas nu i ButtonConfigHelper. du kan ge ikonen en tagg. Detta aktiverar inställningen av ikonen vid körning.

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

Om du vill använda ikonuppsättningen väljer du en knapp genom att expandera listrutan Ikoner i ButtonConfigHelper och tilldela den till fältet Ikonuppsättning .

Ändra storlek på en knapp

HoloLens 2 shell-knappens storlek är 32x32mm. Om du vill anpassa dimensionen ändrar du storleken på dessa objekt i knappprefab:

1. FrontPlate
2. Quad under backplate
3. Box Collider på roten

Klicka sedan på knappen Korrigera gränser i skriptet NearInteractionTouchable som finns i knappens rot.

Uppdatera storleken på

Uppdatera storleken på

Uppdatera storleken på för Box Collider 3

Klicka på "Korrigera gränser"

Röstkommando ('see-it, say-it')

TalinmatningshanterareDet interaktionsbara skriptet i Pressable Button implementerar IMixedRealitySpeechHandlerredan . Ett nyckelord för röstkommando kan anges här.

Talinmatningsprofil Dessutom måste du registrera nyckelordet för röstkommandot i den globala talkommandoprofilen.

See-it, Say-it label Prefab för den tryckbara knappen har platshållaren TextMesh Pro-etikett under objektet SeeItSayItLabel . Du kan använda den här etiketten för att förmedla nyckelordet röstkommando för knappen till användaren.

Så här gör du en knapp från grunden

Du hittar exemplen på dessa knappar i scenen PressableButtonExample .

1. Skapa en tryckbar knapp med kub (endast nära interaktion)

1. Skapa en Unity-kub (GameObject > 3D-objektkub > )
2. Lägg till PressableButton.cs skript
3. Lägg till NearInteractionTouchable.cs skript

PressableButtonI panelen Kontroll tilldelar du kubobjektet till de visuella objekten Förflyttningsknapp.

När du väljer kuben visas flera färgade lager på objektet. Detta visualiserar avståndsvärdena under Pressinställningar. Med hjälp av handtagen kan du konfigurera när du ska börja trycka (flytta objektet) och när händelsen ska utlösas.

När du trycker på knappen flyttas den och genererar rätt händelser som exponeras i skriptet PressableButton.cs , till exempel TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Felsökning

Om knappen kör ett dubbeltryck kontrollerar du att egenskapen Framtvinga front push är aktiv och att startplanet för push-avstånd placeras framför planet Nära interaktion Pekbart . Planet Near Interaction Touchable indikeras av det blå planet som placeras framför den vita pilens ursprung i gif-bilden nedan:

2. Lägga till visuell feedback till den grundläggande kubknappen

MRTK Standard Shader innehåller olika funktioner som gör det enkelt att lägga till visuell feedback. Skapa ett material och välj skuggning Mixed Reality Toolkit/Standard. Eller så kan du använda eller duplicera ett av de befintliga materialen under /SDK/StandardAssets/Materials/ som använder MRTK Standard Shader.

Kontrollera Hover Light och Proximity Light under Fluent-alternativ. Detta möjliggör visuell feedback för både nära hand(Närhetsljus) och långpekare (Hovringsljus) interaktioner.

3. Lägga till ljudfeedback till den grundläggande kubknappen

Eftersom PressableButton.cs skriptet exponerar händelser som TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), kan vi enkelt tilldela ljudfeedback. Lägg bara till Unitys Audio Source i kubobjektet och tilldela sedan ljudklipp genom att välja AudioSource.PlayOneShot(). Du kan använda MRTK_Select_Main och MRTK_Select_Secondary ljudklipp under /SDK/StandardAssets/Audio/ mappen.

4. Lägga till visuella tillstånd och hantera händelser för långt interaktion

Interaktionsbar är ett skript som gör det enkelt att skapa ett visuellt tillstånd för de olika typerna av indatainteraktioner. Den hanterar även händelser för långt interaktion. Lägg till Interactable.cs och dra och släpp kubobjektet till fältet Mål under Profiler. Skapa sedan ett nytt tema med typen ScaleOffsetColorTheme. Under det här temat kan du ange färgen på objektet för de specifika interaktionstillstånden, till exempel Fokus och Tryck. Du kan också styra skalning och förskjutning. Kontrollera Lättnader och ange varaktighet för att göra den visuella övergången smidig.

Du ser objektet svara både långt (handstråle eller blickmarkör) och nära(hand) interaktioner.

Exempel på anpassad knapp

I HandInteractionExample-scenen kan du se exempel på piano och runda knappar som båda använder PressableButton.

Varje pianonyckel har tilldelats ett PressableButton och ett NearInteractionTouchable skript. Det är viktigt att kontrollera att local forward-riktningenNearInteractionTouchable är korrekt. Den representeras av en vit pil i redigeraren. Se till att pilen pekar bort från knappens framsida:

Se även

• Interaktionsbar
• Visuella teman