My OperaRender và Time
Thursday, October 25, 2012 3:21:47 PM
Là một physics engine, Box2d chịu trách nhiệm cho hầu hết các yếu tố vật lý - mô tả những thứ mà nó xảy ra trong thế giới vật lý.
Điều này có nghĩa là bạn không thể nhìn thấy bất kỳ thứ gì trên màn hình trừ khi bạn thể hiện nó ra. Thường thì khi chúng ta sử dụng javascript với trình duyệt như là một nền tảng, những chức năng mới của HTML5 sẽ được đưa ra trên stage, nhưng được sắp xếp một cách đơn giản và có tổ chức. Chúng ta hãy tập trung vào các đối tượng vật lý, và chỉ sử dụng canvas trong HTML5. Đoạn code bên dưới sẽ mô tả cách một đối tượng DebugDraw sẽ làm việc:
Scale được sử dụng để chuyển đổi những thứ từ meter tới pixel và đặc trung thiết lập tới 30 (1m=30px). Sau đó chúng ta cần cấu hình thời gian và đặt nó vào trong phương thức update():
Dòng code world.Step(1 / 60, 10, 10); là khá quan trọng. Các tham số trong đó như sau: 1/60 có nghĩa là 60 FPS; tham số tiếp theo là 10 - tốc độ lặp và tham số cuối cùng là vị trí lặp. Các tham số này sẽ điều khiển sự chính xác vật lý của các đối tượng trong game. Nếu bạn thiết lập nó quá cao, chúng ta có thể thấy đầy đủ hơn các hiệu ứng vật lý, hiệu suất và tốc độ game cũng sẽ bị ảnh hưởng.
Ví dụ hoàn chỉnh dưới đây sẽ cho chúng ta thấy cách mà các đối tượng của Box2d kết hợp với nhau:
Tạo file Index.html:
Chúng ta hãy chú ý tới đoạn code từ dòng var holderDef = new b2BodyDef; tới var debugDraw = new b2DebugDraw();Tôi chỉ định nghĩa bodyDef của nó nhưng sử dụng cùng fixDef như là happyBox.
Từ dòng var b2Vec2 = Box2D.Common.Math.b2Vec2 tới dòng b2DebugDraw = Box2D.Dynamics.b2DebugDraw; chỉ đơn giản thay vì dùng ‘Box2D. Dynamics. b2FixtureDef’ thì chúng ta chỉ cần dùng b2FixtureDef cho ngắn gọn
Điều này có nghĩa là bạn không thể nhìn thấy bất kỳ thứ gì trên màn hình trừ khi bạn thể hiện nó ra. Thường thì khi chúng ta sử dụng javascript với trình duyệt như là một nền tảng, những chức năng mới của HTML5 sẽ được đưa ra trên stage, nhưng được sắp xếp một cách đơn giản và có tổ chức. Chúng ta hãy tập trung vào các đối tượng vật lý, và chỉ sử dụng canvas trong HTML5. Đoạn code bên dưới sẽ mô tả cách một đối tượng DebugDraw sẽ làm việc:
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
debugDraw.SetDrawScale(30); //define scale - tỷ lệ
debugDraw.SetFillAlpha(0.3); //define transparency - sự trong suốt
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
Scale được sử dụng để chuyển đổi những thứ từ meter tới pixel và đặc trung thiết lập tới 30 (1m=30px). Sau đó chúng ta cần cấu hình thời gian và đặt nó vào trong phương thức update():
function update()
{
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
};
Dòng code world.Step(1 / 60, 10, 10); là khá quan trọng. Các tham số trong đó như sau: 1/60 có nghĩa là 60 FPS; tham số tiếp theo là 10 - tốc độ lặp và tham số cuối cùng là vị trí lặp. Các tham số này sẽ điều khiển sự chính xác vật lý của các đối tượng trong game. Nếu bạn thiết lập nó quá cao, chúng ta có thể thấy đầy đủ hơn các hiệu ứng vật lý, hiệu suất và tốc độ game cũng sẽ bị ảnh hưởng.
Ví dụ hoàn chỉnh dưới đây sẽ cho chúng ta thấy cách mà các đối tượng của Box2d kết hợp với nhau:
Tạo file Index.html:
<html>
<head>
<title>Arch!tect’s Box2dweb study notes 01</title>
</head>
<body>
<canvas id="canvas" width=100" height="350"></canvas>
</body>
<script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript">
var b2Vec2 = Box2D.Common.Math.b2Vec2 ,
b2BodyDef = Box2D.Dynamics.b2BodyDef ,
b2Body = Box2D.Dynamics.b2Body ,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef ,
b2World = Box2D.Dynamics.b2World ,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape ,
b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
//create world
var world = new b2World(new b2Vec2(0, 10), true);
//create Mr happyBox
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(2, 2);
var fixDef = new b2FixtureDef;
fixDef.density = 10.0;
fixDef.friction = 0.5;
fixDef.restitution =1;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(1, 1);
var happyBox = world.CreateBody(bodyDef)
happyBox.CreateFixture(fixDef);
//create a holder
var holderDef = new b2BodyDef;
holderDef.type = b2Body.b2_staticBody;
holderDef.position.Set(2, 10);
var holder = world.CreateBody(holderDef)
holder.CreateFixture(fixDef);
//setup debug draw
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite( document.getElementById ("canvas").getContext("2d") ); debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.setInterval(update, 1000 / 60);
//update
function update()
{
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
};
</script>
</html>
Chúng ta hãy chú ý tới đoạn code từ dòng var holderDef = new b2BodyDef; tới var debugDraw = new b2DebugDraw();Tôi chỉ định nghĩa bodyDef của nó nhưng sử dụng cùng fixDef như là happyBox.
Từ dòng var b2Vec2 = Box2D.Common.Math.b2Vec2 tới dòng b2DebugDraw = Box2D.Dynamics.b2DebugDraw; chỉ đơn giản thay vì dùng ‘Box2D. Dynamics. b2FixtureDef’ thì chúng ta chỉ cần dùng b2FixtureDef cho ngắn gọn
