Vector collisions preferably via svg or json

Phaser 2 / CE
1

I have a simple shape.

screncap
screncap.png893Ă—772 9.72 KB

Made with Inkscape for example - basic vectors.
Any way to use it as a mask (everything inside the shape) or similar way?
Like registering if mouse is over the shape between vectors like this?

screncap1
screncap1.png947Ă—826 13.9 KB

I know how to change cursor i just need to know how to implement the logic.

2

Can I bump this?

3

Could use some info. Can I bump this?

4

Or could use a hack or workaround or anything for that matter. Really need some info on this. Can I still bump this?

5

If your shape is rectangular(i.e. straight lines, no curves) you can use Phaser.Polygon and construct the shape with points.

Then you can use Phaser.Polygon.contains to check if the mouse is within the shape.

This will not draw or render the shape to the screen though. If you need it to be drawn, you can maybe use graphics and offset it coordinates to match the polygon.

1 Like
6

Looks like something I’m looking for although I got confused when you said “rectangular shape” but now I get it.

7

Well that was anticlimactically easy. I guess all the good things tend to be simple. Thanks man.
I’ll add this example for a good reference as well.

Now the only thing left is to cook up a parser from svg/json to phaser game asset. Shouldn’t be too hard.

8

Also I found a lib that converts SVG path data like
M 0,15 h 90 v 4 z
to an array full of JSON objects like
{ marker: "m", values: [ 0, 15 ] }

You can process every object as an instruction on how to draw the polygon shape.
So I tried doing that and so far it looks okay.

let a = svgPathToCommands( "m 0,370.54165 v -64 h 32 l 32,64 z" );
log = console.log;

let points = []; // array to temporarily store vector points
let pX, pY; // vars for previously added location coordinates

a.forEach(function(v) {
    switch (v.marker) {
        case "m":
            log("m - moveTo: " + v.values[0] + "/" + v.values[1]);
            points.push(new Phaser.Point(v.values[0], v.values[1]));
            break;
        case "v":
            pX = points[points.length - 1].x;
            pY = points[points.length - 1].y;
            log("v - vertical: " + v.values[0]);
            points.push(new Phaser.Point(pX, pY + v.values[0]));
            break;
        case "h":
            pX = points[points.length - 1].x;
            pY = points[points.length - 1].y;
            log("h - horizontal: " + v.values[0]);
            points.push(new Phaser.Point(pX + v.values[0], pY));
            break;
        case "l":
            pX = points[points.length - 1].x;
            pY = points[points.length - 1].y;
            log("l - lineTo: ");
            points.push(new Phaser.Point(pX + v.values[0], pY + v.values[1]));
            break;
        case "z":
            let start = points[0];
            log("z - back to start: " + start.x + "/" + start.y);
            points.push(new Phaser.Point(start.x, start.y));
            break;
        default:
            log(v)
            break;
    }
});

poly = new Phaser.Polygon();
poly.setTo(points);

polyGraphics = game.add.graphics(0, 0);

polyGraphics.beginFill(0xFF33ff);
polyGraphics.drawPolygon(poly.points);
polyGraphics.endFill();

But this needs more stuff in it. I have a feeling I’m reinventing the bicycle though.

1 Like