Düğmeler — MRTK2

Düğme, kullanıcıya anında bir eylemi tetiklemenin bir yolunu sunar. Karma gerçeklikteki en temel bileşenlerden biridir. MRTK, çeşitli düğme ön ekleri sağlar.

MRTK'da düğme ön ekleri

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

Unity UI Görüntüsü/Grafik tabanlı düğmeler

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

Harmanlama tabanlı düğmeler

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

HoloLens 2'nin kenar ışığı, yakınlık ışığı ve sıkıştırılmış ön plaka gibi çeşitli görsel geri bildirimleri destekleyen arka plakalı kabuk stili düğmesi

HoloLens 2'nin arka plakasız kabuk stili düğmesi

HoloLens 2'nin yuvarlak şekilli kabuk stili düğmesi

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Geniş HoloLens 2'nin kabuk stili düğmesi 32x96mm

Paylaşılan arka plakalı Yatay HoloLens 2 düğme çubuğu

Paylaşılan arka plakalı Dikey HoloLens 2 düğme çubuğu

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_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

PressableButtonHoloLens2ToggleSwitch_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

Onay Kutusu

ToggleSwitch

Radyal düğme

Onay kutusu

Geçiş anahtarı

ButtonHoloLens1

PressableRoundButton

Düğme

HoloLens 1. nesil'in kabuk stili düğmesi

Yuvarlak şekil basma düğmesi

Temel düğme

Button (Varlıklar/MRTK/SDK/Özellikler/UX/Interactable/Prefabs/Button.prefab) düğmeler veya diğer etkileşimli yüzey türleri için kolay kullanıcı arabirimi denetimleri sağlamak için Etkileşime Dönüştürülebilir kavramını temel alır. Taban çizgisi düğmesi, yakın etkileşimler için ifadeli el girişi ve uzak etkileşimler için bakış + hava dokunma dahil olmak üzere tüm kullanılabilir giriş yöntemlerini destekler. Düğmeyi tetiklerken sesli komutu da kullanabilirsiniz.

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) HoloLens 2'nin doğrudan el izleme girişi için düğmenin hassas hareketini destekleyen kabuk stili düğmesidir. Betiği betikle PressableButton birleştirirInteractable.

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

• Simge ve metin fiziksel ortamda okunmak zordur
• Olayın ne zaman tetiklendiğinden anlamak zordur
• Saydam düzlem üzerinden görüntülenen hologramlar HoloLens 2'nin Derinlik LSR sabitleme özelliğiyle kararsız olabilir

Basılabilir düğmeleri kullanma

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

Sahnenizde bir Tuval oluşturun (GameObject -> Ui -> Canvas). Tuvalinizin Denetçi panelinde:

• "MRTK Tuvaline Dönüştür" seçeneğine tıklayın
• "NearInteractionTouchableUnityUI Ekle" seçeneğine 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/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs// PressableButtonUnityUICircular.prefab) veya PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) Tuval üzerinde.

Harmanlama tabanlı düğmeler

(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) veya PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) sahne içine sürüklemeniz PressableButtonHoloLens2 yeterlidir. Bu düğme ön uygulamaları, ifadeli el girişi ve bakış dahil olmak üzere çeşitli giriş türleri için görsel-işitsel geri bildirime sahip olacak şekilde zaten yapılandırılmıştır.

Ek eylemleri tetikleme amacıyla hem prefabrik hem de Etkileşime Dönüştürülebilir bileşende kullanıma sunulan olaylar kullanılabilir. HandInteractionExample sahnesindeki basılabilir düğmeler, küp renginde bir değişiklik tetikleme amacıyla Interactable'ın OnClick olayını kullanır. Bu olay, bakış, hava dokunma, el ışını gibi farklı giriş yöntemleri için tetiklenir ve basılabilir düğme betiği aracılığıyla fiziksel düğme basılır.

Basılabilir düğmenin OnClick olayını tetiklediğinde düğmeyi kullanarak PhysicalPressEventRouter yapılandırabilirsiniz. Örneğin OnClick'i basılıp serbest bırakılmak yerine düğmeye ilk basıldığında etkin olacak şekilde ayarlayabilirsiniz.

Belirli ifadeli el girişi durum bilgilerini kullanmak için basılabilir düğme olaylarını kullanabilirsiniz - Dokunma Başlangıcı, Dokunmatik Uç, Düğmeye Basıldı, Düğme Yayımlandı. Ancak bu olaylar hava dokunma, el ışınları veya göz girişlerine yanıt olarak tetiklenmez. Yakın ve uzak etkileşimleri desteklemek için Interactable'ın OnClick olayını kullanmanız önerilir.

Etkileşim durumları

