> ## 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.

# Joystick

> Joystick

# Joystick

ジョイスティックのように動作するアナログ コントロール。

## プロパティ

`type` - "joystick"

`axis` - *object* または *array*。このジョイスティック コントロールのマッピングを記述する単一の [axis](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-axis)、または [axes](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-axis) の配列。

`action` - *object*、*省略可*。axis マッピングに加えて呼び出す [action](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-action)。

`actionThreshold` - *number*、*省略可*。アクションを呼び出すのに必要な正規化されたジョイスティックの最小値 (radial)。既定値は 0 です。

`enabled` - *boolean*、*省略可*。既定値は `true` です。コントロールの視覚的な状態を有効/無効に設定します。無効なコントロールは引き続きプレイヤーからの入力を受け取りますが、入力に基づいて視覚スタイルは変更されません。

`expand` - *boolean*、*省略可*。既定値は `true` です。センター コントロール ソケットに配置された場合、ユーザーの人間工学的な好みに合わせてジョイスティックの範囲を拡張します。標準化された固定サイズのジョイスティックを使用するには false に設定します。

`relative` - *boolean*、*省略可*。
既定 (`true`) では、ジョイスティックはユーザーの最初のタッチに基づく相対計算を使用してその値を計算します。この値を `false` に設定すると、代わりにコントロールの中心点に基づいてその値を計算します。

