Tutorial: How to make a tile-based 2D scrolling game world in JavaScript

Lesson 2) Building a map

The structure of a map

Just as the canvas uses x and y coordinates starting in the upper-left corner, so will our map. We'll break our game world into tiles a given number of pixels high and wide, and the tile at x=0 y=0 will be in the upper left corner of the map.

We'll store the map in an array. As you recall, the index numbers for items in an array start at 0, so this makes them very convenient for this purpose. Imagine we had a game map that had one row of 100 tiles - a very thin game perhaps, or with larger tiles maybe a side scrolling beat-'em-up. We could represent it as follows:

var map = [tile1, tile2 ,tile3, tile4, tile5, tile6, tile7, tile8, tile9, tile10, etc. ];

Each array item would reference an object which tells the game what to draw in that area of the map.

So an array works for one row of tiles, but how do we made a 2-dimensional map, with many rows? Simple, we just put arrays into the array! For example, to make a 3 x 3 grid, you would put three arrays, three items long each, into another array. Observe!

var map = [
[tile1, tile2, tile3],
[tile4, tile5, tile6],
[tile7, tile8, tile9]
];

The variable "map" is an array. Each item within map is also an array. So map[0] would reference the first row, containing tiles 1 to 3. Feel free to load this into a program and put console.log(map[0]); into it, to check that this is true (You'll have to define these tile variables though, or put strings or numbers in instead).

So what if you wanted to reference a single tile? Well to do that, you simply tack another square bracket on the end with index number of the tile you want.

It's important to note one thing here: each item in the map array is a row of tiles on the map, not a column. This makes the coordinates backwards - if you ever need to refer to a tile by its coordinates, the y axis comes first. So map[2][3] refers to the 2nd tile down, and the 3rd tile across the map (tile6 in this case).

Tile be there for you

Each item in our map will have information about what is at that location. As noted above, you can make them objects, maybe like this:

{type:"grass", color:"green", building:1, backgroundImage: grass }

You could use the "type" to adjust the player's speed, e.g. to make him slower on sand. The backgroundImage could to an image file loaded earlier. The building property could trigger the program to draw building 1 if this tile is in the camera.

However for this simple tutorial, each item will just be a colour in quotation marks, like "green". Then we'll use this to colour the tiles in.

Now draw your map

It's a complete pain to draw out a map in text like this because you don't have a visual representation as you go along. If you were making a game with many levels, you'd probably have to code your own level editor first. But there's an unlikely ally you can use instead - a spreadsheet! I have LibreOffice, and used it to make my map as follows:
  1. Load up a spreadsheet in LibreOffice.
  2. Re-size the cells to be roughly square-shaped. Each cell represents a tile.
  3. Put the name of the colour you want each tile to be in each cell, and fill the cell with that colour.
  4. Repeat until you've drawn a nice map
  5. Insert a column to the left and right of the map, and fill each cell alongside your map them with with [ and ] respectively. Mine looked like this.
  6. Save as a CSV, choosing the option to quote all text cells.
  7. Load into a text editor and Find and Replace:
    • Find "[", (including the comma) and replace with [
    • Find ,"]" and replce with ], (again including the commas)
  8. Put another [ at the start and another ] at the end of the text file.
  9. Copy that into a variable in your code, ideally called map.
I recommend you build your own map, mainly so that you get some practice doing it, but also because I'd like to see what you came up with. If you're feeling lazy though you can just use mine - here's the CSV and the array that I made from the spreadsheet I linked to above.

The map, as they say, is not the territory, but before we turn the arrays into our game world we shall make the camera.

Go to Lesson 3) Creating a camera