How to reverse platform generation?

[Steph 2]

I am re-posting this question as I have managed to set up the code on Codepen with makes it easier for people to look at.

I am creating an endless runner, please see my code here: https://codepen.io/clownhead/pen/BqyqOm

At the moment when the left arrow key is pressed the player moves left, the camera follows him so he does not go off screen and the ground tiles below the player are destroyed as they move out of the world bounds on the right and are recreated just before they move into the world bounds on the left. This allows him to keep running forever without running out of ground and works perfectly, but with one problem: I want the player to be running to the right of the game, NOT to the left. Please note I do not need the player to be able to move both ways. I can make the camera follow the player to the right instead of the left by doing the following: I remove the negative from -this in

this.world.setBounds(-this.player.xChange, 0, ...);

so it becomes

this.world.setBounds(this.player.xChange, 0, ...);

Now when the right arrow key is pressed the camera follows the player as he runs right so he does not go off screen, but the ground tiles do not regenerate and he runs out of ground. So basically I need to reverse the direction in which the ground is regenerating but I can't figure out how to do it.  As everything is working to the left, I am sure it's a few simple settings, perhaps some negatives that need to be made positive? I have tried all that I can think of but I can't get it to work. I think the key to solving this might be in these lines:

this.platforms.forEachAlive( function( elem ) {
      this.platformXMin = Math.min( this.platformXMin, elem.x );
      if( elem.x > this.camera.x + this.game.width ) {
        elem.kill();
        this.platformsCreateOne( this.platformXMin - 70, this.world.height - 50, 50 );
      }
    }, this );

I have tried changing all sorts of settings there, but I can't seem to get it to work how I want it to. I am new to Phaser and still learning Javascript. Is anyone able to see an obvious solution? I'd be so grateful. Thanks in advance for any help!

 

 

[Steph 2]

I have figured it out. For those interested here is the code:

var Jumper = function() {};
Jumper.Play = function() {};

Jumper.Play.prototype = {

  preload: function() {
    this.load.image( 'hero', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/dude.png' );
    this.load.image( 'pixel', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/pixel_1.png' );
  },

  create: function() {
    // background color
    this.stage.backgroundColor = '#6bf';

    // scaling
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.maxWidth = this.game.width;
    this.scale.maxHeight = this.game.height;
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;
    this.scale.setScreenSize( true );

    // physics
    this.physics.startSystem( Phaser.Physics.ARCADE );

    // camera and platform tracking vars
    this.cameraXMin = 0;
    this.platformXMin = 0;

    // create platforms
    this.platformsCreate();

    // create hero
    this.heroCreate();

    // cursor controls
    this.cursor = this.input.keyboard.createCursorKeys();
  },

  update: function() {
    // this is where the main magic happens
    // the x offset and the width of the world are adjusted
    // to match the furthest point the hero has reached
    this.world.setBounds(-this.hero.xChange, 0, this.world.width + this.hero.xChange, this.game.height);

    // the built in camera follow methods won't work for our needs, we create a custom one
    
    this.cameraXMin = Math.max( this.cameraXMin, this.hero.x - this.game.width + 130 );
    this.camera.x = this.cameraXMin;

    // hero collisions and movement
    this.physics.arcade.collide( this.hero, this.platforms );
    this.heroMove();

     // these are pooled so they are very performant
    this.platforms.forEachAlive( function( elem ) {
      this.platformXMin = Math.max(this.platformXMin, elem.x );
      if( elem.x < this.camera.x-70) { 
        elem.kill();
        this.platformsCreateOne(this.platformXMin + 70, this.world.height - 50, 50 );
        console.log("element killed");
      }
    }, this );
    
  },

  shutdown: function() {
    // reset everything, or the world will be messed up
    this.world.setBounds( 0, 0, this.game.width, this.game.height );
    this.cursor = null;
    this.hero.destroy();
    this.hero = null;
    this.platforms.destroy();
    this.platforms = null;
  },

  platformsCreate: function() {
    // platform basic setup
    this.platforms = this.add.group();
    this.platforms.enableBody = true;
    this.platforms.createMultiple( 10, 'pixel' );

    // create a batch of platforms that start to move across the level
    for( var i = 0; i < 9; i++ ) {
      this.platformsCreateOne( this.world.width - 450 + 70 * i, this.world.height - 50, 50);
    }
  },

  platformsCreateOne: function( x, y, width ) {
    // this is a helper function since writing all of this out can get verbose elsewhere
    var platform = this.platforms.getFirstDead();
    platform.reset( x, y );
    platform.scale.x = width;
    platform.scale.y = 16;
    platform.body.immovable = true;
    return platform;
  },

  heroCreate: function() {
    // basic hero setup
    this.hero = game.add.sprite( this.world.centerX, this.world.height - 69, 'hero' );
    this.hero.anchor.set( 0.5 );
    
    // track where the hero started and how much the distance has changed from that point
    this.hero.xOrig = this.hero.x;
    this.hero.xChange = 0;

    // hero collision setup
    // disable all collisions except for down
    this.physics.arcade.enable( this.hero );
    this.hero.body.gravity.y = 500;
    this.hero.body.checkCollision.up = false;
    this.hero.body.checkCollision.left = false;
    this.hero.body.checkCollision.right = false;
  },

  heroMove: function() {
    // handle the left and right movement of the hero
    if( this.cursor.left.isDown ) {
      this.hero.body.velocity.x = -400;
    } else if( this.cursor.right.isDown ) {
      this.hero.body.velocity.x = 400;
    } else {
      this.hero.body.velocity.x = 0;
    }

    // handle hero jumping
    if( this.cursor.up.isDown && this.hero.body.touching.down ) {
      this.hero.body.velocity.y = -350;
    } 
    
    // wrap world coordinated so that you can warp from top to bottom
    //this.world.wrap( this.hero, this.hero.width / 2, false );

    // track the maximum amount that the hero has travelled
    this.hero.xChange = Math.max( this.hero.xChange, Math.abs( this.hero.x - this.hero.xOrig ) );
  
  }
}

var game = new Phaser.Game( 500, 300, Phaser.CANVAS, '' );
game.state.add( 'Play', Jumper.Play );
game.state.start( 'Play' );