Introduction
In this blog, I will be going over how to create tile sets and tile maps using the demonstration work that we’ve been shown.
We need to start in Photoshop, creating a canvas size of 1024 by 1024 pixels. We use a square grid to map out where we want the platforms and assets of the level to be. To make a grid, we use the view tab in the main toolbar and navigate to ‘New Guide Layout’. Here you can add the grid lines you need.
(Tilemaps) Tilemaps are what allow us to keep the background and platforms of a 2D game level in Unreal Engine on one image file. Tilemaps are frequently used for 2D game assets and were used with 8bit and 16bit consoles.
To create a tilemap, we need to find a texture that we can use for platforms, walls etc for our level. Here is an example:
We set our grid up in 4×4 to give us 16 tiles.
We import the texture in and tidy up the grid lines to remove any overlapping pixels.
Next, we have to hide the background layer to make the document transparent, this will be important later. Go to file > export > quick export as PNG. Save this PNG file in the content folder within Unreal Engine.
When going into Unreal Engine, it will recognise this and confirm to import the image. Right-click on the imported image and go to ‘Sprite Actions’ > Create Tile Set.
Resize the grid for this tile map.
Right click in the content browser (dashboard) and navigate to Paper 2D > Tile Map. Drag our texture tile set up into the left side of the new tab.
Resize:
Now we can simply select one of the tiles from the tile set and click and drag in the white square where we want the tile to be replicated.
Next we need to add collision to the platforms. Go to the tile set itself, select a tile and select ‘Add Box’ at the top bar.
This will add a blue box that we can scale around the tile to add the areas of collision. We can now collide with the environment. Next, we can add more levels and experiment with different layouts, using our tileset to add platforms and details to the walls. Make sure to adjust the map dimensions for different layouts. Keep the tile dimensions the same (256×256).
After creating another level, we can attach them together to form a bigger map:
Play through the map to make sure it is playable and accessible.
To edit the character, go to editor – find the CharacterMovement component and navigate to the general settings on the right-hand side tab. Here we can find the setting to adjust the gravity scale, max acceleration of the character etc. We are going to change the character’s jump velocity so it can reach higher platforms in the level.
In Unreal Engine, we have to add the sheet to the content section. We also need to create a tileset to determine how big the level is going to be.
Navigate here to create a tile map. We can resize this if we need to for the purpose of our level. Given the texture of the tile map, it is a lot like rocky earth. This type of tile map would be ideal for a cave-exploration themed game or a particular stage in a level.
Using the ninja character we rigged and created with Gareth in a workshop, we have to edit the options to ensure the collision applies to our character and he doesn’t faze through the platforms.
This is a simple way to create 2D levels and we can play about the with layout of the level to increase the player’s interest in playing the game.
Parallax Scrolling with Tile Maps
For this part of the workshop, we are going to be using two assets. The first one is a PNG file:
These were not made by me, they were made in illustrator and I am very new to that software so I couldn’t create something like this at this time.
We converted these files into a tile set by going into sprite actions > create tile set.
Adding collisions to the first PNG file. We go to the settings of the tile and resize it to 256×256. Now we can see the image in grid format. Next, we need to add collisions to them.
On the smaller blue box window towards the upper right of the screen, we can see a blue box outline roughly around our image. We need to resize it like above to fit better around the image.
We select the next square in the grid and click ‘Add Box’ right above it. This will provide us with the same blue box outline that we can resize around the image. This process was a a little tedious for me but luckily it didn’t take as long as you’d expect.
So clearly we have to repeat this process for every square grid piece that has an image in, aka where ever parts of our platform, level, assets etc are, we have to ‘Add Box’ to.
In that case, in this example we would only need to repeat this process 11 times. Make sure to save the progress.
Our next image with a mountain gets the same treatment. Resize to 256×256. However, this is our background image so it does not need collisions added, thankfully.
Now we need to combine this with our tile sets in a blank level.
Here is our background, we need to scale this up to 100x100x100. We can do this quickly by clicking on the padlock icon next to the scale options. This makes it so all axis will scale according to one.
We need to set the Y depth to -10,000 so that the image is far away. Using the image we just applied collision to, we need to create a tile map for it. This design will be basic.
Right click on the empty ‘dashboard’ at the bottom (grey spacing around the contents of the level). Then navigate to Paper 2D > Tile Map.
Double click on the new tile map and minimise the tab slightly so that we can click and drag the collision platform into the open tray on the left. It should look like this:
Resize this once again to 256×256. (This resize should be only on the Tile width and tile height). Then resize the map width and map height to 12 and 8.
On the left, we can select a square from the image and drag it into the blank white outline. This is our level and where we click will place platforms etc.
This is fun to experiment with the layout of the map and imagine where you’d want the player to go. Once the level is created, we can click and drag the tile map in the ‘dashboard’ up into the perspective tab. (Remember to save progress).
To make the platforms cover the length of the level, we can easily copy and paste it and move it over to fit appropriately.
Apparently, it is important to make sure the Y location is set to 0, though I am unsure as to why. But from here we can drag out character in.
We can edit our character by clicking the ‘Edit’ button underlined in the top right tab. Once the editor is opened, we need to go to ‘viewport’ and select the side-view camera. From here, adjust the projection mode from orthographic to perspective. Orthographic flattens everything into a 2D image, whereas perspective will maintain the illusion of distance and scale things differently depending on how far away or close it is.
After this, we need to select our ‘CameraBoom’ and edit the target arm length to 1000.
Compile and save progress. Select character, navigate to details panel and command the game level to Auto Possess ‘Player 0’, Auto Possess AI ‘Placed in World or Spawned’ and AI Controller Class ‘PlayerController’. Just below these options, change Auto Receive Input to ‘Player 0’.
This allows our character to move and interact with the platforms we have put in place. Next we need to add a background. Navigate to the folder where we saved our tile sets and create a new tile map. Once again, to do this we right click on the empty ‘dashboard’, go to Paper2D > Tile Map.
Resize once again – tile width and height – 256×256
Map width and height – 4 and 4.
To create the background, we are going to split image with the mountains and skyscrapers in half. To do this, we first transfer just the mountain over onto the new tile map. We do this by clicking on the image in the tile set and then clicking which square we’d like it to be in, in the tile map.
We then need to drag the mountains into the perspective camera.
As you can see it’s a little too small. To rescale, apply the settings below:
Using the built-in scale tool we can easily flip the mountain around so the background itself looks less repetitive.
We can add more mountains with different sizes, orientations and different depths from the camera to add the illusion of distance.
Go to Project Settings > Search Auto Exposure and deselect the check box. This will prevent the game from getting brighter. This setting is mainly used in 3D games.
Make a new tile map and add the city below the mountains. First, drag in the tile set to the left tab and resize to 256×256. We want this one to be longer so we are going to change the map width to 8. This will make the empty white box look like this:
Now we have enough room to add buildings. Much like the mountain process, we can select the square we want on the left and click and pull it over into the empty white square to create the details of this tile map. Make sure to click again to place the square image where we want it to be.
Our new city. Save progress and drag the city scene into the perspective camera view from the ‘dashboard’. Scale the buildings to look good in our level:
We can duplicate the tile map again and resize it to give the illusion of distance and depth to the city scene.
This illusion of depth is improved by the scrolling of different speeds. This means that the buildings move at different times. This is called; parallax scrolling, and it enhances the backgrounds of 2D game levels.
This is a different view of seeing each asset placed at different depths. Each 2D image is positioned further from the platforms.
In my opinion, the details and lines of the city behind the platform make the level look more clustered as there are a lot of lines overlapping each other.
Conclusion
This workshop was a long one, and at times seemed pretty tedious. I got set behind with the work for this workshop, and not only that – but this workshop made me realise how I despise animating. However, I learned many things related with Unreal Engine and watching the recordings Lee made helped me a lot to catch up on work that I’d missed and go over work that I was unsure of, so I am grateful for that.
Leah Morrell Games Designer 