本指南將以 Charades 遊戲的形式,說明構成簡易沉浸體驗的元件。遊戲非常適合沉浸式使用,因為大多數遊戲都需要自訂 UI 和輸入控制項。
過程中,您也會學到設計、開發和發布秘訣,這些訣竅對於建構您自己的 Glassware 十分重要。
事前準備
你可以前往 GitHub 取得《Charades》遊戲的完整原始碼。開始之前,請先將其匯入 Android Studio,因為本指南涉及大量相關知識。
- 在「快速入門」畫面中,依序點選「Check out from version Control」>「Git」。
- 從 Charades 複製複製網址。
- 將複製網址貼到 Vcs 存放區網址中,然後按一下「Clone」(複製)。
- 在下一個畫面中,點選「是」。
- 在下一個畫面中,按一下「OK」。
- 按一下「Play」按鈕,建構專案並在已連結的 Glass 上執行。請務必查看範例的
README
,瞭解叫用詳細資料。
課程內容
您將瞭解如何使用 Android SDK 的元件,建構大量夏威夷沉浸式體驗,然後再透過 GDK 與 Glass 體驗緊密結合。下方列出您需要瞭解的主題:
- 使用我們提供的設計資源來設計 UI 流程
- 設計語音觸發條件來啟動 Glassware
- 使用 Android 活動定義遊戲的 UI 結構
- 建構 Android 選單項目,讓使用者選擇遊戲選項
- 透過主選單中的語音觸發條件整合至 Glass 體驗
- 使用 GDK 手勢偵測工具偵測使用者輸入內容並執行自訂動作
- 學習簡單的 Android UI 實作項目,為玻璃風格增添更多潤飾效果
- 瞭解發布程序,以及我們在發布 Glassware 時的考量重點
設計
在開始開發之前,請花點時間設計您的 Glassware這麼做可讓您瞭解哪種 UI 流程在 Glass 中成效最佳、要使用的語音指令,以及資訊卡的外觀。
當然,設計 Glassware 需要反覆式的過程,而現在設計的部分內容也會改變,但若能在一開始就完成這大部分作業,將是打造良好體驗的關鍵。
UI 流程
設計 UI 流程是一種簡單的練習,可讓您在編寫程式碼前將 Glassware 視覺化。我們隨時都會完成我們打造的 Glassware!
接下來,我們將介紹 Charades 沉浸式的主要 UI 元素,讓您瞭解 UI 的運作方式,以及在建立自己的 Glassware 時,這個程序有多實用。
啟動畫面
這個畫面是使用者啟動 Charades 沉浸式體驗時最先看到的畫面。可讓使用者在進入遊戲體驗之前,先掌握自己的知識,這是一種使用者熟悉的一般遊戲結構。
當使用者輕觸觸控板時,畫面會顯示包含兩個項目的選單系統:「New Game」和「instructions」。
使用說明模式
建立沉浸式體驗時,輸入機制有時是新穎的,因此建議您讓使用者知道如何與沉浸式互動,特別是在遊戲中。
這組資訊卡會顯示遊戲的操作說明,並指導使用者如何玩遊戲,以及使用哪些手勢來瀏覽 UI。使用者只要輕觸啟動畫面中的「instructions」選單項目,即可查看內容。
遊戲模式
這些畫面由主要遊戲流程組成。使用者可以輕觸啟動畫面中的「New game」選單項目,進入這個流程。
這組資訊卡會顯示隨機字詞 (最多 10 個)。使用者在正確描述字詞時,往前滑動並輕觸觸控板,即可略過字詞。
遊戲結果畫面
此畫面會顯示遊戲結果。一開始會顯示「遊戲結束」畫面,使用者只要滑動即可查看遊戲結果。當使用者輕觸任何結果資訊卡時,系統會顯示「New Game」選單項目,讓使用者開始其他遊戲。
語音指令
您應在設計程序的初期階段找出語音指令。語音指令可讓使用者視需要從 Glass Home (時鐘資訊卡) 語音選單啟動 Glassware。此工具是 Glassware 設計方式的重要環節。
舉例來說,Post a update 指令在火紅模型中可正常運作,在使用者下達指令和一些文字,而 Glassware 會在使用者無需進一步介入的情況下處理該指令。讓使用者可以快速返回正在執行的工作
另一方面,如果是「玩遊戲」等類似體驗,您通常會希望讓使用者先看到啟動畫面,讓使用者能優先瀏覽內容。由於此語音指令很可能會啟動沉浸式體驗,因此您可以預期使用者能夠透過顯示額外的畫面和選單開始遊戲。使用者下達語音指令後,就立即導致遊戲體驗不佳,一般來說會對遊戲體驗不佳。
小夏使用「玩遊戲」語音指令。使用者叫用語音指令後,Charades 啟動畫面會隨即顯示,提示使用者輕觸瞭解更多選項 (在本例中為「新遊戲」或「操作說明」)。
資訊卡版面配置
無論您是建構沉浸式資訊卡或即時資訊卡,都應盡可能使用 CardBuilder
或 XML 版面配置。
一般情況下,您仍然需要自行建構版面配置,因此請按照 UI 指南操作,取得最佳的 Glassware。
碼錶採用一般版面配置規範,但擁有使用標準 Android 元件 (例如檢視區塊和版面配置) 的自訂 UI 版面配置。
開發
為了開發沉浸式體驗,請使用與 Android 開發作業相同的工具建構大量 Glassware,然後使用 GDK 外掛程式中的 API 存取 Glass 專屬功能,例如手勢偵測工具和語音指令。
您經常使用常見的 Android 元件建立 Glassware,但請注意,部分概念有時會有所不同。舉例來說,不要讓 Android 活動符合特定沉浸式體驗。沉浸式體驗是專為使用一或多項 Android 活動建構的 Glass 打造,以及 GDK 和 Android SDK 的其他許多元件。
其餘章節將介紹 Charades 遊戲的結構,以及您之前匯入的專案主要元件。建議您立即使用 Android Studio,以便掌握相關知識。原始碼本身已加註,因此本節將說明每個檔案的概略用途,以及可套用至自己的 Glassware 的實用提示。
以下簡要介紹 Charades 的主要元件:
- 透過語音觸發宣告,掛入 Glass 主選單的語音選單。
- 啟動畫面活動,可讓使用者開始遊戲或查看操作說明。這個活動會啟動操作說明活動或遊戲活動
- 教學課程活動會說明如何實際執行遊戲的主要動作,藉此玩遊戲
- 遊戲活動可讓使用者玩實際遊戲
- 結果活動會顯示遊戲分數,以及猜測和猜測的字詞。此外,使用者也能透過選單項目開始新遊戲。
語音指令
如要建立語音指令,您可以使用指定所用指令的 XML 資源檔案,然後在 AndroidManifest.xml
檔案中指定 XML 資源。
下列檔案與 Charades 語音指令相關聯:
res/xml/voice_trigger_play_a_game .xml
- 宣告要使用的語音指令。AndroidManifest.xml
- 宣告說出語音指令時要啟動的活動。
啟動畫面活動
啟動畫面是使用者啟動 Charades 時最先看到的內容和進入遊戲的方向。
下列檔案與這項活動相關聯:
res/layout/activity_start_game.xml
- 宣告啟動畫面的版面配置。res/menu/start_game.xml
- 宣告啟動畫面的選單系統,包含「instructions」和「New game」選單項目。res/values/dimens.xml
- 宣告此專案活動用於遵循 Glass 樣式的標準卡片尺寸和邊框間距。src/com/google/android/glass/sample/charades/StartGameActivity.java
- 啟動畫面的主要類別。res/drawable-hdpi/ic_game_50.png
:新遊戲的選單圖示。res/drawable-hdpi/ic_help_50.png
:「操作說明」的選單圖示。
遊戲模型
建議您將遊戲模型 (遊戲狀態) 與 UI 區隔開來。CharadesModel
類別會追蹤遊戲的分數,以及遊戲模式中猜測的詞組數量和各種操作說明,以及使用者是否在說明模式中完成這些詞組。
下列檔案與遊戲模型相關聯:
src/com/google/android/glass/sample/charades/CharadesModel.java
基本遊戲活動
由於遊戲的教學課程和遊戲模式具有相同的功能和 UI,因此這個基礎類別定義了兩者的通用功能。操作說明和遊戲模式的活動擴充此類別。
下列檔案與這項活動相關聯:
res/layout/activity_game_play.xml
- 定義 Charades 遊戲過程和指示模式共用的版面配置。src/com/google/android/glass/sample/charades/BaseGameActivity.java
- 定義共用的 Charades 遊戲基本功能和指令模式。
指引活動
操作說明活動會顯示三張資訊卡,說明遊戲的方式。偵測使用者是否執行資訊卡上顯示的動作後,再繼續操作。
下列檔案與這項活動相關聯:
src/com/google/android/glass/sample/charades/TutorialActivity.java
- 擴充BaseGameActivity
,並定義要顯示的指示文字,以及如何在使用者進行遊戲說明時處理手勢。
遊戲過程活動
遊戲活動會定義遊戲的主要流程。它會決定要顯示哪些字詞、如何保留分數、具備可處理手勢的手勢偵測工具,並在遊戲結束時啟動結果活動。
下列檔案與這項活動相關聯:
GamePlayActivity
- 擴充BaseGameActivity
,並包含主要的遊戲流程邏輯。
結果活動
結果活動會顯示猜測的字詞、未知的字詞,以及遊戲的分數。其中也包含可讓使用者開始新遊戲的選單項目。
下列檔案與這項活動相關聯:
res/layout/game_results.xml
- 定義「遊戲結束」資訊卡的版面配置res/layout/card_results_summary.xml
- 定義版面配置,用來在清單中顯示猜測和猜測的字詞。res/layout/table_row_result.xml
- 定義結果摘要的個別資料列版面配置。src/com/google/android/glass/sample/charades/GameResultsActivity.java
- 定義實際活動,顯示上述 XML 資源定義的版面配置和選單。res/raw/sad_trombone.ogg
- 在使用者未聽完所有字詞時播放的音效。res/raw/triumph.ogg
- 使用者經過 10 個字詞後會播放的音效。res/drawable-hdpi/ic_done_50.png
:勾號圖示,以正確猜測的字詞顯示。
動畫資源
以下動畫資源可為 Charades 增添更多美感:
res/anim/slide_out_left.xml
:以動畫呈現結束檢視畫面,並滑向左側 (例如傳遞字詞時)。res/anim/slide_in_right.xml
:以動畫顯示從右側滑入的檢視畫面 (例如,新字詞進入檢視區塊時)。res/anim/tug_right.xml
:這會定義在不使用滑動手勢的檢視畫面時,引起上升的動畫。這樣使用者就會知道滑動手勢無效。
Android 資訊清單
AndroidManifest.xml
檔案說明 Glassware 的主要元件,讓系統知道如何執行此程式。Charades 的資訊清單會宣告下列項目:
- Glassware 的圖示和名稱。如有多個 Glassware 回應同一個語音指令,Glass 會在主要觸控選單中顯示這項資訊。
- 所有與 Charades 相關的活動。系統必須確認這些資訊,才能瞭解如何啟動 Glassware 的活動。
- 語音指令和意圖篩選器,可在系統說出語音指令時啟動特定活動。
- Glassware 的版本代碼。每次將這個 APK 的新版本上傳至 MyGlass 時,都必須更新這段程式碼 (通常也是版本名稱)。