Sprites et Costumes

Sprites et Costumes dans Scratch 3.0

Les sprites et leurs costumes sont les éléments visuels fondamentaux de vos projets Scratch. Ce guide vous apprendra tout ce qu’il faut savoir pour créer, gérer et animer vos personnages et objets.

Comprendre les Sprites

Qu’est-ce qu’un Sprite ?

Un sprite est un objet graphique qui peut être programmé pour se déplacer, changer d’apparence, émettre des sons et interagir avec d’autres éléments de votre projet.

Anatomie d’un Sprite

Chaque sprite possède :

Costumes : Différentes apparences visuelles
Sons : Fichiers audio associés
Scripts : Code qui contrôle son comportement
Propriétés : Position, taille, direction, visibilité
Variables locales : Données spécifiques au sprite

Le Sprite Chat (Scratch Cat)

Par défaut, chaque nouveau projet contient le sprite chat emblématique de Scratch :

Nom : Sprite1 (modifiable)
Costumes : costume1 et costume2
Position : Centre de la scène (x:0, y:0)
Taille : 100%
Direction : 90° (vers la droite)

Gestion des Sprites

Créer un Nouveau Sprite

1. Choisir un Sprite de la Bibliothèque

// Dans l'interface Scratch :
1. Cliquer sur l'icône sprite (en bas à droite)
2. Sélectionner "Choisir un sprite"
3. Parcourir les catégories :
   - Animaux
   - Personnes
   - Fantaisie
   - Musique
   - Sports
   - Nourriture
   - Objets

Sprites Populaires :

Abby : Personnage féminin polyvalent
Avery : Personnage masculin moderne
Ballon : Parfait pour les jeux de physique
Balle : Idéal pour les jeux de sport
Papillon : Excellent pour les animations naturelles
Voiture : Parfait pour les jeux de course

2. Dessiner un Nouveau Sprite

// Créer un sprite personnalisé :
1. Cliquer sur l'icône pinceau
2. Utiliser l'éditeur de dessin intégré
3. Choisir entre mode Bitmap ou Vectoriel

3. Importer un Sprite

// Utiliser vos propres images :
1. Cliquer sur l'icône dossier
2. Sélectionner un fichier image (PNG, JPG, SVG)
3. L'image devient automatiquement un costume

4. Sprite Surprise

// Laisser Scratch choisir :
1. Cliquer sur l'icône dé
2. Un sprite aléatoire est ajouté
3. Parfait pour l'inspiration !

Propriétés des Sprites

Position

// Coordonnées sur la scène
aller à x: (100) y: (50)     // Position absolue
ajouter (10) à x             // Déplacement relatif
ajouter (-5) à y             // Déplacement relatif

// Limites de la scène :
// x: de -240 à +240
// y: de -180 à +180

Taille

// Contrôle de la taille
mettre la taille à (150) %   // 150% de la taille originale
ajouter (10) à la taille     // Augmenter de 10%
ajouter (-5) à la taille     // Diminuer de 5%

// Limites pratiques :
// Minimum : 5%
// Maximum : 1000%

Direction

// Orientation du sprite
s'orienter vers (90) degrés  // Droite
s'orienter vers (180) degrés // Bas
s'orienter vers (270) degrés // Gauche
s'orienter vers (0) degrés   // Haut

// Rotation relative
tourner ↻ de (15) degrés     // Horaire
tourner ↺ de (15) degrés     // Anti-horaire

Visibilité

// Contrôle de l'affichage
se montrer                   // Rendre visible
se cacher                    // Rendre invisible

// Vérification
si <visible?> alors
  dire [Je suis visible !]
fin

Calques (Ordre d’Affichage)

// Gestion de la profondeur
aller au premier plan        // Devant tous les autres
aller à l'arrière-plan      // Derrière tous les autres
avancer de (2) plans        // Monter de 2 niveaux
reculer de (1) plan         // Descendre de 1 niveau

Duplication et Suppression

Dupliquer un Sprite

// Méthode 1 : Clic droit
1. Clic droit sur le sprite
2. Sélectionner "dupliquer"
3. Le nouveau sprite hérite de tous les scripts

// Méthode 2 : Glisser-déposer
1. Maintenir Alt (PC) ou Option (Mac)
2. Glisser le sprite
3. Relâcher pour créer la copie

