Knappar

Knapp, huvud

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 knapp prefabs.

Knapp prefabs i MRTK

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

Bild-/grafikbaserade knappar i Unity-användargränssnittet

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

Kollider-baserade knappar

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2:s shell-style-knapp med stöd för olika visuella feedback som kantlinjebelysning, närhetsbelysning och komprimerad fronttavla

HoloLens 2:s shell-style-knapp utan sats

HoloLens 2:s shell-style-knapp med cirkulär form

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

Wide HoloLens 2:s shell-style-knapp 32x96mm

Vågrätt HoloLens 2-knappfält med delad stödlist

Lodrätt HoloLens 2-knappfält med delad backplate

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2:s kryssruta i gränssnittsstil 32 x 32mm

HoloLens 2:s gränssnittsväxel 32x32mm

HoloLens 2:s radio radioformat 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2:s kryssruta i shell-format 32x96mm

HoloLens 2:s växel i gränssnittsstil 32 x 96mm

HoloLens 2:s radio radioformat 32x96mm

Radiell radiell

Kryssruta

VäxlaSwitch-växlingsknappSwitch

Radiell knapp

Checkbox

Växla växel

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton PressableRoundButton

Knappbasknapp

HoloLens 1:a genens gränssnittsknapp

Push-knapp för avrundad form

Knappen Grundläggande

Button(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) baseras på det interaktiva konceptet för att tillhandahålla enkla UI-kontroller för knappar eller andra typer av interaktiva ytor. Baslinjeknappen stöder alla tillgängliga indatametoder, inklusive tydligt handindata för nära interaktioner samt blick + tryck för de längsta interaktionerna. Du kan också använda röstkommandot för att utlösa knappen.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) är HoloLens 2:s gränssnittsknapp som stöder exakt förflyttning av knappen för direkt handspårning av indata. Den kombinerar Interactable skript med PressableButton skript.

För HoloLens 2 rekommenderar vi att du använder knappar med en täckande täckande plate. Transparenta knappar rekommenderas inte på grund av dessa användbarhets- och stabilitetsproblem:

  • 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:s LSR-djupstabilisering

Knapppläterad

Använda 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"
  • Ställ in Rect Transform-komponentens X-, Y- och Z-skala till 0,001

Dra sedan PressableButtonUnityUI (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/PressableButtonToloLens2UnityUI.prefab) till Arbetsytan.

Kollider-baserade knappar

Dra PressableButtonHoloLens2 bara (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) eller PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonToloLens2Unplated.prefab) till scenen. Dessa knapp prefabs har redan konfigurerats för att ha visuell feedback för de olika typerna av indata, inklusive tydligt handindata och blick.

De händelser som exponeras i själva prefab-enheten samt komponenten Interagerande kan användas för att utlösa ytterligare åtgärder. De tryckbara knapparna i HandInteractionExample-scenen använder OnClick-händelsen i Interactable 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, lufttryck, hand ray samt fysiska knapptryckningar genom det tryckbara knappskriptet.

How to Use Interactable

Du kan konfigurera när den tryckbara knappen ska trycka på OnClick-händelsen PhysicalPressEventRouter via knappen . Du kan till exempel ange att OnClick ska starta när knappen trycks ned för första gången, i stället för att tryckas ned och släppas, genom att ställa in Interactable On Click to Event On Press (Interaktionsbar vid klickning till Händelse vid tryckning).

How to use events

Om du vill använda specifik information om tydligt handindatatillstånd kan du använda händelser med tryckbara knappar – Touch Begin, Touch End, Button Pressed, Button Released. Dessa händelser kommer dock inte att skjutas som svar på lufttryck, hand ray eller ögonindata. För att stödja både nära och långt interaktioner, rekommenderar vi att du använder Interactables OnClick-händelse.

How to use Pressable Buttons

Interaktions tillstånd

Knappens främre tavla är inte synlig i viloläge. När ett finger närmar sig eller en markör från blickindata riktar in sig på ytan blir den främre tavlans glödande kantlinje synlig. Det finns ytterligare markering av fingertoppspositionen på den främre ytan. Vid push-tryckning med ett finger rör sig fronttavlan med fingertoppen. När fingertoppen vidrör ytan på den främre tavlan visas en diskret pulseffekt som ger visuell feedback om kontaktpunkten.

