### Install and run project dependencies

Source: https://pixijs.com/llms-full.txt

Commands to navigate to the project directory, install dependencies, and start the development server.

```bash
cd
npm install
npm run dev
```

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

### start()

Source: https://pixijs.com/llms-full.txt

Starts the application's render/update loop.

```APIDOC
## start()

### Description
Starts the render/update loop. Useful when initializing with autoStart set to false.

### Signature
`start(): void`
```

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

### Install Bitmap Fonts

Source: https://pixijs.com/llms-full.txt

Examples of basic and advanced font installation, including character ranges and usage in BitmapText.

```ts
import { BitmapFont, BitmapText } from 'pixi.js';

// Basic font installation
BitmapFont.install({
    name: 'BasicFont',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: '#ffffff'
    }
});

// Advanced font installation
BitmapFont.install({
    name: 'AdvancedFont',
    style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: '#ff0000',
        stroke: { color: '#000000', width: 2 }
    },
    // Include specific character ranges
    chars: [
        ['a', 'z'],           // lowercase letters
        ['A', 'Z'],           // uppercase letters
        ['0', '9'],           // numbers
        '!@#$%^&*()_+-=[]{}' // symbols
    ],
    resolution: 2,            // High-DPI support
    padding: 4,              // Glyph padding
    skipKerning: false,      // Enable kerning
    textureStyle: {
        scaleMode: 'linear',
    }
});

// Using the installed font
const text = new BitmapText({
    text: 'Hello World',
    style: {
        fontFamily: 'AdvancedFont',
        fontSize: 48
    }
});
```

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

### Handle touch start events

Source: https://pixijs.com/llms-full.txt

Demonstrates using both emitter and property-based handlers for touch start interactions.

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

// Using emitter handler
sprite.on('touchstart', (event) => {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) => {
    sprite.scale.set(0.9);
};
```

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

### start()

Source: https://pixijs.com/llms-full.txt

Starts the ticker execution.

```APIDOC
## start()

### Description
Starts the ticker. If the ticker has listeners, a new animation frame is requested.
```

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

### Create and setup Application

Source: https://pixijs.com/llms-full.txt

Initialize an application, add the canvas to the DOM, and load assets to the stage.

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

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

// Initialize with options
await app.init({
    width: 800,           // Canvas width
    height: 600,          // Canvas height
    backgroundColor: 0x1099bb, // Background color
    antialias: true,     // Enable antialiasing
    resolution: 1,       // Resolution / device pixel ratio
    preference: 'webgl', // or 'webgpu' // Renderer preference
});

// 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);
```

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

### Initialize and Start a Ticker

Source: https://pixijs.com/llms-full.txt

Create a new Ticker instance and start the animation loop.

```ts
import { Ticker } from 'pixi.js';

const ticker = new Ticker();

ticker.add((ticker) => {
  console.log(`Delta Time: ${ticker.deltaTime}`);
});

// Start the ticker
ticker.start();
```

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

### Install BitmapFont Variants

Source: https://pixijs.com/llms-full.txt

Shows basic and advanced configuration options for installing bitmap fonts dynamically.

```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'
    }
});
```

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

### Configure ResizePlugin Options

Source: https://pixijs.com/llms-full.txt

Examples for initializing application resizing to windows or specific DOM elements.

```ts
// Auto-resize to window
await app.init({ resizeTo: window });

// Auto-resize to container element
await app.init({ resizeTo: document.querySelector('#game') });
```

```ts
const app = new Application();
await app.init({
    resizeTo: window, // Resize to the entire window
    // or
    resizeTo: document.querySelector('#game-container'), // Resize to a specific element
    // or
    resizeTo: null, // Disable auto-resize
});
```

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

### Move to a starting point

Source: https://pixijs.com/llms-full.txt

Sets the starting point for a new sub-path.

```typescript
moveTo(x: number, y: number): this;
```

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

### Configure Mask Options

Source: https://pixijs.com/llms-full.txt

Examples for setting up mask inversion and channel selection.

```ts
// Basic mask inversion
sprite.setMask({
    mask: graphics,
    inverse: true
});
```

```ts
// Invert the mask
sprite.setMask({
    mask: graphics,
    inverse: true
});
```

```ts
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});
```

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

### Install BitmapFont via Manager

Source: https://pixijs.com/llms-full.txt

Use the BitmapFontManager to install fonts for use with BitmapText.

```ts
import { BitmapFontManager, BitmapText } from 'pixi.js';

BitmapFontManager.install('TitleFont', {
    fontFamily: 'Arial',
    fontSize: 12,
    strokeThickness: 2,
    fill: 'purple',
});

const title = new BitmapText({ text: 'This is the title', fontFamily: 'TitleFont' });
```

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

### beginPath()

Source: https://pixijs.com/llms-full.txt

Resets the current path to start a new shape.

```APIDOC
## beginPath()

### Description
Discards the previous path and commands to start a new path.
```

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

### Setup Interactive Objects

Source: https://pixijs.com/llms-full.txt

Initialize basic interaction properties on a display object.

```ts
// Basic interactive setup
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.cursor = 'pointer';

// Using event handlers
```

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

### BitmapFont.install(options: BitmapFontInstallOptions)

Source: https://pixijs.com/llms-full.txt

Installs a new BitmapFont into the system, making it available for use in BitmapText objects.

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

### Description
Installs a new bitmap font. Once installed, the font will be available for use in BitmapText objects through the fontFamily property of TextStyle.

### Parameters
#### BitmapFontInstallOptions
- **name** (string) - Optional - The name of the font. Must be unique.
- **chars** (string | (string | string[])[]) - Optional - Characters included in the font set. Defaults to BitmapFont.ALPHANUMERIC.
- **resolution** (number) - Optional - Render resolution for glyphs. Defaults to 1.
- **padding** (number) - Optional - Padding between glyphs on texture atlas. Defaults to 4.
- **skipKerning** (boolean) - Optional - Whether to skip generation of kerning information. Defaults to false.
- **style** (TextStyle | TextStyleOptions) - Optional - Style options to render the BitmapFont with.
- **textureStyle** (TextureStyle | TextureStyleOptions) - Optional - Texture style to use when creating the font textures.

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

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

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

### moveTo(x, y)

Source: https://pixijs.com/llms-full.txt

Sets the starting point for a new sub-path.

```APIDOC
## moveTo(x, y)

### Description
Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.

### Parameters
- **x** (number) - The x-coordinate for the starting point.
- **y** (number) - The y-coordinate for the starting point.

### Returns
- **this** (GraphicsContext) - The instance of the current object for chaining.
```

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

### Manage NineSliceSprite Width

Source: https://pixijs.com/llms-full.txt

Examples for setting and updating the width of a NineSliceSprite.

```ts
// Create a nine-slice sprite with fixed width
	const panel = new NineSliceSprite({
	    texture: Texture.from('panel.png'),
	    width: 200  // Sets initial width
	});

	// Adjust width dynamically
	panel.width = 300;  // Stretches middle sections
```

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

### moveTo(x, y)

Source: https://pixijs.com/llms-full.txt

Sets the starting point for a new sub-path.

```APIDOC
## moveTo(x: number, y: number)

### Description
Moves the "pen" to a new location without drawing a line. Any subsequent drawing commands will start from this point.

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

### Returns
- **this** (Graphics) - The Graphics instance for method chaining
```

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

### Configure TextOptions

Source: https://pixijs.com/llms-full.txt

Examples of creating text objects with basic, advanced, and multiline configurations.

```ts
// Create basic text with minimal options
const basicText = new Text({
    text: 'Hello Pixi!',
    style: {
        fontSize: 24,
        fill: 0xff1010
    }
});

// Create text with advanced styling
const styledText = new Text({
    text: 'Styled Text',
    style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: new FillGradient({
            end: { x: 1, y: 1 },
            stops: [
                { color: 0xff0000, offset: 0 }, // Red at start
                { color: 0x0000ff, offset: 1 }, // Blue at end
            ]
        }),
        stroke: { color: '#4a1850', width: 5 },
        dropShadow: {
            color: '#000000',
            blur: 4,
            distance: 6
        },
        align: 'center'
    },
    anchor: 0.5,
    resolution: window.devicePixelRatio
});

// Create multiline text with word wrap
const wrappedText = new Text({
    text: 'This is a long piece of text that will wrap onto multiple lines',
    style: {
        fontSize: 20,
        wordWrap: true,
        wordWrapWidth: 200,
        lineHeight: 30
    },
    resolution: 2,
    roundPixels: true
});
```

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

### Demonstrate Render Order in PixiJS

Source: https://pixijs.com/llms-full.txt

This example initializes a PixiJS application and adds containers to the stage to visualize the rendering order of parent and child objects.

```ts
import { Application, Container, Sprite, Text, Texture } from 'pixi.js';

(async () => {
  // Create the application helper and add its render target to the page
  const app = new Application();

  await app.init({ resizeTo: window });
  document.body.appendChild(app.canvas);

  // Label showing scene graph hierarchy
  const label = new Text({
    text: 'Scene Graph:\n\napp.stage\n  ┗ A\n     ┗ B\n     ┗ C\n  ┗ D',
    style: { fill: '#ffffff' },
    position: { x: 300, y: 100 },
  });

  app.stage.addChild(label);

  // Helper function to create a block of color with a letter
  const letters = [];

  function addLetter(letter, parent, color, pos) {
    const bg = new Sprite(Texture.WHITE);

    bg.width = 100;
    bg.height = 100;
    bg.tint = color;

    const text = new Text({
      text: letter,
      style: { fill: '#ffffff' },
    });

    text.anchor.set(0.5);
    text.position = { x: 50, y: 50 };

    const container = new Container();

    container.position = pos;
    container.visible = false;
    container.addChild(bg, text);
    parent.addChild(container);

    letters.push(container);

    return container;
  }

  // Define 4 letters
  const a = addLetter('A', app.stage, 0xff0000, { x: 100, y: 100 });
  const b = addLetter('B', a, 0x00ff00, { x: 20, y: 20 });
  const c = addLetter('C', a, 0x0000ff, { x: 20, y: 40 });
  const d = addLetter('D', app.stage, 0xff8800, { x: 140, y: 100 });

  // Display them over time, in order
  let elapsed = 0.0;

  app.ticker.add((ticker) => {
    elapsed += ticker.deltaTime / 60.0;
    if (elapsed >= letters.length) {
      elapsed = 0.0;
    }
    for (let i = 0; i < letters.length; i++) {
      letters[i].visible = elapsed >= i;
    }
  });
})();
```

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

### Configure Sprite Instances

Source: https://pixijs.com/llms-full.txt

Examples for initializing a Sprite with various texture, anchor, and pixel-rounding configurations.

```ts
// Create a basic sprite with texture
const sprite = new Sprite({
    texture: Texture.from('sprite.png')
});

// Create a centered sprite with rounded position
const centeredSprite = new Sprite({
    texture: Texture.from('centered.png'),
    anchor: 0.5,        // Center point
    roundPixels: true,  // Crisp rendering
    x: 100,            // Position from ViewContainerOptions
    y: 100
});

// Create a sprite with specific anchor points
const anchoredSprite = new Sprite({
    texture: Texture.from('corner.png'),
    anchor: {
        x: 1,  // Right-aligned
        y: 0   // Top-aligned
    }
});
```

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

### Configure BlurFilter settings

Source: https://pixijs.com/llms-full.txt

Examples for configuring blur strength, quality, and kernel size.

```ts
// Basic blur with default values
const filter = new BlurFilter();

// Custom blur configuration
const filter = new BlurFilter({
    strength: 8,        // Overall blur strength
    quality: 4,         // Higher quality = better blur
    kernelSize: 5      // Size of blur kernel
});

// Different horizontal/vertical blur
const filter = new BlurFilter({
    strengthX: 4,      // Horizontal blur only
    strengthY: 12,     // Stronger vertical blur
    quality: 2         // Lower quality for better performance
});
```

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

### Create Shader for WebGL and WebGPU

Source: https://pixijs.com/llms-full.txt

Examples showing the transition from the old Shader.from method to the new resource-based approach supporting both WebGL and WebGPU.

```ts
const shader = PIXI.Shader.from(vertex, fragment, uniforms);
```

```ts
const shader = Shader.from({
  gl: { vertex, fragment },
  resources, // resource used from above including uniform groups
});
```

```ts
const shader = Shader.from({
  gl: { vertex, fragment },
  gpu: {
    vertex: {
      entryPoint: 'mainVert',
      source,
    },
    fragment: {
      entryPoint: 'mainFrag',
      source,
    },
  },
  resources, // resource used from above including uniform groups
});
```

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

### BitmapFontManager.install(options)

Source: https://pixijs.com/llms-full.txt

Generates and installs a bitmap font based on the provided style and configuration options.

```APIDOC
## BitmapFontManager.install(options)

### Description
Generates a bitmap-font for the given style and character set. This method allows you to define a font name, style, and dynamic fill settings.

### Parameters
- **options** (BitmapFontInstallOptions) - Required - Setup options for font generation including name, style, and dynamicFill settings.

### Example
```ts
import { BitmapFontManager, BitmapText } from 'pixi.js';

BitmapFontManager.install({
    name: 'TitleFont',
    style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fill: 'purple'
    }
});

const title = new BitmapText({ text: 'This is the title', fontFamily: 'TitleFont' });
```
```

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

### Defining SplitText options

Source: https://pixijs.com/llms-full.txt

Configuration examples for initializing SplitText with basic and advanced settings.

```typescript
const options: SplitTextOptions = {
  text: 'Hello World',
  style: { fontSize: 32, fill: 0xffffff },
  // Transform origins
  lineAnchor: 0.5,                // Center each line
  wordAnchor: { x: 0, y: 0.5 },  // Left-center each word
  charAnchor: { x: 0.5, y: 1 },  // Bottom-center each char
};
```

```typescript
const options: SplitTextOptions = {
  // Text content and style
  text: 'Multi\nLine Text',
  style: new TextStyle({
    fontSize: 24,
    fill: 'white',
    strokeThickness: 2,
  }),

  // Container properties
  x: 100,
  y: 100,
  alpha: 0.8,

  // Splitting settings
  autoSplit: true,

  // Transform origins (normalized 0-1)
  lineAnchor: { x: 1, y: 0 },    // Top-right
  wordAnchor: 0.5,               // Center
  charAnchor: { x: 0, y: 1 },    // Bottom-left
};
```

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

### Add PixiJS to an existing project

Source: https://pixijs.com/llms-full.txt

