世界を動かす技術を、日本語で。

HNに表示: AIでタワーディフェンスゲームをコーディングし、その過程を記録しました

概要

Tower of Time は、時間操作とタワーディフェンスを融合したブラウザゲーム。 AIによるコーディング支援で開発され、 Beginner's Jam Summer 2025 に提出。 Phaser.jsを用いた初のゲーム制作経験を詳細に記録。 AI活用のメリット・課題、技術構成、開発プロセスを公開。 GitHubでコード・プロンプト全公開、誰でも学べる資料提供。

Tower of Time:AIと共に作るタイムトラベル・タワーディフェンス

  • Tower of Time は、時間を巻き戻して戦略を再構築できる新感覚タワーディフェンスゲーム。
  • 敵のウェーブ に対して拠点を守る、時間操作を駆使するプレイ体験。
  • 複数のタワータイプ (基本タレット、スナイパータワー、スローダウン、スプラッシュダメージ)を活用。
  • エネルギー管理 によるタワー設置・時間巻き戻しのリソース戦略。
  • ウェーブ制敵出現 による緊張感とリプレイ性。

主な機能

  • 時間巻き戻し機能 による戦略の再構築。
  • 多彩なタワー とアップグレード要素。
  • エネルギーシステム を用いたリソース管理。
  • キーボード・ゲームパッド両対応 の操作性。

操作方法

  • 移動 :矢印キー / アナログスティック
  • アクション :スペースバー / Cross(PlayStation) / A(Xbox)
  • 巻き戻し :Backspace / Left Trigger

AI活用によるゲーム開発の実証

  • 本作は AI支援によるゲーム開発のPoC(概念実証) として制作。
  • コードの約95% をAI(Augment Code, Cursor, Claude Sonnet 4等)で生成。
  • Claude Sonnet 4 はPhaser.jsにも精通、特定機能は公式ドキュメントURLを共有して精度向上。
  • デバッグ時は AIにログ出力を指示、解決困難時はプロンプトの再設計が有効。
  • AIはコード量が多くなりがち、冗長性に注意。

技術スタック・開発環境

  • ゲームエンジン :Phaser 3(v3.90.0)、Phaser Editor v4
  • 言語 :TypeScript
  • ビルドツール :Vite
  • 開発要件 :Node.js、pnpm
  • 主なコマンド
    • pnpm install:依存関係インストール
    • pnpm dev:開発サーバー起動
    • pnpm build:本番ビルド

プロジェクト構成

  • src/
    • main.ts:エントリーポイント
    • scenes/:シーン管理
    • prefabs/:プレハブ(プレイヤー・タワー・敵)
    • systems/:システム(エネルギー・ビルド等)
    • components/:コンポーネント(入力・巻き戻し)
    • ui/:UI部品
    • utils/:ユーティリティ
  • public/
    • assets/:画像・音声・フォント
    • style.css:CSS
    • index.html:ゲーム開始ページ

クレジット・ライセンス

  • 企画・コーディング・アート :m4v3k
  • バランス調整・メニュー音楽・テスト :death_unites_us
  • ゲーム内音楽 :"Amnesia Fortnight - A - Spacebase DF-9"
  • アートアセット :jonik9i, Robocelot, Foozle, Lunarnia, Screaming Brain Studios
  • サウンド :freesound.org
  • ライセンス :MIT License

開発者ノート・学び

  • 20年以上のソフトウェア開発経験 を持つが、ゲーム制作は未経験。
  • AIコーディングエージェント の登場により、初挑戦を決意。
  • Phaser.js の基礎を学び、 Beginner's Jam Summer 2025 へ参加。
  • 約25~30時間 (本業後の作業)で Tower of Time を完成・提出。
  • AIでのゲーム開発は十分実用的、特にプロトタイピングが高速。
  • プロトタイプから本番移行時はAIの出力精査が必要
  • コードとプロンプトをGitHubで全公開、学習資料として活用可能。
  • アートはitch.ioの無料素材中心、サウンドはfreesound.org利用
  • 開発過程の一部をTwitchで配信 (5時間超の長編動画)。
  • 次回作はさらに野心的なプロジェクトを目指す
  • コメント・質問歓迎、知見の共有を重視。

プレイ・資料リンク

Hackerたちの意見

