Skip to main content

Engine

Initializing the Creation Engine​

To initialize the engine, you need to create an instance of the CreationEngine class and call its init method. This method sets up the PixiJS application, initializes the screen manager, and loads the necessary assets.

import { CreationEngine } from './engine/engine';

const engine = new CreationEngine();

(async () => {
    await engine.init({
        background: '#1E1E1E',
        resizeOptions: { minWidth: 768, minHeight: 1024, letterbox: false },
    });
})();

Handling Resizing​

The engine automatically handles resizing of the application. The resize behavior can be customized by passing options to the init method.

await engine.init({
    resizeOptions: { minWidth: 768, minHeight: 1024, letterbox: false },
});
  • minWidth: The minimum width of the application. If the window width is less than this value, the application will scale down to fit the window, but will report a logical width of this value.
  • minHeight: The minimum height of the application. If the window height is less than this value, the application will scale down to fit the window, but will report a logical height of this value.
  • letterbox: If true, the canvas will be letterboxed to maintain the aspect ratio of the application. If false, the canvas will be stretched to fill the window.

Navigation & Screens​

The engine provides a screen manager that allows you to manage different screens in your application. Each screen is a PixiJS Container that implements the Screen interface.

import { Container } from 'pixi.js';
import { Screen } from './engine/navigation';

export class MyScreen extends Container implements Screen {
    /** Show the screen */
    show?(): Promise<void>;
    /** Hide the screen */
    hide?(): Promise<void>;
    /** Pause the screen */
    pause?(): Promise<void>;
    /** Resume the screen */
    resume?(): Promise<void>;
    /** Prepare screen, before showing */
    prepare?(): void;
    /** Reset screen, after hidden */
    reset?(): void;
    /** Update the screen, passing delta time/step */
    update?(time: Ticker): void;
    /** Resize the screen */
    resize?(width: number, height: number): void;
    /** Blur the screen */
    blur?(): void;
    /** Focus the screen */
    focus?(): void;
}

To show different screens in your app, you can use the showScreen method of the Navigation class. This method hides the current screen and presents a new screen.

import { MainScreen } from './app/screens/main/MainScreen';
import { LoadScreen } from './app/screens/LoadScreen';

await engine.navigation.showScreen(LoadScreen);
await engine.navigation.showScreen(MainScreen);

You can also show popup screens on top of the current screen. Popup screens are displayed in a separate layer above the main screen.

import { PauseScreen } from './app/screens/PauseScreen';

await engine.navigation.presentPopup(PauseScreen);

equally you can hide the popup screen using the dismissPopup method.

await engine.navigation.dismissPopup();

Asset Loading​

Using AssetPack you can define bundles of assets for your application. These bundles can be loaded individually to avoid loading all assets at once. Typically you would define a bundle for each screen in your application, and load them as needed.

To help with this a screen can implements a static assetBundles: string[] property that defines the bundles required for that screen. The engine will automatically load these bundles when the screen is shown.

export class MainScreen extends Container {
  /** Assets bundles required by this screen */
  public static assetBundles = ["main"];

}

Audio​

The engine includes built-in support for managing background music (bgm) and sound effects (sfx). You can control audio playback using the audio property on the CreationEngine.

// Play background music
engine.audio.bgm.play('background-music.mp3', { volume: 0.5 });

// Play sound effect
engine.audio.sfx.play('explosion.mp3', { volume: 0.8 });

Background Music (bgm)​

Handles music background, playing only one audio file in loop at time, and fade/stop the music if a new one is requested. Also provide volume control for music background only, leaving other sounds volumes unchanged.

Sound Effects (sfx)​

Handles short sound special effects, mainly for having its own volume settings. The volume control is only a workaround to make it work only with this type of sound, with a limitation of not controlling volume of currently playing instances - only the new ones will have their volume changed. But because most of sound effects are short sounds, this is generally fine.

Global Volume​

While you can control the volume of each audio type, you can also control the global volume of all audio the exposed global volume functions

engine.audio.setMasterVolume(0.5);
const volume = engine.audio.getMasterVolume();

Utility Functions​

The engine provides several utility functions for common tasks, such as calculating distances, interpolating values, and generating random numbers.

This is not an exhaustive list, but here are some examples:

import { getDistance, lerp, clamp } from './engine/utils/maths';
import { randomInt, randomFloat } from './engine/utils/random';

const distance = getDistance(0, 0, 10, 10);
const interpolatedValue = lerp(0, 10, 0.5);
const clampedValue = clamp(15, 0, 10);

const randValue = randomInt(0, 10);
const randFloat = randomFloat(0, 10);