みすちゃんLive2Dを作ってみた

mis.w 53rd AdventCalender 2018の12日目を担当する53代のたむです。
文章を読むのは面倒だと思うので、絵だけでも見て言ってください

Live2Dとは？

Live2D(Cubism3)はゲームアプリなど多く使われている技術で、ご存知の方がほとんどだと思いますが、一言で言うとキャラクターイラストを生きているように動かす技術です。最近はVtuberなどで3Dのキャラクターが活躍しているため、注目されなくなっていますが、3Dモデルよりも低コストに作れる点、アニメ調のままキャラクターが動かせる点から、スマホアプリなどでまだまだ現役で使用されています。

https://docs.live2d.com/cubism-editor-manual/sample-model/?locale=ja

1.パーツを作る

まずはパーツを作っていきます。Live2DではPSD(PhotoShopDocument)形式のファイルを読み込むため、PhotoShopを使用して作成することが推奨されていますが、クリスタでもPSD形式で保存できるため、今回はクリスタを使用しました。

作業１.下絵を描く

６〜７頭身くらいのキャラクターを描く場合は、だいたい横2400px縦4500pxくらいのキャンバスを用意して下書き（ラフ）を描いて行きます。

作業2.パーツごとにファイルを分けて、線画・塗りを繰り返す

この作業が全行程の中で一番重要で、以下の点がポイントになってきます。

• 動かす時を意識して、見えてないところまでしっかりとかく
• 左右対称ならば「対称定規」ツールを使うと2倍の速さで描ける

目だけでもこれだけのパーツに分かれています。このように細かくパーツ分けしなければ、のちのモデリングの作業で後悔することになるので、パーツは極力細かく分けます。

3.パーツ分けされたモデルの完成！

※一部の人からロリみすちゃんって言われてるんですが、製作者の趣味・趣向が介入した可能性は否めません。

↓具体的にはこのようなパーツに分けられています。

※パーツ分けされたやつ、あんまり細かく見ないでね。

2.Live2DCubismEditor(Modeler)でモデリング

パーツ分けされたPSDファイルが作成できたら、次はそれをLive2DCubismEditorというソフトに読み込ませて、モデリングをしていきます。ここでいうモデリングとは、頭、体、目、口などに動きをつけるために素材の変形や骨入れをすることを言います。

このように顔の向き、目の開閉、目玉の動きなどを1からちまちまと設定していきます。パーツの可動域を決めていくような感じです。非常に大変な作業でした…。

3.Live2DCubismEditor(Animator)でアニメーション作成

最後は動画班やUnity使用者ならおなじみのタイムラインでアニメーションを作成していきます。右下のタイムラインで動かすパーツに対してプロットして、可動域におけるパーツの位置
を表す数値を入力して、その数値を推移させていくことでパーツを動かしています。

この作業が一番楽しい作業です。

完成！！！！！

具体的にどんな風に動くかは、私が過去にツイッターにあげた動画をご覧ください。

ここからが本題?

Q.Live2D作ったけど何に使うの？→A.みすちゃんアプリで使う

私が今作ろうとしているのはみすちゃんをテーマとしたサークル内だけに公開するスマホアプリです。アドカレ内でこのアプリについて話すと膨大な量になってしまうので、今回はアプリ内で使用するLive2Dみすちゃんについてだけ話しましたが、このアプリについては今後kibelaなどでどんなアプリを作っているのかについて記事を書いていきたいなと思います。

↑アプリのホーム画面の超プロトタイプ版です。

番外編　ヤンデレみすちゃん

ちょうど52代のtakowasabiさんがヤンデレについて記事を書いていたのをみて思いつきました

takowasabiさんのアドカレはこちら↓
明解ヤンデレ中級編：第一話
明解ヤンデレ中級編：第一話

目の中の光を別レイヤーに描いておくと…
↓
↓
↓
↓

ヤンデレみすちゃんになった！！！

「なんで進捗あげてくれないの？」　って言われてみたいですね。

次のアドカレ

次回12/13のmis.w 53rd AdventCalender 2018を担当するのは53代fuchiさんです。
ここまで読んでいただきありがとうございました。