diff --git a/README.md b/README.md
index 2e1678f3..892a50f9 100644
--- a/README.md
+++ b/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!)
diff --git a/examples/assets/games/invaders/bullet.png b/examples/assets/games/invaders/bullet.png
new file mode 100644
index 00000000..cd5cd70e
Binary files /dev/null and b/examples/assets/games/invaders/bullet.png differ
diff --git a/examples/assets/games/invaders/enemy-bullet.png b/examples/assets/games/invaders/enemy-bullet.png
new file mode 100644
index 00000000..3a404045
Binary files /dev/null and b/examples/assets/games/invaders/enemy-bullet.png differ
diff --git a/examples/assets/games/invaders/explode.png b/examples/assets/games/invaders/explode.png
new file mode 100644
index 00000000..5743585b
Binary files /dev/null and b/examples/assets/games/invaders/explode.png differ
diff --git a/examples/assets/games/invaders/invader.png b/examples/assets/games/invaders/invader.png
new file mode 100644
index 00000000..58edb0b4
Binary files /dev/null and b/examples/assets/games/invaders/invader.png differ
diff --git a/examples/assets/games/invaders/invader32x32x4.png b/examples/assets/games/invaders/invader32x32x4.png
new file mode 100644
index 00000000..9445254a
Binary files /dev/null and b/examples/assets/games/invaders/invader32x32x4.png differ
diff --git a/examples/assets/games/invaders/player.png b/examples/assets/games/invaders/player.png
new file mode 100644
index 00000000..e4db3a22
Binary files /dev/null and b/examples/assets/games/invaders/player.png differ
diff --git a/examples/assets/games/invaders/starfield.png b/examples/assets/games/invaders/starfield.png
new file mode 100644
index 00000000..9427d739
Binary files /dev/null and b/examples/assets/games/invaders/starfield.png differ
diff --git a/examples/games/invaders.js b/examples/games/invaders.js
index 85c9036a..4b32d99d 100644
--- a/examples/games/invaders.js
+++ b/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 () {
-}
diff --git a/examples/wip/forum.js b/examples/wip/forum.js
new file mode 100644
index 00000000..b7a4d218
--- /dev/null
+++ b/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);
+
diff --git a/examples/wip/prerend.js b/examples/wip/prerend.js
new file mode 100644
index 00000000..d3775f5a
--- /dev/null
+++ b/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');
+
+}
diff --git a/resources/wip/sprites/phaser sprites11.gif b/resources/wip/sprites/phaser sprites11.gif
new file mode 100644
index 00000000..3c63702d
Binary files /dev/null and b/resources/wip/sprites/phaser sprites11.gif differ
diff --git a/src/core/Game.js b/src/core/Game.js
index 562e0038..61c43260 100644
--- a/src/core/Game.js
+++ b/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.
-* "Hell, there are no rules here - we're trying to accomplish something."
+* "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) {
diff --git a/src/core/Stage.js b/src/core/Stage.js
index 50499321..cff07d74 100644
--- a/src/core/Stage.js
+++ b/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);
+ }
}