Quel module ou language pour interface animée html

[niahoo]

ok bon faut que je me documente un peu plus sur le fonctionnement, mais ça m'a l'air de coller. pour ce jeu j'ai décidé de ne pas utiliser SVG ou Canvas. thx

[Argorate]

Xénos avait déjà montrer une sorte de "tuto" ou en tout cas de bonnes explications pour les animations css sur mon topic: http://www.jeuweb.org/showthread.php?tid=9314 (si ça peut aider)

[niahoo]

Ouaip merci !

---

(pfff par contre avant d'animer il faut dessiner et ça c'est vraiment pas mon truc )

[Argorate]

je te comprends^^
je sais pas combien d'animation tu veux mais ça monte vite si tu les fait faire

[niahoo]

je vais peut-être avoir un deal avec un pote de pote qui va me faire des dessins en échange de l'intégration + install d'un wordpress

si encore je savais ce que je voulais, mais je suis même pas capable de faire un brouillon pour travailler sur le style graphique !

[starmindfr]

sinon j'avais fait un petit test en canvas ici , et j'avais noter qu'il est meme possible de déplacer les robots en direct avec les fleches du clavier... mais bon apres le canvas posant trop de problèmes de synchronisation des effets j'avais laisser tomber http://mechaswar.com/canvas2.php

Donc le laser c'est pleins de petites frames dans une image a la main pour refaire un gif, idem la petite explosion :cogne:

[niahoo]

ben le laser c'est typiquement pour du canvas : il "suffit" de dessiner une ligne

[starmindfr]

il me semble que c’était un poil plus compliqué, genre plutôt faire un rond pour le debut du tir, puis un petit rond plus un cone, et apres des cones de plus en plus longs ...

genre ca (fait a la truelle en vitesse désolé :o )

[Xenos]

Les animations SVG peuvent être plus efficaces pour ce genre de choses.

Exemple (laissez quelques secondes à l'animation: elle est lente au début)

<?xml version="1.0" encoding="utf-8"?>

<!--

	© Xenos 2013 - jeuweb.org

	Licence LGPL, exemple de démonstration d'animation SVG.

	Lecture, exécution, modification, rediffusion (tel quel / modifié) autorisées, 

	sous condition de conserver le droit moral (aka nom des auteurs originaux).

-->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<path id="test" d="M 150 50 q 40 25 0 50" stroke="blue" stroke-width="2" fill="none"/>

	<path id="test2" d="M 150 150 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100" stroke="blue" stroke-width="2" fill="none"/>

	<script type="text/ecmascript"><![CDATA[

		document.getElementById("test").p = 1;

		document.getElementById("test2").p = 1;

		setInterval(function ()

		{

			var o = document.getElementById("test");

			var o2 = document.getElementById("test2");

			o.p *= 1.01;

			o2.p *= 1.01;

			if (o.p > 500)

				o.p = o.p%500+1;

			if (o2.p > 200)

				o2.p = o2.p%200+1;

			var y = square(o2.p/200.)*25.;

			o.setAttribute('d', "M 150 50 q "+(40+o.p)+" 25 0 50");

			o2.setAttribute('d', "M 150 "+(150-y)+" a "+(50+o2.p)+" "+(50-2*y)+" 0 0 1 0 "+(100-2*y)+" a 50 50 0 0 1 0 "+(2*y-100)+"");

		},

		15);

		function square(x) { return(x*x); };

	]]></script>

</svg>

Quelques ressources utiles:

• SVG par W3Schools et le tag path (sommairement expliqué)
  
• SVG basics + arc elliptiques (utilisés dans l'exemple)
  
• SVG par le W3C, exhaustif (puisqu'il s'agit de la norme elle-même)
  
• Lier ECMAScript (javascript) et SVG
  

En utilisant SVG, tu pourras facilement modifier l'animation, changer les couleurs, la vitesse, etc, sans passer par des frames.
En revanche, l'animation SVG n'est pas utilisable dans un canvas (sauf via une lib JS comme spécifié dans le post SO ci-dessus), ni même dans une balise IMG.
Pour afficher l'animation, il faut utiliser une balise object. Pour les informations sur la balise object, le tuto W3Schools est bien fichu.

[starmindfr]

merci c'est pas mal en effet ce SVG, et c'est utilisable pour modifier des sprites existants ou c'est plutot dans l'idée de generer un effet special a partir de formes basiques ?