问题标签 [matter.js]

我正在尝试制作一个简单的横向卷轴，扩展本教程。

它使用 Matter.js 和 p5.js

为了左右移动，我得到了 mouseWheel delta。

从那里我可以调用绘图功能

这会移动我所有的 p5.js 图纸。问题是，我如何告诉 Matter.js？我所有的互动现在都被三角洲关闭了。这些框现在在右侧 100 像素处，但交互位于原始位置。

我尝试使用World.translate但它似乎奇怪地移动了身体并且根本没有移动约束。也许这是错误的方法。

我正在构建我的第一个 little matter.js 游戏——PartyGolf。游戏玩法类似于愤怒的小鸟。我想显示一条预测轨迹线以显示球的去向，但我无法在 matte.js 中找到它的可能性

我尝试使用 Phaser 游戏框架，但它不适用于 matter.js。例如http://bl.ocks.org/joyrexus/11220109

我希望仅使用 matter.js 来显示预测线。

我有 4 个身体：2 个球和 2 个平台。

我希望球能够重叠（没有碰撞），但仍然与两个平台发生碰撞。我已经阅读了官方的Matter.js 文档并使用了collisionFilter演示，但仍然无法掌握实现我需要的东西。

任何帮助将不胜感激。

我正在使用Matter.js SVG 形状并让演示在本地工作，并且我试图让它在不使用 jQuery 的情况下工作。这是一个svg 文件供参考。

演示代码（之前使用以下方法检索数据$.get('url-to-svg')：

jQuery 路径数据巧妙地将 d 属性隔开：

<path xmlns="http://www.w3.org/2000/svg" class="st0" d="M 1 75.5 V 58.5 H 140 L 197 1.5 L 322 157.5 L 367 98.5 H 420 V 119.5 H 369 L 320 179.5 L 197 21.5 L 142 74.5 L 1 75.5 z"/>

到目前为止我的代码（我能够执行 AJAX svg 调用来获取数据）：

我注意到我的路径数据看起来像这样（没有空格）：

<path xmlns="http://www.w3.org/2000/svg" class="st0" d="M1,75.5v-17h139l57-57l125,156l45-59h53v21h-51l-49,60l-123-158l-55,53L1,75.5z"/>

我正在寻找的 jQuery 最终结果是顶点数组：

我不确定 jQuery 正在执行哪种类型的循环函数来遍历 path 元素中的所有 d 属性数据。

谢谢 ：）

在睡眠示例（来源）中，身体在几秒钟不活动后进入睡眠状态。这是通过以下方式完成的：

可以检测身体何时睡觉或醒来（使用sleepStartandsleepEnd事件），但我怎样才能让身体开始或结束睡眠呢？

我已经设置了这个 Matter.js 场景，它有三个墙——地面、墙左和墙右。最初设置它们的位置，以便它们恰好位于场景的指定边缘。

这是用墙壁定义场景的代码：

我正在寻找的是一种改变墙壁位置的方法window.resize。所以基本上只是在调整窗口大小时再次在主体上分配相同的大小属性。我该怎么做？我可以通过它们的标签以某种方式改变墙壁的位置，然后只改变position.x和position.y值吗？如果是这样，我如何通过标签选择特定的身体？

背景

我正在努力实现一些目标，但这真的让我发疯。所以任何帮助将不胜感激！

我在 Matter.js 中创建了一个场景，该场景将放置在页面下方的容器中。我希望访问者能够与场景进行交互，拖放尸体。但是允许交互会产生问题，即只要鼠标悬停在画布上，Matter.js 就会阻止用户滚动。

所以为了解决这个问题，我使用以下代码：

这使得用户可以滚动浏览页面，并且仍然能够通过单击和拖动主体与场景进行交互，因为只有滚动事件侦听器被删除。至少在桌面上。

问题

但是，在移动设备上，触摸事件是使用户可以在页面上滚动的事件，因此我还需要从 Matter.js 中的鼠标约束中删除touchmove,touchstart和事件侦听器。touchend像这样：

