「AIをつかったプログラミングに興味がある」

「奥行きのある2Dゲームやベルトスクロールアクションを作ってみたい！」

・・・でも、何からやればいいかわからない！

となやんでいませんか？

こんにちは！

この記事では、AIを使った「2.5D横スクロールアクションゲーム（ベルトスクロールアクション）」の作り方を紹介します。

今回はゲーム制作の第一歩として、ゲームの背景となる3Dボクセルを作成していく手順を解説します。プログラミング未経験の方でもスムーズに進められる内容になっているので、ぜひ一緒にチャレンジしてみてください！

※動画でも実際の作業風景を紹介していますので、あわせてご覧ください。

まずはGoogle AI Studioで背景用のプログラムを作成

さっそくAIを使って、ゲームの土台となるプログラムをつくります！

プログラムを生成しやすい「Google AI Studio」のサイトに移動します。

まずは、背景用の3Dボクセルを配置・編集するためのプログラムをAIに生成してもらいましょう。

AIがプログラムの生成を完了したら、ファイルをダウンロードしておきます。

これで背景エディタの土台ができました。さっそく実行したいところですが……貼り付けるための「背景用の画像」がまだありません。

次は画像生成AIを使って、背景の素材を作っていきます。

背景用の建物の画像をAIで生成する

背景用の画像は、以下の2つを組み合わせて生成します。

1. パワーポイントで作った大まかなイメージ図
2. AIへのテキストの命令文（プロンプト）

今回はAIに以下のような指示を追加して生成を実行します。

\HTML1ファイル
\ボクセルエディタ
\ボクセルに添付ファイルのような画像を読み込みテクスチャーとして貼り付けられる
\マップビューではクリックでボクセルをマップに何個でも置くことができ、ボクセルクリックで消すことができる
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとボクセル配置モードで切り替えられるように
\画像ドラッグ添付ファイルの画像を矩形選択で画像を部分選択してボクセルに貼れる
\画像をドラッグして矩形選択する時に展開する画像は全体表示されるように
\メニューはタブで、「ボクセルの画像選択」、「ボクセルの調整」、「空の調整」がある
\ボクセル配置はグリッド線にスナップするため、グリッド線にそってしか置くことができない
\空の調整はタイムオブデイ・システムで
\ボクセルの調整タブではボクセルの高さ幅、明るさを調整できる

生成を実行すると、しっかりとした建物の正面画像が完成しました！

この完成した画像を、先ほどのプログラムで作った「3Dキューブ（ボクセル）」の表面に貼り付けて、立体的な背景を作っていきます。

プログラムを実行して3D背景を組み立てる

それでは、ダウンロードしたプログラムを実行してみましょう！

まずは、ゲームの背景として違和感が出ないように、3Dボクセルの大きさをしっかりと調整します。

次に、以下の手順で作業を進めます。

1. 先ほど生成した「建物の画像」をプログラムに読み込みます。
2. 読み込んだ画像を、3Dボクセル用のテクスチャ（表面の絵）として指定します。
3. エディタを「ボクセル配置モード」に切り替えます。
4. 画面上にクリックしてボクセルを置いてみます。

すると……！

しっかり、先ほどAIでつくった建物の画像が3Dのブロックとなって画面にあらわれました。

アクション部分のプログラムを作成する

続いては、いよいよゲームの核となる「アクション部分」のプログラムを作っていきます！

2Dベルトスクロールアクションならではの特徴（奥行きへの移動や攻撃の挙動など）をしっかりと盛り込んだ指示（プロンプト）を作成し、AIにメッセージを送信します。

次のとおりAIにメッセージを伝えます

\HTML1ファイル
\2D横スクロールベルトロールアクション
\テストプレイボタンでプレイできる
\マップビューではクリックで敵キャラ、プレイヤー開始位置を置くことができ、クリックで消すことができる
\マップビューでプレイヤーが歩ける場所はピンクで表示されている
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとキャラ配置モードで切り替えられるように
\新規敵キャラをつくることができ、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、を敵ごとに割り当てられる
\プレイヤータブでは、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、待機1コマを敵ごとに割り当てられる
\ゲーム基本設定タブでは、カメラ位置を角度、高さプレイヤーからの距離を調整できる
\メニューはタブで、「画像読み込み」、「敵キャラ」、「プレイヤー」「ゲーム基本設定」がある
\カメラは手前・奥には動かない、プレイヤーもカメラ手前以上は手前に移動できない

数秒待つと……無事にプログラムの生成が終わりました！

さっそく動かしてプレイしたいところですが、肝心の「キャラクターの絵」がまだありません。そこで次は、キャラクターの画像を作っていきます。

Geminiを使って主人公の2Dスプライトシートを作成

今回は画像生成AI（Gemini）を使って、ゲーム用の「2Dスプライトシート（キャラクターのアニメーション用画像セット）」を作るための命令文を書いていきます。

デザインが野暮ったくならないように、キャラクターの見た目の特徴やテイストをしっかりと指定してGeminiにメッセージを送信します

次のとおりAIにつたえます

すると、すぐに立派なスプライトシートができあがりました！

……が、少し悪役っぽい雰囲気になってしまったので、主人公らしくなるようにプロンプトを微調整します。

何度か調整を重ねることで、しっかりと主人公キャラクターが仕上がりました！

敵キャラクターの生成とダメージパターンの修正

主人公が完成したら、次は敵キャラを作っていきたいと思います

ゲーム画面で区別がつきやすいように、主人公と見た目や特徴がかぶらないキャラクターを指定して生成を実行します

こちらもベースとなるスプライトシートはしっかり生成できました！

ただ、よく確認すると「ダメージを受けた時のアニメーションパターン」で少し不足している部分があったため、その部分だけ追加で修正を行います

微調整が終われば、敵キャラクターもバッチリ完成です！

2体目となる新しい敵キャラクターを作成！

ゲームをさらに盛り上げるため、続いてもう一体の敵キャラクターを作っていきます。

これまでに作成した主人公や1体目の敵キャラクターと見た目や役割がかぶらないように、しっかりと特徴を分けたメッセージ（プロンプト）を作成し、AIに送信します。

しばらくしてベースとなるスプライトシートが無事に生成されました！

……が、全体的にのっぺりとしていてメリハリがない印象になってしまいました。ゲームの背景に埋もれてしまわないように、キャラクターの「色」を中心にプロンプトを調整し、パキッとしたメリハリがつくように修正の指示を出します。

この色の調整が上手くはまり、2体目の敵キャラクターのスプライトシートもしっかりと完成しました！

アニメーション用に画像を分割！……しかし問題が

キャラクターの画像が出揃ったところで、次はゲーム内でパラパラ漫画のように動かすため、スプライトシートを1コマずつアニメーション用に分割していく作業に入ります。

しかし、ここで一つ問題が発生します。今回はアクションゲームということもありパターンの量がかなり多く、これまで使っていた画像切り抜きツール（Photoroomなど）を使って手作業で処理していくと、どうしても時間がかかりすぎてしまいます。

「それなら、自分の作業に特化した便利なツールを自分で作ってしまおう！」ということで、急遽オリジナルの画像分割ツールを作ることにしました。

Google AI Studioで「キャラ分割ツール」を自作！

再びGoogle AI Studioを開き、AIに「キャラクター分割ツール」を作るための要望を伝えていきます。

今回の分割作業を劇的に効率化するため、背景をサクッと透明にできる「マジック消しゴム機能」と、直感的に画像を切り分けられる「分割線の機能」をツールに組み込むようメッセージを書き、AIに送信します。

数秒後……あっという間にオリジナルツールのプログラムが完成しました！

さっそく完成したツールを立ち上げ、先ほどのキャラクター画像を読み込みます。画面上でクリックしながら分割線をポンポンと置いていき、画像を切り抜くための枠（ワク）を作って分割していきます。自作ツールのおかげで、面倒だった分割作業もサクサクと快適に進められるようになりました！

マジック消しゴムで背景を透過＆画像のダウンロード！

自作の分割ツールで画像を切り抜く枠を作りましたが、このままでは画像の背景が白色のまま残ってしまいます。そこで、ツールに組み込んでおいた「マジック消しゴム機能」の出番です！

ポチッと処理をかけると、しっかりと背景が透過（透明に）されました。あとは必要なキャラクターの画像だけを選択して、サクッとダウンロードします。

