Multiply Color/Screen Color (SDK for Cocos Creator)

Updated: 03/14/2023

This section explains how to blend and draw colors on a model using Multiply Color and Screen Color.

Models created before Cubism Editor 4.2, for example, can be used without any additional coding, even if the Multiply Color and Screen Color are not set for the model.
See the “Multiply Color/Screen Color” page in the SDK Manual for detailed specifications and usage in the SDK for Cocos Creator.

As a preliminary preparation, refer to the “Import SDK” page to import model data and place the prefab.

By default, it is set to always refer to the Multiply Color and Screen Color previously set for the model. If the Multiply Color and Screen Color are not set for the model, the following values are used.

• In Multiply Color (1.0, 1.0, 1.0, 1.0)
• In Screen Color (0.0, 0.0, 0.0, 1.0)

Use in Inspector

To enable manipulation of Multiply Color and Screen Color from the SDK side, enable the following flags.

Multiply Color:

overwriteFlagForModelMultiplyColors or overwriteFlagForMultiplyColors

Screen Color:

overwriteFlagForModelScreenColors or overwriteFlagForScreenColors

overwriteFlagForModelMultiplyColors and overwriteFlagForModelScreenColors are flags that determine whether the SDK can manipulate Multiply Color and Screen Color for all Drawables.
These flags can also be manipulated in the Inspector of the CubismRenderController, which is attached to the model prefab root object in the Cocos Creator.

overwriteFlagForMultiplyColors and overwriteFlagForScreenColors are flags that determine whether each individual Drawable can manipulate Multiply Color and Screen Color from the SDK side.
It can also be manipulated in the Inspector of the CubismRenderer attached to each Drawable object in the model.

If the Multiply Color and Screen Color flags that CubismRenderController has as described above are enabled, they will take precedence.

Multiply Color and Screen Color settings can be controlled not only from scripts, but also from Inspector in the CubismRenderer.

Use in Scripts

The following code is useful in applications and other cases where control is needed in scripts.

The following code is designed to change the Screen Color of all Drawable objects at the same time in a certain period of time.

You can create a TypeScript script that rewrites the contents as follows and attach it to the root object of the model prefab.

import { _decorator, Component, math } from 'cc';
import CubismRenderController from './Rendering/CubismRenderController';
const { ccclass, property } = _decorator;

@ccclass('BlendColorChange')
export class BlendColorChange extends Component {

  private renderController: CubismRenderController | null = null;
  private _colorValues: number[] = new Array<number>();
  private _time: number = 0;

  protected start() {
    this._colorValues = new Array<number>(3);
    this._time = 0;
    this.renderController = this.getComponent(CubismRenderController);
    this.renderController!.overwriteFlagForModelScreenColors = true;
  }

  protected update(deltaTime: number) {
    if (this._time < 1.0) {
      this._time += deltaTime;
      return;
    }

    for (let i = 0; i < this._colorValues.length; i++)
    {
      this._colorValues[i] = Math.random();
    }

    const color = new math.Color(
      this._colorValues[0] * 255,
      this._colorValues[1] * 255,
      this._colorValues[2] * 255,
      1.0);

    for (let i = 0; i < this.renderController!.renderers!.length; i++)
    {
      this.renderController!.renderers! [i].screenColor = color;
    }

    this._time = 0.0;
  }
}

Receive notification of Multiply Color and Screen Color updates from the model side

If a model parameter is associated with a change in Multiply Color/Screen Color, the model may change the Multiply Color/Screen Color when the model is animated, rather than from the SDK side.

The property isBlendColorDirty is implemented in CubismDynamicDrawableData to indicate that the Multiply Color and/or Screen Color have been changed.

This property is true when either the Multiply Color or Screen Color is changed on the model side, and does not determine whether the Multiply Color or Screen Color is changed.

See the “Multiply Color/Screen Color” page in the SDK Manual for details.