Skip to content
This repository has been archived by the owner on May 8, 2018. It is now read-only.

Commit

Permalink
Added new projection code, using more mathematically correct projecti…
Browse files Browse the repository at this point in the history 
…on angle rather than ratio.
  • Loading branch information
@lewster32
lewster32 committed Aug 23, 2014
1 parent b82d2fb commit 01819fe
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 33 deletions.
83 changes: 67 additions & 16 deletions dist/phaser-plugin-isometric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Phaser.Plugin.Isometric = function (game, parent) {
Phaser.Plugin.Isometric.prototype = Object.create(Phaser.Plugin.prototype);
Phaser.Plugin.Isometric.prototype.constructor = Phaser.Plugin.Isometric;

Phaser.Plugin.Isometric.VERSION = '0.8.0';
Phaser.Plugin.Isometric.VERSION = '0.8.1';

// Directional consts
Phaser.Plugin.Isometric.UP = 0;
Expand All @@ -66,10 +66,6 @@ Phaser.Plugin.Isometric.BACKWARDY = 5;
// Type consts
Phaser.Plugin.Isometric.ISOSPRITE = 'isosprite';
Phaser.Plugin.Isometric.ISOARCADE = 'isoarcade';

// Projection angles
Phaser.Plugin.Isometric.CLASSIC = 0.5;
Phaser.Plugin.Isometric.TRUE = 0.6154797093263624;
;/**
* @class Phaser.Plugin.Isometric.Cube
*
Expand Down Expand Up @@ -1701,29 +1697,47 @@ Phaser.Plugin.Isometric.Point3.equals = function (a, b) {
*
* @constructor
* @param {Phaser.Game} game - The current game object.
* @param {number} projectionRatio - The ratio of the axonometric projection.
* @param {number} projectionAngle - The angle of the axonometric projection in radians. Defaults to approx. 0.4636476 (Math.atan(0.5) which is suitable for 2:1 pixel art dimetric)
* @return {Phaser.Plugin.Isometric.Cube} This Cube object.
*/
Phaser.Plugin.Isometric.Projector = function (game, projectionRatio) {
Phaser.Plugin.Isometric.Projector = function (game, projectionAngle) {

/**
* @property {Phaser.Game} game - The current game object.
*/
this.game = game;

/**
* @property {number} projectionRatio - The ratio of the axonometric projection.
* @property {array} _transform - The pre-calculated axonometric transformation values.
* @private
*/
this._transform = null;

/**
* @property {number} _projectionAngle - The cached angle of projection in radians.
* @private
*/
this._projectionAngle = 0;

/**
* @property {number} projectionAngle - The angle of projection in radians.
* @default
*/
this.projectionRatio = projectionRatio || Phaser.Plugin.Isometric.CLASSIC;
this.projectionAngle = projectionAngle || Phaser.Plugin.Isometric.CLASSIC;

/**
* @property {Phaser.Point} anchor - The x and y offset multipliers as a ratio of the game world size.
* @default
*/
this.anchor = new Phaser.Point(0.5, 0);


};

// Projection angles
Phaser.Plugin.Isometric.CLASSIC = Math.atan(0.5);
Phaser.Plugin.Isometric.TRUE = Math.PI / 6;

Phaser.Plugin.Isometric.Projector.prototype = {

/**
Expand All @@ -1738,9 +1752,8 @@ Phaser.Plugin.Isometric.Projector.prototype = {
out = new Phaser.Point();
}

out.x = point3.x - point3.y;
out.y = ((point3.x + point3.y) * this.projectionRatio) - point3.z;

out.x = (point3.x * this._transform[0][0]) + (point3.y * this._transform[1][0]);
out.y = (point3.x * this._transform[0][1]) + (point3.y * this._transform[1][1]) - point3.z;

out.x += this.game.world.width * this.anchor.x;
out.y += this.game.world.height * this.anchor.y;
Expand All @@ -1760,16 +1773,23 @@ Phaser.Plugin.Isometric.Projector.prototype = {
out = new Phaser.Point();
}

out.x = point3.x - point3.y;
out.y = ((point3.x + point3.y) * this.projectionRatio);

out.x = (point3.x * this._transform[0][0]) + (point3.y * this._transform[1][0]);
out.y = (point3.x * this._transform[0][1]) + (point3.y * this._transform[1][1]);

out.x += this.game.world.width * this.anchor.x;
out.y += this.game.world.height * this.anchor.y;

return out;
},

/**
* Use reverse axonometric projection to transform a 2D Point coordinate to a 3D Point3 coordinate. If given the coordinates will be set into the object, otherwise a brand new Point3 object will be created and returned.
* @method Phaser.Plugin.Isometric.Projector#unproject
* @param {Phaser.Plugin.Isometric.Point} point - The Point to project from.
* @param {Phaser.Point3} out - The Point3 to project to.
* @param {number} offsetY - Offset of the Y axis in screen space, to account for differing z heights.
* @return {Phaser.Point3} The transformed Point3.
*/
unproject: function (point, out, offsetY) {
if (typeof out === "undefined") {
out = new Phaser.Point3();
Expand Down Expand Up @@ -1874,7 +1894,38 @@ Phaser.Plugin.Isometric.Projector.prototype = {
}

};
;/**

/**
* @name Phaser.Plugin.Isometric.Projector#projectionAngle
* @property {number} projectionAngle - The angle of axonometric projection.
*/
Object.defineProperty(Phaser.Plugin.Isometric.Projector.prototype, "projectionAngle", {

get: function () {
return this._projectionAngle;
},

set: function (value) {

if (value === this._projectionAngle) {
return;
}

this._projectionAngle = value;

this._transform = [
[
Math.cos(this._projectionAngle),
Math.sin(this._projectionAngle)
],
[
Math.cos(Math.PI - this._projectionAngle),
Math.sin(Math.PI - this._projectionAngle)
]
];
}

});;/**
* @class Phaser.Plugin.Isometric.Body
*
* @classdesc
Expand Down
6 changes: 3 additions & 3 deletions dist/phaser-plugin-isometric.min.js
View file

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions src/Isometric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,3 @@ Phaser.Plugin.Isometric.BACKWARDY = 5;
// Type consts
Phaser.Plugin.Isometric.ISOSPRITE = 'isosprite';
Phaser.Plugin.Isometric.ISOARCADE = 'isoarcade';

// Projection angles
Phaser.Plugin.Isometric.CLASSIC = 0.5;
Phaser.Plugin.Isometric.TRUE = 0.6154797093263624;
68 changes: 58 additions & 10 deletions src/Projector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,47 @@
*
* @constructor
* @param {Phaser.Game} game - The current game object.
* @param {number} projectionRatio - The ratio of the axonometric projection.
* @param {number} projectionAngle - The angle of the axonometric projection in radians. Defaults to approx. 0.4636476 (Math.atan(0.5) which is suitable for 2:1 pixel art dimetric)
* @return {Phaser.Plugin.Isometric.Cube} This Cube object.
*/
Phaser.Plugin.Isometric.Projector = function (game, projectionRatio) {
Phaser.Plugin.Isometric.Projector = function (game, projectionAngle) {

/**
* @property {Phaser.Game} game - The current game object.
*/
this.game = game;

/**
* @property {number} projectionRatio - The ratio of the axonometric projection.
* @property {array} _transform - The pre-calculated axonometric transformation values.
* @private
*/
this._transform = null;

/**
* @property {number} _projectionAngle - The cached angle of projection in radians.
* @private
*/
this._projectionAngle = 0;

/**
* @property {number} projectionAngle - The angle of projection in radians.
* @default
*/
this.projectionRatio = projectionRatio || Phaser.Plugin.Isometric.CLASSIC;
this.projectionAngle = projectionAngle || Phaser.Plugin.Isometric.CLASSIC;

/**
* @property {Phaser.Point} anchor - The x and y offset multipliers as a ratio of the game world size.
* @default
*/
this.anchor = new Phaser.Point(0.5, 0);


};

// Projection angles
Phaser.Plugin.Isometric.CLASSIC = Math.atan(0.5);
Phaser.Plugin.Isometric.TRUE = Math.PI / 6;

Phaser.Plugin.Isometric.Projector.prototype = {

/**
Expand All @@ -43,9 +61,8 @@ Phaser.Plugin.Isometric.Projector.prototype = {
out = new Phaser.Point();
}

out.x = point3.x - point3.y;
out.y = ((point3.x + point3.y) * this.projectionRatio) - point3.z;

out.x = (point3.x * this._transform[0][0]) + (point3.y * this._transform[1][0]);
out.y = (point3.x * this._transform[0][1]) + (point3.y * this._transform[1][1]) - point3.z;

out.x += this.game.world.width * this.anchor.x;
out.y += this.game.world.height * this.anchor.y;
Expand All @@ -65,9 +82,8 @@ Phaser.Plugin.Isometric.Projector.prototype = {
out = new Phaser.Point();
}

out.x = point3.x - point3.y;
out.y = ((point3.x + point3.y) * this.projectionRatio);

out.x = (point3.x * this._transform[0][0]) + (point3.y * this._transform[1][0]);
out.y = (point3.x * this._transform[0][1]) + (point3.y * this._transform[1][1]);

out.x += this.game.world.width * this.anchor.x;
out.y += this.game.world.height * this.anchor.y;
Expand Down Expand Up @@ -187,3 +203,35 @@ Phaser.Plugin.Isometric.Projector.prototype = {
}

};

/**
* @name Phaser.Plugin.Isometric.Projector#projectionAngle
* @property {number} projectionAngle - The angle of axonometric projection.
*/
Object.defineProperty(Phaser.Plugin.Isometric.Projector.prototype, "projectionAngle", {

get: function () {
return this._projectionAngle;
},

set: function (value) {

if (value === this._projectionAngle) {
return;
}

this._projectionAngle = value;

this._transform = [
[
Math.cos(this._projectionAngle),
Math.sin(this._projectionAngle)
],
[
Math.cos(Math.PI - this._projectionAngle),
Math.sin(Math.PI - this._projectionAngle)
]
];
}

});

0 comments on commit 01819fe

Please sign in to comment.