Boşta durumunda, düğmenin ön plakası görünmez. Bir parmak yaklaştıkça veya bakış girişinden bir imleç yüzeyi hedefledikçe ön plakanın parlayan kenarlık görünür hale gelir. Ön plaka yüzeyinde parmak ucu konumunun ek vurgulanması vardır. Bir parmakla itildiğinde, ön plaka parmak ucuyla hareket eder. Parmak ucu ön plakanın yüzeyine dokunduğunda, dokunma noktasıyla ilgili görsel geri bildirim sağlamak için hafif bir darbe efekti gösterir.

HoloLens 2 kabuk stili düğmesinde, kullanıcının etkileşime olan güvenini artırmaya yönelik birçok görsel ipucu ve bütçe vardır.

Yakınlık ışığı	Odak vurgusu	Sıkıştırma kafesi	Tetikte nabız

Hafif darbe efekti, şu anda etkileşimde olan işaretçide bulunan ProximityLight(lar) öğesinin arandığı basılabilir düğme tarafından tetikleniyor. Herhangi bir yakınlık ışığı bulunursa, ProximityLight.Pulse darbeyi görüntülemek için gölgelendirici parametrelerine otomatik olarak animasyon uygulayan yöntem çağrılır.

Denetçi özellikleri

Düğmenin ön plakası için Box ColliderBox Collider .

Basılabilir Düğme El basın etkileşimi ile düğme hareketinin mantığı.

Fiziksel Basın Olay Yönlendiricisi Bu betik, el basını etkileşiminden Etkileşimli'ye olayları gönderir.

Etkileşime DönüştürülebilirEtkileşime Dönüştürülebilir , çeşitli etkileşim durumlarını ve olaylarını işler. HoloLens bakış, hareket ve ses girişi ile çevreleyici başlık hareket denetleyicisi girişi doğrudan bu betik tarafından işlenir.

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

NearInteractionTouchable.cs Herhangi bir nesneyi ifade edilmiş el girişiyle dokunabilir hale getirmek için gereklidir.

Prefabrik düzen

ButtonContent nesnesi ön plaka, metin etiketi ve simge içerir. FrontPlate, Button_Box gölgelendiricisini kullanarak dizin parmak ucunun yakınlığıyla yanıt verir. Parlayan kenarlıklar, yakınlık ışığı ve dokunma üzerinde darbe efekti gösterir. Metin etiketi TextMesh Pro ile oluşturulur. SeeItSayItLabel'in görünürlüğü Interactable'ın temasıyla denetlenebilir.

Simgeyi ve metni değiştirme

MRTK düğmeleri, düğmenin simgesini, metnini ve etiketini değiştirmenize yardımcı olması için bir ButtonConfigHelper bileşen kullanır. (Seçili düğmede öğeler yoksa bazı alanların bulunmayabileceğini unutmayın.)

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

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

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

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

Yeni düğme simgesi oluşturmak için:

1. Proje penceresinde Varlıklar'a sağ tıklayarak bağlam menüsünü açın. (Ayrıca ,Assets klasörü veya alt klasörlerinden biri.)

2. Karma Gerçeklik > Araç Seti > Oluştur Simge Kümesi'ne > tıklayın.

   

Dörtlü ve sprite simgeleri eklemek için bunları ilgili dizilerine sürüklemeniz yeterlidir. Char simgeleri eklemek için önce bir yazı tipi varlığı oluşturup atamanız gerekir.

MRTK 2.4 ve sonrasında özel simge dokularının bir IconSet içine taşınmalarını öneririz. Projedeki tüm düğmelerdeki varlıkları önerilen yeni 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.

Geçiş sırasında varsayılan simge kümesinde bir simge bulunmazsa, MixedRealityToolkit.Generated/CustomIconSets içinde özel bir simge kümesi oluşturulur. Bunun gerçekleştiğini belirten bir iletişim kutusu görüntülenir.

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

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

Ardından, Window > TextMeshPro Font Asset Creator aracılığıyla TextMeshPro > Yazı Tipi Varlığı Oluşturucusu'nu açın. HoloLens yazı tipi atlası oluşturmak için önerilen ayarlar aşağıdadır. 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

Yazı tipi varlığı oluşturulduktan sonra projenize kaydedin ve Simge Kümesi'nin Karakter Simgesi Yazı Tipi alanına atayın. Kullanılabilir Simgeler açılan listesi şimdi doldurulur. Bir simgeyi bir düğme tarafından kullanılabilir hale getirmek için simgeye tıklayın. Seçili Simgeler açılan menüsüne eklenir ve artık simgeye isteğe bağlı olarak bir etiket verebilirsiniz bölümünde gösterilirButtonConfigHelper.. Bu, simgenin çalışma zamanında ayarlanmasını sağlar.

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

Simge Kümenizi kullanmak için bir düğme seçin, öğesinin Simgeler açılan listesini ButtonConfigHelper genişletin ve simge kümesi alanına atayın.

Düğmenin boyutunu değiştirme

