Discussion :

[themoye]

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"
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 :

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

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 :

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

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

[Blender-Viking]

Salut, je n'ai pas beaucoup d'expérience dans le canvas.

Mais ce lien devrait surement t'aider à réaliser une animation de sprite dans un canvas :

http://www.johnegraham2.com/web-tech...nimation-demo/

Bonne lecture ;-)

[themoye]

Yop !

Merci Blender-Viking , ça a l'air pas mal du tout, je vais m'y plonger dès que j'aurais un peu de temps