`visible` - *boolean*、*省略可*。既定値は `true` です。プレイヤーが操作できるようにコントロールを表示するかどうかを決定します。ゲーム プレイ中に変更するには、[ゲーム状態を使用したタッチ レイアウトの変更](/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state#change_state) を参照してください。

`styles` - *object*、*省略可*。コントロールの視覚的表現のカスタマイズ。スタイルは、スタイル設定可能な状態ごとのオブジェクトとして表されます。

button コントロールは次の状態のスタイルを設定できます:

* `default` - 基本スタイル。
* `disabled` - コントロールが無効な場合のスタイル。指定されていない場合、コントロールが無効になると、既定のスタイルに変換が適用されて無効に見えるようになります。
* `idle` - プレイヤーがコントロールを操作していないときに適用されます。
* `moving` - 定義された deadzone に関係なく、ジョイスティックのノブが操作されているときに適用されます。
* `activated` - `action` が定義されており、アクションを実行するためにノブがしきい値を超えて動かされたときに適用されます。

**状態ごとのスタイル設定プロパティ**

`opacity` - *number*、*省略可*。コントロールに適用される不透明度。`disabled` を除くすべての状態で既定値は 1.0 です。

`background` - *object*、*省略可*。[color](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-color) または [image asset](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-asset) のいずれかを指定できます。

[`knob`](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-knob) - *object*、*省略可*。[knob](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-knob) オブジェクトは、プレイヤーが操作できるジョイスティックのボタン状部分のスタイルを指定します。

[`outline`](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) - *object*、*省略可*。[outline](/ja-jp/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) オブジェクトは、ジョイスティックが操作されているときに表示される輪郭とインジケーターのスタイルを指定します。

**アセットの寸法**

画像アセットを受け入れる各スタイル オブジェクトについて、指定されたアセットはベース解像度と、そのベース解像度の 1.5x、2.0x、3.0x、4.0x のスケールで提供されます。指定された画像の解像度は、次の最大解像度以下である必要があります:

| オブジェクト | @1.0x | @1.5x | @2.0x | @3.0x | @4.0x |
| :- | :- | :- | :- | :- | :- |
| background | 120x120 | 90x90 | 240x240 | 360x360 | 480x480 |
| knob.faceImage | 60x60 | 90x90 | 120x120 | 180x180 | 240x240 |
| knob.background | 60x60 | 90x90 | 120x120 | 180x180 | 240x240 |

## 補足

`joystick` コントロールは、異なる物理コントローラーのジョイスティックにマッピングされるアナログ制御を提供するために使用できます。

`joystick` が主要な移動方法である場合、プレイヤーに最適な体験を提供するために、左センター スロットに配置し、`expand` を true に設定することをお勧めします。

`faceImage` をカスタマイズして、ジョイスティックが何を制御するかをプレイヤーに示すヒントを提供することを検討してください (ゲームで複数のジョイスティックを使用する場合は特に重要です)。

1 軸のみに依存する動きの場合、プレイアビリティを最大化するために単一軸ジョイスティックを利用してください。

**スタイル設定に関する補足**

`background` アセットを使用しており、`expand` が true の場合、`background` アセットはセンター ソケットの完全なサイズまでスケーリングされません。

既定では、`outline` はプレイヤーがコントロールを操作している間のみ表示されます。

カスタムの `background` アセットを使用しており、`expand` が `true` に設定されている場合、アセットはプレイヤーのコントロール カスタマイズに合わせて拡張されないことに注意してください。

> [!WARNING]
>
> Windows 版 Content Test Application 経由でストリーミングする場合、すべてのスタイル設定が正しく表示されるわけではありません。

## サンプル

#### 例 1: シンプルなジョイスティック

わずかな deadzone を持つジョイスティックへの基本的な 1:1 マッピング。物理コントローラーのサムスティックは回転を通じて値を計算します。

**図 1. ジョイスティック コントロール**

![ジョイスティックを操作するユーザー](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-joystick.gif?s=913fb802bb674e41afbc275dd588b88f)

```JSON theme={null}
{

    "type": "joystick",
    "axis": {
        "input": "axisXY",
        "output": "leftJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    }
}
```

#### 例 2: しきい値を超えると walk から sprint に切り替わるジョイスティック。

しきい値 (0.75) を超えると、ジョイスティックの動きと共に leftTrigger が送信されます。アイコンは 'walk' から 'sprint' に変わります。

**図 1. アクション しきい値付きジョイスティック コントロール**

![アクション しきい値を持つジョイスティックを操作するユーザー](https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-joystick-with-threshold-action.gif?s=458d5bfd3de78ce9d89f06911b8bccc8)

```JSON theme={null}
{
    "type": "joystick",
    "action": "leftTrigger",
    "actionThreshold":0.75,
    "axis": {
        "input": "axisXY",
        "output": "leftJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    },
    "styles": {
        "default": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "walk"
                }
            }
        },
        "activated": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "sprint"
                },
                "background" : {
                    "type": "color",
                    "value": "#0e7a0d"
                }
            }
        }
    }
}

```

#### 例 3: ステアリング ホイールのように見える単一軸 (水平) ジョイスティック

**図 1. 水平ステアリング ホイール ジョイスティック コントロール**

![水平ステアリング ホイール ジョイスティックを操作するユーザー](https://mintcdn.com/microsoft-4404708b/VX3CRv5ayGEZiR8G/images/gdk/reference/game-streaming-touch-control-images-joystick-driving.gif?s=e3871f2e477b6ff164bdf1dc2f597819)

```JSON theme={null}
{
    "type": "joystick",
    "axis": {
        "input": "axisX",
        "output": "leftJoystickX",
        "deadzone": {
            "threshold": 0.35
        }
    },
    "relative": false,
    "styles": {
        "default": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "steering"
                }
            }
        }
    }
}
```

#### 例 4: カスタマイズされた色を持つジョイスティック

**図 1. カスタマイズされたジョイスティック コントロール**

![カスタマイズされた色を持つジョイスティックを操作するユーザー](https://mintcdn.com/microsoft-4404708b/VX3CRv5ayGEZiR8G/images/gdk/reference/game-streaming-touch-control-images-joystick-customized-colors.gif?s=b1675a6c7b27845e589c3d0d08452fac)

```JSON theme={null}
{

    "type": "joystick",
    "axis": {
        "input": "axisXY",
        "output": "leftJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    },
    "styles": {
        "default": {
            "outline" : {
                "stroke" : {
                    "type": "solid",
                    "color": "#107C10"
                }
            }
        }
    }
}
```

## 要件

**レイアウト バージョン:** 1.0 以上 (スタイル設定機能はレイアウト バージョン 3.0 以上)

## 関連項目

[Touch Adaptation Kit リファレンス](/ja-jp/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview)


## Related topics

- [A designer's guide to building touch controls](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [Guia do designer para criar controles por toque](/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [XINPUT_KEYSTROKE](/fr-CA/reference/input/xinputongameinput/structs/xinput_keystroke.md)
- [Guía del diseñador para crear controles táctiles](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [Guide du concepteur pour la création de commandes tactiles](/fr/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
