Modular Game Worlds in Phaser

We’d need a lot of pixels to store that first level and the other 31 levels in the NES game as images. Additionally, it would be hard to sync up the image with logic with the game. Which pixels can Mario stand on? Which pixels correspond to pipes he can enter?

The tilemap approach defines a set of modular, regularly-sized tiles that we can use to build our levels. That way, we only need one image, a tileset:

Source: Tileset by Nintendo, remixed by Arrow

So that 304px x 192px image holds the possibility of recreating all the levels of the original mario game, plus any new levels you can imagine. (*Of course, you’d still be missing a mustached man and a bipedal turtle, among other things.) Each tile is just 16 x 16 pixels. An arrangement of those tiles into a level is called a tilemap. With tilemap editing software, we can easily configure properties of the tiles too. For example, we can mark some tiles — like the ground tiles — as solid tiles that Mario can stand on.

So with tilemaps, we’ve got a smaller image (performance & memory win) that we can use to easily create and iterate on level designs (creative win).

Phaser 3 Basic Template

Before we jump into loading up some tilemaps in code, let’s take a look at the structure of a Phaser 3 game. In v3, games are structured around Sceneobjects. These are like State objects from v2, but more flexible.

This is a template that you’ll see throughout the Phaser examples repository. It’s an easy way to get started. It creates a game and defines a scene as a collection of functions — preload, create and update.

Here’s a slightly more complicated example that shows how to load and create a background and some text:

from Hacker News https://ift.tt/2Bji2ZR