Claude Fable 5 : Un jeu de vol de ratons laveurs créé en un clin d'œil

Créer un jeu de vol de raton laveur en un coup avec Claude Fable 5

Contexte du projet

En 2024, un projet ambitieux a été initié pour transformer un concept de jeu vidéo en une réalité grâce à l'intelligence artificielle. L'idée originale, partagée il y a quatre ans sur Twitter, avait été générée par GPT-3 et illustrée par DALL-E. Pour marquer cet anniversaire, l'objectif était de voir si Claude Fable 5, fonctionnant dans Claude Code pour le web, pouvait construire l'intégralité du jeu à partir du contenu de ce tweet. Le résultat a été plutôt satisfaisant !

Comment j'ai construit cela

Voici le tweet du 5 août 2022 :

Mon prompt pour GPT-3 à l'époque était :

• Écrire une description détaillée d'un jeu vidéo où une équipe de ratons laveurs réalise des vols.

Le texte complété était :

Dans "Raccoon Heist", vous et votre équipe de ratons laveurs voleurs êtes chargés de réaliser une série de vols audacieux. Du vol de banques au vol d'art inestimable, aucun travail n'est trop grand ou trop petit pour votre équipe poilue. Vous devrez utiliser votre intelligence et vos compétences pour éviter la police et vous échapper avec le butin. Avec un gameplay excitant et un casting de personnages charmants, "Raccoon Heist" est le jeu parfait pour quiconque recherche une aventure légère.

Mon prompt pour DALL-E était court :

• Capture d'écran d'un jeu vidéo où une équipe de ratons laveurs réalise un vol.

L'expérience d'aujourd'hui

L'expérience d'aujourd'hui consistait à voir si je pouvais intégrer ces captures d'écran dans Fable 5 avec un prompt lui demandant de créer un jeu, puis de le laisser travailler de manière autonome pour obtenir un jeu fonctionnel à la fin.

Configuration de Claude Code pour utiliser GitHub Pages

Une chose frustrante avec Claude Code pour le web est qu'il peut être difficile de tester ce sur quoi il travaille pendant qu'il est en cours d'exécution.

J'ai utilisé GitHub Pages pour contourner cette limitation, et cela a très bien fonctionné. Voici mon processus :

• Créer un nouveau dépôt pour le projet sur https://github.com/new — cela peut être public ou privé, la méthode fonctionne également pour les deux.

• Démarrer une session Claude Code pour le web, dans les applications iPhone ou Desktop de Claude ou dans le navigateur à https://claude.ai/code.

• Indiquer à Claude sur quoi travailler et l'encourager à valider une page index.html le plus rapidement possible. Cela créera une branche avec un nom comme claude/3d-raccoon-heist-game-50n293.

• Naviguer vers la section Settings -> Pages du dépôt, sélectionner "Déployer à partir d'une branche", choisir le nom de la branche et cliquer sur Sauvegarder.

C'est tout ce qu'il faut ! Environ 30 secondes après chaque envoi, le contenu le plus récent sera visible à votrenom.github.io/votre-repo/.

Si vous faites cela avec un dépôt privé, toute personne pouvant deviner le nom du dépôt pourra voir le contenu publié. Personnellement, cela ne me préoccupe pas trop.

Le prompt pour Fable 5

Voici le prompt que j'ai donné à Fable 5 (écrit dans l'application de notes sur mon téléphone — tout le projet a été réalisé sur mobile). Je l'ai accompagné des deux images du tweet original.

• Construire ce jeu 3D, pour le navigateur.

• Ce dépôt est configuré pour servir des fichiers statiques, donc assurez-vous qu'il y a un index.html qui charge tout le reste.

• Assurez-vous qu'il est adapté aux mobiles (contrôles tactiles, fonctionne bien sur les petits écrans).

• Vous avez une clé API OpenAI et accès à leurs modèles d'API de génération d'images, utilisez cela pour les textures de vos modèles 3D. Documentation ici : https://developers.openai.com/api/docs/guides/image-generation - utilisez gpt-image-2.

• Travaillez de manière indépendante - ne me demandez pas de prendre d'autres décisions de conception. Assurez-vous que le jeu est amusant, un peu surprenant, a de bonnes vibrations de vol de raton laveur et est visuellement plaisant.

• Validez et poussez aussi souvent que possible pour que je puisse prévisualiser votre travail - commencez par un index.html qui présente un écran titre, puis construisez à partir de là.

• Ajoutez à un fichier notes.md au fur et à mesure que vous travaillez, y compris vos modifications comme partie de chaque validation.

Je n'ai pas pris de décisions technologiques. J'ai supposé (à juste titre) qu'il utiliserait probablement Three.js en fonction des expériences précédentes.

Donner à Claude l'accès à une clé OpenAI s'est avéré très efficace pour combler les lacunes de ses capacités — dans ce cas, nous avions besoin d'un moyen de générer des images à utiliser comme textures. Fable est très bon pour inciter les générateurs d'images !

Revue de la transcription

Vous pouvez accéder à la session partagée de Claude Code, et j'ai également utilisé mon outil claude-code-transcripts pour exporter ma propre version HTML que vous pouvez trouver ici.

Fable a commencé avec une page d'index, a intégré une copie de Three.js, puis a écrit son propre script gen_textures.py.

