UI 输入绑定

将输入动作绑定到你自己的 UI 元素上，让它们驱动玩家输入。

UiInputBinding 将任何 UI 元素变成一个控制按钮。将一个元素绑定到一个或多个 InputAction们，并且在按住时——通过触摸或指针——这些动作会持续按下，驱动本地玩家的输入（移动、跳跃）以及任何场景 InputAction 监听器，完全和原生的屏幕按钮一样。

用它来构建你自己的触摸控制。它通常会与 屏幕控制：隐藏原生按钮，然后用你自己的按钮替换它们。

一个完全自定义的手柄，由 UI 元素构建——每个按钮都是绑定到某个输入动作的 UI 实体

将一个动作绑定到 UI 元素

添加一个 uiInputBinding 属性到你的任意 .tsx UI 中，并列出按住它时要保持按下的动作。该属性可用于每个 UI 元素（UiEntity, Button, Label，……），就像 uiTransform 和 uiBackground.

一个按住时会让玩家前进的按钮：

import { InputAction } from '@dcl/sdk/ecs'
import { Button } from '@dcl/sdk/react-ecs'

export const forwardButton = () => (
	<Button
		value="▲"
		uiTransform={{ width: 100, height: 100 }}
		uiInputBinding={{ actions: [InputAction.IA_FORWARD] }}
	/>
)

构建自定义控制组

将多个已绑定元素组合起来，构建完整的控制方案。

一个移动按钮，加上一个会触发的动作按钮 IA_PRIMARY:

import { InputAction } from '@dcl/sdk/ecs'
import { Button, UiEntity } from '@dcl/sdk/react-ecs'

export const customControls = () => (
	<UiEntity uiTransform={{ width: 240, height: 120 }}>
		<Button
			value="▲"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_FORWARD] }}
		/>
		<Button
			value="Use"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_PRIMARY] }}
		/>
	</UiEntity>
)

已绑定的动作表现得和原生按钮完全一样： IA_FORWARD / IA_BACKWARD / IA_LEFT / IA_RIGHT 移动化身，并且任何动作都可以被你的场景的 InputAction 监听器读取。移除该属性（或组件）会解除绑定。

属性

属性	类型	描述
actions	数组 InputAction	当该元素被按下时保持按下的输入动作。参见 点击事件 以查看完整的 InputAction 值列表。

将其与 TouchScreenControls 一起使用，以隐藏原生控制并用你自己的触摸 UI 替换它们——这是发布完全自定义控制方案的推荐方式。

相关

• 屏幕控制

• UI 按钮事件

• 移动端输入

• 点击事件