-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbox2dWithIIO2.html
164 lines (152 loc) · 5.37 KB
/
box2dWithIIO2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box2D IIO 2</title>
<script src="js/Box2dWeb-2.1.a.3.js"></script>
<script src="iio-sdk/iioEngine-1.2.2.js"></script>
</head>
<body>
</body>
<script>
function B2BasicRendering(io) {
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2AABB = Box2D.Collision.b2AABB
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;
//封装了io和box2d create body直接的关系
function createB2dAndIO(bodyDef,fixDef){
return io.addObj(world.CreateBody(bodyDef))
.CreateFixture(fixDef)
.GetShape()
.prepGraphics(io.b2Scale);
}
var world = io.addB2World(new b2World(
new b2Vec2(0, 20) //gravity
, true //allow sleep
));
var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var bodyDef = new b2BodyDef;
//create ground
var sysFill = 'rgba(0,186,255,.4)';
var sysStrok = 'white';
bodyDef.type = b2Body.b2_staticBody;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(15,.5);
bodyDef.position.Set(15,14.5);
createB2dAndIO(bodyDef,fixDef).setFillStyle(sysFill).setStrokeStyle(sysStrok);
bodyDef.position.Set(15,0);
createB2dAndIO(bodyDef,fixDef).setFillStyle(sysFill).setStrokeStyle(sysStrok);
fixDef.shape.SetAsBox(.5,10);
bodyDef.position.Set(0,5);
createB2dAndIO(bodyDef,fixDef).setFillStyle(sysFill).setStrokeStyle(sysStrok);
bodyDef.position.Set(15,5);
createB2dAndIO(bodyDef,fixDef).setFillStyle(sysFill).setStrokeStyle(sysStrok);
//create some objects
var shape,width,height;
bodyDef.type = b2Body.b2_dynamicBody;
for(var i = 0; i < 20; ++i) {
width = Math.random() + 0.1 //half width
height = Math.random() + 0.1 //half height
if(Math.random() > 0.5) {
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(width, height);
} else {
fixDef.shape = new b2CircleShape(width);
}
bodyDef.position.x = Math.random() * 13;
bodyDef.position.y = Math.random() * 10;
shape=io.addObj(world.CreateBody(bodyDef)).CreateFixture(fixDef).GetShape();
if (shape instanceof b2CircleShape)
shape.prepGraphics(io.b2Scale)
.setFillStyle(sysFill)
.setStrokeStyle(sysStrok)
.drawReferenceLine();
else
shape.prepGraphics(io.b2Scale)
.setFillStyle(sysFill)
.setStrokeStyle(sysStrok);
}
//Set the update loop
io.setB2Framerate(60, function(){
if(isMouseDown && (!mouseJoint)) {
var body = getB2BodyAt(mouseX,mouseY);
if(body) {
var md = new b2MouseJointDef();
md.bodyA = world.GetGroundBody();
md.bodyB = body;
md.target.Set(mouseX, mouseY);
md.collideConnected = true;
md.maxForce = 300.0 * body.GetMass();
//joint类不需要像body类和fixture类麻烦
mouseJoint = io.addObj(world.CreateJoint(md).prepGraphics().setStrokeStyle('white').setLineWidth(1));
body.SetAwake(true);
}
}
if(mouseJoint) {
if(isMouseDown) {
mouseJoint.SetTarget(new b2Vec2(mouseX, mouseY));
} else {
world.DestroyJoint(mouseJoint);
io.rmvObj(mouseJoint);
mouseJoint = null;
}
}
});
var mouseX, mouseY, mousePVec, isMouseDown, selectedBody, mouseJoint;
function getB2BodyAt(v,y) {
if (typeof v.x =='undefined')
v=new Box2D.Common.Math.b2Vec2(v,y);
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);
selectedBody = null;
//在world上在aabb范围内查找fixture(obj完全体)，查找到了调用getBodyCB方法
world.QueryAABB(getBodyCB, aabb);
return selectedBody;
}
function getBodyCB(fixture) {
if(fixture.GetBody().GetType() != b2Body.b2_staticBody) {
if(fixture.GetShape().TestPoint(fixture.GetBody().GetTransform(), mousePVec)) {
selectedBody = fixture.GetBody();
return false;
}
}
return true;
}
function mouseDown(e){
e.preventDefault();
isMouseDown = true;
mouseMove(e);
}
function mouseUp(e){
isMouseDown = false;
mouseX = undefined;
mouseY = undefined;
}
function mouseMove(e){
//iio与box2d的计量单位之间换算差值为30倍
mouseX = (io.getEventPosition(e).x) / 30;
mouseY = (io.getEventPosition(e).y) / 30;
}
io.setBGColor('#555');
io.canvas.addEventListener('mousedown', mouseDown);
io.canvas.addEventListener('mouseup', mouseUp);
io.canvas.addEventListener('mousemove', mouseMove);
//鼠标离开canvas还会触发的事件
this.focusOff = function(e){
mouseUp(e)
}
}; iio.start(B2BasicRendering);
</script>
</html>