6

主に要素で構成された SVG ロゴがあります。これをアニメートしたい、具体的には「重力の世界」に落とし込みたい。Box2D (Web ポート) を使用したいと考えていました。

私は Box2D と Canvas の初心者ですが、canvg を使用して SVG を HTML5 キャンバスに変換することまではできました。現在、Box2dWeb の入門チュートリアルを読んでいます。重力ですが、既存の SVG またはキャンバスを歩き、その世界に形状を追加するだけの例は見つかりません。

Box2D 描画メソッドを使用する必要があるようです。既存のほとんどすべての Box2D デモやチュートリアルと同じように、既存の一連の形状 (SVG またはキャンバス上) を単純に Box2DWeb 重力世界にドロップして、単純に下に折りたたむ簡単な例を教えてもらえますか?

CanVG では、自分で Canvas にシェイプを追加するのではなく、SVG から Canvas を作成していることに注意してください。

4

6 に答える 6

2

box2d の上に好きなものを追加できます。箱形ではなく踊る象を描きたい場合は、あなた次第です。そうでなければ、ゲームはかなり退屈に見えます。

box2d で SVG、canvas、WebGL、さらには HTML を使用することを妨げるものは何もありません。必要がなければ、box2d 描画メソッドを使用する必要はありません。

box2d をraphaël (SVG)と一緒に使用する方法については、このブログ投稿 (およびコード) を参照してください。Dmitry Baranovskiy (Raphaël の作者) は、newton.js と呼ばれるカスタム box2d ポート/ラッパーのデモもいくつか示しました。まだリリースされていませんが、よりシンプルでより JavaScript に似た API を約束します。

于 2012-07-05T12:02:48.417 に答える
2

これらのリンクをチェックしてください。

1) JavaScript 開発者向けの Box2D オリエンテーション
2) Box2dweb スタディ ノート シリーズ
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE

box2d 効果を適用するための html 要素については、回答で言及したもの以外のリンクも見つかりません。

于 2012-10-18T10:35:55.993 に答える
1

誰かが任意の形状をアニメーション化できる「重力デモ」の「ハローワールド」を説明してくれる賞金を期待していました。これまでに私が見た (そして見つけた) 記事やリンクは、私が探しているよりもはるかに複雑です。

私自身の質問に答えるのは嫌いですが、基準を設定したいと思います。これはまさに私が探しているものです。

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

このコードのこのスクリプトは GPL3 の下でライセンスされていることを理解しており、自分のサイトで試してみました。実際、それは私のページのすべての DIV を削除するだけなので、それはただのチケットであり、私はそれを使用することができました.

ただし、単純なスクリプトではありません。可能であれば、単純なスタンドアロンのサンプルが望ましいと思います。それができない場合、この回答が似たようなものを探している他の人に役立つことを願っています.

[更新しました]

それ以来、このプラグインも見つけましたが、CPU を少し集中的に使用し、Chrome をクラッシュさせました。

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

より良い回答に対して報奨金を授与できることを嬉しく思います。

于 2012-10-17T14:07:13.017 に答える
1

これはあなたが望むものであると確信しています.Gravity Scriptを使用しています（jQueryとBox2d.jsが含まれているため、ファイルは非常に大きいです）：

デモ: http://jsfiddle.net/SO_AMK/Cf7jn/

JavaScript: なし! それはデフォルト構成にあります。

于 2012-10-17T15:42:30.133 に答える
0

さて、Dmitry の newton.js はまだ公開されていません。しかし、@cirrus のように、似たようなものが必要でした。そこで、独自の newton.js を作成しました。十分にテストされていませんが、ドミトリーのビデオで見ることができるものと同様の API と私自身の要件があります (Raphael の上にレンダラーとしてゲーム エンジンを作成したかったのです)。

フォークしてください - https://github.com/dbose/newton.js

@cirrus、単純なtest.htmlもあり、単純なRaphael要素を取り、Box2Dの「世界」に追加します

文脈上、これが必要だったのは、私のアプリ (Mixow) のコアが Raphael エディターであり、後でそれからゲーム メーカーを作成したかったからです。( http://www.mixow.com )

于 2013-03-10T16:19:46.283 に答える
0

「Box2d」についてはよくわかりませんが、これがあなたの意図するものかどうかはわかりませんが、必要な場所に来るかどうかを明確にするために、HTML5 では、背景またはスタイルを a に設定するように機能します<table>。ご存じない場合は、MS Word の表とほぼ同じです。

サンプルキャンバス:

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

より多くの色とスタイル:

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

「Box2d」で許可されている場合は、javascript を追加します。

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

    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
于 2012-10-17T13:41:38.113 に答える