Créer des jeux 2D avec Tiniest2D
Sprites et Animation
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
Création des Actifs
Les actifs sont les éléments que votre jeu utilise : images, scènes, sons et objets. Dans Tiniest2D, vous créez la plupart des actifs en écrivant une variable dans le script. L'éditeur détecte des constructeurs comme Sprite() et vous permet d'éditer l'actif visuellement.

Sprites
Les sprites sont des images pixel-art. Ils sont utilisés pour les personnages, les murs, les pièces, les boutons, les balles, les fonds et tout ce qui doit être dessiné. Un sprite peut être une seule image ou une petite animation composée de plusieurs images.
Pour créer un sprite, déclarez une variable avec le constructeur Sprite() :
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
Les nombres représentent la largeur et la hauteur en pixels. Après avoir enregistré, vous verrez le nom de la variable entouré d'une boîte sombre - cela indique qu'il s'agit d'un actif sprite.
Pour éditer un sprite :
- Ctrl+Click sur le nom de la variable sprite
- L'Éditeur de Sprites s'ouvre
Contrôles de l'Éditeur de Sprites

L'Éditeur de Sprites est l'endroit où vous dessinez l'image pixel par pixel. Si vous êtes nouveau dans l'art pixel, commencez petit : des sprites de 8x8 ou 16x16 sont plus faciles à lire, éditer et animer.
| Contrôle | Action |
|---|---|
| Clic gauche | Peindre un pixel avec la couleur actuelle |
| Clic droit | Effacer un pixel (transparent) |
| Faites glisser la molette | Panoramique de la vue |
| Molette de souris | Zoom avant/arrière |
| Palette de couleurs | Cliquez pour sélectionner une couleur |
| Largeur/Hauteur +/- | Redimensionner le sprite |
| Bascules de colliders | Activer/désactiver les limites de collision |
| Décalages de colliders | Ajuster les marges de collision G/H/D/B |
| Afficher Collider | Prévisualiser les limites de collision |
| Espace | Activer/désactiver l'aperçu de l'animation |
| Flèches gauche/droite | Naviguer entre les images |
| Échap | Retour à l'éditeur de script |
Panneau d'Animation
L'animation se fait en montrant plusieurs images de sprite rapidement en séquence. Par exemple, un personnage qui marche pourrait avoir une image avec le pied gauche en avant et une autre avec le pied droit en avant.

Le panneau d'animation (dans la barre latérale gauche) vous permet de gérer les images de sprite :
| Contrôle | Action |
|---|---|
| FPS +/- | Ajuster la vitesse de l'animation (images par seconde) |
| Ajouter une Image | Ajouter une nouvelle image vide à la fin |
| Copier l'Image | Dupliquer l'image actuelle (insérée après la courante) |
| Supprimer l'Image | Supprimer l'image actuelle (uniquement si plus de 1 image) |
| Panneau d'Images | Cliquez sur les vignettes en bas pour sélectionner les images |
Lorsque un sprite a plusieurs images, les objets qui l'utilisent s'animeront automatiquement au moment de l'exécution. Chaque objet suit son propre état d'animation indépendamment.