專案範例和使用案例 > 藍色幫浦線上教學 > 新增 2D 按鈕
  
新增 2D 按鈕
現在,您已完成體驗的 3D 部分,讓我們來新增某些 2D 元素。
新增資源
1. 在畫布工具列中,按一下「2D」
2. 「專案」窗格中,按一下「資源」旁邊的綠色加號 (+)。
3. 「新增資源」視窗即會出現。
4. 導覽至您擷取 BluePumpKit.zip 檔案內容的位置。
5. 使用 Ctrl 鍵可選取下列檔案:
play.png - 用於啟動拆解/重新組裝動畫的圖像
info.png - 用於顯示或隱藏保固資訊卡的圖像
info.png - 用於顯示或隱藏 3D 標籤的圖像
6. 按一下「開啟」
7. 「新增資源」視窗上,按一下「新增」
8. 「新增資源」視窗上,按一下「關閉」
新增按鈕
1. 「專案」窗格中,導覽至「檢視」 > 「首頁」 > 「2D 疊加」
2. 拖曳「格線配置」小工具至底端面板上。
* 
向下捲動畫布來檢視底端面板。
3. 「專案」窗格中,導覽至「檢視」 > 「首頁」 > 「2D 疊加」 > 「2D 主體」 > 「底端面板」 > 「gridLayout-1」,按一下「row-1」將其選取。
4. 「詳細資訊」窗格中,按「新增欄」2 次。底端面板現在會分成 3 個相等的區段。
5. 選取畫布上的第一欄,或按一下專案樹狀目錄中的「column-1」
6. 「詳細資訊」窗格中,將「對齊」設定為「置中」
7. 「column-2」「column-3」重複此流程,將其「對齊」也設定為「置中」
8. 拖曳「開關按鈕」小工具至第一欄。
* 
我們有「按鈕」和「開關按鈕」共 2 種小工具;請確認您使用了「開關按鈕」
9. 「詳細資訊」窗格中,使用欄位下的下拉式功能表,將「按下時的圖樣」「未按下時的圖樣」都變更為 play.png 圖像。
10. 拖曳「開關按鈕」小工具至第二欄。
11. 「詳細資訊」窗格中,使用欄位下的下拉式功能表,將「按下時的圖樣」「未按下時的圖樣」都變更為 info.png 圖像。
12. 拖曳「開關按鈕」小工具至第三欄。
13. 「詳細資訊」窗格中,使用欄位下的下拉式功能表,將「按下時的圖樣」「未按下時的圖樣」都變更為 i.png 圖像。
14. 按鈕配置看起來應像這樣:
繫結開關按鈕
1. 選取第一欄中的開關按鈕,或按一下專案樹狀目錄中的「toggleButton-1」 (播放圖示)。
2. 「詳細資訊」窗格中,向下捲動至「點擊」事件,然後拖曳「點擊」事件旁邊的繫結圖示 至專案樹狀目錄中的「model-1」上。
3. 「選取繫結目標」視窗上,選取「播放」
現在,當按播放開關按鈕時,藍色幫浦的拆解動畫即會播放。如果您再次按播放開關按鈕,則會重新組裝幫浦。
4. 接下來,建立一個覆蓋截面,可以選擇是否隱藏或顯示。
5. 在畫布上,按一下「中心面板」將其選取。
6. 拖曳「卡片」小工具至畫布區域的中心面板中。這會建立可新增其他小工具的靜態區域。
7. 拖曳 2 個「數值顯示」小工具至中心面板的卡片上。
8. 按一下頂部「數值顯示」將其選取,或在專案樹狀目錄中選取「valueDisplay-1」
9. 「詳細資訊」窗格的「標籤」欄位中輸入 Owner
10. 以相同的方式,在「數值」欄位中輸入您自己的名稱。
11. 按一下底部「數值顯示」將其選取,或在專案樹狀目錄中選取「valueDisplay-2」
12. 「標籤」欄位中輸入 Warranty Status
13. 「數值」欄位中輸入 Active
14. 由於我們有「卡片」小工具,就繫結至按鈕以便使其可見或不可見。選取第二欄中的開關按鈕,或按一下專案樹狀目錄中的「toggleButton-2」
15. 請確定沒有選取「已按下」旁邊的核取方塊。這會導致開關按鈕在未按下時開始,使您的「保固資訊卡」在開始時不顯示。
16. 「詳細資訊」窗格中,拖曳「已按下」旁邊的繫結圖示 至專案樹狀目錄中的「card-1」上。
* 
「詳細資訊」下有 2 個不同的「已按下」區段。在此步驟中,選取「詳細資訊」窗格最上方的「已按下」
17. 「選取繫結目標」視窗中,選取「可見」
現在,每當在 Vuforia View 中按資訊開關按鈕時,您建立的卡片會變成可見或不可見。這是取得 AR 體驗詳細資訊,而不使用向上螢幕的絕佳方式。
18. 接下來,讓我們將上一個開關按鈕隱藏或顯示 3D 標籤。選取第三欄中的開關按鈕,或按一下專案樹狀目錄中的「toggleButton-3」
19. 請確定已選取「已按下」旁邊的核取方塊。這會導致開關按鈕在按下時開始,使您的「3D 標籤」從開始時就顯示。
20. 「詳細資訊」窗格中,拖曳「已按下」旁邊的繫結圖示 至專案樹狀目錄中的「3DLabel-1」上。
* 
「詳細資訊」下有 2 個不同的「已按下」區段。在此步驟中,選取「詳細資訊」窗格最上方的「已按下」
21. 「選取繫結目標」視窗上,選取「可見」
現在,每當在 Vuforia View 中按下「i」開關按鈕時,您建立的 3D 標籤會變成可見或不可見。
接下來,我們將為體驗命名