主人公と同じ手順で、敵キャラクターの画像も枠でくくって分割し、ダウンロードしていきます。一回の分割作業で取り切れなかった「歩き」のアニメーション画像も、再度しっかりと切り分けておきます。

これで、キャラクターを動かすためのアニメーション画像の準備はバッチリ完了です！

エディタに画像を読み込んでアニメーションを設定

素材の準備がすべて整ったので、いよいよ最初の方で作った「アクション部分のプログラム（エディタ）」を使って、テストプレイに向けて組み込んでいきたいと思います。

1. 画像の読み込み: 先ほど透過・分割したキャラクターの画像をエディタに読み込ませます。
2. プレイヤーの設定: 読み込んだ画像を、プレイヤーの「待機」「歩き」「攻撃」「ダメージ」などの各アニメーションに割り当てていきます。
3. 敵キャラの設定: 続いて敵キャラクターにも同じようにアニメーションを割り当てていきます。

……と、ここで一つ問題を発見しました。敵の「歩き」アニメーションがなぜか2コマしか設定できない状態になっています。これはプログラムのバグのようですが、まずはゲームとして動かすことを優先し、次のステップでまとめて修正することにします。

一通り準備ができたので、いざテストプレイ！

テストプレイで発覚したバグをAIで一気に修正！

実際に動かしてみると、一応キャラクターを操作して動かすことはできました。しかし、いくつか致命的な不具合（バグ）が発生してしまいました。

• 立体感がない: キャラクターが背景の奥行きになじまず、まるで手前の平面ガラスに張り付いたような見え方になっている。
• 敵が動かない: 配置した敵キャラクターが棒立ちのまま、まったく動いてくれない。
• 向きが変わらない: プレイヤーを左右に移動させても、キャラクターのグラフィックが方向転換（左右反転）しない。

せっかくの2Dベルトスクロールアクションなので、これではゲームとして成り立ちません。しっかりと想定通りに動作するように、AIにプログラムの修正をお願いしたいと思います。

上記の発生している不具合を直すためのメッセージを作成します。さらに、キャラクターの絵が拡大されてボヤケてしまう問題を防ぐため、ドット絵をくっきりと表示させる「ニアレストネイバー補間」をプログラムに適用してほしいという指示もしっかりと盛り込み、AIに送信します。

数秒後……無事に修正版のプログラムが完成しました！

バグが直っているかどうか、もう一度テストプレイで確認してみたいと思います！

エディタに画像を再読み込み！ジャンプアクションも追加

AIにプログラムを修正してもらったので、改めて画像を読み込み、キャラクターにアニメーションを割り当てていきます。

今回は待機や攻撃といった基本の動きに加えて、アクションゲームに欠かせない「ジャンプ」のモーションも新たに追加しました！

続いて、敵キャラクターにもアニメーションを設定していきます。

先ほど発生していた「歩きアニメーションが2コマしか設定できない」というバグも無事に修正されており、しっかりと4枚の画像を使って滑らかな歩きアニメーションを作れるようになりました。

これでキャラクターを動かす準備は完璧です。さっそく、修正版のエディタでテストプレイをしてみます！

テストプレイ成功！……しかし、まだ物足りない？

実際に動かしてみると……今度はキャラクターがしっかりと背景になじみ、方向転換もバッチリです！敵キャラクターも、プレイヤーを認識してしっかりとこちらに向かって歩いてくるようになりました。

基本的な動作としては大成功です！……が、実際にプレイしてみると、カメラの視点がまだ遠く、キャラクターの動きや手触り（ゲームフィール）もイマイチな印象を受けます。

そこで、ここまで別々に作ってきたシステムを統合し、一気に本格的なゲームへと仕上げていくことにしました！

3D背景とアクションのプログラムをドッキング！

ここで、この記事の最初で作った「3Dボクセルの背景プログラム」と、現在いじっている「2Dアクションのプログラム」の2つを合体させます！

再びGoogle AI Studioを開き、これら2つのプログラムファイルを同時にアップロードします。ただ単に合体させるだけではなく、アクションゲームとしての完成度を高めるために、以下の要素を盛り込んだメッセージを作成します。

• 2つのプログラムの機能を完全に合体（ドッキング）させること
• 攻撃が当たった時の爽快感を生む「ヒットストップ（攻撃ヒット時に一瞬画面が止まる演出）」を追加すること
• 攻撃やダメージが正確に処理されるように「当たり判定」をしっかりと組み込むこと

これらのアクションゲームにおいて非常に重要な要望をプロンプトに詰め込み、AIに送信します！

プレイ開始

2つの全く異なるプログラムの統合という複雑なお願いでしたが、処理が終わるのを待つと……見事に合体版のプログラムが完成しました！

3Dの立体的な背景と、2Dのキャラクターアクションが一つになり、さらにヒットストップなどの「ゲームらしい手触り」が加わった究極のエディタ。さっそくこの完成したプログラムを読み込んで、実際にプレイしてみたいと思います！

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

こんにちは！

この記事では、これまでのやり方からさらにバージョンアップしたAIでアドベンチャーゲームをつくる方法を紹介します

これまでノベルゲームの作り方は紹介しましたが

AIが進歩したことで、さらに簡単に、もっと高度なゲームがつくれるようになりました

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

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます（予定）

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

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

今回この記事で紹介したゲームのプログラムです

今回つくるアドベンチャーゲームの流れ

今回の動画と記事の流れは、AIにいきなりゲームの完成品をつくらせるのではなく、

「微調整がやりやすいゲームエディタ」をHTML1ファイルで作り、

そこから少しずつゲームを完成に近づけていくスタイルです

プログラミング未経験者でも挫折しにくい作り方です

ではさっそくAIプログラミングをはじめます！

まずはゲームエディタをAIで生成する

GoogleAI Studioにアクセスして、

AIにメッセージと画像をアップロードします

前回のAIプログラミングと同じように、

自動でプログラムがつくりやすい「Google AI Studio」のサイトに移動します

メッセージボックスに、以下のプロンプトと画像を一緒に入力します

次の通りのノベルゲームエディタをHTML1ファイルで生成して ユーザインタフェースは添付ファイルを参考につくって

【UI構造】

1. ヘッダー: 「プロジェクト保存」「テストプレイ（本当にプレイできる）」ボタン
2. メイン（3カラム）:
   • 左: マッププレビュー。背景画像を設定できる
   • 中: イベントリスト。新規作成ボタンと、作成済みイベント（トリガー名、コマンド数、編集/削除ボタン）を表示
   • 右: 「アイテムリスト」と「スイッチ（フラグ）リスト」がつくれる

【イベント編集モーダル】 イベント新規作成/編集時に次が設定できる

• イベント名
• イベントがはじまる（トリガー）設定: a) シーン開始時 b) マップクリック（マップ上で指定した範囲をクリックするとはじまる） c) スイッチON時
• コマンドリスト:
  • メッセージ表示
  • 背景変更
  • 画像変更
  • キャラクター表示/非表示
  • スイッチのON/OFF
  • アイテム取得/使う
  • 条件分岐（スイッチやアイテムの状況による分岐）

AIへメッセージと一緒に渡した画像です

AIのバージョンアップにより、画像を添付することで画面レイアウトが、とても高い再現度で作れるようになりました！
　　

ゲームエディタのプログラムの生成が終わったら、ダウンロードボタンをクリックしてHTMLファイルを保存します

エディタを起動してテストプレイ

つくったエディターのプログラムです

背景用の画像をよみこみました

ダウンロードしたファイルを実行すると、すぐにエディタ画面が現れました

さっそく背景画像を読み込みます

これまで作った画像を入れてみましたが、しっかりと画面に現れました

イベントをつくり、物語を作ることができます

次に、イベントを追加します

あらかじめ用意したメッセージを入力しました

テストプレイすると背景画像にテキストがあらわれました

テキストは進めることができます

準備ができたのでテストプレイをしてみます

しっかりメッセージがあらわれる、ノベルゲームの基本の動きができあがりました！

ここまでのまとめ

AIにレイアウト画像を読み込ませるだけで、あっという間にアドベンチャーゲーム開発用の「土台（エディタ）」を作ることができました

ここから先は、このエディタに「キャラクターの絵」や「背景画像」をどんどん追加して、本格的なゲームに仕上げていきます

素材をつくる！AIを使い分けて背景とキャラを生成する

ChatGPTで「ピクセルアート」の背景を作る

ChatGPTでゲーム背景をつくることをつたえます

