From b1d836dfaf90c34d47f017ebb1f20806bf32c6b4 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Wed, 29 May 2013 12:24:25 +0100 Subject: [PATCH] Scale tweaks --- Phaser/Phaser.csproj | 4 - Phaser/components/sprite/Position.ts | 65 ----- Phaser/components/sprite/Texture.ts | 8 + Phaser/core/Group.ts | 4 +- Phaser/gameobjects/IGameObject.ts | 20 +- Phaser/gameobjects/Sprite.ts | 102 ++++--- Phaser/renderers/CanvasRenderer.ts | 213 ++++----------- README.md | 1 + Tests/phaser.js | 383 +++++++++------------------ Tests/sprites/scale origin 1.js | 4 +- Tests/sprites/scale origin 1.ts | 4 +- Tests/sprites/scale sprite 5.js | 22 +- Tests/sprites/scale sprite 5.ts | 19 +- build/phaser.d.ts | 116 ++++---- build/phaser.js | 383 +++++++++------------------ 15 files changed, 433 insertions(+), 915 deletions(-) delete mode 100644 Phaser/components/sprite/Position.ts diff --git a/Phaser/Phaser.csproj b/Phaser/Phaser.csproj index e9d4de59..62a3ed22 100644 --- a/Phaser/Phaser.csproj +++ b/Phaser/Phaser.csproj @@ -64,14 +64,10 @@ - CameraFX.ts - - Position.ts - Texture.ts diff --git a/Phaser/components/sprite/Position.ts b/Phaser/components/sprite/Position.ts deleted file mode 100644 index 4528af45..00000000 --- a/Phaser/components/sprite/Position.ts +++ /dev/null @@ -1,65 +0,0 @@ -/// - -/** -* Phaser - Components - Position -* -* Sprite position, both world and screen, and rotation values and methods. -*/ - -module Phaser.Components { - - export class Position { - - constructor(parent: Sprite, x: number, y: number) { - - this._sprite = parent; - - this.world = new Phaser.Vec2(x, y); - this.screen = new Phaser.Vec2(x, y); - - this.offset = new Phaser.Vec2(0, 0); - this.midpoint = new Phaser.Vec2(0, 0); - - } - - /** - * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite. - */ - private _sprite: Sprite; - - public world: Phaser.Vec2; - public screen: Phaser.Vec2; - - public offset: Phaser.Vec2; - public midpoint: Phaser.Vec2; - - /** - * Rotation angle of this object. - * @type {number} - */ - private _rotation: number = 0; - - /** - * Z-order value of the object. - */ - public z: number = 0; - - /** - * This value is added to the rotation of the Sprite. - * For example if you had a sprite graphic drawn facing straight up then you could set - * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. - * @type {number} - */ - public rotationOffset: number = 0; - - public get rotation(): number { - return this._rotation; - } - - public set rotation(value: number) { - this._rotation = this._sprite.game.math.wrap(value, 360, 0); - } - - } - -} \ No newline at end of file diff --git a/Phaser/components/sprite/Texture.ts b/Phaser/components/sprite/Texture.ts index dfb838fd..0e48bc88 100644 --- a/Phaser/components/sprite/Texture.ts +++ b/Phaser/components/sprite/Texture.ts @@ -52,6 +52,12 @@ module Phaser.Components { */ private _dynamicTexture: DynamicTexture = null; + /** + * The status of the texture image. + * @type {boolean} + */ + public loaded: bool = false; + /** * Opacity of the Sprite texture where 1 is opaque and 0 is fully transparent. * @type {number} @@ -116,6 +122,8 @@ module Phaser.Components { this.texture = this._imageTexture; } + this.loaded = true; + return this._sprite; } diff --git a/Phaser/core/Group.ts b/Phaser/core/Group.ts index f112d177..8760fdd4 100644 --- a/Phaser/core/Group.ts +++ b/Phaser/core/Group.ts @@ -174,7 +174,7 @@ module Phaser { * Calls render on all members of this Group who have a status of visible=true and exists=true * You can also call Object.render directly, which will bypass the visible/exists check. */ - public render(camera: Camera) { + public render(renderer:IRenderer, camera: Camera) { if (camera.isHidden(this) == true) { @@ -201,7 +201,7 @@ module Phaser { if (this._member != null && this._member.exists && this._member.visible && camera.isHidden(this._member) == false) { - this._member.render(camera, this._member); + this._member.render.call(renderer, camera, this._member); } } diff --git a/Phaser/gameobjects/IGameObject.ts b/Phaser/gameobjects/IGameObject.ts index 98012456..01e2ceca 100644 --- a/Phaser/gameobjects/IGameObject.ts +++ b/Phaser/gameobjects/IGameObject.ts @@ -9,6 +9,21 @@ module Phaser { */ game: Game; + /** + * x value of the object. + */ + x: number; + + /** + * y value of the object. + */ + y: number; + + /** + * Z-order value of the object. + */ + z: number; + /** * The type of game object. */ @@ -34,11 +49,6 @@ module Phaser { */ visible: bool; - /** - * The position of the Sprite in world and screen coordinates. - */ - position: Phaser.Components.Position; - /** * The texture used to render the Sprite. */ diff --git a/Phaser/gameobjects/Sprite.ts b/Phaser/gameobjects/Sprite.ts index cd327053..e01eee54 100644 --- a/Phaser/gameobjects/Sprite.ts +++ b/Phaser/gameobjects/Sprite.ts @@ -1,7 +1,6 @@ /// /// /// -/// /// /** @@ -39,15 +38,23 @@ module Phaser { this.scrollFactor = new Phaser.Vec2(1, 1); this.scale = new Phaser.Vec2(1, 1); - this.position = new Phaser.Components.Position(this, x, y); + this.x = x; + this.y = y; + this.z = 0; + this.texture = new Phaser.Components.Texture(this, key, game.stage.canvas, game.stage.context); this.width = this.frameBounds.width; this.height = this.frameBounds.height; - this.rotation = this.position.rotation; } + /** + * Rotation angle of this object. + * @type {number} + */ + private _rotation: number = 0; + /** * Reference to the main game object */ @@ -87,11 +94,6 @@ module Phaser { public width: number; public height: number; - /** - * The position of the Sprite in world and screen coordinates. - */ - public position: Phaser.Components.Position; - /** * The texture used to render the Sprite. */ @@ -115,10 +117,48 @@ module Phaser { public scrollFactor: Phaser.Vec2; /** - * The Sprite origin is the point around which scale and rotation transforms take place. + * The Sprite origin is the point around which scale and rotation takes place. */ public origin: Phaser.Vec2; + /** + * x value of the object. + */ + public x: number = 0; + + /** + * y value of the object. + */ + public y: number = 0; + + /** + * z order value of the object. + */ + public z: number = 0; + + /** + * This value is added to the rotation of the Sprite. + * For example if you had a sprite graphic drawn facing straight up then you could set + * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. + * @type {number} + */ + public rotationOffset: number = 0; + + /** + * The rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + */ + public get rotation(): number { + return this._rotation; + } + + /** + * Set the rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + * The value is automatically wrapped to be between 0 and 360. + */ + public set rotation(value: number) { + this._rotation = this.game.math.wrap(value, 360, 0); + } + /** * Pre-update is called right before update() on each object in the game loop. */ @@ -200,50 +240,6 @@ module Phaser { public destroy() { } - /** - * x value of the object. - */ - public get x(): number { - return this.position.world.x; - } - - public set x(value: number) { - this.position.world.x = value; - } - - /** - * y value of the object. - */ - public get y(): number { - return this.position.world.y; - } - - public set y(value: number) { - this.position.world.y = value; - } - - /** - * z value of the object. - */ - public get z(): number { - return this.position.z; - } - - public set z(value: number) { - this.position.z = value; - } - - /** - * rotation value of the object. - */ - public get rotation(): number { - return this.position.rotation; - } - - public set rotation(value: number) { - this.position.rotation = value; - } - } } \ No newline at end of file diff --git a/Phaser/renderers/CanvasRenderer.ts b/Phaser/renderers/CanvasRenderer.ts index ae40419f..cc6b9055 100644 --- a/Phaser/renderers/CanvasRenderer.ts +++ b/Phaser/renderers/CanvasRenderer.ts @@ -16,9 +16,8 @@ module Phaser { */ private _game: Phaser.Game; - private _wibble = 123; - // local rendering related temp vars to help avoid gc spikes with var creation + private _ga: number = 1; private _sx: number = 0; private _sy: number = 0; private _sw: number = 0; @@ -29,6 +28,8 @@ module Phaser { private _dh: number = 0; private _fx: number = 1; private _fy: number = 1; + private _sin: number = 0; + private _cos: number = 1; private _cameraList; private _camera: Camera; @@ -47,7 +48,7 @@ module Phaser { this._camera.preRender(); - this._game.world.group.render(this._camera); + this._game.world.group.render(this, this._camera); this._camera.postRender(); } @@ -67,34 +68,38 @@ module Phaser { return false; } - // Alpha - if (sprite.texture.alpha !== 1) - { - var globalAlpha = sprite.texture.context.globalAlpha; - sprite.texture.context.globalAlpha = sprite.texture.alpha; - } - - this._fx = 1; - this._fy = 1; + // Reset our temp vars + this._ga = -1; this._sx = 0; this._sy = 0; this._sw = sprite.frameBounds.width; this._sh = sprite.frameBounds.height; + this._fx = sprite.scale.x; + this._fy = sprite.scale.y; + this._sin = 0; + this._cos = 1; - if (sprite.texture.flippedX) + // Alpha + if (sprite.texture.alpha !== 1) { - this._fx = -1; + this._ga = sprite.texture.context.globalAlpha; + sprite.texture.context.globalAlpha = sprite.texture.alpha; } + // Sprite Flip X + if (sprite.texture.flippedX) + { + this._fx = -sprite.scale.x; + } + + // Sprite Flip Y if (sprite.texture.flippedY) { - this._fy = -1; + this._fy = -sprite.scale.y; } this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; this._dw = sprite.frameBounds.width; this._dh = sprite.frameBounds.height; @@ -110,147 +115,43 @@ module Phaser { this._dy += this.animations.currentFrame.spriteSourceSizeY; } } - */ - // Apply camera difference + // Apply camera difference - looks like this is already applied? if (sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) { //this._dx -= (camera.worldView.x * this.scrollFactor.x); //this._dy -= (camera.worldView.y * this.scrollFactor.y); } + */ - // Apply origin / alignment - if (sprite.origin.x != 0 || sprite.origin.y != 0) - { - //sprite.origin.x *= sprite.scale.x; - //sprite.origin.y *= sprite.scale.y; - //this._dx += (sprite.origin.x * sprite.scale.x); - //this._dy += (sprite.origin.y * sprite.scale.y); - } - - - // this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function - //console.log(this); - - // no rotation - var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation)); - var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation)); - - var ssx = sprite.scale.x; - var ssy = sprite.scale.y; - - if (sprite.texture.flippedX) - { - //sin = -sin; - ssx = -ssx; - } - - if (sprite.texture.flippedY) - { - //this._dy += this._dh; - ssy = -ssy; - } - - // setTransform(a, b, c, d, e, f); - // a = scale x - // b = skew x - // c = skew y - // d = scale y - // e = translate x - // f = translate y - - sprite.texture.context.save(); - sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy); - - this._dx = -sprite.origin.x; - this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - - // If scaled - if (sprite.scale.x != 1 || sprite.scale.y != 1) - { - // Adjust along x/y based on origin - //console.log('scale adjust 1', this._dx, this._dw); - //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x; - //this._dx += (sprite.origin.x * sprite.scale.x); - //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x); - } - - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; - - - /* // Rotation and Flipped - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) + if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) { + if (sprite.texture.renderRotation == true && (sprite.rotation !== 0 || sprite.rotationOffset !== 0)) + { + this._sin = Math.sin(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + this._cos = Math.cos(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + } + + // setTransform(a, b, c, d, e, f); + // a = scale x + // b = skew x + // c = skew y + // d = scale y + // e = translate x + // f = translate y + sprite.texture.context.save(); - - //if (sprite.texture.flippedX) - //{ - // this._dx += this._dw * sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._dy += this._dh * sprite.scale.y; - //} - - sprite.texture.context.translate(this._dx, this._dy); - - //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2)); - //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y)); - //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y); - //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2)); - - if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0)) - { - // Apply point of rotation here - //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180)); - } - - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.texture.flippedX || sprite.texture.flippedY) - { - //if (sprite.texture.flippedX) - //{ - // this._fx = -sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._fy = -sprite.scale.y; - //} - - sprite.texture.context.scale(this._fx, this._fy); - - } - - //if (sprite.texture.flippedX || sprite.texture.flippedY) - //{ - // sprite.texture.context.scale(this._fx, this._fy); - //} + sprite.texture.context.setTransform(this._cos * this._fx, this._sin * this._fx, -this._sin * this._fy, this._cos * this._fy, this._dx, this._dy); this._dx = -sprite.origin.x; this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - //this._dx = -(this._dw / 2) * sprite.scale.x; - //this._dy = -(this._dh / 2) * sprite.scale.y; - //this._dx = 0; - //this._dy = 0; } else { - if (sprite.origin.x != 0 || sprite.origin.y != 0) - { - //this._dx -= (sprite.origin.x * sprite.scale.x); - //this._dy -= (sprite.origin.y * sprite.scale.y); - } + this._dw = sprite.frameBounds.width * sprite.scale.x; + this._dh = sprite.frameBounds.height * sprite.scale.y; } - */ this._sx = Math.round(this._sx); this._sy = Math.round(this._sy); @@ -261,8 +162,8 @@ module Phaser { this._dw = Math.round(this._dw); this._dh = Math.round(this._dh); - //if (this._texture != null) - //{ + if (sprite.texture.loaded) + { sprite.texture.context.drawImage( sprite.texture.texture, // Source Image this._sx, // Source X (location within the source image) @@ -274,21 +175,18 @@ module Phaser { this._dw, // Destination Width (always same as Source Width unless scaled) this._dh // Destination Height (always same as Source Height unless scaled) ); - //} - //else - //{ - // this.context.fillStyle = this.fillColor; - // this.context.fillRect(this._dx, this._dy, this._dw, this._dh); - //} - - if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - //if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) + } + else { - //this.context.translate(0, 0); - //sprite.texture.context.restore(); + //sprite.texture.context.fillStyle = this.fillColor; + sprite.texture.context.fillStyle = 'rgb(255,255,255)'; + sprite.texture.context.fillRect(this._dx, this._dy, this._dw, this._dh); } - sprite.texture.context.restore(); + if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) + { + sprite.texture.context.restore(); + } //if (this.renderDebug) //{ @@ -296,16 +194,15 @@ module Phaser { //this.collisionMask.render(camera, cameraOffsetX, cameraOffsetY); //} - if (globalAlpha > -1) + if (this._ga > -1) { - sprite.texture.context.globalAlpha = globalAlpha; + sprite.texture.context.globalAlpha = this._ga; } return true; } - } } \ No newline at end of file diff --git a/README.md b/README.md index da0281c2..ed679800 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ V1.0.0 * Added Game.renderer which can be HEADLESS, CANVAS or WEBGL (coming soon) * Added Sprite.render which is a reference to IRenderer.renderSprite, but can be overridden for custom handling. * Refactored QuadTree so it no longer creates any temporary variables in any methods. +* The Sprite Renderer now uses a single setTransform for scale, rotation and translation that respects the Sprite.origin value in all cases. V0.9.6 diff --git a/Tests/phaser.js b/Tests/phaser.js index 026e0121..3d982d13 100644 --- a/Tests/phaser.js +++ b/Tests/phaser.js @@ -2635,55 +2635,6 @@ var Phaser; })(); Phaser.AnimationManager = AnimationManager; })(Phaser || (Phaser = {})); -var Phaser; -(function (Phaser) { - /// - /** - * Phaser - Components - Position - * - * Sprite position, both world and screen, and rotation values and methods. - */ - (function (Components) { - var Position = (function () { - function Position(parent, x, y) { - /** - * Rotation angle of this object. - * @type {number} - */ - this._rotation = 0; - /** - * Z-order value of the object. - */ - this.z = 0; - /** - * This value is added to the rotation of the Sprite. - * For example if you had a sprite graphic drawn facing straight up then you could set - * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. - * @type {number} - */ - this.rotationOffset = 0; - this._sprite = parent; - this.world = new Phaser.Vec2(x, y); - this.screen = new Phaser.Vec2(x, y); - this.offset = new Phaser.Vec2(0, 0); - this.midpoint = new Phaser.Vec2(0, 0); - } - Object.defineProperty(Position.prototype, "rotation", { - get: function () { - return this._rotation; - }, - set: function (value) { - this._rotation = this._sprite.game.math.wrap(value, 360, 0); - }, - enumerable: true, - configurable: true - }); - return Position; - })(); - Components.Position = Position; - })(Phaser.Components || (Phaser.Components = {})); - var Components = Phaser.Components; -})(Phaser || (Phaser = {})); /// /// /// @@ -3743,6 +3694,11 @@ var Phaser; */ this._dynamicTexture = null; /** + * The status of the texture image. + * @type {boolean} + */ + this.loaded = false; + /** * Controls if the Sprite is rendered rotated or not. * If renderRotation is false then the object can still rotate but it will never be rendered rotated. * @type {boolean} @@ -3784,6 +3740,7 @@ var Phaser; this._imageTexture = image; this.texture = this._imageTexture; } + this.loaded = true; return this._sprite; }; Texture.prototype.loadImage = /** @@ -3866,7 +3823,6 @@ var Phaser; /// /// /// -/// /// /** * Phaser - Sprite @@ -3891,6 +3847,30 @@ var Phaser; if (typeof key === "undefined") { key = null; } if (typeof width === "undefined") { width = 16; } if (typeof height === "undefined") { height = 16; } + /** + * Rotation angle of this object. + * @type {number} + */ + this._rotation = 0; + /** + * x value of the object. + */ + this.x = 0; + /** + * y value of the object. + */ + this.y = 0; + /** + * z order value of the object. + */ + this.z = 0; + /** + * This value is added to the rotation of the Sprite. + * For example if you had a sprite graphic drawn facing straight up then you could set + * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. + * @type {number} + */ + this.rotationOffset = 0; this.game = game; this.type = Phaser.Types.SPRITE; this.render = game.renderer.renderSprite; @@ -3902,12 +3882,30 @@ var Phaser; this.origin = new Phaser.Vec2(0, 0); this.scrollFactor = new Phaser.Vec2(1, 1); this.scale = new Phaser.Vec2(1, 1); - this.position = new Phaser.Components.Position(this, x, y); + this.x = x; + this.y = y; + this.z = 0; this.texture = new Phaser.Components.Texture(this, key, game.stage.canvas, game.stage.context); this.width = this.frameBounds.width; this.height = this.frameBounds.height; - this.rotation = this.position.rotation; } + Object.defineProperty(Sprite.prototype, "rotation", { + get: /** + * The rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + */ + function () { + return this._rotation; + }, + set: /** + * Set the rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + * The value is automatically wrapped to be between 0 and 360. + */ + function (value) { + this._rotation = this.game.math.wrap(value, 360, 0); + }, + enumerable: true, + configurable: true + }); Sprite.prototype.preUpdate = /** * Pre-update is called right before update() on each object in the game loop. */ @@ -3980,58 +3978,6 @@ var Phaser; */ function () { }; - Object.defineProperty(Sprite.prototype, "x", { - get: /** - * x value of the object. - */ - function () { - return this.position.world.x; - }, - set: function (value) { - this.position.world.x = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "y", { - get: /** - * y value of the object. - */ - function () { - return this.position.world.y; - }, - set: function (value) { - this.position.world.y = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "z", { - get: /** - * z value of the object. - */ - function () { - return this.position.z; - }, - set: function (value) { - this.position.z = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "rotation", { - get: /** - * rotation value of the object. - */ - function () { - return this.position.rotation; - }, - set: function (value) { - this.position.rotation = value; - }, - enumerable: true, - configurable: true - }); return Sprite; })(); Phaser.Sprite = Sprite; @@ -5606,7 +5552,7 @@ var Phaser; * Calls render on all members of this Group who have a status of visible=true and exists=true * You can also call Object.render directly, which will bypass the visible/exists check. */ - function (camera) { + function (renderer, camera) { if(camera.isHidden(this) == true) { return; } @@ -5622,7 +5568,7 @@ var Phaser; while(this._i < this.length) { this._member = this.members[this._i++]; if(this._member != null && this._member.exists && this._member.visible && camera.isHidden(this._member) == false) { - this._member.render(camera, this._member); + this._member.render.call(renderer, camera, this._member); } } if(this.alpha > 0) { @@ -10366,8 +10312,8 @@ var Phaser; (function (Phaser) { var CanvasRenderer = (function () { function CanvasRenderer(game) { - this._wibble = 123; // local rendering related temp vars to help avoid gc spikes with var creation + this._ga = 1; this._sx = 0; this._sy = 0; this._sw = 0; @@ -10378,6 +10324,8 @@ var Phaser; this._dh = 0; this._fx = 1; this._fy = 1; + this._sin = 0; + this._cos = 1; this._game = game; } CanvasRenderer.prototype.render = function () { @@ -10387,7 +10335,7 @@ var Phaser; for(var c = 0; c < this._cameraList.length; c++) { this._camera = this._cameraList[c]; this._camera.preRender(); - this._game.world.group.render(this._camera); + this._game.world.group.render(this, this._camera); this._camera.postRender(); } }; @@ -10401,27 +10349,31 @@ var Phaser; if(sprite.scale.x == 0 || sprite.scale.y == 0 || sprite.texture.alpha < 0.1) { return false; } - // Alpha - if(sprite.texture.alpha !== 1) { - var globalAlpha = sprite.texture.context.globalAlpha; - sprite.texture.context.globalAlpha = sprite.texture.alpha; - } - this._fx = 1; - this._fy = 1; + // Reset our temp vars + this._ga = -1; this._sx = 0; this._sy = 0; this._sw = sprite.frameBounds.width; this._sh = sprite.frameBounds.height; - if(sprite.texture.flippedX) { - this._fx = -1; + this._fx = sprite.scale.x; + this._fy = sprite.scale.y; + this._sin = 0; + this._cos = 1; + // Alpha + if(sprite.texture.alpha !== 1) { + this._ga = sprite.texture.context.globalAlpha; + sprite.texture.context.globalAlpha = sprite.texture.alpha; } + // Sprite Flip X + if(sprite.texture.flippedX) { + this._fx = -sprite.scale.x; + } + // Sprite Flip Y if(sprite.texture.flippedY) { - this._fy = -1; + this._fy = -sprite.scale.y; } this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; this._dw = sprite.frameBounds.width; this._dh = sprite.frameBounds.height; /* @@ -10436,127 +10388,35 @@ var Phaser; this._dy += this.animations.currentFrame.spriteSourceSizeY; } } + + // Apply camera difference - looks like this is already applied? + if (sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) + { + //this._dx -= (camera.worldView.x * this.scrollFactor.x); + //this._dy -= (camera.worldView.y * this.scrollFactor.y); + } */ - // Apply camera difference - if(sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) { - //this._dx -= (camera.worldView.x * this.scrollFactor.x); - //this._dy -= (camera.worldView.y * this.scrollFactor.y); - } - // Apply origin / alignment - if(sprite.origin.x != 0 || sprite.origin.y != 0) { - //sprite.origin.x *= sprite.scale.x; - //sprite.origin.y *= sprite.scale.y; - //this._dx += (sprite.origin.x * sprite.scale.x); - //this._dy += (sprite.origin.y * sprite.scale.y); - } - // this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function - //console.log(this); - // no rotation - var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation)); - var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation)); - var ssx = sprite.scale.x; - var ssy = sprite.scale.y; - if(sprite.texture.flippedX) { - //sin = -sin; - ssx = -ssx; - } - if(sprite.texture.flippedY) { - //this._dy += this._dh; - ssy = -ssy; - } - // setTransform(a, b, c, d, e, f); - // a = scale x - // b = skew x - // c = skew y - // d = scale y - // e = translate x - // f = translate y - sprite.texture.context.save(); - sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy); - this._dx = -sprite.origin.x; - this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - // If scaled - if(sprite.scale.x != 1 || sprite.scale.y != 1) { - // Adjust along x/y based on origin - //console.log('scale adjust 1', this._dx, this._dw); - //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x; - //this._dx += (sprite.origin.x * sprite.scale.x); - //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x); - } - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; - /* // Rotation and Flipped - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - { - sprite.texture.context.save(); - - //if (sprite.texture.flippedX) - //{ - // this._dx += this._dw * sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._dy += this._dh * sprite.scale.y; - //} - - sprite.texture.context.translate(this._dx, this._dy); - - //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2)); - //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y)); - //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y); - //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2)); - - if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0)) - { - // Apply point of rotation here - //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180)); + if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) { + if(sprite.texture.renderRotation == true && (sprite.rotation !== 0 || sprite.rotationOffset !== 0)) { + this._sin = Math.sin(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + this._cos = Math.cos(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + } + // setTransform(a, b, c, d, e, f); + // a = scale x + // b = skew x + // c = skew y + // d = scale y + // e = translate x + // f = translate y + sprite.texture.context.save(); + sprite.texture.context.setTransform(this._cos * this._fx, this._sin * this._fx, -this._sin * this._fy, this._cos * this._fy, this._dx, this._dy); + this._dx = -sprite.origin.x; + this._dy = -sprite.origin.y; + } else { + this._dw = sprite.frameBounds.width * sprite.scale.x; + this._dh = sprite.frameBounds.height * sprite.scale.y; } - - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.texture.flippedX || sprite.texture.flippedY) - { - //if (sprite.texture.flippedX) - //{ - // this._fx = -sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._fy = -sprite.scale.y; - //} - - sprite.texture.context.scale(this._fx, this._fy); - - } - - //if (sprite.texture.flippedX || sprite.texture.flippedY) - //{ - // sprite.texture.context.scale(this._fx, this._fy); - //} - - this._dx = -sprite.origin.x; - this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - //this._dx = -(this._dw / 2) * sprite.scale.x; - //this._dy = -(this._dh / 2) * sprite.scale.y; - //this._dx = 0; - //this._dy = 0; - } - else - { - if (sprite.origin.x != 0 || sprite.origin.y != 0) - { - //this._dx -= (sprite.origin.x * sprite.scale.x); - //this._dy -= (sprite.origin.y * sprite.scale.y); - } - } - */ this._sx = Math.round(this._sx); this._sy = Math.round(this._sy); this._sw = Math.round(this._sw); @@ -10565,37 +10425,32 @@ var Phaser; this._dy = Math.round(this._dy); this._dw = Math.round(this._dw); this._dh = Math.round(this._dh); - //if (this._texture != null) - //{ - sprite.texture.context.drawImage(sprite.texture.texture, // Source Image - this._sx, // Source X (location within the source image) - this._sy, // Source Y - this._sw, // Source Width - this._sh, // Source Height - this._dx, // Destination X (where on the canvas it'll be drawn) - this._dy, // Destination Y - this._dw, // Destination Width (always same as Source Width unless scaled) - this._dh); - // Destination Height (always same as Source Height unless scaled) - //} - //else - //{ - // this.context.fillStyle = this.fillColor; - // this.context.fillRect(this._dx, this._dy, this._dw, this._dh); - //} - if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - { - //this.context.translate(0, 0); - //sprite.texture.context.restore(); - } - sprite.texture.context.restore(); + if(sprite.texture.loaded) { + sprite.texture.context.drawImage(sprite.texture.texture, // Source Image + this._sx, // Source X (location within the source image) + this._sy, // Source Y + this._sw, // Source Width + this._sh, // Source Height + this._dx, // Destination X (where on the canvas it'll be drawn) + this._dy, // Destination Y + this._dw, // Destination Width (always same as Source Width unless scaled) + this._dh); + // Destination Height (always same as Source Height unless scaled) + } else { + //sprite.texture.context.fillStyle = this.fillColor; + sprite.texture.context.fillStyle = 'rgb(255,255,255)'; + sprite.texture.context.fillRect(this._dx, this._dy, this._dw, this._dh); + } + if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) { + sprite.texture.context.restore(); + } //if (this.renderDebug) //{ // this.renderBounds(camera, cameraOffsetX, cameraOffsetY); //this.collisionMask.render(camera, cameraOffsetX, cameraOffsetY); //} - if(globalAlpha > -1) { - sprite.texture.context.globalAlpha = globalAlpha; + if(this._ga > -1) { + sprite.texture.context.globalAlpha = this._ga; } return true; }; diff --git a/Tests/sprites/scale origin 1.js b/Tests/sprites/scale origin 1.js index 7123cfe9..ee345abf 100644 --- a/Tests/sprites/scale origin 1.js +++ b/Tests/sprites/scale origin 1.js @@ -20,8 +20,8 @@ //fuji.origin.setTo(260, 100); fuji.scale.x = 2; fuji.scale.y = 0.5; - //fuji.position.rotation = 45; - game.add.tween(fuji.position).to({ + //fuji.rotation = 45; + game.add.tween(fuji).to({ rotation: 360 }, 3000).start(); // Create our tween diff --git a/Tests/sprites/scale origin 1.ts b/Tests/sprites/scale origin 1.ts index ba83efe1..17a8695e 100644 --- a/Tests/sprites/scale origin 1.ts +++ b/Tests/sprites/scale origin 1.ts @@ -31,8 +31,8 @@ //fuji.origin.setTo(260, 100); fuji.scale.x = 2; fuji.scale.y = 0.5; - //fuji.position.rotation = 45; - game.add.tween(fuji.position).to({ rotation: 360 }, 3000).start(); + //fuji.rotation = 45; + game.add.tween(fuji).to({ rotation: 360 }, 3000).start(); // Create our tween //tween = game.add.tween(fuji.scale); diff --git a/Tests/sprites/scale sprite 5.js b/Tests/sprites/scale sprite 5.js index 312eae8b..e7dbeaf3 100644 --- a/Tests/sprites/scale sprite 5.js +++ b/Tests/sprites/scale sprite 5.js @@ -11,30 +11,16 @@ function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - //fuji = game.add.sprite(game.stage.centerX - 160, game.stage.centerY - 100, 'fuji'); - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // sets origin to the center of the sprite (half the width and half the height) fuji.origin.setTo(160, 100); - fuji.scale.x = 2; - fuji.scale.y = 2; - //fuji.texture.flippedX = true; - fuji.texture.flippedY = true; - //fuji.rotation = 45; - game.add.tween(fuji.scale).to({ - x: 0 - }, 3000).start(); - game.add.tween(fuji.position).to({ - rotation: 360 - }, 3000).start(); - // We set the origin of the Sprite to be the center so that the scaling happens around the center, not the left-hand side - //fuji.origin.setTo(160, 100); // We'll tween the scale down to zero (which will make the sprite invisible) and then flip it // The end result should look like turning over a card // Create our tween - //tween = game.add.tween(fuji.scale); + tween = game.add.tween(fuji.scale); // Start it going - //scaleLeft(); - } + scaleLeft(); + } function scaleLeft() { tween.clear(); tween.to({ diff --git a/Tests/sprites/scale sprite 5.ts b/Tests/sprites/scale sprite 5.ts index d43cd2df..debd8c34 100644 --- a/Tests/sprites/scale sprite 5.ts +++ b/Tests/sprites/scale sprite 5.ts @@ -21,32 +21,19 @@ // Here we'll assign the new sprite to the local fuji variable - //fuji = game.add.sprite(game.stage.centerX - 160, game.stage.centerY - 100, 'fuji'); - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // sets origin to the center of the sprite (half the width and half the height) fuji.origin.setTo(160, 100); - fuji.scale.x = 2; - fuji.scale.y = 2; - //fuji.texture.flippedX = true; - fuji.texture.flippedY = true; - //fuji.rotation = 45; - - //game.add.tween(fuji.scale).to({ x: 0 }, 3000).start(); - game.add.tween(fuji.position).to({ rotation: 360 }, 3000).start(); - - // We set the origin of the Sprite to be the center so that the scaling happens around the center, not the left-hand side - //fuji.origin.setTo(160, 100); - // We'll tween the scale down to zero (which will make the sprite invisible) and then flip it // The end result should look like turning over a card // Create our tween - //tween = game.add.tween(fuji.scale); + tween = game.add.tween(fuji.scale); // Start it going - //scaleLeft(); + scaleLeft(); } diff --git a/build/phaser.d.ts b/build/phaser.d.ts index d4aa8e4e..ab0af752 100644 --- a/build/phaser.d.ts +++ b/build/phaser.d.ts @@ -1503,41 +1503,6 @@ module Phaser { } } /** -* Phaser - Components - Position -* -* Sprite position, both world and screen, and rotation values and methods. -*/ -module Phaser.Components { - class Position { - constructor(parent: Sprite, x: number, y: number); - /** - * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite. - */ - private _sprite; - public world: Vec2; - public screen: Vec2; - public offset: Vec2; - public midpoint: Vec2; - /** - * Rotation angle of this object. - * @type {number} - */ - private _rotation; - /** - * Z-order value of the object. - */ - public z: number; - /** - * This value is added to the rotation of the Sprite. - * For example if you had a sprite graphic drawn facing straight up then you could set - * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. - * @type {number} - */ - public rotationOffset: number; - public rotation : number; - } -} -/** * Phaser - RectangleUtils * * A collection of methods useful for manipulating and comparing Rectangle objects. @@ -1678,6 +1643,18 @@ module Phaser { */ game: Game; /** + * x value of the object. + */ + x: number; + /** + * y value of the object. + */ + y: number; + /** + * Z-order value of the object. + */ + z: number; + /** * The type of game object. */ type: number; @@ -1698,10 +1675,6 @@ module Phaser { */ visible: bool; /** - * The position of the Sprite in world and screen coordinates. - */ - position: Components.Position; - /** * The texture used to render the Sprite. */ texture: Components.Texture; @@ -2115,6 +2088,11 @@ module Phaser.Components { */ private _dynamicTexture; /** + * The status of the texture image. + * @type {boolean} + */ + public loaded: bool; + /** * Opacity of the Sprite texture where 1 is opaque and 0 is fully transparent. * @type {number} */ @@ -2202,6 +2180,11 @@ module Phaser { */ constructor(game: Game, x?: number, y?: number, key?: string, width?: number, height?: number); /** + * Rotation angle of this object. + * @type {number} + */ + private _rotation; + /** * Reference to the main game object */ public game: Game; @@ -2232,10 +2215,6 @@ module Phaser { public width: number; public height: number; /** - * The position of the Sprite in world and screen coordinates. - */ - public position: Components.Position; - /** * The texture used to render the Sprite. */ public texture: Components.Texture; @@ -2254,10 +2233,37 @@ module Phaser { */ public scrollFactor: Vec2; /** - * The Sprite origin is the point around which scale and rotation transforms take place. + * The Sprite origin is the point around which scale and rotation takes place. */ public origin: Vec2; /** + * x value of the object. + */ + public x: number; + /** + * y value of the object. + */ + public y: number; + /** + * z order value of the object. + */ + public z: number; + /** + * This value is added to the rotation of the Sprite. + * For example if you had a sprite graphic drawn facing straight up then you could set + * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. + * @type {number} + */ + public rotationOffset: number; + /** + * The rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + */ + /** + * Set the rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + * The value is automatically wrapped to be between 0 and 360. + */ + public rotation : number; + /** * Pre-update is called right before update() on each object in the game loop. */ public preUpdate(): void; @@ -2273,22 +2279,6 @@ module Phaser { * Clean up memory. */ public destroy(): void; - /** - * x value of the object. - */ - public x : number; - /** - * y value of the object. - */ - public y : number; - /** - * z value of the object. - */ - public z : number; - /** - * rotation value of the object. - */ - public rotation : number; } } /** @@ -3096,7 +3086,7 @@ module Phaser { * Calls render on all members of this Group who have a status of visible=true and exists=true * You can also call Object.render directly, which will bypass the visible/exists check. */ - public render(camera: Camera): void; + public render(renderer: IRenderer, camera: Camera): void; /** * The maximum capacity of this group. Default is 0, meaning no max capacity, and the group can just grow. */ @@ -5811,7 +5801,7 @@ module Phaser { * The essential reference to the main game object */ private _game; - private _wibble; + private _ga; private _sx; private _sy; private _sw; @@ -5822,6 +5812,8 @@ module Phaser { private _dh; private _fx; private _fy; + private _sin; + private _cos; private _cameraList; private _camera; private _groupLength; diff --git a/build/phaser.js b/build/phaser.js index 026e0121..3d982d13 100644 --- a/build/phaser.js +++ b/build/phaser.js @@ -2635,55 +2635,6 @@ var Phaser; })(); Phaser.AnimationManager = AnimationManager; })(Phaser || (Phaser = {})); -var Phaser; -(function (Phaser) { - /// - /** - * Phaser - Components - Position - * - * Sprite position, both world and screen, and rotation values and methods. - */ - (function (Components) { - var Position = (function () { - function Position(parent, x, y) { - /** - * Rotation angle of this object. - * @type {number} - */ - this._rotation = 0; - /** - * Z-order value of the object. - */ - this.z = 0; - /** - * This value is added to the rotation of the Sprite. - * For example if you had a sprite graphic drawn facing straight up then you could set - * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. - * @type {number} - */ - this.rotationOffset = 0; - this._sprite = parent; - this.world = new Phaser.Vec2(x, y); - this.screen = new Phaser.Vec2(x, y); - this.offset = new Phaser.Vec2(0, 0); - this.midpoint = new Phaser.Vec2(0, 0); - } - Object.defineProperty(Position.prototype, "rotation", { - get: function () { - return this._rotation; - }, - set: function (value) { - this._rotation = this._sprite.game.math.wrap(value, 360, 0); - }, - enumerable: true, - configurable: true - }); - return Position; - })(); - Components.Position = Position; - })(Phaser.Components || (Phaser.Components = {})); - var Components = Phaser.Components; -})(Phaser || (Phaser = {})); /// /// /// @@ -3743,6 +3694,11 @@ var Phaser; */ this._dynamicTexture = null; /** + * The status of the texture image. + * @type {boolean} + */ + this.loaded = false; + /** * Controls if the Sprite is rendered rotated or not. * If renderRotation is false then the object can still rotate but it will never be rendered rotated. * @type {boolean} @@ -3784,6 +3740,7 @@ var Phaser; this._imageTexture = image; this.texture = this._imageTexture; } + this.loaded = true; return this._sprite; }; Texture.prototype.loadImage = /** @@ -3866,7 +3823,6 @@ var Phaser; /// /// /// -/// /// /** * Phaser - Sprite @@ -3891,6 +3847,30 @@ var Phaser; if (typeof key === "undefined") { key = null; } if (typeof width === "undefined") { width = 16; } if (typeof height === "undefined") { height = 16; } + /** + * Rotation angle of this object. + * @type {number} + */ + this._rotation = 0; + /** + * x value of the object. + */ + this.x = 0; + /** + * y value of the object. + */ + this.y = 0; + /** + * z order value of the object. + */ + this.z = 0; + /** + * This value is added to the rotation of the Sprite. + * For example if you had a sprite graphic drawn facing straight up then you could set + * rotationOffset to 90 and it would correspond correctly with Phasers right-handed coordinate system. + * @type {number} + */ + this.rotationOffset = 0; this.game = game; this.type = Phaser.Types.SPRITE; this.render = game.renderer.renderSprite; @@ -3902,12 +3882,30 @@ var Phaser; this.origin = new Phaser.Vec2(0, 0); this.scrollFactor = new Phaser.Vec2(1, 1); this.scale = new Phaser.Vec2(1, 1); - this.position = new Phaser.Components.Position(this, x, y); + this.x = x; + this.y = y; + this.z = 0; this.texture = new Phaser.Components.Texture(this, key, game.stage.canvas, game.stage.context); this.width = this.frameBounds.width; this.height = this.frameBounds.height; - this.rotation = this.position.rotation; } + Object.defineProperty(Sprite.prototype, "rotation", { + get: /** + * The rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + */ + function () { + return this._rotation; + }, + set: /** + * Set the rotation of the sprite in degrees. Phaser uses a right-handed coordinate system, where 0 points to the right. + * The value is automatically wrapped to be between 0 and 360. + */ + function (value) { + this._rotation = this.game.math.wrap(value, 360, 0); + }, + enumerable: true, + configurable: true + }); Sprite.prototype.preUpdate = /** * Pre-update is called right before update() on each object in the game loop. */ @@ -3980,58 +3978,6 @@ var Phaser; */ function () { }; - Object.defineProperty(Sprite.prototype, "x", { - get: /** - * x value of the object. - */ - function () { - return this.position.world.x; - }, - set: function (value) { - this.position.world.x = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "y", { - get: /** - * y value of the object. - */ - function () { - return this.position.world.y; - }, - set: function (value) { - this.position.world.y = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "z", { - get: /** - * z value of the object. - */ - function () { - return this.position.z; - }, - set: function (value) { - this.position.z = value; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(Sprite.prototype, "rotation", { - get: /** - * rotation value of the object. - */ - function () { - return this.position.rotation; - }, - set: function (value) { - this.position.rotation = value; - }, - enumerable: true, - configurable: true - }); return Sprite; })(); Phaser.Sprite = Sprite; @@ -5606,7 +5552,7 @@ var Phaser; * Calls render on all members of this Group who have a status of visible=true and exists=true * You can also call Object.render directly, which will bypass the visible/exists check. */ - function (camera) { + function (renderer, camera) { if(camera.isHidden(this) == true) { return; } @@ -5622,7 +5568,7 @@ var Phaser; while(this._i < this.length) { this._member = this.members[this._i++]; if(this._member != null && this._member.exists && this._member.visible && camera.isHidden(this._member) == false) { - this._member.render(camera, this._member); + this._member.render.call(renderer, camera, this._member); } } if(this.alpha > 0) { @@ -10366,8 +10312,8 @@ var Phaser; (function (Phaser) { var CanvasRenderer = (function () { function CanvasRenderer(game) { - this._wibble = 123; // local rendering related temp vars to help avoid gc spikes with var creation + this._ga = 1; this._sx = 0; this._sy = 0; this._sw = 0; @@ -10378,6 +10324,8 @@ var Phaser; this._dh = 0; this._fx = 1; this._fy = 1; + this._sin = 0; + this._cos = 1; this._game = game; } CanvasRenderer.prototype.render = function () { @@ -10387,7 +10335,7 @@ var Phaser; for(var c = 0; c < this._cameraList.length; c++) { this._camera = this._cameraList[c]; this._camera.preRender(); - this._game.world.group.render(this._camera); + this._game.world.group.render(this, this._camera); this._camera.postRender(); } }; @@ -10401,27 +10349,31 @@ var Phaser; if(sprite.scale.x == 0 || sprite.scale.y == 0 || sprite.texture.alpha < 0.1) { return false; } - // Alpha - if(sprite.texture.alpha !== 1) { - var globalAlpha = sprite.texture.context.globalAlpha; - sprite.texture.context.globalAlpha = sprite.texture.alpha; - } - this._fx = 1; - this._fy = 1; + // Reset our temp vars + this._ga = -1; this._sx = 0; this._sy = 0; this._sw = sprite.frameBounds.width; this._sh = sprite.frameBounds.height; - if(sprite.texture.flippedX) { - this._fx = -1; + this._fx = sprite.scale.x; + this._fy = sprite.scale.y; + this._sin = 0; + this._cos = 1; + // Alpha + if(sprite.texture.alpha !== 1) { + this._ga = sprite.texture.context.globalAlpha; + sprite.texture.context.globalAlpha = sprite.texture.alpha; } + // Sprite Flip X + if(sprite.texture.flippedX) { + this._fx = -sprite.scale.x; + } + // Sprite Flip Y if(sprite.texture.flippedY) { - this._fy = -1; + this._fy = -sprite.scale.y; } this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; this._dw = sprite.frameBounds.width; this._dh = sprite.frameBounds.height; /* @@ -10436,127 +10388,35 @@ var Phaser; this._dy += this.animations.currentFrame.spriteSourceSizeY; } } + + // Apply camera difference - looks like this is already applied? + if (sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) + { + //this._dx -= (camera.worldView.x * this.scrollFactor.x); + //this._dy -= (camera.worldView.y * this.scrollFactor.y); + } */ - // Apply camera difference - if(sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) { - //this._dx -= (camera.worldView.x * this.scrollFactor.x); - //this._dy -= (camera.worldView.y * this.scrollFactor.y); - } - // Apply origin / alignment - if(sprite.origin.x != 0 || sprite.origin.y != 0) { - //sprite.origin.x *= sprite.scale.x; - //sprite.origin.y *= sprite.scale.y; - //this._dx += (sprite.origin.x * sprite.scale.x); - //this._dy += (sprite.origin.y * sprite.scale.y); - } - // this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function - //console.log(this); - // no rotation - var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation)); - var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation)); - var ssx = sprite.scale.x; - var ssy = sprite.scale.y; - if(sprite.texture.flippedX) { - //sin = -sin; - ssx = -ssx; - } - if(sprite.texture.flippedY) { - //this._dy += this._dh; - ssy = -ssy; - } - // setTransform(a, b, c, d, e, f); - // a = scale x - // b = skew x - // c = skew y - // d = scale y - // e = translate x - // f = translate y - sprite.texture.context.save(); - sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy); - this._dx = -sprite.origin.x; - this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - // If scaled - if(sprite.scale.x != 1 || sprite.scale.y != 1) { - // Adjust along x/y based on origin - //console.log('scale adjust 1', this._dx, this._dw); - //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x; - //this._dx += (sprite.origin.x * sprite.scale.x); - //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x); - } - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; - /* // Rotation and Flipped - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - { - sprite.texture.context.save(); - - //if (sprite.texture.flippedX) - //{ - // this._dx += this._dw * sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._dy += this._dh * sprite.scale.y; - //} - - sprite.texture.context.translate(this._dx, this._dy); - - //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2)); - //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y)); - //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y); - //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2)); - - if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0)) - { - // Apply point of rotation here - //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180)); + if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) { + if(sprite.texture.renderRotation == true && (sprite.rotation !== 0 || sprite.rotationOffset !== 0)) { + this._sin = Math.sin(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + this._cos = Math.cos(sprite.game.math.degreesToRadians(sprite.rotationOffset + sprite.rotation)); + } + // setTransform(a, b, c, d, e, f); + // a = scale x + // b = skew x + // c = skew y + // d = scale y + // e = translate x + // f = translate y + sprite.texture.context.save(); + sprite.texture.context.setTransform(this._cos * this._fx, this._sin * this._fx, -this._sin * this._fy, this._cos * this._fy, this._dx, this._dy); + this._dx = -sprite.origin.x; + this._dy = -sprite.origin.y; + } else { + this._dw = sprite.frameBounds.width * sprite.scale.x; + this._dh = sprite.frameBounds.height * sprite.scale.y; } - - //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY) - if (sprite.texture.flippedX || sprite.texture.flippedY) - { - //if (sprite.texture.flippedX) - //{ - // this._fx = -sprite.scale.x; - //} - - //if (sprite.texture.flippedY) - //{ - // this._fy = -sprite.scale.y; - //} - - sprite.texture.context.scale(this._fx, this._fy); - - } - - //if (sprite.texture.flippedX || sprite.texture.flippedY) - //{ - // sprite.texture.context.scale(this._fx, this._fy); - //} - - this._dx = -sprite.origin.x; - this._dy = -sprite.origin.y; - //this._dx = -(sprite.origin.x * sprite.scale.x); - //this._dy = -(sprite.origin.y * sprite.scale.y); - //this._dx = -(this._dw / 2) * sprite.scale.x; - //this._dy = -(this._dh / 2) * sprite.scale.y; - //this._dx = 0; - //this._dy = 0; - } - else - { - if (sprite.origin.x != 0 || sprite.origin.y != 0) - { - //this._dx -= (sprite.origin.x * sprite.scale.x); - //this._dy -= (sprite.origin.y * sprite.scale.y); - } - } - */ this._sx = Math.round(this._sx); this._sy = Math.round(this._sy); this._sw = Math.round(this._sw); @@ -10565,37 +10425,32 @@ var Phaser; this._dy = Math.round(this._dy); this._dw = Math.round(this._dw); this._dh = Math.round(this._dh); - //if (this._texture != null) - //{ - sprite.texture.context.drawImage(sprite.texture.texture, // Source Image - this._sx, // Source X (location within the source image) - this._sy, // Source Y - this._sw, // Source Width - this._sh, // Source Height - this._dx, // Destination X (where on the canvas it'll be drawn) - this._dy, // Destination Y - this._dw, // Destination Width (always same as Source Width unless scaled) - this._dh); - // Destination Height (always same as Source Height unless scaled) - //} - //else - //{ - // this.context.fillStyle = this.fillColor; - // this.context.fillRect(this._dx, this._dy, this._dw, this._dh); - //} - if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) - { - //this.context.translate(0, 0); - //sprite.texture.context.restore(); - } - sprite.texture.context.restore(); + if(sprite.texture.loaded) { + sprite.texture.context.drawImage(sprite.texture.texture, // Source Image + this._sx, // Source X (location within the source image) + this._sy, // Source Y + this._sw, // Source Width + this._sh, // Source Height + this._dx, // Destination X (where on the canvas it'll be drawn) + this._dy, // Destination Y + this._dw, // Destination Width (always same as Source Width unless scaled) + this._dh); + // Destination Height (always same as Source Height unless scaled) + } else { + //sprite.texture.context.fillStyle = this.fillColor; + sprite.texture.context.fillStyle = 'rgb(255,255,255)'; + sprite.texture.context.fillRect(this._dx, this._dy, this._dw, this._dh); + } + if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.rotation != 0 || sprite.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY) { + sprite.texture.context.restore(); + } //if (this.renderDebug) //{ // this.renderBounds(camera, cameraOffsetX, cameraOffsetY); //this.collisionMask.render(camera, cameraOffsetX, cameraOffsetY); //} - if(globalAlpha > -1) { - sprite.texture.context.globalAlpha = globalAlpha; + if(this._ga > -1) { + sprite.texture.context.globalAlpha = this._ga; } return true; };