Live2D
https://gyazo.com/e837eb0ad9a4fa8e93465fbcab284045
これは何
作りながら描いた走り書きなので、体裁整えていません
逆に言えば必要だと思ったことだけをまとめました🙏
完成品
これが完成品だ！わ〜い！llminatoll.icon
初挑戦で、イラスト制作 〜 モデリングまで7時間程度でした。みんなも作ってみよう！
https://gyazo.com/21334e108159faf47042b2c52dbf6af5
環境・必要なソフト
Windowsの人はラッキー。
私はMacの中でWindowsを立ち上げて作業しました。
もっといい方法があるかもしれないけど、ひとまずこの環境で私は動いたよっていう備忘録✍️
Mac
Windows
FaceRig Live2D モジュール ： Steamで398円ぐらい
まず既存モデルで遊んでみよう
動画チュートリアルが充実しているllminatoll.icon
可愛いllminatoll.icon
既存のモデルを動かして遊ぶことで、どこがどういう風に動くのか、どれぐらいレイヤー分けしたらいいのかざっくりわかってよかったllminatoll.icon
https://gyazo.com/9d5dde14b6f42b2fc8312efbe8ff5573
ぎこちないところがあるのでさらに調整してみたllminatoll.icon
https://gyazo.com/3d874dbb2fbeb4d48559b99975c9db06
モデリングをする + アニメーションをつける がダブルで行える
すごいllminatoll.icon
こんな画面。モデリングモードとアニメーションをつけるモードを左上のボタンで切り替えられる
👇例：左上の「Animator」という黄色のボタンを押すことでモード切り替えができる
https://gyazo.com/595cd18fece86817467bd0489a2119dd
わかばちゃん作っていき
2018/8/12llminatoll.icon所要時間7時間
公式配布のpsdテンプレートはここからダウンロードできるllminatoll.icon
下書き〜llminatoll.icon
https://gyazo.com/988d3d99084c2bf491dc69da26f92d0d
左右対称に描かなきゃダメなのかな？と思って緊張気味……（絵も、自ずとカタい感じになってしまう）llminatoll.icon
→左右対称じゃなくてもいい
ただし正面向きだとあとあとラク
（イラスト完成後、Live2Dで作業するときに、モデリングのテンプレートを当て込みやすい）
普段描いてるわかばちゃんより、目が小さいので大きくした
https://gyazo.com/51417e4d91435f762526d09f2ebfc23f
色も初心者マークぽくしたい
ぬっていく
パーツごとに塗っていきます（テンプレートのPSDファイルを参考のこと）
黄緑むずかしいから浅葱色に変更
黄緑をオシャレに塗れる人ってすごいよね・・
https://gyazo.com/5350ede5cb0808bfda761dcebfc9365f
目の色が定まらない
https://gyazo.com/5f39e2b5a9982901dea4f69ebf94a9e3
こんなところでしょうか
https://gyazo.com/4bcdc5455dbfb579e1945125bf08f303
肩の部分の接続してる部分と、まぶた、口元はレイヤー構造が特殊なので、ちょっと戸惑った
とはいえテンプレートのPSDファイルをお手本にすればいいだけなので、忠実にやっていくのみ
ぜんぶ塗れました🎉
レイヤーは全部で60枚ぐらい
でも増やそうと覚えばもっと増やせる、増やしたぶんだけ華やかになる
レイヤー名は部品の言葉をつけておくこと（ex,「右目 上まぶた」）
なんで？
この後Live2DにこのPSDをそのまま読み込ませる
そのとき、レイヤー名がそのままオブジェクト名になる
明日の自分を守るためにわかりやすい名前をつけようllminatoll.icon
👇クリックで拡大表示できます
https://gyazo.com/e91e692c2d214be78db95929217a13f5
https://gyazo.com/eac2ca164b183ab405220408da3cc125 Live2D Cubism Editorの出番です
レイヤー分けしたPSDファイルをそのまま Live2D Cubism Editorにドーン！（ドラッグ&ドロップ）
テンプレート適用機能をつかって最初にざっくりマッピング
https://gyazo.com/99c8136c968d820aab4543f34237fc97
そのままだと笑ったときに目玉がまぶたにおさまらず飛び出しちゃったりするので、ちまちまポリゴンをいじってマッピングを調整します
まばたきの実装方法がおもしろい
なんと、まぶたのポリゴンを引き伸ばして目玉を隠しますw
↓Gyazo GIF参照
まぶたをはずすと・・・目玉が丸見え！👁ぎょわー
https://gyazo.com/ef80e2954acd0a562d14a93822170b7c
注意！まぶたは肌と同じ色で塗っといた方がいい！
なぜなら、まぶたのイラストに影つけてしまうと、目を閉じたときパンダ目になっちゃうからです🐼💦
ある程度スムーズに動くようになってきたら
「できた〜！」と思って、いざモデルデータをFaceRIg組み込み用に書き出そうとしたら、「テクスチャアトラスがありません」と怒られてしまった。 https://gyazo.com/c0692724deb58dac237f1bf117dd835b
そこで、この一番左上のアイコンを押して
https://gyazo.com/85f46c77ac9ef1ff302dd71091ff00b0
こんな感じのバラバラの部品になった一枚の画像を自動生成するやでllminatoll.icon
↑これがテクスチャアトラス？というものらしい
さて、このわかばちゃんをFaceRigに取り込みたいので、組み込み用ファイルを作ります https://gyazo.com/7ba1e920b7851bf87148cf103d402e4c
moc3形式だと「グラボがOpenGL非対応です」と言われ、FaceRig側で読み込めず💦
なので2.1用を使用
ハイスペックなPCをお持ちの方ならmoc3でもいけるかも？
mocを書き出すと、Live2D Viewerが立ち上がる（チェックを入れている場合）
すでに用意されているサンプルモーションを読み込んで挙動を確認できる
Live2D Viewerでの表示↓
https://gyazo.com/22fa4ff149cead75749e36987eebb73d
かわいいけど髪の毛硬いね・・・😱
目の動きが少ないね・・・😱😱
というわけで
目玉の稼働域を広げてみた + 髪に物理演算入れてみた
物理演算を入れるには？
Viewerのプロジェクト > 追加 > 物理演算から
物理演算はJSON形式で吐き出せる
https://gyazo.com/e9559d5a0c6994ecc06e232c94d3536d
ぎゃー
デフォルトのモーションですでにかわいい〜
https://gyazo.com/5422c4d554dbfbdc54741c862f64d254
（語彙力
まとめ
Live2Dをさわってみて
半分3D、半分2D
半球に絵が張り付いてるイメージ
レイヤー構造になってて、それを正面から見るとアニメーションしてるように見える、という仕組み
UI使いやすい
イラストだけの所要時間は、普通に絵を描くのの1.5〜1.8倍ぐらい😂
最初のうちは、服の装飾や影はあんまり凝らない方が、早くできてよい🙆
（模様を入れていると、肩がうごいたとき不自然にずれるので注意）
PSDで使ったレイヤーは全部で60枚ほど
口周りとかレイヤーわけが若干独特
嬉しい誤算
塗りが雑でも、キャラが動くのであんまり目立たない😂
目を閉じた顔は作らなくていい！楽チン！
なぜならマッピングするときに、まぶたとまつ毛を変形させて目を閉じた状態を作るからさ🙏神か
入らない要素は縮小してまつ毛の下に隠すだけのモノグサ仕様最高
抱負
次はアホ毛を動かしたい
さらに次はHTMLちゃんを動かしたい
そして耳をアイドリングでぺちぺち動かしたい
メモ
FaceRigに読み込ませるためのフォルダ構成はこんな感じ
.cfgは自分で作る
キャラ名.physics.jsonはLive2Dから書き出す
https://gyazo.com/2c4166d8233362d9ae94e13ccb2c7b96
OBS Studioを開き
FaceRigの画面をクロマキーで表示
動画を録画
指定したフォルダ（私はMovieにしている）に吐き出される
Youtubeからアップロード
こんな感じでちゃんと再生できるようになった↓
（これはテスト動画なので非公開です、近々本番動画もアップしたい）
https://gyazo.com/82ea1f0e29f558cfbf3adccabf403029
つづくllminatoll.icon
チャンネル登録よろしくお願いします！
（動画は近日公開）
https://gyazo.com/278fd592c4986049727213bb55949ac6
わかばちゃんが出てくる本📚
https://gyazo.com/126e9f1ca7a6b3bd745e07866e0a118a
湊川あい / 監修：DQNEO
https://gyazo.com/936b08717df2eec6c22fca00601b94de
著：湊川あい
https://gyazo.com/ea1c0aaeeb787405a7e5b032c51d09e8
Web連載