Supprimer un Sprite

// Méthode 1 : Clic droit
1. Clic droit sur le sprite
2. Sélectionner "supprimer"

// Méthode 2 : Icône poubelle
1. Sélectionner le sprite
2. Cliquer sur l'icône poubelle

// Méthode 3 : Par script
arrêter [autres scripts du sprite]
supprimer ce clone  // Pour les clones uniquement

Comprendre les Costumes

Qu’est-ce qu’un Costume ?

Un costume est une apparence visuelle spécifique d’un sprite. Chaque sprite peut avoir plusieurs costumes pour créer des animations ou représenter différents états.

Types de Costumes

1. Costumes d’Animation

// Exemple : Marche du chat
costume1 : Patte gauche en avant
costume2 : Pattes ensemble
costume3 : Patte droite en avant
costume4 : Pattes ensemble

// Script d'animation
répéter indéfiniment
  costume suivant
  attendre (0.2) secondes
fin

2. Costumes d’État

// Exemple : États d'un personnage
costume1 : Normal
costume2 : Heureux
costume3 : Triste
costume4 : En colère
costume5 : Endormi

// Changement selon le score
si <(score) > (100)> alors
  basculer sur le costume [heureux]
sinon
  basculer sur le costume [normal]
fin

3. Costumes de Transformation

// Exemple : Évolution d'un personnage
costume1 : Œuf
costume2 : Larve
costume3 : Chrysalide
costume4 : Papillon

// Évolution temporelle
attendre (5) secondes
costume suivant
attendre (5) secondes
costume suivant

Gestion des Costumes

Ajouter des Costumes

Depuis la Bibliothèque

1. Sélectionner le sprite
2. Aller dans l'onglet "Costumes"
3. Cliquer sur l'icône costume (en bas)
4. Choisir dans la bibliothèque

Dessiner un Costume

1. Onglet "Costumes"
2. Cliquer sur l'icône pinceau
3. Utiliser l'éditeur de dessin
4. Sauvegarder automatiquement

Importer un Costume

1. Onglet "Costumes"
2. Cliquer sur l'icône dossier
3. Sélectionner un fichier image
4. Ajustement automatique

Dupliquer un Costume

1. Clic droit sur le costume
2. Sélectionner "dupliquer"
3. Modifier la copie selon les besoins

Modifier des Costumes

Éditeur Vectoriel

// Avantages :
- Redimensionnement sans perte
- Formes géométriques précises
- Couleurs unies et dégradés
- Idéal pour les designs simples

// Outils principaux :
- Sélection
- Redimensionnement
- Formes (rectangle, cercle, triangle)
- Texte
- Remplissage et contour

Éditeur Bitmap

// Avantages :
- Détails fins et textures
- Effets artistiques
- Modification pixel par pixel
- Idéal pour les images complexes

// Outils principaux :
- Pinceau
- Gomme
- Seau de peinture
- Pipette
- Formes
- Texte

Propriétés des Costumes

Centre de Rotation

// Point autour duquel le sprite tourne
1. Sélectionner l'outil "Définir le centre de rotation"
2. Cliquer sur le point désiré
3. Croix bleue = nouveau centre

// Positions courantes :
- Centre : Rotation équilibrée
- Base : Rotation comme un pendule
- Coin : Rotation autour d'un pivot

Nom du Costume

// Renommer pour une meilleure organisation
1. Double-clic sur le nom
2. Saisir le nouveau nom
3. Appuyer sur Entrée

// Conventions de nommage :
- marche1, marche2, marche3...
- normal, heureux, triste...
- petit, moyen, grand...

Animation avec les Costumes

Animation Basique

Boucle Simple

quand [drapeau vert] est cliqué
répéter indéfiniment
  costume suivant
  attendre (0.3) secondes
fin

Animation Contrôlée

quand [drapeau vert] est cliqué
répéter indéfiniment
  si <touche [flèche droite] pressée?> alors
    costume suivant
    attendre (0.1) secondes
  fin
fin

Animation Bidirectionnelle

quand [drapeau vert] est cliqué
mettre [direction_costume] à (1)
répéter indéfiniment
  si <(numéro de costume) = (nombre de costumes)> alors
    mettre [direction_costume] à (-1)
  fin
  si <(numéro de costume) = (1)> alors
    mettre [direction_costume] à (1)
  fin
  ajouter (direction_costume) au numéro de costume
  attendre (0.2) secondes
