AIでゲームを秒で制作！2D忍者アクションゲームをつくる方法【バイブコーディング入門＆初心者向け】

・・・となやんでいませんか？

こんにちは！

この記事では、AIを使って2Dの忍者アクションゲームを作る方法を紹介します

プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください

今回紹介するゲームのプログラム

キャラクターの画像をつくる

プレイヤー作成編の手順です

Geminiの入力画面を開き、ドット絵スプライトシート生成用のテキストを入力します

2Dアクションのドット絵のピクセルスプライトシート
#サイドビューのみ、他方向は不要

//服は少し明るい青色

//立ち上がりから十字斬り（10コマ）
//走っている（5コマ）
//ジャンプしている（5コマ）
//しゃがんでいる（2コマ）
//ダメージを受けている（4コマ）
//ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた
//文字、枠、はいらない
//上記のモーション
//各モーションに対応するフレームがあること
//純白背景

入力するプロンプトは、2Dアクションのドット絵のピクセルスプライトシート、サイドビューのみ、他方向は不要、服は少し明るい青色、立ち上がりから十字斬り10コマ、走っている5コマ、ジャンプしている5コマ、しゃがんでいる2コマ、ダメージを受けている4コマ、ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた、文字や枠はいらない、各モーションに対応するフレームがあること、純白背景、といった内容を指定します

入力欄下の送信ボタンを押して画像を生成させます

生成結果として白背景のスプライトシートが出力されます

次に、敵キャラクターであるサイバーパンク風のヤクザをつくります

引き続きGeminiにプロンプトを入力します。SFCレベルの2Dアクションのドット絵のピクセルスプライトシート、サイドビューのみ、他方向は不要、サイバーパンクのヤクザ、敵キャラクター、SDキャラ、描き込みすぎないように、歩いている9コマ、パンチ5コマ、ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた、文字や枠はいらない、上記のモーション、各モーションに対応するフレームがあること、純白背景、と指定して送信します。画面上に紫髪のキャラ画像が出力されますが、もう少し悪っぽくするために、サングラスをかけている、という追加テキストを入力して送信し、サングラスを装着した状態に修正されたスプライトシート画像を生成させます。

続いて、2種類目の敵キャラクターである暗殺忍者を生成します。Geminiの画面で、SFCレベルの2Dアクションのドット絵のピクセルスプライトシート、サイドビューのみ、他方向は不要、サイバーパンクの小さめの暗殺忍者、敵キャラクター、小さめキャラ、SDキャラ、描き込みすぎないように、赤いしのびの服、ジャンプ5コマ、ジャンプしながら切りかかる5コマ、ダッシュ7コマ、ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた、文字や枠はいらない、上記のモーション、各モーションに対応するフレームがあること、純白背景、と指定して送信します。動画で使ったAIへのメッセージは概要欄のページにアップしてある旨が表示されます。生成された画像を確認すると頭部に銀髪が見えていたため、これから作る背景と色が重なってしまうことを理由に全域を赤に変えるため、赤い頭巾をかぶっているので、顔と髪の毛は頭巾で隠れている、という追加指示を送信します。全体が赤色に変更された画像が生成され、これを保存します。

キャラクター画像が揃ったところで、画像切り抜き作業に入ります。ブラウザ上で動作する独自の切り抜きWebツールを開きます。このツールは過去の動画でも使用してきたもので、掲載ページは概要欄にあります。最初に、青い忍者のスプライトシートを切り抜きます。ファイルを選択ボタンから青い忍者の画像ファイルを読み込みます。そのままでは背景の白がゲームに映り込んでしまうため、ツール上部のマジック消しゴムを選択し、背景の白い部分をクリックして背景を透明の格子柄にします。続いて走るアニメーションの切り出しを行います。エリア選択ガイド機能を使用し、走る動作のエリアをドラッグして枠とマス目で囲みます。囲んだ部分をクリックして保存ボタンを押すことで、切り抜いた画像がバラバラに保存されます。次に攻撃である十字斬りのアニメーションを切り出します。剣の絵が重なっていて枠で囲むことができないため、自由選択ツールに切り替えます。手動で範囲選択を行い、1つずつ囲んでダウンロードしていきます。

