### BitmapFont.install() Example

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates how to install a bitmap font using the `install` static method, with examples for basic and advanced configurations.

```APIDOC
## BitmapFont.install(options: BitmapFontInstallOptions)

### Description
Generates and installs a bitmap font with the specified options. The font will be cached and available for use in BitmapText objects.

### Parameters
- `options` (BitmapFontInstallOptions): Setup options for font generation.
  - `name` (string): The name to register the font under.
  - `style` (TextStyle | Partial<TextStyleOptions>): The style for the font.
  - `chars` (Array<Array<string>>): Optional. Defines the characters to include in the font.
  - `resolution` (number): Optional. The resolution of the generated font texture.
  - `padding` (number): Optional. Padding around the font characters in the texture.
  - `textureStyle` (Partial<TextureStyleOptions>): Optional. Style options for the generated texture.

### Returns
- `void`

### Example
```ts
// Install a basic font
BitmapFont.install({
    name: 'Title',
    style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: '#ffffff'
    }
});

// Install with advanced options
BitmapFont.install({
    name: 'Custom',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: '#00ff00',
        stroke: { color: '#000000', width: 2 }
    },
    chars: [['a', 'z'], ['A', 'Z'], ['0', '9']],
    resolution: 2,
    padding: 4,
    textureStyle: {
        scaleMode: 'nearest'
    }
});
```
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/getting-started/quick-start.mdx

After scaffolding, navigate to your project directory and install the necessary dependencies, then start the development server.

```bash
cd <your-project-name>
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Start Dev Server

Source: https://github.com/pixijs/pixijs.com/blob/main/README.md

Use these commands to install project dependencies and start the local development server. The dev server uses the development version of PixiJS docs.

```bash
# Install dependencies
npm install

# Start the dev server (uses the dev version of PixiJS docs)
npm start
```

--------------------------------

### Install PixiJS v8 Beta

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2023-10-03-pixi-v8-beta.md

Use npm to install the prerelease version of PixiJS v8.

```bash
npm install pixi.js@prerelease-v8
```

--------------------------------

### PixiJS Container Setup with Filters and Mask

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

This example demonstrates adding a sprite to a container, applying a blur filter to the container, and using a graphics mask to limit rendering to a specific area. Ensure PixiJS is imported.

```typescript
import { BlurFilter, Container, Graphics, Sprite } from 'pixi.js';

const container = new Container();
const sprite = Sprite.from('https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png');

sprite.width = 512;
sprite.height = 512;

// Adds a sprite as a child to this container. As a result, the sprite will be rendered whenever the container
// is rendered.
container.addChild(sprite);

// Blurs whatever is rendered by the container
container.filters = [new BlurFilter()];

// Only the contents within a circle at the center should be rendered onto the screen.
container.mask = new Graphics()
    .beginFill(0xffffff)
    .drawCircle(sprite.width / 2, sprite.height / 2, Math.min(sprite.width, sprite.height) / 2)
    .endFill();

```

--------------------------------

### Install PixiJS Layout

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-08-06-pixi-v8.12.0.mdx

Install PixiJS Layout version 3.1.0 using npm.

```bash
npm install @pixi/layout@3.1.0
```

--------------------------------

### Install a basic BitmapFont

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Use this to install a basic bitmap font for global use. It requires a name and style options.

```typescript
BitmapFont.install({
    name: 'Title',
    style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: '#ffffff'
    }
});
```

--------------------------------

### Install BitmapFont with Texture Style

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Configure texture rendering and filtering for BitmapFonts by providing a `textureStyle` object during installation, for example, to set `scaleMode` to 'nearest'.

```typescript
BitmapFont.install({
    name: 'CrispFont',
    textureStyle: {
        scaleMode: 'nearest',
    }
});
```

--------------------------------

### Install PixiJS Layout v3

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-04-29-layout-v3.md

Use your preferred package manager to install the PixiJS Layout v3 library.

```bash
pnpm add @pixi/layout
# or
yarn add @pixi/layout
# or
npm install @pixi/layout
```

--------------------------------

### Basic Interactive Sprite Setup

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Configure a sprite for interaction by setting its `eventMode` and `cursor`. This example also shows how to assign event handlers directly to properties like `onclick`.

```typescript
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.cursor = 'pointer';
```

--------------------------------

### Install PixiJS Core

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-08-06-pixi-v8.12.0.mdx

Install PixiJS version 8.12.0 using npm.

```bash
npm install pixi.js@8.12.0
```

--------------------------------

### NoiseFilter: Full Example with Options and Application

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Provides a comprehensive example of creating and applying a NoiseFilter with custom options, including dynamic adjustments.

```typescript
import { NoiseFilter } from 'pixi.js';

// Create with options
const filter = new NoiseFilter({
    noise: 0.5,    // 50% noise intensity
    seed: 12345    // Fixed seed for consistent noise
});

// Apply to a display object
sprite.filters = [filter];

// Adjust noise dynamically
filter.noise = 0.8;    // Increase noise
filter.seed = Math.random(); // New random pattern
```

--------------------------------

### ontouchstart Event

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Handles the 'touchstart' event, which is triggered when a touch interaction starts.

