Rapid Ideation Session Day 9: Building a level and setting up the camera

This post will not be so much concerned with the designing of levels but just the technicality of setting them up in Unity (Unity, 2021). I decided that before I get onto designing potentially exciting levels, I would at least attempt to build them so I know what is involved.

Learning the technical aspects to building levels before trying to design them may perhaps have been a backwards approach, but I chose to prioritise learning the skills to execute my ideas, as I already have some confidence in my capacity to at least draw interesting levels and concepts.

To start building levels, I referred back to Muddy Wolf Games’ tutorial series (Muddy Wolf Games, 2020) on building a 2D Platformer in Unity as he has a whole video on building levels, which includes drawing tiles for the level and applying them to a scene to create a world for the player sprite to walk in.

Initially, when I started building mock-ups for the world, I dragged the sprite image for the ground I had created several days before into the scene and duplicated it many times to create something that resembled a level. I learnt that this is in fact bad practice – partly as building a level that contains a lot of detail would make this very time consuming and also if you have sprites that are side by side repeating, the box colliders can clash and this can cause some confusion for the animator parameters. I started to find that after my character was walking in the scene, he would suddenly lock into the jump animation, as the isGrounded parameter would become locked in false.

Muddy Wolf Games uses a premade tilemap for his level in this tutorial. He did not include a link to this, but furthermore, I preferred to make my own, as the scenery in this game is one of the most important thing and I therefore decided to create one that would somehow resemble the surface of Mars.

A shot from Muddy Wolf’s tutorial. Here he is demonstrating how to slice up a tilemap using the Sprite Editor, so that each part can be used to draw all the elements of a level.

I searched online for numerous tutorials for doing this, as well as any possible tools. I came across a tool called Tilesetter Lite (Led, 2020), which is intended for creating tilemaps. However I gave it a go and I was really struggling to get a hang of it. It seems a lot of the main features were locked unless I had the paid version. I had a very limited time by this point, but I instead decided to try building a tilemap using an application I am familiar with – Photoshop.

To do this, I watched a tutorial on this from Brackeys on this. With his tutorial, he provided a template that I reworked to create the Mars surface. Here was the outcome…

As per Muddy Wolf Games’ tutorial, I next learnt how to convert this above image into an entire world with a terrain.

I sliced the image up into squares using the Sprite Editor and ensured that they were each 16×16 pixels.

I applied a 16×16 grid to my project and in turn, I applied a component known as a Tilemap.

Using a window in Unity called the Tile Palette, I then uploaded my sliced up sprite for the Tilemap in order to create a Palette. I then used this Palette to draw in the beginnings of a level. I experience a few problems with this which I had to overcome. Firstly, the tilemap template that I downloaded from Brackeys was far too big and this caused the tile pallette to be competely blurred and out of proportion. I then worked out that I had to reduce the size of my image file to a resolution of 16 pixels to correspond with the grid in my project.

While Brackeys and Muddy Wolf are both fantastic game development tutors, what I have learnt from this is that when I am combining different sources, it can cause various technical glitches to arise, as different practitioners will always have different attitudes and approaches in my work. I should use any sources objectively and critically.

Initially, some of the parts of each graphic was falling out into other squares of the grid, which was resulting in an effect in which my sprite looked as though it was hovering above the ground in places. I initially tried to fix this using a tool in the sprite editor called Custom Physics Shape, which is intented for the actual tile to fit to the pixels of the image. However, this is only practical for smaller shapes as it is a time consuming process. Furthermore, when I tested it, because of the variation in each bit of the surface, it caused some confusion with the isGrounded parameter and my sprite would not jump in places. I eventually fixed this by going into the Photoshop file and adjusting it so that all tiles could sit neatly within a 16×16 square withoiut any overlap.

In order to set the scene so that the player character could stand on the platforms created by the tile palette, I had to apply a Tilemap Collider 2D component and also a Composite Collider, which in turn added a rigidbody, which was to ensure that these tiles were not merely part of a background, but were objects in the scene that my character could make contact with.

Here is the end result.

So far, so good. However there is always room for improvement. The jumping is a bit floaty for my liking so I may play around with the move speed of the player or tweak the Jump() condition in the player character’s movement script.

You will see I also added camera movement to track the character. I did this by installing the Cinemachine plugin, which allowed me to create a component for that main character that follows the character around but is also confined by a box collider so that the camera does not follow the player if he falls off the map.

Now that I have some technical understanding of the building of a map, I am going to do some research into the best practices for designing a level in a way that is challenging and enjoyable for the player. I will aim to design multiple levels but in the time I have, I will aim to build at least one before the Wednesday deadline.


Brackeys, 2018. TILESET in Photoshop (Tutorial). [image] Available at: <https://www.youtube.com/watch?v=aaEEujLtsr8> [Accessed 25 February 2021].

Led. 2020. Tilesetter Lite (2020). [Software]

Muddy Wolf Games, 2020. Level Design with Tilemaps.

Available at: <https://www.youtube.com/watch?v=Ix5W-yfHrhY> [Accessed 26 February 2021].

Unity Technologies. 2021. Unity (2021). [Software]

One Reply to “Rapid Ideation Session Day 9: Building a level and setting up the camera”

Leave a Reply

Your email address will not be published. Required fields are marked *