[Image] Un sprite dans canvas avec javascript?
Bonjour tout le monde !
Voila, je suis en train de m'amuser avec l'élément canvas d'HTML 5, et je cherche a afficher un sprite (petit personnage qui court, 2 positions).
Tout fonctionne, sauf que je sens firefox "planter doucement" :D
Passer d'un onglet à un autre, ou encore me balader dans les menus de Firefox devient lourd.
J'en conclu que j'ai fait une coquille dans mon javascript (en désactivant l'effet de sprite, tout rentre dans l'ordre).
Voila comment je procede :
Dans ma fonction d'initialisation (lancée par le onload() de body), je charge mes images de la sorte :
Code:
1
2
3
4
5
6
7
8
9
10
|
var ImgHero = new Image(); // variable globale
function InitJS()
{
ImgHero.src = "Images/Gugus01_sprite.png";
ImgHero.onload = function()
{
};
} |
Ensuite vient l'affichage :
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
|
this.Draw = function()
{
switch(ImgSprite)
{
case 0 :
{
Context.drawImage(Img,0,0,80,171,x,y,80,171);
break;
}
case 1 :
{
Context.drawImage(Img,80,0,80,171,x,y,80,171);
break;
}
}
this.CalcSprite();
}
this.CalcSprite = function()
{
if(MonTimer>1)
{
if(ImgSprite == 0)
ImgSprite = 1;
else
ImgSprite = 0;
MonTimer = 0;
}
MonTimer = MonTimer + 0.25;
} |
Le contenu de mon Canvas est redessiné toutes les 50 millisecondes.
A chaque actualisation de mon Canvas, j'incrémente la valeur MonTimer, qui permet de faire varier périodiquement la portion de mon image à afficher (pour avoir cet effet de bonhomme qui court).
Ca fonctionne, mais ce n'est certainement pas très propre, et j'imagine que c'est pour ça que mon navigateur plantouille.
Une idée pour rendre la chose moins lourde?
Merci :)