```APIDOC
## ontouchstart

### Description
Property-based event handler for the `touchstart` event. Fired when a touch interaction starts, such as when a finger touches the screen.

### Method
`sprite.ontouchstart = (event) => { ... };`

### Parameters
- `event` (FederatedEvent): The event object containing details about the interaction.

### Request Example
```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

sprite.ontouchstart = (event) => {
    sprite.scale.set(0.9);
};
```

### Response
This is an event handler, it does not return a value.
```

--------------------------------

### Assets Manifest Example

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Provides an example of an AssetsManifest, showing how to define multiple bundles with their respective assets.

```typescript
const manifest: AssetsManifest = {
    bundles: [
        {
            name: 'loading',
            assets: [
                {
                    alias: 'logo',
                    src: 'logo.{webp,png}',
                    data: { scaleMode: 'nearest' }
                },
                {
                    alias: 'progress-bar',
                    src: 'progress.png'
                }
            ]
        },
        {
            name: 'game',
            assets: {
                background: ['bg.webp', 'bg.png'],
```

--------------------------------

### Install a BitmapFont with advanced options

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Install a bitmap font with advanced customization, including character sets, resolution, padding, and texture styles.

```typescript
BitmapFont.install({
    name: 'Custom',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: '#00ff00',
        stroke: { color: '#000000', width: 2 }
    },
    chars: [['a', 'z'], ['A', 'Z'], ['0', '9']],
    resolution: 2,
    padding: 4,
    textureStyle: {
        scaleMode: 'nearest'
    }
});
```

--------------------------------

### Install PixiJS v8.13.0 via npm

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-09-05-pixi-v8.13.0.mdx

Use this command to install the latest PixiJS version using npm. This is the recommended method for most projects.

```bash
npm install pixi.js@8.13.0
```

--------------------------------

### BitmapFont Installation

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Allows for the installation of custom bitmap fonts, either dynamically generated or pre-loaded from external files. This is crucial for using specific font families with BitmapText.

```APIDOC
## BitmapFont.install

### Description
Installs a bitmap font for use with BitmapText. This can be used for dynamically generated fonts or pre-installed ones.

### Method
```ts
BitmapFont.install(fontData: BitmapFontData, options?: { resolution?: number });
```

### Parameters
#### fontData
- **name** (string) - The name of the font to be installed.
- **style** (TextStyleOptions) - The style options for the font, including `fontFamily` which should match the `name`.
- **resolution** (number) - Optional. The resolution for the font. This is the recommended way to set resolution for BitmapText.

### Request Example
```ts
import { BitmapFont } from 'pixi.js';

// Install a font with a specific name and style
BitmapFont.install({
   name: 'myFont',
   style: {
       fontFamily: 'Arial', // This should match the 'name'
   },
   resolution: 2 // Set resolution during installation
});

// Use the installed font
const text = new BitmapText({ text: 'Hello', style: { fontFamily: 'myFont' } });
```
```

--------------------------------

### Bitmap Font Installation with Specific Name

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Shows how to install a bitmap font and assign it a unique name, which is crucial for referencing it later in text styles.

```typescript
BitmapFont.install({
    name: 'MyCustomFont',
    style: { fontFamily: 'Arial' }
});
```

--------------------------------

### Complete PixiJS and Three.js Integration Example

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/third-party/mixing-three-and-pixi.mdx

This is the full example code demonstrating how to combine PixiJS for 2D UI and Three.js for 3D rendering within a single application.

```javascript
import * as THREE from 'three';
import * as PIXI from 'pixi.js';

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

// --- Three.js Setup ---
const threeRenderer = new THREE.WebGLRenderer({
  antialias: true,
  stencil: true, // so masks work in pixijs
});
threeRenderer.setSize(WIDTH, HEIGHT);
threeRenderer.setClearColor(0xdddddd, 1);
document.body.appendChild(threeRenderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);
camera.position.z = 50;
scene.add(camera);

const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd });
const cube = new THREE.Mesh(boxGeometry, basicMaterial);
cube.rotation.set(0.4, 0.2, 0);
scene.add(cube);

// --- PixiJS Setup ---
const pixiRenderer = new PIXI.WebGLRenderer();

await pixiRenderer.init({
  context: threeRenderer.getContext(),
  width: WIDTH,
  height: HEIGHT,
  clearBeforeRender: false, // Prevent PixiJS from clearing the Three.js render
});

const stage = new PIXI.Container();
const amazingUI = new PIXI.Graphics().roundRect(20, 80, 100, 100, 5).roundRect(220, 80, 100, 100, 5).fill(0xffff00);
stage.addChild(amazingUI);

// --- Rendering Loop ---
function render() {
  // Render the Three.js scene
  threeRenderer.resetState();
  threeRenderer.render(scene, camera);

  // Render the PixiJS stage
  pixiRenderer.resetState();
  pixiRenderer.render({ container: stage });

  requestAnimationFrame(render);
}

requestAnimationFrame(render);
```

--------------------------------

### PixiJS TextStyle: Basic and Rich Style Examples

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Illustrates the creation of TextStyle objects in PixiJS. The examples show a basic style with font size, fill, and family, as well as a rich style incorporating multiple advanced features like stroke, drop shadow, and word wrap.

