pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
1 lines • 17.5 kB
Source Map (JSON)
{"version":3,"file":"Application.mjs","sources":["../../src/app/Application.ts"],"sourcesContent":["import { extensions, ExtensionType } from '../extensions/Extensions';\nimport { autoDetectRenderer } from '../rendering/renderers/autoDetectRenderer';\nimport { Container } from '../scene/container/Container';\nimport { ApplicationInitHook } from '../utils/global/globalHooks';\nimport { deprecation, v8_0_0 } from '../utils/logging/deprecation';\n\nimport type { Rectangle } from '../maths/shapes/Rectangle';\nimport type { AutoDetectOptions } from '../rendering/renderers/autoDetectRenderer';\nimport type { RendererDestroyOptions } from '../rendering/renderers/shared/system/AbstractRenderer';\nimport type { Renderer } from '../rendering/renderers/types';\nimport type { DestroyOptions } from '../scene/container/destroyTypes';\n\n/**\n * Interface for creating Application plugins. Any plugin that's usable for Application must implement these methods.\n *\n * To create a plugin:\n * 1. Create a class that implements this interface\n * 2. Add the required static extension property\n * 3. Register the plugin using extensions.add()\n * @example\n * ```ts\n * import { ApplicationPlugin, ExtensionType, extensions } from 'pixi.js';\n *\n * class MyPlugin {\n * // Required: Declare the extension type\n * public static extension = ExtensionType.Application;\n *\n * // Required: Implement init method\n * public static init(options: Partial<ApplicationOptions>): void {\n * // Add properties/methods to the Application instance (this)\n * Object.defineProperty(this, 'myFeature', {\n * value: () => console.log('My feature!'),\n * });\n *\n * // Use options if needed\n * console.log('Plugin initialized with:', options);\n * }\n *\n * // Required: Implement destroy method\n * public static destroy(): void {\n * // Clean up any resources\n * console.log('Plugin destroyed');\n * }\n * }\n *\n * // Register the plugin\n * extensions.add(MyPlugin);\n *\n * // Usage in application\n * const app = new Application();\n * await app.init();\n * app.myFeature(); // Output: \"My feature!\"\n * ```\n * > [!IMPORTANT]\n * > - Plugins are initialized in the order they are added\n * > - Plugins are destroyed in reverse order\n * > - The `this` context in both methods refers to the Application instance\n * @see {@link ExtensionType} For different types of extensions\n * @see {@link extensions} For the extension registration system\n * @see {@link ApplicationOptions} For available application options\n * @category app\n * @advanced\n */\nexport interface ApplicationPlugin\n{\n /**\n * Called when Application is constructed, scoped to Application instance.\n * Passes in `options` as the only argument, which are Application `init()` options.\n * @param {object} options - Application options.\n */\n init(options: Partial<ApplicationOptions>): void;\n /** Called when destroying Application, scoped to Application instance. */\n destroy(): void;\n}\n\n/**\n * Application options supplied to the {@link Application#init} method.\n * These options configure how your PixiJS application behaves.\n * @category app\n * @standard\n * @example\n * ```js\n * import { Application } from 'pixi.js';\n *\n * const app = new Application();\n *\n * // Initialize with common options\n * await app.init({\n * // Rendering options\n * width: 800, // Canvas width\n * height: 600, // Canvas height\n * backgroundColor: 0x1099bb, // Background color\n * antialias: true, // Enable antialiasing\n * resolution: window.devicePixelRatio, // Screen resolution\n *\n * // Performance options\n * autoStart: true, // Auto-starts the render loop\n * sharedTicker: true, // Use shared ticker for better performance\n *\n * // Automatic resize options\n * resizeTo: window, // Auto-resize to window\n * autoDensity: true, // Adjust for device pixel ratio\n *\n * // Advanced options\n * preference: 'webgl', // Renderer preference ('webgl' or 'webgpu')\n * powerPreference: 'high-performance' // GPU power preference\n * });\n * ```\n * @see {@link WebGLOptions} For resize-related options\n * @see {@link WebGPUOptions} For resize-related options\n * @see {@link TickerPlugin} For ticker-related options\n * @see {@link ResizePlugin} For resize-related options\n */\nexport interface ApplicationOptions extends AutoDetectOptions, PixiMixins.ApplicationOptions { }\n\n// eslint-disable-next-line max-len\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type, requireExport/require-export-jsdoc, requireMemberAPI/require-member-api-doc\nexport interface Application extends PixiMixins.Application { }\n\n/**\n * Convenience class to create a new PixiJS application.\n *\n * The Application class is the main entry point for creating a PixiJS application. It handles the setup of all core\n * components needed to start rendering and managing your game or interactive experience.\n *\n * Key features:\n * - Automatically creates and manages the renderer\n * - Provides a stage (root container) for your display objects\n * - Handles canvas creation and management\n * - Supports plugins for extending functionality\n * - {@link ResizePlugin} for automatic resizing\n * - {@link TickerPlugin} for managing frame updates\n * - {@link CullerPlugin} for culling off-screen objects\n * @example\n * ```js\n * import { Assets, Application, Sprite } from 'pixi.js';\n *\n * // Create a new application\n * const app = new Application();\n *\n * // Initialize with options\n * await app.init({\n * width: 800, // Canvas width\n * height: 600, // Canvas height\n * backgroundColor: 0x1099bb, // Background color\n * antialias: true, // Enable antialiasing\n * resolution: 1, // Resolution / device pixel ratio\n * preference: 'webgl', // or 'webgpu' // Renderer preference\n * });\n *\n * // Add the canvas to your webpage\n * document.body.appendChild(app.canvas);\n *\n * // Start adding content to your application\n * const texture - await Assets.load('your-image.png');\n * const sprite = new Sprite(texture);\n * app.stage.addChild(sprite);\n * ```\n * > [!IMPORTANT] From PixiJS v8.0.0, the application must be initialized using the async `init()` method\n * > rather than passing options to the constructor.\n * @category app\n * @standard\n * @see {@link ApplicationOptions} For all available initialization options\n * @see {@link Container} For information about the stage container\n * @see {@link Renderer} For details about the rendering system\n */\nexport class Application<R extends Renderer = Renderer>\n{\n /**\n * Collection of installed plugins.\n * @internal\n */\n public static _plugins: ApplicationPlugin[] = [];\n\n /**\n * The root display container for your application.\n * All visual elements should be added to this container or its children.\n * @example\n * ```js\n * // Create a sprite and add it to the stage\n * const sprite = Sprite.from('image.png');\n * app.stage.addChild(sprite);\n *\n * // Create a container for grouping objects\n * const container = new Container();\n * app.stage.addChild(container);\n * ```\n */\n public stage: Container = new Container();\n\n /**\n * The renderer instance that handles all drawing operations.\n *\n * Unless specified, it will automatically create a WebGL renderer if available.\n * If WebGPU is available and the `preference` is set to `webgpu`, it will create a WebGPU renderer.\n * @example\n * ```js\n * // Create a new application\n * const app = new Application();\n * await app.init({\n * width: 800,\n * height: 600,\n * preference: 'webgl', // or 'webgpu'\n * });\n *\n * // Access renderer properties\n * console.log(app.renderer.width, app.renderer.height);\n * ```\n */\n public renderer: R;\n\n /** Create new Application instance */\n constructor();\n\n /** @deprecated since 8.0.0 */\n constructor(options?: Partial<ApplicationOptions>);\n\n /** @ignore */\n constructor(...args: [Partial<ApplicationOptions>] | [])\n {\n // #if _DEBUG\n if (args[0] !== undefined)\n {\n deprecation(v8_0_0, 'Application constructor options are deprecated, please use Application.init() instead.');\n }\n // #endif\n }\n\n /**\n * Initializes the PixiJS application with the specified options.\n *\n * This method must be called after creating a new Application instance.\n * @param options - Configuration options for the application and renderer\n * @returns A promise that resolves when initialization is complete\n * @example\n * ```js\n * const app = new Application();\n *\n * // Initialize with custom options\n * await app.init({\n * width: 800,\n * height: 600,\n * backgroundColor: 0x1099bb,\n * preference: 'webgl', // or 'webgpu'\n * });\n * ```\n */\n public async init(options?: Partial<ApplicationOptions>)\n {\n // The default options\n options = { ...options };\n\n this.renderer = await autoDetectRenderer(options as ApplicationOptions) as R;\n\n // install plugins here\n Application._plugins.forEach((plugin) =>\n {\n plugin.init.call(this, options);\n });\n }\n\n /**\n * Renders the current stage to the screen.\n *\n * When using the default setup with {@link TickerPlugin} (enabled by default), you typically don't need to call\n * this method directly as rendering is handled automatically.\n *\n * Only use this method if you've disabled the {@link TickerPlugin} or need custom\n * render timing control.\n * @example\n * ```js\n * // Example 1: Default setup (TickerPlugin handles rendering)\n * const app = new Application();\n * await app.init();\n * // No need to call render() - TickerPlugin handles it\n *\n * // Example 2: Custom rendering loop (if TickerPlugin is disabled)\n * const app = new Application();\n * await app.init({ autoStart: false }); // Disable automatic rendering\n *\n * function animate() {\n * app.render();\n * requestAnimationFrame(animate);\n * }\n * animate();\n * ```\n */\n public render(): void\n {\n this.renderer.render({ container: this.stage });\n }\n\n /**\n * Reference to the renderer's canvas element. This is the HTML element\n * that displays your application's graphics.\n * @readonly\n * @type {HTMLCanvasElement}\n * @example\n * ```js\n * // Create a new application\n * const app = new Application();\n * // Initialize the application\n * await app.init({...});\n * // Add canvas to the page\n * document.body.appendChild(app.canvas);\n *\n * // Access the canvas directly\n * console.log(app.canvas); // HTMLCanvasElement\n * ```\n */\n get canvas(): R['canvas']\n {\n return this.renderer.canvas as R['canvas'];\n }\n\n /**\n * Reference to the renderer's canvas element.\n * @type {HTMLCanvasElement}\n * @deprecated since 8.0.0\n * @see {@link Application#canvas}\n */\n get view(): R['canvas']\n {\n // #if _DEBUG\n deprecation(v8_0_0, 'Application.view is deprecated, please use Application.canvas instead.');\n // #endif\n\n return this.renderer.canvas as R['canvas'];\n }\n\n /**\n * Reference to the renderer's screen rectangle. This represents the visible area of your application.\n *\n * It's commonly used for:\n * - Setting filter areas for full-screen effects\n * - Defining hit areas for screen-wide interaction\n * - Determining the visible bounds of your application\n * @readonly\n * @example\n * ```js\n * // Use as filter area for a full-screen effect\n * const blurFilter = new BlurFilter();\n * sprite.filterArea = app.screen;\n *\n * // Use as hit area for screen-wide interaction\n * const screenSprite = new Sprite();\n * screenSprite.hitArea = app.screen;\n *\n * // Get screen dimensions\n * console.log(app.screen.width, app.screen.height);\n * ```\n * @see {@link Rectangle} For all available properties and methods\n */\n get screen(): Rectangle\n {\n return this.renderer.screen;\n }\n\n /**\n * Destroys the application and all of its resources.\n *\n * This method should be called when you want to completely\n * clean up the application and free all associated memory.\n * @param rendererDestroyOptions - Options for destroying the renderer:\n * - `false` or `undefined`: Preserves the canvas element (default)\n * - `true`: Removes the canvas element\n * - `{ removeView: boolean }`: Object with removeView property to control canvas removal\n * @param options - Options for destroying the application:\n * - `false` or `undefined`: Basic cleanup (default)\n * - `true`: Complete cleanup including children\n * - Detailed options object:\n * - `children`: Remove children\n * - `texture`: Destroy textures\n * - `textureSource`: Destroy texture sources\n * - `context`: Destroy WebGL context\n * @example\n * ```js\n * // Basic cleanup\n * app.destroy();\n *\n * // Remove canvas and do complete cleanup\n * app.destroy(true, true);\n *\n * // Remove canvas with explicit options\n * app.destroy({ removeView: true }, true);\n *\n * // Detailed cleanup with specific options\n * app.destroy(\n * { removeView: true },\n * {\n * children: true,\n * texture: true,\n * textureSource: true,\n * context: true\n * }\n * );\n * ```\n * > [!WARNING] After calling destroy, the application instance should no longer be used.\n * > All properties will be null and further operations will throw errors.\n */\n public destroy(rendererDestroyOptions: RendererDestroyOptions = false, options: DestroyOptions = false): void\n {\n // Destroy plugins in the opposite order\n // which they were constructed\n const plugins = Application._plugins.slice(0);\n\n plugins.reverse();\n plugins.forEach((plugin) =>\n {\n plugin.destroy.call(this);\n });\n\n this.stage.destroy(options);\n this.stage = null;\n\n this.renderer.destroy(rendererDestroyOptions);\n this.renderer = null;\n }\n}\n\nextensions.handleByList(ExtensionType.Application, Application._plugins);\nextensions.add(ApplicationInitHook);\n"],"names":[],"mappings":"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"}