Here is a demo of EXPLODING bodies in Box2dweb. I have used Raycasting and World Querying to get the points for the new Polygons. Here Polygons is referred to as new pieces formed on explosion. Each body is broken into equal pieces when you click on them. The number of pieces can be increased or decreased.

Click on a body to explode.

NOTE: If anyone needs a tutorial on this, please leave a comment or Reply.

By administrator at 01:54:43 AM 13 Comment(s)


is it possible to do this with images? thanks Chris
By chris on 6 Sep, 2012 at 02:04:11 PM
I don't know it exactly but I think you can make use masking technique in Canvas to meet your needs. Please refer this site.
Instead of rendering it using "debugdraw", draw the polygons using lines and set it as a mask and then draw an image by rotating and positioning it correctly and that's the tricky part. Also the problem with this method is there will be a significant drop in framerates with the increase in the number of pieces.
Hope you get the gist of it.
By administrator on 6 Sep, 2012 at 06:50:45 PM
However if your image does not have any texture i.e. it is of a single colour only, you can just draw the polygons using lines and fill it with the same colour. But I don't think you have a single coloured image to break?
By administrator on 6 Sep, 2012 at 07:00:40 PM
Thanks a lot!!!!
By jose on 20 Sep, 2012 at 04:33:44 AM
You're welcome. :)
By administrator on 22 Sep, 2012 at 12:02:20 AM
Can I get a tutorial? Thanks
By Suli Yang on 20 Oct, 2012 at 01:43:28 AM
Hello, I am new to Box2dWeb and I am not able to find a good tutorial on it, if you know some of reliable sources where I can get some beginner level tutorials, please email me and let me know. It would be of very much help. Also, can I get detailed tutorial of your "Explode Bodies", it's really impressive. Thanks :)
By Mukul Bhardwaj on 5 Nov, 2012 at 04:33:04 PM
@Mukul Bhardwaj: A detailed tutorial for this demo is very hard for me write and explain each and every code used. If you want I can explain what I've done to get it working and the steps involved.
And as for some reliable sources.....THIS is a reliable source, I think. :) Just go through first few blog posts.
Actually I made this site for my reference only as I was not able to find some basic tutorials on the internet.
As of now I know only one site for Box2dWeb....here is the link.
By administrator on 7 Nov, 2012 at 11:26:25 PM
While there are lot of websites dedicated to Box2dFlash and Box2d. Here are the links --
By administrator on 7 Nov, 2012 at 11:33:38 PM

U are guru!!))) Awesome site, thx! I hope it will be exist all time)

By Grammka on 13 Dec, 2012 at 10:54:43 AM

@Grammka Thanks a lot. I appreciate it. :)

By administrator on 14 Dec, 2012 at 12:44:58 PM

The demo doesn't work. Clicks cause no effect…

By Villerio on 18 Jul, 2015 at 08:06:40 AM

It's wworking on my Android phone!

By administrator on 18 Jul, 2015 at 11:23:46 AM

Add a Comment

Please enter the email address.Invalid format. (Won't be Displayed)
Notify me of followup comments
Enter the displayed Code: captcha