Hoang Ha's Blog

Trong 2 bài viết trước tôi đã trình bày cho bạn thấy được cấu trúc đơn giản để tạo ra world và các đối tượng trong Box2d. Nó có thể tốn thêm một chút thời gian để bạn có thể hiểu rõ hơn. Bạn phải thấu hiểu những đối tượng này để mở rộng thêm những chức năng tuyệt vời của Box2d. Trong phần này chúng ta sẽ tìm hiểu thêm về fixture.

Polygon
Tiếp theo đoạn code trình bày làm thế nào một đối tượng hình đa giác (polygon shape) được tạo, thay vì dùng SetAsBox, chúng ta sử dụng SetAsArray trong thời điểm này. vị trí của mỗi đỉnh của đa giác (polygon) được mô tả như một vector đặt từ vị trí của đối tượng tới vị trí đỉnh liền kề. Số đỉnh tối đa là 8 và bạn nên định nghĩa nó theo chiều kim đồng hồ. Và bạn đừng bao giờ tạo đa giác lõm:

fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsArray([
       new b2Vec2(0.05 , 0),
       new b2Vec2(0.35, 0.15),
       new b2Vec2(0.5, 0.2),
       new b2Vec2(-1.5 , 1.2),
       new b2Vec2(-0.35, 0.15),
       new b2Vec2(-1.05, 0.0),
       ]);

Khi tạo một hình dạng đa giác sử dụng Box2dweb, chúng ta hãy quan sát thật kỹ sự khác nhau giữa việc tạo ra đa giác lồi và đa giác lõm. Khi bạn tạo ra một đa giác lõm, các đa giác này có những hành động bật ra rất kỳ quặc khi va chạm với mặt đất hay bức tường dựng sẵn. Điều đó lý giải tại sao khi sử dụng Box2dweb để tạo ra một hình dạng đa giác chúng ta luôn trung thành với đa giác lồi.

Multiple Fixtures

Chúng ta cùng nhau đi tìm hiểu các công đoạn tạo ra một chiếc xe Car.

Thật sự nó khá đơn giản. Bạn chỉ cần tạo ra các bộ phận (multiple fixtures) và thêm chúng tới đối tượng body Car. Về các hình dạng tròn, bạn có thể sử dụng SetLocalPosition với một vector để mô tả vị trí mà hình này được ghép vào. Còn với các hình dạng hộp, bạn có thể sử dụng SetAsOrientedBox để làm việc đó. Nhưng đối với đa giác nó được định nghĩa bởi các đỉnh (vertices), nó không có bất kỳ phương thức nào hỗ trợ làm điều đó. Các đỉnh này luôn có mối liên hệ với vị trí của chính đối tượng.

var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(12,6.5) // 'fixDef' defines the car body 

var fixDef = new b2FixtureDef(); 
fixDef.density = 30;
fixDef.friction = 0.1; 
fixDef.restitution = 1; 
fixDef.shape = new b2PolygonShape();
fixDef.shape.SetAsArray([ 
new b2Vec2(0.5 , -1), 
new b2Vec2(1, -0.5), 
new b2Vec2(1.5, -0.5), 
new b2Vec2(1.5 , 0), 
new b2Vec2(-1.5, 0),
new b2Vec2(-1.5, -0.5), 
new b2Vec2(-1., -0.5),
new b2Vec2(-0.5 , -1) ]); 


var wheel1 = new b2FixtureDef();
wheel1.shape = new b2CircleShape(0.2)
wheel1.shape.SetLocalPosition( new b2Vec2(-0.8 ,0.1)) 


var wheel2 = new b2FixtureDef(); 
wheel2.shape = new b2CircleShape(0.2) 
wheel2.shape.SetLocalPosition( new b2Vec2(0.8 ,0.1)) 
//notice properties such as density isn't defined, 
//then value from fixDef above will be used.
 
var car = world.CreateBody(bodyDef) //add three components above to the 'car' object car.CreateFixture(fixDef); 
car.CreateFixture(wheel1); 
car.CreateFixture(wheel2);

