Menu

Creating a level for a 2D game

In the earlier posts I have been talking about pixel art, 2D character animation and Photoshop's animation tools. So, I thought it would be good to talk a little about the levels too. I designed one level for the pixel game project so I will use that as an example. The level might go through some changes while we develop the game. Still, I believe it will be interesting to see how it's built and how much space the graphics for the level actually take.

Thinking about how to do the graphics so that they use the minimum amount of memory is often important. Although how important it is depends on what platform the game is planned to be released. On PCs it's not as important as it is on console and mobile platforms. No one likes long loading times or a game that takes all the storage space on your phone. This is one of the reasons why pixel art is so popular even today.

Building the level

The game will be a sidescroller where the player tries to get to the top. I will be going through the layers of the castle one by one, and in the end I will show you a larger slice of the levels and the graphical assets which were used to build up the level. On each stage I will tell you a bit about what I used and why.

The back wall

First off we will create the back wall of the castle where our game is taking place. We will create a wall texture that we will tile, in order to easily create a larger surface.

In this case I made the wall from two parts. You can see the spot where they meet easily in the middle. There will be two floors in this picture and this way I can move each of the floor walls separately if needed.

MakingMap1

The Floors

Next let's add the floor on which our characters will roam. These are from two different textures that are tiled. The middle is the same; a square tile as the wall tile, and you can quite easily see the tiles in the picture. I just added a colour layer that alters its colour. The floor is just few horizontally made bricks that are then tiled to create the floor surface.

MakingMap2

The wall elements

Next I added windows and stairs to the back wall. You can add the window layer between the back wall and the floors but the stairs are meant to break the floor layer as if it was on the wall. So it has to be in front of the floor layer. I wanted the windows to be further away as if there was a room or deeper spot on the wall. To achieve this I created a colour layer between the windows and the wall so that I could easily test out darker colours on the wall to get the wanted effect. I also created two stone pillars to hide the transition between the colours.

MakingMap3

The items

Now that we have an empty castle or at least a part of it we need to add stuff. You can use the same items over and over again and have different combinations of items to give a nice feeling to the castle. Here I added items to these two floors.

MakingMap4

The characters

The next layer of items are the characters that will be roaming the castle's corridors. All the stuff added earlier will be behind them except the floors which work as roofs as well. So in this case the hero would have to jump over the goblins to move forward, but because of the low ceiling he can only do this in front of the windows where the ceiling is higher. Creating the level will affect highly on how the game plays out, so it's good to give level design enough time.

MakingMap5

Adding something extra

The game might be okay as it is but you might want to add some thing to it. I decided to add some glow to the candles which will bring some atmosphere to the game. All proper castles should have cool glowing candles right?

MakingMap6

Separating the layers

The game looks nice and colourful, but it might be hard to see which objects are on the same layer. So one way to grow the difference between the character layer and the background layers is to create a colour layer that will give that separation. In this case I chose a shade of green thats lightly darkens and adds a hardly noticeable green tint to the background elements.

 MakingMap7

In my opinion, the colour layer separates the background and characters quite nicely. It also gives the level more atmosphere and makes the castle feel a bit darker since it is supposed to be a dark and scary place.

The building blocks 

I think that the levels are not too repetitive but you could create even more objects to have more individualized floors in the castle. It is good to try out how you could reuse old tiles or objects, sometimes just using a colour layer to modify their appearance might be enough.

I gathered all the pieces from which the level is made of. As you can see, I didn't use too many different items.

MakingMap10

I just collected them on the same picture, but if you would like to use your sprites in a game, you should organize them into a grid. Most programs prefer using grids when separating different sprites from the sprite sheet.

If you want to have animations for some of the background objects you might need more room. For example, if I would (and probably will) make an animation for the candle light, I would need to have all the circles separately so that I could create an animation with them in the engine.

Additional pictures of the level

Here are two additional pictures of the level, so you can see how I have used the same items over and over again. 

MakingMap8

MakingMap9

In the game the player will see the floor where his character currently is and a bit of the next one, so that he will see if there are enemies coming towards him. By separating the background clearly from the foreground, the player can easily see what objects in the game will affect or limit his character.

Conclusion

Making the level was fun. One of the reasons was that I like the theme but also because doing items with pixel art is rather easy. You can do many different kinds objects in a short time which means you can fill the level with interesting items really fast. When I look at the pictures it's quite amazing that they are made from so few items. It is good to remember that you can affect the colours afterwards, so you can  use the same asset again in a different setting.

To recap, this project is planned to be an example game in our own game engine called HactEngine. HactEngine's alpha version is planned to be released on December 2014. So, I will talk more about this project when we are closer to HactEngine's release date!


Share this:
Category: Graphics   


comments powered by Disqus