```typescript
// Basic text style
const basicStyle = new TextStyle({
    fontSize: 24,
    fill: 'black',
    fontFamily: 'Arial'
});
```

```typescript
// Rich text style with multiple features
const richStyle = new TextStyle({
    fontFamily: ['Arial', 'Helvetica', 'sans-serif'],
    fontSize: 36,
    fontWeight: 'bold',
    fill: 'red',
    stroke: { color: '#4a1850', width: 5 },
    align: 'center',
    dropShadow: {
        color: '#000000',
        blur: 4,
        distance: 6,
        angle: Math.PI / 6
    },
    wordWrap: true,
    wordWrapWidth: 440,
    lineHeight: 40,
    textBaseline: 'middle'
});
```

--------------------------------

### Start PixiJS Application Loop

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Initialize the application with `autoStart: false` and then call `app.start()` to begin the render/update loop when ready.

```typescript
// Initialize without auto-start
await app.init({ autoStart: false });

// Start when ready
app.start();
```

--------------------------------

### Container 'childAdded' Event Example

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Listen for the 'childAdded' event on a parent container to get notified when a new child is added, along with its index.

```typescript
const parent = new Container();
parent.on('childAdded', (child, container, index) => {
    console.log(`New child at index ${index}:`, child);
});
```

--------------------------------

### Create and Initialize PixiJS Application with Basic Options

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Set up a PixiJS application with core options and append its canvas to the document body. Load assets and add a sprite to the stage.

```javascript
import { Assets, Application, Sprite } from 'pixi.js';

// Create a new application
const app = new Application();

// Initialize with options
await app.init({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    antialias: true,
    resolution: 1,
    preference: 'webgl',
});

// Add the canvas to your webpage
document.body.appendChild(app.canvas);

// Start adding content to your application
const texture = await Assets.load('your-image.png');
const sprite = new Sprite(texture);
app.stage.addChild(sprite);
```

--------------------------------

### Auto-detect Renderer Configuration

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Provides examples of how to configure the auto-detect renderer function, including basic setup and specifying preferences for different renderers.

```typescript
const renderer = await autoDetectRenderer({
  width: 800,
  height: 600,
  antialias: true,
});
```

```typescript
const renderer = await autoDetectRenderer({
  width: 800,
  height: 600,
  webgpu:{
    antialias: true,
    backgroundColor: 'red'
  },
  webgl:{
    antialias: true,
    backgroundColor: 'green'
  }
 });
```

```typescript
const renderer = await autoDetectRenderer({
  preference: ['webgl', 'canvas'],
});
```

--------------------------------

### Create PixiJS React Project with npm create

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-03-26-pixi-react-v8-launches.md

Use the PixiJS Create CLI to quickly set up a new PixiJS React project with essential configurations.

```shell
npm create pixi.js@latest --template framework-react
```

--------------------------------

### Color Initialization Examples

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates various ways to initialize a Color object using different input formats like arrays, typed arrays, HSL/HSLA, and HSV/HSVA objects.

```javascript
new Color([1, 0, 0]);           // RGB
new Color([1, 0, 0, 0.5]);      // RGBA
new Color(new Float32Array([1, 0, 0, 0.5]));
new Color(new Uint8Array([255, 0, 0]));
new Color(new Uint8ClampedArray([255, 0, 0, 128]));
new Color({ h: 0, s: 100, l: 50 });
new Color({ h: 0, s: 100, l: 50, a: 0.5 });
new Color('hsl(0, 100%, 50%)');
new Color('hsla(0deg 100% 50% / 50%)');
new Color({ h: 0, s: 100, v: 100 });
new Color({ h: 0, s: 100, v: 100, a: 0.5 });
```

--------------------------------

### Asset Source Examples

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates various ways to specify asset sources, from simple URLs to complex configurations with multiple formats and options.

```typescript
const src: AssetSrc = 'images/sprite.png';
```

```typescript
const src: AssetSrc = ['sprite.webp', 'sprite.png'];
```

```typescript
const src: AssetSrc = 'sprite.{webp,png}';
```

```typescript
const src: AssetSrc = {
    src: 'sprite.png',
    format: 'png',
    parser: 'texture',
    data: {
        scaleMode: 'nearest',
    }
};
```

```typescript
const src: AssetSrc = [
    {
        src: 'sprite@2x.webp',
        format: 'webp',
    },
    {
        src: 'sprite.png',
        format: 'png',
    }
];
```

--------------------------------

### Run All Content Generators

Source: https://github.com/pixijs/pixijs.com/blob/main/README.md

Execute all content generators for the PixiJS website, including examples, tutorials, sponsors, and definitions. This command is run automatically before starting the dev server or building for production.

```bash
npm run generate
```

--------------------------------

### Create and Use an Ellipse

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Provides examples of creating an Ellipse object, using it as a hit area for containers, checking point containment, and getting its bounding box. Ellipses are defined by their center and half dimensions.

```typescript
// Basic ellipse creation
const ellipse = new Ellipse(100, 100, 20, 10);

// Use as a hit area
container.hitArea = new Ellipse(0, 0, 50, 25);

// Check point containment
const isInside = ellipse.contains(mouseX, mouseY);

// Get bounding box
const bounds = ellipse.getBounds();
```

