Knappar

Button Main

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

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

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

Collider-baserade knappar

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2-knappen i gränssnittsstil med bakplåt som stöder olika visuella återkopplingar, till exempel kantljus, närhetsljus och komprimerad frontplåt

HoloLens 2:s gränssnittsknapp utan bakplåt

HoloLens 2-knapp i skalformat med cirkulär form

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Bred HoloLens 2:s gränssnittsknapp 32x96mm

Vågrätt HoloLens 2-knappfält med delad bakplåt

Lodrätt HoloLens knappfält med delad bakplåt

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

kryssrutan 32x32mm i HoloLens 2-gränssnittsformat

HoloLens 2-gränssnittsväxel 32x32mm

HoloLens 2-s shell-stil radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

kryssrutan 32x96mm i HoloLens 2-gränssnittsformat

HoloLens 2:s gränssnittsväxel 32x96mm

HoloLens 2-s shell-stil radio 32x96mm

RadialRadiella

CheckboxKryssrutan

ToggleSwitchVäxlaKopplare

Radiell knapp

Checkbox

Växla växel

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseKnappen

HoloLens 1:a generationens gränssnittsformatknapp

Snabbknapp för rund form

Knappen Grundläggande

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) baseras på konceptet Interaktionsbart 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 handinmatningar 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:s gränssnittsknapp som stöder den exakta förflyttningen av knappen 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 täckande bakplåt. 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: s djup LSR-stabilisering

Button plated

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 rekttransformeringskomponentens 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 audio-visual feedback för de olika typerna av indata, inklusive artikulerad handinmatning och blick.

De händelser som exponeras i själva prefab samt den interagerande komponenten kan användas för att utlösa ytterligare åtgärder. De pressbara knapparna i HandInteractionExample-scenen använder Interaktionsbars OnClick-händelse 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, handstråle samt fysiska knapptryckningar genom det tryckbara knappskriptet.

How to Use Interactable

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

How to use events

Om du vill använda specifik information om tydligt handinmatningstillstånd kan du använda händelser med knappar som kan tryckas på – Touch Begin, Touch End, Knapptryckt, Knapp frisläppt. Dessa händelser kommer dock inte att utlösas som svar på lufttryck, handstråle eller ögoninmatningar. Om du vill ha stöd för både när och fjärran interaktioner rekommenderar vi att du använder OnClick-händelsen för Interactable.

How to use Pressable Buttons

Interaktionstillstånd

I inaktivt tillstånd visas inte knappens främre plåt. När ett finger närmar sig eller en markör från blickens indata riktar sig mot ytan blir den främre plattans glödande kantlinje synlig. Det finns ytterligare markering av fingertoppspositionen på den främre plåtytan. 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 subtil pulseffekt för att ge visuell feedback från beröringspunkten.

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

Proximity light Focus highlight Compressing cage Pulse on trigger
Närhetsljus Fokusmarkering Komprimerar bur Puls vid utlösare

Den subtila pulseffekten utlöses av den tryckbara knappen, som söker efter ProximityLight(er) som finns på den för tillfället 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

Button Structure

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.

InteractableInteractable 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.

Button Layout

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.)

Button Config Helper

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 ikonteckensnitt 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 Project 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>.

    Screenshot of the Icon Set menu item.

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.

Upgrade window dialogue

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.

Custom icon notification

Skapa en teckensnittstillgång för HoloLens-ikon

Importera först ikonteckensnittet till Unity. På Windows datorer finns 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

Button creation 1

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.

Button creation 3

Button creation 2

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 .

Button Icon set

Ändra storlek på en knapp

HoloLens 2-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å FrontPlate Button Size customization 1

Uppdatera storleken på quaden Button Size customization 2

Uppdatera storleken på Box Collider Button Size customization 3

Klicka på Korrigera gränser Button Size customization 4

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

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

Buttons Speech

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

Button speech 2

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 kommunicera röstkommandonyckelordet för knappen till användaren.

Button Speech 3

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

Du hittar exemplen 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-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.

pressable button cube 3

När du väljer kuben visas flera färgade lager på objektet. Detta visualiserar avståndsvärdena under Tryck Instä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.

Pressable Buton cube 1Pressable button cube 2

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().

Pressable button cube run 1

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:

Pressable button script component with Enforce Front Push property highlighted

Animated example of moving the start push distance in front of the near interaction touchable plane

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.

Pressable button cube 4

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.

pressable button cube 5pressable button cube run 2

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.

pressable button cube 7Pressable Button Cube 6

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.

Select profile theme

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

Pressable Button Cube Run 3Pressable Button Cube Run 4

Exempel på anpassad knapp

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

Pressable Custom1Pressable Custom2

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:

Pressable Custom3

Se även