Monsieur Prompt
Méthode · Créer un jeu avec l'IA

Créer un jeu avec Claude Fable 5

Deux images, un prompt, et Claude Fable 5 code un vrai jeu de combat jouable dans le navigateur, avec toi comme personnage. Pas de vidéo générée : du code propre, tout de suite jouable. Le jeu ci-dessous a été produit exactement avec cette méthode.

Mis à jour le 23 juil. 2026 Publication : Soulinked Arts Méthode guidée : 30 min Niveau : intermédiaire

En bref

Claude Fable 5 est le modèle le plus puissant d'Anthropic pour le raisonnement et le code. On ne lui demande pas une vidéo : on lui demande de coder un jeu jouable. Tu prépares deux personnages détourés (toi et un adversaire), tu écris un prompt qui décrit le jeu, et Fable 5 sort un fichier index.html complet. Résultat : tu joues avec ta propre tête dans un jeu de combat, en quelques minutes.

01 Monsieur Prompt vs le Slop, jouable ici

Le jeu ci-dessous tourne directement dans la page. Clique dedans, appuie sur COMBATTRE, et affronte le Slop, la créature qui incarne le mauvais contenu IA.

Ouvrir en plein écran

Clavier : flèches ou Q/D pour bouger, Espace pour sauter, F coup de poing, G coup de pied, S garde.

02 Ce que tu dois obtenir à la fin

Un livrable concret, ta ressemblance dedans, le prompt exact prêt à copier, et un point de départ pour décliner d'autres jeux.

01

Un jeu jouable

Un fichier index.html autonome, jouable au clavier dans n'importe quel navigateur, sans installation.

02

Toi en personnage

Ta photo transformée en sprite de combattant, face à un adversaire sur mesure.

03

Une base réutilisable

Le même prompt sert à décliner d'autres jeux : runner, boss fight, plateformer.

Écran titre du jeu de combat Monsieur Prompt contre le Slop, généré par Claude Fable 5
Sortie attendue : un jeu de combat jouable, généré par Claude Fable 5.

03 Prépare tes deux personnages

Génère un sprite plein pied pour toi (le héros) et un pour l'adversaire, puis détoure-les sur fond transparent. Ici, le héros est fait en image-to-image à partir d'une vraie photo pour garder la ressemblance ; le Slop est généré à partir de texte.

Avant de commencer

L'essentiel n'est pas dans le jeu, mais dans la préparation : deux personnages plein pied, propres, détourés sur fond transparent. C'est ce qui fait passer le rendu de « bricolage » à « vrai jeu ». Pour construire un prompt image solide, appuie-toi sur la méthode du prompt image IA réaliste.

Sprite du héros Monsieur Prompt, plein pied, détouré
Le héros : ta photo, en personnage.
Sprite du Slop, blob glitch coloré, détouré
Le Slop : l'adversaire, généré.
Prompt image · le héros (image-to-image, depuis ta photo)
Sprite de personnage de jeu de combat 2D, plein pied, à partir de cette photo (garde le visage et la ressemblance). Ajoute un chapeau haut-de-forme noir. Posture de combat, poings levés, orienté vers la droite. Style cel-shading premium semi-réaliste, contours nets, liseré or et violet. Isolé sur un fond vert uni #00b140, sans décor, sans ombre au sol.
Prompt image · l'adversaire « le Slop » (texte vers image)
Sprite de boss de jeu 2D, plein pied : « le Slop », un blob de slime dégoulinant et rigolo qui représente le mauvais contenu IA. Reflets huileux arc-en-ciel, textures glitch pixelisées, bulles de charabia, quelques doigts en trop, yeux dépareillés, expression comique. Non effrayant, humoristique. Style cel-shading premium, orienté vers la gauche. Isolé sur un fond vert uni #00b140, sans ombre au sol.
Détourage

Après génération, enlève le fond vert pour obtenir un PNG transparent (un outil de suppression d'arrière-plan par IA gère mieux les contours qu'un simple filtre par couleur, surtout si le personnage contient lui-même du vert). Renomme les fichiers hero.png et slop.png.