これ、めっちゃいいね。俺もソフトウェア業界に20年以上いるけど、気づいたことが一つある。俺たちの仲間の多く(ほとんど?)がAIコーディングに対してすごく懐疑的なんだよね(それともただ無関心なのかな)。最近、AIを使って大きめのアプリ(約34,000行のコード)を開発したんだけど、感じたのは、得られる効果は指示の質やインタラクションの構造、出力に対する注意の払う量に比例して指数関数的に増えるってこと。「他のツールと同じだよね!」でも、特に言うと、特定の効果は今まで出会った「10倍」ツールの中で10倍以上だと思う。だから、他のツールと同じように使うけど、もっと効果的にね。懐疑的な人たちが見落としてるのは、これを外部のものとして扱うべきじゃないってこと。意図した結果の説明が不十分なままタスクを完全に委任しようとすると、うまくいかないよ。いつかはこれらが私たちの心を読める日が来るかもしれないけど、今日はその日じゃない。今できるのは、自分の考えを明確にする手助けをしてくれること、新しいことを教えてくれること、面倒な作業をサクッとこなしてくれること。最大限の効果を得るためには、自分の認知ループに組み込む必要があるね。

得られる効果は指示の質やインタラクションの構造、出力に対する注意の払う量に比例して指数関数的に増える。 俺もそう思う。多くの人が良い結果が出ないと落胆するけど、良い結果を得るためにはAIエージェントとのインタラクションの仕方を学ぶ必要があるんだよね。これは使えば使うほど上達するスキルだと思う。それに、AIツールの中には特定のユースケースに対して優れているものもあるから、自分のやっていることに合ったものを見つける必要があるよ。やっと理解できたとき、これらのツールからどれだけの価値を引き出せるかに気づくと、もう戻れなくなるよ。

さらに、学習曲線やスキルの限界が人々が思っているよりもずっと高いってこともあるよね。それに、Claude Opusを厳密なエージェントの枠組みで動かすのと、ブラウザでGPT-4oに聞いてコピペするのでは、結果が全然違うからね。

前にもコメントしたけど、俺はHN基準では比較的懐疑的な立場にいる「意見のアービトラージ」みたいな感じで、実際には職場での利用をもっと推進してるんだ。実際、Claudeが終わるのを待ちながらこれを打ってるし。俺が懐疑的なのは、彼らが売り込まれているものと実際にやっていることとの間にギャップがあるからなんだ。すべてのAIソリューション、特にエージェントは、経験豊富な人の指導がなければ実質的に無価値なんだよね。実際には「自律的」なものなんてほとんどない。あの「バイブコーディング」という言葉を作った人が、舞台で「馬車を馬の前に置いている」って言ったのもその通りだよ!彼らが素晴らしいツールであることは間違いないけど、かなり制約が必要だってことを省略するのは、実質的に嘘だと思う。

この数ヶ月で、俺も同じ結論に強く至ったよ。実は以前はAIに関してネガティブなコメントをしてたんだ。AIが限界に達するって話があるけど、最新のツールは大幅に改善されてる。今では、以前は数週間かかってたことを数時間でこなせるようになったよ。もちろん、プロンプトを考えたり、細かく分解したり、AIをIDEと上手く統合したりする必要があるけどね。一番の成果は、新しいフレームワークやライブラリに出会ったときだよ。従来は「新しいライブラリや言語、フレームワークの使い方のコードサンプルを探して、それを自分のタスクに合わせて加工する」ってサイクルを経てたけど、AIはこれが得意で、時には本当に驚かされる。「あれ、ライブラリにはXを達成するもっと簡単な方法があったんだ!」まだ懐疑的な人には、もう一度試してみる時だと思う。

俺たちの仲間の多く(ほとんど?)がAIコーディングに対してすごく懐疑的なんだよね(それともただ無関心なのかな)。 俺はほとんどの開発者がコーディングの際にAIを積極的に使っていることを願ってるよ。ここ6ヶ月は生のプログラミングスキルが中堅か上級レベルに達したように見えるし、才能と愚かさの間には面白いほどのばらつきがある。声高に主張するプログラマーたちは、将来の見通しに恐れを抱いているかもしれないし、彼らと話し合う余地はあまりないから、放っておくしかないんじゃないかな。