fin

Animations Avancées

Animation Synchronisée avec le Mouvement

quand [drapeau vert] est cliqué
répéter indéfiniment
  si <<touche [flèche droite] pressée?> ou <touche [flèche gauche] pressée?>> alors
    // Marche
    costume suivant
    si <(numéro de costume) > (4)> alors
      basculer sur le costume [marche1]
    fin
  sinon
    // Immobile
    basculer sur le costume [repos]
  fin
  attendre (0.1) secondes
fin

Animation d’État

// Variable : état_personnage
répéter indéfiniment
  si <(état_personnage) = [normal]> alors
    basculer sur le costume [normal]
  fin
  si <(état_personnage) = [attaque]> alors
    basculer sur le costume [attaque1]
    attendre (0.2) secondes
    basculer sur le costume [attaque2]
    attendre (0.2) secondes
    basculer sur le costume [attaque3]
    attendre (0.2) secondes
    mettre [état_personnage] à [normal]
  fin
  si <(état_personnage) = [dégâts]> alors
    répéter (3) fois
      basculer sur le costume [dégâts]
      attendre (0.1) secondes
      basculer sur le costume [normal]
      attendre (0.1) secondes
    fin
    mettre [état_personnage] à [normal]
  fin
fin

Animation de Transformation

quand je reçois [transformation]
répéter (nombre de costumes) fois
  costume suivant
  attendre (0.5) secondes
fin
envoyer à tous [transformation terminée]

Techniques d’Animation

1. Vitesse Variable

// Animation rapide au début, lente à la fin
mettre [vitesse] à (0.05)
répéter (10) fois
  costume suivant
  attendre (vitesse) secondes
  ajouter (0.02) à [vitesse]
fin

2. Animation Conditionnelle

// Animation différente selon la direction
si <(direction) = (90)> alors
  // Costumes pour aller à droite
  si <(numéro de costume) < (5)> alors
    basculer sur le costume [droite1]
  sinon
    basculer sur le costume [droite2]
  fin
sinon
  // Costumes pour aller à gauche
  si <(numéro de costume) < (5)> alors
    basculer sur le costume [gauche1]
  sinon
    basculer sur le costume [gauche2]
  fin
fin

3. Animation en Boucle Limitée

// Animation qui se joue X fois puis s'arrête
mettre [répétitions] à (0)
répéter jusqu'à ce que <(répétitions) = (3)>
  répéter (4) fois  // 4 costumes dans l'animation
    costume suivant
    attendre (0.2) secondes
  fin
  ajouter (1) à [répétitions]
fin
basculer sur le costume [repos]

Interaction entre Sprites

Détection de Contact

Contact Simple

répéter indéfiniment
  si <je touche [Sprite2]?> alors
    dire [Contact détecté !]
    jouer le son [bip]
  fin
fin

Contact avec Réaction

répéter indéfiniment
  si <je touche [Ennemi]?> alors
    // Réaction visuelle
    basculer sur le costume [touché]
    attendre (0.5) secondes
    basculer sur le costume [normal]
    // Conséquences
    ajouter (-10) à [points de vie]
    aller à x: (0) y: (0)  // Retour au départ
  fin
fin

Contact par Couleur

répéter indéfiniment
  si <je touche la couleur [#ff0000]?> alors
    dire [Zone rouge !]
    // Action spécifique à la couleur
  fin
  si <je touche la couleur [#00ff00]?> alors
    dire [Zone verte !]
    // Action différente
  fin
fin

Communication entre Sprites

Messages

// Sprite émetteur
si <je touche [Interrupteur]?> alors
  envoyer à tous [activer lumière]
fin

// Sprite récepteur (Lumière)
quand je reçois [activer lumière]
basculer sur le costume [allumée]
attendre (5) secondes
basculer sur le costume [éteinte]

Variables Partagées

// Sprite Joueur
si <je touche [Pièce]?> alors
  ajouter (10) à [score global]
fin

// Sprite Interface
répéter indéfiniment
  dire (rejoindre [Score: ] (score global))
  attendre (0.1) secondes
fin

Propriétés d’Autres Sprites

// Suivre un autre sprite
répéter indéfiniment
  s'orienter vers [Joueur]
  avancer de (2) pas
  si <(distance jusqu'à [Joueur]) < (30)> alors
    dire [Je t'ai attrapé !]
  fin
fin

Clonage de Sprites

Concept du Clonage

Le clonage permet de créer des copies temporaires d’un sprite avec le même comportement mais des propriétés indépendantes.

Création de Clones

Clone Simple

// Sprite principal (invisible)
quand [drapeau vert] est cliqué
se cacher
répéter (10) fois
  créer un clone de [moi-même]
  attendre (1) secondes
fin

// Script des clones
quand je commence comme un clone
aller à x: (nombre aléatoire entre (-200) et (200)) y: (150)
se montrer
répéter jusqu'à ce que <(ordonnée y) < (-180)>
  ajouter (-5) à y
fin
supprimer ce clone

Clones avec Propriétés Aléatoires

quand je commence comme un clone
// Position aléatoire
aller à x: (nombre aléatoire entre (-240) et (240)) y: (180)
// Taille aléatoire
mettre la taille à (nombre aléatoire entre (50) et (150)) %
// Costume aléatoire
basculer sur le costume (nombre aléatoire entre (1) et (nombre de costumes))
// Vitesse aléatoire
mettre [vitesse] à (nombre aléatoire entre (2) et (8))
se montrer

répéter jusqu'à ce que <(ordonnée y) < (-180)>
  ajouter ((vitesse) * (-1)) à y
  tourner ↻ de (5) degrés
fin
supprimer ce clone

Gestion des Clones

Limitation du Nombre

// Variable globale : nombre_clones
si <(nombre_clones) < (20)> alors
  créer un clone de [moi-même]
  ajouter (1) à [nombre_clones]
fin

// Dans le script du clone
quand je commence comme un clone
// ... logique du clone ...
ajouter (-1) à [nombre_clones]
supprimer ce clone

Suppression Conditionnelle

quand je commence comme un clone
répéter indéfiniment
  // Logique du clone
  si <je touche [Joueur]?> alors
    ajouter (10) à [score]
    jouer le son [collect]
    supprimer ce clone
  fin
  si <(ordonnée y) < (-200)> alors
    supprimer ce clone
  fin
  si <(état_jeu) = [fin]> alors
    supprimer ce clone
  fin
fin

Clones Intelligents

quand je commence comme un clone
// Chaque clone a un comportement unique
mettre [type_clone] à (nombre aléatoire entre (1) et (3))

répéter indéfiniment
  si <(type_clone) = (1)> alors
    // Comportement type 1 : Mouvement linéaire
    ajouter (-3) à y
  fin
  si <(type_clone) = (2)> alors
    // Comportement type 2 : Mouvement sinusoïdal
    ajouter (-2) à y
    ajouter (([sin] de (minuteur * 100)) * 3) à x
  fin
  si <(type_clone) = (3)> alors
    // Comportement type 3 : Poursuite du joueur
    s'orienter vers [Joueur]
    avancer de (1) pas
  fin

  si <(ordonnée y) < (-180)> alors
    supprimer ce clone
  fin
fin

Techniques Avancées

Sprites Dynamiques

Changement de Costume par Code

// Système de santé visuel
répéter indéfiniment
  si <(points_de_vie) > (75)> alors
    basculer sur le costume [pleine_santé]
  fin
  si <<(points_de_vie) > (50)> et <(points_de_vie) ≤ (75)>> alors
    basculer sur le costume [bonne_santé]
  fin
  si <<(points_de_vie) > (25)> et <(points_de_vie) ≤ (50)>> alors
    basculer sur le costume [santé_moyenne]
  fin
  si <(points_de_vie) ≤ (25)> alors
    basculer sur le costume [faible_santé]
  fin
fin

Costumes Génératifs

// Création de costumes par assemblage
quand je reçois [générer personnage]
// Base
basculer sur le costume [corps_base]
// Couleur selon le niveau
si <(niveau) < (5)> alors
  mettre l'effet [couleur] à (0)     // Rouge
sinon
  mettre l'effet [couleur] à (60)    // Jaune
fin
// Taille selon l'expérience
mettre la taille à ((100) + (expérience)) %

Optimisation des Performances

Gestion Efficace des Costumes

// Éviter les changements inutiles
si <non <(costume actuel) = [costume_désiré]>> alors
  basculer sur le costume [costume_désiré]
fin

// Précharger les costumes critiques
quand [drapeau vert] est cliqué
répéter (nombre de costumes) fois
  costume suivant
  attendre (0.01) secondes
fin
basculer sur le costume [initial]

Réduction des Calculs

// Mettre à jour l'animation moins fréquemment
mettre [compteur_animation] à (0)
répéter indéfiniment
  ajouter (1) à [compteur_animation]
  si <((compteur_animation) mod (5)) = (0)> alors
    costume suivant
  fin
fin

Effets Visuels Avancés

Transition entre Costumes

// Fondu entre costumes
définir [transition vers costume] (nouveau_costume)
  répéter (10) fois
    ajouter (-10) à l'effet [fantôme]
  fin
  basculer sur le costume (nouveau_costume)
  répéter (10) fois
    ajouter (10) à l'effet [fantôme]
  fin
fin

Animation Complexe

// Système d'animation par frames
mettre [frame_actuelle] à (1)
mettre [frames_par_seconde] à (12)
mettre [durée_frame] à ((1) / (frames_par_seconde))

répéter indéfiniment
  basculer sur le costume (frame_actuelle)
  attendre (durée_frame) secondes
  ajouter (1) à [frame_actuelle]
  si <(frame_actuelle) > (nombre de costumes)> alors
    mettre [frame_actuelle] à (1)
  fin
fin

Résolution de Problèmes

Problèmes Courants

1. Animation Trop Rapide/Lente

// ❌ Problème
répéter indéfiniment
  costume suivant  // Trop rapide !
fin

// ✅ Solution
répéter indéfiniment
  costume suivant
  attendre (0.2) secondes  // Vitesse contrôlée
fin

2. Costumes qui ne Changent Pas

// Vérifier :
1. Le sprite a-t-il plusieurs costumes ?
2. Le script s'exécute-t-il ?
3. Y a-t-il des conditions bloquantes ?

// Debug :
dire (numéro de costume)  // Afficher le numéro actuel

3. Clones qui ne Disparaissent Pas

// Toujours inclure une condition de suppression
répéter indéfiniment
  // Logique du clone
  si <(condition_suppression)> alors
    supprimer ce clone
  fin
fin

4. Performance Dégradée

// Limiter le nombre de clones
si <(nombre_clones) < (limite_clones)> alors
  créer un clone de [moi-même]
fin

// Supprimer les clones hors écran
si <<(abscisse x) < (-250)> ou <(abscisse x) > (250)>> alors
  supprimer ce clone
fin

Conseils de Débogage

Visualisation des États

// Afficher l'état actuel
dire (rejoindre [Costume: ] (nom de costume))
dire (rejoindre [Position: ] (rejoindre (abscisse x) (rejoindre [,] (ordonnée y))))

Test des Animations

// Mode test : changement manuel
quand la touche [n] est pressée
costume suivant

quand la touche [p] est pressée
costume précédent

Bonnes Pratiques

Organisation

Noms descriptifs : “marche1”, “saut”, “attaque”
Groupement logique : Animations similaires ensemble
Taille cohérente : Même dimensions pour tous les costumes
Centre de rotation : Positionné correctement

Performance

Limiter les clones : Maximum 20-30 simultanés
Supprimer les clones inutiles : Hors écran ou inactifs
Optimiser les animations : Pas trop de frames par seconde
Réutiliser les costumes : Éviter les doublons

Créativité

Expérimenter : Tester différentes combinaisons
Inspiration : Observer d’autres projets
Itération : Améliorer progressivement
Feedback : Demander l’avis d’autres utilisateurs

Conclusion

Les sprites et costumes sont les éléments visuels qui donnent vie à vos projets Scratch. En maîtrisant leur création, gestion et animation, vous pouvez créer des expériences visuellement riches et engageantes.

Rappelez-vous que la clé du succès réside dans la pratique et l’expérimentation. Commencez par des animations simples, puis progressez vers des techniques plus avancées. Chaque projet vous permettra de découvrir de nouvelles possibilités créatives !

Avec ces connaissances, vous êtes maintenant équipé pour créer des personnages expressifs, des objets interactifs et des animations captivantes qui impressionneront votre audience.