04 Écris le prompt du jeu

Décris précisément le jeu : les deux personnages et leurs fichiers, les contrôles, les règles, la direction artistique et les contraintes techniques. Plus c'est précis, plus le premier jet est jouable.

Prompt · le jeu (à coller dans Claude Fable 5)
Tu es un développeur de jeux JavaScript senior. Crée un jeu de combat 2D complet, jouable dans le navigateur, dans UN SEUL fichier index.html autonome (HTML + CSS + JS vanilla, zéro dépendance externe, aucune image externe autre que hero.png et slop.png placés dans le même dossier).

Personnages :
- Joueur : "Monsieur Prompt" = sprite hero.png (PNG transparent, plein pied, orienté vers la droite).
- Adversaire (IA) : "Le Slop" = sprite slop.png (PNG transparent, plein pied, orienté vers la gauche).

Gameplay :
- Vue de côté, 2 combattants face à face. Monsieur Prompt à gauche, le Slop à droite.
- Joueur au clavier : flèches Gauche/Droite (ou Q/D) pour se déplacer, flèche Haut (ou Espace) pour sauter, F coup de poing, G coup de pied, S garde.
- Le Slop est piloté par une IA simple : s'approche, attaque à portée, recule parfois, bloque parfois.
- Barres de vie en haut (joueur à gauche, Slop à droite) avec les noms. Timer 60 s. Best of 3 rounds.
- Détection de coups (hitbox devant le combattant qui attaque), dégâts, knockback, courte invulnérabilité après un coup, flash rouge sur impact.
- Animations sans sprite-sheet : incline / scale / translate le sprite via canvas (avancer le sprite + légère rotation pour le poing, lever une jambe pour le kick), squash and stretch.
- KO : barre à 0, "K.O.", le perdant tombe, écran de victoire "Monsieur Prompt gagne" / "Le Slop gagne", bouton Rejouer.
- Écran titre : "MONSIEUR PROMPT vs LE SLOP", sous-titre "Généré par Claude Fable 5", bouton "COMBATTRE", rappel des touches.

Direction artistique (premium, sombre) :
- Fond arène : dégradé nuit #05060c vers #0d1019, sol avec ligne d'horizon néon, léger grain.
- Accents : or #e2b86f (titres UI), violet #9a73ff (énergie / coups), rouge #ff454f (dégâts / vie basse), vert #54d98a (vie haute).
- Typo grasse, lettres serrées pour les titres. Barres de vie stylées.
- Juice : screen shake sur gros coups, particules d'impact, hit-stop très bref, glow.
- Canvas responsive, ratio paysage 16:9, net sur écrans Retina (devicePixelRatio).

Contraintes techniques :
- Charge les images avec new Image(), attends onload avant de lancer la boucle (requestAnimationFrame), gère le delta time.
- Zéro erreur console. Code commenté et propre. Jeu immédiatement jouable en ouvrant index.html.
Rends UNIQUEMENT le contenu complet du fichier index.html.

05 Laisse Claude Fable 5 coder le jeu

Colle le prompt dans Claude Fable 5, dans Claude Code ou dans les Artifacts de claude.ai. Récupère le fichier index.html, place hero.png et slop.png dans le même dossier, puis ouvre index.html dans le navigateur. Fable 5 est fait pour ce genre de tâche : il code, teste et vérifie son propre travail.

Écran de combat du jeu avec les deux barres de vie et le décompte du round
Le héros saute pendant le combat contre le Slop

06 Teste, ajuste, capture

Joue une partie. Si un réglage cloche, demande-le en langage naturel : « rapproche les combattants », « rends l'IA plus agressive », « ajoute un effet d'impact ». Quand le jeu te plaît, enregistre l'écran : c'est ta matière pour le reel ou le carrousel.

07 Les outils à sortir de l'atelier

Trois outils, trois rôles nets dans la chaîne.

code

Claude Fable 5

