A comprehensive guide on using Perlin Noise to generate an infinite terrain that loads in chunks around the player.

Posted on 1st Mar 2019. Follow @phaser_ and get the Phaser World newsletter.


Jared York is on fire recently, cranking out some superb tutorials and this is yet another of them.

"In this tutorial, we will be creating an infinitely, procedurally generated, map with Phaser 3.". It uses perlin noise to create an infinite map that scrolls around the player: "When we generate infinite terrain, we will not be storing an array of all the tiles in the map. Storing each tile individually would not be scalable, it would crash the browser after moving over enough terrain, and it would be impossible to store it in the browser. Instead, we will be using a chunk system.

If you’ve ever played Minecraft, you will probably know that chunks of blocks are loaded around the player. When the player moves out of the range of a loaded chunk, the chunk is the unloaded. We will be building a very similar system in this tutorial. To start, we can create an object that represents a chunk. To do this, we will be using the ES6 class syntax, which is essentially syntactic sugar of a normal JavaScript object. Classes are useful for organizing the structure of an object, and provides an easy way of adding functions."

Read More

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now