Live2Dとは
公式サイトによると…
3Dモデルを作ることなくイラストをそのまま動かすことで立体表現が可能なことである。アニメーションを作成するためには、これまではひとコマごとにイラストを描き、それらを並べる必要があったが、本製品で必要なのは、「原画をパーツごとに分けた画像データだけ」である。これにより、アニメーション作成における大幅な省力化や、原画の雰囲気の十分な発揮が可能となっている。
https://www.live2d.com/ja/
イラストを用意する
イラストを描くソフトはPhotoshopやCLIP STUDIO(クリスタ)などを使います。最終的にPSD形式(フォトショップのデータ形式)で書き出せればいいのでSAIとかでもいいと思います。
向いてるイラストと向いていないイラスト
Live2Dに向いているイラストは、いわゆる「アニメ塗り」だったりとか、線や塗りがハッキリしているものがいいです。パーツを切り分けるとき楽だからです。
注意点として、色調補正などエフェクトなどを後でつけていたり、描画モードを乗算やオーバーレイなどにしている場合は、パーツを切り分けるとき大変になります。
イラストのサイズのおすすめは?
350dpiの製本サイズ(150 x 150mm)がオススメです。一片が約2480pxです。高さをこれくらいにすると画質的に良いです。パソコンのスペックによっては重くなる場合がありますので、その際は1000pxくらいあればいいかと思います。YouTubeにアップする動画の解像度が1920px × 1080pxだと想定すると1000pxあればちょうど縦に収まります。
パーツを切り分ける
線画を切り抜いて、それに合わせて塗りを切り分ける。
レイヤーフォルダを作成してまとめていくとよい。
元の線画は残しておきたいので、線画を複製して、切り抜く。選択範囲。はみ出した余分な部分はレイヤーマスクツールで消すと間違ったとき戻しやすい。
パーツの分け方
上まつげの線を延長したラインで切る。横まつげは少し書き足して食い込ませる。
目のハイライトも分けたほうが綺麗になる。
唇は、上唇、下唇、口の中身で分けます。口の中身を上唇と下唇のレイヤーで隠します。上下の噛み合わせが大事。
前髪の影は分けて作る。
首の書き足しは上は鼻の下くらいまで。下はあまり動かないのでよきところで。
psdファイルの書き出し
「選択レイヤーの結合」で線画と塗りのレイヤーを結合。左右は分ける。左右はキャラクターにとっての左右。右〜、左〜というレイヤー名にする。Live2D上での作業が楽になるように、ある程度フォルダ分けしておく。
書き出しは、RGBで、複製を保存からpsd形式で書き出す。用紙は非表示か削除しておく。
Live2Dの画面の説明
まずは、一番上のメニューでよく使う項目を説明します。
「別名保存」すると、連番で数字をつけて保存してくれる。パラメーターの設定を間違って元に戻したいときのために、バージョンごとに保存することをおすすめします。
「2.1用モデルデータ(cmox)として保存」すると、前のバージョンで保存することができる。ソフトによっては前のバージョンでしか対応していない場合がある。
「テンプレートを適用」は、テンプレートから簡単にモデルを作ることができる機能。
「画像/動画書き出し」から、キャンバス上に表示されてる絵をそのまま画像で書き出したり、アニメーションをgif画像や動画で書き出したりすることができる。
「表示品質」画像が荒くなるが負荷がかからなくなる
「モデリング」
「アニメーション」はアニメーション機能で使う。
「ヘルプ>自動バックアップフォルダを開く」
モデリングモードとアニメーションモードの切り替え
テクスチャ関連
デフォーマー関連
選択ツール
基本的には矢印ツールを使う
変形パスツール
グルーツールはあまり使わない
一つ一つのタブをパレットと呼ぶ
パーツパレット
いわゆるレイヤーみたいな感じ。
デフォーマーパレット
ツール詳細パレット
インスペクタパレット
IDを設定、不透明度設定など
パラメータパレット
一個一個の点に記憶させることができる
キャンバスパレット
右下にランダムプレビュー
Live2Dへの読み込み・顔の表情をつける
表情周りのパラメーターをつけていきます。
- 角度Z(顔の傾き)
- 目 開閉、笑顔
- 目玉のXY
- 眉の上下左右、角度、変形
- 口の変形、開閉
をやっていきます。
psdファイルを読み込む
psdファイルをLive2D上にドラッグ&ドロップします。そうするとモデルデータが自動的に生成されて読み込まれます。
赤い枠(バウンディングボックス)の内側の点と線をアートメッシュといいます。この点を動かすことで変形させることができます。しかし今4点しかないので直線的な変形しかできません。ではどうするかというと、メッシュの自動配置でアートメッシュを増やします。これで細かく変形させることができます。
ドラッグで範囲選択またはCmd+Aでアートメッシュを全選択して、AUTOと書かれた「メッシュの自動生成」を選びます。プリセットは「標準」で大丈夫です。点の数を細かくしすぎるとPCに負荷がかかります。ダイアログは自動的に閉じないのでXボタンをクリックして消しておきます。
全選択するときは範囲外を一度クリックして選択を解除してから行うと選択ミスがなくなります。
細かく動くところはアートメッシュの割直しが必要です。眉毛、上睫毛の太いライン、口など。
角度Z(顔を横に傾ける動き)をつける
ここで使うのが「回転デフォーマ」です。
回転デフォーマは真ん中の点を中心にして回転します。円を動かすと拡大縮小ができます。
では顔の動きを作っていくんですが、首から下は動かないので、まず首から下にロックをかけておきます。
パーツパレットの鍵のアイコンの項目をクリックしてロックをかけます。首も忘れずにロックしましょう。そうすると、動かなくなり選択もできないようになります。
この状態で、首から上を全選択します。そして「回転デフォーマを作成」します。
挿入先のパーツは適切なものを選び、名前には「顔の回転」とつけます。これで作成を押します。そうすると変な位置で作られるので、首を軸に動かすためにちょうどいい位置に移動させます。⌘(Ctrl)を押しながら動かすと回転デフォーマだけを移動させられます。動かす位置は、あご先のちょっと上辺り(口の真ん中からあご先の真ん中あたりか2/3あたり)にすると自然に動くようになります。
では動きをつけていきます。
回転デフォーマを選択した状態で、パラメータパレットの「角度Z」を選択します。選択は名前の上をクリックすることで行います。選択できるとパラメータが灰色になります。
パラメータに動きを記録するためのポイントを作ります。このポイントを「キー値」といいます。
角度Zは真ん中から左右に動く動きになりますので、3点追加します。「キーの3点追加」を押します。
まずは右の動きをつけます。右側の緑の点を右クリックで選択します。この状態で、右側に傾けます。そうすると、真ん中から右に行く間の動きは自動的に作られます。角度はインスペクタパレットから数値で入力することもできます。反対の動きも作っていきます。先ほどと同じ数値でマイナスをつければ左右同じだけ動きますね。これで顔の傾きができました。
顔の傾きにしたがって髪を動かす
これだけだと顔を傾けたときに髪が固まってる感じになってしまいますよね。なので、髪に重力にしたがって下がる動きをつけてあげましょう。
ここで使うのが「ワープデフォーマ」というもう一つのデフォーマです。緑のハンドルとグレーの制御点を動かすことで変形させることができます。
前髪を選択して、「ワープデフォーマを作成」します。挿入先のパーツは適切なものを選び、名前は「前髪のワープ」にして作成します。どのパラメータに対応するものかわからないので、インスペクタパレットで「前髪のZ」に変更します。入力したら必ずエンターキーを押して確定させてあげてください。
角度Zのパラメータは白くなっています。これはキー値がまだ何も設定されたいない状態です。キーの3点追加を押して緑色にしてあげます。
まずは右側の動きから作っていきます。右側に傾いたときに右側に髪が揺れる形にします。慣れてない人はいろんなハンドルを動かして作っていくと思いますが、真ん中のハンドルを動かしてそれに合わせて他を動かす方がいいと思います。
下真ん中のハンドルを振り向き方向に動かします。そして左右をそれに合わせてずらします。上の方を動かしてしまうと、変な感じになってしまいます。反対側も同じように作っていきます。
横髪や後ろ髪も同じように作っていきます。
顔の傾きにしたがって首を動かす
顔が傾いたときに首が固まってると違和感があるので、顔の動きに合わせて首も動かします。首を選択してワープデフォーマ「首の曲面」を作成します。首の場合は上側のハンドルを動かします。
目玉のXYの動き
目玉は左右同時に動きます。それと目玉は白目からはみ出さないようにします。
まずは白目の範囲だけ目玉を表示させるクリッピングという機能を使っていきます。
左白目を選択してインスペクタパレットからIDをコピーして取得します。それを左目玉のインスペクタパレットのクリッピングという所にペーストしてエンターを押します。注意のダイアログがでてきたらそのままOKを押して大丈夫です。
これで実際に動かしてみると、白目の範囲から外れた目玉は表示されなくなっています。
右目も同じようにしましょう。
ここから動きをつけていきます。
パラメータはオブジェクトそのものにつけるよりも、オブジェクトにデフォーマを設定してそのデフォーマにパラメータをつける方法がいいです。
なので、まず目玉のデフォーマ「左目玉の曲面」「右目玉の曲面」を作ります。
パラメータは目玉XYです。Xが横の動き、Yが縦の動きです。「左目玉の曲面」を選択して「3点追加」をします。
赤い枠(バウンディングボックス)の中心点をつかむと移動ができます。Shiftを押して上下を固定したまま左右に動かします。逆方向もやります。ポイントは左右を同じ量だけ移動させることです。動かして同じくらい移動してるかを確かめましょう。これでXができました。
次はYです。目玉Yを選択して左目玉の曲面を選択して3点追加します。Yの方はプラスが上でマイナスは下になります。
XYのパラメータは見た目上合わせることができます。目玉Xパラメータの横をクリックすると、作られます。ただ斜めの動きが自動で作られていないので自分で作る必要があります。ただパラメータ2つの場合に限って自動で生成することができます。「モデリング>パラメータ>4隅の形状を自動生成」をクリックします。ダイアログが表示されるのでOKを押します。これで斜めの動きが作られました。
眉の動き
眉はパラメータの中で結構な範囲を占めます。多いけど作るのは簡単です。
眉毛はアートメッシュを再配置する必要があります。変形が上手くいかない可能性があるので、綺麗に割直しましょう。眉のオブジェクトを選択して「メッシュの手動編集」をクリックします。消しゴムでいったん全部の頂点を消してしまいましょう。そして再配置をしていきます。
コツは正三角形になるように点を打っていくことです。まず片側を線で囲みます。次に反対側は線分の真ん中から伸ばした位置で正三角形になるように点を打ちます。ガイドの青い線が自動で引かれます。自動生成で勝手に繋いでくれます。形が変だと思ったら手動で点を動かして形を変えてあげると良いです。完成したらチェックマークを押します。
反対眉も同じように直しましょう。
次に、デフォーマを作っていきます。
まず左眉を選択してワープデフォーマ「左眉の角度」を作ります。左眉の角度を選択した状態でもう一度ワープデフォーマ「左眉の位置」を作ります。位置のデフォーマは少し大きめにしておきます。Altを押した状態で拡大すると中心をキープしたまま拡大できるので、Altと⌘(Ctrl)を押した状態でデフォーマの大きさを変えます。これはどういうことかというと、角度のデフォーマに角度を付けた際に位置のデフォーマに収まる形にするとキレイに変形できる。
眉毛の角度
では左眉の角度を付けていきましょう。左眉の角度デフォーマを選択して、左眉の角度パラメータを選択します。これも3点を追加します。マイナスが怒った状態、プラスが垂れ眉にします。
まずマイナスから作っていきます。マイナスは怒った状態なので、回転させて怒った状態の眉にします。プラスは下がった状態にします。これで眉の角度ができました。
眉の上下
次に上下を作ります。位置選択して上下を付けていきます。左眉の位置を選択し左眉の上下に3点追加。プラスは上なので、Shiftを押したまま上にずらします。マイナスはこちらもShift押したまま下にずらします。これで上下ができました。
眉毛の左右
次は左右を作ります。左右も3点追加。左眉はプラスで眉を離す、マイナスで眉を寄せる。右眉だとパラメータが逆になるので注意してください。
上下左右を合わせる
こちらも上下左右2つのパラメーターを合わせることができるので、モデリング>パラメータ>四隅の形状を自動生成します。そうすると、上に行ったときの左右も自動的に作られます。
眉毛の変形
次に眉毛の変形を作っていきます。左眉を選択した状態で、ここで変形パスの機能を使っていきます。変形パスをクリックします。そうするとツール詳細にプラスマイナス消しゴムなどが表示されます。プラスはポイントの追加になります。追加してみます。これがどんな動きをするのかみてみましょう。移動させるとなめらかに動いて他のポイントは動かずにピンの役割をします。困り眉を作るときとかによく使います。で、この変形パスを置く位置なんですけど、端っこ真ん中端っこと置きましょう。3つ以上になるとまたいっこいっこ動かさなきゃいけなくなって大変になるので、なるべく最低限にしておくのがいいです。
で、この眉毛はどこのパラメータにつけるかというと、「眉の変形」です。これも3点追加して、にっこり眉と困り眉を作っていきます。
マイナスが困り眉なので、まず困り眉から作っていきましょう。困り眉の作り方は真ん中を下に下げます。あまり極端に角度を変なくていいです。ただ反転させるだけでいいです。変形パスで大まかに形を作ったあとに、いっこいっこの頂点を移動させてきれいな形を作ります。場合によっては、点を追加してあげましょう。
次ににっこり眉をつくります。真ん中を上にあげてあげる。
これで眉毛の表情がすべて作成できました。反対側の眉毛も同じようにデフォーマを作って動きをつけてあげてください。
目の開閉
目の開閉ができると瞬きなどができる。目に関しては、たくさんのパーツがあります。パラメータをつけ忘れて変形だけしてしまったということがないように、まとめて目のパーツをパラメータに関連づけておきましょう。
目玉は後で別にやるので、目玉以外の目のパーツをすべて選択します。そして、目の開閉パラメータを選択します。開いた状態と閉じた状態の2つの状態があればいいので、2点を追加します。
上まつげ
まず上まつげから動きをつけていきます。今の自動でつくられたメッシュだと変形させづらいのでメッシュを配置しなおす必要があります。手動編集から再配置します。配置のコツは、端と外側にメッシュを置くことです。幅を太くしたり狭くしたりすることできるようになる。
まず綴じ目を作ります。左目の開閉パラメータ、キー値を0にして作り始める。さきほどやったように、変形パスを使って作っていきますので、端っこ真ん中端っこに変形パスを作っておきます。次に矢印ツールに戻します。
まずはですね、まつげを選択して位置をさげます。だいたい平均的に目の真ん中を通るくらいですね。
移動させたら、真ん中の変形パスを選択して、下に下げてあげます。下睫毛を覆うぐらいまで。下睫毛はなるべく動かさないほうがきれいに見えるので下めに。
その後、目頭側をさげてあげて、
目尻側も下げるんですけど少し内側に入れてあげます。髪を非表示にしてみると、輪郭に収まる感じになってます。そのまま下げると輪郭からはみ出す場合があるので少し内側に入れてあげましょう。
どうしても変形パスで動かすと途中がぐちゃぐちゃっとなってしまうので、これを手動でなめらな形にしてあげます。
これでまぶたの基準の形ができましたので、これに合わせて他のパーツを変形させてくという流れになります。
白目
で、白目の処理なんですけど、目玉の角度をつけたときに白目の範囲だけ目玉が表示されるようにしたと思います。それを応用して、白目を潰してまつげの中にかくしてあげます。その後に、手動で点を動かして白いのが見えないように、まつげの中に収まるように微調整します。
ここまでできたら、開閉してみて、違和感があればまた微調整します。
横まつげ
次に横まつげです。
横まつげは潰してあげて、潰しただけだと違和感があるので、内側にずらしたり回転させたりして収まるようにします。
まぶた
最後に、まぶたも少し下げてあげます。
右目も同じようにやります。
目の変形
笑顔の形を作っていきます。いったん目の開閉のために作成した変形パスを削除します。変形パスモードにして、ゴミ箱をクリックすると消えます。
そしたら、目玉以外を選択して、「左目 笑顔」パラメータに関連づけます。2点を追加します。1のときに笑顔になるようにします。変形パスを作ってあげて、矢印ツールに戻したら、真ん中をあげて、目頭をさげてあげると、いい感じの笑顔になるかなと思います。
右目も同じようにやります。
これで、目の開閉と目の変形ができました。
口の表情
口のパラメータは口の開閉と口の変形があります。
口の変形は、真ん中が通常の口、プラスがニッコリした口、マイナスがムッとした口。
口の開閉は、閉じた常態か開いた状態かの2つです。
口の開閉
先に、口の開閉を作ってきます。
まずはアートメッシュを割り直します。上唇下唇それぞれやっていきます。まずは上唇。コツは、唇を覆う部分と周りを覆う部分。唇を覆う部分はなるべく細くする。自動生成も間は縦に線が通るように。
下唇も同じ要領で割り直します。
そして、変形パスを作成するんですが、丸い形になるようにします。口の端っこ真ん中と膨らんだ部分と真ん中の6つ点を打つときれいに動きます。
上唇と下唇を開閉パラメータに関連づけます。開閉は開いた状態と閉じた状態の2点追加です。開いた状態を作ります。
口の変形
関連するオブジェクトを全部選択して、口の変形パラメータに関連づけます。変形は3点追加です。
プラスは笑顔です。真ん中はキープしたまま広角を上げます。下唇も上唇に合わせます。
笑顔時の開閉をつくるために、開いたときも、口角をあげてあげます。まずは上唇の口角を唇がまっすぐなるようにあげて、それにあわせて下唇も形を変えます。
今度は、マイナスのへの字口を作ります。真ん中をあげて、口角をさげる。下唇を合わせる。
開いたときのへの字口も作ります。
これで、口の開閉と変形ができました。
口、眉を組み合わせると、怒っている表情や笑顔とかをつくれるようになります。
以上でLive2Dでの表情の作り方は終わりになります。