diff --git a/build/config.php b/build/config.php index 7b047258..a8f45ea7 100644 --- a/build/config.php +++ b/build/config.php @@ -99,6 +99,8 @@ + + @@ -143,7 +145,6 @@ - diff --git a/examples/wip/image3.js b/examples/wip/image3.js new file mode 100644 index 00000000..c2332a6d --- /dev/null +++ b/examples/wip/image3.js @@ -0,0 +1,24 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); + +function preload() { + + game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); + game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json'); + +} + +function create() { + + // Testing both sprite sheets and texture atlases with a Phaser.Image + + for (var i = 0; i < 18; i++) + { + game.add.image(4 + 44 * i, 200, 'mummy', i); + } + + game.add.image(200, 300, 'seacreatures', 'blueJellyfish0000'); + game.add.image(300, 300, 'seacreatures', 'crab10000'); + game.add.image(470, 300, 'seacreatures', 'purpleFish0000'); + +} diff --git a/src/animation/FrameData.js b/src/animation/FrameData.js index ab790fa0..1051fced 100644 --- a/src/animation/FrameData.js +++ b/src/animation/FrameData.js @@ -60,12 +60,12 @@ Phaser.FrameData.prototype = { */ getFrame: function (index) { - if (this._frames.length > index) + if (index > this._frames.length) { - return this._frames[index]; + index = 0; } - return null; + return this._frames[index]; }, diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index 690670d6..3dcf7e8b 100644 --- a/src/gameobjects/Image.js +++ b/src/gameobjects/Image.js @@ -179,6 +179,7 @@ Phaser.Image.prototype.inCamera = function() { Phaser.Image.prototype.loadTexture = function (key, frame) { this.key = key; + frame = frame || 0; if (key instanceof Phaser.RenderTexture) { @@ -210,28 +211,23 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { if (this.game.cache.isSpriteSheet(key)) { - // this.animations.loadFrameData(this.game.cache.getFrameData(key)); + var frameData = this.game.cache.getFrameData(key); - // if (typeof frame !== 'undefined') - // { - // if (typeof frame === 'string') - // { - // this.frameName = frame; - // } - // else - // { - // this.frame = frame; - // } - // } + // 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]); + } + else + { + this.setTexture(PIXI.TextureCache[frameData.getFrame(frame).uuid]); + } } else { - console.log('loadTexture 1', this.game.cache.getFrame(key)); - - this.game.cache.getFrame(key).getRect(this.currentFrame); - - console.log('loadTexture 1', this.currentFrame); - this.setTexture(PIXI.TextureCache[key]); } } @@ -421,24 +417,19 @@ Phaser.Image.prototype.bringToTop = function(child) { /** * Indicates the rotation of the Sprite, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation. * Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90. -* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also computationally faster. +* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also faster on mobile devices where Object.defineProperty is expensive to call. * -* @method Phaser.Image#angle -* @memberof Phaser.Image -* @param {number} [value] - If given it will set the Images angle to this value. Value should be given in degrees. -* @return {number} The angle of this Image in degrees. +* @name Phaser.Image#angle +* @property {number} angle - The angle of this Image in degrees. */ -Phaser.Image.prototype.angle = function(value) { +Object.defineProperty(Phaser.Image.prototype, "angle", { - if (typeof value === 'undefined') - { + get: function() { return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation)); - } - else - { + }, + + set: function(value) { this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value)); - - return Phaser.Math.radToDeg(this.rotation); } -}; +}); diff --git a/src/gameobjects/old_RenderTexture.js b/src/gameobjects/old_RenderTexture.js new file mode 100644 index 00000000..b6eab596 --- /dev/null +++ b/src/gameobjects/old_RenderTexture.js @@ -0,0 +1,327 @@ +/** +* @author Richard Davey +* @copyright 2014 Photon Storm Ltd. +* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} +*/ + +/** +* A RenderTexture is a special texture that allows any displayObject to be rendered to it. +* @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. +*/ +Phaser.RenderTexture = function (game, key, width, height) { + + /** + * @property {Phaser.Game} game - A reference to the currently running game. + */ + this.game = game; + + /** + * @property {string} name - the name of the object. + */ + this.name = key; + + PIXI.EventTarget.call(this); + + /** + * @property {number} width - the width. + */ + this.width = width || 100; + + /** + * @property {number} height - the height. + */ + this.height = height || 100; + + /** + * @property {PIXI.mat3} indetityMatrix - Matrix object. + */ + this.indetityMatrix = PIXI.mat3.create(); + + /** + * @property {PIXI.Rectangle} frame - The frame for this texture. + */ + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + + /** + * @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(); + } + +}; + +Phaser.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); +Phaser.RenderTexture.prototype.constructor = PIXI.RenderTexture; + +/** +* This function will draw the display object to the texture. If the display object is a Group or has children it will +* draw all children as well. +* +* @method Phaser.RenderTexture#render +* @memberof Phaser.RenderTexture +* @param {DisplayObject} displayObject - The display object to render this texture on. +* @param {Phaser.Point} [position] - Where to draw the display object. +* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn. +* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered. +*/ +Phaser.RenderTexture.prototype.render = function(displayObject, position, clear, renderHidden) { + + if (typeof position === 'undefined') { position = false; } + if (typeof clear === 'undefined') { clear = false; } + if (typeof renderHidden === 'undefined') { renderHidden = false; } + + if (PIXI.gl) + { + this.renderWebGL(displayObject, position, clear, renderHidden); + } + else + { + this.renderCanvas(displayObject, position, clear, renderHidden); + } + +} + +/** +* This function will draw the display object to the texture at the given x/y coordinates. +* If the display object is a Group or has children it will draw all children as well. +* +* @method Phaser.RenderTexture#renderXY +* @memberof Phaser.RenderTexture +* @param {DisplayObject} displayObject - The display object to render this texture on. +* @param {number} x - The x coordinate to draw the display object at. +* @param {number} y - The y coordinate to draw the display object at. +* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn. +* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered. +*/ +Phaser.RenderTexture.prototype.renderXY = function(displayObject, x, y, clear, renderHidden) { + + this._tempPoint.x = x; + this._tempPoint.y = y; + + this.render(displayObject, this._tempPoint, clear, renderHidden); + +} + +/** +* Initializes the webgl data for this texture +* +* @method Phaser.RenderTexture#initWebGL +* @memberof Phaser.RenderTexture +* @private +*/ +Phaser.RenderTexture.prototype.initWebGL = function() { + + var gl = PIXI.gl; + this.glFramebuffer = gl.createFramebuffer(); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); + + this.glFramebuffer.width = this.width; + this.glFramebuffer.height = this.height; + + this.baseTexture = new PIXI.BaseTexture(); + + this.baseTexture.width = this.width; + this.baseTexture.height = this.height; + + this.baseTexture._glTexture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); + + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + + this.baseTexture.isRender = true; + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0); + + // create a projection matrix.. + this.projection = new PIXI.Point(this.width/2 , -this.height/2); + + // set the correct render function.. + // this.render = this.renderWebGL; +} + +/** +* Resizes the RenderTexture. +* +* @method Phaser.RenderTexture#resize +* @memberof Phaser.RenderTexture +*/ +Phaser.RenderTexture.prototype.resize = function(width, height) +{ + + this.width = width; + this.height = height; + + if(PIXI.gl) + { + this.projection.x = this.width/2 + this.projection.y = -this.height/2; + + var gl = PIXI.gl; + gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + else + { + + this.frame.width = this.width + this.frame.height = this.height; + this.renderer.resize(this.width, this.height); + } +} + +/** +* Initializes the canvas data for this texture +* +* @method Phaser.RenderTexture#initCanvas +* @memberof Phaser.RenderTexture +* @private +*/ +Phaser.RenderTexture.prototype.initCanvas = function() +{ + this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0); + + this.baseTexture = new PIXI.BaseTexture(this.renderer.view); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + + // this.render = this.renderCanvas; +} + +/** +* This function will draw the display object to the texture. +* +* @method Phaser.RenderTexture#renderWebGL +* @memberof Phaser.RenderTexture +* @private +* @param {DisplayObject} displayObject - The display object to render this texture on. +* @param {Phaser.Point} [position] - Where to draw the display object. +* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn. +* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered. +*/ +Phaser.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear, renderHidden) +{ + var gl = PIXI.gl; + + // enable the alpha color mask.. + gl.colorMask(true, true, true, true); + + gl.viewport(0, 0, this.width, this.height); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); + + if (clear) + { + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + } + + // THIS WILL MESS WITH HIT TESTING! + var children = displayObject.children; + + //TODO -? create a new one??? dont think so! + var originalWorldTransform = displayObject.worldTransform; + displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix; + // modify to flip... + displayObject.worldTransform[4] = -1; + displayObject.worldTransform[5] = this.projection.y * -2; + + if (position) + { + displayObject.worldTransform[2] = position.x; + displayObject.worldTransform[5] -= position.y; + } + + PIXI.visibleCount++; + displayObject.vcount = PIXI.visibleCount; + + for (var i = 0, j = children.length; i < j; i++) + { + children[i].updateTransform(); + } + + var renderGroup = displayObject.__renderGroup; + + if (renderGroup) + { + if (displayObject == renderGroup.root) + { + renderGroup.render(this.projection, this.glFramebuffer); + } + else + { + renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer); + } + } + else + { + if (!this.renderGroup) + { + this.renderGroup = new PIXI.WebGLRenderGroup(gl); + } + + this.renderGroup.setRenderable(displayObject); + this.renderGroup.render(this.projection, this.glFramebuffer); + } + + displayObject.worldTransform = originalWorldTransform; +} + +/** + * This function will draw the display object to the texture. + * +* @method Phaser.RenderTexture#renderCanvas +* @memberof Phaser.RenderTexture +* @private +* @param {DisplayObject} displayObject - The display object to render this texture on. +* @param {Phaser.Point} [position] - Where to draw the display object. +* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn. +* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered. +*/ +Phaser.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear, renderHidden) +{ + var children = displayObject.children; + + displayObject.worldTransform = PIXI.mat3.create(); + + if (position) + { + displayObject.worldTransform[2] = position.x; + displayObject.worldTransform[5] = position.y; + } + + for (var i = 0, j = children.length; i < j; i++) + { + children[i].updateTransform(); + } + + if (clear) + { + this.renderer.context.clearRect(0, 0, this.width, this.height); + } + + this.renderer.renderDisplayObject(displayObject, renderHidden); + + this.renderer.context.setTransform(1, 0, 0, 1, 0, 0); + +}