按鈕 — MRTK2

按鈕讓使用者能立即觸發動作。 它是混合實境中最基礎的組成部分之一。 MRTK 提供各種按鈕預製件。

MRTK 中的按鈕預製件

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

Unity UI 圖片/圖形按鈕

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

基於碰撞器的按鈕

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) 基於 Interactable 概念，提供按鈕或其他互動表面的簡易 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) 建立畫布。 在您的畫布檢查面板中：

• 點擊「轉換成MRTK Canvas」
• 點選「新增 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) 拖曳到 Canvas。

基於碰撞器的按鈕

只要將 PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 或 PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) 拖曳到場景中即可。 這些按鈕預製件已設定為多種輸入（包括可動手部輸入與凝視）提供視聽回饋。

預製件本身暴露的事件以及 互動 元件都可以用來觸發額外的動作。  HandInteractionExample 場景中的可按按鈕會使用 Interactable 的 OnClick 事件來觸發方塊顏色的變更。 此事件會因不同類型的輸入方式而觸發，例如凝視、空中點擊、手射線，以及透過可按鍵腳本的實體按鍵操作。

你可以透過按鈕上的按鈕PhysicalPressEventRouter設定可按按鈕何時觸發 OnClick 事件。 例如，你可以將 OnClick 設定為按下按鈕時發射，而不是按下再放開，方法是將 Interactable On Click 設為 「按下事件」。

要利用特定的可動手部輸入狀態資訊，可以使用可按鍵事件——觸控開始、觸控結束、按下按鈕、放開按鈕。 不過這些事件不會因空氣點擊、手射或眼睛輸入而觸發。 為了支援近距離與遠距離互動，建議使用 Interactable 的 OnClick 事件。

交互作用態

在閒置狀態下，按鈕的前面板是看不到的。 當手指靠近或凝視輸入的游標指向表面時，前面板的發光邊框會顯現出來。 前面板表面還會強調指尖位置。 用手指推時，前板會隨著指尖移動。 當指尖觸碰前板表面時，會產生細微的脈衝效果，以視覺回饋觸點。

在 HoloLens 2 的殼狀按鈕中，有許多視覺提示和功能，能提升使用者對互動的信心。

近距光	焦點高亮	壓縮籠	脈衝觸發

這種微妙的脈衝效果是由可按按鈕觸發，該按鈕會尋找目前互動指標上存在的 ProximityLight (s) 。 若發現任何接近光源，會呼叫該 ProximityLight.Pulse 方法，自動動畫著色器參數以顯示脈衝。

檢查器特性

箱式對撞機Box Collider 按鈕的前面板。

可按按鈕 按鈕移動與手部按壓互動的邏輯。

實體媒體活動路由器 此腳本將手按互動的事件傳送至 Interactable。

Interactable 可處理各種類型的互動狀態與事件。 HoloLens 的凝視、手勢、語音輸入以及沉浸式頭戴裝置的動作控制器輸入，皆由此腳本直接處理。

音訊來源 Unity 音訊來源用於音訊回饋片段。

NearInteractionTouchable.cs 必須讓任何物體都能用可關節的手部操作觸碰。

預製佈局

ButtonContent 物件包含前面板、文字標籤和圖示。 FrontPlate 會根據食指的接近程度，使用 Button_Box 著色器來回應。 它會顯示發光邊框、接近光，以及觸感時的脈衝效果。 文字標籤是用 TextMesh Pro 製作的。 SeeItSayItLabel 的能見度受 Interactable 主題控制。

如何更改圖示和文字

MRTK 按鈕會使用 ButtonConfigHelper 元件協助你更改按鈕的圖示、文字和標籤。 (請注意，若選取的按鈕上沒有元素，某些欄位可能會缺失 )

建立與修改圖示集

圖示集是元件共用ButtonConfigHelper的圖示資產集合。 支援三種圖示 樣式 。

• 四邊形 圖示是用 MeshRenderer. 這是預設的圖示樣式。
• 精靈 圖示是用 SpriteRenderer. 如果你喜歡將圖示匯入為精靈圖集，或是想讓圖示資產與 Unity UI 元件共享，這很有用。 要使用此風格，您需要安裝 Windows (Sprite Editor 套件 -> 套件管理器 -> 2D 精靈)
• 角色 圖示是用 TextMeshPro 元件渲染的。 如果你喜歡使用圖示字體，這很有用。 要使用 HoloLens 圖示字型，你需要建立一個 TextMeshPro 字型資產。

要更改按鈕使用的樣式，請在 ButtonConfigHelper 中展開圖 示 下拉選單，從 圖示樣式 下拉選單中選擇。

要建立新的按鈕圖示：

1. 在 專案 視窗中，右鍵點擊 「資產 」以開啟右鍵選單。 (你也可以右鍵點擊 資產 資料夾或其子資料夾內的任何空白空間 )

2. 選擇「建立 > Mixed Reality > 工具包>圖示集」。

   

要新增四邊形和精靈圖示，只要將它們拖入各自的陣列即可。 要新增 Char 圖示，你必須先建立並指派一個字型資產。

