Matter.js change colors

Question

I'm working with matter.js on a small project.

I'm tryin to change the background color of the canvas and add custom colors to objects.

Does anyone know a tutorial or something for styling matter.js

Matter.js

score 25 · Accepted Answer · answered May 08 '14 at 14:32

25

The properties are body.render.fillStyle, body.render.strokeStyle and body.render.lineWidth.

You can pass these to Body.create(options) or more likely if you're using a factory e.g.

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

You can also use sprites, see the code

If you need more rendering control, it's best to clone Render.js, customise it and pass it into the engine through Engine.create(element, options) as engine.render.controller.

answered May 08 '14 at 14:32

liabru

962
8
9

1

How to pass custom colors (like `#ff0000`)? Setting `fillStyle` to `#ff0000` or `rgb(255,0,0)` simply doesn't work. – Sep 22 '16 at 19:20
11

@user4180960 Make sure you are setting `render.options.wireframes = false` for your Render-instance. – Martti Laine Nov 11 '16 at 21:05

score 21 · Answer 2 · answered Nov 01 '17 at 21:39

As @Martti Laine mentioned in a comment, the following code will only work:

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

if render.options.wireframes is set to false.

  var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: window.innerWidth,
      height: window.innerHeight,
      wireframes: false // <-- important
    }
});

Thank you! Spent hours trying to style bodies but nothing works until I saw this! `wireframes:false` — Organic Heart, Feb 02 '20 at 09:05

score 10 · Answer 3 · edited Mar 09 '22 at 02:47

Since nobody answers the part of question about

I'm tryin to change the background color of the canvas [...]

That part is done like this:

const Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create an engine
const engine = Engine.create();

const render = Render.create({
  element: document.body,
  engine,
  options: {
    width: some_width,
    height: some_height,
    wireframes: false,
    background: 'rgb(255,0,0)' // or '#ff0000' or other valid color string
  }
})

ggorlen · Answer 4 · 2023-02-26T07:38:59.977

Existing answers show how to make simple color modifications to Matter.js' built-in renderer. These answers are useful, but since the built-in renderer is intended for prototyping only, a general solution to the question hasn't yet been provided.

Matter.js is a physics engine, not a rendering library. It's intended to be a headless backend for any rendering frontend you choose.

I have many posts showing how to use it in a variety of contexts. Taking a skim through these should show that the rendering limitations of MJS appear time and again, and the solution is almost always "don't use the built-in renderer".

General approaches:

Solutions using the DOM:

If you're still not convinced, here's an example using canvas and rough.js, illustrating that once you go headless, you can pretty much do whatever you want in terms of styles and colors:

const renderRect = ({body, rect, w, h}) => {
  const {x, y} = body.position;
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(body.angle);
  ctx.translate(-w / 2, -h / 2);
  r.draw(rect);
  ctx.restore();
};

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

const r = rough.canvas(canvas);
const engine = Matter.Engine.create();  
const box = {
  w: 40, h: 40,
  body: Matter.Bodies.rectangle(150, 0, 40, 40),
  rect: r.generator.rectangle(0, 0, 40, 40, {
    fill: "red",
    fillStyle: "solid",
    roughness: 1.5,
    hachureAngle: 45,
    hachureGap: 7,
    strokeWidth: 2,
  }),
};
const ground = {
  w: 400, h: 120,
  body: Matter.Bodies.rectangle(
    200, 200, 400, 120, {isStatic: true}
  ),
  rect: r.generator.rectangle(0, 0, 400, 120, {
    fill: "green",
    fillStyle: "solid",
    roughness: 1.5,
    strokeWidth: 2,
  }),
};
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(
  engine.world, [box.body, ground.body, mouseConstraint]
);

(function rerender() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderRect(ground);
  renderRect(box);
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

body {
  margin: 0;
  background: #dda;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script src="https://unpkg.com/roughjs@4.3.1/bundled/rough.js"></script>
<canvas width="700" height="400"></canvas>

Matter.js change colors

4 Answers4