> ## 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 조이스틱처럼 동작하는 아날로그 컨트롤입니다. ## Properties `type` - "joystick" `axis` - *object* 또는 *array*. 이 조이스틱 컨트롤의 매핑을 설명하는 단일 [axis](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-axis) 또는 [axes](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-axis) 배열입니다. `action` - *object*, *optional*. 축 매핑 외에 호출할 [action(s)](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-action)입니다. `actionThreshold` - *number*, *optional*. 액션을 호출하는 데 필요한 정규화된 최소 조이스틱 값(방사형)입니다. 기본값은 0입니다. `enabled` - *boolean*, *optional*. 기본값은 `true`입니다. 컨트롤의 시각적 상태를 활성/비활성으로 설정합니다. 비활성화된 컨트롤은 플레이어로부터 여전히 입력을 받지만, 입력에 따라 시각적 스타일이 변경되지는 않습니다. `expand` - *boolean*, *optional*. 기본값은 `true`입니다. 중앙 컨트롤 소켓에 배치될 때 사용자 인체공학적 선호도에 맞도록 조이스틱 범위를 확장합니다. 표준화된 고정 조이스틱 크기를 사용하려면 false로 설정합니다. `relative` - *boolean*, *optional*. 기본값(`true`)에서 조이스틱은 사용자의 초기 터치를 기반으로 상대적인 계산을 사용하여 값을 계산합니다. 이 값을 `false`로 설정하면 대신 컨트롤의 중심점을 기준으로 값을 계산합니다. `visible` - *boolean*, *optional*. 기본값은 `true`입니다. 플레이어가 상호 작용할 수 있도록 컨트롤을 표시할지 여부를 결정합니다. 게임 플레이 중에 변경하려면 [게임 상태를 사용하여 터치 레이아웃 변경](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state.md#change_state)을 참조하세요. `styles` - *object*, *optional*. 컨트롤의 시각적 표현을 커스터마이즈합니다. 스타일은 스타일을 지정할 수 있는 상태별 오브젝트로 표현됩니다. 버튼 컨트롤은 다음 상태에 대해 스타일을 지정할 수 있습니다. * `default` - 기본 스타일입니다. * `disabled` - 컨트롤이 비활성화되었을 때의 스타일입니다. 지정하지 않으면 컨트롤이 비활성화되었을 때 기본 스타일에 변환이 적용되어 비활성화된 것처럼 표시됩니다. * `idle` - 플레이어가 컨트롤과 상호 작용하지 않을 때 적용됩니다. * `moving` - 정의된 데드존과 관계없이 조이스틱 노브와 상호 작용하는 동안 적용됩니다. * `activated` - `action`이 정의되어 있고 노브가 액션을 실행하기 위한 임계값을 벗어나 이동될 때 적용됩니다. **Styling properties per state** `opacity` - *number*, *optional*. 컨트롤에 적용될 불투명도입니다. `disabled`를 제외한 모든 상태에서 기본값은 1.0입니다. `background` - *object*, *optional*. [color](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-color) 또는 [image asset](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-asset)일 수 있습니다. [`knob`](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-knob) - *object*, *optional*. [knob](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-knob) 오브젝트는 플레이어가 상호 작용할 수 있는 조이스틱의 버튼과 같은 부분에 대한 스타일을 지정합니다. [`outline`](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) - *object*, *optional*. [outline](/ko/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) 오브젝트는 조이스틱과 상호 작용할 때 나타나는 외곽선과 인디케이터의 스타일을 지정합니다. **Asset dimensions** 이미지 애셋을 허용하는 각 스타일 오브젝트에 대해, 주어진 애셋은 기본 해상도와 해당 기본 해상도의 1.5x, 2.0x, 3.0x, 4.0x 배율로 제공됩니다. 주어진 이미지의 해상도는 다음 최대 해상도보다 작거나 같아야 합니다. | Object | @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 | ## Remarks `joystick` 컨트롤은 서로 다른 물리적 컨트롤러 조이스틱에 매핑되는 아날로그 컨트롤을 제공하는 데 사용할 수 있습니다. `joystick`이 주요 이동 방법인 경우, 왼쪽 중앙 슬롯에 배치하고 `expand`를 true로 설정하여 플레이어에게 최상의 경험을 제공하는 것이 좋습니다. 조이스틱이 무엇을 제어할지에 대한 힌트를 플레이어에게 제공하기 위해 `faceImage`를 커스터마이즈하는 것을 고려하세요(게임에서 하나 이상의 조이스틱을 사용하는 경우 특히 중요함). 1개의 축에만 의존하는 모션의 경우, 플레이 가능성을 극대화하기 위해 단일 축 조이스틱을 활용하세요. **Styling remarks** `background` 애셋을 사용하고 `expand`가 true인 경우, `background` 애셋은 전체 중앙 소켓 크기로 스케일되지 않습니다. 기본적으로 `outline`은 플레이어가 컨트롤과 상호 작용하는 동안에만 표시됩니다. 커스텀 `background` 애셋을 사용하고 `expand`가 `true`로 설정된 경우, 애셋은 플레이어의 컨트롤 커스터마이즈에 따라 확장되지 않습니다. > [!WARNING] > > Windows 버전의 Content Test Application을 통해 스트리밍하는 경우, 모든 스타일이 올바르게 표시되지 않을 수 있습니다. ## Samples #### Example 1: Simple joystick 약간의 데드존이 있는 조이스틱에 대한 기본 1:1 매핑입니다. 물리적 컨트롤러의 썸스틱은 회전을 통해 값을 계산합니다. **Figure 1. Joystick Control** ![조이스틱과 상호 작용하는 사용자](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 } } } ``` #### Example 2: Joystick that switches from walk to sprint when threshold is passed. 임계값(0.75)이 넘으면 조이스틱 이동과 함께 leftTrigger가 전송됩니다. 아이콘은 'walk'에서 'sprint'로 변경됩니다. **Figure 1. Joystick Control with Action Threshold** ![액션 임계값이 있는 조이스틱과 상호 작용하는 사용자](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" } } } } } ``` #### Example 3: Single-axis (horizontal) joystick that looks like a steering wheel **Figure 1. Horizontal Steering Wheel Joystick Control** ![수평 스티어링 휠 조이스틱과 상호 작용하는 사용자](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" } } } } } ``` #### Example 4: Joystick with customized colors **Figure 1. Customized Joystick Control** ![커스터마이즈된 색상의 조이스틱과 상호 작용하는 사용자](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" } } } } } ``` ## Requirements **Layout Version:** 1.0+ (Styling capabilities from layout version 3.0+) ## See also [Touch Adaptation Kit 참조](/ko/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview.md) ## 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)