IApplication

Defined in: core/interfaces/IApplication.ts:70

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

Example

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();

Extends

• Application

Type Parameters

D

D extends DataSchema = DataSchema

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

C

C extends ActionContext = ActionContext

The type of the action context used for dispatching actions.

A

A extends Action = Action

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

Properties

actionContext

actionContext: C

Defined in: core/interfaces/IApplication.ts:287

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

Example

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

---

anim

readonly anim: typeof gsap

Defined in: core/interfaces/IApplication.ts:489

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

Returns

The GSAP instance.

Example

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

---

animation

readonly animation: IGSAPPlugin

Defined in: core/interfaces/IApplication.ts:478

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

Returns

The GSAP plugin instance.

Example

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

---

appName

readonly appName: string

Defined in: core/interfaces/IApplication.ts:359

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

Example

document.title = app.appName;

---

appVersion

readonly appVersion: string | number

Defined in: core/interfaces/IApplication.ts:370

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

Example

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

---

assets

readonly assets: IAssetsPlugin

Defined in: core/interfaces/IApplication.ts:148

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

Example

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

---

audio

readonly audio: IAudioManagerPlugin

Defined in: core/interfaces/IApplication.ts:216

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

Example

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

---

center

readonly center: Point

Defined in: core/interfaces/IApplication.ts:125

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

Example

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

---

config

readonly config: Partial<AppConfig<D>>

Defined in: core/interfaces/IApplication.ts:87

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

Example

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

---

controls

readonly controls: IControls

Defined in: core/interfaces/IApplication.ts:253

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

Example

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

---

data

readonly data: IDataAdapter<D>

Defined in: core/interfaces/IApplication.ts:276

The primary DataAdapter instance, usually for managing game data.

Example

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

---

env

readonly env: Record<string, string>

Defined in: core/interfaces/IApplication.ts:101

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

Example

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

---

exec

readonly exec: ICoreFunctions

Defined in: core/interfaces/IApplication.ts:401

Alias for func. Access to core application functions.

---

focus

readonly focus: IFocusManagerPlugin

Defined in: core/interfaces/IApplication.ts:194

The FocusManagerPlugin instance for managing UI focus.

---

func

readonly func: ICoreFunctions

Defined in: core/interfaces/IApplication.ts:395

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

Example

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

---

i18n

readonly i18n: Ii18nPlugin

Defined in: core/interfaces/IApplication.ts:227

The i18nPlugin instance for internationalization and localization.

Example

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

---

input

readonly input: IInputPlugin

Defined in: core/interfaces/IApplication.ts:240

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

---

keyboard

readonly keyboard: IKeyboardPlugin

Defined in: core/interfaces/IApplication.ts:188

The KeyboardPlugin instance for managing keyboard input.

Example

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

---

manifest

readonly manifest: undefined | string | AssetsManifest

Defined in: core/interfaces/IApplication.ts:136

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

Example

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

---

onPause

onPause: Signal<() => void>

Defined in: core/interfaces/IApplication.ts:299

A signal that emits when the application is paused.

Example

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

---

onResume

onResume: Signal<() => void>

Defined in: core/interfaces/IApplication.ts:311

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

Example

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

---

paused

readonly paused: boolean

Defined in: core/interfaces/IApplication.ts:348

Indicates whether the application is currently paused.

Example

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

---

popups

readonly popups: IPopupManagerPlugin

Defined in: core/interfaces/IApplication.ts:204

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

Example

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

---

resizer

readonly resizer: IResizerPlugin

Defined in: core/interfaces/IApplication.ts:233

The ResizerPlugin instance for managing application resizing.

---

scenes

readonly scenes: ISceneManagerPlugin

Defined in: core/interfaces/IApplication.ts:160

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

Example

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

---

signal

readonly signal: ICoreSignals

Defined in: core/interfaces/IApplication.ts:383

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

Example

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

---

size

readonly size: Size

Defined in: core/interfaces/IApplication.ts:113

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

Example

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

---

store

readonly store: IStore

Defined in: core/interfaces/IApplication.ts:265

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

Example

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

---

webEvents

readonly webEvents: IWebEventsPlugin

Defined in: core/interfaces/IApplication.ts:173

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

Example

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

Methods

action()

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

Defined in: core/interfaces/IApplication.ts:438

Dispatches an action with optional data. This is an alias for sendAction.

Type Parameters

TActionData

TActionData = any

The type of data being sent.

Parameters

action

A

The action type to dispatch.

data?

TActionData

Optional data to accompany the action.

Returns

void

Example

// Dispatch 'startGame' action
app.action('startGame');

// Dispatch 'updateScore' action with data
app.action('updateScore', { points: 100 });

---

