Making the game scale up without losing ratio

Phaser 3
1

I’m trying to do a new game but the game width and height is too small to see (intentionally, to mimic NES resolution 256x224). Is there a way to scale this up so it’s visible and/or modificable by the web size without loosing the width and height expected? Like an emulator, that makes the game big or small depending on the window size

2

Yes, there is the Phaser Scale Manager.

Here is a game config scale object I have on one of my pixel art games:

	scale: {
		mode: Phaser.Scale.FIT,
		parent: 'phaser',
		autoCenter: Phaser.Scale.CENTER_BOTH,
		width: 320,
		height: 180
	}

I also use this CSS:

body {width: 100%;height: 100%;overflow: hidden;margin:0;background:black;padding:0;}
#phaser {display:block;width: 100vw;height: 100vh;overflow: hidden;margin: 0;padding: 0;background: black;touch-action: none;image-rendering: pixelated;image-rendering: crisp-edges;}

That takes the low res pixel art game and scales it up to the size of the browser while maintaining crisp graphics. It looks like this:

If you’d like to share your game config, I can tell you what to add.

3

I have applied what you told me and it pretty much works, although the html background is not visible anymore

const config = {
    type: Phaser.AUTO,
    scale: {
		mode: Phaser.Scale.FIT,
		parent: 'game_container',
		autoCenter: Phaser.Scale.CENTER_BOTH,
		width: 256,
        height: 224,
	},
    
    pixelArt: true, //this can result into pretty jittery pixels the bigger it gets
    scene: [Preloader, Stage1 /*unmovable  Pause, GameOver, Error*/],
    physics: {
        default: 'arcade',
        arcade: {
            debug: true
        }
    },
};

var game = new Phaser.Game(config);
game.canvas.style.cursor = 'default';
4

Nice! So you have a background on the body?

5

I do, well… I plan to add one so the screen doesn’t get lost on the dark void, although I could leave it like that, thanks for the help!