Matter-js: [Question] Bodies positions.

[Xlander11]

Hi!

Is there a way to modify a body's position before it is drawn?

e.g (Which do not work)

Events.on(_engine, 'tick', function (event){
  var circle_pos = circle.position;
  circle_pos = {x: circle_pos.x - viewPort.x, y : circle_pos.y - viewPort.y};
});

Where I want to actually do:

context.arc(x - viewPort.x, y - viewPort.y, radius, sAngle, eAngle);

[liabru]

Are you trying to implement view ports?

See the views demo and the source code.

If you need control over rendering, you should create your own renderer based on Render.js, and pass it through to the engine at creation via engine.render.controller.

[Xlander11]

Yes.

But you're doing it by following the mouse. What I wanted to do is to follow a specific object(composite or body) which will be at the center of the viewport.

I have tried this, but the viewport stays fix.

        var viewportCentre = {
            x: render.options.width * 0.5,
            y: render.options.height * 0.5
        };

        Events.on(_engine, 'beforeTick', function() {
            var _engine = engine,
                world = _engine.world
                render = _engine.render,
                translate,
                bodyPos = body.position;

            var deltaCentre = Vector.sub(bodyPos, viewportCentre),
                    centreDist = Vector.magnitude(deltaCentre);

            if (centreDist > 50) {
                    // create a vector to translate the view, allowing the user to control view speed
                    var direction = Vector.normalise(deltaCentre),
                        speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);

                    translate = Vector.mult(direction, speed);

                    // prevent the view moving outside the world bounds
                    if (render.bounds.min.x + translate.x < world.bounds.min.x)
                        translate.x = world.bounds.min.x - render.bounds.min.x;

                    if (render.bounds.max.x + translate.x > world.bounds.max.x)
                        translate.x = world.bounds.max.x - render.bounds.max.x;

                    if (render.bounds.min.y + translate.y < world.bounds.min.y)
                        translate.y = world.bounds.min.y - render.bounds.min.y;

                    if (render.bounds.max.y + translate.y > world.bounds.max.y)
                        translate.y = world.bounds.max.y - render.bounds.max.y;

                    // move the view
                    Bounds.translate(render.bounds, translate);
            }
        });

[liabru]

Try swapping this bit in:

var deltaCentre = Vector.sub(Vector.sub(body.position, render.bounds.min), viewportCentre),
     centreDist = Vector.magnitude(deltaCentre);

Works for me on the views demo. Looks pretty cool actually.

[Xlander11]

Thank you very much! Now its working.

But when free falling(or high speed movement) the viewport follow slowly. So I tried increasing the mininum speed from: var speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002); to var speed = Math.min(290, Math.pow(centreDist - 50, 2) * 0.0002);// it starts at 290 , there is like a duplication(visually) of the bodies... I think that the render viewport is moving at two places which make this illusion... Putting back

var deltaCentre = Vector.sub(body.position, viewportCentre),
                    centreDist = Vector.magnitude(deltaCentre);
// and putting speed to
speed = Math.min(_body.speed * 1.5, _body.speed * 1.8);

helps it a bit.

It's ok though, Now I'll try to make it follow the body perfectly.

Thanks again!

[liabru]

Great.

If you need it to go faster, you should increase the 0.0002 constant rather than the minimum speed.

[Xlander11]

Ah ok. Thank you very much for your help.

[Rodeoclash]

Just wanted to say that I got the camera tracking working well with that snippet you posted. An example here:

http://game.richardson.co.nz/

Thanks for a great library. I'll drop you another line when the game is done :)

(Use the arrow keys)

[Xlander11]

Nice! Keep it up.

[liabru]

Looking good, please do :) Check out this codepen I found the other day that's using the engine for a spaceship type game, might be helpful.