按鈕 - MRTK2

按鈕可讓使用者觸發立即動作。 它是混合實境中最基本的元件之一。 MRTK 提供各種類型的按鈕預製專案。

MRTK 中的按鈕預製專案

資料夾下 MRTK/SDK/Features/UX/Interactable/Prefabs 按鈕預製專案的範例

Unity UI 影像/圖形型按鈕

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

以碰撞器為基礎的按鈕

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

HoloLens 2 殼層樣式按鈕與背板，可支援各種視覺回饋，例如框線光線、鄰近光線和壓縮的前板

HoloLens 2 的殼層樣式按鈕，不含背板

HoloLens 2的殼層樣式按鈕與圓形

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

寬 HoloLens 2 殼層樣式按鈕 32x96mm

具有共用背板的水準 HoloLens 2 按鈕列

具有共用背板的垂直 HoloLens 2 按鈕列

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 的殼層樣式複選框 32x32mm

HoloLens 2的殼層樣式參數 32x32mm

HoloLens 2的殼層樣式無線電 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 的殼層樣式複選框 32x96mm

HoloLens 2 的殼層樣式參數 32x96mm

HoloLens 2的殼層樣式無線電 32x96mm

星形

複選框

ToggleSwitch

星形按鈕

核取方塊

切換開關

ButtonHoloLens1

PressableRoundButton

按鈕

HoloLens 第 1 代的殼層樣式按鈕

圓形按鍵

基本按鈕

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) 是以可互動的概念為基礎，為按鈕或其他類型的互動式介面提供簡單的 UI 控件。 [基準] 按鈕支援所有可用的輸入方法，包括近距離互動的清楚手部輸入，以及遠距互動的注視 + 空中點選。 您也可以使用語音命令來觸發按鈕。

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 是 HoloLens 2 的殼層樣式按鈕，可支援直接手部追蹤輸入按鈕的精確移動。 它會結合 Interactable 腳本與 PressableButton 腳本。

針對 HoloLens 2，建議使用按鈕搭配不透明的背板。 不建議使用透明按鈕，因為下列可用性和穩定性問題：

• 使用實體環境很難讀取圖示和文字
• 很難瞭解事件何時觸發
• 透過透明平面顯示的全像投影可能不穩定，HoloLens 2 的深度 LSR 防震

如何使用可按下按鈕

Unity UI 型按鈕

在您的場景中建立畫布 (GameObject -> UI -> Canvas) 。 在 Canvas 的 [偵測器] 面板中：

• 點選 [轉換成 MRTK 畫布]
• 單擊 [新增 NearInteractionTouchableUnityUI]
• 將 Rect Transform 元件的 X、Y 和 Z 縮放比例設定為 0.001

然後，拖 PressableButtonUnityUI 曳 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab) 、 PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable /Prefabs/PressableButtonUnityUICircular.prefab) ，或 PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) 到畫布上。

以碰撞器為基礎的按鈕

只要將 PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 或 PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) 到場景。 這些按鈕預製項目已設定為具有各種輸入類型的音訊視覺回饋，包括手部輸入和注視。

在預製專案本身以及 可互動 元件中公開的事件可用來觸發其他動作。  HandInteractionExample 場景中的可按式按鈕會使用 Interactable 的 OnClick 事件來觸發 Cube 色彩的變更。 此事件會針對不同類型的輸入方法觸發，例如注視、空中點選、手部光線，以及透過可按下的按鈕腳本按下實體按鈕。

您可以透過按鈕上的 來設定可按下按鈕引發 OnClick 事件 PhysicalPressEventRouter 的時機。 例如，您可以設定 OnClick 在第一次按下按鈕時引發，而不是按下和放開，方法是將 [可 互動按兩下 ] 設定為 [ 按下事件]。

若要利用特定的手部輸入狀態資訊，您可以使用可按下的按鈕事件 - 觸控開始、 觸控結束、 按下按鈕、 按鈕已放開。 不過，這些事件不會引發以回應空中點選、手部光線或眼球輸入。 若要支援近端和遠距互動，建議使用 Interactable 的 OnClick 事件。

互動狀態

處於閑置狀態時，看不到按鈕的前板。 當手指接近或注視輸入中的游標以表面為目標時，前板的光暈框線會變成可見。 前板介面上的指尖位置有其他醒目提示。 使用手指推送時，前板會以指尖移動。 當指尖觸碰前端分色板的表面時，它會顯示細微的脈衝效果，以提供觸控點的可視化回饋。

在 HoloLens 2 殼層樣式按鈕中，有許多視覺提示和能供性可提高使用者對互動的信心。

近接光線	焦點醒目提示	壓縮網箱	觸發程式上的脈衝

