Custom scrolling engine

[Gryz]

I am procedurally generating a large world with many tiles (e.g. 1000 x 1000 tile based grid).

Having all of these tile objects in memory at once will use too much memory; I have profiled up to 1GB of usage.

What I have done instead is split up my world into different sections of tiles. See screenshot. The black square in the middle represents the pool of tile objects that is reused. As the player moves, new tiles are not created-- instead, tiles from the sections of the world not currently visible are "swapped" into the tile pool.

This is working. But the issue I am having is defining custom scrolling behavior. The idea is that I need to keep track of the player's movement; as the player moves right, tiles will be swapped into the pool on the right side of the screen.

This code seems to lag behind Phaser's scrolling engine. The result is the world's tiles are not being rendered as fast as the player is moving. 

Any ideas?

 

Quote

 

update() {

    // Get the distance that the player has moved since last frame.

    const distanceX = this.player.sprite.x - this.prevPlayerX;
    const distanceY = this.player.sprite.y - this.prevPlayerY;
    this.prevPlayerX = this.player.sprite.x;
    this.prevPlayerY = this.player.sprite.y;

    ...

    if (Math.abs(distanceX) > delta) {
        // Reposition buffer of tiles and update tile attributes
    }

}

 

 

 

[Gryz]

Does anyone have suggestions on how to address the problem of my custom scrolling calculations not matching Phaser's?

I am doing this because loading the entire world's tiles into memory creates too much memory overhead.