Tlačítka – MRTK2

Hlavní tlačítko

Tlačítko umožňuje uživateli aktivovat okamžitou akci. Je to jedna z nejzákladnějších součástí hybridní reality. MRTK poskytuje různé typy prefab tlačítek.

Button prefabs in MRTK

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

Tlačítka založená na obrázku/grafiku uživatelského rozhraní Unity

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

Tlačítka založená na uchytávači

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

tlačítko HoloLens 2 ve stylu shellu s zadní deskou, které podporuje různé vizuální zpětné vazby, jako je osvětlení ohraničení, bezkontaktní světlo a komprimovaná přední deska

tlačítko HoloLens 2 ve stylu shellu bez backplate

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

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Široké tlačítko ve stylu shellu HoloLens 2 32x96mm

Vodorovný panel tlačítek HoloLens 2 se sdílenou zadní deskou

Svislý HoloLens 2 panel tlačítek se sdílenou zadní deskou

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

zaškrtávací políčko HoloLens 2 shell-style 32x32mm

HoloLens 2 skořepinový spínač 32x32mm

HoloLens 2 shell-style radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

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

HoloLens 2 skořepinový spínač 32x96mm

HoloLens 2 shell-style radio 32x96mm

Paprskovýkruhový

Zaškrtávací políčko

SwitchSwitchToggleSwitch

Kruhové tlačítko

Zaškrtávací políčko

Přepnout přepínač

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Tlačítko Základní tlačítko

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

Tlačítko kolečka obrazce

Tlačítko Basic

Objekt Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) je založený na koncepci Interactable , 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é metody zadávání, včetně kloubového zadávání rukou pro blízké interakce a také pohledem a klepnutím vzduchem pro vzdálené 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 ve stylu prostředí HoloLens 2, které podporuje přesný pohyb tlačítka pro vstup přímého sledování rukou. Kombinuje Interactable skript se skriptem PressableButton .

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

  • Ikona a text jsou obtížně čitelné ve fyzickém prostředí
  • Je těžké pochopit, kdy se událost aktivuje.
  • Hologramy zobrazené průhlednou rovinou můžou být nestabilní se stabilizací hloubky LSR HoloLens 2

S povlažovaným tlačítkem

Jak používat tlačítka stisknutelná

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

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

Tlačítka založená na uchytávači

Jednoduše přetáhněte PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/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 audiovizuální zpětnou vazbu pro různé typy vstupů, včetně artikulovaného zadávání rukou a pohledu.

Události vystavené v samotném prefabu a také interagovatelná komponenta se dají použít k aktivaci dalších akcí. Pomocí stisknutelných tlačítek ve scéně HandInteractionExample aktivují změnu barvy datové krychle událostí Interactable OnClick . Tato událost se aktivuje pro různé typy metod zadávání, jako je pohled, klepnutí vzduchem, ruční paprsek a také fyzické stisknutí tlačítka pomocí stisknutelného skriptu tlačítka.

Jak používat interagovatelné

Můžete nakonfigurovat, kdy se stisknutím tlačítka aktivuje událost OnClick prostřednictvím PhysicalPressEventRouter tlačítka na tlačítku. Můžete například nastavit, aby se při kliknutí na tlačítko aktivovalo, když je tlačítko poprvé stisknuto, a ne aby se stisklo a uvolnilo, a to nastavením Možnosti interakce při kliknutí na při stisknutí události.

Jak používat události

Pokud chcete využít konkrétní informace o stavu zadávání rukou, můžete použít události tlačítek, které lze stisknout – Touch Begin, Touch End, Button Pressed, Button Uvolněno. Tyto události se však neaktivují v reakci na vzduchové klepnutí, ruční paprsky nebo vstupy očí. Pro podporu blízkých i vzdálených interakcí se doporučuje použít událost OnClick v interakci.

Jak používat tlačítka stisknutelná

Stavy interakce

Ve stavu nečinnosti není přední deska tlačítka viditelná. Když se prst přiblíží nebo kurzor ze vstupu pohledu cílí na povrch, bude vidět zářící okraj přední desky. Na povrchu přední desky je další zvýraznění pozice prstu. Při stisknutí prstem se přední deska pohybuje prstem. Když se prst 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 ve stylu prostředí existuje mnoho vizuálních upozornění a cen, které zvyšují důvěru uživatele při interakci.

Bezkontaktní světlo Zvýraznění fokusu Komprimační klec Puls na triggeru
Bezkontaktní světlo Zvýraznění fokusu Komprimační klec Puls na triggeru

Efekt jemného impulsu se aktivuje stisknutím tlačítka, které hledá bezkontaktní světlo(y), které se nacházejí na aktuálně interagující ukazateli. Pokud jsou nalezena světla blízkosti, ProximityLight.Pulse je volána metoda, která automaticky animuje parametry shaderu pro zobrazení impulsu.

Vlastnosti inspektoru

Struktura tlačítek

UchytávačeBox Collider krabic pro přední desku tlačítka.

Tlačítko stisknutelné Logika pohybu tlačítka pomocí interakce stisknutou rukou

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

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

Zdroj zvuku Zdroj zvuku Unity pro klipy zvukové zpětné vazby.

NearInteractionTouchable.cs : Vyžaduje se, aby se jakýkoli objekt dotýkal pomocí artikulovaného vstupu rukou.

Rozložení prefab

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

Rozložení tlačítek

Jak změnit ikonu a text

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

Pomocná rutina konfigurace tlačítka

Vytváření a úpravy sad ikon