I HoloLens två gränssnittsknapp finns det många visuella tips och råd för att öka användarens förtroende för interaktion.

Närhetsbelysning Fokus markera Komprimerande låsning Pulse on trigger (Puls vid utlösare)
Närhetsbelysning Fokus markera Komprimerande låsning Pulse on trigger (Puls vid utlösare)

Den subtila pulseffekten utlöses av den tryckbara knappen, som söker efter ProximityLight(s) som finns på pekaren som interagerar för tillfället. Om närhetsbelysning hittas anropas metoden , som automatiskt animerar ProximityLight.Pulse skuggarparametrar för att visa en puls.

Kontrollegenskaper

Knappstruktur

Box Collider Box Collider för knappens framhjul.

Tryckbar knapp Logiken för knappförflyttning med handtryckningsinteraktion.

Händelserouter för fysisk tryckning Det här skriptet skickar händelser från handtryckningsinteraktion till Interaktionsbar.

Kan interagera Interaktionsbar hanterar olika typer av interaktions tillstånd och händelser. HoloLens indata från blick, gest och röst och integrerande headset-rörelsekontroll 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 lättåtkomliga med tydligt handindata.

Prefab-layout

Objektet ButtonContent innehåller frontplate, textetikett och ikon. FrontPlate svarar på indexets närhet med hjälp av Button_Box skuggaren. Den visar pulserande kantlinjer, närhetsbelysning och en pulseffekt på pekskärmen. Textetiketten görs med TextMesh-Pro. SeeItSayItLabels synlighet styrs av temat för interactable.

Knapplayout

Ändra ikon och text

MRTK-knappar använder ButtonConfigHelper en komponent som hjälper dig att ändra knappens ikon, text och etikett. (Observera att vissa fält kan saknas om element inte finns på den valda knappen.)

Knappkonfigurationshjälp

Skapa och ändra ikonuppsättningar

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

  • Quad-ikoner renderas på en quad med hjälp av MeshRenderer en . Det här är standardikonformatet.
  • Ikonerna Fördelade återges med hjälp av SpriteRenderer en . Detta är användbart om du föredrar att importera dina ikoner som ett bladet eller om du vill att ikontillgångarna ska delas med Unity UI-komponenter. Om du vill använda det här formatet måste du installera Paketet Försedd redigerare (Windows -> Package Manager -> 2D Personere)
  • Char-ikoner renderas med hjälp av en TextMeshPro komponent. Detta är användbart om du föredrar att använda ett ikonteckensnitt. Om du vill HoloLens teckensnittsikonen 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 från listrutan Ikonformat.

Du kan skapa en ny knappikon med tillgångsmenyn: Skapa > Mixed Reality Toolkit > Icon Set. Om du vill lägga till quad- och skjutikoner drar du dem helt enkelt till deras respektive matriser. Om du vill lägga till Char-ikoner 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 -> Utilities -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

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

Dialogruta för uppgraderingsfönstret

Om en ikon inte hittas i standardikonen som angetts under migreringen skapas en anpassad ikonuppsättning i MixedRealityToolkit.Generated/CustomIconSets. En dialogruta visar att detta har skett.

Meddelande om anpassad ikon

Skapa en teckensnittstillgång HoloLens en ikon

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

Öppna sedan TextMeshPro Font Asset Creator via Window > TextMeshPro > Font Asset Creator. Här är de rekommenderade inställningarna för att generera en HoloLens font atlas. 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

Knappskapande 1

När teckensnittstillgången har genererats sparar du den i projektet och tilldelar den till fältet Teckenteckenikon i ikonuppsättningen. 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 Du ButtonConfigHelper. kan välja att ge ikonen en tagg. Detta aktiverar inställningen av ikonen vid körning.

Knappskapande 3

Knappskapande 2

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

