Tlačítka

Hlavní tlačítko

Tlačítko umožňuje uživateli aktivovat okamžitou akci. Je to jedna z nejzásanějších komponent v hybridní realitě. MRTK poskytuje různé typy předfády tlačítek.

Předběžné přednastavení tlačítek v MRTK

Příklady předfád tlačítka ve MRTK/SDK/Features/UX/Interactable/Prefabs složce

Tlačítka založená na obrázku nebo grafickém rozhraní Unity

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

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

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens 2 je tlačítko ve stylu prostředí s zadním plotnou, které podporuje různé vizuální zpětná vazba, jako je například světlo ohraničení, bezkontaktní světlo a komprimovaná přední deska.

HoloLens 2 ve stylu prostředí bez backplate

HoloLens 2 ve stylu prostředí s kruhovým tvarem

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Tlačítko HoloLens ve stylu prostředí Wide HoloLens 2 32 × 96mm

Vodorovný HoloLens se sdíleným zadním panelem 2

Svislý HoloLens se sdíleným zadním panelem 2

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 ve stylu prostředí 32x32mm

HoloLens 2 přepínače ve stylu prostředí 32x32mm

HoloLens přepínač 32x32mm ve stylu prostředí 2

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 ve stylu prostředí 32x96mm

HoloLens 2 ve stylu prostředí 32x96mm

HoloLens přepínač 32x96mm ve stylu prostředí 2

Radiálníradiály

Zaškrtávacípolíčko

PřepnoutPřepínačToggleSwitch

Tlačítko Paprskové

Zaškrtávací políčko

Přepínací tlačítko

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Základní tlačítkotlačítka

HoloLens stylu prostředí 1. generace

Tlačítko nabízených oznámení s kruhovým tvarem

Tlačítko Základní

ButtonSoubor (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) je založený na konceptu Button který poskytuje jednoduché 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é metody zadávání, včetně zkráceného ručního vstupu pro blízké interakce a také pohledu a klepnutí ve vzduchu pro dalekosáhlé interakce. 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ý přesun tlačítka pro vstup přímého sledování rukou. Kombinuje skript Interactable se PressableButton skriptem.

U HoloLens 2 se doporučuje používat tlačítka s neprůhledným zadním rozhraním. Transparentní tlačítka se nedoporučuje kvůli těmto problémům s použitelností a stabilitou:

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

Tlačítko je poslané

Jak používat stlačitelná tlačítka

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

Vytvoření plátna ve scéně (GameObject – > uživatelské rozhraní – > plátno) Na panelu inspektoru plátna:

  • Klikněte na Convert to MRTK Canvas (Převést na plátno MRTK).
  • Klikněte na Přidat NearInteractionTouchableUnityUI.
  • Nastavte měřítko X, Y a Z komponenty Rect Transform na 0,001.

Pak přetáhněte PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Press.ableButtonUnityUICircular.prefab) nebo PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) na plátně.

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

Jednoduše PressableButtonHoloLens2 přetáhněte (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) nebo PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) do scény. Tyto předfabs tlačítka jsou už nakonfigurované tak, aby zpětnou vazbu k různým typům vstupů, včetně articulated hand input a pohledu, zpětnou vazbu k různým typům vstupů.

Události vystavené v samotném předfabu i komponentě Interactable je možné použít k aktivaci dalších akcí. Stisknutí tlačítek ve scéně HandInteractionExample aktivují změnu barvy datové krychle pomocí události OnClick s objektem Interactable. Tato událost se aktivuje pro různé typy vstupních metod, jako je pohled, klepnutí ve vzduchu, ruční paprsky a stisknutí fyzického tlačítka skriptem spouštěným tlačítkem.

Jak používat interagovatelné

Můžete nakonfigurovat, kdy stlačitelné tlačítko vyžádá událost OnClick prostřednictvím tlačítka . Můžete například nastavit, aby se OnClick při prvním stisknutí tlačítka místo stisknutí a uvolnění spouštěl tak, že nastavíte Interactable On Click to Event On Press.

Jak používat události

Pokud chcete využít konkrétní informace o articulated hand input state, můžete použít události spouštěných tlačítek – Touch Begin,Touch End,Button Pressed,Button Released. Tyto události se ale nehodí v reakci na vstupy ve vzduchu, ručním paprskem nebo očím. Pokud chcete podporovat interakce blízko i daleko, doporučujeme použít událost OnClick aplikace Interactable.

Jak používat stlačitelná tlačítka

Stavy interakce

