没入パターン

このガイドでは、シャレードゲームの形式で、シンプルな没入体験を構成するコンポーネントについて説明します。ほとんどのゲームはカスタム UI と入力コントロールを必要とするため、ゲームは没入感に最適なユースケースです。

また、独自の Glassware の構築にとって重要なデザイン、開発、配布に関するヒントも学習します。

始める前に

Charades ゲームの完全なソースは GitHub で入手できます。このガイドで頻繁に参照しているため、始める前にこのコードを Android Studio にインポートします。

  1. [Quick Start] 画面で、[Check out from version Control] > [Git] をクリックします。
  2. Charades からクローンの URL をコピーします。
  3. クローンの URL を [Vcs リポジトリ URL] に貼り付け、[Clone] をクリックします。
  4. 次の画面で [Yes] をクリックします。
  5. 次の画面で [OK] をクリックします。
  6. プロジェクトをビルドして、[Play] ボタンをクリックして、接続された Glass で実行します。呼び出しの詳細については、サンプルの README を確認してください。

学習内容

Android SDK のコンポーネントを使用して Charades の没入型機能の大部分を作成し、GDK を使用して Glass エクスペリエンスに接続する方法を学びます。 学習するトピックは次のとおりです。

  • Google が提供するデザイン リソースで UI のフローを設計する
  • Glassware を起動する音声トリガーを設計する
  • Android アクティビティを使用してゲームの UI 構造を定義する
  • ユーザーがゲーム オプションを選択できる Android メニュー項目を作成する
  • メインメニューで音声トリガーを使用して Glass エクスペリエンスに統合する
  • ユーザー入力を検出してカスタム操作を実行する GDK ジェスチャー検出機能を使用する
  • 洗練させ、Glass スタイルに沿ったシンプルな Android UI の実装を学ぶ
  • 配信プロセスと、Glassware をリリースする際に重視する点について学ぶ

デザイン

開発を始める前に Glassware を設計しましょうこれにより、 Glass で最適に機能する UI フロー、使用する音声コマンド、 カードの外観について理解を深められます。

当然のことながら、Glassware の設計は反復的なプロセスであり、これから設計する作業の一部は変わりますが、優れたエクスペリエンスを構築するには、この作業の大部分を最初に完了しておくことが不可欠です。

UI フロー

UI フローの設計は簡単な演習で、コードを記述する前に Glassware を可視化できます。 私たちが作る Glassware のために、常にそうしています！

Charades Immersion の主な UI 要素について説明します。UI の仕組みと、このプロセスが独自の Glassware を作成するうえでどれほど役立つかを理解していただくために、

スプラッシュ画面

この画面は、ユーザーがシャレード没入を開始したときに最初に表示されます。ユーザーがなじみのある一般的なゲーム構造であり、ゲーム エクスペリエンスに移る前に自分の向きに合わせることができます。

ユーザーがタッチパッドをタップすると、[New Game] と [Instructions] の 2 つのアイテムを含むメニュー システムが表示されます。

カスタム指示モード

没入型を作成するとき、入力メカニズムが新しくなることもあるため、特にゲームでは、没入感を操作する方法をユーザーに知らせると便利です。

この一連のカードは、ゲームの手順を示し、プレイ方法と UI の操作に使用するジェスチャーをユーザーに案内します。ユーザーは、スプラッシュ画面の [手順] メニュー項目をタップしてアクセスします。

ゲームプレイ モード

これらの画面がメインのゲームプレイ フローを構成します。このフローに移動するには、スプラッシュ画面から [新しいゲーム] メニュー項目をタップします。

このカードのセットには、ランダムな単語（最大 10 個）が表示されます。ユーザーは単語を前にスワイプしてスキップし、正しい説明になったらタッチパッドをタップします。

ゲーム結果画面

この画面にゲームの結果が表示されます。最初に「ゲームオーバー」画面が表示され、ユーザーは前にスワイプしてゲーム結果を確認できます。ユーザーが結果カードのいずれかをタップすると、[New Game] メニュー項目が表示され、ユーザーは別のゲームを開始できます。

音声コマンド

音声コマンドは、設計プロセスのかなり早い段階で特定する必要があります。音声コマンドを使用すると、ユーザーは必要に応じて、Glass Home（時計カード）の音声メニューから Glassware を起動できます。音声コマンドは、Glassware の設計方法の大部分を占めます。

たとえば、[Post an update] コマンドは、ユーザーがコマンドとテキストを話しかけると、ユーザーの介入なしに Glassware が処理するファイア アンド フォーゲット モデルで適切に機能します。これによりユーザーは 元の作業にすぐに戻ることができます

一方、ゲームをプレイするなどのアプリでは、ユーザーを最初に操作できるようにスプラッシュ画面を表示させるのが一般的です。この音声コマンドにより没入が開始される可能性が高いため、ゲームを開始するために追加の画面やメニューが表示されても問題ありません。音声コマンドの直後にユーザーをゲームの世界に引き込むことは、一般的にゲームにとって好ましくありません。

Charades は「ゲームをプレイ」という音声コマンドを使用します。ユーザーが音声コマンドを呼び出すと、Charades のスプラッシュ画面が表示され、タップしてその他のオプションを表示するよう促されます（この場合は [新しいゲーム] または [手順]）。

カード レイアウト

没入型カードとライブカードのいずれを作成する場合でも、可能であれば CardBuilder レイアウトまたは XML レイアウトを使用してください。

多くの場合、独自のレイアウトの構築が必要になるため、Google の UI ガイドラインに沿って、最適な Glassware を作成します。

ストップウォッチは一般的なレイアウト ガイドラインに従っていますが、ビューやレイアウトなどの標準の Android コンポーネントを使用したカスタム UI レイアウトを備えています。

開発

没入型アプリを開発するには、Android 開発で使用するのと同じツールを使用して、大部分の Glassware を構築してから、GDK アドオンの API を使用して、ジェスチャー検出器や音声コマンドなどの Glass 固有の機能にアクセスします。

Glassware の作成には、一般的な Android コンポーネントを頻繁に使用しますが、一部の概念は異なる場合があることに注意してください。たとえば、没入型を Android アクティビティと同義にしないでください。イマージョンは、1 つまたは複数の Android アクティビティと、GDK および Android SDK のその他の多くのコンポーネントを使用して構築された、Glass 用に設計されたエクスペリエンスです。

開発の残りのセクションでは、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 - スプラッシュ画面のメニュー システムを宣言します。スプラッシュ画面のメニュー項目には [手順] と [新しいゲーム] のメニュー項目が含まれます。
  • 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 - シャレードのゲームプレイ モードとカスタム指示モードで共有されるレイアウトを定義します。
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java - 共有されるゲームプレイ モードの基本機能とシャレードの操作モードを定義します。

カスタム指示のアクティビティ

手順アクティビティには、ゲームのプレイ方法を説明する 3 枚のカードが表示されます。ユーザーが続行する前に、カードに表示された操作を実行するかどうかを検出します。

このアクティビティに関連付けられているファイルは次のとおりです。

  • 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 - 正しく推測された単語に表示されるチェックマーク アイコン。

アニメーション リソース

以下のアニメーション リソースを使えば、シャレードをより洗練されたものにできます。

  • res/anim/slide_out_left.xml - これにより、終了ビューがアニメーション化され、（単語が渡された場合などに）左にスライドアウトします。
  • res/anim/slide_in_right.xml - 開始ビューをアニメーション化し、右からスライドインします（たとえば、新しい単語がビューに入ったとき）。
  • res/anim/tug_right.xml - スワイプを使用しないビューでスワイプした場合のスライド アニメーションを定義します。これにより、ユーザーはスワイプの効果がないことを確認できます。

Android マニフェスト

AndroidManifest.xml ファイルには、システムに Glassware の実行方法を理解させるため、Glassware の主要コンポーネントが記述されています。Charades のマニフェストでは、次のことを宣言します。

  • Glassware のアイコンと名前。複数の Glassware が同じ音声コマンドに反応する場合、この情報がメインのタップメニューに表示されます。
  • シャレードに関連するすべてのアクティビティ。これは、システムが Glassware のアクティビティを開始する方法を認識するために必要です。
  • 音声コマンドと、音声コマンドが話されたときに特定のアクティビティを開始するインテント フィルタ。
  • Glassware のバージョン コードです。このコードは、この APK の新しいバージョンが MyGlass にアップロードされるたびに更新する必要があります（通常はバージョン名も更新する必要があります）。