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

Um controle analógico que se comporta como um joystick.

## Propriedades

`type` - "joystick"

`axis` - *object* ou *array*. Um único [eixo](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-axis) ou uma matriz de [eixos](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-axis) que descrevem o mapeamento deste controle de joystick.

`action` - *object*, *opcional*. Uma ou mais [ações](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-action) a serem invocadas além do mapeamento de eixo.

`actionThreshold` - *number*, *opcional*. Valor mínimo normalizado do joystick (radial) necessário para invocar a ação. Valor padrão de 0.

`enabled` - *boolean*, *opcional*. O padrão é `true`. Define o estado visual do controle como habilitado/desabilitado. Um controle desabilitado ainda receberá entrada do jogador, mas NÃO alterará o estilo visual com base na entrada.

`expand` - *boolean*, *opcional*. Valor padrão de `true`. Expande o alcance do joystick para corresponder às preferências ergonômicas do usuário quando posicionado em um soquete de controle central. Defina como false para usar um tamanho de joystick fixo padronizado.

`relative` - *boolean*, *opcional*.
Por padrão (`true`), o joystick calculará seu valor usando um cálculo relativo com base no toque inicial do usuário. Definir esse valor como `false` fará com que o valor seja calculado com base no ponto central do controle.

`visible` - *boolean*, *opcional*. O padrão é `true`. Determina se o controle é exibido para o jogador interagir. Para alterar durante a jogabilidade, consulte [Alterando layouts de toque usando o estado do jogo](/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state#change_state).

`styles` - *object*, *opcional*. Personalização da representação visual do controle. Os estilos são representados como um objeto por estado que pode ser estilizado.

O controle pode ter os seguintes estados estilizados:

* `default` - O estilo base.
* `disabled` - O estilo quando o controle está desabilitado. Se não for especificado, quando o controle estiver desabilitado, uma transformação será aplicada ao estilo padrão para que ele pareça desabilitado.
* `idle` - Aplicado quando o jogador NÃO está interagindo com o controle.
* `moving` - Aplicado quando há interação com o botão do joystick, independentemente da zona morta definida.
* `activated` - Aplicado quando uma `action` é definida e o botão é movido para fora do limite para executar a ação.

**Propriedades de estilo por estado**

`opacity` - *number*, *opcional*. A opacidade a ser aplicada ao controle. O padrão é 1.0 para todos os estados, exceto `disabled`.

`background` - *object*, *opcional*. Pode ser uma [cor](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-color) ou um [ativo de imagem](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-asset).

[`knob`](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-knob) - *object*, *opcional*. O objeto [knob](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-knob) especifica o estilo da parte do joystick semelhante a um botão com a qual o jogador pode interagir.

[`outline`](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) - *object*, *opcional*. O objeto [outline](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-joystick-outline) especifica o estilo do contorno e do indicador apresentados quando há interação com o joystick.

**Dimensões dos ativos**

Para cada um dos objetos de estilo que aceitam ativos de imagem, um determinado ativo é fornecido em uma resolução base e nas escalas 1.5x, 2.0x, 3.0x e 4.0x dessa resolução base. A resolução de uma determinada imagem deve ser menor ou igual às seguintes resoluções 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 |

## Comentários

O controle `joystick` pode ser usado para fornecer controle analógico mapeado para os diferentes joysticks do controle físico.

Se o `joystick` for o principal método de movimento, é recomendável posicioná-lo no slot central esquerdo e definir `expand` como true para proporcionar a melhor experiência ao jogador.

Considere personalizar a `faceImage` para dar uma dica ao jogador sobre o que o joystick controlará (isso é especialmente importante se o seu jogo utilizar mais de um joystick).

Para movimentos que dependem de apenas 1 eixo, utilize um joystick de eixo único para maximizar a jogabilidade.

**Comentários sobre estilo**

Se você usar um ativo de `background` e `expand` for true, o ativo de `background` NÃO será dimensionado para o tamanho total do soquete central.

Por padrão, o `outline` só é exibido enquanto o jogador está interagindo com o controle.

Se você usar um ativo de `background` personalizado e `expand` estiver definido como `true`, observe que o ativo NÃO será expandido com a personalização do controle feita pelo jogador.

<Warning>Ao fazer streaming pela versão Windows do Content Test Application, nem todos os estilos serão exibidos corretamente.</Warning>

## Exemplos

#### Exemplo 1: Joystick simples

Um mapeamento básico 1:1 para um joystick com uma pequena zona morta. Os direcionais analógicos do controle físico calculam seu valor por meio de rotação.

**Figura 1. Controle de joystick**

<img src="https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-joystick.gif?s=913fb802bb674e41afbc275dd588b88f" alt="Usuário interagindo com um joystick" width="400" height="400" data-path="images/gdk/reference/game-streaming-touch-control-images-joystick.gif" />

```JSON theme={null}
{

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

#### Exemplo 2: Joystick que alterna de caminhar para correr quando o limite é ultrapassado.

Quando o limite (0.75) é ultrapassado, o leftTrigger será enviado junto com o movimento do joystick. O ícone mudará de 'walk' para 'sprint'

**Figura 1. Controle de joystick com limite de ação**

<img src="https://mintcdn.com/microsoft-4404708b/gzrdvT5kpqAXKEQt/images/gdk/reference/game-streaming-touch-control-images-joystick-with-threshold-action.gif?s=458d5bfd3de78ce9d89f06911b8bccc8" alt="Usuário interagindo com um joystick que tem um limite de ação" width="400" height="400" data-path="images/gdk/reference/game-streaming-touch-control-images-joystick-with-threshold-action.gif" />

```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"
                }
            }
        }
    }
}

```

#### Exemplo 3: Joystick de eixo único (horizontal) que se parece com um volante

**Figura 1. Controle de joystick de volante horizontal**

<img src="https://mintcdn.com/microsoft-4404708b/VX3CRv5ayGEZiR8G/images/gdk/reference/game-streaming-touch-control-images-joystick-driving.gif?s=e3871f2e477b6ff164bdf1dc2f597819" alt="Usuário interagindo com um joystick de volante horizontal" width="400" height="400" data-path="images/gdk/reference/game-streaming-touch-control-images-joystick-driving.gif" />

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

#### Exemplo 4: Joystick com cores personalizadas

**Figura 1. Controle de joystick personalizado**

<img src="https://mintcdn.com/microsoft-4404708b/VX3CRv5ayGEZiR8G/images/gdk/reference/game-streaming-touch-control-images-joystick-customized-colors.gif?s=b1675a6c7b27845e589c3d0d08452fac" alt="Usuário interagindo com um joystick com cores personalizadas" width="400" height="400" data-path="images/gdk/reference/game-streaming-touch-control-images-joystick-customized-colors.gif" />

```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

**Versão do layout:** 1.0+ (recursos de estilo a partir da versão de layout 3.0+)

## Consulte também

[Referência do Touch Adaptation Kit](/pt-BR/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)
- [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)
- [Touch Adaptation Kit](/reference/system/touchadaptationkit/touchadaptationkit-reference.md)
- [Touch Adaptation Kit (TAK) Reference](/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview.md)
- [High Contrast Mode](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode.md)
