Guides
Boilerplate

When creating a new game, boilerplate code is provided to help you get started. This code is a starting point for your game and includes the basic structure and setup for a game. It includes the game's basic configuration, controls, display, multiplayer, and main game logic.

In total there are 5 boilerplate scripts, mostly we will be working with in the main file. The other files are boilerplate for the game's configuration, controls, display, and multiplayer.

Let's review what each of these does:

config: This is the settings file for the game. Currently it includes options for enabling multiplayer, configuration for things like the intro screen, tutorial instructions and start action UI, and settings for how the character moves and how the camera works.

Controls: This file is responsible for initializing the game controls according to the settings defined in the config file.

If you use custom controls for the game you can ignore this file.

Display: Manages the game's visual elements and user interface. It handles displaying the tutorial (from the instructions in the config), player lists for multiplayer, and different screens throughout the game's lifecycle, like at the start, end, or during pauses.

Multiplayer: This file is all about the multiplayer part of the game. It helps players connect to each other and ensures that their actions are in sync during the game.

It is possible to remove these files and start completly from scratch

main: this file is the central hub of your game's code. It's where you, as a developer, will primarily write and manage the main logic and flow of your game. This file includes methods for different stages of the game's lifecycle, such as initializing the game, handling game start, updates during gameplay, and what to do when the game pauses, resumes, or ends.

Deep dive on the main file

We will be mostly working in the main file

let's explain each line of that file

  1. import statements:

    import { Emitter, Events, World } from "@oo/scripting"
    import { config } from "./config"
    import { Multiplayer } from "./Multiplayer"

    These lines import necessary modules and files. Emitter, Events, and World are imported from the oo scripting library which provides tools to control and interact with the game scene, throughout the course we will be importing more classes from that package and use them. config is the game's configuration settings, and Multiplayer is the class managing multiplayer aspects.

  2. class Game:

    export default class Game {

    This line defines and exports the Game class that will be used internally on our side to run your game. The name of the class can be changed to anything you like. The class must be exported as default.

  3. constructor:

    constructor() {}

    The constructor method for the Game class. It's currently empty but can be used for initial setup when a Game object is created.

  4. onPreload method:

    onPreload() {
        console.log("Game: preload");
        if (config.multiplayer.enabled) {
            Multiplayer.connect();
        }
    }

    onPreload is called before the game starts loading. If you have any assets or operations that need to load before the game starts they can be done here. In this case, it logs connects to the multiplayer server if multiplayer is enabled in the config.

  5. onReady method:

    onReady = () => {
        console.log("Game: ready")
    }

    onReady is called when the game is ready and all assets have loaded successfully.

  6. onStart method:

    onStart = () => {
        console.log("Game: start")
    }

    onStart is called when the game starts using World.start(). It currently just logs a message to the console.

  7. onUpdate method:

    onUpdate = (dt: number) => {
        console.log("Game: update", dt)
    }

    onUpdate is the game's primary update loop. It's activated when the game starts with World.start(). It is called every frame and passes the time since the last frame as a parameter. it stops running when the game is paused or ends.

  8. onPause, onResume, onEnd, onDispose methods:

    onPause = () => {
        /* ... */
    }
    onResume = () => {
        /* ... */
    }
    onEnd = () => {
        /* ... */
    }
    onDispose = () => {
        /* ... */
    }

    These methods are called during respective game lifecycle events: pausing, resuming, ending, and cleaning up resources.