ふわっとしかわからないLive2D
はじめに
これは講座でもなんでもなく、Live2Dがどーなっているのかを知りたい人向けにとりあえず自分が使ってみたり観察した結果を紹介ついでにまとめている感じです。
実際問題じぶんで作りながら覚えるのがいいかもしれませんが、例えばLIVE2Dで動かして欲しいからアニメーションは作らないけど原画を描く……みたいな「触らないけど関わる人」が知っておいたら便利だな〜って感じの資料になったらうれしいな。それはそれとして本音としてはみんなLive2D作って欲しい、フリー版でもかなり遊べますので……
↓制作ソフトのLive2D Cubism Editor
Live2Dってそもそも何？
なんて言えば良いんだろ……イラストをベースにしてそれを色々させることでアニメーションさせられるよ！みたいな……
うちのこゆきなちゃんの絵描いた pic.twitter.com/0CjkpuOaMx
— ❄️もち (@yukina_cake) 2019年5月11日
このイラストを（ブログに載せる許可はとりました！！！！！！！）
❄️もち(@yukina_cake)さんのイラストをLIVE2Dで動かしました！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ pic.twitter.com/0grNqEiehK
— 千歳とせ (@10Ccandy) 2019年5月11日
こんな感じのアニメーションにできちゃう！
こんな表情をつけることもできちゃう！！！！！
そんな技術です、初めからこうやってモノホン見せれば良かったですね。
gifやMP4みたいなファイルだけじゃなくてモデルとして出力すればゲームとかでも表示して動かせるみたいですね。あんスタとかガルパとか……アズレンはやってないけどLive2D見てすごいなぁ……って思ってる……あとはfacerigでヴァーチャルの肉体を得るのに使う人がめちゃめちゃ多いですね、これはいっぱい講座見つかる。
一枚のイラストがそのまま（のように）動く！！ってのが魅力だと思います、特に塗りが複雑なものもその通りに……一枚一枚描いて作っていくと手間とか考えてどうしても単調な塗りになってしまいますしね（偏見）。それと、ソフトが割と直感で動かしやすいのとなんといっても作業量と成果のコスパが良すぎる。ところで直感で操作できるならこの記事の存在意義は……？
どうやって動かしてるの？
①イラストを細かいパーツに分けて
②パーツを移動したり歪ませたりして変形させた形をパラメーターに記憶させ
③そのパラメーターの変化を組み合わせてアニメーションを作る！！！
という感じです、本当にざっくりした言い方なので以下で詳しく説明していきます。本当に詳しいの？
イラストのパーツ分け
Live2D制作における苦行。
一枚絵が動く！と言っても残念ながらTwitterで上がっているJPEGをそのまま鍋にぽいってぶち込めば勝手に瞬きや口パクをしてくれる訳ではなく（とてもつらい）目を動かしたいなら目の、口を動かしたいなら口のパーツに分けて、そこから変形させていきます。一枚絵なのにパーツ……？ってなるけど現実ってこんなものだよ。
デジタルで絵を描く人はイメージしやすいと思うんですけどLive2Dも.psdや.clipみたいにレイヤー構造になっています。余白の透過したイラストを上からぺたぺたはりつけて描画してる感じ。これだけなら説明は楽なんですけどね。
まずここから説明行くか……Live2Dに元絵のデータをインポートするときはpsdでファイルを作ります。どう分けるかは後で言うとして、独立した部分ごとにレイヤーを分けていって……みたいな。
クリスタなりフォトショでつくった.psdファイルの、レイヤー1,2,3……で分けた部品をアートメッシュって言います。これがややこしいんですけどレイヤーn=アートメッシュとパーツは同じじゃ無くて……パーツは1つから複数のアートメッシュ（と変化の情報を記憶させたデフォーマ、これは後で説明します）をまとめたフォルダみたいなものです。右手というパーツ＝フォルダに手のひらのアートメッシュ、親指のアートメッシュ、人差し指etc...のアートメッシュ（と手首の曲げや指の関節の動きの回転デフォーマ）が入っている……みたいな？
↑こっちがクリスタで作業したレイヤー達
↑それをLive2D Cubism Editorで読み込む（そしてデフォーマをこっちでつくってフォルダに格納）するとこんな感じ
ぶっちゃけしばらく触って動かして、ようやく「あーたしかにまとめた方が楽だわ〜」ってなる、なったので「パーツは画像一枚だけのやつじゃないよ！」って覚えておけば……これ言っておかないと絶対イメージと食い違って混乱するので……なんでこんな名前にしたんでしょうね。
どんな感じで分けるの？について
↑これは陳列されたゆきなちゃんのどうたい。
これみたいに奥→手前の順番や関節、変形をイメージしながら一枚のイラスト（というか統合して書き出す前のファイルをつかったほうが楽なので一枚のイラストという言い方は語弊がある）をバラバラにします。右腕の肩や肘の動きをつけたいので上腕と前腕を独立したアートメッシュにしよう〜とかスカートはひらひらさせるけどその下にある脚はひらひらさせないから分けて、更にスカートの奥のほうも脚の奥に配置して……みたいな感じ。表情とかのパーツ分けサンプルはとりあえず公式見な……（人の描いた綺麗な顔で福笑いを載せるのは抵抗があったので例は身体にしました）
ここで重要なのが、上のレイヤーで隠れていた部分も揺らしたり、手前に描画されてるアートメッシュが動いたりすると白日の下に晒されるので見えてもいいように塗り足しをしないといけないのです。
ランドセルの例、普段は手で隠れているけど動かした時ふつうに見えるのでちゃんと下まで描こう。（塗り足しを描いたのは千歳とせです、これをわざわざ言うということは切り分けを指示して相手方に押し付けたということでもある）
所詮隠れている部分にどこまで塗り足しするか？の塩梅と常に戦いながらパーツをつくっています。作り終わった今思うとこのランドセルの肩ベルトに関して、真ん中は少しくらい途切れていても隠れて見えなかったはず……
ちなみにモデルの描画については描画順（レイヤーの手前奥みたいなやつ、数字で指定できる）やレイヤー合成（通常、乗算、加算）、不透明度やクリッピングとか思ったよりLive2dのほうで編集できる点があります。乗算加算ができるよ～ってのは絵師側の人知っておいた方がいいと思いますね。（乗算で頬の照れとか、加算でぼんやり光るのとかが作れる）
自分はパーツ分けに関しては場数を踏むほど「コレとコレは分けた方が動きつけやすそうだな〜」とか「コレはハミ出るな……」とかわかるようになってきました。パーツ分けをちょっと頑張るだけでその後の作業が楽になるの……（それと大前提として元の画力があったほうがいい、つらい、だから自分は人の褌を振り回しているのだ）
それとこれは複雑な動きのモデルをつくる時の話なのですが描画順（奥／手前を数字で指定しているので動きの途中で前後関係をいれかえることもできるのだ）の設定で空間把握能力だったりセンスも求められると思います、ぶっちゃけ頭がこんがらがる。
パーツの変形
Live2D制作の鬼門。
アートメッシュを用意したらLive2D Cubism Editorにぶちこんでとうとうイラストに変化をつけていきます。
その前に一旦そもそもどうやって静止画の形を変えているのか？について触れておきます。次にパラメータの話をするんですけど実際はパラメータいじるのと絵をぐにゃぐにゃさせるのは同時進行でやっていく作業です、とりあえずこっちから説明！！！
パーツの変形について
・アートメッシュを直接変形させる
・デフォーマにぶちこんで変形させる
の2パターンがあります。（デフォーマって何！？！？！？って思いますよね、ぼくも思う）アートメッシュはおっぱいの柔らかさを表現、デフォーマはおっぱいの立体感を表現……みたいな？絶対もっといい例えはあるはず。
ま～～ずはアートメッシュの変形について説明します。
アートメッシュ化された透過イラストはポリゴンという単位に更に細かく分け……分けてるっていうとバラバラだと思われるな……でもバラバラじゃない……とりあえず分けられます。（ポリゴンって呼び方も2Dでどうなの？って思う、紛らわしいんですけど3Dのポリゴンと思想は似てるし…）これに関してはまぁ必要に応じて（動かしたいパーツだけ）オートで設定したり手動で点を打っていく感じですので雑なポリゴン分けのアートメッシュも存在します。
面を構成する最小の多角形たる三角形をびっしり敷き詰めて、その三角形の頂点を動かすことで、その動いたり頂点で構成された三角形がまず変形し、その三角形で囲まれたアートメッシュ内のポリゴン（というか色？画素？）も三角形に合わせて歪む……三角形がびっしりということは辺を共有しているので1つの頂点が動くだけで周りの三角形の形にも影響がある、ONE FOR ALL,ALL FOR ONEである
何言ってるかわからんな、ちょっとコレ見てもらえれば
↑gifで書き出すとこんなかんじ
上下左右がデカめの三角形ポリゴンで、真ん中の頂点を動かせばそれで囲まれたポリゴン（色のついた三角形）がそれに合わせて引っ張られるような感じで変形していく……というのが伝われば……
上の例は説明用の大味な変形なのですが実際のモデルの場合はこんな感じの
ポリゴンぎっしり詰め合わせパックなのでキメの細かい変形になります。
あと！ポリゴンの頂点はツールで一気に動かせるので頂点1個ずつちまちま……ってやらなくても大丈夫です、形を整える時の微調整として結局一点ずつ動かすけど。
アートメッシュの変形はぐにゃっとしたりふんわりした動きに向いていますね、メインは目の開閉といった表情です。これに関してはもう公式の講座で一番最初にやってるのでそれを見た方がイメージはつかみやすいかと……あとアートメッシュの変形は細かい調整が効くのでクオリティを上げる為に最後はポリゴンの頂点の位置との戦いになります。
次、デフォーマの話だ……コレ正直LIVE2D勉強するぞ〜ってなった時一番の難関になりました。デフォーマの親子関係の話が……
デフォーマとは複数のアートメッシュを一気に動かせる便利ツールです。
例えば顔の向き、顔を30°くらい横に向けるとしたら、顔についている目、口といった表情パーツや生えている髪の毛、お耳など複数のパーツ（の中に入っているアートメッシュ）を動かさなくてはいけませんが、一々目を……口を……って変形させるのがめちゃめちゃ手間（あとパラメータの都合で1つのアートメッシュにいっぱい動きをつけると厄介なんですよね）なのでもう全部まとめて！！！！変形させます。フォルダ（パーツとは別の一般的なフォルダだと思ってください、ここがややこしいポイント）ごとその中身を歪ませる！みたいな？
デフォーマには回転デフォーマとワープデフォーマ（曲面デフォーマ）の2種類があり（急に文字色増やしてごめんね）、イメージとしては
◆回転デフォーマ→紙兎ロペ（関節になる一点がありそこを中心に平面的に360°回転させることが出来る）
◇ワープデフォーマ→クリスタとかにあるメッシュ変形……みたいな？（アートメッシュって言い方と混同する、助けてくれ）（タイツのレイヤーをメッシュ変形使って脱がす動画がバズったよね）
です、顔の向きとかはワープデフォーマの方ですね、回転デフォーマは腕とか首の（回転の基準がある）傾きというかそのまんま回転に便利です、角度を数字で指定することが出来る。
よし、さっきのやつを使います
アートメッシュ①「なんでもない物体」に「かわいいお顔」のアートメッシュ②を移植します
とてもかわいい
ここでこの物体を右（こっち→）に向ける時、顔と本体を両方歪ませたいのでこの2つをワープデフォーマにぶちこんで
ワープデフォーマ自体に「この中のアートメッシュをこんな感じで歪ませて〜」的に動かしますと
↑これがワープデフォーマで動かすメッシュ変形みたいなやつ、今はアートメッシュを非表示にしてあります
こうなる（思ったよりキモくなった）
アートメッシュのポリゴンと比べて大味な変化になるのでデフォーマでだいたいの形をつけた後、その中のアートメッシュをちまちま変形させて微調整……ってやるとくおりちぃが上がります。
それでもってデフォーマのややこしくも便利な点なんですが、デフォーマは入れ子構造にできるんですよね。デフォーマの親子関係とか言ってアートメッシュやそれを変形したデフォーマ（とその中身）を更に別向きの変形させるデフォーマに入れることができる……じぶんはコレの設定の仕方、整理が最初慣れなくて「なんでコレとコレ一緒にできないの～～～～」って泣いていました。多分最初の難関だと思います、他の作業は力押しで出来るので。
今回のモデルだとこんな感じの入れ子構造になってます、ディレクトリだと/回転/曲面Y/曲面X/アートメッシュ①みたいな……？
さっきは左右のx軸の向きをワープデフォーマで動かしましたので、更にそのデフォーマの上に上下を向くy軸用のワープデフォーマを作ると
上下を動かせる上に右を向いた状態で上下に…左を向いた状態でも……ってできます。
ちなみに更にその上に回転デフォーマを設定し動かすとこうなります、上下左右向いた形のままさらにその上から360度の回転の動きをつけるって感じ。
↑なんかめちゃめちゃ初期のwindowsのスクリーンセーバーみたい。
この例はパーツ数が少ない構造なのでわかりやすかったんですけどゆきなちゃんのモデルの場合だと一気に「は！？！？！？！？！？！？」ってなると思います。
なぜならパーツもフォルダの入れ子構造になっているのにそれとはまた別にデフォーマ用の入れ子構造があるから！！！！！
同じ上半身のアートメッシュの位置でも
パーツの場合は身体パーツ（フォルダ）に入っているだけですがデフォーマの場合は
全体の揺れ（結局使わなかった）→身体の回転（腰を曲げるときに使った、以下の部品が全部傾くの）→身体のワープ（上半身だけを変形させて呼吸の胸の動きをつけるのに使った）→上半身（アートメッシュ本体）ってなってもうどこだお前……って。
そもそもパーツ構造の中ではパーツ（フォルダ）に入っていて大人しかった陰キャデフォーマがいきなりデフォーマの入れ子でイキり出してアートメッシュや他のデフォーマの親になるんですよ……パーツ分けのフォルダとか見る影も無いし……
これはもう別物として考えた方がいいかもしれません、パーツのほうは描画と要素の管理の為（描画は結局数字で管理するけど……）、デフォーマのほうは動きの為みたいな感じで。
デフォーマを何回か弄れば自然と動きの入れ子構造について理解できるようになって、そこからようやく適切なデフォーマの入れ子を構築できるようになる……のかな？いや思ったより簡単に理解できる人もいるかもしれない。
パラメータをつける
パラメータこそがLIVE2Dというかこーいった変形させる系アニメーションソフトの本懐ですよね、LIVE2Dしか触ってないんですが多分Spineとかも同じに見えたんで同じなんだと思います。
さっき説明した変形は動いていない元絵の0の状態から結果の1を作る、みたいなイメージでした。
動きというのは変形の様子、変化の流れみたいな？そんなのじゃないですか……動きの始まりと終わりの画像があってもそれをカチカチ切り替えるだけじゃ細かい紙芝居にしかならない……
滑らかな動きはグラフでいうと0と1を結ぶ線を毎秒0.いくつで移動する点Pみたいな、0or1じゃなくてアナログな変化です。
ここで使うのがパラメータという……何だろ、機能、この言葉便利だな、機能です。
パラメータも最大値、最小値、デフォルトの値みたいなのを設定したこんな感じのやつです、なんていえばいいのか本当にわからない。ターンテーブルのはしっこについててDJとかが音量を変化させる時に使いそう。
パラメータの設定作業ではパラメータ上の特定の値（口の開閉だったら閉じたのに0、開いた形に1！みたいな）にキーフォーム、魅せの姿？決めポーズ的な……としてアートメッシュやデフォーマの変形させた形を覚えさせて行くことになります、覚えさせるというよりこの値のときはこの形！って変形させて指定していく感じ？
あと〜……1つのパラメータに複数のアートメッシュやデフォーマの動きを記憶させることができますね。
例えばゆきなちゃんの←の腕を動かす時に肩の回転、肘の回転、それに合わせて動くランドセルのベルトの移動／曲がり、ベルトに引っ張られるランドセルの本体の移動、ついでにベルトについてる防犯ブザーの揺れも……って感じで色んな要素の変化を1つにまとめて一度に再生……みたいな？
（忘れて書き足してますけどパーツの設定の際にいじった描画順や不透明度の数値もパラメータに焼き付けられます）
パラメータのすごいところ、自分が触ってみて感動したところは0→1の基準となる2点を設定しておけばあとは中割の0.1,0.2,0.3......0.9を勝手に作ってくれるところなんですよね。確かアニメーションツールでは0.1単位で書き出ししてた。
変形をポリゴンの頂点の座標で記憶しているので（あとまぁデフォーマ、これも極論座標の位置みたいな管理なので）その点を滑らかに動かして、頂点同士で結ばれたポリゴンの中のイラストというか色をそれに合わせて変形させていく……って感じだからできるのかな？裏方は知らないので完全に想像だけで言っています。
また、パラメータは最初と最後だけじゃなく、例えば0～1の途中の0.5の値とかにも指定することができます。0.1〜0.9を勝手に作るより0.1〜0.4／0.6〜0.9って区切った自動生成のほうが変化が単調じゃなくなってツール感が大分減り、自然な変形をさせられます。これもどこまでこだわるかの塩梅ですね。facerigで動かすVのモデルとかは半目になることが多い（フル開眼のために目を見開いてカメラに顔を写しているとブルーライトがめちゃめちゃはいってくるのだ）ので0.7とか0.5で中間点を作り形を整えるといいよ。
例えばゆきなちゃんのモデルは目のパラメータにおいて、
0の閉じ目と1の開眼だけでなく0.5の値にもキーフォームを打ってジト目の形を作りこのような感じになっています。パラメータの0.5のところにも◯があってキーフォームだよ～ってなってる。
↑ちなみに赤い●は現在の値、これだと0.8ですね
これを開眼→ジト目（少し停止）→閉じるってやると
こんな感じになります、3つしか形作ってないのにこんな滑らかな中割りできるのまじで便利。
前半と後半で変化の雰囲気がなんとなーく違うの分かります？ほんとになんとなく。
このパラメータを動き毎にい〜〜〜〜っぱい作ります。目、口、眉……この為にたくさんのパーツに分けていたんですよね。さっき勉強したデフォーマが複数の動きをつける際かなり役に立ちます。
これはパーツ分け以上に地味で延々と先の遠い作業ですね、自分は楽しいですが。
ちなみにゆきなちゃんはこれくらいのパラメータがある
↑この下に演出用のパラメータもあるよ
これでも少ない方ですね、キャラ二人がまぐわう（若干えっち気味なのでこの記事では載せてません）アニメーションを作った時は50くらいパラメーター作りました。
一度に投げるサイコロの数が増えるほど（全部のサイコロは色が違う）結果のバリエーションが掛け算的に増えていく……的な？そんな思想。LIVE2D作りは確かに手間がかかってめんどくせ〜かもしれないのですがそれの結果作れる動きの幅がかなり広くなるのでコスパはかなり良いんですよね。
パラメータに関しては本当に簡単で地味……に見えて実はめちゃめちゃ奥深いです。一個のアートメッシュに対して複数のパラメータで変形を指定すると色んな変化の表現ができるとか……上の例だと口とか目の開閉と変化のパラメーターが結合して2次元的な数値の変化をさせられます、動かす時楽になるよ！（その分キーフォームの指定のめんどくささが跳ね上がるのですが……）
アニメーションをつくる
最後にアニメーションをつけます。使用感はだいたいの動画編集ソフトと似てるタイムライン形式です。タイムライン上にその時点でのパラメータの値を打っていくとそれに合わせてなめらかに値と値に対応した形の変化が焼き付けられます。
説明～というかもうこれを見れば何をやってるかわかると思う。
何秒の時点で目の形はこう……しばらく維持して更に何秒後に閉じ始めて……みたいな感じでパラメータの赤丸を移動！
これをさっきつくったパラメータ毎に何度もタイムラインをループして（ここでコネクトが流れる、交わした約束忘れないよ）変形の同時再生をします。
顔の輪郭の中の目や口だけ動かすと何となーくチープ感が出てきちゃうのですが、同時に首をちょっと動かす、首を傾ける、髪を揺らす！ってやるとなんかめちゃめちゃ複雑に見えます、単純なヤツの組み合わせなんですけどね。人間の脳ってけっこうちょろいので複数の変化をやればだいたいで判断するしかなくて単純なトリックでもバレないんですよ。
アニメーション作りのコツに関してはとにかく組み合わせて同時再生！！！！だと思ってます、とりあえず呼吸のパラメータを往復させて胸や肩を動かしていれば静止画感は消える。その上でできるだけ多くの変化を、タイミングをズラしてつけていけばなんとなくすごいように見える！！！早くこの物量作戦から脱却したい。
これでもって後は書き出しすればアニメーションの完成！！！って感じです。やった〜〜〜
アニメーションに関してはまだまだ自分も勉強不足なのでもっと面白いことができたり作業がらくになったりする機能があったりするかもしれません。
おわり
ひとまずはこんな感じ！！！！作り方講座〜みたいな形式じゃなくてほんと抽象的な話ばっかりしてたから「何言ってるかわかんねーよ」ってなるかもしれません。パーツ分けやデフォーマの作成、パラメータの設定はそれぞれ独立したセクションじゃなくて……動きをイメージして、いくつパラメータをつくって組み合わせるか？デフォーマやメッシュの変形でどう表現するか？その為にはどうパーツ分けをすればいいか？みたいな絡み合った関係になってるので、とりあえず順番に学んでいく〜のではなく一気に出来ることを叩き込む！ほうがいいと思ったんですよね。
この話題に需要がある！って思えば各肯定ごととか実際の制作の流れみたいなもうちょい詳しい記事でも書こうかな。説明のイラストを整えてnoteで売ったりとか……
イラストを描いたりするのですが人のイラストのレイヤー構造を見るのがめちゃめちゃ好きで、Live2dのモデルも人の編集データを見てみたいな〜と思ってます。そういうコミュニティとかあるのかな？いかんせん人口が少ないので……ある程度PCのスペックも要求されますしね……
ほんと皆少しでも興味持ったらいじってみてください……制作の話とかしよ……自分もまだぺーぺーだけど……動きつけるだけでほんと可愛さとか跳ね上がるので……
