6

我有一个主要由元素组成的 SVG 标志。我想对此进行动画处理，或者更具体地说，将其放入“重力世界”。我希望使用 Box2D（网络端口）。

我真的是 Box2D 和 Canvas 的菜鸟，但我已经使用canvg将我的 SVG 转换为 HTML5 画布，我现在正在阅读 Box2dWeb 的入门教程，我可以看到如何用重力，但我找不到任何行走现有 SVG 或 Canvas 并简单地将形状添加到该世界的示例。

看起来您需要使用 Box2D 绘图方法。谁能指出一个简单的例子，它采用现有的一组形状（SVG 或 Canvas 上）并将它们简单地放到 Box2DWeb 重力世界上，这样它们就可以简单地折叠到底部，就像几乎所有现有的 Box2D 演示和教程一样？

请注意，使用 CanVG 时，我不是自己将形状添加到 Canvas 中，而是从 SVG 为我创建 Canvas。

4

6 回答 6

2

您可以在 box2d 上添加任何您想要的内容。如果你想画跳舞的大象而不是盒子形状，那取决于你。否则游戏会看起来很无聊。

没有什么能阻止您使用 SVG、canvas、WebGL 甚至 HTML 和 box2d，如果您不想使用，则不需要使用 box2d 绘图方法。

有关将 box2d与raphaël (SVG)一起使用的信息，请参阅此博文（和代码）。Dmitry Baranovskiy（Raphaël 的作者）还展示了一些名为 newton.js 的自定义 box2d 端口/包装器的演示。它尚未发布 AFAIK，但它承诺提供更简单且更像 javascript 的 API。

于 2012-07-05T12:02:48.417 回答
2

请查看这些链接，

1) JavaScript 开发者的 Box2D 方向
2) Box2dweb 学习笔记系列
3) BOX2D JS – HTML5 和 JAVASCRIPT 指南中的物理

关于应用 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 脚本（文件很大，因为它包含 jQuery 和 Box2d.js）：

演示：http: //jsfiddle.net/SO_AMK/Cf7jn/

JavaScript：没有！它在它的默认配置中。

于 2012-10-17T15:42:30.133 回答
0

我真的不知道'Box2d'，我不确定这是否是你的意思，但只是为了澄清你是否需要它，在 HTML5 中，它的工作原理就像将背景或样式设置<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 回答
0

好吧，Dmitry 的 newton.js 尚未公开。但就像@cirrus 一样，我需要类似的东西。所以我继续创建了我自己的 newton.js。它没有经过很好的测试，但具有类似于我在 Dmitry 的视频中看到的 API + 我自己的要求（我想在 Raphael 之上创建一个游戏引擎作为渲染器）

请分叉 - https://github.com/dbose/newton.js

@cirrus，它还有一个简单的 test.html，它采用一个简单的 Raphael 元素并将其添加到 Box2D“世界”

Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)

于 2013-03-10T16:19:46.283 回答