Anna

melonjs zooming and panning

10 posts in this topic

Can anyone please tell me whether  zooming / panning is possible in melonjs???

Share this post


Link to post
Share on other sites

Hi,

Yes, zooming and panning are just transformation functions. This can be done by carefully controlling the renderer matrix at the correct points in your scene hierarchy.

For example, if you have a HUD element in your scene, you probably don't want the zoom function to affect it. If you use a Container element that is a sibling of the HUD and apply your transformations to that container, then everything inside of it will inherit those transformations. Scale/translate the renderer at the top of the Container's draw method, draw all of its children, and reset the transformation matrix on the way out of the draw method.

Something like that, anyway. It's actually incredibly simple.

Share this post


Link to post
Share on other sites

it's actually as simple as applying any transformation to a container, that would be in this case the "world" container, or a child container if you want  (as @parasyte was saying) split the level itself from the HUD.

 

me.Container, extends me.Renderable, and therefore has the following property http://melonjs.github.io/melonJS/docs/me.Renderable.html#currentTransform

Share this post


Link to post
Share on other sites

there is an example that add a zooming effect to the viewport here :

https://github.com/melonjs/melonJS/issues/399

but it then zoom literally everything.  As we were saying before the same can be done to a me.Container, as they both implement the currentTransform property : http://melonjs.github.io/melonJS/docs/me.Renderable.html#currentTransform

it's basically a matrix object, so you you can get crazy as much as you want with it : http://melonjs.github.io/melonJS/docs/me.Matrix2d.html

 

 

 

Share this post


Link to post
Share on other sites

i do agree though that we should have a small example somewhere showcasing all that. I 'll check to add one, in the mean time you can experiment on your side, it's really straightforward

Share this post


Link to post
Share on other sites

Hi, if I do it like described in your example:

keyPressed: function (action /*, keyCode, edge */) {
        
        if (action === "add") {
            this.scale(+0.02);
            return;
        }

        if (action === "substract") {
            this.scale(-0.02);
            return;
        }
},

scale: function(scale) {
        game.data.scale += scale;
        game.data.scale = game.data.scale.round(2);

        var viewport = me.game.viewport;
        viewport.currentTransform.translate(
            viewport.width * viewport.anchorPoint.x,
            viewport.height * viewport.anchorPoint.y
        );

        viewport.currentTransform.scale(game.data.scale);
        viewport.currentTransform.translate(
            -viewport.width * viewport.anchorPoint.x,
            -viewport.height * viewport.anchorPoint.y
        );
    },

It looks like this:

58a3191e977c2_Screenshot(1).png.9b61108cf30ecc411a342b9f273ed797.png

Share this post


Link to post
Share on other sites

I needed the zoom as well today and came across this post. I copied in your code above and the plan didn't really work right away....simple quick fix for me was to use a constant value of 1.02 for zoom out and .98 for zoom in.

Seems like, from the partial code above, your idea is to keep a scale variable which you are incrementing and then applying. Which doesnt seem correct becuase [viewport.currentTransform.scale(game.data.scale) ] doesn't set a scale value it just multiplies the current values in the transform matrix.

Hopefully that helps....maybe not. 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.