Drawing Custom Shapes

[ninemind]

If I have an array of x,y points, how can I draw a shape on the canvas that passes through those points either as straight lines or curves and also use it as a collision shape. These shapes may not always be solid.  For example I might draw a shape that looks like the letter "A" where there is a triangle hole in the shape who's borders will have collision.

[ninemind]

I have figured out how to draw custom shapes and even turn those shapes into sprites using PIXI.Graphics().  I'm still unsure how to make a collision shape that matches the shape I drew though.  Anybody?

[enpu]

I assume that you are using p2 physics?

 

You should take a look at p2 demos/docs and see if you can figure that out:

https://github.com/schteppe/p2.js

 

I have not yet myself used p2 physics with polygon shapes.

[ninemind]

I will be using p2.js physics later on in development.  Are Panda.js collision shapes not compatible with p2.js?

[enpu]

Panda physics only support rectangle and circle shapes, and those are not compatible with p2.

 

So you should really start using p2 if you need more advanced physics in your game.

[ninemind]

I think I figured out how to create complex collision shapes with p2.js using p2.Convex() but I'm having trouble displaying the shape on the Panda.js canvas with DebugDraw.  I am using the Panda.js files from the development branch as well as p2.js from your plugins on github but I see nothing being displayed. Even with simple p2.Circle's or p2.Rectangle's I see nothing.

[brianbrown]

Sorry to bring up an old topic, but how did you manage to draw shapes with PIXI.Graphics? I've looked through the source code, but I can't get it to work.

[enpu]

Simple example on using Graphics:

var grap = new game.Graphics();grap.beginFill(0xffffff);grap.drawRect(0, 0, 100, 100);grap.position.set(200, 200);grap.addTo(this.stage);

http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html

[brianbrown]

Thank you enpu!