Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 07:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Scale tweaks

Browse source
This commit is contained in:
Richard Davey 2013-05-29 12:24:25 +01:00
parent 2a26257caa
commit b1d836dfaf
15 changed files with 433 additions and 915 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Phaser/Phaser.csproj
View file

@ -64,14 +64,10 @@
<TypeScriptCompile Include="core\Rectangle.ts" />
<TypeScriptCompile Include="core\Point.ts" />
<TypeScriptCompile Include="components\sprite\Texture.ts" />
<TypeScriptCompile Include="components\sprite\Position.ts" />
<TypeScriptCompile Include="components\camera\CameraFX.ts" />
<Content Include="components\camera\CameraFX.js">
<DependentUpon>CameraFX.ts</DependentUpon>
</Content>
<Content Include="components\sprite\Position.js">
<DependentUpon>Position.ts</DependentUpon>
</Content>
<Content Include="components\sprite\Texture.js">
<DependentUpon>Texture.ts</DependentUpon>
</Content>

65
Phaser/components/sprite/Position.ts
View file

@ -1,65 +0,0 @@
/// <reference path="../../core/Vec2.ts" />
/**
* 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);
}
}
}

8
Phaser/components/sprite/Texture.ts
View file

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

4
Phaser/core/Group.ts
View file

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

20
Phaser/gameobjects/IGameObject.ts
View file

@ -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.
*/

102
Phaser/gameobjects/Sprite.ts
View file

@ -1,7 +1,6 @@
/// <reference path="../Game.ts" />
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Position.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/**
@ -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;
}
}
}

213
Phaser/renderers/CanvasRenderer.ts
View file

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

1
README.md
View file

@ -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

383
Tests/phaser.js
View file

@ -2635,55 +2635,6 @@ var Phaser;
})();
Phaser.AnimationManager = AnimationManager;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
/// <reference path="../../core/Vec2.ts" />
/**
* 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 = {}));
/// <reference path="../Game.ts" />
/// <reference path="../core/Point.ts" />
/// <reference path="../core/Rectangle.ts" />
@ -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;
/// <reference path="../Game.ts" />
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Position.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/**
* 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;
};

4
Tests/sprites/scale origin 1.js
View file

@ -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

4
Tests/sprites/scale origin 1.ts
View file

@ -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);

22
Tests/sprites/scale sprite 5.js
View file

@ -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({

19
Tests/sprites/scale sprite 5.ts
View file

@ -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();
}

116
build/phaser.d.ts vendored
View file

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

383
build/phaser.js
View file

@ -2635,55 +2635,6 @@ var Phaser;
})();
Phaser.AnimationManager = AnimationManager;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
/// <reference path="../../core/Vec2.ts" />
/**
* 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 = {}));
/// <reference path="../Game.ts" />
/// <reference path="../core/Point.ts" />
/// <reference path="../core/Rectangle.ts" />
@ -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;
/// <reference path="../Game.ts" />
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Position.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/**
* 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;
};