Let’s say you are making a 2D game (with a top down view or side-scrolling view, makes no difference). You probably started displaying your character on screen, setting up the code to listen to user input and linking its movement to that input. Maybe you already set up a small physics and collision system.

It’s also likely that while you were developing all these features you needed to implement a small test environment, in order to try out and polish all the mechanics you were aiming for.

That’s all fine and dandy. It is OK to hardcode a small test level into your game for testing and tweaking purposes, but you reach a point when you realize that it is not feasible to develop an entire game this way. You need to have a consistent and clean way to create, store and load up your game levels.

Another consideration you have to take into account is the fact that while you are probably working on your game by yourself (one-band-man style) there will be -hopefully- a day were you will be working within a team, where each teammate will be taking on different tasks during the game’s development. This means that you may be in charge of coding up the game while someone else is designing the graphics and another one is creating the game levels.

For this reason you are going to need a way to separate level creation from the actual game’s code.

Simply put, what you have to implement is a map loader tool within your code, that reads and parses map data (set up in a specific format) and then creates a valid map according to the map file instructions.

This way you can completely separate the level design part of development from code, allowing for a much faster and cleaner workflow (YAY!).

Introducing tile maps

A tile map is basically a 2D matrix where each cell contains a certain value. These values can reference various data, from the terrain aspect associated with that cell to collision data, or even game specific values, such as item location or scripted events.

Also, a tile map usually has various layers. For example, in a simple 2D side-scroller game you will probably have a layer dedicated to terrain graphics (how platforms and backgrounds will look), another one to collisions (indicating where the player can stand or bump into) and another one specific for in-game objects (enemy or player spawn points, items and the like).

Once you have this map data stored up in a file following a specific format its easy to parse it all up within your game code and create a level according to these instructions. Then you can simply access each individual map layer and cell within the matrix to get information about what is going on there, and then act accordingly.

Also, apart from collision or event information you will have to associate with each cell one or more graphic elements. For example one layer will contain background data and another one (on a higher layer) will have the platform graphic data.

In order to be able to build maps in an efficient and fast way you are going to need a specific map sprite-sheet. This will contain a set of cells (with a fixed height and width specified by your map parser) and it will contain the graphics that will be drawn on screen when your game builds the map.

Tile sheet example

 

 

As you can see each tile has the same width and height, and some of them also blend with their neighbours so you can build different structures that flow well and where tile separation is not apparent to the player.

Getting this right can be though, but spending time doing it will make your game feel natural and well made (I’m also a newbie on this, so my tile maps are far from perfect).

In conclusion, this way you can design your game levels without needing to write a single line of code, and what’s even better, you can use one of the many awesome tile editors that some nice people have coded and shared with the game development community.

Tiled Map Editor

One of the best editors for this task is the Tiled Map Editor. Ii is free, easy to use and has many cool features. It also supports isometric maps, but that’s way too advanced for us now.

With Tiled you get an easy GUI where you can create new maps, layers and cell objects. Once you are done with it you can export your map to the .tmx format -which is Tiled standard output format- or you can even write or use a specific plugin to store the map data in any way that suits your game needs.

Building a 2D side-scroller game using tiles

 

 

As you can see the interface is clean and almost self-explanatory (notice my custom tile set on the right).

We will get into specific detail on how to create, load and access these maps within your game code in the second part of this post, but for now let’s see an example of a small game that benefits from this useful way of setting up maps.

How many aliens can you kill?

Click to play!

 

 

P.S- I know, I know. You probably have noticed that my first 2 minigames look like they escaped right out of a classic Game Boy. I don’t blame you, it’s true. I have been testing out a few ideas and I wanted to try out the 4 color GB palette stye. But I promise, next time there will be plenty of colors to choose from!
UPDATE: for some reason the game does not work properly on Firefox, please use another browser (not looking at you, IE) while I figure out what the problem is!, thx!

Happy coding!