Il a généré les textures et les a vérifiées pour s'assurer qu'elles avaient l'air correctes. Le fichier metal.jpg qu'il a généré pour la poubelle ressemble à ceci, bien que je ne pense pas qu'il ait été appliqué exactement comme il faut dans le jeu lui-même.

Ensuite, il a construit la première version basique du jeu, puis a décidé de faire un "smoke-test" dans le Chromium pré-installé en utilisant Playwright. Cela lui a permis de prendre des captures d'écran de son propre travail et de les examiner. Il a fait cela pour les largeurs de page de bureau et mobiles, puis a remarqué que le raton laveur était invisible sur les largeurs mobiles, donc il a corrigé cela.

Le raton laveur, le repaire dans la poubelle et les deux ratons laveurs de l'équipe sont maintenant parfaitement visibles sur mobile. Validation de cette correction critique.

Il a décidé de générer un écran titre, ce qu'il a fait en utilisant ce script gen_title.py. Voici le prompt gpt-image-2 qu'il a utilisé pour cela :

• Art clé de jeu vidéo, style rendu 3D low-poly, scène nocturne d'ambiance : un mignon raton laveur low-poly portant un petit masque de voleur noir, se faufilant sur ses pattes arrière en portant une pièce d'or lumineuse, à côté d'une poubelle métallique renversée, une maison de banlieue avec des fenêtres chaleureusement éclairées en arrière-plan, nuit bleu profond, pleine lune, lucioles, éclairage cinématographique, ambiance de caper charmante. Pas de texte, pas de mots, pas de logos.

Et l'image résultante (que Claude a trouvée "magnifique") — bien que je note que lorsqu'elle est affichée sur bureau, elle est recadrée juste au tiers supérieur sans le raton laveur !

Ajout du chien

Puis ma modification préférée : il a ajouté le chien :

export function makeDog() {
    const g = new THREE.Group();
    const BROWN = 0x8a6440, DARK = 0x5e4128;
    const body = new THREE.Mesh(new THREE.SphereGeometry(0.42, 10, 8), M(BROWN));
    body.scale.set(0.9, 0.8, 1.5);
    body.position.y = 0.55;
    body.castShadow = true;
    const head = new THREE.Mesh(new THREE.SphereGeometry(0.3, 10, 8), M(BROWN));
    head.position.set(0, 0.85, 0.62);
    const snout = new THREE.Mesh(new THREE.SphereGeometry(0.16, 8, 6), M(DARK));
    snout.scale.set(0.9, 0.7, 1.3);
    snout.position.set(0, 0.76, 0.9);
    const nose = new THREE.Mesh(new THREE.SphereGeometry(0.06, 6, 6), M(BLACK));
    nose.position.set(0, 0.78, 1.08);
    for (const s of [-1, 1]) {
        const ear = new THREE.Mesh(new THREE.SphereGeometry(0.12, 6, 6), M(DARK));
        ear.scale.set(0.7, 1.3, 0.5);
        ear.position.set(0.2 * s, 1.08, 0.55);
        const eye = new THREE.Mesh(new THREE.SphereGeometry(0.05, 6, 6), M(0x1a1a1a, { emissive: 0x331111 }));
        eye.position.set(0.13 * s, 0.92, 0.86);
        const tail = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.09, 0.5, 6), M(DARK));
        tail.position.set(0, 0.8, -0.62);
        tail.rotation.x = 0.8;
        // collier à pointes
        const collar = new THREE.Mesh(new THREE.TorusGeometry(0.22, 0.05, 6, 12), M(0xc0392b));
        collar.position.set(0, 0.78, 0.5);
        collar.rotation.x = Math.PI / 2.4;
        const legGeo = new THREE.CylinderGeometry(0.07, 0.09, 0.34, 6);
        const legs = [];
        for (const [x, z] of [[-0.22, 0.35], [0.22, 0.35], [-0.22, -0.35], [0.22, -0.35]]) {
            const leg = new THREE.Mesh(legGeo, M(DARK));
            leg.position.set(x, 0.17, z);
            let phase = Math.random() * 10;
            animate(dt, speed) {
                phase += dt * (3 + speed * 10);
                const amp = Math.min(0.6, 0.1 + speed * 0.6);
                legs[0].rotation.x = Math.sin(phase) * amp;
                legs[3].rotation.x = Math.sin(phase) * amp;
                legs[1].rotation.x = -Math.sin(phase) * amp;
                legs[2].rotation.x = -Math.sin(phase) * amp;
                tail.rotation.z = Math.sin(phase * 1.5) * 0.4;
                body.position.y = 0.55 + Math.abs(Math.sin(phase)) * 0.04 * (0.3 + speed);
            }
        }
    }
}

Il a effectué une série de tests en utilisant Playwright, y compris une autre capture d'écran.

Conclusion

Il a apporté quelques autres ajustements, puis s'est déclaré terminé :

Raccoon Heist est construit, testé et poussé — 7 validations sur claude/3d-raccoon-heist-game-50n293, toutes vérifiées avec des tests automatisés Playwright sur les vues de bureau, portrait et paysage de téléphone.

Le jeu : Vous êtes un raton laveur masqué sortant du repaire de votre équipe dans une poubelle.