Lots of documentation updates and new Loader examples.

examples/loader/load audio.js

@@ -1,5 +1,5 @@
 
-var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
 
 function preload() {
 
@@ -14,6 +14,9 @@ function preload() {
 
     game.load.audio('boden', ['assets/audio/bodenstaendig_2000_in_rock_4bit.mp3', 'assets/audio/bodenstaendig_2000_in_rock_4bit.ogg']);
 
+    //  If you know you only need to load 1 type of audio file, you can pass a string instead of an array, like this:
+    // game.load.audio('boden', 'assets/audio/bodenstaendig_2000_in_rock_4bit.mp3');
+
 }
 
 var music;
@@ -22,8 +25,6 @@ function create() {
 
     game.stage.backgroundColor = '#182d3b';
 
-    // game.input.touch.preventDefault = false;
-
     music = game.sound.play('boden');
 
 }
@@ -32,4 +33,9 @@ function render() {
 
     game.debug.renderSoundInfo(music, 32, 32);
 
+    if (music.isDecoding)
+    {
+        game.debug.renderText("Decoding MP3 ...", 32, 200);
+    }
+
 }

examples/loader/load bitmap font.js

@@ -0,0 +1,36 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    //  Phaser can load Bitmap Fonts.
+
+    //  As with all load operations the first parameter is a unique key, which must be unique between all image files.
+    //  Next is the bitmap font file itself, in this case desyrel.png
+    //  Finally is the path to the XML file that goes with the font.
+
+    game.load.bitmapFont('desyrel', 'assets/fonts/desyrel.png', 'assets/fonts/desyrel.xml');
+
+    //  Note that the XML file should be saved with UTF-8 encoding or some browsers (such as Firefox) won't load it.
+
+    //  There are various tools that can create Bitmap Fonts and the XML file needed.
+    //  On Windows you can use the free app BMFont: http://www.angelcode.com/products/bmfont/
+    //  On OS X we recommend Glyph Designer: http://www.71squared.com/en/glyphdesigner
+
+}
+
+var text;
+
+function create() {
+
+    game.stage.backgroundColor = '#0072bc';
+
+    text = game.add.bitmapText(200, 100, 'Bitmap Fonts!', { font: '64px Desyrel', align: 'center' });
+
+}
+
+function update() {
+
+    text.setText('Bitmap Fonts!\nx: ' + Math.round(game.input.x) + ' y: ' + Math.round(game.input.y));
+
+}

examples/loader/load starling atlas.js

@@ -0,0 +1,38 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    //  Phaser can load texture atlas files that use the Starling XML file format.
+
+    //  As with all load operations the first parameter is a unique key, which must be unique between all image files.
+
+    //  Next is the texture atlas itself, in this case seacreatures.png
+    //  Finally is the path to the XML file that goes with the atlas.
+    game.load.atlasXML('seacreatures', 'assets/sprites/seacreatures.png', 'assets/sprites/seacreatures.xml');
+
+    //  Note that the XML file should be saved with UTF-8 encoding or some browsers (such as Firefox) won't load it.
+
+
+
+    //  These are just a few images to use in our underwater scene.
+    game.load.image('undersea', 'assets/pics/undersea.jpg');
+    game.load.image('coral', 'assets/pics/seabed.png');
+
+}
+
+var jellyfish;
+
+function create() {
+
+    game.add.sprite(0, 0, 'undersea');
+
+    jellyfish = game.add.sprite(330, 100, 'seacreatures');
+    jellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('greenJellyfish', 0, 39, '', 4), 30, true);
+    jellyfish.animations.play('swim');
+
+    game.add.sprite(0, 466, 'coral');
+
+    game.add.tween(jellyfish).to({ y: 250 }, 4000, Phaser.Easing.Quadratic.InOut, true, 0, 10000, true);
+
+}

examples/loader/load text file.js

@@ -0,0 +1,37 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
+
+function preload() {
+
+    //  Phaser can load Text files.
+
+    //  It does this using an XMLHttpRequest.
+    
+    //  If loading a file from outside of the domain in which the game is running 
+    //  a 'Access-Control-Allow-Origin' header must be present on the server.
+    //  No parsing of the text file is performed, it's literally just the raw data.
+
+    game.load.text('html', 'http://phaser.io');
+
+}
+
+var text;
+
+function create() {
+
+    game.stage.backgroundColor = '#0072bc';
+
+    var html = game.cache.getText('html');
+
+    text = html.split('\n');
+
+}
+
+function render() {
+
+    for (var i = 0; i < 30; i++)
+    {
+        game.debug.renderText(text[i], 32, i * 20);
+    }
+
+}

examples/loader/load texture atlas.js

@@ -0,0 +1,39 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    //  Phaser can load Texture Atlas files that use either JSON Hash or JSON Array format.
+
+    //  As with all load operations the first parameter is a unique key, which must be unique between all image files.
+
+    //  Next is the texture atlas itself, in this case seacreatures.png
+
+    //  Finally is the path to the JSON file that goes with the atlas.
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+    //  Note that the JSON file should be saved with UTF-8 encoding or some browsers (such as Firefox) won't load it.
+
+
+
+    //  These are just a few images to use in our underwater scene.
+    game.load.image('undersea', 'assets/pics/undersea.jpg');
+    game.load.image('coral', 'assets/pics/seabed.png');
+
+}
+
+var octopus;
+
+function create() {
+
+    game.add.sprite(0, 0, 'undersea');
+
+    octopus = game.add.sprite(330, 100, 'seacreatures');
+    octopus.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
+    octopus.animations.play('swim');
+
+    game.add.tween(octopus).to({ y: 250 }, 4000, Phaser.Easing.Quadratic.InOut, true, 0, 10000, true);
+
+    game.add.sprite(0, 466, 'coral');
+
+}