Live2Dで目のまばたきを綺麗に作る方法

Live2D制作もしているイラストレーター、さらえみ(@saraemiii)です。

1番注目されて複雑な構成になるパーツは「目」ではないでしょうか。

Live2Dの目の作り方について、基本から綺麗に作る方法まで、まとめてみました。

Live2Dモデル作成の基本操作はこちら

あわせて読みたい
Live2Dを使ったVTuberキャラクターモデルの作り方 Live2D初期の頃から触ってはいた、さらえみ(@saraemiii)です。 キャラクターを動かしたいけれど、アニメーションはハードルが高い。 イラストの良さを残したまま動画用...
もくじ

まばたきの基本的な作り方

Live2Dでのまばたきの作り方

目をパーツ分けしながら描く

目のパーツ分け

目のパーツ分けは基本的に上図のような感じです。

ハイライトも分けていますが、簡易的に作るなら黒目と一緒にしていても問題ないです。

逆に、クオリティアップのために黒目をもっとパーツ分けするケースもあります。

モデルが出来たら、モデルのpsdをLive2D Cubism Editorへドラッグして読み込ませます。

読み込んだパーツにメッシュをつける

Live2Dモデル作成に必須なメッシュを付けていきます。

パーツに付けたメッシュ等をいじることでパーツを変形させ、キャラが動く表現ができるようになります。

パーツを選択

読み込んだモデルのメッシュを付けたいパーツを選択し…

「auto」でメッシュの自動生成

「メッシュの自動生成」ボタンを押す。

「メッシュの自動生成」ウィンドウ

「変形度合い」を選ぶと…

メッシュ生成前
メッシュ自動生成後

上図のように各パーツにメッシュが自動で作成されます。

このままでも動かせますが、綺麗に動かしたい場合は自分でメッシュを引き直す必要があります。

「メッシュの手動編集」

「メッシュの手動編集」ボタンを押すと…

メッシュ編集モード

選択していたパーツのメッシュが赤線になり、編集できる状態になります。

引き直したいメッシュを選択してDeleteで消します。(上図は全選択しています)

赤線にならないままメッシュを動かすと、パーツ自体が変形してしまうので注意!

「ツール詳細」

メッシュを編集するツールが「ツール詳細」に揃っています。

「ペン+」アイコンを押して…

手動でメッシュを引き直す

手動でメッシュを引き直していきます。

赤い点線が手動で引いたメッシュ

赤い点線が手動で引いたメッシュです。

こんな感じにメッシュを引き直せたら…

「自動接続」の横の「⌄」を押して「エッジの外周を保つ」にチェックを入れます。

その後に「自動接続」を押すと…

メッシュの引き直し完了

青いラインも赤い点線に…メッシュが引かれた状態になります。

手動でメッシュを引く場合は、青いライン含めていびつじゃない三角形を目指して引くと使いやすいメッシュになります。

これで手動での引き直しが完了です。

ワープデフォーマーをつける

パーツをまとめて変形・移動させるのに便利な「ワープデフォーマー」を付けていきます。

ワープデフォーマー付けたいパーツを選択

ワープデフォーマー付けたいパーツを選択します。

さらえみ

今回はひとまず瞳とハイライトを1つの黒目にまとめます。

「ワープデフォーマーの作成」

「ワープデフォーマーの作成」を押すと…

「ワープデフォーマーの作成」ウィンドウ

「ワープデフォーマーの作成」ウィンドウが開くので、名前を付けて「OK」を押します。

名前は他と被らない名称にします。

慣れてきたら分割数を変える事もあります。

ワープデフォーマーができた
まとめて動きます

ワープデフォーマー化ができたので、瞳とハイライトがまとめられました。

目全体もワープデフォーマー化
目全体がまとめて動きます

同様に右目全体もワープデフォーマー化します。

まとめて動いたり変形ができるので、今後振り向き顔を成形する時などに便利に使えます。

ワープデフォーマーの中にワープデフォーマーを入れる

右目全体>黒目のように、ワープデフォーマー同士で親子状態にできます。

子のワープデフォーマー「黒目」が、親のワープデフォーマー「右目全体」からはみ出さないようにワープデフォーマーの大きさを調整します。

ワープデフォーマーの大きさを調整するには?

「Ctrl」押しながらドラッグ

「Ctrl」押しながら枠をドラッグするとワープデフォーマーの枠の大きさを調整できます。

青いラインになると、枠だけ調整できる状態の目印です。

子のワープデフォーマーだけでなく、動きをつけた時のパーツの可動範囲がワープデフォーマーからはみ出さないように、大きめにつけたほうが良いです。

白目の中に黒目を入れるクリッピングマスク

ちょっとしたホラー

黒目を白目の中だけで動くように「クリッピングマスク」で設定します。

白目パーツのIDを…

白目パーツのIDをコピーします。

黒目パーツの「クリッピング」にペースト

黒目パーツの「クリッピング」にペーストします。

ちょっとしたホラー

こんな感じに白目の中だけ黒目が表示されるようになります。

クリッピングマスク機能も、「目」以外にも色々使えます。

パーツとパラメーターを紐付ける

まばたき動作をつけるためにパーツとパラメーターを紐付けていきます。

パーツを選択

パーツを選択して…

パラメーターを選択してキーを打ちます

今回はまばたきなので「右目 開閉」パラメーターを選択して、「キーの2点追加」を押します。

パラメーターの点が緑色に

「右目 開閉」パラメーターに緑色の点が2つ付けられます。

閉じ目のキーに移動し、閉じ目を成形する