Install the PixiJS package into an existing JavaScript project.

```bash
npm install pixi.js
```

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

### Control Application Lifecycle

Source: https://pixijs.com/llms-full.txt

Methods to start and stop the application render loop.

```ts
// Stop the application
app.stop();
// ... custom update logic ...
app.render(); // Manual render
```

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

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

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

### Initialize Color with Various Formats

Source: https://pixijs.com/llms-full.txt

Examples of initializing the Color class using different input formats such as strings, arrays, and objects.

```js
new Color('rgba(100% 0% 0% / 50%)');

// Arrays (normalized 0-1)
new Color([1, 0, 0]);           // RGB
new Color([1, 0, 0, 0.5]);      // RGBA
new Color(new Float32Array([1, 0, 0, 0.5]));

// Arrays (0-255)
new Color(new Uint8Array([255, 0, 0]));
new Color(new Uint8ClampedArray([255, 0, 0, 128]));

// HSL/HSLA
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%)');

// HSV/HSVA
new Color({ h: 0, s: 100, v: 100 });
new Color({ h: 0, s: 100, v: 100, a: 0.5 });
```

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

### Create and Manage BitmapFont

Source: https://pixijs.com/llms-full.txt

Demonstrates initializing a BitmapFont from raw data, installing it globally, and removing it from the cache.

```ts
import { BitmapFont, Texture } from 'pixi.js';

// Create a bitmap font from loaded textures and data
const font = new BitmapFont({
    data: {
        pages: [{ id: 0, file: 'font.png' }],
        chars: {
            'A': {
                id: 65,
                page: 0,
                x: 0,
                y: 0,
                width: 32,
                height: 32,
                xOffset: 0,
                yOffset: 0,
                xAdvance: 32,
                letter: 'A'
            }
        },
        fontSize: 32,
        lineHeight: 36,
        baseLineOffset: 26,
        fontFamily: 'MyFont',
        distanceField: {
            type: 'msdf',
            range: 4
        }
    },
    textures: [Texture.from('font.png')]
});

// Install a font for global use
BitmapFont.install({
    name: 'MyCustomFont',
    style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: '#ffffff',
        stroke: { color: '#000000', width: 2 }
    }
});

// Uninstall when no longer needed
BitmapFont.uninstall('MyCustomFont');
```

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

### Create NineSliceSprite Instance

Source: https://pixijs.com/llms-full.txt

Example of initializing a NineSliceSprite with specific dimensions and border settings.

```ts
import { NineSliceSprite, Texture } from 'pixi.js';

const plane9 = new NineSliceSprite({
  texture: Texture.from('BoxWithRoundedCorners.png'),
  leftWidth: 15,
  topHeight: 15,
  rightWidth: 15,
  bottomHeight: 15,
  width: 200,
  height: 100,
});
```

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

### BitmapFont.install

Source: https://pixijs.com/llms-full.txt

Generates and installs a bitmap font with the specified options, making it available for use in BitmapText objects.

```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) - Required - Setup options for font generation including name, style, and character ranges.

### Returns
- **void**
```

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

### Configure Drop Shadow Properties

Source: https://pixijs.com/llms-full.txt

Individual property configuration examples for drop shadow components.

```ts
// Set drop shadow opacity to 50%
dropShadow: {
   alpha: 0.5
}
```

```ts
// Set drop shadow angle to 30 degrees
dropShadow: {
   angle: Math.PI / 6 // 30 degrees
}
```

```ts
// Set drop shadow blur radius to 10 pixels
dropShadow: {
  blur: 10
}
```

```ts
// Set drop shadow distance to 5 pixels
dropShadow: {
  distance: 5
}
```

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

### beginPath()

Source: https://pixijs.com/llms-full.txt

Resets the current path, discarding previous commands to start a new shape.

```APIDOC
## beginPath()

### Description
Resets the current path. Any previous path and its commands are discarded and a new path is started.
```

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

### Define FillStyle Configurations

Source: https://pixijs.com/llms-full.txt

Examples of configuring FillStyle objects for basic colors, textures, and gradients.

```ts
// Basic color fill
const fillStyle = {
    color: 0xff0000,  // Red
    alpha: 0.5        // 50% opacity
};

// Textured fill ( Graphics only )
const fillStyle = {
    texture: Texture.from('myImage.png'),
    matrix: new Matrix().scale(0.5, 0.5),
};

// Gradient fill
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   stops: [
       { color: 0xff0000, offset: 0 }, // Red at start
       { color: 0x0000ff, offset: 1 }, // Blue at end
   ]
})

const fillStyle = {
    fill: gradient,
    alpha: 1
};
```

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

### Configure TickerPlugin Options

Source: https://pixijs.com/llms-full.txt

Setup animation loops using dedicated or shared tickers.

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

