【Live2D】ほーくんアプリ化計画(1)

この度、鳳来丸ことほーくんをスマートフォンアプリにしようと思い立ち、6月末からコツコツとイラスト作成、Live 2Dでのモデリング、簡単なアニメーションの作成までできるようになりました！

うーん、かわいすぎるんじゃないかな？(自画自賛)

1枚ずつ手描きした方が早いんじゃね？と思った時もありました。
でもしっかり準備しておけば、正面の画像から笑顔、右上向きの顔、流し目、などなど色々と遊べるんですね。すごい。

公式のマニュアルはもちろん、バ美肉講座などお手本はたくさんありましたので、割と手軽に作れた印象です。心は何度か折れかけたけど。

備忘録的な作成手順と、反省点を載せます。

１．普通に絵を描く

マジで？と思ったのですが、マジでいつも通りで良いです。
でもいつも通りとは言うものの、顔もアニメ塗りした方が良かったかも…
鼻、口周りが、顔に角度をつけたときにちょっと失敗しました。

萌え絵みたいにできるだけのっぺりした塗りの方が向いている印象です。鼻も点しかないみたいな作画で。
私は鼻をしっかり描く派なので鼻の筋と鼻の影で2パーツに分けたら良いかも知れません。

それからほーくんは後ろの髪の毛が長いので、動いたときにちらっと見せたいと思い、顔・体を非表示にして描き込んでいます。
こんなあんばいです。

２．パーツごとに分解する

画像でも書いていますが、分解するパーツは細かければ細かいほどよいです。
顔は特に、眉毛、上瞼、下瞼、まつげ、白目、顔、鼻、上唇、下唇、口内、耳、前髪、横髪、後ろ髪…とこれでもかと細かくします。

現時点では赤矢印まで分解しているのですが、黒矢印までやった方が良かったかも知れません。
なぜなら…

大体髪の毛で隠れている部分なのでさほど気になりませんが赤丸のところ、主線がなくなっています。
それに目を閉じたときの形が、実際に絵に描いたときの形と違うんです。
まばたきなんかは一瞬なので気にならないかも知れませんが、笑顔はちょっと不自然な気がします。

そして顔の向きのバリエーション。やばい。
すごい作りづらい。形がおかしい。もう作画崩壊、事故レベルです。左右反転したい。そういう機能はないようです。

赤線のように表現できれば良かったのですが、そのためにはもう少し工夫する余地がありそうです。顎どうしたらいいの？

３．PSDファイルをLive 2Dに読み込む

私はSAI2で絵を描いたので、そのままPSDファイルに変換しました。
メディバンペイントとかもフリーのペインターでPSDファイルにできたはず。
PSDをLive 2D Cubism Editorにドラッグアンドドロップ。

やったー！読み込めた！
あとは「アートメッシュ」(三角のやつ)を各パーツに設定、各パーツを「デフォーマ」(赤い四角のやつ)に格納します。
そして絵に動きをつけるための「パラメータ」に、まばたき、口の開閉、髪の動きなどを、先ほどのアートメッシュやデフォーマにつけていきます。

私は結構アバウトにアートメッシュを作ったので、動きをつけたときにバキバキになりました。
三角はたぶん3Dのもとになるやつで、細かければ細かいほどきれいなポリゴンになる。PSのゲームのポリゴンがPS4になるぐらい差が出る。たぶん。
何を言っているか分からないだろうが、伝われ。
透明の3Dモデルの上に自分で描いた絵を貼り付けている状態なんだと思います。違ったらすみません。

とにかく。
髪の毛のアートメッシュは細かくした方が良い。ということが分かりました。上の画像のアートメッシュは粗すぎの図です(自戒)

４．アニメーションを作る

左上のプルダウンを「Model」から「Animation」に変更して、さっき作ったモデルのファイルをドラッグアンドドロップします。
やったー！読み込めた！
そしてタイムラインにぽちぽちとパラメータを入力していきます。背景や音(WAVEファイル)もドラッグアンドドロップで読み込めます。

ここからッ！
地道ッ！地道な作業が続くッ！
再生しては修正、再生しては修正！

５．完成

最後にもう一度、完成品を見てみよう。
やっぱりかわいい。いいね～～～～～～(圧倒的自己肯定)

正直耳飾りの揺れ、髪の揺れが地獄でした。ソフトの解像度が小さいのでボタンがちっちゃくて、マウスの誤操作が多くて…
再生すると大暴れするし、不自然な動きになって(弱音のターン)

背景を描き下ろす元気はなかったのでありものを使いました。
今年のほーくん誕生日絵の枠。

そして、BGMをoo39様よりお借りしました。
http://www.oo39.com/
アプリを作るころには曲も自作できたら良いですね。

というわけで、ほーくんアプリ化計画の序章をお送りしました。
丸の闘いはこれからだ！(ドン！)
スーパー励みになるのでスキ！お願いします！

参考にしたもの

Live 2D公式マニュアル　https://docs.live2d.com/cubism-editor-tutorials/top/
Live 2D公式チュートリアル　https://youtu.be/DDo32gXWUwE
焼まゆるさんのバ美肉講座　https://youtu.be/M_FlAXcKcY4