mirror of
https://github.com/wassname/phaser.git
synced 2026-06-27 16:10:15 +08:00
Phaser.Line added to the group of geometry classes, with full point on line/segment and intersection tests (see new examples)
This commit is contained in:
photonstorm
@@ -0,0 +1,80 @@
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
|
||||
|
||||
}
|
||||
|
||||
var handle1;
|
||||
var handle2;
|
||||
var handle3;
|
||||
var handle4;
|
||||
|
||||
var line1;
|
||||
var line2;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#124184';
|
||||
|
||||
handle1 = game.add.sprite(100, 200, 'balls', 0);
|
||||
handle1.inputEnabled = true;
|
||||
handle1.input.enableDrag(true);
|
||||
|
||||
handle2 = game.add.sprite(400, 300, 'balls', 0);
|
||||
handle2.inputEnabled = true;
|
||||
handle2.input.enableDrag(true);
|
||||
|
||||
handle3 = game.add.sprite(200, 400, 'balls', 1);
|
||||
handle3.inputEnabled = true;
|
||||
handle3.input.enableDrag(true);
|
||||
|
||||
handle4 = game.add.sprite(500, 500, 'balls', 1);
|
||||
handle4.inputEnabled = true;
|
||||
handle4.input.enableDrag(true);
|
||||
|
||||
line1 = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);
|
||||
line2 = new Phaser.Line(handle3.x, handle3.y, handle4.x, handle4.y);
|
||||
|
||||
}
|
||||
|
||||
var c = 'rgb(255,255,255)';
|
||||
var p = new Phaser.Point();
|
||||
|
||||
function update() {
|
||||
|
||||
line1.fromSprite(handle1, handle2, true);
|
||||
line2.fromSprite(handle3, handle4, true);
|
||||
|
||||
p = line1.intersects(line2, true);
|
||||
|
||||
if (p)
|
||||
{
|
||||
c = 'rgb(0,255,0)';
|
||||
}
|
||||
else
|
||||
{
|
||||
c = 'rgb(255,255,255)';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderLine(line1, c);
|
||||
game.debug.renderLine(line2, c);
|
||||
|
||||
game.debug.renderLineInfo(line1, 32, 32);
|
||||
game.debug.renderLineInfo(line2, 32, 100);
|
||||
|
||||
if (p)
|
||||
{
|
||||
game.context.fillStyle = 'rgb(255,0,255)';
|
||||
game.context.fillRect(p.x - 2, p.y - 2, 5, 5);
|
||||
}
|
||||
|
||||
game.debug.renderText("Drag the handles", 32, 550);
|
||||
|
||||
}
|
||||
+37
-10
@@ -1,17 +1,44 @@
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
|
||||
|
||||
}
|
||||
|
||||
var handle1;
|
||||
var handle2;
|
||||
|
||||
var line1;
|
||||
|
||||
function create() {
|
||||
|
||||
var graphics = game.add.graphics(50,50);
|
||||
game.stage.backgroundColor = '#124184';
|
||||
|
||||
// set a fill and line style
|
||||
graphics.beginFill(0xFF0000);
|
||||
graphics.lineStyle(10, 0xFF0000, 1);
|
||||
|
||||
// draw a shape
|
||||
graphics.moveTo(50,50);
|
||||
graphics.lineTo(250, 50);
|
||||
graphics.endFill();
|
||||
handle1 = game.add.sprite(100, 200, 'balls', 0);
|
||||
handle1.inputEnabled = true;
|
||||
handle1.input.enableDrag(true);
|
||||
|
||||
handle2 = game.add.sprite(400, 300, 'balls', 0);
|
||||
handle2.inputEnabled = true;
|
||||
handle2.input.enableDrag(true);
|
||||
|
||||
line1 = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
line1.fromSprite(handle1, handle2, true);
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderLine(line1);
|
||||
game.debug.renderLineInfo(line1, 32, 32);
|
||||
|
||||
game.debug.renderText("Drag the handles", 32, 550);
|
||||
|
||||
}
|
||||
@@ -7,37 +7,39 @@ function preload() {
|
||||
|
||||
}
|
||||
|
||||
var lineA1;
|
||||
var lineA2;
|
||||
var lineB1;
|
||||
var lineB2;
|
||||
var handle1;
|
||||
var handle2;
|
||||
var handle3;
|
||||
var handle4;
|
||||
|
||||
var line1;
|
||||
var line2;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#124184';
|
||||
|
||||
lineA1 = game.add.sprite(100, 100, 'balls', 0);
|
||||
lineA1.inputEnabled = true;
|
||||
lineA1.input.enableDrag(true);
|
||||
handle1 = game.add.sprite(100, 200, 'balls', 0);
|
||||
handle1.inputEnabled = true;
|
||||
handle1.input.enableDrag(true);
|
||||
|
||||
lineA2 = game.add.sprite(400, 300, 'balls', 0);
|
||||
lineA2.inputEnabled = true;
|
||||
lineA2.input.enableDrag(true);
|
||||
handle2 = game.add.sprite(400, 300, 'balls', 0);
|
||||
handle2.inputEnabled = true;
|
||||
handle2.input.enableDrag(true);
|
||||
|
||||
lineB1 = game.add.sprite(300, 300, 'balls', 1);
|
||||
lineB1.inputEnabled = true;
|
||||
lineB1.input.enableDrag(true);
|
||||
handle3 = game.add.sprite(200, 400, 'balls', 1);
|
||||
handle3.inputEnabled = true;
|
||||
handle3.input.enableDrag(true);
|
||||
|
||||
lineB2 = game.add.sprite(500, 500, 'balls', 1);
|
||||
lineB2.inputEnabled = true;
|
||||
lineB2.input.enableDrag(true);
|
||||
handle4 = game.add.sprite(500, 500, 'balls', 1);
|
||||
handle4.inputEnabled = true;
|
||||
handle4.input.enableDrag(true);
|
||||
|
||||
line1 = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);
|
||||
line2 = new Phaser.Line(handle3.x, handle3.y, handle4.x, handle4.y);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*---------------------------------------------------------------------------
|
||||
Returns an Object with the following properties:
|
||||
intersects -Boolean indicating if an intersection exists.
|
||||
@@ -113,78 +115,15 @@ function lineIntersectPoly(A, B, pArry) {
|
||||
}
|
||||
*/
|
||||
|
||||
//---------------------------------------------------------------
|
||||
//Checks for intersection of Segment if as_seg is true.
|
||||
//Checks for intersection of Line if as_seg is false.
|
||||
//Return intersection of Segment AB and Segment EF as a Point
|
||||
//Return null if there is no intersection
|
||||
//---------------------------------------------------------------
|
||||
|
||||
|
||||
// a, b, e, f = point
|
||||
// as_seg = bool (true)
|
||||
// returns point
|
||||
|
||||
// Adapted from code by Keith Hair
|
||||
function lineIntersectLine(A, B, E, F, as_seg) {
|
||||
|
||||
var ip = { x: 0, y: 0 };
|
||||
var a1 = B.y - A.y;
|
||||
var a2 = F.y - E.y;
|
||||
var b1 = A.x - B.x;
|
||||
var b2 = E.x - F.x;
|
||||
var c1 = (B.x * A.y) - (A.x * B.y);
|
||||
var c2 = (F.x * E.y) - (E.x * F.y);
|
||||
var denom = (a1 * b2) - (a2 * b1);
|
||||
|
||||
if (denom === 0)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
ip.x = ((b1 * c2) - (b2 * c1)) / denom;
|
||||
ip.y = ((a2 * c1) - (a1 * c2)) / denom;
|
||||
|
||||
//---------------------------------------------------
|
||||
//Do checks to see if intersection to endpoints
|
||||
//distance is longer than actual Segments.
|
||||
//Return null if it is with any.
|
||||
//---------------------------------------------------
|
||||
if (as_seg)
|
||||
{
|
||||
if (Math.pow((ip.x - B.x) + (ip.y - B.y), 2) > Math.pow((A.x - B.x) + (A.y - B.y), 2))
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Math.pow((ip.x - A.x) + (ip.y - A.y), 2) > Math.pow((A.x - B.x) + (A.y - B.y), 2))
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Math.pow((ip.x - F.x) + (ip.y - F.y), 2) > Math.pow((E.x - F.x) + (E.y - F.y), 2))
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Math.pow((ip.x - E.x) + (ip.y - E.y), 2) > Math.pow((E.x - F.x) + (E.y - F.y), 2))
|
||||
{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return ip;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
var c = 'rgb(255,255,255)';
|
||||
var p = new Phaser.Point();
|
||||
|
||||
function update() {
|
||||
|
||||
p = lineIntersectLine(lineA1.center, lineA2.center, lineB1.center, lineB2.center, true);
|
||||
line1.fromSprite(handle1, handle2, true);
|
||||
line2.fromSprite(handle3, handle4, true);
|
||||
|
||||
p = line1.intersects(line2, true);
|
||||
|
||||
if (p)
|
||||
{
|
||||
@@ -199,27 +138,16 @@ function update() {
|
||||
|
||||
function render() {
|
||||
|
||||
game.context.strokeStyle = c;
|
||||
game.debug.renderLine(line1, c);
|
||||
game.debug.renderLine(line2, c);
|
||||
|
||||
game.context.beginPath();
|
||||
game.context.moveTo(lineA1.center.x, lineA1.center.y);
|
||||
game.context.lineTo(lineA2.center.x, lineA2.center.y);
|
||||
game.context.closePath();
|
||||
game.context.stroke();
|
||||
|
||||
game.context.beginPath();
|
||||
game.context.moveTo(lineB1.center.x, lineB1.center.y);
|
||||
game.context.lineTo(lineB2.center.x, lineB2.center.y);
|
||||
game.context.closePath();
|
||||
game.context.stroke();
|
||||
game.debug.renderLineInfo(line1, 32, 32);
|
||||
game.debug.renderLineInfo(line2, 32, 100);
|
||||
|
||||
if (p)
|
||||
{
|
||||
game.context.fillStyle = 'rgb(255,0,255)';
|
||||
game.context.fillRect(p.x - 2, p.y - 2, 5, 5);
|
||||
game.debug.renderPointInfo(p, 32, 32);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user