/** * @import { ElementInput } from './input/element-input.js' * @import { GamePads } from '../platform/input/game-pads.js' * @import { GraphicsDevice } from '../platform/graphics/graphics-device.js' * @import { Keyboard } from '../platform/input/keyboard.js' * @import { Mouse } from '../platform/input/mouse.js' * @import { PhysicsWorld } from './physics/physics-world.js' * @import { TouchDevice } from '../platform/input/touch-device.js' */ /** * Application is a subclass of {@link AppBase}, which represents the base functionality for all * PlayCanvas applications. It acts as a convenience class by internally registering all * {@link ComponentSystem}s and {@link ResourceHandler}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 {@link AppBase}, 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 {@link createGraphicsDevice}. * - 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. {@link AppBase} leaves that choice to you. * * The equivalent {@link AppBase} 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. * * {@link AppBase#keyboard}, {@link AppBase#mouse}, {@link AppBase#touch}, * {@link AppBase#gamepads} and {@link AppBase#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) }`. * * @category Framework */ export class Application extends AppBase { /** * Create a new Application instance. * * Automatically registers these component systems with the application's component system registry: * * - anim ({@link AnimComponentSystem}) * - animation ({@link AnimationComponentSystem}) * - audiolistener ({@link AudioListenerComponentSystem}) * - button ({@link ButtonComponentSystem}) * - camera ({@link CameraComponentSystem}) * - collision ({@link CollisionComponentSystem}) * - element ({@link ElementComponentSystem}) * - gsplat ({@link GSplatComponentSystem}) * - joint ({@link JointComponentSystem}) * - layoutchild ({@link LayoutChildComponentSystem}) * - layoutgroup ({@link LayoutGroupComponentSystem}) * - light ({@link LightComponentSystem}) * - model ({@link ModelComponentSystem}) * - particlesystem ({@link ParticleSystemComponentSystem}) * - rigidbody ({@link RigidBodyComponentSystem}) * - render ({@link RenderComponentSystem}) * - screen ({@link ScreenComponentSystem}) * - script ({@link ScriptComponentSystem}) * - scrollbar ({@link ScrollbarComponentSystem}) * - scrollview ({@link ScrollViewComponentSystem}) * - sound ({@link SoundComponentSystem}) * - sprite ({@link SpriteComponentSystem}) * * @param {HTMLCanvasElement | OffscreenCanvas} canvas - The canvas element. * @param {object} [options] - The options object to configure the Application. * @param {ElementInput} [options.elementInput] - Input handler for {@link ElementComponent}s. * @param {Keyboard} [options.keyboard] - Keyboard handler for input. * @param {Mouse} [options.mouse] - Mouse handler for input. * @param {TouchDevice} [options.touch] - TouchDevice handler for input. * @param {GamePads} [options.gamepads] - Gamepad handler for input. * @param {string} [options.scriptPrefix] - Prefix to apply to script urls before loading. * @param {string} [options.assetPrefix] - Prefix to apply to asset urls before loading. * @param {GraphicsDevice} [options.graphicsDevice] - The graphics device used by the * application. If not provided, a WebGl graphics device will be created. * @param {object} [options.graphicsDeviceOptions] - Options object that is passed into the * {@link GraphicsDevice} constructor. * @param {string[]} [options.scriptsOrder] - Scripts in order of loading first. * @param {PhysicsWorld} [options.physicsWorld] - 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 {@link AppOptions#physicsWorld}. * @param {boolean} [options.devtools] - Whether the app announces itself to developer tools, * such as the PlayCanvas Inspector browser extension. Defaults to true. See * {@link AppOptions#devtools}. * @example * // Engine-only example: create the application manually * const app = new Application(canvas, options); * * // Start the application's main loop * app.start(); */ constructor(canvas: HTMLCanvasElement | OffscreenCanvas, options?: { elementInput?: ElementInput; keyboard?: Keyboard; mouse?: Mouse; touch?: TouchDevice; gamepads?: GamePads; scriptPrefix?: string; assetPrefix?: string; graphicsDevice?: GraphicsDevice; graphicsDeviceOptions?: object; scriptsOrder?: string[]; physicsWorld?: PhysicsWorld; devtools?: boolean; }); createDevice(canvas: any, options: any): WebglGraphicsDevice; addComponentSystems(appOptions: any): void; addResourceHandles(appOptions: any): void; } import { AppBase } from './app-base.js'; import { WebglGraphicsDevice } from '../platform/graphics/webgl/webgl-graphics-device.js'; import type { ElementInput } from './input/element-input.js'; import type { Keyboard } from '../platform/input/keyboard.js'; import type { Mouse } from '../platform/input/mouse.js'; import type { TouchDevice } from '../platform/input/touch-device.js'; import type { GamePads } from '../platform/input/game-pads.js'; import type { GraphicsDevice } from '../platform/graphics/graphics-device.js'; import type { PhysicsWorld } from './physics/physics-world.js';