In the Application class, we implement the start method, which will start the game after the resources are loaded:

// ...
class Application {
// ... 
    start() {
        this.scene = new this.config["startScene"]();
        this.app.stage.addChild(this.scene.container);
    }

We could instantiate the scene class directly in the start method. But we want the shared code in the system folder to be unrelated to or dependent on the game code in the game folder. To do this, we have separated the common system code and the project code. At the same time, the system code can know about the parameters it needs through the game config, which we pass to the App class when launching applications. So in this case, instead of directly creating the game scene object directly in the Application class, we’d better create it through a parameter in the config. Add the startScene parameter to the game config in Config.js:

import { Game } from "./Game";
 
export const Config = {
    // ...
    startScene: Game,
};

And create the Game class itself in game folder /src/scripts/game/Game:

import * as PIXI from "pixi.js";
import { App } from "../system/App";
  
export class Game {
    constructor() {
        this.container = new PIXI.Container();
    }
}

The scene class is based on the PIXI.Container. And we will add all objects added to the scene to this container. And we added the scene container itself to the main app.stage container in the start method of the Application class.