Le moteur : il écrit le jeu complet à partir de ton prompt et l'améliore à la demande.

image

GPT Image 2

Les personnages : ton sprite héros (depuis ta photo) et l'adversaire sur mesure.

image

Détourage IA

Le nettoyage : un fond transparent propre pour que les sprites s'intègrent au décor.

08 La checklist avant de publier

Les points qui séparent un rendu « généré » d'un jeu qui donne envie d'être partagé.

  • Les deux sprites sont bien détourés, sans liseré vert autour des contours.
  • Le jeu se lance sans erreur et répond au clavier dès l'écran titre.
  • Les personnages restent dans l'arène, les barres de vie et le timer fonctionnent.
  • Le rendu tient la charte : fond sombre, accents or et violet, lisible en petit.
  • La partie est gagnable mais pas triviale : l'IA de l'adversaire résiste un peu.

09 Ce qui fait rater le résultat

01

Demander une vidéo à Fable 5

Fable 5 ne génère pas de vidéo. Sa force, c'est le code. On lui fait donc coder un jeu, pas filmer une scène.

02

Des sprites mal détourés

Un fond non uniforme ou un contour vert résiduel casse tout de suite l'illusion. Génère sur fond vert uni, puis détoure proprement.

03

Un prompt trop vague

« Fais-moi un jeu » donne un résultat pauvre. Précise les contrôles, les règles, la charte et les contraintes techniques.

10 Décliner la méthode

La même logique (photo, sprite, prompt, Fable 5) sert à d'autres formats de jeu.

01

Runner arcade

Ton personnage court et esquive les mauvais prompts. Boucle courte, parfaite pour un reel.

02

Boss fight

Un seul adversaire géant à vaincre, avec des phases. Plus spectaculaire, plus narratif.

03

Plateformer rétro

Des niveaux à traverser, des obstacles à sauter. Nostalgique et très lisible.

11 Résultat final

Un jeu jouable à ton effigie, un prompt réutilisable, et une mécanique de contenu redoutable : montrer un résultat wow tout en prouvant la vraie nature de Fable 5, un modèle de code et de raisonnement, pas un générateur de vidéo.

  • Un jeu index.html autonome, prêt à jouer et à partager.
  • Tes sprites détourés, réutilisables pour d'autres jeux.
  • Le prompt complet, adaptable en runner, boss fight ou plateformer.

12 Questions fréquentes

Claude Fable 5 génère-t-il une vidéo de moi ?

Non. Fable 5 ne génère pas de vidéo. C'est le modèle le plus puissant d'Anthropic pour le raisonnement et le code. Ici, il écrit le code d'un vrai jeu jouable où ta photo sert de personnage. Le rendu wow vient du code, pas d'une vidéo générée.

Faut-il savoir coder pour suivre la méthode ?

Non. Tu écris ta demande en français, Fable 5 produit un fichier index.html complet. Tu places tes deux images à côté, tu ouvres le fichier dans le navigateur, et ça se joue. Les ajustements se font aussi en langage naturel.

Combien de photos faut-il ?

Une seule photo de toi suffit pour créer le sprite du héros. On génère ensuite l'adversaire séparément. L'important est d'avoir deux images plein pied, détourées sur fond transparent.

Où utiliser Claude Fable 5 pour ça ?

Dans Claude Code ou dans les Artifacts de claude.ai. Claude Code est idéal car Fable 5 peut inspecter les fichiers, itérer et vérifier son propre travail. Pour découvrir Claude Code, vois la méthode créer un site avec Claude Code.

Sources officielles

13 Reçois la prochaine méthode

Une nouvelle méthode de production IA, avec ses prompts copiables, directement par email. Pas de hype, pas de spam.

En t’inscrivant, tu consens à recevoir les prochaines méthodes. Retrait possible à tout moment en écrivant à media@soulinked-arts.com. Confidentialité.

Continue dans l'atelier

Soigne d'abord tes personnages avec la méthode image, puis apprends à piloter l'écosystème Claude côté code.