domingo, 19 de julho de 2015

2D Levels with Tile Maps

Tile Maps are used to create 2D levels based on Tile Sets. In this article we will use the 4.8 version of Unreal Editor to create a level based on the tiles that are in the image below which was created by Silveira Neto:

Click to enlarge

Import the image above and rename the texture to "Tiles". Right click on the texture and choose "Sprite Actions -> Apply Paper2D Texture Settings". After that, choose "Sprite Actions -> Create Tile Set".


Double-click the "Tile Set" to open the Tile Set editor:

Click to enlarge

In this editor you can change the size of the "Tiles", the default is 32x32. It is also possible to set the tiles that have collision. Simply select the tile and click the "Add Box" button that is at the top of the editor.

After defining the tiles that have collision, save and close the Tile Set editor.

Right click the "Tile Set" and choose "Create Tile Map":


Double-click the "Tile Map" to open the Tile Map editor:

Click to enlarge

Before we start to edit the level, we will do some adjustments. On the right side of the editor, in the "Setup" category, put 20 in "Map Width" and 15 in "Map Height". As the size of each tile is 32x32 then the size of this Tile Map will be 640x480 pixels.


We will add layers to this Tile Map. This allows the tiles to be overlaid. Our example will have three layers:


The image below shows how the layers can be used. On the left side is being used only the layer 1, at the center there are tiles in the layer 1 and 2, on the right the three layers are being used.

Click to enlarge

To edit the level, just select a tile on the left and then click on the desired position in the Tile Map. The editor provides a few options:


Using the buttons above you can flip and rotate a tile, delete a tile or fill an area with the selected tile.

You can select multiple tiles by simply clicking the left mouse button and dragging. The yellow rectangle shows the selection being made:


My 2D level looked like this:

Click to enlarge

Once you finish editing the Tile Map, save and close the Tile Map editor.

Drag the Tile Map and release anywhere in the Viewport of the editor. The editor automatically creates a "PaperTileMapActor":

Click to enlarge


With this article we conclude the second part of this blog: "Blueprints Tips".