곱하기 색·스크린색 (Cocos Creator)

업데이트： 2023/03/14

모델에 곱하기 색·스크린색을 적용하여 색조를 실시간으로 변화시킬 수 있습니다.
Cubism Editor상에서 설정한 곱하기 색·스크린색은 Cubism 4.2 이후의 SDK for Cocos Creator를 이용하면 특별히 추가 코딩 없이 적용됩니다.
Cubism Editor상에서의 곱하기 색·스크린색의 설정은 Editor 매뉴얼의 「곱하기 색・스크린색」을 참조해 주십시오.

또한 필요에 따라 코딩을 수행하여 SDK에서 곱하기 색, 스크린색을 조작하여 다음과 같은 동작도 가능합니다.

• 인터랙티브에 곱하기 색·스크린색을 적용한다
• Cubism Editor에서 설정하지 않은 곱하기 색·스크린색 적용
• Cubism Editor에서 설정한 곱하기 색·스크린색을 비활성화

이후는 그 순서의 설명입니다.

처리 절차

이하의 흐름으로 처리를 실시합니다.

• 모델 배치
• 곱하기 색·스크린색의 덮어쓰기 플래그 설정
• 곱하기 색·스크린색의 설정

모델 배치

임의의 장면에 곱하기 색·스크린색을 설정하고 싶은 모델을 배치해 주세요.

곱하기 색·스크린색의 덮어쓰기 플래그 설정

곱하기 색·스크린색의 덮어쓰기 플래그를 true로 합니다.
디폴트에서는 false로 되어 있어 모델로부터의 색 정보를 이용하게 되어 있습니다.

덮어쓰기 플래그는 [CubismRenderController]가 가지는 모델 전체에 걸리는 플래그와 [CubismRenderer]가 가지는 각 Drawable 오브젝트에 걸리는 플래그의 2종류가 있습니다.

코드의 예는 다음과 같습니다.
스크립트를 모델의 루트 오브젝트에 구성 요소로서 연결한 상태를 상정하고 있습니다.

CubismRenderController renderController =Component.getComponent(CubismRenderController);

renderController?.overwriteFlagForModelMultiplyColors = true;
renderController?.overwriteFlagForModelScreenColors = true;

renderController.renderers[0].overwriteFlagForDrawableMultiplyColors = true;
renderController.renderers[0].overwriteFlagForDrawableScreenColor = true;

모델 전체에 걸리는 덮어쓰기 플래그가 유효하게 되었을 경우는 개별의 Drawable에 걸리는 덮어쓰기 플래그가 무효인 경우라도 SDK에서 곱하기 색·스크린색을 조작하는 것이 가능합니다.

[CubismRenderController]는 모델의 루트 오브젝트에 컴퍼넌트로서 추가되어 있어 getComponent를 이용하면 취득할 수 있습니다.
[CubismRenderController]는 아울러 모델의 각 Drawable 오브젝트의 [CubismRenderer]를 배열에 확보하고 있어 [CubismRenderController]로부터 각 [CubismRenderer]를 참조하는 것이 가능합니다.

곱하기 색·스크린색의 설정

곱하기 색과 스크린색을 정의하고 모델에 설정합니다.
아래의 코드는 모든 Drawable에 대해 곱하기 색에 빨간색, 스크린색에 녹색을 설정하는 경우의 설정값입니다.
설정색은 각 [CubismRenderer] 에 각각 math.Color형으로 저장됩니다.
다음의 예에서는 RGBA로 설정하고 있지만, A는 곱하기 색·스크린색의 계산에 이용되지 않습니다.

const multiplyColor = new math.Color(1.0, 0.5, 0.5, 1.0);
const screenColor = new math.Color(0.0, 0.5, 0.0, 1.0);

for (let i = 0; i < renderController.renderers.length; i++)
{
    // MultiplyColor
    renderController.renderers[i].multiplyColor = multiplyColor;
    // ScreenColor
    renderController.renderers[i].screenColor = screenColor;
}

곱하기 색·스크린색 적용 전:

곱하기 색에 빨간색, 스크린색에 녹색을 적용한 후:

모델의 곱하기 색·스크린색의 처리는 색 정보에 변경이 있었을 경우에 모든 Drawable에서 업데이트가 들어갑니다.

Tips

이번에는 모든 Drawable에 동일한 곱하기 색·스크린색을 설정하고 있지만, 각 Drawable마다 다른 곱하기 색·스크린색을 설정하는 것도 가능합니다.
곱하기 색·스크린색을 무효로 하는 경우는

곱하기 색에 (1.0, 1.0, 1.0, 1.0)
스크린색에 (0.0, 0.0, 0.0, 1.0)

을 설정하면 가능합니다.

그 외 관련 기능 및 처리

모델 측으로부터의 곱하기 색·스크린색 갱신의 통지를 수신

모델의 파라미터에 곱하기 색·스크린색의 변경이 연결되어 있는 경우 SDK 측으로부터의 조작이 아니고, 모델이 애니메이션했을 때 등에 모델 측으로부터 곱하기 색·스크린색이 변경되는 일이 있습니다.

이때 곱하기 색·스크린색이 변경되었음을 수신할 수 있는 프로퍼티, isBlendColorDirty가 [CubismDynamicDrawableData]에 구현되어 있습니다.

이 프로퍼티는 곱하기 색 혹은 스크린색 중 하나가 모델 측에서 변경되었을 때에 활성화되는 플래그로, 곱하기 색과 스크린색 중 어느 것이 변경되었는지는 판별하지 않습니다.

[CubismDynamicDrawableData] 데이터를 처리하려면 [CubismModel] 이벤트 onDynamicDrawableData를 사용해야 합니다.

함수 등록

let model: CubismModel;

// Register listener.
model.onDynamicDrawableData += onDynamicDrawableData;

등록할 함수의 예

private onDynamicDrawableData(sender: CubismModel, data: CubismDynamicDrawableData[]): void {
    for (let i = 0; i < data.length; i++)
    {
        if (data[i].isBlendColorDirty)
        {
            console.log(i + ": Did Changed.");
        }
    }
}