Sign in to follow this  
Steph

Infinitely repeating background in Phaser?

Recommended Posts

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');
};

 

Share this post


Link to post
Share on other sites
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). 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.