Before we start building anything, let's take a moment to think about how this automatic level building is going to work and what we need to do to build it.
We intend to create a maze-like level design viewed from the top, similar to the look of the conventional maps. We want to create varying levels dynamically, so we should break the stage up into tiles that can each contain a different graphic. All these tiles placed side by side will create the complete level.
Now for the math involved. We know the entire stage is 480 pixels wide and 360 pixels high. So the tiles have to be of a size that can easily divide the stage in equal segments without any leftover space. It's also useful if the tiles are square. This isn't mandatory, but it makes drawing tiles a bit quicker since it allows to rotate tile designs and still fit them within the same space. Refer to the following screenshot of the stage:
Let's summarize these requirements:
- The stage is divided in equal sized tiles
- The tile width and height should be equal (square)
- Tiles should fill the stage sitting side by side without any leftover space
We can now consider a few different sizes for the tiles. We want the tiles to be small enough to generate enough variation. However, we don't want to make them too small because that would require all the other elements (fitting within the maze) to be very tiny and hard to see.
Let's check how tiles of 80 x 80 pixels would work:
- 480/80: It would be six tiles wide. That could work nicely.
- 360/80: It would be four and a half tiles high. Oh, but that doesn't work quite so well. We would end up with half a tile row being cut off.
How about 60 x 60 pixels tiles then? Let's check this as follows:
- 480/60: It would be eight tiles wide. So far so good.
- 360/60: It would be six tiles high. Hey, that might work nicely!
Can we make the tiles even smaller? Perhaps, 40 x 40 pixels. Let's check this:
- 480/40: It would be twelve tiles wide
- 360/40: It would be nine tiles high
These smaller tiles could work too, but they might leave the game character and other items to be a bit too small. So let's decide on using tiles that are 60 pixels wide and 60 pixels high.
Once that's settled, we can consider the design of the tiles themselves. What's important in a maze? What does it consist of? A maze consists of passageways and walls. So we only need two different kinds of "space". Open corridors through which the player character can walk and solid walls that block his movement. So we can easily do with a simple black and white scheme. We use white for passageways and black for walls.
Each tile can be broken down further into smaller segments. We can then color each segment either black or white to indicate it is a wall or an open space. Since the tile will be 60 x 60 pixels, it makes sense to create a grid that is three segments wide and three segments high. Each segment will then be 20 x 20 pixels in size. This holds for nine tiles within a tile.
After thinking about this design by making some sketches and calculations, we have a good idea about how we want to design the level generator. Sketching ideas before you start to work can be really useful in discovering problems early, such as the size of 80 pixels high not working for the stage height.
It might seem more work to design and plan ahead, and you might be eager to just dive right in and see what happens. However, a little thought beforehand can save you a lot of time. When we design all our tiles, we will be able to create a maze similar to the following screenshot:
