目次
Shopifyの販売者に、倉庫で注文が進む流れを体験してもらい、変更されたときに何が起きるかを見て、ストアに役立つものを持ち帰ってもらいたいと思いました。それが、無料で英語のみのブラウザゲームWarehouse Rushになりました。
商品をピッキングし、キットを組み立て、荷物を梱包し、バンへ積み込み、集めた現金を投資します。Maple DepotはRiverside Warehouse、Aurora Fulfillmentへと成長します。ゲームには、オファーの選び方とテスト方法を扱う実用ガイド、The Nine-Figure Upsell Playbookが付いています。
AIコーディングエージェントで3Dブラウザゲームを作りたい方に向け、私たちの開発記録を紹介します。Three.js、Codex、Claude、Higgsfield、ElevenLabsと、開発中に変わった部分も扱います。
上の画像は宣伝用のキービジュアルです。以下の倉庫のスクリーンショットが、実際にプレイできる世界を示しています。
Shopifyアプリが倉庫ゲームを作った理由
体験そのものが注文の流れを説明し、報酬が販売者の実践を助ける、見込み顧客向けのコンテンツを作りたいと考えました。
Revizeは、購入者がフルフィルメント前に対象のShopify注文を編集できるようにします。運用上、注目すべきなのは、顧客が注文を変更してから倉庫が出荷するまでに何が起きるかです。3PLがすでにピッキング中の注文のガイドでは、実際に必要な連携を扱っています。
ゲームは、その縮小版を見える形にします。商品は特定の注文に属します。変更された注文は、出荷前に修正と最新のラベルが必要です。梱包、在庫、配送は、つながった作業です。
その説明の後で販売者が行う実務を、プレイブックが補います。表紙には「選ぶ / 作る / 確認する / 決める」と「9桁の売上規模のブランドとの仕事から得た実践的な知見」とあります。16ページにわたる6つのミッションは、有用な組み合わせの選定、オファーの作成と配置、意図したオファーの優先、支払いの確認、結果の診断、自社のスコアカードに基づく判断を扱います。
メールアドレスとストアURLでゲームに入ってください。最初の荷物を出荷すると、アップセルのプレイブックを獲得できます。これは、このテーマを操作しながら知るための導入です。職場研修の成果について、報告できる測定結果はありません。
技術構成と重要な境界
Three.jsが倉庫を描画し、TypeScriptがルールを保持し、Viteが独立したブラウザプロジェクトをパッケージ化します。
ゲームには、ウェブサイトのAstroプロジェクトとは別に、独自のソース、ロックファイル、テスト、アセットがあります。Viteは、静的な本番ビルドの手順に沿って、相対アセットパスを使ったブラウザ用バンドルを生成します。
主な境界は、シミュレーションとその表示の間にあります。
tycoon-model.tsは、注文、数量、荷物の所有関係、変更履歴、作業員、現金、セーブデータの検証を担当します。tycoon-world.tsは、その状態を描画し、シーンの視覚リソースを管理します。tycoon-entry.tsは、入力、メニュー、保存、音声、フレームループを接続します。
アニメーションのコールバックから在庫やお金を付与することはありません。宙を飛ぶノートは、モデルの変更を伝える表示です。この区別によって、視覚効果の欠落と商品の消失を分けて扱えます。
プレイ中のカメラは、Three.jsの透視投影カメラであるTHREE.PerspectiveCameraです。レンダラーの平行投影カメラは、太陽光の影にだけ使っています。
Rapierは、派生元のライセンス履歴に登場します。現在の経営シミュレーションはRapierをインポートしていません。衝突、ナビゲーション、範囲を制限した小道具の動きは、直接実装しています。
コードで作ったものと、生成したもの
倉庫とアニメーションする登場人物はコードで作り、一部の画像、コンベアのモデル、ポータル動画、効果音には生成ツールを使いました。
ゲームの作り方を説明するとき、この区別は重要です。ポートレート、キャラクターリグ、動画は、必要な組み込み作業も異なる別々の成果物です。
| 部分 | 記録された出所 | ゲーム側に残る作業 |
|---|---|---|
| 倉庫、商品、現在の登場人物 | 独自のThree.jsジオメトリと、ローカルで描いたCanvasテクスチャ | レイアウト、移動、運搬、機械、状態に連動するアニメーション |
| 初期のポスターとportrait-v2セット | 組み込みのimage_gen / OpenAI画像生成。ASSETS.mdに記録 |
アセットの準備と画面への配置 |
| 出荷用コンベア | オーナーのHiggsfield 3D JutsuシーンをGLBで書き出し | 静的な小道具としての組み込み。荷物と操作はゲーム側が管理 |
| 以前のコンクリート床 | オーナーのHiggsfield PBRテクスチャセット | 過去のアセット。後の床表現はコードで作成 |
| ポータル | オーナーアカウントのHiggsfieldアセットとKling 3.0のクリップ | 表紙の差し替え、ループ編集、エンコード、入場タイミング |
| ゲームプレイ用の音声サンプル集 | ElevenLabsのeleven_text_to_sound_v2 |
読み込み、ミキシング、イベントへの接続、合成音の代替処理 |
アセット履歴には、途中で使ったイラストの登場人物も含まれます。Claude OpusがCanvas2Dアトラスと切り絵風アニメーションを作り、Codexが組み込みました。現在の引き継ぎ資料によると、それらの平面的なレイヤーはすでに削除され、現在の登場人物はThree.jsジオメトリを使っています。アトラスは開発履歴の一部であり、現在のキャラクターレンダラーではありません。
現在の横長・縦長のキービジュアルは、2026年10月24日に、Codexのgpt-6-astraが組み込みのOpenAI画像生成ツールで生成しました。所有権があり承認済みのゲーム内「Cozy Soft」レンダリングをスタイルの参照に、所有するv2キャラクターポートレートを人物の同一性の参照に使っています。配布ファイルはWebP形式にエンコードされ、プロンプトはart-src/menu-v3/jobs.tsvに保存されています。以下のポートレートは、記録された生成v2セットのものです。
開発履歴を失わずにCodexとClaudeを使った方法
役立ったエージェントの使い方は、具体的な仕事を割り当て、方向付け、実装、検証を誰が担ったか分かるようにするものでした。
記録から、具体的な貢献が分かります。ASSETS.mdは、実践向けプレイブックの編集方針をAstraとClaude Opusの貢献としています。Solが内容、共通レンダラー、ゲームメニューでの表示を実装しました。イラストの登場人物の履歴では、Claude Opusが作者、Codexが組み込み担当です。台帳には、Claude Opusが私の倉庫のキービジュアルに照らして、その登場人物を調整したことも記録されています。
拡張部分の検証記録には、承認済みの修正後に、後からOpusが完了確認したことも残っています。これらは実際の貢献を記述していますが、1つのエージェントがゲーム全体を作った、またはレビューしたことを示すものではありません。
これらの記録から再利用できる手順は、次のとおりです。
- 視覚面の作業を依頼する前に、動作と、その状態をどこが管理するかを定義します。
- 実装タスクに、対象モジュールまたはアセットの名前と、目に見える受け入れ条件を付けます。
- 古いセーブデータ、リソースの解放、失敗時の経路も含め、組み込みをレビューします。
- 完成した版の証拠を残します。以前の実験を置き換えたら、過去のものだと明記します。
最後の手順によって、実際にドキュメントのずれが見つかりました。レンダラーが変わっても、古いキャラクター表現の説明が残ることがあります。開発の説明にも、引き継ぎ資料と同じ注意が必要です。
生成メディアにも編集と実行時の設計が必要だった
生成で得たのは素材であり、後処理とイベントへの接続によってブラウザで使えるようになりました。
Higgsfieldのコンベアを書き出す際は、実際に使うシーンからサンプルの荷物、カメラ、ライトを削除します。そうしないと、見せるためのモデルがゲームの荷物を二重に表示したり、独自の照明を持ち込んだりする可能性があります。コンベアは静的なアセットのままにし、動く商品はシミュレーションが管理します。
ポータルには別の調整が必要でした。記録された手順では、Higgsfield/Klingの動画を使い、実際のプレイブックの表紙を映像に投影して、前進する動きのループを作っています。また、動く開口部の外側にある描かれた建築部分を固定し、テクスチャのちらつきを除去しています。ポスターフレームと最終エンコードは別々に確認します。
入場にも機能上の契約があります。見込み顧客情報の受け付けとゲームの準備の両方が成功する必要があります。ポータルがフェードアウトするのは、動作中のゲームがフレームの描画を確認した後だけです。映像演出が終わったことは、倉庫が入力を受け付けられる証明にはなりません。
音については、現在の引き継ぎ資料に、eleven_text_to_sound_v2で生成したElevenLabsの効果音を23個配布していると記録されています。ElevenLabsは、ゲームやインタラクティブメディア向けのテキストからの効果音生成を説明しています。私たちのサンプルは、ピッキング、封かん、バンの出発、アップグレード完了などの動作を扱います。
以前の台帳には、生成した効果音が24個とあります。引き継ぎ資料は配布数の違いを説明しています。ui-tapは生成しましたが、ボタンクリックを一元的に扱うフックがなかったため、省きました。
ブラウザは、音声の再生を許可する操作の後に、サンプル集を読み込んでデコードします。イベントがサンプルを呼び出し、利用できないサンプルには合成音で代替します。実行時にElevenLabsのAPI呼び出しやキーは不要です。音楽と小さな素材音はコードで合成し、音楽と効果音は別々の設定として保存します。
性能改善はレイアウトと読み込みから始めた
3Dシーンの処理量とともに、繰り返されるブラウザのレイアウト処理をなくし、必要なアセット容量を減らすことが重要でした。
記録されたdocs/perf-report.mdは、作業場所のボタン配置の中で、キャンバスを繰り返し測定していたことを指摘しています。フレーム内でスタイルを書き込んだ後に、getBoundingClientRect()を読み取っていました。キャンバスの矩形をキャッシュし、サイズ変更時に無効化することで、その繰り返しのレイアウト処理をなくしました。
そのレポートには、適応的な品質調整、アセットの並列取得、静的な小道具の結合も記録されています。フレーム処理時間が予算を超え続けると、品質設定はまずピクセル比を下げ、次に影とパーティクルを減らします。
規模の参考として、レポートのテストビルドには、JavaScriptバンドルが1,072 KB、gzip圧縮後は308 KBと記載されています。Maple序盤のスマートフォンサイズのビューポートの測定欄には、影の描画パスを含む59回の描画呼び出しが記録されています。これは、Apple Silicon上のヘッドレスChromeで、20秒のサンプルを使った過去の測定です。最新の公開用ビルドの監査でも、実機のスマートフォンでの測定でもありません。
コンベアは、そのレポートの後に変更されています。ASSETS.mdには、ジオメトリの簡略化やテクスチャなしで、meshopt圧縮により641,960バイトから51,044バイトになったと記録されています。ローダーは、圧縮GLB用にThree.jsのMeshoptDecoderを登録しています。古いレポートの未圧縮コンベアのサイズを、現在の値として提示してはいけません。
今後のビルドでも、シーンが各フレームで何を描画に渡すかと、最初にプレイ可能なフレームの前にブラウザが何を取得する必要があるかの、両方を確認します。
テストでは荷物の全工程をたどった
モデルテストは所有関係と数量・金額の整合性を確認し、ブラウザの確認は描画された一連の操作とコントロールを扱いました。
Nodeのテストスイートは、シミュレーション、ガイド付きレッスン、報酬、保存状態、コントローラーの動作を対象にしています。長い一連の流れを検証するツールは、実際のモデル経路をたどり、アップグレードを獲得し、受け付けた仕事を終えてから倉庫を移ります。節目で在庫、金額、保存と再読み込みを確認します。
拡張部分の検証には、ゲーム内で獲得して進めた48件出荷のキャンペーンと、RiversideとAuroraのルートで合計300件の配送に到達した継続実行が記録されています。これは正しさを確認する実行であり、プレイヤー数でも、初心者が無理なくチャプターを終えられる証拠でもありません。
ブラウザの検証では、モデルの一連の操作では分からないことを追加します。注文票が収まるか、ダイアログがスクロールするか、操作ボタンに届くか、ポータルの先に実際のフレームが現れるか、といった点です。記録されたChromeの確認は、デスクトップとスマートフォンサイズのビューポートを使い、動きを減らす設定や失敗ケースも含めています。
テストケースの例として、ギフト用品ストアがマグカップ2個とノート1冊を出荷すると考えてください。ピッキング後に、必要なノートを変更します。有用な検証条件は、最終的な荷物が現在の注文とラベルに一致し、影響を受けない商品の数も合っていることです。アニメーションの成功だけでは、それを証明できません。
組み立ても、この区別を見える形にします。スクリーンショットはテディベアのギフトセットを作るミニゲームですが、その表示も、荷物が内部的に保持する内容物と一致する必要があります。
人が行った判断と、次なら変えたいこと
もっと早くドキュメントを照合し、装飾を増やす前に実機のテストを優先します。
開発記録には、生成結果だけでは決められない人の判断があります。私は所有する参照アートを提供しました。ポータルのレビューでは、文字と輪郭の乱れがある高解像度化を却下しました。メディアの制作工程では、ファイルの測定値に加え、表紙の文字が読めるかや動きも確認します。これらは受け入れの判断であり、書き出しが成功しただけで決まるものではありません。
現在の引き継ぎ資料にも、具体的な制約が未解決のまま残っています。拡張した出荷エリアの端では、経路に沿った配送は動くものの、手動で歩くと駐車中のトラックと重なることがあります。スマートフォンでの遅延と表示の乱れの報告には、再現に必要な端末情報がありません。デスクトップのビューポート確認では、端末の性能も、その報告も解決できません。
進行状況はブラウザ内に保存されます。クラウドでのセーブ同期やマルチプレイはありません。パートナーオファーは保留中です。こうした範囲も、完成した画面とともに開発の説明へ含める必要があります。
販売者にとって、ゲームは説明のためのものです。商用の流れについては、購入後アップセルの表示場所ガイドを使ってください。Revizeのアップセル機能にはProが必要です。自社のオファーの操作手順は、テスト注文で確認してください。
今週取り組むこと
倉庫を拡張したり、さらにアセットを発注したりする前に、注文の処理サイクルを1つ完成させ、検証してください。
- 注文、在庫、荷物、報酬の状態をどこが管理するかを書き出します。
- 目に見える一連の操作を通して、ピッキング、梱包、出荷を動作させます。
- 各生成アセットの出所、処理、現在の用途を記録します。
- 再読み込み、読み込み失敗、動きを減らす設定を確認し、その後に実機のスマートフォンでテストします。
Warehouse Rushをプレイして、私たちの成果を確かめてください。メールアドレスとストアURLで入り、最初の荷物を出荷すると、The Nine-Figure Upsell Playbookを入手できます。6つのミッションで、販売者の作業を、名前の付いたオファー、テスト済みの支払い手順、そして自社で返金や削除後も残った追加商品と費用に基づく判断へと進めます。
よくある質問
ここでは、配布中のゲームと、以前の実験や記録されたテスト条件を区別して回答します。
AIコーディングエージェントで3Dブラウザゲームを作れますか？
はい。ただし実装には、明示的なルール、組み込み作業、検証が必要です。 Warehouse Rushはシミュレーションとレンダラーを分け、記録された作業にエージェントを使い、一連の操作全体を確認しています。生成アートは、在庫、荷物の所有関係、保存した進行状況が正しく動く証明にはなりません。
Warehouse RushのアートワークはすべてAI生成ですか？
いいえ。現在の倉庫とアニメーションする登場人物は、コードで作ったThree.jsの成果物です。 台帳には、生成されたポスターとポートレート、Higgsfieldのコンベア、ポータルメディアが別々に記録されています。以前のCanvasキャラクターアトラスもコードで作成しました。その履歴と現在のレンダラーを区別してください。
Warehouse RushはRapierの物理演算を使っていますか？
現在の経営シミュレーションはRapierをインポートしていません。 派生元のプロジェクト履歴とライセンス記録には登場します。現在の衝突、ナビゲーション、範囲を制限した視覚的な動きは直接実装しているため、ライセンス表示を残していても、現在の物理演算の依存関係を示すことにはなりません。
ゲームにElevenLabsの効果音をどう使いましたか？
ブラウザビルドの外で効果音を生成し、配布するサンプルをゲームプレイのイベントに接続しました。 引き継ぎ資料には、eleven_text_to_sound_v2を使った23個の効果音が記録されています。再生は効果音の設定に従い、サンプルが使えない場合は合成音で代替します。ブラウザは生成APIを呼び出しません。
性能テストで、私のスマートフォンでも快適に動くと分かりますか？
いいえ。スマートフォンサイズのビューポートを使ったデスクトップChromeは、実機のスマートフォンの性能の証拠ではありません。 性能レポートは、マシン、サンプル条件、残る制約を明記しています。実際の端末でゲームを試してください。未解決のスマートフォンの報告には、再現できる端末とブラウザのケースがまだ必要です。
The Nine-Figure Upsell Playbookはどうすれば入手できますか？
メールアドレスとストアURLでWarehouse Rushに入り、最初の荷物を出荷してプレイブックを獲得してください。 ガイドは16ページで、6つのミッションがあります。1つのオファーについて、商品の相性、配置、優先順位、支払いの確認、診断、スコアカードによる判断までを進めます。