@pixi/app

What is @pixi/app?

@pixi/app is a part of the PixiJS library, which is a fast, lightweight 2D rendering engine for creating interactive graphics and animations in the browser. The @pixi/app package specifically provides the core functionality to create and manage the main application instance, including the renderer, ticker, and stage.

What are @pixi/app's main functionalities?

Creating an Application

This feature allows you to create a new PixiJS application with specified width and height. The application instance includes a renderer, ticker, and stage, and appends the canvas element to the document body.

const app = new PIXI.Application({ width: 800, height: 600 }); document.body.appendChild(app.view);

Adding Sprites

This feature allows you to add sprites to the stage. You can create a sprite from an image path and add it to the application's stage for rendering.

const sprite = PIXI.Sprite.from('path/to/image.png'); app.stage.addChild(sprite);

Handling Animation

This feature allows you to handle animations using the application's ticker. You can add a function to the ticker that updates the properties of objects on each frame, such as rotating a sprite.

app.ticker.add((delta) => { sprite.rotation += 0.01 * delta; });

Other packages similar to @pixi/app

three

Three.js is a popular 3D library that provides a wide range of features for creating 3D graphics in the browser. While @pixi/app focuses on 2D rendering, Three.js offers extensive support for 3D scenes, including complex geometries, materials, and lighting.

phaser

Phaser is a fast, robust, and mature 2D game framework for making HTML5 games. It provides a comprehensive suite of features for game development, including physics, input handling, and asset management. Compared to @pixi/app, Phaser is more focused on game development with built-in support for various game mechanics.

babylonjs

Babylon.js is a powerful, beautiful, and simple open-source 3D engine. It provides a complete set of tools for creating 3D experiences in the browser. While @pixi/app is focused on 2D rendering, Babylon.js offers extensive capabilities for 3D graphics, including physics, animations, and advanced rendering techniques.

README

@pixi/app

Installation

npm install @pixi/app

Usage

import { Application } from '@pixi/app';

const app = new Application();
document.body.appendChild(app.view);

Plugins

PixiJS provides a few plugins to add features to the Application. These can be installed from the following packages. Use extensions.add to use these plugins. Note: if you are using pixi.js or pixi.js-legacy bundles, this is unnecessary since plugins are installed automatically by default.

• TickerPlugin from @pixi/ticker