More work on the Invaders game.

README.md

@@ -49,6 +49,8 @@ Version 1.1.2
 * Updated: Fixed the Star Struck game sample and enhanced it.
 * Updated: If you pause an Animation, when you next play it it'll resume (un-pause itself).
 * Updated: hexToRGB now accepts short hex codes (#EEE) (thanks beeglebug)
+* Updated: State functions (preload, update, render, etc) are now passed the current game as a parameter (thanks beeglebug)
+* Updated: If your game is running in Canvas (not WebGL) you can now set Stage.backgroundColor to rgba style CSS strings, allowing for semi-transparent game backgrounds.
 * Fixed issue 135 - Added typeof checks into most ArcadePhysics functions to avoid errors with zero values.
 * Fixed issue 136 - distanceTo using worldX/Y instead of x/y.
 * Fixed lots of examples where the cursor keys / space bar were not locked from moving the browser page (if you find any more, please tell us!)

examples/games/invaders.js

@@ -1,14 +1,15 @@
 
-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, update: update });
 
 function preload() {
 
-    game.load.image('phaser', 'assets/sprites/phaser-dude.png');
-    game.load.image('bullet', 'assets/misc/bullet0.png');
-    game.load.image('alien', 'assets/sprites/space-baddie.png');
-    game.load.image('ship', 'assets/sprites/shmup-ship.png');
-    game.load.spritesheet('kaboom', 'assets/games/tanks/explosion.png', 64, 64, 23);
-    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.image('bullet', 'assets/games/invaders/bullet.png');
+    game.load.image('enemyBullet', 'assets/games/invaders/enemy-bullet.png');
+    game.load.spritesheet('invader', 'assets/games/invaders/invader32x32x4.png', 32, 32);
+    game.load.image('ship', 'assets/games/invaders/player.png');
+    game.load.spritesheet('kaboom', 'assets/games/invaders/explode.png', 128, 128);
+    game.load.image('starfield', 'assets/games/invaders/starfield.png');
+    game.load.image('background', 'assets/games/starstruck/background2.png');
 
 }
 
@@ -19,33 +20,13 @@ var bulletTime = 0;
 var cursors;
 var fireButton;
 var explosions;
