Introduction

Many tile-based games include multiple levels. This walk-through shows how to set up a multi-level game.

Review of Screens

So far our game has two screens:

1. GameScreen - the base screen for our levels. It contains all common files, objects, and code

2. Level1 - our first level. It contains files, objects, and code specific to level 1.

Adding additional levels is very easy in the FRB editor. We'll add a second level on this tutorial.

Adding Level2 Screen

To add a new level we will create a new screen. These steps are the same as what we did before when we added Level 1:

1. Select the Quick Actions tab

2. Click the Add Screen/Level option

3. Enter the name Level2

4. Uncheck the option to Copy Entities From Other Level. Note, if you want to use Level1 as a copy, you can keep this checked.

5. Check the Add Standard TMX File checkbox to add a TMX for the new level. Note, if you want to use Level1 as a copy, you can select to Copy TMX from Other Level

6. Click OK

7. On the New File window, enter the name Level2Map and leave the defaults checked

8. Click OK

Now our game has two levels: Level1 and Level2. We can choose which level we want to play by using the drop-down next to the Play button in Glue.

If we play Level2, we will have an empty level since we haven't added any tiles yet. We can edit Level2Map by selecting it in the Tiled dropdown.

Level2Map already has the TiledIcons referenced, and it already has a GameplayLayer, so we can begin placing tiles immediately.

As always, don't forget to save your work or the map won't appear in game. The tiles should appear in your game, along with the collision for the tiles.

Levels and Inheritance

FlatRedBall follows an inheritance pattern for levels. the GameScreen serves as the base screen for all levels. This means that the GameScreen contains everything that is common to all levels. This not only includes objects (such as lists of entities) but also relationships and settings on objects. For example, the GameScreen defines a Map object which creates entities from the maps (which is covered in later tutorials).

Switching Levels

We can switch between levels by switching between the screens for each level. In an actual game switching between levels may happen if a user collides with an object (such as a door) or if all enemies have been killed. For the sake of simplicity we'll switch between levels whenever the space bar is pressed. Note that the logic for switching between levels can be customized per-level, but we'll be using nearly identical code for both. We can switch from Level2 to Level1 by modifying Level2's CustomActivity :

Similarly, we can modify Level1's CustomActivity to go back to Level2 whenever the space bar is pressed again:

Now we can run the game and press the space bar to switch between levels.

Introduction

This walk-through shows how to perform collision between entities and TileShapeCollection instances. The two most common types tile-based collisions are:

1. Solid collision - collision which prevents a character from passing through a tile, such as solid walls in a maze

2. True/false tests - used to perform additional logic when collisions occur, such as dealing damage to a character when touching spikes

We'll be looking at both types.

Creating an Entity

For this guide, we'll create an entity called Player to test our collision code. This entity needs to be collidable (implements ICollidable) and needs logic for movement in response to input.

Normally top-down and platformer games in FRB use a Player entity as the character. This is a convention which should be followed in your games to make it easier to follow documentation and to integrate with future FRB improvements.

To create a new entity:

1. In FRB, select the Quick Actions tab

2. Select Add Entity
3. Enter the name Player

4. Check the Circle checkbox to give the entity a circle collision object

5. Verify that ICollidable is checked - this should happen automatically when Circle is checked

6. Check the Top-Down option under Input Movement Type to automatically give the Player movement logic

7. Click OK

Notice the Include lists in all base level screens check box. We will leave this checked so that we have a list of players in our game screen. This is a good idea, even if your game will be single player. The new entity should appear in the Entities folder in the FRB editor.

Since the Player entity has its ImplementsICollidable set to true, any shape (Circle, Polygon, AxisAlignedRectangle) in the entity will be used in collision functions.

Adding Player to GameScreen

Our entity is ready to go - we just need to add it to GameScreen. Note that we're adding the Player to the GameScreen rather than Level1 because we want every level to have a player. To add the entity to GameScreen, drag+drop the entity onto the screen:

The Player now appears on in game screen in the PlayerList and can move with the arrow keys.

We can change the starting position of the player by changing the Player1 X and Y values in the FRB editor.

1. Select the Player1 in the GameScreen

2. Click the Variables tab

3. Change X to 200

4. Change Y to -200