左側のキー「0.0」を選んで成形していきます

キーを付けた「右目 開閉」パラメーターの、左端のキーを選択します。

選択できていないとミスに繋がるので、右端の数値が「0.0」になっているのを確認しましょう。

閉じ目の成形

左端のキーを選択した状態で、パーツを成形して閉じ目を作ります。

変形パスの使い方とコツ

メッシュをちまちま触って成形していくのは大変なので「変形パスツール」を使います。

「変形パスツール」

「変形パスツール」ボタンを押すと、変形パスツールが使える状態になります。

「変形パス」をつけていく

パーツの形に沿って「変形パス」を付けます。

「矢印ツール」

「変形パス」を付け終えたら「矢印ツール」に切り替えます。

「変形パス」の点を動かして成形する

「変形パス」の点を動かして大まかな形になるように成形していきます。

細かい形はメッシュの点を動かして成形していきます。

メッシュをいじるのに変形パスが邪魔な時は…

「編集レベル」

「編集レベル」を「1」にすると一旦変形パスが消えて、メッシュを触りやすくなります。

編集レベル「1」

パーツの赤い枠は「×」で一旦消すことができます。

これを繰り返して閉じ目の形を作ります。

白目をまつ毛に収納させていく

まつ毛を非表示にした状態

メッシュや変形パスツールを触って、まつ毛の中に「白目」と「目尻のまつ毛」が収納されるよう成形します。

一通り完了したらパラメーターの赤い点を動かして、開閉してるか確認します。

まばたきを作りやすく綺麗にするコツ

パーツの重なり方

前回作成した経験から、パーツ分けで気をつけた方が良いと感じたのは以下の通り。

さらえみ

今回このまとめをするにあたって、新たにパーツ分け等を見直して作成してみました。

修正前の目のパーツ
今回変更した目のパーツ

↑パーツが見やすいように透過しています。

  • 1番太い上まつ毛に被るパーツは、被る部分を長めに描いておく
  • 1本ごとにパーツ分けする

これをやっておいたほうが断然作りやすかったです。

メッシュの作り方

1番よく動くまつ毛のメッシュの作り方もクオリティを左右します。

修正前のまつ毛のメッシュ

最初は上図のようにメッシュを引いていました。

これでも動きますが、下図のように稼働時のクオリティが全然違います。

メッシュを丁寧に作ると、開閉する途中の目がガタガタになるのも防げます。

修正前のまつ毛
今回メッシュを修正したまつ毛

修正前はガタガタです。

スムーズな形に調整するには下記のようなメッシュになります。

今回手動で引いたメッシュ

修正前と違って、ここまで細かめに手動で引きました。

さらに…

「ツール詳細」の「4分割」

こんな便利なのあるんだ!と思ってメッシュの「4分割」を押してみると…

「4分割」後のメッシュ

とてつもなく細かくなりました。

さらえみ

…これは細かくしすぎました…💦

閉じ目の成形

さすがにここまでやると閉じ目に変形させるのも綺麗になりました。

閉じ目にする際、「変形パスツール」だけでなくどうしても手動でメッシュを成形させる手間も発生します。

手動で成形させるのにすごく手間がかかるので、ここまで細かいメッシュじゃなくてもなんとかなると思います。

メッシュの△三角形を崩さず綺麗に並べるとパーツが綺麗に描写されます。

さらにクオリティアップさせるには

まばたきの動きをクオリティアップさせるためのコツを紹介します。

さらえみ

Live2Dだけでなく、TVアニメでたまにやる表現もあります。

眉を動かす

閉じる目に合わせて眉毛も少し下に下げると、人間のようなリアルな表現になります。

ハイライトを変形&動かす

ハイライトを変形

厳密に言うと、目はまぶたに隠れていくと反射する光の位置や形が変わります。

なので、目を閉じる時にハイライトを変形させておくとリッチな表現ができます。

黒目を動かす

目を閉じる動作にあわせて黒目も少しだけ下がるようにすると、人間のようなリアルな表現ができます。

閉じ目の位置を下まぶたより少し上に

重ねてみると下まぶたより上

目を閉じた時の位置を下まぶたより少し上にしておくと、下まぶたも動くようになりリアルな表現になります。

片目が完成したらもう片方は「反転」で作る事もできます!

Live2Dではパーツと動きをそのまま反転コピーできます。

方法はこちらにまとめています。

あわせて読みたい
Live2Dでパーツを動作ごとコピーし「反転」させる方法 Live2D制作もしているイラストレーター、さらえみ(@saraemiii)です。 Live2D作業で、左右同じパーツがあって何度も動作を付けないといけないのは結構骨が折れますよね。...

目は1番見られるパーツなので魅力的に仕上げたい!

Live2D界も奥が深いので、紹介した方法以外にも効率化やクオリティアップの方法が開発されていると思います。

他のLive2Dクリエイターさんのノウハウも大変勉強になります。

特に「目」は人がついつい追ってしまう注目されるパーツです。

Live2Dで動かす場合には、描き込み以外に綺麗な形や動き方でも魅力的に仕上げてあげたいですね。

他のパーツのくわしい作り方はこちら

口や頭の動きなど他のパーツの作り方もまとめています。

あわせて読みたい
Live2Dモデルのパーツ別作り方まとめ Live2D制作もできる元アニメーターのイラストレーター、さらえみ(@saraemiii)です。 Live2Dの作り方も大変奥が深く、私自身も勉強の日々です。 ここでは、モデルのパー...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
もくじ
閉じる