Orienté objet et canvas

Version imprimable

26/03/2017, 10h49
Archimède

Orienté objet et canvas

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
27/03/2017, 11h34
eleydet

Bonjour,

Je n'ai pas vraiment de réponse à apporter, il me semble juste que vous devriez vous tourner vers le format SVG.
27/03/2017, 21h55
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.

1 pièce(s) jointe(s)

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:

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....
Pièce jointe 259403

30/03/2017, 22h36
melka one

jour

le canvas est il en position absolute ou relative ?

tu peut aussi joué su les marge (marginLeft) au lieux de left
31/03/2017, 07h28
Archimède

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

Code:

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:

canvas.style.position = "absolute";

)...pas de problème
31/03/2017, 17h29
Archimède

Apparemment ce serait :

Code:

canvas.style.transform = "rotate(10deg)";

ça fonctionne, on a bien une rotation du canvas de 10° mais ce n'est pas supporté par tous les navigateurs.
C'est toujours mieux que de faire des context.rotate() en faisant des clearRects...

pour info :https://www.w3schools.com/jsref/prop..._transform.asp ça peut toujours servir...

En essayant d'avancer un peu mais mes moyens de débutant en javascript, j'ai ajouté des propriétés getters et setters pour gérer la position de mon canvas et une fonction rotation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function Sprite(name,htmlContainer,x,y,width,height,backgroundColor,zIndex ){
	var _posx=x;
	var _posy=y;
	var canvas = window.document.createElement("canvas");//création dynamique d'un canvas supporté dans le document html
 
	canvas.id = name;//identifiant du canvas
 
 
    if ( backgroundColor != undefined )
      canvas.style.background = backgroundColor;// couleur de fond
 
	  canvas.style.zIndex =zIndex;// profondeur de la couche de canvas  0 pour la plus basse,1,2...qui se superposent comme dans flash
	  canvas.width=width;   //dimensions
	  canvas.height=height;
 
	  canvas.style.position = "absolute";
	  this.canvas=canvas;//affection de canvas à une propriété canvas
 
 
      canvas.style.left = x; 
      canvas.style.top = y;
 
    Object.defineProperty(this, 'x', {
        get: function () {
            return _posx;
        },
        set: function (value) {
            _posx = value;
            this.canvas.style.MozTransform = "translateX("+value+"px)"; //pour mozilla   WebkitTransform pour safari et chrome pour les autres: msTransform,OTransform ou transform 
        }
	});
 
	Object.defineProperty(this, 'y', {
        get: function () {
            return _posy;
        },
        set: function (value) {
            _posy = value;
            this.canvas.style.MozTransform = "translateY("+value+"px)";
        }
	});
 
	this.rotate= function (value) {
          return this.canvas.style.MozTransform = "rotate("+value+"deg)";
	};
 
	if ( htmlContainer != undefined ) {
             htmlContainer.appendChild(canvas);
           } else {
	document.body.appendChild(canvas);}
	this.graphics = canvas.getContext('2d');	
}

J'ai donc instancié un objet pour faire quelques transfos :

Code:

1
2
3
4
5
6
 
 mysprite2.graphics.fillStyle ="#FFFF00";
 mysprite2.graphics.fillRect(0,0,20,20);
 mysprite2.x=250;
 mysprite2.y=250;
 mysprite2.rotate(30);

Le problème, si je mets une seule transformation, exemple : bouger de 250 px, ça fonctionne mais plusieurs à la fois, c'est toujours la dernière qui s'effectue soit ici la rotation de 30°

Comment effectuer les trois sans annuler les deux autres ?
Merci

Ps : apparemment, il faudrait faire toutes les transformations en même temps :
http://stackoverflow.com/questions/7...ing-javascript

01/04/2017, 18h40
NoSmoking
Bonjour,
il existe pas mal de librairie sur l'objet canvas, tu pourrais t'en inspirer.

Il existe des méthodes liées à l'objet qui peuvent te simplifier la vie telle que oContext.translate(x, y) qui t'éviterons de passer par le style.
Tu trouverais avantage à lire :
- HTML Canvas 2D Context
- The canvas element
01/04/2017, 19h28
Archimède

