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:
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { playerCurrentPosition } from './index'
import { Color4 } from '@dcl/sdk/math'
// desenhar UI
export const uiMenu = () => (
<UiEntity
uiTransform={{
width: '100%',
height: '100px',
justifyContent: 'center',
alignItems: 'center',
}}
uiText={{ value: `Jogador: `+ playerCurrentPosition, fontSize: 40 }}
uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
/>
)arquivo index.ts:
No exemplo acima, também poderia incluir a variável como parte da string, envolvendo a variável em ${ }.
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:
arquivo index.ts:
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:
arquivo index.ts:
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:
arquivo index.ts:
Atualizado