Tipos especiales de UI

Tipos especiales de entidad para la UI, incluidos dropdowns y cuadros de entrada.

Hay ciertos tipos de entidades especiales que permiten algunos tipos especiales de interacciones.

Desplegable

Crear un Desplegable entidad para permitir a los usuarios expandir y seleccionar un elemento de una lista.

A Desplegable la entidad debe tener al menos las siguientes propiedades:

• opciones: Qué valores mostrar cuando el desplegable está expandido. Proporciona un objeto que contenga un array con un valor de cadena para cada opción. El primer valor del array se muestra como la opción predeterminada.

• onChange: Una función que se ejecuta cada vez que se selecciona un valor en el desplegable, usando

También puedes configurar otros componentes del Desplegable entidad, como un uiTransform, como en otras entidades de UI.

archivo ui.tsx:

import { UiEntity, Label, Dropdown, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'
import { Color4Type } from '@dcl/sdk/ecs'

function selectOption(index: number) {
  switch (index) {
    case 0:
      textColor = Color4.Red()
      break
    case 1:
      textColor = Color4.Blue()
      break
    case 2:
      textColor = Color4.Green()
      break
  }
}

let textColor: Color4Type = Color4.Red()

export const uiMenu = () => (
    <UiEntity
      uiTransform={{
        width: '200px',
        height: '100px',
        alignContent: 'auto',
        flexDirection: 'column',
        alignSelf: 'center',
      }}
    >
      <Label
        value="Selecciona un color"
        fontSize={18}
        color={textColor}
        uiTransform={{
          width: '140px',
          height: '40px',
        }}
      />
      <Dropdown
        options={[`Red`, `Blue`, `Green`]}
        onChange={selectOption}
        uiTransform={{
          width: '100px',
          height: '40px',
        }}
      />
    </UiEntity>
)

archivo index.ts:

import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
import { uiMenu } from './ui'

export function main() {
    ReactEcsRenderer.setUiRenderer(uiMenu)
}

📔 Nota: Todos los fragmentos siguientes en esta página asumen que tienes un .ts similar al anterior, ejecutando la ReactEcsRenderer.setUiRenderer() función.

Texto de entrada

Crear un Input entidad para permitir a los usuarios escribir texto. Los jugadores deben primero hacer clic en este recuadro antes de poder escribir en él.

El comportamiento de la Input entidad se gestiona mediante las siguientes propiedades:

• onSubmit: Una función que se ejecuta cuando el jugador presiona Return/Enter, usando el texto proporcionado como entrada. El campo de texto se borra cuando esto sucede.

• onChange: Una función que se ejecuta cada vez que cambia un valor en el texto de entrada. A medida que el jugador escribe en el recuadro, esta función se ejecuta una vez por cada carácter que se añade o se elimina. También se llama cuando el jugador presiona Return/Enter y el texto se borra.

• desactivar: Si true, el jugador no podrá interactuar con la entidad de entrada.

El siguiente ejemplo usa onSubmit para registrar el texto proporcionado en la consola.

import { UiEntity, Input, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'


export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 400,
      height: 300,
      positionType: 'absolute',
      position: {
        left: '35%',
        top: '40%',
      },
    }}
    uiBackground={{
      color: Color4.Gray(),
    }}
  >
    <Input
      onSubmit={(value) => {
        console.log('submitted value: ' + value)
      }}
      fontSize={35}
      placeholder={'type something'}
      placeholderColor={Color4.Black()}
      uiTransform={{
        width: '400px',
        height: '80px',
      }}
    ></Input>
  </UiEntity>
)

Es una buena práctica proporcionar tanto un botón para enviar como manejar el evento "onSubmit" cuando el jugador presiona la tecla Enter/Return. El siguiente ejemplo muestra cómo puedes hacer esto. Ten en cuenta que, para mantener consistencia, la función realizada por el botón borra manualmente el texto en el campo de entrada.

import { UiEntity, Input, Button, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'


let currentValue: string = ''

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 400,
      height: 300,
      positionType: 'absolute',
      position: {
        left: '35%',
        top: '40%',
      },
      flexDirection: 'column',
    }}
    uiBackground={{
      color: Color4.Gray(),
    }}
  >
    <Input
      onSubmit={(value) => {
        handleSubmitText(value)
      }}
      fontSize={35}
      placeholder={'type something'}
      placeholderColor={Color4.Black()}
      value={currentValue}
      onChange={($) => (currentValue = $)}
      uiTransform={{
        height: '80px',
        margin: '15px',
      }}
    ></Input>
    <Button
      value="Enviar texto"
      variant="primary"
      uiTransform={{ alignSelf: 'center', padding: '25px' }}
      onMouseDown={() => {
        handleSubmitText(currentValue)
        currentValue = ''
      }}
    />
  </UiEntity>
)

function handleSubmitText(value: string) {
  console.log('submitted value: ' + value)
  // hacer algo con el texto
}

💡 Consejo: El ejemplo de arriba establece la valor propiedad del texto de entrada a una variable. Con esto, puedes cambiar el texto mostrado simplemente cambiando la variable. Esto te permite hacer cosas como borrar el texto, cambiar los valores del placeholder o incluso implementar funcionalidades de autocorrección.

Las siguientes propiedades también están disponibles para personalizar el aspecto del campo de texto, la mayoría de ellas similares a las presentes en Label entidades:

• placeHolder: Cadena para mostrar antes de que el jugador empiece a introducir algo. Es útil hacer que este texto sea una pista sobre lo que debería escribir.

• placeHolderColor: El color a usar para el texto del placeholder, como un Color4.

💡 Consejo: Usa una tonalidad más pálida del color del texto que escribe el jugador.

• fontSize: El tamaño del texto, como un número.

  NOTA: El fontSize no se ve afectado por el tamaño de su entidad o entidades padre.

• color: El color del texto que escribe el jugador, como un Color4.

📔 Nota: Asegúrate de usar un color diferente del placeHolderColor.

- `font`: La fuente a usar, tomando un valor del enum `Font`. Los valores soportados son: - `serif` - `sans-serif` _(predeterminado)_ - `monospace` - `textAlign`: Cómo se alineará el texto con su padre. Toma un valor de `TextAlignType`. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

También puedes configurar otros componentes del Input entidad, como un uiTransform, OnMouseDown como en otras entidades de UI.

import { UiEntity, Input, Label, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

var currentTextString = ''

export const uiMenu = () => (
    <UiEntity
      uiTransform={{
        width: '50%',
        height: 150,
        flexDirection: 'column',
        alignContent: 'flex-start',
        margin: { left: 20, top: 20 },
        padding: { left: 10, top: 10, right: 10 },
        alignSelf: 'center',
      }}
      uiBackground={{ color: Color4.Gray() }}
    >
      <Input
        onChange={(e) => {
          currentTextString = 'escribiste: ' + e
        }}
        fontSize={35}
        placeholder={'type something'}
        placeholderColor={Color4.Gray()}
      />
      <Label value={currentTextString} fontSize={40} />
    </UiEntity>
)