Tipos de cor

Como definir valores de cor

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

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

Definir uma cor

Pode criar uma cor usando as Color3.create() ou a Color4.create() funções.

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

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()

💡 Dica: Escrever Color3. ou Color4. e o Visual Studio deverá sugerir todos os valores possíveis num dropdown inteligente.

Em alternativa, pode escolher uma cor aleatória usando a seguinte função:

const randomColor = Color3.Random()

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

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

Qualquer valor de 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. Isto também permite usar 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 seguinte usa uma propriedade de cor como parte de um TextShape componente, 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"

Vê Imports para saber como lidar facilmente com isto.

Transparência

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

Se alpha for 1, a cor será completamente opaca; se for 0, será completamente invisível. Qualquer valor intermédio resulta num tom parcialmente transparente.

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

// A meio caminho
const half = Color4.create(1, 1, 1, 0.5)

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

Lerp

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

Ambas Color3.lerp() ou a Color4.lerp() recebem 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 right cor usar na mistura. Quanto mais perto de 0, mais perto da left cor.

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

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
  // oscilar entre 0 e 1
  const amount = (Math.sin(pulseState) + 1) / 2
  const entitiesWithMaterial = engine.getEntitiesWith(Material)

  // iterar pelas entities do 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)