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:
- Automatically by adding shapes to tiles in the Tiled program
- 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:
- Open Level1Tmx.tmx in Tiled
- 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
- Once you have the .tsx tab selected, click the Tile Collision Editor button
- Select a tile which should have collision, such as a wall tile
- Zoom the Tile Collision Editor. This isn’t necessary but can make it easier to create shapes accurately.
- Select the rectangle tool
- 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
- Click+drag to set a rectangle around the tile
- 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 GameScreen.cs in Visual Studio and add the following code to CustomInitialize :
Camera.Main.X = Camera.Main.OrthogonalWidth / 2.0f;
Camera.Main.Y = -1 * Camera.Main.OrthogonalHeight / 2.0f;
// Add the code to make all shape collections in the level visible:
foreach(var tileShapeCollection in Level1Tmx.Collisions)
tileShapeCollection.Visible = true;
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.
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:
var layer1Collision = Level1Tmx.Collisions.First(item => item.Name == "Tile Layer 1");
// Now do something with layer1Collision
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:
- Drag+drop the TMX file in a Screen onto the Objects folder
- 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: