javascript - Box2d.js 与 Processing.js

Question

最近，我通过结合 Processing.js 和 Box2D.js 库来制作一些基于浏览器的简洁模拟，进一步加深了我对 Javascript 的了解。

根据我目前的想法，我试图让用户单击并拖动一个形状，然后在松开鼠标后让它放下。到目前为止，我已经能够弄清楚如何使用 b2MouseJoint 对象来操纵具有 mouseX/mouseY 坐标的主体，但它并不能完全发挥作用。

单击形状时发生的所有事情是它被固定并围绕单击时当前的 mouseX/mouseY 点旋转。

void mousePressed(){
     for(int i = 0; i < circles.size(); i++){   
        //Get body objects from ArrayList
        var obj = circles[i]; 

        // Retrieve shapes from body
        var innerShape = obj.GetShapeList();
        var rad = innerShape.m_radius;

        // Create mouseJoint and add attributes
        var mouseJoint = new b2MouseJointDef();
        mouseJoint.body1 = world.GetGroundBody();

        // Detect body
        if(dist(mouseX,mouseY,obj.m_position.x,obj.m_position.y) < rad){
           Vec2 p = new b2Vec2(mouseX,mouseY);

           mouseJoint.body2 = obj;

           mouseJoint.target = p;
           mouseJoint.maxForce = 10000.0f * obj.GetMass();
           mouseJoint.collideConnected = true;
           mouseJoint.dampingRatio = 0;
           mouseJoint.frequencyHz = 100;
           world.CreateJoint(mouseJoint);      
        }
   }    
}

所以基本上我的问题是，当我按住鼠标时，如何编写才能让 body /形状跟随我的鼠标坐标，而不是仅仅将形状固定到位。

干杯

Answer 1

基本上您所要做的就是添加您现在使用的代码，将 mousePressed 中的坐标也设置为 mouseDragged() 方法，因为这是在鼠标移动时调用的事件方法或按下更多按钮:

void mouseDragged()
{
  // update obj with mouseX and mouseY in this method
}

您可能还想通过在 mousePressed() 期间设置“初始点击”标记变量、在 mouseDragged() 期间更新一组“偏移”变量并在 mouseReleased() 中将偏移量提交给标记来进行更多管理, 以便您可以执行诸如弹回原始位置等操作。