Ui
Descripción
Este componente establece una Interfaz de Usuario en relación con la entidad.
Propiedades
| Propiedad | Tipo | Por defecto | Descripción |
|---|---|---|---|
| tipo (Obligatorio) | cadena | Los tipos admitidos son: 'overlay' y '3d' | |
| fuente | cadena | Fuente a utilizar | |
| fontSize | f32 | Tamaño del texto | |
| posición | cadena | Tipo de posicionamiento | |
| opacidad | f32 | 1 | Opacidad global del objeto |
| backgroundOpacity | f32 | 0 | Opacidad del fondo |
| backgroundSize | cadena | Tamaño del fondo | |
| fondo | cadena | Color de fondo | |
| color | cadena | Color de primer plano (texto) | |
| texto | cadena | "" | Contenido textual del objeto |
| imagen | cadena | null | Recursos de imagen |
| fixedSize | booleano | Determina si el tamaño es fijo | |
| anchura | cadena | 100 | Anchura del objeto |
| altura | cadena | 100 | Altura del objeto |
| top | cadena | Posición vertical desde el borde superior | |
| izquierda | cadena | Posición horizontal desde el borde izquierdo | |
| fondo | cadena | Posición vertical desde el borde inferior | |
| derecha | cadena | Posición horizontal desde el borde derecho | |
| borderColor | cadena | Color del borde | |
| borderRadius | f32 | 0 | Redondea las esquinas del elemento |
| alignContent | cadena | Distribución del espacio entre los elementos de contenido; valores permitidos: 'flex-start', 'center', 'flex-end', 'stretch', 'space-between', 'space-around' | |
| alignItems | cadena | Alineación de los elementos en el eje transversal; valores permitidos: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline' | |
| alignSelf | cadena | Alineación de un elemento flex individual; valores permitidos: 'auto', 'flex-start', 'center', 'flex-end', 'stretch', 'baseline' | |
| borderWidth | f32 | 0 | Anchura del borde |
| columnGap | cadena | Separación entre columnas | |
| dirección | cadena | Dirección del texto; valores permitidos: 'heredar', 'LTR', 'RTL' | |
| mostrar | cadena | Tipo de visualización del elemento; valores permitidos: 'flex', 'none' | |
| flex | f32 | Abreviatura de crecimiento, contracción y base flexibles | |
| flexBasis | cadena | Tamaño principal inicial de un elemento flexible | |
| flexDirection | cadena | Dirección de los elementos flexibles en el contenedor; valores permitidos: 'column', 'column-reverse', 'row', 'row-reverse' | |
| flexGrow | f32 | Define la capacidad de crecimiento de un elemento flexible | |
| flexShrink | f32 | Define la capacidad de encogimiento de un elemento flexible | |
| flexWrap | cadena | Si los elementos flex se envuelven; valores permitidos: 'no-wrap', 'wrap', 'wrap-reverse' | |
| brecha | cadena | Separación entre elementos flexibles | |
| justifyContent | cadena | Alineación de los elementos en el eje principal; valores permitidos: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly' | |
| margen | cadena | Margen alrededor del elemento | |
| marginBottom | cadena | Margen inferior | |
| marginLeft | cadena | Margen izquierdo | |
| marginRight | cadena | Margen derecho | |
| marginTop | cadena | Margen superior | |
| maxHeight | cadena | Altura máxima del elemento | |
| maxWidth | cadena | Anchura máxima del elemento | |
| minHeight | cadena | Altura mínima del elemento | |
| minWidth | cadena | Anchura mínima del elemento | |
| desbordamiento | cadena | Cómo se gestiona el contenido que excede el tamaño del elemento; valores permitidos: 'visible', 'hidden', 'scroll' | |
| acolchado | cadena | Relleno dentro del elemento | |
| paddingBottom | cadena | Acolchado inferior | |
| paddingLeft | cadena | Relleno izquierdo | |
| paddingRight | cadena | Acolchado derecho | |
| paddingTop | cadena | Acolchado superior | |
| rowGap | cadena | Espacio entre filas | |
| textAlign | cadena | Alineación del texto dentro del elemento; valores permitidos: 'left', 'right', 'center', 'justify' |
Funciones
Get
Returns a read-only reference.
Example
ecs.Ui.get(world, component.eid)
Set
Ensures the component exists on the entity, then assigns the (optional) data to the component.
Example
ecs.Ui.set(world, component.eid, {
type: 'overlay',
background: '#FFFFFF'
})
Mutate
Perform an update to the component within a callback function. Return true to indicate no changes made.
Example
ecs.Ui.mutate(world, component.eid, (cursor) => {
cursor.opacity = 0.5;
cursor.text = '¡Hola Mundo!';
cursor.width = 150;
return false;
})
Remove
Removes the component from the entity.
Example
ecs.Ui.remove(world, component.eid)
Has
Returns true if the component is present on the entity.
Example
ecs.Ui.has(world, component.eid)
Reset
Adds, or resets the component to its default state.
Example
ecs.Ui.reset(world, component.eid)
Advanced Functions
Cursor
Returns a mutable reference. Cursors are reused so only one cursor for each component can exist at a time.
Example
ecs.Ui.cursor(world, component.eid)
Acquire
Same behavior as cursor, but commit must be called after the cursor is done being used.
Example
ecs.Ui.acquire(world, component.eid)
Commit
Called after acquire. An optional third argument determines whether the cursor was mutated or not.
Example
ecs.Ui.commit(world, component.eid)
ecs.Ui.commit(world, component.eid, false)
Dirty
Mark the entity as having been mutated. Only needed in a specific case where systems are mutating data.
Example
ecs.Ui.dirty(world, component.eid)