Om du vill använda din ikonuppsättning väljer du en knapp, expanderar listrutan Ikoner i ButtonConfigHelper och tilldelar den till fältet Ikonuppsättning.

Knappikonuppsättning

Ändra storlek på en knapp

HoloLens 2:s knappstorlek i gränssnittsstil är 32 x 32mm. Om du vill anpassa dimensionen ändrar du storleken på dessa objekt i knapp-prefab:

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

Klicka sedan på knappen Fix Bounds (Åtgärda gränser) i nearInteractionTouchable-skriptet som finns i roten på knappen.

Uppdatera storleken på anpassningen av  frontplate-knappens storlek 1

Uppdatera storleken på anpassningen av  Quad-knappens storlek 2

Uppdatera storleken på anpassningen för Box  Collider-knappens storlek 3

Klicka på "Åtgärda gränser"  knappen Storleksanpassning 4

Röstkommando (se det, säg det)

Speech Input Handler Skriptet som kan interagera i knappen Tryckbar implementerar redan IMixedRealitySpeechHandler . Ett nyckelord för röstkommandot kan anges här.

Buttons Speech

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

Button speech 2

See-it, Say-it label Prefab-knappen som kan tryckas på har platshållaren TextMesh Pro under objektet SeeItSayItLabel. Du kan använda den här etiketten för att kommunicera röstkommandots nyckelord för knappen till användaren.

Button Speech 3

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

Du hittar exempel på dessa knappar i scenen PressableButtonExample.

Pressable button cube 0

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

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

På panelen PressableButton Kontroll tilldelar du kubobjektet till Visuella objekt med knappen Flytta.

pressable button cube 3

När du väljer kuben visas flera färgade skikt på objektet. Detta visualiserar avståndsvärdena under Tryck Inställningar. Med handtagen kan du konfigurera när du ska starta tryckning (flytta objektet) och när händelsen ska utlösas.

Pressable Buton cube 1 Pressable button cube 2

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

Pressable button cube run 1

Felsökning

Om knappen kör en dubbel tryckning kontrollerar du att egenskapen Framtvinga framåt-push är aktiv och att Start Push Distance-planet placeras framför det near interaction touchable-planet. Det nära interaktionsbara planet indikeras av det blå planet som placerats framför den vita pilens ursprung i gif-bilden nedan:

Skriptkomponent för knapptryckning med framtvinga push-egenskap markerad

Animerat exempel på flytt av start-push-avståndet framför det nära interaktionsbara planet

2. Lägga till visuell feedback till knappen basic cube

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

Pressable button cube 4

Kontrollera Hover Light och under Fluent Proximity Light alternativ. Detta möjliggör visuell feedback för interaktioner både nära till hands (närhetsbelysning) och långt pekare (hovringsbelysning).

pressable button cube 5 pressable button cube run 2

3. Lägga till ljudfeedback till knappen för den grundläggande kuben

Eftersom PressableButton.cs skriptet exponerar händelser som TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), kan vi enkelt tilldela feedback om ljud. Lägg bara till Audio Source Unity-objekt 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 .

pressable button cube 7 Pressable Button Cube 6

4. Lägga till visuella tillstånd och hantera interaktionshändelser långt

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 interaktionshändelser långt bort. Lägg Interactable.cs till 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 interaktions tillstånden, till exempel Fokus och Nedtryckt. Du kan också styra skalning och offset. Kontrollera Easing (Easing) och set duration (Ange varaktighet) för att göra den visuella övergången smidig.

Välj profiltema

Du ser att objektet svarar både på interaktioner långt (hand ray eller blickmarkör) och nära(hand).

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Exempel på anpassade knappar

I HandInteractionExample-scenen kandu se exemplen på knappen och den runda knappen som båda använder PressableButton .

Pressable Custom1 Pressable Custom2

Varje nyckel har ett PressableButton och ett NearInteractionTouchable tilldelat skript. Det är viktigt att kontrollera att riktningen för Lokal vidarebefordran NearInteractionTouchable är korrekt. Den representeras av en vit pil i redigeraren. Kontrollera att pilen pekar bort från knappens framsida:

Pressable Custom3

Se även