Search code examples
javascripthtmlwebglside-scrollerphaser-framework

Looping sprite scrolling background


I'm new in WebGL and I decided to try the Phaser.js library.

I'm having some trouble with background scrolling (games like runner and side scrollers). I've seen how it works in PIXI.js, but I cant do / find a solution for Phaser.

Pixi.js code.

function init() {
    var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
    far = new PIXI.TilingSprite(farTexture, 512, 256);
    far.position.x = 0;
    far.position.y = 0;
    far.tilePosition.x = 0;
    far.tilePosition.y = 0;
    stage.addChild(far);
    requestAnimFrame(update);
}
function update() {
    far.tilePosition.x -= 0.128;
    renderer.render(stage);
    requestAnimFrame(update);
}

Solution

  • The equivalent in Phaser would be:

    var far;
    
    function preload() {
    
        game.load.image('imageKey', 'resources/bg-far.png');
    
    }
    
    function create() {
    
        far = game.add.tileSprite(0, 0, 512, 256, 'imageKey');
    
    }
    
    function update() {
    
        far.tilePosition.x -= 0.128;
    
    }