この投稿は俺にとって興味深かった。俺もプログラミングの経験が豊富だけど、高校の「ハント・ザ・ワンプス」以外はゲームをプログラムしたことがないし、最近新しいゲームのためにAIを使い始めたんだ。AIは俺にとって三つのことになった。(1) 学習ツール。実際に素晴らしいのは、正しい用語がわからないときに俺の質問を理解してくれること。これのおかげで、答えの出発点を得られるんだ。それに、未知の未知を明らかにしてくれるのが本当に素晴らしい。これが俺にとって一番重要なことかもしれない。(2) 面倒なことや退屈なことをやるためのツール。俺ができるけど時間がかかることをやってくれる。コードのコメントや、通常は自分で編集する設定ファイル、他のテキストベースの冒険など、いろんなことに対して十分に役立つことがわかった。(3) 検索。これも(1)と同じで、俺が本当に求めていることを理解しているから、実際に何と呼ばれているかは関係ない。俺はそれにフィルタリングさせたり、提案をさせたりしてる。考えさせることもできるけど…なんでそうするの?君の方が賢いから。単に速くて、より多くのことを知っているだけなんだ。君の脳のCPUに対するFPUみたいなもんだね。

特定のレバレッジの違いは、今まで出会ったどの「10倍」ツールよりも10倍だよ。だから、どのツールもそうだけど、特にね。私にとっての一番の比較は言語かな。昔の「lisp [または他の言語]はもっと早く、もっと多くのことができる」ってアイデアだけど、面白いひねりがあって、書くコードを減らせるけど、生成されたコードは速くて高性能な言語で、SBCLのために型注釈をあちこちに追加する余分な作業なしで済む。だけど、生成されたコードの中には、特定の作業のために確認が難しい部分があって、そこをしっかりダブルチェックしないといけないっていう落とし穴もある。もちろん、表現力豊かな言語は、計画がしっかりしていない人たちによって、メンテナンスが難しいコードベースがたくさん作られる結果にもなってるから、そういうのはまだまだたくさん出てくると思う。でも、私にとっての本当の、さらに大きな勝利は、100%新しいコードを書く時間が少なくて、古いコードと新しいコードを統合したり、古いコードを改善したりするのに時間をかけるよりも、デバッグが超強化されること。デバッガーは、いろんなことに対してprint文を使うよりも大きな改善だよ。コードのブロックをコピー&ペーストして、「出力が[これ]じゃなくて[あれ]みたいに見えるんだけど、何が起こってるの?」って言えるマシンがあって、すぐに一般的に良い提案をくれる新しい目を持ってるのは、他の多くのことにとっても大きな改善だよ。特にデバッガーをつけにくいタイプのもの(SQLや「コードとしてのインフラ」、ビルドスクリプトなど)に関してはね。

君の作品は美しいね;コードも素晴らしい。AIを使っただけじゃなくて、もっと手を加えたんだろうね。俺はずっと前にコーディングをやめたけど、最近友達にAIアシストのコードを試してみるように言われて、ちょっといじってみたんだ。出来たのはバブルラップポッパーとサイレンサーだけだったけどね。:-) https://bubble-pop.oinam.com https://void.oinam.com

AndroidでChromeを動かしてるけど、バブルがポップしないんだ。カウントはゼロのまま。PRは受け付けてる?

Augment Codeって初めて聞いたんだけど、何するツールなの?他の選択肢と比べて、なんでそれを選んだの?どれくらい効果あった?おすすめ?

これについても聞きたいな—OPはCursorでAugment Code使ったの?それってどうやって機能するの?何が得られるの?両方にお金払ってるの?