Sada ikon je sdílená sada prostředků ikon, které komponenta ButtonConfigHelper používá. Podporují se tři styly ikon.

  • Ikony čtyřúhelníku se na čtyřúhelníku vykreslují pomocí MeshRenderer. Toto je výchozí styl ikony.
  • Ikony sprite se vykreslují pomocí SpriteRenderer. To je užitečné, pokud dáváte přednost importu ikon jako listu sprite nebo pokud chcete, aby se 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 raději používáte písmo 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 nástroji ButtonConfigHelper a vyberte z rozevíracího seznamu Styl ikon .

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

  1. V okně Project (Projekt ) klikněte pravým tlačítkem na Assets (Prostředky ), aby se otevřela místní nabídka. (Můžete také kliknout pravým tlačítkem na prázdné místo ve složce Assets nebo v jedné z jejích podsložek.)

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

    Snímek obrazovky s položkou nabídky Sada ikon

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 prostředek písma.

V MRTK 2.4 a novějších aplikacích doporučujeme přesunout textury vlastních ikon do sady ikon. Chcete-li upgradovat prostředky na všech tlačítkách 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)

K upgradu tlačítek se vyžaduje import balíčku Microsoft.MixedRealityToolkit.Unity.Tools.

Dialogové okno pro upgrade

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

Oznámení o vlastní ikoně

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

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

Dále otevřete TextMeshPro Font Asset Creator v okně > TextMeshPro > Font Asset Creator. Tady jsou doporučená nastavení pro generování atlasu písem HoloLens. Pokud chcete zahrnout všechny ikony, vložte do pole Pořadí 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

Po vygenerování prostředku písma ho uložte do projektu a přiřaďte ho k poli Písmo znakové ikony sady ikon. Teď se vyplní rozevírací seznam Dostupné ikony . 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 zobrazí se v okně ButtonConfigHelper. Volitelně můžete této ikoně dát značku. To umožňuje nastavit ikonu 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 sadu ikon, vyberte tlačítko, rozbalte rozevírací seznam Ikony v poli ButtonConfigHelper a přiřaďte ho k poli Sada ikon .

Sada ikon tlačítka

Jak změnit velikost tlačítka

HoloLens 2 velikost tlačítka ve stylu shellu je 32 x 32 mm. Pokud chcete přizpůsobit rozměr, změňte velikost těchto objektů v panelu prefab tlačítka:

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

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

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

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

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

Klikněte na Fix Bounds Button Size přizpůsobení 4.

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

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

Tlačítka Řeč

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

Řeč na tlačítku 2

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

Tlačítko Řeč 3

Jak vytvořit tlačítko od nuly

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

Stisknutelná tlačítko datová krychle 0

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

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

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

stisknutelná tlačítko datová krychle 3

Když vyberete datovou krychli, uvidíte na objektu více barevných vrstev. Tím se vizualizují hodnoty vzdálenosti v části Stisknutí nastavení. Pomocí popisovačů můžete nakonfigurovat, kdy se má spustit stisknutí (přesunutí objektu) a kdy se má aktivovat událost.

Stisknutelná butonová datovákrychle 1 stisknutelná tlačítko krychle 2

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

Spuštění stisknutelného tlačítka 1

Poradce při potížích

Pokud vaše tlačítko provádí dvojité stisknutí, ujistěte se, že je aktivní vlastnost Vynutit front Push a že rovina Start Push Distance je umístěna před rovinu dotykového ovládání blízké interakce . Dotyková rovina blízké interakce je označená modrou rovinou umístěnou před počátek bílé šipky v následujícím obrázku:

Komponenta skriptu pro stisknutí tlačítka se zvýrazněnou vlastností Vynutit front push

Animovaný příklad pohybu počáteční push vzdálenosti před blízkou interakci dotykové roviny

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ávání vizuální zpětné vazby. Vytvořte materiál a vyberte shader Mixed Reality Toolkit/Standard. Nebo můžete použít nebo duplikovat některý ze stávajících materiálů v rámci /SDK/StandardAssets/Materials/ , který používá MRTK Standard Shader.

Stisknutelná tlačítko datová krychle 4

Zkontrolujte Hover Light a Proximity Light v části Fluent Options (Možnosti fluentu). To umožňuje vizuální zpětnou vazbu pro interakce blízké ruky (bezkontaktní světlo) i vzdáleného ukazatele (ukazatel myši).

stisknutelná tlačítko krychle 5stisknutelná tlačítko krychle běh 2

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

Vzhledem k tomu, že PressableButton.cs skript zveřejňuje události, jako jsou TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), můžeme snadno přiřadit zvukovou zpětnou vazbu. Jednoduše přidejte unity do objektu datové krychle Audio Source a pak 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/ .

stisknutelná tlačítko krychle 7Stisknutelná tlačítko krychle 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é události vzdálené interakce. Přidejte Interactable.cs objekt datové krychle a přetáhněte ho do pole Cíl v části Profily. Pak vytvořte nový motiv s typem ScaleOffsetColorTheme. V tomto motivu můžete určit barvu objektu pro konkrétní stavy interakce, například Fokus a Stisknutí. Můžete také řídit škálování a posun. Zkontrolujte uvolnění a nastavte dobu trvání, aby byl přechod vizuálu plynulý.

Výběr motivu profilu

Uvidíte, jak objekt reaguje na vzdálené interakce (paprsky rukou nebo kurzoru pohledu) i blízko (ruka).

Stiskněte tlačítko krychle Spustit 3Stisknout tlačítko krychle Spustit 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é používají PressableButton.

Pressable Custom1Pressable Custom2

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

Vlastní stisknutelné 3

Viz také