Working with Tilemaps and Animated Tiles
Last updated
Last updated
Good to know: Both the Platformer Engine & Top-Down Engine share a lot of functionality. and a lot of times the same techniques can be applied to both engines.
Like everything else, we start with our imported images. Select your tile set image → Right click → Sprite actions → Apply Paper 2D texture setting and then Create Tile set through the same method.
You will see a window like that below (We are using the provided tile set with the template for this explanation).
Key things to notice are:
The Single Tile Editor, where you add collision to the tiles. Simply click the Add Box/Polygon/Circle options to give your tiles their respective collisions.
2. The Tile set Details where you can define your Tile Size and spacing. Most tile sets are formatted on a grid of the respective tile size to make it easier for game engines to select the tiles so any downloaded tile set will work just fine with the appropriate tile size. But if the tiles seem more spaced out (reasons like you are actually repurposing a sprite sheet as a tile set, its a prop tile set that ended up too spaced out, or the artist didn’t know tile set rules before hand) you can adjust Per Tile Spacing to ensure that you get the tiles covering the right amount of area (which maybe required if you want to put objects really close together without the grid getting in the way.
)
Now that we have our Tile set, let’s create our Tile map. If we were to right-click on our tile set and select create tile map, we may end up making a paper2D tile map. It would seem fine at first, but you will quickly notice that when you spawn your character in the map, it will always remain hidden under the tile map. We need a Pixel Top-down Tile Map.
Right-click the content browser → Go to Pixel2D Top-Down → and select Pixel TopDown Tile Map.
You will see a window like the one below. (We have adjusted the Map Width and Size so yours will look a little different).
You can select which tile set you want to use by pressing the Grid button next to Active Tile Set and select which tile set you want to use.
Painting the tile map is as simple as clicking a on the tile you want and clicking and dragging on the map where you want to paint it. You can also use erase to remove single blocks or one whole animated tile, or use fill to cover the whole map. You can also use layers to define background, midground and foreground or if you just want some grass on your dirt road.
Once you make your changes, click Save and the changes will be reflected in the tile map in-game.
Currently there is a bug in the UE5 that does not show the UI for adding a new layer in some cases(which usually looks like a green arrow pointing up. In case you are using the editor while the bug is there, there are two invisible but clickable button underneath the layers tab. The left-most button adds a new layer. You can also use Ctrl-Shift-N to add a new layer (which can be easier).
Here are some of the important options you will start off with when using your tiles. We will cover the other options with visual explanation a bit later.
Map Width and Map Height change the size of the map according to the number of tiles the map holds. That means that my Tile Map is 20 tiles (multiplied by 32 pixels) wide and 15 tiles (multiplied by 32 pixels) high.
Tile Width and Tile Height define the map grid you will be painting on. This means if I use a tile set which is smaller than 32 pixels, I would see weird spacing between tiles. You can change this option in the middle of painting and the editor will upscale and downscale the already painted layers for you.
Pixels per Unreal unit defines its size in the editor an world space.
Projection mode defines the type of map you are making. Orthogonal is top down, but you also have hexagonal and different types of isometric.
Change the material from masked Unlit to Masked lit sprites if you want to use Unreal's lighting system in your game for a bit of atmosphere. But you will have to change the
Layer Collides needs to be enabled if to have tiles with collision boxes, like the edge of the grassland below.
Layer separation changes the gap between layers. Pixel2D map changes in 3D space, so if for example, you have a foreground that does not seem to be appearing above the player, its best to check the layer separation and compare it to the player’s size. Another advantage is that you can hide 3D objects behind each of these layers to make jumpable platforms. So feel free to experiment with possibilities.
Start by creating a flipbook out of your animated item. In the Tile Map Editor you will automatically see the flipbook right below the Active Tile Set. Make sure paint is selected and drag in or click the flipbook you wanted to paint on.
You can also use this method to paint in large items that would be cumbersome to just select multiple tiles for, by just making a one sprite flipbook.
After adding an animated flipbook, you are more likely to find that pressing save doesn’t change the tile map in game to the one you have created. You will have to add the tile map in again. Depending on your workflow, we suggest to use static tile sets as placeholders to figure out placement before you use animated tiles so you won’t have to face the problem too often.
💡 Undo doesn’t work with animated tile maps. However, you can easily erase whole animated flipbooks using the erase tool.
Collisions for flipbooks are edited in the sprite window, not tile set window. Simply choose Edit Collision and you can see a blue box that represents the collision you can modify.
When you are making a Top-Down game, you may want to give your players the illusion that they are in a 3D space. You probably want your player to be able to go in front of and behind objects like this.
Tile sorting is automatically handled by the Pixel2D plugin. You simply need to make sure of a few things.
Go to your player character blueprint and select the pixel flipbook component. Make sure the Material is set to TransluscentUnlitSpriteMaterial (Or Lit if you are using unreal lights for effect).
For objects with incomplete collision (i.e tall objects that only have collision at the base so you can go behind them), use flipbooks/animated tiles as they are optimized to allow this sort of tile sorting.
Make sure in the tile map window Separation per Layer is set to at least 1. We kept the default of 4 for this example.
Hopefully this covers the essentials to get you started on making your own tilemaps. There are plenty of other options in the plug-in as well for you to play around and create your unique worlds, but hopefully this helps you get started.
