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;
});
}
我正在尝试使用 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;
});
}