Phaser won't display background image to proper scale

Phaser 3
1

I have my game set to 1024x576 (same as the background image), yet the game loads the entire image in a corner of the screen, rather than filling the whole canvas. Any solutions to this?

(The first image is what is showing up in Phaser, and the second image is the original background image)

18
Screenshot 2019-08-15 at 19.20.18.png1154×736 190 KB
scenery
scenery.png1024×576 3.42 KB

2

Is it the entire background image showing in the corner? Or only the lower-right hand corner of it?

3

I have added images to this thread, showing what it looks like.

4

Oh, that is strange. Can you post your code?

5

function preload() {

game.load.baseURL = 'joshmuszka67.wixsite.com/gamesprites';
game.load.crossOrigin = 'anonymous';

game.load.image("background", "https://static.wixstatic.com/media/aa8ebd_cc78e040d7f949a38053b67387bc4fe8~mv2.png/v1/fill/w_638,h_366,al_c,q_80,usm_0.66_1.00_0.01/background.webp");

game.load.image('player', 'https://static.wixstatic.com/media/aa8ebd_7a550c17a07b4dd1a743e556cfe04000~mv2.png/v1/fill/w_68,h_68,al_c,lg_1,q_80/Player-1_png%20(2).webp');

game.load.image('platform', 'https://static.wixstatic.com/media/aa8ebd_15f9bce00f524d2a98ccde509dece027~mv2.png/v1/fill/w_638,h_60,al_c,q_80,usm_0.66_1.00_0.01/upscaled_Foreground-1_png%20(1).webp');

game.load.image('enemy1', 'https://static.wixstatic.com/media/aa8ebd_2447d920490847648a736253bd76e083~mv2.gif');

game.load.spritesheet('walk', '<img src="https://static.wixstatic.com/media/aa8ebd_0d42b92fb6da4ce397044f125175274b~mv2.png/v1/fill/w_68,h_272,al_c,lg_1,q_80/Player%20walking%20animation.webp" alt="Player walking animation.png"/>', 80, 16);

game.load.image('platform1', 'https://static.wixstatic.com/media/aa8ebd_8b88721a00a9488f94733a5de399d507~mv2.png/v1/fill/w_68,h_34,al_c,lg_1,q_80/upscaled_newplatform1-1_png%20(1).webp');

game.load.image('platform2', 'https://static.wixstatic.com/media/aa8ebd_6898be6bc22c418bbaa2b057b1030c1f~mv2.png/v1/fill/w_136,h_34,al_c,lg_1,q_80/upscaled_newplatform2-1_png.webp');

game.load.image('platform3', 'https://static.wixstatic.com/media/aa8ebd_3f0855eeeea54424a1738e5fb17f1b92~mv2.png/v1/fill/w_204,h_34,al_c,lg_1,q_80/upscaled_newplatform3-1_png.webp');

game.load.image('platform4', 'https://static.wixstatic.com/media/aa8ebd_25b09e09171b434e9407b54532a1e477~mv2.png/v1/fill/w_272,h_34,al_c,lg_1,q_80/upscaled_newplatform4-1_png.webp');

game.load.image('platform5', 'https://static.wixstatic.com/media/aa8ebd_d47e63152e144ababfb0b6cf0e45c6b7~mv2.png/v1/fill/w_340,h_34,al_c,lg_1,q_80/upscaled_newplatform5-1_png.webp');
game.load.image('foreground', 'https://static.wixstatic.com/media/aa8ebd_efa0fa99c51f4e43ab80dba2fba4065f~mv2.png/v1/fill/w_638,h_359,al_c,q_80,usm_0.66_1.00_0.01/Foreground-1_png%20(1).webp');

}

var player = new Player(“Player”, 3, 1, “Fist”);
var platforms;
var cursors;
var jumpButton;
var background;
var enemy1;
var enemy2
var health;
var platform1;
var platform2;
var platform3;
var platform4;
var platform5;
var emerald;
var heart;
var ladder;

function create() {

//World Boundaries, they keep you safe!
game.world.setBounds(0, 0, 99999999999999999999, 518);

//Background Lives Here :)
background = game.add.tileSprite(0, 0, 9999999999, 576, "background");

//Player Spawns here
player = game.add.sprite(1200, 512, 'player');
//Health Here!

game.physics.arcade.enable(player);

player.body.collideWorldBounds = true;
player.body.gravity.y = 2000;

//enemy1 = game.add.sprite(70, 112, 'enemy1');

platforms = game.add.physicsGroup();

//platforms.create(0, 518, ‘platform’);
// platforms.create(120, 400, ‘platform1’);
//platforms.create(320, 340, ‘platform2’);
//platforms.create(520, 280, ‘platform3’);
//platforms.create(720, 220, ‘platform4’);
//platforms.create(1000, 160, ‘platform5’);

platforms.setAll('body.immovable', true);

cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

game.camera.follow(player);

function update () {

game.physics.arcade.collide(player, platforms);

player.body.velocity.x = 0;

if (cursors.left.isDown)
{
    player.body.velocity.x = -180;

}
else if (cursors.right.isDown)
{
    player.body.velocity.x = 180;
}

if (jumpButton.isDown && (player.body.onFloor() || player.body.touching.down))
{
    player.body.velocity.y = -740;
    
}

}

function worldMovementControls() {
if (!this.camera.atlimit.x) {
background.tilePosition.x -= (player.body.velocity.y * this.physicsElapsed);
}
}

function render() {

}

6

Oh okay, so it is repeating because of the tilesprite. The image is only 638x366, so however much smaller than it is than your game canvas (which you mentioned was 1024x576), it will automatically tile. You can use setDisplaySize on the background to try to scale it up to the size of the window, or you could adjust the size of the game.

I also think I see what you are doing. You are trying to tile the background out horizontally to make the game scroll, right? Unfortunately, that isn’t going to work. I tried to gett your code running before I realized the image was smaller than the game canvas and I got an error I have never seen before in Chrome: an out of memory exception. You are trying to load thousands and thousands of images into memory and the browser will simply not allow that.

If you want to make an infinitely scrolling game, the usual technique is to only load maybe 2 of the background images into memory at once. As the player runs in a direction, you load another one just beyond where the player can see, and destroy the one they just left once it is out of sight. This way, you only ever have 2 - 4 images loaded in memory but the player can’t see what you are doing because all of the loading and destroying is happening off the edge of the screen so it looks like a fluid scrolling background. I can’t seem to find a Phaser 3 tutorial on this topic, but there are some good Phaser 2 tutorials like this one and the logic is the same.

Hope this helps and best of luck with it!

1 Like