Guia do designer para criar controles por toque

​

Sumário

1. Visão geral
   1. Benefícios de adicionar controles por toque a jogos de console XBOX
2. Práticas recomendadas
   1. Jogue primeiro outros jogos com suporte a toque
   2. Use controles por toque para jogar seu jogo sem modificações
   3. Comece com um modelo e mantenha o mínimo
   4. Siga as diretrizes de posicionamento de controles
      1. Roda esquerda
      2. Roda direita
      3. Superior
      4. Inferior
   5. Siga as dicas para tipos de controle específicos e cenários avançados
      1. Direcionais de 4 e 8 direções
      2. Mira com giroscópio e dicas para jogos de tiro
      3. Lidar com ações complexas e combinadas
   6. Use o Touch Adaptation Kit Editor
   7. Altere os controles por toque para corresponder ao cenário atual do jogo
   8. Use um layout cinematográfico para manter a imersão durante filmes e cenas
   9. Use o toque nativo para personalizar totalmente as interações por toque
   10. Use ativos personalizados para combinar com o estilo de arte do jogo
   11. Altere a interface do usuário, as dicas e o remapeamento de controles do jogo para controles por toque
   12. Verifique problemas comuns de controles por toque e do XBOX Game Streaming
       1. Desconexão durante o jogo
       2. Compatibilidade com vários tipos de dispositivos

​

Visão geral

​

Benefícios de adicionar controles por toque a jogos de console XBOX

​

Práticas recomendadas

​

Jogue primeiro outros jogos com suporte a toque

​

Use controles por toque para jogar seu jogo sem modificações

​

Comece com um modelo e mantenha o mínimo

​

Siga as diretrizes de posicionamento de controles

​

Roda esquerda

Interna

Dicas

1. Use um joystick esquerdo não relativo (absoluto) em jogos controlados por personagens. O termo relativo refere-se a como um joystick responde ao movimento do toque em relação ao ponto onde o toque começou. Para obter mais informações, consulte Joystick.
2. Em vez disso, use um joystick esquerdo relativo se o jogo tiver um sistema para alterar a velocidade, como passar de caminhada para corrida com base na intensidade da entrada do joystick esquerdo. O joystick não relativo não funciona bem em situações em que o jogador precisa alterar gradualmente a entrada para mudar a velocidade.
3. Em jogos 2D que podem usar um direcional ou o joystick esquerdo para controlar a locomoção do personagem, use um Directional Pad em vez de um controle de joystick. Faça isso, a menos que o joystick esquerdo forneça uma funcionalidade que o direcional não oferece (por exemplo, velocidade ou direção com ângulo preciso). Ao usar um joystick em vez de um direcional, prefira usar um joystick não relativo para a locomoção de personagens 2D.
4. Para layouts específicos que navegam apenas por menus, use um controle direcional sempre que possível. Se não for possível usar um direcional, use um joystick não relativo.
5. Use um joystick relativo para layouts simples. Os joysticks relativos são mais familiares para jogadores acostumados com um gamepad. No entanto, um joystick não relativo pode oferecer um teto de habilidade mais alto, permitindo que os jogadores apliquem mais rapidamente a entrada desejada sem precisar sempre arrastar o toque. Experimente os dois tipos de joystick para ter uma boa noção do que é mais agradável.

Externa

Dicas

1. Crie um cluster de controles do anel externo para as ações secundárias e terciárias. Isso fornece uma área de toque maior para essa ação. Ao usar apenas um controle em um cluster, considere usar a sintaxe de cluster [<your secondary action control>, null] ou [null, <your secondary action control>] para criar um cluster de dois controles com um espaço vazio, posicionando efetivamente o controle único um pouco mais para dentro ou para fora do anel em comparação com [<your secondary action control>].
2. Posicione a ação secundária fora da parte superior esquerda do anel interno, nos slots 7 e 8. Isso fornece acesso fácil sem precisar estender o polegar em direção ao meio da tela. Não divida o slot secundário (cluster de controles) até que todos os outros slots da roda estejam ocupados e seja necessário mais espaço.
3. Posicione a ação terciária diretamente abaixo do anel interno, nos slots 4 e 5. Essa é uma posição confortável para mover rapidamente o polegar a partir da ação principal. Não divida o slot terciário (cluster de controles) até que todos os outros slots da roda estejam ocupados e seja necessário mais espaço.

