読者です 読者をやめる 読者になる 読者になる

ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

Live2Dの角度X,Yの作成

Live2D

Null.はじめに

ここはLive2Dの顔周りである“角度X”、“角度Y”の作成記事です。
f:id:traitam:20160816225934p:plain
角度X,Yで使うデフォーマ設定からパラメータ割り振りまでを行います。

0.目的・対象となる方

顔周りは特に注意は払われる部分です。この部分が綺麗に完成されていればLive2Dモデルの質としても向上します。

ここでは、バタつかない角度X,Yのパラメータ作成を行うことを目的とします。

"バタつかない"という意味は、
「各パーツの動きのバランスが悪いために違和感が発生すること」
を指します。

以下のURLに記載されているGIFの悪い例でバタつきが示されています。

dream.live2d.com

この記事内にあるGIFにならないように角度X,Yを作成していきます。
この記事では角度X,Yのみの説明になりますが、体の角度X,Yなどに応用が可能です。

対象となる方は“パラメータの階層が読める”、“テンプレート使用しないでパラメータを設定したことがある”方です。
テンプレート使用後、この設定を行うと体と顔の動きが合わず違和感の原因になる可能性があります。
よってこの記事は中級者向け以上になります。

1.バタつきの原因

バタつきの原因として、イラストパーツ移動時に動きが統一されていない際に発生します。
例としては「前髪がX移動(左右移動)なのに上下移動していて違和感が発生」などがあります。

これを回避・修正するには、現在ではクリエイターの腕次第になっています。
そのため「違和感があるのは知っているが、直し方がわからない」「デフォーマの作り方がイメージできない」などがあり、実際に直せる人は多くないと思われます。
さらに、デフォーマの編集が人によって違うため、違和感ないように動かす過程が人によって違う、ある程度Live2Dに通じている人でも難しい分野、という問題点があります。
ですので、以下の設定方法も私個人の方法であり、改善の余地・手法への相性問題(方法の向き不向き)が発生します。
もしこの手法が苦手だった場合は、ほかの手法を探してみるとよいかもしれません。

2.デフォーマ設定

デフォーマの設定としては、以下のように行います。

全体移動用
|- 体の曲面Z
|-- 体の曲面Y
|--- 呼吸
|---- 首の回転
|----- 顔の上体(特殊パラメータ用。基本は無くてOK)
|------ 顔の回転
|------- 各種顔のパーツ(目・まゆげ・口・鼻・耳など)
|------- 各種髪のパーツ(前髪・横髪・後ろ髪など)

f:id:traitam:20160816223527p:plain

場合によってはこの下にさらに変形デフォーマの設定がありますが、それを書くだけで記事がいくつかできてしまうくらい長くなってしまうので割愛します。
後述で記事にします。

また、個別でパラメータを設定すること自体が中級者以上であることの証左なので、細かい部分は今まで作ったノウハウの活用、もしくはコメントください。
デフォーマを作ったら本題である設定です。

3.パラメータ設定

パラメータの設定方法とは、ここでは変形デフォーマの変形を使います。
この変形デフォーマの変形によって、角度XYの良し悪しが決まります。
ただ、私の場合はシンプルに作っているつもりなので、ある程度の作法が守られれば使えると思います。
ではその作法を角度XYそれぞれで説明します。
全体的には変形デフォーマで作っています。が、一つ例外があります。“顔”です。
顔のパーツだけは変形デフォーマを使わず頂点を変形させて角度XYを設定しています。こればかりは、私も公式のモデルを参考にしながら設定をしたのでこの中では例外的扱いとします。
そこはかなり重要な部分であることは重々承知ですので、機会があればまたその専用記事でも書こうかと思っています。なにぶん、私もこの部分は全く分からないことだらけですので。

3.1 角度X

角度Xとは以下の画像の赤枠内を指します。
f:id:traitam:20160815223542p:plain

変換の分割数が9*9になっていますが、ここまで5*5でも大丈夫です。
分割数は5*5に今回は設定されていますが、3*3でも同じようにルールを守れば、適用できると思われます。(未検証)

ここでは前髪を例に説明します。
バタつきの原因としては動きが統一されていないというのが原因だと先に述べましたが、それをどう解消するかが、今回のカギになります。
そしてその解消法としては、“移動は縦もしくは横で限定して動かす”ことです。
文章だけでは何を言っているか伝わりにくいので画像を元に説明をします。
f:id:traitam:20160815224529p:plain
角度Xでは横方向の移動を設定するので、上の画像の青ラインに沿ってデフォーマを動かします。

f:id:traitam:20160815224720p:plain
また、緑ライン方向にはデフォーマは動かしてはいけません。立体感を出したいから緑ライン上で動かすとバタつきの原因になります。ご注意を。

簡単にいいますと“角度Xでは横移動の設定のみ行う”、“上下移動は行わない”ということです。
設定の方法では変形デフォーマの頂点をドラッグしている時に“Shiftキー”を押して動かすと、縦横固定の移動ができますので、その方法を元に設定を行います。

その2つのルールを守り、以下のように作成します。
以下の画像は角度Xのパラメータ30です。
f:id:traitam:20160816213009p:plain
これを目指していくつかのルールを守りながら作成手順を示します。

簡単な手順としては
1、変形デフォーマの移動
2、ルールに沿ったデフォーマ頂点の移動

