Düğmeler

Düğme Ana

Düğme, kullanıcıya anında eylem tetiklemek için bir yol sağlar. Karma gerçeklikte en temel bileşenlerden biri. MRTK, çeşitli türlerde düğme prefab'ları sağlar.

MRTK'de düğme önfazları

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

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

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

Collider tabanlı düğmeler

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

HoloLens ışığı, yakınlık ışığı ve sıkıştırılmış ön kaplama gibi çeşitli görsel geri bildirimleri destekleyen arkaplate ile birlikte 2'nin kabuk stilinde düğmesi

HoloLens olmadan 2'nin kabuk stilinde düğmesi

HoloLens şekline sahip 2'nin kabuk stilinde düğmesi

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

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

Yatay HoloLens paylaşılan arkaplate ile 2 düğme çubuğu

Paylaşılan HoloLens dikey 2 düğme çubuğu

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2'nin kabuk stili onay kutusu 32x32mm

HoloLens 2'nin kabuk stili anahtarı 32x32mm

HoloLens 2'nin kabuk stili radyo 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2'nin kabuk stili onay kutusu 32x96mm

HoloLens 2'nin kabuk stili anahtarı 32x96mm

HoloLens 2'nin kabuk stili radyo 32x96mm

RadyalRadyal

Onay KutusuOnay Kutusu

Geçiş/Geçiş GeçişGeçişLeri

Radyal düğme

Onay kutusu

Düğmeyi açma/kapatma

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Düğme TemelDüğmesi

HoloLens 1. nesil kabuk stili düğmesi

Yuvarlak şekil itme düğmesi

Temel düğmesi

Button(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab), düğmeler veya Button diğer etkileşimli yüzey türleri için kolay kullanıcı arabirimi denetimleri sağlamak için Etkileşimli kavrama dayalıdır. Temel düğme, yakın etkileşimler için el girişlerinin yanı sıra uzak etkileşimler için bakış + havadan dokunma dahil olmak üzere tüm kullanılabilir giriş yöntemlerini destekler. Düğmeyi tetiklemek için 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 kesin hareketini destekleyen kabuk stili düğmesidir. Betiği Interactable betikle PressableButton birleştirir.

2 HoloLens için düğmelerin opak bir arkaplate ile kullanılması önerilir. Saydam düğmeler şu kullanılabilirlik ve kararlılık sorunları nedeniyle önerilmez:

  • Simge ve metinleri fiziksel ortamda okumak zordur
  • Olayın ne zaman tetiklendiğinden anlamak zordur
  • Hologramlar düzlem üzerinden görüntülenen her şey, 2 Derinlik LSR sabitle HoloLens kararsız olabilir

Düğmeyle kaplandı

Basılabilir düğmeleri kullanma

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

Sahnenizi tuval olarak oluşturun (GameObject - > UI - > Tuval). Tuvalin Denetçi panelinde:

  • "MRTK Tuvali'ne 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 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Press Tuvalde PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) veya (Assets/MRTK/SDK/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab).

Collider tabanlı düğmeler

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

Önfazla ortaya çıkar ve Etkileşime değiştirilebilir bileşen ek eylemleri tetiklemek için kullanılabilir. HandInteractionExample sahnesinde basılabilir düğmeler, küpün renginde bir değişiklik tetiklemek için Interactable'ın OnClick olayı kullanır. Bu olay; bakış, havadan dokunma, el yazısı gibi farklı giriş yöntemleri için tetiklenir ve fiziksel düğme, basılabilir düğme betiği aracılığıyla basıldığında tetiklenir.

Etkileşime Değiştirilebilir Kullanma

Düğmenin üzerinde yer alan düğmesiyle OnClick olayına basılabilir düğmenin ne zaman etkin olduğunu yapılandırabilirsiniz. Örneğin, Düğmeye ilk basıldığında, basıldığında ve serbest bırakıldığında, Basıldığında Olay'a Etkileşime Değiştirilebilir seçeneğini ayarerek OnClick'i başlat olarak ayarlayın.

Olayları kullanma

Belirli el girişi durum bilgilerden yararlanacak şekilde, basılabilir düğme olaylarını kullanabilirsiniz: Touch Begin, Touch End, Button Pressed, Button Released. Ancak bu olaylar havadan dokunma, el-grafi veya göz girişine yanıt olarak değil. Hem yakın hem de uzak etkileşimleri desteklemek için Interactable'ın OnClick olayı kullanılması önerilir.

Basılabilir Düğmeleri kullanma

Etkileşim durumları

Boşta durumda, düğmenin ön numarası görünmez. Bir parmak yaklaştıkça veya girişe bakan bir imleç yüzeyi hedeflese, ön yüzeyin parlak kenarlığı görünür hale gelir. Ön yüzeyde parmak izi konumunun ek vurguları vardır. Parmakla birlikte itilirken ön parmak parmakla hareket eder. Parmak ucu ön yüzeyine dokunduğunda, dokunma noktasının görsel geri bildirimini vermek için hafif bir darbe etkisi gösterir.

