Define shape for physics body

[lexengineer]

Hello everyone!

I am using react-native-game-engine and matter-js for my application and I want to render a shape of my SVG element for example. On the react-native side it works great because I just show it inside my renderer component with react-native-svg. But the issue is that I also need a matter-js physic body to have the same shape in order for physics to work correctly.

I tried using Matter.Bodies.fromVertices method, but have a lot of issues during SVG conversion, so that was unsuccessful. I also found this guide https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs, but it won't work because it is using Matter.Render and I am using react-native-game-engine instead.

So the question is how to render custom shapes and what is the preferable way to create them? Maybe tree-js will fit better for that?

[bberak]

Hi @oleksiikiselov,

So are you saying that you are able to render complex shapes using SVG - however, you also need to attach these complex shapes to a physics body so that you can perform physics simulations with MatterJS?

Have your tried creating a composite body using multiple shapes and constraints?

The Matter.Bodies.fromVertices method looks really promising though - it might be worth debugging to sort out the issues you are having. Just from the notes on the MatterJS docs it seems like you need to have an additional package installed:

Creates a body using the supplied vertices (or an array containing multiple sets of vertices). If the vertices are convex, they will pass through as supplied. Otherwise if the vertices are concave, they will be decomposed if poly-decomp.js is available. Note that this process is not guaranteed to support complex sets of vertices (e.g. those with holes may fail). By default the decomposition will discard collinear edges (to improve performance). It can also optionally discard any parts that have an area less than minimumArea. If the vertices can not be decomposed, the result will fall back to using the convex hull. The options parameter is an object that specifies any Matter.Body properties you wish to override the defaults. See the properties section of the Matter.Body module for detailed information on what you can pass via the options object.

[lexengineer]

Hi @bberak,

Thank you for the response. I think creating composite body might be too hard because the shape we need is too complex, but I will try to sort out the issues with SVG. The main issue is that according to MatterJS example I have to parse SVG and get paths from it and we don't have anything like DOMParser in react-native. Because of that it requires to install some additional libraries and unfortunately mostly all of them do not work as expected, so the only reliable choice I found is JSDOM which is kind of large.

[bberak]

Hi @oleksiikiselov,

Are you able to process the SVGs ahead of time to get their vertices rather than parsing them in real-time? This would allow you to use JSDOM or other tools to get the vertices during development, save the vertices alongside the SVGs and then reference the vertices when required during runtime. This should hopefully prevent you from having to load and use heavy tools whilst the actual app is running..

[lexengineer]

Hi @bberak,

Yes, I was thinking about that, have to make sure that I will be able to do animations with that approach in the future, but I plan to try that for sure. Thank you.

[bberak]

No worries @oleksiikiselov - sounds like an interesting project. Let me know how it goes..

[gokadi]

Probably it’s kind of necroposting, but @oleksiikiselov did you succeed in this issue?
I developing a simple mobile shooter, and had low FPS issue with MatterJS bodies of simple shapes (as I assume mainly because of its collision detection system), so I’m just curious,how fast was it in your case?

PS. Also previously I tried iOS native development using swift and this issue about low FPS with collision handling for complex shapes is even documented there in swift.

[bberak]

Hey @gokadi,

What happens to the performance of your game if you turn off / remove MatterJS collisions completely? Does the FPS improve? I suspect the low FPS is most likely due to the number of entities you are rendering at one time - but it might be useful to isolate the issue..

PS. Also previously I tried iOS native development using swift and this issue about low FPS with collision handling for complex shapes is even documented there in swift.

Interesting.. Could you point me to this documentation by any chance?

Cheers,

Boris

[gokadi]

Hi!

What happens to the performance of your game if you turn off / remove MatterJS collisions completely? Does the FPS improve?

Yesterday I removed Matter from the project completely, and, well, fps slightly improved, but very slightly.

Interesting.. Could you point me to this documentation by any chance?

Well, it's not bluntly stated here, but still...

Use Edge-Based Physics Bodies Only When Needed
An edge-based body is more expensive to compute than a volume-based body.

https://developer.apple.com/documentation/spritekit/skphysicsbody/shaping_a_physics_body_to_match_a_node_s_graphics

I think I faced several similar issue when I tried to do it, but unfortunately no links are saved from that time. Collision there was between very complex edge-based sprite and simple rectangular bullet. When collision started, fps dropped to almost 0. That's why I guess it's something related to this functionality on the "native" level. Too many computations are needed for very complex shaped, I guess.

[bberak]

Thanks for the link @gokadi.

Hopefully you can get away with very simple compound bodies for your bullet hell game. However, as I mentioned in the other thread, the bottleneck for you will probably be the large number of dynamic sprites and particles that will be moving on the screen (plus I'm sure the physics calculations for this on the JS thread will be relatively slow).