の2手順です。
1、変形デフォーマの移動では、文字通り変形デフォーマを移動させます。
今回ですと角度Xの左向きを作成するのでそっちに移動させます。
ただ、場合によっては必要ないタイミングがあります。今回例に示した前髪は角度Yの時には使っていません。
使うと、よりダイナミックな動きになりますが、使いすぎると動き過ぎで設定のバランスの難易度が上がってしまいます。
最初は使わないで、少しだけ動かす。というのも、ステップアップとしては十分だと思います。

2、ルールに沿ったデフォーマ頂点の移動では、
以下の画像の赤点のように動かします。
このとき縦には動かしません。横にずらすだけです。
f:id:traitam:20160816213930p:plain

パラメータを割り振る前の、元のデフォーマの頂点と比較してみましょう。
青が設定前、赤が設定後です。
f:id:traitam:20160816214119p:plain

変形デフォーマ自体が移動していることと、変形が曲面を描いていることが見て取れると思います。
そして、このデフォーマの頂点移動で大事な項目があります。
上の画像ですが、左右のデフォーマの頂点は一切動かしていないことが分かると思います。この場所は動かすことは推奨しません。
変形デフォーマの大きさが小さく設定してしまった時など、どうしても内部の縦3列で上手く作れない時、少し使う程度に留めてください。

あともうひとつ。ここがミソです。内部のデフォーマの頂点は設定前のパラメータより右側に来ていますが、最上下のデフォーマの頂点では設定前の左側に来ています。
この“最上下のデフォーマの頂点では反対方向に引く”ということを覚えてください。
これで大分、Live2DのXYの設定が楽になります。

そして、調整のために変形デフォーマについている青点。そこを動かし、滑らかな曲線を描くようにします。

最終的には以下の画像のように曲線を描けるよな設定に仕上がります。
f:id:traitam:20160816214830p:plain

綺麗になれば良いですが、アバターの髪型などでやや変わるところがあります。が、綺麗に曲線になれば基本上手くいくと思われます。

これと同じようにー30のパラメータを設定します。
変形デフォーマ本体を移動。そして縦3列だけ移動させます。内側の3つは向かせたい方向に、最上下は設定前の所より向かせたい方向の逆側に引く。
これで完了です。
慣れてくれば、このルールを覚えられるようになり、手早く設定が可能になります。

3.2 角度Y

角度YもXのルールと同じように設定します。
Xと違うのは縦方向に変形デフォーマの頂点を移動させる、ということだけです。
f:id:traitam:20160815224720p:plain

ですので緑ラインに沿って設定を行っていきます。

今回角度Yでは上方向の「角度Y パラメータ30」を設定します。
移動はしません。Y方向の動きは強い動きを付けるのが難しいからです。なので1、は飛ばします。
2、では角度Xと同じように設定します。
今回はYの上下方向なので最上下の列は設定しません。
また、内部の横3列は向かせたい方向に向かせ、最左右では設定前と比較して、向かせたい方向の逆に引きます。
そして調整として、青点を動かします。当然、この青点も上下だけ動かします。角度Yの時に左右に動かしてしまうとバタつきの原因になります。
f:id:traitam:20160816220715p:plain

そして、上記と同じように角度Yのパラメータ-30も設定します。

3.3 角度XYのブレンドと調整

最後に、[パラメータ]->[4隅の形状を自動生成]から角度XとYを選択し、ブレンドします。
ここで一発で上手くいくことはほとんどありません。ですので、最終調整を行います。
ただこれも角度XYで使ったルールを応用します。というか、ブレンドします。

f:id:traitam:20160816222137p:plain
内部9か所を、角度XYで動かした位置の交点近く(黄色丸の位置)に置ければOKです。
ブレンドの段階である程度大丈夫と思えばそのままでも結構です。

ここで最上下、最左右を各々動かしていなければ、この段階のブレンド調整が楽になります。動かしてしまえばその部分も調整が必要になってしまうからです。
大体これで労力が半分になります。
これを4隅行います。感覚ではなく、ルールに沿って変形させているのでノウハウ・空間認識能力がそこまでなくても作れると思います。というか調整がその場の気分ではないという点が楽です。
後で変形させたい場合でも、今まで行ったルールを覚えていれば同じように作れます。


そして満足が行けば作成終了です。

4.最後に

この工程を髪・顔のパーツに同じように適用し、作成します。目の部分での大きさ変更は正直強くするしないは好みですが私は手法を統一し、作成を進めたい人なので拡縮は使いません。
代わりに変形デフォーマの全体移動です。
今回、前髪で行いましたが、横髪、後ろ髪にも設定しないといけません。そこで最後に作法というかアドバイスを。“前方のものほど動きが激しい”です。
ですので、前髪が一番曲線がきつく、後ろ髪が一番曲線が緩いです。そのことを頭に入れておくとクオリティアップに繋がると思います。
ここも詳しく言うと、記事が1つ出来上がるので割愛します。

そしてこれは、体のXYでも同じように応用ができます。ただし、公式が配布しているテンプレートの動かし方と混ぜようとすると違和感が出ます。
そのため、今回の記事の動かし方か、テンプレートを適用させ、調整を行うか。という2択にした方が無難です。

このような問題点はCubismならではです。ネットでも情報が少ないのに、顔周りという重要な場所なので手は抜けないです。
これが、少しでも創作のお手伝いになれば幸いです。


では、皆さまよき創作ライフを!