■はじめに
こんにちは。「プロンプト・ウサギ」です。
AIを使ってゲームを作っていると、最近ちょっと気になることが出てきました。
「ゲームの中で、ちゃんとアニメーションするキャラクターを動かしたい！」
前回の記事では、YouTube動画を見ながら「ヴァリスのようなゲームを再現してみたい」と書きました。
もちろん、いきなり昔のゲームを完全再現できるわけではありません。
でも、AIを使ってゲームを作っているなら、
「キャラクターの絵をAIに描いてもらう」
↓
「その絵をゲーム素材にする」
↓
「実際にゲームの中で動かす」
ここまでできたら面白そうです。
ところが、ここで最初の問題が発生しました。
■ 無料AIで大量のキャラクター画像を作るのは大変！
最近の画像生成AIは、本当にすごいです。
「こういうキャラクターを描いて」
とお願いすると、かなりそれらしい画像を作ってくれます。
ところが、ゲームのアニメーションを作ろうとすると話が変わります。
歩く。
攻撃する。
ジャンプする。
待機する。
……となると、必要な画像が一気に増えます。
無料で使える画像生成AIには、回数制限があるものも多いので、
「ゲーム用に何十枚、何百枚も画像を生成する」
という使い方は、なかなか厳しい。
そこで、
「1枚ずつ大量に生成するのではなく、1枚のPNGの中に、アニメーション用の絵をまとめて入れてもらえばいいのでは？」
と考えました。
そこから、今回の3ステップが始まりました。
■ STEP 1 1つのPNGに「パラパラまんが」を描いてもらう
まず考えたのが、
「1つのPNGファイルの中に、パラパラまんがのようにキャラクターの動きを並べてもらう」
という方法です。
例えば、
1コマ目：左足を前に出す
2コマ目：両足が中央
3コマ目：右足を前に出す
というように、1枚の画像の中に複数のポーズを並べます。
ゲームでは、この1枚の画像を「コマごとに切り出して表示」すれば、パラパラまんがのようにキャラクターを動かせます。
ここで調べながら気になったのが、
「ゲーム用のスプライトシート」
という言葉です。
まだ自分の中では完全に検証できているわけではありませんが、今回の実験では、この「スプライトシート」という考え方がかなり重要そうでした。
そこでAIへの指示も、
「ゲーム用のスプライトシートとして作ってください」
という方向にしてみました。
例えば、こんな感じです👇️
横3×縦2コマのゲーム用スプライトシートを作って下さい。
1段目は、歩きのアニメ、2段目は、剣を降って剣圧で攻撃しているシーンが希望です。
かなり粗い設定なので生成の度に何処かが異なります(笑)
■ STEP 2 画像をコマごとに切り出すツールを作る
さて、PNGができました。
……しかし、ここでまた問題です。
1枚のPNGに6コマ入っていても、ゲームで使うには、
「1コマ目だけ取り出したい」
「2コマ目だけ取り出したい」
という作業が必要になります。
そこで、
「だったら、画像を切り出すツールを自分で作ればいい！」
となりました。
AIと相談しながら作ったのが、
「パラパラまんがメーカー」
です。
名前はそのままです（笑）。
PNGを読み込んで、アニメーションに使いたい部分をコマとして切り出せるようにしました。
さらに、最近は同じPNGの中に、
「歩行」
「攻撃」
「ジャンプ」
など、複数のアニメーションを管理できる方向へ発展させています。
最初は、
「ゲームの画像を切り出すだけの小さなツール」
のつもりだったのですが、
気がついたら、だんだんゲーム制作の素材管理ツールになってきました。
これもAIでゲームを作っている面白さですね。
「必要になったから、自分で道具まで作る」
という（笑）。
完成した「パラパラまんがメーカー」はGitHubで公開しています。
GitHubリンク：
https://logicmaker256-prog.github.io/manga_maker/
👆️のアドレスをGoogle検索窓へコピー＆検索
■ STEP 3 コーディングAIに渡して、実際に動かしてみる
ここまで来たら、いよいよゲームです。
今回使ったコーディングAIはClaudeです。
作った画像素材と、パラパラまんがメーカーで準備したデータをClaudeに渡して、
「これをゲームの中でアニメーションさせられる？」
と試してみました。
そして……
動きました！
1枚のPNGからコマを切り出して、
1コマ目
↓
2コマ目
↓
3コマ目
と順番に表示することで、ちゃんとパラパラまんがのようにキャラクターが動きます。
「おお……アニメになってる！」
これは結構うれしかったです。
今までは、
「AIでキャラクター画像を作る」
ところまではできても、
「それをゲームアニメーションさせる」
ところが、自分の中では少し遠い感じがしていました。
でも今回、
AIで画像を作る
↓
自作ツールでコマを整理する
↓
コーディングAIでゲームに組み込む
という流れが実際につながりました。
GitHubリンク:
https://logicmaker256-prog.github.io/para_anime/
👆️アドレスをGoogle検索窓へコピー＆検索
■ 今回わかったこと
今回の実験で一番大きかったのは、
「ゲームにアニメーションする2Dキャラクターを出せる目処がたった」
ということです。
もちろん、まだ完璧ではありません。
歩き方をもっと自然にしたい。
攻撃モーションも作りたい。
ジャンプも作りたい。
キャラクターの絵を毎回同じデザインにしたい。
アニメーションの切り替えもきれいにしたい。
……など、やることはまだまだあります。
でも、
「できるかどうかわからない」
から、
「この方法ならゲームに入れられる」
に変わった。
これはかなり大きな一歩だと思っています。
■ AIに全部やらせるのではなく、「AI＋自作ツール」が強い？
今回やってみて感じたのは、
AIに全部やってもらおうとしなくてもいい、
ということです。
画像は生成AI。
画像の切り出しは自作ツール。
ゲームへの組み込みはコーディングAI。
というように、それぞれ得意なところを担当してもらう。
この方法なら、自分のように本格的なプログラマーではなくても、少しずつゲーム制作を進められます。
そして、
「ここが面倒だな……」
と思ったところが出てきたら、
「じゃあ、その面倒な作業をするツールをAIに作ってもらおう」
となる。
この繰り返しです。
気がつけば、ゲームだけではなく、ゲームを作るための道具までAIと一緒に作っていました。
■ 次回から、実際にゲームを作っていきます！
今回、ゲーム用アニメーションを作るための流れが見えてきました。
ということで……
次回からは、この「パラパラまんがメーカー」を使って、実際にゲームを作っていこうと思います！
これまで進めてきた「農業ゲームに使える3Dモデリングツール」とも、かけ持ちになります。
3Dもやる。
2Dアニメーションもやる。
ゲームも作る。
……なかなか忙しくなってきました（笑）。
でも、せっかくAIという強力な相棒がいるので、
「できるかどうか」
を考えすぎるより、
「とりあえず作ってみる！」
で進めてみようと思います。
さて、次はどんなゲームになっていくのか。
自分でもまだ分かりません。
AIと一緒に、少しずつ形にしていきます。
最後まで読んでいただき、ありがとうございました！
■ 今回のまとめ
① 生成AIにゲーム用のスプライトシートを作ってもらう
② 自作の「パラパラまんがメーカー」でコマを切り出す
③ コーディングAIのClaudeでゲーム内に組み込んで動かす
「AIでゲームを作ってみたいけど、何から始めたらいいか分からない」
という方の参考になればうれしいです。
自分もまだまだ実験中です。
一緒にAIゲーム制作を楽しみましょう！
#AIで作ってみた
#生成AI
#AIゲーム制作
#ゲーム制作
#インディーゲーム
#スプライトシート
#パラパラ漫画
#ゲーム開発
#Claude
#HTML
#JavaScript
#GitHub
#自作ツール