--------------------------------

### Application - new Application() / app.init(options)

Source: https://context7.com/pixijs/pixijs.com/llms.txt

The Application class is the main entry point for PixiJS, creating a renderer, stage, and render loop. Initialization is asynchronous to handle renderer detection.

```APIDOC
## Application - `new Application()` / `app.init(options)`

### Description
The `Application` class is the top-level entry point that creates a renderer, a root stage `Container`, and a `Ticker`-driven render loop. Initialization is asynchronous because renderer detection (WebGL vs WebGPU) must happen at runtime.

### Method
`new Application()` and `app.init(options)`

### Parameters
#### `init` Options
- **width** (number) - The width of the application view.
- **height** (number) - The height of the application view.
- **backgroundColor** (number) - The background color of the application view.
- **preference** (string) - The preferred renderer ('webgl' or 'webgpu'). Falls back automatically.
- **antialias** (boolean) - Whether to enable anti-aliasing.
- **resolution** (number) - The resolution of the application view.
- **autoDensity** (boolean) - Whether to scale the canvas CSS size to match the resolution.
- **hello** (boolean) - Whether to log renderer information to the console.

### Request Example
```ts
import { Application, Assets, Sprite } from 'pixi.js';

const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  preference: 'webgpu',
  antialias: true,
  resolution: window.devicePixelRatio,
  autoDensity: true,
  hello: true,
});

document.body.appendChild(app.canvas);

// ... further PixiJS code ...

// app.destroy(true, { children: true }); // Optional cleanup
```

### Response
#### Success Response
Initializes the PixiJS application with the specified options.
```

--------------------------------

### Implement Custom PixiJS Adapter

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/concepts/environments.md

Example of creating a custom adapter for PixiJS to run in non-standard environments like Node.js or headless setups. Implement the necessary methods for canvas creation, context retrieval, and fetching.

```typescript
import { DOMAdapter } from 'pixi.js';

const CustomAdapter = {
  createCanvas: (width, height) => {
    /* custom implementation */
  },
  getCanvasRenderingContext2D: () => {
    /* custom implementation */
  },
  getWebGLRenderingContext: () => {
    /* custom implementation */
  },
  getNavigator: () => ({ userAgent: 'Custom', gpu: null }),
  getBaseUrl: () => 'custom://',
  fetch: async (url, options) => {
    /* custom fetch */
  },
  parseXML: (xml) => {
    /* custom XML parser */
  },
};

DOMAdapter.set(CustomAdapter);
```

--------------------------------

### Create PixiJS Project with Bun

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2024-12-06-pixi-create.mdx

Use this command to initiate the PixiJS project creation process using Bun. Follow the prompts to select your desired template.

```bash
bun create pixi.js
```

--------------------------------

### Initializing PixiJS Graphics with Options

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates creating a Graphics instance with specific options like `roundPixels` and initial `position`. This is useful for setting up graphics with custom properties.

```typescript
const graphics = new Graphics({
    roundPixels: true,
    position: { x: 100.5, y: 100.5 }
});
```

--------------------------------

### Create PixiJS Project with NPM

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2024-12-06-pixi-create.mdx

Use this command to initiate the PixiJS project creation process using NPM. Follow the prompts to select your desired template.

```bash
npm create pixi.js@latest
```

--------------------------------

### Checking Ticker Started State

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Verify if the ticker has been started by checking the `started` property. This is useful for ensuring operations only run when the ticker is active.

```typescript
// Check ticker state
const ticker = new Ticker();
console.log(ticker.started); // false

// Start and verify
ticker.start();
console.log(ticker.started); // true

```

--------------------------------

### Simplify Extension Self-Installation

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/migrations/v7.md

Extensions now self-install. Importing the extension class is sufficient; explicit registration with `extensions.add` is no longer needed.

```javascript
import { AccessibilityManager } from '@pixi/accessibility';
import { extensions } from '@pixi/core';
extensions.add(AccessibilityManager);
```

```javascript
import '@pixi/accessibility';
```

--------------------------------

### Initialize PixiJS Application and Load Assets

Source: https://context7.com/pixijs/pixijs.com/llms.txt

Creates a PixiJS application, initializes it with options, loads an asset, adds it to the stage, and sets up an animation loop. Ensure the canvas is appended to the DOM and clean up with `app.destroy()` when done.

```typescript
import { Application, Assets, Sprite } from 'pixi.js';

// 1. Create and initialize the app
const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  preference: 'webgpu',       // 'webgl' | 'webgpu' (falls back automatically)
  antialias: true,
  resolution: window.devicePixelRatio,
  autoDensity: true,          // scales canvas CSS size to match resolution
  hello: true,                // log renderer info to console
});

document.body.appendChild(app.canvas);

// 2. Load an asset, add it to the stage
const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const bunny = new Sprite(texture);
bunny.anchor.set(0.5);
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);

// 3. Animate every frame
app.ticker.add((ticker) => {
  bunny.rotation += 0.05 * ticker.deltaTime;
});

// 4. Clean up when done
// app.destroy(true, { children: true });

```

