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;
};