UI dinámica
Aprende cómo hacer que las UIs sean dinámicas y respondan a cambios en los datos.
Puedes definir una UI que incluya elementos dinámicos, que se actualizan en cada tick. Solo necesitas encargarte de actualizar la variable que representa estos datos, y la UI se adaptará en respuesta a los nuevos valores.
Esto es muy útil para incluir elementos como un temporizador, la puntuación de un jugador, etc. Pero incluso puedes ir un paso más allá y definir estructuras completas de UI basadas en el estado.
Variables de referencia
Simplemente puedes referenciar una variable en cualquier propiedad de uno de los components de una uiEntity. A medida que la variable cambia de valor, la UI se adaptará en consecuencia.
El siguiente ejemplo define una variable playerCurrentPosition y la referencia como parte de una cadena en un uiText component. Luego, un system actualiza el valor de esta variable en cada tick, usando la posición actual del jugador. A medida que el valor de la variable cambia, la UI se actualiza en consecuencia, sin necesidad de modificar explícitamente la UI en ningún momento.
archivo ui.tsx:
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { playerCurrentPosition } from './index'
import { Color4 } from '@dcl/sdk/math'
// dibujar UI
export const uiMenu = () => (
<UiEntity
uiTransform={{
width: '100%',
height: '100px',
justifyContent: 'center',
alignItems: 'center',
}}
uiText={{ value: `Jugador: `+ playerCurrentPosition, fontSize: 40 }}
uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
/>
)archivo index.ts:
En el ejemplo anterior, también podrías incluir la variable como parte de la cadena, envolviendo la variable en ${ }.
Llamar funciones desde dentro de una UI
También puedes llamar a una función desde dentro de una definición JSX, devolviendo un valor para usar en una propiedad de la UI. Las funciones que se llaman desde dentro de esta definición JSX se llaman recurrentemente, en cada tick del game loop.
En el siguiente ejemplo, un uiText component llama a la getPlayerPosition() función para definir parte de la cadena que se mostrará.
Este ejemplo es similar al de la sección anterior, pero al llamar a una función desde dentro de la definición de la UI evitamos declarar una variable separada y definir un system para alterar esa variable. Ten en cuenta que getPlayerPosition() se llama en cada tick del game loop, sin necesidad de declarar explícitamente un system.
archivo ui.tsx:
archivo index.ts:
Alternar una UI entre activada y desactivada
La forma más sencilla de alternar una UI entre activada y desactivada es usar una variable para el valor de la display property en la uiTransform. El display property hace que una UI entity y todos sus hijos sean invisibles si se establece en none.
El siguiente ejemplo usa una variable para establecer el display field de una parte de la UI. El valor de esta variable puede alternarse haciendo clic en otro elemento de la UI.
archivo ui.tsx:
archivo index.ts:
UI entities dinámicas
Los ejemplos de las secciones anteriores muestran cómo cambiar dinámicamente una sola propiedad en una entity, pero también puedes definir estructuras completas de entities que pueden escalar en función de datos que cambian dinámicamente. Este tipo de patrón es común en el desarrollo web al usar librerías como React, y es extremadamente potente. Con esto puedes definir aplicaciones de UI extremadamente flexibles y escalables.
El siguiente ejemplo enumera los ids de todas las entities de la scene que tienen un MeshRenderer y Transform. Crea un uiText para cada uno. A medida que el contenido de la scene cambia, la lista de UI entities también se adapta en cada tick.
archivo ui.tsx:
archivo index.ts:
Última actualización