Exploring how matter.js works in context of building the Recess Market 2024 website:
My issue is rendering SVGs, especially the ones with counters and compound paths/groups. I sort of figured that the answer to those is building the shapes separately (svg paths), then grouping them together as a compound body:
let compoundBody = Body.create({
parts: [svgPart1, svgPart2]
});Time won’t allow for me to figure this out at the moment. I’ll work on that later.
An alternate design solution is rendering something like text and shapes, a combination of:
https://codepen.io/JonahGrindler/pen/VwLWxrY
https://codepen.io/ChrisBup/pen/eYVaQbp
A note about matter.js
A moment of clarity for me is realizing that matter.js is foremost a physics engine, meant to build simple use cases with wireframes, basic colors, and sprites, and that everything else is kinda up to me to figure out. More imperative that I write js more fluently, ffs. Via stackoverflow:
One of the most common question categories in Matter.js is “how do I do X (with the built-in renderer)?”
I suspect most of these questions come from a fundamental misunderstanding about the purpose of the built-in renderer. Matter.js is foremost a physics engine, not a rendering library. The built-in renderer is only there for prototyping purposes: simple use cases to show wireframes, basic colors or sprites.
The docs are quite explicit:
There is an included debug renderer called Matter.Render. This module is an optional canvas based renderer for visualising instances of Matter.Engine. It is mostly intended for development and debugging purposes, but may also be suitable starting point for simple games.
For just about any rendering need beyond development and debugging, the library expects you to use your own rendering solution that fits your needs.
In this case, text is something that isn’t available in the renderer, according to this comment from the creator of MJS in issue #321: Is there anyway to render text in Matter.js?:
Not with the built in debug renderer, if you need to do anything fancy I’d suggest creating your own, see Rendering. A place to start is to copy the code of Matter.Render.