練習 - 按鈕和動態功能表的面板

已完成

有數種方式可以提供輸入。 輸入會觸發特定事件並執行一些變更。 UI 元件可協助使用者在場景中與全像投影互動。

建立按鈕的靜態面板

1. 在 [階層] 視窗中，以滑鼠右鍵按一下 RoverExplorer 物件並選取 [建立空物件]，將空白物件新增為 RoverExplorer 的子系。 將物件命名為 Buttons，並設定轉換元件，如下所示：

   • 位置：X = -0.6、Y = 0.036、Z = -0.5
   • 旋轉：X = 90、Y = 0、Z = 0
   • 縮放：X = 1、Y = 1、Z = 1

   

2. 在 [專案] 視窗中，瀏覽至 [資產]>[MRTK.Tutorials.GettingStarted]>[預製物件] 資料夾，按一下並將 PressableCylinderButton 預製物件拖曳到 Buttons 物件，然後以滑鼠右鍵按一下 PressableCylinderButton 並選取 [複製] 建立複本，重覆上述步驟直到您在 Buttons 下共有三個 PressableCylinderButton 物件為止：

   

   視窗會提示您匯入 TextMesh Pro。 選取 [匯入 TMP Essentials] 的第一個選項。

3. 在 [階層] 窗格中，選取 Buttons 物件，然後在 [偵測器] 窗格中，選取 [新增元件] 來新增 [物件列] 元件。 將其設定如下：

   • 物件列流程方向：水平
   • 間距：X = 0.2, Y = 0

   將 Buttons 底下的每個物件指派給 [物件列] 元件上的 [物件列物件] 清單：

   

4. 在 [階層] 窗格中，將按鈕命名為 Hints、Explode 和 Reset。 針對每個按鈕，變更 [可按下按鈕] 元件中 [進階 StatefulInteractable 設定] 下的 SpeechRecognitionKeyword 屬性，以符合按鈕名稱：

   

5. 在 [階層] 窗格中，選取 Hints 按鈕物件，然後在 [偵測器] 視窗中，設定 PressableButton.OnClicked() 事件，如下所示：

   • 將 RoverAssembly 物件指派給 [無 (物件)] 欄位
   • 從 [沒有函式] 下拉式清單中，選取 PlacementHintsController>TogglePlacementHints ()，以將此函式設定為觸發事件時所要執行的動作

   

6. 在 [階層] 窗格中，選取 Explode 按鈕物件，然後在 [偵測器] 視窗中，設定 PressableButton.OnClicked() 事件，如下所示：

   • 將 RoverAssembly 物件指派給 [無 (物件)] 欄位
   • 從 [沒有函式] 下拉式清單中，選取 [ExplodedViewController]>[ToggleExplodedView()]，以將此函式設定為觸發事件時所要執行的動作

   

7. 按下 [開始遊戲] 按鈕進入遊戲模式。 按住空格鍵按鈕來啟動手勢功能，並使用滑鼠按下 Hints 按鈕來切換放置提示物件的可見度：

   

8. Explode 按鈕將開啟和關閉分解檢視：

   

   我們稍後會在課程模組中實作 [重設] 按鈕。

建立一個跟隨使用者的動態功能表

1. 在 [專案] 窗格中，瀏覽至 [套件]>[MRTK UX 元件]>[NearMenu] 資料夾，按住 NearMenuBase 預製物件並拖曳至 [階層] 視窗，將其轉換 [位置] 設定為 X = 0、Y =-0.4、Z = 0，並依照下列方式進行設定：

   • 確認 SolverHandler 元件的 [追蹤目標類型] 設定為 [頭部]
   • 核取 RadialView 規劃元件旁的核取方塊，使其預設為啟用

   

2. 在 [階層] 視窗中，將物件重新命名為 Menu，然後展開其 [MenuContent-HorizontalLayout (Menu 和 Pin) > Buttons-GridLayout (Buttons)] 子物件，以顯示三個按鈕：

   

3. 將 [Buttons-GridLayout (Buttons)] 中的第一個按鈕重新命名為 Indicator，然後在 [階層] 視窗中，設定 Indicator 遊戲物件，如下所示：

   • 選取 [Frontplate > AnimatedContent > Icon > Label] 物件，並變更 TextMesh Pro 元件以符合按鈕的名稱。 請確定 Label 物件已在階層中啟用
   • 將類似＞形箭號的 Indicator 物件指派給 [無 (物件)] 欄位，然後從 [沒有函式] 下拉式清單中選取 [GameObject > SetActive (bool)]，以設定 PressableButton.OnClicked() 事件 (確認已核取引數核取方塊)
   • 選取 [Frontplate > AnimatedContent > Icon > UIButtonFontIcon] 物件，並將圖示變更為 [字型圖示選取器] 元件上的搜尋圖示。 您可以在圖示清單中找到此圖示，或將 [目前圖示名稱] 設定為 [圖示 130]

   

4. 若要停用 ＞形箭號 Indicator 物件，請在 [階層] 窗格中，選取看起來像 ＞形箭號的 Indicator 物件，然後在 [偵測器] 窗格中：

   • 清除其名稱旁的核取方塊，使其預設為非作用中
   • 使用 [新增元件] 按鈕來新增 Directional Indicator Controller (指令碼) 元件

   

5. 將第二個按鈕重新命名為 TapToPlace，然後在 [階層] 視窗，將 TapToPlace 遊戲物件設定如下：

   • 選取 [Frontplate > AnimatedContent > Icon > Label] 物件，並變更 TextMesh Pro 元件以符合按鈕的名稱。 請確定 Label 物件已在階層中啟用
   • 將 RoverExplorer >RoverAssembly 物件指派給 [無 (物件)] 欄位，然後從 [沒有函式] 下拉式清單中選取 [TapToPlace]>[bool Enabled] 來設定 PressableButton.OnClicked() 事件 (確認已核取引數核取方塊)
   • 選取 [Frontplate > AnimatedContent > Icon > UIButtonFontIcon] 物件，並將圖示變更為 [字型圖示選取器] 元件上的手部圖示。 您可以在圖示清單中找到此圖示，或將 [目前圖示名稱] 設定為 [圖示 13]

   

6. 在 [階層] 視窗中，選取 RoverAssembly 物件，然後在 [偵測器] 視窗中，設定 Tap To Place (指令碼) 元件，如下所示：

   • 取消核取其名稱旁的核取方塊，使其預設為非作用中
   • 在 On Placing Stopped () 事件區段中，選取 + 圖示以新增事件：
   • 將 RoverExplorer>RoverAssembly 物件指派給 [無 (物件)] 欄位
   • 從 [沒有函式] 下拉式清單中，選取 [TapToPlace]>[bool Enabled]，以在觸發事件時更新此屬性值
   • 確認引數核取方塊為未核取