2013-04-18 13:16:18 +00:00
|
|
|
/// <reference path="Game.ts" />
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
/**
|
2013-04-18 15:49:08 +00:00
|
|
|
* Phaser - Loader
|
|
|
|
*
|
|
|
|
* The Loader handles loading all external content such as Images, Sounds, Texture Atlases and data files.
|
|
|
|
* It uses a combination of Image() loading and xhr and provides for progress and completion callbacks.
|
2013-04-18 13:16:18 +00:00
|
|
|
*/
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
module Phaser {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
export class Loader {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
constructor(game: Game, callback) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._game = game;
|
|
|
|
this._gameCreateComplete = callback;
|
|
|
|
this._keys = [];
|
|
|
|
this._fileList = {};
|
|
|
|
this._xhr = new XMLHttpRequest();
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize = 0;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private _game: Game;
|
|
|
|
private _keys: string[];
|
|
|
|
private _fileList;
|
|
|
|
private _gameCreateComplete;
|
|
|
|
private _onComplete;
|
|
|
|
private _onFileLoad;
|
|
|
|
private _progressChunk: number;
|
|
|
|
private _xhr: XMLHttpRequest;
|
2013-04-20 02:40:17 +00:00
|
|
|
private _queueSize: number;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public hasLoaded: bool;
|
|
|
|
public progress: number;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-20 02:40:17 +00:00
|
|
|
public reset() {
|
|
|
|
this._queueSize = 0;
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-20 02:40:17 +00:00
|
|
|
public get queueSize(): number {
|
|
|
|
|
|
|
|
return this._queueSize;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public addImageFile(key: string, url: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (this.checkKeyExists(key) === false)
|
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'image', key: key, url: url, data: null, error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public addSpriteSheet(key: string, url: string, frameWidth: number, frameHeight: number, frameMax?: number = -1) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (this.checkKeyExists(key) === false)
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'spritesheet', key: key, url: url, data: null, frameWidth: frameWidth, frameHeight: frameHeight, frameMax: frameMax, error: false, loaded: false };
|
2013-04-12 16:19:56 +00:00
|
|
|
this._keys.push(key);
|
|
|
|
}
|
2013-04-18 13:16:18 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
public addTextureAtlas(key: string, url: string, jsonURL?: string = null, jsonData? = null) {
|
|
|
|
|
|
|
|
if (this.checkKeyExists(key) === false)
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
if (jsonURL !== null)
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
// A URL to a json file has been given
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'textureatlas', key: key, url: url, data: null, jsonURL: jsonURL, jsonData: null, error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
// A json string or object has been given
|
|
|
|
if (typeof jsonData === 'string')
|
|
|
|
{
|
|
|
|
var data = JSON.parse(jsonData);
|
|
|
|
// Malformed?
|
|
|
|
if (data['frames'])
|
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'textureatlas', key: key, url: url, data: null, jsonURL: null, jsonData: data['frames'], error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
// Malformed?
|
|
|
|
if (jsonData['frames'])
|
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'textureatlas', key: key, url: url, data: null, jsonURL: null, jsonData: jsonData['frames'], error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
2013-04-18 13:16:18 +00:00
|
|
|
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public addAudioFile(key: string, url: string) {
|
|
|
|
|
|
|
|
if (this.checkKeyExists(key) === false)
|
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'audio', key: key, url: url, data: null, buffer: null, error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public addTextFile(key: string, url: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (this.checkKeyExists(key) === false)
|
|
|
|
{
|
2013-04-20 02:40:17 +00:00
|
|
|
this._queueSize++;
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key] = { type: 'text', key: key, url: url, data: null, error: false, loaded: false };
|
|
|
|
this._keys.push(key);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public removeFile(key: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
delete this._fileList[key];
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public removeAll() {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList = {};
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
public load(onFileLoadCallback = null, onCompleteCallback = null) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this.progress = 0;
|
|
|
|
this.hasLoaded = false;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._onComplete = onCompleteCallback;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (onCompleteCallback == null)
|
|
|
|
{
|
|
|
|
this._onComplete = this._game.onCreateCallback;
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._onFileLoad = onFileLoadCallback;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (this._keys.length > 0)
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
this._progressChunk = 100 / this._keys.length;
|
|
|
|
this.loadFile();
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
2013-04-18 13:16:18 +00:00
|
|
|
else
|
|
|
|
{
|
|
|
|
this.progress = 1;
|
|
|
|
this.hasLoaded = true;
|
|
|
|
this._gameCreateComplete.call(this._game);
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (this._onComplete !== null)
|
|
|
|
{
|
|
|
|
this._onComplete.call(this._game.callbackContext);
|
|
|
|
}
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private loadFile() {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
var file = this._fileList[this._keys.pop()];
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
// Image or Data?
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
switch (file.type)
|
|
|
|
{
|
|
|
|
case 'image':
|
|
|
|
case 'spritesheet':
|
|
|
|
case 'textureatlas':
|
|
|
|
file.data = new Image();
|
|
|
|
file.data.name = file.key;
|
|
|
|
file.data.onload = () => this.fileComplete(file.key);
|
|
|
|
file.data.onerror = () => this.fileError(file.key);
|
|
|
|
file.data.src = file.url;
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'audio':
|
|
|
|
this._xhr.open("GET", file.url, true);
|
|
|
|
this._xhr.responseType = "arraybuffer";
|
|
|
|
this._xhr.onload = () => this.fileComplete(file.key);
|
|
|
|
this._xhr.onerror = () => this.fileError(file.key);
|
|
|
|
this._xhr.send();
|
|
|
|
break;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
case 'text':
|
|
|
|
this._xhr.open("GET", file.url, true);
|
|
|
|
this._xhr.responseType = "text";
|
|
|
|
this._xhr.onload = () => this.fileComplete(file.key);
|
|
|
|
this._xhr.onerror = () => this.fileError(file.key);
|
|
|
|
this._xhr.send();
|
|
|
|
break;
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private fileError(key: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key].loaded = true;
|
|
|
|
this._fileList[key].error = true;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this.nextFile(key, false);
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private fileComplete(key: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this._fileList[key].loaded = true;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
var file = this._fileList[key];
|
|
|
|
var loadNext: bool = true;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
switch (file.type)
|
|
|
|
{
|
|
|
|
case 'image':
|
|
|
|
this._game.cache.addImage(file.key, file.url, file.data);
|
|
|
|
break;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
case 'spritesheet':
|
|
|
|
this._game.cache.addSpriteSheet(file.key, file.url, file.data, file.frameWidth, file.frameHeight, file.frameMax);
|
|
|
|
break;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
case 'textureatlas':
|
|
|
|
if (file.jsonURL == null)
|
|
|
|
{
|
|
|
|
this._game.cache.addTextureAtlas(file.key, file.url, file.data, file.jsonData);
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
// Load the JSON before carrying on with the next file
|
|
|
|
loadNext = false;
|
|
|
|
this._xhr.open("GET", file.jsonURL, true);
|
|
|
|
this._xhr.responseType = "text";
|
|
|
|
this._xhr.onload = () => this.jsonLoadComplete(file.key);
|
|
|
|
this._xhr.onerror = () => this.jsonLoadError(file.key);
|
|
|
|
this._xhr.send();
|
|
|
|
}
|
|
|
|
break;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
case 'audio':
|
|
|
|
file.data = this._xhr.response;
|
|
|
|
this._game.cache.addSound(file.key, file.url, file.data);
|
|
|
|
break;
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
case 'text':
|
|
|
|
file.data = this._xhr.response;
|
|
|
|
this._game.cache.addText(file.key, file.url, file.data);
|
|
|
|
break;
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
if (loadNext)
|
|
|
|
{
|
|
|
|
this.nextFile(key, true);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private jsonLoadComplete(key: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
var data = JSON.parse(this._xhr.response);
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
// Malformed?
|
|
|
|
if (data['frames'])
|
|
|
|
{
|
|
|
|
var file = this._fileList[key];
|
|
|
|
this._game.cache.addTextureAtlas(file.key, file.url, file.data, data['frames']);
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
this.nextFile(key, true);
|
|
|
|
|
|
|
|
}
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private jsonLoadError(key: string) {
|
2013-04-12 16:19:56 +00:00
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
var file = this._fileList[key];
|
|
|
|
file.error = true;
|
|
|
|
this.nextFile(key, true);
|
2013-04-12 16:19:56 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-18 13:16:18 +00:00
|
|
|
private nextFile(previousKey: string, success: bool) {
|
|
|
|
|
|
|
|
this.progress = Math.round(this.progress + this._progressChunk);
|
2013-04-20 02:40:17 +00:00
|
|
|
|
|
|
|
if (this.progress > 1)
|
|
|
|
{
|
|
|
|
this.progress = 1;
|
|
|
|
}
|
2013-04-18 13:16:18 +00:00
|
|
|
|
|
|
|
if (this._onFileLoad)
|
2013-04-12 16:19:56 +00:00
|
|
|
{
|
2013-04-18 13:16:18 +00:00
|
|
|
this._onFileLoad.call(this._game.callbackContext, this.progress, previousKey, success);
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
2013-04-18 13:16:18 +00:00
|
|
|
|
|
|
|
if (this._keys.length > 0)
|
|
|
|
{
|
|
|
|
this.loadFile();
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.hasLoaded = true;
|
|
|
|
this.removeAll();
|
|
|
|
this._gameCreateComplete.call(this._game);
|
|
|
|
|
|
|
|
if (this._onComplete !== null)
|
|
|
|
{
|
|
|
|
this._onComplete.call(this._game.callbackContext);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
|
|
|
|
2013-04-20 02:40:17 +00:00
|
|
|
private checkKeyExists(key: string): bool {
|
|
|
|
|
|
|
|
if (this._fileList[key])
|
|
|
|
{
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2013-04-12 16:19:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|