Quel module ou language pour interface animée html

[starmindfr]

Bonjour

Pour le jeu mechas war je cherche a faire une petite interface graphique qui affiche le combat scripté a l'avance entre 2 robots.

Je cherche un système sans téléchargement de client, quelque chose de léger et compatible avec IE / Firefox.

Actuellement j'ai surtout vu du Canvas pour ce rôle, mais c'est assez complexe vu que les gifs ne sont pas gérés directement, de devoir refaire toutes les images de tous les éléments.

Y a t' il des alternatives au Canvas qui soient légères et largement compatibles ?

Merki

[Xenos]

DOM HTML et CSS?
Quand tu dis "interface qui affiche le combat", tu veux dire "j'ai des GIF, avec un scénario genre JSON du combat, et je veux afficher cela"? En ce cas, je dirai effectivement que Javascript/HTML (DOM) et non canvas seront suffisant.
Note qu'une alternative peut être de faire générer un GIF animé du combat complet par le serveur, et l'envoyer ensuite au client.

[starmindfr]

Bonjour merci

En effet c'est un log de combat formaté donc compatible json.

Pour le gif il y a une belle idée mais ca va être trop gros je ne pense pas dépasser 2Mo par page au max pour rester compatible réseaux mobiles et éviter les temps de chargement.

Pour le HTML / CSS j'avais l'impression que l'on ne faisait pas d' animations avec, il faut utiliser des setinterval je suppose pour gérer les étapes ? J'ai peur qu'au final ca génère une surcharge de la page en cachant / superposant des éléments de l'animation ? Mais bon je vais voir si je trouve des exemples qui tournent bien.

[Xenos]

CSS te permet de faire des animations via @keyframes.
Tu pourrais donc générer le @keyframes, via javascript ou coté serveur, et appliquer l'animation à ton objet HTML.
@keyframes te permettront de positionner tes objets (propriétés top/right/bottom/left, avec position absolute par exemple), de les transformer (transform).

L'avantage, face à des setinterval, c'est que CSS est accélérable par le hardware (à l'image de canvas). L'avantage sur canvas est multiple: le DOM peut être compréhensible par les robots et les lecteurs d'écran, il est sympa à manipuler, normalisé depuis longtemps, et bien plus vectoriel que le canvas. Par exemple, un texte tourné dans un canvas est un peu baveux, un texte tourné dans le DOM est propre.

A voir aussi, tu peux essayer de faire l'animation avec SVG.
Là, l'avantage est de manipuler cela un peu comme le DOM, donc proprement, en gardant un truc vectorisé, donc non baveux. l'animation peut alors se faire par CSS, ou par javascript sinon.

[niahoo]

Est-ce que tu peux citer des jeux dont l'animation est faite en CSS ?

[Xenos]

Je n'en n'ai pas en tête, mais les doodles de google par exemple ne sont pas souvent des canvas.
C'est une piste explorable, tout dépend de l'animation à faire.

[starmindfr]

Merci bien je vais voir tout ça

[Xenos]

Je reviens sur ce que j'ai dit: le texte était baveux car la dimension affichée du canvas (.style.width/.style.height) n'était pas la dimension du canvas lui-même (.width/.height).
Dans un tel cas, le dessin se fait dans le canvas, avec la taille .width et .height. Puis le résultat (une image) est redimensionnée à la valeur du .style.width/.style.height. Lors de ce redimensionnement, forcément, cela peut devenir baveux.

Donc, bon, finalement, le canvas n'est pas plus moche que le DOM, il faut uniquement avoir un styling d'affichage de dimension exactement égale à celle du canvas pour ne pas avoir de "resampling" baveux.

Du coup, dans ton cas, les deux seraient envisageables, mais je pencherai quand même pour CSS/DOM, car ton animation est pré-conçue (donc "keyframable"), et que tu n'a que peu d'éléments.
Dans le cas d'une map de jeu (beaucoup d'éléments), ou d'une animation non-préconçue (combat fait en temps réel par le client), j'irai plutôt sur canvas (et donc, sur eclerd, je vais changer et passer de img à canvas, car si la limite du nombre de cases affichées en même temps avoisine les 100x100 pour chacune des 4 vues, cela ferait quand même 40.000 objets dans le DOM...)

[niahoo]

pour le petit jeu de potions que je suis en train de tester, je pense que je vais tester ta technique ... par contre, faut-il créer des PNG avec toutes les étapes de l'animation ou bien un GIF animé ? as-tu un tuto un peu approfondi sur les keyframes ?

[Xenos]

J'ai pas de tuto plus approfondis, non.
Le gif a l'inconvénient de ne pas avoir de frame de départ fixe il me semble (l'animation du gif est indépendante de l'animation de l'objet DOM qui le contient). L'ensemble des PNG peut être traités avec background-image dans les différentes étapes du keyframe, donc, on peut synchroniser l'animation de l'objet DOM avec "l'animation" des PNG enchaînés.