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

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

【Live2D】モデル制作時におけるバタつきの原因と対策

概要

これはLive2Dモデルの制作時に起きる「バタつき」についての原因と対策についての記事です。
バタつきは各パーツを動かした時に動かす幅が異なると発生します。
対策としてグリッドやスクショから動かす幅の確認をすることで修正が容易になります。
またパラメータをゆっくり動かして、周辺のパーツより先に動けば「動かす幅を少なく」、後に動けば「動かす幅を多く」することで修正が可能です。

バタつきとは

各パーツを動かす際に発生する違和感を指します。
特にこれは顔を動かす角度XYで顕著に発生すると思っています。

下のGIFが例になります。右目だけ動かすと滑って移動しているように見えます。
f:id:traitam:20180911172443g:plain

今回は顕著な例ですが、実際になると「なーんか動かしたときに違和感を感じる」くらいの問題になります。
完成だけを目指すのであれば無視しても良いのですが、品質向上に努めるのであれば避けては通れない問題です。

原因

違和感のある例として挙げたGIFでは右目だけ、左目や前髪と比べて横に動かす幅が長いです。
左目と緑線を用いて比較をすると以下画像のようになります。
f:id:traitam:20180911173733p:plain

右目は左目の数倍多く動かしていることが分かると思います。

原因となるその他の要素

今回は見受けられない要素ですが、1つのパーツだけ上下に動いているという場合もあります。
「体の回転Xについても~」から以下の例で分かりやすく解説がありますので、そちらをご覧ください。
dream.live2d.com

対策

対策としては「動かす幅を周辺と同じくらいにする」なのですが、動かす幅が多いのか少ないのかというのは分かりにくいです。
これについてはいくつか方法があります。

エディターのグリッド機能を使う

Live2DCubismEditorにはグリッド機能があり、赤枠内のアイコンを押すことでグリッドが表示できます。
f:id:traitam:20180911174516p:plain

これを用いて各々がどれくらい動いているか判別できます。

エディターのスクリーンショットから比較する

グリッド機能同様、エディターからスクリーンショットを撮ってどれだけ動いたかを確認できます。
f:id:traitam:20180911174757p:plain

半透明で重なっているため細かく見ようとすると大変ですが、グリッドと違って明確な分かりやすさがあると思います。

パラメータを動かして判別する

バタつきは動かす幅が違うため発生するので、パラメータで動かすと違和感が感じ取れます。
ただそれだけでは動かす幅を多くすればいいのか、少なくすればいいのか分からないので以下のルールに基づいて違和感を具体化します。

  1. 比較する2つのパーツを選びます(今回では右目と前髪)
  2. 違和感の原因となるパーツを選びます(今回は右目)
  3. パラメータを「少しずつ動かし」右目が先に移動すれば「動かす幅が多い」です。前髪が先に移動すれば「動かす幅が少ない」です。
  4. 動かす幅が多かった場合は少なく、逆であれば多くします。

この方法は先2つより正確性に欠けますが、グリッド見たりスクショ撮ったりするのが面倒な方は良いかもです。

対策後

今回は右目の動かす幅を少なくすることで対処ができる問題です。
そして修正したものが以下GIFになります。
f:id:traitam:20180911175719g:plain

以下画像の青線のように、動かす幅を左目と近くしました。
f:id:traitam:20180911175903p:plain

これで違和感は、「ある程度」解消されました。
違和感修正の程度に関しては個人差としか言えないと思うので今回はこれくらいでOKとします。

おわりに

パラメータ作成時、バタつきによる違和感があったらパーツ間で動かす幅が統一されているか確認してみてください。
問題が解消されるかもしれません。

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