// Basic setup with default options
const app = new Application();
await app.init({
    autoStart: true,     // Start animation loop automatically
    sharedTicker: false  // Use dedicated ticker instance
});

// Advanced setup with shared ticker
const app2 = new Application();
await app2.init({
    autoStart: false,    // Don't start automatically
    sharedTicker: true   // Use global shared ticker
});

// Start animation when ready
app2.start();
```

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

### Configure NineSliceSprite Borders

Source: https://pixijs.com/llms-full.txt

Examples for setting individual border widths and heights for the NineSliceSprite.

```ts
const sprite = new NineSliceSprite({ ..., leftWidth: 20 });
sprite.leftWidth = 20; // Set left border width
```

```ts
const sprite = new NineSliceSprite({ ..., topHeight: 20 });
sprite.topHeight = 20; // Set top border height
```

```ts
const sprite = new NineSliceSprite({ ..., rightWidth: 20 });
sprite.rightWidth = 20; // Set right border width
```

```ts
const sprite = new NineSliceSprite({ ..., bottomHeight: 20 });
sprite.bottomHeight = 20; // Set bottom border height
```

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

### Load and Use Textures

Source: https://pixijs.com/llms-full.txt

Examples of loading textures using the Assets class and applying them to Sprites.

```javascript

const texture = await Assets.load('assets/image.png');

// once Assets has loaded the image it will be available via the from method
const sameTexture = Texture.from('assets/image.png');
// another way to access the texture once loaded
const sameAgainTexture = Assets.get('assets/image.png');

const sprite1 = new Sprite(texture);

```

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

const texture = await Assets.load('assets/image.png');
const sprite1 = new Sprite(texture);
const sprite2 = new Sprite(texture);
```

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

### Initialize Application with options

Source: https://pixijs.com/llms-full.txt

Configure application behavior, rendering, and performance settings using the init method.

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

const app = new Application();

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

   // Performance options
   autoStart: true,              // Auto-starts the render loop
   sharedTicker: true,           // Use shared ticker for better performance

   // Automatic resize options
   resizeTo: window,             // Auto-resize to window
   autoDensity: true,           // Adjust for device pixel ratio

   // Advanced options
   preference: 'webgl',         // Renderer preference ('webgl', 'webgpu', 'canvas', or an array)
   powerPreference: 'high-performance' // GPU power preference
});
```

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

### Configure RenderLayer Options

Source: https://pixijs.com/llms-full.txt

Examples of initializing a RenderLayer with automatic sorting or custom sort functions, and attaching objects to the layer.

```ts
// 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);
container.addChild(sprite);      // Add to scene graph
layer.attach(sprite);            // Add to render layer

// Manual sorting when needed
const manualLayer = new RenderLayer({
    sortableChildren: false
});
manualLayer.attach(sprite1, sprite2);
manualLayer.sortRenderLayerChildren(); // Sort manually
```

```ts
const layer = new RenderLayer({
    sortableChildren: true // Automatically sorts children by zIndex
});
```

```ts
const layer = new RenderLayer({
    sortFunction: (a, b) => {
        // Sort by y position
        return a.position.y - b.position.y;
    }
});
```

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

### Application.init(options)

Source: https://pixijs.com/llms-full.txt

Initializes the PixiJS application with the provided configuration options.

```APIDOC
## Application.init(options)

### Description
Initializes the PixiJS application instance asynchronously. This method sets up the renderer and ticker based on the provided configuration.

