Düğmeler

Düğme ana

Bir düğme, kullanıcıya acil bir eylem tetiklemenin bir yolunu verir. Bu, karma gerçeklik 'teki en temel bileşenlerden biridir. MRTK çeşitli türde düğme Prefabs sağlar.

MRTK 'da düğme Prefabs

Klasör altında Prefabs düğme örnekleri MRTK/SDK/Features/UX/Interactable/Prefabs

Unity Kullanıcı arabirimi resmi/grafik tabanlı düğmeler

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

Collider tabanlı düğmeler

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

kenar ışığı, yakınlık ışığı ve sıkıştırılmış ön tabakası gibi çeşitli görsel geri bildirimlerinizi destekleyen, 2 ' nin kabuk stili düğme, geri tabakası ile HoloLens

HoloLens 2 ' nin kabuk stili düğme geri levhasız

dairesel şekille HoloLens 2 ' nin kabuk stili düğmesi

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

geniş HoloLens 2 ' nin kabuk stili düğme 32x96mm

paylaşılan geri levha olan yatay HoloLens 2 düğme çubuğu

paylaşılan geri tabakası olan dikey HoloLens 2 düğme çubuğu

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 ' nin kabuk stili onay kutusu 32x32mm

HoloLens 2 ' nin kabuk stili anahtarı 32x32mm

HoloLens 2 ' nin kabuk stili radyo 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 ' nin kabuk stili onay kutusu 32x96mm

HoloLens 2 ' nin kabuk stili anahtarı 32x96mm

HoloLens 2 ' nin kabuk stili radyo 32x96mm

Radyal radyal

Onay kutusu onay kutusu

ToggleSwitch ToggleSwitch

Radyal düğme

Onay kutusu

Değiştirme anahtarı

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton pressableroundbutton

Düğme tabanı düğmesi

  1. bağlantının kabuk stili düğmesini HoloLens

Yuvarlak şekle basma düğmesi

Temel düğme

Button(Varlıklar/MRTK/SDK/Özellikler/UX/ınteractable/Prefabs/Button. prefab), düğmelere veya diğer etkileşimli yüzey türlerine yönelik kolay UI denetimleri sağlamak Için ınteractable kavramını temel alır. Ana hat düğmesi, neredeyse etkileşimlerin yanı sıra, en çok etkileşimler için de Gaze + AIR-tap dahil olmak üzere tüm kullanılabilir giriş yöntemlerini destekler. Düğmeyi tetiklemek için ses komutunu da kullanabilirsiniz.

PressableButtonHoloLens2(varlıklar/mrtk/SDK/özellikler/UX/ınteractable/prefabs/PressableButtonHoloLens2. prefab), doğrudan izleme girişi için düğmenin kesin hareketini destekleyen HoloLens 2 kabuk stili düğmedir. InteractableBetiği betiği ile birleştirir PressableButton .

HoloLens 2 için, opak bir geri tabakala düğmelerin kullanılması önerilir. Bu kullanılabilirlik ve kararlılık sorunları nedeniyle saydam düğmeler önerilmez:

  • Simgenin ve metinlerin fiziksel ortamla okunması zordur
  • Olayın ne zaman tetikleyeceğini anlamak zordur
  • saydam bir düzlem aracılığıyla görüntülenen Hologramlar, HoloLens 2 ' nin derinlik düzeyi sabitlemesi ile kararsız hale gelebilir

Düğme aftalı

Önceden çözümlenemeyen düğmeleri kullanma

Unity Kullanıcı arabirimi tabanlı düğmeler

Sahneinizde (GameObject-> UI-> Canvas) bir tuval oluşturun. Tuvaliniz için Inspector panelinde:

  • "MRTK tuvaline Dönüştür" e tıklayın
  • "NearInteractionTouchableUnityUI Ekle" ye tıklayın
  • Rect Transform bileşeninin X, Y ve Z ölçeğini 0,001 olarak ayarlayın

Ardından, sürükleyin PressableButtonUnityUI (varlıklar/MRTK/SDK/Özellikler/UX/ınteractable/Prefabs/PressableButtonUnityUI. prefab), PressableButtonUnityUICircular (varlıklar/MRTK/SDK/ÖZELLIKLER/UX/ınteractable/Prefabs/PressableButtonUnityUICircular. prefab) veya PressableButtonHoloLens2UnityUI (varlıklar/MRTK/SDK/Özellikler/UX/ınteractable/Prefabs/PressableButtonHoloLens2UnityUI. prefab) tuvalinde.

Collider tabanlı düğmeler

PressableButtonHoloLens2(Varlıklar/MRTK/SDK/Özellikler/UX/ınteractable/Prefabs/PressableButtonHoloLens2. prefab) veya PressableButtonHoloLens2Unplated (varlıklar/mrtk/SDK/ÖZELLIKLER/UX/ınteractable/Prefabs/PressableButtonHoloLens2Unplated. prefab) sahneye sürüklemeniz yeterlidir. Bu düğme Prefabs, diğer giriş türleri için, diğer giriş ve Gaze dahil olmak üzere ses görsel geri bildirimlerine sahip olacak şekilde yapılandırılmıştır.

Ek eylemleri tetiklemek için prefab 'nin kendisinde sunulan olaylar ve ınteractable bileşeni de kullanılabilir. Handınteractionexample sahnedeki önceden çözümlenemeyen düğmeler, küpün renginizdeki bir değişikliği tetiklemek Için ınteractable 'ın OnClick olayını kullanır. Bu olay, oylanabilir düğme betiği aracılığıyla Gaze, AIR-Tap, el-Ray ve fiziksel düğmeye basma gibi farklı türlerde giriş yöntemlerine yönelik olarak tetiklenir.

How to Use Interactable

Düğme üzerinde, önlanabilir düğmenin OnClick olayını ne zaman harekete tetikleyip, PhysicalPressEventRouter ' i ' de yapılandırabilirsiniz. Örneğin, düğmeye tıklama ve serbest bırakılma aksine, düğme ilk düğmesine basıldığında harekete geçmek Için tıklama ' ye tıklayın .

How to use events

Belirli bir diğer giriş durumu bilgilerini kullanmak için, önceden çözümlenemeyen düğme olaylarını kullanabilirsiniz- dokunmatik başlangıç, dokunmatik uç, düğme basıldığında düğme serbest bırakıldı. Ancak bu olaylar, AIR-Tap, el-Ray veya gözle, ancak göz girdilerine yanıt olarak harekete geçmeyecektir. Hem yakın hem de uzak etkileşimleri desteklemek için ınteractable 'ın OnClick olayının kullanılması önerilir.

How to use Pressable Buttons

Etkileşim durumları

Boşta durumunda düğmenin ön tabakası görünür değildir. Bir parmak yaklaşımı ya da Gaze girişi yüzeyi hedeflediğinde, ön tabakaya 'nın IşIME kenarlığı görünür hale gelir. Ön levha yüzeyinde parmak izi konumunun ek vurgulaması vardır. Bir parmakla gönderildiğinde, ön tabakası parmak ucum ile birlikte gider. Parmak izi ön tabakaya dokunduğunda dokunma noktasına görsel geri bildirimde bulunmak için hafif bir darbe etkisi gösterir.

HoloLens 2 kabuk stili düğmesinde, kullanıcının etkileşime açık olması için birçok görsel ipucu ve uygun tehlike vardır.

Yakınlık ışığı Odak vurgusu Kafesine sıkıştırması Darbe on tetikleyicisi
Yakınlık ışığı Odak vurgusu Kafesine sıkıştırması Darbe on tetikleyicisi

Hafif darbe efekti, şu anda etkileşimde bulunan işaretçiyle ilgili olan ProximityLight (ler) i görünen, önlenebilir düğme tarafından tetiklenir. Herhangi bir yakınlık ışığı bulunursa ProximityLight.Pulse yöntem çağrılır ve bu, gölgelendirici parametrelerinin bir Pulse gösterilmesi için otomatik olarak animasyonunu yapar.

Inspector özellikleri

Düğme yapısı

Box Collider Box Collider düğmesinin ön numarası için.

Basılabilir Düğme El ile etkileşime basıldığında düğme hareketinin mantığı.

Fiziksel Basın Olay Yönlendiricisi Bu betik, el ile etkileşimde bulunarak Etkileşime değiştirilebilir'e olayları gönderir.

