Tombol — MRTK2

Button Main

Tombol memberi pengguna cara untuk memicu tindakan segera. Ini adalah salah satu komponen paling mendasar dalam realitas campuran. MRTK menyediakan berbagai jenis prefab tombol.

Prefab tombol di MRTK

Contoh prefab tombol di bawah MRTK/SDK/Features/UX/Interactable/Prefabs folder

Tombol berbasis Gambar/Grafik Unity UI

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

Tombol berbasis collider

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens tombol gaya shell 2 dengan backplate yang mendukung berbagai umpan balik visual seperti lampu batas, cahaya kedekatan, dan pelat depan terkompresi

HoloLens tombol gaya shell 2 tanpa backplate

HoloLens tombol gaya shell 2 dengan bentuk melingkar

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Tombol gaya shell Wide HoloLens 2 32x96mm

Bilah tombol Horizontal HoloLens 2 dengan backplate bersama

Bilah tombol vertikal HoloLens 2 dengan backplate bersama

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

kotak centang gaya shell HoloLens 2 32x32mm

HoloLens 2 sakelar gaya shell 32x32mm

HoloLens 2's shell-style radio 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

kotak centang gaya shell HoloLens 2 32x96mm

HoloLens 2 sakelar gaya shell 32x96mm

HoloLens 2 radio bergaya shell 32x96mm

RadialRadial

CheckboxKotak centang

ToggleSwitchAlihkanSwitch

Tombol Radial

Kotak centang

Alihkan sakelar

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseTombol

HoloLens tombol gaya shell generasi ke-1

Tombol tekan bentuk bulat

Tombol Dasar

Button (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) didasarkan pada konsep Interactable untuk menyediakan kontrol UI yang mudah untuk tombol atau jenis permukaan interaktif lainnya. Tombol garis besar mendukung semua metode input yang tersedia, termasuk input tangan artikulasi untuk interaksi dekat serta tatapan + ketukan udara untuk interaksi jauh. Anda juga dapat menggunakan perintah suara untuk memicu tombol.

PressableButtonHoloLens2(Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) adalah tombol gaya shell HoloLens 2 yang mendukung pergerakan tombol yang tepat untuk input pelacakan tangan langsung. Ini menggabungkan Interactable skrip dengan PressableButton skrip.

Untuk HoloLens 2, disarankan untuk menggunakan tombol dengan backplate buram. Tombol transparan tidak disarankan karena masalah kegunaan dan stabilitas ini:

  • Ikon dan teks sulit dibaca dengan lingkungan fisik
  • Sulit untuk memahami kapan peristiwa memicu
  • Hologram yang ditampilkan melalui bidang transparan dapat tidak stabil dengan stabilisasi Depth LSR HoloLens 2

Button plated

Cara menggunakan tombol yang dapat ditekan

Tombol berbasis Antarmuka Pengguna Unity

Buat Canvas di adegan Anda (GameObject -> UI -> Canvas). Di panel Pemeriksa untuk Kanvas Anda:

  • Klik "Konversi ke Kanvas MRTK"
  • Klik "Tambahkan NearInteractionTouchableUnityUI"
  • Atur skala X, Y, dan Z komponen Rect Transform ke 0,001

Kemudian, seret PressableButtonUnityUI (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab), atau PressableButtonHoloLens2UnityUI (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) ke Canvas.

Tombol berbasis collider

Cukup seret PressableButtonHoloLens2 (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) atau PressableButtonHoloLens2Unplated (Aset/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) ke dalam adegan. Prefab tombol ini sudah dikonfigurasi untuk memiliki umpan balik audio-visual untuk berbagai jenis input, termasuk input dan tatapan tangan artikulasi.

Peristiwa yang diekspos dalam prefab itu sendiri serta komponen Dapat berinteraksi dapat digunakan untuk memicu tindakan tambahan. Tombol yang dapat ditekan di adegan HandInteractionExample menggunakan peristiwa OnClick Interactable untuk memicu perubahan warna kubus. Kejadian ini dipicu untuk berbagai jenis metode input seperti tatapan, ketukan udara, sinar tangan, serta penekanan tombol fisik melalui skrip tombol yang dapat ditekan.

How to Use Interactable

