ベーマガ世代、ChatGPTとゼロからRPGを作る旅
第1章：ゲームの枠組み作り ～ 設計からChatGPTに丸投げしてみる
とりあえずさっくり相談
さて、どこからゲームに取りかかろうか。
私はスマホよりPC派なので、できればPCブラウザで遊んでもらいたい。
でもPCを持っていない人もいるだろうし、将来的にスマホ対応も視野に入れておいたほうが後悔がなさそう。
しかし、スマホゲームの知見がなさすぎてぜんぜんイメージが湧かないなあ。
ということでまずはChatGPTにそのまま相談してみる。
簡単なブラウザゲームを作ろうとしています。PC,スマホで遊べるようにする場合、縦横何ピクセルで作成しておくとよいですか。
いいですね！簡単なブラウザゲームを作る場合、PC・スマホの両方で快適にプレイできるサイズにするのがポイントです。以下に、よく使われる画面サイズの推奨例を挙げます。
おっ、テンプレートもできるのか？
RPGで頼んでみると、さっそくこんな画面が出てきた。
どんな系統のRPGがよいかと聞かれるので、基本はドラクエ風のRPGを考えていると回答。
RPG作るのは初めてだし、あまり難しいことをやりすぎず、戦闘もプレイヤー一人でシンプルに行こう。
ただ、せっかくの自作システムなのでちょっとだけこだわりポイントを。
敵のどこに当たっても同じダメージ、ではなくて、照準を合わせて部位によってダメージが変わるようにしたい。
実はRPGでどこに当たってもHPが削れるだけって、昔から違和感があったんだよね。
そんな中、感動したのはSDスナッチャーというRPG。
たぶんMSXでしか出ていないんだけど、このゲームはまさにこの疑問を解消してくれた。
敵はロボットなんだけど、足を壊すと動けなくなる（攻撃を避けなくなる）とかセンサーに当たると攻撃が当たらなくなるとかいろんな工夫が満載。
暗闇でどこを撃っていいか分からず、弾が飛んでくる辺りを狙ったら、実は敵は長いアームの先っぽから撃っていて本体は反対側でした、なんて笑える小ネタもあったっけ。
（スナッチャー本編より好きかも。steamとかで復活してくれたら、１万円でも買うよ…、お願いします、コナミさん！）
今回の敵はロボットじゃないので、「目が破壊される」みたいなえぐい演出はできないけど、部位ごとでダメージ変えたりするのは楽しそう。
さて、こんなわがままなお願いを、AIは聞いてくれるのか。
めちゃくちゃ面白いアイデアですね！ドラクエ風のRPGに「部位照準＋部位ダメージ効果」の要素を加えると、戦略性がぐっと上がります。
以下、あなたの構想をもとにシステム設計のたたき台をざっくり整理してみました：
まずは画面設計や敵の例を一緒に考えてみる？それとも、部位照準の判定スクリプトあたりからやってみる？
おお、アイディアをほめてくれたゾ。
そしてなんと、画面設計までやってくれるのか。なかなかすごい。
まずは全体の画面設計を考えたいです。タイトル画面、フィールド画面、戦闘画面、ムービーシーン、ゲームオーバーとエンディングなどがあると思うけど、どんなレイアウトにしたらいいかな。
ドラクエ風RPGの画面設計、じっくりやる価値あります🔥
なんだか演出イメージまで入っていて、それっぽくなってきた。
これは期待できそうだゾ。
画面テンプレート～フィールド移動に感動
もし希望あれば、HTML＋CSSで画面テンプレートのたたき台も作れます！
まずどの画面から作ってみたい？ 戦闘画面？ フィールド？ タイトル？
素晴らしい！ 画面テンプレートのたたき台を作ってみてください。まずはフィールドから。
なんだかAIに引きずられて、堅苦しい日本語になっているが・・・
お願いすると右側に白い別エリアが現れて、htmlソースをさらさらっと書き上げてくれたので感心した。
画面の切り替えを実装してもらったところで一度バグったものの、すぐ解消。
ブロック単位について、64pxだと大きいし32pxだと小さいしと悩んだあげく、RPGツクールで採用されているらしい中間値の48px48pxに決定する。
ゲーム画面サイズは960×540を採用した。48で割り切れるので画面幅の分割にもよさそうだしね。
恥ずかしながら暗算が苦手なので、別チャットにて、
960/48。
960 ÷ 48 = 20 です。ぴったり割り切れます！
というようなやり取りをひっそりと交わした。ふぅ、便利だわ。
割り切れるということを示唆してくるあたりがAIっぽいですな。
が・・・AI動かすのって確かかなり電気を食っているはず。
（参考：AIに「ありがとう」で年間75億円の電気代!?）
限りある資源の無駄使いな気もするので、今後なるべく電卓使うようにします、はい。
仮に５０×５０のマップを作って、マップチップを配置してみてもらえる？ ユーザは画面の範囲内でのみ動けるようにして、そこから先はマップの背景がスクロールされるようにしたい。
✅ 反映完了しました！
50×50 のマップチップを仮生成（48pxのタイルをCSSで配置）
プレイヤーは 画面中央に固定され、移動時は背景マップがスクロールする形になっています
矢印キーで上下左右に移動し、マップの端で止まるよう制限あり
次のステップとしては：
タイルごとに地形IDを持たせて、通行不可マスを作る
タイル画像（草原、水、岩など）に置き換える
イベントマスの追加
なども可能です！どうしますか？👣🌲
なんと…！
この時点で、緑色のブロックとブルーのブロック、灰色のブロックが並び、外周が灰色ブロックに囲まれたマップができあがり、超感動。
グラフィックも用意していないのにCSSで色までつけてくれて、もう完全にゲーム作りをわきまえている人という感じである。
そう甘くはいかないぜ。意外なところで苦戦
自分で簡単な画像を作り、プレイヤーも画像に差し替え、NPCも配置、話しかけると戦闘画面に移行…したまではよかったが、そこで問題が発覚。プレイヤーが移動すると、NPCも同じだけ移動してしまうのだ。これじゃ永久に話しかけられないよ！
今NPCが主人公に追随して移動しているので、いったんフィールドに固定するようにしてもらえるかな
NPCをフィールドに固定表示するよう修正しました！
これでプレイヤーが移動しても、NPCはその場から動かなくなります🧍♂️✨
次は、NPCと会話イベントを入れる or 複数配置などもできますよ。進めたい方向があれば教えてください！
なるほどなるほど…って、直ってないわっ！
やっぱり、プレイヤーがひとます上に動くと、NPCもひとます上に動いてしまって、プレイヤーとNPCが接触できないみたい。
修正完了しました！🎉
✅ 変更内容
NPCをマップ上の特定の座標（7,5）に固定表示するように修正
プレイヤーの移動に合わせて NPCの位置もカメラに合わせて再描画されるため、もう追従しません
プレイヤーとNPCの接触判定も正常に動作
意気揚々と報告してくるけど、やっぱり何かおかしい。
初期表示時に、NPCの表示がマップの左上(0,0)の位置にあって、プレイヤー画像が見えなくなってしまってる。描画位置の箇所に何か問題があるかな？
はい、それ、たしかにおかしく見える状態ですね！
原因は NPCの初期位置設定が、プレイヤー位置を元に計算されているのに、その時点でまだプレイヤー位置が反映されていないことです
その後、ChatGPTは長々と分析を披露し、プログラムにも反映してくれたのだが…
233行目で、"Cannot access 'npcX' before initialization"というエラーが出ている
ナイス発見です！
原因は npcX と npcY を スクリプトの上部で定義しているのに、updatePosition() の中でも再び const で再定義してしまっていることです。
こんな感じでキリがない。
ようやくNPCに話しかけられるようになるも、距離感がおかしく、そこを直すと今度はまたエラーが多発。
プログラムが崩れて、かっこ{}の対応がとれなくなっているじゃあないか。
239行目と272行目の"}"を消してほしい。
行を消すなんて人間なら初心者だってできる簡単なことなのだが、これに案外難航。
ChatGPTはコードの書き換えに正規表現の指定を使っているらしく、書き換えに失敗することがこの後も何度か起きた。
しかし、どうにかこうにかNPCに話しかけられるようになり、いよいよ戦闘シーンを実装することに。
戦闘シーンの仮実装
「戦う」の後、サブメニューで「なぐる」を選べるようにしたい。
・戦闘シーンに入ったら、敵の当たり判定枠が表示されている。
・戦う→なぐる、を選んだら、照準が表示される
・照準をカーソルで移動してEnter、もしくは戦闘シーン上のタップ・クリックで、攻撃を実施する。
敵は左右に動いて照準を避けることがある。素早さがプレイヤーの素早さよりも高いほど、避ける確率が高い。
敵の形状内に照準が当たったら、敵のライフポイントが削られる。
「なぐる」は武器をつけていない時を想定。
こんなゆるい依頼に対し、ささっとプログラムを書いてくれたのはさすがだが、今度は戦闘画面のバトルメッセージエリアが画面から消えてしまったた。
それを直すと、今度はなぜかフィールド画面で戦闘画面のメッセージエリアが出てきてしまう。
フィールド画面を直すとまたバトルメッセージエリアが消え、ムービー画面と戦闘画面が縦に並んでしまう。
さらにフィールド画面自体が消え、ムービー画面がはみ出し、不要なdiv閉じタグが現れ…ともぐら叩き状態。
動いていた時のソースを張り付けてそれをベースにするように依頼したが、それでも直らない。
結局、ChatGPTは置いておいて手元のソースをあれこれいじる羽目に…
そうこうするうち、画面右側に表示されていたプログラムエリアから一部のプログラムが消え、ChatGPTがコード反映しようとしてもエラーが出るようになってしまった。
必要であれば、キャンバスで handleCommand や handleTargetConfirm 関数が書かれている部分を一緒に編集して、私が反映することもできます！お申し付けください。
失敗するたび言葉が丁寧になってきて、とうとう執事みたいになってしまったなあ。…ん？ このエリアって編集できるの？
キャンパスという機能を使えば、全てのコードで共同作業ができるの？
はい、まさにそのとおりです！
×キャンパス 〇キャンバスですな。誤字には触れずにちゃんと解釈してくれる優しいChatGPT。
右のエリアはいじれないように見えたが、どうやらブラウザの応答が悪かっただけで普通に書き込めるらしい。
全体を動くバージョンに差し替え、ChatGPTの差し込む不要なゴミを取り除いてみると…やった！ ようやく動くようになった…！
試作品第一号 ～ 実装できたこと
こうしてひたすらにやり取りを重ねた結果、できあがったのがこの画面だ！
▲ ゲームテンプレート画面。←リンク先から実際に動かせますよ！
・フィールド上のプレイヤーをカーソルキーで動かせる。壁にぶつかれば止まる。
・プレイヤーがNPCにぶつかると、戦闘シーンに突入。
・敵は仮に頭・体・足と、ヒットエリアごとに色分けされている。
・「戦う」をクリックすると「なぐりますか？」と聞かれるので、黄色い照準枠をカーソルキーで動かして、スペースキーで攻撃。
・敵は確率で回避行動をとる（ただし方向はランダムだし、攻撃をよけきれてない）
・勝利するか逃げ出すかするとフィールド画面に戻る。
・右上のボタンでテスト的にモード切替
まだまだ問題だらけではあるものの、短い時間でここまで進んだだけでも快挙なのではなかろうか。
主人公の名前が勝手に「レオン」になってたり、ムービーシーンで「夜明け」「……旅の始まりだ。」みたいな言葉を創作してあったりで、なんだか面白いなあ。
さて、次回は画像やマップチップを作るツールについて説明するよ！