Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload

Un Preload OOP per tutte le immagini

A questo punto è opportuno organizzarsi: o carichiamo le immagini una per volta e le inseriamo nell’ara di disegno nello stesso ordine in cui completano il caricamento, oppure ci inventiamo un meccanismo per cui tutte quante le immagini (e gli altri asset) vengono caricati assieme, magari fornendoci un’indicazione in percentuale sul tempo di attesa.

Per realizzare un preload all’altezza delle nostre aspettative utilizzeremo un’API che si chiama XMLHttpRequest, questa interfaccia sta alla base di tutte le chiamate AJAX perché permette di trasferire contenuti tra il Client e il Server senza bisogno di cambiare o aggiornare la pagina.

Ecco l’esempio completo:

Sembra una cosa molto complessa, ma in realtà basta entrare nel dettaglio per capire che è tutto molto semplice.

La Programmazione Orientata a Oggetti è il paradigma con cui funzionano tutti i moderni linguaggi di programmazione, chi non avesse dimestichezza con questo tipo di cose potrà iniziare guardando il codice del precedente esempio:

function Preload() {
    /// Qui dentro un sacco di cose
};

/// Qui fuori altre cose e a un certo punto...
    var preloader = new Preload();

La Programmazione Orientata agli Oggetti prevede di raggruppare in una zona circoscritta del codice tutte le Strutture di dati e tutte le Procedure che operano su dati stessi. Questo raggruppamento prende solitamente il nome di Classe. Nel nostro esempio la Funzione Preload rappresenta una Classe, al suo interno inseriremo delle Variabili, che chiameremo Proprietà dell’Oggetto, e Funzioni che chiameremo Metodi dell’Oggetto.

Non bisogna impressionarsi del fatto che in JavaScript inseriamo Funzioni all’interno di altre Funzioni, è così che Funziona!

La Funzione Preload definisce quindi una Classe che fa da modello a un tipo di Oggetto, ogni volta che ci servirà potremo utilizzarla utilizzando il comando new Preload(), e nel caso specifico inseriamo il riferimento a questo Oggetto all’interno della variabile chiamata preloader.

Si dice che abbiamo istanziato un Preload, la variabile preloader è quindi un’Istanza della Classe Preload. Le Istanze hanno Metodi e Proprietà definiti nella Classe.

Non è la prima volta che utilizziamo una cosa di questo genere, nell’esempio precedente avevamo utilizzato la sintassi new Image() e avevamo così istanziato un elemento di tipo Image, con tutte le Proprietà e i Metodi che appartengono a tutte le immagini.

Mentre la Classe Image() appartiene all’API Web ed è fornita dal Browser per permetterci di creare la rappresentazione di un elemento HTML <image>, la Classe Preload() appartiene al nostro esempio, e dentro possiamo scriverci quello che ci pare.

function Preload() {
    var fileList = {}, /// Un elenco di URL di immagini che intendiamo caricare
        percent = 0; /// Un numero che rappresenta la percentuale totale caricata
    
    function calcPercentage() {
        /// Qui aggiorneremo il valore della variabile percent
    }
        
    function onProgress(event) {
        /// Qui eseguiremo un controllo ad ogni step del caricamento di ogni immagine
    }
  
    function checkPercent(e) {
        /// Qui controlliamo se abbiamo caricato tutto
    }
    
    function onLoad(event) {
        /// Qui eseguiamo un controllo ogni volta che abbiamo completato un caricamento
    }
    
    function addFile(url) {
        /// Qui aggiungiamo un URL all’elenco fileList
    }
    
    function startLoad() {
        /// Qui facciamo partire il download degli URL in elenco
    }
    
    return {
        /// Qui restituiamo qualcosa
    };
};

Le parole evidenziate in blu rappresentano Proprietà dell’Oggetto, le parole evidenziate in rosso rappresentano i Metodi.

Alla fine il comando return restituisce qualcosa al chiamante, in questo modo potremo utilizzare Proprietà e Metodi, infatti tutto ciò che si trova all’interno della Funzione Preload è visibile solo all’interno della Funzione Preload, se in questo momento provassimo a richiamare dall’esterno il Metodo startLoad() o qualsiasi altro, non ci riusciremmo.

La porzione di codice in cui un Oggetto è utilizzabile si chiama Scope. Possiamo dire, ad esempio, che lo Scope della Funzione calcPercentage è limitato all’interno della Funzione Preload.

Tutto ciò che viene passato all’esterno tramite return sarà accessibile.