Tlačítka – MRTK2

Button Main

Tlačítko dává uživateli způsob, jak aktivovat okamžitou akci. Je to jedna z nejzákladnějších komponent v hybridní realitě. MRTK poskytuje různé typy prefabs tlačítek.

Prefabs tlačítka v MRTK

Příklady předfaktorů tlačítek ve MRTK/SDK/Features/UX/Interactable/Prefabs složce

Tlačítka založená na uživatelském rozhraní Unity / Obrázek

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

Tlačítka založená na kolacích

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2 tlačítko stylu prostředí s backplatem, které podporuje různé vizuální zpětné vazby, jako je ohraničení světla, světlo blízkosti a komprimované přední desky

HoloLens tlačítko stylu prostředí 2 bez backplate

HoloLens tlačítko stylu 2 s kruhovým tvarem

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Širokoúhlý HoloLens 2 tlačítko stylu prostředí 32x96mm

Vodorovný HoloLens 2 panel tlačítek se sdíleným backplatem

Svislý HoloLens 2 panel tlačítek se sdíleným backplatem

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 zaškrtávací políčko ve stylu prostředí 32x32mm

HoloLens 2 skořepinový přepínač 32x32mm

HoloLens 2 shell-style radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 zaškrtávací políčko 32x96mm

HoloLens 2 shell-style switch 32x96mm

HoloLens 2 shell-style radio 32x96mm

RadialRadiální

CheckboxCheckbox

ToggleSwitchSwitchSwitch

Paprskové tlačítko

Zaškrtávací políčko

Přepnout přepínač

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseTlačítko

tlačítko stylu prostředí HoloLens 1. generace

Tlačítko zaokrouhlení obrazce

Tlačítko Basic

Sada Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) je založená na konceptu Interakce , který poskytuje snadné ovládací prvky uživatelského rozhraní pro tlačítka nebo jiné typy interaktivních povrchů. Tlačítko směrného plánu podporuje všechny dostupné vstupní metody, včetně artikulovaného ručního vstupu pro blízké interakce, a také pohled + vzduchový klepnutím pro dalekou interakci. K aktivaci tlačítka můžete použít také hlasový příkaz.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) je tlačítko stylu prostředí HoloLens 2, které podporuje přesný pohyb tlačítka pro přímý vstup sledování rukou. Kombinuje Interactable skript se skriptem PressableButton .

Pro HoloLens 2 se doporučuje používat tlačítka s neprůhlhlým backplatem. Transparentní tlačítka se nedoporučují kvůli těmto problémům s použitelností a stabilitou:

  • Ikona a text se obtížně čte s fyzickým prostředím
  • Je těžké pochopit, kdy se událost aktivuje.
  • Hologramy, které se zobrazují prostřednictvím průhledné roviny, mohou být nestabilní s stabilizací hloubky LSR HoloLens 2

Button plated

Jak používat stisknutelná tlačítka

Tlačítka založená na uživatelském rozhraní Unity

Vytvořte plátno ve vaší scéně (GameObject –> UI –> Plátno). Na panelu inspektoru plátna:

  • Klikněte na Převést na plátno MRTK.
  • Klikněte na "Add NearInteractionTouchableUnityUI"
  • Nastavení měřítka X, Y a Z komponenty Rect Transform na 0,001

Potom přetáhněte PressableButtonUnityUI (Prostředky/MRTK/SDK/Funkce/UX/Interakce/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Pressable/PressableButtonUnityUICircular.prefab) nebo PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) na plátno.

Tlačítka založená na kolacích

Jednoduše přetáhněte PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Prefabs/PressableButtonHoloLens2.prefab) nebo PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) do scény. Tyto prefaby tlačítek jsou již nakonfigurovány tak, aby měly zvukovou zpětnou vazbu pro různé typy vstupů, včetně artikulovaného ručního vstupu a pohledu.

Události vystavené v samotném prefabu a také interagovatelné komponentě lze použít k aktivaci dalších akcí. Tlačítka stisknutelná ve scéně HandInteractionExample používají událost OnClick k aktivaci změny barvy datové krychle. Tato událost se aktivuje pro různé typy vstupních metod, jako je pohled, vzduchový, hand-ray a fyzické tlačítko stiskne pomocí stisknutelného tlačítka skript.

How to Use Interactable

Můžete nakonfigurovat, když stisknutelné tlačítko aktivuje událost OnClick přes PhysicalPressEventRouter tlačítko na tlačítku. Když je tlačítko poprvé stisknuto, můžete například nastavit onClick tak, aby se aktivovalo, a ne stisknutím a uvolněním, a to nastavením možnosti Interakce po kliknutí na událost při stisknutí tlačítka.

How to use events

Pokud chcete využít konkrétní informace o stavu zadávání rukou, můžete použít události stisknutelnými tlačítky – Touch Begin, Touch End, Button Pressed, Button Released. Tyto události se však neaktivují v reakci na vstupy vzduchu, paprsku rukou nebo oka. Pokud chcete podporovat téměř i daleko interakce, doporučujeme použít událost OnClick s možností interakce.

How to use Pressable Buttons

Stavy interakce

Ve stavu nečinnosti není přední deska tlačítka viditelná. Když se prst blíží nebo kurzor ze vstupního pohledu cílí na povrch, záře přední desky se zvýrazní ohraničení. Na přední ploše desky je další zvýraznění pozice prstu. Při stisknutí prstu se přední deska přesune prstem. Když se prstem dotkne povrchu přední desky, zobrazí se jemný impulsní efekt, který poskytuje vizuální zpětnou vazbu k dotykovému bodu.

V HoloLens 2 tlačítku stylu prostředí existuje mnoho vizuálních upozornění a cenových možností, které zvyšují důvěru uživatele při interakci.

Proximity light Focus highlight Compressing cage Pulse on trigger
Světlo blízkosti Zvýraznění fokusu Komprimační klece Pulse on trigger

Jemný pulzní efekt se aktivuje stisknutím tlačítka, které hledá funkce ProximityLight, které žijí na aktuálně interagujícím ukazateli. Pokud jsou nalezena nějaká světla blízkosti, ProximityLight.Pulse volá se metoda, která automaticky animuje parametry shaderu k zobrazení impulsu.

Vlastnosti inspektoru

Button Structure

Box ColliderBox Collider přední desku tlačítka.

Tlačítko s možností stisknutí Logika pohybu tlačítka s ručním stisknutím interakce

Směrovač událostí fyzického stisknutí Tento skript odesílá události z ruční interakce pomocí interakce.

Interagovatelné interakce zpracovává různé typy stavů a událostí interakce. HoloLens pohled, gesto a hlasový vstup a vstup a imerzivní vstup ovladače pohybu náhlavní soupravy přímo zpracovává tento skript.

Zdroj zvuku Zdroj zvuku Unity pro klipy pro zpětnou vazbu zvuku.

NearInteractionTouchable.cs Povinný k tomu, aby byl jakýkoli objekt dotykový pomocí artikulovaného ručního vstupu.

Rozložení prefab

Objekt ButtonContent obsahuje přední desku, popisek textu a ikonu. FrontPlate reaguje na blízkost prstu indexu pomocí shaderu Button_Box. Zobrazuje zářecí ohraničení, světlo blízkosti a pulsní efekt na dotykovém ovládání. Textový popisek se vytvoří pomocí Pro TextMesh. Viditelnost SeeItSayItLabel je řízena motivem Interakce.

Button Layout

Jak změnit ikonu a text

Tlačítka MRTK vám ButtonConfigHelper pomůžou změnit ikonu tlačítka, text a popisek. (Upozorňujeme, že některá pole nemusí chybět, pokud nejsou na vybraném tlačítku přítomny prvky.)

Button Config Helper

Vytváření a úpravy sad ikon

Sada ikon je sdílená sada prostředků ikon používaných komponentouButtonConfigHelper. Podporují se tři styly ikon.

  • Čtyřúhelníkové ikony se vykreslují na čtyřúhelníku pomocí MeshRenderer. Toto je výchozí styl ikony.
  • Ikony Sprite se vykreslují pomocí SpriteRenderer. To je užitečné, pokud chcete importovat ikony jako list sprite nebo pokud chcete, aby se vaše prostředky ikon sdílely s komponentami uživatelského rozhraní Unity. Pokud chcete tento styl použít, budete muset nainstalovat balíček Sprite Editor (Windows –> Správce balíčků –> 2D Sprite)
  • Ikony znaků se vykreslují pomocí TextMeshPro komponenty. To je užitečné, pokud dáváte přednost použití písma ikony. Pokud chcete použít písmo ikony HoloLens, budete muset vytvořit TextMeshPro asset písma.

