Sur cette page
Je voulais qu’un marchand Shopify fasse parcourir un entrepôt à une commande, voie ce qui se passe lorsqu’elle change et reparte avec quelque chose d’utile pour sa boutique. C’est devenu Warehouse Rush, notre jeu gratuit sur navigateur, uniquement en anglais.
Vous prélevez des marchandises, assemblez des kits, emballez des colis, chargez des véhicules et investissez l’argent récolté. Maple Depot évolue vers Riverside Warehouse puis Aurora Fulfillment. Le jeu contient The Nine-Figure Upsell Playbook, un guide pratique pour choisir et tester une offre.
Si vous voulez créer un jeu 3D sur navigateur avec des agents de programmation IA, voici notre journal de création. Il couvre Three.js, Codex, Claude, Higgsfield et ElevenLabs, y compris les éléments qui ont changé pendant le développement.
L’image ci-dessus est une illustration promotionnelle principale. Les captures d’entrepôt ci-dessous montrent le monde jouable.
Pourquoi une application Shopify a créé un jeu d’entrepôt
Je voulais un contenu d’acquisition dont l’activité explique le parcours d’une commande et dont la récompense aide le marchand à agir.
Revize permet aux acheteurs de modifier les commandes Shopify admissibles avant leur traitement. La question opérationnelle intéressante est ce qui se passe entre la modification d’une commande par un client et son expédition par un entrepôt. Notre guide d’une commande déjà en préparation chez un 3PL couvre la coordination dans le monde réel.
Le jeu en rend visible une version réduite. Les marchandises appartiennent à des commandes précises. Les commandes modifiées nécessitent une correction et une étiquette à jour avant l’expédition. L’emballage, le stock et la livraison sont des actions liées.
Le guide fournit le travail du marchand après cette illustration. Sa couverture indique « Choisir / Créer / Prouver / Décider » et « Enseignements pratiques tirés de notre travail avec des marques à neuf chiffres de chiffre d’affaires ». Sur 16 pages, ses six missions couvrent le choix d’une association utile, la création et le placement de l’offre, la priorité donnée à l’offre prévue, la preuve du paiement, le diagnostic du résultat et la décision à partir de votre propre grille de suivi.
Entrez dans le jeu avec votre e-mail et l’URL de votre boutique. Le premier colis expédié donne accès au guide des upsells. C’est une introduction jouable au sujet ; nous n’avons aucun résultat mesuré de formation en situation de travail à présenter.
Les technologies et la séparation qui compte
Three.js dessine l’entrepôt, TypeScript contient ses règles et Vite prépare le projet autonome pour le navigateur.
Le jeu a ses propres sources, fichier de verrouillage, tests et ressources, séparés du projet Astro du site. Vite produit le bundle pour navigateur avec des chemins de ressources relatifs, conformément à son processus de build statique de production.
La séparation principale est celle entre la simulation et sa présentation :
tycoon-model.tsgère les commandes, les quantités, l’appartenance des colis, les révisions, les employés, l’argent et la validation des sauvegardes.tycoon-world.tsdessine cet état et gère les ressources visuelles de la scène.tycoon-entry.tsrelie les commandes, les menus, la sauvegarde, l’audio et la boucle d’affichage.
Une fonction de rappel d’animation n’attribue jamais de stock ni d’argent. Un carnet qui vole est un retour visuel pour une modification du modèle. Maintenir cette distinction différencie un effet visuel manqué d’un article perdu.
La caméra de jeu est une THREE.PerspectiveCamera, la caméra en perspective de Three.js ; la caméra orthographique du moteur de rendu sert uniquement aux ombres du soleil.
Rapier apparaît dans l’historique des licences du projet d’origine. Le jeu de gestion actif ne l’importe pas ; les collisions, la navigation et les mouvements limités des éléments de décor sont implémentés directement.
Ce que nous avons créé en code et ce que nous avons généré
L’entrepôt et les personnages animés sont créés en code, tandis que certaines images, un modèle de convoyeur, la vidéo du portail et les effets sonores viennent d’outils de génération.
La distinction compte lorsqu’on demande comment le jeu a été réalisé. Un portrait, un squelette d’animation de personnage et une vidéo sont des livrables différents, avec un travail d’intégration différent.
| Élément | Source documentée | Travail restant dans le jeu |
|---|---|---|
| Entrepôt, marchandises et personnages actifs | Géométrie Three.js originale, avec des textures Canvas dessinées localement | Agencement, déplacements, portage, machines et animation pilotée par l’état |
| Affiche originale et série portrait-v2 | image_gen intégré / génération d’images OpenAI, consignée dans ASSETS.md |
Préparation des ressources et placement dans l’interface |
| Convoyeur d’expédition | Scène Higgsfield 3D Jutsu du propriétaire, exportée en GLB | Intégration du décor statique ; les colis et les interactions restent gérés par le jeu |
| Ancien sol en béton | Jeu de textures PBR Higgsfield du propriétaire | Ressource historique ; les traitements de sol ultérieurs sont créés en code |
| Portail | Ressources Higgsfield du compte propriétaire et clips Kling 3.0 | Remplacement de la couverture, montage en boucle, encodage et synchronisation de l’entrée |
| Banque d’échantillons sonores du jeu | ElevenLabs eleven_text_to_sound_v2 |
Chargement, mixage, liaison aux événements et solutions de repli synthétisées |
L’historique des ressources comprend une série intermédiaire de personnages illustrés. Claude Opus a créé un atlas Canvas2D et une animation par éléments découpés ; Codex les a intégrés. La transmission actuelle indique que ces calques plats ont depuis été retirés et que les personnages actifs utilisent la géométrie Three.js. L’atlas appartient à l’historique de création, pas au moteur de rendu actuel des personnages.
Les illustrations principales actuelles aux formats paysage et portrait ont été générées le 24 octobre 2026 par Codex gpt-6-astra avec son outil intégré de génération d’images OpenAI, en utilisant le rendu de jeu « Cozy Soft », détenu et approuvé, comme référence de style, et les portraits v2 détenus des personnages comme références d’identité. Les fichiers livrés sont des encodages WebP et les prompts sont conservés dans art-src/menu-v3/jobs.tsv. Le portrait ci-dessous appartient à la série v2 générée et documentée.
Comment j’ai utilisé Codex et Claude sans perdre l’historique de création
Le processus utile avec les agents attribuait un travail concret et permettait d’identifier les responsables de la direction, de l’implémentation et de la vérification.
Les documents permettent des attributions précises. ASSETS.md attribue à Astra et Claude Opus la direction éditoriale des guides pratiques. Sol a implémenté leur contenu, leur moteur de rendu commun et leur présentation dans le menu du jeu. L’historique des personnages illustrés nomme Claude Opus comme créateur et Codex comme intégrateur. Le registre consigne aussi l’affinage de ces personnages par Claude Opus à partir de mon illustration principale d’entrepôt.
La vérification de l’extension consigne une clôture ultérieure par Opus après les corrections approuvées. Ces entrées décrivent des contributions réelles ; elles n’établissent pas qu’un seul agent a créé ou revu chaque partie du jeu.
Le processus réutilisable que je tire de ces documents est le suivant :
- Définir le comportement et le responsable de son état avant de demander du travail visuel.
- Attribuer à la tâche d’implémentation un module ou une ressource nommé et une condition de validation visible.
- Revoir l’intégration, y compris les anciennes sauvegardes, le nettoyage des ressources et les parcours d’échec.
- Conserver les preuves de la version obtenue. Marquer une expérience antérieure comme historique lorsqu’elle est remplacée.
Cette dernière étape a repéré ici une vraie dérive documentaire : une ancienne technique de personnage peut survivre dans la documentation après un changement de moteur de rendu. Un récit de création demande le même soin qu’une transmission.
Les médias générés nécessitaient encore du montage et une conception pour l’exécution
La génération fournissait la matière première ; le post-traitement et la liaison aux événements la rendaient utilisable dans le navigateur.
L’export du convoyeur Higgsfield retire de la scène active les colis de démonstration, les caméras et les lumières. Sinon, un modèle de présentation pourrait dupliquer les colis du jeu ou apporter son propre éclairage. Le convoyeur reste une ressource statique tandis que la simulation gère les marchandises en mouvement.
Le portail nécessitait un autre nettoyage. Son processus documenté utilise des vidéos Higgsfield/Kling, projette la vraie couverture du guide dans les images et construit des boucles de mouvement vers l’avant. Il maintient aussi l’architecture peinte immobile à l’extérieur de l’ouverture animée pour supprimer le scintillement des textures. Les images d’aperçu et les encodages finaux reçoivent des vérifications distinctes.
L’entrée a aussi un contrat fonctionnel. L’enregistrement du prospect et la disponibilité du jeu doivent tous deux réussir. Le portail ne s’efface qu’après que le jeu actif a confirmé le rendu d’une image. La fin d’une cinématique ne prouve pas que l’entrepôt est prêt à recevoir les commandes.
Pour le son, la transmission active consigne 23 effets ElevenLabs livrés, générés avec eleven_text_to_sound_v2. ElevenLabs documente les effets générés à partir de texte pour les jeux et médias interactifs. Nos échantillons couvrent notamment le prélèvement, la fermeture des cartons, le départ des véhicules et la fin des améliorations.
Une entrée antérieure du registre indique 24 effets générés. La transmission explique le nombre livré : ui-tap a été généré mais omis, faute de point de déclenchement central pour les clics sur les boutons.
Le navigateur charge et décode la banque d’échantillons après un geste de déverrouillage audio. Les événements appellent les échantillons ; les échantillons indisponibles sont remplacés par des sons synthétisés. Aucun appel à l’API ElevenLabs ni aucune clé ne sont nécessaires pendant l’exécution. La musique et les petits sons de matériaux sont synthétisés en code, avec des réglages de musique et d’effets distincts et sauvegardés.
Le travail de performance a commencé par la mise en page et le chargement
Supprimer les recalculs répétés de mise en page du navigateur et réduire le volume des ressources nécessaires comptait également, en complément du budget de la scène 3D.
Le fichier documenté docs/perf-report.md repère une mesure répétée du canvas dans le positionnement des boutons de poste. Des lectures de getBoundingClientRect() suivaient des écritures de styles pendant l’image. Mettre en cache le rectangle du canvas et l’invalider au redimensionnement a supprimé ce travail répété de mise en page.
Ce rapport consigne aussi la qualité adaptative, la récupération parallèle des ressources et la fusion des éléments de décor statiques. Les paliers de qualité réduisent le ratio de pixels, puis les ombres et les particules, lorsque le temps par image reste au-dessus du budget.
Pour donner un ordre de grandeur, la version de test du rapport indique un bundle JavaScript de 1 072 Ko, soit 308 Ko compressés avec gzip. Sa cellule Maple initial avec fenêtre d’affichage de téléphone consigne 59 appels de dessin, passe d’ombres incluse. Ce sont des mesures historiques dans Chrome sans interface sur Apple Silicon, avec des échantillons de 20 secondes. Ce ne sont ni un audit récent de la version de lancement ni des mesures sur un téléphone physique.
Le convoyeur a changé après ce rapport. ASSETS.md consigne une compression meshopt de 641 960 à 51 044 octets, sans simplification de géométrie ni textures. Le chargeur enregistre le MeshoptDecoder de Three.js pour le GLB compressé. La taille non compressée du convoyeur dans l’ancien rapport ne doit pas être présentée comme actuelle.
Je garderais les deux vérifications dans une future version : ce que la scène envoie à chaque image et ce que le navigateur doit récupérer avant la première image jouable.
Les tests ont suivi le colis tout au long du parcours
Les tests du modèle vérifiaient l’appartenance et les comptes, tandis que les vérifications dans le navigateur couvraient le parcours affiché et les commandes.
La suite de tests Node couvre la simulation, la leçon guidée, les récompenses, l’état sauvegardé et le comportement du contrôleur. Le vérificateur de parcours long emprunte de vrais chemins du modèle, gagne des améliorations et termine le travail accepté avant de changer d’entrepôt. Il vérifie le stock, l’argent et la sauvegarde puis le rechargement aux points de contrôle.
La vérification de l’extension consigne une campagne de 48 expéditions gagnées en jouant et des continuations atteignant 300 livraisons au total sur les parcours Riverside et Aurora. Ce sont des exécutions de vérification du fonctionnement, pas des nombres de joueurs ni la preuve qu’un débutant termine confortablement le chapitre.
La vérification dans le navigateur ajoute ce qu’un parcours du modèle ne peut pas montrer : si le bon de commande tient à l’écran, si une boîte de dialogue défile, si une commande reste accessible et si le portail révèle une vraie image du jeu. Les vérifications Chrome consignées utilisent des fenêtres d’affichage de bureau et de taille téléphone, y compris des cas de réduction des animations et d’échec.
Pour un cas de test illustratif, imaginez une boutique cadeau expédiant deux tasses et un carnet. Changez le besoin de carnet après la préparation. L’assertion utile est que le colis final corresponde à la commande et à l’étiquette en cours, tandis que les marchandises non concernées restent comptabilisées. Une animation réussie ne peut pas prouver cela à elle seule.
L’assemblage rend aussi cette distinction visible. La capture montre le mini-jeu du coffret cadeau avec un ours en peluche ; sa présentation doit toujours correspondre au contenu sous-jacent du colis.
Les décisions humaines et ce que je ferais différemment
Je rapprocherais la documentation plus tôt et donnerais la priorité aux tests sur appareils physiques avant d’ajouter de la décoration.
Les documents de création contiennent des choix humains qu’un résultat généré ne peut pas trancher. J’ai fourni des illustrations de référence dont je détenais les droits. La revue du portail a rejeté une version agrandie présentant des défauts de lettrage et de contours. Le processus média vérifie la lisibilité de la couverture et le mouvement, en plus des mesures des fichiers. Ce sont des décisions de validation, pas les conséquences d’un export réussi.
La transmission actuelle garde aussi des limites concrètes ouvertes. Le déplacement manuel peut chevaucher un camion stationné au bord de la zone d’expédition agrandie, même si les livraisons guidées fonctionnent toujours. Un problème signalé de lenteur et de défauts visuels sur téléphone manque des détails d’appareil nécessaires à sa reproduction. Les vérifications de fenêtre d’affichage de bureau ne règlent ni les performances sur appareil ni ce signalement.
La progression reste locale au navigateur. Il n’y a ni synchronisation des sauvegardes dans le cloud ni mode multijoueur. Les offres partenaires restent en attente. Ces limites ont leur place dans le récit de création à côté des écrans terminés.
Pour les marchands, le jeu est une illustration. Utilisez le guide des emplacements d’upsell après achat pour le parcours commercial ; les fonctionnalités d’upsell de Revize nécessitent Pro. Vérifiez votre propre parcours d’offre sur une commande de test.
Que faire cette semaine ?
Créez et vérifiez une boucle de commande complète avant d’agrandir l’entrepôt ou de commander davantage de ressources.
- Notez qui gère l’état de la commande, du stock, du colis et des récompenses.
- Faites fonctionner la préparation, l’emballage et l’expédition dans un seul parcours visible.
- Consignez la source, le traitement et l’usage actuel de chaque ressource générée.
- Vérifiez un rechargement, un échec de chargement et la réduction des animations, puis testez sur un téléphone physique.
Jouez à Warehouse Rush pour examiner notre résultat. Entrez avec votre e-mail et l’URL de votre boutique, expédiez votre premier colis et obtenez The Nine-Figure Upsell Playbook. Ses six missions transforment le travail du marchand en une offre nommée, un parcours de paiement testé et une décision fondée sur vos propres ajouts conservés et vos coûts.
Questions fréquentes
Ces réponses distinguent le jeu livré des expériences antérieures et des conditions de test consignées.
Puis-je créer un jeu 3D sur navigateur avec des agents de programmation IA ?
Oui, mais l’implémentation exige toujours des règles explicites, un travail d’intégration et des vérifications. Warehouse Rush sépare la simulation de son moteur de rendu, utilise des agents pour des tâches documentées et vérifie des parcours complets. Les illustrations générées ne prouvent pas que le stock, l’appartenance des colis ou la progression sauvegardée se comportent correctement.
Toutes les illustrations de Warehouse Rush ont-elles été générées par IA ?
Non, l’entrepôt actif et les personnages animés sont créés en code avec Three.js. Le registre consigne séparément les affiches et portraits générés, un convoyeur Higgsfield et les médias du portail. Un ancien atlas de personnages Canvas a aussi été créé en code. Distinguez cet historique du moteur de rendu actif.
Warehouse Rush utilise-t-il la physique Rapier ?
Le jeu de gestion actif n’importe pas Rapier. Il apparaît dans l’historique du projet d’origine et les documents de licence. Les collisions, la navigation et les mouvements visuels limités actuels sont implémentés directement : conserver une mention de licence n’établit donc pas une dépendance physique active.
Comment avez-vous utilisé les effets sonores ElevenLabs pour le jeu ?
Nous avons généré les effets en dehors du build navigateur et relié les échantillons livrés aux événements de jeu. La transmission consigne 23 effets utilisant eleven_text_to_sound_v2. La lecture suit les préférences d’effets et utilise des sons synthétisés de repli lorsque les échantillons sont indisponibles. Le navigateur n’appelle pas l’API de génération.
Vos tests de performance prouvent-ils que le jeu tourne bien sur mon téléphone ?
Non, Chrome sur ordinateur avec une fenêtre d’affichage de taille téléphone ne constitue pas une preuve de performance sur téléphone physique. Le rapport de performance nomme sa machine, ses conditions d’échantillonnage et les limites restantes. Essayez le jeu sur votre appareil réel ; le signalement téléphone non résolu nécessite toujours un cas reproductible avec appareil et navigateur identifiés.
Comment obtenir The Nine-Figure Upsell Playbook ?
Entrez dans Warehouse Rush avec votre e-mail et l’URL de votre boutique, puis expédiez le premier colis pour gagner le guide. Le guide comprend 16 pages et six missions. Il fait passer une offre par la pertinence du produit, l’emplacement, la priorité, les vérifications de paiement, le diagnostic et une décision à partir d’une grille de suivi.