デザイン担当はらだです。 ご無沙汰しているうちに長男はオムツを卒業し、次男はイヤイヤ期に突入しました。

「“描いたまま”を動かす」を売りにしているLive2dですが、「実写は動かせる？」いうことでやってみました。 ちなみに私のLive2d歴は4ヶ月ほど…Flash、spineなどスプライトアニメーション経験はゼロです。

Photoshopでレイヤー分け

今回は切り抜きやすそうなフリー写真を選び、髪型などを別のフリー写真と合成して変えました。

ポイント

• 部分ごとにレイヤーセットで分けておくと、Live2d上でのデフォーマなどの管理が楽になります。
• 口の中など、元の写真にないものは口内が写っている別の写真から切り抜きします。
• 顔の中のパーツは大きめに切り抜き、顔のベースは切り抜いた範囲より内側を肌色で補填すると、元のイメージを損ないづらいです↓

イラストと違って実物には肌のキメや微妙なグラデーションがありますので、目鼻のパーツの範囲より外を塗りつぶして顔のベースを整えようとすると、元の顔のイメージが崩れます。 上に乗るパーツの範囲内で整えた方が良い結果が得られました。

Live2d Modelerでデフォーマ、パラメータ設定

デフォーマ構造やパラメータは公式のものを参考にしています。 今回は写真のお姉さんにリズムをとって歌ってもらおうと思いますので、それが実現できそうなパラメータを振っていきました。

Live2d Animatorでアニメーションをつける

ここは2Dイラストを使う場合と変わらないです。 任意の動きをさせるようにキーフレームを設定していきます。

出来上がり　gif出力

こんな感じになりました↓

実写を動かした感想

• レイヤー分けにはPhotoshopCCの「選択とマスク」機能必須
• 塗り足し、描き加えには出来たら写真を使う方が自然に仕上がる

その他所感

これを作っている途中で、live2d用のクオリティの高いデータに触れる機会がありました。 実写ではなくイラストデータでしたが、パラメータの振り方やデフォーマの使い方、レイヤーの分け方など勉強になります。 もっと大きく動かしてもいいんだなあ。

今回は素材と成果物の紹介のみになってしまいました。 次回以降ゲームに使えるように作った場合を記事にしていきたいと思います。