mieki256's diary

こういう感じになった。60FPSで動かしてみた。



連番pngで出力して、AviUtl 1.10 + 拡張編集プラグイン 0.93 rc1 で読み込んで、60FPSの mp4 として出力。

もしかすると、ブラウザ上でプレビュー再生してくれるはずの、以下のhtmlを開けるのかもしれない。

_walk_b01.html

ただ、ソースを眺めたら、どこかのサイトからJavaScriptを読み込んで処理しているようで…。コレをWebサーバに置いても大丈夫なのかな、という不安もあるのだけど。

一応、今回の作業の流れもメモ。

コミPo!で、キャラ画像を、背景を透過にして出力。

_walk_b01_001.png (1.3MByte)

GIMP 2.8.22 で開いて、パーツに分割。レタッチで、関節周辺の足りない部分を描き加えた。


各レイヤーは自動切り抜きをして最小限のサイズにしておく。psdファイルとして保存。

_walk_b01_002_scalechg_psd_20191024.zip (walk_b01_002_scalechg.psd を内包)

DragonBones を起動。psd をウインドウにドラッグアンドドロップすれば読み込まれる。ボーンを設定。手足パーツはメッシュにした。


アニメーションのキーフレームを指定。各ボーンに角度をつけた。

手元で動かした DragonBones は、何故かメニュー上のセーブ(保存)やエクスポートがグレーアウトになっていて選べなかった。コレはバグなのか、それとも仕様なのか…。ただ、ツールバー上のアイコンをクリックすれば、セーブ(保存)もエクスポートもちゃんと動く。実用上は問題なさそうかなと。

今回は手足をメッシュにして変形したけど、関節部分がかなり歪んでしまって悩んだり。どうやら、メッシュ変形は、シルエット自体が大きく変化する部分には使いづらいようだなと…。シルエット内のテクスチャが微妙に変形する、といった場合は使えると思うのだけど。シルエットが大きく変わる場合は、関節部分の見た目がちょっと汚くなるけれど、細かくパーツ分けして画像を重ねて処理したほうがいいのかもしれない。

ググった感じでは、一応、メッシュ変形時の関節の歪みをマシにする方法はあるようで。伸びる部分のポリゴン数・分割数を多くして、縮む部分のポリゴン数・分割数を少なくするといいらしい。このあたりは、3DCGで、アニメ用のCGモデルをモデリングをする際の、関節部分の作り方・ポリゴンの分割の仕方がそのまま参考になりそう。


メッシュとボーンの関連付けをする際に、ウェイトを指定するのだけど。頂点を一つずつ選んでウェイトを変更していくのが面倒臭いなと。複数の頂点を選択して、一気に同じ値で指定できればいいのだけれど、そういう機能は無いのだろうか。

一気に変更する機能はあるらしい。Ctrl + 左クリックで、頂点の追加選択ができる模様。その状態で、頂点以外の場所で上下に左ドラッグすれば、現在選択中のボーンのウェイトを変化させられる。