색상 유형

색상 값을 정의하는 방법

색상 값은 다음과 같은 다양한 컴포넌트의 속성으로 전달될 수 있습니다, 예를 들어 재질, 텍스트 또는 다음의 서로 다른 속성으로 UI 엔티티. 색상 값은 다음 유형 중 하나일 수 있습니다 Color3 또는 Color4.

Color3 세 개의 속성을 포함합니다, 빨강, 초록, 그리고 파랑. Color4 동일한 세 가지에 더해 alpha, 투명도 값을 위한 것입니다.

색상 설정

다음을 사용하여 색상을 만들 수 있습니다 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()

색상을 16진수로 표현하고 싶다면 다음을 사용하세요 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"

다음 가져오기 를 참고해 쉽게 처리하는 방법을 확인하세요.

투명도

다음을 사용하세요 alpha 의 속성 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() 다음 인수를 받습니다:

• 왼쪽: 기준으로 사용할 첫 번째 색상

• 오른쪽: 기준으로 사용할 두 번째 색상

• 양: 0에서 1 사이의 숫자로, 혼합에 사용할 양을 정의합니다. 0에 가까울수록 오른쪽 더 가까워집니다. 왼쪽 해당 색상에 더 가까워집니다.

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

시스템을 사용해 다음을 점진적으로 변경할 수 있습니다 양 매개변수로, 부드러운 전환을 만들 수 있습니다.

// 시스템
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)