JeuWeb - Crée ton jeu par navigateur
[HTML5] Animation, quel est le plus performant? - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [HTML5] Animation, quel est le plus performant? (/showthread.php?tid=6957)

Pages : 1 2


[HTML5] Animation, quel est le plus performant? - Freygolow - 31-08-2013

Bonjour,

Je souhaite faire l'animation d'un bonhomme qui donne des coups d'épée de manière circulaire.
Pour faire ceci en HTML5, j'ai 2 choix qui me sont offerts:

-J'applique une rotation à l'épée (J'ai 1 image et plusieurs calculs pour la rotation).
OU
-Je crée plusieurs images de l'épée dans différentes positions que j'enchaîne les une après les autres produisant l'animation (plusieurs images et pas de calculs).

Quel est le choix le plus judicieux en matière de performance/fluidité en partant du principe qu'il pourrait y avoir de nombreux combattants?

Je vous remercie Smile


RE: [HTML5] Animation, quel est le plus performant? - niahoo - 31-08-2013

bah je dirais le second vu qu'il faudra faire bouger le perso lui même au final : son bras, ses jambes, etc.. Je dirais que c'est plus simple de tout avoir sur le même sprite


RE: [HTML5] Animation, quel est le plus performant? - Argorate - 04-09-2013

appliquer une rotation du même nombre de degrés sur tous les éléments du personnage via le css, es-ce plus compliqué finalement?
Sachant que les animation CSS > JS, je dirais plutôt premier choix.

Après faut voir combien tu as d'anim à faire en même temps et voir à partir de quand ça lag (je n'ai fais aucun test à ce sujet).


RE: [HTML5] Animation, quel est le plus performant? - Sephi-Chan - 04-09-2013

Une animation d'un personnage n'est jamais une rotation globale. C'est un mouvement différent de chaque partie du corps. C'est très difficile et long à faire car ça implique d'utiliser moult images et de bien les coordonner. Et le rendu est pas forcément excellent. Cf. CSS3 walking man.


RE: [HTML5] Animation, quel est le plus performant? - php_addict - 04-09-2013

ton lien vers le walking man est down

voici:

https://developer.mozilla.org/fr/demos/detail/walking-with-css3/launch


RE: [HTML5] Animation, quel est le plus performant? - Xenos - 04-09-2013

Vérifie tes paramètres de navigateur et ton DNS: le lien et le site sont parfaitement fonctionnels.


RE: [HTML5] Animation, quel est le plus performant? - Ter Rowan - 04-09-2013

(04-09-2013, 11:55 AM)Xenos a écrit : Vérifie tes paramètres de navigateur et ton DNS: le lien et le site sont parfaitement fonctionnels.

je plussoie

enfin pour la partie symptôme : ça marche
pour la partie diagnostic, aucune idée Wink


RE: [HTML5] Animation, quel est le plus performant? - php_addict - 04-09-2013

hum...cela ne marchait pas...bref...


RE: [HTML5] Animation, quel est le plus performant? - Freygolow - 04-09-2013

Merci d'avoir pris le temps de répondre Smile

En fait, ma question n'est pas vraiment quelle est la méthode la plus simple mais la plus perfomante (histoire qu'il y ait le minimum de lag).
Je vois que vous parlez du CSS3 dont j'avais jamais pensé.

Prenons l'exemple de Sephi-Chan (l'animation de l'homme), quelle technique produit le meilleur rendu pour animer plusieurs dizaine d'hommes en même temps?
- Animation avec CSS3?
- Animation avec JS?
- Animation en enchaînant des images qui reproduisent les mouvements?


RE: [HTML5] Animation, quel est le plus performant? - Xenos - 04-09-2013

Je dirai CSS3, car de mémoire (mais je n'ai aucune preuve), il est accéléré matériellement.
JS serait, je pense, le plus lent (mais comme JS a bien boosté ces derniers temps, cela a peut-être changé)
Une suite d'image est assez lente aussi (niveau bande passante surtout), mais c'est le plus compatible.

Corrigez-moi en cas d'erreur.