Anda dapat mengonfigurasi ketika tombol yang dapat ditekan mengaktifkan peristiwa OnClick melalui pada PhysicalPressEventRouter tombol . Misalnya, Anda dapat mengatur OnClick untuk diaktifkan saat tombol pertama kali ditekan, dibandingkan dengan ditekan dan dirilis, dengan mengatur Dapat Berinteraksi Saat Klik ke Peristiwa Saat Ditekan.

How to use events

Untuk memanfaatkan informasi status input tangan artikulasi tertentu, Anda dapat menggunakan peristiwa tombol yang dapat ditekan - Touch Begin, Touch End, Button Pressed, Button Released. Namun, peristiwa ini tidak akan menyala sebagai respons terhadap input air-tap, sinar tangan, atau mata. Untuk mendukung interaksi dekat dan jauh, disarankan untuk menggunakan peristiwa OnClick Interactable.

How to use Pressable Buttons

Status interaksi

Dalam status menganggur, pelat depan tombol tidak terlihat. Saat jari mendekati atau kursor dari input tatapan menargetkan permukaan, batas bersinar pelat depan menjadi terlihat. Ada penyorotan tambahan dari posisi ujung jari pada permukaan pelat depan. Saat didorong dengan jari, pelat depan bergerak dengan ujung jari. Ketika ujung jari menyentuh permukaan pelat depan, itu menunjukkan efek pulsa halang untuk memberikan umpan balik visual dari titik sentuhan.

Dalam HoloLens 2 tombol gaya shell, ada banyak isti visual dan ketergembanaan untuk meningkatkan kepercayaan diri pengguna pada interaksi.

Proximity light Focus highlight Compressing cage Pulse on trigger
Cahaya kedekatan Sorotan fokus Memadatkan kandang Pulsa pada pemicu

Efek pulsa halus dipicu oleh tombol yang dapat ditekan, yang mencari ProximityLight yang hidup di penunjuk yang saat ini berinteraksi. Jika ada lampu kedekatan yang ditemukan, ProximityLight.Pulse metode dipanggil, yang secara otomatis menganimasikan parameter shader untuk menampilkan pulsa.

Properti pemeriksa

Button Structure

ColliderBox Collider Kotak untuk pelat depan tombol.

Tombol Dapat Ditekan Logika untuk pergerakan tombol dengan interaksi tekan tangan.

Router Peristiwa Pers Fisik Skrip ini mengirimkan peristiwa dari interaksi tekan tangan ke Interactable.

Interactable dapatberinteraksi menangani berbagai jenis status dan peristiwa interaksi. HoloLens tatapan, gerakan, dan input suara serta input pengontrol gerakan headset imersif ditangani langsung oleh skrip ini.

Sumber Audio Sumber audio Unity untuk klip umpan balik audio.

NearInteractionTouchable.cs Diperlukan untuk membuat objek apa pun dapat disentuh dengan input tangan artikulasi.

Tata letak prefab

Objek ButtonContent berisi pelat depan, label teks, dan ikon. FrontPlate merespons kedekatan ujung jari indeks menggunakan shader Button_Box. Ini menunjukkan batas bersinar, cahaya kedekatan, dan efek pulsa saat disentuh. Label teks dibuat dengan TextMesh Pro. Lihat VisibilitasItSayItLabel dikendalikan oleh tema Interactable.

Button Layout

Cara mengubah ikon dan teks

Tombol MRTK menggunakan ButtonConfigHelper komponen untuk membantu Anda mengubah ikon, teks, dan label tombol. (Perhatikan bahwa beberapa bidang mungkin tidak ada jika elemen tidak ada pada tombol yang dipilih.)

Button Config Helper

Membuat dan Memodifikasi Set Ikon

Set Ikon adalah sekumpulan aset ikon bersama yang digunakan oleh ButtonConfigHelper komponen. Tiga gaya ikon didukung.

  • Ikon quad dirender pada quad menggunakan MeshRenderer. Ini adalah gaya ikon default.
  • Ikon sprite dirender menggunakan SpriteRenderer. Ini berguna jika Anda lebih suka mengimpor ikon Anda sebagai lembar sprite, atau jika Anda ingin aset ikon Anda dibagikan dengan komponen Antarmuka Pengguna Unity. Untuk menggunakan gaya ini, Anda harus menginstal paket Editor Sprite (Windows -> Manajer Paket -> 2D Sprite)
  • Ikon karakter dirender menggunakan TextMeshPro komponen. Ini berguna jika Anda lebih suka menggunakan font ikon. Untuk menggunakan font ikon HoloLens, Anda harus membuat aset TextMeshPro font.

