Zach
Zach

Reputation: 650

Continuously scrolling background?

Pretty self explanatory, I have an image I want to use for a background and I want it to continuously scroll and repeat itself. I found some code in this question

Phaser.js - Infinite side scrolling background?

and applied it like so

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
    preload: preload,
    create: create,
    update: update
});

var bgtile;

function preload() {
    game.load.image('bgtile', 'riverTest.jpg');
}


function create() {
    bgtile = game.add.tileSprite(0, 0,
                 game.stage.bounds.width,
                 game.cache.getImage('bgtile').height,
                 'bgtile');
}

function update() {
    bgtile.tilePosition.x -= 1;
}

The image riverTest.jpg is stored in my assets folder however, when I run this it just shows a black screen. Any idea what's going on? I'm very new to Phaser JS so any explanation would be greatly appreciated!

Edit: Didn't think to check the console for whatever reason, but I was getting two errors

Line 27(the create function): Uncaught TypeError: Cannot read property 'width' of undefined

Line 31(the update function): Uncaught TypeError: Cannot read property 'tilePosition' of undefined

Upvotes: 2

Views: 526

Answers (1)

Nick Delaney
Nick Delaney

Reputation: 601

switch

game.stage.bounds.width

to

game.stage.getBounds.width

Upvotes: 2

Related Questions