ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

Live2Dで光の反射を表現する

Live2Dにおける光源や反射表現をリアルタイムで動かす表現は、個人的にはあまり見ません。
ただ、前例としてはゲーム「デスティニーチャイルド」があります。
以下の記事の通り制作事例があったので参考にしつつ、自分なりに作り、ノウハウをまとめていこうと思います。
jp.gamesindustry.biz

最終的に作ったもの

f:id:traitam:20180128142334g:plain

アニメーションが適当すぎてランダムアニメーションテストみたいな感じになってますが、お許しください。
分かりやすい場所は手の反射表現だと思います。
剣が近づくと反射が発生し、遠のくと手が暗くなります。

素材の準備

使用する素材

素材は自分で作ることも考えましたが、既存のイラストを分割した方が時間的に、そして何よりモチベーション的にいいかなと思ったのでそのようにしました。
使用するイラストは、ゲーム「フラワーナイトガール」のキャラ「ワスレナグサ」です。ゲーム内では進化前と進化後のイラストが存在し、進化後の方が反射表現の勉強になると思い、進化後のイラストを使用しています。
f:id:traitam:20180128135239p:plain

作成も実際にこの背景付き1枚絵から切り抜いて分割を行います。

素材の分割

今回は反射表現の勉強といえど、やはりしっかり動いてもらいたいので通常の分割も行います。
図鑑の背景付き1枚絵からキャラを切り抜き、そしてキャラを分割していきます。
私はSAI2に慣れているので、SAI2でマスクを使いながらパーツ分割をしていきます。
分割した後は、モデルが動いても隙間が発生しないように塗り足しを行います。

特筆すべきは、今回の分割では、反射を分割するところです。
f:id:traitam:20180128142928p:plain

ベースは反射していない手です。その上に反射だけのパーツを作成します。
これをモデル制作時に、パラメータなどで透明度を切り替え、光源や反射を表現します。

レイヤー統合

レイヤー統合はPhotoshopを使用して、Live2D公式が出しているプラグインを用いて統合をしています。
統合したくないものには“*”を頭に付けることで統合を回避します。
その後、同じくLive2D公式で出しているごみ取りプラグインを使ってインポート準備を行います。
f:id:traitam:20180128134308p:plain

最終的には50パーツ程度に収まりました。

モデルの作成

先ほど作ったpsdデータをLive2DCubismEditorにインポートして、各種デフォ―マ階層を作り、パラメータを作成していきます。
反射を表現するための透明度変化以外には別途行う必要は無く、階層も各種パーツと同じ場所に入れます。
パラメータとしては、本当は各部位の反射ごとにパラメータを作成するのが良いのですが今回は面倒なので一括にまとめています。
下の画像のように、反射用パラメータを作成し、反射用のアートメッシュを適応させ、透明度を調整します。
f:id:traitam:20180128143451p:plain

これで、反射表現を行うことが出来るモデルを作成することができました。
もっと凝りたいのであれば、光源である剣を透明度によって炎のような表現を行えば良いです。が、大変なので今回は割愛です。

アニメーションの作成

Animatorでアニメーションを作成します。
意識することとしては、光源である剣の遠近で反射パラメータを動かすことです。
あとはご自由に動かしてください。
f:id:traitam:20180128142334g:plain

これで反射表現を伴ったモデルの作成とアニメーションの作成が終わりました。

終わりに

いかがだったでしょうか?
光源・反射表現をLive2Dで行うことでよりリッチな表現ができたと思います。
Live2Dで動かすこと自体が大変ではありますが、このような表現を加えていくことでより素晴らしいモデルに仕上がると感じます。
立ち絵などではあまり使わないかもしれないですが、風景込みの1枚絵をLive2Dで動かして物語を作る、みたいな場所で真価を発揮しそうですね。

それではみなさん、楽しい創作ライフを!