3

I'm trying to make a simple sidescroller, extending this tutorial.

It uses Matter.js and p5.js

To move left and right, I'm getting the mouseWheel delta.

  translateX += event.delta;

From there in the drawing function I can call

translate(translateX, 0);

This moves all of my p5.js drawings. The problem is, how do I tell Matter.js? All my interactions are off now by the delta. The boxes are now 100px to the right, but the interactions are in the original location.

I tried using World.translate but it seemed like it was moving the bodies oddly and not moving the constraints at all. Maybe it's the wrong approach.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Ashbury
  • 2,160
  • 3
  • 27
  • 52
  • 1
    [Rotate Camera in Matter.js](https://stackoverflow.com/a/65462243/6243352) shows how to do a top-down all-direction viewport. Adjusting the viewport to a sidescroller is mostly a matter of changing the physics behavior to suit your needs. – ggorlen Jun 29 '21 at 17:17
  • Also related: [How can I move camera in matter.js](https://stackoverflow.com/questions/34913835/how-can-i-move-camera-in-matter-js) and https://github.com/b-g/p5-matter-examples/blob/master/6-camera-follow-canvas/sketch.js – ggorlen Dec 25 '22 at 05:14

0 Answers0