乗算色・スクリーン色 (SDK for Cocos Creator)

最終更新： 2023年3月14日

乗算色・スクリーン色を利用して、モデルに色をブレンドして描画する方法を説明します。

Cubism Editor 4.2以前に作成されたモデルなど、モデルに乗算色・スクリーン色が設定されていない場合も特に追加のコーディングを行うことなく利用可能です。
SDK for Cocos Creatorでの詳しい仕様や利用方法についてはSDKマニュアルの「乗算色・スクリーン色」をご覧ください。

事前準備として、「SDKをインポート」を参考に、モデルデータのインポートとプレハブの配置を行ってください。

初期状態では、モデルにあらかじめ設定された乗算色・スクリーン色を常に参照するように設定されており、モデルに乗算色・スクリーン色が設定されていない場合は以下の値が使用されます。

• 乗算色では(1.0, 1.0, 1.0, 1.0)
• スクリーン色では(0.0, 0.0, 0.0, 1.0)

インスペクタ上での利用

SDK側から乗算色・スクリーン色を操作出来るようにするには以下のフラグを有効にします。

乗算色：

overwriteFlagForModelMultiplyColors 、もしくは、 overwriteFlagForMultiplyColors

スクリーン色：

overwriteFlagForModelScreenColors 、もしくは、 overwriteFlagForScreenColors

overwriteFlagForModelMultiplyColors 及び overwriteFlagForModelScreenColors は全てのDrawableに対してSDK側から乗算色・スクリーン色の操作を可能とするかを決めるフラグです。
これらのフラグはCocos Creator上ではモデルのプレハブのルートオブジェクトにアタッチされている CubismRenderController のインスペクタ上からも操作することが可能です。

overwriteFlagForMultiplyColors 及び overwriteFlagForScreenColors は個々のDrawableがそれぞれSDK側から乗算色・スクリーン色の操作を可能とするかを決めるフラグです。
モデルの各Drawableオブジェクトにアタッチされている CubismRenderer のインスペクタ上からも操作することが可能です。

前述した CubismRenderController の持つ乗算色・スクリーン色のフラグが有効化されている場合は、それらが優先されます。

乗算色・スクリーン色の設定はスクリプト上からの制御はもちろんのこと、 CubismRenderer のインスペクタ上においても操作することが可能です。

スクリプト上での利用

アプリケーション上で利用する場合をはじめ、スクリプト上で制御する必要がある場合には次のようなコードが有効です。

下記のコードでは、全てのDrawableオブジェクトのスクリーン色を一定時間で一斉に変化させるような処理を施しています。

中身を以下のように書き換えたTypeScriptスクリプトを作成し、モデルのプレハブのルートオブジェクトへアタッチする形で利用することが出来ます。

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;
  }
}

モデル側からの乗算色・スクリーン色の更新の通知を受け取る

モデルのパラメータに乗算色・スクリーン色の変更が結びつけられている場合、SDK側からの操作ではなく、モデルがアニメーションした際などにモデル側から乗算色・スクリーン色が変更される事があります。

この時に乗算色・スクリーン色が変更されたことを受け取る事が出来るプロパティ、 isBlendColorDirty が CubismDynamicDrawableData に実装されています。

このプロパティは乗算色、もしくは、スクリーン色のいずれかがモデル側で変更された際に true となり、乗算色とスクリーン色のどちらが変更されたかは判別しません。

詳細はSDKマニュアルの「乗算色・スクリーン色」をご覧ください。