Adjuntar mi sprite con Box2d

Estoy codificando Javascript (HTML5) con Box2D. Y quiero preguntar cómo adjuntar Sprite con Box2D.

Esta es la 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 ); } 

y esto es function Objeto:

 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); } 

y lo dibujo:

  var m_Circle = new Circle(); m_Circle.Draw(context); 

El problema es la position del círculo, y la position del cuerpo físico de Box2D no es lo mismo.

Tendrás que actualizar la position de los objects del círculo para que coincida con la del cuerpo de box2D, o simplemente excluir la position del object del círculo, y siempre dibujar usando la position del box2D.

Si conserva una reference al cuerpo cuando lo crea, puede acceder al puesto utilizando el método GetPosition:

 var p = ph._body.GetPosition(); circle.m_Position.x = (px / SCALE) - (circle.size.x / 2); circle.m_Position.y = (py / SCALE) - (circle.size.y / 2); 

Sin embargo, tenga en count dos cosas:

  1. Debe ajustar la escala (por lo general, una escala traducida establecida de 0.1 funciona bien. Debe traducir cada vez que obtiene / establece la position de los píxeles a la escala que desea usar en Box2D.

  2. Las posiciones en box2D se basan en el centro de un object, no en la parte superior izquierda utilizada en el dibujo de canvas. De ahí por qué el código anterior compensa la position por el tamaño del círculo.

Espero que todo eso ayude