次の方法で共有

タッチ アダプテーション レイアウトのプレビュー

  • [アーティクル]

この記事では、TAK エディターを使用したタッチ アダプテーション レイアウトのプレビューの概要と、プレビューをカスタマイズするために使用できるさまざまなオプションについて説明します。

前提条件

レイアウトのプレビュー

レイアウトのプレビューは、VS Code エクスプローラーを使用して、エディターでレイアウト ファイルを開くのと同じくらい簡単です。 バンドルの layouts ディレクトリ内のレイアウト ファイルをクリックするだけで、レイアウトの JSON コンテンツが 1 つのタブに表示され、レイアウトのライブ プレビューがその隣のタブに自動的に表示されます。

Important

レイアウト ファイルにエラーがある場合は、VS Code 問題パネルに表示されます。 エラーが解決されるまでプレビューは更新されません。 詳細については、「状態、エラー、警告」セクションを参照してください。

プレビューは対話型です。つまり、マウス (またはタッチ対応デバイスを使用している場合はタッチ入力) を使用してタッチ コントロールを操作できます。 プレビューは、実際のゲーム ストリームでレンダリングされているかのように入力に応答します。

レイアウト JSON ファイルに加えられた変更は、ファイルの保存時にプレビューに反映されます。 これにより、レイアウトを変更して結果をすぐに確認できる、迅速かつ反復的な設計プロセスが可能になります。

TAK エディターのレイアウト プレビューのスクリーンショット

プレビュー タブが閉じている場合は、以下に示す 2 つの方法のいずれかで再度開くことができます。

  1. レイアウト ファイルの右上隅にある [プレビューを開く] ボタンをクリックします。

    レイアウト ファイルの [プレビューを開く] ボタンのスクリーンショット

  2. コマンド パレットから "タッチ アダプテーション キット: プレビューを横に開く" コマンドを実行します。

    [プレビューを開く] コマンドが選択されているコマンド パレットのスクリーンショット

コマンドとボタンの両方は、(1) レイアウト ファイルが開いており、(2) プレビューがまだ開いていない場合にのみ使用できることに注意してください。

状態、エラー、警告

検証の状況

バンドル内のレイアウト、アセット、およびその他のファイルが変更されると、拡張機能は、すべてのバンドルが準拠する必要がある事前定義されたルールのセットに対してバンドルの内容の有効性を継続的に検証します。 これはバックグラウンドで行われ、バンドル内にネストされたファイルが保存されるか、他の方法 (名前の変更など) で変更されるたびに再評価されます。

この検証の状態は、ウィンドウの右下端にあるステータス バー項目を介して報告されます。

OK 状態を示す検証ステータス バー項目のスクリーンショット

このステータス バー項目は、エディターで少なくとも 1 つのレイアウト ファイルが開かれている場合にのみ表示されます。 アクティブなバンドルの名前と、バンドル内で見つかった問題 (エラーと警告) の数が表示されます。 ステータス バー項目をクリックすると、VS Code 問題パネルが開き、バンドル内で見つかったすべての問題のリストが表示されます。

同期の状態

プレビュー パネルには、TAK CLI へのアクティブなバンドル サイドロード接続があります。 このしくみの詳細については、「TAK CLI ドキュメント」を参照してください。

この接続の状態は、ウィンドウの右下端、検証ステータス バー項目の隣にあるステータス バー項目を介して報告されます。 この状態は、プレビュー パネルが開いている場合にのみ表示されます。

OK 状態を示す同期ステータス バー項目のスクリーンショット

上のスクリーンショットは、接続がアクティブでプレビューが同期されている場合のステータス バー項目を示しています。 これは、バンドルにエラーがない場合に発生します (警告は許可され、"同期済み" の状態を維持します)。 エラーが存在する場合、状態は "非同期" に変わります。

このステータス バー項目にマウス ポインターを合わせると、TAK CLI によってホストされているサイドロード サーバーの詳細を示すヒントが表示されます。 このアドレスは、コンテンツ テスト アプリなど、別のゲーム ストリーミング クライアントをプレビューに接続するために使用できます。

エラーと警告

VS Code 問題パネルには、バンドル内で見つかったすべての問題のリストが表示されます。 これには、検証プロセス中に見つかったすべての問題が含まれます。

問題が存在する場合は、検証ステータス バーまたは同期ステータス バー項目のいずれかをクリックすると、問題パネルが開き、問題のリストが表示されます。 各問題には、説明と問題が見つかったバンドル内の場所が表示されます。

たとえば、次のスクリーンショットでは、レイアウト ファイル platformer-advanced.json が参照しているバンドルと、バンドルに存在しないアセット (run.png) に 1 つのエラーが存在します。

バンドルにエラーがある問題パネルのスクリーンショット

参照がバンドルに存在するアセットに変更されるか、アセットがバンドルに追加されるまで、プレビューの状態は "非同期" になりました。

次の手順

プレビューのカスタマイズ