Skip to content

Application

Defined in: core/Application.ts:120

Represents the core application interface, extending PixiJS Application. It manages plugins, game state, actions, and provides access to various application subsystems.

The type of the data schema used by the application’s store.

The type of the action context used for dispatching actions.

The type of actions that can be dispatched in the application.

import { Application } from '@dillpixel/framework';
// Define your data schema, action context, and actions
interface MyDataSchema {
score: number;
playerName: string;
}
interface MyActionContext {
userId: string;
}
type MyActions = 'startGame' | 'endGame' | 'updateScore';
// Create a new application instance
const app = new Application<MyDataSchema, MyActionContext, MyActions>();
async function main() {
await app.initialize({
// Application configuration
appName: 'My Awesome Game',
// ... other config options
}, document.getElementById('game-container'));
// Access application properties and methods
console.log(app.appName); // 'My Awesome Game'
app.scenes.load('mainMenu');
app.action('startGame');
}
main();
  • Application

new Application(): Application

Defined in: core/Application.ts:248

Application

PIXIPApplication.constructor

readonly config: Partial<IApplicationOptions>

Defined in: core/Application.ts:131

The application configuration object. Contains settings for various aspects of the application, including plugins, assets, and scenes.

console.log(app.config.appName); // 'My Awesome Game'
if (app.config.showStats) {
// Show performance stats
}

IApplication.config


readonly manifest: undefined | string | AssetsManifest

Defined in: core/Application.ts:134

The asset manifest used by the application. Can be a URL to a manifest file, or an AssetsManifest object.

console.log(app.manifest); // Could be './assets.json' or an object

IApplication.manifest


onPause: Signal<(config) => void>

Defined in: core/Application.ts:135

A signal that emits when the application is paused.

app.onPause.connect(() => {
console.log('Application paused');
// Stop game-specific timers or animations not handled by app.pause()
});

IApplication.onPause


onResize: Signal<(size) => void>

Defined in: core/Application.ts:138


onResume: Signal<(config) => void>

Defined in: core/Application.ts:136

A signal that emits when the application is resumed from a paused state.

app.onResume.connect(() => {
console.log('Application resumed');
// Restart game-specific timers or animations
});

IApplication.onResume


plugins: ImportList<IPlugin<any>>

Defined in: core/Application.ts:132


storageAdapters: ImportList<IStorageAdapter>

Defined in: core/Application.ts:133


static containerElement: HTMLElement

Defined in: core/Application.ts:122


static instance: IApplication

Defined in: core/Application.ts:125

get actionContext(): ActionContext

Defined in: core/Application.ts:470

The current context for dispatching actions. Allows passing additional contextual information when actions are triggered.

app.actionContext = { userId: 'user123', source: 'uiButton' };
app.action('submitScore', { score: 1000 }); // Context will be included

ActionContext

set actionContext(context): void

Defined in: core/Application.ts:474

The current context for dispatching actions. Allows passing additional contextual information when actions are triggered.

app.actionContext = { userId: 'user123', source: 'uiButton' };
app.action('submitScore', { score: 1000 }); // Context will be included

ActionContext

void

The current context for dispatching actions. Allows passing additional contextual information when actions are triggered.

app.actionContext = { userId: 'user123', source: 'uiButton' };
app.action('submitScore', { score: 1000 }); // Context will be included

IApplication.actionContext


get actionsPlugin(): IActionsPlugin<ActionContext>

Defined in: core/Application.ts:299

IActionsPlugin<ActionContext>


get anim(): typeof gsap

Defined in: core/Application.ts:337

The GSAP instance.

typeof gsap

The GSAP instance.

The global GSAP instance. Direct access to the gsap object for creating tweens and timelines.

app.anim.to(mySprite.scale, { x: 1.5, y: 1.5, duration: 0.5, ease: 'power2.inOut' });

IApplication.anim


get animation(): IGSAPPlugin

Defined in: core/Application.ts:329

The GSAP plugin.

IGSAPPlugin

The GSAP plugin.

The GSAPPlugin instance for managing animations. Provides access to GSAP functionality and animation contexts.

const timeline = app.animation.createTimeline();
timeline.to(mySprite, { alpha: 0, duration: 1 });

IApplication.animation


get appName(): string

Defined in: core/Application.ts:267

The name of the application. Defined in the application configuration.

document.title = app.appName;

string

The name of the application. Defined in the application configuration.

document.title = app.appName;

IApplication.appName


get appVersion(): string | number

Defined in: core/Application.ts:255

The version of the application. Typically injected at build time (e.g., via __DILL_PIXEL_APP_VERSION).

