From d583b364bd650aa9950ccf0c01e1dba12cc39913 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 7 Feb 2014 06:25:28 +0000 Subject: [PATCH] Game.add.renderTexture now has the addToCache parameter. If set the texture will be stored in Game.Cache and can be retrieved with Cache.getTexture(key). Game.add.bitmapData now has the addToCache parameter. If set the texture will be stored in Game.Cache and can be retrieved with Cache.getBitmapData(key). --- README.md | 2 + build/config.php | 4 +- examples/wip/rendertexture.js | 18 ++-- src/gameobjects/BitmapData.js | 15 +-- src/gameobjects/GameObjectFactory.js | 41 +++++--- src/gameobjects/Image.js | 142 ++++++++++++++++++++------- src/gameobjects/RenderTexture.js | 37 ++----- 7 files changed, 158 insertions(+), 101 deletions(-) diff --git a/README.md b/README.md index 45981fa4..e115e584 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,8 @@ Updates: * Debug.renderRectangle has a new parameter: filled. If true it renders as with fillRect, if false strokeRect. * Phaser.AnimationParser now sets the trimmed data directly for Pixi Texture frames. Tested across JSON Hash, JSON Data, Sprite Sheet and XML. +* Game.add.renderTexture now has the addToCache parameter. If set the texture will be stored in Game.Cache and can be retrieved with Cache.getTexture(key). +* Game.add.bitmapData now has the addToCache parameter. If set the texture will be stored in Game.Cache and can be retrieved with Cache.getBitmapData(key). Bug Fixes: diff --git a/build/config.php b/build/config.php index a8f45ea7..5e21cefd 100644 --- a/build/config.php +++ b/build/config.php @@ -99,8 +99,6 @@ - - @@ -144,10 +142,10 @@ + - diff --git a/examples/wip/rendertexture.js b/examples/wip/rendertexture.js index bacc9698..7324c90a 100644 --- a/examples/wip/rendertexture.js +++ b/examples/wip/rendertexture.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.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { @@ -13,17 +13,14 @@ var image; function create() { - // Here we'll create a renderTexture the same size as our game texture = game.add.renderTexture('mousetrail', 800, 600); - // This is the sprite that will be drawn to the texture, we set it to visible false as we only need its texture data - mushroom = game.add.sprite(0, 0, 'mushroom'); - // mushroom.visible = false; - // mushroom.anchor.setTo(0.5, 0.5); + // We create a sprite (rather than using the factory) so it doesn't get added to the display, as we only need its texture data. + mushroom = new Phaser.Sprite(game, 0, 0, 'mushroom'); + mushroom.anchor.setTo(0.5, 0.5); // This is the sprite that is drawn to the display. We've given it the renderTexture as its texture. - // game.add.image(0, 0, texture); - + image = game.add.image(0, 0, texture); game.input.onDown.add(tint, this); @@ -41,14 +38,11 @@ function update() { { // Here we draw the mushroom sprite to the renderTexture at the pointer coordinates. // The 'false' parameter 2nd from the end tells it not to clear itself, causing the trail effect you see. - // The final 'true' parameter tells it to render sprites even with visible false set. - // texture.render(mushroom, game.input.activePointer.position, false, true); + texture.render(mushroom, game.input.activePointer.position, false); } } function render() { - game.debug.renderText(game.input.x, 32, 32); - } diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index ec0c678f..3c783ab1 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -17,13 +17,14 @@ * * @constructor * @param {Phaser.Game} game - A reference to the currently running game. -* @param {number} [width=256] - The width of the BitmapData in pixels. -* @param {number} [height=256] - The height of the BitmapData in pixels. +* @param {string} key - Internal Phaser reference key for the render texture. +* @param {number} [width=100] - The width of the BitmapData in pixels. +* @param {number} [height=100] - The height of the BitmapData in pixels. */ -Phaser.BitmapData = function (game, width, height) { +Phaser.BitmapData = function (game, key, width, height) { - if (typeof width === 'undefined') { width = 256; } - if (typeof height === 'undefined') { height = 256; } + if (typeof width === 'undefined') { width = 100; } + if (typeof height === 'undefined') { height = 100; } /** * @property {Phaser.Game} game - A reference to the currently running game. @@ -31,9 +32,9 @@ Phaser.BitmapData = function (game, width, height) { this.game = game; /** - * @property {string} name - The name of the BitmapData. + * @property {string} key - The key of the BitmapData in the Cache, if stored there. */ - this.name = ''; + this.key = key; /** * @property {number} width - The width of the BitmapData in pixels. diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 955d7cd0..0077ee4e 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -288,32 +288,51 @@ Phaser.GameObjectFactory.prototype = { * A dynamic initially blank canvas to which images can be drawn. * * @method Phaser.GameObjectFactory#renderTexture - * @param {string} key - Asset key for the render texture. - * @param {number} width - the width of the render texture. - * @param {number} height - the height of the render texture. - * @return {Phaser.RenderTexture} The newly created renderTexture object. + * @param {number} [width=100] - the width of the RenderTexture. + * @param {number} [height=100] - the height of the RenderTexture. + * @param {string} [key=''] - Asset key for the RenderTexture when stored in the Cache (see addToCache parameter). + * @param {boolean} [addToCache=false] - Should this RenderTexture be added to the Game.Cache? If so you can retrieve it with Cache.getTexture(key) + * @return {Phaser.RenderTexture} The newly created RenderTexture object. */ - renderTexture: function (key, width, height) { + renderTexture: function (width, height, key, addToCache) { + + if (typeof addToCache === 'undefined') { addToCache = false; } + if (typeof key === 'undefined' || key === '') { key = this.game.rnd.uuid(); } var texture = new Phaser.RenderTexture(this.game, key, width, height); - this.game.cache.addRenderTexture(key, texture); + if (addToCache) + { + this.game.cache.addRenderTexture(key, texture); + } return texture; }, /** - * Experimental: A BitmapData object which can be manipulated and drawn to like a traditional Canvas object and used to texture Sprites. + * A BitmapData object which can be manipulated and drawn to like a traditional Canvas object and used to texture Sprites. * * @method Phaser.GameObjectFactory#bitmapData - * @param {number} [width=256] - The width of the BitmapData in pixels. - * @param {number} [height=256] - The height of the BitmapData in pixels. + * @param {number} [width=100] - The width of the BitmapData in pixels. + * @param {number} [height=100] - The height of the BitmapData in pixels. + * @param {string} [key=''] - Asset key for the BitmapData when stored in the Cache (see addToCache parameter). + * @param {boolean} [addToCache=false] - Should this BitmapData be added to the Game.Cache? If so you can retrieve it with Cache.getBitmapData(key) * @return {Phaser.BitmapData} The newly created BitmapData object. */ - bitmapData: function (width, height) { + bitmapData: function (width, height, addToCache) { - return new Phaser.BitmapData(this.game, width, height); + if (typeof addToCache === 'undefined') { addToCache = false; } + if (typeof key === 'undefined' || key === '') { key = this.game.rnd.uuid(); } + + var texture = new Phaser.BitmapData(this.game, key, width, height); + + if (addToCache) + { + this.game.cache.addBitmapData(key, texture); + } + + return texture; }, diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index 3dcf7e8b..68b8d736 100644 --- a/src/gameobjects/Image.js +++ b/src/gameobjects/Image.js @@ -64,8 +64,7 @@ Phaser.Image = function (game, x, y, key, frame) { this.loadTexture(key, frame); - this.position.x = x; - this.position.y = y; + this.position.set(x, y); /** * @property {Phaser.Point} world - The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container. @@ -90,6 +89,12 @@ Phaser.Image = function (game, x, y, key, frame) { */ this.fixedToCamera = false; + /** + * @property {array} _cache - A small cache for previous step values. + * @private + */ + this._cache = [0, 0, 0]; + }; Phaser.Image.prototype = Object.create(PIXI.Sprite.prototype); @@ -103,6 +108,10 @@ Phaser.Image.prototype.constructor = Phaser.Image; */ Phaser.Image.prototype.preUpdate = function() { + this._cache[0] = this.world.x; + this._cache[1] = this.world.y; + this._cache[2] = this.rotation; + if (!this.exists || !this.parent.exists) { return false; @@ -141,32 +150,6 @@ Phaser.Image.prototype.postUpdate = function() { }; -/** -* Checks if the Image bounds are within the game world, otherwise false if fully outside of it. -* -* @method Phaser.Image#inWorld -* @memberof Phaser.Image -* @return {boolean} True if the Image bounds is within the game world, even if only partially. Otherwise false if fully outside of it. -*/ -Phaser.Image.prototype.inWorld = function() { - - return this.game.world.bounds.intersects(this.getBounds()); - -}; - -/** -* Checks if the Image bounds are within the game camera, otherwise false if fully outside of it. -* -* @method Phaser.Image#inCamera -* @memberof Phaser.Image -* @return {boolean} True if the Image bounds is within the game camera, even if only partially. Otherwise false if fully outside of it. -*/ -Phaser.Image.prototype.inCamera = function() { - - return this.game.world.camera.screenView.intersects(this.getBounds()); - -}; - /** * Changes the Texture the Sprite is using entirely. The old texture is removed and the new one is referenced or fetched from the Cache. * This causes a WebGL texture update, so use sparingly or in low-intensity portions of your game. @@ -183,8 +166,8 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { if (key instanceof Phaser.RenderTexture) { - // this.game.cache.getTextureFrame(key.name).clone(this.currentFrame); - // WOKWOKSK + this.key = key.name; + this.setTexture(key); } else if (key instanceof Phaser.BitmapData) { @@ -192,9 +175,7 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { } else if (key instanceof PIXI.Texture) { - // this.currentFrame = frame; - frame.clone(this.currentFrame); - console.log('loadTexture 2'); + this.setTexture(key); } else { @@ -202,21 +183,19 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { { key = '__default'; this.key = key; + this.setTexture(PIXI.TextureCache[key]); } else if (typeof key === 'string' && this.game.cache.checkImageKey(key) === false) { key = '__missing'; this.key = key; + this.setTexture(PIXI.TextureCache[key]); } if (this.game.cache.isSpriteSheet(key)) { var frameData = this.game.cache.getFrameData(key); - // console.log(frameData); - // console.log(frameData.getFrame(0)); - // console.log(frameData.getFrame(1)); - if (typeof frame === 'string') { this.setTexture(PIXI.TextureCache[frameData.getFrameByName(frame).uuid]); @@ -425,11 +404,100 @@ Phaser.Image.prototype.bringToTop = function(child) { Object.defineProperty(Phaser.Image.prototype, "angle", { get: function() { + return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation)); + }, set: function(value) { + this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value)); + + } + +}); + +/** +* Returns the delta x value. The difference between world.x now and in the previous step. +* +* @name Phaser.Image#deltaX +* @property {number} deltaX - The delta value. Positive if the motion was to the right, negative if to the left. +* @readonly +*/ +Object.defineProperty(Phaser.Image.prototype, "deltaX", { + + get: function() { + + return this.world.x - this._cache[0]; + + } + +}); + +/** +* Returns the delta y value. The difference between world.y now and in the previous step. +* +* @name Phaser.Image#deltaY +* @property {number} deltaY - The delta value. Positive if the motion was downwards, negative if upwards. +* @readonly +*/ +Object.defineProperty(Phaser.Image.prototype, "deltaY", { + + get: function() { + + return this.world.y - this._cache[1]; + + } + +}); + +/** +* Returns the delta z value. The difference between rotation now and in the previous step. +* +* @name Phaser.Image#deltaZ +* @property {number} deltaZ - The delta value. +* @readonly +*/ +Object.defineProperty(Phaser.Image.prototype, "deltaZ", { + + get: function() { + + return this.rotation - this._cache[2]; + + } + +}); + +/** +* Checks if the Image bounds are within the game world, otherwise false if fully outside of it. +* +* @name Phaser.Image#inWorld +* @property {boolean} inWorld - True if the Image bounds is within the game world, even if only partially. Otherwise false if fully outside of it. +* @readonly +*/ +Object.defineProperty(Phaser.Image.prototype, "inWorld", { + + get: function() { + + return this.game.world.bounds.intersects(this.getBounds()); + + } + +}); + +/** +* Checks if the Image bounds are within the game camera, otherwise false if fully outside of it. +* +* @name Phaser.Image#inCamera +* @property {boolean} inCamera - True if the Image bounds is within the game camera, even if only partially. Otherwise false if fully outside of it. +* @readonly +*/ +Object.defineProperty(Phaser.Image.prototype, "inCamera", { + + get: function() { + + return this.game.world.camera.screenView.intersects(this.getBounds()); + } }); diff --git a/src/gameobjects/RenderTexture.js b/src/gameobjects/RenderTexture.js index 42c608b2..d05cefba 100644 --- a/src/gameobjects/RenderTexture.js +++ b/src/gameobjects/RenderTexture.js @@ -9,9 +9,9 @@ * @class Phaser.RenderTexture * @constructor * @param {Phaser.Game} game - Current game instance. -* @param {string} key - Asset key for the render texture. -* @param {number} width - the width of the render texture. -* @param {number} height - the height of the render texture. +* @param {string} key - Internal Phaser reference key for the render texture. +* @param {number} [width=100] - The width of the render texture. +* @param {number} [height=100] - The height of the render texture. */ Phaser.RenderTexture = function (game, key, width, height) { @@ -21,43 +21,18 @@ Phaser.RenderTexture = function (game, key, width, height) { this.game = game; /** - * @property {string} name - the name of the object. + * @property {string} key - The key of the RenderTexture in the Cache, if stored there. */ - this.name = key; - - /** - * @property {number} width - the width. - */ - this.width = width || 100; - - /** - * @property {number} height - the height. - */ - this.height = height || 100; - - /** - * @property {PIXI.Rectangle} frame - The frame for this texture. - */ - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.key = key; /** * @property {number} type - Base Phaser object type. */ this.type = Phaser.RENDERTEXTURE; - // this._tempPoint = { x: 0, y: 0 }; - - // if (PIXI.gl) - // { - // this.initWebGL(); - // } - // else - // { - // this.initCanvas(); - // } + PIXI.RenderTexture.call(this, width, height, renderer); }; Phaser.RenderTexture.prototype = Object.create(PIXI.RenderTexture.prototype); Phaser.RenderTexture.prototype.constructor = Phaser.RenderTexture; -