Mode de contraste élevé

Selon le jeu de couleurs de votre titre, il peut arriver que vos dispositions tactiles soient difficiles à voir parce qu’elles contrastent mal avec votre titre qui s’exécute dans le flux sous-jacent. Cela peut être particulièrement problématique pour les joueurs ayant une basse vision, un daltonisme ou d’autres déficiences visuelles. Le mode de contraste élevé est un paramètre du client qui, lorsqu’il est activé, ajoute des contours supplémentaires et des plaques d’arrière-plan aux boutons stylisés avec une icône, et modifie les couleurs système pour augmenter le contraste. Par exemple, voici la disposition standard sur une couleur d’arrière-plan pâle unie, avec le mode de contraste élevé désactivé :

Disposition tactile standard avec le mode de contraste élevé désactivé

Et voici la même configuration avec le mode de contraste élevé activé :

Disposition tactile standard avec le mode de contraste élevé activé

Bien que vous puissiez vous fier aux valeurs par défaut du système pour le style du mode de contraste élevé, vous pouvez également inclure des variantes à contraste élevé de vos ressources personnalisées et remplacer les couleurs système pour qu’elles correspondent à l’esthétique visuelle de votre jeu.

Ressources personnalisées pour le mode de contraste élevé

Lorsque vous utilisez des ressources personnalisées dans votre touch adaptation bundle, vous pouvez inclure des variantes à contraste élevé pour chacune de vos ressources à contraste standard. Ces variantes à contraste élevé sont ensuite affichées chaque fois que le mode de contraste élevé est activé. Les ressources sont désignées comme variantes à contraste élevé en ajoutant un suffixe .hc après le nom de la ressource et avant l’extension du fichier. Par exemple, prenons myAsset.png (à gauche) et sa variante à contraste élevé, myAsset.hc.png (à droite) :

Comparaison côte à côte d'une ressource personnalisée et de sa variante à contraste élevé

Lorsque vous disposez vos ressources sur le disque, les ressources à contraste standard et à contraste élevé sont organisées par langue et par échelle de ressource comme d’habitude. Pour les ressources ci-dessus, la structure de fichiers pourrait ressembler à ceci :

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

Dans une disposition, les ressources sont référencées sans l’extension du nom de fichier et sans le suffixe .hc. Par exemple, un bouton stylisé avec les ressources ci-dessus pourrait être configuré ainsi :

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

Avec ce style, le touch adaptation kit sélectionnera automatiquement myAsset.png ou myAsset.hc.png selon que le mode de contraste élevé est désactivé ou activé, respectivement. Ce style donnera le résultat suivant lorsque le mode de contraste élevé est désactivé :

Disposition tactile avec des ressources personnalisées et le mode de contraste élevé désactivé

Et le résultat suivant lorsque le mode de contraste élevé est activé :

Disposition tactile avec des ressources personnalisées et le mode de contraste élevé activé

Remplacer les couleurs système pour le mode de contraste élevé

Les palettes de couleurs de vos dispositions tactiles ou de votre fichier de contexte peuvent servir à remplacer les couleurs système. Les commandes utilisent implicitement les couleurs système pour leur style, ce qui signifie que tout remplacement aura une incidence sur le style global de toutes les commandes (à moins qu’une commande ait son propre remplacement dans un bloc styles personnalisé). Par exemple, la disposition suivante remplace certaines couleurs système pour obtenir un style personnalisé lorsque le mode de contraste élevé est activé :

{
  "$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"
        }
      ]
    }
  }
}

Dans la disposition ci-dessus, trois remplacements de couleurs sont déclarés dans le bloc highContrast et ne seront appliqués que lorsque le mode de contraste élevé est activé :

system_contentPrimary remplacera le style appliqué au contour du milieu du joystick et à la teinte de l’icône de carte.
system_contentSecondary remplacera le style appliqué au remplissage du joystick.
system_contrastPrimary remplacera le style appliqué au contour extérieur du joystick et aux plaques d’arrière-plan des boutons.

La disposition ci-dessus avec le mode de contraste élevé désactivé :

Disposition tactile avec remplacement des couleurs système et le mode de contraste élevé désactivé

Et avec le mode de contraste élevé activé :

Disposition tactile avec remplacement des couleurs système et le mode de contraste élevé activé

Activer le mode de contraste élevé

Vous pouvez tester le mode de contraste élevé dans l’une ou l’autre des applications de test de contenu (CTA) Web, Android ou Windows.

CTA Web

Pour activer le mode de contraste élevé dans la CTA Web : Cliquez sur votre profil et accédez à la fenêtre « Settings » :

Accédez à « Accessibility » et cochez « Enable high contrast in-game » :

Activation du mode de contraste élevé dans la CTA Web, étape 2

CTA Android (déconseillée)

Pour activer le mode de contraste élevé dans la CTA Android : Cliquez sur votre profil :

Activation du mode de contraste élevé dans la CTA Android, étape 1

Cochez « Enable high contrast mode » :

Activation du mode de contraste élevé dans la CTA Android, étape 2

CTA Windows (déconseillée)

Pour activer le mode de contraste élevé dans la CTA Windows : Cliquez sur votre profil :

Activation du mode de contraste élevé dans la CTA Windows, étape 1

Cochez « Enable high contrast mode » :

GDK and Game Engines Integration

Steam porting guide

Game Principles

Core Features

Console Features

Ressources personnalisées pour le mode de contraste élevé

Remplacer les couleurs système pour le mode de contraste élevé

Activer le mode de contraste élevé

CTA Web

CTA Android (déconseillée)

CTA Windows (déconseillée)

​Ressources personnalisées pour le mode de contraste élevé

​Remplacer les couleurs système pour le mode de contraste élevé

​Activer le mode de contraste élevé

​CTA Web

​CTA Android (déconseillée)

​CTA Windows (déconseillée)

Ressources personnalisées pour le mode de contraste élevé

Remplacer les couleurs système pour le mode de contraste élevé

Activer le mode de contraste élevé

CTA Web

CTA Android (déconseillée)

CTA Windows (déconseillée)