Jump to content

Custom scrolling engine


Recommended Posts

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?




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






Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...