颜色类型

如何定义颜色值

颜色值可以作为不同组件的属性传入，例如 材质, 文本 或 UI 实体的不同属性。颜色值可以是 Color3 或 Color4.

Color3 类型，它包含三个属性， red, green，以及 blue. Color4 则包含相同的三个属性再加上 透明度，用于透明度值。

设置颜色

你可以使用 Color3.create() 或 Color4.create() 函数来创建颜色。

// 红色
const red3 = Color3.create(1, 0, 0)
const red4 = Color4.create(1, 0, 0, 1)

你也可以创建属于 Color3 和 Color4 命名空间中的某些预定义颜色。

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

💡 提示：输入 Color3. 或 Color4. ，Visual Studio 应该会在一个智能下拉框中建议所有可能的值。

你也可以使用下面的函数来随机选择一种颜色：

const randomColor = Color3.Random()

如果你更喜欢用十六进制来描述颜色，请使用 Color3.fromHexString().

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

任何包含以下数值属性的对象： r, g，以及 b 都可以被解释为一个 Color3 值。同样，任何包含这些属性再加上一个 a 值的对象都可以被解释为一个 Color4 值。这也让你可以使用下面的语法：

// 红色
const red3 = { r: 1, g: 0, b: 0 }
const red4 = { r: 1, g: 0, b: 0, a: 1 }

下面的示例使用一个颜色属性作为 TextShape 组件的一部分，用于设置文本颜色。

const myEntity = engine.addEntity()

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

TextShape.create(myEntity, {
  text: '这段文本是红色的',
  textColor: Color4.create(1, 0, 0, 1),
})

📔 注意: Color3 和 Color4 必须通过

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

参见 导入 了解如何轻松处理这些。

透明度

使用 透明度 属性的 Color4 来让颜色变得半透明。

如果 alpha 为 1，颜色将完全不透明；如果为 0，则完全不可见。介于两者之间的值会产生部分透明的色调。

// 完全不透明
const opaque = Color4.create(1, 1, 1, 1)

// 半透明
const half = Color4.create(1, 1, 1, 0.5)

// 几乎不可见
const almostInvisible = Color4.create(1, 1, 1, 0.1)

插值

使用 Color3.lerp() 或 Color4.lerp() 函数来定义一种介于另外两种颜色之间的颜色。这些函数的工作方式与 Vector3.lerp() 函数。

两者都 Color3.lerp() 或 Color4.lerp() 类似，接收以下参数：

• left：用作参考的第一种颜色

• right：用作参考的第二种颜色

• amount：一个 0 到 1 之间的数，用来定义混合中要使用多少 right 颜色。越接近 0，就越接近 left 颜色。

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

你可以使用一个系统来逐渐改变 amount 参数，以创建平滑过渡。

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

export function PulseSystem(dt: number) {
  pulseState += dt
  // 在 0 和 1 之间振荡
  const amount = (Math.sin(pulseState) + 1) / 2
  const entitiesWithMaterial = engine.getEntitiesWith(Material)

  // 遍历该组实体
  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)