可按下按鈕會觸發細微的脈衝效果，其會尋找位於目前互動指標上的 ProximityLight () 。 如果找到任何鄰近光源， ProximityLight.Pulse 則會呼叫 方法，這會自動產生著色器參數的動畫以顯示脈衝。

Inspector 屬性

方塊碰撞器Box Collider 用於按鈕的前板。

可按下按鈕 使用手按互動來移動按鈕的邏輯。

實體按事件路由器 此腳本會將事件從手部按下互動傳送至 Interactable。

可互動的互動可 處理各種類型的互動狀態和事件。 HoloLens 注視、手勢和語音輸入和沉浸式頭戴式裝置運動控制器輸入會由此腳本直接處理。

音訊來源 音訊回饋剪輯的 Unity 音訊來源。

NearInteractionTouchable.cs 必須使用清楚的手部輸入，讓任何物件都可觸控。

預製版面配置

ButtonContent 物件包含前板、文字標籤和圖示。 FrontPlate 會使用Button_Box著色器來回應食指指尖的鄰近性。 它會顯示光暈框線、近接光線，以及觸控的脈衝效果。 文字標籤是使用 TextMesh Pro 所建立。 SeeItSayItLabel 的可見度是由 Interactable 的主題所控制。

如何變更圖示和文字

MRTK 按鈕會使用 ButtonConfigHelper 元件來協助您變更按鈕的圖示、文字和標籤。 (請注意，如果選取的按鈕上沒有元素，某些字段可能不存在。)

建立和修改圖示集

圖示集是元件所ButtonConfigHelper使用的一組共享圖示資產。 支援三個圖示 樣式 。

• 四邊 形圖示會使用 在四邊形上轉譯 MeshRenderer。 這是預設圖示樣式。
• 使用 轉譯SpriteRenderer原件圖示。 如果您想要將圖示匯入為原件表，或想要與 Unity UI 元件共用圖示資產，這會很有用。 若要使用此樣式，您必須將 Sprite 編輯器 套件安裝 (Windows - 套件管理員 ->> 2D Sprite)
• 字元 圖示會使用元件轉 TextMeshPro 譯。 如果您想要使用圖示字型，這會很有用。 若要使用 HoloLens 圖示字型，您必須建立 TextMeshPro 字型資產。

若要變更按鈕使用的樣式，請展開 ButtonConfigHelper 中的 [圖示 ] 下拉式清單，然後從 [ 圖示樣式 ] 下拉式清單中選取。

若要建立新的按鈕圖示：

1. 在 [ 專案] 視窗中，以滑鼠右鍵按兩下 [資產 ] 以開啟作功能表。 (您也可以在 Assets 檔案 夾或其中一個子資料夾內的任何空白空間上按下滑鼠右鍵。)

2. 選取 [建立 > Mixed Reality > 工具>組圖示集]。

   

若要新增四邊形和原件圖示，只要將它們拖曳到其各自的陣列即可。 若要新增 Char 圖示，您必須先建立並指派字型資產。

