Lots of documentation updates and new Loader examples.

examples/_site/examples.json

@@ -392,6 +392,10 @@
       "file": "load+audio.js",
       "title": "load audio"
     },
+    {
+      "file": "load+bitmap+font.js",
+      "title": "load bitmap font"
+    },
     {
       "file": "load+image.js",
       "title": "load image"
@@ -400,6 +404,18 @@
       "file": "load+spritesheet.js",
       "title": "load spritesheet"
     },
+    {
+      "file": "load+starling+atlas.js",
+      "title": "load starling atlas"
+    },
+    {
+      "file": "load+text+file.js",
+      "title": "load text file"
+    },
+    {
+      "file": "load+texture+atlas.js",
+      "title": "load texture atlas"
+    },
     {
       "file": "pick+images+from+cache.js",
       "title": "pick images from cache"
@@ -592,6 +608,10 @@
       "file": "animated+tiling+sprite.js",
       "title": "animated tiling sprite"
     },
+    {
+      "file": "tiling+sprite+input.js",
+      "title": "tiling sprite input"
+    },
     {
       "file": "tiling+sprite.js",
       "title": "tiling sprite"

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');
+
+}

examples/wip/bunny.js

@@ -0,0 +1,55 @@
+
+    GameState = function (game) {
+        this.game = game;
+    };
+
+    GameState.prototype = Object.create(Phaser.State.prototype);
+    GameState.prototype.constructor = GameState;
+
+    GameState.prototype.preload = function preload() {
+        this.game.load.image('bunny', 'assets/sprites/bunny.png');
+        this.game.load.image('carrot', 'assets/sprites/carrot.png');
+        this.game.load.image('melon', 'assets/sprites/melon.png');
+    }
+
+    GameState.prototype.create = function () {
+        this.game.world.setBounds(0, 0, 1600, 600);
+
+        this.bunny = this.game.add.sprite(200, 200, 'bunny');
+        this.bunny.scale.setTo(0.2, 0.2);
+
+        var melon = this.game.add.sprite(0, 0, 'melon');
+        this.melonGroup = this.game.add.group(null, 'melonGroup');
+        this.melonGroup.add(melon);
+        melon.x = this.bunny.x;
+        melon.y = this.bunny.y - 40;
+
+        this.carrot = this.game.add.sprite(0, 0, 'carrot');
+
+        this.game.camera.follow(this.bunny);
+    }
+
+    GameState.prototype.update = function () {
+        this.bunny.body.velocity.x = 0;
+        
+        if (this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            this.bunny.body.velocity.x = 500;
+        }
+
+        if (this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            this.bunny.body.velocity.x = -500;
+        }
+
+        // var melon = this.melonGroup.getFirstExists(true);
+        // melon.x = this.bunny.x;
+        // melon.y = this.bunny.y - 40;
+
+        this.carrot.x = this.bunny.x;
+        this.carrot.y = this.bunny.y - 20;
+
+    };
+
+    (function () {
+        var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example');
+        game.state.add('state', GameState, true);
+    })();

examples/wip/button scale.js

@@ -32,6 +32,8 @@ var button6;
 
 function create() {
 
+    console.log('create!');
+
     background = game.add.sprite(0, 0, 'sky0');
     background.name = 'background';
 
@@ -77,7 +79,7 @@ function create() {
     
     // Phaser.Canvas.setSmoothingEnabled(false);
 
-    game.input.onDown.add(gofull, this);
+    //game.input.onDown.add(gofull, this);
 
 }