Ve stavu nečinnosti není přední strana tlačítka viditelná. Když se prst přiblíží nebo kurzor ze vstupu pohledu cílí na povrch, zviditelní se zřetězující ohraničení přední desky. K dispozici je další zvýraznění pozice prstu na povrchu přední desky. Při náhozech prstem se přední deska posouvá prstem. Když se otisk prstu dotýká povrchu přední desky, ukazuje drobný impulzní efekt, který vizuální zpětnou vazbu o dotykovém bodu poskytne.

V HoloLens 2 styl prostředí existuje mnoho vizuálních podnětů a cenových možností, které zvyšují důvěru uživatele v interakci.

Bezkontaktní světlo Zvýraznění fokusu Komprimování Trigger Pulse on
Bezkontaktní světlo Zvýraznění fokusu Komprimování Trigger Pulse on

Drobný efekt impulzu aktivuje stlačitelné tlačítko, které hledá ProximityLight(s) aktivní na aktuálně komunikující ukazateli. Pokud se našly nějaké bezkontaktní světla, volá se metoda , která automaticky animacemi parametrů ProximityLight.Pulse shaderu zobrazí pulse.

Vlastnosti inspektoru

Button – struktura

Box Coll urychlovač pro přední desku tlačítka.

Stlačitelné tlačítko Logika pro pohyb tlačítka pomocí interakce stisknutí rukou.

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

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

Zdroj zvuku Zvukový zdroj Unity pro zvukové klipy pro zpětnou vazbu.

NearInteractionTouchable.cs Vyžaduje se k ovládání jakéhokoli objektu pomocí articulovaného vstupu rukou.

Rozložení předfab

Objekt ButtonContent obsahuje přední desku, textový popisek a ikonu. FrontPlate reaguje na blízkost konečky prstů pomocí Button_Box shaderu. Ukazuje zářící hranice, bezkontaktní světlo a impulzní efekt na dotek. Textový popisek je tvořen textem TextMesh Pro. Viditelnost popisku SeeItLabelřídí motiv Interactable.

Rozložení tlačítka

Jak změnit ikonu a text

Tlačítka MRTK používají komponentu, která vám pomůže se změnou ikony, textu a popisku ButtonConfigHelper tlačítka. (Všimněte si, že některá pole nemusí chybět, pokud na vybraném tlačítku nejsou prvky.)

Pomocník pro konfiguraci tlačítek

Vytváření a úpravy sad ikon

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

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

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

Novou sadu ikon tlačítka můžete vytvořit pomocí nabídky assetu: Create Mixed Reality Toolkit Icon Set (Vytvořit sadu Mixed Reality Toolkit > ikon). Pokud chcete přidat ikony čtyřúhelníku a sprite, jednoduše je přetáhněte do příslušných polí. Pokud chcete přidat ikony znaků, musíte nejprve vytvořit a přiřadit asset písma.

V MRTK 2.4 a dalších doporučujeme přesunout textury vlastních ikon do sady ikon. Pokud chcete upgradovat prostředky u všech tlačítek 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 vyžadovaného k upgradu tlačítek

Dialogové okno Upgradovat

Pokud se ve výchozí ikoně nastavené během migrace nenachová ikona, vytvoří se v MixedRealityToolkit.Generated/CustomIconSets vlastní sada ikon. V dialogovém okně se zobrazí informace o tom, že k tomu došlo.

Oznámení o vlastní ikoně

Vytvoření assetu HoloLens ikony písma

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

Dále otevřete Tvůrce assetu písem TextMeshPro prostřednictvím textu oknaMeshPro > Font Asset Creator. Tady jsou doporučená nastavení pro generování písma atlasu HoloLens písma. Pokud chcete zahrnout všechny ikony, vložte do pole Sekvence znaků následující rozsah 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

Vytvoření tlačítka 1

Jakmile je asset písma vygenerován, uložte ho do projektu a přiřaďte ho k poli Písmo ikony ikony sady ikon. Teď se naplní rozevírací seznam Dostupné ikony. Pokud chcete, aby byla ikona dostupná pro použití tlačítkem, klikněte na něj. Přidá se do rozevíracího seznamu Vybrané ikony a zobrazí se v části Volitelně můžete ikonu označit. To umožňuje nastavení ikony za běhu.

Vytvoření tlačítka 3

Vytvoření tlačítka 2

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

Pokud chcete použít tlačítko Pro výběr sady ikon, rozbalte rozevírací seznam Ikony v poli a přiřaďte ho k ButtonConfigHelperButtonConfigHelper ikon.

Sada ikon tlačítka

Jak změnit velikost tlačítka