Etkileşime değiştirilebilir Etkileşime değiştirilebilir, çeşitli etkileşim durumları ve olay türlerini işler. HoloLens, hareket ve ses girişi ile çevreleyici mikrofonlu başlığın hareket denetleyicisi girişi bu betik tarafından doğrudan lanmıştır.

Ses Kaynağı Ses geri bildirim klipleri için Unity ses kaynağı.

NearInteractionTouchable.cs Herhangi bir nesneyi el girişleriyle dokunulabilir hale yapmak için gereklidir.

Prefab düzeni

ButtonContent nesnesi ön tablo, metin etiketi ve simge içerir. FrontPlate, gölgelendiriciyi kullanarak dizin elinizin Button_Box verir. Parıldayan kenarlıkları, yakınlık ışığını ve dokunma üzerindeki bir kalp atışı etkisini gösterir. Metin etiketi, TextMesh Pro. SeeItSayItLabel'in görünürlüğü, Etkileşime değiştirilebilir'inteması tarafından denetlendi.

Düğme Düzeni

Simgeyi ve metni değiştirme

MRTK düğmeleri, ButtonConfigHelper düğmenin simgesini, metnini ve etiketini değiştirme konusunda size yardımcı olmak için bir bileşen kullanır. (Seçili düğmede öğeler yoksa bazı alanların eksik olduğunu unutmayın.)

Düğme Yapılandırma Yardımcı

Simge Kümelerini Oluşturma ve Değiştirme

Simge Kümesi, bileşen tarafından kullanılan paylaşılan bir simge varlıkları ButtonConfigHelper kümesidir. Üç simge stili de desteklenir.

  • Dörtlü simgeleri, kullanılarak dörtlü üzerinde MeshRenderer işlenir. Bu, varsayılan simge stilidir.
  • Sprite simgeleri kullanılarak SpriteRenderer işlenir. Simgelerinizi sprite sayfası olarak içeri aktarmayı tercih ediyorsanız veya simge varlıklarının Unity UI bileşenleriyle paylaşılmalarını isterseniz bu yararlı olur. Bu stili kullanmak için Sprite Düzenleyicisi paketini (Windows -> Paket Yöneticisi -> 2B Sprite) yüklemeniz gerekir
  • Char simgeleri bir bileşen kullanılarak TextMeshPro işlenir. Bu, simge yazı tipi kullanmayı tercih ediyorsanız kullanışlıdır. Bu simgeyi HoloLens yazı tipi olarak kullanmak için bir yazı tipi varlığı TextMeshPro oluşturmanız gerekir.

Düğmenizin hangi stili kullandığını değiştirmek için, ButtonConfigHelper'daki Simgeler açılan öğesini genişletin ve Simge Stili açılan listesinden öğesini seçin.

Varlık menüsüyle ayarlanmış yeni bir düğme simgesi oluşturabilirsiniz: Karma Gerçeklik Araç Seti > Oluştur > Simgesi Kümesi. Dörtlü ve sprite simgeleri eklemek için bunları ilgili dizilerine sürüklemek gerekir. Char simgeleri eklemek için öncelikle bir yazı tipi varlığı oluşturmanız ve atamanızı gerekir.

MRTK 2.4 ve ötesinde, özel simge dokuları bir IconSet içine taşınmanızı öneririz. Bir proje üzerindeki tüm düğmelerin varlıklarını yeni önerilen biçime yükseltmek için ButtonConfigHelperMigrationHandler kullanın. (Karma Gerçeklik Araç Seti -> Yardımcı Programları -> Geçiş Penceresi -> Geçiş İşleyicisi Seçimi -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Düğmeleri yükseltmek için gereken Microsoft.MixedRealityToolkit.Unity.Tools paketini içeri aktarma.

Yükseltme penceresi iletişim penceresi

Geçiş sırasında ayarlanmış varsayılan simgede bir simge bulunamasa MixedRealityToolkit.Generated/CustomIconSets içinde özel bir simge kümesi oluşturulur. Bunun olduğunu belirten bir iletişim kutusu görüntülenir.

Özel simge bildirimi

HoloLens Simgesi Yazı Tipi Varlığı Oluşturma

İlk olarak simge yazı tipini Unity'ye aktarın. Sanal Windows varsayılan yazı tipini HoloLens/Fonts/holomdl2.ttf Windows bulabilirsiniz. Bu dosyayı kopyalayıp Assets klasörünüze yapıştırın.

Ardından, TextMeshPro Yazı Tipi Varlık Oluşturucusu'> TextMeshPro > Yazı Tipi Varlık Oluşturucusu'> açın. Yazı tipi atlas'ı oluşturmak için önerilen HoloLens burada vesiniz. Tüm simgeleri eklemek için, aşağıdaki Unicode aralığını Karakter Dizisi alanına yapıştırın:

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

Düğme oluşturma 1

Yazı tipi varlığı başlatıldıktan sonra projenize kaydedin ve Simge Kümenizin Karakter Simgesi Yazı Tipi alanına attayabilirsiniz. Kullanılabilir Simgeler açılan listesinde artık doldurulacak. Bir simgeyi bir düğme tarafından kullanılabilir hale yapmak için tıklayın. Seçili Simgeler açılan listesinde eklenir ve artık isteğe bağlı olarak simgeye bir ButtonConfigHelper. etiket ebilirsiniz içinde gösterilir. Bu, çalışma zamanında simgeyi ayarlamaya olanak sağlar.

Düğme oluşturma 3

Düğme oluşturma 2

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

Simge Kümenizi kullanmak için bir düğme seçin, içinde Simgeler açılan öğesini genişletin ButtonConfigHelper ve simgeyi Simge Kümesi alanına attayabilirsiniz.

Düğme Simgesi kümesi

Düğmenin boyutunu değiştirme

HoloLens 2'nin kabuk stili düğmesinin boyutu 32x32mm'dir. Boyutu özelleştirmek için düğmenin önfazlafı içinde bu nesnelerin boyutunu değiştirebilirsiniz:

  1. FrontPlate
  2. BackPlate altında Dörtlü
  3. Kökte Box Collider

Ardından, düğmenin kökünde yer alan NearInteractionTouchable betiğinde Sınırları Düzelt düğmesine tıklayın.

FrontPlate Düğme Boyutu  özelleştirmesi boyutunu güncelleştirme 1

Dörtlü Düğme Boyutu  özelleştirmesi 2'nin boyutunu güncelleştirme

Box Collider Düğme Boyutu  özelleştirmesi boyutunu güncelleştirme 3

'Sınırları Düzelt' Düğme  Boyutu özelleştirmesi 4'e tıklayın

Sesli komut ('see-it, say-it')

Konuşma Girişi İşleyicisi Basılabilir Düğme'de Etkileşime değiştirilebilir betik zaten IMixedRealitySpeechHandler uygulanmıştır. Burada bir sesli komut anahtar sözcüğünü ayarlamak gerekir.

Buttons Speech

Konuşma Giriş Profili Ayrıca, sesli komut anahtar sözcüğünü genel Konuşma Komutları Profiline kaydetmeniz gerekir.

Button speech 2

See-it, Say-it label Basılabilir düğme önfazarı, SeeItSayItLabel nesnesinin Pro textMesh yer tutucu etiketine sahiptir. Düğmenin sesli komut anahtar sözcüğünü kullanıcıya iletirken bu etiketi kullanabilirsiniz.

Button Speech 3

Sıfırdan düğme oluşturma

Bu düğmelerin örneklerini PressableButtonExample sahnesinde bulabilirsiniz.

Pressable button cube 0

1. Küp ile basılabilir bir düğme oluşturma (yalnızca etkileşime yakın)

  1. Unity Küpü Oluşturma (GameObject > 3D Nesne > Küpü)
  2. Betik PressableButton.cs ekleme
  3. Betik NearInteractionTouchable.cs ekleme

'nin PressableButton Denetçi panelinde küp nesnesini Taşıma Düğmesi Görselleri'ne attayabilirsiniz.

pressable button cube 3

Küpü seçerek nesnede birden çok renkli katman olduğunu göreceğiz. Bu, Ayarlar tuşuna basın altındaki uzaklık değerlerini görsel Ayarlar. Tanıtıcıları kullanarak, ne zaman başlayacağını (nesneyi taşı) ve ne zaman olay tetiklensin yapılandırabilirsiniz.

Pressable Buton cube 1 Pressable button cube 2

Düğmeye bastığınızda hareket eder ve PressableButton.cs betikte touchBegin(), TouchEnd()), ButtonPressed(), ButtonReleased() gibi uygun olayları üretir.