開発に使われたプロンプトを読むのがめっちゃ楽しい!(https://github.com/maciej-trebacz/tower-of-time-game/blob/ma...) 「バイブコーディング成功ストーリー」みたいな投稿が多いけど、MCPの適切な組み合わせや、20人のエージェントを並行して使う複雑なClaudeコードのオーケストレーションフローがあれば、「時間を巻き戻すタワーディフェンスゲームを作成せよ。セキュリティホールなし。バグなし。」ってプロンプトで一発でゲームができると思わせるけど、実際にこのプロジェクトで使われたプロンプトは、AIコーディングでうまくいくための私の経験に合ってる。つまり、やりたいことをしっかり考えて、数百の小さな問題に分けて、重要な部分には具体的なアーキテクチャの指示を出すって感じ。

ボードゲーム「Just One」のためにシンプルな静的HTMLゲームを作ろうとしたんだけど、テキストボックスに単語を入力すると、スマホの全画面に表示される仕組みなんだ。でも、入力中にテキストボックスが動き回るバグがあって、試した4つのLLMではどれも直せなかった。どれだけプロンプトを出してもダメだったよ。みんながどうやって一発でゲームを作れるのか、テキストボックスが画面で動き回るのすら止められないのに :(

AIコーディングでうまくいくのは、やりたいことをしっかり考えて、数百の小さな問題に分けることだよ。 私に合ってるテクニックは、AIに基本的な機能やゲームプレイを一発で作らせて、それを基に何度も改良していくこと。最初の一発はすぐに印象的であるべきで、そうじゃなければ捨てて、プロンプトを修正して再挑戦するまで。

偶然にも、それは昔ながらのアプリ開発の成功とも強く関連しているみたいだね。

「バイブコーディングの成功ストーリー」についての投稿がたくさんあるけど、どこでその「たくさんの投稿」を見たの?そんな具体的な主張をする真剣な人を見たことがないよ。 > 何をしたいのかをしっかり理解して、それを数百の小さな問題に分けて、重要な部分に具体的なアーキテクチャの指針を持つこと。これが、CGPTプレビュー以来LLMボットを使ってきた方法で、すごく役立っていて、生産性が100倍になった。問題は、実際に構築する方法を知らない人たちの間にあるみたいで、完璧なオラクルを求めてランプの精霊のような存在を期待して、実際の作業に対して怒っている。ここ数年で学んだのは、ほとんどのエンジニアが実際には機能的に悪いエンジニアで、成功するプロジェクトを一から終わらせるために必要な知識の1/1000しか知らないってこと。私の仮定は、実際に一緒に働いた悪いエンジニアたちが、実際には良いエンジニアの大きなグループの偶然のサンプルだと思っていたんだ(実際に数年の間に良いエンジニアとも働いてきたけど)。でも、実際にはそれはほんの少数派で(他の分野と同じように)、ほとんどの人は自分のやっていることがあまり得意じゃないんだ。

AIコーディングで最も効果的なのは、何をしたいのかをしっかり理解し、それを数百の小さな問題に分け、重要な部分に具体的なアーキテクチャの指針を持つこと。 テックリードとして、時々プロダクトオーナーの役割もやっているけど、これは人間でも同じようにやるべきだよ。私の仕事の少なくとも70%は、経営者の「タイムトラベルタワーゲーム。バグなし。」を、みんながチームで作業できるように、強いアーキテクチャのビジョンを持った長いプロンプトのシリーズに翻訳することなんだ。お互いの足を引っ張らないように、適切な抽象度でね。

一番うまくいくのは、最初の機能を手動でコーディングして、コードベース自体が自己文書化された存在になることだね。そしたら、残りは雰囲気でコーディングできる。未来の機能は最初の機能から十分なパターンが定義されるから(スキーマ、フォルダ構造、モジュール、ビュー、コンポーネントなど)、明示的な雰囲気コーディングのルールをほとんど定義する必要がなくなるよ。

それはすごいし、めっちゃモチベーション上がるね。プロンプトをドキュメント化してるのもいいね。私の経験では「バイブコーディング」は、スピードアップすることもあれば、逆に遅くなることもある。簡潔で明確な指示を使って、コードを素早くレビューできて、アーキテクチャを理解していれば、プロセスをかなり早められるよ。

インディーゲームは、コーディングAIのすごくいい使い道になると思う。リスクが低くて、楽しさ重視だし、相性が良さそう。最初のコミット[0]にはたくさんのコードがあるけど、まだPROMPTS.mdがないみたい。例えば、EnergySystem.tsはこの最初のコミットにすでに存在してるけど、後でPROMPTS.mdに出てくるのは、AIがゼロから作ったことを示唆してる。リポジトリのこの部分の歴史について、もう少し詳しく教えてもらえる? [0]: https://github.com/maciej-trebacz/tower-of-time-game/commit/...

これはゲームジャムのエントリーで、締切が1週間だったから、最初の2〜3日はかなり急いで作業してたんだ。だから、最初のコミットがめっちゃ大きくなっちゃった。プロンプトもその場でメモしてなかったし、ゲームが完成した後に使ったツールのチャット履歴を遡って、全てのプロンプトをPROMPTS.mdファイルにコピーしたんだ。プロジェクトの進行を追いたいなら、プロンプトファイルを上から下まで読むのが一番いいよ。例えば、EnergySystem.tsファイルは、敵の経路探索やスポーン、タワーの射撃が終わった直後に作成されたもので、AIが「エネルギーサブシステムを実装したい」というプロンプトを使ってゼロから作ったんだ。

読んでくれてありがとう!私も20年以上のテック経験があって、Gemini-cliを使ってエンタープライズアプリケーションの統合テスト用のツールをゲーム化しようと行ったり来たりしてるんだけど、GeminiとMCPサーバーを使うことでできることは本当にすごいよ。問題を小さく分けて、プロンプトの指示を明確にすると、ポジティブな結果が出てる。AIは間違いを犯したり、アプリケーションのルーティングみたいにループにハマったりすることもあるけど(笑)、問題があるときは喜んで介入して、AIと効果的にペアプログラミングをするよ。Duplication Is Evilみたいなことを強制するのに、今が一番いい時期だと感じてる。そうしないと、AIがある部分で変更を加えても、別のファイルに同じような変更を忘れちゃうからね。これはプログラミングロジックだけでなく、ユーザーエクスペリエンスやアプリケーションの挙動にも当てはまる。とにかく、すごい世界だよ。AIと私が数時間で作り上げられるものを作るのに、数週間かかっていたはずだよ。Geminiに個性を持たせることも、私にとっては重要な機能なんだ。GEMINI.mdファイルのポータビリティが大好きで、他のデバイスにその個性を持ち運んで、カスタム仕様に合わせて調整できるのがいいね。

AIはたくさんのコードを書くのが好きみたいだね。先週末、初めてグリーンフィールドのサイドプロジェクトをバイブコーディングしたけど、準備不足だった。必要以上に5倍くらいの関数を書いて、型定義を全然信じてなかった。無関係なプロパティアクセスのためにランタイムガードをたくさん追加してたよ。新しいファイルや変更を自分が書いたって主張するのを見て楽しんでたけど、数時間後にはそれを忘れて、何度も「レガシー」コードって呼んで、元の作者の意図を勝手に想像してた。まあ、そうだね、Claude(どのClaudeかはわからないけど)は、冗長な表現が好きみたい!特に、内蔵ブラウザでウェブアプリを読み込んで、自分の作業をチェックして、ページが開く前に問題を見つけたって主張するのが面白かった。Pythonツールを使うのにすごくこだわってるのも気づいたよ… TypeScript/Node/npmプロジェクトなのにね。全体的には楽しかったし役に立ったけど、PMや非エンジニアがプロンプトを使って一から生産品質のソフトウェアを書くには、まだまだ道のりが長いね。

私の経験では、Claude SonnetはClaude Opusよりもずっと冗長で、その結果としてコードも悪くなる。両方を同じタスクで使ってみると、その違いはかなり明確だよ。

これありがとう!前にタワーディフェンスを作ったことがあって、AIを使って新しいウェーブをデザインしたり、ヒットポイントやスピード、アーマーを調整することを考えてたんだ。ゲームが動いている時の「感覚」を得る方法が必要かもなって思った。もしかしたら、見えるゲーム状態をトークンにエンコードするためのプロトコルが必要かも。地形やゲームエンティティの位置、プレイヤーに見える他のプロパティも含めてね。全体に対してストレートなオートエンコーダーはうまくいかないと思うけど、ゲーム要素のオートエンコーダーならトークンのリストとして機能するかもしれない。そうすれば、ゲームは画面がどう見えるかの画像と、エンジンから直接出力されたトークンを提供して、AIに実際に何が起こっているかを理解させることができるかも。モデルがトークンを効果的に使うためにはどれくらいのトレーニングが必要かはわからないけど、現在の埋め込み空間が数個のトークンでゲーム状態を表現できるなら、微調整だけで済むかもしれないね。「ただ」ゲームログのトレーニングセットがあって、人々がどれだけ楽しんだかの測定値があればいいんだ。そんなデータセットを作る人には面白い情報があるかも。プレイヤーの好みのクラスターを特定できれば、異なるプレイヤータイプ向けに既存のゲームのバリエーションを作る扉が開かれるよ。

プロンプトをソースコードとしてチェックする人たちや、「再現可能なビルド」を作る人たちがいて、コンベンションで隣に座ってるって考えるとめっちゃ面白いなと思ってる。