「AIをつかったプログラミングに興味がある」
「本格的なアドベンチャーゲームをつくってみたい！」
「時間がないけどノベルゲームをつくってみたい」
・・・でも、
何からやればいいかわからない！
・・・となやんでいませんか？
こんにちは！
この記事では、これまでのやり方からさらにバージョンアップしたAIでアドベンチャーゲームをつくる方法を紹介します
これまでノベルゲームの作り方は紹介しましたが
AIが進歩したことで、さらに簡単に、もっと高度なゲームがつくれるようになりました
プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください
Youtubeでも紹介しています
このページのゲームは次のリンクからプレイできます（予定）
今回紹介するゲームのプログラム
今回この記事で紹介したゲームのプログラムです
今回つくるアドベンチャーゲームの流れ
今回の動画と記事の流れは、AIにいきなりゲームの完成品をつくらせるのではなく、
「微調整がやりやすいゲームエディタ」をHTML1ファイルで作り、
そこから少しずつゲームを完成に近づけていくスタイルです
プログラミング未経験者でも挫折しにくい作り方です
ではさっそくAIプログラミングをはじめます！
まずはゲームエディタをAIで生成する
GoogleAI Studioにアクセスして、
AIにメッセージと画像をアップロードします
前回のAIプログラミングと同じように、
自動でプログラムがつくりやすい「Google AI Studio」のサイトに移動します
メッセージボックスに、以下のプロンプトと画像を一緒に入力します
次の通りのノベルゲームエディタをHTML1ファイルで生成して ユーザインタフェースは添付ファイルを参考につくって
【UI構造】
- ヘッダー: 「プロジェクト保存」「テストプレイ（本当にプレイできる）」ボタン
- メイン（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も合わせてご覧ください
コメント