Pressable button cube run 1

Sorun giderme

Düğmeniz çift tuşuna basıyorsa Ön Anında Itme Özelliğini Zorla özelliğinin etkin olduğundan ve Başlangıç Anında Itme Uzaklığı düzlemi'nin Yakın Etkileşim Temaslı düzlemin önüne yerleştirilmelerini sağlar. Near Interaction Touchable düzlemi, aşağıdaki gif'te beyaz ok kaynağının önüne yerleştirilen mavi düzlemle gösterilmiştir:

Ön İtme özelliğini zorla özelliği vurgulanmış, basılabilir düğme betiği bileşeni

Etkileşime yakın temas edilebilir düzlemin önünde başlangıç itme mesafesi hareket ettiren animasyonlu örnek

2. Temel küp düğmesine görsel geri bildirim ekleme

MRTK Standart Gölgelendirici, görsel geri bildirim eklemenizi kolaylaştıran çeşitli özellikler sağlar. Bir malzeme oluşturun ve gölgelendiriciyi Mixed Reality Toolkit/Standard seçin. Veya MRTK Standart Gölgelendiricisi kullanan mevcut /SDK/StandardAssets/Materials/ malzemelerden birini kullanabilir veya çoğaltın.

Pressable button cube 4

Hover LightSeçenekleri'nin altında ve Fluent Proximity Light seçin. Bu, hem yakın el (YakınLık ışığı) hem de uzak işaretçi (Hover Light) etkileşimleri için görsel geri bildirim sağlar.

pressable button cube 5 pressable button cube run 2

3. Temel küp düğmesine sesli geri bildirim ekleme

Betik PressableButton.cs TouchBegin(), TouchEnd()), ButtonPressed()), ButtonReleased() gibi olayları ortaya çıkararak ses geri bildirimini kolayca atayabilirsiniz. Unity'leri küp Audio Source nesnesine eklemeniz ve AudioSource.PlayOneShot() öğesini seçerek ses klipleri atamanız gerekir. MRTK_Select_Main ve MRTK_Select_Secondary ses kliplerini klasörler altında kullanabilirsiniz /SDK/StandardAssets/Audio/ .

pressable button cube 7 Pressable Button Cube 6

4. görsel durumlar ekleme ve en fazla etkileşim olaylarını işleme

Interactable çeşitli giriş etkileşimleri türleri için görsel bir durum oluşturmayı kolaylaştıran bir betiktir. Ayrıca, ileri etkileşim olaylarını işler. Interactable.csKüp nesnesini, profiller altındaki hedef alana ekleyin ve sürükleyin ve bırakın. Ardından, ScaleOffsetColorTheme türünde yeni bir tema oluşturun. Bu temada, odak ve basılan gibi belirli etkileşim durumları için nesnenin rengini belirtebilirsiniz. Ayrıca ölçek ve sapmayı de denetleyebilirsiniz. Görsel geçişi sorunsuz hale getirmek için kolaylaştırıcı ve süre ayarlama süresini denetleyin.

Profil temasını seçin

Nesnenin hem uzak (el, hem de Gaze imleç) ve yakın (el) etkileşimlere yanıt verdiğini görürsünüz.

Pressable Button Cube Run 3 Pressable Button Cube Run 4

Özel düğme örnekleri

Handınteractionexample sahnede, her ikisi de kullanan piyano ve Round Button örneklerine bakın PressableButton .

Pressable Custom1 Pressable Custom2

Her piyano anahtarında bir PressableButton ve bir NearInteractionTouchable komut dosyası atanır. Yerel ileri yönünün doğru olduğundan emin olmak önemlidir NearInteractionTouchable . Düzenleyicide beyaz oklu temsil edilir. Okun düğmenin ön yüzünden Uzaklaştığından emin olun:

Pressable Custom3

Ayrıca bkz.