Responsive resize

[kamil.r...@gmail.com]

Hi,
Is there a possibility to configure melonJS to automatically resize with its container? This would allow making responsive content.

[Jay Oster]

Hi, melonJS will resize to its container when you enable auto-scale: http://melonjs.github.io/melonJS/docs/me.video.html#init The default boilerplate project and all of our tutorials use this feature.

On Wed, Jul 27, 2016 at 5:27 AM, <kamil.r...@gmail.com> wrote:

Hi,
Is there a possibility to configure melonJS to automatically resize with its container? This would allow making responsive content.

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[melonJS]

Indeed ! 

Live version of the platformer here (that uses the '"flex-width" scaling method) :

http://melonjs.github.io/melonJS/examples/platformer/

On Thursday, July 28, 2016 at 7:11:57 AM UTC+8, Jay Oster wrote:

Hi, melonJS will resize to its container when you enable auto-scale: http://melonjs.github.io/melonJS/docs/me.video.html#init The default boilerplate project and all of our tutorials use this feature.

On Wed, Jul 27, 2016 at 5:27 AM, <kamil.r...@gmail.com> wrote:

Hi,
Is there a possibility to configure melonJS to automatically resize with its container? This would allow making responsive content.

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.

[kamil.r...@gmail.com]

Unfortunately, this didn't work quite well. The image here: http://imgur.com/a/aR2UC shows a sample rectangular melon viewport, with no scaling options. You can see it fits inside its container very well (but doesn't resize with it, rather it keeps constant size). When I added scale: 'auto' and scaleMethod: 'flex-width', I got: http://imgur.com/a/5MAAy - melon went way outside its container.

> To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

[Jay Oster]

You can use tools like the Chrome inspector, or Firefox developer tools to troubleshoot. My hunch is that your DOM or CSS are not playing nicely. melonJS will use `max-height` and `max-width` properties on the parent container to limit screen dimensions, or will simply use the container's dimensions (whichever is smaller): https://github.com/melonjs/melonJS/blob/master/src/video/video.js#L375-L376

[kamil.r...@gmail.com]

Did some testing around that line you mentioned. Turns out both parentNode.width and parentNode.height are undefined. After changing it to clientWidth and clientHeight, everything scales nicely. I think these should be used as fallbacks.
The question is - is this a bug? If so, should I make a PR with the fix?

[Jay Oster]

We've tried similar things in the past. Documentation suggests this isn't the silver bullet: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels.

Seems like the best way to go about it is still computing the element size with window.getComputedStyle or Element.getBoundingClientRect

[kamil.r...@gmail.com]

I took a look at how jQuery computes width: https://github.com/jquery/jquery/blob/master/src/css.js#L312 They seem to be using getBoundingClientRect() with one exception:

// Support: Safari 8+
// Table columns in Safari have non-zero offsetWidth & zero
// getBoundingClientRect().width unless display is changed.

Given the current solution doesn't work as intended, I suggest using getBoundingClientRect(). This seems to work nicely:

var rect = parentNode.getBoundingClientRect();
parentNodeWidth = rect.width || (rect.right - rect.left);
parentNodeHeight = rect.height || (rect.bottom - rect.top);

[Jay Oster]

Yes, perhaps something like that. Feel free to open a Pull Request with the patch, and we'll have someone review it, and hopefully commit it for next release.