diff --git a/Plugins/CSS3Filters.js b/Plugins/CSS3Filters.js new file mode 100644 index 00000000..30781efc --- /dev/null +++ b/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, '%'); + } +}); diff --git a/examples/sprite_extend.php b/examples/sprite_extend.php new file mode 100644 index 00000000..d8bc2de0 --- /dev/null +++ b/examples/sprite_extend.php @@ -0,0 +1,62 @@ + + + + phaser.js - a new beginning + + + + + + + + \ No newline at end of file diff --git a/src/core/World.js b/src/core/World.js index e10e256b..f30ec372 100644 --- a/src/core/World.js +++ b/src/core/World.js @@ -59,6 +59,11 @@ Phaser.World.prototype = { do { + if (currentNode['preUpdate']) + { + currentNode.preUpdate(); + } + if (currentNode['update']) { currentNode.update(); diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 3ca561d9..0bf887ff 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/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. * diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index eca811c4..68d4e622 100644 --- a/src/gameobjects/Sprite.js +++ b/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) {