Modo de alto contraste

Dependendo do esquema de cores do seu título, pode haver casos em que seus layouts de toque sejam difíceis de ver porque contrastam pouco com o título em execução no stream subjacente. Isso pode ser especialmente problemático para jogadores com baixa visão, daltonismo ou outras deficiências visuais. O modo de alto contraste é uma configuração do cliente que, quando ativada, adiciona contornos adicionais e placas de fundo aos botões estilizados com um ícone, além de modificar as cores do sistema para aumentar o contraste. Por exemplo, o layout padrão e uma cor de fundo clara sólida, com o modo de alto contraste desabilitado:

Layout de toque padrão com o modo de alto contraste desabilitado

E aqui está a mesma configuração com o modo de alto contraste habilitado:

Layout de toque padrão com o modo de alto contraste habilitado

Embora você possa contar com os padrões do sistema para o estilo do modo de alto contraste, também pode incluir variantes de alto contraste para seus ativos personalizados, bem como substituir as cores do sistema para combinar com a estética visual do seu jogo.

Ativos personalizados para o modo de alto contraste

Ao usar ativos personalizados no seu touch adaptation bundle, você pode incluir variantes de ativos de alto contraste para cada um dos seus ativos de contraste padrão. Essas variantes de ativos de alto contraste são renderizadas sempre que o modo de alto contraste está habilitado. Os ativos são marcados como variante de alto contraste incluindo um sufixo .hc após o nome do ativo e antes da extensão do arquivo. Por exemplo, considere myAsset.png (à esquerda) e sua variante de alto contraste, myAsset.hc.png (à direita):

Comparação lado a lado do ativo personalizado e da variante de alto contraste do ativo personalizado

Ao organizar seus ativos no disco, tanto os ativos de contraste padrão quanto os de alto contraste são organizados por idioma e escala de ativo normalmente. Para os ativos acima, a estrutura de arquivos pode ser parecida com esta:

assets/
└───neutral/
    ├───@1.0x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@1.5x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@2.0x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@3.0x/
    │       myAsset.png
    │       myAsset.hc.png
    └───@4.0x/
            myAsset.png
            myAsset.hc.png

Dentro de um layout, os ativos são referenciados sem a extensão do nome de arquivo e sem o sufixo .hc. Por exemplo, um botão estilizado com os ativos acima pode ser configurado assim:

{
    "type": "button",
    "action": "gamepadA",
    "styles": {
        "idle": {
            "faceImage": {
                "type": "asset",
                "value": "myAsset"
            }
        }
    }
}

Com esse estilo, o touch adaptation kit selecionará automaticamente myAsset.png ou myAsset.hc.png, dependendo de o modo de alto contraste estar desabilitado ou habilitado, respectivamente. Esse estilo produzirá o seguinte quando o modo de alto contraste estiver desabilitado:

Layout de toque com ativos personalizados e o modo de alto contraste desabilitado

E o seguinte quando o modo de alto contraste estiver habilitado:

Layout de toque com ativos personalizados e o modo de alto contraste habilitado

Substituir as cores do sistema para o modo de alto contraste

As paletas de cores nos seus layouts de toque ou no arquivo de contexto podem ser usadas para substituir as cores do sistema. Os controles usam implicitamente as cores do sistema ao aplicar estilos, o que significa que quaisquer substituições afetarão o estilo global de todos os controles (a menos que um controle tenha sua própria substituição em um bloco styles personalizado). Por exemplo, o layout a seguir substitui algumas das cores do sistema para obter um estilo personalizado quando o modo de alto contraste está habilitado:

{
  "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/v4.0/layout.json",
  "styles": {
    "colors": {
      "highContrast": {
        "system_contentPrimary": "#ff00ffff",
        "system_contentSecondary": "#00ff00aa",
        "system_contrastPrimary": "#ff0000aa"
      }
    }
  },
  "content": {
    "left": {
      "inner": [
        {
          "type": "joystick",
          "axis": {
            "input": "axisXY",
            "output": "leftJoystick"
          }
        },
        {
          "type": "button",
          "action": "dPadRight",
          "styles": {
            "default": {
              "faceImage": {
                "type": "icon",
                "value": "map"
              }
            }
          }
        }
      ]
    },
    "right": {
      "inner": [
        {
          "type": "button",
          "action": "gamepadY"
        },
        {
          "type": "button",
          "action": "gamepadB"
        },
        {
          "type": "button",
          "action": "gamepadA"
        },
        {
          "type": "button",
          "action": "gamepadX"
        }
      ]
    }
  }
}

No layout acima, três substituições de cores são declaradas no bloco highContrast e só serão aplicadas quando o modo de alto contraste estiver habilitado:

system_contentPrimary substituirá o estilo aplicado ao contorno intermediário do joystick e à tonalidade do ícone de mapa.
system_contentSecondary substituirá o estilo aplicado ao preenchimento do joystick.
system_contrastPrimary substituirá o estilo aplicado ao contorno externo do joystick e às placas de fundo dos botões.

O layout acima com o modo de alto contraste desabilitado:

Layout de toque com substituições de cores do sistema e o modo de alto contraste desabilitado

E com o modo de alto contraste habilitado:

Layout de toque com substituições de cores do sistema e o modo de alto contraste habilitado

Habilitar o modo de alto contraste

Você pode testar o modo de alto contraste em qualquer um dos aplicativos de teste de conteúdo (CTA) para web, Android ou Windows.

CTA para web

O modo de alto contraste pode ser habilitado no CTA para web da seguinte maneira: Clique no seu perfil e navegue até a janela “Settings”:

Navegue até “Accessibility” e marque “Enable high contrast in-game”:

Habilitando o modo de alto contraste no CTA para web, etapa 2

CTA para Android (preterido)

O modo de alto contraste pode ser habilitado no CTA para Android da seguinte maneira: Clique no seu perfil:

Habilitando o modo de alto contraste no CTA para Android, etapa 1

Marque “Enable high contrast mode”:

Habilitando o modo de alto contraste no CTA para Android, etapa 2

CTA para Windows (preterido)

O modo de alto contraste pode ser habilitado no CTA para Windows da seguinte maneira: Clique no seu perfil:

Habilitando o modo de alto contraste no CTA para Windows, etapa 1

Marque “Enable high contrast mode”:

GDK and Game Engines Integration

Steam porting guide

Game Principles

Core Features

Console Features

Ativos personalizados para o modo de alto contraste

Substituir as cores do sistema para o modo de alto contraste

Habilitar o modo de alto contraste

CTA para web

CTA para Android (preterido)

CTA para Windows (preterido)

​Ativos personalizados para o modo de alto contraste

​Substituir as cores do sistema para o modo de alto contraste

​Habilitar o modo de alto contraste

​CTA para web

​CTA para Android (preterido)

​CTA para Windows (preterido)

Ativos personalizados para o modo de alto contraste

Substituir as cores do sistema para o modo de alto contraste

Habilitar o modo de alto contraste

CTA para web

CTA para Android (preterido)

CTA para Windows (preterido)