console.log(`Running ${app.appName} v${app.appVersion}`);

string | number

The version of the application. Typically injected at build time (e.g., via __DILL_PIXEL_APP_VERSION).

console.log(`Running ${app.appName} v${app.appVersion}`);

IApplication.appVersion


get assets(): IAssetsPlugin

Defined in: core/Application.ts:406

The AssetsPlugin instance for managing game assets. Provides methods for loading and accessing textures, sounds, fonts, etc.

const playerTexture = await app.assets.load('playerSprite');
const backgroundMusic = app.assets.getSound('bgm');

IAssetsPlugin

The AssetsPlugin instance for managing game assets. Provides methods for loading and accessing textures, sounds, fonts, etc.

const playerTexture = await app.assets.load('playerSprite');
const backgroundMusic = app.assets.getSound('bgm');

IApplication.assets


get audio(): IAudioManagerPlugin

Defined in: core/Application.ts:463

The AudioManagerPlugin instance for managing game audio. Handles sound effects and background music.

app.audio.playSound('explosion');
app.audio.setMusicVolume(0.7);

IAudioManagerPlugin

The AudioManagerPlugin instance for managing game audio. Handles sound effects and background music.

app.audio.playSound('explosion');
app.audio.setMusicVolume(0.7);

IApplication.audio


get canFullscreen(): boolean

Defined in: core/Application.ts:507

boolean


get captions(): ICaptionsPlugin

Defined in: core/Application.ts:485

ICaptionsPlugin


get center(): Point

Defined in: core/Application.ts:375

The center point (x, y) of the application’s view/canvas. Automatically updated when the application resizes.

// Center a sprite on the screen
mySprite.position.copyFrom(app.center);

Point

The center point (x, y) of the application’s view/canvas. Automatically updated when the application resizes.

// Center a sprite on the screen
mySprite.position.copyFrom(app.center);

IApplication.center


get controls(): IControls

Defined in: core/Application.ts:317

The Controls instance, typically accessed via the InputPlugin. Provides a higher-level abstraction for game controls and actions.

if (app.controls.isActionActive('jump')) {
// Player jumps
}

IControls

The Controls instance, typically accessed via the InputPlugin. Provides a higher-level abstraction for game controls and actions.

if (app.controls.isActionActive('jump')) {
// Player jumps
}

IApplication.controls


get data(): IDataAdapter

Defined in: core/Application.ts:801

Get a storage adapter by id

IDataAdapter

The primary DataAdapter instance, usually for managing game data.

const playerData = await app.data.get('playerStats');
await app.data.set('playerStats', { health: 100, mana: 50 });

IApplication.data


get env(): Record<string, string>

Defined in: core/Application.ts:170

Environment variables available to the application. Typically sourced from import.meta.env.

const apiKey = app.env.API_KEY;
if (app.env.NODE_ENV === 'development') {
// Enable debug features
}

Record<string, string>

Environment variables available to the application. Typically sourced from import.meta.env.

const apiKey = app.env.API_KEY;
if (app.env.NODE_ENV === 'development') {
// Enable debug features
}

IApplication.env


get exec(): ICoreFunctions

Defined in: core/Application.ts:544

Alias for func. Access to core application functions.

ICoreFunctions

Alias for func. Access to core application functions.

IApplication.exec


get focus(): IFocusManagerPlugin

Defined in: core/Application.ts:438

The FocusManagerPlugin instance for managing UI focus.

IFocusManagerPlugin

The FocusManagerPlugin instance for managing UI focus.

IApplication.focus


get fullScreen(): IFullScreenPlugin

Defined in: core/Application.ts:492

Fullscreen plugin

IFullScreenPlugin


get fullScreenElement(): null | HTMLElement | Window

Defined in: core/Application.ts:499

null | HTMLElement | Window


get func(): ICoreFunctions

Defined in: core/Application.ts:540

Access to core application functions. Provides a registry for globally accessible utility functions.

const utility = app.func.get('myUtility');
if (utility) utility.doSomething();

ICoreFunctions

Access to core application functions. Provides a registry for globally accessible utility functions.

const utility = app.func.get('myUtility');
if (utility) utility.doSomething();

IApplication.func


get i18n(): Ii18nPlugin

Defined in: core/Application.ts:280

The i18nPlugin instance for internationalization and localization.

const localizedGreeting = app.i18n.translate('GREETING_KEY');
app.i18n.setLocale('fr-FR');

Ii18nPlugin

The i18nPlugin instance for internationalization and localization.

const localizedGreeting = app.i18n.translate('GREETING_KEY');
app.i18n.setLocale('fr-FR');