Merci pour tes liens, je regarde ça...
Dans ma tête sur le coup, je pensais qu'en utilisant le context (soit: canvas.getContext('2d')), ça m'obligeait à faire des clearRect() entre chaque déplacement pour effacer les positions précédentes dans le canvas. Je pensais qu'il fallait bouger le canvas et pas son context qui permet de dessiner dedans.
A voir, je reste interrogatif car à chaque fois que je regarde du code sur des animations dessin sur context, j'ai des clearRect entre chaque frame.
Le but, c'est d'éviter d'obturer ou d'effacer comme le fait flash d'où l'intérêt de style.transform...
Je vais faire un essai...

Merci pour ta réponse et tes liens très intéressant !
01/04/2017, 21h00
Archimède

La méthode classique d'animation dans un canvas, je la connais et elle est très bien expliquée ici...
jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Oprations.html
Malgré l'utilisation de context.translate(), il n'empêche qu'il faut effacer entre deux frames...
L'intérêt de ma démarche est d'éviter ça pour gagner en fluidité et retrouver toute la puissance de flash.
04/04/2017, 14h37
NoSmoking

Citation:

L'intérêt de ma démarche est d'éviter ça pour gagner en fluidité et retrouver toute la puissance de flash.

ne commence pas ces comparaisons, tu pourrais parfois être déçu :mrgreen:

Dans certains cas il faut penser « couche » pour optimiser l'affichage.
Un objet qui se promène sur une scène peut être translaté et affiché sur la trame de fond, dans ce cas on ne « redraw » rien.

Personnellement, je trouve en effet que les animations html5 sont remarquablement fluides mais pour des personnes qui ont fait de l'actionscript, la manière d'écrire des déplacements : avec je dessine, j'efface, je redessine etc... c'est plutôt une régression.;) Mais les outils sont là pour imiter la manière de flash.
En ayant de maigres connaissances en javascript, j'ai tenté sur un exemple avec un rendu honorable d'utiliser canvas.style.transform.
Et encore je n'ai pas eu le temps d'optimiser...et de réfléchir à mes erreurs d'écriture.
ci-joint :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<html>
<body>
</body>
<script src="Sprite.js"></script>
 
<script>
var htmlElement = document.getElementsByTagName('html')[0];
htmlElement.style.overflow = 'hidden';  //suppression des ascenseurs de la page html
 
 
var angle=-5;
var x=0;
var w=window.innerWidth;
var retour=false;
 
const R=100;
const penw=5; //epaisseur du pen
const ow=2*R+2*penw; //taille en largeur et hauteur du canvas de la roue 
 
   var fond=new Sprite("canvas",undefined,0,100,w,400,"none",0);
   //dessin du sol
    fond.graphics.strokeStyle ="#000000";            //with (fond.graphics)
    fond.graphics.lineWidth = "5";                        //{
    fond.graphics.beginPath();                             //    .....
    fond.graphics.moveTo(0,50+2*R+2*penw);            //}   ne fonctionne pas (?)
    fond.graphics.lineTo(w,50+2*R+2*penw);
    fond.graphics.stroke();
 
   var roue=new Sprite("canvas",undefined,0,150,ow,ow,"none",1);
   //dessin d'une roue
    roue.graphics.strokeStyle ="#000000";
    roue.graphics.lineWidth = "5";
    roue.graphics.beginPath();
    roue.graphics.moveTo(ow/2,penw);
    roue.graphics.lineTo(ow/2,2*R+penw);
    roue.graphics.moveTo(penw,ow/2);
    roue.graphics.lineTo(2*R+penw,ow/2); 
    roue.graphics.arc(ow/2,ow/2,R,0,2*Math.PI);
    roue.graphics.stroke();
 
window.requestAnimFrame = (function(){
    return window.requestAnimationFrame       || // La forme standardisée
            window.webkitRequestAnimationFrame || // Pour Chrome et Safari
            window.mozRequestAnimationFrame    || // Pour Firefox
            window.oRequestAnimationFrame      || // Pour Opera
            window.msRequestAnimationFrame     || // Pour Internet Explorer
 
           function(callback){                 
               window.setTimeout(callback, 1000 / 60);
           }
})();	
 
    function render() {                     // là au moins on n'a plus besoin de redessiner et de faire des clear à chaque fois
	if (retour) angle-=2; else angle+=2;
        if (x>w-2*R)  retour=true;  else if (x<0) retour=false; 
	x=R*angle*Math.PI/180;
        roue.move(x,0,angle); //il vaut mieux faire plusieurs méthodes en fonction des besoins car  ici  translateY est appelée à chaque fois pour rien...
        window.requestAnimFrame(render);
    }
    render(); 
