タッチアダプテーションレイアウトのカスタムアセット

2025-05-01

タッチアダプテーションレイアウトのコントロールにセマンティックアイコンを提供することは、各コントロールの意図をゲームのプレイヤーに伝える効果的な方法です。 Xbox コントローラーに慣れているプレイヤーは一般的な A、B、X、Y ボタンをすばやく理解しますが、他のプレイヤーにとっては、コントロールがトリガーするアクションを表示すると、タッチコントロールをより簡単に理解できるでしょう。たとえば、Xbox A のボタンを設ける代わりに、ジャンプする人のイメージを記したボタンを設ける方が、プレイヤーが各コントロールが実行するアクションを理解するのに役立ちます。

組み込みのアイコン一式からコントロールに使うものを選択してもいいですが、ゲームの視覚的な美しさに合ったアートワークでカスタマイズすることもできます。そうすることで、ゲームのタッチコントロールがゲームとより一体化しているように見えるので、ゲームをプレイするエクスペリエンスもモバイルに対してよりネイティブに感じられます。

たとえば、標準アイコンを使用して構築されたレイアウトを次に示します:

セマンティックアイコンを使用したタッチレイアウト

同じレイアウトをカスタムアートワークで作ったものを次に示します:

カスタムアートを使用したタッチレイアウト

このレイアウトがゲームに読み込むと、カスタムアートワークによって、タッチコントロールのビジュアルスタイルとゲームのビジュアルスタイルが結び付けられます。

ゲーム内でカスタムアートを使用したタッチレイアウト

アセットファイル

アセットは PNG ファイルであり、基本解像度の 1.5x、2.0x、3.0x、4.0x スケールで提供する必要があります。これにより、ゲームストリーミングアプリは、ゲームがストリーミングされているデバイスの DPI に基づいて、表示するアセットの最適なバージョンを選択できます。各アセットの種類の基本解像度は次の一覧に表示されます。

タッチアダプテーションキットは、アセットのローカライズをサポートしています。これにより、ゲームのストリーミング先のデバイスの言語に応じて異なるアセットを提供できます。アセットのローカライズされた各バージョンには、必要な解像度をすべて含める必要があります。

ディスク上にアセットをレイアウトする場合、ファイル構造は最初に言語で整理され、次にアセットスケール別に整理されます。たとえば、ファイル構造は次のようになります:

assets/
    neutral/
        @1.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @1.5x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @2.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @3.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @4.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
    fr/
        fr-CA/
            @1.0x/
                JoystickKnobForeground.png
            @1.5x/
                JoystickKnobForeground.png
            @2.0x/
                JoystickKnobForeground.png
            @3.0x/
                JoystickKnobForeground.png
            @4.0x/
                JoystickKnobForeground.png
        @1.0x/
            JoystickKnobBackground.png
        @1.5x/
            JoystickKnobBackground.png
        @2.0x/
            JoystickKnobBackground.png
        @3.0x/
            JoystickKnobBackground.png
        @4.0x/
            JoystickKnobBackground.png

このセットアップでは、カナダフランス語は fr-CAJoystickKnobForeground アセット、frJoystickKnobBackground アセット、および neturalJoystickBackground アセットを使用します。フランスフランス語では、fr アセットを JoystickKnobForeground と JoystickKnobBackground の両方に、neutral アセットを JoystickBackground に使います。他のすべての言語では、すべてに対して neutral アセットが使用されます。

レイアウトからのアセットの参照

アセットは、アセットが適用されているコントロールのスタイルセクション内から参照されます。アセットを参照するには、スタイルを設定するアイテムの型を "asset" にする必要があり、値は PNG 拡張子のないアセットファイルの名前にする必要があります。たとえば、上記のアセットでスタイルが設定されたジョイスティックは、次のように構成できます:

{
  "type": "joystick",
  "styles": {
    "default": {
      "background": {
        "type": "asset",
        "value": "JoystickBackground"
      },
      "knob": {
        "faceImage": {
          "type": "asset",
          "value": "JoystickKnobForeground"
        },
        "background": {
          "type": "asset",
          "value": "JoystickKnobBackground"
        }
      }
    }
  }
}

このスタイルにより、ジョイスティックに使用されている 3 つのアセットのそれぞれについて、タッチアダプテーションキットはプレイヤーのデバイスの言語と DPI を使用して、使用するレイアウトに最適なアセットを見つけ出します。したがって、タッチアダプテーションキットでは最適なアセットが自動的に見つけ出せるため、レイアウトでは使用する言語やアセットスケールは指定されません。

変数置換によるアセットの使用

また、XGameStreamingUpdateTouchControlsStateOnClient API を使用して、ランタイムでレイアウトによって使用されるアセットを変更することもできます。これを行うには、コントロールに使われる可能性のあるアセットの一覧を、タッチアダプテーションバンドルの context.json ファイルで定義する必要があります。

context.json:

{
    "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/context/v3.3/context.json",
    "definitions": {
      "potionButtonImages": [
        "Empty",
        "Healing",
        "Invisibility",
        "Mana"
      ]
    },
    "state": {
      "potionButtonFaceImage": "Empty"
    },
    "allowedStateValues": {
      "potionButtonFaceImage": {
        "$ref": "#/definitions/potionButtonImages"
      }
    }
  }
}

これにより、レイアウト内のポーションボタンイメージに Empty.png、Healing.png、Invisibility.png、または Mana.png のうちのいずれかが使えるようにバンドルのコンテキストが設定されます。現在選択されているイメージは、状態変数 potionButtonFaceImageに格納されます。ボタン自体は、このコンテキストへの参照を使用して構成されます。

layout.json:

{
  "type": "button",
  "styles": {
    "default": {
      "faceImage": {
        "type": "asset",
        "value": {
          "$ref": "../../context.json#/state/potionButtonFaceImage"
        }
      }
    }
  }
}

これにより、コンテキストの potionButtonFaceImage 状態変数に現在格納されているアセットをフェイスイメージとして使用するようにボタンに指示します。

最後に、このボタンに現在表示されているイメージをゲームで変更する場合は、次のようなコードが使用されます:

HRESULT ChangePotion(XGameStreamingClientId client, const char* potionName)
{
    XGameStreamingTouchControlsStateOperation updateOperations[1] = {};
    updateOperations[0].operationKind = XGameStreamingTouchControlsStateOperationKind::Replace;
    updateOperations[0].path = "/potionButtonFaceImage";
    updateOperations[0].value.valueKind = XGameStreamingTouchControlsStateValueKind::String;

    // potionName is one of "Empty", "Healing", "Invisibility", "Mana"
    updateOperations[0].value.stringValue = potionName;

    return XGameStreamingUpdateTouchControlsStateOnClient(client, _countof(updateOperations), updateOperations);
}

このコードは、potionButtonFaceImage 状態変数に格納されているアセットの名前を変更します。これにより、新しく選択されたアセットが、スタイルでこの状態を参照しているレイアウトに表示されます。

カスタムアセットのサイズ

次の表は、カスタムアセットを適用できる各コントロールの要素と、各アセットの 1.0 倍のスケールの最大ピクセルサイズをまとめたものです。

コントロール	スタイル指定可能な要素	@1.0x ピクセルサイズ
ArcadeButton	background	60 x 60
	faceImage	60 x 60
ボタン	background	60 x 60
	faceImage	60 x 60
DirectionalPad	background	60 x 60
ジョイスティック	background	120 x 120
	knob/background	60 x 60
	knob/faceImage	60 x 60
スロットル	knob/background	60 x 60
	knob/faceImage	60 x 60
タッチパッド	背景 (renderAsButton = true)	60 x 60
	背景 (renderAsButton = false)	120 x 120
	faceImage	60 x 60

ArcadeButton faceImage、Button faceImage、Joystick knob faceImage、Throttle knob faceImage、Touchpad faceImage アセットのピクセルサイズは次のとおりです。

スケール	ピクセルサイズ
@1.0x	60 x 60
@1.5x	90 x 90
@2.0x	120 x 120
@3.0x	180 x 180
@4.0x	240 x 240

ArcadeButton background、Button background、DirectonalPad background、Joystick knob background、Throttle knob background、Touchpad (renderAsButton=true) background の各アセットのピクセルサイズは次のとおりです。

スケール	ピクセルサイズ
@1.0x	60 x 60
@1.5x	90 x 90
@2.0x	120 x 120
@3.0x	180 x 180
@4.0x	240 x 240

Joysitck background とTouchpad (renderAsButton=false) background アセットのピクセルサイズは次のとおりです。

スケール	ピクセルサイズ
@1.0x	120 x 120
@1.5x	180 x 180
@2.0x	240 x 240
@3.0x	360 x 360
@4.0x	480 x 480

イメージの量子化

タッチアダプテーションバンドルを構築する場合、TAK CLI は、生成される .takx ファイルのサイズを小さくするために、提供された PNG に対して量子化を行います。量子化はアセットの外観に影響を与えてはなりませんが、タッチレイアウトに表示されるアセットが、イメージの作成時に期待した外観と一致することを確認することをお勧めします。

量子化プロセスがイメージのレンダリング方法に影響を与える場合は、バンドルの構築時に --no-asset-optimization オプションを TAK CLI に渡すことによって無効化してもよいでしょう。

次の方法で共有

タッチ アダプテーション レイアウトのカスタム アセット

アセット ファイル