Tombol — MRTK3

Tombol Utama

Tombol memberi pengguna cara untuk memicu tindakan segera. Ini adalah salah satu komponen paling mendasar dalam realitas campuran, dan memberikan interaksi tombol yang memuaskan dan dapat diandalkan sangat penting untuk pengalaman realitas campuran yang berkualitas. MRTK menyediakan dua kategori prefab tombol: berbasis Kanvas dan berbasis non-Kanvas. Kedua konfigurasi menggunakan PressableButton skrip, subkelas yang StatefulInteractable diperluas untuk menyertakan perilaku khusus untuk tombol.

Pelajari selengkapnya tentang cara kerja sistem UI Canvas hibrid..

Contoh adegan

Jika Anda menggunakan proyek templat pengembangan, beberapa contoh adegan tersedia yang menunjukkan prefab tombol yang tersedia.

CanvasUITearSheet.unity menunjukkan semua varian prefab tombol berbasis Kanvas yang tersedia di MRTK.

Canvas Tearsheet

CanvasExample.unity menunjukkan beberapa contoh membangun tata letak yang lebih besar menggunakan komponen berbasis Canvas.

Adegan Contoh Kanvas

Prefabs

Tombol berbasis kanvas fleksibel dan dapat dikonfigurasi, dan dapat diubah ukurannya menjadi dimensi atau proporsi apa pun. Dengan demikian, hanya beberapa prefab tombol yang disediakan.

  • EmptyButton menyediakan permukaan/frontplate yang dapat ditekan, backplate holografik, dan efek cahaya. Tidak ada teks, ikon, label, atau konten lainnya. Ini adalah kontrol seperti tombol yang lebih abstrak dapat dibangun sebagai varian prefab ini tanpa mengganggu teks atau konten ikon.
  • ActionButton adalah tombol sederhana yang menyertakan ikon, teks, dan label. Komponen individual ini dapat diaktifkan atau dinonaktifkan, dan sistem tata letak akan beradaptasi dengan sesuai.

Penyempurnaan lain dapat ditambahkan ke tombol, seperti indikator sakelar pengalih. Fitur yang tidak dimaksudkan untuk dipindahkan dengan frontplate harus dilampirkan ke komponen backplate.

Menambahkan sakelar pengalih

Struktur

Berbagai bagian actionButton dapat diaktifkan/dinonaktifkan untuk menyesuaikan tampilan dan perilaku tombol. Kami telah membedah dua konfigurasi yang mungkin berbeda untuk menunjukkan berbagai bagian prefab tombol. "Backglow" tidak terlihat dalam cuplikan layar ini karena tombol tidak ditekan secara aktif.

Pertama, konfigurasi yang lebih besar di mana objek Teks utama aktif dan menggunakan gaya sebaris untuk menampilkan header dan subteks. Struktur tombol Kanvas Besar Kedua, konfigurasi yang lebih kecil di mana aktif untuk menampilkan deskripsi tindakan di bawah ikon . Objek Teks utama dinonaktifkan. Struktur tombol Kanvas Kecil

kelas PressableButton

Kelas PressableButton ini berasal dari StatefulInteractable fungsi baru dan ditimpa khusus untuk tombol. Di Pemeriksa, Anda dapat mengonfigurasi pengaturan yang terkait dengan tekan volumetrik selain semua pengaturan lain yang dapat dikonfigurasi dari StatefulInteractable. Cuplikan layar pemeriksa PressableButton

Membuat UI dengan tombol

Saat membuat menu atau panel UI dengan beberapa tombol, disarankan untuk menggunakan geometri backplate bersama. Dengan menggunakan backplate bersama, kita dapat mengurangi kebisingan visual dan meningkatkan kegunaan. Berikut adalah beberapa contoh tombol peletakan di atas backplate bersama.

Membangun UI 1

Membangun UI 2

Membangun UI 3

Komponen Tambahan

Sebagai referensi, berikut adalah beberapa komponen tambahan yang bertanggung jawab untuk menangani aspek visual dan fungsionalitas tombol:

  • Denyut nadi pelat depan visual diamati saat tombol dipilih ditangani oleh komponen InteractablePulse .
  • Ikon tombol dapat diatur ke ikon MRTK menggunakan FontIconSelector.
  • RectTransformColliderFitter mungkin secara opsional digunakan pada tombol Kanvas agar sesuai dengan BoxCollider tombolnyaRectTransform. Komponen ini dinonaktifkan secara default untuk performa.