Làm cách nào để vẽ thế giới Box2D của tôi bằng HTML5 Canvas thay vì Gỡ lỗi?

Question

Tôi biết canvas HTML5 khá tốt, tôi biết những điều cơ bản và hình ảnh động sử dụng các vòng lặp, vv

Demo Tôi đang làm việc với: (bấm vào để làm cho hình dạng) http://henry.brown.name/experiments/box2d/example-canvas.html

Những gì tôi không phải là rất quen thuộc với là Box2D. Tôi đang sử dụng cổng Box2DWeb, tôi nghe nó mới hơn Box2D-js, tôi không chắc cái nào là tốt nhất.

Tôi biết cách khởi tạo 'thế giới' và tôi có thể đặt các đối tượng trên thế giới. Sau đó, tôi sử dụng Step để tạo hiệu ứng cho thế giới - tuy nhiên để hiển thị nó trên màn hình cho đến nay tôi chỉ có thể làm cho nó hoạt động với bản vẽ gỡ lỗi vì nó cơ bản làm mọi thứ cho bạn.

Thay vì sử dụng bản vẽ gỡ lỗi, tôi muốn sử dụng canvas để vẽ, ví dụ: ô tô thay vì chỉ một hình vuông. Làm cách nào để gắn vật lý của hình vuông vào hình ảnh của ô tô? Tôi chỉ không thể có được đầu của tôi xung quanh tích hợp vải với Box2D.

Mọi mẹo sẽ được đánh giá ồ ạt!

Cảm ơn

Answer 1

Nếu bạn không quen thuộc với Box2D bạn nên kiểm tra các tài liệu tại http://www.kyucon.com/doc/box2d/. Điều này sẽ cho bạn biết tất cả các thuộc tính bạn cần. Theo hiểu biết của tôi, cách sử dụng Box2D tiêu chuẩn là đính kèm một hình ảnh với userData. Xem hướng dẫn ví dụ này để sử dụng hình ảnh và Canvas.

http://www.jeremyhubble.com/box2d.html

Answer 2

Tôi có cùng một câu hỏi. here là tài liệu về nó. Bạn có thể sử dụng các cuộc gọi như GetBodyList(), GetAngle() và các thành viên như m_position để nhận tất cả những gì bạn cần để vẽ bất kỳ thứ gì sử dụng bất kỳ thư viện nào bạn muốn sử dụng trên canvas.

Answer 3

Tôi đã dành vài ngày qua để thử điều tương tự. tôi thấy Jonny Strömberg's tutorial, mà không phải là siêu detailled nhưng bằng cách phân tích mã tôi thấy làm thế nào ông lấy vị trí của cơ thể:

var b = world.GetBodyList() 

GetBodyList() có vẻ là một mảng lặp đi lặp lại, vì vậy cơ thể tiếp theo là truy cập thông qua b. m_next.

Sau đó bạn có thể sử dụng

b.GetPosition().x 
b.GetPosition().y 
b.GetAngle() 

để lấy tọa độ của cơ thể.

EDIT: mã này là dành cho các thư viện Box2dweb, mà tôi tìm thấy tài liệu tốt hơn so với Box2djs