Przyciski

Przycisk Main

Przycisk umożliwia użytkownikowi wyzwalanie natychmiastowej akcji. Jest to jeden z najbardziej fundamentowych składników w rzeczywistości mieszanej. MrTK udostępnia różne typy prefabryktów przycisków.

Prefabrykaty przycisków w PZT

Przykłady prefabrykatów przycisku w MRTK/SDK/Features/UX/Interactable/Prefabs folderze

Przyciski obrazów/grafik interfejsu użytkownika aparatu Unity

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

Przyciski oparte na koliderze

PressableButtonButoLens2 PressableButtonButoLens2

PressableButtonButoLens2Unplated PressableButtonButoLens2Unplated

PressableButtonButoLens2Circular PressableButtonButoLens2Circular

HoloLens w stylu powłoki 2 z płytą montażową, która obsługuje różne informacje wizualne, takie jak światło obramowania, światło zbliżeniowe i skompresowana płytą przednia

HoloLens w stylu powłoki systemu HoloLens 2 bez backplate

HoloLens w stylu powłoki 2 z okrągłym kształtem

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonKetoLens2Bar3H PressableButtonKetoLens2Bar3H

PressableButtonKetoLens2Bar3V PressableButtonKetoLens2Bar3V

Szeroki HoloLens w stylu powłoki 2 32x96mm

Poziomy HoloLens 2 z udostępnioną platformą zapasową

Pionowy HoloLens 2 z udostępnioną płytą zapasową

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 w stylu powłoki 32x32mm

HoloLens 2 przełącznika w stylu powłoki 32x32mm

HoloLens radiowy w stylu powłoki 2 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 w stylu powłoki 32x96mm

HoloLens 2 przełącznika w stylu powłoki 32x96mm

HoloLens 2 w stylu powłoki 32x96mm

Promieniowe promieniowe

Pole wyboru Pole wyboru

Przełącznik PrzełącznikPrzełącz Przełącznik

Przycisk promieniowy

Pole wyboru

Przełącznik

ButtonOwoLens1 ButtonOwoLens1

PressableRoundButton PressableRoundButton

Przycisk Podstawowy przycisk

HoloLens przycisk stylu powłoki pierwszej generacji

Przycisk wypychania o zaokrąglanych kształtach

Przycisk Podstawowy

Element Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) jest oparty na koncepcji Interakcji, aby zapewnić łatwe kontrolki interfejsu użytkownika dla przycisków lub innych typów interaktywnych powierzchni. Przycisk linii bazowej obsługuje wszystkie dostępne metody wprowadzania danych, w tym dane wejściowe ręki w przypadku bliskich interakcji, a także spojrzenie i naciśnięcie w powietrzu dla najdalej możliwych interakcji. Możesz również użyć polecenia głosowego, aby wyzwolić przycisk.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonButtonTrzyoLens2.prefab) to przycisk stylu powłoki systemu HoloLens 2, który obsługuje dokładne poruszanie się przycisku dla danych wejściowych bezpośredniego śledzenia rąk. Łączy skrypt Interactable ze PressableButton skryptem.

W HoloLens 2 zaleca się używanie przycisków z nieprzezroczystą płytą zapasową. Przyciski przezroczyste nie są zalecane ze względu na następujące problemy z użytecznością i stabilnością:

  • Ikona i tekst są trudne do odczytania w środowisku fizycznym
  • Trudno zrozumieć, kiedy zdarzenie jest wyzwalane
  • Hologramy, które są wyświetlane za pośrednictwem płaszczyzny przezroczystej, mogą być niestabilne HoloLens z ustabilizowania LSR głębokości 2

Przyłożył przycisk

Jak używać przycisków naciskanych

Przyciski oparte na interfejsie użytkownika aparatu Unity

Utwórz kanwę w scenie (GameObject -> UI -> Canvas). Na panelu Inspector (Inspektor) dla kanwy:

  • Kliknij pozycję "Konwertuj na kanwę MRTK"
  • Kliknij pozycję "Add NearInteractionTouchableUnityUI" (Dodaj nearInteractionTouchableUnityUI)
  • Ustaw skalę X, Y i Z składnika przekształcania rect na wartość 0,001