次に、1種類目の敵であるヤクザの画像を切り抜きます。ツールに画像を読み込み、歩きポーズのエリアをガイド枠で囲みます。たくさん囲んでいますが実際に使うのはこの中の4枚だけであり、最低でも歩きは4枚、攻撃は2枚あればなんとかなるという解説が入ります。必要なコマを選択してダウンロードします。最後に、2種類目の敵である赤い忍者の画像を切り抜きます。赤い忍者の画像をツールに読み込み、画面上に超高速で切り分けていきますというテキストが表示される中、ジャンプ、ジャンプ攻撃、ダッシュなどの各アニメーションコマを素早く範囲選択して切り出し保存を完了させます。

キャラクターの切り抜きがすべて終わった後、ゲームの背景画像を作成するためChatGPTを開きます。画面上にはパワーポイントの絵という吹出し付きでビルの配置イメージ画像が表示されており、この画像をプロンプト入力欄にアタッチします。テキスト欄には、2D横スクロールのアクションゲームの背景、サイバーパンク風のビル、正面画像、ピクセルアート、と入力して送信します。今回は背景を切って使うためたくさん作ること、パワーポイントで作った画像を使って建物の並び方を絵で伝えること、テキストで2Dアクションの見ための画像であることを伝える旨が語られ、生成されたネオン街のドット絵背景画像を保存して画像準備の一連の工程が完了します。

ここからマップエディターの開発に入ります。Google CloudのPlaygroundを開き、Gemini 3.1 Pro Previewのモデルを選択します。プロンプト入力欄に、ピクセルタイルマップエディターを生成すること、という指示を入力し、左側をビューワー、右側をメニュータブとする画面構成や、画像の切り出し機能、レイヤー切り替え機能などを細かく指定して送信します。生成されたコードをダウンロードしてブラウザで実行します。初期状態のエディターを試すと、画像が小さいマス目に強制縮小されてしまう問題が発生します。そのため、左側のビューワーに展開した時にビューワーの拡大縮小ができ画面外に画像が隠れないように、画像を切り出した時または画像を貼り付けるときに切り出した大きさに最も近い大きさのタイルマップとして一気になるように気をつけて、という追加修正プロンプトを送信します。さらに、各3つのレイヤーで明度やコントラストの調整、レベル補正とトーンカーブの調整、Bloom発光効果の調整などができるよう機能追加を指示してプログラムを再生成させます。

新しくなったエディターをブラウザで開きます。背景画像を読み込み、枠で切り抜いたパーツを配置していきます。一番後ろの後景レイヤーには大きな街の画像を配置してレベル補正機能で全体を暗く設定します。中景レイヤーには分割したビルのパーツを配置します。一番前の前景レイヤーにはプレイヤーが移動できる足場や建物を配置して明るく補正し、どこを歩けるのか分かりやすくします。

次に、アクション部分のプロトタイププログラムを作成します。PlaygroundでGemini 3.1 Pro Previewを開き、忍者アクションゲームの基本動作の作成、ファミコンアクションへのこだわり動作、として慣性効果による滑らかな減速、しゃがみや攻撃時の硬直動作、しゃがみ判定、刀攻撃エフェクト、壁張り付きなどを指定し、HTMLファイルで出力させます。作成されたプログラムをブラウザで実行し、シンプルなブロックの画面で左右移動やジャンプ、刀攻撃、壁張り付きができることを確認します。

続いて、このプロトタイプとマップエディターを1つに統合する作業を行います。Playgroundで2つのコードファイルを添付し、添付したファイルの機能を組み合わせたコードを作成すること、マップエディットファイルの機能の削除は絶対に行わないこと、アニメタブを追加してプレイヤーや敵のアニメーション画像を設定できるようにすること、ゲームタブにテストプレイボタンを追加すること、といった指示を入力して送信します。生成された統合プログラムを開き、判定モードタブで足場の画像上に赤い矩形を描いて当たり判定を設定します。アニメタブで切り出しておいた各キャラクターの画像ファイルを割り当て、ゲームタブでマップ上にプレイヤーと敵を配置してテストプレイを開始します。しかし、停止時の設定が抜けており立ち止まっていても走り続けてしまう点や、壁登りアニメーションがない点などの課題が判明します。

