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