Bu HoloLens 2 kabuk stili düğmesinde, kullanıcının etkileşime olan güvenini artırmaya yardımcı olacak birçok görsel ipucu ve destek vardır.

Yakınlık ışığı Odak vurgulama Sıkıştırma sıkıştırma Tetikleyicide darbe
Yakınlık ışığı Odak vurgulama Sıkıştırma sıkıştırma Tetikleyicide darbe

Hafif darbe etkisi, o anda etkileşimde olan işaretçide bulunan ProximityLight'ları(ları) bulan basılabilir düğmeyle tetiklenir. Herhangi bir yakınlık ışığı bulunursa yöntemi çağrılır ve bu yöntem, bir darbeyi görüntülemek için ProximityLight.Pulse gölgelendirici parametrelerine otomatik olarak animasyon sağlar.

Denetçi özellikleri

Düğme Yapısı

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şime gelen olayları Etkileşime değiştirilebilir'e gönderir.

Etkileşimedeğ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 yapmak için gereklidir.

Prefab düzeni

ButtonContent nesnesi ön tablo, metin etiketi ve simge içerir. FrontPlate, gölgelendiriciyi kullanarak dizin parmak Button_Box yanıt verir. Parıldayan kenarlıkları, yakınlık ışığını ve dokunma üzerindeki bir kalp atışı etkisini gösterir. Metin etiketi, TextMesh Pro. SeeItSayItLabel'ingö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ı kümesidir. Üç simge stili de desteklenir.

  • Dörtlü simgeleri, kullanılarak dörtlü üzerinde işlenir. Bu, varsayılan simge stilidir.
  • Sprite simgeleri kullanılarak işlenir. Simgelerinizi bir 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ıdır. Bu stili kullanmak için Sprite Düzenleyicisi paketini (Windows - Paket Yöneticisi - > 2B Sprite) yüklemeniz gerekir
  • Karakter simgeleri bir bileşen kullanılarak işlenir. Bu, simge yazı tipi kullanmayı tercih ediyorsanız kullanışlıdır. HoloLens simgesini 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 Simge > Kümesi. Dörtlü ve sprite simgeleri eklemek için bunları ilgili dizilerine sürüklemek gerekir. Char simgeleri eklemek için önce bir yazı tipi varlığı oluşturmanız ve atamalısınız.

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.

Ö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, Window TextMeshPro Yazı Tipi Varlık Oluşturucusu aracılığıyla TextMeshPro > Yazı Tipi Varlık Oluşturucusu'açın. Yazı tipi atlas'ı oluşturmak için önerilen HoloLens İşte. 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 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 ButtonConfigHelper

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 uygulanmıştır. Burada bir sesli komut anahtar sözcüğünü ayarlamak gerekir.

Düğmeler Konuşma

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

Düğme konuşma 2

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

Düğme Konuşma 3

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

Bu düğmelerin örneklerini PressableButtonExample sahnesinde bulabilirsiniz.

Basılabilir düğme küpü 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 PressableButton

basılabilir düğme küpü 3

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

Basılabilir Buton küpü 1Basılabilir düğme küpü 2

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

Basılabilir düğme küpü çalıştırma 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 malzemelerden birini kullanabilir /SDK/StandardAssets/Materials/ veya çoğaltın.

Basılabilir düğme küpü 4

Hover LightProximity LightHover Light' ne bakın. Bu, hem yakın hem de (yakınlık ışığı) ve işaretçi (vurgulu ışık) etkileşimleri için görsel geri bildirim sunar.

önlanabilir düğme küpü 5öncedençözümlenemeyen düğme küpü çalıştırma 2

3. temel küp düğmesine ses geri bildirimi ekleme

PressableButton.csBetik, TouchBegin (), TouchEnd (), Buttonbasılmış (), düğme yayınlandı () gibi olayları kullanıma sunduğundan, kolayca ses geri bildirimi atayabiliriz. Yalnızca Unity Audio Source 'yi küp nesnesine ekleyin ve ardından AudioSource. PlayOneShot () öğesini seçerek ses klipleri atayın. MRTK_Select_Main ve MRTK_Select_Secondary ses kliplerini klasörler altında kullanabilirsiniz /SDK/StandardAssets/Audio/ .

önceden çözümlenemeyen düğme küpü 7önceden çözümlenemezdüğme küpü 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, profilleraltındaki Interactable.cs alana ekleyin ve sürükleyin ve bırakın. Ardından, ScaleOffsetColorThemetüründe yeni bir tema oluşturun. Bu temada, odak ve basılangibi 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.

Önlanabilir düğme küpü çalıştırması 3öncedençözümlenemeyen düğme küpü çalıştırma 4

Özel düğme örnekleri

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

Önceden çözümlenemeyen Özel1presCustom2

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 . Düzenleyicide beyaz oklu temsil edilir. Okun düğmenin ön yüzünden Uzaklaştığından emin olun:

PresCustom3

Ayrıca bkz.