-1
\$\begingroup\$

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) {
    context.drawImage(this.m_Image,
        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);
    this.m_Body.CreateFixture(fixDef);

    m_spriteCircle = new My_Sprite();

    this.Init();
}
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) {
    m_spriteCircle.Draw(context);
}

and I draw it :

   var m_Circle = new Circle();

   m_Circle.Draw(context);
\$\endgroup\$
4
  • 2
    \$\begingroup\$ 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. \$\endgroup\$ Oct 21, 2012 at 12:50
  • \$\begingroup\$ I mean i want to combine image with box2d, not only box2d \$\endgroup\$
    – user919496
    Oct 21, 2012 at 14:10
  • 1
    \$\begingroup\$ 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? \$\endgroup\$
    – House
    Oct 21, 2012 at 14:44
  • \$\begingroup\$ So can you give me a tutorial? \$\endgroup\$
    – user919496
    Oct 21, 2012 at 15:20

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged .