Une planche qui paraît correcte en grille peut quand même sauter, glisser ou saccader en mouvement. Ouvrir le moteur pour vérifier chaque retouche prend du temps. Ce prévisualiseur lit la planche au FPS choisi, avec un zoom au pixel près, un onion skin pour vérifier l'espacement entre les frames, le ping-pong pour les idle et la lecture par ligne pour les planches qui contiennent plusieurs animations ou directions.
Comment utiliser l'outil Prévisualiseur d'animation
- Déposez une sprite sheet (la grille est détectée), plusieurs PNG de frames ou un GIF animé.
- Corrigez les lignes et les colonnes si besoin. Pour les planches à plusieurs lignes, choisissez une ligne pour lire une seule animation ou direction.
- Réglez le FPS. L'aperçu affiche aussi les millisecondes par frame, la valeur que demandent la plupart des moteurs.
- Avancez frame par frame avec les flèches, activez l'onion skin pour voir la frame précédente et essayez le ping-pong.
- Zoomez avec une mise à l'échelle au pixel près et changez de fond pour vérifier le sprite sur du sombre, du clair et du vert.
- Exportez un GIF avec la même vitesse, le même ping-pong et le même fond.
Ce que vous obtenez
- Aperçu en direct de 1 à 60 fps avec lecture image par image et raccourcis clavier.
- GIF animé de 1× à 8× avec fond transparent ou uni, prêt pour un devlog ou une page de store.
Moteurs compatibles
- Utilisez le FPS qui rend bien ici comme vitesse d'animation dans Godot (vitesse des SpriteFrames), Unity (Sample Rate), GameMaker (vitesse du sprite) ou Phaser (frameRate).
- La lecture par ligne reproduit la façon dont la plupart des moteurs stockent les planches à 4 et 8 directions : une ligne par direction.
Conseils tirés de nos propres jeux
- Les cycles de marche rendent généralement bien entre 8 et 12 fps ; les courses entre 12 et 16 ; les idle entre 4 et 8.
- L'onion skin affiche la frame précédente en bleu. Si un membre fait un grand saut entre deux frames, ajoutez une intervalle.
- Si le personnage glisse, les frames ne sont pas ancrées de la même façon. Redécoupez avec l'alignement en bas dans le Découpeur de sprite sheet.
- Vérifiez aussi sur un fond clair. Des contours sombres qui passent bien sur du noir peuvent disparaître sur des cartes de jeu sombres.
Cas d'usage
- Vérifier le timing d'une animation avant de l'importer dans un moteur.
- Relire des planches livrées par un artiste ou un pack d'assets.
- Faire un GIF d'une planche pour les réseaux sociaux ou un pitch deck.
- Comparer côte à côte, ligne par ligne, les directions d'un personnage à 8 directions.
FAQ
Comment contrôler la lecture au clavier ?
Espace lance et met en pause. Les flèches gauche et droite avancent d'une frame et mettent en pause.
Qu'est-ce que l'onion skin ?
Il affiche la frame précédente en transparence (teintée en bleu) sous la frame actuelle, pour voir de combien chaque partie bouge entre les frames et repérer les sauts.
Peut-il lire une seule ligne d'une planche ?
Oui. Quand la planche a plusieurs lignes, choisissez une ligne pour lire uniquement cette animation ou direction, ou Toutes pour lire chaque frame dans l'ordre.
Prend-il en charge les GIF et les frames séparées ?
Oui. Déposez un GIF animé pour lire ses frames, ou plusieurs PNG pour les lire dans l'ordre naturel des noms de fichiers.
Ma planche est-elle envoyée en ligne ?
Non. L'aperçu tourne entièrement dans votre navigateur.
Pourquoi mon animation est-elle floue dans d'autres visionneuses ?
La plupart des visionneuses lissent l'image à l'agrandissement. Celle-ci utilise le plus proche voisin, comme doit être réglé un jeu en pixel art : ce que vous voyez ici est ce que verront les joueurs.