149 lines
4.0 KiB
Markdown
149 lines
4.0 KiB
Markdown
# 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.
|