Następnie przeciągnij PressableButtonUnityUI pozycję (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) lub PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonKetoLens2UnityUI.prefab) na kanwie.

Przyciski oparte na koliderze

Po prostu przeciągnij PressableButtonHoloLens2 element (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonButtonBicoLens2.prefab) lub PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonButtonButoLens2Unplated.prefab) do sceny. Te prefabrykaty przycisków są już skonfigurowane tak, aby zawierały informacje zwrotne audio-wizualne dotyczące różnych typów danych wejściowych, w tym wyartykułowanych danych wejściowych i spojrzeń ręki.

Zdarzenia widoczne w samej prefabryce oraz składnik Wejdą w interakcję mogą służyć do wyzwalania dodatkowych akcji. Przyciski do naciskania w scenie HandInteractionExample używają zdarzenia OnClick interakcji, aby wyzwolić zmianę koloru sześcianu. To zdarzenie jest wyzwalane dla różnych typów metod wejściowych, takich jak spojrzenie, naciśnięcie w powietrzu, zdjęcie ręczne, a także naciśnięcie przycisku fizycznego przez skrypt przycisku dostępnego do naciśnięcia.

How to Use Interactable

Zdarzenie OnClick można skonfigurować, gdy przycisk z naciśnięciem jest wyzwalany za PhysicalPressEventRouter pośrednictwem przycisku . Na przykład można ustawić opcję OnClick tak, aby była wyzwalana przy pierwszym naciśnięciu przycisku, zamiast naciskać i zwalniać, ustawiając opcję Wejściowa na kliknięcie na Zdarzenie po naciśnięciu klawisza.

How to use events

Aby korzystać z określonych informacji o stanie wejściowym ręki, możesz użyć zdarzeń z przyciskami do naciskania — Touch Begin, Touch End, Button Pressed, Button Released. Te zdarzenia nie będą jednak wyzjemniane w odpowiedzi na naciśnięcia w powietrzu, promienia ręcznego ani wejściówek okiem. Aby obsługiwać interakcje niemal i daleko, zaleca się użycie zdarzenia OnClick interakcji.

How to use Pressable Buttons

Stany interakcji

W stanie bezczynności przednia płytą przycisku nie jest widoczna. Gdy palec zbliża się do powierzchni lub kursor z wejścia spojrzenia jest skierowany na powierzchnię, widoczne staje się chybienie obramowania płyty frontowej. Na powierzchni płyty frontowej znajduje się dodatkowe wyróżnienie położenia palca. Po wypchnięciu palcem przednią płytą przesuwa się przy użyciu palca. Gdy palca dotknie powierzchni przednią płytą, pokazuje subtelny efekt pulsu, aby przekazać wizualną opinię na temat punktu dotykowego.

W HoloLens w stylu powłoki 2 istnieje wiele wizualnych wskaźników i wskaźników, które zwiększają zaufanie użytkownika do interakcji.

Światło zbliżeniowe Wyróżnij fokus Kompresowanie plików Pulse on trigger (Puls przy wyzwalaczu)
Światło zbliżeniowe Wyróżnij fokus Kompresowanie plików Pulse on trigger (Puls przy wyzwalaczu)

Subtelny efekt pulsu jest wyzwalany przez przycisk z naciśnięciem, który wyszukuje wskaźniki ProximityLight, które znajdują się na aktualnie współdziałających wskaźnikach. Jeśli zostaną znalezione jakiekolwiek światła zbliżeniowe, wywoływana jest metoda , która automatycznie animuje parametry cieniowania ProximityLight.Pulse w celu wyświetlenia pulsu.

Właściwości inspektora

Struktura przycisków

Box Collider Box Collider na przednią płytę przycisku.

Przycisk z naciśnięciem Logika ruchu przycisku z interakcją za pomocą naciśnięcia ręki.