IApplication.i18n


get input(): IInputPlugin

Defined in: core/Application.ts:309

The InputPlugin instance for managing various input sources. This often consolidates controls from keyboard, mouse, gamepad, etc.

IInputPlugin

The InputPlugin instance for managing various input sources. This often consolidates controls from keyboard, mouse, gamepad, etc.

IApplication.input


get isFullScreen(): boolean

Defined in: core/Application.ts:503

boolean


get isMobile(): boolean

Defined in: core/Application.ts:524

End Fullscreen plugin

boolean


get isTouch(): boolean

Defined in: core/Application.ts:528

boolean


get keyboard(): IKeyboardPlugin

Defined in: core/Application.ts:431

The KeyboardPlugin instance for managing keyboard input.

if (app.keyboard.isKeyDown('Space')) {
// Player jumps
}
app.keyboard.onKeyDown.connect((keyEvent) => {
if(keyEvent.key === 'Escape') app.scenes.load('pauseMenu');
});

IKeyboardPlugin

The KeyboardPlugin instance for managing keyboard input.

if (app.keyboard.isKeyDown('Space')) {
// Player jumps
}
app.keyboard.onKeyDown.connect((keyEvent) => {
if(keyEvent.key === 'Escape') app.scenes.load('pauseMenu');
});

IApplication.keyboard


get lookup(): ILookupPlugin

Defined in: core/Application.ts:379

ILookupPlugin


get make(): object

Defined in: core/Application.ts:163

object

animatedSprite: (props?) => AnimatedSprite

Partial<AnimatedSpriteProps>

AnimatedSprite

bitmapText: (props?) => BitmapText

Partial<BitmapTextProps>

BitmapText

button: (props?) => Button

Partial<ButtonProps>

Button

container: (props?) => Container

Partial<ContainerProps>

Container

existing: <TEntity>(entity, props?) => TEntity

TEntity

TEntity

Partial<ExistingProps>

TEntity

flexContainer: (props?) => FlexContainer

Partial<FlexContainerProps>

FlexContainer

graphics: (props?) => Graphics

Partial<GraphicsProps>

Graphics

htmlText: (props?) => HTMLText

Partial<HTMLTextProps>

HTMLText

particleContainer: (props?) => ParticleContainer

Partial<ParticleContainerProps>

ParticleContainer

spine: (props?) => Spine

Partial<SpineProps>

Spine

spineAnimation: <ANames>(props?) => SpineAnimation<ANames>

ANames extends string = string

Partial<SpineProps>

SpineAnimation<ANames>

sprite: (props?) => Sprite

Partial<SpriteProps>

Sprite

text: (props?) => Text

Partial<TextProps>

Text

texture: (props?) => Texture = resolveTexture

Partial<TextureProps>

Texture

tilingSprite: (props?) => TilingSprite

Partial<TilingSpriteProps>

TilingSprite

toaster: (toasterConfig?, defaultToastConfig) => Toaster

Partial<ToasterConfig>

Partial<ToastConfig> = {}

Toaster

uiCanvas: (props?) => UICanvas

Partial<UICanvasFactoryProps>

UICanvas

svg(props): Svg

WithRequiredProps<SvgProps, "ctx">

Svg


get paused(): boolean

Defined in: core/Application.ts:177

Indicates whether the application is currently paused.

if (app.paused) {
// Show pause menu
}

boolean

Indicates whether the application is currently paused.

if (app.paused) {
// Show pause menu
}

IApplication.paused


get popups(): IPopupManagerPlugin

Defined in: core/Application.ts:449

The PopupManagerPlugin instance for managing pop-up dialogs or views.

app.popups.show('settingsPopup', { volume: 0.5 });

IPopupManagerPlugin

The PopupManagerPlugin instance for managing pop-up dialogs or views.

app.popups.show('settingsPopup', { volume: 0.5 });

IApplication.popups


get resizer(): IResizerPlugin

Defined in: core/Application.ts:289

The ResizerPlugin instance for managing application resizing.

IResizerPlugin

The ResizerPlugin instance for managing application resizing.

IApplication.resizer


get scenes(): ISceneManagerPlugin

Defined in: core/Application.ts:413

The SceneManagerPlugin instance for managing game scenes. Handles scene transitions, loading, and lifecycle.

app.scenes.load('level1');
app.scenes.currentScene.pause();

ISceneManagerPlugin

The SceneManagerPlugin instance for managing game scenes. Handles scene transitions, loading, and lifecycle.

app.scenes.load('level1');
app.scenes.currentScene.pause();

IApplication.scenes


get signal(): ICoreSignals

