diff --git a/examples/_site/examples.json b/examples/_site/examples.json index 81276d1c..31414920 100644 --- a/examples/_site/examples.json +++ b/examples/_site/examples.json @@ -388,6 +388,18 @@ } ], "loader": [ + { + "file": "load+audio.js", + "title": "load audio" + }, + { + "file": "load+image.js", + "title": "load image" + }, + { + "file": "load+spritesheet.js", + "title": "load spritesheet" + }, { "file": "pick+images+from+cache.js", "title": "pick images from cache" diff --git a/examples/loader/load audio.js b/examples/loader/load audio.js new file mode 100644 index 00000000..a92cdad5 --- /dev/null +++ b/examples/loader/load audio.js @@ -0,0 +1,35 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + // To load an audio file use the following structure. + // As with all load operations the first parameter is a unique key, which must be unique between all audio files. + + // The second parameter is an array containing the same audio file but in different formats. + // In this example the music is provided as an mp3 and a ogg (Firefox will want the ogg for example) + + // The loader works by checking if the browser can support the first file type in the list (mp3 in this case). If it can, it loads it, otherwise + // it moves to the next file in the list (the ogg). If it can't load any of them the file will error. + + game.load.audio('boden', ['assets/audio/bodenstaendig_2000_in_rock_4bit.mp3', 'assets/audio/bodenstaendig_2000_in_rock_4bit.ogg']); + +} + +var music; + +function create() { + + game.stage.backgroundColor = '#182d3b'; + + // game.input.touch.preventDefault = false; + + music = game.sound.play('boden'); + +} + +function render() { + + game.debug.renderSoundInfo(music, 32, 32); + +} diff --git a/examples/loader/load image.js b/examples/loader/load image.js new file mode 100644 index 00000000..5e69b6df --- /dev/null +++ b/examples/loader/load image.js @@ -0,0 +1,16 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); + +function preload() { + + // Specify a unique key and a URL path + // The key must be unique between all images. + game.load.image('imageKey', 'assets/sprites/phaser2.png'); + +} + +function create() { + + game.add.sprite(0, 0, 'imageKey'); + +} diff --git a/examples/loader/load spritesheet.js b/examples/loader/load spritesheet.js new file mode 100644 index 00000000..e9d906ee --- /dev/null +++ b/examples/loader/load spritesheet.js @@ -0,0 +1,31 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); + +function preload() { + + // A sprite sheet is for loading classic "old school" style animations, where each frame + // uses the exact same size frame and there is no configuration file. + + // This is different to a Texture Atlas, in which the frames are usually variable in size + // and come with a json or xml file that describes their structure. Sometimes a Texture Atlas + // is called a "sprite sheet" but that isn't the terminology Phaser uses. + + // To add a sprite sheet to the loader use the following: + + game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); + + // 37x45 is the size of each frame + // There are 18 frames in the PNG - you can leave this value blank if the frames fill up the entire PNG, but in this case there are some + // blank frames at the end, so we tell the loader how many to load + +} + +function create() { + + var sprite = game.add.sprite(300, 200, 'uniqueKey'); + + sprite.animations.add('walk'); + + sprite.animations.play('walk', 50, true); + +} diff --git a/src/core/StateManager.js b/src/core/StateManager.js index b5ee71b6..496d7697 100644 --- a/src/core/StateManager.js +++ b/src/core/StateManager.js @@ -250,7 +250,7 @@ Phaser.StateManager.prototype = { this.onPreloadCallback.call(this.callbackContext, this.game); // Is the loader empty? - if (this.game.load.queueSize === 0) + if (this.game.load.totalQueuedFiles() === 0) { this.game.loadComplete(); } diff --git a/src/loader/Loader.js b/src/loader/Loader.js index 52488197..42220a4c 100644 --- a/src/loader/Loader.js +++ b/src/loader/Loader.js @@ -46,12 +46,6 @@ Phaser.Loader = function (game) { */ this._xhr = new XMLHttpRequest(); - /** - * @property {number} - Length of assets queue. - * @default - */ - this.queueSize = 0; - /** * @property {boolean} isLoading - True if the Loader is in the process of loading the queue. * @default @@ -250,6 +244,8 @@ Phaser.Loader.prototype = { loaded: false }; + console.log('addToFileList', entry); + if (typeof properties !== "undefined") { for (var prop in properties) @@ -685,6 +681,8 @@ Phaser.Loader.prototype = { */ start: function () { + console.log('Loader start', this._fileList); + if (this.isLoading) { return; @@ -733,10 +731,10 @@ Phaser.Loader.prototype = { file.data = new Image(); file.data.name = file.key; file.data.onload = function () { - return _this.fileComplete(this._fileIndex); + return _this.fileComplete(_this._fileIndex); }; file.data.onerror = function () { - return _this.fileError(this._fileIndex); + return _this.fileError(_this._fileIndex); }; file.data.crossOrigin = this.crossOrigin; file.data.src = this.baseURL + file.url; @@ -753,10 +751,10 @@ Phaser.Loader.prototype = { this._xhr.open("GET", this.baseURL + file.url, true); this._xhr.responseType = "arraybuffer"; this._xhr.onload = function () { - return _this.fileComplete(this._fileIndex); + return _this.fileComplete(_this._fileIndex); }; this._xhr.onerror = function () { - return _this.fileError(this._fileIndex); + return _this.fileError(_this._fileIndex); }; this._xhr.send(); } @@ -776,7 +774,7 @@ Phaser.Loader.prototype = { file.data = new Audio(); file.data.name = file.key; file.data.onerror = function () { - return _this.fileError(this._fileIndex); + return _this.fileError(_this._fileIndex); }; file.data.preload = 'auto'; file.data.src = this.baseURL + file.url; @@ -799,13 +797,13 @@ Phaser.Loader.prototype = { if (file.format == Phaser.Tilemap.TILED_JSON) { this._xhr.onload = function () { - return _this.jsonLoadComplete(this._fileIndex); + return _this.jsonLoadComplete(_this._fileIndex); }; } else if (file.format == Phaser.Tilemap.CSV) { this._xhr.onload = function () { - return _this.csvLoadComplete(this._fileIndex); + return _this.csvLoadComplete(_this._fileIndex); }; } else @@ -814,7 +812,7 @@ Phaser.Loader.prototype = { } this._xhr.onerror = function () { - return _this.dataLoadError(this._fileIndex); + return _this.dataLoadError(_this._fileIndex); }; this._xhr.send(); break; @@ -823,10 +821,10 @@ Phaser.Loader.prototype = { this._xhr.open("GET", this.baseURL + file.url, true); this._xhr.responseType = "text"; this._xhr.onload = function () { - return _this.fileComplete(this._fileIndex); + return _this.fileComplete(_this._fileIndex); }; this._xhr.onerror = function () { - return _this.fileError(this._fileIndex); + return _this.fileError(_this._fileIndex); }; this._xhr.send(); break; @@ -889,6 +887,8 @@ Phaser.Loader.prototype = { */ fileComplete: function (index) { +console.log('fileComplete', index); + if (!this._fileList[index]) { console.warn('Phaser.Loader fileComplete invalid index ' + index); @@ -1189,7 +1189,7 @@ Phaser.Loader.prototype = { var total = 0; - for (var i = 0; i < this._fileList; i++) + for (var i = 0; i < this._fileList.length; i++) { if (this._fileList[i].loaded) { @@ -1210,7 +1210,7 @@ Phaser.Loader.prototype = { var total = 0; - for (var i = 0; i < this._fileList; i++) + for (var i = 0; i < this._fileList.length; i++) { if (this._fileList[i].loaded === false) {