Router zdarzeń naciśnięcia fizycznego Ten skrypt wysyła zdarzenia z interakcji za pomocą naciśnięcia ręcznegodo interakcji .

Wchodzą w interakcje Interakcje obsługują różne typy stanów interakcji i zdarzeń. HoloLens tym skrypcie bezpośrednio obsługuje spojrzenie, gest i wejście głosowe oraz wejście kontrolera ruchu immersyjnego zestawu nagłownego.

Źródło dźwięku Źródło audio aparatu Unity dla klipów audio opinii.

NearInteractionTouchable.cs Wymagane, aby każdy obiekt był dotykalny za pomocą danych wejściowych za pomocą ręki.

Układ przedfabrykcyjny

Obiekt ButtonContent zawiera fronton, etykietę tekstową i ikonę. FrontPlate reaguje na bliskość ręki indeksu przy użyciu Button_Box cieniowania. Pokazuje on cycytujące obramowania, światło zbliżeniowe i puls wpływający na dotyk. Etykieta tekstowa jest sklejka TextMesh Pro. Widoczność etykiety SeeItSayItLabel jest kontrolowana przez motyw użytkownika Interactable.

Układ przycisku

Jak zmienić ikonę i tekst

Przyciski zestawu narzędzi MRTK używają składnika, aby pomóc w ButtonConfigHelper zmianie ikony, tekstu i etykiety przycisku. (Pamiętaj, że niektóre pola mogą być nieobecne, jeśli elementy nie są obecne na wybranym przycisku).

Pomocnik konfiguracji przycisku

Tworzenie i modyfikowanie zestawów ikon

Zestaw ikon to udostępniony zestaw zasobów ikon używanych przez ButtonConfigHelper składnik. Obsługiwane są trzy style ikon.

  • Ikony czworokąt są renderowane na czworokącie przy użyciu MeshRenderer . Jest to domyślny styl ikon.
  • Ikony sprite są renderowane przy SpriteRenderer użyciu . Jest to przydatne, jeśli wolisz zaimportować ikony jako arkusz sprite lub jeśli chcesz, aby zasoby ikon współdzielone ze składnikami interfejsu użytkownika aparatu Unity. Aby użyć tego stylu, należy zainstalować pakiet edytora sprite (Windows -> Menedżer pakietów -> 2D Sprite)
  • Ikony znaków są renderowane przy użyciu TextMeshPro składnika. Jest to przydatne, jeśli wolisz używać czcionki ikony. Aby użyć HoloLens ikony czcionki, należy utworzyć TextMeshPro zasób czcionki.

Aby zmienić styl używany przez przycisk, rozwiń menu rozwijane Ikony w narzędziu ButtonConfigHelper i wybierz pozycję z listy rozwijanej Styl ikon.

Nowy zestaw ikon przycisku można utworzyć za pomocą menu elementów zawartości: Utwórz > Mixed Reality Toolkit > Ikona zestawu. Aby dodać ikony czworokąta i sprite,wystarczy przeciągnąć je do odpowiednich tablic. Aby dodać ikony znaków, należy najpierw utworzyć i przypisać zasób czcionki.

W zestawach mrTK 2.4 i innych zalecamy, aby niestandardowe tekstury ikon zostały przeniesione do zestawu ikon. Aby uaktualnić zasoby we wszystkich przyciskach w projekcie do nowego zalecanego formatu, użyj klasy ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Utilities -> Migration Window -> Migration Handler Selection -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Importowanie pakietu Microsoft.MixedRealityToolkit.Unity.Tools wymaganego do uaktualnienia przycisków.

Okno dialogowe okna uaktualniania

Jeśli ikona nie zostanie znaleziona w domyślnym zestawie ikon podczas migracji, zostanie utworzony niestandardowy zestaw ikon w zestawie MixedRealityToolkit.Generated/CustomIconSets. Zostanie wyświetlone okno dialogowe z komunikatem o tym, że zostało to zrobione.

Powiadomienie o ikonie niestandardowej

Tworzenie zasobu HoloLens ikona czcionki

