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

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