ゲームの「土台（エディタ）」ができたら、次はそこに命を吹き込む背景とキャラクターが必要です

今回は、それぞれの得意分野に合わせて複数のAIを使い分け、一気に素材を揃えていきます

まずはゲームの舞台となる背景画像から作っていきます

背景画像の生成、特にドット絵（ピクセルアート）が得意なChatGPTのサイトへ移動しましょう

メッセージに次のことを伝えて生成します

アドベンチャーゲーム用の背景画像、ボロボロだけどおしゃれなめちゃめちゃ散らかったゴーストがでそうな部屋の画像 ピクセル画像で

ミステリアスな背景が完成しました

しっかりとアドベンチャーゲームの空気感を持った、味のある背景画像が生成されました

これをダウンロードして保存します

Sea Artでキャラクターのイラストを作る

キャラクターのタッチをコントロールしやすいSeaArtのサイトをつかいます

>>「SeaArt AI」のサイト

次に、ゲームの主役となるキャラクターを作ります

絵のタッチを細かくコントロールできるSea Artというサイトで、キャラクターの絵を生成します

モデルを決めて、キャラクターの特徴をつたえて生成します

今回は後がやりやすいように、次の通りAIにメッセージをつたえます

白い短い巻き毛のエルフ、大きく口を開けた可愛い笑顔、背景は白、男の子

今回はこのキャラクターをつかいたいと思います

しっかりクオリティの高いキャラクター画像が生成できました

1人のキャラクターのいろいろな表情をつくる

キャラクターのイラストから色々な表情をつくります

次は同じキャラクターの「怒った顔」や「悲しい顔」などの表情をつくります

今回は、パターン絵がつくりやすい、Google Geminiでつくります

生成したキャラクターをアップロードして、次の指示を出して表情を一度につくります

このキャラのスプライトシートをつくってほしい
中には４パターン、、笑顔を右上、驚いている顔を左上、笑っている顔を右下、怒っている顔を左下に、添付画像のように角度をつけて
画面に４体のみ（上半身のみ）
背景は透過で生成してほしい

しっかり、同じキャラクターの別々の顔が4パターン完成しました

同じキャラクターでそれぞれの表情のスプライトシートができました

しかし、カバンをもっているのでカバンを消します

黒のバックをなくすことをAIにつたえます

しっかりカバンのないキャラクターのみのスプライトシートが生成できました

探偵キャラを「ChatGPT」で直接生成する

日本風のかわいい動物キャラがつくりやすい「ChatGPT」をつかいます

続いて、物語の主役となる「探偵キャラクター」を作っていきます

今回はChatGPTを使い、最初から「表情のバリエーション」と「キャラクターの特徴」をセットで指示して生成します

AIの進化により、一度の指示で複数の表情を並べた画像（スプライトシート形式）を、高いクオリティで描き分けてくれるようになっています

次のとおりメッセージをつたえます

アドベンチャーゲーム用に日本のアニメキャラ風のSDキャラのシャーロックホームズ探偵風薄い青い色の猫、青い目（赤い蝶ネクタイ）のスプライトシートを生成して、笑顔を右上、驚いている顔を左上、笑っている顔を右下、怒っている顔を左下に 画面に4体のみ（上半身のみ）、

エフェクトは入れないで

背景は透過で生成してほしい

表情を分けてキャラクターをつくることができました

しかし、すべて青色になってしまいました

表情をしっかり分けてキャラクターをつくることができましたが、すべて青色です

キャラクターの色を変えて、メリハリをつけたいと思います

次のとおりAIにメッセージをつたえます

「猫の色はこのままでいいが、コートと帽子はよくある探偵っぽい色にしてほしい」

しっかりキャラクターをつくることができました

Photoroomで背景透過とサイズ調整

背景を消すことができるサイトにアクセスします

>> 「Photoroom」のサイト

生成した画像は背景を透明にして、キャラクターを一つ一つ分ける必要があります

今回は「Photoroom」という背景をAIで消すことができるサイトをつかいます

アップロードしただけで自動で背景を透明にしてくれました

ここからキャラクターを分けます

画像をアップロードするだけでAIが自動的にキャラクターを判断して、背景を一瞬で透明にしてくれます

背景が消えたら、一枚の画像にまとまっている表情をそれぞれ別の画像として分ける作業に入ります

画面にある切り抜き編集ボタンから手動モードを選択します

消しゴムのような感覚で使えるブラシツールを使って、切り出したい表情以外の部分を消していきます

ブラシサイズを調整してキレイに消します

表情を分けることができましたが、スペースが大きくできてしまいました

このままではキャンバスのサイズが大きすぎるのでキャンバスのサイズを変更します

横幅500にして、サイズを変更します

「サイズ変更ボタン」をクリックして、ゲーム用にキャンバスの横幅を500ピクセルに設定します

位置を整えてダウンロードします

サイズを変更したら、キャラクターがキャンバスの中央に配置されるように位置を調整し、ダウンロードします

つくったキャラクターすべて同じ方法で切り分けます

一つの表情の画像が完成したら、残りの表情パターンについてもまったく同じ手順を繰り返します

それぞれの表情だけを残すように手動で切り抜き編集を行います

サイズと位置を整えたら一つ一つダウンロードしていきます

別のキャラクターも同じ方法で切り分けてダウンロードします

別の素材として用意した「猫の探偵」のキャラクターイラストについても、同じ切り分け作業をします

ゲーム内で表情を切り替えたときにサイズがバラバラで違和感が出ないようにします

キャンバスサイズを横幅500ピクセルに揃えることが、ゲーム全体のクオリティを高めるための重要なポイントです

プロンプトの再利用で「絵のタッチ」を統一する

次は冒険に欠かせない「アイテム素材」を準備していきます

ゲーム制作で大切な、背景・キャラ・アイテムの雰囲気がバラバラにならないようにします

今回はUSBメモリや日記、ライターなどを作っていきます

背景画像を生成した時の絵をベースにして、「USBメモリ」や「日記」といったキーワードを入れ替えてAIに指示を出します

こうすることで、同じ世界観のアイテムを違和感なくそろえることができます

次のようにAIにメッセージをつたえます

この背景画像に合うライター、USBメモリー、ペンダント、鍵、日記、をスプライトシートで生成してほしい

気になる部分はAIに直接「リテイク」を出す

しっかり画像が生成できました

さらにアイテムっぽくなるように修正します

AIが生成した「ライター」の画像は最初から火がついた状態でした

「ポケットに入れて持ち運ぶアイテム」として火がついているのは少し不自然です

AIに直接「ライターの火を消して」と伝えるだけで、そのままの形で希望通りに修正してくれます

次のとおりAIにメッセージを伝えます

ライターは火を消して、USBは普通のUSBで紫色（ボロボロな感じ）、日記はどくろマークを消してほしい

しっかり修正することができました

Photoroomでゲーム用素材へ仕上げる

一つ一つ切り分けます

アイテムの画像も、キャラクターの時と同じように背景を消してゲーム用に仕上げていきます

まずは画像をアップロードして、アイテムを一つ一つ切り分けていきます

このアイテムもキャンバスのサイズをキャラと同じ「500」に合わせて、ゲームに読み込んだときにサイズがキレイにそろうようにします

続いて、USBメモリなど他のアイテムも同じように分割していきます

これで必要な画像がすべて揃いました！

次はプログラムを作り直して、いよいよアイテムをゲームに登場させます

プログラムを再構築して、ゲームを高度化する！

まずバグを修正するメッセージをつたえます

素材がすべて揃ったので、いよいよこれらを動かすためのプログラムをAIに作り直してもらいます

１回目はバグ修正、２回目は機能追加の２段階でつくりなおします

次の通りAIにメッセージを伝えます

マッププレビュー画面で背景がすべて表示されないので、表示されるように

画像タブ、人物タブをアイテムタブ、スイッチタブの部分につくって

人物タブでは人物を登録できるように、人物画像は普通、笑い、怒り、驚き、が登録できるように
画像タブでは画像を一括で管理できるように、背景画像以外はここで管理する

人物タブで人物の位置を左の時、右の時でマッププレビューでＸＹ、大きさのスライダーを動かして
変更できるように、調整する時はキャラの画像が表示された状態でできるように

イベントトリガーのマップクリックのドラッグができない
イベントをつくると再度編集できないので編集できるように

常にゲーム画面右にアイテム一覧があるように、アイテムは画像と名前が表示されている
アイテムを使うときはアイテム一覧が少し明るくなるように

コマンドの追加画面を大きくして
メッセージコマンドに他のコマンドのマクロボタンをすべて追加して
ただマクロにしたコマンドは必ずコマンド追加画面からも追加できるようにして

メッセージで#nextで次の画面にいく仕様にプラスして、#　を打つと登録されている人物の名前が表示されて、#nextと同じように次のメッセージ画面にうつり、メッセージ左上に話している人物の名前が出るようにして
メッセージの中で「#use」でアイテムを使うコマンドができるようにして

メッセージコマンドでマクロをテキスト打ちしたらゲームが完結するように
メッセージコマンドをつくってほしい

１回目でつくったプログラムも添付してメッセージを送信します

今回はAIに以下の高度な機能をリクエストしました：
・ストーリー用マクロ: AIが物語を自動で組み立てやすくする仕組み
・クリックイベント: 画像をクリックするとイベントが発生する処理
・アイテム一覧（インベントリ）: 拾ったアイテムを確認できるメニュー
・名前表示機能: メッセージウィンドウに誰のセリフか表示する機能

次のとおりAIにメッセージを伝えます

背景は初期状態は設定した背景を表示するように
人物が表示されている時は必ずメッセージウィンドウを表示して
メッセージウィンドウ左上の名前はメッセージウィンドウから飛び出ず、
少し太字になるくらいでメッセージウィンドウの左上にでるように
別のキャラメッセージになったらメッセージページが変わるように

人物画像の位置調整の時に画像左右反転を入れて

アイテム一覧はメッセージウィンドウと同じような色で縦長で
常にゲーム画面右側メッセージウィンドウのとなりにあるように（画像アイコンつき）
アイテム一覧とキャラはかぶらないように

画像は複数選択で追加できるように

Javascriptデフォルトのメッセージポップアップは極力出さないように

メッセージをエンターキーでおくれるように
マクロでアイテムを追加する時にキャラ表示と同じように
プルダウンで選択できるように

スイッチはON,OFFではなく、変数のように数字を入れられるように

コマンドリストはクリックで再度編集できるように

マップクリックイベントをつくるとき、マップをドラッグして領域指定ができない
イベントのトリガーに
変数自動実行（変数条件）を加えて
また、マップクリックは画像クリックでも発生できるように
そして画像は人物と同じように拡大と配置ができるように
（画像クリックをマップに配置する時にはコマンドウィンドウを消し、マップが広く見れるように
）
会話で選択肢が選べるように
イベント一覧の部分にシーンタブとイベント一覧タブをつくり、
シーンによってイベント一覧と背景画像が切り替わるように
メッセージコマンドでAIがメッセージ（マクロつき）を生成できるように
AI生成用の入力、出力ボタンを追加して（出力ファイルをＡＩに投げるとマクロの説明それまでのＩＤなどがＡＩにわたり、ストーリーを自動生成できるように）

「AI用ボタン」でGeminiにストーリーを作らせる

生成された新しいプログラムをダウンロードして実行してゲーム画面を立ち上げます

画像の追加も、一度に複数のファイルを読み込めるようになり、開発効率が劇的にアップしています

生成ボタンをクリックして、AIが新しく作り直してくれたプログラムをダウンロードし、さっそく実行してみます

新しいエディタでは、画像を追加する際に一度に複数の画像をまとめて読み込めるようになりました！

これで素材登録の手間が省け、開発スピードがさらにアップします

素材を読み込んだら、画面を作っていきましょう

まずはそれぞれの人物キャラクターを作成し、表情（差分）を割り当てていきます

その後、作成しておいた背景画像を読み込んで表示させます

背景に合わせて、キャラクターの大きさや立ち位置をそれぞれ微調整して、自然な画面レイアウトに仕上げていきます

背景とキャラの配置が終わったら、アイテムもそれぞれ登録して、いよいよ「イベント」を作っていきます

メッセージウィンドウに、新しく作った「AI生成用メッセージコピーボタン」が追加されています

このボタンをクリックすると、AIが自動でストーリーを生成するためのテキストデータがコピーできます

コピーした内容をそのままGoogle Geminiのテキストボックスに貼り付けて、ストーリーの生成をお願いします

すると、生成ボタンをクリックするだけで、Geminiがゲーム内で動くマクロ（表情変化などの命令）付きのストーリーを自動で作成してくれます

完成したストーリーのテキストをコピーして、ゲームエディタのテキストボックスに貼り付けます

設定ができたので、一度テストプレイしてみましょう

キャラクターが登場し、スムーズに会話が進んでいきます。……が、ここで問題発生！

なんと、画面上に同じキャラクターがダブって複数登場してしまうという仕様上のバグが見つかりました

再び「Google AI Studio」に戻り、修正用のプログラムを作ってもらいます

プロンプト（指示出し）の一番上に「人物名をもとに、同じ人物を重複して表示しないように」という命令を追記して生成します

次のとおりAIにメッセージを伝えます

　#人物名で人物を表示すると右側の自分のキャラと被るので、
　#人物名で人物を表示しないように

イベントトリガーの画像クリックで画像を配置する時、
もっと小さく画像を配置できるように

イベントトリガーでマップドラッグで範囲を指定する時に
マップをドラッグできない

メッセージウィンドウを消すマクロをメッセージコマンドに入れて

AIでメッセージを生成する時に何のイベントトリガーから
発生しているか伝えるようできるか

メッセージコマンドでクイズのような４つまでの言葉の選択肢を選べるようにできるか

先ほどと同じようにキャラクターを登録し、イベントを作っていきます

まずは「初めのイベント（導入の会話）」を作り、続けて「画像クリックイベント」を作ります

アイテム画像をエディタに登録し、マップ（背景）の中の自然な位置にアイテムを配置します。今回は良い場所にアイテムを置くことができました！

配置が完了したら、これに対するメッセージ（ストーリー）を作っていきます

AIとのやり取りでストーリーを微調整する

「AI用テキスト」ボタンで作ったメッセージをGeminiに渡し、ストーリーを作ってもらいます

今回もしっかりとしたシナリオができました

続いて、「画像クリック用（アイテムを見つけた時）」のイベントテキストもコピーしてGeminiに渡します

この時、「さっきのイベントの続きになるように」と追加で設定して生成させます

しっかりストーリーが繋がって生成されたのですが、テキストを読んでみると一つ違和感が

AIが「日記が棚の中にある」という内容にしてしまっていたのです

画面上ではソファの上に配置したので、これでは辻褄が合いません

そこでGeminiに直接「日記はソファの上にあります」と伝えて修正をお願いします

しっかりと「ソファの上に日記がある」という自然なストーリーに書き換えてくれました！

こういった柔軟な軌道修正ができるのが本当に便利ですね

完成した2つのストーリーテキストをコピーして、エディタのそれぞれのイベントに貼り付けます

最終テストプレイ！ついにゲームが完成

すべての準備が整ったので、通してテストプレイをしてみましょう！

しっかりとストーリーが進行し、配置した画像をクリックしてイベントが動く、本格的なアドベンチャーゲームが完成しました！

AIを組み合わせることで、ゲーム制作のハードルは驚くほど下がっています

ぜひ皆さんもオリジナルゲームを作ってみてくださいね！

このブログ（およびYoutube）では、今後もAIを活用したゲーム作りのノウハウを配信していく予定です

ここまでご覧いただきありがとうございます

Youtubeも合わせてご覧ください

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

こんにちは！

この記事では、AIだけでアクションゲームをつくる方法を紹介します

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

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームプログラムは次のリンクからダウンロードできます（予定）

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

AIプログラミングでつくったゲームの紹介

今回つくったゲームがじっさいに動いています

今回の画面に映っているのは、ジャングルを舞台にしたクラシックな横スクロールアクションゲームです

プレイヤーが左右に移動し、3段ジャンプで敵をかわしながら進むシンプルだけど楽しめるゲームです

今回の記事の流れは、AIでゲームを一気に完成させるのではなく、

まず「微調整がすごくやりやすいゲームエディタ」をHTML1ファイルで作って、

そこからマップ作成 → 素材追加 → アニメーション → 敵AI と、少しずつ完成に近づけていくスタイルです

プログラミング未経験者でも挫折しにくい作り方です

最後まで一緒に試してみてください！

まずはゲームエディタをAIで生成する

Google AI Studioは自動でAIでプログラムをつくれるサイトです

>> 「Goole Ai Studdio」のサイト

前回と同じく、Google AI Studioをつかってゲームをつくります

メッセージボックスに以下のプロンプトを入力します

2DアクションゲームエディタをHTML1ファイル（単一のHTMLファイル）で生成してください。
機能は以下の通り：

• 2DアクションゲームエディタをHTML1ファイルで生成して
• 正方形のブロックを置いてマップが作れる、1画面縦12マスになるブロックの大きさ
• プレイヤーも置くことができる
• 置いたものは削除できる
• ドラッグでブロックを連続で置くことができる
• テストプレイボタンがあり、左右移動と3段ジャンプができる

プログラミング生成がおわったらダウンロードします

生成が完了したら「ダウンロード」ボタンをクリックしてHTMLファイルを保存し、ブラウザで開いてみましょう

エディタ画面が表示され、ドラッグで地面やブロックを置いたり、プレイヤーを配置してゲームをつくることができます

テストプレイの画面です

歩いてジャンプするアクションゲームのような動きができます

テストプレイをしてみると歩いてジャンプする、

基本的なアクションゲームの土台が完成しました！

キャラクターと背景の素材をAIで生成

プレイヤーキャラクターのピクセルイラストを生成する

次にビジュアルを強化します

ChatGPTのサイトにアクセスします

>> 「ChatGPT」のサイト

ピクセルアートが得意なChatGPT（DALL·E搭載のバージョン）を使います

次のプロンプトを入れてキャラクター画像をつくります

横スクロール2Dアクションゲームのキャラをつくりたい ランボー風ゲームのメタルスラッグに出てくるようなキャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、ダッシュしているシーン、背景は透過で枚数は16枚以上つくってほしい

生成できましたが、右足が前の画像がありません

最初に生成されたものがすべて左足が前の場合があります

その場合は「右足が前の歩行アニメーションを追加して、足がクロスする自然な歩きモーションに修正してください」と指示してください

このように再生成するとなおることが多いです

しっかり足がクロス、右足が前の画像が生成されました

敵キャラクターのピクセルイラストを生成する

敵キャラも同じようにつくります

次のプロンプトを入れます

横スクロール2Dアクションゲームの敵キャラをつくりたい サングラスをかけた少しワルな感じの兵士でメタルスラッグに出てくるような敵キャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、背景は透過で
枚数は16枚以上つくってほしい

しっかり敵キャラが生成できました

背景のピクセルイラストを生成する

ゲームにマッチする背景もつくります

次のとおりAIにつたえます

2Dアクション、
ピクセルのタイル、
背景画像を生成してほしい、
ジャングルで横から見ている視点、横長にしてほしい

しっかり背景画像が生成できました

これでプレイヤー、敵、背景の基本素材が揃いました！

素材の加工（背景透過と個別切り抜き）

クリックしてつくった絵をアップロードします

>> 「PhotoRoom」のサイト

生成されたスプライトシートは背景が白や色付きの場合が多いので、Photoroomを使い背景をカットして一つ一つキャラを分けます

キャラクターをアップロードして、

切り抜き編集ボタンをクリックします

キャラクターをアップロードするとAIが自動的に背景をカットしてくれます

ブラシサイズを変えて、使うキャラのみ残します

キャラの背景がカットされて一つだけになりました

続けてサイズをゲームに合わせます

サイズを500にしました

しっかりカットできたらダウンロードして、

他のモーションもつくります

歩いていて足がそろっているイラストです

逆の足が前に出ているイラストです

歩行モーション用に必要な「足が揃っている」「左足前」「右足前」のイラストも、それぞれ個別に切り抜いて保存します

プレイヤーキャラも、同じようにスプライトシートを読みこみます

ゲームでつかうパターン以外を消します

右足を前に出したパターンのみカットしました

続いて左足だけ前にでているパターンをカットしました

足がクロスしているパターンもカットします

これで敵とプレイヤーキャラクターのアニメーションの準備ができました

プレイヤーキャラクターも同じ手順で切り抜き完了です

完成度の高いゲームプログラムを再生成

カットしたパターンをゲームに登場させるプログラムをつくります

素材が揃ったので、Google AI Studioに戻ってより進化したプログラムを作成します

次のようにプロンプトを入れます

次の機能を追加してほしい

タイルマップ画像を読み込み、ドラッグで範囲を決めて地面ブロックの画像として使えるように

プレイヤー画像を読み込み歩いている画像、止まっている画像を置き換えられるように、歩いているパターンは4枚登録できるように

壊れるブロックが設置できるように（地面ブロックと同じ方法で画像登録できる）

敵キャラをつくり、プレイヤーを見て2秒たったら銃をうつ（玉は真横のみ）

AIがつくったプログラムをダウンロードします

プログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして開くと、エディタ画面が大幅に進化しています

次のことができるようになりました

・キャラクター画像と敵画像の読み込み機能
・ブロックの配置
・プレイヤーと敵の配置

プレイヤー、敵キャラそれぞれイラストを読み込みます

右に背景画像を読みこみ、

タイルのようにおいてマップをつくりました

テストプレイしてみました

しっかりとキャラがアニメーションしますが、
キャラの背景に色がついてしまってます

テストプレイをすると、歩行アニメーションが動き、敵がプレイヤーを見て銃を撃つアクションが追加されています！

ただし、プレイヤーと敵キャラの背景が透明になっていないので修正する必要があります

Google AI Studioでプログラムを修正します

エディタ画面では、キャラクター画像や敵キャラ画像を読み込み、ブロックを配置してテストプレイが可能になりました

しかし、キャラクターの背景がまだ透明になっていない問題がありました

そこでGoogle AI Studioに戻り、
以下の内容をAIに伝えてプログラムを修正します：

プレイヤー、敵キャラの背景を透過に
プレイヤーが玉を打てるように
画面をもっと横を長くできるように
敵がプレイヤーに向かって歩くように
プレイヤー、敵キャラの画像登録を一度に複数ファイル選択できるように（登録後にドラッグで順番を入れ替えられる）る

修正したプログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして起動すると、背景がきれいに透明になり、プレイヤーの攻撃も追加されました

ただし、敵キャラが空中を歩いてしまう不具合が発生したので、次回の修正でしっかり地面に接地させるように調整します

ここまでのまとめ

これで、エディタでマップを作りながら、アニメーションするプレイヤーと敵が登場し、

銃を撃ってくるシンプルな2D横スクロールアクションゲームの原型が完成しました

マップを広げてアクションをもっと追加する

爆発アニメーションを作成

ChatGPTでさらに素材をつくります

ここからゲームをさらに楽しくするために、素材を増やしていきます

アクションゲームに欠かせない爆発エフェクトを作ります

次のとおりAIに伝えます：

爆発スプライトシートを生成して

しっかりスプライトシートが生成できました

PhotoRoomのサイトでアニメーション用に絵をカットします

生成したスプライトシートから、PhotoRoomを使って爆発アニメーション用に4枚とりだします

必要な爆発だけ残してカットします

一つの画像の大きさは、幅を300、高さを500にします

小さな爆発をカットしました

少し大きめの爆発をカットしました

次の煙へつなぐために、煙が入った大きめの爆発をカットしました

最後の煙のみで消えかけているのをカットしました

これで自然な爆発アニメーションの準備が完了しました

背景の画像を横に広げる

「Krea.ai」は背景をのばして絵を描いてくれます

>> 「Krea.ai」のサイト

前回生成したジャングル背景を、より長く横スクロールアクションゲームのように広げます

「Krea.ai」というリアルタイムの画像編集や自然な画像拡張ができるAIサイトです

右にドラッグするだけで背景をAIが描いてくれます

元の画像のハジが暗いので、

真ん中が暗くなっていますが、しっかり画像を広げられました

拡張部分もジャングルが続き、クオリティの高い横長背景が完成しました！

プレイヤーのダッシュアタック用画像

これまでつかった画像から一枚だけのこしてカットします

プレイヤーキャラクターのダッシュモーション用に、1枚の画像を用意します

PhotoRoomで背景を透過処理し、ダッシュ中のポーズをきれいに切り抜いて保存します

ダッシュアタックにつかう画像をカットしました

これで必要な素材がすべて揃いました

最終的なプログラム修正（大幅アップデート）

これまでのプログラムをアップロードして

あたらしいプログラムをつくりなおします