Najpierw zaimportuj czcionkę ikony do aparatu Unity. Na Windows komputerach domyślną czcionkę HoloLens można znaleźć w Windows/Fonts/holomdl2.ttf. Skopiuj i wklej ten plik do folderu Assets.

Następnie otwórz kreatora zasobów czcionek TextMeshPro za pomocą okna > TextMeshPro > Twórca zasobu czcionki. Poniżej znajdują się zalecane ustawienia generowania HoloLens czcionki. Aby dołączyć wszystkie ikony, wklej następujący zakres Unicode w polu Sekwencja znaków:

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

Tworzenie przycisku 1

Po wygenerowaniu zasobu czcionki zapisz go w projekcie i przypisz do pola Ikona char zestawu ikon zestawu ikon. Lista rozwijana Dostępne ikony zostanie teraz wypełniona. Aby udostępnić ikonę do użycia przez przycisk, kliknij go. Zostanie ona dodana do listy rozwijanej Wybrane ikony i będzie teraz wyświetlana na liście Możesz opcjonalnie nadać ButtonConfigHelper. ikonie tag. Umożliwia to ustawienie ikony w czasie wykonywania.

Tworzenie przycisku 3

Tworzenie przycisku 2

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

Aby użyć przycisku Zestaw ikon, rozwiń menu rozwijane Ikony w obszarze i przypisz go do pola ButtonConfigHelper Zestaw ikon.

Zestaw ikon przycisku

Jak zmienić rozmiar przycisku

HoloLens rozmiar przycisku w stylu powłoki 2 to 32x32mm. Aby dostosować wymiar, zmień rozmiar tych obiektów w prefabrykcie przycisku:

  1. FrontPlate
  2. Czworokąt w obszarze BackPlate
  3. Program Box Collider w katalogu głównym

Następnie kliknij przycisk Napraw granice w skrypcie NearInteractionTouchable, który znajduje się w katalogu głównym przycisku.

Zaktualizuj rozmiar dostosowania rozmiaru przycisku FrontPlate  1

Aktualizowanie rozmiaru dostosowania rozmiaru przycisku  czworokąt 2

Aktualizowanie rozmiaru dostosowania rozmiaru przycisku collidera usługi Box  3

Kliknij pozycję "Napraw granice"  w celu dostosowania rozmiaru przycisku 4

<a name="voice-command-see-it-say-it">Polecenie głosowe ("see-it, say-it")

Obsługa danych wejściowych mowy Skrypt W interakcje w przycisku Pressable już implementuje . IMixedRealitySpeechHandler W tym miejscu można ustawić słowo kluczowe polecenia głosowego.

Buttons Speech

Profil wprowadzania mowy Ponadto należy zarejestrować słowo kluczowe polecenia głosowego w globalnym profilu poleceń mowy.

Button speech 2

Etykieta Zobacz, Powiedz Prefabrykat przycisku z naciśnięciem ma symbol zastępczy TextMesh Pro etykiety pod obiektem SeeItSayItLabel. Możesz użyć tej etykiety, aby przekazać użytkownikowi słowo kluczowe polecenia voice dla przycisku.

Button Speech 3

Jak zrobić przycisk od podstaw

Przykłady tych przycisków można znaleźć w scenie PressableButtonExample.

Pressable button cube 0

1. Tworzenie przycisku możliwego do naciśnięcia z sześcianem (tylko w pobliżu interakcji)

  1. Create a Unity Cube (GameObject > 3D Object > Cube)
  2. Dodawanie PressableButton.cs skryptu
  3. Dodawanie NearInteractionTouchable.cs skryptu

Na PressableButton panelu Inspector (Inspektor) przypisz obiekt sześcianu do wizualizacji Przycisk przenoszenia.

pressable button cube 3

Po wybraniu sześcianu zobaczysz wiele kolorowych warstw obiektu. To wizualizuje wartości odległości w obszarze Naciśnij Ustawienia. Za pomocą uchwytów można skonfigurować, kiedy należy uruchomić naciśnięcie (przenieść obiekt) i kiedy wyzwolić zdarzenie.