4. Considere quais ações precisam ser mantidas pressionadas junto com a locomoção do jogador (como manter pressionado para agachar ou correr). Crie um controle de joystick com uma atribuição action para permitir que as duas ações aconteçam juntas, deixando o polegar direito livre para outras ações importantes. Para ver um exemplo, consulte Um joystick que alterna de caminhada para corrida quando um limite é ultrapassado.

​

Roda direita

Interna

Dicas

1. Para ações usadas com frequência que podem exigir que outra ação seja mantida pressionada, por exemplo, mirar com a mira da arma, considere usar um controle de botão com uma pullAction para permitir que um único toque seja usado para ativar tanto a mira quanto o disparo.

Externa

Dicas

1. Crie um cluster de controles do anel externo para as ações secundárias e terciárias, a fim de fornecer uma área de toque maior para essa ação. Ao usar apenas um controle em um cluster, considere usar a sintaxe de cluster [<your secondary action control>, null] ou [null, <your secondary action control>] para criar um cluster de dois controles com um espaço vazio, posicionando efetivamente o controle único um pouco mais para dentro ou para fora do anel em comparação com [<your secondary action control>]. Não adicione controles adicionais ao cluster secundário até que todos os outros slots da roda estejam ocupados e seja necessário mais espaço.
2. Posicione a ação secundária fora da parte superior direita da ação principal, nos slots 1 e 2. Isso permite acesso fácil sem precisar estender o polegar em direção ao meio da tela. Não divida o slot secundário (cluster de controles) até que todos os outros slots da roda estejam ocupados e seja necessário mais espaço.
3. Posicione a ação terciária diretamente abaixo do anel interno, nos slots 4 e 5. Essa é uma posição confortável para mover rapidamente o polegar a partir da ação principal. Não divida o slot terciário (cluster de controles) até que todos os outros slots da roda estejam ocupados e seja necessário mais espaço.

4. Use ações do tipo pular no slot terciário.

5. Dependendo de quão próximas outras ações precisam estar de uma ação do tipo pular, considere posicioná-las no slot secundário (um cluster entre os slots 1 e 2) ou no slot 6. A partir daí, o agrupamento entre os slots 5 e 6 posiciona outra ação perto do pulo.

6. Sempre que possível, use o controle de sensor giroscópio para controlar a câmera. Isso libera o polegar direito para outra ação o tempo todo. Como último recurso, use um joystick direito relativo para controlar a câmera.

​

Superior

Dicas

1. Em seções cinematográficas do jogo, a zona superior pode ser usada para uma ação de pular a cena. O canto superior direito é um local comum para ações de navegação e provavelmente ficará em uma faixa preta horizontal ou vertical (letterbox ou pillarbox).
2. O canto superior esquerdo é reservado para botões do sistema. Os jogadores esperam ações semelhantes que possam pausar ou navegar pelo jogo na linha superior. Considere posicionar itens como mapa, inventário e menu nessa área.

​

Inferior

Dicas

1. Embora seja possível posicionar controles em branco na zona inferior para ajustar a posição dos controles, lembre-se de que vários formatos de dispositivos podem permitir que menos controles fiquem visíveis. Não tente posicionar controles nos cantos inferiores adicionando muitos controles em branco. Eles costumam se sobrepor às rodas de controle. Os jogadores frequentemente movem suas rodas um pouco para baixo para obter uma posição de jogo confortável.

​

Siga as dicas para tipos de controle específicos e cenários avançados

​

Direcionais de 4 e 8 direções

Dicas

1. Use um direcional de 8 direções quando um jogo 2D permitir que o personagem se mova em oito direções, incluindo as diagonais.
2. Use um direcional de 4 direções quando um jogo 2D permitir que o personagem se mova em apenas quatro direções: esquerda, direita, para cima e para baixo.
3. Use um direcional de 4 direções ao controlar menus.

​

Mira com giroscópio e dicas para jogos de tiro

Dicas

