Giter VIP home page Giter VIP logo

Comments (9)

Rodeoclash avatar Rodeoclash commented on May 2, 2024 4

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)

from matter-js.

liabru avatar liabru commented on May 2, 2024 2

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.

from matter-js.

liabru avatar liabru commented on May 2, 2024 1

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.

from matter-js.

liabru avatar liabru commented on May 2, 2024

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.

from matter-js.

Xlander11 avatar Xlander11 commented on May 2, 2024

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);
            }
        });

from matter-js.

Xlander11 avatar Xlander11 commented on May 2, 2024

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!

from matter-js.

liabru avatar liabru commented on May 2, 2024

Great.

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

from matter-js.

Xlander11 avatar Xlander11 commented on May 2, 2024

Ah ok. Thank you very much for your help.

from matter-js.

Xlander11 avatar Xlander11 commented on May 2, 2024

Nice! Keep it up.

from matter-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.