正片叠底色/屏幕色 (Cocos Creator)

最終更新： 2023年3月14日

通过将正片叠底色和屏幕色应用于模型，可以实时更改色调。
通过使用Cubism 4.2或更高版本的SDK for Cocos Creator，无需任何追加编码即可应用Cubism Editor上设置的正片叠底色和屏幕色。
关于Cubism Editor上的正片叠底色和屏幕色的设置，请参考Editor手册中的“正片叠底色/屏幕色”。

另外，根据需要进行编码，可以从SDK中操作正片叠底色和屏幕色，也可以进行如下操作。

• 交互式应用正片叠底色/屏幕色
• 应用未在Cubism Editor上设置的正片叠底色/屏幕色
• 禁用Cubism Editor上设置的正片叠底色/屏幕色

以下是该步骤的说明。

处理步骤

按照以下流程处理。

• 模型置入
• 正片叠底色/屏幕色覆盖标志设置
• 正片叠底色/屏幕色设置

模型置入

将要设置正片叠底色和屏幕色的模型置入任意场景中。

正片叠底色/屏幕色覆盖标志设置

将正片叠底色/屏幕色覆盖标志设置为true。
默认为false，它使用模型中的颜色信息。

覆盖标志有2种类型：[CubismRenderController]的全体模型的标志和[CubismRenderer]的各Drawable物体的标志。

示例代码如下所示。
假设脚本作为组件附加到模型的根物体。

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设置红色为正片叠底色，设置绿色为屏幕色时的设置值。
各设置颜色作为math.Color类型存储在[CubismRenderer]中。
在下面的例子中，设置了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端操作。

[CubismDynamicDrawableData]中实装了isBlendColorDirty，这个属性可以接收此时正片叠底色和屏幕色的变更。

该属性是在模型侧变更正片叠底色或屏幕色时设置的标志，它不判断变更正片叠底色、还是屏幕色。

为了处理[CubismDynamicDrawableData]的数据，需要使用[CubismModel]的Event 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.");
        }
    }
}