Infinitely repeating background in Phaser?

[Steph 2]

I have a background image and a separate ground image that I want to loop as long as the character is moving forward. When the character stops, the background and ground should not be moving. So basically I am creating an endless runner. For similar games it is often suggested to add this.game.background.tilePosition.x -= 1to the update function. This is not what I am looking for as it makes the background constantly move regardless of whether the character is moving. At the moment my background and ground images are repeating, but they are restricted to this.game.world.setBounds(0, 0, 1280, 800);. Any suggestions would be greatly appreciated as I have been at this for days, and I am sure there must be a simple solution. Please see my code below:

function Hero(game, x, y) {       

Phaser.Sprite.call(this, game, x, y, 'player');

this.anchor.set(0.5, 0.5);
    this.game.physics.enable(this);
    this.body.collideWorldBounds = false;
      

    this.animations.add('stop', [0]);
    this.animations.add('run', [1, 2, 3, 4, 5], 14, true); // 14fps looped
    this.animations.add('jump', [6]);
    this.animations.add('fall', [7]);
    this.animations.add('die', [8, 9, 8, 9, 8, 9, 8, 9], 12); // 12fps no loop

}

Hero.prototype = Object.create(Phaser.Sprite.prototype);
Hero.prototype.constructor = Hero;

Hero.prototype.move = function (direction) {
  const SPEED = 200;
    this.body.velocity.x = direction * SPEED;


    // update image flipping & animations
    if (this.body.velocity.x < 0) {
        this.scale.x = -1;
    }
    else if (this.body.velocity.x > 0) {
        this.scale.x = 1;
    }
};

Hero.prototype.jump = function () {
    const JUMP_SPEED = 600;
    let canJump = this.body.touching.down;
  

    if (canJump) {
    this.body.velocity.y = -JUMP_SPEED;
  }
  return canJump;
};

Hero.prototype.bounce = function () {
   const BOUNCE_SPEED = 200;
   this.body.velocity.y = -BOUNCE_SPEED;
};

Hero.prototype.update = function () {
    // update sprite animation, if it needs changing
    let animationName = this._getAnimationName();
    if (this.animations.name !== animationName) {
        this.animations.play(animationName);
    }
  
};

Hero.prototype.die = function () {
    this.alive = false;
    this.body.enable = false;

    this.animations.play('die').onComplete.addOnce(function () {
        this.kill();
    }, this);
};


Hero.prototype._getAnimationName = function () {
    let name = 'stop'; // default animation

    if (!this.alive) {
        name = 'die';
    }
        
    else if (this.body.velocity.y > 0 && !this.body.touching.down) { 
        name = 'fall';
    }
       
    else if (this.body.velocity.y < 0) {
        name = 'jump';
    }

    else if (this.body.velocity.x !== 0 && this.body.touching.down ) {
        name = 'run';
    }

    return name;
  
PlayState = {};

PlayState.init = function () {
    this.game.renderer.renderSession.roundPixels = true;

    this.keys = this.game.input.keyboard.addKeys({
        left: Phaser.KeyCode.LEFT,
        right: Phaser.KeyCode.RIGHT,
        up: Phaser.KeyCode.UP
};

PlayState.preload = function () {

      this.game.load.json('level:1', 'data/level01.json');

      this.game.load.image('ground', 'images/ground.png'); // I need this to repeat infinitely

      this.game.load.image('background', 'images/background.png'); // I need this to repeat infinitely

      this.game.load.spritesheet('player', 'images/player.png', 64, 64);
   
};


PlayState.create = function () {

      this.game.world.setBounds(0, 0, 1280, 800);

      this.game.background = this.game.add.tileSprite(0, 0, this.game.world.width, 800, 'background');
      this.game.ground = this.game.add.tileSprite(0, 680, this.game.world.width, 166, 'ground');

      this.game.physics.arcade.enable(this.game.ground);
      this.game.ground.body.immovable = true;
      this.game.ground.body.allowGravity = false; 

      this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  
      this._loadLevel(this.game.cache.getJSON('level:1'));
      
};

  
PlayState.update = function () {

      this.physics.arcade.collide(this.player, this.game.ground); 
      this._handleInput();

 };

PlayState._handleInput = function () {

              
                if (this.keys.up.isDown) {
                    this.player.jump();
                   
                } else  if (this.keys.right.isDown) { // move player right
                    this.player.move(1);

                  } else if (this.keys.left.isDown) { // move player left
                    this.player.move(-1);
                } else { // stop
                    this.player.move(0);
                }
      };

  
PlayState._loadLevel = function (data) {
       	                  
       this._spawnPlayer({player: data.player});
       const GRAVITY = 1200;
       this.game.physics.arcade.gravity.y = GRAVITY;
      };

PlayState._spawnPlayer = function (data) {
           
       this.player = new Hero(this.game, data.player.x, data.player.y);
       this.game.add.existing(this.player);
       this.game.camera.follow(this.player, Phaser.Camera.FOLLOW_PLATFORMER);
      };
          
window.onload = function () {
        let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game');
        game.state.add('play', PlayState);
        game.state.start('play');
};

 

[quiphop 18]

You can extend a bit the tileSptire and override it's Update function (where You can detect whatever player is moving or not)
https://phaser.io/docs/2.6.2/Phaser.TileSprite.html#update

[Steph 2]

Thanks quiphop for your response. I am new to phaser (and still learning Javascript). What do you mean by extending the tileSprite please?

[quiphop 18]

14 hours ago, Steph said:

Thanks quiphop for your response. I am new to phaser (and still learning Javascript). What do you mean by extending the tileSprite please?

You can create own class-wrapper (inherited from Phaser Tilesprite class) to get full control over it.
Easier way - override Update functions in your background/ground (link provided in previous post). 

 

[Steph 2]

Thanks quiphop for your suggestions and explanation. I appreciate it very much!