Plusieurs canvas, seulement le dernier s'affiche
Salut,
Je développe actuellement un éditeur de map isométrique en javascript et depuis hier je suis confronter à un problème :
Voici une classe "Annimation"
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
|
var Annimation = function(_id, _nom, _img, _ct_x, _ct_y, m_x, m_y, m_w, m_h, _speed, _nb_image) //image, centre x et y de l'Annimation, masque, vitesse, nombre d'images (1)
{
var id = _id;
var name = _nom;
var sprite = _img;
var centre_x = _ct_x;
var centre_y = _ct_y;
var x_orig = m_x;
var y_orig = m_y;
var x_size = m_w;
var y_size = m_h;
var nb_image = _nb_image;
var speed = _speed;
var i = 0;
this.draw = function (_context, _x ,_y)
{
//_context.drawImage(sprite, _x-centre_x, _y-centre_y);
_context.drawImage(sprite, x_orig,y_orig+(Math.floor(i)*y_size), x_size, y_size, _x-centre_x, _y-centre_y, x_size, y_size);
i+=speed;
if(i >= nb_image)
{
i = 0;
}
}
this.getName = name;
this.getId = id;
this.getWidth = x_size;
this.getHeight = y_size;
this.getCentreX = centre_x;
this.getCentreY = centre_y;
} |
Je commence à créer un objet Array() -> listePics puis le remplir avec des objet de la classe annimation,
J'ai d’abord tenté de créer une boucle parcourant listePics, et affichant pour chaque itération le nom d'une pic (objet de annimation/une image quoi) et de créer un canvas de la bonne taille pour afficher la pic dedans le tout à l'interieur d'un div : "decor_selector", le nom de chaques pics apparait correctement, mais seulement le dernier canvas affiche un dessin. J'ai donc retirer la boucle et tout écrit en brut pour tester... hé bien toujours pareil, il n'y a que le dernier canvas de dessiné :'(
Code:
1
2
3
4
5
6
7
8
9
|
document.getElementById("decor_selector").innerHTML += " "+listePics[1].getName+"<br><canvas id='canvas"+listePics[1].getId+"' width='"+listePics[1].getWidth+"' height='"+listePics[1].getHeight+"'></canvas><br>";
listePics[1].draw(document.getElementById('canvas'+listePics[1].getId).getContext("2d"),listePics[1].getCentreX,listePics[1].getCentreY);
document.getElementById("decor_selector").innerHTML += " "+listePics[2].getName+"<br><canvas id='canvas"+listePics[2].getId+"' width='"+listePics[2].getWidth+"' height='"+listePics[2].getHeight+"'></canvas><br>";
listePics[2].draw(document.getElementById('canvas'+listePics[2].getId).getContext("2d"),listePics[2].getCentreX,listePics[2].getCentreY);
document.getElementById("decor_selector").innerHTML += " "+listePics[3].getName+"<br><canvas id='canvas"+listePics[3].getId+"' width='"+listePics[3].getWidth+"' height='"+listePics[3].getHeight+"'></canvas><br>";
listePics[3].draw(document.getElementById('canvas'+listePics[3].getId).getContext("2d"),listePics[3].getCentreX,listePics[3].getCentreY); |
Notez que lorsque je commente le dernier bloque des trois, c'est seulement le deuxième canvas qui est dessiné et pas le premier.
Pourquoi seulement le dernier ?! :( <- voyez comme je suis triste !
