> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_input_binding.md).

# Vinculação de Input da UI

Vincule ações de input aos seus próprios elementos de UI para que elas acionem a entrada do player.

`UiInputBinding` transforma qualquer elemento de UI num botão de controlo. Vincule um elemento a uma ou mais [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md#pointer-buttons)s, e enquanto estiver pressionado — por toque ou ponteiro — essas actions são mantidas pressionadas, controlando tanto o input do jogador local (movimento, salto) quanto quaisquer scene [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md#pointer-buttons) listeners, exatamente como os botões nativos na tela.

Use-o para criar os seus próprios controlos táteis. Normalmente é combinado com [Controlos na tela](/creator/content-creator-pt/scenes-sdk7/interatividade/touch-screen-controls.md): oculte os botões nativos e coloque os seus no lugar.

<figure><img src="https://2402076176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-871e8f850109fd31650535349ba3e385565845f1%2Fui-input-binding.jpg?alt=media" alt="A retro-style gamepad assembled from custom UI elements, each wired to an input action"><figcaption><p>Um gamepad totalmente personalizado construído a partir de elementos de UI — cada botão é uma UI entity vinculada a uma input action</p></figcaption></figure>

## Vincule uma action a um elemento de UI

Adicione um `uiInputBinding` prop a qualquer elemento na sua `.tsx` UI e liste as actions a manter pressionadas enquanto estiver pressionado. A prop está disponível em todos os elementos de UI ([`UiEntity`](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#ui-entities), [`Button`](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#ui-entities), [`Label`](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#ui-entities), …), tal como `uiTransform` e `uiBackground`.

**Um botão que move o jogador para a frente enquanto estiver pressionado:**

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

## Crie um conjunto de controlos personalizado

Combine vários elementos vinculados para montar um esquema de controlos completo.

**Um botão de movimento mais um botão de ação que dispara `IA_PRIMARY`:**

```tsx
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>
)
```

As actions vinculadas comportam-se exatamente como os botões nativos: `IA_FORWARD` / `IA_BACKWARD` / `IA_LEFT` / `IA_RIGHT` movem o avatar, e qualquer action pode ser lida pelos listeners da sua scene. Remover a prop (ou o component) liberta a vinculação. [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md#pointer-buttons) Propriedades

## Propriedade

| Tipo       | Descrição                                                                                                                                                                                                         | actions                                                                                                                                                                                                                                                                      |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `array de` | As input actions mantidas pressionadas enquanto este elemento estiver pressionado. Consulte [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md#pointer-buttons) | Click events [para a lista completa de](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md) values. [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md#pointer-buttons) Combine isto com |

{% hint style="info" %}
TouchScreenControls [`para ocultar os controlos nativos e substituí-los pela sua própria UI tátil — a forma recomendada de disponibilizar um esquema de controlos totalmente personalizado.`](/creator/content-creator-pt/scenes-sdk7/interatividade/touch-screen-controls.md) para ocultar os controlos nativos e substituí-los pela sua própria UI tátil — a forma recomendada de disponibilizar um esquema de controlos totalmente personalizado.
{% endhint %}

## Relacionados

* [Controlos na tela](/creator/content-creator-pt/scenes-sdk7/interatividade/touch-screen-controls.md)
* [Eventos de UI Button](/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_button_events.md)
* [Input em dispositivos móveis](/creator/content-creator-pt/criar-para-dispositivos-moveis/desenvolver/input-on-mobile.md)
* [para a lista completa de](/creator/content-creator-pt/scenes-sdk7/interatividade/button-events/click-events.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_input_binding.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.