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.

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 http://shooty.us.to/scale/

And here's the code on GitHub, in case it's of any help. https://github.com/qwertysam/space-game

Thank you for reading, any help is appreciated!


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, or would that conflitch with Phaser's ScaleManager? Thanks!



You must log in to answer this question.

Browse other questions tagged .