Düğmeler — MRTK2

Button Main

Düğme, kullanıcıya anında bir eylem tetikleme yolu sağlar. Karma gerçeklikteki en temel bileşenlerden biridir. MRTK çeşitli düğme prefableri sağlar.

MRTK'da düğme ön ekleri

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

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

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

Harmanlayıcı tabanlı düğmeler

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular 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 dairesel şekilli kabuk stili düğmesi

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

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_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 radyosu 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 radyosu 32x96mm

RadialRadyal

CheckboxCheckbox

ToggleSwitchToggleSwitch

Radyal düğme

Onay kutusu

Geçiş anahtarı

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseDüğme

1. nesil kabuk stili düğmesini HoloLens

Yuvarlak şekil basma düğmesi

Temel düğmesi

Button (Assets/MRTK/SDK/Features/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 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 tetiklemede sesli komutu da kullanabilirsiniz.

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

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

  • Simge ve metinlerin fiziksel ortamda okunmasının zor olması
  • Olayın ne zaman tetiklendiğinde anlaşılması zordur
  • Saydam düzlem üzerinden görüntülenen Hologramlar, HoloLens 2'nin Derinlik LSR sabitlemesi ile kararsız olabilir

Button plated

Basılabilir düğmeleri kullanma

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

Sahnenizde bir Canvas oluşturun (GameObject -> UI -> Canvas). Canvas için Denetçi panelinde:

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

Harmanlayıcı tabanlı düğmeler

(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) veya PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) sahneye sürüklemeniz PressableButtonHoloLens2 yeterlidir. Bu düğme prefableri, 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.

Prefab'ın kendisinde kullanıma sunulan olaylar ve Etkileşimli bileşen ek eylemleri tetikleme amacıyla 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ış, havada dokunma, el ışınları gibi farklı giriş yöntemleri için tetiklenir ve basılabilir düğme betiği aracılığıyla fiziksel düğmeye basılır.

How to Use Interactable

Basılabilir düğmenin OnClick olayını ne zaman tetikleyebileceğini düğme üzerinden PhysicalPressEventRouter yapılandırabilirsiniz. Örneğin, Basılı ve serbest bırakılmak yerine Düğmeye ilk basıldığında OnClick'i etkin olacak şekilde ayarlamak için Tıkladığınızda Etkileşime Dönüştürülebilir ayarını Basılı Olay olarak ayarlayabilirsiniz.

How to use events

Belirli el giriş durumu bilgilerini kullanmak için basılabilir düğme olaylarını kullanabilirsiniz - Dokunma Başlangıcı, Dokunmatik Son, Düğmeye Basıldı, Düğme Serbest Bırakıldı. Ancak bu olaylar havadan 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.

How to use Pressable Buttons

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 affordance vardır.

Proximity light Focus highlight Compressing cage Pulse on trigger
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

Button Structure

Kutu HarmanlayıcıBox Collider düğmesinin ön plakası için.

Basılabilir Düğme Elle basma etkileşimi ile düğme hareketinin mantığı.

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

Etkileşime DönüştürülebilirEtkileşim Kurulabilir , ç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 Kaynağı Ses geri bildirim klipleri için Unity ses kaynağı.

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

Prefab düzeni

ButtonContent nesnesi ön plaka, metin etiketi ve simge içerir. FrontPlate, Button_Box gölgelendiricisini kullanarak dizin parmak ucuna yakınlığa 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ı tarafından denetlendi.

Button Layout

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.)

Button Config Helper

Simge Kümeleri 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ü simgeleri bir dörtlüde kullanılarak MeshRendereriş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
  • Char 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. Project penceresinde Varlıklar'a sağ tıklayarak bağlam menüsünü açın. ( Varlıklar klasörünün veya alt klasörlerinden birinin içindeki herhangi bir boş alana sağ tıklayabilirsiniz.)

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

    Screenshot of the Icon Set menu item.

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 iconSet'e taşınmalarını öneririz. Projedeki tüm düğmelerin varlıklarını ö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.

Upgrade window dialogue

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.

Custom icon notification

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

İlk olarak simge yazı tipini Unity'ye aktarın. Windows makinelerde varsayılan HoloLens yazı tipini Windows/Fonts/holomdl2.ttf içinde 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ık 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 karakter dizisi alanına aşağıdaki Unicode aralığını 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

Button creation 1

Yazı tipi varlığı oluşturulduktan sonra, bunu projenize kaydedin ve Simge Kümesi'nin Karakter Simgesi Yazı Tipi alanına atayın. Kullanılabilir Simgeler açılan listesi artık doldurulur. 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.

Button creation 3

Button creation 2

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

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

Button Icon set

Düğmenin boyutunu değiştirme

HoloLens 2'nin kabuk stili düğmesinin boyutu 32x32mm'dir. Boyutu özelleştirmek için düğme prefabrikindeki 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 Button Size customization 1

Dörtlünün boyutunu güncelleştirme Button Size customization 2

Box Collider'ın boyutunu güncelleştirme Button Size customization 3

'Sınırları Düzelt' seçeneğine tıklayın Button Size customization 4

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

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

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 etiketi Basılabilir düğme ön başlığında SeeItSayItLabel nesnesinin altında TextMesh Pro etiketi yer tutucusu bulunur. Düğmenin sesli komut anahtar sözcüğünü kullanıcıya iletmek için bu etiketi kullanabilirsiniz.

Button Speech 3

Sıfırdan düğme yapma

Bu düğmelerin örneklerini PressableButtonExample sahnesinde bulabilirsiniz.

Pressable button cube 0

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 panelinde PressableButton, küp nesnesini Hareketli Düğme Görselleri'ne atayın.

pressable button cube 3

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

Pressable Buton cube 1Pressable button cube 2

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

Pressable button cube run 1

Sorun giderme

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

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. 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ındaki /SDK/StandardAssets/Materials/ mevcut malzemelerden birini kullanabilir veya çoğaltabilirsiniz.

Pressable button cube 4

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

pressable button cube 5pressable button cube run 2

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

PressableButton.cs Betik TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased() gibi olayları kullanıma sunduğumuzdan, 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.

pressable button cube 7Pressable Button Cube 6

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

Etkileşim kurulabilir , çeşitli giriş etkileşimleri 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'in 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ıldı gibi belirli etkileşim durumları için nesnenin 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.

Select profile theme

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

Pressable Button Cube Run 3Pressable Button Cube Run 4

Özel düğme örnekleri

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

Pressable Custom1Pressable Custom2

Her piyano tuşunun PressableButton bir NearInteractionTouchable ve betiği atanmıştı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ü gösterdiğinden emin olun:

Pressable Custom3

Ayrıca bkz.