156. Creating a 2D platform game #1

I’ve been wanting to try this for quite some time, but I’ve never been much good at playing them, nor am I a good level designer, so I’ve put it off until now.

What I’m going to focus on is designing and building a useful code library that you can use to help you with your own platform games, maybe for ideas or techniques, or for useful code functions.

This series of posts will be like a story about how this project went over the past couple of months, including the many problems I ran into and how I tackled them (and the mistakes I made). You learn the most from problems, but I’d like for you not to have to spend as much time as I did, figuring them out.

So first of all, here is a video of the result, using a simple demo level. You will see I have pushed Codea as far as I dare, animating just about everything.

Where do you start?

I began with deciding I wanted to use a tile based system as you see on most side scrollers, ie the level is made up of identical size squares (“tiles”). This means the same images can be used over and over again for things like ground, walls, etc. It also makes it easy to design a level because you can use squared paper or a spreadsheet to mark all the squares (tiles) with various stuff.

I used the “Platformer Art” image library provided with Codea, because it was designed for tiles, and I set the size of each tile to be the size of the grass block image in that library, which is about 70 pixels square.

So now I could open a spreadsheet, decide how many columns and rows of tiles I want, and start colouring in green for grass, brown for brick, etc. And this is pretty much how I started. Actually, I used characters like “g” for grass and “b” for brick, instead of colours.

This turned out to be much better for designing levels, because although colours are prettier to look at, you have to go to Codea when you are done, and program all the tile positions by hand. If you use characters instead (one per tile), you can use a formula to make a string for each row of the map (with one character per tile), so for example, a row of grass blocks with water in the middle might look like “gggggggggwwgggggggg”. You can then copy these strings into Codea, and then read the characters off the string one by one, and set up the map automatically.

So my level design consists of a set of strings (one per row of tiles), with one character per tile, and I have a tile “editor” that reads in the strings and sets up the map for you.

Happily, I found that my set of strings is quite easy to view, meaning I don’t really need a spreadsheet. I can just build my level right in Codea, as a table of strings. To show you what I mean, here is the complete level design for the video above.

local mapText={ 
    '-----------------------',
    '-----------------------',
    '-----------------------',
    '-----------------------',
    '-----------------------',
    '-----------------------',
    '----m-----cu-----------',
    '----m---m-r------------',
    'b---m---b-------kb----b',
    'b@-----bb-----t--bF--lb',
    'ggggggggggggglggggggglg',
    'ggggggggggggglggggggglg',
    'ggggggggggggglggggggglg',
    'ggggggggggggglggggggglg',
    'g-----------glggggggglg',
    'g-L---------glggggggglg',
    'g--m---h-f---lggggggglg',
    'g-------i----lggggggglg',
    'g-ggggggggggggggggggglg',
    'g--------------------lg',
    'g----------m-----m---lg',
    'g-------y----s-------lg',
    'ggggwwggggggggggggggggg',
    'ggggggggggggggggggggggg'
}

The dashes are ignored, but everything else tells Codea to put something in a tile. You can see that it is quite easy to see the layout, and edit this table.

What do all the characters mean? Whatever I want them to. I’ll get to that later. For now, I think this is a very nice way to lay out a level, because it is compact, portable, and easy to create and edit.

Advertisement