1. Use um giroscópio para controlar uma câmera de visão do jogador. Para os jogadores, é intuitivo poder inclinar o dispositivo da esquerda para a direita e para frente e para trás para controlar a câmera com precisão.
2. Usar um giroscópio com entrada de mouse (especifique "output": "relativeMouse") é muito superior para mirar em jogos do que usar um joystick (especifique "output": "relativeJoystick"), especialmente em jogos em primeira e terceira pessoa.
3. Uma rotação de 90 graus de um telefone no espaço físico geralmente gira o personagem do jogo em 120 graus. Essa funcionalidade facilita para os jogadores alternarem entre jogos e faz com que os controles pareçam mais familiares.
4. É preferível usar um giroscópio com um touchpad. Jogadores mais habilidosos vão querer essa combinação para orientação rápida; a maior parte da mira fina vem do giroscópio.
5. Considere combinar um joystick com um giroscópio para permitir mais formas de jogar. Os controles do giroscópio podem ser usados para fazer pequenos ajustes além do que o joystick oferece.
6. Um giroscópio no estilo “Sempre ativo” tem o teto de habilidade mais alto; no entanto, esse estilo não funciona bem para jogadores em veículos em movimento.
7. Sempre que possível, use um layout diferente, sem controles de giroscópio, para menus e outras seções do jogo em que ele não seja necessário.
8. Crie a maioria dos botões com touchpads com "renderAsButton": true, dependendo da ação e de como o jogo dá suporte a essas habilidades. Mirar+Atirar é o exemplo principal, mas isso pode se aplicar a ações como bloquear e arremessar granadas. Aqui está um exemplo de controle de touchpad Mirar (LT) + Atirar (RT).

{
    "type": "touchpad",
    "axis": [
        {
            "input": "axisX",
            "output": "relativeMouseX",
            "sensitivity": 5
        },
        {
            "input": "axisY",
            "output": "relativeMouseY",
            "sensitivity": 2.5
        }
    ],
    "renderAsButton": true,
    "action": [ "rightTrigger", "leftTrigger" ],
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "fire"
            },
        }
    }
}

9. Sempre posicione Mirar+Atirar mais em direção ao centro da tela, geralmente no slot 5, na parte externa da roda direita. Se ele for posicionado na borda, onde o jogador não consegue girar a câmera totalmente para a direita, faltará espaço para deslizar.
10. Ao criar um novo layout de toque para jogos de tiro em primeira ou terceira pessoa, use o modelo inicial de jogo de tiro em primeira pessoa. A posição de cada ação foi bem analisada.

​

Lidar com ações complexas e combinadas

Dicas

1. Várias ações podem ser atribuídas a um único controle. Por exemplo, agachar é ativado pressionando simultaneamente o botão superior esquerdo e o botão superior direito. A definição de botão a seguir permite que o jogador agache com um único toque.

{
    "type": "button",
    "action": [ "leftBumper", "rightBumper"],
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "crouch"
            }
        }
    }
}

2. Uma pullAction pode ser atribuída a um controle de botão. Ela ajuda o jogador a usar um único movimento de tocar e arrastar para ativar duas ações. Por exemplo, mirar é atribuído ao LT e atirar é atribuído ao RT. A definição de botão a seguir permite que o jogador mire enquanto pressiona o botão e, em seguida, atire puxando para fora.

{
    "type": "button",
    "action": "leftTrigger",
    "pullAction": "rightTrigger",
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "aim"
            }
        },
        "pulled": {
            "faceImage": {
                "type": "icon",
                "value": "fire"
            }
        }
    }
}

3. Um joystick com action e actionThreshold ativa uma ação atribuída, além da saída de eixo, somente se o valor de actionThreshold for atingido. Por exemplo, apenas a entrada do joystick esquerdo é ativada. A corrida é ativada pressionando o RT com a entrada do joystick esquerdo. A definição de joystick a seguir permite que o jogador ative a corrida ao ultrapassar o valor limite de 2,5. O jogador pode alternar de caminhada para corrida apenas usando o joystick esquerdo.

{
    "type": "joystick",
    "action": "rightTrigger",
    "actionThreshold": 2.5,
    "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"
                }
            }
        }
    }
}

4. Um joystick com “action” pode ativar uma ação atribuída enquanto o joystick é usado. Por exemplo, um menu radial é ativado pressionando o botão superior esquerdo e pode ter itens selecionados movendo o joystick direito. A definição de joystick a seguir permite que o jogador mantenha pressionado o botão superior esquerdo e selecione uma ação em um menu radial usando o joystick direito.

