In questa pagina
Volevo che un merchant Shopify accompagnasse un ordine attraverso un magazzino, vedesse cosa succede quando viene modificato e ne ricavasse qualcosa di utile per il suo negozio. È nato così Warehouse Rush, il nostro gioco gratuito per browser, disponibile solo in inglese.
Prelevi merce, assembli kit, imballi pacchi, carichi furgoni e investi il denaro che raccogli. Maple Depot cresce fino a diventare Riverside Warehouse e Aurora Fulfillment. Il gioco include The Nine-Figure Upsell Playbook, una guida pratica alla scelta e al test di un’offerta.
Se vuoi creare un gioco 3D per browser con agenti di programmazione AI, questo è il nostro diario di sviluppo. Copre Three.js, Codex, Claude, Higgsfield ed ElevenLabs, comprese le parti cambiate durante lo sviluppo.
L’immagine sopra è un’illustrazione promozionale principale. Gli screenshot del magazzino qui sotto mostrano il mondo giocabile.
Perché un’app Shopify ha creato un gioco di magazzino
Volevo un lead magnet la cui attività spiegasse il flusso degli ordini e la cui ricompensa aiutasse il merchant ad agire.
Revize permette ai clienti di modificare gli ordini Shopify idonei prima dell’evasione. La domanda operativa interessante è cosa succede tra la modifica di un ordine da parte del cliente e la sua spedizione dal magazzino. La nostra guida a un ordine già in fase di prelievo da parte di un 3PL copre il coordinamento nel mondo reale.
Il gioco ne rende visibile una versione ridotta. La merce appartiene a ordini specifici. Gli ordini modificati richiedono una correzione e un’etichetta attuale prima della spedizione. Imballaggio, scorte e consegna sono azioni collegate.
Il playbook fornisce il lavoro per il merchant dopo quell’illustrazione. In copertina riporta “Scegli / Crea / Verifica / Decidi” e “Lezioni pratiche dal nostro lavoro con brand a nove cifre”. In 16 pagine, le sue sei missioni coprono la scelta di un abbinamento utile, la creazione e il posizionamento dell’offerta, la prevalenza dell’offerta prevista, la verifica del pagamento, la diagnosi del risultato e la decisione basata sulla tua scheda di valutazione.
Entra nel gioco con email e URL del negozio. Il primo pacco spedito fa ottenere il playbook degli upsell. È un’introduzione giocabile all’argomento; non abbiamo risultati misurati sulla formazione sul lavoro da riportare.
Lo stack e la separazione che conta
Three.js disegna il magazzino, TypeScript ne contiene le regole e Vite crea il pacchetto del progetto browser autonomo.
Il gioco ha sorgenti, lockfile, test e asset propri, separati dal progetto Astro del sito. Vite produce il bundle per browser con percorsi relativi degli asset, in linea con il suo flusso di build statiche per la produzione.
La divisione principale è tra la simulazione e la sua presentazione:
tycoon-model.tsgestisce ordini, quantità, appartenenza dei pacchi, revisioni, lavoratori, denaro e validazione dei salvataggi.tycoon-world.tsdisegna quello stato e gestisce le risorse visive della scena.tycoon-entry.tscollega input, menu, salvataggio, audio e ciclo dei fotogrammi.
Un callback di animazione non assegna mai scorte o denaro. Un quaderno che vola è il riscontro di una modifica al modello. Mantenere questa distinzione rende un effetto visivo mancato diverso da un articolo perso.
La camera di gioco è una THREE.PerspectiveCamera, la camera prospettica di Three.js; la camera ortografica del renderer viene usata solo per le ombre del sole.
Rapier compare nella cronologia delle licenze del progetto di origine. Il gestionale attivo non lo importa; collisioni, navigazione e movimento limitato degli oggetti di scena sono implementati direttamente.
Cosa abbiamo creato nel codice e cosa abbiamo generato
Il magazzino e i personaggi animati sono creati nel codice, mentre alcune immagini, un modello di nastro trasportatore, il video del portale e gli effetti sonori provengono da strumenti di generazione.
La distinzione conta quando qualcuno chiede come è stato realizzato il gioco. Un ritratto, un rig di un personaggio e un video sono prodotti diversi con lavori di integrazione diversi.
| Parte | Origine documentata | Lavoro che resta nel gioco |
|---|---|---|
| Magazzino, merce e personaggi attivi | Geometria Three.js originale, con texture Canvas disegnate localmente | Layout, movimento, trasporto, macchinari e animazione guidata dallo stato |
| Poster originale e set portrait-v2 | image_gen integrato / generazione immagini OpenAI, registrati in ASSETS.md |
Preparazione degli asset e posizionamento nell’interfaccia |
| Nastro trasportatore delle spedizioni | Scena Higgsfield 3D Jutsu del proprietario, esportata come GLB | Integrazione dell’oggetto statico; pacchi e interazioni restano gestiti dal gioco |
| Pavimento in cemento precedente | Set di texture PBR Higgsfield del proprietario | Asset storico; le finiture successive del pavimento sono create nel codice |
| Portale | Asset Higgsfield dell’account del proprietario e clip Kling 3.0 | Sostituzione della copertina, montaggio dei loop, codifica e tempistiche d’ingresso |
| Raccolta di campioni audio del gioco | ElevenLabs eleven_text_to_sound_v2 |
Caricamento, missaggio, collegamento agli eventi e alternative sintetizzate |
La cronologia degli asset include un set intermedio di personaggi illustrati. Claude Opus ha creato un atlante Canvas2D e un’animazione a ritagli; Codex li ha integrati. Il passaggio di consegne attuale indica che quei livelli piatti sono stati poi rimossi e che i personaggi attivi usano geometria Three.js. L’atlante fa parte della storia dello sviluppo, non del renderer attuale dei personaggi.
Le illustrazioni principali attuali in formato orizzontale e verticale sono state generate il 24 ottobre 2026 da Codex gpt-6-astra usando il suo strumento integrato di generazione immagini OpenAI, con il render di gioco “Cozy Soft”, di proprietà e approvato, come riferimento di stile e i ritratti v2 dei personaggi di proprietà come riferimento di identità. I file distribuiti sono codifiche WebP e i prompt sono conservati in art-src/menu-v3/jobs.tsv. Il ritratto qui sotto appartiene al set v2 generato e documentato.
Come ho usato Codex e Claude senza perdere la storia dello sviluppo
Il flusso utile con gli agenti assegnava lavoro concreto e manteneva attribuibili direzione, implementazione e verifica.
Le registrazioni supportano attribuzioni specifiche. ASSETS.md attribuisce ad Astra e Claude Opus la direzione editoriale dei playbook operativi. Sol ne ha implementato contenuti, renderer condiviso e presentazione nel menu di gioco. La storia dei personaggi illustrati indica Claude Opus come autore e Codex come integratore. Il registro documenta anche Claude Opus mentre perfeziona quei personaggi rispetto alla mia illustrazione principale del magazzino.
La verifica dell’espansione registra una successiva chiusura di Opus dopo le correzioni approvate. Queste voci descrivono contributi effettivi; non dimostrano che un solo agente abbia creato o revisionato ogni parte del gioco.
Il processo riutilizzabile che ricavo da quelle registrazioni è:
- Definisci il comportamento e chi ne gestisce lo stato prima di chiedere lavoro visivo.
- Assegna all’attività di implementazione un modulo o un asset preciso e una condizione di accettazione visibile.
- Rivedi l’integrazione, inclusi vecchi salvataggi, rilascio delle risorse e percorsi di errore.
- Conserva le prove della versione risultante. Segna un esperimento precedente come storico quando viene sostituito.
Quest’ultimo passaggio ha individuato un reale disallineamento della documentazione: una vecchia tecnica dei personaggi può sopravvivere nei documenti dopo il cambio di renderer. Il racconto dello sviluppo richiede la stessa cura di un passaggio di consegne.
I media generati richiedevano comunque montaggio e progettazione del runtime
La generazione ha fornito il materiale di partenza; post-produzione e collegamento agli eventi lo hanno reso utilizzabile nel browser.
L’esportazione del nastro trasportatore Higgsfield rimuove pacchi di esempio, camere e luci dalla scena attiva. Altrimenti un modello dimostrativo potrebbe duplicare i pacchi del gioco o portare la propria illuminazione. Il nastro trasportatore resta un asset statico mentre la simulazione gestisce la merce in movimento.
Il portale ha richiesto un altro tipo di pulizia. Il flusso registrato usa video Higgsfield/Kling, proietta la copertina reale del playbook nel filmato e crea loop di movimento in avanti. Mantiene inoltre stabile l’architettura dipinta fuori dall’apertura in movimento per eliminare lo sfarfallio delle texture. I fotogrammi di anteprima e le codifiche finali ricevono controlli separati.
Anche l’ingresso ha un contratto funzionale. L’accettazione del lead e la disponibilità del gioco devono entrambe riuscire. Il portale sfuma solo dopo che il gioco attivo conferma un fotogramma renderizzato. La fine di un filmato non dimostra che il magazzino sia pronto a ricevere input.
Per il suono, il passaggio di consegne attuale registra 23 effetti ElevenLabs distribuiti, generati con eleven_text_to_sound_v2. ElevenLabs documenta gli effetti generati da testo per giochi e media interattivi. I nostri campioni coprono azioni come prelievo, sigillatura, partenza del furgone e completamento di un miglioramento.
Una voce precedente del registro indica 24 effetti generati. Il passaggio di consegne spiega il conteggio distribuito: ui-tap è stato generato ma escluso perché mancava un punto centrale a cui collegare i clic sui pulsanti.
Il browser carica e decodifica la raccolta di campioni dopo un gesto che sblocca l’audio. Gli eventi richiamano i campioni; per quelli non disponibili vengono usate alternative sintetizzate. Non serve alcuna chiamata API né chiave ElevenLabs durante l’esecuzione. La musica e i piccoli suoni dei materiali sono sintetizzati nel codice, con controlli separati e salvati per musica ed effetti.
Il lavoro sulle prestazioni è partito da layout e caricamento
Eliminare il lavoro ripetuto di layout del browser e ridurre i byte degli asset necessari contava insieme al budget della scena 3D.
Il documento registrato docs/perf-report.md identifica una misurazione ripetuta del canvas nel posizionamento dei pulsanti delle postazioni. Le letture di getBoundingClientRect() seguivano scritture degli stili durante il fotogramma. Memorizzare in cache il rettangolo del canvas e invalidarlo al ridimensionamento ha eliminato quel lavoro ripetuto di layout.
Quel report registra anche qualità adattiva, recupero parallelo degli asset e unione degli oggetti statici. I livelli di qualità riducono il rapporto pixel, poi ombre e particelle, quando il tempo dei fotogrammi resta oltre il budget.
Per dare un ordine di grandezza, la build di test del report elenca un bundle JavaScript di 1.072 KB, o 308 KB con gzip. La cella relativa alla prima fase di Maple con viewport da telefono registra 59 chiamate di disegno, incluso il passaggio delle ombre. Sono misurazioni storiche di Chrome headless su Apple Silicon, con campioni di 20 secondi. Non sono una nuova verifica della build di lancio né misurazioni su un telefono fisico.
Il nastro trasportatore è cambiato dopo quel report. ASSETS.md registra una compressione meshopt da 641.960 a 51.044 byte, senza semplificazione geometrica né texture. Il loader registra il MeshoptDecoder di Three.js per il GLB compresso. La dimensione non compressa del nastro nel vecchio report non va presentata come attuale.
In una build futura manterrei entrambi i controlli: cosa invia la scena a ogni fotogramma e cosa deve scaricare il browser prima del primo fotogramma giocabile.
I test hanno seguito il pacco lungo l’intero percorso
I test del modello controllavano appartenenza e contabilità, mentre i controlli nel browser coprivano il percorso renderizzato e i comandi.
La suite di test Node copre simulazione, lezione guidata, ricompense, stato salvato e comportamento del controller. Il verificatore dei percorsi più lunghi percorre flussi reali del modello, guadagna miglioramenti e termina il lavoro accettato prima di cambiare magazzino. Controlla scorte, denaro e salvataggio/ricaricamento ai punti di verifica.
La verifica dell’espansione registra una campagna di 48 spedizioni ottenute giocando e sessioni di continuazione che raggiungono 300 consegne totali sui percorsi Riverside e Aurora. Sono esecuzioni di verifica della correttezza, non conteggi di giocatori né prove che un principiante completi il capitolo agevolmente.
La verifica nel browser aggiunge ciò che un percorso del modello non può mostrare: se la distinta dell’ordine entra nello spazio disponibile, una finestra di dialogo scorre, un controllo resta raggiungibile e il portale rivela un fotogramma effettivo. I controlli Chrome registrati usano viewport desktop e delle dimensioni di un telefono, inclusi casi con movimento ridotto ed errori.
Per un caso di test illustrativo, immagina un negozio di articoli da regalo che spedisce due tazze e un quaderno. Cambia il requisito del quaderno dopo il prelievo. L’asserzione utile è che il pacco finale corrisponda all’ordine e all’etichetta attuali, mentre la merce non interessata resta contabilizzata. Un’animazione riuscita da sola non può dimostrarlo.
Anche l’assemblaggio rende visibile questa distinzione. Lo screenshot mostra il minigioco del set regalo con orsacchiotto; la sua presentazione deve comunque corrispondere al contenuto sottostante del pacco.
Decisioni umane e cosa farei diversamente
Riconcilierei prima la documentazione e darei priorità ai test su dispositivi fisici rispetto a ulteriori decorazioni.
Le registrazioni dello sviluppo contengono scelte umane che un risultato generato non può risolvere. Ho fornito immagini di riferimento di proprietà. La revisione del portale ha rifiutato un ingrandimento con artefatti nelle scritte e sui bordi. Il processo dei media controlla leggibilità del contenuto della copertina e movimento oltre alle misure dei file. Sono decisioni di accettazione, non conseguenze di un’esportazione riuscita.
Il passaggio di consegne attuale mantiene aperti anche limiti concreti. Camminando manualmente si può sovrapporre il personaggio a un camion parcheggiato sul bordo dell’area spedizioni ampliata, anche se le consegne instradate funzionano ancora. Una segnalazione di rallentamenti e difetti visivi su telefono non include i dettagli del dispositivo necessari per riprodurla. I controlli con viewport desktop non risolvono né le prestazioni sui dispositivi né quella segnalazione.
I progressi sono locali al browser. Non ci sono sincronizzazione cloud dei salvataggi né multiplayer. Le offerte dei partner restano in sospeso. Questi limiti fanno parte del racconto dello sviluppo insieme alle schermate completate.
Per i merchant, il gioco è un’illustrazione. Usa la guida ai posizionamenti degli upsell post-acquisto per il flusso commerciale; le funzionalità upsell di Revize richiedono Pro. Verifica il percorso della tua offerta su un ordine di prova.
Cosa fare questa settimana
Crea e verifica un ciclo completo dell’ordine prima di espandere il magazzino o commissionare altri asset.
- Scrivi chi gestisce lo stato di ordine, scorte, pacco e ricompense.
- Fai funzionare prelievo, imballaggio e spedizione in un percorso visibile.
- Registra origine, elaborazione e uso attuale di ogni asset generato.
- Controlla un ricaricamento, un caricamento fallito e il movimento ridotto, poi testa su un telefono fisico.
Gioca a Warehouse Rush per esaminare il nostro risultato. Entra con email e URL del negozio, spedisci il tuo primo pacco e ottieni The Nine-Figure Upsell Playbook. Le sue sei missioni trasformano il lavoro del merchant in un’offerta con un nome preciso, un percorso di pagamento testato e una decisione basata sulle tue aggiunte mantenute e sui tuoi costi.
Domande frequenti
Queste risposte distinguono il gioco distribuito dagli esperimenti precedenti e dalle condizioni di test registrate.
Posso creare un gioco 3D per browser con agenti di programmazione AI?
Sì, ma l’implementazione richiede comunque regole esplicite, lavoro di integrazione e verifica. Warehouse Rush separa la simulazione dal renderer, usa agenti per attività documentate e controlla percorsi completi. La grafica generata non dimostra che scorte, appartenenza dei pacchi o progressi salvati si comportino correttamente.
Tutta la grafica di Warehouse Rush è stata generata dall’AI?
No, il magazzino attivo e i personaggi animati sono realizzati nel codice con Three.js. Il registro documenta separatamente poster e ritratti generati, un nastro trasportatore Higgsfield e i media del portale. Anche un precedente atlante Canvas dei personaggi era creato nel codice. Distingui quella storia dal renderer attivo.
Warehouse Rush usa la fisica di Rapier?
Il gestionale attivo non importa Rapier. Compare nella storia del progetto di origine e nei registri delle licenze. Collisioni, navigazione e movimento visivo limitato attuali sono implementati direttamente, quindi conservare una nota di licenza non dimostra una dipendenza fisica attiva.
Come avete usato gli effetti sonori ElevenLabs nel gioco?
Abbiamo generato gli effetti fuori dalla build per browser e collegato i campioni distribuiti agli eventi di gioco. Il passaggio di consegne registra 23 effetti con eleven_text_to_sound_v2. La riproduzione segue le preferenze degli effetti e usa alternative sintetizzate quando i campioni non sono disponibili. Il browser non chiama l’API di generazione.
I vostri test delle prestazioni dimostrano che funziona bene sul mio telefono?
No, Chrome desktop con una viewport delle dimensioni di un telefono non è una prova delle prestazioni su un telefono fisico. Il report delle prestazioni indica macchina, condizioni di campionamento e limiti rimanenti. Prova il gioco sul tuo dispositivo effettivo; la segnalazione irrisolta su telefono richiede ancora un caso riproducibile con dispositivo e browser identificati.
Come ottengo The Nine-Figure Upsell Playbook?
Entra in Warehouse Rush con email e URL del negozio, poi spedisci il primo pacco per ottenere il playbook. La guida contiene 16 pagine e sei missioni. Accompagna un’offerta attraverso abbinamento dei prodotti, posizionamento, priorità, controlli di pagamento, diagnosi e decisione basata sulla scheda di valutazione.