上一次我们创建了World和body并且看到了!之后的效果!现在我们来添加鼠标交互!
在box2d中没有直接提供对鼠标操作的事件的监听!
在box2d中为我们提供了一个mouseJoint来和其他body进行鼠标交互,我们都知道Joint是用来连接body与body的所以在我们的交互中还会出现另外一个body一个是我们点击的body而另一个则是我们系统给我们默认提供的一个body,world.GetGroundBody();就可以得到!
鼠标交互主要函数必须在什么mousedown啊mouseup之类的方法里面!
那既然要叫互,当我们点下的时候我么就必须得拿到点的是谁!
所以我们先从mouseDown看,当然记得给canvas注册监听
function mouseDown(e){
//必须设置,才能在getBodyAtMouse中获取
mouseX = e.offsetX / drawScale;//把屏幕坐标转换为物理坐标
mouseY = e.offsetY / drawScale;
isMouseDown = true;
document.addEventListener("mousemove", mouseMove, true);
if(isMouseDown && (!mouseJoint)) {
var body = getBodyAtMouse();//看看我们点的谁..并返回!
if(body) {
var md = new b2MouseJointDef();//创建主角——MouseJoint
md.bodyA = world.GetGroundBody();
md.bodyB = body;
md.target.Set(mouseX, mouseY);
md.collideConnected = true;
md.maxForce = 300.0 * body.GetMass();
mouseJoint = world.CreateJoint(md);
body.SetAwake(true);
};
};
};
所以当我们点下的时候我们做了两件事!
1.我们点的哪!根据那个哪找出点的谁也就是getBodyAtMouse方法的工作!找到了的话!确定我们不是什么都没点着! 然后呵呵!
2.创建mouseJoint并为其设置连接的两个body,bodyA和bodyB
现在我们看看 getBodyAtMouse
mousePVec = new b2Vec2(mouseX, mouseY);
var aabb = new b2AABB();
aabb.lowerBound.Set(mouseX - 0.001, mouseY - 0.001);
aabb.upperBound.Set(mouseX + 0.001, mouseY + 0.001);
// Query the world for overlapping shapes.
selectedBody = null;
world.QueryAABB(getBodyCallBack, aabb);
return selectedBody;
};
根据点击的的位置确定一个范围Query;
这时候我们点到了,也知道点的谁!那就可以处理了!在move函数我们让这body跟随鼠标吧
mouseX = e.offsetX / drawScale;
mouseY = e.offsetY / drawScale;
if(mouseJoint) {
if(isMouseDown) {
mouseJoint.SetTarget( new b2Vec2(mouseX, mouseY));
} }};
up的时候清场!
document.removeEventListener("mousemove", mouseMove, true);
isMouseDown = false;
mouseX = 0;
mouseY = 0;
if(mouseJoint){
world.DestroyJoint(mouseJoint);
mouseJoint = null;
}};
So........
所有代码: