02. Creating a GameScreen

Introduction

This walk-through creates two screens. The first is a screen called GameScreen which will define what our game will have in every level. The second is a screen called Level1 which will have only 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.

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.

To add a GameScreen:

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

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

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. Right-click on GameScreen
  2. Select Create Derived (Level) Screen
  3. Enter the name Level1
  4. Click OK

Adding a Tile Map to Level1

The newly-created Level1 will contain our first tile map file. To create the first tmx file:

  1. Expand Level1 Screen
  2. Right-click on Files
  3. Select Add File -> New File
  4. Select tmx (tmx) as the file type
  5. Enter the name Level1File (note that this name should not be the same as your screen’s name)
  6. Click OK

[+]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 16×16 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 Level1Tmx.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

  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.

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

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 Glue
  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 Level1Tmx (double-click it in Glue or open it in Windows Explorer)
  2. Drag+drop the dungeonTileSet.png file into the Tilesets tab (the bottom right pane in Tiled)
  3. Verify that Tile width and Tile height are both 16px
  4. Click Save As…

  5. 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 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 (as was done earlier). 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.

Running the Game

Once the TMX file has been created and saved we can view it in our game. We need to tell Glue that we want to load Level1:

  1. Right-click on the Level1 Screen
  2. Select Set as StartUp Screen

Notice that Level1 is highlighted in red when not selected, indicating that it is the first screen when the game runs.

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