Skip to content

Commit

Permalink
Merge pull request phaserjs#795 from codevinsky/graphics-drawTriangles
Browse files Browse the repository at this point in the history
Graphics.drawTriangles and Polygon.area
photonstorm committed May 13, 2014

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 335ff53 + f10c772 commit e3f8343
Showing 2 changed files with 161 additions and 2 deletions.
86 changes: 86 additions & 0 deletions src/gameobjects/Graphics.js
Original file line number Diff line number Diff line change
@@ -212,6 +212,92 @@ Phaser.Graphics.prototype.drawPolygon = function (poly) {

};

/*
* Draws a single {Phaser.Polygon} triangle from a {Phaser.Point} array
*
* @param {Array<Phaser.Point>} points - An array of Phaser.Points that make up the three vertices of this triangle
* @param {boolean} [cull=false] - Should we check if the triangle is back-facing
* @method Phaser.Graphics.prototype.drawTriangle
*/

Phaser.Graphics.prototype.drawTriangle = function(points, cull) {
var triangle = new Phaser.Polygon(points);
if (cull) {
var cameraToFace = new Phaser.Point(this.game.camera.x - points[0].x, this.game.camera.y - points[0].y);
var ab = new Phaser.Point(points[1].x - points[0].x, points[1].y - points[0].y);
var cb = new Phaser.Point(points[1].x - points[2].x, points[1].y - points[2].y);
var faceNormal = cb.cross(ab);
if (cameraToFace.dot(faceNormal) > 0) {
this.drawPolygon(triangle);
}
} else {
this.drawPolygon(triangle);
}
return;
};

/*
* Draws {Phaser.Polygon} triangles
*
* @param {Array<Phaser.Point>|Array<number>} vertices - An array of Phaser.Points or numbers that make up the vertices of the triangles
* @param {Array<number>} {indices=null} - An array of numbers that describe what order to draw the vertices in
* @param {boolean} [cull=false] - Should we check if the triangle is back-facing
* @method Phaser.Graphics.prototype.drawTriangles
*/

Phaser.Graphics.prototype.drawTriangles = function(vertices, indices, cull) {

var point1 = new Phaser.Point(),
point2 = new Phaser.Point(),
point3 = new Phaser.Point(),
points = [],
i;

if (!indices) {
if(vertices[0] instanceof Phaser.Point) {
for(i = 0; i < vertices.length / 3; i++) {
this.drawTriangle([vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]], cull);
}
} else {
for (i = 0; i < vertices.length / 6; i++) {
point1.x = vertices[i * 6 + 0];
point1.y = vertices[i * 6 + 1];
point2.x = vertices[i * 6 + 2];
point2.y = vertices[i * 6 + 3];
point3.x = vertices[i * 6 + 4];
point3.y = vertices[i * 6 + 5];
this.drawTriangle([point1, point2, point3], cull);
}

}
} else {
if(vertices[0] instanceof Phaser.Point) {
for(i = 0; i < indices.length /3; i++) {
points.push(vertices[indices[i * 3 ]]);
points.push(vertices[indices[i * 3 + 1]]);
points.push(vertices[indices[i * 3 + 2]]);
if(points.length === 3) {
this.drawTriangle(points, cull);
points = [];
}

}
} else {
for (i = 0; i < indices.length; i++) {
point1.x = vertices[indices[i] * 2];
point1.y = vertices[indices[i] * 2 + 1];
points.push(point1.copyTo({}));
if (points.length === 3) {
this.drawTriangle(points, cull);
points = [];
}
}
}
}
};



/**
* Indicates the rotation of the Graphics, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
* Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90.
77 changes: 75 additions & 2 deletions src/geom/Polygon.js
Original file line number Diff line number Diff line change
@@ -43,9 +43,10 @@ Phaser.Polygon = function (points) {
}

/**
* @property {array<Phaser.Point>|array<number>} points - The array of Points.
* @property {array<Phaser.Point>|array<number>} points - The array of vertex Points.
* @private
*/
this.points = points;
this._points = points;

};

@@ -106,5 +107,77 @@ Phaser.Polygon.prototype = {

Phaser.Polygon.prototype.constructor = Phaser.Polygon;

/*
* Sets and modifys the points of this polygon.
*
* @name Phaser.Graphics#fixedToCamera
* @property {array<Phaser.Point>|array<number>} points - The array of vertex points
*/

Object.defineProperty(Phaser.Polygon.prototype, 'points', {
get: function() {
return this._points;
},
set: function(points) {
//if points isn't an array, use arguments as the array
if (!(points instanceof Array))
{
points = Array.prototype.slice.call(arguments);
}

//if this is a flat array of numbers, convert it to points
if (typeof points[0] === 'number')
{
var p = [];

for (var i = 0, len = points.length; i < len; i += 2)
{
p.push(new Phaser.Point(points[i], points[i + 1]));
}

points = p;
}
this._points = points;
}
});

/**
* Returns the area of the polygon.
*
* @name Phaser.Polygon#area
* @readonly
*/

Object.defineProperty(Phaser.Polygon.prototype, 'area', {
get: function() {
var p1, p2, avgHeight, width, i,
y0 = Number.MAX_VALUE,
area = 0;

// Find lowest boundary
for(i = 0; i< this.points.length; i++) {
if(this.points[i].y < y0) {
y0 = this.points[i].y;
}
}

for(i = 0; i< this.points.length; i++) {
p1 = this.points[i];
if(i === this.points.length - 1) {
p2 = this.points[0];
} else {
p2 = this.points[i+1];
}

avgHeight = ((p1.y - y0) + (p2.y - y0)) / 2;
width = p1.x - p2.x;
area += avgHeight * width;
}

return area;
}
});
// Because PIXI uses its own Polygon, we'll replace it with ours to avoid duplicating code or confusion.
PIXI.Polygon = Phaser.Polygon;


0 comments on commit e3f8343

Please sign in to comment.