Defined in: core/Application.ts:532

Access to core application signals. These are global signals for important application events.

app.signal.onLoadRequiredComplete.connectOnce(() => {
console.log('Core assets loaded!');
});

ICoreSignals

Access to core application signals. These are global signals for important application events.

app.signal.onLoadRequiredComplete.connectOnce(() => {
console.log('Core assets loaded!');
});

IApplication.signal


get signals(): ICoreSignals

Defined in: core/Application.ts:536

ICoreSignals


get size(): Size

Defined in: core/Application.ts:445

The current size (width and height) of the application’s view/canvas. Managed by the ResizerPlugin.

console.log(app.size.width, app.size.height);
const aspectRatio = app.size.width / app.size.height;

Size

The current size (width and height) of the application’s view/canvas. Managed by the ResizerPlugin.

console.log(app.size.width, app.size.height);
const aspectRatio = app.size.width / app.size.height;

IApplication.size


get store(): IStore

Defined in: core/Application.ts:369

The Store instance for managing application state. Uses a data schema and adapters for persistence.

const currentScore = app.store.getState().score;
app.store.updateState({ score: currentScore + 10 });

IStore

The Store instance for managing application state. Uses a data schema and adapters for persistence.

const currentScore = app.store.getState().score;
app.store.updateState({ score: currentScore + 10 });

IApplication.store


get timers(): ITimerPlugin

Defined in: core/Application.ts:456

ITimerPlugin


get views(): any[]

Defined in: core/Application.ts:551

any[]


get voiceover(): IVoiceOverPlugin

Defined in: core/Application.ts:478

IVoiceOverPlugin


get webEvents(): IWebEventsPlugin

Defined in: core/Application.ts:424

The WebEventsPlugin instance for managing browser-related events. Handles events like window resize, visibility change, etc.

app.webEvents.onResize.connect((newSize) => {
console.log('Resized to:', newSize.width, newSize.height);
});

IWebEventsPlugin

The WebEventsPlugin instance for managing browser-related events. Handles events like window resize, visibility change, etc.

app.webEvents.onResize.connect((newSize) => {
console.log('Resized to:', newSize.width, newSize.height);
});

IApplication.webEvents

action<TActionData>(action, data?): void

Defined in: core/Application.ts:769

Dispatches an action with optional data alias for sendAction

TActionData = any

The type of data to send with the action

Action

The action to dispatch

TActionData

Optional data to send with the action

void

// Send a 'jump' action with power data
app.action('jump', { power: 100 });

IApplication.action


actions<TActionData>(action): ActionSignal<TActionData>

Defined in: core/Application.ts:742

Gets an ActionSignal for the specified action type

TActionData = any

The type of data associated with the action

Action

The action to get the signal for

ActionSignal<TActionData>

A signal that can be used to listen for the action

// Listen for a 'jump' action
app.actions('jump').connect((data) => {
player.jump(data.power);
});

IApplication.actions


addAnimation(animation, contextId?): Tween | Timeline | (Tween | Timeline)[]

Defined in: core/Application.ts:349

Adds one or more GSAP tweens or timelines to a specified animation context. This uses the GSAPPlugin’s custom animation context (a Set of tweens/timelines), not a gsap.Context instance. If no contextId is provided, animations are added to the plugin’s global collection.

A single GSAP tween/timeline or an array of them.

Tween | Timeline | (Tween | Timeline)[]

string

Optional ID of the animation context. Defaults to the global context.

Tween | Timeline | (Tween | Timeline)[]

The animation(s) that were added.

IApplication.addAnimation


destroy(rendererDestroyOptions?, options?): void

Defined in: core/Application.ts:582

Destroy the application This will destroy all plugins and the store

RendererDestroyOptions

DestroyOptions

void

IApplication.destroy

PIXIPApplication.destroy


eases(namesOnly): string[] | Eases

Defined in: core/Application.ts:361

Returns the registered eases or ease names.

boolean = false

If true, returns only the ease names.

string[] | Eases

The registered eases or ease names.

IApplication.eases


getAllPaths(): string[]

Defined in: core/Application.ts:402

string[]


getChildAtPath(path): undefined | Container<ContainerChild>

Defined in: core/Application.ts:386

string

undefined | Container<ContainerChild>


getChildrenAtPaths(…paths): Container<ContainerChild>[]

Defined in: core/Application.ts:394

string[]

Container<ContainerChild>[]


getPathForChild(container): string

Defined in: core/Application.ts:390

Container

string


getPathsForChildren(…containers): string[]

Defined in: core/Application.ts:398

Container<ContainerChild>[]

string[]


