Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm coding Javascript(HTML5) with Box2D. And I want to ask how to attach Sprite with Box2D.

This is function My sprite:

function My_Sprite() {
    this.m_Image = new Image();
    this.m_Position = new Vector2D(0,0);
    this.m_CurFrame = 0;
    this.m_ColFrame = 0;
    this.m_Size = new Vector2D(0,0);
    this.m_Scale = new Vector2D(0,0);
    this.m_Rotation = 0;
My_Sprite.prototype.constructor = function (_Image_SRC) {

    this.m_Image.src = _Image_SRC;
My_Sprite.prototype.constructor = function (_Image_SRC,_Size,_Col) {

    this.m_Image.src = _Image_SRC;
    this.m_Size = _Size;
    this.m_ColFrame = _Col;
    this.m_Scale = new Vector2D(1, 1);
My_Sprite.prototype.Draw = function (context) {
        this.m_Size.X * (this.m_CurFrame % this.m_ColFrame),
        this.m_Size.Y * parseInt(this.m_CurFrame / this.m_ColFrame),
        this.m_Size.X, this.m_Size.Y,
        this.m_Position.X, this.m_Position.Y,
        this.m_Size.X * this.m_Scale.X, this.m_Size.Y * this.m_Scale.Y

and this is function Object :

function Circle(type, angle, size) {

  //  Circle.prototype = new My_Object();
   // Circle.prototype.constructor = Circle;
   // Circle.prototype.parent = My_Object.prototype;

    this.m_den = 1.0;
    this.m_fri = 0.5;
    this.m_res = 0.2;

    fixDef.density = this.m_den;
    fixDef.friction = this.m_fri;
    fixDef.restitution = this.m_res;
    fixDef.shape = new b2PolygonShape;

    bodyDef.type = type;
    bodyDef.angle = angle;
    bodyDef.userData = m_spriteCircle;

    fixDef.shape = new b2CircleShape(
           Radius / SCALE //radius
    this.m_Body = world.CreateBody(bodyDef);

    m_spriteCircle = new My_Sprite();

Circle.prototype.Init = function () {

    m_spriteCircle.constructor("images/circle.png", new Vector2D(80, 80), 1);
    m_spriteCircle.m_CurFrame = 0;


Circle.prototype.Draw = function (context) {

and I draw it :

   var m_Circle = new Circle();

share|improve this question

closed as too localized by Byte56, Josh Petrie, doppelgreener, Trevor Powell, Nate Nov 6 '12 at 16:00

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

I'm not familiar with Box2D, but what you probably need to do is to create an instance of B2Circle, add it to physics world and after every physics tick set m_Circle.x and .y coordinates to b2Circle.x and .y. Maybe there is a way to tell Box2D to do it automatically for you, if so, it should be described in a beginner's tutorial. – Markus von Broady Oct 21 '12 at 12:50
I mean i want to combine image with box2d, not only box2d – user919496 Oct 21 '12 at 14:10
That sure is a lot of code for such a simple question. What have you tried already? What about it didn't work? Have you tried a tutorial? – Byte56 Oct 21 '12 at 14:44
So can you give me a tutorial? – user919496 Oct 21 '12 at 15:20

The problem is the circle's position, and the position of the Box2D physics body are not the same thing.

You're going to have to either update the circle objects position to match that of the box2D body, or just exclude the position from the circle object, and always draw using the box2D's position.

If you retain a reference to the body when you create it, you can access the position using the GetPosition method:

var p = ph._body.GetPosition();

circle.m_Position.x = (p.x / SCALE) - (circle.size.x / 2);
circle.m_Position.y = (p.y / SCALE) - (circle.size.y / 2);

Keep in mind two things though:

  1. You need to adjust for scale (typically a set translated scale of 0.1 works well. You have to translate whenever you get/set position from pixels to the scale you want to use in Box2D.

  2. Positions in box2D are based on the center of an object, not the top left used in canvas drawing. Hence why the code above offsets the position by the size of the circle.

Hope all that helps.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.