Asset loader di immagini e suoni in javascript



by   |  LETTURE 3258

Asset loader di immagini e suoni in javascript

In questo tutorial viene realizzata una funzione che permette di caricare in automatico immagini e suoni (anche detti assets) in uso nel gioco e renderizza una progress bar al centro dello schermo richiamando il gameloop del gioco alla fine del caricamento.

La funzione che carica gli assets è la seguente:

 function loadAssets(images, sounds, callback, loaded) {  	var n, name, result = {}, 	  	totalcount = images.length + sounds.length,       	count  = totalcount,       	onload = function() {  			count --; 			console.log('Count: ' + count); 			if (count == 0) {  				loaded(100);   				callback(result);  			} else { 				loaded(Math.floor((100 / totalcount) * (totalcount - count)));   			} 		};   						   	for(n = 0 ; n < images.length ; n++) { 		name = images[n]; 		result[name] = document.createElement('img'); 		result[name].addEventListener('load', onload); 		result[name].src = '/img/' + name + 'jpg'; 	}   	for(n = 0 ; n < sounds.length ; n++) { 		name = sounds[n];     	result[name] = document.createElement('audio');     	result[name].addEventListener('canplay', onload);     	result[name].src = '/snd/' + name + 'wav';   	} }
La funzione accetta in ingresso un array di nomi di immagini 'images', un array di nomi di file sonori 'sounds' e la funzione di callback che verrà invocata per dare al programma informazioni sullo stato del caricamento nonchè il puntatore alle risorse unificate (immagini + suoni).

Questa è la parte di invocazione del loader:

 // Nel filesystem esistono i files ./img/space0.jpg ecc.. fino a ./img/space17.jpg var imgFiles = []; for (var i = 0; i<=17; i++) imgFiles.push('space' + i);  // Nel filesystem esistono i files ./snd/victory.wav e ./snd/clap.wav var sndFiles = []; sndFiles.push('victory'); sndFiles.push('clap');  loadAssets(imgFiles, sndFiles, loadDone, setLoaded);	
Ad ogni immagine/suono caricato in memoria verrà invocato 'loadDone' che aggiornerà lo stato di caricamento:
 // Percentuale delle immagini caricate var loadedAssets = 0;   // Contenitore generico degli assets var assets;	  function setLoaded(result) { 	loadedAssets = result; 	 }  function loadDone(result) { 	assets = result;  	SCREEN = 'playing'; 	console.log('Inizio il gioco'); 	 	// Eseguo i suoni precaricati 	assets['clap'].play(); 	assets['victory'].play(); }
Per utilizzare gli assets caricati basterà accedere tramite l'array 'assets' in questo modo:
 // per le immagini  buffer_context.drawImage(assets.space0 , 0 , 0); // oppure  buffer_context.drawImage(images['space0'] , 0 , 0);  // per i suoni  assets.victory.play(); // oppure  assets['victory'].play(); 
Il resto del codice si occupa di disegnare le schermate di loading oppure del gioco nel caso in cui il caricamento degli assets raggiunga il 100%.

 function draw_game() { 	 	buffer_context.clearRect(0 , 0, canvas.width, canvas.height);  	 	switch(SCREEN) { 	  case 'playing': {   			drawImages(); 			break; 	  } 	  case 'loading': { 			drawLoading(); 			break; 	  } 	} 	 	contesto.clearRect(0, 0, canvas.width, canvas.height); 	contesto.drawImage(buffer, 0, 0); }  function drawImages() { 	 	// Disegno le immagini precaricate 	for (var i=0; i<=17; i++) buffer_context.drawImage(assets['space' + i] , i * 40, i * 40);  }  function drawLoading() { 			 	var loaderw = canvas.width * 0.8; 	var posx = canvas.width * 0.1; 	var posy = canvas.height * 0.5; 	var texty = canvas.height * 0.47; 	 	var barwidth = loaderw / 100 * loadedAssets; 	 	buffer_context.fillStyle="#202428"; 	buffer_context.fillRect(posx, posy, loaderw, 3); 	 	buffer_context.fillStyle="#994b24"; 	buffer_context.fillRect(posx + ((loaderw - barwidth) / 2), posy, barwidth, 3);  	buffer_context.fillStyle="#eee"; 	buffer_context.font = "22px Verdana "; 	buffer_context.fillText('Loadig assets...'

, 350, texty); buffer_context.fillStyle="#5d6873"; buffer_context.font = "bold 22px Verdana"; buffer_context.fillText(loadedAssets + '%', 400, texty + 50); } function loadDone(result) { assets = result; SCREEN = 'playing'; console.log('Inizio il gioco'); // Eseguo i suoni precaricati assets['clap'].play(); assets['victory'].play(); } function setLoaded(result) { loadedAssets = result; } // Dichiarazione variabili globali var canvas = document.getElementById("canvas1"); var contesto = canvas.getContext("2d"); var buffer = document.createElement('canvas'); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext('2d'); var loadedAssets = 0; var SCREEN = 'loading'; // Default screen var assets; // Contenitore generico degli assets var imgFiles = []; // Nel filesystem esistono i files space0.jpg fino a space17.jpg for (var i = 0; i<=17; i++) imgFiles.push('space' + i); var sndFiles = []; sndFiles.push('victory'); sndFiles.push('clap'); loadAssets(imgFiles, sndFiles, loadDone, setLoaded); gameLoop();