09. Working with Tiled Shapes


Tiled object layers support “tile objects” (images) and geometric shapes. The following geometric shapes can be created in Tiled:

  • Rectangle
  • Ellipse (similar to Oval)
  • Polygon
  • Polyline
  • Tile (Image)

The first four types (geometric shapes) are added to the LayeredTileMap.ShapeCollections list when loaded. These can be accessed and used at run time for custom collision, such as the creation of triggers.

ShapeCollections vs. Collisions

The previous tutorial discussed the Collisions object (a list of TileShapeCollections) which are automatically created and populated when adding shapes to tiles. Usually shapes on tiles are used for environment collision (walls or platforms) or collisions tied specifically to tiles (such as lava tiles dealing damage).

Free-floating shapes can be used to create collidable objects or areas which are not tied directly to tiles, such as large triggers for events. For example a large trigger may be used to initiate a cinematic sequence playing when a player enters a room.

Since these large, free-floating shapes are not bound to tiles, they are not added to the list of TileShapeCollections, but instead are added to ShapeCollections.

Creating Shapes on an Object Layer

Shapes can be added to any object layer (such as the existing EntityObjectLayer). To keep our objects organized, we’ll create a new object layer:

  1. In Tiled, click the Add Layer button
  2. Select “Add Object Layer”
  3. Enter the name “ShapesLayer”

To add a rectangle:

  1. In Tiled, click the Insert Rectangle button
  2. Push and drag the left mouse button to draw a Rectangle

  3. Enter the name “Rectangle1” for the new rectangle. This is needed to find the shape at run time.

As always, don’t forget to save your changes in Tiled.

Working with ShapeCollections

Each object layer with one or more shape is loaded as a ShapeCollection at runtime. This tutorial covers the basics of working with a ShapeCollection, but more information can be found on the ShapeCollection page.

All ShapeCollections are invisible by default, but can be made visible. Add the following method to GameScreen :

We could also selectively make the shape collections visible:

We need to modify CustomInitialize  to call ShapeTutorialLogic :

Accessing Individual Shapes

The TMX loading code will perform the following logic when deciding where to add shapes:

  • A perfect circle (not ellipse) will be added to the ShapeCollection’s Circles list
  • An un-rotated rectangle will be added to the ShapeCollection’s Rectangles list
  • All other shapes (ovals, rotated rectangles, and polygons) will be added to the ShapeCollection’s Polygons list

We can perform shape-specific logic by accessing the individual lists. For example, we can access the Rectangles instance as shown in the following code: