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