---
name: managing-sprites
description: Manages sprites, sprite sheets, sprite animations for arcade games (loading, rendering, collisions). Use when creating games or adding animated characters
allowed-tools: Read, Write, Grep, Glob, Bash
---

# Gestion des Sprites

Guide la gestion des sprites et sprite sheets pour les jeux arcade.

## Table des matières

- [Quand utiliser](#quand-utiliser)
- [Sprites dans le projet](#sprites-dans-le-projet)
- [Types de sprites](#types-de-sprites)
- [Concepts clés](#concepts-clés)
- [Classes et structures recommandées](#classes-et-structures-recommandées)
- [Optimisations](#optimisations)
- [Workflow de création sprite](#workflow-de-création-sprite)
- [Checklist sprite](#checklist-sprite)
- [En cas de doute](#en-cas-de-doute)

## Quand utiliser

- Ajout de nouveaux personnages/ennemis
- Création de sprite sheets
- Animations de sprites
- Détection de collisions
- Optimisation rendu sprites

## Sprites dans le projet

Trouve dans le code :

- Personnages joueurs
- Monstres et ennemis
- Power-ups et collectibles
- Sprite sheets existants

**Formats :**

- PNG avec transparence
- Sprite sheets (multiples frames)
- Résolutions multiples (@1x, @2x, @3x)

Examine le répertoire assets/sprites.

## Types de sprites

### 1. Sprite simple

Image statique, pas d'animation, position et taille fixes.

### 2. Sprite Sheet

**Multiple frames dans une image :**

- Layout horizontal (frames en ligne)
- Layout grille (frames en grille)
- Permet animations fluides

**Layouts courants :**

- Horizontal : 8 frames × 64px = 512×64px
- Grille 4×4 : 16 frames de 64×64px = 256×256px
- Par row : Chaque ligne = animation différente

Trouve les sprite sheets existants.

### 3. Sprite animé

**Animation frame par frame :**

- FPS configurable
- Boucle automatique
- Delta time pour smoothness

### 4. Sprite directionnel

**Différentes animations par direction :**

- Idle, Walk, Jump par direction
- Row dans sprite sheet par action
- State machine pour transitions

## Concepts clés

### Chargement d'images

**Asynchrone :**

- `Image.onload` pour savoir quand prêt
- Précharger avant utilisation
- Placeholder ou loading si nécessaire

Trouve comment le projet gère le chargement.

### Rendering

**Canvas drawImage() :**

- Source rectangle (quelle partie du sprite sheet)
- Destination rectangle (où dessiner)
- Scaling automatique si tailles différentes

Examine les fonctions de rendu dans les jeux.

### Collision Detection

**Techniques disponibles :**

- Bounding box (AABB) - Simple et rapide
- Collision circulaire - Pour objets ronds
- Pixel-perfect - Précis mais coûteux
- Hitbox personnalisée - Compromise

Trouve les fonctions de collision utilisées.

### Animation State Machine

**États et transitions :**

- IDLE → WALK → JUMP → FALL → IDLE
- Changement frame selon elapsed time
- Loop ou one-shot selon animation

Examine les state machines dans les jeux arcade.

## Classes et structures recommandées

Trouve dans le code :

- Classe Sprite de base
- Classe AnimatedSprite
- Manager de sprites (pool, loading)
- Helpers de collision

Examine l'architecture existante.

## Optimisations

### Performance

- **Sprite pooling** : Réutiliser instances au lieu de créer/détruire
- **Dirty flag** : Re-draw seulement si changement
- **Offscreen culling** : Pas de rendu si hors écran
- **Batch rendering** : Grouper draw calls

### Mémoire

- **Atlas textures** : Combiner sprites dans une texture
- **Lazy loading** : Charger sprites au besoin
- **Image scaling** : Charger résolution appropriée (@1x, @2x)
- **Cleanup** : Libérer sprites inutilisés

Cherche les optimisations déjà en place.

## Workflow de création sprite

### 1. Design sprite sheet

- Définir taille frame (64×64, 128×128, etc.)
- Organiser layout (horizontal, grille)
- Créer frames avec transparence PNG

### 2. Intégration code

- Charger sprite sheet
- Définir source rectangles par frame
- Setup animation (FPS, frames, loop)
- Render à chaque frame du jeu

### 3. Collision setup

- Définir hitbox pour collision
- Tester collisions avec autres sprites
- Ajuster hitbox si nécessaire

### 4. Tests et debug

- Afficher hitboxes en mode debug
- Vérifier timing animations
- Tester performance avec multiples sprites

## Checklist sprite

- [ ] Sprite sheet créé avec transparence PNG
- [ ] Layout défini (horizontal/grille)
- [ ] Frames chargées correctement
- [ ] Animations fluides (FPS approprié)
- [ ] Collisions détectées correctement
- [ ] Hitboxes ajustées
- [ ] Performance acceptable (60 FPS)
- [ ] Cleanup mémoire implémenté

## En cas de doute

**Source :** Jeux arcade existants + sprite utils

**Règles absolues :**

1. Toujours précharger sprites avant utilisation
2. Utiliser delta time pour animations fluides
3. Bounding box (AABB) pour la plupart des collisions
4. Sprite pooling si > 10 instances simultanées
5. Cleanup sprites inutilisés pour éviter memory leaks

**Workflow minimal :**

- Charger sprite sheet avec Image.onload
- drawImage() avec source/destination rectangles
- Collision AABB pour détection rapide