Tipos de color

Cómo definir valores de color

Los valores de color pueden pasarse como propiedades de diferentes componentes, como Materials, Text o diferentes propiedades de UI entities. Los valores de color pueden ser de tipo Color3 o Color4.

Color3 contiene tres propiedades, rojo, verde, y azul. Color4 tiene esas mismas tres más alpha, para valores de transparencia.

Set a color

Puedes crear un color usando las Color3.create() o el Color4.create() funciones.

// Red color
const red3 = Color3.create(1, 0, 0)
const red4 = Color4.create(1, 0, 0, 1)

También puedes crear ciertos colores predeterminados que forman parte de los Color3 y Color4 espacios de nombres.

const red = Color3.Red()
const blue = Color3.Blue()
const black = Color3.Black()

💡 Consejo: Escribe Color3. o Color4. y Visual Studio debería sugerir todos los valores posibles en un desplegable inteligente.

También puedes elegir un color aleatorio usando la siguiente función:

const randomColor = Color3.Random()

Si prefieres describir un color en hexadecimal, usa Color3.fromHexString().

const red = Color3.fromHexString('FD350A')
const blue = Color3.fromHexString('0A0CFD')

Cualquier valor de objeto que incluya valores numéricos para r, g, y b puede interpretarse como un valor de Color3 . Del mismo modo, cualquier objeto que incluya esas propiedades más un valor a puede interpretarse como un valor de Color4 . Esto también te permite usar la siguiente sintaxis:

// Red color
const red3 = { r: 1, g: 0, b: 0 }
const red4 = { r: 1, g: 0, b: 0, a: 1 }

El siguiente ejemplo usa una propiedad de color como parte de un TextShape component, para establecer el color del texto.

const myEntity = engine.addEntity()

Transform.create(myEntity, {
  position: Vector3.create(4, 1, 4),
})

TextShape.create(myEntity, {
  text: 'this text is RED',
  textColor: Color4.create(1, 0, 0, 1),
})

📔 Nota: Color3 y Color4 deben importarse mediante

import { Color3, Color4 } from "@dcl/sdk/math"

Consulta Imports para ver cómo manejar esto fácilmente.

Transparencia

Usa la alpha propiedad de Color4 para hacer un color translúcido.

Si alpha es 1, el color será completamente opaco; si es 0, será completamente invisible. Cualquier valor intermedio da como resultado un tono parcialmente transparente.

// Completely opaque
const opaque = Color4.create(1, 1, 1, 1)

// Half way
const half = Color4.create(1, 1, 1, 0.5)

// Almost invisible
const half = Color4.create(1, 1, 1, 0.1)

Lerp

Usa la Color3.lerp() o el Color4.lerp() función para definir un color que está en algún punto entre otros dos colores. Estas funciones funcionan de manera similar a Vector3.lerp() .

Ambas Color3.lerp() o el Color4.lerp() toman los siguientes argumentos:

• left: El primer color que se usará como referencia

• right: El segundo color que se usará como referencia

• amount: Un número de 0 a 1 para definir cuánto del left color se usará en la mezcla. Cuanto más cerca de 0, más cerca del left color.

const orange = Color3.lerp(Color3.Red(), Color3.Yellow(), 0.3)

Puedes usar un system para cambiar gradualmente el amount parámetro, para crear una transición suave.

// Systems
var pulseState: number = 0
const color1 = Color4.Red()
const color2 = Color4.Yellow()

export function PulseSystem(dt: number) {
  pulseState += dt
  const entitiesWithMaterial = engine.getEntitiesWith(Material)

  // iterate over the entities of the group
  for (const [entity] of entitiesWithMaterial) {
    const material = Material.getMutable(entity)
    material.albedoColor = Color4.lerp(color1, color2, Math.sin(pulseState))
  }
}

engine.addSystem(PulseSystem)