Live2Dで虹色に光るアニメーションスタンプを作ろう！

2024年7月12日 18:00

こんにちは、Live2D Cubism Editorチームです！

突然ですが皆さんは虹色に光るアニメーションはお好きですか？「ゲーミング〇〇」という派手に光って気分を盛り上げてくれるアイテムがすっかり定着した世の中ですから、「ゲーミング〇〇」のようにキャラクターを光らせて高ぶる感情を表現したいというケースも増えていると思います。

Cubismにはアートメッシュを指定した色でスクリーン合成できる機能があります。この「スクリーン色」という機能を使えば虹色に光るアニメーションを簡単に作ることができます！
スクリーン色についてX（旧Twitter）のこちらの投稿でも紹介されているのでぜひご覧ください！

今回は、①全体の色を変化させる方法と、②部分的に色を変化させる方法を説明していきます。前回の記事「Live2Dを使ってアニメーションスタンプを作ろう！」の続きからはじまりますので、気になる方は前回の記事もぜひチェックしてみてくださいね！

必要なツール

Live2D Cubism Editor PRO版
- 今回はPRO版の機能である「スクリーン色」を使用します。
- PRO版とFREE版の機能比較（リンク）
ペイントソフト
- イラストを書くためのツールです。Cubism EditorへはPSDファイルでインポートすることになるので、PSDファイルで保存できると良いです。（例：Photoshop、CLIP STUDIO PAINT）
- 今回はスクリーン色を使うために、着色されたレイヤーをグレースケールにする工程があるので、色を調整できる機能があると良いです。

①全体の色を変化させる方法

色変化用のデフォーマを作成

早速ですが、全体の色を変えるには一番上の階層にあるデフォーマにスクリーン色を設定すればよいです。スクリーン色はデフォーマ階層の子に影響を与えていくので、一番上を変更するだけで全体に色を変えることができます。

作ってあるキャラクターのデフォーマ構造を見てみると「Z回転」デフォーマが一番上です。

ただ、「Z回転」デフォーマはすでに「角度 Z」パラメータの動きを付けているので、このデフォーマで色の変化をつけると対応付けるパラメータの数を増やすことになります。可能ならば色の変化は違うデフォーマで行いたいです。

ここでは「Z回転」デフォーマの上に回転デフォーマを作る方法で進めます。「Z回転」デフォーマを選択してから「回転デフォーマを作成」を実行して親になる新規回転デフォーマ「全体の色」を作ります。これでOKです！新しいデフォーマにスクリーン色を設定しています。

パラメータとキーフォームを作成

まずは色を変化させるのに使うパラメータを用意します。ここでは「適用度」と「色変化」というパラメータを作成します。

「適用度」パラメータは、値を0から1の範囲で作り、0のときは色はそのままで1のときに色が変化するようにします。
「色変化」パラメータは、値を0から360の範囲で作り、スクリーン色で指定する色の色相を変化できるようにします。

あとはこれらのパラメータを格納するパラメータグループを作成します。名前は「全体の色」とします。

次は「全体の色」デフォーマを選択して、「適用度」「色変化」パラメータにキーを追加しておきます。
パラメータパレット上部のアイコンや、パラメータ右横に表示されるポップアップの［+］のアイコンからキーを追加することができます。

「適用度」は0と1にキーを追加します。
「色変化」は0、60、120、180、240、300、360というように60刻みでキーを追加します。

ではいよいよスクリーン色を変更してキーフォームを編集していきます。
パラメータ値を「適用度」は1、「色変化」は0にして、インスペクタの「スクリーン色」ラベルの右にある四角をクリックします。するとカラーピッカーが開くので図のように、赤色を指定します。

同様に、「適用度」を1の状態で「色変化」60から360まで編集していきます。
「色変化」パラメータの値に対応する色は下の表のようになります。このように設定すると色相環をぐるっと回るような変化を作ることができます。
1周360°で60°ごとにRGB値のいずれかが最大になる6色をスクリーン色で指定します。
パラメータ値の範囲を0から360にしたのは、カラーピッカーのH＝色相の値に合わせるためでした。

これで色変化のパラメータは完成です！

②部分的な色変化

色を変化させるものはグレースケールで用意

スクリーン色を使えば色を変化させるオブジェクトを作ることができます。ここではサイリウムを好きな色に変化できるようなパラメータを作ってみます。色変化できるとなるとそれはもうペンライトになりそうですが、そのままサイリウムで進めたいと思います。

スクリーン色で色を乗せると、黒色の部分に指定色が乗り、白色部分はそのまま白色になります。彩度を無くしてグレースケールにすると指定した色がしっかりと表現できます。

今回すでに着色された絵をグレースケールにして用意します。CLIP STUDIO PAINTの色調補正機能「色相・彩度・明度」で彩度を無くしたあとに、「明るさ・コントラスト」でコントラストを上げて白と黒が出るようにしました。

そしてもちろん、サイリウムと腕は分離して素材分けしておきます。

素材分けができたらPSDを再インポートしてモデル用画像を差し替えます。
今回はアートメッシュを複製して２つにし、それぞれサイリウムと腕の画像に差し替える方法で行いました。

アートメッシュとプロジェクトパレットのモデル用画像を選択してから「選択アートメッシュの入力画像として設定」で差し替えます

ブレンドシェイプを使って色変化させる

前回の記事を見てもらうと分かるのですが、サイリウムと腕のアートメッシュには「角度 Y」パラメータでキーフォームを作ってあります。これに色の変化の動きを付けてしまうと対応付けるパラメータの数が増えて、キーフォームの管理が複雑になってしまいます。「全体の色を変化させる方法」でやったように、デフォーマを作るなどして紐づけるパラメータを分けるのが正攻法ですが、困ったことにアートメッシュに動きを付けている状況では難しいです。

この記事ではできるだけ手軽な対処法を紹介したいので、今回はブレンドシェイプを使って色を変化させる方法で進めます。
Cubism 5.0からスクリーン色がブレンドシェイプに対応しました。ブレンドシェイプはパラメータのかけ合わせを気にせずに動きを作ることができ、スクリーン色は形状に影響を与えない変化なので、形状を気にすることなく追加することができます。

それではブレンドシェイプ用のパラメータを作成しましょう！
デフォルトを0、範囲を0から360にしてサイリウム用の「色変化」パラメータを作成します。
「ブレンドシェイプ」にチェックをいれると、ブレンドシェイプ用のパラメータを作成することができます。