--------------------------------

### Initialize PixiJS Application with Custom Options (Async)

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Initialize the PixiJS application using the asynchronous `init` method with custom configuration options. This is the required method since PixiJS v8.0.0.

```javascript
const app = new Application();

// Initialize with custom options
await app.init({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    preference: 'webgl', // or 'webgpu'
});
```

--------------------------------

### Install AssetPack Core Package

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2024-07-18-assetpack-1.0.0.md

Install the core AssetPack package as a development dependency.

```bash
npm install --save-dev @assetpack/core
```

--------------------------------

### Initialize PixiJS Application with Common Options

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Configure the PixiJS application with essential rendering, performance, and automatic resize options. Ensure the `init` method is awaited.

```javascript
import { Application } from 'pixi.js';

const app = new Application();

// Initialize with common options
await app.init({
   // Rendering options
   width: 800,
   height: 600,
   backgroundColor: 0x1099bb,
   antialias: true,
   resolution: window.devicePixelRatio,

   // Performance options
   autoStart: true,
   sharedTicker: true,

   // Automatic resize options
   resizeTo: window,
   autoDensity: true,

   // Advanced options
   preference: 'webgl',
   powerPreference: 'high-performance'
});
```

--------------------------------

### ApplicationOptions Reference

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/components/application/index.md

The `.init()` method of `Application` accepts a `Partial<ApplicationOptions>` object with the following configuration options:

```APIDOC
## ApplicationOptions Reference

The `.init()` method of `Application` accepts a `Partial<ApplicationOptions>` object with the following configuration options:

| Option                   | Type                                | Default     | Description                                                                                                                              |
| ------------------------ | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `autoStart`              | `boolean`                           | `true`      | Whether to start rendering immediately after initialization. Setting to `false` will not stop the shared ticker if it's already running. |
| `resizeTo`               | `Window \| HTMLElement`             | —           | Element to auto-resize the renderer to match.                                                                                            |
| `sharedTicker`           | `boolean`                           | `false`     | Use the shared ticker instance if `true`; otherwise, a private ticker is created.                                                        |
| `preference`             | `'webgl' \| 'webgpu'`               | `webgl`     | Preferred renderer type.                                                                                                                 |
| `useBackBuffer`          | `boolean`                           | `false`     | _(WebGL only)_ Use the back buffer when required.                                                                                        |
| `forceFallbackAdapter`   | `boolean`                           | `false`     | _(WebGPU only)_ Force usage of fallback adapter.                                                                                         |
| `powerPreference`        | `'high-performance' \| 'low-power'` | `undefined` | Hint for GPU power preference (WebGL & WebGPU).                                                                                          |
| `antialias`              | `boolean`                           | —           | Enables anti-aliasing. May impact performance.                                                                                           |
| `autoDensity`            | `boolean`                           | —           | Adjusts canvas size based on `resolution`. Applies only to `HTMLCanvasElement`.                                                          |
| `background`             | `ColorSource`                       | —           | Alias for `backgroundColor`.                                                                                                             |
| `backgroundAlpha`        | `number`                            | `1`         | Alpha transparency for background (0 = transparent, 1 = opaque).                                                                         |
| `backgroundColor`        | `ColorSource`                       | `'black'`   | Color used to clear the canvas. Accepts hex, CSS color, or array.                                                                         |
| `canvas`                 | `ICanvas`                           | —           | A custom canvas instance (optional).                                                                                                     |
| `clearBeforeRender`      | `boolean`                           | `true`      | Whether the renderer should clear the canvas each frame.                                                                                 |
| `context`                | `WebGL2RenderingContext \| null`    | `null`      | User-supplied rendering context (WebGL).                                                                                                 |
| `depth`                  | `boolean`                           | —           | Enable a depth buffer in the main view. Always `true` for WebGL.                                                                         |
| `height`                 | `number`                            | `600`       | Initial height of the renderer (in pixels).                                                                                              |
| `width`                  | `number`                            | `800`       | Initial width of the renderer (in pixels).                                                                                               |
| `hello`                  | `boolean`                           | `false`     | Log renderer info and version to the console.                                                                                            |
```

--------------------------------

### Get Container Blend Mode

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Gets the current blend mode applied to the sprite. Defaults to 'normal'.

```typescript
get blendMode(): BLEND_MODES;
```

--------------------------------

### Install PixiJS v8.17.0 via npm

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2026-03-12-pixi-v8.17.0.mdx

Use this command to install the specific version of PixiJS using npm.

```bash
npm install pixi.js@8.17.0
```

--------------------------------

### Create and Setup Tiling Sprite for Water Overlay

Source: https://github.com/pixijs/pixijs.com/blob/main/src/tutorials/v8.0.0/fishPond/step4/step4-content.md

Use Texture.from to create a water texture and then initialize a TilingSprite with the texture and screen dimensions. Add the TilingSprite to the application stage.

```javascript
const texture = Texture.from('overlay');
overlay = new TilingSprite({
  texture,
  width: app.screen.width,
  height: app.screen.height,
});
app.stage.addChild(overlay);
```

--------------------------------

### Create and Initialize PixiJS Application

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/components/application/index.md

