Les animations

[L'Omniscient]

Bonjour tout le monde !
En train de développer mon jeu par navigateur, je me confronte à un soucis auquel j'ai du mal à trouver une solution.
Comment réaliser des animations un peu longues ?

Alors oui, je sais faire en sorte que des images se succèdent en JS, donc possiblement faire une animation avec chaque image étant dessinée.
Mais c'est vraiment lourd non ? Pas très adapté ?

J'ai déjà fait quelques gifs... Mais est-ce une bonne façon de faire ?

J'ai regardé du côté de logiciels d'animation vectorielle, notamment Synfig, mais est-il possible d'utiliser une telle animation sur une plateforme web ?

Et vous, comment gérez-vous vos animations ?

[Argorate]

C'est marrant, je me posais aussi la question.
Je compte faire des sortes de cinématique scripté pour mon prochain jeu, et pour l'instant je pars sur du script JS.
Mais je me demandais justement si quand y a trop d'éléments en simultané, si ce n'est pas plus optimisé de passer par un gif... d'un autre coté il sera lourd à charger...

Je ne sais pas, je verrais en faisant des tests, si quelqu'un a une autre solution je suis preneur

[L'Omniscient]

Du coup en terme de gifs, tu utilises un logiciel particulier ?
Parce que les seuls gifs que j'ai fais jusqu'à présent c'est des logos qui clignotent ... :p
Avec GIMP mais ça me paraît pas génial.

[Xenos]

Salut,

à mon avis, il y a plusieurs solutions pour faire des animations:
• Une vidéo, parfaitement adapté aux cinématiques et aux animations longues (plusieurs minutes). Assez difficile d'y mettre de l'interaction (à part "l'animation est finie", il ne doit pas y avoir beaucoup de contrôle dessus); cela peut être une bonne solution également si l'utilisateur doit avoir le contrôle dessus
• Les animations SVG, qui me semblent adaptées à tout ce qui est interaction, ralentis, et qui n'ont pas énormément d'éléments (un SVG souffre s'il faut afficher des centaines de sprites). Cela permet de faire des animations dynamiques, générées en temps réel par le client ou le serveur. Cela permet aussi de faire des ralentis ou d'accélérer le temps. Cela offre enfin un bon contrôle puisque ce sont des noeuds de DOM
• Les animations GIF, pratiques pour des petites sprites. Assez peu de contrôle dessus, et on oublis les ralentis (car c'est une animation par frame). Difficile à générer en temps réel (aka, à la volée)
• Les PNG qui s'enchainent par javascript. Bien plus lourd que des GIFs (même s'il faudrait en faire une mesure exacte). On peut être vite limité par la taille/le nombre de frames de l'animation (surtout si toutes les frames sont dans la même image). On perd le rendu progressif (surtout si les frames sont dans la même image), mais on peut contrôler précisément à quelle frame on est (si c'est utile... perso, je ne vois pas dans quelle situation)


Donc pour ma part:
• Cinématique => vidéo(s)
• Animation donnant des informations (genre déplacement d'un camion de marchandises sur une route) => SVG (qui peut inclure des images GIF ou PNG)
• Animation décorative (sprite du mouvement de marche d'un personnage) => GIF
• Animation à piloter frame par frame (pas d'exemple) => PNGs

Niveau logiciels:
• Vidéo: je ne sais pas, mais on doit pouvoir trouver de bons éditeurs open source
• SVG: code source du jeu (car généré à la volée) + Inkscape (pour faire les bases du SVG que le code va moduler)
• GIF et PNGs: GIMP/photoshop, en créeant 1 fichier par frame, puis en les fusionnant via ffmpeg par exemple (je peux te faire un article sur comment le faire si cela t’intéresse)

[ Après, c'est surtout @lucard qui réalise les images, pas tellement moi :p ]

[@lucard]

Ce que j'aime pas sur SynFig, c'est que tu peux faire la même chose en natif par xml. donc pourquoi l'utiliser ?

-Le premier soucis du gif, c'est le nombre de couleur (256),
Le second c'est une possibilité de couche alpha à 2 bit (ou c'est opaque, ou c'est transparent mais pas de demi-transparence). sachant que la transparence est considérée comme une couleur (donc 255 couleur + 1 transparence)
J'utilise Photoshop avec la fenêtre "Animation"

-L'animation png est un peu plus lourde que le gif, mais permet d'avoir des zones semi-transparentes.
[exemple perso]
(l’inconvénient : c'est pas une image à inclure dans une balise <img>)
J'utilise une suite d'image (faites sous n'importe quel logiciel gérant l'exportation png avec alpha.)

-l'animation SVG est plus complexe à faire (pas énormément non plus) et permet d'avoir de la transparence (animée), et des animations fluide (pas de "frame")
L'inconvénient étant qu'une illustration vectoriel sera moins "détaillée" au final qu'une image raster)
L'avantage très intéressant est la possibilité de faire des "actions", et des interactions avec.
[exemple perso]
J'utilise Inkscape pour la base, et notepad++ pour la forme :p

Sinon pour l'animatic/ animation, la vidéo est souvent la meilleur option, car la compression (.H265 désormais) est de très bonne qualité pour un poids très intéressant.
Si l'animation possède des petits textes, mieux vaut un svg avec les balises <text>
Vous pouvez aussi mixer l'animation png/jpeg et l'animation css/js dans un fichier svg.

[Thêta Tau Tau]

Pour continuer avec PNG, si on veut faire des animations un peu plus complexes que ce qui est possible avec CSS, il y a canvas.

[Xenos]

J'avais oublié la semi-transparence en effet... Après, il y a APNG qui peut servir, mais niveau support... Plouf :\
Et oui, si on veut générer l'animation de façon procédurale, il y a canvas. On peut rendre un canvas (l'animation) dans un autre canvas (ie, la carte de jeu) ?

[Thêta Tau Tau]

On peut rendre un canvas (l'animation) dans un autre canvas (ie, la carte de jeu) ?

Les canvas sont considérés comme des images, donc tout ce que tu peux faire avec un PNG par exemple, tu peux le faire avec un canvas, y compris l'afficher dans un autre canvas.
Après je suis pas sur de comprendre pourquoi tu veux faire ça plutôt que de dessiner directement dans le premier canvas.

[Amadeous]

Bonjour, côté animations gifs animés, il y a de nombreuses possibilités.
Mais effectivement pas de semi-transparence.
J'utilise "microsoft gif animator" pour les petites images, tu peux facilement gérer la durée de chaque animation et de tes frames (tu peux simuler un ralenti).

Si en revanche tu veux faire de l'animation plus lourde qui ferait planter tous les petits logiciel y'a "unfreez" : plus restrictif, les images doivent avoir exactement la même taille (l*L), la durée d'animation modifiable sera la même pour chaque image, mais tu n'as pas de limites. Le tout donne un poids d'image plus élevé.
J'utilisais "unfreez" pour faire des animations vidéo que je transformais avec "virtualdub" et je montais avec "super" ensuite.

Bref tout dépends du type et de la taille d'animation que tu souhaites.

[MadMass]

Moi je songeais à éclater une image en plusieurs parties, et les faire se mouvoir les unes par rapport aux autres selon un mouvement simple et lent (style ligne droite). Par exemple prendre un background et faire se mouvoir lentement les éléments au premier plan. Bon c'est la théorie j'ai pas planché dessus encore en pratique ^^