最後の大規模修正を行います。PlaygroundでGemini 3.1 Pro Previewを開き、画像切り出しはパーツ単位で削除しないように、パーツ配置の時はグリッド間隔を調整できるように、レイヤーデータに当たり判定レイヤーを追加し前景の当たり判定を削除すること、絶対に機能を削除しないこと特にトーンカーブを削除しないように、といった非常に長い修正プロンプトを送信します。生成された最終プログラムを起動します。背景画像を読み込んでグリッドやスケールを調整して配置し、新設された当たり判定レイヤー機能でマウスドラッグによって精密な赤い当たり判定枠を設定していきます。キャラクター判定タブでは下部のアニメーションエディターを使ってコマの並び替えやサイズを調整します。すべての配置を終えてテストプレイを開始すると、ネオン看板が輝く街並みで当たり判定が正常に機能し、青い忍者がジャンプや攻撃、壁張り付きを行いながら敵と戦う本格的な2Dアクションゲームが完成して動画は終了します。

２つの添付したファイルの機能を合体させたコードを示せ
テストプレイ以外ではマップエディットファイルの機能で動作すること
//添付のマップエディットファイルの機能の削除は絶対に行わないこと
//右はマップエディットファイルのメニューはそのまま引き継ぐこと
//左はマップエディトファイルの動作をそのまま引き継ぐこと
//右の画像タブで読み込んだ画像の透過は読み込み後も保持され、マップエディットでも透過されること
//選択タブに画像を範囲選択消去ボタンを置くこと
//右のタブメニューにゲームとアニメのタブを追加すること
//アニメタブではプレイヤーと敵のアニメーションを追加できる
//プレイヤーのアニメーションは移動を4コマ、ジャンプ中を１コマ、刀で攻撃を４コマ、しゃがみを１コマ
//歩きのみの敵のアニメーションは歩き４コマ、パンチ２コマ
//銃攻撃の敵のアニメーションは歩き４コマ、銃２コマ
//ジャンプの敵のアニメーションは走り４コマ、ジャンプ中１コマが追加できるように
//それぞれのアニメは画像を読み込んだら、表示されるように
//前景は接触判定があり、中景、後景は当たり判定がないように
//アニメタブではそれぞれのキャラの画像の一括読み込みができる
//ゲームタブではプレイヤーの移動速度、ジャンプの高さ、攻撃範囲を調整できる
//敵の移動速度、ジャンプの高さを調整できる
//マップ全体の横幅を設定できる
//プレイヤーとそれぞれの敵の配置ボタンがある
//ゲームタブにテストプレイボタンがある
//テストプレイでは添付したアクションファイルの動作でキャラクターが動くこと
//テストプレイでは壁に張り付いている時に、十字キーでキャラクターは動くことのないようにする

ピクセルタイルマップエディターを生成すること
//右側が開閉式のメニューでありメニュータブがならんでいる
//左側がビューワーであり、ピクセルタイルを置くことができる
//右側タブメニューについて（画像タブ、画像選択タブ、レイヤータブに分かれている）
//画像タブでは、画像の読み込みボタンと画像の切り出しボタンがある、画像を読み込むと左のビューワ画面が画像切り出しビューに切り替わり切り出しを行うと通常のビューワーに戻る（切り出しはドラッグで範囲指定の他、数値でワクの大きさを指定することもできる）
//画像選択タブでは画像タブで切り出した画像を画像として見ることができる、また画像をクリックしてビューワーをクリックするとタイルとして置くことができる
//レイヤータブでは前景、中景、後景を切り替えることができる

FC忍者龍剣伝のような2D横スクロールアクションゲーム