Instantiate the Application class and then asynchronously initialize it with desired configuration options. Append the canvas to the document body to display the application.

```typescript
import { Application } from 'pixi.js';

const app = new Application();

await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});

document.body.appendChild(app.canvas);
```

--------------------------------

### Get Container Visible Property

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Gets the visibility state of the object. If false, the object will not be drawn and its transform will not be updated.

```typescript
get visible(): boolean;
```

--------------------------------

### Get Container Tint

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Gets the current tint applied to the sprite. Defaults to 0xFFFFFF (white) if no tint is applied.

```typescript
get tint(): number;
```

--------------------------------

### Basic RenderLayer Configuration (PixiJS)

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates basic setup for a PixiJS RenderLayer, enabling automatic child sorting. Also shows how to implement a custom sort function for specific ordering needs.

```typescript
// Basic layer with automatic sorting
const layer = new RenderLayer({
    sortableChildren: true
});

// Layer with custom sort function
const customLayer = new RenderLayer({
    sortableChildren: true,
    sortFunction: (a, b) => {
        // Sort by y position
        return a.position.y - b.position.y;
    }
});

// Add objects to layer while maintaining scene graph parent
const sprite = new Sprite(texture);
```

--------------------------------

### moveTo

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Sets the starting point for a new sub-path without drawing a line. Subsequent drawing commands start from this point.

```APIDOC
## moveTo

### Description
Sets the starting point for a new sub-path. Moves the "pen" to a new location without drawing a line. Any subsequent drawing commands will start from this point.

### Method
`moveTo(x: number, y: number): this`

### Parameters
- **x** (number) - The x-coordinate to move to
- **y** (number) - The y-coordinate to move to

### Returns
- `this`: The Graphics instance for method chaining.

### Example
```ts
const graphics = new Graphics();

// Create multiple separate lines
graphics
    .moveTo(50, 50)
    .lineTo(100, 50)
    .moveTo(50, 100)    // Start a new line
    .lineTo(100, 100)
    .stroke({ width: 2, color: 0xff0000 });

// Create disconnected shapes
graphics
    .moveTo(150, 50)
    .rect(150, 50, 50, 50)
    .fill({ color: 0x00ff00 })
    .moveTo(250, 50)    // Start a new shape
    .circle(250, 75, 25)
    .fill({ color: 0x0000ff });

// Position before curved paths
graphics
    .moveTo(300, 50)
    .bezierCurveTo(
        350, 25,   // Control point 1
        400, 75,   // Control point 2
        450, 50    // End point
    )
    .stroke({ width: 3, color: 0xff00ff });
```
```

--------------------------------

### Example: Set Container Tint

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates applying various color tints to a container and how to remove the tint.

```typescript
// Basic color tinting
container.tint = 0xff0000; // Red tint
container.tint = 'red';    // Same as above
container.tint = '#00ff00'; // Green
container.tint = 'rgb(0,0,255)'; // Blue

// Remove tint
container.tint = 0xffffff; // White = no tint
container.tint = null;     // Also removes tint
```

--------------------------------

### Get Bounds Bottom Edge

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Explains how to get the bottom edge coordinate of the bounds, functioning as an alias for the maxY property.

```typescript
const bounds = new Bounds(0, 0, 100, 200);
console.log(bounds.bottom); // 200
console.log(bounds.bottom === bounds.maxY); // true
```

--------------------------------

### Creating and Resizing TilingSprite

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates creating a TilingSprite with initial dimensions and how to adjust its width and height dynamically, including updating on window resize.

```typescript
const sprite = new TilingSprite({
    texture: Texture.from('pattern.png'),
    width: 500,
    height: 300
});

// Adjust width dynamically
sprite.width = 800; // Expands tiling area

// Update on resize
window.addEventListener('resize', () => {
    sprite.width = app.screen.width;
});
```

```typescript
const sprite = new TilingSprite({
    texture: Texture.from('pattern.png'),
    width: 500,
    height: 300
});

// Adjust width dynamically
sprite.height = 800; // Expands tiling area

// Update on resize
window.addEventListener('resize', () => {
    sprite.height = app.screen.height;
});
```

--------------------------------

### Get Bounds Right Edge

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Shows how to get the right edge coordinate of the bounds, serving as an alias for the maxX property.

```typescript
const bounds = new Bounds(0, 0, 100, 100);
console.log(bounds.right); // 100
console.log(bounds.right === bounds.maxX); // true
```

--------------------------------

### Initialize Assets with Manifest and Bundles

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Initialize PixiJS Assets with a manifest that includes multiple bundles, specifying character and music assets.

```typescript
const manifest = {
    bundles: [
        {
            name: 'main',
            assets: {
                'hero': 'hero.json',
                'music': 'theme.mp3'
            }
        }
    ]
};

// Initialize with manifest
await Assets.init({ manifest });

// Load bundles as needed
await Assets.loadBundle('loading');
await Assets.loadBundle('game');
```

--------------------------------

### Create Container with Initial Position and Scale

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates initializing a new Container instance with specific position and scale values using Point objects.

```javascript
const container = new Container({
   position: new Point(100, 200),
   scale: new Point(2, 2),
   rotation: Math.PI / 2,
});
```