{
    "type": "joystick", 
    "action": "leftBumper",
    "axis": {
        "input": "axisXY",
        "output": "rightJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    },
    "styles": {
        "default": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "inventory"
                }
            }
        }
    }
} 

​

Use o Touch Adaptation Kit Editor

​

Altere os controles por toque para corresponder ao cenário atual do jogo

No Minecraft Dungeons, ao adquirir uma arma de longo alcance pela primeira vez, um controle de ataque à distância é adicionado.

​

Use um layout cinematográfico para manter a imersão durante filmes e cenas

Dicas

1. Quando possível, exiba os controles por toque somente quando o jogador precisar deles.
   1. Detectar a entrada por toque de um jogador é relativamente simples. Para obter mais informações, consulte Criar uma interface de toque nativa para o seu jogo com IGameInput e o exemplo de jogo completo SimpleCloudAwareSample.
   2. O toque pode ser detectado mesmo que um layout do Touch Adaptation Kit esteja sendo exibido. Usando as APIs de toque nativo, o jogador pode tocar na tela para fazer com que o jogo mostre um layout cinematográfico mínimo. O jogo pode ocultar esse layout após algum tempo sem que nenhuma entrada por toque seja detectada.

2. Como alternativa, um efeito semelhante pode ser obtido sem modificações no código do jogo. Uma camada de layout de toque de controles na zona superior direita pode ser usada em combinação com um controle de botão usando a propriedade toggle e uma ação de camada.

​

Use o toque nativo para personalizar totalmente as interações por toque

• Gerenciamento de inventário: o toque nativo pode tornar mais fácil e rápido selecionar e equipar itens, permitindo que o jogador simplesmente toque nos itens e até use técnicas como arrastar. Isso pode ser uma melhoria considerável na qualidade de vida em comparação com o gerenciamento tradicional baseado em controle.

• Menus: manipular um menu é mais intuitivo em uma tela sensível ao toque. Basta tocar no item desejado em vez de usar um direcional ou joystick para navegar até ele.
• Suporte completo ao toque nativo: alguns jogos dão suporte completo ao toque nativo, eliminando a necessidade de qualquer remapeamento para um controle por meio do Touch Adaptation Kit. Isso permite que os jogadores se concentrem totalmente na experiência de jogo móvel. Esses jogos geralmente já têm uma versão para dispositivos móveis ou dão suporte a uma interface adequada ao toque, o que torna o suporte ao toque nativo relativamente fácil. Jogos projetados para serem jogados principalmente com mouse também tendem a dar suporte ao toque nativo com mais facilidade.

​

Use ativos personalizados para combinar com o estilo de arte do jogo

​

Altere a interface do usuário, as dicas e o remapeamento de controles do jogo para controles por toque

​

Verifique problemas comuns de controles por toque e do XBOX Game Streaming

​

Desconexão durante o jogo

Dicas

1. Garanta o carregamento e o funcionamento adequados dos controles por toque, incluindo layout, ativos e estado, quando o jogo retornar de um estado desconectado. Isso é especialmente importante quando APIs são usadas para controlar o estado dos controles por toque.
2. Pause o jogo sempre que possível quando o jogador for desconectado para evitar perda de progresso ou uma situação de fim de jogo. Isso pode ser feito observando um evento de restrição ou a desconexão de um cliente de streaming.

​

Compatibilidade com vários tipos de dispositivos

Dicas

1. Garanta que todos os controles por toque funcionem e sejam facilmente alcançáveis em dispositivos com vários tamanhos de tela.
2. Verifique a disponibilidade de sensores nos dispositivos. Se eles não estiverem disponíveis, ofereça outras opções que não exijam sensores. Por exemplo, seu jogo usa um giroscópio para mirar. Se um giroscópio não estiver disponível em um dispositivo, use um controle de touchpad em vez disso.
3. Para testar facilmente diferentes tamanhos de tela, é possível usar um PC para alterar o tamanho da janela do PC Content Test Application ou do navegador da web. Se não houver um PC com toque prontamente disponível, o Content Test Application permite testes básicos com uma configuração para tratar cliques do mouse como eventos de toque. Por fim, use a janela de visualização da TAK Editor Extension para visualizar facilmente os controles por toque em diferentes dimensões.