Responsive Background Image

I have this background image that I want to use in a Phaser3 project. But I want to make the image responsive.

What does responsive mean?

One problem that web pages need to work around is all of the different devices that will be used to access the web page. All those different devices have different sized screens. Smart phones have small screens, tablets get a little bigger. Laptop computers have larger screens. And then there are large, wide screen desktop monitors. And finally, what happens if someone resizes the screen during game play?

Being able to appropriately respond to all these situations is what makes a web page responsive.

Here is the image I want to use for my background.

It is a simple card table. I want to make a bit of a card game.

Here is the code to add the background image to the Phaser3 project.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Air Poker</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>

<script type="text/javascript">

var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scene: {
preload: preload,
create: create
}
};

var game = new Phaser.Game(config);

function preload() {

this.load.image('background', 'assets/pokerTable1.png');

}

function create() {

// A background for the game
this.add.image(480, 270, 'background');

}//create

</script>

</body>
</html>

You might have noticed in the "config" variable I set the width and height of the game's canvas to fill the entire window.

width: window.innerWidth,

height: window.innerHeight,

I do want my game to fill the entire window, but the background image is only 960 pixels wide and 540 pixels tall. When I test the game with a large window, it looks like this.

The canvas is larger than the background image. If I resize the window, the background image gets clipped from the right side and from the bottom edge.

That is no good. I want my background image to fill the entire window at all times.

Phaser3 does offer a built in "Scale Manager" that can handle scaling the game area automatically for you. Just add scale to the "config" variable and pick a mode.

var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scale: {
mode: Phaser.Scale.NONE
},
scene: {
preload: preload,
create: create
}
};

Notice above that I set my scale to "NONE". You guessed it, no scaling. But here are the scaling options.

NONE - No scaling happens at all. The canvas is set to the size given in the game config and Phaser doesn't change it. To change the canvas size with this setting you must call the Scale Manager's "resize" method and give the new dimensions.

WIDTH_CONTROLS_HEIGHT - The height is automatically adjusted based on the width.

HEIGHT_CONTROLS_WIDTH - The width is automatically adjusted based on the height.

FIT - The canvas is automatically adjusted to fit inside the given target area, while keeping the aspect ratio. So there may be some space inside the area not covered.

ENVELOP - The canvas is automatically adjusted to cover the entire target area while keeping the aspect ratio. This may extend further out than the target size.

RESIZE - The canvas is resized to fit the area regardless of aspect ratio.

Since I just want to fill the window screen, I will use the RESIZE mode.

var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scale: {
mode: Phaser.Scale.RESIZE
},
scene: {
preload: preload,
create: create
}
};

But this mode does not scale my background image to fit the canvas. And that is just fine with me, because I want to define some custom behavior for my background.

My image is 960 pixels wide. If the window is larger than that, I want to stretch my image to fit. But if the window is smaller than 960 pixels, I don't want to shrink the image. Instead I want to clip the image from the sides, keeping the card table in the center of the screen.

Also, my image is 540 pixels tall. If the window is larger than that, I want to stretch the image to fit. But if the window is smaller, than I want to clip the image, this time only from the top.

Wow! Could I be any more picky?

It might sound like a lot of work, but it was actually pretty easy. Here is the complete code.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Air Poker</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>

<script type="text/javascript">

var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scale: {
mode: Phaser.Scale.RESIZE
},
scene: {
preload: preload,
create: create
}
};

var bg;
var game = new Phaser.Game(config);

function preload() {

this.load.image('background', 'assets/pokerTable1.png');

}

function create() {

// A background for our game
  bg = this.add.image(480, 270, 'background');

if(window.innerWidth > 960) {
bg.width = window.innerWidth;
}
else {
bg.width = 960;
}
if(window.innerHeight > 540) {
bg.height = window.innerHeight;
}
else {
bg.height = 540;
}
bg.setDisplaySize(bg.width, bg.height);
bg.x = window.innerWidth/2;
bg.y = window.innerHeight - (bg.height/2);


window.addEventListener('resize', () => {
if(window.innerWidth > 960) {
bg.width = window.innerWidth;
}
else {
bg.width = 960;
}
if(window.innerHeight > 540) {
bg.height = window.innerHeight;
}
else {
bg.height = 540;
}
bg.setDisplaySize(bg.width, bg.height);
bg.x = window.innerWidth/2;
bg.y = window.innerHeight - (bg.height/2);

});

}//create
</script>

</body>
</html>