first

2025-12-14 11:15:50 +01:00
parent d599677eec
commit 8462027d1d
36 changed files with 5539 additions and 1 deletions
--- a/public/assets/sprites/SPRITE_WORKFLOW.md
+++ b/public/assets/sprites/SPRITE_WORKFLOW.md
@@ -0,0 +1,148 @@
+# 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.