Untuk mengubah gaya mana yang digunakan tombol Anda, perluas menu dropdown Ikon di ButtonConfigHelper dan pilih dari menu dropdown Gaya Ikon .

Untuk membuat ikon tombol baru:

  1. Di jendela Project, klik kanan Aset untuk membuka menu konteks. (Anda juga dapat mengklik kanan ruang kosong apa pun di dalam folder Aset atau salah satu subfoldernya.)

  2. Pilih Buat > Mixed Reality > Set Ikon Toolkit>.

    Screenshot of the Icon Set menu item.

Untuk menambahkan ikon quad dan sprite, cukup seret ke array masing-masing. Untuk menambahkan ikon Karakter, Anda harus terlebih dahulu membuat dan menetapkan aset font.

Di MRTK 2.4 dan yang lebih baru, sebaiknya tekstur ikon kustom dipindahkan ke IconSet. Untuk meningkatkan aset pada semua tombol dalam proyek ke format baru yang direkomendasikan, gunakan ButtonConfigHelperMigrationHandler. (Mixed Reality Toolkit -> Utilitas -> Jendela Migrasi -> Pemilihan Handler Migrasi -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Mengimpor paket Microsoft.MixedRealityToolkit.Unity.Tools yang diperlukan untuk meningkatkan tombol.

Upgrade window dialogue

Jika ikon tidak ditemukan di ikon default yang diatur selama migrasi, set ikon kustom akan dibuat di MixedRealityToolkit.Generated/CustomIconSets. Dialog akan menunjukkan bahwa ini telah terjadi.

Custom icon notification

Membuat Aset Font Ikon HoloLens

Pertama, impor font ikon ke Unity. Pada komputer Windows Anda dapat menemukan font HoloLens default di Windows/Fonts/holomdl2.ttf. Salin dan tempel file ini ke folder Aset Anda.

Selanjutnya, buka TextMeshPro Font Asset Creator melalui Window > TextMeshPro > Font Asset Creator. Berikut adalah pengaturan yang direkomendasikan untuk menghasilkan atlas font HoloLens. Untuk menyertakan semua ikon, tempelkan rentang Unicode berikut ke dalam bidang Urutan Karakter :

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

Setelah aset font dihasilkan, simpan ke proyek Anda dan tetapkan ke bidang Font Ikon Karakter Set Ikon Anda. Dropdown Ikon yang Tersedia sekarang akan diisi. Untuk membuat ikon tersedia untuk digunakan oleh tombol, klik ikon tersebut. Ini akan ditambahkan ke menu dropdown Ikon Yang Dipilih dan sekarang akan muncul di ButtonConfigHelper. ikon Anda dapat secara opsional memberikan tag pada ikon. Ini memungkinkan pengaturan ikon saat runtime.

Button creation 3

Button creation 2

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

Untuk menggunakan Set Ikon Pilih tombol, perluas menu drop-down Ikon di ButtonConfigHelper dan tetapkan ke bidang Set Ikon .

Button Icon set

Cara mengubah ukuran tombol

ukuran tombol gaya shell HoloLens 2 adalah 32x32mm. Untuk menyesuaikan dimensi, ubah ukuran objek ini di prefab tombol:

  1. FrontPlate
  2. Quad di bawah BackPlate
  3. Box Collider pada root

Kemudian, klik tombol Perbaiki Batas di skrip NearInteractionTouchable yang berada di akar tombol.

Memperbarui ukuran FrontPlate Button Size customization 1

Memperbarui ukuran Quad Button Size customization 2

Memperbarui ukuran Box Collider Button Size customization 3

Klik 'Perbaiki Batas' Button Size customization 4

Perintah suara ('lihat-itu, katakan-itu')

Handler Input Ucapan Skrip yang dapat berinteraksi di Tombol Dapat Ditekan sudah mengimplementasikan IMixedRealitySpeechHandler. Kata kunci perintah suara dapat diatur di sini.

Buttons Speech

Profil Input Ucapan Selain itu, Anda perlu mendaftarkan kata kunci perintah suara di Profil Perintah Ucapan global.

Button speech 2

Lihat-itu, Label say-it Prefab tombol yang dapat ditekan memiliki label Pro TextMesh tempat penampung di bawah objek SeeItSayItLabel. Anda dapat menggunakan label ini untuk mengomunikasikan kata kunci perintah suara untuk tombol kepada pengguna.

Button Speech 3

Cara membuat tombol dari awal

Anda dapat menemukan contoh tombol ini di adegan PressableButtonExample .

Pressable button cube 0

1. Membuat tombol yang dapat ditekan dengan kubus (hanya interaksi dekat)

  1. Membuat Kubus Unity (GameObject > 3D Object > Cube)
  2. Menambahkan PressableButton.cs skrip
  3. Menambahkan NearInteractionTouchable.cs skrip

Di panel PressableButtonPemeriksa, tetapkan objek kubus ke Visual Tombol Bergerak.

pressable button cube 3

Ketika Anda memilih kubus, Anda akan melihat beberapa lapisan berwarna pada objek. Ini memvisualisasikan nilai jarak di bawah Tekan Pengaturan. Dengan menggunakan handel, Anda dapat mengonfigurasi kapan harus mulai menekan (memindahkan objek) dan kapan harus memicu peristiwa.

Pressable Buton cube 1Pressable button cube 2

Ketika Anda menekan tombol, tombol akan bergerak dan menghasilkan peristiwa yang tepat yang terekspos dalam PressableButton.cs skrip seperti TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

Pressable button cube run 1

Pemecahan Masalah

Jika tombol Anda menjalankan penekanan ganda, pastikan properti Terlaksana Pendorongan Depan aktif dan bidang Jarak Dorong Mulai ditempatkan di depan bidang Near Interaction Touchable . Bidang Near Interaction Touchable ditunjukkan oleh bidang biru yang ditempatkan di depan asal panah putih di gif di bawah ini:

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. Menambahkan umpan balik visual ke tombol kubus dasar

MRTK Standard Shader menyediakan berbagai fitur yang memudahkan untuk menambahkan umpan balik visual. Buat bahan dan pilih shader Mixed Reality Toolkit/Standard. Atau Anda dapat menggunakan atau menduplikasi salah satu bahan yang ada di bawah /SDK/StandardAssets/Materials/ yang menggunakan MRTK Standard Shader.

Pressable button cube 4

Centang Hover Light dan Proximity Light di bawah Opsi Fluent. Ini memungkinkan umpan balik visual untuk interaksi tangan dekat (Cahaya Kedekatan) dan penunjuk jauh (Hover Light).

pressable button cube 5pressable button cube run 2

3. Menambahkan umpan balik audio ke tombol kubus dasar

Karena PressableButton.cs skrip mengekspos peristiwa seperti TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), kita dapat dengan mudah menetapkan umpan balik audio. Cukup tambahkan Unity Audio Source ke objek kubus lalu tetapkan klip audio dengan memilih AudioSource.PlayOneShot(). Anda dapat menggunakan MRTK_Select_Main dan MRTK_Select_Secondary klip audio di bawah /SDK/StandardAssets/Audio/ folder .

pressable button cube 7Pressable Button Cube 6

4. Menambahkan status visual dan menangani peristiwa interaksi jauh

Dapat berinteraksi adalah skrip yang memudahkan untuk membuat status visual untuk berbagai jenis interaksi input. Ini juga menangani peristiwa interaksi yang jauh. Tambahkan Interactable.cs dan seret dan letakkan objek kubus ke bidang Target di bawah Profil. Kemudian, buat Tema baru dengan jenis ScaleOffsetColorTheme. Di bawah tema ini, Anda dapat menentukan warna objek untuk status interaksi tertentu, seperti Fokus dan Ditekan. Anda juga dapat mengontrol Skala dan Offset juga. Centang Pelunasan dan atur durasi untuk membuat transisi visual lancar.

Select profile theme

Anda akan melihat objek merespons keduanya jauh (kursor sinar tangan atau tatapan) dan interaksi dekat(tangan).

Pressable Button Cube Run 3Pressable Button Cube Run 4

Contoh tombol kustom

Dalam adegan HandInteractionExample, lihat contoh tombol piano dan bulat yang keduanya menggunakan PressableButton.

Pressable Custom1Pressable Custom2

Setiap kunci piano memiliki PressableButton dan skrip yang NearInteractionTouchable ditetapkan. Penting untuk memverifikasi bahwa arah PenerusanNearInteractionTouchable Lokal sudah benar. Ini diwakili oleh panah putih di editor. Pastikan panah menunjuk menjauh dari wajah depan tombol:

Pressable Custom3

Lihat juga