diff --git a/examples/wip/bmd.js b/examples/wip/bmd.js new file mode 100644 index 00000000..c9cd8a80 --- /dev/null +++ b/examples/wip/bmd.js @@ -0,0 +1,44 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('pic', 'assets/pics/backscroll.png'); + +} + +var image; +var bmd; + +function create() { + + bmd = game.add.bitmapData(800, 600); + bmd.fillStyle('rgba(255,0,0,0.2)'); + // bmd.fillRect(0, 0, 300, 100); + // bmd.fillRect(0, 200, 300, 100); + + image = game.add.image(0, 0, bmd); + // image.anchor.set(0.5); + + game.input.onDown.add(tint, this); + +} + +function tint() { + + image.tint = Math.random() * 0xFFFFFF; + +} + +function update() { + + bmd.fillStyle('rgba(255,0,0,0.2)'); + bmd.fillRect(game.input.x, game.input.y, 6, 6); + +} + +function render() { + + game.debug.renderText(game.input.x, 32, 32); + +} diff --git a/examples/wip/rendertexture.js b/examples/wip/rendertexture.js new file mode 100644 index 00000000..bacc9698 --- /dev/null +++ b/examples/wip/rendertexture.js @@ -0,0 +1,54 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('mushroom', 'assets/sprites/mushroom2.png'); + +} + +var mushroom; +var texture; +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); + + // 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); + + + game.input.onDown.add(tint, this); + +} + +function tint() { + + image.tint = Math.random() * 0xFFFFFF; + +} + +function update() { + + if (!game.input.activePointer.position.isZero()) + { + // 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); + } + +} + +function render() { + + game.debug.renderText(game.input.x, 32, 32); + +} diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index c9fb5073..690670d6 100644 --- a/src/gameobjects/Image.js +++ b/src/gameobjects/Image.js @@ -96,7 +96,7 @@ Phaser.Image.prototype = Object.create(PIXI.Sprite.prototype); Phaser.Image.prototype.constructor = Phaser.Image; /** -* Automatically called by World.preUpdate. Handles cache updates, lifespan checks, animation updates and physics updates. +* Automatically called by World.preUpdate. * * @method Phaser.Image#preUpdate * @memberof Phaser.Image @@ -114,6 +114,8 @@ Phaser.Image.prototype.preUpdate = function() { this.renderable = this.game.world.camera.screenView.intersects(this.getBounds()); } + this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]); + return true; }; @@ -176,19 +178,16 @@ Phaser.Image.prototype.inCamera = function() { */ Phaser.Image.prototype.loadTexture = function (key, frame) { - console.log('loadTexture'); - this.key = key; if (key instanceof Phaser.RenderTexture) { - this.game.cache.getTextureFrame(key.name).clone(this.currentFrame); + // this.game.cache.getTextureFrame(key.name).clone(this.currentFrame); // WOKWOKSK } else if (key instanceof Phaser.BitmapData) { this.setTexture(key.texture); - this.currentFrame = key.textureFrame; } else if (key instanceof PIXI.Texture) { diff --git a/src/gameobjects/RenderTexture.js b/src/gameobjects/RenderTexture.js index b6eab596..42c608b2 100644 --- a/src/gameobjects/RenderTexture.js +++ b/src/gameobjects/RenderTexture.js @@ -25,8 +25,6 @@ Phaser.RenderTexture = function (game, key, width, height) { */ this.name = key; - PIXI.EventTarget.call(this); - /** * @property {number} width - the width. */ @@ -37,11 +35,6 @@ Phaser.RenderTexture = function (game, key, width, 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. */ @@ -52,276 +45,19 @@ Phaser.RenderTexture = function (game, key, width, height) { */ this.type = Phaser.RENDERTEXTURE; - this._tempPoint = { x: 0, y: 0 }; + // this._tempPoint = { x: 0, y: 0 }; - if (PIXI.gl) - { - this.initWebGL(); - } - else - { - this.initCanvas(); - } + // if (PIXI.gl) + // { + // this.initWebGL(); + // } + // else + // { + // this.initCanvas(); + // } }; -Phaser.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); -Phaser.RenderTexture.prototype.constructor = PIXI.RenderTexture; +Phaser.RenderTexture.prototype = Object.create(PIXI.RenderTexture.prototype); +Phaser.RenderTexture.prototype.constructor = Phaser.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); - -} diff --git a/src/geom/Rectangle.js b/src/geom/Rectangle.js index 2d872488..96270ea9 100644 --- a/src/geom/Rectangle.js +++ b/src/geom/Rectangle.js @@ -288,236 +288,235 @@ Phaser.Rectangle.prototype = { return "[{Rectangle (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + " empty=" + this.empty + ")}]"; - } + }, -}; + /** + * @name Phaser.Rectangle#halfWidth + * @property {number} halfWidth - Half of the width of the Rectangle. + * @readonly + */ + get halfWidth() { -Phaser.Rectangle.prototype.constructor = Phaser.Rectangle; - -/** -* @name Phaser.Rectangle#halfWidth -* @property {number} halfWidth - Half of the width of the Rectangle. -* @readonly -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "halfWidth", { - - get: function () { return Math.round(this.width / 2); - } -}); + }, -/** -* @name Phaser.Rectangle#halfHeight -* @property {number} halfHeight - Half of the height of the Rectangle. -* @readonly -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "halfHeight", { + /** + * @name Phaser.Rectangle#halfHeight + * @property {number} halfHeight - Half of the height of the Rectangle. + * @readonly + */ + get halfHeight() { - get: function () { return Math.round(this.height / 2); - } -}); + }, + + /** + * The sum of the y and height properties. Changing the bottom property of a Rectangle object has no effect on the x, y and width properties, but does change the height property. + * @name Phaser.Rectangle#bottom + * @property {number} bottom - The sum of the y and height properties. + */ + get bottom() { -/** -* The sum of the y and height properties. Changing the bottom property of a Rectangle object has no effect on the x, y and width properties, but does change the height property. -* @name Phaser.Rectangle#bottom -* @property {number} bottom - The sum of the y and height properties. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "bottom", { - - get: function () { return this.y + this.height; + }, - set: function (value) { - if (value <= this.y) { + set bottom(value) { + + if (value <= this.y) + { this.height = 0; - } else { + } + else + { this.height = (this.y - value); } - } + }, -}); + /** + * The location of the Rectangles bottom right corner as a Point object. + * @name Phaser.Rectangle#bottomRight + * @property {Phaser.Point} bottomRight - Gets or sets the location of the Rectangles bottom right corner as a Point object. + */ + get bottomRight() { -/** -* The location of the Rectangles bottom right corner as a Point object. -* @name Phaser.Rectangle#bottom -* @property {Phaser.Point} bottomRight - Gets or sets the location of the Rectangles bottom right corner as a Point object. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "bottomRight", { - - get: function () { return new Phaser.Point(this.right, this.bottom); }, - set: function (value) { + + set bottomRight(value) { + this.right = value.x; this.bottom = value.y; - } -}); - -/** -* The x coordinate of the left of the Rectangle. Changing the left property of a Rectangle object has no effect on the y and height properties. However it does affect the width property, whereas changing the x value does not affect the width property. -* @name Phaser.Rectangle#left -* @property {number} left - The x coordinate of the left of the Rectangle. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "left", { - - get: function () { - return this.x; }, - set: function (value) { - if (value >= this.right) { + /** + * The x coordinate of the left of the Rectangle. Changing the left property of a Rectangle object has no effect on the y and height properties. However it does affect the width property, whereas changing the x value does not affect the width property. + * @name Phaser.Rectangle#left + * @property {number} left - The x coordinate of the left of the Rectangle. + */ + get left() { + + return this.x; + + }, + + set left(value) { + + if (value >= this.right) + { this.width = 0; - } else { + } + else + { this.width = this.right - value; } + this.x = value; - } - -}); - -/** -* The sum of the x and width properties. Changing the right property of a Rectangle object has no effect on the x, y and height properties, however it does affect the width property. -* @name Phaser.Rectangle#right -* @property {number} right - The sum of the x and width properties. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "right", { - - get: function () { - return this.x + this.width; }, - set: function (value) { - if (value <= this.x) { + /** + * The sum of the x and width properties. Changing the right property of a Rectangle object has no effect on the x, y and height properties, however it does affect the width property. + * @name Phaser.Rectangle#right + * @property {number} right - The sum of the x and width properties. + */ + get right() { + + return this.x + this.width; + + }, + + set right(value) { + + if (value <= this.x) + { this.width = 0; - } else { + } + else + { this.width = this.x + value; } - } -}); + }, + + /** + * The volume of the Rectangle derived from width * height. + * @name Phaser.Rectangle#volume + * @property {number} volume - The volume of the Rectangle derived from width * height. + * @readonly + */ + get volume() { -/** -* The volume of the Rectangle derived from width * height. -* @name Phaser.Rectangle#volume -* @property {number} volume - The volume of the Rectangle derived from width * height. -* @readonly -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "volume", { - - get: function () { return this.width * this.height; - } -}); + }, + + /** + * The perimeter size of the Rectangle. This is the sum of all 4 sides. + * @name Phaser.Rectangle#perimeter + * @property {number} perimeter - The perimeter size of the Rectangle. This is the sum of all 4 sides. + * @readonly + */ + get perimeter() { -/** -* The perimeter size of the Rectangle. This is the sum of all 4 sides. -* @name Phaser.Rectangle#perimeter -* @property {number} perimeter - The perimeter size of the Rectangle. This is the sum of all 4 sides. -* @readonly -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "perimeter", { - - get: function () { return (this.width * 2) + (this.height * 2); - } -}); + }, + + /** + * The x coordinate of the center of the Rectangle. + * @name Phaser.Rectangle#centerX + * @property {number} centerX - The x coordinate of the center of the Rectangle. + */ + get centerX() { -/** -* The x coordinate of the center of the Rectangle. -* @name Phaser.Rectangle#centerX -* @property {number} centerX - The x coordinate of the center of the Rectangle. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "centerX", { - - get: function () { return this.x + this.halfWidth; + }, - set: function (value) { + set centerX(value) { + this.x = value - this.halfWidth; - } -}); + }, + + /** + * The y coordinate of the center of the Rectangle. + * @name Phaser.Rectangle#centerY + * @property {number} centerY - The y coordinate of the center of the Rectangle. + */ + get centerY() { -/** -* The y coordinate of the center of the Rectangle. -* @name Phaser.Rectangle#centerY -* @property {number} centerY - The y coordinate of the center of the Rectangle. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "centerY", { - - get: function () { return this.y + this.halfHeight; + }, - set: function (value) { + set centerY(value) { + this.y = value - this.halfHeight; - } -}); - -/** -* The y coordinate of the top of the Rectangle. Changing the top property of a Rectangle object has no effect on the x and width properties. -* However it does affect the height property, whereas changing the y value does not affect the height property. -* @name Phaser.Rectangle#top -* @property {number} top - The y coordinate of the top of the Rectangle. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "top", { - - get: function () { - return this.y; }, - set: function (value) { - if (value >= this.bottom) { + /** + * The y coordinate of the top of the Rectangle. Changing the top property of a Rectangle object has no effect on the x and width properties. + * However it does affect the height property, whereas changing the y value does not affect the height property. + * @name Phaser.Rectangle#top + * @property {number} top - The y coordinate of the top of the Rectangle. + */ + get top() { + + return this.y; + + }, + + set top(value) { + + if (value >= this.bottom) + { this.height = 0; this.y = value; - } else { + } + else + { this.height = (this.bottom - value); } - } -}); + }, -/** -* The location of the Rectangles top left corner as a Point object. -* @name Phaser.Rectangle#topLeft -* @property {Phaser.Point} topLeft - The location of the Rectangles top left corner as a Point object. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "topLeft", { + /** + * The location of the Rectangles top left corner as a Point object. + * @name Phaser.Rectangle#topLeft + * @property {Phaser.Point} topLeft - The location of the Rectangles top left corner as a Point object. + */ + get topLeft() { - get: function () { return new Phaser.Point(this.x, this.y); + }, - set: function (value) { + set topLeft(value) { + this.x = value.x; this.y = value.y; - } -}); - -/** -* Determines whether or not this Rectangle object is empty. A Rectangle object is empty if its width or height is less than or equal to 0. -* If set to true then all of the Rectangle properties are set to 0. -* @name Phaser.Rectangle#empty -* @property {boolean} empty - Gets or sets the Rectangles empty state. -*/ -Object.defineProperty(Phaser.Rectangle.prototype, "empty", { - - get: function () { - return (!this.width || !this.height); }, - set: function (value) { + /** + * Determines whether or not this Rectangle object is empty. A Rectangle object is empty if its width or height is less than or equal to 0. + * If set to true then all of the Rectangle properties are set to 0. + * @name Phaser.Rectangle#empty + * @property {boolean} empty - Gets or sets the Rectangles empty state. + */ + get empty() { + + return (!this.width || !this.height); + + }, + + set empty(value) { if (value === true) { @@ -526,7 +525,9 @@ Object.defineProperty(Phaser.Rectangle.prototype, "empty", { } -}); +}; + +Phaser.Rectangle.prototype.constructor = Phaser.Rectangle; /** * Increases the size of the Rectangle object by the specified amounts. The center point of the Rectangle object stays the same, and its size increases to the left and right by the dx value, and to the top and the bottom by the dy value. @@ -772,4 +773,4 @@ Phaser.Rectangle.union = function (a, b, output) { // Because PIXI uses its own Rectangle, we'll replace it with ours to avoid duplicating code or confusion. PIXI.Rectangle = Phaser.Rectangle; -PIXI.EmptyRectangle = new Phaser.Rectangle(0,0,0,0); +PIXI.EmptyRectangle = new Phaser.Rectangle(0, 0, 0, 0);