03. Adding Collision


The Tiled plugin includes the TileShapeCollection  class – a standard object for efficient tile-based collision

This walk-through shows how to create and use the TileShapeCollection  class in a game to perform common collision logic.

Automatic vs. Code-Based TileShapeCollection Creation

TileShapeCollections can be created in one of two ways:

  1. Automatically by adding shapes to tiles in the Tiled program
  2. In code by creating collision based on tile names or properties

We will cover approach #1 (adding shapes to tiles) first since it is the simplest to get working. Additional methods will be discussed at the end of this tutorial.

Adding Shapes to Tiles

To add shapes to tiles:

  1. Open Level1File.tmx in Tiled
  2. Select the tileset (tsx) tab in Tiled

    If you do not see a .tsx tab, click the edit button on the tileset in your level

  3. Once you have the .tsx tab selected, click the Tile Collision Editor button

  4. Select a tile which should have collision, such as a wall tile

  5. Zoom the Tile Collision Editor. This isn’t necessary but can make it easier to create shapes accurately.

  6. Select the rectangle tool

  7. Select the option to snap to pixels – this is important because we want to make sure the collision is accurately placed at the edges of the tiles

  8. Click+drag to set a rectangle around the tile
  9. If necessary, adjustments can be made to the rectangle using the Select Objects tool

Make sure you use this tile in your map so that your newly-added collision will be used on the level.

Don’t forget to save both the tile map and tileset after making these changes.

Viewing the TileShapeCollection

Now that we’ve added shapes to our tiles and used them in our tile map, our game automatically creates a TileShapeCollection. To view it we need to make it visible. To do this, open Level1.cs  in Visual Studio and add the following code to CustomInitialize :

Run the game and you should see the rectangles for each of the wall tiles:

Collision can be turned on during debug, but code for making collisions visible should probably be turned off before releasing your game.

Collisions List

Notice that the code above performs a foreach  loop when making the collisions visible. The reason for this is loaded .tmx files will create a new TileShapeCollection  instance for each layer in a game. So far we have only placed our collidable tiles on one layer, so we will only have one TileShapeCollection  in the Collisions  list.

We can verify this by looking at the watch window and expanding the Collisions object.

Adding tiles with collision to multiple layers will result in multiple TileShapeCollection  instances in the loaded TMX file.

Also, note that each TileShapeCollection will be named the same as its containing Layer, so we can also obtain individual layers in code by searching for them in a loop or with a LINQ statement:

Accessing TileShapeCollections in Glue

TileShapeCollections can be accessed in Glue. Of course, the first step is to add collisions to tiles and paint those tiles on a layer (as shown above). After that, to access a TileShapeCollection in Glue:

  1. Drag+drop the TMX file in a Screen onto the Objects folder
  2. Changed Source Name to the name of the Layer in the TMX file. Notice that it is marked as a TileShapeCollection.

Just like any other Glue object, once a TileShapeCollection is accessed in the Glue Objects folder, it can be accessed in code too.

Aside from eliminating code, adding a TileShapeCollection in Glue allows real-time viewing of the map with collision in Tiled.

Creating TileShapeCollections in Code

As mentioned earlier, TileShapeCollection instances can also be created in code. For more information on creating collision in code from Tiles, see these links: