# Application

Class · extends [`AppBase`](https://api.playcanvas.com/engine/classes/AppBase.md) · category: Framework

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/framework/application.js#L109

Application is a subclass of [AppBase](https://api.playcanvas.com/engine/classes/AppBase.md), which represents the base functionality for all
PlayCanvas applications. It acts as a convenience class by internally registering all
[ComponentSystem](https://api.playcanvas.com/engine/classes/ComponentSystem.md)s and [ResourceHandler](https://api.playcanvas.com/engine/classes/ResourceHandler.md)s implemented in the PlayCanvas Engine. This
makes app setup simple but results in the full engine being included when bundling your
application.

New code should prefer [AppBase](https://api.playcanvas.com/engine/classes/AppBase.md), as this class is expected to be deprecated in a future
release. Two limitations motivate that:

- Its constructor is synchronous, so it cannot create a WebGPU device. Creating one requires
awaiting [createGraphicsDevice](https://api.playcanvas.com/engine/functions/createGraphicsDevice.md).
- It references every component system and resource handler, so none of them can be
[tree-shaken](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) out of your
bundle. [AppBase](https://api.playcanvas.com/engine/classes/AppBase.md) leaves that choice to you.

The equivalent [AppBase](https://api.playcanvas.com/engine/classes/AppBase.md) setup registers only what the app actually uses:

```javascript
const device = await createGraphicsDevice(canvas, { deviceTypes: [DEVICETYPE_WEBGPU] });

const options = new AppOptions();
options.graphicsDevice = device;
options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem];
options.resourceHandlers = [TextureHandler, ContainerHandler];

const app = new AppBase(canvas);
app.init(options);
```

The component systems this class registers are listed on the constructor below. That list
doubles as a migration checklist, as it maps each component name to the system you would need
to register yourself.

[AppBase#keyboard](https://api.playcanvas.com/engine/classes/AppBase.md#keyboard), [AppBase#mouse](https://api.playcanvas.com/engine/classes/AppBase.md#mouse), [AppBase#touch](https://api.playcanvas.com/engine/classes/AppBase.md#touch),
[AppBase#gamepads](https://api.playcanvas.com/engine/classes/AppBase.md#gamepads) and [AppBase#elementInput](https://api.playcanvas.com/engine/classes/AppBase.md#elementinput) stay `null` unless the matching device
is passed to this constructor, so a game that reads input must construct with, for example,
`{ keyboard: new Keyboard(window), mouse: new Mouse(canvas), touch: new TouchDevice(canvas) }`.

## Constructors

### constructor

```ts
new Application(canvas: OffscreenCanvas | HTMLCanvasElement, options?: object)
```

Create a new Application instance.

Automatically registers these component systems with the application's component system registry:

- anim ([AnimComponentSystem](https://api.playcanvas.com/engine/classes/AnimComponentSystem.md))
- animation ([AnimationComponentSystem](https://api.playcanvas.com/engine/classes/AnimationComponentSystem.md))
- audiolistener ([AudioListenerComponentSystem](https://api.playcanvas.com/engine/classes/AudioListenerComponentSystem.md))
- button ([ButtonComponentSystem](https://api.playcanvas.com/engine/classes/ButtonComponentSystem.md))
- camera ([CameraComponentSystem](https://api.playcanvas.com/engine/classes/CameraComponentSystem.md))
- collision ([CollisionComponentSystem](https://api.playcanvas.com/engine/classes/CollisionComponentSystem.md))
- element ([ElementComponentSystem](https://api.playcanvas.com/engine/classes/ElementComponentSystem.md))
- gsplat ([GSplatComponentSystem](https://api.playcanvas.com/engine/classes/GSplatComponentSystem.md))
- joint ([JointComponentSystem](https://api.playcanvas.com/engine/classes/JointComponentSystem.md))
- layoutchild ([LayoutChildComponentSystem](https://api.playcanvas.com/engine/classes/LayoutChildComponentSystem.md))
- layoutgroup ([LayoutGroupComponentSystem](https://api.playcanvas.com/engine/classes/LayoutGroupComponentSystem.md))
- light ([LightComponentSystem](https://api.playcanvas.com/engine/classes/LightComponentSystem.md))
- model ([ModelComponentSystem](https://api.playcanvas.com/engine/classes/ModelComponentSystem.md))
- particlesystem ([ParticleSystemComponentSystem](https://api.playcanvas.com/engine/classes/ParticleSystemComponentSystem.md))
- rigidbody ([RigidBodyComponentSystem](https://api.playcanvas.com/engine/classes/RigidBodyComponentSystem.md))
- render ([RenderComponentSystem](https://api.playcanvas.com/engine/classes/RenderComponentSystem.md))
- screen ([ScreenComponentSystem](https://api.playcanvas.com/engine/classes/ScreenComponentSystem.md))
- script ([ScriptComponentSystem](https://api.playcanvas.com/engine/classes/ScriptComponentSystem.md))
- scrollbar ([ScrollbarComponentSystem](https://api.playcanvas.com/engine/classes/ScrollbarComponentSystem.md))
- scrollview ([ScrollViewComponentSystem](https://api.playcanvas.com/engine/classes/ScrollViewComponentSystem.md))
- sound ([SoundComponentSystem](https://api.playcanvas.com/engine/classes/SoundComponentSystem.md))
- sprite ([SpriteComponentSystem](https://api.playcanvas.com/engine/classes/SpriteComponentSystem.md))

**Parameters**

- `canvas` (`OffscreenCanvas | HTMLCanvasElement`): The canvas element.
- `options` (`object`, optional, default `{}`): The options object to configure the Application.
    - `options.assetPrefix` (`string`, optional): Prefix to apply to asset urls before loading.
    - `options.devtools` (`boolean`, optional): Whether the app announces itself to developer tools,
      such as the PlayCanvas Inspector browser extension. Defaults to true. See
      [AppOptions#devtools](https://api.playcanvas.com/engine/classes/AppOptions.md#devtools).
    - `options.elementInput` ([`ElementInput`](https://api.playcanvas.com/engine/classes/ElementInput.md), optional): Input handler for [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md)s.
    - `options.gamepads` ([`GamePads`](https://api.playcanvas.com/engine/classes/GamePads.md), optional): Gamepad handler for input.
    - `options.graphicsDevice` ([`GraphicsDevice`](https://api.playcanvas.com/engine/classes/GraphicsDevice.md), optional): The graphics device used by the
      application. If not provided, a WebGl graphics device will be created.
    - `options.graphicsDeviceOptions` (`any`, optional): Options object that is passed into the
      [GraphicsDevice](https://api.playcanvas.com/engine/classes/GraphicsDevice.md) constructor.
    - `options.keyboard` ([`Keyboard`](https://api.playcanvas.com/engine/classes/Keyboard.md), optional): Keyboard handler for input.
    - `options.mouse` ([`Mouse`](https://api.playcanvas.com/engine/classes/Mouse.md), optional): Mouse handler for input.
    - `options.physicsWorld` ([`PhysicsWorld`](https://api.playcanvas.com/engine/classes/PhysicsWorld.md), optional): The physics backend used to simulate rigid
      bodies, collisions and joints. When omitted, the Ammo.js backend is created automatically if
      the Ammo library is loaded. See [AppOptions#physicsWorld](https://api.playcanvas.com/engine/classes/AppOptions.md#physicsworld).
    - `options.scriptPrefix` (`string`, optional): Prefix to apply to script urls before loading.
    - `options.scriptsOrder` (`string[]`, optional): Scripts in order of loading first.
    - `options.touch` ([`TouchDevice`](https://api.playcanvas.com/engine/classes/TouchDevice.md), optional): TouchDevice handler for input.

**Example**

```ts
// Engine-only example: create the application manually
const app = new Application(canvas, options);

// Start the application's main loop
app.start();
```

## Inherited from [AppBase](https://api.playcanvas.com/engine/classes/AppBase.md)

- `assets: AssetRegistry`
- `autoRender: boolean = true`
- `elementInput: ElementInput | null = null`
- `gamepads: GamePads | null = null`
- `graphicsDevice: GraphicsDevice`
- `i18n: I18n`
- `keyboard: Keyboard | null = null`
- `lightmapper: Lightmapper | null = null`
- `loader: ResourceLoader`
- `maxDeltaTime: number = 0.1`
- `mouse: Mouse | null = null`
- `renderNextFrame: boolean`
- `root: Entity`
- `scene: Scene`
- `scenes: SceneRegistry`
- `scripts: ScriptRegistry`
- `scriptsOrder: string[] = []`
- `systems: ComponentSystemRegistry`
- `timeScale: number = 1`
- `touch: TouchDevice | null = null`
- `xr: XrManager | null = null`
- `get batcher(): BatchManager`
- `get fillMode(): string`
- `get resolutionMode(): string`
- `get stats(): AppStats`
- `applySceneSettings(settings: object): void`
- `configure(url: string, callback: ConfigureAppCallback): void`
- `destroy(): void`
- `drawLine(start: Vec3, end: Vec3, color?: Color, depthTest?: boolean, layer?: Layer): void`
- `drawLineArrays(positions: number[], colors: number[] | Color, depthTest?: boolean, layer?: Layer): void`
- `drawLines(positions: Vec3[], colors: Color | Color[], depthTest?: boolean, layer?: Layer): void`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `init(appOptions: AppOptions): void`
- `isHidden(): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `preload(callback: PreloadAppCallback): void`
- `resizeCanvas(width?: number, height?: number): { height: number; width: number } | undefined`
- `setAreaLightLuts(ltcMat1: number[], ltcMat2: number[]): void`
- `setCanvasFillMode(mode: string, width?: number, height?: number): void`
- `setCanvasResolution(mode: string, width?: number, height?: number): void`
- `setSkybox(asset: Asset<string>): void`
- `start(): void`
- `update(dt: number): void`
- `updateCanvasSize(): void`
- `static getApplication(id?: string): AppBase | undefined`