触控适应布局的自定义资产

2025-05-01

在触摸适应布局中的控件上提供语义图标是向游戏玩家传达每个控件的用途的有效方法。虽然熟悉 Xbox 控制器的玩家会快速理解常见的 A、B、X、Y 按钮，但其他玩家可能会发现，如果玩家显示这些控件将触发的操作，则更容易理解触摸控件。例如，不使用带有 Xbox A 的按钮，一个带有人员跳转图像的按钮可以帮助玩家了解每个控件将执行的操作。

虽然你可以从控件的一组内置icons中进行选择，但你也可以使用与游戏的视觉美观匹配的插图自定义它们。这样做可以让你的游戏触摸控件感觉像是游戏中更不可或缺的一部分，因此，玩游戏的体验对移动设备而言更本机。

例如，下面是使用标准图标生成的布局：

使用语义图标的触摸布局

下面是使用自定义插图的相同布局：

带自定义艺术的触摸布局

当此布局加载到游戏上时，自定义插图有助于将触摸控件的视觉样式与游戏的视觉样式相关联。

具有游戏内自定义艺术的触摸布局

资产文件

资产是 PNG 文件，需要以基本分辨率提供，且基分辨率为 1.5x、2.0x、3.0x 和 4.0x。这允许游戏流式处理应用根据流式传输游戏的设备的 DPI 选择要显示的最佳资产版本。下面列出了每个资产类型的基本分辨率。

触摸适配工具包支持资产的本地化，这使你能够根据游戏流式传输到的设备的语言提供不同的资产。资产的每个本地化版本必须包含所有必需的分辨率。

在磁盘上布局资产时，文件结构首先按语言组织，然后按资产规模进行组织。例如，文件结构可能如下所示：

assets/
    neutral/
        @1.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @1.5x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @2.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @3.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
        @4.0x/
            JoystickBackground.png
            JoystickKnobBackground.png
            JoystickKnobForeground.png
    fr/
        fr-CA/
            @1.0x/
                JoystickKnobForeground.png
            @1.5x/
                JoystickKnobForeground.png
            @2.0x/
                JoystickKnobForeground.png
            @3.0x/
                JoystickKnobForeground.png
            @4.0x/
                JoystickKnobForeground.png
        @1.0x/
            JoystickKnobBackground.png
        @1.5x/
            JoystickKnobBackground.png
        @2.0x/
            JoystickKnobBackground.png
        @3.0x/
            JoystickKnobBackground.png
        @4.0x/
            JoystickKnobBackground.png

在此设置中，加拿大法语将使用fr-CAJoystickKnobForeground资产、frJoystickKnobBackground资产和neturalJoystickBackground资产。法国法语将为JoystickKnobForeground和JoystickKnobBackground使用fr资产，并为JoystickBackground使用neutral资产。所有其他语言都使用所有 neutral 内容的汇编。

从布局引用资产

资产是从要应用资产的控件的样式部分中引用的。若要引用资产，要设置样式的项的类型应为“asset”值应为没有 PNG 扩展名的资产文件的名称。例如，具有上述资产样式的游戏杆可能配置如下所示：

{
  "type": "joystick",
  "styles": {
    "default": {
      "background": {
        "type": "asset",
        "value": "JoystickBackground"
      },
      "knob": {
        "faceImage": {
          "type": "asset",
          "value": "JoystickKnobForeground"
        },
        "background": {
          "type": "asset",
          "value": "JoystickKnobBackground"
        }
      }
    }
  }
}

鉴于这种样式，对于用于游戏杆的三个资产中的每一个，触摸适配工具包将使用玩家设备的语言和 DPI 来查找可供布局使用的最佳匹配资产。因此，布局不指定要使用的语言或资产缩放，因为触摸适配工具包将自动找到最佳匹配资产。

将资产与变量替换配合使用

还可以使用 XGameStreamingUpdateTouchControlsStateOnClient API 更改布局在运行时使用的资产。为此，必须在触控适配捆绑包的 context.json 文件中定义控件的潜在资产列表。

context.json：

{
    "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/context/v3.3/context.json",
    "definitions": {
      "potionButtonImages": [
        "Empty",
        "Healing",
        "Invisibility",
        "Mana"
      ]
    },
    "state": {
      "potionButtonFaceImage": "Empty"
    },
    "allowedStateValues": {
      "potionButtonFaceImage": {
        "$ref": "#/definitions/potionButtonImages"
      }
    }
  }
}

这会设置捆绑包的上下文，以允许任何， Empty.pngHealing.png，Invisibility.png，或 Mana.png 用于布局中的幂按钮图像。当前选定的图像存储在状态变量中potionButtonFaceImage。将使用对此上下文的引用来配置按钮本身：

layout.json：

{
  "type": "button",
  "styles": {
    "default": {
      "faceImage": {
        "type": "asset",
        "value": {
          "$ref": "../../context.json#/state/potionButtonFaceImage"
        }
      }
    }
  }
}

这会告知按钮使用当前存储在上下文的 potionButtonFaceImage 状态变量中的任何资产作为其人脸图像。

最后，当游戏想要更改此按钮上当前显示的图像时，它将使用以下代码：

HRESULT ChangePotion(XGameStreamingClientId client, const char* potionName)
{
    XGameStreamingTouchControlsStateOperation updateOperations[1] = {};
    updateOperations[0].operationKind = XGameStreamingTouchControlsStateOperationKind::Replace;
    updateOperations[0].path = "/potionButtonFaceImage";
    updateOperations[0].value.valueKind = XGameStreamingTouchControlsStateValueKind::String;

    // potionName is one of "Empty", "Healing", "Invisibility", "Mana"
    updateOperations[0].value.stringValue = potionName;

    return XGameStreamingUpdateTouchControlsStateOnClient(client, _countof(updateOperations), updateOperations);
}

此代码更改存储在 potionButtonFaceImage 状态变量中的资产的名称，这将导致新选择的资产出现在在其样式中引用此状态的任何布局中。

自定义资产大小

下表汇总了每个控件上的元素，这些元素可以应用自定义资产，以及每个资产的 1.0 倍比例的最大像素大小。

控制	可样式元素	@1.0x 像素大小
ArcadeButton	background	60 x 60
	faceImage	60 x 60
按钮	background	60 x 60
	faceImage	60 x 60
DirectionalPad	background	60 x 60
游戏杆	background	120 x 120
	旋钮/背景	60 x 60
	knob/faceImage	60 x 60
油门	旋钮/背景	60 x 60
	knob/faceImage	60 x 60
触摸板	background (renderAsButton = true)	60 x 60
	background (renderAsButton = false)	120 x 120
	faceImage	60 x 60

ArcadeButton faceImage、按钮 faceImage、游戏杆旋钮 faceImage、油门旋钮 faceImage 和触摸板 faceImage 资产的像素大小为：

缩放	像素大小
@1.0x	60 x 60
@1.5x	90 x 90
@2.0x	120 x 120
@3.0x	180 x 180
@4.0x	240 x 240

ArcadeButton 背景、按钮背景、DirectonalPad 背景、游戏杆旋钮背景、油门旋钮背景和触摸板 (renderAsButton=true) 背景资产的像素大小为：

缩放	像素大小
@1.0x	60 x 60
@1.5x	90 x 90
@2.0x	120 x 120
@3.0x	180 x 180
@4.0x	240 x 240

游戏杆背景和触摸板 (renderAsButton=false) 背景资产的像素大小为：

缩放	像素大小
@1.0x	120 x 120
@1.5x	180 x 180
@2.0x	240 x 240
@3.0x	360 x 360
@4.0x	480 x 480

图像量化

生成触摸适配捆绑包时，TAK CLI将对提供的 PNG 执行量化，以减小生成的 .takx 文件的大小。虽然量化不应影响资产的外观，但仍是一个好办法，验证在触摸布局中显示的资产是否与你认为它们在创建图像时的外观相匹配。

如果量化过程影响图像的呈现方式，则可以通过在生成捆绑包时将 --no-asset-optimization 可选传递给 TAK CLI 来禁用它。

通过