Google AI Studioに戻り、前回生成したプログラムファイルをアップロードして、

一気に次の指示を伝えます

最後のプロンプト（そのままコピーして使用可能）：

2Dアクションの添付ファイルを同じくHTML1ファイルにして次のことを編集してほしい
マップエディタ部分の下にスクロールバーをつけてさらに横方向に編集できるようにして
またマップエディタ部分の下につけたスクロールバーの下に画面右にマップを拡張できるボタンをつけて
上のバージョン表記を消して
背景画像を設定できるように、背景画像の大きさは縦幅を合わせて
レイヤーを前面（地面とかプレイヤー）、背景に分けて必ずどっちも表示させて
背景の彩度をコントロールできるように
キャラクター、敵の静止画ボタンを削除して歩きから止まっている画像を使って
壊れるブロックを壊すと、敵を倒すと、爆発するようにして
爆発画像は4枚登録できるようにして
敵が出す弾のスピードは0.4秒にして、プレイヤーはHPゲージがあり10回被弾でHP0になるように
プレイヤーの攻撃を銃からダッシュアタックにして、ボタンをおすと素早く前に進みながらの攻撃で（ダッシュ距離、速度をコントロールできるように）またダッシュ中は無敵で空中でもできるように
ダッシュ画像も1枚登録できるように

生成が終わったらHTMLファイルをダウンロードして起動します

テストプレイの結果

ダウンロードしたエディタです

つくった画像ファイルを読みこんで、マップにブロックとして置いていきます

プレイヤーや敵キャラ、爆発の画像を読みこんでアニメーションとして設定します

マップ拡張ボタンをクリックしてマップを広げます

つくった画像があらわれて、マップを広げることができました

テストプレイすると、しっかりダッシュアタックできるゲームが完成しました！

テストプレイをすると、ジャングルの広いステージをダッシュで駆け抜け、

爆発を巻き起こしながら敵を倒す、本格的なアクションゲームになりました！

まとめ

このように、AIだけで、2D横スクロールアクションゲームのエディターをここまで秒で作り上げることができました

AIプログラミングの強みは「少しずつ修正しながら完成に近づけられる」点です

不具合が出てもすぐにプロンプトで直せますし、欲しい機能を追加指示するだけでどんどん進化します

これからもAIを使って、さまざまなゲーム開発に挑戦していきたいと思います！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回はAIでゲームを制作する方法を解説します

今回は簡単にできる、2.5D横スクロールアクションのつくり方を紹介します

プログラミングをしなくてもカンタンにつくれます

ぜひチャレンジしてください！

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます

>> 「AIゲームのプレイ＆ガレージ」

AIプログラミングでつくったゲームの紹介

今回つくった2.5Dアクションゲームエディタです

このエディタでは3Dマップをつくることができ、2Dの敵キャラを置くことができます

このページでつくり方を紹介するゲームのエディターです

このエディタをGoogle AI Studioでサクッとつくり、アクションゲームをつくります

AIプログラミングサイトでゲームのお試しバージョンをつくる

Goole AI StudioのサイトでAIにプログラムをつくってもらいます

>> 「Google AI Studio」のサイト

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

メッセージボックスにつくるプログラムをタイプしてAIに伝えます

ダウンロードしたゲームエディタをプレイします

プログラムの生成が終わったらダウンロードボタンをクリックしてください

即実行できるHTMLファイルがダウンロードできます

テストプレイをしてみよう

うごくゲームエディタがあらわれました

実行するとエディタ画面が現れます

AIに伝えた通り、マウス操作で地面を変えることができます

また、敵配置ボタンをクリックして敵を配置することができます

テストプレイもしっかり動かすことができます

テストプレイをしてみましょう

しっかりジャンプができて、敵に玉をあてることができます

アクションゲームとして基本的な動きはするプロトタイプをつくることができました

ここからキャラの絵の差し替えとアニメーションをつくりたいと思います

ゲームキャラをピクセル＆ドット絵にする

ピクセル＆ドット絵のゲームキャラをつくる

ピクセルキャラをGoogle Geminiのサイトでつくります

>> 「Gemini」のサイト

スプライトシートをつくることができました

Google Geminiがスグに画像を生成してくれました

このスプライトシートから画像を分割します

画像編集サイトでゲーム用に背景を透過にする

Photopeaのサイトは高機能のオンライン画像編集サイトです

>> 「Photopea」のサイト

背景除去は色々な方法があるので、二つのパターンを紹介します

一つ目は応用がきく画像編集ソフトの方法です

「トリミングツール」で、つかわないキャラをカットします

編集画面に変わったら、左のメニューからトリミングツールをクリックして

必要なキャラだけ残します

投げ縄ツールで不要な部分をカットします

背景を一度にすべて選択して消します

次に選択ツールで背景をドラッグして一度に選択します

右クリックのメニューから他の部分をカットします

しっかり背景が消えました

ピクセル画像からプレイヤーキャラのアニメーションをつくる

キャラの歩いているアニメーションをつくります

>>「Grok」のサイト

Grokのサイトにアクセスしてアニメーションをつくります

画像ファイルをアップロードします

アニメーションさせたい言葉をいれます

アニメーションが完成したらダウンロードします

アニメーションから画像を取り出します

>>「Online Video Screensho」のサイト

このサイトは動画ファイルから画像をとりだすことができるサイトです

再生しながらゲームのキャラアニメーションに必要な画像をとります

すべて終わったらダウンロードボタンをクリックしてダウンロードします

背景を消すサイトにアクセスします

つづいてアニメーションから取り出した画像の背景を透明にします

このサイトはアップロードした瞬間に背景を消すことができます

これでプレイヤーキャラの必要なイラストはそろいました

敵キャラのピクセルアニメーションをつくる

敵キャラのピクセル画像をつくります

ワニの魔法使いであることをAIに伝えて生成します

しっかりイラストが完成しました

背景を消すサイトでキャラを一つにします

>> 「Photoroom」のサイト

背景を消すサイトで敵キャラのまとまったスプライトシートから一つずつに切りわけます

必要のないキャラをブラシで消します

一体のみになったらダウンロードします

Grokでアニメーションをつくります

>> 「Grok」のサイト

歩くアニメーションができました

ゲームのピクセルアニメーションにするために、画像を抽出します

>> 「Online Video Screenshot」のサイト

３体のキャラクターの背景をけします

敵キャラが現れるように、プログラムをつくりなおします

Google AI Studioでプログラムをつくりなおします

プログラム生成がおわったら、ダウンロードします

あたらしく作ったプログラムです

ピクセル画像つきのキャラクターがあらわれました

しかし、画像が明るすぎます

しっかりプレイヤーも敵もアニメーションするゲームになりました

玉もエフェクトがつきましたが、かなり不自然です

プレイヤーのイラストもすごい明るく、左右に動いた場合、反転しません

ここから、背景がないのでこの2Dマップを3Dにして背景を地形でつくりつつ

ボスを登場させて2Dアクションから2.5Dアクションにブラッシュアップさせたいと思います

2Dマップを3Dマップに変える＆2.5Dゲームにする

ボスキャラクターのピクセル画像をつくる

はじめにボスキャラをつくります

ピンク色のワニ魔法使いであることをつたえます

しっかりつくることができました

しっかり生成できたので、アニメーションをつくる準備をします

これまでと同じように一体ずつ分けます

>> 「Photoroom」のサイト

切り抜くために画像をアップロードしたら

必要なキャラ以外をカットします

一体だけ残して、他はすべて消します

しっかり消すことができました

Grokのサイトでピクセル画像をアニメーションさせます

>> 「Grok」のサイト

Grokのサイトにボスキャラをアップロードして、歩くアニメーションをつくります

敵キャラをアップロードするとアニメーションの画面になります

下のメッセージボックスにアニメーション用のテキストをいれます

ちょっとここじゃないって所に口が現れましたが

気にせず進みます

アニメーションのスクリーンショットをとり、画像をとり出します

>> 「Online Video Screenshot」のサイト

アニメーションのスクリーンショットをとれるサイトに移動します

アニメーションからイラストを切り出して

歩いている動きのためのスクリーンショットを全てとります

ゲームで歩くアニメーションにするために、取り出した画像です

とり出した画像をアップロードして背景を消します

これでボスキャラの準備ができました

次は、これまでと同じ方法で、とり出した画像の背景を透明にします

アクションエディタをつくりなおして3Dマップにする

Google AI Studioのサイトにもどり、

