1

我正在尝试创建HTML5类似于 Sushi Cat 游戏的游戏。我按照Emanuele Feronato 的博客文章中的类似教程，然后想出了这个图像中的图片 A 的结构，其中允许灰色轨道相互穿透，而红线是远距离约束。

但问题是当水滴从高处坠落（或撞到角落）时，它会变成图 B 中的样子。

我尝试使用弹簧，不同的约束力，更小的轨道，但它们不能正常工作。

我的问题：

  1. 解决方案是什么？或者我在哪里可以在网上找到解决方案？

  2. 是否有任何其他具有特定功能的 js 物理引擎来执行此任务？

4

3 回答 3

0

等容接头可能是您正在寻找的。正如它的名字所暗示的那样，它试图保持它在创建时的体积，尽管来自外部的冲动，就像一个水气球。 这是一个演示。

可以在此处找到 Box2dweb 的工作示例。

如果您有兴趣使用更多标准关节的创造性应用来创建 blob，那么我想到了这篇文章。

于 2019-12-29T21:41:51.050 回答
0

消除对称性

只需为这些点添加一些额外的约束。当前形状的对称性意味着圆形和对折都是有效和放松的配置。

径向约束。

使用从中心到外部的一条线作为参考，给每个辐条一个偏离该线的角度。

然后每个外部点将按如下方式移动。

获取参考线的角度。

var ang = Math.atan2(refLine.p2.y - refLine.p1.y, refLine.p2.x - refLine.p1.x);

然后对于每条线，将端点移向其所需的相对角度位置。

// line is a spoke line with a property angle that is the angle from the
// reference line
var x = refLine.p1.x;  // get center point
var y = refLine.p2.y;
// get position relative to ref ang
line.x = Math.cos(line.angle + ang) * line.length + x;
line.y = Math.sin(line.angle + ang) * line.length + y;

对每条辐条线执行此操作，并在应用线长约束后应用它。

参考您给出的图像，从中心到 12 点钟的线是参考线，然后其他辐条线将具有如下限制的角度。

  • 1 点钟距离参考 30 度
  • 2点是60
  • 3 是 90 等到 6 在 180 度

而另一个方向

  • 11点是-30度从参考
  • 10点是-60等等

您将能够忽略 6 点钟线，因为给它一个约束会使对象想要向右滚动。

只有一个

现在这意味着对于可能的状态只有一种解决方案，而不是您拥有的许多解决方案。

于 2017-01-04T16:30:19.627 回答
0

斑点折叠成自身的原因是因为重力会挤压斑点点并且距离关节会找到新的有效配置。距离关节的工作只是保持两点之间的给定距离，它并没有真正做任何事情来防止自折叠。

另一种方法是使用棱柱接头（也称为“滑动接头”）。对于棱柱接头，外部斑点圆将从斑点中心沿径向滑动。为了使斑点有弹性，您可以在斑点中心和圆圈之间添加某种弹簧。如果 blob 仍然自我折叠，您可以对棱柱关节添加限制，因此圆圈只能滑动一定距离。

该视频使用RUBE物理编辑器（在引擎盖下使用 box2d ）以类似的方式演示了棱柱关节。

使用p2.js 物理引擎制作了类似的场景，请在此处阅读更多内容。（直接链接到演示）。在 p2.js 演示中构造 Prismatic Joints 的部分代码是：

// Constrain the capsule body to the center body.
// A prismatic constraint lets it move radially from the center body along one axis
var prismatic = new p2.PrismaticConstraint(wheelBody, body, {
  localAnchorA :  [0, 0],
  localAnchorB :  [0, 0],
  localAxisA :    [Math.cos(angle), Math.sin(angle)],
  disableRotationalLock: true, // Let the capsule rotate around its own axis
  collideConnected: true
});

在 JavaScript 中，有几个可用的 Box2D 端口具有 Prismatic Joint。p2.js 具有 PrismaticConstraint。

于 2017-02-09T07:58:26.637 回答