i have some rectangles created with Matter.js, like this: Bodies.rectangle (getRandomInt (200,400), 50,140,50, {restitution: 0.7, timeScale: 0.5}) But now I need is to add a text inside that rectangle. How could I do that? The documentation is not clear for this type of actions

i have some rectangles created with Matter.js, like this: Bodies.rectangle (getRandomInt (200,400), 50,140,50, {restitution: 0.7, timeScale: 0.5}) But now I need is to add a text inside that rectangle. How could I do that? The documentation is not clear for this type of actions

• javascript
• matter.js

2 Answers 2

One of the most mon question categories in Matter.js is "how do I do X (with the built-in renderer)?"

I suspect most of these questions e 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 ment 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.

So let's go ahead and use our own renderer instead of trying to push the built-in renderer to do things it wasn't designed for.

The DOM is perfect for text, so that'd be my first suggestion, building on Using Matter.js to render to the DOM or React.

const engine = Matter.Engine.create();
const box = {
  w: 140,
  h: 80,
  body: Matter.Bodies.rectangle(150, 0, 140, 80),
  elem: document.querySelector("#box"),
  render() {
    const {x, y} = this.body.position;
    this.elem.style.top = `${y - this.h / 2}px`;
    this.elem.style.left = `${x - this.w / 2}px`;
    this.elem.style.transform = `rotate(${this.body.angle}rad)`;
  },
};
const ground = Matter.Bodies.rectangle(
  200, 200, 400, 120, {isStatic: true}
);
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(
  engine.world, [box.body, ground, mouseConstraint]
);
(function rerender() {
  box.render();
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

@import url(https://fonts.bunny/css?family=amatic-sc:700);

#box {
  position: absolute;
  background: #111;
  color: #eee;
  height: 80px;
  width: 140px;
  cursor: move;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Amatic SC";
  text-shadow: 2px 2px 3px #38e;
}

#ground {
  position: absolute;
  background: #666;
  top: 140px;
  height: 120px;
  width: 400px;
}

html, body {
  position: relative;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare./ajax/libs/matter-js/0.20.0/matter.min.js"></script>
<div id="box">
  <h1>hello world</h1>
</div>
<div id="ground"></div>

Hopefully this example is enough to show that you can render pretty much anything with the DOM and plug into MJS, from <video> elements to images to <canvas>es, <iframes> to SVGs.

Try the following example:

reactionText = Bodies.rectangle(400, 305, 20, 20, {
  isStatic: true,
  render: {
    fillStyle: "transparent",
    strokeStyle: "transparent",
    text: {
      content: "FN",
      color: "black",
      size: 15
    }
  }
})