スポンサードリンク

【Live2D講座】パース付き面回転・立体的構造の手の指

どうも、まかかびです。
この記事はLive2D Advent Calendar 201520日目です。

(19日目のねこますさんの記事はこちら

※アドベントカレンダーとは、12月の1日~25日まで毎日何かをするものです。
主に、特定のテーマを複数の人が記事にしたりします。

手のモデルGIF


さて、今日までの分でも様々な知見が記事にまとめられ、色々な使い方の入り口が開かれていますね。
知らなかったことをどんどん取り入れていきたいものです。
私もLive2D再開に際しまして、アドベントに余裕を持って終盤の登録としましたが、
その分これまでの素晴らしい記事に負けないよう、しっかり書いていきますよ!

なので今回の記事は、中級・上級者向けとなります。

簡単に効率よく作る方法ではなく、汎用性凝った動きを作る上での考え方や注意点が主です。
Live2Dにロマンを求めて凝り過ぎると、沼地を渡るような事態になりますので、
うまく渡れるようになろうというもの。(沼渡り前提)



ここで注意点。

  • 初心者の方が読まれると、「うへ~わけわからん…。もうやめよ…。」となりかねません。
  • Free版では使用できない機能が含まれる可能性があります。
  • 説明にGIFアニメ多めなので読み込みが重いかもしれません。
  • ファイル容量制限により、一部GIFアニメはGIFMAGAZINEさんを使用しています。
  • 動画書き出ししかしていないので、リアルタイムのモデル組み込みでは扱い辛い可能性があります。




今回、主に解説するのはこちらの2つ

1. パース付き面回転
~回転デフォーマが使える時と使えない時
パース付き面回転

2. 立体的構造の手の指
~必要動作の組み合わせと描画順
手のモデルGIF



興味深い動きはありましたか?
しかし2番は実質おまけ程度だったり。

ここで断っておきますが、
複雑になるほど最終的には力押しで解決することになるので覚悟が必要です。

では見ていきましょう。(長いです)






1. パース付き面回転


まず普通の回転について

Live2Dにおいて、回転し続けるものを作るのは少し厄介です。
動作付けのパラメータは、左端から右端までの直線的範囲で変化させるからです。

なので回転させ続けるには、Live2D Cubism Animator側で
パラメータが端まで行ったら反対側の端へ1フレームで移動…という風に
瞬時に逆回転させることで補うなどが必要になります。

しかしこの件に関しては、
18日目担当のカワナミさんが非常に詳細にまとめてくださっています!
今回まず解説しようとしていた内容を含みますので是非ご一読を。
該当記事へ



まずはこの記事の作り方2、正面向きの回転に注目。

パラメータに4隅を作って無限回転させる方法ですが、
回転デフォーマだけでは最後に逆回転し、
曲面でフォーマだけではサイズがうにょうにょしてしまうため、
デフォーマを両種使って問題を解決しておられます。

回転用曲面デフォーマ回転用回転デフォーマ>回したいパーツ群。

これで正面向きの回転は確認しやすく作れます。
ただしパラメータの項数は増えるのでケースバイケースで使いましょう。

曲面回転かで文字を色分けしています。


posted by Makakabi to GIFMAGAZINE







斜め横向きの面を回したい

では先程の方法のまま、回転面が横を向くようにできるでしょうか?
球体とは違い、はっきりと横を向いた平らな面を回すとなると事情が変わってきます。

※ちなみに、パースがつかない映し方なら、
回転デフォーマで回して、アニメーター側でモデル自体の縦横比を変えるという手法も紹介されてました。
回転の滑らかさならそちらが抜群です。
しかし今回はパースにこだわってみます。



まず「パース用曲面デフォーマ」を用意しました。
これ単体ではパースに沿った変形をさせます。

今回は正確なパースを設定するために、
別ソフトで3Dの立方体を回転させて目安画像を作成しました。

05_3Dパース目安作成

正面、斜め1、斜め2、斜め3とパラメータ4点分の目安画像を作成。
(目安画像制作の詳細は割愛)

その画像をドラッグ&ドロップでLive2Dへ。下絵に設定。

解説_15

下絵を目安にパース用曲面デフォーマをパラメータ4点で変形させました。
解説_16



そうしてできたパース用曲面デフォーマ
まずわかりやすいようにマス目のあるサンプル画像を所属させ、パースを動かしてみました。

07_パースサンプル_低分割

おや?
画像のポリゴン割が荒すぎるため水色線が歪に。
なのである程度は細かくしましょう。

ポリゴンを4分割で増やしたら以下のように自然に。
パースサンプル_倍分割



サンプル画像の存在は置いといて、
パース用曲面デフォーマに先程の回転構造を丸ごと所属させてみます。

パース用曲面デフォーマ回転用曲面デフォーマ回転用回転デフォーマ>回したいパーツ群

解説_3



この状態にしてみるとどうなるでしょう。

10_パース>回転


パース用曲面デフォーマがいくら変形しても、
回転デフォーマが含まれているのでそれ以下のパーツは変形の影響を受けませんでした。
そもそもこの性質を利用して正面向きに回転させていたので当然です。



では回転デフォーマ以下に変形の影響をあたえるため、
回転用回転デフォーマの下にパース用曲面デフォーマを挟んでみたらどうなるでしょうか。

回転用曲面デフォーマ回転用回転デフォーマパース用曲面デフォーマ>回したいパーツ群

12_回転>パース


これではパース用曲面デフォーマで潰された形状がそのまま回ってしまいます。
考えて見れば当然の結果です。





回転デフォーマを使わない回転

こうなってくると、回転デフォーマを使った回転から改めなくてはいけません。

そこで曲面デフォーマだけを使う必要が出ます。

それではサイズがうにょうにょしてしまうじゃないかという話ですが、
ここで力押しを発動します。

曲面デフォーマだとサイズが揺らいでしまうのは、パラメータ間で頂点がを直線移動してしまうからです。
例えばパラメータを90度毎に作った回転だとしたら、
中間地点ではこんなに縮んでしまいます。

14_四角形回転

パラメータを4点に設定した場合、
デフォーマ(5×5マスの枠)の頂点の通る道が、四角形になっていることがわかると思います。



ではそれぞれ中間点にも正常なサイズを追加設定して、
パラメータを8点にしてみます。

posted by Makakabi to GIFMAGAZINE



多少縮み具合が収まりました。
デフォーマの頂点の通る道が八角形になったためです。

ではこれをさらに細かくして36角形にしてみると!

posted by Makakabi to GIFMAGAZINE



まだ多少ガタつくものの、だいぶ綺麗になりました。
この場合、パラメータを内側に移動させると画像を小さくすることもできます。



ちなみに拡大表示すると
17_36角形回転拡大
ガタガタガタ

綺麗な正円が含まれているためサイズ揺らぎが目立ちますが、
それがなければ全然わからなくなります。
最終出力のサイズによってもほとんど気にならないでしょう。
それでも気になるなら5度毎など更にパラメータを細かくするのです。

これが複雑ゆえに必要になる力押しです。





パラメータの割り方について補足

2つ前の図ではパラメータは0~170と0~10の2つを合わせたものに10毎に点を打って使っています。
内側にパラメータを移動させると画像が小さくなります。

解説_8

ただ、この分け方だとアニメーター側で回転させる時に
0度、170度、180度、350度、360度(0度)の位置にキーポイントが必要なので避けたほうが良いと今気づきました。

しかし縦横同じパラメータ数で10度毎にキーポイントが打てるようにすると

解説_14

このように、周囲36点だけでなく内側に余計な設定点が発生してしまいます。
内側を使わなければ良いのですが、気味が悪いと思うならいっそのこと
初心に帰って0~360の直線的設定でも良いかもしれないですね。
Free版だとパラメータ項目数制限もありますし。

解説_9

アニメーター側の設定時、360度で一瞬で0度に戻す。
なお綺麗に回すには、0度の1フレーム前が何度か算出して設定しましょう。

この直線パラメータ仕様で回転体に拡大縮小も行わせたい場合は、
回転用曲面デフォーマと回したいパーツの間に拡縮用曲面デフォーマを作りましょう。





パース付き面回転

さて当初の目的に立ち返って、これならパース付きで回転できるでしょうか?
この回転用の曲面デフォーマを、パース用曲面デフォーマに入れます。

パース用曲面デフォーマ回転用曲面デフォーマ>回したいパーツ群

19_36角形パース回転

これでパース用の変形が影響し、その形状の中で回転してくれました。

ドットがやや荒れてますが、細い線をパース変形で潰している影響です。
アニメーターで動画出力時なら、高品質(2倍で出力してから縮小処理)にチェックすると
記事頭の画像のように気にならなくなります。

ただ、ゲームに組み込むなどリアルタイムものだと、
それらに似たような処理をさせるなどが必要かもしれないですね。

大きく映すとドットは荒れにくいですが、代わりにガタガタが目立ちやすくなります。
20_36角形パース回転拡大





簡単に回転のパラメータを付ける

前項の回転パラメータを付ける際の補足です。
※多分Free版では使用できない機能を使っています。



曲面デフォーマでは
Shiftを押しながらでも45度毎にしか正確に角度が付けられません。

そこで、10度毎に36個もパラメータをつけるにあたって、回転デフォーマを利用しました。
回転用曲面デフォーマの上に、角度設定用の回転デフォーマを作ります。

パース用曲面デフォーマ設定用回転デフォーマ回転用曲面デフォーマ>回したいパーツ群

解説_10



こうしてからまず、回転用曲面デフォーマを回転パラメータに関連付けます。

ここに10度毎にパラメータ点を地道に作っていきます。
細かいので数値で追加します。

解説_6

解説_8


上ではパラメータを170×10のXY構造のタイプで行っていますが、
0~360の直線タイプなら以下のようになります。

解説_7

解説_9
ぐちゃあ



そして特に変形させずに、続けて設定用回転デフォーマも同じ回転パラメータに関連付けます。
しかしこちらは
XYタイプなら4隅の点のみ、
直線タイプなら0360両端2点だけパラメータ点を作ります。

解説_11


そしてその点だけに角度を設定します。
上図の場合0度170度180度350度。
直線タイプなら0度と360度ですね。

解説_12



これで一先ず、回転パラメータを操作すると一回転する状態になります。



この状態から、10度毎のパラメータ点を追加していきます。
設定のないグレーになっている点を右クリックし、
右に表示されるウィンドウの+ボタンを押します。
グレーから緑色のパラメータ点になり現在の形状が記憶されます。

解説_13

これをグレーの点全てに行うと、10度毎のパラメータが設定された状態になります。



ここで、設定用回転デフォーマのみ選択した状態で、
メニューのデフォーマから「デフォーマを削除し、パラメータを子要素に反映」を選択します。

すると、設定用回転デフォーマは消え、それに設定していた角度パラメータが
回転用曲面デフォーマに反映されます。

これで大きさを保ったまま、
正確な回転角度を曲面デフォーマにパラメータ付けすることが出来ます。



以上、パース付き面回転の作成法と、それを通じた注意点でした。





2. 立体的構造の手の指


手は難しいです。

いくつかのパターンの絵を切り替えるのが基本の部位なのですが、
自在に動かそうなどと考えると、以下のようにとんでもないことになるので、
これからの説明は考え方の例と割りきってくださいまし。

しかしキャラの一部でなく、
ゲームにたまにいるような手だけのモンスターなどを作りたい人もいるかもしれないですね。

先程までの内容でここからの分もだいぶ考え方が及ぶと思うので、
おまけ程度に解説しようと思います。





さて、最初にも上げたこの画像。
手のモデルGIF

まだまだ未完成で切り替わりが目立ってますがそれはさておき、
この手は関節ごとに別パーツとなっています。
30_手のパーツ各位



この手をひねってみたい場合。

回転デフォーマを使える方向ではないので、
先程の面回転と同じように、パラメータを細かく割ることになります。
ここでは基本的に30度毎に設定してます。

31_手首回転

手の平はデフォーマで変形させたり、各指の付け根は回転デフォーマを移動させて調整しています。



しかしこの動きを作る際に問題があります。

指の重なり方が変わるのです。

親指が前に来たり、小指が前に来たり。
これを制御するには、パーツの描画順をパラメータによって変化させます。
前半であげた18日の記事でも触れられていましたね。



例えば人差し指の先のパーツですが、

34_手首回転描画順

このように描画順を割り当てています。
手前に来る時は大きく、奥に行くときは小さく。

それぞれの指に奥行きに見合った描画順をパラメータに設定していけば、
指の重なりを切り替える動きが作れます。



この描画順ですが、パーツに付属した値なのでデフォーマでは操作できません。
つまり、描画順を使う動作を作る際にはパーツにパラメータを付けるしかないのです。



なのでこの手に指を折り曲げる動きも追加しようとすると…

40_指描画順折り曲げ

指の付け根が手の平より前に出るようにするために、
また、指先が手前に出た後に第2関節より奥に行くためなどに、
描画順の設定が必要になってきます。

しかも、手前にも曲げるとなると回転デフォーマが使える動きでもないので、
パラメータを細かく割ってサイズが揺らがないようにする必要もあります。



こうなると、パーツにパラメータを2種類つけることになり、
手首の回転Xのパラメータ数×指の屈折のパラメータ数
となって状態を設定するべき数が膨大に増えてしまいます。

そして中途半端な形状の時に解決しづらい問題が出る可能性も高まります。

例:薬指の付け根が一時的に中指より前に来ている
43_指描画順折り曲げバラ回転



更に手の平ごと手前に傾けようとしたら?

これも別々のデフォーマで管理できる動きではないため、
やはりその設定数を掛け算することになるでしょう。



こうなると凶悪な力押しになってしまうので、
そこまでしたいなら素直に3Dを学んで作るのが良いと思いますよ!!

発表されている次期Live2D Euclidでは
Live2Dと3Dのハイブリッドモデルを作れるとのことですし。

というか2Dの長所を活かす技術なのにこれじゃ逸脱しているような…。







というわけで、描画順の解説でした。

以上のように大変なので、手が正面から左を向いている範囲でしか指折りは出来上がってないんですよね。
それも人差し指を作ってからコピーして微調整したものですし。



手は極端な例でしたが、
描画順を使ったパラメータ付けは他にも活用できると思います。

メリーゴーラウンドを回すとか、
可動部位が少なめな回転ものに使えるんじゃないかな?
「パーツ本体につけるしかない」という点をご注意いただけたらなと思います。

くれぐれも手に手を出すのはやめたほうが良いですよ!
私は続けるけどな!



そういうのはLive2D Euclid出てからで良いじゃないか。とも思えますが、
Euclidでも360度を自然に見せるためのパラメータ数は
力押しになる部分も結局出てくるんじゃないかと思います。

そもそも初期開発段階では現状と近いModelerを無理やり使っていたとも聞きますし、
こちらのEuclidの記事中の画像でも、顔の角度で細かいパラメータ割がされていることが伺えます。

やはり時には力押しも必要になるということか。

パラメータのループとかはカメラ操作もありますし解決しそうではありますね。
重ね順は…どうかな?




では、非常に長くなりましたが、これにて
アドベントカレンダー20日目
パース付き面回転、立体的構造の手の指の解説を終了します!
ありがとうございました。

ミスがございましたらご指摘いただけると幸いです。



さて、Live2D Advent Calendar 201521日目
Todateさんの「Live2D Creative Award 2015 のトロフィー制作裏話」ですね。

トロフィーに一体どんな裏が!?





【関連作品】

解説で使用した手のモデルを使った動画。
2015年6月のコンテストに間に合わなかったやつです。



2014年春、Live2Dで最初に制作したモデルを使った動画。
夏のコンテストに間に合わず、2014年秋のコンテストでPRO賞を頂きました。


↓もし良ければお気軽にクリック投票お願いします↓

人気ブログランキングへ

 




テーマ:映像制作 - ジャンル:コンピュータ

2015.12.20 | コメント(0) | トラックバック(0) | Live2D

 

コメント

コメントの投稿


管理者にだけ表示を許可する

«  | ホーム |  »

プロフィール

まかかび

Author:まかかび
漫画描いたり作曲したり。
できればゲームも作りたい。
Live2D制作承ります。
Pixiv、niconico、Youtube
作品販売もいずれ。

最新記事一覧

【47】ゼルダの伝説ブレスオブザワイルド狩猟日記 2017/06/22
【46】ゼルダの伝説ブレスオブザワイルド狩猟日記 2017/06/19
【45】ゼルダの伝説ブレスオブザワイルド狩猟日記 2017/06/17
【44】ゼルダの伝説ブレスオブザワイルド狩猟日記 2017/06/15
【43】ゼルダの伝説ブレスオブザワイルド狩猟日記 2017/06/13

     全記事一覧

タグクラウド


検索フォーム

ブロとも申請フォーム

この人とブロともになる

表示

Amazon.co.jpアソシエイトに
参加しています。

QRコード

QR

メールフォーム

ご連絡はこちらからどうぞ

名前:
メール:
件名:
本文:


計画表

・9話6月以降に。後に人気投票公約話
・Live2Dは2016年本格化
・RPGツクールMVもちまちまやりたい

Twitter

正義のヒーローのどX

第1話はこちら→ BGM付き版pixivマンガごっちゃマンガハックマンガボックス

マンガ図書館Zに登録しました
1巻へ2巻へ

コラボ漫画公開中!記事へ

最新第9話!
9話サムネイル
→BGM付き版へ
  →コマ割り版へ

らくがき4コマ集その19
4コマ集19
→BGM付き版へ
  →コマ割り版へ

イラストや落書き集

↑クリック後のページから、画像を新しいタブで開くと最大サイズになるようです。


まかかびBGM

プレイリスト

絵と曲の10年進化録
10年進化録サムネイル
→絵と曲の10年進化録へ


プレイリスト

フリーBGM配布→DOVA-SYNDROME

余所様リンク




当ブログ用バナーはこちら