- Select manual -

Tile map

A Tile Map is a component that allows you to assemble, or paint, tiles from a Tile Source onto a large grid area. Tile maps are commonly used to build game level environments. You can also use the Collision Shapes from the tile source in your maps for collision detection and physics simulation.

Before you can make a tile map you need to create a tile source.

Creating a tile source

You need an image containing all the tiles. Each tile must have the exact same dimensions and be placed in a grid. Defold supports spacing between the tiles and a margin around each tile.

tile image

Once you have the source image created, you can create a Tile Source:

  • Import the image to your project by dragging it into a project location in the Assets browser.
  • Create a new tile source file (right click a location in the Assets browser, then select New… ▸ Tile Source).
  • Name the new file.
  • The file now opens in the tile source editor.
  • Click the browse-button next to the Image property and select your image. Now you should see the image displayed in the editor.
  • Adjust the Properties to match the source image. When everything is correct the tiles will line up perfectly.

Creating a Tile Source

Size
The size of the source image.
Tile Width
The width of each tile.
Tile Height
The height of each tile.
Tile Margin
The number of pixels surrounding each tile (orange in the image above).
Tile Spacing
The number of pixels between each tile (blue in the image above).
Inner Padding
Specifies how many empty pixels should be automatically added around the tile in the resulting texture used when the game is run.
Extrude Border
Specifies how many times the edge pixels should be automatically replicated around the tile in the resulting texture used when the game is run.
Collision
Specifies the image to use to automatically generate collision shapes for tiles.

Tile source flip-book animations

To define an animation in a tile source the animation frame tiles must lie next to each other in a sequence left to right. The sequence can wrap from one row to the next. All newly created tile sources have a default animation named “anim”. You can add new animations by right clicking the tile source root in the Outline and selecting Add ▸ Animation.

Selecting an animation displays the animation Properties.

Tile Source animation

Id

The identity of the animation. Must be unique for the tile source.

Start Tile

The first tile of the animation. Numbering starts at 1 in the top left corner and goes to the right, line by line down to the bottom right corner.

End Tile

The last tile of the animation.

Playback

Specifies how the animation should play:

  • None does not play back at all, the first image is displayed.
  • Once Forward plays the animation one time from the first to the last image.
  • Once Backward plays the animation one time from the last to the first image.
  • Once Ping Pong plays the animation one time from the first to the last image and then back to the first image.
  • Loop Forward plays the animation repeatedly from the first to the last image.
  • Loop Backward plays the animation repeatedly from the last to the first image.
  • Loop Ping Pong plays the animation repeatedly from the first to the last image and then back to the first image.
Fps

The playback speed of the animation, expressed in frames per second (FPS).

Flip horizontal

Flips the animation horizontally.

Flip vertical

Flips the animation vertically.

Tile source collision shapes

Defold uses an image specified in the Collision property to generate a convex shape for each tile. The shape will outline the part of the tile that has color information, i.e. is not 100% transparent.

Often it is sensible to use the same image for collision as the one containing the actual graphics, but you are free to specify a separate image if you want collision shapes that differ from the visuals. When you specify a collision image, the preview is updated with an outline on each tile indicating the generated collision shapes.

The tile source outline lists collision groups that you have added to the tile source. New tile source files will get one “default” collision group added. You can add new groups by right clicking the tile source root in the Outline and selecting Add ▸ Collision Group.

To select the tile shapes that should belong to a certain group, select the group in th Outline, then click each tile that you wish to assign to the group. The outline of the tile and shape is colored with the group’s color. The color is automatically assigned to the group in the editor.

Collision Shapes

To remove a tile from its collision group, select the tile source root element in the Outline, then click the tile.

Tile maps

A Tile Map is a component that allows you to assemble, or paint, tiles from a tile source onto a grid area. Tile maps are commonly used to build game level environments. You can also use the Collision Shapes from the tile source in your maps for collision detection and physics simulation.

To create a new tile map:

  • right click a location in the Assets browser, then select New… ▸ Tile Map).

  • Name the file.

  • The new tile map automatically opens in the tile map editor.

    new tilemap

  • Set the Tile Source property to a tile source file that you have prepared.

To paint tiles on your tile map:

  1. Select or create a Layer to paint on in the Outline view.

  2. Select a tile to use as brush (press Space to show the tile palette)

    Palette

  3. Paint with the selected brush. To erase a tile, either pick an empty tile and use it as brush, or select the eraser (Edit ▸ Select Eraser).

    Painting tiles

You can pick tiles directly from a layer and use the selection as a brush. Hold Shift and click a tile to pick it up as the current brush. While holding Shift you can also click and drag to select a block of tiles to use as a larger brush.

Picking tiles

Adding a tile map to your game

To add a tile map to your game:

  1. Create a game object to hold the tile map component. The game object can be in a file or created directly in a collection.
  2. Right-click the root of the game object and select Add Component File.
  3. Select the tile map file.

Use tile map

Changing tiles from script

You can read and write the content of a tile map dynamically while your game is running. To do so, use the tilemap.get_tile() and tilemap.set_tile() functions:

local tile = tilemap.get_tile("/level#map", "ground", x, y)

if tile == 2 then
    -- Replace grass-tile (2) with dangerous hole tile (number 4).
    tilemap.set_tile("/level#map", "ground", x, y, 4)
end
flag en English

Welcome!

You are just one step away from creating awesome games!

You need a Google account to use Defold