--------------------------------

### Color Class Constructor and Usage

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates various ways to instantiate the Color class with different color formats and shows basic usage like converting to an array.

```APIDOC
## Color Constructor and Examples

### Description
The `Color` class can be instantiated with a variety of color representations, including strings, numbers, arrays, and typed arrays. It automatically normalizes these values internally.

### Usage
```js
import { Color } from 'pixi.js';

// Examples of instantiation:
new Color('red').toArray();           // Output: [1, 0, 0, 1]
new Color(0xff0000).toArray();        // Output: [1, 0, 0, 1]
new Color('ff0000').toArray();        // Output: [1, 0, 0, 1]
new Color('#f00').toArray();          // Output: [1, 0, 0, 1]
new Color('0xff0000ff').toArray();    // Output: [1, 0, 0, 1]
new Color('#f00f').toArray();         // Output: [1, 0, 0, 1]
new Color({ r: 255, g: 0, b: 0, a: 0.5 }).toArray(); // Output: [1, 0, 0, 0.5]
new Color('rgb(255, 0, 0, 0.5)').toArray(); // Output: [1, 0, 0, 0.5]
new Color([1, 1, 1]).toArray();       // Output: [1, 1, 1, 1]
new Color([1, 0, 0, 0.5]).toArray();    // Output: [1, 0, 0, 0.5]
new Color(new Float32Array([1, 0, 0, 0.5])).toArray(); // Output: [1, 0, 0, 0.5]
new Color(new Uint8Array([255, 0, 0, 255])).toArray(); // Output: [1, 0, 0, 1]
new Color(new Uint8ClampedArray([255, 0, 0, 255])).toArray(); // Output: [1, 0, 0, 1]
new Color({ h: 0, s: 100, l: 50, a: 0.5 }).toArray(); // Output: [1, 0, 0, 0.5]
new Color('hsl(0, 100%, 50%, 50%)').toArray(); // Output: [1, 0, 0, 0.5]
new Color({ h: 0, s: 100, v: 100, a: 0.5 }).toArray(); // Output: [1, 0, 0, 0.5]
```

### Remarks
- All color values are normalized internally to the 0-1 range.
- Alpha values are always between 0-1.
- Invalid colors will throw an error.
- The original format is preserved when possible.
```

--------------------------------

### Create PixiJS Project with PNPM

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2024-12-06-pixi-create.mdx

Use this command to initiate the PixiJS project creation process using PNPM. Follow the prompts to select your desired template.

```bash
pnpm create pixi.js
```

--------------------------------

### Spine Physics Example 2

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2024-06-14-pixi-spine.md

Demonstrates advanced physics simulations for natural secondary motion in Spine animations within PixiJS.

```html
<iframe src="https://pixijs.io/spine-v8/examples/physics2.html" width="100%" height="500"></iframe>
```

--------------------------------

### Basic Bitmap Font Installation

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Installs a basic bitmap font with a given name and style. The font can then be used in BitmapText objects via its name.

```typescript
BitmapFont.install({
    name: 'BasicFont',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: '#ffffff'
    }
});
```

--------------------------------

### Switch to PixiJS Events Package

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/migrations/v7.md

Use this snippet to uninstall the old InteractionManager and install the new EventSystem when upgrading to v7. Ensure you have installed `@pixi/events`.

```javascript
import { InteractionManager, extensions, Application } from 'pixi.js';
import { EventSystem } from '@pixi/events';

// Uninstall interaction
extensions.remove(InteractionManager);

// Create the renderer or application
const app = new Application();

// Install events
app.renderer.addSystem(EventSystem, 'events');
```

--------------------------------

### Get and Set Bounds X Position

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Demonstrates how to get and set the x-coordinate of a Bounds object. Modifying the x-position shifts the bounds horizontally while preserving its width.

```typescript
const bounds = new Bounds(0, 0, 100, 100);
// Get x position
console.log(bounds.x); // 0

// Move bounds horizontally
bounds.x = 50;
console.log(bounds.minX, bounds.maxX); // 50, 150

// Width stays the same
console.log(bounds.width); // Still 100
```

--------------------------------

### Initialize and Use PixiJS Color Class

Source: https://github.com/pixijs/pixijs.com/blob/main/docs/guides/components/color.md

Demonstrates initializing the Color class with different formats like named colors, hex, hex strings, and RGBA objects. Shows how to convert colors to arrays and hex strings, and how to apply a Color instance directly to a sprite's tint.

```typescript
import { Color, Sprite, Texture, Graphics } from 'pixi.js';

const red = new Color('red'); // Named color
const green = new Color(0x00ff00); // Hex
const blue = new Color('#0000ff'); // Hex string
const rgba = new Color({ r: 255, g: 0, b: 0, a: 0.5 }); // RGBA object

console.log(red.toArray()); // [1, 0, 0, 1]
console.log(green.toHex()); // "#00ff00"

const sprite = new Sprite(Texture.WHITE);
sprite.tint = red; // Works directly with a Color instance
```

--------------------------------

### gl2D Scene Description Format Example

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-09-05-pixi-v8.13.0.mdx