### Parameters
#### Options
- **autoStart** (boolean) - Optional - Whether to start rendering immediately after initialization.
- **resizeTo** (Window | HTMLElement) - Optional - Element to auto-resize the renderer to match.
- **sharedTicker** (boolean) - Optional - Use the shared ticker instance if true.
- **preference** ('webgl' | 'webgpu') - Optional - Preferred renderer type.
- **useBackBuffer** (boolean) - Optional - (WebGL only) Use the back buffer when required.
- **forceFallbackAdapter** (boolean) - Optional - (WebGPU only) Force usage of fallback adapter.
- **powerPreference** ('high-performance' | 'low-power') - Optional - Hint for GPU power preference.
- **antialias** (boolean) - Optional - Enables anti-aliasing.
- **autoDensity** (boolean) - Optional - Adjusts canvas size based on resolution.
- **background** (ColorSource) - Optional - Alias for backgroundColor.
- **backgroundAlpha** (number) - Optional - Alpha transparency for background.
- **backgroundColor** (ColorSource) - Optional - Color used to clear the canvas.
- **canvas** (ICanvas) - Optional - A custom canvas instance.
- **clearBeforeRender** (boolean) - Optional - Whether the renderer should clear the canvas each frame.
- **context** (WebGL2RenderingContext | null) - Optional - User-supplied rendering context.
- **depth** (boolean) - Optional - Enable a depth buffer in the main view.
- **height** (number) - Optional - Initial height of the renderer.
```

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

### SplitBitmapText Configuration Options

Source: https://pixijs.com/llms-full.txt

Examples of configuring SplitBitmapText using basic and advanced options for text splitting and transformation origins.

```ts
const options: SplitBitmapTextOptions = {
  text: 'Hello World',
  style: { fontSize: 32, fill: 0xffffff },
  // Transform origins
  lineAnchor: 0.5,                // Center each line
  wordAnchor: { x: 0, y: 0.5 },  // Left-center each word
  charAnchor: { x: 0.5, y: 1 },  // Bottom-center each char
};
```

```ts
const options: SplitBitmapTextOptions = {
  // Text content and style
  text: 'Multi\nLine Text',
  style: new TextStyle({
    fontSize: 24,
    fill: 'white',
    strokeThickness: 2,
  }),

  // Container properties
  x: 100,
  y: 100,
  alpha: 0.8,

  // Splitting settings
  autoSplit: true,

  // Transform origins (normalized 0-1)
  lineAnchor: { x: 1, y: 0 },    // Top-right
  wordAnchor: 0.5,               // Center
  charAnchor: { x: 0, y: 1 },    // Bottom-left
};
```

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

### Start Ticker

Source: https://pixijs.com/llms-full.txt

Manually start the ticker to begin requesting animation frames.

```ts
// Basic manual start
const ticker = new Ticker();
ticker.add(() => {
    // Animation code here
});
ticker.start();
```

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

### Initialize and configure BitmapText

Source: https://pixijs.com/llms-full.txt

Demonstrates dynamic font generation, pre-installed font usage, loading external fonts, and word wrapping.

```ts
import { BitmapText, BitmapFont } from 'pixi.js';

// Dynamic font generation
const dynamicText = new BitmapText({
    text: 'Hello Pixi!',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        fill: 0xff1010,
        align: 'center',
    }
});

// Pre-installed font usage
BitmapFont.install({
   name: 'myFont',
   style: {
       fontFamily: 'Arial',
   }
});

const preinstalledText = new BitmapText({
    text: 'Hello Pixi!',
    style: {
       fontFamily: 'myFont',
       fontSize: 24,
       fill: 0xff1010,
       align: 'center',
    }
});

// Load and use external bitmap font, if the font supports MSDF/SDF then it will be used
const font = await Assets.load('fonts/myFont.fnt');

const loadedFontText = new BitmapText({
    text: 'Hello Pixi!',
    style: {
       fontFamily: 'myLoadedFont', // Name from .fnt file
       fontSize: 24,
       fill: 0xff1010,
       align: 'center',
    }
});

// Multiline text with word wrap
const wrappedText = new BitmapText({
    text: 'This is a long text that will wrap automatically',
    style: {
        fontFamily: 'Arial',
        fontSize: 24,
        wordWrap: true,
        wordWrapWidth: 200,
    }
});
```

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

### Configure HTMLText styles

Source: https://pixijs.com/llms-full.txt

Examples of basic HTMLText initialization and applying custom tag styles for HTML elements.

```typescript
// Basic HTML text style
const text = new HTMLText({
    text: '<p>Hello World</p>',
    style: {
        fontSize: 24,
        fill: '#ff0000',
        fontFamily: 'Arial',
        align: 'center'
    }
});

// Custom tag styling
const taggedText = new HTMLText({
    text: '<custom>Custom Tag</custom>',
    style: {
        fontSize: 16,
        tagStyles: {
            custom: {
                fontSize: 32,
                fill: '#00ff00',
                fontStyle: 'italic'
            }
        }
    }
});
```

```typescript
const text = new HTMLText({
    text: `
        <red>Main Title</red>
        <grey>The subtitle</grey>
        <blue>Regular content text</blue>
    `,
    style: {
        tagStyles: {
            red: {
                fill: '#ff0000',
            },
            grey: {
                fill: '#666666',
            },
            blue: {
                fill: '#0000ff',
            }
        }
    }
});
```

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

### Initializing and Using Color Instances

Source: https://pixijs.com/llms-full.txt

Demonstrates creating Color objects from various formats and applying them to sprite tints.

```ts
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
```

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

### Implement Basic cacheAsTexture

Source: https://pixijs.com/llms-full.txt

Example of initializing a PixiJS application and caching a container of sprites as a single texture.

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

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

  // Initialize the application
  await app.init({ background: '#1099bb', resizeTo: window });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  // load sprite sheet..
  await Assets.load('https://pixijs.com/assets/spritesheet/monsters.json');

  // holder to store aliens
  const aliens = [];
  const alienFrames = [
    'eggHead.png',
    'flowerTop.png',
    'helmlok.png',
    'skully.png',
  ];

  let count = 0;

  // create an empty container
  const alienContainer = new Container();

  alienContainer.x = 400;
  alienContainer.y = 300;

  app.stage.addChild(alienContainer);

  // add a bunch of aliens with textures from image paths
  for (let i = 0; i < 100; i++) {
    const frameName = alienFrames[i % 4];

    // create an alien using the frame name..
    const alien = Sprite.from(frameName);

    alien.tint = Math.random() * 0xffffff;

    alien.x = Math.random() * 800 - 400;
    alien.y = Math.random() * 600 - 300;
    alien.anchor.x = 0.5;
    alien.anchor.y = 0.5;
    aliens.push(alien);
    alienContainer.addChild(alien);
  }

  // this will cache the container and its children as a single texture
  // so instead of drawing 100 sprites, it will draw a single texture!
  alienContainer.cacheAsTexture();
})();
```

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

