puppet3 スムーズに動く瞬きと口パクアニメの作り方
皆様、はじめましての方は、はじめまして
そうでない方は、おはこんばんちは、VMR寧々子です
このドキュメントはPuppet3を使って活動したいけど、他の使用者と差をつけたいという人や自然なモーションでモデルを動かしたいけどLive2DやFacerigがPCスペックの問題で動かないという人向けに、puppet3のモデルクオリティを上げようという趣旨で描いてみたものです
右がgifアニメを使い、モーションに少し自然さを出したものです
他にもいろいろなアプローチがあると思うので考え方、方法の一つとして頭の片隅にでも入れてもらえればと思います
puppet3は複数枚の表情差分を用意することで
キャラクターに目パチ口パチのモーションが実装できるツールです
Vtuber活動におけるアバターを動かすためのソフトといえば、facerigが主流ですがpuppet3はそれと比べて
・アプリケーションが非常に軽い
・必要な素材が少なく導入のハードルが低い
・二つ同時に立ち上げが可能
という点で優っていると思っています、事実として私もキャプチャーボードを使用するゲーム配信ではpuppet3を使用しています
しかしながらfacerigと比べてしまうと、四枚の画像では表現にも限界があります
そこでpuppet3に使用する画像をgifアニメーションにすることで、目パチの動きを滑らかにしたり、口パチの動きを増やして、アバターが動いてる時の違和感を減らしていこうというのが、これから紹介するやり方になります
立ち絵のみならず色んな場面で使えるテクニックになっているとは思いますので、よければ活用してみてください
作成する上での前提条件
該当のアバターを作成する上で、以下のツール(同じことが出来れば何でもいいです)が必要になります
使用ツール
・クリップスタジオ
お絵描きで使っています、イラストが描けるツールであればソフトは問いませんが透過pngやgif画像形式で保存できるソフトをおススメします
・GraphicsGale
画像を256色へ変換するのに使っています、減色作業が出来、カラーパレットの作成と読み込みが出来ればどんなツールでも構いません
・giam
差分をgifアニメへと変更するのに使っています、gifアニメが作れてフレーム数が指定できればソフトは問いません
gifアニメを用いるため、グラデーションを多用する塗り方は変換時に劣化しやすいため向きません
パキッとしたアニメ塗りや、そもそもドット絵を動かしたい…といった際に向いている方法になります
この図の右側のようにgif形式でグラデーションをかけても、どうしても色の層がハッキリしてしまいます
繊細な色使いのイラストを使用する場合は、静止画四枚でpuppet3で運用する方が
良いと思います
減色した表情差分を用意する
次に、アニメーションを作るために表情の差分を作ります
本来、puppet3で使用する画像は
・目開き/開口
・目開き/閉口
・目閉じ/開口
・目閉じ/閉口
の4枚ですが、私は9枚の差分でアニメーションを作成しています
枚数は増やすことも減らすことも可能ですが、この枚数がスムーズに動いてるように見せるための最低ラインだと思います
画像一段目(左から)
・目開き(全開)/開口(大)
・目開き(全開)/開口(小)
・目開き(全開)/閉口
画像二段目
・目開き(八割開)/開口(大)
・目開き(八割開)/閉口
画像三弾目
・目開き(五割開)/開口(大)
・目開き(五割開)/閉口・目開き(全開)/開口(小)
画像四段目
・目閉じ/開口(大)
・目閉じ/閉口
これらの画像を組み合わせてgifアニメーションを作っていくのですが、その前にやることがあります
それは画像の色数を256色へ減色し、全ての画像に同じカラーパレットを適用すること
減色した際に、それぞれの画像で色味が変わることがありますので、それを防止するためです
この作業を行わないと目をつぶっている間だけ肌の色が土気色になったり、喋っている間だけ目の彩度が落ちたりします
これをやる、やらないでクオリティが大きく変わりますので絶対にやった方が良いです
私の場合は、GraphicsGaleにて一番色数の多いであろう"A-1 目開き(全開)/開口(大)"を256色へ変換します、その際アルゴリズムは自分のイメージに最も近い色身になる様、何度か試してみることをオススメします。
変換後にカラーパレットを保存し、一括変換から全ての画像のカラーパレットを統一してください。
下のリンクにて大まかな流れを動画化しています
ここまでの作業が終われば、次はgifアニメの作成です。
GIFアニメーションの設定
先ほどパレットを統一したgif画像を組み合わせて各モーションを作っていきます。
作成するモーションはpuppet3で使用する
・目とじ：口あき
・目とじ：口とじ
・目あき：口あき
の、3モーションです。(目あき：口とじ に関しては画像一枚なので作成不要。)
Giamの赤枠部分へ必要な差分画像をD&Dし、青枠でウェイトの長さ(gifアニメのコマが表示される時間)を調節していきます
目とじ：口あき(目とじ：口とじ)の使用画像＆ウェイト設定
1コマ目：A2(A3) ウェイト6
2コマ目：C1(C2) ウェイト2
3コマ目：D1(D2) ウェイト6
4コマ目：C1(C2) ウェイト4
5コマ目：B1(B2) ウェイト3
6コマ目：A2(A3) ウェイト6
※左のgifはモーションの確認をしやすくするため、6コマ目のウェイトを66で設定しています
※目とじ：口とじ は()内の画像に差し替えて、同じウェイトで作成してください
目あき：口あきの使用画像＆ウェイト設定
1コマ目：A2 ウェイト20
2コマ目：A1 ウェイト30
3コマ目：A2 ウェイト20
4コマ目：A1 ウェイト30
5コマ目：A3 ウェイト20
6コマ目：A2 ウェイト30
7コマ目：A3 ウェイト20
ファイルを出力する際には、必ず"パレットは個々に持つ"にチェックが入っていることと、最大色数が"256色"にチェックが入っていることを確認して下さい
あとは出力したgifアニメをそれぞれpuppet3へ導入し、A3の画像を 目あき：口とじ として導入すれば画像の用意は完了です
あとは好みの動作速度になるように、設定を弄って調節していってくださいね
余談
ちなみにですが、グラデーションのかかっている画像をこの形式で動かそうと思った際にOBS上でpuppet3の上から顔部分だけ切り抜いた画像を重ねる、っていう力技で解決できたりもします
着せ替え人形みたいなイメージですね(裸素体を用意して、上から服をかぶせる…みたいな)
あんまり小回りは効きませんが、知ってると出来ることが増えるので
下みたいなことが出来ます
みんなもpuppet3使って色んなことしてみましょ？
puppet4くらいになったら、puppet上でレイヤー機能追加したりしてくれないかな？