2Dマップから3Dマップエディタにするためにプロンプトをつたえます

次のポイントでAIにつたえます

・プレイヤーや敵を配置・移動できるのは「一直線上（2D軸）」のみ

・水面の高さ、時間帯、時間経過のスピードを自由に調節できる機能を追加すること

・メニューバーを操作している間は、誤ってマップを編集できないようにすること

・作成したボスキャラを配置できること

・PNG8形式以外の画像でも、正しい明るさで表示されるように修正すること

AIがつくったプログラムをダウンロードします

完成したゲームのテストプレイ

しっかり2.5Dアクションとして動くゲームが完成しました

Youtubeでは動いているゲームを見ることができます

AIが生成した新しいプログラムを実行すると、進化したエディタが起動します

ここで、先ほど作成したプレイヤーや敵、ボスの画像を読み込み、マップ上に配置していきます

配置が終わったら、実際にテストプレイをしてみましょう！

背景は奥行きのある3Dでありながら、キャラクターはしっかり2Dアクションとして動く、本格的な「2.5Dアクションゲーム」の完成しました

設定した時間経過の機能を使えば、ゲーム内で昼から夜へと景色を変化させることもできます

さらにクオリティを上げるには？

YouTube動画の方では複雑になるので省略しましたが、こんな感じのカスタマイズも可能です

• 背景に2.5Dのオブジェクト（木や建物など）を配置
  
• 3Dマップの地面にテクスチャ（模様）を貼って質感をリアルにする

このように、AIを活用すればプログラミングの深い知識がなくても、見栄えのする本格的なゲームを短時間で作成できます

ぜひ、ご自身のオリジナルキャラクターを使ってゲーム制作に挑戦してみてください！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回は AIを使って弾幕縦スクロールシューティングゲームを一瞬で作る方法 について紹介します

プログラミング未経験でも、ノートPCとネットがあれば制作できる方法で紹介しています

ぜひチャレンジしてみてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIのゲーム制作でつかうサイトの紹介

Google AI StudioはAIプログラム機能に力を入れているサイトです

今回はこのサイトをつかってゲームをつくります

>> 「Google AI Studio」のサイト

今回つくるのは、弾幕系の縦スクロールシューティングゲームです

AIをつかえばゲーム制作で特に時間がかかる、プログラミング、素材作成を一気にすすめることができます

【補足】

シューティングゲームは「当たり判定」「敵の動き」「弾の制御」など本来は難易度が高いジャンルです

しかしAIプログラムならば、最初から遊べるプロトタイプをつくれるのが大きなメリットです

AIで弾幕シューティングゲームのプロトタイプをつくる

AIへ作りたいゲームをつたえる

まずは Google AI Studio（Gemini） を使って、

ゲームの土台となるプログラムを作成します

生成が完了したら、右上のダウンロードボタンから保存して実行します

【補足】

最初から完璧を目指す必要はありません

「動くかどうか」を確認できるプロトタイプを早く作ることで、これからの修正が楽になります

AIがプログラムをつくりはじめました

ダウンロードしたプログラムを実行してください

しっかりシューティングゲームが動きます

キャラクター・ボスキャラのイラスト生成

次に、ゲームに登場するキャラクターとボスキャラのイラストを作成します

黒色の服だと背景とかさなるので修正します

【補足】
ゲーム用イラストは、背景に埋もれない色と形も重要です

プレイヤーのイラストが完成しました

次はボスキャラをつくります

ボスキャラはあらかじめ生成したイラストをもとに生成しました

こちらはフリーで配布しますので、必要ならばご使用ください

イラストとテキストからボスキャラをつくります

大まかなイラストはOKなので、イラストをととのえます

しっかりボスキャラが完成しました

ゲーム背景イラストの生成

ゲームの背景をつくります

パターン画像がつくりやすい宇宙の背景にします

次は縦スクロール用の背景画像を作成します

今回は ChatGPT を使って宇宙背景を生成します

【補足】
ループ背景はGeminiよりChatGPTの方が成功率が高い印象があります

背景はシンプルな方が弾幕が見やすくなるため、描き込みすぎないのがおすすめです

完成した宇宙の背景画像です

フリーで配布するので、必要でしたらご使用ください

ゲーム音楽（BGM）の生成

ゲームBGMは「Suno AI」を使って作成します

>> 「Suno AI」の公式サイト

Suno AIはジャンルや雰囲気をテキストで入力するだけで、音楽を自動で生成できるサイトです

【補足】
BGMはゲームの印象を大きく左右します

テンポが速すぎると疲れやすいため、

弾幕ゲームでは少し落ち着いた曲も相性が良いです

３分くらいで自動で曲が完成します

音楽が完成したらダウンロードします

キャラクター画像の背景を透過する

キャラをアップロードして背景を透明にします

>> 「Photoroom」のサイト

キャラクター画像の背景は photoroom で透過します

アップロードするだけで自動で背景がなくなり、そのままPNGで保存できます

素材を組み込んだゲームプログラムを生成

プログラムをバージョンアップします

すべての素材を Google AI Studio にアップロードし、もう一度プログラムを生成します

BGMの再生、敵弾の速度調整などもまとめて指示します

イラスト変更とブラッシュアップ

キャラクターの画像を入れかえます

Geminiのサイトにアクセスしてイラストをつくります

背面になりませんでしたが、

しっかり魔法使いの白猫が生成できました

しっかり後ろ向きのキャラクターが完成しました

最後にキャラクターやエフェクトを調整し、完成度を高めます

背面猫キャラへの変更や、ボスの動き・攻撃パターンを追加します

【補足】

AIとの会話が長くなりすぎたら、
一度会話をリセットして再生成した方が早くうまくいくことがあります

ゲームをさらに改良してメリハリがあるゲームにします

AIのプログラムがおわって、キャラを入れかえたゲームです

しっかりキャラがいれかわりメリハリがあるゲームになりました

まとめ

AIを活用すれば、プログラミングの経験がなくても本格的なシューティングゲームをつくれます

ぜひチャレンジしてみてください！

と悩んでいませんか？

この記事ではAIをつかってビジュアルノベルゲーム を即つくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIで制作したビジュアルノベルゲームの紹介とつくり方の流れ

このGoogle AI Studioのサイトを使います

ノベルゲーム専用のゲームエンジンではなく、AIでゲームをつくります

ノベルゲームはティラノビルダーやRenpyなど、ビジュアルノベル作成ソフトでつくることができます

とくにRenpyは多くのユーザが使用しているソフトです

しかしビジュアルノベル作成ソフトだと使い方をおぼえるのに時間がかかります

ビジュアルノベルのプログラムをAIでつくれば、使い方をおぼえる必要がありません

また無料ですぐに作ることができるので、AIを使ったゲーム制作はとてもオススメの方法です

今回紹介するゲームサンプルコード

Youtubeとこのページで紹介しているゲームのプログラムです

位置修正ツールも配布しているのであわせて、参考にしてください

AIをつかってビジュアルノベルゲームのプログラムをつくる

ビジュアルノベルゲームのカンタンなベースプログラムをつくろう

はじめにAIプログラミングができるGoogle AI Studioのサイトに移動します

>> 「Google AI Studio」のサイト

「RUN」をクリックするとAIがHTMLプログラムを生成します

しっかりゲームが動きました

ビジュアルノベルのキャラや背景をつくろう

キャラクターを登場させるためにイラストをつくります

キャラクターが生成されましたが、帽子が派手すぎてゲームと合いません

続けてさらにいいキャラクターをつくります

今までのイラストをもとに、キャラクターをつくります

しっかりAIに伝えたとおりのキャラクターが生成できました

さらにもう一つキャラクターをつくります

生成したいイラストをAIに伝えます

同じタッチのイラストが生成できました

つづいてゲームでつかうためにキャラを分割します

>> 「My Edit」のサイト

画像をアップロードしただけで背景が透明になります

つづいて「編集ツール」からキャラを分割します

もう一キャラも同じように切りぬきます

ダウンロードした絵をさらに調整します

このサイトではPhotoShopのように細かく編集できます

なげなわツールでいらない部分を消します

つぎは魔法学園の背景をつくります

このサイトはリアルタイムで絵を生成できるサイトです

おおまかな絵からリアルなイラストをつくることができます

イラストが完成したらダウンロードします

ここまでつくった絵でプログラムをつくります

AIがプログラムをつくります

キャラがセリフに合わせて、表情が変わるようになりました

ここからはストーリー分岐やさらにストーリーをくわえます

あたらしいキャラがあらわれました

キャラの背景を透明にします

つづきのストーリーの背景をつくります

新しい素材、ストーリーをプラスすることをAIに伝えます

生成したプログラムをダウンロードします

しっかり、新しいキャラがあらわれました

しかし、大きさが少しおかしいです

ビジュアルノベルゲームのキャラ調整ツールをつくろう

キャラの位置を変えるツールをつくります

次は有名なノベルゲームツールでもかなり大変なキャラの位置調整について、

AIをつかってツールをつくり、カンタンに位置調整する方法を紹介します

ゲームファイルを読みこみます

キャラの大きさを変えた後のプログラムがあらわれます

ゲームプログラムを直接書き換えます

ゲームキャラの大きさと位置がしっかり変わりました

ここまでご覧いただきありがとうございます

他のページでもゲーム作成を紹介しているので合わせてご覧ください

・・・と悩んでいませんか？

この記事ではAIをつかってアクションゲーム を一瞬でつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

AIでプログラムなど、生成することに特化したサイトです

今回はこのサイトでAIプログラム生成をしたいとおもいます

>> 「Google AI Studio」のサイト

Piskel：ピクセル画像のスプライトシートを分割 ＆ アニメーション

ピクセル画像のアニメーションに特化したサイトです

こまかくピクセルアニメーションのコントロールができます

>> 「Piskel」のサイト

AIで制作したゲームの紹介と流れ

今回つくるゲームがじっさいに動いてる動画です

ゲームのイメージがわかるので、ぜひ記事と一緒にごらんください

AIをつかってアクションゲームのプログラムをつくる

Google AI Studioでアクションゲームのうごきをつくる

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

「RUN」をクリックするとさっそくAIがゲームのプログラミングをつくりはじめます

AIが生成したゲームをプレイしてみよう

生成したプログラムの「敵を多くする＆敵の種類をふやす」ように変える

つぎは敵の数が少なすぎるので、増やしてゲーム画面を確認したいと思います

生成が終わったゲームをプレイすると、しっかり敵が増えたゲームになります

ボスキャラを登場させるようにAIに伝えます

生成が終わったゲームをプレイしました

AIでゲームキャラクターのアニメーションをつくる

ChatGPTのサイトにうつり、ピクセル画像のスプライトシートをつくります

スプライトシートが完成しました

つぎはこのスプライトシートの背景を透明にします

背景を透明にするために、画像の編集サイトに移動します

読み込んだと同時に背景を透明にできました

おおきさも調整します

次は透明になったスプライトシートを分割します

読み込んだスプライトシートを４つに分けます

ツールをつかってアニメーションがしっかり動くように調整します

しっかり動くようになったらダウンローダーします

画像ができたのでさっそくゲームに登場させたいと思います

Google AI Studioでプログラムをつくります

プログラム生成が終わったゲームをプレイすると、キャラクターが動くようになりました

ゲームの背景画像をつくる

つぎはゲームの背景画像をつくります

一枚の絵をさらに細かく遠くから見た感じでつくることをAIに伝えました

生成した画像をゲーム背景にすることをAIに伝えます

・背景がしっかり表示されて、ゲームっぽくなりました

つぎは敵キャラの画像をつくります

できあがりましたが、さらに自然な正面からの画像に変えたいと思います

つくった敵キャラをゲームに登場させるプログラムをつくります

プログラムにつくった画像を追加します

完成したプログラムをプレイします

まとめ

AIのプログラミングは他のページでも紹介しています、あわせてごらんください

と悩んでいませんか？

この記事ではGoogle AI Studioを使って無料でゲームをつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

Google AI Studio：無料でつかえるGoogleが運営する開発用のAI生成サイト

今回ゲーム生成でつかうサイトです

>> 「Google AI Studio」のサイト

このサイトは開発者向けのAIサイトです

GoogleのGeminiをベースにさらに細かくプログラムや画像、動画をつくることができます

メニューは英語ですが、命令は日本語OKなので、ブラウザの翻訳をつかえば問題なく使うことができます

Google Gemini：無料でつかえる万能AIツール

無料でつかえるGoogle公式のAIツールです

「Gemini」のサイト

Googleトップページからもつかえるので、多くの方がつかっているAIツールです

とても使い方がわかりやすく中央のボックスに命令を入れるだけで、AIが命令を理解して動いてくれます

Google AI Studioの爆速ゲーム制作の方法

Google AI Studioでつくったゲームの紹介

今回つくるシューティングゲームです

プログラムをAIにつくってもらうバイブコーディングという方法でつくります

今回つくるシューティングゲームです

プログラム、イラスト、ゲームにつかう物をすべてAIでつくることができます

もちろんプログラムが未経験の方でもつくることができます

AIでゲームのイメージイラストをつくる

Geminiに生成するイメージを命令する

はじめに、Geminiでゲームのイメージ画像を生成します

Geminiが生成したイラストをダウンロードする

Geminiがつくったゲームイメージの例です

このイラストをもとにゲームのプログラムを生成します

画像の生成は1～2分でおわります

生成がおわったら、バイブコーディングでつかうためにダウンロードします

AIで横スクロールシューティングのプロトタイプをつくる

「Google AI Studio」のサイトでプログラムをつくります

「Google AI Studio」は本格的にAIのプログラムの生成をおこなうことができます

生成したプログラムをダウンロードする

プログラムの生成は１～3分でおわります

生成したゲームをためしてみよう

キーボードで動く横スクロールシューティングをつくれました

しかし、ゲーム画像がブロックなので次は画像をつくります

まだブロックの絵が動くだけですが、しっかりシューティングゲームとして動くプログラムができました

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

ゲーム画像がブロックなので、ゲーム画像をつくります

Geminiでキャラクター用の画像を生成します

キャラクター画像を生成できました

しかし、背景が白色で透明ではないようです

背景切り抜きができる「My Edit」のサイトに移動します

>> 「My Edit」のサイト

つづいて、画像の大きさを小さくします

Geminiで敵キャラクターを生成する

主役キャラにつづいて敵キャラの画像もつくります

少しかわいい敵キャラをつくることができました

つづけて何体か敵キャラをつくります

ちょっとかわいいキャラがあらわれました

つくったキャラの背景を透明にして、画像のムダな部分をカットします

ChatGPTで背景の画像をつくる

背景はくり返しのループ画像がとくいなChatGPTでつくります

>> 「ChatGPT」のサイト

つくった全ての画像をゲームに登場させる

はじめに、主役キャラをゲームに登場させます

主役キャラの画像をアップロードできました

この画像をゲームに登場させるようにAIに伝えてプログラム生成します

主役のキャラ画像が登場しました

次は敵キャラをゲームに登場させます

登場させる敵キャラの画像をアップロードします

命令も組み合わせて、AIでプログラムを生成します

生成したプログラムを実行すると敵キャラがあらわれました

次は背景を登場させます

作成した背景をアップロードします

画像、命令と組み合わせてプログラムを生成します

敵キャラが小さくなり、背景画像がゲームに登場しました

しかし、まだプレイヤーの玉がゲームっぽくありません

プレイヤーの玉、敵キャラの大きさをもっとゲームに合うように変えます

全体的にメルヘンな感じで、ゲームが完成しました

まとめ & ブログで紹介したゲームの動画

ゲームがうごいている雰囲気、くわしいつくり方は下の動画から確認できます

AIのプログラミング（バイブコーディング）は他のページでも紹介しています

合わせてごらんいただくと、さらに多くのゲーム作成にいかせます

Royalty Free Illustration & Art image.(Copyright free)
Mause on Picture, Right click and save.(file format PNG)

きれい＆かっこいいグッドジョブのネオンの看板のリアルイラスト素材

きれい＆かっこいいGOODマークとグッド文字のネオンの看板のリアル素材

美しい＆かっこいいストップのネオン文字看板のリアルイラスト素材

Royalty Free Illustration & Art image.(Copyright free)
Mause on Picture, Right click and save.(file format PNG)

夏の陽ざしの中の美しい街並みと綺麗な昼の青空と雲

夕暮れの陽ざしの中の美しい街並みと綺麗でかっこいい夕暮れの空と飛ぶ鳥

日本のコンビニと田舎道の美しい風景ときれいな青い空

屋台と美しい青い空と夏の風景イラスト画像素材