### Initialize Application with Renderer Options

Source: https://pixijs.com/llms-full.txt

Demonstrates initializing a PixiJS application with specific dimensions, background color, and renderer-specific overrides for WebGL and WebGPU.

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

const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  webgl: {
    antialias: true,
  },
  webgpu: {
    antialias: false,
  },
});
document.body.appendChild(app.canvas);
```

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

### Initialize Container with Options

Source: https://pixijs.com/llms-full.txt

Configure a new container instance with specific position, scale, and rotation properties.

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

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

### Detect mobile device and platform

Source: https://pixijs.com/llms-full.txt

Comprehensive example showing how to check specific device types and categories for responsive design.

```ts
import { isMobile } from 'pixi.js';

// Check specific device types
if (isMobile.apple.tablet) {
   console.log('Running on iPad');
}

// Check platform categories
if (isMobile.android.any) {
   console.log('Running on Android');
}

// Conditional rendering
if (isMobile.phone) {
   renderer.resolution = 2;
   view.style.width = '100vw';
}
```

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

### AnimatedSprite.play()

Source: https://pixijs.com/llms-full.txt

Starts or resumes the animation playback from the current frame.

```APIDOC
## play()

### Description
Starts or resumes the animation playback. If the animation was previously stopped, it will continue from where it left off.

### Signature
`play(): void`
```

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

### Application.init

Source: https://pixijs.com/llms-full.txt

Initializes the PixiJS application with optional configuration settings.

```APIDOC
## init(options?: Partial<ApplicationOptions>): Promise<void>

### Description
Initializes the application. This method is asynchronous and should be awaited.

### Parameters
- **options** (Partial<ApplicationOptions>) - Optional - Configuration object for the application (e.g., width, height, backgroundColor, preference).
```

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

### Integrate PixiJS and Three.js

Source: https://pixijs.com/llms-full.txt

A complete example showing how to initialize both renderers with a shared WebGL context and manage the animation loop.

```ts
// dependencies: { "three": "latest", "pixi.js": "latest" }
// description: A basic integration of PixiJS and Three.js sharing the same WebGL context
// Import required classes from PixiJS and Three.js
import { Container, Graphics, Text, WebGLRenderer } from 'pixi.js';
import * as THREE from 'three';

// Self-executing async function to set up the demo
(async () => {
  // Initialize window dimensions
  let WIDTH = window.innerWidth;
  let HEIGHT = window.innerHeight;

  // === THREE.JS SETUP ===
  // Create Three.js WebGL renderer with antialiasing and stencil buffer
  const threeRenderer = new THREE.WebGLRenderer({
    antialias: true,
    stencil: true,
  });

  // Configure Three.js renderer size and background color
  threeRenderer.setSize(WIDTH, HEIGHT);
  threeRenderer.setClearColor(0xdddddd, 1); // Light gray background
  document.body.appendChild(threeRenderer.domElement);

  // Create Three.js scene
  const scene = new THREE.Scene();

  // Set up perspective camera with 70° FOV
  const threeCamera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);

  threeCamera.position.z = 50; // Move camera back to see the scene
  scene.add(threeCamera);

  // Create a simple cube mesh
  const boxGeometry = new THREE.BoxGeometry(30, 30, 30);
  const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd }); // Blue color
  const cube = new THREE.Mesh(boxGeometry, basicMaterial);

  scene.add(cube);

  // === PIXI.JS SETUP ===
  // Create PixiJS renderer that shares the WebGL context with Three.js
  const pixiRenderer = new WebGLRenderer();

  // Initialize PixiJS renderer with shared context
  await pixiRenderer.init({
    context: threeRenderer.getContext(),
    width: WIDTH,
    height: HEIGHT,
    clearBeforeRender: false, // Don't clear the canvas as Three.js will handle that
  });

  // Create PixiJS scene graph
  const stage = new Container();

  // Create a yellow rounded rectangle UI element
  const uiLayer = new Graphics().roundRect(20, 80, 300, 300, 20).fill(0xffff00);

  // Add text overlay
  const text = new Text({
    text: 'Pixi and Three.js',
    style: { fontFamily: 'Arial', fontSize: 24, fill: 'black' },
  });

  uiLayer.addChild(text);
  stage.addChild(uiLayer);

  // Animation loop
  function loop() {
    // Rotate cube continuously
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // Animate UI layer position using sine wave
    uiLayer.y = ((Math.sin(Date.now() * 0.001) + 1) * 0.5 * WIDTH) / 2;

    // Render Three.js scene
    threeRenderer.resetState();
    threeRenderer.render(scene, threeCamera);

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

    // Continue animation loop
    requestAnimationFrame(loop);
  }

  // Start animation loop
  requestAnimationFrame(loop);

  // Handle window resizing
  window.addEventListener('resize', () => {
    WIDTH = window.innerWidth;
    HEIGHT = window.innerHeight;

    // Update Three.js renderer
    threeRenderer.setSize(WIDTH, HEIGHT);
    // Update Three.js camera aspect ratio so it renders correctly
    threeCamera.aspect = WIDTH / HEIGHT;
    threeCamera.updateProjectionMatrix();

    // Update PixiJS renderer
    pixiRenderer.resize(WIDTH, HEIGHT);
  });
})();
```

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

### Initialize application and load assets

Source: https://pixijs.com/llms-full.txt

Demonstrates initializing the PixiJS application and loading single or multiple assets.

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

const app = new Application();
// Application must be initialized before loading assets
await app.init({ backgroundColor: 0x1099bb });

// Load a single asset
const bunnyTexture = await Assets.load('path/to/bunny.png');
const sprite = new Sprite(bunnyTexture);

// Load multiple assets at once
const textures = await Assets.load(['path/to/bunny.png', 'path/to/cat.png']);
const bunnySprite = new Sprite(textures['path/to/bunny.png']);
const catSprite = new Sprite(textures['path/to/cat.png']);
```

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