在 MRTK 2.4 及以後版本中，我們建議將自訂圖示材質移入 IconSet。 要將專案中所有按鈕的資產升級為新推薦格式，請使用 ButtonConfigHelperMigrationHandler。 (Mixed Reality 工具包 -> 工具 -> 遷移視窗 -> 遷移處理程序選擇 -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

匯入 Microsoft.MixedRealityToolkit.Unity.Tools 套件以升級按鈕。

如果遷移過程中預設圖示集找不到圖示，則會在 MixedRealityToolkit.Generated/CustomIconSet 中建立自訂圖示集。 對話會顯示此事已發生。

建立 HoloLens 圖示字型資產

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

接著，透過 Windows > TextMeshPro 字型資產建立器開啟 TextMeshPro > 字型資產建立器。 以下是生成 HoloLens 字型圖集的建議設定。 要包含所有圖示，請將以下 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

字型資產產生後，將它儲存到你的專案，並指派到圖示集的 Char Icon 字體 欄位。 「 可用圖示 」下拉選單現在會被填滿。 要讓圖示可用按鈕使用，請點擊它。 它會被加入「 已選取圖示」 下拉選單，現在會出現在「 ButtonConfigHelper. 你可以選擇性地為該圖示加上標籤」中。 這讓執行時能設定圖示。

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

要使用你的圖示集，選擇一個按鈕，展開圖 ButtonConfigHelper 示下拉選單，並將其指派到 圖示集 欄位。

如何改變按鈕的大小

HoloLens 2 的外殼式按鈕尺寸為 32x32mm。 要自訂尺寸，請在按鈕預製件中更改這些物件的大小：

1. 前板
2. 後板下四邊形
3. 根節點上的盒式對撞機

接著，點擊按鈕根目錄中 NearInteractionTouchable 腳本中的 「Fix Bounds」 按鈕。

更新 FrontPlate 的尺寸 1

更新四邊的尺寸 2

更新盒子碰撞器的

點擊「修正界限」

語音指令 ( 看見，說說它 )

語音輸入處理器 Pressable Button 中的 Interactable 腳本已經實 IMixedRealitySpeechHandler作了 。 這裡可以設定語音指令關鍵字。

語音輸入檔案 此外，你需要在全域 語音指令設定檔中註冊語音指令關鍵字。

看見、說出標籤 可按按鈕的預製件在 SeeItSayItLabel 物件下方有一個 TextMesh Pro 的佔位標籤。 你可以用這個標籤來向使用者傳達按鈕的語音指令關鍵字。

如何從零開始製作按鈕

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

1. 建立一個可按立方體按鈕， (僅有近似互動)

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

在 PressableButton的檢查器面板中，將立方體物件指派到 Moving Button Visuals。

當你選擇立方體時，你會看到物件上有多層彩色圖層。 這會顯示在 按設定下的距離值。 利用把手，你可以設定何時開始按 (移動物件) ，以及何時觸發事件。

當你按下按鈕時，它會移動並產生腳本中 PressableButton.cs 顯示的適當事件，例如 () 觸控開始、 () 、按鈕按下 () 、按鈕釋放 () 。

疑難排解

如果你的按鈕執行雙重按鍵，請確保強制前 推 屬性啟用，且開始 推距離 平面放在 近互動可觸平面 前方。 近互動可觸平面由下方 GIF 中白色箭頭原點前方的藍色平面標示：

2. 為基本方塊按鈕添加視覺回饋

MRTK Standard Shader 提供多種功能，方便新增視覺回饋。 建立材質並選擇著色器 Mixed Reality Toolkit/Standard。 或者你可以使用或複製現有材質，該材質/SDK/StandardAssets/Materials/使用MRTK Standard Shader。

點選 Hover Light 並 Proximity Light 進入 流暢選項。 這讓近手 (近距離光) 和遠方指標 (懸停光) 互動都能提供視覺回饋。

3. 為基本方塊按鈕加入音訊回饋

由於 PressableButton.cs 腳本會暴露像是 TouchBegin () 、TouchEnd () 、ButtonPressed () 、ButtonReleases () 等事件，我們可以輕鬆地指派音訊回饋。 只要把 Unity 的檔案 Audio Source 加入方塊物件，然後選擇 AudioSource.PlayOneShot () 來指派音訊片段。 你可以在資料夾裡使用MRTK_Select_Main和MRTK_Select_Secondary音訊片段 /SDK/StandardAssets/Audio/ 。

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

Interactable 是一個腳本，能讓你輕鬆為各種輸入互動建立視覺狀態。 它也處理遠端互動事件。 把方塊物件加入 Interactable.cs 並拖放到 目標欄位的Profiles 裡。 接著，建立一個新的主題，類型為 ScaleOffsetColorTheme。 在這個主題下，你可以指定物件顏色，針對特定互動狀態，例如 聚焦 和 按壓。 你也可以控制縮放和偏移。 請檢查 緩和 設定時長，讓視覺過渡更順暢。

你會看到物體對遠 (手射線或凝視游標) 及近手 () 互動都有反應。

自訂按鈕範例

在 HandInteractionExample 場景中，請參考鋼琴和圓形按鈕的範例，兩者皆使用 PressableButton。

每個鋼琴鍵上都分配 PressableButton 了一個和一個 NearInteractionTouchable 劇本。 確認 的NearInteractionTouchable局部前向方向是否正確非常重要。 編輯器中以白色箭頭表示。 確保箭頭指向遠離按鈕正面：

另請參閱

• 可互動
• 視覺主題