</script> 
 
</html>

sprite.js (en chantier...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
function Sprite(name,htmlContainer,x,y,width,height,backgroundColor,zIndex ){
	var _posx=x;
	var _posy=y;
	var canvas = window.document.createElement("canvas");//création dynamique d'un canvas supporté dans le document html
 
	canvas.id = name;//identifiant du canvas
 
 
    if (backgroundColor!== "none") canvas.style.background = backgroundColor;// couleur de fond
 
	  canvas.style.zIndex =zIndex;// profondeur de la couche de canvas  0 pour la plus basse,1,2...qui se superposent comme dans flash
	  canvas.width=width;   //dimensions
	  canvas.height=height;
 
	  canvas.style.position = "absolute";
	  this.canvas=canvas;//affection de canvas à une propriété canvas
 
 
      canvas.style.left = x; 
      canvas.style.top = y;
 
     if ( htmlContainer !== undefined ) {
        htmlContainer.appendChild(canvas);
       } else {
	document.body.appendChild(canvas);}
 
	this.graphics = canvas.getContext('2d');
 
 
    Object.defineProperty(this, 'x', {
      get: function() { return _posx; },
      set: function(x) { _posx = x;  this.canvas.left =x;}
    });
 
    Object.defineProperty(this, 'y', {
        get: function () { return _posy; },
        set: function (value) {_posy = value;this.canvas.style.MozTransform = "translateY("+value+"px)"; }
     });
 
 
this.move= function (x,y,theta) {
      return   this.canvas.style.transform="translateX("+x+"px) translateY("+y+"px)  rotate("+theta+"deg)";  // j'ai tenté des ou || entre chaque mais ça ne fonctionne pas. je ne connais pas la formulation correcte à donner en javascript
		 this.canvas.style.WebkitTransform="translateX("+x+"px) translateY("+y+"px)  rotate("+theta+"deg)"; //safari et chrome
		 this.canvas.style.MozTransform="translateX("+x+"px) translateY("+y+"px)  rotate("+theta+"deg)";   // Firefox
		 this.canvas.style.OTransform="translateX("+x+"px) translateY("+y+"px)  rotate("+theta+"deg)"; //opéra
	         this.canvas.style.msTransform="translateX("+x+"px) translateY("+y+"px)  rotate("+theta+"deg)";  //internet explorer
	}	
}

ça fonctionne bien sur ff, chrome, opéra, ça saccade un peu sous IE en revanche sur Edge, c'est parfait.

05/04/2017, 18h42
melka one

jour

il est quand même plus simple de se concentrer uniquement sur l'api canvas plutot que de jouer avec l'api canvas d'un coté et le css de l'autre sans oublié que faire un rotate css c'est couteux en ressource de quelle ordre je ne pourrait le dire mais c'est couteux
05/04/2017, 20h42
Archimède

Tu as parfaitement raison, je cumule du CSS ( translateX, translateY et rotate ) et c'est sans doute gourmand en ressources mais je n'accroche pas la manière d'avoir un objet que je suis obligé de redessiner à chaque fois. Après avoir goûté à actionscript, il est difficile de s'adapter à une conception que j'appliquais déjà en pascal delphi auparavant et que j'avais oublié avec bonheur en utilisant flash.
08/04/2017, 09h53
NoSmoking

Il te faut bien voir que canvas n'est qu'une « ardoise » bitmap et que c'est à toi de faire le boulot de nettoyage, tu peux également travailler avec des buffers que tu injectes directement dans le context, à l'ancienne en sorte, en utilisant des putImageData/getImageData par exemple.

Sinon tu peux également aller du coté du SVG.
08/04/2017, 21h26
Archimède

Citation:

tu peux également travailler avec des buffers que tu injectes directement dans le context, à l'ancienne en sorte, en utilisant des putImageData/getImageData par exemple.

Je cherchais justement dans cette direction avec ImageData...Tu as eu la même idée. Merci pour ton aide... ça me donne envie de persévérer !

Merci
09/04/2017, 09h27
NoSmoking

Tu peux regarder également du coté de WebGL, ou t'en inspirer, c'est assez bluffant : WebGL Water.

[EDIT]
Il existe https://jeux.developpez.com/tutoriels/OpenGL/WebGL/ sur DVP