这就是问题发生的地方。如果我删除触摸事件，用户可以滚动画布，但用户不能与场景交互，因为这需要激活触摸事件。

所以我想知道是否有任何方法可以添加触摸事件但只允许它们在场景中的某些物体上工作？我发现我可以将mouseConstraint.body其用作布尔值，以了解是否单击/触摸了身体。可以以此为基础以某种方式使用它吗？：

我正在使用 Matter.js 物理引擎使用 Phaser 3 创建 HTML5 游戏。游戏同时在屏幕上显示多个对象，包括：

• https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Image.html子类的实例
• （动画游戏对象）子类的实例：https ://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Sprite.html
• 以下对象：https ://photonstorm.github.io/phaser3-docs/MatterJS.Body.html

如果重要，MatterJS.Body 对象是使用生成的fromVertices()（此处的文档：https ://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Factory.html#fromVertices__anchor ）

我希望生成一个Phaser.Physics.Matter.Image具有随机起始位置的新对象，但是，该位置不能与屏幕上已经存在的任何游戏对象重叠。

我知道如何为对象的位置生成随机坐标。我的问题是，如何检查现有对象是否不包含此坐标？

我可以使用 获取所有现有游戏对象的列表this.matter.world.localWorld.bodies)，所以我尝试的是：

1. 生成随机x和y坐标。
2. 遍历this.matter.world.localWorld.bodies, 并为每个游戏对象（我们称之为gameObject）：
3. 调用getBounds().contains(x, y)以检查边界是否包含坐标。

当我只有图像和精灵时，这实际上有效，但是，我也有没有getBounds()方法的 MatterJS.Body 对象。这是我的主要问题。编辑：它们确实有一个bounds属性，但它只是标记为 min 和 max 的两个坐标，并且没有contains()方法。AABB 边界检查不足以实现我的目标；我需要更精确的东西。

注意：我还考虑过简单地将对象放在屏幕上并监听碰撞事件。但是，看起来碰撞事件仅在碰撞由运动中的对象触发时触发，理想情况下，如果它位于某物之上，我根本不想渲染它。

最后说明：我愿意创建某种形状或游戏对象，而不是使用 x 和 y 坐标，如果这意味着更简单的方法来做我想做的事情。

我的 matter.js 代码在 safari 和 chrome 中运行良好，但我在 Firefox 中进行了测试，它没有显示任何纹理。我没有错误信息。¿ 有什么办法可以修复它还是我错过了什么？

我正在开发一个 P5 草图，我首先遵循 Daniel Shiffman 的“使用 Express 和 Node - WebSockets 和 p5.js 教程”（https://www.youtube.com/watch?v=2hhEOGXcCvg）。我想利用 Matter.js 物理，所以我用 npm ( npm install matterjs) 安装了 matterjs。我想./node_modules/matterjs/dist/matter.js在我的 p5.js 草图中导入文件，但我想不出正确的方法。

这是我的文件结构的样子：

到目前为止，我已经尝试了以下方法：

1 . 将其视为matter.js常规 JS 文件并在其中添加相对路径index.html：

sketch.js然后我尝试使用Matter该类 var Engine = Matter.Engine; 但这给了我一个“UnCaught ReferenceError: Matter is not defined ”

2 . 同样，包括 中的相对路径index.html，但这次在 中sketch.js，我尝试导入matter.js： import Matter from "matter";

这在导入行上给了我一个“意外的标识符”错误。Chrome 在下面放了一条红色波浪线Matter from "matter";

3 . 删除对matter.js文件的引用index.html，并将相对路径添加到导入行中sketch.js： import Matter from ""../node_modules/matterjs/dist/matter";

这给了我两个错误：

作为参考，这是我的一些文件的样子：

服务器.js

草图.js

索引.html

我知道我可以添加matter.js对 Web 上托管的文件的引用，但我想避免在同一个项目中管理两个不同的事项实例。