タッチ適応レイアウト用のカスタムアセット

タッチ適応レイアウトのコントロールにセマンティックアイコンを提供することは、各コントロールが何を実行することを意図しているかをゲームのプレイヤーに伝える効果的な方法です。XBOX コントローラーに慣れているプレイヤーは、一般的な A、B、X、Y ボタンをすぐに理解できますが、他のプレイヤーは、コントロールがトリガーするアクションが示されている方がタッチコントロールを理解しやすい場合があります。たとえば、XBOX の A が付いたボタンではなく、人がジャンプしている画像のボタンにすることで、プレイヤーは各コントロールがどのアクションを実行するかを理解しやすくなります。コントロール用に組み込みのアイコンセットから選択することもできますが、ゲームのビジュアル的な美しさに合うアートワークでカスタマイズすることもできます。これにより、ゲームのタッチコントロールがゲームの一部としてよりまとまりのある感覚となり、モバイルでネイティブに近いゲーム体験を提供できます。たとえば、次は標準アイコンを使用して構築されたレイアウトです。

そして、次はカスタムアートワークを使用した同じレイアウトです。

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

アセットファイル

アセットは PNG ファイルで、基本解像度と、その基本解像度の 1.5x、2.0x、3.0x、および 4.0x のスケールで提供する必要があります。これにより、ストリーミングクライアントは、ゲームがストリーミングされるデバイスの DPI に基づいて、表示するアセットの最適なバージョンを選択できます。各アセットタイプの基本解像度は以下に列挙します。 Touch Adaptation Kit はアセットのローカライズをサポートしており、ゲームがストリーミングされるデバイスの言語に応じて異なるアセットを提供できます。アセットの各ローカライズされたバージョンには、必要なすべての解像度を含める必要があります。ディスク上でアセットを配置する際、ファイル構造は最初に言語で編成され、次にアセットスケールで編成されます。たとえば、ファイル構造は次のようになる場合があります。

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-CA の JoystickKnobForeground アセット、fr の JoystickKnobBackground アセット、および netural の JoystickBackground アセットを使用します。フランスのフランス語は、JoystickKnobForeground と JoystickKnobBackground の両方に fr アセットを使用し、JoystickBackground に neutral アセットを使用します。他のすべての言語は、すべてに対して neutral アセットを使用します。

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

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

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

このスタイルが与えられると、ジョイスティックに使用される 3 つのアセットのそれぞれについて、Touch Adaptation Kit はプレイヤーのデバイスの言語と DPI を使用して、レイアウトで使用する最も一致するアセットを見つけます。したがって、レイアウトは使用する言語やアセットスケールを指定しません。Touch Adaptation Kit が自動的に最も一致するアセットを見つけるためです。

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

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.0x スケールでの最大ピクセルサイズをまとめたものです。

コントロール	スタイル指定可能な要素	@1.0x ピクセルサイズ
ArcadeButton	background	60 x 60
	faceImage	60 x 60
Button	background	60 x 60
	faceImage	60 x 60
DirectionalPad	background	60 x 60
Joystick	background	120 x 120
	knob/background	60 x 60
	knob/faceImage	60 x 60
Throttle	knob/background	60 x 60
	knob/faceImage	60 x 60
Touchpad	background (renderAsButton = true)	60 x 60
	background (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

Joystick の 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 に対して量子化を実行します。量子化はアセットの外観に影響を与えないはずですが、タッチレイアウトに表示されるアセットが、画像作成時に想定していたものと一致することを確認することをお勧めします。量子化プロセスが画像のレンダリング方法に影響を与えている場合、バンドルのビルド時に TAK CLI に --no-asset-optimization オプションを渡すことで無効にできます。

GDK and Game Engines Integration

Steam porting guide

Game Principles

Core Features

Console Features

タッチ適応レイアウト用のカスタムアセット

アセットファイル

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

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

カスタムアセットサイズ

画像の量子化

​アセット ファイル

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

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

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

​画像の量子化

アセットファイル

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

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

カスタムアセットサイズ

画像の量子化