02. Creating a GameScreen


This walk-through creates a screen called GameScreen which will contain our tiled files (.tmx) and their referenced image files (.png). At the end of this walk-through we will have a tile map rendering in a our game.

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.

To add a GameScreen:

  1. In Glue, right-click on Screens
  2. Select “Add Screen”
  3. Enter the name “GameScreen” and click OK

Adding a Tile Map to GameScreen

The newly-created GameScreen will contain our game’s tile map files. Tile maps are created in the Tiled program.

To create a tile map:

  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 16×16 tiles.
  5. Click Save As…

  6. Navigate to the GameScreen’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 Level1.tmx

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

  3. Change the Tile Layer Format to Base64 (gzip compressed)

Now that the format has been changed, save the file again.

Finally the file can be added to the GameScreen by drag+dropping the file from windows explorer to the Files item under GameScreen.


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

Adding a Tileset

Tilesets define all available tiles for a tile map. Tile sets are created by referencing an image file, such as a .png. This walk-through uses the following tileset:


All referenced files must be in a subfolder of the game’s content project. We’ll save it in the same foler as the .tmx to keep files organized.

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

  1. In Tiled, click the “New Tileset” button

  2. Click the Browse button

  3. Select the dungeonTileSet.png file and click Open
  4. Verify that “Tile width” and “Tile height” are both “16px”
  5. Click Save As…
  6. Make sure to save the file in the same location as your other files (tmx and png). Name the file dungeonTileSet.tsx (this should be the default)

The map (tmx) and tileset (tsx) are saved as two separate files, and they are both open as separate tabs in Tiled.

The tileset tab (tsx) provides editing support. Selecting the Level1.tmx tab displays the level which references the tileset in the Tilesets tab.

Tileset Considerations

The Tiled program is very flexible when when constructing tilesets. For performance reasons, FlatRedBall does not support the 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 4096×4096.

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). Glue is able to track these references automatically, so only the TMX file needs to be added to your screen. Any PNG and TSX files referenced by the TMX file will automatically be added to your Visual Studio project by Glue.

In other words, once you add a TMX to your screen you don’t have to do any other file management in Glue 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.

Spend some time creating a small level for your game.

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

Our game now shows the map:

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 GameScreen.cs  in Visual Studio
  2. Modify the CustomInitialize  method as follows:

TextureFilter and Tile Maps

Texture filtering is a method of making objects look less-pixellated when zoomed in. Most 3D games apply a form of “non-point” linear filtering, which removes the square pixel looks of zoomed-in textures. Unfortunately, since tile maps pack each tile adjacent to one-another, this can cause lines to appear between each tile when running the game in FlatRedBall.

For example, consider the horizontal lines which appear on the tree and purple ground in the following image:

To avoid this, point filtering should be used. To apply point filtering, add the following code, preferably in Game1.cs Initialize, after initializing FlatRedBall:

For more information, see the TextureFilter page.


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.