はじめに

「COASTLINE RUN」は、夕暮れの海岸線を走る、ブラウザで遊べる3Dレースゲームです。このゲームは、OpenAIのAIコーディングエージェント「Codex」を使って作りました。使ったモデルは gpt-6-sol、推論レベル（考える深さの設定）は「中」です。

デモを開く

この記事では、Codexが実装だけでなく、動作確認まで自分で行いながらゲームを仕上げていった過程をご紹介します。3Dのコースや車の描画、効果音とBGM、順位や周回の判定、スマートフォン対応までを含めて、指示は日本語の短い文章だけでした。

本文中、実際にCodexへ伝えた内容は、次のように引用形式で示します。

記録が残っている発言はそのまま、記録が残っていないものは当時の趣旨をまとめ直した例として載せています。それ以外の地の文では、その指示に対してCodexがどう対応したか、どういう仕組みになっているかを解説します。

COASTLINE RUNとは

まずはゲームの概要をご紹介します。

• ブラウザのみで動作し、ダウンロードは不要
• PC（キーボード）とスマートフォン（タッチ）の両方に対応
• 夕暮れの海岸線のコースを3周し、色違いのライバル車2台と順位を競う
• アクセル、ブレーキ、ドリフトを自分で操作する手動運転のほか、車が自動で走るオート走行も選べる
• 周回数と順位、タイム、速度、コースの地図が画面に表示される

スタート画面は、次のとおりです。

使っている技術：画像も音声も、すべてプログラムで作る

使っている技術は、次のとおりです。

• 3Dの描画：Three.js（ブラウザで3Dを描くためのJavaScriptライブラリ）
• 言語・ビルド：TypeScript（型を指定して間違いを減らせるJavaScript）と、Vite（開発用のサーバーと、公開用のファイルを作るツール）
• 音：Web Audio API（ブラウザの中で音を作って鳴らす標準の仕組み）
• テストと検証：Vitest（部品ごとの動作確認）、Playwright（ブラウザを自動で操作して動作確認）、ESLint（書き方のチェック）

画像や音声のファイルは、1つも使っていません。

形と質感は、プログラムで描く

コースは、数百の点をなめらかな曲線（Catmull–Rom曲線）でつないだ、1周の輪として作っています。路面、縁石、ガードレール、車、ヤシの木、海や山、建物も、すべてプログラムで組み立てた形です。

路面や縁石の質感も、画像ファイルの代わりに、ブラウザの描画機能（Canvas）で実行時に描いています。この「テクスチャの画像は、すべてプログラムで生成する」という条件は、最初の指示で伝えたものです。

効果音とBGMも、プログラムで鳴らす

効果音とBGMも、音声ファイルは使わず、音の波形をプログラムで組み合わせて作っています。カウントダウンの音、ドリフトや接触の音、速度に合わせて変わるエンジン音、ゴールのファンファーレ、レース中のBGMが、すべてこの方法です。

最初の依頼：まず検討し、イメージ図を作り、シンプルなデモにする

最初の依頼は、短い文章でした。

まず、実装の前に「検討して」と頼んで、方針を固めました。続けて、2つの依頼を順に出しています。

イメージ図は、完成形の見た目を共有するための参考用で、ゲームの中では読み込んでいません。そのあとのシンプルデモの依頼で、Codexが、コース、車、海辺の景観、追従カメラ、速度とタイムの表示までを、ひと続きで実装しました。

「まずは」を重ねて、少しずつ進める依頼の仕方です。最初から全部を頼まず、検討、イメージ、動くデモと段階を踏むことで、方向がずれても早めに直すことができます。

Codexが、実装と確認をひと続きで行う

この制作で特に印象的だったのは、Codexが、コードを書くだけで終わらず、動作確認まで自分で行ったことです。作業の取り決めを書いた指示ファイル（AGENTS.md）には、次のように書いてあります。

• 起動の手順と、確認に使うコマンドをまとめておく
• PCサイズ（1440×900）とiPhone 13サイズの両方で、画面を開いて、加速、ステアリング、画面表示、ブラウザのエラーを確認する
• 実行した確認コマンドと結果（成功か失敗か）を、簡潔に報告する

この取り決めのとおり、Codexは、変更のたびに、書き方のチェック、部品ごとのテスト、型のチェック、本番用のビルドを実行し、さらにブラウザを自動で操作して、PCとスマートフォンの画面で動作を確かめました。最終的には、部品ごとのテストが12件、ブラウザでの確認が9件ほどあります。ユーザーが試して不具合を見つけたときも、同じ流れで、修正と確認を行っています。

テストでは、車が自動で走るオート走行を使って、周回数の表示などを、人が操作しなくても確認しています。

画面の見た目は、スクリーンショットを撮って、目で見て確認しています。数字だけでは分からない、「見え方」の問題を見つけるためです。

試作を動かしながら、指示とテストを繰り返す

BGMを、レースに合う曲に作り直す

BGMは、最初の版を試聴して、2点の修正を依頼しました。

Codexは、メニュー画面のBGMとそのボタンを取り除き、レース用の曲を作り直しました。テンポは128BPM（1分間に128拍）で、4小節のコード進行を繰り返す構成です。足の速い走行感を出すために、4拍ごとのバスドラム、2拍目と4拍目のスネア、細かいハイハット、ずらした位置のベース、旋律を重ねています。

ドラムの音も、音声ファイルではありません。バスドラムは、低い音から下がっていく波形で作り、スネアとハイハットは、ノイズを加工して作っています。

エンジン音は、最初、BGMに埋もれて聞こえませんでした。試聴の感想を受けて、音量を調整し直しています。効果音とBGMは、別の音量の系統に分けてあり、「SOUND」ボタンで、まとめてミュートすることができます。

周回数の表示が、車を隠した

3周のレースで、周回が進んだことが分かるように、周回を終えたときの「残り2 LAP」「残り1 LAP」という表示を依頼しました。

当時の依頼を、趣旨をまとめて再構成した例です。Codexは、画面の中央に大きく表示する形で実装しました。ただ、実際に走らせてスクリーンショットで見ると、表示が、自分の車と重なって、前方が見づらくなっていました。

そこでCodexは、表示の位置を、PCでは画面の上寄り、スマートフォンでは上から3分の1あたりに移しました。両方の画面サイズで、車と重ならないことを、スクリーンショットで確認しています。

周回の地点を、分かりやすくする

コースのどこで1周が終わるのかが分かりにくい、という課題もありました。Codexは、周回の地点に、アーチ（門）とチェック柄のラインを置き、コースの地図にも、同じ地点の印を付けました。アーチの看板の文字も、プログラムで描いています。

最初は、車がアーチの真下からスタートする配置でしたが、アーチが画面の上を塞いでしまいました。そのため、車の初期位置を、少し手前に移しています。

操作の説明と、オート走行の設定

ゲームを初めて開く人のために、メニューに、PCとスマートフォンの両方の操作を説明するパネルを追加しました。

オート走行は、開発中は最初から有効でしたが、現在は、最初は無効です。切り替えた選択は、ブラウザに保存されて、次に開いたときにも残ります。

アップロードスキルについて

このゲームは、さくらのレンタルサーバーの「アップロードスキル」を使って公開しています。AIエージェントに話しかけるだけで、ドメインの設定からファイルの転送までを進めることができます。

使い方は、次の記事で扱っています。

これからAIでゲームを作る人に向けたポイント

• AIでの開発では、テストが特に重要になります。AIは短い時間で多くの変更を行うため、変更のたびに、動作が壊れていないかを確かめる仕組みが欠かせません。この制作でも、書き方のチェック、部品ごとのテスト、ブラウザでの自動確認を、毎回実行しました
• テストを効率よく行うために、人が操作しなくても進む仕組みを、早めに作るのがおすすめです。このゲームでは、車が自動で走るオート走行を、開発の初期から入れました。周回数の表示や、3周の判定のように、遊ばないと確かめにくい部分も、オート走行を使った自動のブラウザテストで、人が毎回遊ばなくても確認することができます
• 最初の依頼は、短くて構いません。ジャンルの参考、使う技術、守る条件（テクスチャ画像はプログラム生成のみ）を伝えて、「まずは検討して」から始めることができます
• 「まずは〜して」と、段階を踏んで頼むと、方向を直しやすくなります。検討、イメージ、シンプルなデモの順に進めました
• 動作確認の手順を、指示ファイルに書いておくと、変更のたびに確認が行われます。PCとスマートフォンのサイズ、実行するコマンド、結果の報告の仕方まで決めておくことができます
• 見た目の問題は、画面を見ないと分かりません。周回の表示が車を隠したことのように、スクリーンショットで確認して初めて気づく問題があります
• 音の好みは、試聴して伝えるのが確実です。BGMの曲調や、エンジン音の大きさは、自動のテストでは判定できません

公開デモ

「COASTLINE RUN」のデモは、次のリンクから開くことができます。

デモを開く

ほかのゲームデモは、次の記事でまとめてご紹介しています。

まとめ

「COASTLINE RUN」は、Codex（gpt-6-sol、推論レベル「中」）を使って、短い日本語の指示を重ねて作った、ブラウザの3Dレースゲームです。3Dの描画、効果音とBGM、周回と順位の判定、スマートフォン対応までを、画像や音声のファイルを使わずに実装しました。実装から、テストと画面の確認までをCodexが行ったことで、指示は、見た目や音の好みの修正に集中することができました。