Pokud chcete změnit styl, který tlačítko používá, rozbalte rozevírací seznam Ikony v ButtonConfigHelperu a vyberte z rozevíracího seznamu Styl ikony .

Vytvoření ikony nového tlačítka:

  1. V okně Projectkliknutím pravým tlačítkem myši otevřete místní nabídku. (Můžete také kliknout pravým tlačítkem na libovolné prázdné místo ve složce Assets nebo na některou z jejích podsložek .)

  2. Vyberte Vytvořit > sadu ikon Mixed Reality Toolkit >>.

    Screenshot of the Icon Set menu item.

Pokud chcete přidat ikony čtyřúhelníku a spritu, jednoduše je přetáhněte do příslušných polí. Pokud chcete přidat ikony znaku, musíte nejprve vytvořit a přiřadit asset písma.

V MRTK 2.4 a novější doporučujeme přesunout vlastní textury ikon do IkonySet. Pokud chcete prostředky upgradovat na všechna tlačítka v projektu na nový doporučený formát, použijte ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit –> Nástroje –> Okno migrace –> Výběr obslužné rutiny migrace –> Microsoft.MixedReality.Toolkit. Utilities.ButtonConfigHelperMigrationHandler)

Import balíčku Microsoft.MixedRealityToolkit.Unity.Tools potřebný k upgradu tlačítek.

Upgrade window dialogue

Pokud se ikona během migrace nenachází ve výchozí sadě ikon, vytvoří se vlastní sada ikon v mixedRealityToolkit.Generated/CustomIconSets. Dialogové okno bude indikovat, že k tomu došlo.

Custom icon notification

Vytvoření prostředku písma ikony HoloLens

Nejprve naimportujte písmo ikony do Unity. Na Windows počítačích najdete výchozí písmo HoloLens v Windows/Fonts/holomdl2.ttf. Zkopírujte a vložte tento soubor do složky Assets.

Dále otevřete Tvůrce prostředků písem TextMeshPro prostřednictvím okna > TextMeshPro > Font Asset Creator. Tady jsou doporučená nastavení pro generování HoloLens atlasu písem. Pokud chcete zahrnout všechny ikony, vložte do pole Sekvence znaků následující oblast Unicode:

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

Jakmile se vygeneruje prostředek písma, uložte ho do projektu a přiřaďte ho k poli Písmo znakové sady ikon . Rozevírací seznam Dostupné ikony se teď vyplní. Pokud chcete ikonu zpřístupnit pro použití tlačítkem, klikněte na ni. Přidá se do rozevíracího seznamu Vybrané ikony a teď se zobrazí v ButtonConfigHelper. ikony, kterou můžete volitelně nastavit jako značku. Tím se povolí nastavení ikony za běhu.

Button creation 3

Button creation 2

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

Pokud chcete použít sadu ikon, vyberte tlačítko, rozbalte rozevírací seznam Ikony v ButtonConfigHelper poli Sada ikon a přiřaďte ho k poli Sada ikon .

Button Icon set

Změna velikosti tlačítka

velikost tlačítka ve stylu prostředí HoloLens 2 je 32x32mm. Pokud chcete přizpůsobit dimenzi, změňte velikost těchto objektů v předfabovém tlačítku:

  1. FrontPlate
  2. Čtyřúhelník pod zadní deskou
  3. Box Collider na kořenovém adresáři

Potom klikněte na tlačítko Opravit hranice ve skriptu NearInteractionTouchable, který je v kořenovém adresáři tlačítka.

Aktualizace velikosti frontplate Button Size customization 1

Aktualizace velikosti čtyřúhelníku Button Size customization 2

Aktualizace velikosti sbalovače boxu Button Size customization 3

Klikněte na Opravit hranice. Button Size customization 4

Hlasový příkaz ('see-it, say-it')

Obslužná rutina vstupu řečiInteragovatelný skript v tlačítku stisknutelným tlačítkem již implementuje IMixedRealitySpeechHandler. Tady můžete nastavit klíčové slovo hlasového příkazu.

Buttons Speech

Profil vstupu řeči Kromě toho musíte klíčové slovo hlasového příkazu zaregistrovat v globálním profilu příkazů řeči.

Button speech 2

