Jump to content

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


qwertysam
 Share

Recommended Posts

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 by qwertysam
isolated issue
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
 Share

  • Recently Browsing   0 members

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