wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-06-30 16:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Working sprite bounds / vertices regardless of scale or rotation

Browse Source
This commit is contained in:
Richard Davey
2013-06-11 21:30:15 +01:00
parent 1f8c809f53
commit c5f6817c4c
21 changed files with 1718 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Phaser/components/Transform.ts
+178 -29
View File
@@ -27,44 +27,135 @@ module Phaser.Components {
}
private _sin: number;
private _cos: number;
private _rotation: number;
private _cachedSin: number;
private _cachedCos: number;
private _cachedRotation: number;
private _cachedScaleX: number;
private _cachedScaleY: number;
private _cachedAngle: number;
private _cachedAngleToCenter: number;
private _cachedDistance: number;
private _cachedWidth: number;
private _cachedHeight: number;
private _cachedHalfWidth: number;
private _cachedHalfHeight: number;
private _cachedCosAngle: number;
private _cachedSinAngle: number;
private _cachedOffsetX: number;
private _cachedOffsetY: number;
private _cachedOriginX: number;
private _cachedOriginY: number;
private _cachedCenterX: number;
private _cachedCenterY: number;
public local: Mat3;
public update() {
public setCache() {
// Scale & Skew
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedRotation = this.rotation;
this._sin = 0;
this._cos = 1;
if (this.parent.texture.renderRotation)
if (this.parent.texture && this.parent.texture.renderRotation)
{
this._sin = GameMath.sinA[this.rotation + this.rotationOffset];
this._cos = GameMath.cosA[this.rotation + this.rotationOffset];
}
if (this.parent.texture.flippedX)
{
this.local.data[0] = this._cos * -this.scale.x;
this.local.data[3] = (this._sin * -this.scale.x) + this.skew.x;
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
}
else
{
this.local.data[0] = this._cos * this.scale.x;
this.local.data[3] = (this._sin * this.scale.x) + this.skew.x;
this._cachedSin = 0;
this._cachedCos = 1;
}
}
public update() {
// Check cache
var dirty: bool = false;
// 1) Height or Width change (also triggered by a change in scale) or an Origin change
if (this.parent.width !== this._cachedWidth || this.parent.height !== this._cachedHeight || this.origin.x !== this._cachedOriginX|| this.origin.y !== this._cachedOriginY)
{
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
// Store
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
dirty = true;
}
// 2) Rotation change
if (this.rotation != this._cachedRotation)
{
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
if (this.parent.texture.renderRotation)
{
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * GameMath.DEG_TO_RAD);
}
else
{
this._cachedSin = 0;
this._cachedCos = 1;
}
// Store
this._cachedRotation = this.rotation;
dirty = true;
}
if (dirty)
{
this._cachedCenterX = this.parent.x + this._cachedDistance * this._cachedCosAngle;
this._cachedCenterY = this.parent.y + this._cachedDistance * this._cachedSinAngle;
}
// Scale and Skew
if (this.parent.texture.flippedX)
{
this.local.data[0] = this._cachedCos * -this.scale.x;
this.local.data[3] = (this._cachedSin * -this.scale.x) + this.skew.x;
}
else
{
this.local.data[0] = this._cachedCos * this.scale.x;
this.local.data[3] = (this._cachedSin * this.scale.x) + this.skew.x;
}
if (this.parent.texture.flippedY)
{
this.local.data[4] = this._cos * -this.scale.y;
this.local.data[1] = -(this._sin * -this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * -this.scale.y;
this.local.data[1] = -(this._cachedSin * -this.scale.y) + this.skew.y;
}
else
{
this.local.data[4] = this._cos * this.scale.y;
this.local.data[1] = -(this._sin * this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * this.scale.y;
this.local.data[1] = -(this._cachedSin * this.scale.y) + this.skew.y;
}
// Translate
@@ -99,7 +190,7 @@ module Phaser.Components {
public scrollFactor: Phaser.Vec2;
/**
* The origin is the point around which scale and rotation takes place and defaults to the center of the sprite.
* The origin is the point around which scale and rotation takes place and defaults to the top-left of the sprite.
*/
public origin: Phaser.Vec2;
@@ -117,17 +208,75 @@ module Phaser.Components {
public rotation: number = 0;
/**
* The center of the Sprite after taking scaling into consideration
*/
public get centerX(): number {
return this.parent.width / 2;
* The distance from the center of the transform to the rotation origin.
*/
public get distance(): number {
return this._cachedDistance;
//return Math.sqrt(((this.offsetX - this.halfWidth) * (this.offsetX - this.halfWidth)) + ((this.offsetY - this.halfHeight) * (this.offsetY - this.halfHeight)));
}
/**
* The center of the Sprite after taking scaling into consideration
* The angle between the center of the transform to the rotation origin.
*/
public get angleToCenter(): number {
return this._cachedAngleToCenter;
//return Math.atan2(this.halfHeight - this.offsetY, this.halfWidth - this.offsetX);
}
/**
* The offset on the X axis of the origin
*/
public get offsetX(): number {
return this._cachedOffsetX;
//return this.origin.x * this.parent.width;
}
/**
* The offset on the Y axis of the origin
*/
public get offsetY(): number {
return this._cachedOffsetY;
//return this.origin.y * this.parent.height;
}
/**
* Half the width of the parent sprite, taking into consideration scaling
*/
public get halfWidth(): number {
return this._cachedHalfWidth;
//return this.parent.width / 2;
}
/**
* Half the height of the parent sprite, taking into consideration scaling
*/
public get halfHeight(): number {
return this._cachedHalfHeight;
//return this.parent.height / 2;
}
/**
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
public get centerX(): number {
return this._cachedCenterX;
//return this.parent.x + this.distance * Math.cos((this.rotation * Math.PI / 180) + this.angleToCenter);
}
/**
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
public get centerY(): number {
return this.parent.height / 2;
return this._cachedCenterY;
//return this.parent.y + this.distance * Math.sin((this.rotation * Math.PI / 180) + this.angleToCenter);
}
public get sin(): number {
return this._cachedSin;
}
public get cos(): number {
return this._cachedCos;
}
}
Phaser/gameobjects/Sprite.ts
+6 -2
View File
@@ -72,6 +72,8 @@ module Phaser {
this.worldView = new Rectangle(x, y, this.width, this.height);
this.cameraView = new Rectangle(x, y, this.width, this.height);
this.transform.setCache();
}
/**
@@ -243,8 +245,10 @@ module Phaser {
this.transform.update();
this.worldView.x = this.x * this.transform.scrollFactor.x;
this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.x = (this.x * this.transform.scrollFactor.x) - (this.width * this.transform.origin.x);
this.worldView.y = (this.y * this.transform.scrollFactor.y) - (this.height * this.transform.origin.y);
//this.worldView.x = this.x * this.transform.scrollFactor.x;
//this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.width = this.width;
this.worldView.height = this.height;
Phaser/renderers/CanvasRenderer.ts
+1 -3
View File
@@ -221,8 +221,6 @@ module Phaser {
return true;
}
Phaser.SpriteUtils.updateCameraView(camera, sprite);
return RectangleUtils.intersects(sprite.cameraView, camera.screenView);
}
@@ -447,7 +445,7 @@ module Phaser {
if (sprite.transform.scale.x == 0 || sprite.transform.scale.y == 0 || sprite.texture.alpha < 0.1 || this.inCamera(camera, sprite) == false)
{
//return false;
return false;
}
sprite.renderOrderID = this._count;
Phaser/utils/SpriteUtils.ts
+106 -26
View File
@@ -38,43 +38,39 @@ module Phaser {
else
{
// If the sprite is rotated around its center we can use this quicker method:
// Work out bounding box
SpriteUtils._sin = Phaser.GameMath.sinA[sprite.rotation];
SpriteUtils._cos = Phaser.GameMath.cosA[sprite.rotation];
if (SpriteUtils._sin < 0)
if (sprite.transform.origin.x == 0.5 && sprite.transform.origin.y == 0.5)
{
SpriteUtils._sin = -SpriteUtils._sin;
}
SpriteUtils._sin = Math.sin((sprite.rotation + sprite.transform.rotationOffset) * GameMath.DEG_TO_RAD);
SpriteUtils._cos = Math.cos((sprite.rotation + sprite.transform.rotationOffset) * GameMath.DEG_TO_RAD);
if (SpriteUtils._cos < 0)
{
SpriteUtils._cos = -SpriteUtils._cos;
}
if (SpriteUtils._sin < 0)
{
SpriteUtils._sin = -SpriteUtils._sin;
}
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
if (SpriteUtils._cos < 0)
{
SpriteUtils._cos = -SpriteUtils._cos;
}
// if origin isn't 0.5 we need to work out the difference to apply to the x/y
if (sprite.transform.origin.equals(0.5))
{
// Easy out
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
}
else
{
//var ax = sprite.cameraView.width * sprite.transform.origin.x;
//var ay = sprite.cameraView.height * sprite.transform.origin.y;
//var bx = sprite.cameraView.width * 0.5;
//var by = sprite.cameraView.height * 0.5;
//var c = sprite.game.math.distanceBetween(ax, ay, bx, by) / 2;
//console.log('actual x', ax, 'actual y', ay, 'cx', bx, 'cy', by);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
/*
// Useful to get the maximum AABB size of any given rect
If you want a single box that covers all angles, just take the half-diagonal of your existing box as the radius of a circle.
The new box has to contain this circle, so it should be a square with side-length equal to twice the radius
(equiv. the diagonal of the original AABB) and with the same center as the original.
*/
}
}
@@ -91,6 +87,90 @@ module Phaser {
}
static getCornersAsPoints(sprite: Sprite): Phaser.Point[] {
var out: Phaser.Point[] = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// Upper Left
out.push(new Point(sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Point(sprite.x - (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Point(sprite.x + (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Point(sprite.x - (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
}
static getCornersAsPoints2(sprite: Sprite): Phaser.Point[] {
var out: Phaser.Point[] = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
var cx = sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin;
var cy = sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin;
// Upper Left
out.push(new Point(cx + (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Point(cx - (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Point(cx + (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Point(cx - (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
}
static getCornersAsPoints3(sprite: Sprite): Phaser.Point[] {
var out: Phaser.Point[] = [];
var sin: number = sprite.transform.sin;
var cos: number = sprite.transform.cos;
//var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
//var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
//var cx = sprite.x + sprite.transform.distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
//var cy = sprite.y + sprite.transform.distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
var cx: number = sprite.transform.centerX;
var cy: number = sprite.transform.centerY;
// Upper Left
out.push(new Point(cx + sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Upper Right
out.push(new Point(cx - sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
// Bottom Left
out.push(new Point(cx + sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Bottom Right
out.push(new Point(cx - sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
return out;
}
static getAsPoints(sprite: Sprite): Phaser.Point[] {
var out: Phaser.Point[] = [];
README.md
+1
View File
@@ -43,6 +43,7 @@ TODO:
* Swap to using time based motion (like the tweens) rather than delta timer - it just doesn't work well on slow phones
* Pointer.getWorldX(camera) needs to take camera scale into consideration
* Add a 'click to bring to top' demo (+ Group feature?)
* If stage.clear set to false and game pauses, when it unpauses you still see the pause arrow - resolve this
* Add clip support + shape options to Texture Component.
Tests/Tests.csproj
+12
View File
@@ -128,6 +128,18 @@
<DependentUpon>world drag.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="mobile\sprite test 1.ts" />
<TypeScriptCompile Include="misc\point1.ts" />
<Content Include="misc\point1.js">
<DependentUpon>point1.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="misc\point2.ts" />
<Content Include="misc\point2.js">
<DependentUpon>point2.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="misc\point3.ts" />
<Content Include="misc\point3.js">
<DependentUpon>point3.ts</DependentUpon>
</Content>
<Content Include="mobile\sprite test 1.js">
<DependentUpon>sprite test 1.ts</DependentUpon>
</Content>
Tests/assets/tests/200x100corners.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 B

Tests/assets/tests/200x100corners2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

Tests/assets/tests/320x200.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 B

Tests/assets/tests/320x200g.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 713 B

Tests/misc/point1.js
+97
View File
@@ -0,0 +1,97 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box2', 'assets/tests/320x200.png');
game.load.image('box1', 'assets/sprites/oz_pov_melting_disk.png');
game.load.image('box', 'assets/sprites/bunny.png');
game.load.start();
}
var sprite;
var rotate = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
//sprite.transform.scale.setTo(0.5, 0.5);
sprite.transform.origin.setTo(0.3, 0.3);
game.input.onTap.add(rotateIt, this);
game.add.tween(sprite.transform.scale).to({
x: 0.5,
y: 0.5
}, 2000, Phaser.Easing.Linear.None, true, 0, true);
points = [
new Phaser.Point(),
new Phaser.Point(),
new Phaser.Point(),
new Phaser.Point()
];
}
function rotateIt() {
if(rotate == false) {
rotate = true;
} else {
rotate = false;
}
}
function update() {
if(rotate) {
sprite.rotation++;
}
}
var points;
function render() {
/*
points = Phaser.SpriteUtils.getCornersAsPoints3(sprite);
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
*/
var originX = sprite.transform.origin.x * sprite.width;
var originY = sprite.transform.origin.y * sprite.height;
var centerX = 0.5 * sprite.width;
var centerY = 0.5 * sprite.height;
var distance = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var originAngle = Math.atan2(centerY - originY, centerX - originX);
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
//var px = sprite.x + distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + originAngle);
//var py = sprite.y + distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + originAngle);
// WORKS
//var px = sprite.x + sprite.transform.distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
//var py = sprite.y + sprite.transform.distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
// Upper Left
//points[0].setTo(px + (sprite.width / 2) * cos - (sprite.height / 2) * sin, py + (sprite.height / 2) * cos + (sprite.width / 2) * sin);
// Upper Right
//points[1].setTo(px - (sprite.width / 2) * cos - (sprite.height / 2) * sin, py + (sprite.height / 2) * cos - (sprite.width / 2) * sin);
// Bottom Left
//points[2].setTo(px + (sprite.width / 2) * cos + (sprite.height / 2) * sin, py - (sprite.height / 2) * cos + (sprite.width / 2) * sin);
// Bottom Right
//points[3].setTo(px - (sprite.width / 2) * cos + (sprite.height / 2) * sin, py - (sprite.height / 2) * cos - (sprite.width / 2) * sin);
points = Phaser.SpriteUtils.getCornersAsPoints3(sprite);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(0,255,255)';
//game.stage.context.fillRect(px, py, 2, 2);
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation, 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + sprite.x + ' y: ' + sprite.y, sprite.x + 4, sprite.y);
game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/misc/point1.ts
+123
View File
@@ -0,0 +1,123 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box2', 'assets/tests/320x200.png');
game.load.image('box1', 'assets/sprites/oz_pov_melting_disk.png');
game.load.image('box', 'assets/sprites/bunny.png');
game.load.start();
}
var sprite: Phaser.Sprite;
var rotate: bool = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
//sprite.transform.scale.setTo(0.5, 0.5);
sprite.transform.origin.setTo(0.3, 0.3);
game.input.onTap.add(rotateIt, this);
game.add.tween(sprite.transform.scale).to({ x: 0.5, y: 0.5 }, 2000, Phaser.Easing.Linear.None, true, 0, true);
points = [new Phaser.Point, new Phaser.Point, new Phaser.Point, new Phaser.Point];
}
function rotateIt() {
if (rotate == false) { rotate = true; } else { rotate = false; }
}
function update() {
if (rotate)
{
sprite.rotation++;
}
}
var points: Phaser.Point[];
function render() {
/*
points = Phaser.SpriteUtils.getCornersAsPoints3(sprite);
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
*/
var originX: number = sprite.transform.origin.x * sprite.width;
var originY: number = sprite.transform.origin.y * sprite.height;
var centerX: number = 0.5 * sprite.width;
var centerY: number = 0.5 * sprite.height;
var distance: number = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var originAngle: number = Math.atan2(centerY - originY, centerX - originX);
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
//var px = sprite.x + distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + originAngle);
//var py = sprite.y + distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + originAngle);
// WORKS
//var px = sprite.x + sprite.transform.distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
//var py = sprite.y + sprite.transform.distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
// Upper Left
//points[0].setTo(px + (sprite.width / 2) * cos - (sprite.height / 2) * sin, py + (sprite.height / 2) * cos + (sprite.width / 2) * sin);
// Upper Right
//points[1].setTo(px - (sprite.width / 2) * cos - (sprite.height / 2) * sin, py + (sprite.height / 2) * cos - (sprite.width / 2) * sin);
// Bottom Left
//points[2].setTo(px + (sprite.width / 2) * cos + (sprite.height / 2) * sin, py - (sprite.height / 2) * cos + (sprite.width / 2) * sin);
// Bottom Right
//points[3].setTo(px - (sprite.width / 2) * cos + (sprite.height / 2) * sin, py - (sprite.height / 2) * cos - (sprite.width / 2) * sin);
points = Phaser.SpriteUtils.getCornersAsPoints3(sprite);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(0,255,255)';
//game.stage.context.fillRect(px, py, 2, 2);
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation , 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + sprite.x + ' y: ' + sprite.y, sprite.x + 4, sprite.y);
game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/misc/point2.js
+56
View File
@@ -0,0 +1,56 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box', 'assets/tests/320x200.png');
game.load.start();
}
var sprite;
var rotate = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
sprite.transform.origin.setTo(0, 0);
game.input.onTap.add(rotateIt, this);
}
function rotateIt() {
if(rotate == false) {
rotate = true;
} else {
rotate = false;
}
}
function update() {
if(rotate) {
sprite.rotation++;
}
}
function render() {
var originX = sprite.transform.origin.x * sprite.width;
var originY = sprite.transform.origin.y * sprite.height;
var centerX = 0.5 * sprite.width;
var centerY = 0.5 * sprite.height;
var distanceX = originX - centerX;
var distanceY = originY - centerY;
var distance = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = sprite.x + distance * Math.cos(sprite.transform.rotation + 45 * Math.PI / 180);
var py = sprite.y + distance * Math.sin(sprite.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation, 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + sprite.x + ' y: ' + sprite.y, sprite.x + 4, sprite.y);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/misc/point2.ts
+76
View File
@@ -0,0 +1,76 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box', 'assets/tests/320x200.png');
game.load.start();
}
var sprite: Phaser.Sprite;
var rotate: bool = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
sprite.transform.origin.setTo(0, 0);
game.input.onTap.add(rotateIt, this);
}
function rotateIt() {
if (rotate == false) { rotate = true; } else { rotate = false; }
}
function update() {
if (rotate)
{
sprite.rotation++;
}
}
function render() {
var originX: number = sprite.transform.origin.x * sprite.width;
var originY: number = sprite.transform.origin.y * sprite.height;
var centerX: number = 0.5 * sprite.width;
var centerY: number = 0.5 * sprite.height;
var distanceX: number = originX - centerX;
var distanceY: number = originY - centerY;
var distance: number = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = sprite.x + distance * Math.cos(sprite.transform.rotation + 45 * Math.PI / 180);
var py = sprite.y + distance * Math.sin(sprite.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation , 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + sprite.x + ' y: ' + sprite.y, sprite.x + 4, sprite.y);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/misc/point3.js
+57
View File
@@ -0,0 +1,57 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box', 'assets/tests/320x200.png');
game.load.start();
}
var sprite;
var rotate = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
sprite.transform.origin.setTo(0.3, 0.8);
game.input.onTap.add(rotateIt, this);
}
function rotateIt() {
if(rotate == false) {
rotate = true;
} else {
rotate = false;
}
}
function update() {
if(rotate) {
sprite.rotation++;
}
}
function render() {
var originX = sprite.transform.origin.x * sprite.width;
var originY = sprite.transform.origin.y * sprite.height;
var centerX = 0.5 * sprite.width;
var centerY = 0.5 * sprite.height;
var distanceX = originX - centerX;
var distanceY = originY - centerY;
var distance = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = sprite.x + distance * Math.cos(sprite.transform.rotation + 45 * Math.PI / 180);
var py = sprite.y + distance * Math.sin(sprite.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation, 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('sprite x: ' + sprite.x + ' sprite y: ' + sprite.y, 32, 112);
game.stage.context.fillRect(sprite.x, sprite.y, 2, 2);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/misc/point3.ts
+77
View File
@@ -0,0 +1,77 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
game.load.image('box', 'assets/tests/320x200.png');
game.load.start();
}
var sprite: Phaser.Sprite;
var rotate: bool = false;
function create() {
game.stage.backgroundColor = 'rgb(0,0,0)';
game.stage.disablePauseScreen = true;
sprite = game.add.sprite(game.stage.centerX, game.stage.centerY, 'box');
sprite.transform.origin.setTo(0.3, 0.8);
game.input.onTap.add(rotateIt, this);
}
function rotateIt() {
if (rotate == false) { rotate = true; } else { rotate = false; }
}
function update() {
if (rotate)
{
sprite.rotation++;
}
}
function render() {
var originX: number = sprite.transform.origin.x * sprite.width;
var originY: number = sprite.transform.origin.y * sprite.height;
var centerX: number = 0.5 * sprite.width;
var centerY: number = 0.5 * sprite.height;
var distanceX: number = originX - centerX;
var distanceY: number = originY - centerY;
var distance: number = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = sprite.x + distance * Math.cos(sprite.transform.rotation + 45 * Math.PI / 180);
var py = sprite.y + distance * Math.sin(sprite.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + sprite.rotation , 32, 72);
game.stage.context.fillText('point of rotation x: ' + sprite.transform.origin.x + ' y: ' + sprite.transform.origin.y, 32, 92);
game.stage.context.fillText('sprite x: ' + sprite.x + ' sprite y: ' + sprite.y, 32, 112);
game.stage.context.fillRect(sprite.x, sprite.y, 2, 2);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.beginPath();
game.stage.context.moveTo(sprite.x, sprite.y);
game.stage.context.arc(sprite.x, sprite.y, distance, 0, Math.PI * 2);
game.stage.context.closePath();
game.stage.context.fill();
game.stage.context.restore();
}
})();
Tests/phaser.js
+239 -51
View File
@@ -3083,48 +3083,186 @@ var Phaser;
this.scale = new Phaser.Vec2(1, 1);
this.skew = new Phaser.Vec2();
}
Transform.prototype.update = function () {
// Scale & Skew
this._sin = 0;
this._cos = 1;
if(this.parent.texture.renderRotation) {
this._sin = Phaser.GameMath.sinA[this.rotation + this.rotationOffset];
this._cos = Phaser.GameMath.cosA[this.rotation + this.rotationOffset];
}
if(this.parent.texture.flippedX) {
this.local.data[0] = this._cos * -this.scale.x;
this.local.data[3] = (this._sin * -this.scale.x) + this.skew.x;
Transform.prototype.setCache = function () {
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedRotation = this.rotation;
if(this.parent.texture && this.parent.texture.renderRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
} else {
this.local.data[0] = this._cos * this.scale.x;
this.local.data[3] = (this._sin * this.scale.x) + this.skew.x;
this._cachedSin = 0;
this._cachedCos = 1;
}
};
Transform.prototype.update = function () {
// Check cache
var dirty = false;
// 1) Height or Width change (also triggered by a change in scale) or an Origin change
if(this.parent.width !== this._cachedWidth || this.parent.height !== this._cachedHeight || this.origin.x !== this._cachedOriginX || this.origin.y !== this._cachedOriginY) {
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
// Store
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
dirty = true;
}
// 2) Rotation change
if(this.rotation != this._cachedRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
if(this.parent.texture.renderRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
} else {
this._cachedSin = 0;
this._cachedCos = 1;
}
// Store
this._cachedRotation = this.rotation;
dirty = true;
}
if(dirty) {
this._cachedCenterX = this.parent.x + this._cachedDistance * this._cachedCosAngle;
this._cachedCenterY = this.parent.y + this._cachedDistance * this._cachedSinAngle;
}
// Scale and Skew
if(this.parent.texture.flippedX) {
this.local.data[0] = this._cachedCos * -this.scale.x;
this.local.data[3] = (this._cachedSin * -this.scale.x) + this.skew.x;
} else {
this.local.data[0] = this._cachedCos * this.scale.x;
this.local.data[3] = (this._cachedSin * this.scale.x) + this.skew.x;
}
if(this.parent.texture.flippedY) {
this.local.data[4] = this._cos * -this.scale.y;
this.local.data[1] = -(this._sin * -this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * -this.scale.y;
this.local.data[1] = -(this._cachedSin * -this.scale.y) + this.skew.y;
} else {
this.local.data[4] = this._cos * this.scale.y;
this.local.data[1] = -(this._sin * this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * this.scale.y;
this.local.data[1] = -(this._cachedSin * this.scale.y) + this.skew.y;
}
// Translate
this.local.data[2] = this.parent.x;
this.local.data[5] = this.parent.y;
};
Object.defineProperty(Transform.prototype, "centerX", {
Object.defineProperty(Transform.prototype, "distance", {
get: /**
* The center of the Sprite after taking scaling into consideration
* The distance from the center of the transform to the rotation origin.
*/
function () {
return this.parent.width / 2;
},
return this._cachedDistance;
//return Math.sqrt(((this.offsetX - this.halfWidth) * (this.offsetX - this.halfWidth)) + ((this.offsetY - this.halfHeight) * (this.offsetY - this.halfHeight)));
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "angleToCenter", {
get: /**
* The angle between the center of the transform to the rotation origin.
*/
function () {
return this._cachedAngleToCenter;
//return Math.atan2(this.halfHeight - this.offsetY, this.halfWidth - this.offsetX);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "offsetX", {
get: /**
* The offset on the X axis of the origin
*/
function () {
return this._cachedOffsetX;
//return this.origin.x * this.parent.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "offsetY", {
get: /**
* The offset on the Y axis of the origin
*/
function () {
return this._cachedOffsetY;
//return this.origin.y * this.parent.height;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "halfWidth", {
get: /**
* Half the width of the parent sprite, taking into consideration scaling
*/
function () {
return this._cachedHalfWidth;
//return this.parent.width / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "halfHeight", {
get: /**
* Half the height of the parent sprite, taking into consideration scaling
*/
function () {
return this._cachedHalfHeight;
//return this.parent.height / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "centerX", {
get: /**
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
function () {
return this._cachedCenterX;
//return this.parent.x + this.distance * Math.cos((this.rotation * Math.PI / 180) + this.angleToCenter);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "centerY", {
get: /**
* The center of the Sprite after taking scaling into consideration
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
function () {
return this.parent.height / 2;
return this._cachedCenterY;
//return this.parent.y + this.distance * Math.sin((this.rotation * Math.PI / 180) + this.angleToCenter);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "sin", {
get: function () {
return this._cachedSin;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "cos", {
get: function () {
return this._cachedCos;
},
enumerable: true,
configurable: true
@@ -4319,6 +4457,7 @@ var Phaser;
this.body = new Phaser.Physics.Body(this, bodyType);
this.worldView = new Phaser.Rectangle(x, y, this.width, this.height);
this.cameraView = new Phaser.Rectangle(x, y, this.width, this.height);
this.transform.setCache();
}
Object.defineProperty(Sprite.prototype, "rotation", {
get: /**
@@ -4394,8 +4533,10 @@ var Phaser;
*/
function () {
this.transform.update();
this.worldView.x = this.x * this.transform.scrollFactor.x;
this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.x = (this.x * this.transform.scrollFactor.x) - (this.width * this.transform.origin.x);
this.worldView.y = (this.y * this.transform.scrollFactor.y) - (this.height * this.transform.origin.y);
//this.worldView.x = this.x * this.transform.scrollFactor.x;
//this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.width = this.width;
this.worldView.height = this.height;
if(this.modified == false && (!this.transform.scale.equals(1) || !this.transform.skew.equals(0) || this.transform.rotation != 0 || this.transform.rotationOffset != 0 || this.texture.flippedX || this.texture.flippedY)) {
@@ -4514,32 +4655,28 @@ var Phaser;
sprite.cameraView.height = sprite.height;
} else {
// If the sprite is rotated around its center we can use this quicker method:
// Work out bounding box
SpriteUtils._sin = Phaser.GameMath.sinA[sprite.rotation];
SpriteUtils._cos = Phaser.GameMath.cosA[sprite.rotation];
if(SpriteUtils._sin < 0) {
SpriteUtils._sin = -SpriteUtils._sin;
}
if(SpriteUtils._cos < 0) {
SpriteUtils._cos = -SpriteUtils._cos;
}
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
// if origin isn't 0.5 we need to work out the difference to apply to the x/y
if(sprite.transform.origin.equals(0.5)) {
// Easy out
if(sprite.transform.origin.x == 0.5 && sprite.transform.origin.y == 0.5) {
SpriteUtils._sin = Math.sin((sprite.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
SpriteUtils._cos = Math.cos((sprite.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
if(SpriteUtils._sin < 0) {
SpriteUtils._sin = -SpriteUtils._sin;
}
if(SpriteUtils._cos < 0) {
SpriteUtils._cos = -SpriteUtils._cos;
}
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
} else {
//var ax = sprite.cameraView.width * sprite.transform.origin.x;
//var ay = sprite.cameraView.height * sprite.transform.origin.y;
//var bx = sprite.cameraView.width * 0.5;
//var by = sprite.cameraView.height * 0.5;
//var c = sprite.game.math.distanceBetween(ax, ay, bx, by) / 2;
//console.log('actual x', ax, 'actual y', ay, 'cx', bx, 'cy', by);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
}
/*
// Useful to get the maximum AABB size of any given rect
If you want a single box that covers all angles, just take the half-diagonal of your existing box as the radius of a circle.
The new box has to contain this circle, so it should be a square with side-length equal to twice the radius
(equiv. the diagonal of the original AABB) and with the same center as the original.
*/
}
}
if(sprite.animations.currentFrame !== null && sprite.animations.currentFrame.trimmed) {
//sprite.cameraView.x += sprite.animations.currentFrame.spriteSourceSizeX;
@@ -4549,6 +4686,58 @@ var Phaser;
}
return sprite.cameraView;
};
SpriteUtils.getCornersAsPoints = function getCornersAsPoints(sprite) {
var out = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// Upper Left
out.push(new Phaser.Point(sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Phaser.Point(sprite.x - (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Phaser.Point(sprite.x + (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Phaser.Point(sprite.x - (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
};
SpriteUtils.getCornersAsPoints2 = function getCornersAsPoints2(sprite) {
var out = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
var cx = sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin;
var cy = sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin;
// Upper Left
out.push(new Phaser.Point(cx + (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Phaser.Point(cx - (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Phaser.Point(cx + (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Phaser.Point(cx - (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
};
SpriteUtils.getCornersAsPoints3 = function getCornersAsPoints3(sprite) {
var out = [];
var sin = sprite.transform.sin;
var cos = sprite.transform.cos;
//var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
//var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
//var cx = sprite.x + sprite.transform.distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
//var cy = sprite.y + sprite.transform.distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
var cx = sprite.transform.centerX;
var cy = sprite.transform.centerY;
// Upper Left
out.push(new Phaser.Point(cx + sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Upper Right
out.push(new Phaser.Point(cx - sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
// Bottom Left
out.push(new Phaser.Point(cx + sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Bottom Right
out.push(new Phaser.Point(cx - sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
return out;
};
SpriteUtils.getAsPoints = function getAsPoints(sprite) {
var out = [];
// top left
@@ -16411,7 +16600,6 @@ var Phaser;
if(sprite.transform.scrollFactor.equals(0)) {
return true;
}
Phaser.SpriteUtils.updateCameraView(camera, sprite);
return Phaser.RectangleUtils.intersects(sprite.cameraView, camera.screenView);
};
CanvasRenderer.prototype.inScreen = function (camera) {
@@ -16579,8 +16767,8 @@ var Phaser;
function (camera, sprite) {
Phaser.SpriteUtils.updateCameraView(camera, sprite);
if(sprite.transform.scale.x == 0 || sprite.transform.scale.y == 0 || sprite.texture.alpha < 0.1 || this.inCamera(camera, sprite) == false) {
//return false;
}
return false;
}
sprite.renderOrderID = this._count;
this._count++;
// Reset our temp vars
Tests/sprites/origin 5.js
+188 -19
View File
@@ -3,17 +3,30 @@
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
function init() {
// Using Phasers asset loader we load up a PNG from the assets folder
game.load.image('fuji', 'assets/pics/atari_fujilogo.png');
game.load.image('disk', 'assets/sprites/oz_pov_melting_disk.png');
game.load.image('fuji', 'assets/tests/200x100corners.png');
game.load.image('fuji2', 'assets/tests/200x100corners2.png');
game.load.image('fuji3', 'assets/tests/320x200.png');
game.load.image('fuji4', 'assets/tests/320x200g.png');
game.load.start();
}
var fuji;
var wn;
var hn;
var fuji2;
var fuji3;
function create() {
game.stage.backgroundColor = 'rgb(0,0,100)';
game.world.setSize(2000, 1200, true);
game.stage.backgroundColor = 'rgb(0,0,0)';
//game.world.setSize(2000, 1200, true);
// The sprite is 320 x 200 pixels in size positioned in the middle of the stage
fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji');
//fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji4');
fuji2 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji3');
//fuji2 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji2');
//fuji3 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji2');
//fuji.visible = false;
//fuji2.visible = false;
//fuji.texture.alpha = 0.6;
//fuji2.texture.alpha = 0.6;
//fuji = game.add.sprite(0, 0, 'fuji');
//fuji2 = game.add.sprite(0, 0, 'fuji');
//fuji.transform.scale.setTo(1.5, 1.5);
//fuji.transform.scale.setTo(1.5, 1.5);
//fuji.transform.skew.setTo(0.1, 0.1);
@@ -24,13 +37,20 @@
//fuji.transform.scale.setTo(2, 2);
// This sets the origin to the center
//fuji.transform.origin.setTo(0.5, 0.5);
//fuji.transform.origin.setTo(0, 0);
fuji2.transform.origin.setTo(1, 1);
//fuji3.transform.origin.setTo(1, 1);
game.input.onTap.add(rotateIt, this);
}
//game.stage.clear = false;
}
function rotateIt() {
fuji.rotation += 20;
}
//fuji.rotation += 10;
fuji2.rotation += 10;
//fuji3.rotation += 20;
}
function update() {
fuji.rotation += 1;
//fuji.rotation++;
//fuji2.rotation++;
if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
game.camera.x -= 4;
} else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
@@ -41,20 +61,169 @@
} else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
game.camera.y += 4;
}
//Phaser.SpriteUtils.updateCameraDisplay(game.camera, fuji);
}
}
var points;
var points2;
function render() {
// This = the center point
//var cx = fuji2.x + (fuji2.width / 2) * cos - (fuji2.height / 2) * sin;
//var cy = fuji2.y + (fuji2.height / 2) * cos + (fuji2.width / 2) * sin;
// This gives me the top-left of an origin 1,1
//var cx = fuji2.x + (-fuji2.width / fuji2.transform.origin.x) * cos - (-fuji2.height / fuji2.transform.origin.y) * sin;
//var cy = fuji2.y + (-fuji2.height / fuji2.transform.origin.y) * cos + (-fuji2.width / fuji2.transform.origin.x) * sin;
// This gives me the center point of an origin 1,1
//var cx = fuji2.x + (-(fuji2.width * fuji2.transform.origin.x) / 2) * cos - (-(fuji2.height * fuji2.transform.origin.y) / 2) * sin;
//var cy = fuji2.y + (-(fuji2.height * fuji2.transform.origin.y) / 2) * cos + (-(fuji2.width * fuji2.transform.origin.x) / 2) * sin;
//var dx = 0.5 * fuji2.transform.origin.x;
//var dy = 0.5 * fuji2.transform.origin.y;
//dx = 1;
//dy = 1;
//console.log(fuji2.width * 0);
//var cx = fuji2.x + (-(fuji2.width * fuji2.transform.origin.x) / dx) * cos - (-(fuji2.height * fuji2.transform.origin.y) / dy) * sin;
//var cy = fuji2.y + (-(fuji2.height * fuji2.transform.origin.y) / dy) * cos + (-(fuji2.width * fuji2.transform.origin.x) / dx) * sin;
// This gives me the center point of an origin 0,0
//var cx = fuji2.x + ((fuji2.width * fuji2.transform.origin.x) / 2) * cos - ((fuji2.height * fuji2.transform.origin.y) / 2) * sin;
//var cy = fuji2.y + ((fuji2.height * fuji2.transform.origin.y) / 2) * cos + ((fuji2.width * fuji2.transform.origin.x) / 2) * sin;
// center points
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji.x, fuji.y, 4, 4);
//game.stage.context.fillRect(fuji2.x, fuji2.y, 4, 4);
//game.stage.context.fillRect(cx, cy, 4, 4);
var sin = Math.sin((fuji2.transform.rotation + fuji2.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((fuji2.transform.rotation + fuji2.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var originX = fuji2.transform.origin.x * fuji2.width;
var originY = fuji2.transform.origin.y * fuji2.height;
var centerX = 0.5 * fuji2.width;
var centerY = 0.5 * fuji2.height;
var distanceX = originX - centerX;
var distanceY = originY - centerY;
var distance = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = fuji2.x + distance * Math.cos(fuji2.transform.rotation + 45 * Math.PI / 180);
var py = fuji2.y + distance * Math.sin(fuji2.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + fuji2.rotation, 32, 72);
game.stage.context.fillText('point of rotation x: ' + fuji2.transform.origin.x + ' y: ' + fuji2.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + fuji2.x + ' y: ' + fuji2.y, fuji2.x + 4, fuji2.y);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.arc(fuji2.x, fuji2.y, distance, 0, Math.PI * 2);
game.stage.context.fill();
game.stage.context.restore();
//points = Phaser.SpriteUtils.getCornersAsPoints(fuji);
//game.stage.context.fillStyle = 'rgb(255,255,255)';
//game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
//game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
//game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
//game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
//points2 = Phaser.SpriteUtils.getCornersAsPoints2(fuji2);
//game.stage.context.fillStyle = 'rgb(255,0,0)';
//game.stage.context.fillRect(points2[0].x, points2[0].y, 2, 2);
//game.stage.context.fillRect(points2[1].x, points2[1].y, 2, 2);
//game.stage.context.fillRect(points2[2].x, points2[2].y, 2, 2);
//game.stage.context.fillRect(points2[3].x, points2[3].y, 2, 2);
/*
//game.stage.context.fillStyle = 'rgb(255,255,255)';
//game.stage.context.fillRect(fuji.x, fuji.y, 2, 2);
game.stage.context.fillStyle = 'rgb(255,0,0)';
game.stage.context.fillRect(fuji.x, fuji.y, 2, 2);
//var sin = Math.sin(game.math.degreesToRadians(fuji.rotation));
//var cos = Math.cos(game.math.degreesToRadians(fuji.rotation));
//var fx = fuji.x + (fuji.width * fuji.transform.origin.x);
//var fy = fuji.y + (fuji.height * fuji.transform.origin.y);
// center x/y
//var cx = fuji.width * 0.5;
//var cy = fuji.height * 0.5;
//var ax = fuji.width * fuji.transform.origin.x;
//var ay = fuji.height * fuji.transform.origin.y;
//var dx = cx - ax;
//var dy = cy - ay;
//var fx = fuji.x - dx;
//var fy = fuji.y - dy;
/*
var ox = fuji.x + (fuji.width * fuji.transform.origin.x);
var oy = fuji.y + (fuji.height * fuji.transform.origin.y);
var cx = fuji.x + (fuji.width * 0.5);
var cy = fuji.y + (fuji.height * 0.5);
var dx = ox - cx;
var dy = oy - cy;
game.stage.context.fillText('dx: ' + dx + ' dy: ' + dy, 300, 100);
var fx = fuji.x + dx;
var fy = fuji.y + dy;
//game.stage.context.fillStyle = 'rgb(255,0,255)';
//game.stage.context.fillRect(cx, cy, 20, 20);
//UL = x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A
//ul.x = fuji.x + (fuji.width / 2) * cos - (fuji.height / 2) * sin;
ul.x = fx + (fuji.width / 2) * cos - (fuji.height / 2) * sin;
//UL = y + ( Height / 2 ) * cos A + ( Width / 2 ) * sin A
//ul.y = fuji.y + (fuji.height / 2) * cos + (fuji.width / 2) * sin;
ul.y = fy + (fuji.height / 2) * cos + (fuji.width / 2) * sin;
//UR = x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A
//ur.x = fuji.x - (fuji.width / 2) * cos - (fuji.height / 2) * sin;
ur.x = fx - (fuji.width / 2) * cos - (fuji.height / 2) * sin;
//UR = y + ( Height / 2 ) * cos A - ( Width / 2 ) * sin A
//ur.y = fuji.y + (fuji.height / 2) * cos - (fuji.width / 2) * sin;
ur.y = fy + (fuji.height / 2) * cos - (fuji.width / 2) * sin;
//BL = x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A
//bl.x = fuji.x + (fuji.width / 2) * cos + (fuji.height / 2) * sin;
bl.x = fx + (fuji.width / 2) * cos + (fuji.height / 2) * sin;
//BL = y - ( Height / 2 ) * cos A + ( Width / 2 ) * sin A
//bl.y = fuji.y - (fuji.height / 2) * cos + (fuji.width / 2) * sin;
bl.y = fy - (fuji.height / 2) * cos + (fuji.width / 2) * sin;
//BR = x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A
//br.x = fuji.x - (fuji.width / 2) * cos + (fuji.height / 2) * sin;
br.x = fx - (fuji.width / 2) * cos + (fuji.height / 2) * sin;
//BR = y - ( Height / 2 ) * cos A - ( Width / 2 ) * sin A
//br.y = fuji.y - (fuji.height / 2) * cos - (fuji.width / 2) * sin;
br.y = fy - (fuji.height / 2) * cos - (fuji.width / 2) * sin;
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillRect(fuji.cameraView.x + fuji.cameraView.halfWidth, fuji.cameraView.y + fuji.cameraView.halfHeight, 2, 2);
game.stage.context.strokeStyle = 'rgb(255,255,0)';
game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
game.stage.context.fillRect(ul.x, ul.y, 2, 2);
game.stage.context.fillRect(ur.x, ur.y, 2, 2);
game.stage.context.fillRect(bl.x, bl.y, 2, 2);
game.stage.context.fillRect(br.x, br.y, 2, 2);
//game.stage.context.fillRect(fuji.x - fuji.width / 2, fuji.y - fuji.width / 2, 2, 2);
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji2.x, fuji2.y, 2, 2);
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji.cameraView.x + fuji.cameraView.halfWidth, fuji.cameraView.y + fuji.cameraView.halfHeight, 2, 2);
//game.stage.context.strokeStyle = 'rgb(255,255,0)';
//game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
//game.stage.context.strokeStyle = 'rgb(0,255,0)';
//game.stage.context.strokeRect(fuji.x, fuji.y, wn, hn);
//game.camera.renderDebugInfo(32, 32);
Phaser.DebugUtils.renderSpriteInfo(fuji, 32, 32);
}
//Phaser.DebugUtils.renderSpriteInfo(fuji, 32, 32);
*/
//game.stage.context.strokeStyle = 'rgb(255,255,0)';
//game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
}
})();
Tests/sprites/origin 5.ts
+208 -17
View File
@@ -7,23 +7,39 @@
function init() {
// Using Phasers asset loader we load up a PNG from the assets folder
game.load.image('fuji', 'assets/pics/atari_fujilogo.png');
game.load.image('disk', 'assets/sprites/oz_pov_melting_disk.png');
game.load.image('fuji', 'assets/tests/200x100corners.png');
game.load.image('fuji2', 'assets/tests/200x100corners2.png');
game.load.image('fuji3', 'assets/tests/320x200.png');
game.load.image('fuji4', 'assets/tests/320x200g.png');
game.load.start();
}
var fuji: Phaser.Sprite;
var wn: number;
var hn: number;
var fuji2: Phaser.Sprite;
var fuji3: Phaser.Sprite;
function create() {
game.stage.backgroundColor = 'rgb(0,0,100)';
game.world.setSize(2000, 1200, true);
game.stage.backgroundColor = 'rgb(0,0,0)';
//game.world.setSize(2000, 1200, true);
// The sprite is 320 x 200 pixels in size positioned in the middle of the stage
fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji');
//fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji4');
fuji2 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji3');
//fuji2 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji2');
//fuji3 = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji2');
//fuji.visible = false;
//fuji2.visible = false;
//fuji.texture.alpha = 0.6;
//fuji2.texture.alpha = 0.6;
//fuji = game.add.sprite(0, 0, 'fuji');
//fuji2 = game.add.sprite(0, 0, 'fuji');
//fuji.transform.scale.setTo(1.5, 1.5);
//fuji.transform.scale.setTo(1.5, 1.5);
@@ -39,17 +55,27 @@
// This sets the origin to the center
//fuji.transform.origin.setTo(0.5, 0.5);
//fuji.transform.origin.setTo(0, 0);
fuji2.transform.origin.setTo(1, 1);
//fuji3.transform.origin.setTo(1, 1);
game.input.onTap.add(rotateIt, this);
//game.stage.clear = false;
}
function rotateIt() {
fuji.rotation += 20;
//fuji.rotation += 10;
fuji2.rotation += 10;
//fuji3.rotation += 20;
}
function update() {
fuji.rotation += 1;
//fuji.rotation++;
//fuji2.rotation++;
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
@@ -69,30 +95,195 @@
game.camera.y += 4;
}
//Phaser.SpriteUtils.updateCameraDisplay(game.camera, fuji);
}
var points: Phaser.Point[];
var points2: Phaser.Point[];
function render() {
// This = the center point
//var cx = fuji2.x + (fuji2.width / 2) * cos - (fuji2.height / 2) * sin;
//var cy = fuji2.y + (fuji2.height / 2) * cos + (fuji2.width / 2) * sin;
// This gives me the top-left of an origin 1,1
//var cx = fuji2.x + (-fuji2.width / fuji2.transform.origin.x) * cos - (-fuji2.height / fuji2.transform.origin.y) * sin;
//var cy = fuji2.y + (-fuji2.height / fuji2.transform.origin.y) * cos + (-fuji2.width / fuji2.transform.origin.x) * sin;
// This gives me the center point of an origin 1,1
//var cx = fuji2.x + (-(fuji2.width * fuji2.transform.origin.x) / 2) * cos - (-(fuji2.height * fuji2.transform.origin.y) / 2) * sin;
//var cy = fuji2.y + (-(fuji2.height * fuji2.transform.origin.y) / 2) * cos + (-(fuji2.width * fuji2.transform.origin.x) / 2) * sin;
//var dx = 0.5 * fuji2.transform.origin.x;
//var dy = 0.5 * fuji2.transform.origin.y;
//dx = 1;
//dy = 1;
//console.log(fuji2.width * 0);
//var cx = fuji2.x + (-(fuji2.width * fuji2.transform.origin.x) / dx) * cos - (-(fuji2.height * fuji2.transform.origin.y) / dy) * sin;
//var cy = fuji2.y + (-(fuji2.height * fuji2.transform.origin.y) / dy) * cos + (-(fuji2.width * fuji2.transform.origin.x) / dx) * sin;
// This gives me the center point of an origin 0,0
//var cx = fuji2.x + ((fuji2.width * fuji2.transform.origin.x) / 2) * cos - ((fuji2.height * fuji2.transform.origin.y) / 2) * sin;
//var cy = fuji2.y + ((fuji2.height * fuji2.transform.origin.y) / 2) * cos + ((fuji2.width * fuji2.transform.origin.x) / 2) * sin;
// center points
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji.x, fuji.y, 4, 4);
//game.stage.context.fillRect(fuji2.x, fuji2.y, 4, 4);
//game.stage.context.fillRect(cx, cy, 4, 4);
var sin = Math.sin((fuji2.transform.rotation + fuji2.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((fuji2.transform.rotation + fuji2.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var originX: number = fuji2.transform.origin.x * fuji2.width;
var originY: number = fuji2.transform.origin.y * fuji2.height;
var centerX: number = 0.5 * fuji2.width;
var centerY: number = 0.5 * fuji2.height;
var distanceX: number = originX - centerX;
var distanceY: number = originY - centerY;
var distance: number = Math.sqrt(((originX - centerX) * (originX - centerX)) + ((originY - centerY) * (originY - centerY)));
var px = fuji2.x + distance * Math.cos(fuji2.transform.rotation + 45 * Math.PI / 180);
var py = fuji2.y + distance * Math.sin(fuji2.transform.rotation + 45 * Math.PI / 180);
game.stage.context.save();
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillText('rect width: ' + originX + ' height: ' + originY, 32, 32);
game.stage.context.fillText('center x: ' + centerX + ' centerY: ' + centerY, 32, 52);
game.stage.context.fillText('angle: ' + fuji2.rotation , 32, 72);
game.stage.context.fillText('point of rotation x: ' + fuji2.transform.origin.x + ' y: ' + fuji2.transform.origin.y, 32, 92);
game.stage.context.fillText('x: ' + fuji2.x + ' y: ' + fuji2.y, fuji2.x + 4, fuji2.y);
game.stage.context.restore();
game.stage.context.save();
game.stage.context.fillStyle = 'rgba(255,255,255,0.1)';
game.stage.context.arc(fuji2.x, fuji2.y, distance, 0, Math.PI * 2);
game.stage.context.fill();
game.stage.context.restore();
//points = Phaser.SpriteUtils.getCornersAsPoints(fuji);
//game.stage.context.fillStyle = 'rgb(255,255,255)';
//game.stage.context.fillRect(points[0].x, points[0].y, 2, 2);
//game.stage.context.fillRect(points[1].x, points[1].y, 2, 2);
//game.stage.context.fillRect(points[2].x, points[2].y, 2, 2);
//game.stage.context.fillRect(points[3].x, points[3].y, 2, 2);
//points2 = Phaser.SpriteUtils.getCornersAsPoints2(fuji2);
//game.stage.context.fillStyle = 'rgb(255,0,0)';
//game.stage.context.fillRect(points2[0].x, points2[0].y, 2, 2);
//game.stage.context.fillRect(points2[1].x, points2[1].y, 2, 2);
//game.stage.context.fillRect(points2[2].x, points2[2].y, 2, 2);
//game.stage.context.fillRect(points2[3].x, points2[3].y, 2, 2);
/*
//game.stage.context.fillStyle = 'rgb(255,255,255)';
//game.stage.context.fillRect(fuji.x, fuji.y, 2, 2);
game.stage.context.fillStyle = 'rgb(255,0,0)';
game.stage.context.fillRect(fuji.x, fuji.y, 2, 2);
//var sin = Math.sin(game.math.degreesToRadians(fuji.rotation));
//var cos = Math.cos(game.math.degreesToRadians(fuji.rotation));
//var fx = fuji.x + (fuji.width * fuji.transform.origin.x);
//var fy = fuji.y + (fuji.height * fuji.transform.origin.y);
// center x/y
//var cx = fuji.width * 0.5;
//var cy = fuji.height * 0.5;
//var ax = fuji.width * fuji.transform.origin.x;
//var ay = fuji.height * fuji.transform.origin.y;
//var dx = cx - ax;
//var dy = cy - ay;
//var fx = fuji.x - dx;
//var fy = fuji.y - dy;
/*
var ox = fuji.x + (fuji.width * fuji.transform.origin.x);
var oy = fuji.y + (fuji.height * fuji.transform.origin.y);
var cx = fuji.x + (fuji.width * 0.5);
var cy = fuji.y + (fuji.height * 0.5);
var dx = ox - cx;
var dy = oy - cy;
game.stage.context.fillText('dx: ' + dx + ' dy: ' + dy, 300, 100);
var fx = fuji.x + dx;
var fy = fuji.y + dy;
//game.stage.context.fillStyle = 'rgb(255,0,255)';
//game.stage.context.fillRect(cx, cy, 20, 20);
//UL = x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A
//ul.x = fuji.x + (fuji.width / 2) * cos - (fuji.height / 2) * sin;
ul.x = fx + (fuji.width / 2) * cos - (fuji.height / 2) * sin;
//UL = y + ( Height / 2 ) * cos A + ( Width / 2 ) * sin A
//ul.y = fuji.y + (fuji.height / 2) * cos + (fuji.width / 2) * sin;
ul.y = fy + (fuji.height / 2) * cos + (fuji.width / 2) * sin;
//UR = x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A
//ur.x = fuji.x - (fuji.width / 2) * cos - (fuji.height / 2) * sin;
ur.x = fx - (fuji.width / 2) * cos - (fuji.height / 2) * sin;
//UR = y + ( Height / 2 ) * cos A - ( Width / 2 ) * sin A
//ur.y = fuji.y + (fuji.height / 2) * cos - (fuji.width / 2) * sin;
ur.y = fy + (fuji.height / 2) * cos - (fuji.width / 2) * sin;
//BL = x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A
//bl.x = fuji.x + (fuji.width / 2) * cos + (fuji.height / 2) * sin;
bl.x = fx + (fuji.width / 2) * cos + (fuji.height / 2) * sin;
//BL = y - ( Height / 2 ) * cos A + ( Width / 2 ) * sin A
//bl.y = fuji.y - (fuji.height / 2) * cos + (fuji.width / 2) * sin;
bl.y = fy - (fuji.height / 2) * cos + (fuji.width / 2) * sin;
//BR = x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A
//br.x = fuji.x - (fuji.width / 2) * cos + (fuji.height / 2) * sin;
br.x = fx - (fuji.width / 2) * cos + (fuji.height / 2) * sin;
//BR = y - ( Height / 2 ) * cos A - ( Width / 2 ) * sin A
//br.y = fuji.y - (fuji.height / 2) * cos - (fuji.width / 2) * sin;
br.y = fy - (fuji.height / 2) * cos - (fuji.width / 2) * sin;
game.stage.context.fillStyle = 'rgb(255,255,0)';
game.stage.context.fillRect(fuji.cameraView.x + fuji.cameraView.halfWidth, fuji.cameraView.y + fuji.cameraView.halfHeight, 2, 2);
game.stage.context.fillRect(ul.x, ul.y, 2, 2);
game.stage.context.fillRect(ur.x, ur.y, 2, 2);
game.stage.context.fillRect(bl.x, bl.y, 2, 2);
game.stage.context.fillRect(br.x, br.y, 2, 2);
game.stage.context.strokeStyle = 'rgb(255,255,0)';
game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
//game.stage.context.fillRect(fuji.x - fuji.width / 2, fuji.y - fuji.width / 2, 2, 2);
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji2.x, fuji2.y, 2, 2);
//game.stage.context.fillStyle = 'rgb(255,255,0)';
//game.stage.context.fillRect(fuji.cameraView.x + fuji.cameraView.halfWidth, fuji.cameraView.y + fuji.cameraView.halfHeight, 2, 2);
//game.stage.context.strokeStyle = 'rgb(255,255,0)';
//game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
//game.stage.context.strokeStyle = 'rgb(0,255,0)';
//game.stage.context.strokeRect(fuji.x, fuji.y, wn, hn);
//game.camera.renderDebugInfo(32, 32);
Phaser.DebugUtils.renderSpriteInfo(fuji, 32, 32);
//Phaser.DebugUtils.renderSpriteInfo(fuji, 32, 32);
*/
//game.stage.context.strokeStyle = 'rgb(255,255,0)';
//game.stage.context.strokeRect(fuji.cameraView.x, fuji.cameraView.y, fuji.cameraView.width, fuji.cameraView.height);
}
build/phaser.d.ts
Vendored
+54 -5
View File
@@ -1896,9 +1896,29 @@ module Phaser.Components {
* @param parent The Sprite using this transform
*/
constructor(parent);
private _sin;
private _cos;
private _rotation;
private _cachedSin;
private _cachedCos;
private _cachedRotation;
private _cachedScaleX;
private _cachedScaleY;
private _cachedAngle;
private _cachedAngleToCenter;
private _cachedDistance;
private _cachedWidth;
private _cachedHeight;
private _cachedHalfWidth;
private _cachedHalfHeight;
private _cachedCosAngle;
private _cachedSinAngle;
private _cachedOffsetX;
private _cachedOffsetY;
private _cachedOriginX;
private _cachedOriginY;
private _cachedCenterX;
private _cachedCenterY;
public local: Mat3;
public setCache(): void;
public update(): void;
/**
* Reference to Phaser.Game
@@ -1921,7 +1941,7 @@ module Phaser.Components {
*/
public scrollFactor: Vec2;
/**
* The origin is the point around which scale and rotation takes place and defaults to the center of the sprite.
* The origin is the point around which scale and rotation takes place and defaults to the top-left of the sprite.
*/
public origin: Vec2;
/**
@@ -1936,13 +1956,39 @@ module Phaser.Components {
*/
public rotation: number;
/**
* The center of the Sprite after taking scaling into consideration
* The distance from the center of the transform to the rotation origin.
*/
public distance : number;
/**
* The angle between the center of the transform to the rotation origin.
*/
public angleToCenter : number;
/**
* The offset on the X axis of the origin
*/
public offsetX : number;
/**
* The offset on the Y axis of the origin
*/
public offsetY : number;
/**
* Half the width of the parent sprite, taking into consideration scaling
*/
public halfWidth : number;
/**
* Half the height of the parent sprite, taking into consideration scaling
*/
public halfHeight : number;
/**
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
public centerX : number;
/**
* The center of the Sprite after taking scaling into consideration
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
public centerY : number;
public sin : number;
public cos : number;
}
}
/**
@@ -2669,6 +2715,9 @@ module Phaser {
* @return {Rectangle} A reference to the Sprite.cameraView property
*/
static updateCameraView(camera: Camera, sprite: Sprite): Rectangle;
static getCornersAsPoints(sprite: Sprite): Point[];
static getCornersAsPoints2(sprite: Sprite): Point[];
static getCornersAsPoints3(sprite: Sprite): Point[];
static getAsPoints(sprite: Sprite): Point[];
/**
* Checks to see if a point in 2D world space overlaps this <code>GameObject</code>.
build/phaser.js
+239 -51
View File
@@ -3083,48 +3083,186 @@ var Phaser;
this.scale = new Phaser.Vec2(1, 1);
this.skew = new Phaser.Vec2();
}
Transform.prototype.update = function () {
// Scale & Skew
this._sin = 0;
this._cos = 1;
if(this.parent.texture.renderRotation) {
this._sin = Phaser.GameMath.sinA[this.rotation + this.rotationOffset];
this._cos = Phaser.GameMath.cosA[this.rotation + this.rotationOffset];
}
if(this.parent.texture.flippedX) {
this.local.data[0] = this._cos * -this.scale.x;
this.local.data[3] = (this._sin * -this.scale.x) + this.skew.x;
Transform.prototype.setCache = function () {
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedRotation = this.rotation;
if(this.parent.texture && this.parent.texture.renderRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
} else {
this.local.data[0] = this._cos * this.scale.x;
this.local.data[3] = (this._sin * this.scale.x) + this.skew.x;
this._cachedSin = 0;
this._cachedCos = 1;
}
};
Transform.prototype.update = function () {
// Check cache
var dirty = false;
// 1) Height or Width change (also triggered by a change in scale) or an Origin change
if(this.parent.width !== this._cachedWidth || this.parent.height !== this._cachedHeight || this.origin.x !== this._cachedOriginX || this.origin.y !== this._cachedOriginY) {
this._cachedHalfWidth = this.parent.width / 2;
this._cachedHalfHeight = this.parent.height / 2;
this._cachedOffsetX = this.origin.x * this.parent.width;
this._cachedOffsetY = this.origin.y * this.parent.height;
this._cachedAngleToCenter = Math.atan2(this.halfHeight - this._cachedOffsetY, this.halfWidth - this._cachedOffsetX);
this._cachedDistance = Math.sqrt(((this._cachedOffsetX - this._cachedHalfWidth) * (this._cachedOffsetX - this._cachedHalfWidth)) + ((this._cachedOffsetY - this._cachedHalfHeight) * (this._cachedOffsetY - this._cachedHalfHeight)));
// Store
this._cachedWidth = this.parent.width;
this._cachedHeight = this.parent.height;
this._cachedOriginX = this.origin.x;
this._cachedOriginY = this.origin.y;
dirty = true;
}
// 2) Rotation change
if(this.rotation != this._cachedRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCosAngle = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
this._cachedSinAngle = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD + this._cachedAngleToCenter);
if(this.parent.texture.renderRotation) {
this._cachedSin = Math.sin((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
this._cachedCos = Math.cos((this.rotation + this.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
} else {
this._cachedSin = 0;
this._cachedCos = 1;
}
// Store
this._cachedRotation = this.rotation;
dirty = true;
}
if(dirty) {
this._cachedCenterX = this.parent.x + this._cachedDistance * this._cachedCosAngle;
this._cachedCenterY = this.parent.y + this._cachedDistance * this._cachedSinAngle;
}
// Scale and Skew
if(this.parent.texture.flippedX) {
this.local.data[0] = this._cachedCos * -this.scale.x;
this.local.data[3] = (this._cachedSin * -this.scale.x) + this.skew.x;
} else {
this.local.data[0] = this._cachedCos * this.scale.x;
this.local.data[3] = (this._cachedSin * this.scale.x) + this.skew.x;
}
if(this.parent.texture.flippedY) {
this.local.data[4] = this._cos * -this.scale.y;
this.local.data[1] = -(this._sin * -this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * -this.scale.y;
this.local.data[1] = -(this._cachedSin * -this.scale.y) + this.skew.y;
} else {
this.local.data[4] = this._cos * this.scale.y;
this.local.data[1] = -(this._sin * this.scale.y) + this.skew.y;
this.local.data[4] = this._cachedCos * this.scale.y;
this.local.data[1] = -(this._cachedSin * this.scale.y) + this.skew.y;
}
// Translate
this.local.data[2] = this.parent.x;
this.local.data[5] = this.parent.y;
};
Object.defineProperty(Transform.prototype, "centerX", {
Object.defineProperty(Transform.prototype, "distance", {
get: /**
* The center of the Sprite after taking scaling into consideration
* The distance from the center of the transform to the rotation origin.
*/
function () {
return this.parent.width / 2;
},
return this._cachedDistance;
//return Math.sqrt(((this.offsetX - this.halfWidth) * (this.offsetX - this.halfWidth)) + ((this.offsetY - this.halfHeight) * (this.offsetY - this.halfHeight)));
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "angleToCenter", {
get: /**
* The angle between the center of the transform to the rotation origin.
*/
function () {
return this._cachedAngleToCenter;
//return Math.atan2(this.halfHeight - this.offsetY, this.halfWidth - this.offsetX);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "offsetX", {
get: /**
* The offset on the X axis of the origin
*/
function () {
return this._cachedOffsetX;
//return this.origin.x * this.parent.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "offsetY", {
get: /**
* The offset on the Y axis of the origin
*/
function () {
return this._cachedOffsetY;
//return this.origin.y * this.parent.height;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "halfWidth", {
get: /**
* Half the width of the parent sprite, taking into consideration scaling
*/
function () {
return this._cachedHalfWidth;
//return this.parent.width / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "halfHeight", {
get: /**
* Half the height of the parent sprite, taking into consideration scaling
*/
function () {
return this._cachedHalfHeight;
//return this.parent.height / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "centerX", {
get: /**
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
function () {
return this._cachedCenterX;
//return this.parent.x + this.distance * Math.cos((this.rotation * Math.PI / 180) + this.angleToCenter);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "centerY", {
get: /**
* The center of the Sprite after taking scaling into consideration
* The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
*/
function () {
return this.parent.height / 2;
return this._cachedCenterY;
//return this.parent.y + this.distance * Math.sin((this.rotation * Math.PI / 180) + this.angleToCenter);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "sin", {
get: function () {
return this._cachedSin;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Transform.prototype, "cos", {
get: function () {
return this._cachedCos;
},
enumerable: true,
configurable: true
@@ -4319,6 +4457,7 @@ var Phaser;
this.body = new Phaser.Physics.Body(this, bodyType);
this.worldView = new Phaser.Rectangle(x, y, this.width, this.height);
this.cameraView = new Phaser.Rectangle(x, y, this.width, this.height);
this.transform.setCache();
}
Object.defineProperty(Sprite.prototype, "rotation", {
get: /**
@@ -4394,8 +4533,10 @@ var Phaser;
*/
function () {
this.transform.update();
this.worldView.x = this.x * this.transform.scrollFactor.x;
this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.x = (this.x * this.transform.scrollFactor.x) - (this.width * this.transform.origin.x);
this.worldView.y = (this.y * this.transform.scrollFactor.y) - (this.height * this.transform.origin.y);
//this.worldView.x = this.x * this.transform.scrollFactor.x;
//this.worldView.y = this.y * this.transform.scrollFactor.y;
this.worldView.width = this.width;
this.worldView.height = this.height;
if(this.modified == false && (!this.transform.scale.equals(1) || !this.transform.skew.equals(0) || this.transform.rotation != 0 || this.transform.rotationOffset != 0 || this.texture.flippedX || this.texture.flippedY)) {
@@ -4514,32 +4655,28 @@ var Phaser;
sprite.cameraView.height = sprite.height;
} else {
// If the sprite is rotated around its center we can use this quicker method:
// Work out bounding box
SpriteUtils._sin = Phaser.GameMath.sinA[sprite.rotation];
SpriteUtils._cos = Phaser.GameMath.cosA[sprite.rotation];
if(SpriteUtils._sin < 0) {
SpriteUtils._sin = -SpriteUtils._sin;
}
if(SpriteUtils._cos < 0) {
SpriteUtils._cos = -SpriteUtils._cos;
}
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
// if origin isn't 0.5 we need to work out the difference to apply to the x/y
if(sprite.transform.origin.equals(0.5)) {
// Easy out
if(sprite.transform.origin.x == 0.5 && sprite.transform.origin.y == 0.5) {
SpriteUtils._sin = Math.sin((sprite.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
SpriteUtils._cos = Math.cos((sprite.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
if(SpriteUtils._sin < 0) {
SpriteUtils._sin = -SpriteUtils._sin;
}
if(SpriteUtils._cos < 0) {
SpriteUtils._cos = -SpriteUtils._cos;
}
sprite.cameraView.width = Math.round(sprite.height * SpriteUtils._sin + sprite.width * SpriteUtils._cos);
sprite.cameraView.height = Math.round(sprite.height * SpriteUtils._cos + sprite.width * SpriteUtils._sin);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
} else {
//var ax = sprite.cameraView.width * sprite.transform.origin.x;
//var ay = sprite.cameraView.height * sprite.transform.origin.y;
//var bx = sprite.cameraView.width * 0.5;
//var by = sprite.cameraView.height * 0.5;
//var c = sprite.game.math.distanceBetween(ax, ay, bx, by) / 2;
//console.log('actual x', ax, 'actual y', ay, 'cx', bx, 'cy', by);
sprite.cameraView.x = Math.round(sprite.x - (camera.worldView.x * sprite.transform.scrollFactor.x) - (sprite.cameraView.width * sprite.transform.origin.x));
sprite.cameraView.y = Math.round(sprite.y - (camera.worldView.y * sprite.transform.scrollFactor.y) - (sprite.cameraView.height * sprite.transform.origin.y));
}
/*
// Useful to get the maximum AABB size of any given rect
If you want a single box that covers all angles, just take the half-diagonal of your existing box as the radius of a circle.
The new box has to contain this circle, so it should be a square with side-length equal to twice the radius
(equiv. the diagonal of the original AABB) and with the same center as the original.
*/
}
}
if(sprite.animations.currentFrame !== null && sprite.animations.currentFrame.trimmed) {
//sprite.cameraView.x += sprite.animations.currentFrame.spriteSourceSizeX;
@@ -4549,6 +4686,58 @@ var Phaser;
}
return sprite.cameraView;
};
SpriteUtils.getCornersAsPoints = function getCornersAsPoints(sprite) {
var out = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// Upper Left
out.push(new Phaser.Point(sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Phaser.Point(sprite.x - (sprite.width / 2) * cos - (sprite.height / 2) * sin, sprite.y + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Phaser.Point(sprite.x + (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Phaser.Point(sprite.x - (sprite.width / 2) * cos + (sprite.height / 2) * sin, sprite.y - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
};
SpriteUtils.getCornersAsPoints2 = function getCornersAsPoints2(sprite) {
var out = [];
var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
var cx = sprite.x + (sprite.width / 2) * cos - (sprite.height / 2) * sin;
var cy = sprite.y + (sprite.height / 2) * cos + (sprite.width / 2) * sin;
// Upper Left
out.push(new Phaser.Point(cx + (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Upper Right
out.push(new Phaser.Point(cx - (sprite.width / 2) * cos - (sprite.height / 2) * sin, cy + (sprite.height / 2) * cos - (sprite.width / 2) * sin));
// Bottom Left
out.push(new Phaser.Point(cx + (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos + (sprite.width / 2) * sin));
// Bottom Right
out.push(new Phaser.Point(cx - (sprite.width / 2) * cos + (sprite.height / 2) * sin, cy - (sprite.height / 2) * cos - (sprite.width / 2) * sin));
return out;
};
SpriteUtils.getCornersAsPoints3 = function getCornersAsPoints3(sprite) {
var out = [];
var sin = sprite.transform.sin;
var cos = sprite.transform.cos;
//var sin = Math.sin((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
//var cos = Math.cos((sprite.transform.rotation + sprite.transform.rotationOffset) * Phaser.GameMath.DEG_TO_RAD);
// This = the center point
//var cx = sprite.x + sprite.transform.distance * Math.cos((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
//var cy = sprite.y + sprite.transform.distance * Math.sin((sprite.transform.rotation * Math.PI / 180) + sprite.transform.angleToCenter);
var cx = sprite.transform.centerX;
var cy = sprite.transform.centerY;
// Upper Left
out.push(new Phaser.Point(cx + sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Upper Right
out.push(new Phaser.Point(cx - sprite.transform.halfWidth * cos - sprite.transform.halfHeight * sin, cy + sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
// Bottom Left
out.push(new Phaser.Point(cx + sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos + sprite.transform.halfWidth * sin));
// Bottom Right
out.push(new Phaser.Point(cx - sprite.transform.halfWidth * cos + sprite.transform.halfHeight * sin, cy - sprite.transform.halfHeight * cos - sprite.transform.halfWidth * sin));
return out;
};
SpriteUtils.getAsPoints = function getAsPoints(sprite) {
var out = [];
// top left
@@ -16411,7 +16600,6 @@ var Phaser;
if(sprite.transform.scrollFactor.equals(0)) {
return true;
}
Phaser.SpriteUtils.updateCameraView(camera, sprite);
return Phaser.RectangleUtils.intersects(sprite.cameraView, camera.screenView);
};
CanvasRenderer.prototype.inScreen = function (camera) {
@@ -16579,8 +16767,8 @@ var Phaser;
function (camera, sprite) {
Phaser.SpriteUtils.updateCameraView(camera, sprite);
if(sprite.transform.scale.x == 0 || sprite.transform.scale.y == 0 || sprite.texture.alpha < 0.1 || this.inCamera(camera, sprite) == false) {
//return false;
}
return false;
}
sprite.renderOrderID = this._count;
this._count++;
// Reset our temp vars