■はじめに
こんにちは、プロンプト・ウサギです。
前回、パラパラまんがのように、キャラクターの絵をコマ送りで動かせる「パラパラまんがメーカー」を作りました。
自分で作っておいて言うのもなんですが、これ、なかなか面白いです。
1枚のPNGに並べたキャラクターの絵を切り出して、順番に表示すれば、ちゃんと「動いている！」ように見える。
ゲーム作りにも使えそうです。
……でも、ここで問題が。
ゲームを作ろうとすると、必要になるコマ数が一気に増えます。
歩く。
攻撃する。
ジャンプする。
ダメージを受ける。
別の方向を向く。
キャラクターが増えれば、必要な絵もどんどん増えていきます。
これを全部、1人で切り出して、位置を調整して、ゲーム用のPNGにして……。
「いや、これ大変すぎない？」
そこで、ふと思いました。
「せっかく生成AIを使っているんだから、もっとAIに仕事をしてもらえばいいのでは？」
## 考えたら、AIにあまり仕事をさせていなかった
ここ👆️が今回、一番の気づきでした。
これまで生成AIにお願いしていたのは、主に「元になる絵を作ること」と「パラパラまんがメーカーそのものを作ること」。
もちろん、これだけでも十分すごいです。
でも、パラパラまんがメーカーを実際に使う作業は、人間がやっていました。
PNGを見て、
「ここからここまでが1コマ目」
「次はここ」
「このコマは少し位置を直して……」
と、せっせと作業する→大変
そこで考えました。
「このパラパラまんがメーカーを、AIが使えればいいのに。」
そして、ちょっと改造してみることにしました。
■AI用のネオ・パラパラまんがメーカー
目指したのは、
【AIに画像を渡す】
↓
【AIに分割情報を作ってもらう】
↓
【パラパラまんがメーカーに読み込ませる】
↓
【必要なら人間が少し修正】
↓
【ゲーム用PNGを書き出す】
という流れです。
今回は、その方法を3ステップで紹介します。
# ステップ1 PNGをAIに渡して、分割用JSONを作ってもらう
まず、ゲーム用スプライトシート
例えば、上の絵のように用意します。
・横3コマ×縦3コマ
・全部で9コマ
・歩き、攻撃などのアニメーション
といった画像です。
ここで人間が1コマずつ、
「Xは○○、Yは○○、幅は○○……」
と入力していくのは、正直ちょっと面倒です。
そこで、PNGをChatGPTに渡します。
そして、
「このPNGを3×3に分割するJSONファイルを作って」
とお願いする。
すると、AIが画像を見ながら、各コマの切り出し位置を計算してJSONを作ってくれます。
このJSONをパラパラまんがメーカーに読み込ませれば、
「AIが切り出し位置を決める」
↓
「アプリがその設定を読み込む」
↓
「アニメーションとして確認する」
という流れができます。
つまり、AIがパラパラまんがメーカーを“操作するための設計図”を作ってくれるわけです。
ここポイント👆️。
AIに画像を直接加工させるのではなく、
「アプリが理解できるデータをAIに作ってもらう」
という考え方です。
これなら、生成AIと自作アプリの役割分担がかなり明確になります。
# ステップ2 気になるところだけ、人間が直す
AIに全部任せれば完璧！
……とは、まだいきません（笑）。
とくに、コマの大きさがかわる画像では、
「上のコマと、ちょっと被ってるな」
ということがあります。
そんなときは、人間の出番です。
パラパラまんがメーカーで、気になるコマだけ修正します。
全部を人間が作るのではなく、
「AIに大部分をやってもらって、気になるところだけ人間が直す」
という方式で、かなり楽になります。
今まで、
「9コマ全部を確認して、全部自分で設定する」
だった作業が、
「AIに作ってもらって、変なところだけ確認する」
に変わります。
人間は、単純作業ではなく「最終チェック」に集中できます。
# ステップ3 ゲーム用PNGに分割する
最後は、ゲームで使いやすい形にします。
パラパラまんがメーカーで確認したコマを、ゲーム用のPNGファイルとして個別に書き出します。
例えば、
walk_01.png
walk_02.png
walk_03.png
attack_01.png
attack_02.png
attack_03.png
という感じです。
さらに、ここで一手間。
左右反転したPNGも一緒に作っておきます。
例えば右向きのキャラクターを作った場合、
右向きPNG
↓
左右反転
↓
左向きPNG
を作っておけば、ゲーム側では同じ絵をもう一度用意する必要がありません。
つまり、
「元絵を作る」
「分割する」
「ゲーム用に書き出す」
「左右反転する」
という作業のかなりの部分をAIに任せられるようになります。
# ステップ振り返り
【STEP 1】
PNGをChatGPTに渡す
↓
分割用JSONを作ってもらう
↓
パラパラまんがメーカーに読み込む
【STEP 2】
アニメーションを確認
↓
気になるところだけ人間が修正
【STEP 3】
コマごとのPNGを書き出す
↓
左右反転PNGも作る
↓
ゲームに使う
こんな感じ👆️
……だいぶん、AIに仕事を振ってます（笑）。
# 「AIに全部作ってもらう」だけがAI活用じゃない
今回、個人的に一番面白かったのはここです。
生成AIというと、
「AIにゲームを作ってもらう」
「AIに画像を作ってもらう」
「AIにプログラムを書いてもらう」
という使い方を考えがちです。
でも、今回やってみて思ったのは、
「自分が作った道具を、AIにも使えるようにする」
という方法も、かなり面白いということ。
AIにJSONを作ってもらえるようにしただけで、作業量がかなり変わりました。
「人間が全部やる」でも「AIが全部やる」でもなく
その中間に、
「AIに面倒なところをやってもらって、人間は確認する」
という方法がある。
これが、今回の一番大きな発見でした。
# 変更したパラパラまんがメーカーも公開します
今回、AIを使って作業しやすくしたパラパラまんがメーカーは、GitHubに置いておきます。
https://logicmaker256-prog.github.io/new_manga_maker/
👇️のリンクが動かない人は、👆️のアドレスをGoogle検索窓に入れて下さい。
そして、せっかくなので、この方法を使って作った簡単なゲームも置いておきます。
https://logicmaker256-prog.github.io/anime_game/
👇️のリンクが動かない人は、👆️のアドレスをGoogle検索窓に入れて下さい
ゲームの説明
1.自キャラは、姉妹の姉です(何故か剣を持つ)
2.歩きスマホをしている男子学生が前から来るのでタップして攻撃
3.1km歩くとゲームクリア
まだまだ小さなゲームですが、
「画像を作る」
↓
「AIに分割させる」
↓
「パラパラまんがメーカーで確認する」
↓
「ゲーム用PNGにする」
↓
「ゲームに組み込む」
という流れを実際に試すことができました。
■ 今回の学び
今回の学びを一言で言うなら、
「せっかく生成AIを使うなら、できるだけ仕事を振ろう」
です。
前回の方法でも、同じことはできます。
でも、
「人間が全部やる」
のと、
「AIにできるところまでやってもらって、人間は確認する」
のでは、楽さが段違いでした。
しかも、AIに仕事を振るためには、AIに何でも直接やらせる必要はありません。
今回のように、
「AIにJSONを作ってもらう」
「自作アプリにJSONを読み込ませる」
という橋渡しをするだけでも、かなり便利になります。
自分で作った小さなツールと生成AIを組み合わせる。
これ、思っていた以上に強力かもしれません。
そして何より……
「AI、もっと働いてもらおう（笑）」
ということですね。
■ 次回予告
次回は、今回作った簡単なゲームを、もう少し改造してみようと思います。
今はまだ「動くゲーム」という感じなので、もう少し遊び込めるようにして、ゲームとしての深みを出していく予定です。
3Dモデリングツール側も大規模デバッグ中です。
デバッグにシステム不安定の要因が入ったり、なかなか大変です。
次回は、こっちの話をしようかな？
それでは、次回もお楽しみに！