Modo de contraste alto

Dependiendo de la combinación de colores de su título, puede haber casos en los que los diseños táctiles sean difíciles de ver porque contrastan mal con el título que se ejecuta en la transmisión subyacente. Esto puede ser especialmente problemático para los jugadores con baja visión, daltonismo u otras discapacidades visuales. El modo de contraste alto es una configuración del cliente que, cuando se activa, agrega trazos adicionales y placas de fondo a los botones con estilo de icono, además de modificar los colores del sistema para aumentar el contraste. Por ejemplo, el diseño estándar y un color de fondo claro sólido, con el modo de contraste alto deshabilitado:

Diseño táctil estándar con el modo de contraste alto deshabilitado

Y aquí está la misma configuración con el modo de contraste alto habilitado:

Diseño táctil estándar con el modo de contraste alto habilitado

Aunque puede confiar en los valores predeterminados del sistema para el estilo del modo de contraste alto, también puede incluir variantes de contraste alto para sus recursos personalizados, así como reemplazar los colores del sistema para que coincidan con la estética visual de su juego.

Recursos personalizados para el modo de contraste alto

Al usar recursos personalizados en el paquete de adaptación táctil, puede incluir variantes de recursos de contraste alto para cada uno de sus recursos de contraste estándar. Estas variantes de recursos de contraste alto se representan siempre que el modo de contraste alto está habilitado. Los recursos se marcan como una variante de contraste alto incluyendo un sufijo .hc después del nombre del recurso y antes de la extensión de archivo. Por ejemplo, considere myAsset.png (izquierda) y su variante de contraste alto, myAsset.hc.png (derecha):

Comparación lado a lado de un recurso personalizado y su variante de recurso personalizado de contraste alto

Al organizar los recursos en el disco, tanto los recursos de contraste estándar como los de contraste alto se organizan por idioma y escala de recurso de la manera habitual. Para los recursos anteriores, la estructura de archivos podría verse así:

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 un diseño, se hace referencia a los recursos sin la extensión de nombre de archivo y sin el sufijo .hc. Por ejemplo, un botón con estilo que use los recursos anteriores podría configurarse así:

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

Con este estilo, el kit de adaptación táctil seleccionará automáticamente myAsset.png o myAsset.hc.png dependiendo de si el modo de contraste alto está deshabilitado o habilitado, respectivamente. Este estilo producirá lo siguiente cuando el modo de contraste alto esté deshabilitado:

Diseño táctil con recursos personalizados y el modo de contraste alto deshabilitado

Y lo siguiente cuando el modo de contraste alto esté habilitado:

Diseño táctil con recursos personalizados y el modo de contraste alto habilitado

Reemplazo de los colores del sistema para el modo de contraste alto

Las paletas de colores dentro de los diseños táctiles o del archivo de contexto se pueden usar para reemplazar los colores del sistema. Los controles muestrean implícitamente los colores del sistema al aplicar estilos, lo que significa que cualquier reemplazo afectará al estilo global de todos los controles (a menos que un control tenga su propio reemplazo dentro de un bloque styles personalizado). Por ejemplo, el siguiente diseño reemplaza algunos de los colores del sistema para lograr un estilo personalizado cuando el modo de contraste alto 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"
        }
      ]
    }
  }
}

En el diseño anterior, se declaran tres reemplazos de color en el bloque highContrast que solo se aplicarán cuando el modo de contraste alto esté habilitado:

system_contentPrimary reemplazará el estilo aplicado al trazo intermedio del joystick y al matiz del icono del mapa.
system_contentSecondary reemplazará el estilo aplicado al relleno del joystick.
system_contrastPrimary reemplazará el estilo aplicado al trazo exterior del joystick y a las placas de fondo de los botones.

El diseño anterior con el modo de contraste alto deshabilitado:

Diseño táctil con reemplazos de colores del sistema y el modo de contraste alto deshabilitado

Y con el modo de contraste alto habilitado:

Diseño táctil con reemplazos de colores del sistema y el modo de contraste alto habilitado

Habilitación del modo de contraste alto

Puede probar el modo de contraste alto en cualquiera de las aplicaciones de prueba de contenido (CTA) web, android o windows.

CTA web

El modo de contraste alto se puede habilitar en la CTA web de la siguiente manera: Haga clic en su perfil y navegue hasta la ventana “Settings”:

Navegue hasta “Accessibility” y active “Enable high contrast in-game”:

Habilitación del modo de contraste alto en la CTA web, paso 2

CTA de Android (en desuso)

El modo de contraste alto se puede habilitar en la CTA de Android de la siguiente manera: Haga clic en su perfil:

Habilitación del modo de contraste alto en la CTA de Android, paso 1

Active “Enable high contrast mode”:

Habilitación del modo de contraste alto en la CTA de Android, paso 2

CTA de Windows (en desuso)

El modo de contraste alto se puede habilitar en la CTA de Windows de la siguiente manera: Haga clic en su perfil:

Habilitación del modo de contraste alto en la CTA de Windows, paso 1

Active “Enable high contrast mode”:

GDK and Game Engines Integration

Steam porting guide

Game Principles

Core Features

Console Features

Recursos personalizados para el modo de contraste alto

Reemplazo de los colores del sistema para el modo de contraste alto

Habilitación del modo de contraste alto

CTA web

CTA de Android (en desuso)

CTA de Windows (en desuso)

​Recursos personalizados para el modo de contraste alto

​Reemplazo de los colores del sistema para el modo de contraste alto

​Habilitación del modo de contraste alto

​CTA web

​CTA de Android (en desuso)

​CTA de Windows (en desuso)

Recursos personalizados para el modo de contraste alto

Reemplazo de los colores del sistema para el modo de contraste alto

Habilitación del modo de contraste alto

CTA web

CTA de Android (en desuso)

CTA de Windows (en desuso)