Guida Html5 la tua risorsa web sul nuovo markup html5 il linguaggio javascript e lo sviluppo di giochi su browser.
TUTORIALS

Asset loader di immagini e suoni in javascript

- 12-01-2015 - Letture: 1790

Questo articolo estende il precedente riguardante il loader di immagini introducendo anche i suoni e l'accesso tramite un unico array

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();

 

Articoli correlati
Loading comments
ebook sviluppare giochi in html5 e javascript
Il sito Guida HTML5 è stato realizzato da TheArchitect
Nome e Cognome
Email valida
Username
Password
* Cliccando su REGISTRATI accetti le nostre regole sulla privacy
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X

Password dimenticata ? Inserisci il tuo indirizzo email e ti invieremo i dati di accesso

Email valida
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X
Powered by: World(129)