[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 :)
