Cargar archivos con PreloadJS

Cargar archivos

En el capítulo anterior hemos visto que era necesario 'esperar' a que los Sonidos se cargaran en memoria antes de poder usarlos, lo mismo ocurre con las imágenes (tanto para Bitmap como Sprite), por esa razón empleamos Eventos que nos permitían saber cuándo determinado archivo se había cargado (onLoad()).

PreloadJS nos permitirá cargar todos los archivos que vaya a necesitar nuestra aplicación de una sola vez usando un mecanismo un poco más sencillo. Esto nos ayudará a tener un código más mantenible y escalable.

La forma en la que PreloadJS gestiona los archivos es usando una queue (cola), en donde indicaremos todos los archivos a cargar. Para crear una, sólo deberemos escribir:

                var queue = new createjs.LoadQueue();
            

Si queremos que esta cola también cargue Sonidos, deberemos 'instalar un plugin', es decir, llamar al método installPlugin(plugin) y le pasaremos como parámetro createjs.Sound.

                queue.installPlugin(createjs.Sound); // Ahora podremos cargar archivos de audio
            

Finalmente, podemos indicar a PreloadJS que inicie la carga de todos los archivos con loadManifest(manifest), en donde 'manifest' es un array de objetos con toda la información sobre dónde estan los archivos a cargar y cómo se llaman.

Definiendo un Manifest

El manifest será un simple array compuesto por objetos javascript, estos objetos sólo necesitarán tener dos propiedades:

1. id: Cadena de texto, como identificador único de un archivo a cargar.
2. src: Ruta o path del archivo donde se encuentra alojado en nuestro sistema de ficheros.

Con esto en cuenta, podremos crear un manifest de la siguiente manera:

                
                    var basePath = 'assets/';
                    var manifest = [
                        //IMAGES
                        {id: 'bg', src: basePath + 'bg.png'},  // una imagen
                        {id: 'fg', src: basePath + 'fg.png'},  // otra imagen

                        //SOUNDS
                        {id: 'sounds', src: basePath + 'sounds.mp3'}, // un archivo de sonido (es un audiosprite)

                        //SOUNDS DATA
                        {id: 'sounds_data', src: basePath + 'sounds.json'},  // la información del audiosprite

                        //SPRITES
                        {id: 'sprites', src: basePath + 'sprites.png'}, // una imagen (es un spritesheet)

                        //SPRITES_DATA
                        {id: 'sprites_data', src: basePath + 'sprites.json'} // la información del spritesheet
                    ];
                
            

Y ese sería el manifest de una aplicación con imágenes, audiosprite y spritesheet que deberíamos pasar al método loadManifest(manifest).

Usando Eventos

Una vez definido el manifest, podremos ordenar a cargar los archivos con loadManifest(manifest), sin embargo, deberemos asegurarnos de que todos los archivos se cargan antes de poder continuar con el flujo de ejecución de la aplicación. Por esta razón, PreloadJS generará Eventos según se vayan cargando los archivos.

Para escuchar estos eventos, podemos escribir algo así:

                queue.on('complete', assetsLoaded, this); // 'complete' se lanzará cuando se haya leído todo el manifest
                queue.on('progress', assetsProgress, this); // 'progress' se lanzará cada vez que se lea un objeto del array del manifest
            

Definiremos esos dos EventHandler (funciones que se ejecutarán cuando se escuchen dichos eventos).

                
                    var assetsProgress = function (e) {
                        console.log(e.progress); // el evento recibido posee información sobre el progreso total;
                    };

                    var assetsLoaded = function (e) {
                        console.log('completed!'); // la carga del manifest habrá terminado.
                        assetsCompleted() // llamaremos a la función que permitirá continuar con la ejecución del código
                    };

                    var assetsCompleted = function(){
                        // Continuar con el programa, todos los archivos estarán cargados...
                    }
                
            

Con todos los archivos cargados en memoria, podremos solicitar cada uno de ellos llamando al método getResult(id), al cual le debemos pasar la 'id' del asset (definido en el manifest).

                var spritesheet_data = queue.getResult('sprites_data'); // obtener el archivo con la información
                var spritesheet = new createjs.SpriteSheet(spritesheet_data); // para construir un SpriteSheet
            

El código completo, con algunos cambios para usar constantes, podría ser algo asi:

                
                    var manifest = [
                        //IMAGES
                        {id: BG, src: basePath + 'bg.png'},
                        {id: FG, src: basePath + 'fg.png'},

                        //SOUNDS
                        {id: GAME_SOUNDS, src: basePath + 'sounds.mp3'},

                        //SOUNDS DATA
                        {id: GAME_SOUNDS_DATA, src: basePath + 'sounds.json'},

                        //SPRITES
                        {id: GAME_SPRITES, src: basePath + 'sprites.png'},

                        //SPRITES_DATA
                        {id: GAME_SPRITES_DATA, src: basePath + 'sprites.json'}
                    ];

                    createjs.Sound.initializeDefaultPlugins();

                    var queue = new createjs.LoadQueue();

                    queue.installPlugin(createjs.Sound); // para cargar archivos de audio

                    createjs.Sound.alternateExtensions = ["ogg"];

                    queue.on('complete', assetsLoaded, this); // escuchar el evento 'complete'
                    queue.on('progress', assetsProgress, this); // escuchar el evento 'progress'

                    queue.loadManifest(manifest); // cargar el manifest (todos los archivos)

                    var assetsProgress = function (e) {
                        console.log(e.progress); // el evento recibido posee información sobre el progreso total;
                    };

                    var assetsLoaded = function (e) {
                        console.log('completed!'); // la carga del manifest habrá terminado.
                        assetsCompleted() // llamaremos a la función que permitirá continuar con la ejecución del código
                    };

                    var assetsCompleted = function(){
                        // Continuar con el programa, todos los archivos estarán cargados...
                        var spritesheet = new createjs.SpriteSheet(queue.getResult(GAME_SPRITES_DATA));
                        createjs.Sound.registerSounds(queue.getResult(GAME_SOUNDS_DATA));
                    }