Auf dieser Seite
Ich wollte, dass ein Shopify-Händler eine Bestellung durch ein Lager begleitet, sieht, was bei einer Änderung passiert, und etwas Nützliches für seinen Shop mitnimmt. Daraus wurde Warehouse Rush, unser kostenloses, ausschließlich englischsprachiges Browserspiel.
Sie kommissionieren Waren, stellen Sets zusammen, packen Pakete, beladen Lieferwagen und investieren das eingenommene Geld. Aus Maple Depot werden Riverside Warehouse und Aurora Fulfillment. Das Spiel enthält The Nine-Figure Upsell Playbook, einen praktischen Leitfaden zur Auswahl und zum Testen eines Angebots.
Wenn Sie ein 3D-Browserspiel mit KI-Coding-Agenten bauen möchten, ist dies unser Entwicklungsbericht. Er behandelt Three.js, Codex, Claude, Higgsfield und ElevenLabs, einschließlich der Teile, die sich während der Entwicklung geändert haben.
Das Bild oben ist Key Art für die Werbung. Die Lager-Screenshots unten zeigen die spielbare Welt.
Warum eine Shopify-App ein Lagerspiel gebaut hat
Ich wollte einen Leadmagneten, dessen Aktivität den Bestellablauf erklärt und dessen Belohnung einem Händler bei der Umsetzung hilft.
Mit Revize können Käufer zulässige Shopify-Bestellungen vor dem Fulfillment bearbeiten. Die interessante betriebliche Frage ist, was zwischen der Bestelländerung durch einen Kunden und dem Versand durch ein Lager geschieht. Unser Leitfaden zu einer Bestellung beim 3PL, deren Kommissionierung bereits läuft behandelt die Abstimmung in der Praxis.
Das Spiel macht eine kleinere Version davon sichtbar. Waren gehören zu bestimmten Bestellungen. Geänderte Bestellungen brauchen vor dem Versand eine Korrektur und ein aktuelles Etikett. Verpackung, Bestand und Auslieferung sind miteinander verbundene Handlungen.
Das Playbook liefert nach dieser Veranschaulichung die Arbeit für den Händler. Auf dem Cover steht „Auswählen / Erstellen / Nachweisen / Entscheiden“ und „Praktische Erkenntnisse aus unserer Arbeit mit Marken mit neunstelligen Umsätzen“. Auf 16 Seiten behandeln seine sechs Missionen die Auswahl einer nützlichen Kombination, das Erstellen und Platzieren des Angebots, das Durchsetzen des vorgesehenen Angebots, den Zahlungsnachweis, die Untersuchung des Ergebnisses und die Entscheidung anhand des eigenen Bewertungsbogens.
Starten Sie das Spiel mit Ihrer E-Mail-Adresse und Shop-URL. Das erste versendete Paket bringt Ihnen das Upsell-Playbook ein. Dies ist ein spielbarer Einstieg in das Thema; wir haben keine gemessenen Ergebnisse zur Schulung am Arbeitsplatz zu berichten.
Der Technologie-Stack und die entscheidende Grenze
Three.js zeichnet das Lager, TypeScript enthält dessen Regeln und Vite bündelt das eigenständige Browserprojekt.
Das Spiel hat eigenen Quellcode, eine eigene Lockdatei, Tests und Assets, getrennt vom Astro-Projekt der Website. Vite erzeugt das Browser-Bundle mit relativen Asset-Pfaden, entsprechend seinem Ablauf für statische Produktions-Builds.
Die Haupttrennung verläuft zwischen Simulation und Darstellung:
tycoon-model.tsverantwortet Bestellungen, Mengen, Paketzuordnung, Änderungsstände, Mitarbeiter, Geld und die Validierung von Spielständen.tycoon-world.tszeichnet diesen Zustand und verwaltet die visuellen Ressourcen der Szene.tycoon-entry.tsverbindet Eingaben, Menüs, Speichern, Audio und die Bildschleife.
Ein Animations-Callback vergibt niemals Bestand oder Geld. Ein fliegendes Notizbuch ist die Rückmeldung auf eine Modelländerung. Diese Trennung sorgt dafür, dass ein ausgebliebener visueller Effekt etwas anderes ist als ein verlorener Artikel.
Die Spielkamera ist eine THREE.PerspectiveCamera, die perspektivische Kamera von Three.js; die orthografische Kamera des Renderers wird nur für die Sonnenschatten verwendet.
Rapier taucht in der Lizenzhistorie des Ursprungsprojekts auf. Der aktive Tycoon importiert es nicht; Kollision, Navigation und begrenzte Objektbewegungen sind direkt implementiert.
Was wir im Code erstellt und was wir generiert haben
Das Lager und die animierten Figuren sind im Code erstellt; ausgewählte Bilder, ein Förderbandmodell, Portalvideo und Soundeffekte stammen dagegen aus Generierungswerkzeugen.
Diese Unterscheidung ist wichtig, wenn jemand fragt, wie das Spiel entstanden ist. Ein Porträt, ein Figuren-Rig und ein Video sind unterschiedliche Ergebnisse mit unterschiedlichem Integrationsaufwand.
| Teil | Dokumentierte Quelle | Verbleibende Arbeit im Spiel |
|---|---|---|
| Lager, Waren und aktive Figuren | Eigene Three.js-Geometrie mit lokal gezeichneten Canvas-Texturen | Layout, Bewegung, Tragen, Maschinen und zustandsgesteuerte Animation |
| Ursprüngliches Poster und portrait-v2-Satz | Integriertes image_gen / OpenAI-Bildgenerierung, dokumentiert in ASSETS.md |
Asset-Aufbereitung und Platzierung in der Oberfläche |
| Versandförderband | Higgsfield 3D Jutsu-Szene des Eigentümers, als GLB exportiert | Integration als statisches Objekt; Pakete und Interaktionen bleiben unter Kontrolle des Spiels |
| Früherer Betonboden | Higgsfield-PBR-Textursatz des Eigentümers | Historisches Asset; spätere Bodengestaltungen sind im Code erstellt |
| Portal | Higgsfield-Assets aus dem Eigentümerkonto und Clips mit Kling 3.0 | Coveraustausch, Loop-Schnitt, Kodierung und Timing des Einstiegs |
| Gameplay-Samplebank | ElevenLabs eleven_text_to_sound_v2 |
Laden, Mischen, Ereignisverknüpfung und synthetisierte Ersatzklänge |
Die Asset-Historie enthält eine zwischenzeitliche illustrierte Figurengruppe. Claude Opus erstellte einen Canvas2D-Atlas und eine Cutout-Animation; Codex integrierte sie. Laut aktueller Übergabe wurden diese flachen Ebenen inzwischen entfernt und die aktiven Figuren verwenden Three.js-Geometrie. Der Atlas gehört zur Entwicklungsgeschichte, nicht zum aktuellen Figurenrenderer.
Die aktuelle Key Art im Quer- und Hochformat wurde am 24. Oktober 2026 von Codex gpt-6-astra mit seinem integrierten OpenAI-Bildgenerierungswerkzeug erzeugt. Als Stilreferenz diente der eigene, freigegebene „Cozy Soft“-Render aus dem Spiel, für die Identität die eigenen v2-Figurenporträts. Die ausgelieferten Dateien sind WebP-Kodierungen; die Prompts liegen in art-src/menu-v3/jobs.tsv. Das Porträt unten gehört zum dokumentierten generierten v2-Satz.
Wie ich Codex und Claude genutzt habe, ohne die Entwicklungsgeschichte zu verlieren
Der nützliche Agentenablauf verteilte konkrete Arbeit und hielt fest, wem Richtung, Implementierung und Prüfung zuzuordnen waren.
Die Aufzeichnungen belegen konkrete Beiträge. ASSETS.md nennt Astra und Claude Opus für die redaktionelle Leitung der praktisch nutzbaren Playbooks. Sol implementierte deren Inhalt, gemeinsamen Renderer und Darstellung im Spielmenü. Die Historie der illustrierten Figuren nennt Claude Opus als Autor und Codex für die Integration. Das Verzeichnis dokumentiert außerdem, wie Claude Opus diese Figuren anhand meiner Lager-Key-Art verfeinerte.
Die Erweiterungsprüfung dokumentiert einen späteren Abschluss durch Opus nach genehmigten Korrekturen. Diese Einträge beschreiben tatsächliche Beiträge; sie belegen nicht, dass ein Agent jeden Teil des Spiels erstellt oder geprüft hat.
Mein wiederverwendbarer Ablauf aus diesen Aufzeichnungen lautet:
- Verhalten und Zuständigkeit für den Zustand definieren, bevor visuelle Arbeit beauftragt wird.
- Der Implementierungsaufgabe ein benanntes Modul oder Asset und eine sichtbare Abnahmebedingung geben.
- Die Integration einschließlich alter Spielstände, Ressourcenfreigabe und Fehlerpfade prüfen.
- Nachweise für die resultierende Version aufbewahren. Ein früheres Experiment als historisch markieren, wenn es ersetzt wird.
Dieser letzte Schritt deckte hier eine echte Abweichung in der Dokumentation auf: Eine alte Figurentechnik kann beschrieben bleiben, nachdem sich der Renderer geändert hat. Ein Entwicklungsbericht braucht dieselbe Sorgfalt wie eine Übergabe.
Generierte Medien brauchten weiterhin Bearbeitung und Laufzeitgestaltung
Die Generierung lieferte Ausgangsmaterial; Nachbearbeitung und Ereignisverknüpfung machten es im Browser nutzbar.
Der Higgsfield-Förderbandexport entfernt Beispielpakete, Kameras und Lichter aus der aktiven Szene. Andernfalls könnte ein Präsentationsmodell die Pakete des Spiels duplizieren oder eine eigene Beleuchtung mitbringen. Das Förderband bleibt ein statisches Asset, während die Simulation bewegte Waren verantwortet.
Das Portal brauchte eine andere Art der Bereinigung. Sein dokumentierter Ablauf nutzt Higgsfield/Kling-Video, projiziert das echte Playbook-Cover in das Material und erstellt Loops mit Vorwärtsbewegung. Er hält außerdem die gemalte Architektur außerhalb der bewegten Öffnung stabil, um flimmernde Texturen zu entfernen. Vorschaubilder und endgültige Kodierungen werden separat geprüft.
Auch der Einstieg hat einen funktionalen Vertrag. Sowohl die Annahme des Leads als auch die Spielbereitschaft müssen erfolgreich sein. Das Portal blendet erst aus, nachdem das aktive Spiel ein gerendertes Bild bestätigt hat. Das Ende einer Filmsequenz beweist nicht, dass das Lager für Eingaben bereit ist.
Für den Ton dokumentiert die aktuelle Übergabe 23 ausgelieferte ElevenLabs-Effekte, generiert mit eleven_text_to_sound_v2. ElevenLabs dokumentiert textgenerierte Effekte für Spiele und interaktive Medien. Unsere Samples decken Aktionen wie Kommissionieren, Verschließen, Lieferwagenabfahrt und Upgrade-Abschluss ab.
Ein früherer Verzeichniseintrag nennt 24 generierte Effekte. Die Übergabe erklärt die ausgelieferte Anzahl: ui-tap wurde generiert, aber weggelassen, weil es keinen zentralen Hook für Buttonklicks gab.
Der Browser lädt und dekodiert die Samplebank nach einer Geste zur Audiofreigabe. Ereignisse rufen die Samples ab; nicht verfügbare Samples werden durch synthetisierte Klänge ersetzt. Zur Laufzeit ist weder ein ElevenLabs-API-Aufruf noch ein Schlüssel nötig. Musik und kleine Materialgeräusche werden im Code synthetisiert, mit getrennten gespeicherten Reglern für Musik und Effekte.
Die Leistungsarbeit begann bei Layout und Laden
Das Entfernen wiederholter Browser-Layoutarbeit und die Reduzierung benötigter Asset-Bytes waren neben dem Budget der 3D-Szene entscheidend.
Der dokumentierte Bericht docs/perf-report.md identifiziert eine wiederholte Canvas-Vermessung bei der Positionierung von Stationsbuttons. Auf Stiländerungen folgten während des Frames Aufrufe von getBoundingClientRect(). Das Zwischenspeichern des Canvas-Rechtecks und dessen Verwerfen bei Größenänderungen entfernten diese wiederholte Layoutarbeit.
Dieser Bericht dokumentiert außerdem adaptive Qualität, paralleles Laden von Assets und zusammengeführte statische Objekte. Qualitätsstufen reduzieren zunächst das Pixelverhältnis, dann Schatten und Partikel, wenn die Bildberechnungszeit weiterhin über dem Budget liegt.
Zur Einordnung nennt der Test-Build des Berichts ein JavaScript-Bundle von 1.072 KB beziehungsweise 308 KB mit gzip-Komprimierung. Die Tabellenzelle für den frühen Maple-Stand mit Smartphone-Viewport verzeichnet 59 Draw Calls einschließlich Schattendurchlauf. Das sind historische Messungen aus Headless Chrome auf Apple Silicon mit Stichproben von 20 Sekunden. Sie sind weder eine aktuelle Prüfung des Launch-Builds noch Messungen auf einem physischen Smartphone.
Das Förderband wurde nach diesem Bericht geändert. ASSETS.md dokumentiert meshopt-Komprimierung von 641.960 auf 51.044 Bytes, ohne Geometrievereinfachung oder Texturen. Der Loader registriert Three.js’ MeshoptDecoder für die komprimierte GLB-Datei. Die unkomprimierte Förderbandgröße aus dem älteren Bericht darf nicht als aktuell dargestellt werden.
Ich würde bei einem künftigen Build beide Prüfungen beibehalten: was die Szene pro Frame übermittelt und was der Browser vor dem ersten spielbaren Bild laden muss.
Tests folgten dem Paket durch den gesamten Ablauf
Modelltests prüften Zuordnung und Abrechnung, während Browserprüfungen den gerenderten Ablauf und die Bedienelemente abdeckten.
Die Node-Testsuite deckt Simulation, geführte Lektion, Belohnungen, gespeicherten Zustand und Controllerverhalten ab. Der längere Ablaufprüfer durchläuft echte Modellpfade, verdient Upgrades und beendet angenommene Arbeit vor dem Lagerwechsel. An Kontrollpunkten prüft er Bestand, Geld sowie Speichern und Neuladen.
Die Erweiterungsprüfung dokumentiert eine erspielte Kampagne mit 48 Sendungen und Fortsetzungsdurchläufe bis zu insgesamt 300 Auslieferungen auf den Routen von Riverside und Aurora. Das sind Korrektheitsdurchläufe, keine Spielerzahlen oder Belege dafür, dass ein Anfänger das Kapitel problemlos abschließt.
Browserprüfungen ergänzen, was ein Modelldurchlauf nicht zeigen kann: ob der Bestellschein passt, ein Dialog scrollt, ein Bedienelement erreichbar bleibt und das Portal ein tatsächliches Bild freigibt. Dokumentierte Chrome-Prüfungen verwenden Desktop- und smartphonegroße Viewports, einschließlich reduzierter Bewegung und Fehlerfällen.
Stellen Sie sich als beispielhaften Testfall einen Geschenkwaren-Shop vor, der zwei Tassen und ein Notizbuch versendet. Ändern Sie den Bedarf an Notizbüchern nach der Kommissionierung. Die nützliche Prüfung ist, dass das endgültige Paket zur aktuellen Bestellung und zum Etikett passt, während nicht betroffene Waren weiterhin korrekt erfasst sind. Eine erfolgreiche Animation allein kann das nicht beweisen.
Auch die Montage macht diesen Unterschied sichtbar. Der Screenshot zeigt das Minispiel für das Teddy-Geschenkset; seine Darstellung muss weiterhin mit dem zugrunde liegenden Paketinhalt übereinstimmen.
Menschliche Entscheidungen und was ich anders machen würde
Ich würde die Dokumentation früher abgleichen und Tests auf physischen Geräten vor weitere Dekoration stellen.
Die Entwicklungsaufzeichnungen enthalten menschliche Entscheidungen, die ein generiertes Ergebnis nicht klären kann. Ich stellte eigene Referenzbilder bereit. Bei der Portalprüfung wurde eine hochskalierte Version wegen Artefakten an Schrift und Kanten abgelehnt. Der Medienprozess prüft neben Dateimesswerten auch lesbaren Coverinhalt und Bewegung. Das sind Abnahmeentscheidungen, keine Folgen eines erfolgreichen Exports.
Die aktuelle Übergabe hält außerdem konkrete Grenzen offen. Beim manuellen Gehen kann es am erweiterten Versandrand zu einer Überschneidung mit einem geparkten Lastwagen kommen, obwohl geroutete Auslieferungen weiter funktionieren. Bei einem gemeldeten Problem mit Smartphone-Verzögerungen und Darstellungsfehlern fehlen die zur Reproduktion nötigen Gerätedetails. Desktop-Viewport-Prüfungen klären weder die Geräteleistung noch diese Meldung.
Der Fortschritt bleibt lokal im Browser. Es gibt weder Cloud-Synchronisierung von Spielständen noch Mehrspielermodus. Partnerangebote sind noch offen. Diese Grenzen gehören neben den fertigen Ansichten in den Entwicklungsbericht.
Für Händler ist das Spiel eine Veranschaulichung. Nutzen Sie den Leitfaden zu Upsell-Platzierungen nach dem Kauf für den geschäftlichen Ablauf; die Upsell-Funktionen von Revize erfordern Pro. Prüfen Sie Ihren eigenen Angebotsablauf anhand einer Testbestellung.
Was Sie diese Woche tun sollten
Bauen und prüfen Sie einen vollständigen Bestellablauf, bevor Sie das Lager erweitern oder weitere Assets beauftragen.
- Schreiben Sie auf, wer Bestell-, Bestands-, Paket- und Belohnungszustand verantwortet.
- Bringen Sie Kommissionierung, Verpackung und Versand in einem sichtbaren Ablauf zum Laufen.
- Dokumentieren Sie für jedes generierte Asset Quelle, Verarbeitung und aktuelle Verwendung.
- Prüfen Sie Neuladen, fehlgeschlagenes Laden und reduzierte Bewegung und testen Sie dann auf einem physischen Smartphone.
Spielen Sie Warehouse Rush, um unser Ergebnis zu prüfen. Starten Sie mit Ihrer E-Mail-Adresse und Shop-URL, versenden Sie Ihr erstes Paket und holen Sie sich The Nine-Figure Upsell Playbook. Seine sechs Missionen machen aus der Händleraufgabe ein benanntes Angebot, einen getesteten Zahlungsablauf und eine Entscheidung anhand Ihrer eigenen behaltenen Ergänzungen und Kosten.
Häufig gestellte Fragen
Diese Antworten unterscheiden das ausgelieferte Spiel von früheren Experimenten und dokumentierten Testbedingungen.
Kann ich ein 3D-Browserspiel mit KI-Coding-Agenten bauen?
Ja, aber die Implementierung braucht weiterhin ausdrückliche Regeln, Integrationsarbeit und Prüfung. Warehouse Rush trennt Simulation und Renderer, nutzt Agenten für dokumentierte Aufgaben und prüft vollständige Abläufe. Generierte Bilder beweisen nicht, dass Bestand, Paketzuordnung oder gespeicherter Fortschritt korrekt funktionieren.
Wurde die gesamte Gestaltung von Warehouse Rush mit KI generiert?
Nein, das aktive Lager und die animierten Figuren sind im Code erstellte Three.js-Arbeit. Das Verzeichnis dokumentiert separat generierte Poster- und Porträt-Assets, ein Higgsfield-Förderband und Portalmedien. Auch ein früherer Canvas-Figurenatlas wurde im Code erstellt. Unterscheiden Sie diese Historie vom aktiven Renderer.
Nutzt Warehouse Rush Rapier-Physik?
Der aktive Tycoon importiert Rapier nicht. Es taucht in der Historie des Ursprungsprojekts und in den Lizenzaufzeichnungen auf. Aktuelle Kollision, Navigation und begrenzte visuelle Bewegung sind direkt implementiert; ein beibehaltener Lizenzhinweis belegt daher keine aktive Physikabhängigkeit.
Wie haben Sie ElevenLabs-Soundeffekte für das Spiel genutzt?
Wir haben Effekte außerhalb des Browser-Builds generiert und ausgelieferte Samples mit Spielereignissen verknüpft. Die Übergabe dokumentiert 23 Effekte mit eleven_text_to_sound_v2. Die Wiedergabe folgt den Effekteinstellungen und nutzt synthetisierte Ersatzklänge, wenn Samples nicht verfügbar sind. Der Browser ruft die Generierungs-API nicht auf.
Beweisen Ihre Leistungstests, dass es auf meinem Smartphone gut läuft?
Nein, Desktop-Chrome mit einem smartphonegroßen Viewport ist kein Leistungsnachweis für ein physisches Smartphone. Der Leistungsbericht nennt Rechner, Stichprobenbedingungen und verbleibende Grenzen. Probieren Sie das Spiel auf Ihrem tatsächlichen Gerät aus; die ungeklärte Smartphone-Meldung braucht weiterhin einen reproduzierbaren Fall mit Gerät und Browser.
Wie bekomme ich The Nine-Figure Upsell Playbook?
Starten Sie Warehouse Rush mit Ihrer E-Mail-Adresse und Shop-URL und versenden Sie dann das erste Paket, um das Playbook zu erhalten. Der Leitfaden umfasst 16 Seiten und sechs Missionen. Er führt ein Angebot durch Produktpassung, Platzierung, Priorität, Zahlungsprüfungen, Diagnose und eine Entscheidung anhand des Bewertungsbogens.