Atelier

2026-08-30

Outil Animatron

Animateur standalone pour donner vie a un sprite unique par mouvements, deformation, pivot et trajectoire, avec exports JSON et PNG.

SpritesAnimationToolsPipeline
Accéder à l’outil interactif

Ce que fait l outil

Animatron anime un sprite unique sans demander une planche de frames. Le mouvement est construit a partir de transformations: translation, rotation, squash and stretch, pivot, intensite, vitesse et avancee reelle.

L objectif est de prototyper tres vite une animation lisible pour un personnage, un animal, une unite ou un element de decor, surtout quand on veut tester l intention avant de produire des frames definitives.

Quand l utiliser

  • Pour donner un idle, une marche, une attaque, une reaction ou une action de travail a une image fixe.
  • Pour comparer rapidement plusieurs mouvements sur le meme sprite.
  • Pour preparer des presets JSON reutilisables dans un moteur de jeu ou un pipeline d integration.
  • Pour exporter une image de preview PNG d une posture animee.

Quand ne pas l utiliser

  • Quand il faut dessiner une vraie animation frame par frame.
  • Quand chaque membre du personnage doit etre anime separement avec du rigging avance.
  • Quand il faut une synchronisation cloud ou un espace collaboratif multi-utilisateur.

Tutoriel rapide

  1. Ouvrir /outils/animatron.
  2. Charger un sprite PNG, WEBP, JPG ou GIF fixe.
  3. Choisir un mouvement dans la bibliotheque: repos, deplacement, combat, reaction, travail ou special.
  4. Ajuster vitesse, intensite, verticalite, horizontalite, rotation, squash and stretch, echelle et avancee.
  5. Regler le pivot pour ancrer correctement les pieds, la monture ou le point d appui.
  6. Ajouter plusieurs mouvements a la sequence d essai si besoin.
  7. Exporter l animation courante, le pack complet, la config copiee ou un apercu PNG.

Workflow recommande (Tavern Tales)

Le bon usage actuel est de charger un sprite brut, tester plusieurs mouvements, puis exporter le JSON du preset retenu. Ce JSON peut servir de contrat de travail entre prototypage, integration moteur et animation finale.

Pour une publication ou une validation rapide, utiliser l export PNG comme apercu visuel, puis garder le JSON pour reproduire les parametres.

Fonctions cles

  • Bibliotheque de mouvements preconfigures par archetype: humain, paysan, soldat, animal, cheval et cavalier.
  • Reglages continus de vitesse, intensite, trajectoire, rotation, deformation et echelle.
  • Pivot X/Y pour stabiliser le sprite au sol ou autour d un point d appui.
  • Sequence d essai pour enchainer plusieurs mouvements.
  • Grille, ombre, fantomes de trajectoire, reperes de pivot et zoom de scene.
  • Exports JSON, pack complet, config copiee et apercu PNG.
  • Preferences locales dans le navigateur.

Stack technique

  • Single-file HTML.
  • Canvas + Vanilla JS + CSS custom properties.
  • localStorage pour les preferences d affichage.
  • Exports navigateur via Blob et canvas.

Limites actuelles

  • Le sprite charge reste local au navigateur et n est pas synchronise au compte Tavern Tales.
  • L export principal est un JSON de mouvement, pas une spritesheet frame par frame.
  • Les animations sont basees sur des transformations globales du sprite, pas sur un squelette articule.
  • Le runtime garde son identite visuelle propre, deja proche de l univers Tavern Tales; un alignement theme complet pourra etre traite plus tard si necessaire.

Evolutions envisagees

  • Export video ou GIF de la sequence.
  • Presets dedies aux assets Tavern Adventure ou Petit Empire.
  • Import/export de bibliotheques de mouvements nommees.
  • Integration optionnelle a un pipeline de spritesheets quand une animation frame par frame devient necessaire.

Acces rapide

  • Outil interactif: /outils/animatron
  • Runtime source integre: apps/web/public/tools/animatron.html
  • Source fournie: public-assets/Animatron.html