//ジャンプ、移動、刀で攻撃、壁に張り付きができる

//下キーでしゃがみがあるように 壁は張り付いたらキーをはなしてもおちないように



//左側のビューワーに展開した時にビューワの拡大縮小ができ、画面外に画像が隠れないように

//画像を切り出した時、または画像を貼り付けるときに切り出した大きさに最も近い大きさのタイルマップとして一気にはりつくように


各3枚のレイヤーで以下のことが調整できるように

//明度、コントラストの調整
//レベル補正とトーンカーブの調整
//ブラー：ぼかし半径（Radius）の調整
//Bloom（発光）：閾値（Threshold）および発光強度（Intensity/Radius）の調整
//レイヤーごとの不透明度（Opacity：0～100%）および描画モード（Normal, Multiply, Additive/Screen 等）の変更



忍者龍剣伝のリュウハヤブサのような2Dアクションのピクセルスプライトシート 
//服は少し明るい青色

//刀を横振りしている（手前の腰から左手の片手で刀を抜き、上に向かって切り上げる、最後は奥の肩以上に剣先が上がっている状態で腕が伸びきった状態）（（5コマ） 
//手裏剣を奥の方の片手で横投げしている（5コマ） 
//走っている（5コマ）
//ジャンプしている（5コマ）
//しゃがんでいる（2コマ）
//ダメージを受けている(4コマ)
//ペルソナのゲームにインスパイアされた

