Skip to content
dill pixel

Application

The Application class is the entry point for your game. It is responsible for initializing the game, loading assets, and managing the game loop.

The Application class is the entry point for your game. It is responsible for initializing the game, loading assets, and managing the game loop. It extends PIXI’s Application class and implements core functionality through plugins and signals.

Creating an Application

The simplest way to create an application is using the create function:

import { create } from 'dill-pixel';


const app = create({
  width: 800,
  height: 600,
});

Configuration

Applications can be configured with various options in your dill-pixel.config.ts file:

src/dill-pixel.config.ts
export const config = defineConfig({
  // Core settings
  id: 'MyGame',
  resizeToContainer: true,
  resolution: 2,


  // Plugin configurations
  plugins: [
    // Add your plugins here
    ['matter-physics', { autoLoad: false }],
    // ... other plugins
  ],


  // Storage adapters
  storageAdapters: ['firebase'],


  // Internationalization
  i18n: {
    loadAll: true,
    locales: ['en', 'fr'],
    files: [
      /* locale configs */
    ],
  },
});

Bootstrapping

To bootstrap a custom application:

src/bootstrap.ts
import { create } from 'dill-pixel';
import { MyApplication } from './MyApplication';
import { config } from '@/dill-pixel.config';


async function bootstrap() {
  await create<MyApplication>(config, MyApplication);
}


void bootstrap();

Then, in index.ts, you can import the application and start it:

import '@/bootstrap';

Core Features

Signals

The Application provides core signals (defined in ICoreSignals) for various built-in signals. These signals are used to communicate between different parts of the application, and can be accessed via this.app.signals or this.app.signal. These signals are usually aliases for plugins that provide the functionality. E.G. this.app.signals.onSceneChangeStart is just an alias for the SceneManagerPlugin’s onSceneChangeStart signal - this.app.scenes.onSceneChangeStart.connect((detail) => { ... }):

// Listen for scene changes
this.app.signals.onSceneChangeStart.connect((detail) => {
  console.log(`Changing from ${detail.exiting} to ${detail.entering}`);
});


// Listen for window resizing
this.app.signals.onResize.connect((size) => {
  console.log(`Window resized to ${size.width}x${size.height}`);
});

Core Functions

Similarly, the Application provides core functions (defined in ICoreFunctions) for common operations. These functions are used to perform various actions, and can be accessed via this.app.exec or this.app.func. These functions are usually just aliases for the plugins that provide the functionality. E.G. app.exec.loadScene('gameScene') is just an alias for the SceneManagerPlugin’s loadScene function - this.app.scenes.loadScene('gameScene').

// Scene management
app.exec.loadScene('gameScene');
// also available as `app.func.loadScene('gameScene')` or via the SceneManagerPlugin `this.app.scenes.loadScene('gameScene')`


// Popup management
app.exec.showPopup('menuPopup');


// Asset loading
app.exec.loadAssets(['sprite1', 'sprite2']);

Using this.app in Containers and Scenes

Both Container and Scene classes provide access to the Application instance via this.app. This gives you easy access to all Application features:

export class MyScene extends Scene {
  initialize() {
    // Access core functions
    this.app.exec.loadAssets(['required-assets']);


    // Listen to signals
    this.app.onResize.connect(this.handleResize);


    // Access plugins
    this.app.audio.play('background-music');


    // Manage data
    this.app.data.save('score', 100);
  }
}

Example Implementation

Here’s a complete example showing how to create a custom Application:

<!doctype html>
<html lang="en">
  <head>
    <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="mobile-web-app-capable" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <title>My Dill Pixel Game</title>
    <style>
      /* Imported CSS gets inlined */
      /* Load our index.css file */
      @import url('./src/index.css');
      /* Importing the loader.css file from dill-pixel. Uses a css overlay while Application is in bootstrap */
      /* requires the game container element to be present in the html */
      @import url('dill-pixel/extras/css/loader.css');
    </style>
  </head>
  <body>
    <script async defer src="src/index.ts" type="module"></script>
  </body>
</html>