在 MRTK 2.4 及更新版本中，我們建議將自定義圖示紋理移至 IconSet。 若要將專案中所有按鈕上的資產升級為新的建議格式，請使用 ButtonConfigHelperMigrationHandler。 (Mixed Reality 工具組 -> 公用程式 -> 移轉視窗 -> 移轉處理程式選取專案 -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

匯入升級按鈕所需的 Microsoft.MixedRealityToolkit.Unity.Tools 套件。

如果在移轉期間的預設圖示集中找不到圖示，則會在MixedRealityToolkit.Generated/CustomIconSets 中建立自定義圖示集。 對話框會指出這已發生。

建立 HoloLens 圖示字型資產

首先，將圖示字型匯入 Unity。 在 Windows 電腦上，您可以在 Windows/Fonts/holomdl2.ttf 中找到預設的 HoloLens 字型。將此檔案複製並貼到您的 Assets 資料夾中。

接下來，透過 視窗 > TextMeshPro 字型資產建立者開啟 TextMeshPro > 字型資產建立者。 以下是產生 HoloLens 字型 atlas 的建議設定。 若要包含所有圖示，請將下列 Unicode 範圍貼到 [字元序列] 欄 位中：

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

一旦產生字型資產，請將它儲存到您的專案，並將它指派給圖示集的 [字元圖示字 型] 字段。 現在會填 入 [可用的圖示 ] 下拉式清單。 若要讓圖示可供按鈕使用，請按兩下它。 它將會新增至 [ 選取的圖示 ] 下拉式清單，現在會顯示在 ButtonConfigHelper. [您可以選擇性地圖示提供標籤] 中。 這可在運行時間設定圖示。

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

若要使用圖示集選取按鈕，請展開 中的 [圖示] 下拉 ButtonConfigHelper 式清單，並將它指派給 [圖示集] 字段。

如何變更按鈕的大小

HoloLens 2 殼層樣式按鈕的大小為32x32mm。 若要自定義維度，請在按鈕預製項目中變更這些物件的大小：

1. FrontPlate
2. BackPlate 下的四邊形
3. 根目錄上的方塊碰撞器

然後，按下按鈕根目錄中 NearInteractionTouchable 腳本中的 [ 修正界限 ] 按鈕。

更新 FrontPlate 的大小

更新四邊大小

更新 Box Collider 大小

按兩下 [修正界限]

語音命令 ('see-it， say-it')

語音輸入處理程式 可按下按鈕中的 可互動 文稿已實作 IMixedRealitySpeechHandler。 您可以在這裏設定語音命令關鍵字。

語音輸入配置檔 此外，您必須在全域語音命令 配置檔中註冊語音命令關鍵詞。

See-it， Say-it label 可按下的按鈕預製專案在 SeeItSayItLabel 物件底下有佔位元 TextMesh Pro 標籤。 您可以使用此標籤，將按鈕的語音命令關鍵字傳達給使用者。

如何從頭開始製作按鈕

您可以在 PressableButtonExample 場景中找到這些按鈕的範例。

1.建立具有 Cube 的可按式按鈕 (僅)

1. 建立 Unity Cube (GameObject > 3D 物件 > Cube)
2. 新增 PressableButton.cs 腳本
3. 新增 NearInteractionTouchable.cs 腳本

在 的 [ PressableButton偵測器] 面板中，將 Cube 物件指派給 移動按鈕視覺效果。

當您選取 Cube 時，您會在 物件上看到多個彩色層次。 這會將 [按下設定] 下的距離值可視化。 使用句柄，您可以設定何時開始按下 (將物件移) 以及觸發事件的時機。

當您按下按鈕時，它會移動併產生腳本中 PressableButton.cs 公開的適當事件，例如 TouchBegin () 、TouchEnd () 、ButtonPressed () 、ButtonReleased () 。

疑難排解

如果您的按鈕正在執行按兩下，請確定 [強制前置推送 ] 屬性為作用中，而且 [ 開始推送距離 ] 平面會放在 [近距離互動可觸控 ] 平面前面。 Near Interaction Touchable 平面會以放置在下列 gif 中白色箭號原點前面的藍色平面表示：

2.將視覺回饋新增至基本 Cube 按鈕

MRTK Standard 著色器提供各種功能，可讓您輕鬆地新增可視化回饋。 建立材質並選取著色器 Mixed Reality Toolkit/Standard。 或者，您可以使用或複製 下使用 MRTK Standard 著色器的其中一個現有材/SDK/StandardAssets/Materials/質。

在 [Fluent 選項] 底下核Hover Light取 和 Proximity Light 。 這可讓您針對近 (近似光) 和遠距指標 (暫留光) 互動提供可視化回饋。

3.將音訊回饋新增至基本 Cube 按鈕

由於 PressableButton.cs 腳本會公開 TouchBegin () 、TouchEnd () 、ButtonPressed () 、ButtonReleased () 等事件，因此我們可以輕鬆地指派音頻意見反應。 只要將 Unity Audio Source 新增至 Cube 物件，然後選取 AudioSource.PlayOneShot () 即可指派音頻剪輯。 您可以在資料夾下 /SDK/StandardAssets/Audio/ 使用MRTK_Select_Main和MRTK_Select_Secondary音訊剪輯。

4.新增視覺狀態並處理遠距互動事件

Interactable 是一種腳本，可讓您輕鬆地為各種類型的輸入互動建立視覺狀態。 它也會處理遠距互動事件。 將 Interactable.cs Cube 物件加入並拖放到 [配置檔] 下的 [目標] 字段。 然後，使用 ScaleOffsetColorTheme 類型建立新的 Theme。 在這個主題下，您可以針對特定互動狀態指定物件的色彩，例如 Focus 和 Pressed。 您也可以控制縮放和位移。 檢查 Easing 並設定持續時間，讓視覺轉換順暢。

您會看到對象回應遠 (手部光線或註視游標) ，以及接近 (手部) 互動。

自訂按鈕範例

在 HandInteractionExample 場景中，請參閱兩者都使用 PressableButton的彈道和圓形按鈕範例。

每個大寫金鑰都已指派 和 PressableButtonNearInteractionTouchable 腳本。 請務必確認 的本機 轉送 方向 NearInteractionTouchable 正確無誤。 它是由編輯器中的白色箭號表示。 請確定箭號指向按鈕的前端：

另請參閱

• 可互動
• 視覺主題