-
-function loadUpdate() {
-
-    console.log('state loadUpdate');
-
-}
+var starfield;
 
 function create() {
 
-
-    s = game.add.tileSprite(0, 0, 800, 600, 'starfield');
-
-    player = game.add.sprite(400, 500, 'ship');
-    player.anchor.setTo(0.5, 0.5);
-
-    aliens = game.add.group(null, 'aliens');
-
-    for (var y = 0; y < 4; y++)
-    {
-        for (var x = 0; x < 10; x++)
-        {
-            aliens.create(x * 48, y * 50, 'alien');
-        }
-    }
-
-    aliens.x = 100;
-    aliens.y = 50;
+    //  The scrolling starfield background
+    starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // game.add.tileSprite(0, 0, 800, 600, 'background');
 
     //  Our bullet group
     bullets = game.add.group();
@@ -54,33 +35,64 @@ function create() {
     bullets.setAll('anchor.y', 1);
     bullets.setAll('outOfBoundsKill', true);
 
-    //  Explosion pool
-    explosions = game.add.group();
+    //  The hero!
+    player = game.add.sprite(400, 500, 'ship');
+    player.anchor.setTo(0.5, 0.5);
 
-    for (var i = 0; i < 10; i++)
+    //  The baddies!
+    aliens = game.add.group();
+
+    for (var y = 0; y < 4; y++)
     {
-        var explosionAnimation = explosions.create(0, 0, 'kaboom', [0], false);
-        explosionAnimation.anchor.setTo(0.5, 0.5);
-        explosionAnimation.animations.add('kaboom');
+        for (var x = 0; x < 10; x++)
+        {
+            var alien = aliens.create(x * 48, y * 50, 'invader');
+            alien.animations.add('fly', [0,1,2,3], 20, true);
+            alien.play('fly');
+        }
     }
 
-    var tween = game.add.tween(aliens).to({x: 200}, 3000, Phaser.Easing.Linear.None, true, 0, 1000, true);
+    aliens.x = 100;
+    aliens.y = 50;
+
+    //  An explosion pool
+    explosions = game.add.group();
+    explosions.createMultiple(30, 'kaboom');
+    explosions.forEach(setupInvader, this);
+
+    //  All this does is basically start the invaders moving. Notice we're move the Group they belong to, rather than the invaders directly.
+    var tween = game.add.tween(aliens).to({x: 200}, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);
+
+    //  When the tween completes it calls descend, before looping again
     tween.onComplete.add(descend, this);
 
+    //  And some controls to play the game with
     cursors = game.input.keyboard.createCursorKeys();
     fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
 
 }
 
+function setupInvader (invader) {
+
+    invader.anchor.x = 0.5;
+    invader.anchor.y = 0.5;
+    invader.animations.add('kaboom');
+
+}
 
 function descend() {
+
     aliens.y += 10;
+
 }
 
 function update() {
 
-    player.body.velocity.x = 0;
-    player.body.velocity.y = 0;
+    //  Scroll the background
+    starfield.tilePosition.y += 2;
+
+    //  Reset the player, then check for movement keys
+    player.body.velocity.setTo(0, 0);
 
     if (cursors.left.isDown)
     {
@@ -91,46 +103,54 @@ function update() {
         player.body.velocity.x = 200;
     }
 
+    //  Firing?
     if (fireButton.isDown)
     {
         fireBullet();
     }
 
+    //  Run collision
     game.physics.collide(bullets, aliens, collisionHandler, null, this);
 
 }
 
 function fireBullet () {
 
+    //  To avoid them being allowed to fire too fast we set a time limit
     if (game.time.now > bulletTime)
     {
+        //  Grab the first bullet we can from the pool
         bullet = bullets.getFirstExists(false);
 
         if (bullet)
         {
-            bullet.reset(player.x, player.y - 8);
-            bullet.body.velocity.y = -300;
-            bulletTime = game.time.now + 250;
+            //  And fire it
+            bullet.reset(player.x, player.y + 8);
+            bullet.body.velocity.y = -400;
+            bulletTime = game.time.now + 200;
         }
     }
 
 }
 
-//  Called if the bullet goes out of the screen
 function resetBullet (bullet) {
+
+    //  Called if the bullet goes out of the screen
     bullet.kill();
+
 }
 
 function collisionHandler (bullet, alien) {
 
+    //  When a bullet hits an alien we kill them both
     bullet.kill();
     alien.kill();
 
-    var explosionAnimation = explosions.getFirstDead();
-    explosionAnimation.reset(alien.body.x, alien.body.y);
-    explosionAnimation.play('kaboom', 30, false, true);
+    //  Increase the score
+
+    //  And create an explosion :)
+    var explosion = explosions.getFirstDead();
+    explosion.reset(alien.body.x, alien.body.y);
+    explosion.play('kaboom', 30, false, true);
 
 }
-
-function render () {
-}

examples/wip/forum.js

@@ -0,0 +1,47 @@
+var mainMenu = {
+
+    preload: function () {
+
+        // game.load.image('bg', 'assets/bg.png');
+        // game.load.image('mainstart', 'assets/mainstart.png');
+        game.load.image('bg', 'assets/pics/louie-inga.png');
+        game.load.image('mainstart', 'assets/pics/contra2.png');
+
+    },
+
+    create: function () {
+
+        game.add.sprite(0, 0, 'bg');
+
+        var mainstart = game.add.sprite(0, 0, 'mainstart');
+        mainstart.name = "mainstart";
+        mainstart.inputEnabled = true;
+        mainstart.events.onInputDown.add(this.listener, this);
+
+    },
+
+    listener: function () 
+    {
+        game.state.start('levelMenu', true, true);
+    }    
+
+}
+
+var levelSelect = {
+
+    preload: function () {
+    },
+
+    create: function () {
+
+        game.add.sprite(0, 0, 'bg');
+
+    }
+
+}
+
+var game = new Phaser.Game(640, 480);
+
+game.state.add('menu', mainMenu, true);
+game.state.add('levelMenu', levelSelect);
+

examples/wip/prerend.js

@@ -0,0 +1,16 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+	game.load.image('test', 'assets/pics/nanoha_taiken_blue.png');
+
+}
+
+function create() {
+
+	game.stage.backgroundColor = 'rgba(0,0,0,0.3)';
+
+	game.add.sprite(0, 0, 'test');
+
+}

src/core/Game.js

@@ -11,16 +11,16 @@
 * @class Phaser.Game
 * @classdesc This is where the magic happens. The Game object is the heart of your game,
 * providing quick access to common functions and handling the boot process.
-* <p>"Hell, there are no rules here - we're trying to accomplish something."</p><br>
+* "Hell, there are no rules here - we're trying to accomplish something."
 *                                                       Thomas A. Edison
 * @constructor
-* @param {number} width - The width of your game in game pixels.
-* @param {number} height - The height of your game in game pixels.
-* @param {number} renderer -Which renderer to use (canvas or webgl)
-* @param {HTMLElement} parent -The Games DOM parent.
-* @param {Description} state - Description.
-* @param {boolean} transparent - Use a transparent canvas background or not.
-* @param  {boolean} antialias - Anti-alias graphics.
+* @param {number} [width=800] - The width of your game in game pixels.
+* @param {number} [height=600] - The height of your game in game pixels.
+* @param {number} [renderer=Phaser.AUTO] - Which renderer to use (canvas or webgl)
+* @param {HTMLElement} [parent=''] - The Games DOM parent.
+* @param {any} [state=null] - Description.
+* @param {boolean} [transparent=false] - Use a transparent canvas background or not.
+* @param  {boolean} [antialias=true] - Anti-alias graphics.
 */
 Phaser.Game = function (width, height, renderer, parent, state, transparent, antialias) {
 

src/core/Stage.js

@@ -152,7 +152,7 @@ Phaser.Stage.prototype = {
 
 /**
 * @name Phaser.Stage#backgroundColor
-* @property {number|string} paused - Gets and sets the background color of the stage. The color can be given as a number: 0xff0000 or a hex string: '#ff0000'
+* @property {number|string} backgroundColor - Gets and sets the background color of the stage. The color can be given as a number: 0xff0000 or a hex string: '#ff0000'
 */
 Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
 
@@ -164,12 +164,20 @@ Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
 
         this._backgroundColor = color;
 
-        if (typeof color === 'string')
+        if (this.game.renderType == Phaser.CANVAS)
         {
-            color = Phaser.Color.hexToRGB(color);
+            //  Set it directly, this allows us to use rgb alpha values in Canvas mode.
+            this._stage.backgroundColorString = color;
         }
+        else
+        {
+            if (typeof color === 'string')
+            {
+                color = Phaser.Color.hexToRGB(color);
+            }
 
-        this._stage.setBackgroundColor(color);
+            this._stage.setBackgroundColor(color);
+        }
 
     }