An example of the gl2D JSON-based scene description format, designed for 2D rendering and interoperability across tools and engines.

```json
{
  "asset": {
    "version": "1.0",
    "generator": "PixiJS"
  },
  "scene": 0,
  "scenes": [
    {
      "name": "MainScene",
      "nodes": [0]
    }
  ],
  "nodes": [
    {
      "type": "container",
      "name": "Root",
      "children": [1],
      "translation": [100, 100]
    },
    {
      "type": "sprite",
      "name": "Hero",
      "texture": 0,
      "translation": [50, 0]
    }
  ],
  "resources": [
    { "type": "texture", "source": 0 },
    { "type": "image_source", "uri": "/textures/hero.png" }
  ],
  "extensionsUsed": []
}
```

--------------------------------

### Detach Multiple Containers from RenderLayer

Source: https://github.com/pixijs/pixijs.com/blob/main/src/data/pixi.js.md

Remove one or more Containers from a RenderLayer. The example demonstrates removing single and multiple sprites, and includes a type-safe detachment example.

```typescript
const layer = new RenderLayer();
const container = new Container();
const sprite1 = new Sprite(texture1);
const sprite2 = new Sprite(texture2);

// Add sprites to scene graph and layer
container.addChild(sprite1, sprite2);
layer.attach(sprite1, sprite2);

// Remove single sprite from layer
layer.detach(sprite1);
// sprite1 is still child of container but not rendered in layer

// Remove multiple sprites at once
const otherLayer = new RenderLayer();
otherLayer.attach(sprite3, sprite4);
otherLayer.detach(sprite3, sprite4);

// Type-safe detachment
const typedSprite = layer.detach<Sprite>(spriteInLayer);
typedSprite.texture = newTexture; // TypeScript knows this is a Sprite
```

--------------------------------

### Set Up Trees on Screen

Source: https://github.com/pixijs/pixijs.com/blob/main/src/tutorials/v8.0.0/chooChooTrain/step5/step5-content.md

Instantiates and adds multiple trees to the stage, positioning them horizontally with spacing. Includes offscreen buffering.

```javascript
const treeWidth = 200;
const y = app.screen.height - 20;
const spacing = 15;
const count = app.screen.width / (treeWidth + spacing) + 1;
const trees = [];

for (let index = 0; index < count; index++) {
  const treeHeight = 225 + Math.random() * 50;
  const tree = createTree(treeWidth, treeHeight);

  tree.x = index * (treeWidth + spacing);
  tree.y = y;

  app.stage.addChild(tree);
  trees.push(tree);
}

```

--------------------------------

### Render Layers Example

Source: https://github.com/pixijs/pixijs.com/blob/main/blog/2025-01-24-pixi-v8.7.0.mdx

Demonstrates how to use Render Layers to control rendering order independently of the scene graph. Useful for keeping UI elements on top of game objects.

```javascript
import * as PIXI from 'pixi.js';

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

// Create a render layer for the game
const gameLayer = new PIXI.RenderLayer();
app.stage.addChild(gameLayer);

// Create a render layer for the UI
const uiLayer = new PIXI.RenderLayer();
app.stage.addChild(uiLayer);

// Add a sprite to the game layer
const sprite = PIXI.Sprite.from('assets/spritesheet.json');
sprite.anchor.set(0.5);
sprite.position.set(app.screen.width / 2, app.screen.height / 2);
gameLayer.addChild(sprite);

// Add a UI element to the UI layer
const uiText = new PIXI.Text('Score: 0', {
    fontSize: 24,
    fill: 0xffffff,
});
uiText.anchor.set(0.5);
uiText.position.set(app.screen.width / 2, 50);
uiLayer.addChild(uiText);

// The UI layer will always render on top of the game layer.
```

```javascript
import * as PIXI from 'pixi.js';

export class Fish extends PIXI.Sprite {
    constructor(texture) {
        super(texture);
        this.anchor.set(0.5);
        this.speed = Math.random() * 3 - 1.5;
        this.turnSpeed = Math.random() - 0.5;
    }

    update(delta) {
        this.rotation += this.turnSpeed * delta * 0.1;
        this.x += Math.sin(this.rotation) * this.speed;
        this.y += Math.cos(this.rotation) * this.speed;
    }
}

```

```javascript
import * as PIXI from 'pixi.js';

export class CharacterUI extends PIXI.Container {
    constructor(characterName) {
        super();

        const nameText = new PIXI.Text(characterName, {
            fontSize: 16,
            fill: 0xffffff,
            align: 'center',
        });
        nameText.anchor.set(0.5, 0);
        nameText.y = -50;
        this.addChild(nameText);

        const healthBar = new PIXI.Graphics();
        healthBar.beginFill(0x00ff00);
        healthBar.drawRect(0, 0, 100, 10);
        healthBar.endFill();
        healthBar.anchor.set(0.5, 0);
        healthBar.y = -30;
        this.addChild(healthBar);

        this.health = 100;
        this.healthBar = healthBar;
    }

    setHealth(newHealth) {
        this.health = Math.max(0, newHealth);
        this.healthBar.width = this.health;
        this.healthBar.tint = this.health < 50 ? 0xff0000 : 0x00ff00;
    }
}

```