managing-sprites
Manages sprites, sprite sheets, sprite animations for arcade games (loading, rendering, collisions). Use when creating games or adding animated characters
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
--- 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