Using KineticJS with box2dweb
How can I use kineticJS with box2dweb so that collisions can be detected? For example, how can I put a circular border around an image rendered via JS kinetics and apply physics via box2dweb?
Are there any good tutorials on this or codes that can help me? Or is there an efficient way to detect collisions using the kinetic system itself?
source to share
What are you doing:
-
Set up box2d "world" - think of the world as a room on earth (or any other planet)
-
Add "bodies" to the world - bodies are moving or stationary objects that behave according to the physics you have assigned them.
-
For each box2d body, assign a kinematic "skin" - skins are "pretty" kinetic shape objects that will be drawn kinetically on the canvas. For example, in a game, the leather may be a soccer ball.
-
Put the box2d world in motion and listen for the box2d "tick" event - the tick event fires when box2d has figured out the physics that has occurred over the time period you specify. At this point, box2d knows the position and rotation of each box2d body in the box2d world.
-
In the box2d tick event, check the position / rotation of each box2d body and draw a kinetic skin at the same position / rotation in box2dbody.
There is a very good example: http://www.luxanimals.com/blog/article/combining_easel_box2d
This example uses easelJs to draw on canvas, but converting to the kineticJs library is very simple - the same concepts apply.
[edited to provide additional information]
Also, if you don't need all the physics in box2d, here is a very simple 2-round collision test using kineticJs.
function CirclesAreColliding(circle1,circle2){
var dx = circle2.getX() - circle1.getX();
var dy = circle2.getY() - circle1.getY();
if( Math.sqrt( dx*dx + dy*dy ) <= ( circle1.getRadius() + circle2.getRadius() ) {
return true;
}
return false;
}
source to share
this is a tutorial about that. good luck http://www.codeproject.com/Articles/571743/Box2D-and-JavaScript-Part-3
source to share