UI 입력 바인딩

입력 동작을 직접 만든 UI 요소에 연결하여 플레이어 입력을 구동하도록 합니다.

UiInputBinding 모든 UI 요소를 컨트롤 버튼으로 바꿉니다. 요소를 하나 이상의 InputActions, 그리고 그것이 눌려 있는 동안 — 터치나 포인터로 — 해당 액션은 계속 유지되어, 로컬 플레이어의 입력(이동, 점프)과 모든 씬 InputAction 리스너와도, 기본 화면 버튼과 똑같이 동작합니다.

자신만의 터치 컨트롤을 만드는 데 사용하세요. 일반적으로 화면 내 컨트롤: 기본 버튼을 숨기고, 그 자리에 직접 만든 버튼을 배치하세요.

UI 요소로 만든 완전히 사용자 지정된 게임패드 — 각 버튼은 입력 액션에 바인딩된 UI 엔터티입니다

UI 요소에 액션을 바인딩

다음을 추가하세요 uiInputBinding 를 당신의 어떤 요소에든 .tsx UI에 추가하고, 눌려 있는 동안 유지할 액션을 나열하세요. 이 prop은 모든 UI 요소(UiEntity, 버튼, 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="사용"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_PRIMARY] }}
		/>
	</UiEntity>
)

바인딩된 액션은 기본 버튼과 똑같이 동작합니다: IA_FORWARD / IA_BACKWARD / IA_LEFT / IA_RIGHT 아바타를 움직이며, 어떤 액션이든 씬의 InputAction 리스너에서 읽을 수 있습니다. prop(또는 컴포넌트)을 제거하면 바인딩이 해제됩니다.

속성

속성	유형	설명
actions	배열의 InputAction	이 요소가 눌려 있는 동안 유지되는 입력 액션입니다. 다음을 참조하세요 클릭 이벤트 전체 목록은 다음을 참조하세요 InputAction 값.

다음과 함께 사용하세요 TouchScreenControls 기본 컨트롤을 숨기고 자신만의 터치 UI로 대체하세요 — 완전히 사용자 지정한 조작 체계를 배포하는 데 권장되는 방법입니다.

관련

• 화면 내 컨트롤

• UI 버튼 이벤트

• 모바일에서의 입력

• 클릭 이벤트