AIで2Dゲーム用スプライトを作る #4
第四回です。
前回は3Dモデルを使用したモーション撮影環境を用意しました。
最後の仕上げをしてゲームで使える形に持っていきます。
■ モーション調整
Mixamoモーション+ちびキャラ で頭が動きすぎる問題に対処していきます。
特に移動系のループモーションで気になる... 逆に攻撃などのワンショットモーションであれば何もしなくてもいいかも知れません。
結局のところ頭のボーンが動かなきゃいいんだろ？ ということでGodotのアニメーションブレンド機能を使って強引気味に調整します。
(アニメーションブレンドは大抵のゲームエンジンに必須機能として入っていると思います)
▼ 歩きモーションをどうにかする
(調整したいモーション毎にAnimationTreeノードを追加したほうがいいと思います)
まずTポーズから開始
上半身(というか腕)をブレンド
関節が固いほうがデフォルメキャラっぽい？ので肘とか手首は動かさない
下半身をブレンド
歩幅が小さいほうがデフォルメ感がありそうなので重みを0.5に
MEMO:
編集中は上半身と下半身で再生タイミングがズレる事があります。
AnimationTreeノードにあるActiveのチェックをOff→Onすると直ります。
バウンスを追加
どうにも動きが固いので体全体を上下に揺らしてみます。
▼ 走りモーションをなんとかする
歩きと同じように走り用のAnimationTreeを追加して調整します。
▼ 再度SCAIL-2適用
新しいモーションでSCAIL-2を適用すると以下のようになります。
大丈夫かこれ… と思いながら調整してましたが、以外に悪くないような気がしてきました。
背景が暗いと後工程で背景除去しにくくなるので明るいビーチに変えましたが、これはこれでSCAIL-2を通すと砂煙のエフェクトが追加されたりして微妙ですね... 明るい室内にすべきでした。
あと分かった事としては、
DrivingVideoの1コマ目とリファレンス画像のポーズが似ていると動きが良くなります (気がする)。
1コマ目で何らかの骨格マッピングが行われているような、そんな挙動に見えます (気がする)。
これをすると体の動きは良くなるけど1→2コマ目の過程で髪が揺れすぎるという諸刃の剣。
挿入するコマ数を増やして少しずつ動かすと髪の動きが収まるけどちょっと面倒。
■ 仕上げ
ゲームで利用できるように最後の仕上げをしていきます。
ComfyUIを使って背景を除去し、ピクセルアート調に加工、複数の画像を1枚に並べます。
デカいですね。
せっかくなので細かい処理を流れにそって解説していきます。
▼ 動画 (連番PNG) を読み込む
SCAIL-2で生成した連番PNG(任意のディレクトリにまとまってる想定です)をバッチ形式で読み込みます。
▼ 背景除去 +α
背景を消してます。
- A(上側): 普通に背景を消し、消した部分を真っ黒に塗り潰す
- B(下側): MaskOffset=4でちょっと大きめのマスク画像を作る
この状態でAの画像にBのマスクを被せると、キャラの外周に太目のアウトラインを残しつつ背景除去できます。
▼ ピクセル化
PixelOE を使ってピクセルアート風にします。
この段階で画像(背景除去マスク含む)の縮小をしています。
今回は1/8に縮小する感じで設定しています(元画像が704x1024、縮小後が88x128)。特に深い理由もなく1/8にしましたが、実際は使用するゲームに合わせて調整すべきところです。
▼ 一枚のpngに整列
バッチ形式の画像群を MakeImageGrid で1枚に並べ、背景除去マスクと合成します。
▼ 完成品の保存
1枚に合成された画像の横幅を(なんとなく)1024になるようパディングしてから保存します。 この出力画像をGodotなどに取り込んで利用する事になります (もちろん他の画像とくっつけたほうが便利)。
▼ アニメーションプレビュー
1枚に合成した画像を再分割し、GIF形式でアニメーションの様子が確認できるようにしています。 確認しない場合は不要な処理です。
▼ ワークフロー実行結果
上記ワークフローで処理済みの結果画像 (をさらに全部くっつけたやつ) を載せておきます。
ピクセル化の時点で縮小しすぎてちょっと荒いなあ、などと思わないでもないですが、検証用なのでこのあたりにしておきます。
ここまでで記事タイトルの「AIで2Dゲーム用スプライトを作る」という目標はとりあえず達成できているのかなと思います。長かった…
今回はここまで。
次回、作ったスプライトシートを実際にGodotで動かしたり反省点をまとめたりします。