HoloLens velikost tlačítka ve stylu prostředí 2 je 32 × 32mm. Pokud chcete přizpůsobit dimenzi, změňte velikost těchto objektů v předběžném nastavení tlačítka:

  1. FrontPlate
  2. Čtyřúhelník v části BackPlate
  3. Box Collider v kořenovém adresáři

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

Aktualizace velikosti přizpůsobení velikosti tlačítka FrontPlate 1

Aktualizace velikosti přizpůsobení čtyřúhelníku velikosti tlačítka 2

Aktualizace velikosti přizpůsobení velikosti tlačítka Kolace boxu 3

Kliknutí na Přizpůsobení velikosti tlačítka Fix Bounds (Opravit meze) 4

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

Obslužná rutina vstupu řeči Interaktivní skript v pressable button už implementuje . Klíčové slovo hlasového příkazu můžete nastavit tady.

Speech s tlačítky

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

Řeč tlačítka 2

See-it, Say-it label Předfab stlačitelného tlačítka má zástupný symbol TextMesh Pro pod objektem SeeItLabelItLabel. Tento popisek můžete použít ke sdělování klíčového slova hlasového příkazu pro tlačítko uživateli.

Button Speech 3

Vytvoření tlačítka od začátku

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

Datová krychle s možností stisknutí tlačítka 0

1. Vytvoření stlačitelného tlačítka s datovou krychlí (pouze bez interakce)

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

Na panelu PressableButton inspektoru přiřaďte objekt datové krychle vizuálům PressableButton

datová krychle s možností stisknutí tlačítka 3

Když datovou krychli vyberete, uvidíte v objektu několik barevných vrstev. Tím se vizualizovat hodnoty vzdálenosti v části Press Nastavení. Pomocí popisovačů můžete nakonfigurovat, kdy se má spustit stisknutí (přesunutí objektu) a kdy aktivovat událost.

Datová krychle Buton smožností stisknutí 1 Datová krychle s možnostístisknutí 2

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

Datová krychle spouštěná stisknutím tlačítka 1

Řešení potíží

Pokud vaše tlačítko provádí dvojité stisknutí, ujistěte se, že je vlastnost Vynutit nabízení front-in aktivní a že se rovina počáteční nabízené vzdálenosti nachází před rovinou Touchable s blízkou interakcí. Rovina Near Interaction Touchable je označená modrou rovinou umístěnou před počátkem bílé šipky na obrázku GIF níže:

Komponenta skriptu s tlačítkem pro stisknutí se zvýrazněnou vlastností Vynutit nabízení front-to-push

Animovaný příklad posunu počáteční nabízené vzdálenosti před blízkou interakci dotykovou rovinou

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ňuje 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 ze stávajících materiálů v souboru , /SDK/StandardAssets/Materials/ který používá MRTK Standard Shader.

Datová krychle s možností stisknutí tlačítka 4

Zaškrtněte Hover Light a v části Fluent Proximity LightHover Light. To umožňuje vizuální zpětnou vazbu pro interakce bezkontaktní komunikace (Bezkontaktní světlo) i pro interakci ukazatele najetí myší na světlo.

pressable button cube 5pressable button cube run 2

3. Přidání zvukové zpětné vazby k tlačítku základní datové krychle

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

datová krychle s potlačitelným tlačítkem 7Datová krychle stlačitelného tlačítka 6

4. Přidávání stavů vizuálů a zpracování událostí daleko interakcí

Interactable je skript, který usnadňuje vytvoření vizuálního stavu pro různé typy interakcí vstupu. Zpracovává také události daleko interakcí. V části Profily přidejte a přetáhněte objekt datové krychle Interactable.cs do Interactable.csCíl. Pak vytvořte nový Motiv s typem ScaleOffsetColorTheme. Pod tímto motivem můžete zadat barvu objektu pro konkrétní stavy interakce, například Focus (Fokus) a Pressed (Stisknuto). Můžete také řídit škálování a posun. Zkontrolujte usnadnění a nastavte dobu trvání, aby byl přechod vizuálu plynulý.

Výběr motivu profilu

Uvidíte, že objekt reaguje na interakce daleko (kurzor s ručním paprskem nebo pohledem) i interakci blízko (rukou).

Stisknutí tlačítka Datová krychle Run 3Pressable Button Cube Run 4

Příklady vlastních tlačítek

Ve scéně HandInteractionExamplesi prohlédněte příklady tlačítek round a round, které používají .

Pressable Custom1Pressable Custom2

Ke každému klíči klíčů PressableButton je přiřazený skript a NearInteractionTouchable . Je důležité ověřit, že je správný směr místní přesměrování. V editoru je reprezentována bílou šipkou. Ujistěte se, že šipka ukazuje od přední tváře tlačítka:

Custom3 s možností stisknutí

Viz také