Discussion :

[Archimède]

Bonjour,

voilà mon problème, j'ai l'habitude de coder en actionscript et je n'arrive pas à migrer vers html5/javascript. En effet, je perds vite mes repères dès que je sors de petites animations dessin dans context (canvas.getContext('2D')).
En effet, j'aimerais me faire des classes spécifiques (tels des sprites en as3) sur lesquelles je disposerais d'un canvas pour dessiner et que ces mêmes objets, je puisse les déplacer sur ma scène qui dispose elle-même d'un context canvas.
J'ai vu qu'il y avait le moteur Tomahawk qui a l'air de répondre à ma demande mais en javascript, je suis assez débutant et sur la structure de base du moteur, ça commence à devenir assez complexe.

Comment simplement créer un objet qui dispose d'un context graphique sur lequel on peut dessiner et l'animer sur le context graphique de base lié à la balise canvas d'html5 ?

Merci

[eleydet]

Bonjour,

Je n'ai pas vraiment de réponse à apporter, il me semble juste que vous devriez vous tourner vers le format SVG.

[Archimède]

Merci pour ta réponse, mais je crois avoir trouvé mon bonheur ici :
http://www.developper-jeux-video.com...eo-pong-html5/
J'ai le principe hormis le jeu qui ne m'intéresse pas vraiment.

[Archimède]

Bonsoir, j'avais une petite question... j'ai tenté de créer une classe Sprite avec un context canvas muni de zindex pour la profondeur (pour avoir différentes couches (layer) ) En fait, je tente d'obtenir l'équivalent d'un displayobjet en actionscript que l'on peut déplacer sans être obligé de redessiner à chaque fois.
Mon idée était de créer une instance de Sprite, de dessiner dedans avec les dimensions du canvas qui correspondent à celles de mon dessin et de déplacer le context canvas pour éviter de redessiner.

Pour cela, il y a canvas.style.left et top qui positionnent le canvas et permettent donc de le déplacer.
Je me suis dit, nickel, je fais ce que flash permet de faire ...Et bien non ....monsprite.canvas.style.left=.... ne fonctionne pas.
Dans ma classe Sprite, lorsque je fais this.canvas.style.left =..., mon canvas se déplace bien dans une instance de celle-ci mais lorsque je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
   //mysprite1 c'est le fond noir à la profondeur 0
   var mysprite2=new Sprite("essai",undefined,10,0,20,20,"#000000",1);//10 et 0 position en x et y du canvas;  20,20 dimensions du canvas et 1 profondeur
   mysprite2.context2D.fillStyle = "#FFFF00";
   mysprite2.context2D.fillRect(0,0,20,20);
   mysprite2.context2D.style.left=150;  //là, aucun résultat !

Le rectangle jaune reste en x à 10 px au lieu de 150

Comment faire ? Le but étant d'animer mes sprites en évitant de faire des clearRect dans un seul canvas et de plomber l'animation....

[melka one]

jour

le canvas est il en position absolute ou relative ?

tu peut aussi joué su les marge (marginLeft) au lieux de left

[Archimède]

Salut, autant pour moi, c'était canvas.style.left et non context2D.style.left....
En effet, j'avais écrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.context2D = canvas.getContext('2d');

normal...

Encore une question, est-ce qu'une rotation de canvas est possible. Un truc du style: canvas.style.rotate().
Je ne trouve aucune information sur les méthodes de canvas autre celles qui permettent de dessiner...
Merci...

Rq pour répondre à ta question :
j'étais en position absolute (

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	 canvas.style.position = "absolute";

)...pas de problème