Mode contraste élevé

Selon le jeu de couleurs de votre titre, il peut arriver que vos dispositions tactiles soient difficiles à voir, car elles contrastent mal avec votre titre exécuté dans le flux sous-jacent. Cela peut être particulièrement problématique pour les joueurs malvoyants, daltoniens ou atteints d’autres déficiences visuelles. Le mode contraste élevé est un paramètre 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 unie claire, avec le mode contraste élevé désactivé :

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

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

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

Vous pouvez vous appuyer sur les valeurs système par défaut pour le style du mode contraste élevé, mais vous pouvez également inclure des variantes à contraste élevé de vos ressources personnalisées et remplacer les couleurs système pour correspondre à l’esthétique visuelle de votre jeu.

Ressources personnalisées pour le mode contraste élevé

Lorsque vous utilisez des ressources personnalisées dans votre bundle d’adaptation tactile, 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 contraste élevé est activé. Une ressource est marquée comme variante à contraste élevé en ajoutant un suffixe .hc après le nom de la ressource et avant l’extension de fichier. Par exemple, considérez 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 organisez 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 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électionne automatiquement myAsset.png ou myAsset.hc.png selon que le mode contraste élevé est désactivé ou activé, respectivement. Ce style donne le résultat suivant lorsque le mode contraste élevé est désactivé :

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

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

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

Remplacement des couleurs système pour le mode contraste élevé

Les palettes de couleurs de vos dispositions tactiles ou de votre fichier de contexte peuvent être utilisées pour remplacer les couleurs système. Les commandes utilisent implicitement les couleurs système pour leur style, ce qui signifie que tout remplacement affecte le style global de toutes les commandes (sauf si une commande possède 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 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, qui ne seront appliqués que lorsque le mode contraste élevé est activé :

system_contentPrimary remplacera le style appliqué au contour central 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 contraste élevé désactivé :