Pressable Buton cube 1 Pressable button cube 2

Naciśnięcie przycisku spowoduje przeniesienie i wygenerowanie odpowiednich zdarzeń ujawnionych w skrypcie, takich jak PressableButton.cs TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Pressable button cube run 1

Rozwiązywanie problemów

Jeśli przycisk jest wykonywany dwukrotnym naciśnięciem, upewnij się, że właściwość Wymuszaj wypychanie z przodu jest aktywna, a płaszczyzna Odległość rozpoczęcia wypychania jest umieszczona przed płaszczyzną dotykową Prawie interakcja. Płaszczyzna dotykowa near interaction jest wskazywana przez niebieską płaszczyznę znajdującą się przed źródłem białej strzałki w poniższym pliku gif:

Składnik skryptu przycisku z klawiszem Pressable z wyróżniona właściwością Wymusz wypychanie przednie

Animowany przykład przenoszenia odległości do naciśnięcia na początku przed płaszczyzną dotkniętą prawie do interakcji

2. Dodawanie wizualnej opinii do przycisku podstawowego modułu

MrTK Standard Shader udostępnia różne funkcje, które ułatwiają dodawanie wizualnych opinii. Utwórz materiał i wybierz cieniowanie Mixed Reality Toolkit/Standard . Możesz też użyć lub zduplikować jeden z istniejących materiałów w programie /SDK/StandardAssets/Materials/ , który korzysta ze standardowego cieniowania zestawu narzędzi MRTK.

Pressable button cube 4

Sprawdź Hover Light i w obszarze Fluent opcje Proximity Light . Dzięki temu można uzyskać wizualną opinię zarówno dla interakcji bliskości (Światło zbliżeniowe), jak i dla interakcji z wskaźnikiem nachyleniowym (Hover Light).

pressable button cube 5 pressable button cube run 2

3. Dodawanie opinii audio do przycisku podstawowego modułu

Ponieważ skrypt uwidacznia zdarzenia, takie jak PressableButton.cs TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), możemy łatwo przypisać opinię audio. Po prostu dodaj obiekty aparatu Unity Audio Source do obiektu modułu, a następnie przypisz klipy dźwiękowe, wybierając pozycję AudioSource.PlayOneShot(). Klipów audio MRTK_Select_Main i MRTK_Select_Secondary w /SDK/StandardAssets/Audio/ folderze .

pressable button cube 7 Pressable Button Cube 6

4. Dodawanie stanów wizualnych i obsługa zdarzeń interakcji o wiele

Interakcja to skrypt, który ułatwia tworzenie stanu wizualnego dla różnych typów interakcji wejściowych. Obsługuje również zdarzenia o wiele interakcji. Dodaj Interactable.cs i przeciągnij i upuść obiekt sześcianu w polu Cel w obszarze Profile. Następnie utwórz nowy motyw z typem ScaleOffsetColorTheme. W tym motywie można określić kolor obiektu dla określonych stanów interakcji, takich jak Focus i Pressed. Można również kontrolować skalowanie i przesunięcie. Zaznacz pole wyboru Easing (Easing) i ustaw czas trwania, aby ułatwić płynne przejście wizualizacji.

Wybieranie motywu profilu

Zobaczysz, że obiekt reaguje na interakcje daleko (promienia dłoni lub spojrzenia) i blisko (ręka).

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Przykłady przycisków niestandardowych

W scenie HandInteractionExamplezobacz przykłady przycisków "rund" i "rund", które są przy użyciu funkcji PressableButton .

Pressable Custom1 Pressable Custom2

Każdy klucz klucza klucza ma PressableButton przypisany NearInteractionTouchable skrypt i . Ważne jest, aby sprawdzić, czy kierunek lokalnego przekazywania NearInteractionTouchable jest poprawny. Jest on reprezentowany przez white arrow w edytorze. Upewnij się, że strzałka znajduje się w kierunku od przodu przycisku:

Pressable Custom3

Zobacz też