Famo.us 球拖放,释放时设置速度

Famo.us Balls Drag and Drop, set velocity when released

我正在尝试使用 Famo.us 实现类似于空气曲棍球 table 的效果。这个想法是有多个可以碰撞的圆体(见battle)。

现在我首先关心的是在拖动开始时将球的矢量属性归零。

我正在尝试使用 Particle.reset 中的 'reset()' 方法,但是 运行 遇到了很多问题。这是我目前拥有的 codepen 中的一些代码:

  ball.draggable.on("start", function(pos) {
    var zeroV = new Vector(0, 0, 0);
    // need to remove force here
    ball.circle.reset(pos.position, zeroV, ball.circle.orientation, zeroV);
});

知道如何在我开始拖动后最好地将球上的力归零吗?另外,我如何确定释放速度相对于用户在释放前拖动的速度?

您的两个问题的答案在于从 physics engine in Famo.us.

添加和删除 body 粒子

示例代码如下:jsBin code

注意:此示例并未解决您的整个解决方案,但确实回答了您的问题,应该可以帮助您达到预期的效果。

知道如何在我开始拖动后最好地将球上的力归零吗?

不是将力归零,而是暂时从引擎中分离粒子。

physicsEngine.removeBody(this.particle);

在示例中,我是通过单击创建的圆表面来执行此操作的。

ball.particle = new Circle({
  radius: radius,
  position: [x, y, 0]
});

ball.physicsID = physicsEngine.addBody(ball.particle);
physicsEngine.attach(collision, balls, ball.particle);

ball.on('click', function(){
  if (!this.stopped) {
    physicsEngine.removeBody(this.particle);

  } else {
    this.physicsID = physicsEngine.addBody(this.particle);
    physicsEngine.attach(collision, balls, this.particle);
    balls.push(this.particle);
  }
  console.log('balls', balls);
  this.stopped = !this.stopped;
});

我如何确定释放速度相对于用户在释放前拖动的速度?

当您拖动方形表面并 on('end'... 时,您将速度传递给粒子的创建。您使用拖动端的速度以 setVelocity.

启动粒子运动
ball.particle.setVelocity(velocity);

如您在示例代码中所见:

sync.on('end', function(data){
  if (!surface.createdBall && data.velocity){
    var velocity = data.velocity;
    surface.createdBall = true;
    var endX = position[0] + 0;
    var endY = position[1] + 0;
    createBall(endX, endY, velocity);
  }
});

...

  function createBall(x, y, velocity) {
    var ball = new Surface({
      size: [radius * 2, radius * 2],
      properties: {
        backgroundColor: 'blue',
        borderRadius: (radius * 2) + 'px'
      }
    });
    ball.particle = new Circle({
      radius: radius,
      position: [x, y, 0]
    });

    ball.physicsID = physicsEngine.addBody(ball.particle);
    physicsEngine.attach(collision, balls, ball.particle);

    node.add(ball.particle).add(ball);

    balls.push(ball.particle);
    console.log('created ball', velocity);
    ball.particle.setVelocity(velocity);
    surface.createdBall = false;

    ball.on('click', function(){
      if (!this.stopped) {
        physicsEngine.removeBody(this.particle);

      } else {
        this.physicsID = physicsEngine.addBody(this.particle);
        physicsEngine.attach(collision, balls, this.particle);
        balls.push(this.particle);
      }
      console.log('balls', balls);
      this.stopped = !this.stopped;
    });
  }