歩行スプライト生成を作った理由【3】手打ちにもAIにも使えた思わぬ成果

開発当初の目的は、歩行ワイヤーフレームを薄く表示し、その上から自作キャラクターを手打ちすることでした。 実際に試すと想像以上に描きやすく、さらに同じ画像が生成AIへ動きを伝えるガイドとしても使えることが分かりました。

思わぬ成果1：手打ちの作業が進めやすかった

生成したワイヤーフレームをお絵かきアプリへ読み込み、透明度を下げたレイヤーとして配置します。 その上に新しいレイヤーを作り、輪郭や服、髪、顔を自分のキャラクターへ置き換えていきます。

何もないキャンバスから各コマの体の位置を考える場合、頭の高さ、足の接地位置、腕の前後関係などを毎回確認しなければなりません。 下絵があると「このコマでは右足が前」「次は重心が中央」といった流れが先に見えるため、ドットを打つ作業へ集中しやすくなりました。

1. 完成キャラクターに近い頭身を選ぶ

   2頭身、3頭身などから選び、必要なら頭・胴体・腕・脚の比率を調整します。

2. 歩幅と腕の振りを決める

   最初から大きく動かさず、キャラクターらしさに合わせて少しずつ調整します。

3. ワイヤーフレームまたは薄色下絵で書き出す

   透過PNGにしておくと、下のレイヤーとして重ねやすくなります。

4. 輪郭をそのまま写さず、自分のキャラクターへ置き換える

   モデルは体の流れを見る基準です。髪型、服の厚み、靴、装備に合わせてシルエットを描き直します。

思わぬ成果2：AIへ文章だけで頼むより姿勢が伝わった

試しに、生成した歩行ワイヤーフレームを参考画像としてAIへ渡し、その上からドット絵を描くように依頼しました。 文章だけで歩行スプライトを依頼したときよりも、手足の動き、コマの順番、上下左右の向きが伝わりやすくなりました。

さらに、ワイヤーフレームと一緒にキャラクターのモデルイラストを添付すると、そのキャラクターの髪型や服装を反映した歩行ドット絵になりやすくなりました。 つまり、1枚目の画像で「動き」を、2枚目の画像で「見た目」を伝える形です。

AIへ渡すときの指示例

使用するサービスに合わせて調整が必要ですが、考え方は次のようになります。

添付1の歩行ワイヤーフレームを動きの基準にしてください。
各コマの位置、向き、手足の前後関係、コマ数、並び順は維持してください。

添付2のキャラクターをモデルとして、髪型・服装・配色を反映した
ゲーム用のドット絵歩行スプライトへ描き起こしてください。

背景は透過。キャンバスサイズと各コマの配置は変更しないでください。
コマを追加・削除せず、左右の手足が途中で入れ替わらないようにしてください。

AIで生成した後も確認が必要な点

• 全コマで頭身や顔の大きさが揃っているか
• 右手・左手、右足・左足が途中で入れ替わっていないか
• 上下左右の向きとシートの並び順が正しいか
• 足が地面へ接する高さが揃っているか
• 髪や装備がコマごとに消えたり増えたりしていないか
• 使用するゲームの色数、解像度、輪郭ルールに合っているか

AIへ参考画像を渡しても、必ずそのまま使える素材になるわけではありません。 最後は拡大表示し、コマごとの輪郭やドットの揺れを手作業で直す前提にした方が安定します。

手打ちとAI、どちらか一方に決めなくてよかった

このアプリを作る前は、手打ちで描くかAIに任せるかの二択で考えていました。 実際には、歩行の下絵を共通の土台にすれば、手打ちにもAIにもつなげられます。

細部まで自分で管理したいキャラクターは手打ちで仕上げ、試作やデザイン確認ではAIを補助的に使うなど、目的に応じて選べます。 AIでたたき台を作った後に手打ちで修正する方法もあります。重要なのは、最初に動きの基準を揃えておくことでした。

制作を通して感じたこと

「完成した絵を自動で作る」ことだけが効率化ではありません。自分が毎回迷う部分だけを道具へ任せ、 キャラクターらしさを出す部分は自分で仕上げる方法もあります。

歩行スプライト生成は、ドット絵そのものを代わりに完成させるアプリではありません。 しかし、頭身、歩幅、向き、コマの位置を先に揃えることで、手打ちでもAIでも次の作業へ進みやすくなりました。 自分が便利になるために作った小さなツールでしたが、作りながら用途が広がったことが一番の思わぬ成果です。

« 返回實用心得列表