Added CSS3Filters plugin. Also modified Sprite to contain preUpdate call, so that update can be over-ridden by custom Classes + added an example for this.

Plugins/CSS3Filters.js

@@ -0,0 +1,180 @@
+/**
+* Phaser - Display - CSS3Filters
+*
+* Allows for easy addition and modification of CSS3 Filters on DOM objects (typically the Game.Stage.canvas).
+*/
+
+Phaser.Plugins.CSS3Filters = function (parent) {
+
+	this.parent = parent;
+
+	this._blur = 0;
+	this._grayscale = 0;
+	this._sepia = 0;
+	this._brightness = 0;
+	this._contrast = 0;
+	this._hueRotate = 0;
+	this._invert = 0;
+	this._opacity = 0;
+	this._saturate = 0;
+	
+};
+
+Phaser.Plugins.CSS3Filters.prototype = {
+
+    setFilter: function (local, prefix, value, unit) {
+
+        this[local] = value;
+
+        if (this.parent)
+        {
+            this.parent.style['-webkit-filter'] = prefix + '(' + value + unit + ')';
+        }
+
+    }
+
+};
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "blur", {
+
+    get: function () {
+        return this._blur;
+    },
+
+	/**
+    * Applies a Gaussian blur to the DOM element. The value of 'radius' defines the value of the standard deviation to the Gaussian function,
+    * or how many pixels on the screen blend into each other, so a larger value will create more blur.
+    * If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.
+    */
+    set: function (radius) {
+        this.setFilter('_blur', 'blur', radius, 'px');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "grayscale", {
+    get: function () {
+        return this._grayscale;
+    },
+
+	/**
+    * Converts the input image to grayscale. The value of 'amount' defines the proportion of the conversion.
+    * A value of 100% is completely grayscale. A value of 0% leaves the input unchanged.
+    * Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (amount) {
+        this.setFilter('_grayscale', 'grayscale', amount, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "sepia", {
+    get: function () {
+        return this._sepia;
+    },
+
+	/**
+    * Converts the input image to sepia. The value of 'amount' defines the proportion of the conversion.
+    * A value of 100% is completely sepia. A value of 0 leaves the input unchanged.
+    * Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (amount) {
+        this.setFilter('_sepia', 'sepia', amount, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "brightness", {
+    get: function () {
+        return this._brightness;
+    },
+
+	/**
+    * Applies a linear multiplier to input image, making it appear more or less bright.
+    * A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
+    * Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results.
+    * If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (amount) {
+        this.setFilter('_brightness', 'brightness', amount, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "contrast", {
+    get: function () {
+        return this._contrast;
+    },
+
+	/**
+    * Adjusts the contrast of the input. A value of 0% will create an image that is completely black.
+    * A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.
+    * If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (amount) {
+        this.setFilter('_contrast', 'contrast', amount, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "hueRotate", {
+
+    get: function () {
+        return this._hueRotate;
+    },
+
+	/**
+    * Applies a hue rotation on the input image. The value of 'angle' defines the number of degrees around the color circle
+    * the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the 'angle' parameter is missing,
+    * a value of 0deg is used. Maximum value is 360deg.
+    */
+    set: function (angle) {
+        this.setFilter('_hueRotate', 'hue-rotate', angle, 'deg');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "invert", {
+
+    get: function () {
+        return this._invert;
+    },
+
+	/**
+    * Inverts the samples in the input image. The value of 'amount' defines the proportion of the conversion.
+    * A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
+    * Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (value) {
+        this.setFilter('_invert', 'invert', value, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "opacity", {
+
+    get: function () {
+        return this._opacity;
+    },
+
+	/**
+    * Applies transparency to the samples in the input image. The value of 'amount' defines the proportion of the conversion.
+    * A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
+    * Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount.
+    * If the 'amount' parameter is missing, a value of 100% is used.
+    * This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
+    */
+    set: function (value) {
+        this.setFilter('_opacity', 'opacity', value, '%');
+    }
+});
+
+Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "saturate", {
+
+    get: function () {
+        return this._saturate;
+    },
+
+	/**
+    * Saturates the input image. The value of 'amount' defines the proportion of the conversion.
+    * A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
+    * Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results.
+    * If the 'amount' parameter is missing, a value of 100% is used.
+    */
+    set: function (value) {
+        this.setFilter('_saturate', 'saturate', value, '%');
+    }
+});

examples/sprite_extend.php

@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>phaser.js - a new beginning</title>
+    <?php
+        require('js.php');
+    ?>
+</head>
+<body>
+
+<script type="text/javascript">
+
+//  Here is a custom game object
+MonsterBunny = function (game, x, y) {
+
+    Phaser.Sprite.call(this, game, x, y, 'bunny');
+
+};
+
+MonsterBunny.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);
+MonsterBunny.prototype.constructor = MonsterBunny;
+
+/**
+ * Automatically called by World.update
+ */
+MonsterBunny.prototype.update = function() {
+
+    this.angle++;
+
+};
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
+
+    function preload() {
+
+        game.load.image('bunny', 'assets/sprites/bunny.png');
+
+    }
+
+    function create() {
+
+        var wabbit = new MonsterBunny(game, 400, 300);
+        wabbit.lifespan = 3000;
+        wabbit.anchor.setTo(0.5, 0.5);
+
+        game.add.existing(wabbit);
+
+    }
+
+    function update() {
+    }
+
+    function render() {
+    }
+
+})();
+</script>
+
+</body>
+</html>

src/core/World.js

@@ -59,6 +59,11 @@ Phaser.World.prototype = {
 			
 			do	
 			{
+				if (currentNode['preUpdate'])
+				{
+					currentNode.preUpdate();
+				}
+
 				if (currentNode['update'])
 				{
 					currentNode.update();

src/gameobjects/GameObjectFactory.js

@@ -10,6 +10,12 @@ Phaser.GameObjectFactory.prototype = {
 	game: null,
     world: null,
 
+    existing: function (object) {
+
+        return this.world.add(object);
+
+    },
+
 	/**
     * Create a new Sprite with specific position and sprite sheet key.
     *

src/gameobjects/Sprite.js

@@ -155,9 +155,9 @@ Phaser.Sprite.prototype = Object.create(PIXI.Sprite.prototype);
 Phaser.Sprite.prototype.constructor = Phaser.Sprite;
 
 /**
- * Automatically called by World.update
+ * Automatically called by World.update. You can create your own update in Objects that extend Phaser.Sprite.
  */
-Phaser.Sprite.prototype.update = function() {
+Phaser.Sprite.prototype.preUpdate = function() {
 
     if (!this.exists)
     {