Now the player appears near the center of the level.

Performing Solid Collision

Solid collision can be used to prevent an entity from passing through solid objects on a tile map. In this example we'll be colliding the Player instance against tiles that we set up to have rectangle collision in the previous tutorial. Collision in FlatRedBall is usually performed using CollisionRelationships. A CollisionRelationship is an object which defines what happens when two types of objects overlap (collide). In this case, we'll be creating a CollisionRelationship between our PlayerList and SolidCollision. To create a CollisionRelationship:

1. Expand GameScreen Objects

2. Drag+drop the PlayerList onto the SolidCollision object. This creates a new CollisionRelationship named PlayerListVsSolidCollision and automatically selects it.

3. Change the Collision Physics to Move Collision

As shown in the FRB editor, Move Collision prevents the objects from overlapping. If we run the game now, you will notice that the Player can no longer move through the walls.

Colliding Platformer Entities

This guide focuses on collision between an entity that has basic top-down movement logic. Tile maps are also often used in platformers, and the platformer plugin includes support for colliding against TileShapeCollections. For more information, see the Controlling a Platformer Entity page.

Conclusion

This guide shows how to work with TileShapeCollection to perform solid collision (collision which prevents an entity from passing through the collision area) and non-solid collision (collision which is used to drive custom logic). A typical game may include many TileShapeCollection instances for different types of collision. Although we didn't cover it in this guide, the TileShapeCollection class uses axis-based partitioning for efficient collision. In most cases, even mobile platforms will be able to perform collision against TileShapeCollection instances with tens of thousands of rectangles with very little impact on performance. Developers interested in the details of this partitioning are encouraged to look at the TileShapeCollection source code.

Introduction

Collisions are used in almost every game. Collisions are often used for the following functionality:

• Solid collision to keep players, enemies, and bullets from moving between rooms or out of bounds

• Damage collision to deal damage to players, slow movement, or heal players

This tutorial will show how to work with the solid collision, and how to add new types of collision to your game.

Solid Collision

By default our game already has SolidCollision defined in the GameScreen. If you used the New Project Wizard, then GameScreen already has a SolidCollision object. If you followed the manual steps in the previous tutorial, then you will have added SolidCollision manually.

Until now the SolidCollisions have been invisible, and we haven't created anything to collide against. Therefore, there hasn't been any functionality yet either. We can verify that the SolidCollision shape collection is actually being created by making it visible. To do this:

1. Expand the GameScreen in FlatRedBall

2. Select the SolidCollision object. Note that it is blue, indicating that it is visible to children screens such as Level1

3. Click the Variables tab

4. Check the Visible property

If you run the game now, you will see that all solid collision tiles are outlined in white. This is the SolidCollision object.

You may want to keep collision visibility set to true to help diagnose problems in your game, but you should turn it to false when your game is ready to distribute.

Creating Additional TileShapeCollections

As mentioned above, the SolidCollision shape collection is a common object, so the FRB editor provides quick defaults for this type. Your game may need additional TileShapeCollections for additional types of collision. For example, your game may need special collision for spikes that the player can walk over, but which deal damage to the player.

For the rest of this tutorial we will cover how to create a new TileShapeCollection. At a high level, the steps are:

1. Decide on a tile to use for collision

2. Set the Type on the tile

3. Create a new TileShapeCollection in GameScreen

4. Configure the TileShapeCollection to be created from the tile type specified earlier

Setting the Tile Type

The first step is to decide which tile you would like to use for your collision. As we mentioned before, all gameplay tiles (such as collision) should be on the TiledIcons. To mark a tile as collidable:

1. Open Tiled

2. Click the TiledIcons tileset
3. Click the Edit icon to edit the TiledIcons tileset
4. Select a Tile that you would like to use for collision

5. Enter a Class for that tile.
6. Don't forget to save your tileset file

Now that the type has been set and the tileset has been saved, you can place the tile in your level. Make sure to place it on the GameplayLayer in case your game has multiple layers.

Be sure to save your map after adding tiles.

Creating a New TileShapeCollection

Now that we have a new tile type in our game, we can add another TileShapeCollection. To do this:

1. In FlatRedBall, select the GameScreen

2. Click the Quick Actions tab

