Resizing the canvas

[Tys]

I've got canvas resizing working on mobile, when the orientation
changes but i've run into a problem.

It seems the tilemap is stuck in the width/height of the orientation
it first loads.
For example, if the map is loaded when the device is portrait then
turned landscape, some of the map is cut off on the left.

Is there a way to force redraw the tilemap to the correct viewport
size? I'm pretty sure the canvas is actually the right size, just not
the tilemap.

The way i'm doing it at the moment is changing the canvas reference's
width and height.


Thanks,
Tys

[melonJS]

Theorically, since the viewport is inheriting from me.Rect, you are free to change the size....

But (there is always a but), I never tried so far to do so, and I suspect it might requires some other stuff to be updated as well (like the viewport bounds used for the scrolling, etc...).

If you want to have a look, the viewport code is under /src/entity/camera.js and at runtime can be found by using me.game.viewport

tell me what you find :)

[Tys]

Thanks. I tried changing the viewport width and height, and using
setBounds, but it doesn't seem to change anything.

What seems to happen is that it draws the screen properly for half a
second, then the right side gets clipped.

This is the code i'm using:

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ?
"orientationchange" : "resize";


window.addEventListener(orientationEvent, function() {
var canvas = me.video.getScreenCanvas();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
me.game.viewport = new me.Viewport(0, 0, window.innerWidth,
window.innerHeight);
me.game.viewport.setBounds(window.innerWidth, window.innerHeight);
me.game.repaint();

}, false);


Thanks,
Tys

[Neil Cauldwell]

Hi Tys, did you have any luck with this? In a similar vein to your 'mobile port orientation' scenario, I'm hoping to resize the width of the MelonJS canvas as the browser port is adjusted by the user. 

Presumably there's more to this than simply observing for the resizing of the browser view port and updating the canvas width to match...

[Jason Oster]

I have a few links for this subject. First is the ticket to make this feature officially supported: https://github.com/obiot/melonJS/issues/4  And the second is for a game which implements the canvas resize itself, CommandoJS: Play the game and source code.

[melonJS]

you should check this game  (github link on the game page itself):

www.commandojs.org

I haven't yet look at it myself, but the game is automatically resizing on any viewport size change, and even orientation change.

(there is a post on commandojs as well here in the forum. if you want to look for it)

[Neil Cauldwell]

Jason, Olivier - thanks, I've added a comment to the ticket. This would be great to have in MelonJs. I'd seen CommandoJS before (looks great!) but didn't realise it could resize the canvas on the fly.

[Neil Cauldwell]

Hi Olivier, Jason - CommandoJS's canvas resizing implementation appears to use the api.updateDisplaySize() function. This scales the canvas whilst retaining the original aspect ratio (i.e. "zoom"). And if a custom window.onresize function is used it also seems to scale the canvas whilst retaining the aspect ratio:

    window.onresize = function() {

      var canvas = jQuery('#jsapp canvas');

      var viewPort = jQuery('body');

      canvas.width(viewPort.width());

      // canvas.height(500);

    };

However, if a constant canvas.height() value is set (as per the commented out line above) it skews the canvas appearance. Is it possible to dynamically update the canvas elements width or height separately from one another? 

Thanks 

Neil 

[Jason Oster]

How to you mean, "separately"? If you're only setting one at a time, isn't that by definition "separate"?

Please look again at the images I added to the feature request ticket. Those are the only modes of adjusting the canvas that will also retain the aspect ratio; You can either adjust the viewport size, maintaining the same pixel size, or you can adjust the zoom factor, changing pixel size. Or a combination of both.

[Neil Cauldwell]

Hi Jason, Re separately: Is it possible to dynamically update the number of horizontal/vertical tiles rendered by the canvas? The second image down on http://www.freeimagehosting.net/6a8aj is the goal (linked to on the GH ticket https://github.com/obiot/melonJS/issues/4#issuecomment-8809230 ). It looks like it's the same result as the "AutoResize = true, AutoZoom = false:" option.

[Jason Oster]

It's hard to tell by your image, because there's no context for what is actually happening inside that gray box with the arrow. But I guess you want to resize the canvas horizontally while maintaining its height as-is, and you do not want the image to stretch horizontally? In that case, the trick is to not use zoom! (See: AutoZoom = false)

FYI, the terminology I'm using in ticket #4 is:

• "Resize" means changing the size of the canvas. Meaning giving it more or fewer pixels to draw.
  
• "Zoom" means stretching the size of the pixels. Meaning keep the same aspect ratio when the canvas is enlarged or shrunk.

Since these operations are mutually exclusive, defining their behavior when used together is just a matter of convention.