Tipos de color

Cómo definir valores de color

Los valores de color se pueden pasar como propiedades de diferentes Components, como Materiales, Text o diferentes propiedades de entidades de UI. Los valores de color pueden ser del tipo Color3 o Color4.

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

Definir un color

Puedes crear un color usando las Color3.create() sin código Color4.create() funciones.

// Color rojo
const red3 = Color3.create(1, 0, 0)
const red4 = Color4.create(1, 0, 0, 1)

También puedes crear ciertos colores predefinidos que forman parte de los Color3 y Color4 namespaces.

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 Color3 valor. Del mismo modo, cualquier objeto que incluya esas propiedades más un a valor puede interpretarse como un Color4 valor. Esto te permite usar también 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 component, para establecer el color del texto.

const myEntity = engine.addEntity()

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

TextShape.create(myEntity, {
  text: 'este texto es ROJO',
  textColor: Color4.create(1, 0, 0, 1),
})

📔 Nota: Color3 y Color4 deben importarse mediante

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

Consulta Imports para saber cómo manejarlos 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.

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

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

// Casi invisible
const almostInvisible = Color4.create(1, 1, 1, 0.1)

Lerp

Usa la Color3.lerp() sin código 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() sin código 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 right 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 sistema 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
  // oscila entre 0 y 1
  const amount = (Math.sin(pulseState) + 1) / 2
  const entitiesWithMaterial = engine.getEntitiesWith(Material)

  // itera sobre las entidades del grupo
  for (const [entity] of entitiesWithMaterial) {
    const material = Material.getMutable(entity)
    if (material.material?.$case === 'pbr') {
      material.material.pbr.albedoColor = Color4.lerp(color1, color2, amount)
    }
  }
}

engine.addSystem(PulseSystem)