See-it, Say-it label Prefab stisknutelné tlačítko má zástupný textMesh Pro popisek pod SeeItSayItLabel objektu. Tento popisek můžete použít ke komunikaci klíčového slova hlasového příkazu pro tlačítko uživateli.

Button Speech 3

Jak vytvořit tlačítko úplně od začátku

Příklady těchto tlačítek najdete ve scéně PressableButtonExample .

Pressable button cube 0

1. Vytvoření stisknutelného tlačítka s datovou krychlí (pouze u interakce)

  1. Vytvoření datové krychle Unity (objektová krychle GameObject > 3D > )
  2. Přidání PressableButton.cs skriptu
  3. Přidání NearInteractionTouchable.cs skriptu

Na panelu PressableButtoninspektoru přiřaďte objekt datové krychle vizuálům tlačítek.

pressable button cube 3

Když vyberete datová krychle, uvidíte v objektu více barevných vrstev. Tato funkce vizualizuje hodnoty vzdálenosti v části Stiskněte Nastavení. Pomocí popisovačů můžete nakonfigurovat, kdy spustit stisknutí (přesunout objekt) a kdy aktivovat událost.

Pressable Buton cube 1Pressable button cube 2

Když stisknete tlačítko, přesune se a vygeneruje správné události vystavené ve PressableButton.cs skriptu, jako je TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Pressable button cube run 1

Řešení potíží

Pokud tlačítko spouští dvojité stisknutí, ujistěte se, že je aktivní vlastnost Vynucení front Push a rovina Start Push Vzdálenost je umístěna před rovinu téměř interakce touchable . Rovina téměř interakce touchable je označena modrou rovinou umístěnou před původem bílé šipky v obrázku gif níže:

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. Přidání vizuální zpětné vazby k tlačítku základní datové krychle

MRTK Standard Shader poskytuje různé funkce, které usnadňují přidání vizuální zpětné vazby. Vytvořte materiál a vyberte shader Mixed Reality Toolkit/Standard. Nebo můžete použít nebo duplikovat jeden z existujících materiálů, /SDK/StandardAssets/Materials/ které používají MRTK Standard Shader.

Pressable button cube 4

Zaškrtněte Hover Light a Proximity Light v části možnosti Fluent. To umožňuje vizuální zpětnou vazbu pro interakce téměř ruky (bezkontaktní světlo) i vzdáleného ukazatele (najetí světla).

pressable button cube 5pressable button cube run 2

3. Přidání zpětné vazby zvuku na tlačítko základní datové krychle

Vzhledem k tomu, že PressableButton.cs skript zveřejňuje události, jako je TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), můžeme snadno přiřadit zvukovou zpětnou vazbu. Jednoduše přidejte Unity Audio Source do objektu datové krychle a potom přiřaďte zvukové klipy výběrem AudioSource.PlayOneShot(). Ve složce můžete použít MRTK_Select_Main a MRTK_Select_Secondary zvukové klipy /SDK/StandardAssets/Audio/ .

pressable button cube 7Pressable Button Cube 6

4. Přidání vizuálních stavů a zpracování událostí vzdálené interakce

Interagovatelný je skript, který usnadňuje vytvoření vizuálního stavu pro různé typy vstupních interakcí. Zpracovává také dalekou interakci. Přidejte Interactable.cs a přetáhněte objekt datové krychle do cílového pole v části Profily. Pak vytvořte nový motiv s typem ScaleOffsetColorTheme. Pod tímto motivem můžete určit barvu objektu pro konkrétní stavy interakce, například Fokus a Stisknutí. Můžete také řídit měřítko a posun. Zkontrolujte a nastavte dobu trvání a proveďte hladký přechod vizuálu.

Select profile theme

Uvidíte, že objekt reaguje na daleko (paprsek ruky nebo kurzor pohledu) a téměř (rukou) interakce.

Pressable Button Cube Run 3Pressable Button Cube Run 4

Příklady vlastních tlačítek

Ve scéně HandInteractionExample si prohlédněte příklady klavíru a kulatého tlačítka, které oba používají PressableButton.

Pressable Custom1Pressable Custom2

Každý klavírní klíč má přiřazený PressableButtonNearInteractionTouchable a skript. Je důležité ověřit, že směr NearInteractionTouchablemístního předávání je správný. Je reprezentována bílou šipkou v editoru. Ujistěte se, že šipka směřuje od předního obličeje tlačítka:

Pressable Custom3

Viz také