Đây là toàn bộ source mô tả cho bài viết:

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 , 
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape , 
b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef , 
b2DebugDraw = Box2D.Dynamics.b2DebugDraw; 

//create world 
var world = new b2World(new b2Vec2(0, 10), true); 
//create Mr Concave 
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.SetAsArray([ new b2Vec2(0.05 , 0), 
new b2Vec2(0.35, 0.15), 
new b2Vec2(0.5, 0.2), 
new b2Vec2(-1.5 , 1.2),
new b2Vec2(-0.35, 0.15), 
new b2Vec2(-1.05, 0.0), ]);
 
var concave = world.CreateBody(bodyDef) 
concave.CreateFixture(fixDef); 

// using multiple fixtures to make a car 
var bodyDef = new b2BodyDef; 
bodyDef.type = b2Body.b2_dynamicBody; 
bodyDef.position.Set(12,6.5) 

var fixDef = new b2FixtureDef; 
fixDef.density = 30; 
fixDef.friction = 0.1; 
fixDef.restitution = 1; 
fixDef.shape = new b2PolygonShape //fixDef.shape.SetAsBox(1,1) 

fixDef.shape.SetAsArray([ new b2Vec2(0.5 , -1), 
new b2Vec2(1, -0.5), 
new b2Vec2(1.5, -0.5), 
new b2Vec2(1.5 , 0), 
new b2Vec2(-1.5, 0), 
new b2Vec2(-1.5, -0.5), 
new b2Vec2(-1., -0.5), 
new b2Vec2(-0.5 , -1) ]); 

var wheel1 = new b2FixtureDef; 
wheel1.shape = new b2CircleShape(0.2) 
wheel1.shape.SetLocalPosition( new b2Vec2(-0.8 ,0.1))
 
var wheel2 = new b2FixtureDef; 
wheel2.shape = new b2CircleShape(0.2) 
wheel2.shape.SetLocalPosition( new b2Vec2(0.8 ,0.1)) 


var car = world.CreateBody(bodyDef) 
car.CreateFixture(fixDef); 
car.CreateFixture(wheel1); 
car.CreateFixture(wheel2); 

//create walls and floor ceiling 
bodyDef.type = b2Body.b2_staticBody; 
var fixDef = new b2FixtureDef; //fixDef.density = 10.0; 
fixDef.friction = 0.5; 
fixDef.restitution =0; 
fixDef.shape = new b2PolygonShape; 
fixDef.shape.SetAsBox(15, 2); 

bodyDef.position.Set(8, 10);
world.CreateBody(bodyDef).CreateFixture(fixDef);

bodyDef.position.Set(8, -2.2); 
world.CreateBody(bodyDef).CreateFixture(fixDef); 
fixDef.shape.SetAsBox(2, 15); 
bodyDef.position.Set(-2.2, 12); 
world.CreateBody(bodyDef).CreateFixture(fixDef); 
bodyDef.position.Set(14.2, 12); 
world.CreateBody(bodyDef).CreateFixture(fixDef); 

//ramp 
fixDef.shape.SetAsBox(15, 5); bodyDef.position.Set(18, 9.5); 
bodyDef.angle=-0.3; 
world.CreateBody(bodyDef).CreateFixture(fixDef); 

//setup debug draw 
var debugDraw = new b2DebugDraw(); debugDraw.SetSprite(document.getElementById("canvas").getContext("2d")); 
debugDraw.SetDrawScale(50.0);
debugDraw.SetFillAlpha(0.3); 
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(); 

function swtkeyboard(e){ 
var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit. 
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode 
var actualkey=String.fromCharCode(unicode) 
if (actualkey=="r") history.go();} 
document.onkeypress=swtkeyboard 
};

Trong bài viết này, chúng ta mới thảo luận về việc dùng Box2dweb để tạo ra đa giác và các bộ phận cố định. Trong bài viết sau, chúng ta sẽ tập trung vào việc làm thế nào các đối tượng được tạo ra một cách riêng biệt và có những chuyển động tương ứng.