Tipos de Cor

Como definir valores de cor

Valores de cor podem ser passados como propriedades de diferentes componentes, como Materials, Text ou diferentes propriedades de UI entities. Valores de cor podem ser do tipo Color3 ou Color4.

Color3 contém três propriedades, red, green, e blue. Color4 possui essas mesmas três mais alpha, para valores de transparência.

Definir uma cor

Você pode criar uma cor usando a Color3.create() ou o Color4.create() funções.

// Cor vermelha
const red3 = Color3.create(1, 0, 0)
const red4 = Color4.create(1, 0, 0, 1)

Você também pode criar certas cores predefinidas que fazem parte dos Color3 e Color4 namespaces.

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

💡 Tip: Escreva Color3. ou Color4. e o Visual Studio deve sugerir todos os valores possíveis em um menu inteligente.

Você também pode escolher uma cor aleatória usando a seguinte função:

const randomColor = Color3.Random()

Se você preferir descrever uma cor em hexadecimal, use Color3.fromHexString().

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

Qualquer objeto que inclua valores numéricos para r, g, e b pode ser interpretado como um Color3 valor. Da mesma forma, qualquer objeto que inclua essas propriedades mais um a valor pode ser interpretado como um Color4 valor. Isso permite que você também use a seguinte sintaxe:

// Cor vermelha
const red3 = { r: 1, g: 0, b: 0 }
const red4 = { r: 1, g: 0, b: 0, a: 1 }

O exemplo a seguir usa uma propriedade de cor como parte de um TextShape component, para definir a cor do 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 e Color4 devem ser importados via

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

Veja Imports para como lidar com estes facilmente.

Transparência

Use o alpha propriedade de Color4 para tornar uma cor translúcida.

Se o alpha for 1, a cor será completamente opaca; se for 0 será completamente invisível. Qualquer valor intermediário resulta em um tom parcialmente transparente.

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

// Metade do caminho
const half = Color4.create(1, 1, 1, 0.5)

// Quase invisível
const half = Color4.create(1, 1, 1, 0.1)

Lerp

Use o Color3.lerp() ou o Color4.lerp() função para definir uma cor que esteja entre duas outras cores. Essas funções funcionam de forma semelhante ao Vector3.lerp() função.

Ambos Color3.lerp() ou o Color4.lerp() aceitam os seguintes argumentos:

• left: A primeira cor a usar como referência

• right: A segunda cor a usar como referência

• amount: Um número de 0 a 1 para definir quanto da left cor usar na mistura. Quanto mais próximo de 0, mais próximo da left cor.

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

Você pode usar um sistema para alterar gradualmente o amount parâmetro, para criar uma transição 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 as entidades do grupo
  for (const [entity] of entitiesWithMaterial) {
    const material = Material.getMutable(entity)
    material.albedoColor = Color4.lerp(color1, color2, Math.sin(pulseState))
  }
}

engine.addSystem(PulseSystem)