3. Select the Add Object to GameScreen button
4. Type or look for TileShapeCollection in the window and select this option

5. Enter the name for your tileset. Usually this should match the type of your tile.

6. Click OK

Configuring the TileShapeCollection

TileShapeCollections usually come from specific tiles in tile maps. We'll set up the TileShapeCollection created in the previous section here. To do this:

1. Select the newly-created TileShapeCollection

2. Click the TileShapeCollection Properties tab

3. Select the From Type option

4. Select Map as the source TMX

5. Select the matching type in the Type dropdown

Notice that Remove Tiles is checked by default. Uncheck this option if you would like to see the tiles in game. We should also turn on collision visibility to make sure it is created as we expect.

If you run your game, you will see the collision in game. The tiles will be removed if the Remove Tiles checkbox was left checked.

Creating TileShapeCollections in Code

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

• Creating TileShapeCollections using tile properties

• Creating TileShapeCollections using tile name or property values

Introduction

So far we've looked at how to create tile maps and have them display in game. We've also used these tile maps to create collision. This guide shows how to instantiate entities by placing tiles in a tile map (no code required).

Live Edit vs. Tiled Entities

Entity instances can be created through Tiled or in the Live Edit system. Each has its own benefit so which you choose depends on the type of entity instances you are creating.

If you are placing entities which are uniform (all instances are the same, except for their position), then Tiled entities can be convenient and easier to work with.

If you are palcing entities which must be customized per-instance, or if the appearance of the entity is important when it is being positioned, then placing entities in Live Edit can be easier than working in Tiled.

For information about working in the Live Edit system, see the .

Creating an Entity

Any type of entity can be created through tile maps, which provides lots of flexibility. For this example, we'll create a simple entity which displays a yellow rectangle called Monster:

1. Select the Quick Actions tab in the FRB editor and click Add Entity
2. Name the entity Monster

3. Check the AxisAlignedRectangle check box

4. Leave the other options default and click OK

We need to modify the rectangle so it stands out relative to the collision rectangles:

1. Select the newly-created rectangle (named AxisAlignedRectangleInstance)

2. Change Width to 12

3. Change Height to 12

4. Change Color to Yellow

Defining Monster Tiles

1. Open whichever level is currently being loaded in your game in Tiled (such as Level2Map.tmx)

2. Select the TiledIcons. We should always use TiledIcons to create entities rather than visual tilesets like dungeonTileSet

3. Click the Edit Tileset button
4. Select a tile on your map to represent the monsters. For example, select the red monster icon.
5. Enter the entity name Monster as the Type or Class for this tile. Depending on what version of Tiled that you are using, you may see Class instead of Type, but they both mean the same thing. Also, note that the name needs to match the entity name exactly, including capitalization.

Placing Monster Tiles

Any tiles placed with the Type or Class of Monster will create Monster instances at runtime. Tiles for creating entities are placed just like any other tiles. We can place a few monster tiles in either level.

As always, don't forget to save your changes on the tile map and tile set. If we run our game, we will see the monster enemies (yellow rectangles).

Troubleshooting

If enemies aren't showing up, check the following:

• Make sure that Level2Tmx.tmx and dungeonTileSet.tsx files have both been saved

• Verify that you entered the correct name (including capitalization) in the Type or Class property.

Before we start creating levels with Tiled, we will need to install a few requirements.

1. FlatRedBall

First, we need to install FlatRedBall, which can be found on the . You may already have this installed if you have have been working with FlatRedBall.

2. Tiled

Next, we need to install the Tiled program. Tiled is a free, open source, cross platform editor for creating tile-based levels. We will use Tiled to create levels which can include tiled layers, collision, and entities. Tiled can be downloaded on the .

Conclusion

That's it! FlatRedBall automatically includes everything you need to use Tiled, so you can get started right away.

The following walk-throughs show how to use Tiled to create levels in a FlatRedBall project. It covers creating multiple levels, creating collision from tiles, and creating entities from tiles.

Introduction

In the previous tutorial we covered how to create entities from tiles. This approach can simplify entity creation, and works great for entities which are uniform (each instance is identical aside from position). Some entities require custom properties per-instance. For example, consider a game where players can walk through doors to enter other maps. In this case, each door entity needs to have a custom property for which level it links to. This walk-through shows how to create object layers in Tiled and how to create entities using these objects.

Creating a New Entity

For this tutorial we will be creating a Door entity which can be used to move the player from one level to the next. This entity will need to have collision so that the player can collide with it and we can respond to the collision. To create a Door entity:

1. Select the Quick Actions tab in the FRB editor

2. Click Add Entity

3. Enter the name Door

4. Check the Circle check box

5. Leave the defaults and click OK

Now you will have a Door entity. We should change the color of the door so it doesn't look like the player (which is currently a white circle). To do this, change the CircleInstance's Color value to Green.

We need to create a variable for which level to load when the Player collides with the Door:

1. Right-click on the Variables folder under the Door entity

2. Select Add Variable
3. Select the Create a new variable option

4. Select string as the Type

5. Enter the Name LevelToGoTo
6. Click OK

The name of the variable that we created (LevelToGoTo) needs to match the name of the property that we will be adding to the tile later in this guide. Note that if using a entity types XML, the property will automatically be added.

Creating an object layer

Tiled object layers allow placing geometric shapes (such as rectangles, circles, and custom polygons) as well as free-floating images (not snapped to the grid). These images (also referred to as "tiles" in the Tiled program) can be used purely for non-interactive visuals or can be used to place entities. Objects can be created and added to tile maps, where each instance has all of its properties set individually, or objects can be given default properties in the tileset. First we'll set up the common properties on our Door tile:

1. Open TiledIcons.tsx in Tiled (click the edit button if the tsx file is not already open)

2. Select the door tile

3. Enter Door as the Type. Note that this may already be the default.
4. Click the + button to add a new property
5. Enter the name LevelToGoTo

6. Verify the type is string

We won't assign the value of LevelToGo yet, we'll do that per-instance. Now that we've defined the Door tile properties, we'll add a Door to the Level2Map.tmx file. Don't forget to save your tileset in Tiled. First we'll make an object layer:

1. Open Level2Map.tmx in Tiled

2. Click the Add Layer button

3. Select Object Layer
4. Name the new layer GameplayObjectLayer

Next we'll add an instance of the door to the EntityObjectLayer:

1. Verify that EntityObjectLayer is selected

2. Select the tile to be placed in the tile set

3. Click on the tile map to place the tile. Be careful - if you place the door in the same place as where the player starts, the player will immediately collide with the door, and will move to the next level once we add the collision code.

Notice that the placed door may not align with the tiles. If you wish to make it align, you use the Select Objects command to select the tile and either move it visually or change its X an Y properties:

Alternatively, holding the CTRL key will snap objects to the grid while you place them. Now we can add the LevelToGoTo property to our placed tile:

1. Click the Select Objects button (if not already selected)
2. Select the placed Door object (if not already selected)

3. Enter the value Level1 for the LevelToGoTo property. More generally, the door's LevelToGoTo property should be the name of the screen that we want to go to when the Player entity touches the Door.

Don't forget to save the tile map.

Verifying the Door Entity

If we run our game now, we should see the Door tile that we placed in Tile replaced by a green circle, which is the collision of the Door entity:

Troubleshooting Entities Not Created

If you are not seeing the Door entity in the game, there may be a problem with the Tiled map, the inheritance in your game, or settings on the entity. Fortunately, the process that FlatRedBall uses to create entities on object layers is the same as the process for creating entities on tile layers. Therefore, to troubleshoot the problem you should go back to the previous tutorial and see if you can create entities from tiles. The previous tutorial also includes troubleshooting steps.

Colliding Against the Door Entity

We can use the Door entity to navigate between levels. We'll check collision between the Player and all doors in the DoorList object (our game only has one door, but it could be expanded to have more). If a collision occurs, we'll go to the level set by the Door's LevelToGoTo variable. First we'll create a collision relationship between the PlayerList and DoorList in our GameScreen:

1. Expand the GameScreen Objects folder in Glue

2. Drag the PlayerList onto the DoorList to create a CollisionRelationship

This time we won't change the Collision Physics because the purpose of the door isn't to block the movement of the player. Instead, we'll create an event which will contain code to move to a different level. To do this:

1. Scroll down to the bottom of the Collision tab of the newly-created CollisionRelationship

2. Click the Add Event button
3. If asked, leave the defaults on the New Event window and click OK

Collision events are added to the Events file for the current screen. In this case, the events are added to GameScreen.Events.cs. To add handle the code:

1. Open the project in Visual Studio

2. Open GameScreen.Event.cs. Notice that the newly created collision event will be located under the GameScreen.cs file
3. Enter the code to move to a screen based on the Door's LevelToGoTo

void OnPlayerVsDoorCollided (Entities.Player player, Entities.Door door)
{
  MoveToScreen(door.LevelToGoTo);
}

Now when the player collides with the door in Level2, the game will move to Level1.

Conclusion

Now that we've covered object layers, you can create entities which are either all identical on tile layers or which have custom properties. Here's some things to try next:

• Add a door in Level1 which goes back to Level2. Remember, you don't have to set up the CollisionRelationship again. It's already set up in GameScreen which covers all levels.

• Try adding collision between the player and monsters. On collision, you can handle the event by restarting the screen (indicating the player has died)

Introduction

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

• Rectangle

• Ellipse (similar to Oval)

• Polygon

• Polyline

• Tile (Image)

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

Map.ShapeCollections vs. Collidable Entities

As shown in the Creating Entities from Object Layers page, it is possible to create collidable entities using Tiled. These collidable entities ultimately hold references to shapes which can be accessed in code. Some situations (such as triggers in a level) will be easier to create with "raw shapes" rather than entities. These free floating shapes can be of any shape or size, and creating them in Tiled lets us visualize the shapes in context of the entire level.

Creating Shapes on an Object Layer

Shapes can be added to any object layer (such as the existing GameplayObjectLayer in Level2Map), but we'll keep things organized by creating a dedicated ShapesLayer.

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

1. 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 separate 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 :

private void ShapeTutorialLogic()
{
    foreach(var shapeCollection in Map.ShapeCollections)
    {
        shapeCollection.Visible = true;
    }
}

We could also selectively make the shape collections visible:

private void ShapeTutorialLogic()
{
    var shapeCollection =
    Map.ShapeCollections
        // This name matches the layer name 
        .FirstOrDefault(item => item.Name == "ShapesLayer");

    if(shapeCollection != null)
    {
        shapeCollection.Visible = true;
    }
}

We need to modify CustomInitialize to call ShapeTutorialLogic :

void CustomInitialize()
{
    ...
    ShapeTutorialLogic();
}

Accessing Individual Shapes

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

• A perfect circle (not ellipse) are added to the ShapeCollection's Circles list

• An un-rotated rectangle are added to the ShapeCollection's Rectangles list

• All other shapes (ovals, rotated rectangles, and polygons) are 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:

private void ShapeTutorialLogic()
{
    var shapeCollection = Map.ShapeCollections
        // This name matches the layer name 
        .FirstOrDefault(item => item.Name == "ShapesLayer");

    var rectangle = shapeCollection?.AxisAlignedRectangles
        ?.FirstOrDefault(item => item.Name == "Rectangle1");

    if(rectangle != null)
    {
        rectangle.Visible = true;
    }
}

Introduction

This walkthrough will show how to directly access tile and object-layer tile properties. So far we have covered how to create collision from properties and how to use properties on objects to assign variables on FRB entities. All of these approaches rely on built-in methods to create collision and entities. This tutorial will perform a deeper dive on how to access tile properties for ultimate flexibility. Note that material covered in this tutorial gives the developer the most flexibility, it is not necessary to create a functional game. If you are interested in the bare minimum to get a game running, feel free to skip this tutorial.

Accessing Tiles by Name

Each layer in the the tile map can contain its own list of tiles. For performance reasons each tile is not an individual object. In other words, we can't simply loop through a list of tile objects to check for certain properties. Instead, we have to ask each layer for a list of indexes for a given name. Once we've obtained these indexes, we can get the tile positions and perform custom logic. For example, we can create purple circles wherever we have a tile with the name "Goal" . First we'll need to modify our tileset to set one of our tiles to have the "Goal" name:

1. Open Tiled

2. Open the StandardTileset.tsx file

3. Select a tile which will represent the goal tile

4. Click the + button to add a new custom property
5. Enter the name Name

6. Verify the type is string

7. Click OK
8. Set the value for the Name property to Goal

Note that FlatRedBall treats the Name property as the unique identifier for the tile. Therefore, the same name cannot be used for two different tiles - doing so will crash your program. We can modify the GameScreen.cs as shown in the following code:

If you add goals to your game you will see circles added wherever the goals are located:

Warning: The purpose of the code above and much of the code in this guide is to show how to interact with tile properties at a low level. A realistic example would require additional code which would significantly increase the length of this tutorial. Keep in mind that the code above suffers from some serious problems. The created circles are not stored in a list so they cannot be used for any purpose aside from displaying on screen. Furthermore, since the circles are not stored in any list, they cannot be cleaned up. Exiting the screen or switching levels at this point would result in an exception.

Reading Custom Properties from Tiles

The Name property is built-in to the Tiled Plugin, but we can also read custom properties. For example, we can modify the Goal tile to include a property for coloring the circle:

This property can be read through the level's Properties . We'll modify the code to define the color value and default it to Green . It will be set to Yellow if the CircleColor property is Yellow :

We obtain the circle color outside of any loops because the properties set on tiles in a tile set apply to the entire map, so the value will be the same regardless of layer or individual tile. For instance-specific properties we need to use objects on an Object Layer, as we'll show later in this guide. Now our game displays yellow circles:

Removing Tiles

Tiles can be removed dynamically removed using the RemoveQuads method. For example, we can remove all of the goal tiles used to create circles:

Accessing Tiles by Type

Tiles on "Object Layers" can contain instance-specific properties, as were used to create the Door instance in an earlier guide. We can also access these properties similar to how we access properties on tiles. We'll write code to look for any tiles that have their "Type" property set to "Door", then manually create a door for every tile we find. To do this, add the following function to GameScreen.cs:

Like before, we need to call this method in CustomInitialize :

Of course you may not need to actually run code like this since it's automatically handled by generated code, but this can provide some insight into how to create your own entities in code.

Note that the TileNamesWithType is a shortcut method which gives you all Tile names that happen to have a Type set on them. We can write our own code for accessing the names using custom logic. For example, the following code also checks for all tiles which have a Type property, and which have Type set to "SolidCollision":

Introduction

This walk-through creates two screens. The first is a screen called GameScreen which defines what our game has in every level. The second is a screen called Level1 which has files and objects for our first level. GameScreen will be a base class for Level1, and any additional levels will also use GameScreen as a base screen. At the end of this walk-through we will have a tile map rendering in a our game.

Wizard vs Manual Setup

The New Project Wizard automatically creates a GameScreen and two Levels if you pick either the Platformer or Top Down project types. This is recommended as the starting point for most projects, and most documentation assumes this setup. Therefore, if you have used the project, you can skip this and move to the next tutorial. If you are interested in how to set this up from scratch, then you can continue reading.

Adding GameScreen

First we'll create a screen called GameScreen. Many FlatRedBall projects contain a GameScreen which typically contains the main gameplay - as opposed to menus to set up the game. The GameScreen also contains any common objects such as lists of entities and game logic. Note that if you have used the Platformer or Top-Down wizard options, you will already have a GameScreen. To add a GameScreen:

1. In the FRB Editor, select the Quick Actions tab

2. Click the Add Screen/Level button
3. Notice that FRB suggests creating a GameScreen. We recommend always having one screen called GameScreen, so this default helps you set your project up quickly.

4. Click the option to Add Map LayeredTileMap. This sets up a base object for your map which will be used in all levels.

5. Click the option to Add SolidCollision ShapeCollection. Most games need solid collision so this will set up your game for that.

6. Leave all other defaults and click OK

Once you click OK you will have a GameScreen which includes Map and SolidCollision objects.

For now we'll leave our GameScreen empty, but we'll return later to add objects.

Alternative - Manually Creating Solid Collision

Above we automatically created the SolidCollision object through a check box. If you didn't check this option, or if you are interested in how to set this up manually, this section will walk you through the process. To manually create the SolidCollision object:

1. Select the GameScreen in Glue

2. Go to the Quick Actions tab

3. Click Add Object to GameScreen
4. Search for TileShapeCollection in the New Object window

5. Enter the name SolidCollision

6. Click OK

Now the SolidCollision should appear in the GameScreen. Next we need to modify the TileShapeCollection to properly use the SolidCollision tile.

1. Select SolidCollision under GameScreen

2. Select the TileShapeCollection Properties tab

3. Select the From Tile Class option under Creation Options

4. Select the Map under Source TMX File/Object

5. Enter or select SolidCollision under Tile Class:

Finally we need to set the property as Set By Derived so that level screens can modify this:

1. Select SolidCollision

2. Select the Properties tab

3. Set the SetByDerived property to True

Adding Level1 Screen

Next we'll create our first level. Levels are regular screens which inherit from a base class that contains common gameplay objects, files, and code. To add Level1:

1. Go to the Quick Actions tab

2. Click Add Screen/Level
3. Verify that the following options are set:

   1. Name Level1 (no spaces)

   2. Add Standard TMX File option is selected. This will add a TMX file to this level for you, saving you extra steps.

4. Click OK

Once you click the OK button, FRB asks you about details for the new map.

1. Verify the name is Level1Map. The standard naming is to append the word Map to the name of the Screen containing the new TMX file

2. Leave the other options default (checked). These options will make it easier to create functional tile maps.

3. Click OK

You should now have a Level1Map file in your Level1 screen.

FRB should automatically update your Map object in Level1 so that it uses your newly-added TMX file. You can verify this by selecting the Map object and looking at its properties tab.

If your values do not match the values shown in the image above, you can manually change them.

Alternative - Creating TMX in Tiled

To create a tile map file in Tiled:

1. Open the Tiled program

2. Select File->New->New Map...

3. Set the Tile layer format to Base64 (zlib compressed). Compressing the tile map will make the .tmx file smaller. We will need to change the type of compression used in a later step, since the new file window only lets us pick "zlib".

4. Set the Tile size to a Width of 16px and a Height of 16px. Tile sizes are usually multiples of 2 (2, 4, 8, 16, 32). This guide uses a tile set with 16x16 tiles.

5. Click Save As...
6. Navigate to the Level1's Content folder. You can find this by right-clicking on the GameScreen's Files item in Glue and selecting View in explorer
7. Save the file as Level1File.tmx

Changing to GZip (Only if Created in Tiled)

Now that we've created a map, we will change the "Tile Layer Format" to "Base64 (gzip compressed)". We need to make this change after we create the map because Tiled does not let us pick gzip compression when first creating the map, and gzip compression works on all FlatRedBall platforms (zlib does not).

1. Find the map properties on the left-side of the screen

2. If the properties window is not open, select the Map -> Map Properties... menu item

Now that the format has been changed, save the file again. Finally the file can be added to the Level1 screen by drag+dropping the file from windows explorer to the Files item under Level1.

The game now references the .tmx file, and when executed the game loads the empty .tmx file.

Editing the TMX File

If you have Tiled installed, then the installer should have associated the .TMX file format with the Tiled program. You can edit the file a few ways:

• Double-click the TMX file under Level1 Files

• Use the drop-down in the toolbar to select the map to edit

If you followed the previous steps, your map should include:

1. A single layer called GameplayLayer

2. A single Tileset called TiledIcons

This tileset was automatically added in an earlier step so that you can hit the ground running on creating your game. It contains common tiles for many games, but this tutorial will focus on the solid collision tile, which is the top-left tile in the tileset.

We can click this tile and place it on the GameplayLayer to create walls, floors, or any other type of solid collision.

Don't forget to save your work in Tiled - otherwise it won't show up in game.

Playing Your Game

Once you have saved your tileset, you can play the game by pushing the play button in the FRB editor.

Alternatively you can open your project in Visual Studio and build/run it there. Use whichever method you are most comfortable with. Either way, you should see your game run with the Level1 map displayed.

Notice the file may be offset depending on which tiles are painted. This is because the center of the screen is (0,0), which is the top-left of the tile. To adjust the camera so that the top left of the game window matches the top left of the tile map:

1. Open Visual Studio
2. Open GameScreen.cs. We could do this in Level1.cs if we wanted it to be logic specific to Level 1, but we want to have this code run for all levels.
3. Modify the CustomInitialize method as follows:

