いまいち萌えない娘…！？萌えさせてやるよ！〜Live2Dで遊んでみた〜
某社18卒Advent calenderの記事を兼ねています。
こんにちは。
某メガベンチャーに内定をいただいてる18新卒デザイナーです。
UIUXデザイナーとしての内定なのでアプリUIについて意識高く書こうかなとも思ったのですが、コミケの原稿やりたくなさすぎて落書きが捗ってしまったため今回はイラスト関係の話をします。
明日のAdvent calenderの更新担当はガチのイラストレーター職で内定した神絵師なので、私は前座としてお楽しみください。
本当は内定先のキャラクターを描こうかなと思ったんですが色々ダメな気がしたのと、最近描いたイラストを使うのにも会社の人間に同人の身バレをしたくないため、今回はガイドライン的に大丈夫だったこのキャラクターをこのブログのためだけに描きました。えらい！
#嘘か本当かわからないことを言う
— いまいち萌えない娘 12月末で７周年 (@kobeimamoe) 2017年11月18日
萌える pic.twitter.com/BibgLr3cx8
いまいち萌えない娘ってご存知でしょうか？？
2011年頃に神戸新聞HPの採用広告ページに、このキャラクターの萌えない理由を述べなさい、という文言と共に掲載されて爆誕したキャラクターです。
LINEスタンプが普通に可愛くて萌えるのはどうなんですか！
ということで、このいまいち萌えない娘を、自分なりに萌えさせて描いてみました。
もしかして「萌え」って死語ですか？
すごーい！
神絵師には及びませんが、まあまあ可愛くなったのではないでしょうか。
コミケの原稿を放り出して描いてるので上半身までしか描けなかったけど許してください。
ちなみにどことなく冴えないのは、元々のベースカラーとなる青以外のアクセントカラーがないキャラデザのためだと私は思っています。
しかしこれだけでは足りませんね。
もしかして動いたら超可愛いんじゃないの〜〜！！？？
ってことでLive2Dを使って動かしてみます。
使うのはこちら
トップイラストもぬるぬる動いてますね。めっちゃかっこいい。
そもそもLive2Dってなんなの？ってことですが、昨今のソシャゲでイラストが動いているゲームあるじゃないですか。シノアリス、あんスタのSDアニメーション、最近人気のアズールレーンとかわかりやすいと思います。
普通のアニメーションではなく、重力とか物理演算がされているモーションの2D絵はわりとLive2Dなのかな？
スマホのゲームで3Dモデルを動かすのは割と処理がキツイこと、3Dのモデリングはかなりよくないとなかなか元イラストに近づかないという問題があると思うのですが、Live2Dのおかげで2Dイラストにぬるぬるなモーションをつけることができます。
多分ゲームだとUnityでモーションの実装をしてるのだと思いますが、私はUnityはおぼろげな感じでしかわからないのと、今回動かすのは初歩的なことしかやらないのでこちらのソフトだけ使います。
半年ぶりにLive2D作るんですけど、最新版のCubism3はまだ触ってなくて初めてです。めっちゃ色々機能ついてUIも変わってる・・・。
〜それでは作ってみよう〜
■イラストのpsdデータを作るよ
psdデータはパーツごとにレイヤーを分けて作ります。スクリプトを使うとレイヤー統合してくれます。今回はパーツも少ないので手作業でやりました。今回は使ってませんが、psdのごみ取りスプリクトも公式が配布してくれていて大変便利です。
■Live2Dにpsdデータをドロップします
読み込まれました。やっていくぜ！
■フォルダ分けします
前のバージョンは勝手に数値振り分けたフォルダがあったんだけど、新しいバージョンで見つけられなかった・・・。
数値は前後関係です。（すっごい適当に数値つけてます）
■ポリゴン当てをします
いい感じに三角形メッシュになるように。
アイラインは本当は上の線と横の線でパーツ分けた方が綺麗に動きます・・・。
（そしてこのズボラさがこの後悲劇を生みます）
目玉は白目の上に必ずある要素なのでクリッピングします。
白目のIDをコピーして
目玉のクリッピングのところにペーストします
目玉が白目からはみ出なくなりました。
→ 
Before After
■パラメーター当て
アニメーションのパラメーターを作ります。
→ 
右目開閉のパラメータにキーを追加すると右の図のようにアクティブになります。
パラメーターを0の数値（目が閉じた状態）がアクティブになっている時に、目が閉じるようにポリゴンを変形します。
白目、眉毛、アイライン、二重、目玉、口を設定すると、
ウィンク はにかみ ジト目
キョロ目 しょうがないですね〜 最初に描いた顔
こんな感じで顔のバリエーションが作れます。
ジト目が失敗してるのは、アイラインのレイヤー分けをしなかったからです・・・。
よく見ると目を閉じた時もガタガタしているので、アイラインを長く描く絵柄の人はパーツを必ず分けましょう。
最初に描いた顔からいろんな表情が作ることができて、う〜ん、可愛い〜！！！
■アニメーション作り
ここまではLIve2DのModelerの作業です。次はAnimeterに移ります。
なんと、Cubism3からは一つのソフトでどっちも行き来できるようです。すっごーい！
ファイル→新規作成→さっき作って保存した.cmo3ファイルを引っ張ってくると配置されます。
タイムラインにパラメーターを当てていきましょう。
本当は、瞬きのシーン・ジト目になるシーンなど、いろんなアニメーションパターンを作って組み合わせるのでしょうが、今回は簡単に自分のイラストを動かすだけなのでゴリラ的に作ってます。
また、今回は作ってませんが、髪の毛のパラメーターには物理演算があるらしいのでいつかやってみたいです。ゲームとかに実装する場合、Unityでその辺の動きを作る方がメジャーなんですかね（プログラミングは詳しくないのでわからんです！）
■gifに書き出して完成〜！！！
めっちゃ適当なアニメーションですが、目パチと口パクだけでも十分良くないですか！！
速度がいい感じじゃないのは目を瞑ってください。
個人的には髪揺れまで作りたかったんですが、Advent calender今日担当で今日作り始めたので無理でした。レイヤー分けはやってあるのでそのうち作りたい。
~まとめ~
本家
#嘘か本当かわからないことを言う
— いまいち萌えない娘 12月末で７周年 (@kobeimamoe) 2017年11月18日
萌える pic.twitter.com/BibgLr3cx8
コミケ原稿を放りだして頑張って描いたイラスト
まあまあ可愛い
Live2Dで動かす！
萌え〜〜〜！！！！！
Live2Dはお絵描きする人は作ってみると楽しいですよ。
ただ、Cubism3は2に比べてちょっとソフト重くなってた感じがします。
設定で画質荒めの軽量版とか2の時はできたんですけど3もできるのかな？できたらいいなー。
ちなみにトライアル期間は42日間あるのでぜひやってみよう！
有志が作ったモデルは公式で配布されていたりするので触ってみてください。
・公式ページ
・使い方のわかるチュートリアルページ
Top | Live2D Manuals & Tutorials
次からはちゃんとデザインの話を投稿したいと思います。
ではでは〜。
