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

最終更新: 2023年3月14日

此页面适用于Cubism 4.2及更早版本的旧版本。 点击此处查看最新页面

通过将正片叠底色和屏幕色应用于模型,可以实时更改色调。
通过使用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.");
        }
    }
}
请问这篇文章对您有帮助吗?
关于本报道,敬请提出您的意见及要求。