Tiled Maps


Introduction

Booty5 features tile and collision map editing via the MapActor type. To turn any ordinary sprite in the game maker into a tiled map actor, change the RenderAs property to “Tile Map”. This will enable a new section in the sprites property panel called “Tile Map properties”. In this section you can set a number of properties that affect the generated tiled map. These properties include:

  • Tile Size – Width and height of tiles in the tile map in pixels
  • Map Size – Width and height of the tile map in cells
  • Display Size – Width and height of the map area to display on screen when running in the game engine, this can be used to drastically reduce the total number of tiles rendered. If the map is very small or you wish to rotate, scale or translate the map then set the display size to the same size as map size
  • Collision Tiles – Contains a brush that will be used to provide collision tiles, collision tiles should be the same size as visual tiles
  • Export collision – If set to true then collision map tiles will be exported with the visual map
  • Edit Map button – Allows you to edit the tile map

Clicking the Edit Map button will open up the tile map editor that shows the map and its associated tile set. The tile set is taken from the bitmap from the attached brushed. The tile editor looks as follows:

Booty5 HTML5 tile map editor

Booty5 HTML5 tile map editor

The tile map editors canvas contains the following basic visual aids:

  • Canvas – The main central area that displays and allows editing of the map / collision map
  • Grid – The grid’s purpose is to give spatial and scale feedback
  • Selection area – When an area of the map is selected a green overlay will be displayed over the area
  • Tile set – The area over to the right hand side that displays available tiles / collision tiles
  • Map coordinates – The map coordinate at the current mouse position will be displayed to the top left

Navigation in the tile map editor is similar to navigation on the main canvas:

  • Middle mouse – Holding down the middle mouse button and dragging in a direction will move the camera in that direction
  • Mouse wheel – Zoom in and out, hold down left control to slow down zoom

The main purpose of the tile map editor is to allow the editing of visual and collision tile maps. Operations in this editor include:

  • To select a tile click on the tile in the tileset on the right hand side of the window
  • To paint, click a grid cell or drag the mouse around the map holding down the left mouse button to paint tiles. You can use the right mouse button to remove tiles (set cells to tile 0 that is)
  • To select a map cell or an area of cells hold down the left shift key then drag the mouse over the area you wish selected
  • Pressing the DELETE key will delete the currently selected area of tiles (sets them all to tile 0)
  • Pressing the SPACE BAR key will fill the currently selected area of tiles with the currently selected tile
  • You can copy and cut the currently selected area of tiles using CTRL + C and CTRL + X
  • You can paste the last copied area to a new area by selecting the top left hand corner of where you would like the tiles to go then press CTRL + V
  • Pressing CTRL + Z will undo the last action
  • Exiting the tile map editor will save all changes, to undo changes made after exiting press CTRL + Z on the main canvas
  • To switch between visual and collision tile editing modes click the Visual / Collision toggle button or press the TAB key

Next Topic:

2,208 total views, 8 views today