Jump to content

shrink map to fit my canvas(viewport)


Recommended Posts

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 ]);
        this.mousewheel = me.event.subscribe("wheel", function (event) {

            var viewport = me.game.viewport;
            //viewport.inViewport = true;
            if ( event.deltaY >0 ){


Link to comment
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.

Link to comment
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 



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

Link to comment
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 ..

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...