getPlugin<T>(pluginName, debug): T

Defined in: core/Application.ts:686

Retrieves a registered plugin by its name.

T extends IPlugin<any>

The expected type of the plugin.

string

boolean = false

If true and the plugin is not found, an error will be logged. Defaults to false.

T

The plugin instance if found, otherwise undefined (or T if type assertion is used).

const myCustomPlugin = app.getPlugin<MyCustomPluginType>('myCustomPlugin');
if (myCustomPlugin) {
myCustomPlugin.doSomethingCool();
}
const nonExistentPlugin = app.getPlugin('nonExistent', true); // Will log an error

IApplication.getPlugin


getStorageAdapter(adapterId): IStorageAdapter

Defined in: core/Application.ts:792

Get a storage adapter by id

string

IStorageAdapter


getUnloadedPlugin(id): undefined | ImportListItem<IPlugin<any>>

Defined in: core/Application.ts:711

string

undefined | ImportListItem<IPlugin<any>>


initialize(config, el?): Promise<Application>

Defined in: core/Application.ts:594

Initializes the application with the given configuration and attaches it to an HTML element. This is the main entry point for starting the application.

Partial<AppConfig>

The application configuration object.

HTMLElement

The HTML element to append the application’s canvas to. If not provided, an error will be thrown.

Promise<Application>

A promise that resolves with the initialized application instance.

const gameContainer = document.getElementById('game');
if (gameContainer) {
app.initialize({ appName: 'My Game' }, gameContainer)
.then(initializedApp => {
console.log(`${initializedApp.appName} initialized successfully!`);
initializedApp.scenes.load('mainMenu');
})
.catch(error => console.error('Initialization failed:', error));
} else {
console.error('Game container element not found!');
}

IApplication.initialize


isActionActive(action): boolean

Defined in: core/Application.ts:783

Checks if an action is currently active

Action

The action to check

boolean

True if the action is active, false otherwise

// Check if the 'run' action is active
if (app.isActionActive('run')) {
player.updateSpeed(runningSpeed);
}

IApplication.isActionActive


loadPlugin(listItem, isDefault): Promise<void>

Defined in: core/Application.ts:715

ImportListItem

boolean = false

Promise<void>


loadScene(scene): void

Defined in: core/Application.ts:420

string | LoadSceneConfig

void


pause(config?): void

Defined in: core/Application.ts:181

Pauses the application. This can include pausing the ticker, animations, audio, and timers based on the PauseConfig.

Partial<PauseConfig>

Optional configuration for what aspects of the application to pause.

void

// Pause everything
app.pause();
// Only pause audio and timers
app.pause({ pauseAudio: true, pauseTimers: true });

IApplication.pause


postInitialize(): Promise<void>

Defined in: core/Application.ts:694

Runs any post-initialization setup tasks. This is called after the main initialize method has completed and core plugins are ready. It’s a good place for plugins to finalize their setup or for the application to perform tasks that depend on a fully initialized environment.

Promise<void>

A promise that resolves when post-initialization tasks are complete.

// Inside a custom Application class or after app.initialize resolves
async function startMyGame() {
await app.initialize(config, el);
await app.postInitialize(); // Ensures everything is fully set up
app.scenes.load('intro');
}

IApplication.postInitialize


resume(): void

Defined in: core/Application.ts:206

Resumes the application from a paused state. Restores the state of ticker, animations, audio, and timers that were paused.

void

app.resume();

IApplication.resume


sendAction<TActionData>(action, data?): void

Defined in: core/Application.ts:755

Dispatches an action with optional data

TActionData = any

The type of data to send with the action

Action

The action to dispatch

TActionData

Optional data to send with the action

void

// Send a 'jump' action with power data
app.sendAction('jump', { power: 100 });

IApplication.sendAction


setContainer(container): void

Defined in: core/Application.ts:590

Sets the main HTML container element for the application. This is typically the element where the PixiJS canvas is appended.

HTMLElement

The HTMLElement to be used as the application container.

void

const newGameContainer = document.createElement('div');
document.body.appendChild(newGameContainer);
app.setContainer(newGameContainer); // If app needs to change its parent container

IApplication.setContainer


setFullScreen(value): void

Defined in: core/Application.ts:515

boolean

void


setFullScreenElement(value): void

Defined in: core/Application.ts:511

null | HTMLElement | Window

void


toggleFullScreen(): void

Defined in: core/Application.ts:519

void


togglePause(config?): void

Defined in: core/Application.ts:239

Partial<PauseConfig>

void


static getInstance<T>(): T

Defined in: core/Application.ts:568

T extends Application = Application

T