> ## 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 Un control analógico que se comporta como un joystick. ## Propiedades `type` - "joystick" `axis` - *object* o *array*. Un único [eje](/es/reference/system/touchadaptationkit/types/game-streaming-touch-axis) o una matriz de [ejes](/es/reference/system/touchadaptationkit/types/game-streaming-touch-axis) que describen la asignación de este control de joystick. `action` - *object*, *opcional*. Una o varias [acciones](/es/reference/system/touchadaptationkit/types/game-streaming-touch-action) que se invocan además de la asignación de ejes. `actionThreshold` - *number*, *opcional*. Valor mínimo normalizado del joystick (radial) necesario para invocar la acción. El valor predeterminado es 0. `enabled` - *boolean*, *opcional*. El valor predeterminado es `true`. Establece el estado visual del control como habilitado o deshabilitado. Un control deshabilitado seguirá recibiendo la entrada del jugador, pero NO cambiará el estilo visual en función de la entrada. `expand` - *boolean*, *opcional*. El valor predeterminado es `true`. Expande el rango del joystick para adaptarse a las preferencias ergonómicas del usuario cuando se coloca en un socket de control central. Establézcalo en false para usar un tamaño de joystick fijo estandarizado. `relative` - *boolean*, *opcional*. De forma predeterminada (`true`), el joystick calculará su valor mediante un cálculo relativo basado en el toque inicial del usuario. Si establece este valor en `false`, calculará su valor basándose en el punto central del control. `visible` - *boolean*, *opcional*. El valor predeterminado es `true`. Determina si el control se muestra al jugador para que interactúe con él. Para cambiarlo durante el juego, consulte [Cambio de diseños táctiles mediante el estado del juego](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state.md#change_state). `styles` - *object*, *opcional*. Personalización de la representación visual del control. Los estilos se representan como un objeto por cada estado al que se pueden aplicar estilos. El control de botón puede tener estilos aplicados a los siguientes estados: * `default` - El estilo base. * `disabled` - El estilo cuando el control está deshabilitado. Si no se especifica, cuando el control esté deshabilitado, se aplicará una transformación al estilo predeterminado para que parezca deshabilitado. * `idle` - Se aplica cuando el jugador NO está interactuando con el control. * `moving` - Se aplica cuando se está interactuando con la perilla del joystick, independientemente de la zona muerta definida. * `activated` - Se aplica cuando hay una `action` definida y la perilla se mueve fuera del umbral para ejecutar la acción. **Propiedades de estilo por estado** `opacity` - *number*, *opcional*. La opacidad que se aplica al control. El valor predeterminado es 1.0 para todos los estados excepto `disabled`. `background` - *object*, *opcional*. Puede ser un [color](/es/reference/system/touchadaptationkit/types/game-streaming-touch-color) o un [recurso de imagen](/es/reference/system/touchadaptationkit/types/game-streaming-touch-asset). [`knob`](/es/reference/system/touchadaptationkit/types/game-streaming-touch-knob) - *object*, *opcional*. El objeto [knob](/es/reference/system/touchadaptationkit/types/game-streaming-touch-knob) especifica los estilos de la parte del joystick similar a un botón con la que puede interactuar el jugador. [`outline`](/es/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) - *object*, *opcional*. El objeto [outline](/es/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) especifica los estilos del contorno y del indicador que se muestran cuando se está interactuando con el joystick. **Dimensiones de los recursos** Para cada uno de los objetos de estilo que aceptan recursos de imagen, un recurso determinado se proporciona en una resolución base y en escalas de 1.5x, 2.0x, 3.0x y 4.0x de esa resolución base. La resolución de una imagen determinada debe ser menor o igual que las siguientes resoluciones máximas: | Objeto | @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 | ## Comentarios El control `joystick` se puede usar para proporcionar un control analógico que se asigna a los distintos joysticks del mando físico. Si el `joystick` es el método principal de movimiento, se recomienda colocarlo en la ranura central izquierda y establecer `expand` en true para ofrecer la mejor experiencia al jugador. Considere la posibilidad de personalizar la `faceImage` para dar al jugador una pista sobre lo que controlará el joystick (esto es especialmente importante si su juego utiliza más de un joystick). Para movimientos que solo dependen de 1 eje, utilice un joystick de un solo eje para maximizar la jugabilidad. **Comentarios sobre estilos** Si usa un recurso de `background` y `expand` es true, el recurso de `background` NO se escalará al tamaño completo del socket central. De forma predeterminada, el `outline` solo se muestra mientras el jugador está interactuando con el control. Si usa un recurso de `background` personalizado y `expand` está establecido en `true`, tenga en cuenta que el recurso NO se expandirá con la personalización del control del jugador. > [!WARNING] > > Al transmitir mediante la versión de Windows de Content Test Application, no todos los estilos se mostrarán correctamente. ## Ejemplos #### Ejemplo 1: Joystick sencillo Una asignación básica 1:1 a un joystick con una ligera zona muerta. Los sticks del mando físico calculan su valor mediante rotación. **Figura 1. Control de joystick** ![Usuario interactuando con un joystick](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 } } } ``` #### Ejemplo 2: Joystick que cambia de caminar a correr cuando se supera el umbral. Cuando se supera el umbral (0.75), se enviará leftTrigger junto con el movimiento del joystick. El icono cambiará de "walk" a "sprint". **Figura 1. Control de joystick con umbral de acción** ![Usuario interactuando con un joystick que tiene un umbral de acción](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" } } } } } ``` #### Ejemplo 3: Joystick de un solo eje (horizontal) con aspecto de volante **Figura 1. Control de joystick de volante horizontal** ![Usuario interactuando con un joystick de volante horizontal](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" } } } } } ``` #### Ejemplo 4: Joystick con colores personalizados **Figura 1. Control de joystick personalizado** ![Usuario interactuando con un joystick con colores personalizados](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" } } } } } ``` ## Requisitos **Versión del diseño:** 1.0+ (funcionalidades de estilo a partir de la versión de diseño 3.0+) ## Consulte también [Referencia del Touch Adaptation Kit](/es/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)