Now the game will be focused on the map.

Optional - Adding a Tileset

Tilesets define the appearance of a collection of tiles along with properties which can be specified per-tile to provide functionality in your game (such as collision). We recommend that games have a dedicated tileset for gameplay functionality such as collision. We used the TiledIcons tileset for this earlier. This section will show you how to add a second tileset for visuals. We will use the following image which you can download:

Files which are used by TMX levels should either be saved in the content folder of one of the level screens or in the content folder in the GameScreen. For this tutorial we'll save the file in the GameScreen folder, since the file will be used by multiple levels. First we'll open the content folder for GameScreen:

1. Expand GameScreen in the FRB editor

2. Right-click on the Files folder under GameScreen

3. Select View in explorer

The content folder for GameScreen will be open (and empty).

Save the tileset (shown above) to the GameScreen content folder (which we just opened).

To use the dungeonTileSet.png file in the tile map:

1. Open Level1Map.tmx (double-click it in the FRB editor or open it in Windows Explorer)

2. Drag+drop the dungeonTileSet.png file into the Tilesets tab (the bottom right pane in Tiled)

1. Verify that Tile width and Tile height are both 16px

2. Click Save As...
3. Save the file in the same location as the PNG (the GameScreen content folder)

The tileset (called dungeonTileSet) will now be shown in the Tilesets section in Tiled.

Tileset Considerations

The Tiled program is very flexible when when constructing tilesets. For performance reasons, FlatRedBall does not support all tileset features. When constructing your own tilesets, keep the following in mind:

• Each tileset must use exactly one image file. Tiled supports multiple image files per tileset, but FlatRedBall does not.

• Each layer in your map can only use one tileset. Tiled supports painting multiple tilesets on one layer, but FlatRedBall does not.

• The fewer tilesets, the faster your game will load and render. If possible, try to fit your entire game on one tileset. FlatRedBall supports textures as large as 4096x4096, although some phones and older computers can only load textures as large as 2048x2048.

• For organization reasons, it's useful to save the tileset file (.tsx) and image file (.png) in the same folder. This tutorial saves the file in the GameScreen folder, a number of other common options exist. No matter which option you choose, make sure the folder is ultimately inside your game's Content folder:

  • GameScreen folder (as mentioned above)

  • Top-level Content folder

  • GlobalContentFiles folder

  • Dedicated Tiled folder inside the Content folder

TMX, PNG, and TSX Files

TMX files are the file format that contains the tile map. Along with the TMX file, games that use Tiled will usually reference image files (PNG) and reference external tileset files (TSX). The FRB editor is able to track these references automatically, so only the TMX file needs to be added to your screen (as was done earlier). Any PNG and TSX files referenced by the TMX file will automatically be added to your Visual Studio project by the FRB editor. In other words, once you add a TMX to your screen you don't have to do any other file management anywhere in the FRB editor or Visual Studio.

Placing Tiles

Once a tileset has been created, tiles can be placed by clicking on a tile in the tile set, then painting on the map. As mentioned above, you cannot mix multiple tilesets into a single layer. Therefore, to place the new visual tiles, you will need a new layer.

1. Add a new tile layer to your map

2. Name the layer Visuals

3. Select the newly-created layer

4. Select the dungeonTileSet

5. Paint tiles on the new layer

Keep in mind that changes made to the .tmx file in Tiled must be saved before they will show up in game. Also, the FRB editor automatically manages files referenced by .tmx files, so we do not need to manually add the dungeonTileSet.png file to the GameScreen.

TextureFilter and Tile Maps

Troubleshooting

If your tile map does not appear, the following section may help solve the problem.

Map Ordering

Loaded tile maps are drawn in the FlatRedBall engine, sorted by their Z value. A single-layer map will be drawn at Z = 0, so any object with a larger Z value will draw in front of the map. If a map has multiple layers, each layer will be 1 unit in front of the layer before it. For example, a map with four layers will have the layers at Z values 0, 1 ,2 and 3. Note that if layers are added under the GameplayLayer, and if Shift Map To Move Gameplay Layer To Z0 is checked, then the map will be shifted on the Z axis so that the GameplayLayer is at Z=0, and all other layers are above or below, each offset by one unit.