Thêm phần tử SVG hoặc HTML5 hiện có vào một Box2D Thế giới

Question

Tôi có biểu tượng SVG được tạo thành từ các yếu tố chủ yếu. Tôi muốn làm sống động điều này, hoặc cụ thể hơn là thả nó vào một "thế giới trọng lực". Tôi đã hy vọng sẽ sử dụng Box2D (cổng web).

Tôi là một noob đối với Box2D và Canvas thực sự, nhưng tôi đã chuyển đổi SVG thành canvas HTML5 bằng cách sử dụng canvg và bây giờ tôi đang đọc qua hướng dẫn bắt đầu cho Box2dWeb và tôi có thể xem cách tạo ra một thế giới với trọng lực, nhưng tôi không thể tìm thấy bất kỳ ví dụ nào về việc đi bộ một SVG hoặc Canvas hiện có và chỉ cần thêm các hình dạng vào thế giới đó.

Dường như bạn cần sử dụng các phương pháp vẽ Box2D. Bất cứ ai có thể chỉ cho tôi một ví dụ đơn giản có một bộ hình dạng hiện có (SVG hoặc trên Canvas) và chỉ cần thả chúng vào thế giới trọng lực Box2DWeb để chúng đơn giản sụp đổ xuống đáy, giống như gần như tất cả các bản trình diễn và hướng dẫn Box2D hiện có ?

Lưu ý rằng với CanVG, tôi không tự thêm hình dạng vào Canvas, tạo Canvas cho tôi từ SVG.

Answer 1

Tôi đã hy vọng rằng với một người có tiền thưởng sẽ có thể minh họa cho tôi "thế giới xin chào" của "lực hấp dẫn" t có thể animate một số hình dạng tùy ý. Các bài viết và liên kết tôi đã được hiển thị (và tìm thấy) cho đến nay phức tạp hơn nhiều so với tôi đang tìm kiếm.

Trong khi tôi ghét trả lời câu hỏi của riêng mình, tôi chỉ muốn đặt thanh. Đây là chính xác những gì tôi đang tìm kiếm;

http://mrdoob.com/projects/chromeexperiments/google-gravity/

Kịch bản này cho mã này được cấp phép theo GPL3 Tôi hiểu và tôi đã thử nó ra thành công trên trang web của tôi. Thực tế, nó chỉ làm cho tất cả các DIV trên trang của tôi bị rơi, vì vậy nó chỉ là vé, và tôi có thể sử dụng nó.

Nó không phải là một tập lệnh đơn giản.Tôi muốn có một mẫu độc lập đơn giản nếu có thể. Không có điều đó, hy vọng câu trả lời này sẽ giúp bất cứ ai khác tìm kiếm một cái gì đó tương tự.

[Cập nhật]

Tôi cũng đã tìm thấy plugin này, mặc dù đó là một chút CPU chuyên sâu và đã làm hỏng Chrome cho tôi.

http://tinybigideas.com/plugins/jquery-gravity/

Tôi vẫn muốn được vui mừng trao tiền thưởng cho bất kỳ câu trả lời tốt hơn.

Answer 2

Bạn có thể thêm bất kỳ thứ gì mình muốn trên đầu hộp2d. Nếu bạn muốn vẽ voi khiêu vũ thay vì hình hộp, điều đó tùy thuộc vào bạn. Nếu không trò chơi sẽ trông khá nhàm chán.

Không có gì ngăn bạn sử dụng SVG, canvas, WebGL hoặc thậm chí HTML với box2d, bạn không cần sử dụng các phương thức vẽ box2d nếu bạn không muốn.

Xem this blogpost (và code) để sử dụng box2d cùng với raphaël (SVG). Dmitry Baranovskiy (tác giả của Raphaël) cũng có shown some demos của cổng tùy chỉnh2d/trình bao bọc được gọi là newton.js. Nó chưa được phát hành AFAIK, nhưng nó hứa hẹn một API đơn giản hơn và giống javascript hơn.

Answer 3

Tôi thực sự không biết 'Box2d' và tôi không chắc liệu đây có phải là ý của bạn hay không nhưng chỉ cần làm rõ nếu bạn cần đến nó, trong HTML5, nó hoạt động như nền hoặc phong cách đến một số <table>, Nếu bạn không biết chỉ là một thứ giống như một bảng trong MS Word.

Canvas Sample:

<canvas id="myCanvas" width="200" height="100"></canvas> 

More Màu & Kiểu:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> 

Và nếu được phép trong 'Box2D' thêm một số javascript:

<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    ctx.fillStyle="#FF0000"; 
    ctx.fillRect(0,0,150,75); 
</script> 

Answer 4

Tôi khá chắc chắn rằng đây là những gì bạn muốn, nó sử dụng Gravity Script (của tập tin quá lớn vì nó bao gồm jQuery và Box2d.js):

Demo: http://jsfiddle.net/SO_AMK/Cf7jn/

JavaScript: Không! Đó là cấu hình mặc định của nó.

Answer 5

Hãy kiểm tra các liên kết,

1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE

Về các yếu tố html để áp dụng hiệu ứng Box2D tôi cũng không thể tìm thấy bất kỳ liên kết khác mong đợi một trong những bạn đã đề cập trong câu trả lời của bạn.

Answer 6

Vâng, newton.js của Dmitry chưa được công khai. Nhưng giống như @cirrus, tôi cần một cái gì đó tương tự. Vì vậy, tôi đã đi trước và tạo newton.js của riêng mình. Nó không phải là cũng được thử nghiệm, nhưng có API tương tự như những gì tôi có thể thấy trong video Dmitry của + yêu cầu của riêng tôi (Tôi muốn tạo ra một công cụ trò chơi trên đầu trang của Raphael là một renderer)

Hãy ngã ba tại - https://github.com/dbose/newton.js

@cirrus, nó cũng có test.html đơn giản, lấy một phần tử Raphael đơn giản và thêm nó vào hộp thoại Box2D "world"

Theo ngữ cảnh, tôi cần điều này vì cốt lõi của ứng dụng (Mixow) là trình chỉnh sửa Raphael và sau đó tôi muốn tạo ra một nhà sản xuất trò chơi. (http://www.mixow.com)