ではさっそくプレイヤー画像を作っていきます
今回はGeminiを使います
AIに立ち姿やしゃがみなどアクションゲームに必要な動きを伝えます
するとゲームで使えそうなキャラクター画像ができました
続いて敵キャラクターを作ります
敵の特徴をAIに伝えて画像を作ります
キャラクターはできましたが少しおとなしい感じがします
そこでサングラスをかけるようにAIへ指示します
するとサングラスをかけた敵キャラクターができました
次は敵の忍者を作ります
忍者の特徴をAIに伝えて画像を作ります
こちらもしっかりキャラクターができました
ただ髪の毛の色がこれから作る背景と重なりそうです
そこで髪の毛をすべて赤に変更します
AIに指示すると髪の毛がすべて赤になりました
あまり忍びという感じはしませんが敵っぽいので今回はこれで進めます
キャラクターがそろったので次はゲームで使う画像に切り出します
一枚の画像からキャラクターの動きごとに画像を分けていきます
今回はこれまでの動画でも使ってきた切り抜きツールを使います
掲載ページはこの記事の中で紹介しています
まずプレイヤーの画像から切り出します
元の画像には白い背景があります
このままだとゲーム画面にも白い部分が出てしまいます
そこでマジック消しゴムを使います
白い背景を透明にします
次に走るアニメーションの画像を切り出します
必要な部分をワクで囲みます
囲んだ部分をクリックして保存します
これをくり返して一枚ずつ画像を作ります
次は攻撃アニメーションを切り出します
ここでは剣の画像が重なっています
そのため普通のワクではうまく囲めません
そこで自由選択ツールを使います
必要な部分を囲んで範囲を選択します
そして一枚ずつ保存していきます
続いて敵キャラクターの準備をします
同じように歩きの画像をワクで囲みます
ここでAIを使ってキャラクターを作る時の問題があります
AIは一枚の画像を作るのはかなり得意です
しかし歩いている時の足が重なった画像は苦手です
歩きのアニメーションではこうした画像も必要になります
そのためAIが作った画像を一枚ずつ確認することが大切です
キャラクターの切り出しが終わったので次は背景を作ります
今回はPowerPointを使って建物の並び方を簡単な絵にします
この画像をAIに見せます
さらに2Dアクションゲームの背景として使う画像だと伝えます
すると2Dアクションゲームらしい背景ができました
次はこの背景をゲームの舞台として使うためのエディタを作ります
ここでもAIを使います
エディタの見た目や必要な機能を文章で伝えます
するとAIがプログラムを作り始めます
完成したので起動してみます
画像を置くことはできます
ただ最初は画像を並べるだけのエディタになっています
そこでさらにAIへ修正をお願いします
画像そのものを置けるようにします
そしてキャンバスを拡大したり縮小したりできるようにします
修正されたエディタを試してみます
画像をそのまま置けるようになりました
画像の順番も使えるようになりました
これで複数の画像を組み合わせてゲームの背景を作れます
しかしまだ問題があります
このままだとどこが足場なのか分かりにくいです
一枚の絵のように見えてしまいます
そこで明るさを調整できるようにAIへ指示します
レベル補正も使えるようにします
完成したものを試してみます
背景の明るさを調整できるようになりました
かなり2Dアクションゲームの背景らしくなりました
では次にゲーム本体を作ります
AIに2Dアクションゲームのイメージを伝えます
そしてゲームのプログラムを作ってもらいます
まずは基本的な動きだけを作ります
歩くことができます
ジャンプもできます
壁ジャンプもできます
最低限の動きができるゲームが完成しました
ただこのままでは見た目がさみしいです
そこで先ほど作った画像エディタと合体させます
二つのプログラムをAIに渡します
そしてエディタでアニメーションを設定できるようにします
アクション部分の調整もできるようにします
細かい機能をAIに伝えていきます
この時に使った文章はかなり長くなりました
そのためこの記事から確認できるようにしています
AIがかなり長いプログラムを作りました
さっそく動かしてみます
しっかりキャラクターが動きます
ただ止まっている時のアニメーション設定を忘れていました
そのため立ち止まっていても走り続けています
キャラクターの大きさも少し小さいです
壁登りはできます
しかし壁登りのアニメーションがありません
ゲーム全体の形はできてきました
ただまだ調整する部分がたくさんあります
そこでAIにプログラムを修正してもらいます
ここで大切なのが元の機能を消さないことです
プログラムが長くなるとAIが新しい機能を追加する時に元の機能を消してしまうことがあります
そのため新しい機能を追加しても元の機能は残すように伝えます
修正が終わったので実際にゲームを起動します
まず背景を読み込みます
ここでゲームの舞台を作っていきます
背景を設定したら次は当たり判定を設定します
Unityのように地面や壁に当たり判定を設定します
これでキャラクターがどこを歩けるのか決められます
続いてキャラクターを読み込みます
プレイヤーと敵を配置します
それぞれのアニメーションも設定します
画面の下にはアニメーションエディタを作りました
ここでアニメーションの動きや画像の順番を変えられます
各キャラクターの設定が終わったらゲームをプレイします
背景を読み込みます
プレイヤーを配置します
敵キャラクターも配置します
実際に動かしてみるとしっかりゲームとして動きました
まだ当たり判定や細かい部分には調整が必要です
それでも短い時間で忍者風の2Dアクションゲームの形を作ることができました
今回のゲーム制作ではAIに一度ですべてを作らせてはいません
キャラクターを作ります
その画像をゲーム用に切り出します
次に背景を作ります
そして背景を置くためのエディタを作ります
そのあとゲームの基本部分を作ります
最後にそれぞれを一つにまとめます
このように少しずつ作っていくことでAIを使ったゲーム制作ができます
特にプログラムが長くなってきた時は注意が必要です
新しい機能を追加する時に元の機能が消えることがあります
そのため今ある機能を残したまま新しい機能を追加するようにAIへ伝えることが重要です
今回作ったゲームはまだ完成品ではありません
当たり判定にも調整が必要です
アニメーションにも直したい部分があります
それでもAIを使うことで短い時間でゲームの形を作ることができました
キャラクターをAIで作ることができます
背景もAIで作ることができます
ゲームのプログラムもAIで作ることができます
さらにゲームを作るためのエディタまでAIに作ってもらうことができます
AIを使えばゲーム制作の最初のハードルをかなり下げることができます
このブログではこれからもAIを使ったゲームの作り方を紹介していきます
AIを使ってゲームを作ってみたい人はぜひ参考にしてみてください
ここまでご覧いただきありがとうございました