HoloLens 2'nin kabuk stili düğmesinin boyutu 32x32mm'dir. Boyutu özelleştirmek için düğme prefabında bu nesnelerin boyutunu değiştirin:

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

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

FrontPlate boyutunu güncelleştirme

Dörtlünün boyutunu güncelleştirme

Box Collider'ın boyutunu güncelleştirme

'Sınırları Düzelt' seçeneğine tıklayın

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

Konuşma Giriş İşleyicisi Basılabilir Düğme'deki Etkileşime Dönüştürülebilir betik zaten uygular IMixedRealitySpeechHandler. Sesli komut anahtar sözcüğü burada ayarlanabilir.

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

See-it, Say-it etiketi Basılabilir düğme prefabrikinde SeeItSayItLabel nesnesinin altında bir yer tutucu TextMesh Pro etiketi bulunur. Düğmenin sesli komut anahtar sözcüğünü kullanıcıya iletmek için bu etiketi kullanabilirsiniz.

Sıfırdan düğme yapma

Bu düğmelerin örneklerini PressableButtonExample sahnesinde bulabilirsiniz.

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

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

Denetçi panelindePressableButton, küp nesnesini Hareketli Düğme Görselleri'ne atayın.

Küpü seçtiğinizde nesnede birden çok renkli katman görürsünüz. Bu, Ayarlar'a basın altındaki uzaklık değerlerini görselleştirir. Tanıtıcıları kullanarak, ne zaman basıldığını (nesneyi taşıma) ve ne zaman olay tetikleneceğini yapılandırabilirsiniz.

Düğmeye bastığınızda, hareket eder ve betikte PressableButton.cs gösterilen TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() gibi uygun olayları oluşturur.

Sorun giderme

Düğmeniz çift basılıyorsa, Ön Göndermeyi Zorla özelliğinin etkin olduğundan ve Başlangıç İtme Mesafesi düzleminin Yakın Etkileşim Dokunabilir düzleminin önüne yerleştirildiğinden emin olun. Yakın Etkileşime Dokunabilir düzlem, aşağıdaki gif'teki beyaz okun başlangıcının önüne yerleştirilen mavi düzlemle gösterilir:

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

MRTK Standart Gölgelendiricisi, görsel geri bildirim eklemeyi kolaylaştıran çeşitli özellikler sağlar. Bir malzeme oluşturun ve gölgelendiriciyi Mixed Reality Toolkit/Standardseçin. Alternatif olarak, mrtk standart gölgelendiricisi kullanan altında /SDK/StandardAssets/Materials/ mevcut malzemelerden birini kullanabilir veya çoğaltabilirsiniz.

Fluent Seçenekleri'ni işaretleyin Hover Light ve Proximity Light altında. Bu, hem yakın el (Yakınlık Işığı) hem de uzak işaretçi (Vurgulama Işığı) etkileşimleri için görsel geri bildirim sağlar.

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

Betikte TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() gibi olaylar ortaya çıkarıldığından PressableButton.cs , kolayca sesli geri bildirim atayabiliriz. Unity'leri Audio Source küp nesnesine eklemeniz ve ardından AudioSource.PlayOneShot() öğesini seçerek ses klipleri atamanız yeterlidir. klasör altında /SDK/StandardAssets/Audio/ MRTK_Select_Main ve MRTK_Select_Secondary ses kliplerini kullanabilirsiniz.

4. Görsel durumlar ekleme ve uzak etkileşim olaylarını işleme

Etkileşimli, çeşitli giriş etkileşimleri türleri için görsel durum oluşturmayı kolaylaştıran bir betiktir. Ayrıca uzak etkileşim olaylarını da işler. Küp nesnesini ekleyin Interactable.cs ve sürükleyip Profiller altındaki Hedef alanına bırakın. Ardından ScaleOffsetColorTheme türünde yeni bir Tema oluşturun. Bu temanın altında, Odak ve Basılmış gibi belirli etkileşim durumlarının nesnesinin rengini belirtebilirsiniz. Ölçek ve Uzaklık'ı da denetleyebilirsiniz. Görsel geçişi sorunsuz hale getirmek için Kolaylaştırma'yı denetleyin ve süreyi ayarlayın.

Nesnenin hem uzak (el ışını veya bakış imleci) hem de yakın (el) etkileşimlerine yanıt verdiğini görürsünüz.

Özel düğme örnekleri

HandInteractionExample sahnesinde, her ikisi de kullanan PressableButtonpiyano ve yuvarlak düğme örneklerine bakın.

Her piyano tuşuna bir PressableButton ve bir NearInteractionTouchable betik atanır. Yerel İletme yönünün NearInteractionTouchable doğru olduğunu doğrulamak önemlidir. Düzenleyicide beyaz bir okla gösterilir. Okun düğmenin ön yüzünü işaretdiğinden emin olun:

Ayrıca bkz.

• Etkileşim kurulabilir
• Görsel Temalar