5

I know HTML5 canvas fairly well, I know the basics and animation using loops etc.

Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html

What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.

I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.

Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.

Any tips will be massively appreciated!

Thanks

Sabai
  • 1,579
  • 5
  • 24
  • 40
  • 1
    Awesome link, you'll be interested in http://www.uselesspickles.com/jsballs/ , it's got nothing to do with the question, but it's also an awesome JavaScript physics simulation – Ruan Mendes Oct 14 '11 at 12:14
  • 1
    Hey. I was wondering if you got this issue solved. I have the same issue. I have no idea of how to access the parameters like position, velocity, angle of an object. Debug Draw, draws everything using all those parameters. I wanted to know how we can directly access them. – batman Oct 12 '12 at 19:34
  • 1
    Very late response, but yes I got the issue resolved. I will comment within the other answers. – Sabai May 07 '13 at 10:18

3 Answers3

7

I spent the last few days trying the same thing. I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:

var b = world.GetBodyList()

GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.

You can then use 

b.GetPosition().x
b.GetPosition().y
b.GetAngle()

to retrieve the body's coordinates.

EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs

Thibaut
  • 73
  • 2
  • 5
2

If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.

http://www.jeremyhubble.com/box2d.html

Ash Blue
  • 5,344
  • 5
  • 30
  • 36
  • 1
    http://www.jeremyhubble.com/box2d.html ultimately helped me to figure this solution out. My new experiments with Box2D are on my website www.henry.brown.name – Sabai May 07 '13 at 10:20
  • 1
    The box2d docs are great, UI can be a little hard to navigate though. Just be warned that the docs aren't like jQuery. – Ash Blue May 07 '13 at 22:58
1

I had the same question. here is the documentation of it. You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.

batman
  • 5,022
  • 11
  • 52
  • 82