Vinculación de entrada de UI

Vincula acciones de entrada a tus propios elementos de UI para que controlen la entrada del jugador.

UiInputBinding convierte cualquier elemento de UI en un botón de control. Vincula un elemento a una o más InputActions, y mientras se mantiene presionado — mediante touch o Pointer — esas acciones permanecen activas, controlando tanto la entrada del jugador local (movimiento, salto) como cualquier InputAction listeners de la escena, exactamente igual que los botones nativos en pantalla.

Úsalo para crear tus propios controles táctiles. Normalmente se usa junto con Controles en pantalla: oculta los botones nativos y luego coloca los tuyos en su lugar.

Un gamepad completamente personalizado construido a partir de elementos de UI — cada botón es una entidad de UI vinculada a una acción de entrada

Vincula una acción a un elemento de UI

Añade un uiInputBinding prop a cualquier elemento de tu .tsx UI y enumera las acciones que se mantendrán activas mientras se presiona. El prop está disponible en cada elemento de UI (UiEntity, Button, Label, …), igual que uiTransform y uiBackground.

Un botón que mueve al jugador hacia adelante mientras se mantiene presionado:

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] }}
	/>
)

Construye un conjunto de controles personalizado

Combina varios elementos vinculados para armar un esquema de control completo.

Un botón de movimiento más un botón de acción que activa 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="Usar"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_PRIMARY] }}
		/>
	</UiEntity>
)

Las acciones vinculadas se comportan igual que los botones nativos: IA_FORWARD / IA_BACKWARD / IA_LEFT / IA_RIGHT mueven al avatar, y cualquier acción puede ser leída por los listeners de tu escena. InputAction Al eliminar el prop (o el componente) se libera la vinculación.

Propiedades

Propiedad	Tipo	Descripción
actions	array de InputAction	Las acciones de entrada que se mantienen presionadas mientras este elemento está presionado. Consulta Eventos de clic para ver la lista completa de InputAction valores.

Combínalo con TouchScreenControls para ocultar los controles nativos y reemplazarlos con tu propia UI táctil — la forma recomendada de lanzar un esquema de control completamente personalizado.

Relacionado

• Controles en pantalla

• Eventos de botones de UI

• Entrada en dispositivos móviles

• Eventos de clic