mario/public/assets/sprites/SPRITE_WORKFLOW.md

Workflow de création des sprites du personnage

Objectif

Transformer une photo du neveu en sprites animés utilisables dans le jeu.

Étapes de création

1. Préparation de l'image source

1. Choisir une photo :

   • Fond uni si possible (facilite le détourage)
   • Bonne résolution
   • Pose neutre (debout, de profil ou face)

2. Détourage :

   • Utiliser GIMP (gratuit) ou Photoshop
   • Outil de sélection intelligente / baguette magique
   • Supprimer le fond → fond transparent
   • Exporter en PNG

2. Création des frames d'animation

Option A : Simplification graphique manuelle

1. Réduire la taille à environ 64x64 ou 128x128 pixels
2. Simplifier les détails (style pixel art ou cartoon)
3. Créer 3 animations :
   • Idle : 2-4 frames (immobile, léger mouvement)
   • Walk : 4-8 frames (cycle de marche)
   • Jump : 2-4 frames (montée, pic, descente)

Outils recommandés :

• Piskel (https://www.piskelapp.com/) - Éditeur pixel art en ligne
• Aseprite (payant mais excellent)
• GIMP avec grille pixel

Option B : Utilisation d'IA générative

1. Utiliser la photo détourée comme référence
2. Générer des sprites avec :
   • DALL-E / Midjourney : "pixel art character sprite sheet, side view, walking animation"
   • Stable Diffusion avec ControlNet pour maintenir la ressemblance

3. Création de la spritesheet

Une spritesheet est une image unique contenant toutes les frames.

Format recommandé :

[Idle1][Idle2][Idle3][Idle4][Walk1][Walk2][Walk3][Walk4][Jump1][Jump2][Jump3]

Dimensions :

• Taille d'une frame : 64x64 ou 128x128
• Spritesheet totale : (frameWidth × nombreDeFrames) × frameHeight
• Exemple : 11 frames de 64x64 = 704x64 pixels

Outils pour créer la spritesheet :

• Piskel : exporte automatiquement en spritesheet
• TexturePacker : assemble plusieurs images en spritesheet
• GIMP : assembler manuellement avec des calques

4. Exportation

• Format : PNG avec transparence
• Nom suggéré : player_spritesheet.png
• Placer dans : public/assets/sprites/

5. Configuration dans Phaser

Fichier src/scenes/BootScene.ts :

preload(): void {
    this.load.spritesheet('player', 'assets/sprites/player_spritesheet.png', {
        frameWidth: 64,
        frameHeight: 64,
    });
}

Fichier src/entities/Player.ts (dans le constructor ou create) :

// Créer les animations
this.scene.anims.create({
    key: 'idle',
    frames: this.scene.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 8,
    repeat: -1,
});

this.scene.anims.create({
    key: 'walk',
    frames: this.scene.anims.generateFrameNumbers('player', { start: 4, end: 7 }),
    frameRate: 10,
    repeat: -1,
});

this.scene.anims.create({
    key: 'jump',
    frames: this.scene.anims.generateFrameNumbers('player', { start: 8, end: 10 }),
    frameRate: 10,
    repeat: 0,
});

6. Jouer les animations

Dans src/entities/Player.ts, méthode updateAnimation() :

if (this.isJumping) {
    this.play('jump', true);
} else if (Math.abs(this.velocityX) > 10) {
    this.play('walk', true);
} else {
    this.play('idle', true);
}

Alternative rapide : Sprites temporaires

Si vous voulez tester rapidement sans créer de sprites :

1. Utiliser des formes géométriques (déjà fait dans le code)
2. Utiliser des sprites gratuits en ligne :
   • OpenGameArt.org
   • Itch.io (section assets)
   • Kenney.nl (assets gratuits haute qualité)

Ressources utiles

• Piskel : https://www.piskelapp.com/
• GIMP : https://www.gimp.org/
• Remove.bg : https://www.remove.bg/ (détourage automatique)
• OpenGameArt : https://opengameart.org/
• Kenney Assets : https://kenney.nl/assets

Exemple de dimensions

Pour un jeu mobile :

• 64x64 : Style rétro/pixel art, performances optimales
• 128x128 : Plus de détails, toujours performant
• 256x256 : Haute résolution, peut impacter les perfs

Recommandation : 64x64 ou 128x128 pour ce projet.