Hashasm

shrink map to fit my canvas(viewport)

9 posts in this topic

Hi guys,

i am trying to shrink my 100*100 celled isometric map to fit my desktop screen on click of a button (or through scroll event).

The only possible option I have managed to get is the canvas zoom-in/out feature in melonJS. It is not suiting my requirement as the border cells are not shown inside my viewport.

Could you suggest if there is any better way to do this?

My current code looks something like this :

// register on mouse event
        me.input.registerPointerEvent("wheel", me.game.viewport, function (event) {
        me.event.publish("wheel", [ event ]);
        },false); 
        this.mousewheel = me.event.subscribe("wheel", function (event) {

            console.log("^^^");
            var viewport = me.game.viewport;
            //viewport.inViewport = true;
            if ( event.deltaY >0 ){
                console.log("scrolldown");
                 viewport.currentTransform.scale(0.999);
                console.log(jq('canvas'));
            }else{
                console.log("scrollup");
                 viewport.currentTransform.scale(1.001);
            } 

          
        });

Share this post


Link to post
Share on other sites

Couldn't you take the canvas and apply rules to it with css? It should still draw fine.

Share this post


Link to post
Share on other sites

another option is to apply the transformation on the world container, or any child container where your map is loaded, see similar discussion here

As a reminder, all visible objects are inheriting from the me.Renderable, which means they all have a currentTransform property you can use. Also will follow the parent/child tree.

Share this post


Link to post
Share on other sites

@obiot i gone through that discussion it wont help me much i want to resize the currentLevel which is loaded on the canvas 

 

https://groups.google.com/forum/#!topic/melonjs/7dUEQGsutjI

i gone through this also but no luck ..

is their any function which i can get the map and scale it how we moving map  by using me.game.viewport.move(0, (me.levelDirector.getCurrentLevel().height / 2));

like this can we use to zoom in and out the map

Share this post


Link to post
Share on other sites

hey guys i understand something correct me if  i am wrong . here our canvas widt and height is not changing i am changing my viewport only,

me.game.viewport.scale(0.5,0.5) which means the area which we are able to see its a viewport right .so i am thinking we need to update or redraw or repaint it but i am not getting where to do it please help me crak it 

Thank You ,I hope you guys were understanding ..

Share this post


Link to post
Share on other sites

The viewport inherits from the rectangle class, which has a scale method. Scaling the viewport only changes the virtualized size of the viewport. If you want to scale what is drawn, you have several options:

The first option is the best option, and the one discussed in the linked thread.

Share this post


Link to post
Share on other sites

yeah i tried it before also its also zooming as shown in the below image. 

and i used me.game.world which return my tiled map and i tried to scale it then also its coming as same as belowzooming.thumb.png.fd5f56a9211a45f8246ec0a6a3b1b885.png image

Share this post


Link to post
Share on other sites

You can resize the viewport to counter the scaling of its contents, but I don't think that's really supposed to be happening.

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.