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 u Color4.

Color3 contiene tres propiedades, red, green, y blue. Color4 tiene esas mismas tres más alpha, para valores de transparencia.

Establecer un color

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

// Color rojo
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 namespaces.

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

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

De lo contrario, 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 objeto cuyo valor incluya valores numéricos para r, g, y b puede interpretarse como un Color3 valor. Del mismo modo, cualquier objeto que incluya esas propiedades más una a valor puede interpretarse como un Color4 valor. Esto te permite también usar la siguiente sintaxis:

// Color rojo
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 componente, 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 vía

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

Ver Imports para ver cómo manejar estos 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 resultará en un tono parcialmente transparente.

// Completamente opaco
const opaque = Color4.create(1, 1, 1, 1)

// A medio camino
const half = Color4.create(1, 1, 1, 0.5)

// Casi 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 forma similar a Vector3.lerp() función.

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

• left: El primer color a usar como referencia

• right: El segundo color a usar como referencia

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

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

Puedes usar un system para cambiar gradualmente el amount parameter, 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)

  // iterar sobre las entidades del grupo
  for (const [entity] of entitiesWithMaterial) {
    const material = Material.getMutable(entity)
    material.albedoColor = Color4.lerp(color1, color2, Math.sin(pulseState))
  }
}

engine.addSystem(PulseSystem)