> 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 Entrada da UI

Vincule ações de entrada aos seus próprios elementos de UI para que eles acionem a entrada do jogador.

`UiInputBinding` transforma qualquer elemento de UI num botão de controlo. Associe um elemento a uma ou mais [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md#pointer-buttons)s, e, enquanto estiver premido — por toque ou pointer — essas ações são mantidas premidas, controlando tanto a entrada do jogador local (movimento, salto) como quaisquer [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md#pointer-buttons) ouvintes da cena, exatamente como os botões nativos no ecrã.

Use-o para criar os seus próprios controlos táteis. Normalmente é combinado com [On-screen Controls](/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 associada a uma ação de input</p></figcaption></figure>

## Associar uma ação a um elemento de UI

Adicione um `uiInputBinding` a qualquer elemento da sua `.tsx` UI e liste as ações que devem ficar pressionadas enquanto estiver premido. 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 premido:**

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

## Criar um conjunto de controlos personalizado

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

**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="Usar"
			uiTransform={{ width: 100, height: 100 }}
			uiInputBinding={{ actions: [InputAction.IA_PRIMARY] }}
		/>
	</UiEntity>
)
```

As ações associadas comportam-se exatamente como os botões nativos: `IA_FORWARD` / `IA_BACKWARD` / `IA_LEFT` / `IA_RIGHT` movem o avatar, e qualquer ação pode ser lida pelos ouvintes da sua cena. [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md#pointer-buttons) Remover a prop (ou o componente) liberta a associação.

## Propriedades

| Propriedade | Tipo                                                                                                                              | Descrição                                                                                                                                                                                                                                                                                                                                              |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `actions`   | array de [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md#pointer-buttons) | As ações de input mantidas premidas enquanto este elemento é premido. Consulte [Eventos de clique](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md) para a lista completa de [`InputAction`](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/click-events.md#pointer-buttons) valores. |

{% hint style="info" %}
Combine isto com [`TouchScreenControls`](/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 lançar um esquema de controlos totalmente personalizado.
{% endhint %}

## Relacionados

* [On-screen Controls](/creator/content-creator-pt/scenes-sdk7/interatividade/touch-screen-controls.md)
* [Eventos do botão de UI](/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_button_events.md)
* [Input no mobile](/creator/content-creator-pt/criar-para-mobile/desenvolver/input-on-mobile.md)
* [Eventos de clique](/creator/content-creator-pt/scenes-sdk7/interatividade/eventos-de-botao/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.