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

最終更新： 2023年3月14日

モデルに乗算色・スクリーン色を適用することで、色合いをリアルタイムに変化させることが出来ます。
Cubism Editor上で設定した乗算色・スクリーン色はCubism 4.2以降の SDK for Cocos Creatorを利用することで、特に追加のコーディングをすることなく適用されます。
Cubism Editor上での乗算色・スクリーン色の設定はEditorマニュアルの 「乗算色・スクリーン色」 を参照してください。

また、必要に応じたコーディングを行うことでSDKから乗算色・スクリーン色を操作し、以下のような動作も可能になります。

• インタラクティブに乗算色・スクリーン色を適用する
• Cubism Editor上で設定していない乗算色・スクリーン色を適用する
• Cubism Editor上で設定した乗算色・スクリーン色を無効にする

以降はその手順の説明になります。

処理手順

以下の流れで処理を行います。

• モデルの配置
• 乗算色・スクリーン色の上書きフラグ設定
• 乗算色・スクリーン色の設定

モデルの配置

任意のシーンに乗算色・スクリーン色を設定したいモデルを配置してください。

乗算色・スクリーン色の上書きフラグ設定

乗算色・スクリーン色の上書きフラグを true にします。
デフォルトでは false となっており、モデルからの色情報を利用するようになっています。

上書きフラグは [CubismRenderController] が持つモデル全体にかかるフラグと [CubismRenderer] の持つ各Drawableオブジェクトにかかるフラグの2種類があります。

コードの例は以下の通りです。
スクリプトをモデルのルートオブジェクトにコンポーネントとしてアタッチしている状態を想定しています。

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に対して、乗算色に赤、スクリーン色に緑を設定する場合の設定値です。
設定色は各 [CubismRenderer] にそれぞれmath.Color型で格納されています。
以下の例では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側からの操作ではなく、モデルがアニメーションした際などにモデル側から乗算色・スクリーン色が変更される事があります。

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

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

[CubismDynamicDrawableData] のデータを扱うには[CubismModel] のイベント 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.");
        }
    }
}