Game Background

Background elements

The background consists of background, base-ground and ground surface. Among three backgrounds in this game, each represents a theme of the different planet that players are familiar with.

Lunar: This background is for game level one. The player character escaped from the earth and landed on the moon, where he finds the moon is not a safe place to stay. The background is dark dull blue with shining stars that makes players more immersed in the space theme. The ground platform consists of the rocky base and lunar surface that suit the astronaut character.

Mars: This background is for game level two. The player landed on Mars but saw more intelligent forms of life here. The background is dark brown with other visible rounded planets. The base ground and surface consist of irregular-shaped red rocks that are surface characteristics of Mars. The design makes the player immersed into Mars and gives them a better understanding of the game theme -- "space escape".

Europa: This background is for game level three. Based on the fact that Europa has ice-ocean and its environment is similar to the deep ocean on earth, life may exist. In this game, The astronaut came to this planet and surprisingly found an alien civilization over the ice-ocean and he needs to escape. The background is ocean blue theme, with other stars visible from Europa. The surface ground represents the frozen ice-ocean whereas the base ground means the cracked ice underneath.

Purpose

The purpose of background design is to make our game more cut into the story theme of interstellar escape. Different planet themes won't make the player feel bored when he/she goes through each level and therefore enhances user retention.

Implementation

Key Components

• background images The images that make up the background of the game e.g. background_rock.png, background_star.png, background_stars.png, background_sky.png, background_surface.png.
• TerrainFactory The new background images have to be initialized in createTerrain() and give them actual position in createSideScrollTiles().

Usage

1. Initializing the background images in createTerrain().

case SIDE_SCROLL_ER:
        TextureRegion surface =
                new TextureRegion(resourceService.getAsset("images/background_surface.png", Texture.class));
        TextureRegion underground =
                new TextureRegion(resourceService.getAsset("images/background_rock.png", Texture.class));
        TextureRegion sky =
                new TextureRegion(resourceService.getAsset("images/background_sky.png", Texture.class));
        TextureRegion star =
                new TextureRegion(resourceService.getAsset("images/background_star.png", Texture.class));
        return createSideScrollTerrain(0.5f, surface, underground, sky, star);

2. Arrange the position of each background image in createSideScrollTiles() when they appear in the game.

New Implementation

With the new implementation, TerrainFactory reads a text file, which holds information about the tile placement. For ground tiles, the text file is formatted like:

1 2 3 4

Where [1] is half the horizontal distance at the given y - coordinate ([4]) and [2] is half the vertical distance at the given x - coordinate (3). For sky tiles, the text file is formatted like:

# 1 2 3 4
* 1 2 3 4

Where the '#' indicates a sky tile and the '*' indicates a star tile. The following four digits follow the same pattern as the ground tile. In order to read from these files a helper method is written to return each line of the file in an arrayList of strings.

  private ArrayList<String> readFile(String filename) {
    ArrayList<String> terrainLayout = new ArrayList<>();
    try(BufferedReader br = new BufferedReader(new FileReader(filename))) {
      String line = br.readLine();
      terrainLayout.add(line);
      while (line != null) {
        terrainLayout.add(line);
        line = br.readLine();
      }
    }...
    return terrainLayout;
  }

The functions used to add the tiles onto the map then iterate through the arrayList returned by readFile() to fill out the map:

  private void addGroundTiles(TiledMapTileLayer layer, TextureRegion underground,
                              TextureRegion surface, String filename) {
    TerrainTile surfaceTile = new TerrainTile(surface);
    TerrainTile undergroundTile = new TerrainTile(underground);
    ArrayList<String> terrainLayout = readFile(filename);

    float width, height;
    int x, y, distanceX, distanceY;
    for (String s : terrainLayout) {
      String[] values = s.split(" ");
      width = Float.parseFloat(values[0]);
      height = Float.parseFloat(values[1]);
      x = Integer.parseInt(values[2]);
      y = Integer.parseInt(values[3]);
      distanceX = (int) (( width * 2) + x);
      distanceY = (int) (( height * 2) + y);
      // Fills underground tiles, leaves one layer on top for surface tiles
      fillTilesAt(layer, new GridPoint2(x, y), new GridPoint2(distanceX, distanceY - 1), undergroundTile);
      // Fills surface tiles
      fillTilesAt(layer, new GridPoint2(x, distanceY - 1), new GridPoint2(distanceX, distanceY), surfaceTile);
    }
  }

Old Implementation

fillTilesAt(layer, new GridPoint2(0, 0), new GridPoint2(100, 9), undergroundTile);
    fillTilesAt(layer, new GridPoint2(0, 9), new GridPoint2(100, 10), surfaceTile);
    fillTilesAt(layer, new GridPoint2(0, 10), new GridPoint2(100, 20), skyTile);
    fillTilesAt(layer, new GridPoint2(0, 20), new GridPoint2(10, 21), skyTile);
    fillTilesAt(layer, new GridPoint2(10, 20), new GridPoint2(11, 21), starTile);
    fillTilesAt(layer, new GridPoint2(11, 20), new GridPoint2(57, 21), skyTile);
    fillTilesAt(layer, new GridPoint2(57, 20), new GridPoint2(58, 21), starTile);
    fillTilesAt(layer, new GridPoint2(58, 20), new GridPoint2(98, 21), skyTile);
    fillTilesAt(layer, new GridPoint2(98, 20), new GridPoint2(99, 21), starTile);
    fillTilesAt(layer, new GridPoint2(99, 20), new GridPoint2(100, 21), skyTile);
    fillTilesAt(layer, new GridPoint2(0, 21), new GridPoint2(100, 22), skyTile);
    fillTilesAt(layer, new GridPoint2(0, 22), new GridPoint2(15, 23), skyTile);
    fillTilesAt(layer, new GridPoint2(15, 22), new GridPoint2(16, 23), starTile);
    fillTilesAt(layer, new GridPoint2(16, 22), new GridPoint2(18, 23), skyTile);
    fillTilesAt(layer, new GridPoint2(18, 22), new GridPoint2(19, 23), starTile);
    fillTilesAt(layer, new GridPoint2(19, 22), new GridPoint2(31, 23), skyTile);
    fillTilesAt(layer, new GridPoint2(31, 22), new GridPoint2(32, 23), starTile);
    fillTilesAt(layer, new GridPoint2(32, 22), new GridPoint2(70, 23), skyTile);
    fillTilesAt(layer, new GridPoint2(70, 22), new GridPoint2(72, 23), starTile);
    fillTilesAt(layer, new GridPoint2(72, 22), new GridPoint2(100, 23), skyTile);
    fillTilesAt(layer, new GridPoint2(0, 23), new GridPoint2(100, 24), skyTile);
    fillTilesAt(layer, new GridPoint2(0, 24), new GridPoint2(5, 25), skyTile);
    fillTilesAt(layer, new GridPoint2(5, 24), new GridPoint2(6, 25), starTile);
    fillTilesAt(layer, new GridPoint2(6, 24), new GridPoint2(87, 25), skyTile);
    fillTilesAt(layer, new GridPoint2(87, 24), new GridPoint2(88, 25), skyTile);
    fillTilesAt(layer, new GridPoint2(88, 24), new GridPoint2(100, 25), skyTile);

Usage

When creating a new level, write separate text files for the ground and sky tiles using the format given above and then within CreateSideScrollTiles() call the two functions that fill the tiles out onto the map:

  private TiledMap createSideScrollTiles(
          GridPoint2 tileSize, TextureRegion surface, TextureRegion underground, TextureRegion sky, TextureRegion star) {
    ...
    addSkyTiles(layer, sky, star, "level-floors/levelOneSky.txt");
    addGroundTiles(layer, underground, surface, "level-floors/levelOneGround.txt");
    ...
  }