> 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/dynamic-ui.md). # UI Dinâmica Saiba como tornar UIs dinâmicas, respondendo a alterações nos dados. Pode definir uma UI que inclua elementos dinâmicos, que são atualizados a cada tick. Só precisa de lidar com a atualização da variável que representa estes dados, e a UI adaptar-se-á em resposta aos novos valores. Isto é muito útil para incluir elementos como um cronómetro, a pontuação de um jogador, etc. Mas pode até ir mais longe e definir estruturas inteiras de UI com base no state. ## Variáveis de referência Pode simplesmente referenciar uma variável em qualquer propriedade de um dos componentes num uiEntity. À medida que a variável muda de valor, a UI adaptar-se-á em conformidade. O exemplo abaixo define uma variável `playerCurrentPosition` e referencia-a como parte de uma string num `uiText` componente. Um sistema atualiza então o valor desta variável a cada tick, usando a posição atual do jogador. À medida que o valor da variável muda, a UI atualiza-se em conformidade, sem nunca precisar de modificar explicitamente a UI. ***arquivo ui.tsx:*** ```tsx import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { playerCurrentPosition } from './index' import { Color4 } from '@dcl/sdk/math' // desenhar UI export const uiMenu = () => ( ) ``` ***arquivo index.ts:*** ```ts import { ReactEcsRenderer } from '@dcl/sdk/react-ecs' import { engine, Transform } from '@dcl/sdk/ecs' import { uiMenu } from './ui' export function main() { ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 }) } // definir variável export let playerCurrentPosition: string = "" // sistema para atualizar a variável engine.addSystem(() => { const playerPosition = Transform.getOrNull(engine.PlayerEntity) if (!playerPosition) return const { x, y, z } = playerPosition.position playerCurrentPosition = `{x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }` }) ``` No exemplo acima, também poderia incluir a variável como parte da string, envolvendo a variável em `${ }`. ```ts uiText={{ value: `Jogador: ${playerCurrentPosition}`, fontSize: 40 }} ``` ## Chamar funções de dentro de uma UI Também pode chamar uma função de dentro de uma definição JSX, devolvendo um valor a usar numa propriedade da UI. As funções chamadas de dentro desta definição JSX são chamadas recorrentemente, a cada tick do ciclo do jogo. No exemplo abaixo, um `uiText` componente chama a `getPlayerPosition()` função para definir parte da string a exibir. Este exemplo é semelhante ao da secção anterior, mas ao chamar uma função de dentro da definição da UI evitamos declarar uma variável separada e definir um sistema para alterar essa variável. Note que `getPlayerPosition()` é chamada a cada tick do ciclo do jogo, sem necessidade de declarar explicitamente um sistema. ***arquivo ui.tsx:*** ```tsx import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' import { engine, Transform } from "@dcl/sdk/ecs"; export const uiMenu = () => ( ) function getPlayerPosition(){ const playerPosition = Transform.getOrNull(engine.PlayerEntity) if (!playerPosition) return 'a carregar...' const { x, y, z } = playerPosition.position return `{x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }` } ``` ***arquivo index.ts:*** ```ts import { ReactEcsRenderer } from '@dcl/sdk/react-ecs' import { uiMenu } from './ui' export function main() { ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 }) } ``` ## Ativar e desativar uma UI A forma mais fácil de ativar e desativar uma UI é usar uma variável para o valor da `display` propriedade numa `uiTransform`. O `display` A propriedade faz com que uma entidade UI e todos os seus filhos fiquem invisíveis se estiver definida como `none`. O exemplo seguinte usa uma variável para definir o `display` campo de uma parte da UI. O valor desta variável pode ser alternado ao clicar noutro elemento de UI. ***arquivo ui.tsx:*** ```tsx import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' // Variável para refletir o estado atual da visibilidade do menu var isMenuVisible: boolean = false // Função para alternar o estado do menu function toggleMenuVisibility() { isMenuVisible = !isMenuVisible } export const uiMenu = () => ( // pai {/* Menu */} {/* botão */} ) ``` ***arquivo index.ts:*** ```ts import { ReactEcsRenderer } from '@dcl/sdk/react-ecs' import { uiMenu } from './ui' export function main() { ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 }) } ``` ## Entidades UI dinâmicas Os exemplos nas secções acima mostram como alterar dinamicamente uma única propriedade numa entidade, mas também pode definir estruturas inteiras de entidades que podem escalar com base em dados que mudam dinamicamente. Este tipo de padrão é comum no desenvolvimento web ao usar bibliotecas como React, e é extremamente poderoso. Com isto, pode definir aplicações de UI extremamente flexíveis e escaláveis. O exemplo seguinte lista os ids de todas as entidades na cena que têm um `MeshRenderer` e `Transform`. Cria um `uiText` para cada uma. À medida que o conteúdo da cena muda, a lista de entidades UI também se adapta a cada tick. ***arquivo ui.tsx:*** ```tsx import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' import { engine } from '@dcl/sdk/ecs' import { MeshRenderer } from '@dcl/sdk/ecs' import { Transform } from '@dcl/sdk/ecs' export const uiMenu = () => ( {generateText()} ) function generateText(){ return Array.from(engine.getEntitiesWith( MeshRenderer, Transform )).map(([entity]) => ) } function TextComponent(props: { value: string; key: string | number }) { return } ``` ***arquivo index.ts:*** ```ts import { ReactEcsRenderer } from '@dcl/sdk/react-ecs' import { uiMenu } from './ui' export function main() { ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 }) } ``` --- # 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/dynamic-ui.md?ask=&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.