02. Creating a GameScreen

Introduction

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”
  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 OK

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).

Next we’ll save the file to the GameScreen’s folder. To locate the GameScreen’s folder:

  1. Expand GameScreen in Glue
  2. Right-click on the Files folder
  3. Select “View in Explorer”

This will open the file path to the GameScreen content folder. For example, the file path may look similar to:

C:\Users\vchel\Documents\FlatRedBallProjects\TiledTutorialProject\TiledTutorialProject\TiledTutorialProjectContent\Screens\GameScreen

Next we’ll save the tmx file to this folder:

  1. In Tiled select “File”->”Save”
  2. For the path, navigate or paste the path of the folder obtained earlier for the GameScreen
  3. Name the file “Level1”
  4. Click “Save”

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

DragDropTmx

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:

dungeonTileSet

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 OK

Tileset Considerations

The Tiled program supports a lot of flexibility when constructing tilesets. For performance reasons, FlatRedBall does not support the entire set of 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 may reference external tileset files (TSX). Glue is able to track these references, so only the TMX file needs to be added to your screen. Any PNG and TSX files (if exporting tilesets) referenced by the TMX file will automatically be added to your Visual Studio project by Glue.

In other words, once you reference a TMX, you don’t have to do any other file management in Glue or Visual Studio.

Placing Tiles

Once a tile set has been created, tiles can be placed by clicking on a tile in the tile set, then painting on the map:

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.

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.