Now let’s create our first platform, which the hero will land on at the very beginning of the game. To do this, we will display the platform tiles on the screen, connecting them together so that a sufficiently long surface is created. Let’s start by calling the method in the GameScene class to create a platform:

    create() {
        //...
        this.createPlatform({
            rows: 4,
            cols: 6,
            x: 200
        });
    }
    createPlatform(data) {
        const platform = new Platform(data.rows, data.cols, data.x);
        this.container.addChild(platform.container);
    }

We will describe the functionality of the platform in the Platform class. We pass 3 required parameters to the constructor of this class, which will determine the platform being created:

• number of rows
• number of columns
• x-coordinate on the screen from which we want to start drawing the platform

Now let’s create the Platform class:

import * as PIXI from "pixi.js";
import { App } from '../system/App';

export class Platform {
    constructor(rows, cols, x) {
        this.rows = rows;
        this.cols = cols;
    }
}

We will need to know the full dimensions of the platform being created: width and height. We know that the platform will consist of tiles of the same size. Thus, knowing the dimensions of one tile and knowing the number of such tiles in a row and in a column, it is easy to calculate the total width and height of the platform:

export class Platform {
    constructor(rows, cols, x) {
        // ...
        this.tileSize = PIXI.Texture.from("tile").width;
        this.width = this.tileSize * this.cols;
        this.height = this.tileSize * this.rows;
    }
}

All created tiles will need to be placed in one common container of the platform, which in turn is already placed in the outer container of the scene. Let’s create a container for tiles:

export class Platform {
    constructor(rows, cols, x) {
        // ...
        this.createContainer(x);
    }
    createContainer(x) {
        this.container = new PIXI.Container();
        this.container.x = x;
        this.container.y = window.innerHeight - this.height;
    }
}

When creating a container, we specify its x coordinate obtained from a parameter in the constructor. Thus, we shift the left side of the platform to this coordinate. As the y coordinate, we specify a value at which the platform will touch the bottom of the screen with its bottom side. This way we will create the effect that the platform sticks out of the ground. We know that the coordinates of the container correspond to the coordinate of the first tile in the container. And this is the top leftmost tile. Thus, if we shift the entire platform up by a distance equal to its height, we will achieve the desired effect.

Now let’s create the tiles themselves:

export class Platform {
    constructor(rows, cols, x) {
        // ...
        this.createTiles();
    }
    createTiles() {
        for (let row = 0; row < this.rows; row++) {
            for (let col = 0; col < this.cols; col++) {
                this.createTile(row, col);
            }
        }
    }

    createTile(row, col) {
        const texture = row === 0 ? "platform" : "tile" 
        const tile = App.sprite(texture);
        this.container.addChild(tile);
        tile.x = col * tile.width;
        tile.y = row * tile.height;
    }
}

We create tiles in a loop, going through all the rows and columns of the platform. On the first line of the platform, use platform (grass sprite) as the sprite. In other cases, we use the standard tile sprite (an image with the ground). For each tile, we calculate its position based on its position in the platform. To get the correct coordinates, you need to multiply the column of the tile by its width, and the row by its height.