Side scroller screen functionality guide

Description

This session focuses on how to make changes to the map from the side scroller perspective

Related files: TerrainFactory, ForestGameArea.

The way the background spawn

Visually:

The entire terrain is made up of multiple tiles.

The terrain is created by generating different types of tiles at specified locations.

In the generation of terrain, the resolution of the image affects the size of the map:

• Map size

private static final GridPoint2 MAP_SIZE = new GridPoint2(30, 30);

• Tile size

GridPoint2 tilePixelSize = new GridPoint2(example_tile.getRegionWidth(), example_tile.getRegionHeight());

Logically:

1. In the TerrainFactory, the private TiledMap createSideScrollTiles function, create a new background look

//A new tile with side scroll-er
  private TiledMap createSideScrollTiles(
          GridPoint2 tileSize, TextureRegion surface, TextureRegion underground, TextureRegion sky, TextureRegion tree) {
    TiledMap tiledMap = new TiledMap();
    TerrainTile surfaceTile = new TerrainTile(surface);
    TerrainTile undergroundTile = new TerrainTile(underground);
    TerrainTile skyTile = new TerrainTile(sky);
    TerrainTile treeTile = new TerrainTile(tree);
    TiledMapTileLayer layer = new TiledMapTileLayer(MAP_SIZE.x, MAP_SIZE.y, tileSize.x, tileSize.y);

    // Create base grass
    fillTilesAt(layer, new GridPoint2(0, 9), new GridPoint2(30, 10), surfaceTile);
    fillTilesAt(layer, new GridPoint2(0, 0), new GridPoint2(30, 9), undergroundTile);
    fillTilesAt(layer, new GridPoint2(0, 10), new GridPoint2(30, 30), skyTile);
    tiledMap.getLayers().add(layer);
    return tiledMap;
  }

2. In private TerrainComponent createSideScrollTerrain, Package the tilemap that just created into a component and return it

GridPoint2 tilePixelSize = new GridPoint2(surface.getRegionWidth(), surface.getRegionHeight());
    TiledMap tiledMap = createSideScrollTiles(tilePixelSize, surface, underground, sky, tree);
    TiledMapRenderer renderer = createRenderer(tiledMap, tileWorldSize / tilePixelSize.x);
    return new TerrainComponent(camera, tiledMap, renderer, orientation, tileWorldSize);

3. In public TerrainComponent createTerrain, import the image you need for the terrain you just created

ResourceService resourceService = ServiceLocator.getResourceService();
TextureRegion surface =
                new TextureRegion(resourceService.getAsset("images/surface.png", Texture.class));
        TextureRegion underground =
                new TextureRegion(resourceService.getAsset("images/underground.png", Texture.class));
        TextureRegion sky =
                new TextureRegion(resourceService.getAsset("images/sky.png", Texture.class));
        TextureRegion tree =
                new TextureRegion(resourceService.getAsset("images/tree.png", Texture.class));
return createSideScrollTerrain(0.5f, surface, underground, sky, tree);

4. Visual terrain generation complete

5. Adding air walls to visual terrain by using the private void spawnTerrain() function in ForestGameArea class

private void spawnTerrain() {
    // Background terrain

    terrain = terrainFactory.createTerrain(TerrainType.SIDE_SCROLL_ER);
    spawnEntity(new Entity().addComponent(terrain));

    // Terrain walls
    float tileSize = terrain.getTileSize();
    GridPoint2 tileBounds = terrain.getMapBounds(0);
    Vector2 worldBounds = new Vector2(tileBounds.x * tileSize, tileBounds.y * tileSize);

    // Left air wall
    spawnEntityAt(
        ObstacleFactory.createWall(WALL_WIDTH, worldBounds.y), GridPoint2Utils.ZERO, false, false);
    // Right air wall
    spawnEntityAt(
        ObstacleFactory.createWall(WALL_WIDTH, worldBounds.y),
        new GridPoint2(tileBounds.x, 0),
        false,
        false);
    // Top air wall
    spawnEntityAt(
        ObstacleFactory.createWall(worldBounds.x, WALL_WIDTH),
        new GridPoint2(0, tileBounds.y),
        false,
        false);
    // Bottom air wall
    spawnEntityAt(
            //change a wall with high:10
        ObstacleFactory.createWall(worldBounds.x, WALL_WIDTH), new GridPoint2(0, 10), false, false);
  }

6. the terrain with a working air wall is done

p.s: Don't forget to import the png files for both class