actions()

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

Defined in: core/interfaces/IApplication.ts:421

Retrieves an ActionSignal for a specific action type. This allows subscribing to specific actions dispatched within the application.

Type Parameters

TActionData

TActionData = any

The type of data expected with the action.

Parameters

action

A

The action type to get the signal for.

Returns

ActionSignal<TActionData>

An ActionSignal that can be connected to.

Example

// Assuming 'updateScore' is an action defined in 'MyActions'
// And it carries a payload like { points: number }
interface ScoreUpdateData { points: number; }

app.actions<ScoreUpdateData>('updateScore').connect((data) => {
  console.log(`Score updated by ${data.points} points.`);
  // Update game state based on data.points
});

---

addAnimation()

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

Defined in: core/interfaces/IApplication.ts:508

Adds one or more GSAP tweens or timelines to a specified animation context. This refers to 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, allowing them to be managed (e.g., paused, resumed, killed) collectively.

Parameters

animation

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

Timeline | Tween | (Timeline | Tween)[]

contextId?

string

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

Returns

Timeline | Tween | (Timeline | Tween)[]

The animation(s) that were added.

Example

const myTween = app.anim.to(myObject, { x: 100, duration: 1 });
app.addAnimation(myTween, 'mySceneAnimationCollection');

// Later, kill all animations in this context
app.animation.killAll('mySceneAnimationCollection'); // Assuming killAll is the method to clear the custom context

---

eases()

eases(namesOnly?): string[] | Ease

Defined in: core/interfaces/IApplication.ts:529

Returns the registered GSAP eases or their names. Useful for dynamically applying easing functions or listing available eases.

Parameters

namesOnly?

boolean

If true, returns only the ease names as an array of strings. Otherwise, returns an object mapping names to Ease functions.

Returns

string[] | Ease

An object of registered eases (name: Ease function) or an array of ease names.

Example

const availableEaseNames = app.eases(true); // ['power1.inOut', 'back.out', ...]
console.log(availableEaseNames);

const easeFunctions = app.eases();
if (easeFunctions['power2.in']) {
  app.anim.to(mySprite, { y: 200, ease: easeFunctions['power2.in'] });
}

---

getPlugin()

getPlugin<T>(name, debug?): T

Defined in: core/interfaces/IApplication.ts:589

Retrieves a registered plugin by its name.

Type Parameters

T

T extends IPlugin<any>

The expected type of the plugin.

Parameters

name

string

The name/ID of the plugin to retrieve.

debug?

boolean

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

Returns

T

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

Example

const myCustomPlugin = app.getPlugin<MyCustomPluginType>('myCustomPlugin');
if (myCustomPlugin) {
  myCustomPlugin.doSomethingCool();
}

const nonExistentPlugin = app.getPlugin('nonExistent', true); // Will log an error

---

initialize()

initialize(config, el?): Promise<IApplication<D, C, A>>

Defined in: core/interfaces/IApplication.ts:553

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

Parameters

config

Partial<AppConfig<D>>

The application configuration object.

el?

HTMLElement

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

Returns

Promise<IApplication<D, C, A>>

A promise that resolves with the initialized application instance.

Example

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!');
}

---

isActionActive()

isActionActive(action): boolean

Defined in: core/interfaces/IApplication.ts:464

Checks if a specific action is currently considered active, usually based on input controls.

Parameters

action

A

The action type to check.

Returns

boolean

True if the action is active, false otherwise.

Example

if (app.isActionActive('moveForward')) {
  player.move(1);
}

---

pause()

pause(config?): void

Defined in: core/interfaces/IApplication.ts:326

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

Parameters

config?

PauseConfig

Optional configuration for what aspects of the application to pause.

Returns

void

Example

// Pause everything
app.pause();

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

---

postInitialize()

postInitialize(): Promise<void>

Defined in: core/interfaces/IApplication.ts:571

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.

Returns

Promise<void>

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

Example

// 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');
}

---

resume()

resume(): void

Defined in: core/interfaces/IApplication.ts:336

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

Returns

void

Example

app.resume();

---

sendAction()

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

Defined in: core/interfaces/IApplication.ts:451

Dispatches an action with optional data.

Type Parameters

TActionData

TActionData = any

The type of data being sent.

Parameters

action

A

The action type to dispatch.

data?

TActionData

Optional data to accompany the action.

Returns

void

Example

// Dispatch 'playerAction' with specific details
app.sendAction('playerAction', { type: 'shoot', targetId: 'enemy123' });

---

setContainer()

setContainer(container): void

Defined in: core/interfaces/IApplication.ts:602

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

Parameters

container

HTMLElement

The HTMLElement to be used as the application container.

Returns

void

Example

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