高对比度模式

根据你标题的配色方案，可能存在这样的情况：由于触控布局与底层流中运行的标题对比度较差，导致触控布局难以看清。这对于低视力、色盲或其他视觉障碍的玩家尤其成问题。高对比度模式是一种客户端设置，激活后会为使用图标设置样式的按钮添加额外的描边和按钮背板，并修改系统颜色以增加对比度。例如，标准布局和纯色浅色背景，高对比度模式已禁用时：以下是相同设置但已启用高对比度模式：虽然你可以依赖系统默认的高对比度模式样式，但你也可以包含自定义资产的高对比度模式变体以及覆盖系统颜色以匹配你游戏的视觉美学。

高对比度模式的自定义资产

在触控适配包中使用自定义资产时，你可以为每个标准对比度资产包含高对比度资产变体。这些高对比度资产变体在启用高对比度模式时被渲染。资产通过在资产名称之后、文件扩展名之前包含 .hc 后缀被标记为高对比度变体。例如，考虑 myAsset.png（左侧）及其高对比度变体 myAsset.hc.png（右侧）：在磁盘上组织资产时，标准对比度和高对比度资产都按语言和资产比例正常组织。对于上述资产，文件结构可能如下所示：

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

在布局中，资产的引用不带文件名扩展名并且不带 .hc 后缀。例如，使用上述资产设置样式的按钮可能配置如下：

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

有了这种样式，触控适配套件将根据高对比度模式是禁用还是启用，自动选择 myAsset.png 或 myAsset.hc.png。当高对比度模式已禁用时，此样式将产生以下结果：而当高对比度模式已启用时的以下结果：

覆盖高对比度模式的系统颜色

你的触控布局或上下文文件中的调色板可用于覆盖系统颜色。控件在设置样式时隐式地采样系统颜色，这意味着任何覆盖都将影响所有控件的全局样式（除非控件在自定义 styles 块中有自己的覆盖）。例如，以下布局覆盖了一些系统颜色，以在启用高对比度模式时实现自定义样式：

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