正片叠底色/屏幕色 (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."); } } }