scale Scaling to fill screen, maintain pixel ratio, but not aspect ratio

[qwertysam]

I've used libraries in other languages before that provide different types of scaling via viewport types. The best example of what I want is from a library called libgdx for Java, their ScreenViewport. 

Quote

The ScreenViewport does not have a constant virtual screen size; it will always match the window size which means that no scaling happens and no black bars appear. A player with a bigger screen might see more of the game than a player with a smaller screen size.

Essentially what I want is to:

Fill the screen meaning that there's no black bars or the sides of the game

Maintain the pixel ratio meaning that every in-game pixel is equal to one pixel on screen, so no stretching

Not maintain aspect ratio meaning that it doesn't matter to my game what the aspect ratio of the game is. Its job is to forget about aspect ratio and follow the above two criteria

 

The way how I'm achieving this is by using Phaser's EXACT_FIT scaling type so that the canvas automatically resizes to fit the window. Then upon resizing, I update the size of the camera and the game's renderer so that they match the new canvas size.

Here's the code I have in my create function.

this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; // Phaser.ScaleManager.SHOW_ALL USER_SCALE

this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

this.scale.setResizeCallback(function () {
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log('size: ' + width + ', ' + height);
    this.camera.setSize(width, height);
    this.game.renderer.resize(width, height);
}, this);

It works fantastic in the horizontal axis, but when the window shrinks vertically, there is some vertical stretching of the pixels.

Here's a working example of my issue 

And here's the code on GitHub, in case it's of any help.

Here are some related topics that I've done my research on, in case they are also of help

 

Thank you for reading, any help is appreciated!

 

EDIT: I've isolated the issue, it appears to be that when the game is initially created, the height that I specify is the initial height of the canvas. e.g.

var game = new Phaser.Game(16 * 80, 9 * 80, Phaser.AUTO, '');

Phaser's scaling method allows the canvas to grow in height, but not to shrink in height. The renderer is rendering to a much taller canvas (which goes off-screen) than expected, therefore causing the vertical stretching. Any thoughts on how I can shrink the canvas myself? Thanks!

Edited July 2, 2017 by qwertysam
isolated issue

[samme]

2 hours ago, qwertysam said:

The ScreenViewport does not have a constant virtual screen size; it will always match the window size which means that no scaling happens and no black bars appear. A player with a bigger screen might see more of the game than a player with a smaller screen size.

Sounds like scaleMode RESIZE.

[krutoo]

I have the same problem, I want the canvas to resize dynamically as in the RESIZE mode, but at the same time that the game changes the scale as in the SHOW_ALL mode. Without black stripes. How can i do this?

[samme]

Phaser.ScaleManager: Example Uses

[krutoo]

in the section "Example Uses" there are no other modes. I have to manually resize all the elements using callback?

[samme]

7 hours ago, krutoo said:

I have the same problem, I want the canvas to resize dynamically as in the RESIZE mode, but at the same time that the game changes the scale as in the SHOW_ALL mode. Without black stripes. How can i do this?

• Set scaleMode USER_SCALE
• setResizeCallback(…)
• Examine parentBounds in the callback
• setUserScale(…)
• setGameSize(…)