shrink map to fit my canvas(viewport)

[Hashasm]

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

          
        });

[01271]

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

[obiot]

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.

[Hashasm]

@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

[Hashasm]

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 ..

[Parasyte]

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:

• Scale the viewport transformation matrix: https://github.com/melonjs/melonJS/issues/399#issuecomment-266972817
• Put everything into a container and scale the global transformation matrix prior to drawing the container hierarchy.
• Draw everything to an off-screen canvas, and draw it scaled to the screen canvas.

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

[Hashasm]

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 below image

[Hashasm]

I wanted to plot my big 6600*13200 map fix into my viewport and my canvas size is 1000*1440 

as mentioned in https://github.com/melonjs/melonJS/issues/4

[Parasyte]

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