2019/10/24(木) [n年前の日記]
#1 [cg_tools][dragonbones] DragonBonesで歩行アニメを試しに作成
DragonBone 5.6.2.0001 を使って歩行アニメ画像を作成しつつ操作方法を勉強中。環境は Windows10 x64 1903。
◎ 出力結果。 :
こういう感じになった。60FPSで動かしてみた。
連番pngで出力して、AviUtl 1.10 + 拡張編集プラグイン 0.93 rc1 で読み込んで、60FPSの mp4 として出力。
もしかすると、ブラウザ上でプレビュー再生してくれるはずの、以下のhtmlを開けるのかもしれない。
_walk_b01.html
ただ、ソースを眺めたら、どこかのサイトからJavaScriptを読み込んで処理しているようで…。コレをWebサーバに置いても大丈夫なのかな、という不安もあるのだけど。
連番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 をウインドウにドラッグアンドドロップすれば読み込まれる。ボーンを設定。手足パーツはメッシュにした。
アニメーションのキーフレームを指定。各ボーンに角度をつけた。
コミ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 + 左クリックで、頂点の追加選択ができる模様。その状態で、頂点以外の場所で上下に左ドラッグすれば、現在選択中のボーンのウェイトを変化させられる。
今回は手足をメッシュにして変形したけど、関節部分がかなり歪んでしまって悩んだり。どうやら、メッシュ変形は、シルエット自体が大きく変化する部分には使いづらいようだなと…。シルエット内のテクスチャが微妙に変形する、といった場合は使えると思うのだけど。シルエットが大きく変わる場合は、関節部分の見た目がちょっと汚くなるけれど、細かくパーツ分けして画像を重ねて処理したほうがいいのかもしれない。
ググった感じでは、一応、メッシュ変形時の関節の歪みをマシにする方法はあるようで。伸びる部分のポリゴン数・分割数を多くして、縮む部分のポリゴン数・分割数を少なくするといいらしい。このあたりは、3DCGで、アニメ用のCGモデルをモデリングをする際の、関節部分の作り方・ポリゴンの分割の仕方がそのまま参考になりそう。
メッシュとボーンの関連付けをする際に、ウェイトを指定するのだけど。頂点を一つずつ選んでウェイトを変更していくのが面倒臭いなと。複数の頂点を選択して、一気に同じ値で指定できればいいのだけれど、そういう機能は無いのだろうか。
一気に変更する機能はあるらしい。Ctrl + 左クリックで、頂点の追加選択ができる模様。その状態で、頂点以外の場所で上下に左ドラッグすれば、現在選択中のボーンのウェイトを変化させられる。
[ ツッコむ ]
以上、1 日分です。