Discussion :

[scandinave]

Bonjour, je souhaite à précharger les images de mon canvas avant son utilisation.

J'ai créer la classe suivante pour réaliser cette tache :

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
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
65
66
67
68
 
/**
* Simple Loader class, that load resources before application start.
* This is a singleton class.
*/
var SimpleLoader = (function(){
	var constructeur = function(){
		var resources = new Array();
		var loaded = 0;
		var id = null;
		var complete = false;
 
		this.addResources = function(resource){
			if( resource instanceof Picture || resource instanceof Video || resource instanceof Sound){
				resources.push(resource);
			}
		};
 
		this.getLoaded = function(){
			return loaded;
		};
 
		this.load = function(){
			id = setInterval(draw, 1000);
			for(var i = 0; i < resources.length; i++){
				var resource = resources[i];
				if(resource instanceof Picture){
					resource.img = new Image();
					resource.img.src = resource.src;
					resource.img.onload = function(){
						loaded++;
					};
				} else if(resource instanceof Video){
					/* Load video */
				} else if(resource instanceof Sound){
					/* Load sound */
				}
			}
		};
 
		var draw = function(){
			if(loaded < resources.length){
				console.log("Chargement en cours :" +  loaded + " / " + resources.length);
			} else {
				alert("Chargement terminé");
				complete = true;
				clearInterval(id);
			}
		};
 
		this.isComplete = function(){
			return complete;
		};
	}
    var instance = null;
	return new function() {
		this.getInstance = function(){
			if(instance == null){
				instance = new constructeur();
				instance.constructeur = null;
			}
 
			return instance;
		}
	}
 
 
})();

La classe est un singleton. Les ressources sont ajoutés lors de l'instanciation d'une image.

Enfin avant la boucle du jeu , je lance :

Code :

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

1
2
 
 loader.load();

Seulement, le navigateur freeze pendant quelque instant , puis affiche Chargement terminé directement au lieu d'afficher le nombre de ressource chargés au fur et à mesure.

Le setInterval est la pour checker périodiquement la valeur de loaded.
merci d'avance.

[Kaamo]

Comme ça je pense que Chrome n'a pas le temps de redessiner l'écran car l'intervalle est trop court. Du coup, il attend. T'as essayé avec un intervalle plus long ?
Mais pourquoi se servir de ça au fait ? Appelle le 'draw' à la fin du chargement et met par défaut "Chargement en cours" à l'initialisation ?

[scandinave]

J'aimerai bien pouvoir afficher la progression du chargement. Dans le cas ou il y a beaucoup de ressource à charger.

Comme ici par exemple :

http://www.kevs3d.co.uk/dev/arena5/

Seulement , je n'arrive pas à voir ou dans son code, se passe le preload

[scandinave]

bon , il semblerai que comme par miracle, j'ai réussi à obtenir quelque chose.
En tout cas, j'ai bien la console qui affiche toute les valeurs une à une.

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
this.load = function(callback){
	console.log("Loading ...");
	var i = 0;
 
	//id = setInterval(draw, 200);
	var loadResource = function(i){
		var resource = resources[i];
		if(resource instanceof Picture){
			resource.img = new Image();
			resource.img.src = resource.src;
			resource.img.onload = function(){
				loaded++;
				if(loaded == resources.length){
					console.log("loading complete");
					clearTimeout(id);
					callback;
				} else {
					console.log("chargement en cours..." + loaded + " / "+ resources.length);
					id = setTimeout(function() {loadResource(i+1)}, 0);
				}
			};
		} else if(resource instanceof Video){
			/* Load video */
		} else if(resource instanceof Sound){
			/* Load sound */
		}
	}
	loadResource(i);
};

par contre le callback n'est pas executé.

Code :

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

1
2
3
4
5
6
loader.load(function(){
	for(var i = 0; i < layers.length; i++){
		console.log("layer update");
		layers[i].update();
	}
});

Edit: manquait les () derrière le callback. tout fonctionne parfaitement