### Configure FillPatternOptions for various tiling modes

Source: https://pixijs.com/llms-full.txt

Examples of initializing FillPattern with different repetition modes and texture spaces.

```ts
// Tiled background — repeats continuously across world space, so adjacent
// shapes share the same tiling grid.
const bricks = new FillPattern({
    texture: await Assets.load('bricks.png'),
    repetition: 'repeat',
});

// One tile fitted to each shape — useful for shape-fitted decoration.
const fitted = new FillPattern({
    texture: await Assets.load('bunny.png'),
    repetition: 'repeat',
    textureSpace: 'local',
});

// Tile only along the x-axis; clamp vertically.
const stripes = new FillPattern({
    texture: await Assets.load('stripe.png'),
    repetition: 'repeat-x',
});

// Single image, no tiling — clamp on both axes.
const logo = new FillPattern({
    texture: await Assets.load('logo.png'),
    repetition: 'no-repeat',
});
```

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

### Initialize Assets with a manifest

Source: https://pixijs.com/llms-full.txt

Configure the Assets system using either a manifest object or a URL to a JSON manifest file.

```ts
// Using a manifest object
await Assets.init({
    manifest: {
        bundles: [{
            name: 'game-screen',
            assets: [
                {
                    alias: 'hero',
                    src: 'hero.{png,webp}'
                },
                {
                    alias: 'map',
                    src: 'map.json'
                }
            ]
        }]
    }
});

// Using a URL to manifest
await Assets.init({
    manifest: 'assets/manifest.json'
});

// loading a bundle from the manifest
await Assets.loadBundle('game-screen');

// load individual assets from the manifest
const heroTexture = await Assets.load('hero');
```

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

### Get Polygon Bounds

Source: https://pixijs.com/llms-full.txt

Calculate the framing rectangle of the polygon.

```ts
// Basic bounds calculation
const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
const bounds = polygon.getBounds();
// bounds: x=0, y=0, width=100, height=100

// Reuse existing rectangle
const rect = new Rectangle();
polygon.getBounds(rect);
```

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

### Getting Bounding Box

Source: https://pixijs.com/llms-full.txt

Retrieve the framing rectangle of the circle.

```ts
// Basic bounds calculation
const circle = new Circle(100, 100, 50);
const bounds = circle.getBounds();
// bounds: x=50, y=50, width=100, height=100

// Reuse existing rectangle
const rect = new Rectangle();
circle.getBounds(rect);
```

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

### Assets.init(options)

Source: https://pixijs.com/llms-full.txt

Initializes the asset system with custom configuration options.

```APIDOC
## Assets.init(options)

### Description
Configures global asset loading behavior, such as base paths and manifests.

### Parameters
- **options** (Object) - Required - Configuration object.
  - **basePath** (string) - Optional - Prefix for relative paths.
  - **defaultSearchParams** (string) - Optional - Default URL parameters.
  - **skipDetections** (boolean) - Optional - Skip environment detection.
  - **manifest** (Manifest) - Optional - Asset bundle descriptor.
  - **preferences** (AssetPreferences) - Optional - Loader preferences.

### Example
```ts
await Assets.init({ basePath: 'https://cdn.example.com/' });
```
```