# 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` :

```typescript
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) :

```typescript
// 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()` :

```typescript
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.