TileShapeCollection

Introduction

TileShapeCollection is a class created specifically for tile based collision. Its features include:

  • Very fast collision – it has partitioning built-in.
  • Eliminates snagging – Internally the TileShapeCollection modifies contained AxisAlignedRectangles’ RepositionDirections to eliminate snagging.
  • Full support in Glue for initial definition and collision relationships.
  • Simplified syntax – Adding collisions to TileShapeCollection is very easy to do in code, whether doing so manually in code or from a loaded TMX file.

Creating TileShapeCollections in Glue

The easiest way to work with TileShapeCollections is to let Glue define the TileShapeCollection for you.

To add a TileShapeCollection:

  1. Expand your GameScreen or Screen which should contain the TileShapeCollection
  2. Right-click on Objects and select Add Object
  3. Verify FlatRedBall or Custom Type is selected
  4. Selec the TileShapeCollection option

  5. Click OK

Creating Placeholder Collisions

When creating a game, you may want to add some placeholder collisions to test your logic and collision relationships. To create placeholder collisions:

  1. Select your TileShapeCollection in Glue
  2. Click the TileShapeCollection Properties

  3. Select the Fill Completely option
  4. Set the Tiles Wide and Tiles High to define the size of collision block you want

  5. Click the Variables tab
  6. Check the Visible checkbox

Now the TileShapeCollection will appear in your game and can be used for testing.

Defining Collision from a TMX File

Testing your collision using Fill or Border Outline is a handy way to make sure your game is working as you expect it, but eventually you will want to have collision defined in a map. For this tutorial we’ll work with a simple game with a single TMX file already added to the GameScreen which also contains a TileShapeCollection.

First we’ll specify which tiles should have collision:

  1. Open Tiled
  2. Click the wrench icon to edit the tileset

  3. Select one (or more) tiles which should have collision

  4. Add a Custom Property called SolidCollision. The type of the variable doesn’t matter.

  5. Save your tileset (tsx)
  6. Place some tiles in your map

  7. Save your TMX

 

Now in Glue we can associate the SolidCollision with the TileShapeCollection:

  1. Select the TileShapeCollection in your GameScreen
  2. Click the TileShapeCollection Properties tab
  3. Select the From Property option
  4. Use the dropdown to select your TMX file
  5. Enter the property SolidCollision

Now if you run your game you will see collision wherever you placed your tiles.

 

TMX (LayeredTileMap) Example

Collision can be added to a TileShapeCollection from a loaded TMX file (which loads into a LayeredTileMap).

The following code shows how to add collision from all tiles with the custom property HasCollision.

// These examples assume that a TileShapeCollection named
// solidCollision is defined somewhere (usually class scope for the screen)
TileShapeCollection solidCollision;

// Note that the TileShapeCollection is first created, then 
// collision is added. The following code might be in the Screen's CustomInitialize

solidCollision = new TileShapeCollection();
solidCollision.AddCollisionFromTilesWithProperty(TiledLevel, "HasCollision");

Code-Only Example

The following example shows how to create an AxisAlignedRectangle that moves around with the keyboard and collides against a TileShapeCollection.

This project assumes a Glue project with:

  1. A Screen called GameScreen
  2. An AxisAlignedRectangle object named Rectangle in GameScreen

To add the TileShapeCollection:

  1. Open the project in Visual Studio
  2. Open GameScreen.cs
  3. Add the following using statement:
    using FlatRedBall.TileCollisions;
  4. Add the following at class scope:
    TileShapeCollection mCollision;
  5. Add the following to CustomInitialize:
    mCollision = new TileShapeCollection();
    mCollision.GridSize = 32;
    mCollision.Visible = true;
    
    for (int i = 0; i < 10; i++)
    {
        mCollision.AddCollisionAtWorld(i * 32 + 16, 16);
    }
    

To add movement and collision to your rectangle, add the following code to CustomActivity:

InputManager.Keyboard.ControlPositionedObject(Rectangle, 200);
mCollision.CollideAgainstSolid(Rectangle);

Finally you’ll need to remove the TileShapeCollection. To do this, add the following to CustomDestroy:

mCollision.RemoveFromManagers();

 Additional Information

  1. PlatformerCharacterBase and TileShapeCollection – discusses how to use the PlatfromerCharacterBase with TileShapeCollection.