> ## Documentation Index > Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt > Use this file to discover all available pages before exploring further. # タッチ適応レイアウト用のカスタム アセット > タッチ適応レイアウト用のカスタム アセット タッチ適応レイアウトのコントロールにセマンティック アイコンを提供することは、各コントロールが何を実行することを意図しているかをゲームのプレイヤーに伝える効果的な方法です。XBOX コントローラーに慣れているプレイヤーは、一般的な A、B、X、Y ボタンをすぐに理解できますが、他のプレイヤーは、コントロールがトリガーするアクションが示されている方がタッチ コントロールを理解しやすい場合があります。たとえば、XBOX の A が付いたボタンではなく、人がジャンプしている画像のボタンにすることで、プレイヤーは各コントロールがどのアクションを実行するかを理解しやすくなります。 コントロール用に組み込みの [アイコン](https://devdocs.xbox.com/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-icon) セットから選択することもできますが、ゲームのビジュアル的な美しさに合うアートワークでカスタマイズすることもできます。これにより、ゲームのタッチ コントロールがゲームの一部としてよりまとまりのある感覚となり、モバイルでネイティブに近いゲーム体験を提供できます。 たとえば、次は標準アイコンを使用して構築されたレイアウトです。 ![セマンティック アイコンを使用したタッチ レイアウト](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-custom-assets-icons.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=6a1f17581b93194ad962f94c2bd59ac1) そして、次はカスタム アートワークを使用した同じレイアウトです。 ![カスタム アートを使用したタッチ レイアウト](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-custom-assets-assets.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=cdc5edd016dd0f9e47bd810b6af17c1a) このレイアウトがゲームの上に読み込まれると、カスタム アートワークによってタッチ コントロールのビジュアル スタイルがゲームのビジュアル スタイルと結び付けられます。 ![ゲーム内でカスタム アートを使用したタッチ レイアウト](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-custom-assets-game.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=9e48c7c63b3a45b1759c8497f0cea0b5) ## アセット ファイル アセットは PNG ファイルで、基本解像度と、その基本解像度の 1.5x、2.0x、3.0x、および 4.0x のスケールで提供する必要があります。これにより、ストリーミング クライアントは、ゲームがストリーミングされるデバイスの DPI に基づいて、表示するアセットの最適なバージョンを選択できます。各アセット タイプの基本解像度は [以下](#custom-asset-sizes) に列挙します。 Touch Adaptation Kit は [アセットのローカライズ](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-tak-localization.md) をサポートしており、ゲームがストリーミングされるデバイスの言語に応じて異なるアセットを提供できます。アセットの各ローカライズされたバージョンには、必要なすべての解像度を含める必要があります。 ディスク上でアセットを配置する際、ファイル構造は最初に [言語](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-tak-localization.md) で編成され、次にアセット スケールで編成されます。たとえば、ファイル構造は次のようになる場合があります。 ``` 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 拡張子なしのアセット ファイルの名前である必要があります。たとえば、上記のアセットでスタイル指定されたジョイスティックは次のように構成されます。 ```json theme={null} { "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](https://devdocs.xbox.com/ja-jp/reference/system/xgamestreaming/functions/xgamestreamingupdatetouchcontrolsstateonclient.md) API を使用して、実行時にレイアウトで使用されるアセットを変更することもできます。これを行うには、コントロール用の潜在的なアセットのリストをタッチ適応バンドルの `context.json` ファイルで定義する必要があります。 context.json: ```json theme={null} { "$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: ```json theme={null} { "type": "button", "styles": { "default": { "faceImage": { "type": "asset", "value": { "$ref": "../../context.json#/state/potionButtonFaceImage" } } } } } ``` これにより、コンテキストの potionButtonFaceImage 状態変数に現在保存されているアセットを、ボタンのフェース イメージとして使用するように指定されます。 最後に、ゲームがこのボタンに現在表示されている画像を変更したい場合、次のようなコードを使用します。 ```c++ theme={null} 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](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line.md) は、生成される .takx ファイルのサイズを削減するために、提供された PNG に対して量子化を実行します。量子化はアセットの外観に影響を与えないはずですが、タッチ レイアウトに表示されるアセットが、画像作成時に想定していたものと一致することを確認することをお勧めします。 量子化プロセスが画像のレンダリング方法に影響を与えている場合、バンドルのビルド時に TAK CLI に `--no-asset-optimization` オプションを渡すことで無効にできます。 ## Related topics - [タッチ適応レイアウトのハイ コントラスト モード](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode.md) - [タッチ コントロール レイアウトの構築](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-building-touch-layout.md) - [XBOX ゲーム ストリーミング向けのタッチ操作レイアウトを作成する](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/index.md) - [タッチ入門](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/game-streaming-getting-started-with-touch.md) - [ゲーム状態に基づくタッチ コントロール レイアウトの変更](https://devdocs.xbox.com/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state.md)