Continuously scrolling background?

Question

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

What is your directory structure like. Where is your game js located? Is it in root, and your image in assets? — Nick Delaney, Mar 23 '16 at 16:28

Nick Delaney · Accepted Answer · 2016-03-23T17:19:44.740

2

switch

game.stage.bounds.width

to

game.stage.getBounds.width

edited Mar 23 '16 at 17:19

answered Mar 23 '16 at 16:43

Nick Delaney

601
5
15

I was apparently getting errors in the console I didn't think of looking at. I edited the question with the errors included – Zach Mar 23 '16 at 16:52
@Joris , I tested your code and it works... Again are you running this on a web server? – Nick Delaney Mar 23 '16 at 17:08
Yes, I'm running it on wamp – Zach Mar 23 '16 at 17:11
What version of phaser are you using? – Nick Delaney Mar 23 '16 at 17:11
I'm running version 2.2.2 – Zach Mar 23 '16 at 17:12
Thank you! I've been searching for a solution but it's very inconclusive. It seems to just work for some people and not for others – Zach Mar 23 '16 at 17:19
1

@Joris look at my edited post. Apparently its no longer bounds its getBounds – Nick Delaney Mar 23 '16 at 17:20
That did it! Thank you! – Zach Mar 23 '16 at 17:21
If you still happen to be around, the image only occupies about 1/3 of the screen but does scroll. Any idea why that would be? – Zach Mar 23 '16 at 17:42

Continuously scrolling background?

1 Answers1