### Initialize and start the game

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

A complete example showing how to initialize the game, configure navigation, and start the game loop.

```ts
// src/main.ts
import { Game } from "@drincs/pixi-vn";

const body = document.body;
if (!body) {
  throw new Error("body element not found");
}

await Game.init(body, {
  width: 1920,
  height: 1080,
  backgroundColor: "#303030",
  resizeMode: "contain",
  navigate: (path) => {
    // e.g. window.history.pushState({}, "", path)
  },
});

Game.onEnd(async (props) => {
  Game.clear();
  props.navigate("/end");
});

Game.addOnError((error, props) => {
  console.error("Error occurred", error);
});

await Game.start("start", {});
```

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

### start()

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/MediaInterface

Plays the buffer at the given start time.

```APIDOC
## start(time?, offset?, duration?)

### Description
Play the buffer at the given startTime. Optionally add an offset and/or duration which will play the buffer from a position within the buffer for the given duration.

### Parameters
- **time** (Time) - Optional - When the player should start.
- **offset** (Time) - Optional - The offset from the beginning of the sample to start at.
- **duration** (Time) - Optional - How long the sample should play.

### Returns
- **this** (this) - The current instance.
```

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

### start()

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/TickerBase

Starts the ticker and begins the animation.

```APIDOC
## start()

### Description
Starts the ticker. This will start the ticker and begin the animation.
```

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

### start<T>(label, props)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/Game/functions/start

Starts the game from a specific label, clearing previous game data.

```APIDOC
## start<T>(label, props)

### Description
Starts the game with a specified label. This function clears all existing game data and begins the narration from the provided label.

### Signature
`start<T>(label: string | LabelAbstract<any, T, number>, props: StepLabelPropsType<T>): Promise<StepLabelResultType>`

### Parameters
- **label** (string | LabelAbstract) - Required - The label to start the game with. Can be a string ID or a LabelAbstract instance.
- **props** (StepLabelPropsType<T>) - Required - The properties to pass to the label during execution.

### Returns
- **Promise<StepLabelResultType>** - A promise that resolves to the result of the label execution.
```

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

### Install Agent Skills

Source: https://github.com/drincs-productions/pixi-vn/blob/main/README.md

Command to install Pixi'VN agent skills for AI coding assistants.

```npm
npx skills add DRincs-Productions/pixi-vn
```

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

### play()

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Starts playback of the video.

```APIDOC
## play()

### Description
Play the video.

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

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

### Execute a label with narration.call

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/NarrationManagerInterface

Use these examples to execute a label and handle the resulting promise. The second example demonstrates returning the result when used within a step label.

```ts
narration.call(startLabel, yourParams).then((result) => {
    if (result) {
        // your code
    }
})
```

```ts
// if you use it in a step label you should return the result.
return narration.call(startLabel).then((result) => {
    return result
})
```

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

### onStepStart(value)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/Game/functions/onStepStart

Registers a callback function to be executed before any step in the game starts.

```APIDOC
## onStepStart(value)

### Description
Registers a callback function that will be executed before any step is executed in the game.

### Signature
`onStepStart(value: (stepId: string, label: string) => void | Promise<void>): void`

### Parameters
- **value** ((stepId, label) => void | Promise<void>) - Required - A callback function that receives the current stepId and label, and returns void or a Promise that resolves to void.
```

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

### Start the Ticker

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TickerValue

Manually start the ticker. If listeners are attached, this will request a new animation frame, initiating the update loop.

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

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

### Configure Container origin

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ContainerMemory

Examples of initializing a Container with different origin point configurations.

```ts
new Container({ origin: new Point(100, 100) }); // Rotate around point (100,100)
new Container({ origin: 50 }); // Rotate around point (50, 50)
new Container({ origin: { x: 150, y: 150 } }); // Rotate around point (150, 150)
```

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

### autoStart

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TickerValue

Determines if the ticker should automatically start when a listener is added. Defaults to false.

```APIDOC
## autoStart

### Description
Whether or not this ticker should invoke the method [start](#start) automatically when a listener is added.

### Properties
- **autoStart** (boolean) - Whether to auto-start the ticker.

### Example
```ts
// Default behavior (manual start)
const ticker = new Ticker();
ticker.autoStart = false;
ticker.add(() => {
    // Won't run until ticker.start() is called
});

// Auto-start behavior
const autoTicker = new Ticker();
autoTicker.autoStart = true;
autoTicker.add(() => {
    // Runs immediately when added
});
```

### Default
```ts
false
```

### See
- [Ticker#start](#start) For manually starting the ticker
- [Ticker#stop](#stop) For manually stopping the ticker
```

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

### GET /__pixi-vn/assets/manifest

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite/variables/PIXIVN_DEV_API_ASSETS_MANIFEST

Retrieves the current assets manifest.

```APIDOC
## GET /__pixi-vn/assets/manifest

### Description
Retrieves the current assets manifest.

### Method
GET

### Endpoint
/__pixi-vn/assets/manifest
```

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

### Install Pixi'VN package

Source: https://github.com/drincs-productions/pixi-vn/blob/main/README.md

Use this command to add the Pixi'VN package to an existing JavaScript project.

```npm
npm install @drincs/pixi-vn
```

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

### set default(value)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/StorageManagerInterface

Sets the starting storage configuration used when the game begins.

```APIDOC
## set default(value)

### Description
Sets the starting storage. The starting storage that will be used when the game starts. If variables are defined inside it, they can be edited during the game, but if you delete them, they will be restored to the starting storage.

### Parameters
- **value** (any) - Required - The starting storage object.
```

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

### Basic Resolved Asset Example

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ResolvedAsset

Demonstrates the basic structure of a ResolvedAsset with an alias, source, and format.

```typescript
const asset: ResolvedAsset = {
    alias: ['hero'],
    src: 'hero.png',
    format: 'png'
};
```

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

### Migrate Game Initialization

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/migration/SKILL.md

Replace manual clear and narration calls with the recommended Game.start entry point.

```ts
Game.clear(); // [!code --]
narration.call("start", gameProps); // [!code --]
Game.start("start", gameProps); // [!code ++]
```

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

### Checking Ticker Start State

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TickerValue

Determine if the ticker has been started by checking the 'started' boolean property. This reflects whether the start() method has been called or if autoStart initiated the process.

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

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

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

### Implement fade-in and fade-out transitions

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/sound/SKILL.md

Configures automatic volume transitions during playback start and stop.

```ts
const music = await sound.play("theme-song", {
  channel: "music",
  loop: true,
  fadeIn: 2, // 2s fade-in on start
  fadeOut: 3, // 3s fade-out, applied on both natural end and manual stop()
});

sound.stop("theme-song"); // fades out over the 3s configured above, instead of cutting off
```

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

### started

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TickerValue

Indicates whether the ticker has been started or stopped.

```APIDOC
## started

### Description
Whether or not this ticker has been started. `true` if [start](#start) has been called. `false` if [Stop](#stop) has been called.

While `false`, this value may change to `true` in the event of [autoStart](#autostart) being `true` and a listener is added.

### Properties
- **started** (boolean) - Whether the ticker is currently started.

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

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

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

### Initialize a new Pixi'VN project

Source: https://github.com/drincs-productions/pixi-vn/blob/main/README.md

Use this command to scaffold a new project using the latest Pixi'VN templates.

```npm
npm create pixi-vn@latest
```

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

### Initialize PixiJS Application with Standard Options

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Demonstrates how to initialize a PixiJS application using common configuration options. This includes settings for rendering dimensions, background color, antialiasing, resolution, performance, automatic resizing, and renderer preferences.

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

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

### Start game narration

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

Begins the game narration from a specific label after clearing existing data.

```ts
await Game.start("start", {});
```

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

### Application Initialization with AutoStart

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Demonstrates how to initialize a Pixi.js application with the autoStart option. The default behavior is to start automatically. Setting autoStart to false requires manual invocation of app.start().

```typescript
await app.init({ autoStart: true });
```

```typescript
await app.init({ autoStart: false });
app.start(); // Start when ready
```

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

### Basic Resolved Source Example

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ResolvedSrc

Demonstrates the basic structure of a ResolvedSrc object with a source path and format.

```typescript
const src: ResolvedSrc = {
    src: 'images/sprite.png',
    format: 'png'
};
```

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

### Handle touchstart events

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ContainerMemory

Demonstrates using both emitter-based and property-based handlers for the touchstart event on a Sprite.

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

```ts
null
```

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

### setupPixivnViteData()

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite-listener/functions/setupPixivnViteData

Initializes Pixi VN development tools by syncing game state with the Vite dev server. This function is intended for use during development and is a no-op in production.

```APIDOC
## setupPixivnViteData()

### Description
Initializes Pixi VN development tools by syncing game state with the Vite dev server. It sends the assets manifest and canvas options to the development environment.

### Signature
`setupPixivnViteData(): Promise<void>`

### Usage
Call this function after `RegisteredCharacters` and `RegisteredLabels` are populated, typically during client-side initialization.

### Example
```ts
import { setupPixivnViteData } from '@drincs/pixi-vn/vite-listener';

await Promise.all([import("@/content")]);
// After game setup
await setupPixivnViteData();
```
```

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

### init(element, options, devtoolsOptions?)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/Game/functions/init

Initializes the Game, PixiJS Application, and the interface div. This method must be called before any other method.

```APIDOC
## init(element, options, devtoolsOptions?)

### Description
Initializes the Game and PixiJS Application and the interface div. This method should be called before any other method.

### Parameters
- **element** (HTMLElement) - Required - The html element where the canvas will be placed.
- **options** (Partial<ApplicationOptions> & object) - Required - Configuration options for the PixiJS Application, including custom fields like 'id', 'navigate', and 'resizeMode'.
- **devtoolsOptions** (Devtools) - Optional - Configuration options for PixiJS Devtools.

### Returns
- **Promise<void>**
```

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

### Configure video playback with addVideo

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Shows how to use the addVideo helper function to set the initial playback time before loading.

```ts
let film = addVideo("film", 'https://pixijs.com/assets/video.mp4')
film.currentTime = 2
await film.load()
```

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

### Get Ticker Listener Count

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TickerValue

Demonstrates how to get the current number of active listeners attached to a Ticker instance. Shows the count before adding listeners, after adding listeners, and after destroying the ticker.

```typescript
const ticker = new Ticker();
console.log(ticker.count); // 0

// Add some listeners
ticker.add(() => {});
ticker.add(() => {});
console.log(ticker.count); // 2

// Check after cleanup
ticker.destroy();
console.log(ticker.count); // 0
```

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

### Initialize Game and Configure Layers

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

Initialize the game engine and set up UI layers, sound channels, and error handlers within the main entry point.

```tsx
Game.init(body, {
  id: HTML_CANVAS_LAYER_NAME,
  height: 1080,
  width: 1920,
  backgroundColor: "#303030",
  resizeMode: "contain",
}).then(() => {
  // A PixiJS-rendered layer for in-canvas UI elements
  canvas.layers.add(CANVAS_UI_LAYER_NAME, new Container());

  // One background music channel, one default channel for one-off sfx
  sound.channels.add(BGM_CHANNEL_NAME, { background: true });
  sound.channels.add(SFX_CHANNEL_NAME);
  sound.defaultChannelAlias = SFX_CHANNEL_NAME;

  // Mount a UI framework (React here) INSIDE the PixiJS canvas tree
  const root = document.getElementById("root")!;
  const htmlLayout = canvas.htmlLayers.add(HTML_UI_LAYER_NAME, root);
  if (!htmlLayout) throw new Error("htmlLayout not found");
  createRoot(htmlLayout).render(<App />);
});

Game.onEnd(async ({ navigate }) => {
  Game.clear();
  navigate({ to: "/" });
});

Game.addOnError(drawCanvasErrorHandler());
Game.addOnError((error, { toast, uiTransition }) => {
  toast?.error(uiTransition?.("allert_error_occurred"));
  console.error("Error occurred", error);
});

Game.onLoadingLabel((_stepId, { id }) => Assets.backgroundLoadBundle(id));
```

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

### Game.init(element, options, devtoolsOptions)

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

Initializes the Pixi'VN engine. Calling this with an element and options performs a full initialization including canvas creation, while calling it without arguments performs a headless initialization.

```APIDOC
## Game.init

### Description
Initializes the internal state manager and optionally sets up the PixiJS application and canvas interface.

### Signature
`async function init(element?: HTMLElement, options?: Partial<ApplicationOptions> & { id?: string, navigate?: (path: string) => void | Promise<void>, resizeMode?: "contain" | "none" }, devtoolsOptions?: Devtools): Promise<void>`

### Parameters
- **element** (HTMLElement) - Optional - The HTML element to attach the canvas to. If omitted, headless mode is used.
- **options** (Object) - Optional - Configuration for the PixiJS Application and Pixi'VN specific settings.
  - **id** (string) - Optional - ID of the generated canvas element (default: "pixi-vn-canvas").
  - **navigate** (Function) - Optional - Navigation function for the app router.
  - **resizeMode** (string) - Optional - "contain" or "none" (default: "contain").
- **devtoolsOptions** (Devtools) - Optional - Configuration for PixiJS Devtools integration.

### Example
```ts
await Game.init(document.body, {
  width: 1920,
  height: 1080,
  backgroundColor: "#303030",
  resizeMode: "contain"
});
```
```

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

### getInstance

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/RegisteredTickers/index

Gets the instance of RegisteredTickers.

```APIDOC
## getInstance

### Description
Gets the instance of RegisteredTickers.

### Parameters
(No parameters are explicitly documented in the source.)

### Request Example
(No request example is explicitly documented in the source.)

### Response
(No response details are explicitly documented in the source.)
```

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

### visible

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Get or set the visibility of the object.

```APIDOC
## Property: visible

### Description
The visibility of the object. If false the object will not be drawn, and the transform will not be updated.

### Signature
- **Get**: `visible(): boolean`
- **Set**: `visible(value: boolean): void`

### Default
true
```

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

### height

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Gets or sets the height of the sprite.

```APIDOC
## height

### Description
Gets or sets the height of the sprite. Setting this value modifies the scale to achieve the desired height while maintaining the aspect ratio.

### Parameters
- **value** (number) - The desired height.

### Returns
- **number** - The current height of the sprite.
```

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

### get

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/RegisteredTickers/index

Retrieves a ticker from the registered tickers.

```APIDOC
## get

### Description
Retrieves a ticker from the registered tickers.

### Parameters
(No parameters are explicitly documented in the source.)

### Request Example
(No request example is explicitly documented in the source.)

### Response
(No response details are explicitly documented in the source.)
```

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

### init(element, options?, devtoolsOptions?)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/CanvasManagerStatic

Initializes the canvas application.

```APIDOC
## init(element, options?, devtoolsOptions?)

### Description
Initializes the canvas application within the provided HTML element with optional configuration.

### Parameters
- **element** (HTMLElement) - Required - The container element for the canvas.
- **options** (Partial<ApplicationOptions> & object) - Optional - Configuration options for the application.
- **devtoolsOptions** (Devtools) - Optional - Configuration for devtools.

### Returns
- **Promise<void>** - A promise that resolves when initialization is complete.
```

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

### Configure Application Initialization with resizeTo

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Demonstrates how to set the `resizeTo` option during application initialization to control automatic resizing. It shows examples for resizing to the window, a specific DOM element, or disabling auto-resize.

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

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

### get

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/RegisteredEvents/index

Retrieves a registered event by its key.

```APIDOC
## get

### Description
Retrieves a registered event by its key.

### Method
(Not specified, likely a function call in a SDK)

### Parameters
(Not specified)

### Request Example
(Not specified)

### Response
(Not specified)
```

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

### ontouchstart

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasBaseInterface

Property-based event handler for the touchstart event, triggered when a touch begins.

```APIDOC
## ontouchstart

### Description
Fired when a touch interaction starts, such as when a finger touches the screen.

### Signature
`ontouchstart?: FederatedEventHandler<FederatedPointerEvent> | null`
```

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

### getInstance

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/RegisteredCanvasComponents/index

Gets the singleton instance of the RegisteredCanvasComponents.

```APIDOC
## getInstance

### Description
Gets the singleton instance of the RegisteredCanvasComponents.

### Method
getInstance(): RegisteredCanvasComponents
```

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

### Initialize and Load Assets

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/assets/SKILL.md

Register the manifest at startup and manage bundle loading using blocking or background methods.

```ts
import { manifest } from "@/assets";
import { Assets } from "@drincs/pixi-vn";

let assetsInitialized = false;
export async function defineAssets() {
  if (!assetsInitialized) {
    await Assets.init({ manifest });
    assetsInitialized = true;
  }
  await Assets.loadBundle("/"); // block on what the first screen needs
  Assets.backgroundLoadBundle("audio"); // load the rest quietly in the background
}
```

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

### get(key)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/StorageManagerInterface

Retrieves a variable from the storage.

```APIDOC
## get(key)

### Description
Get a variable from the storage. If the variable is a temporary variable, it will return the temporary variable.

### Parameters
- **key** (string) - Required - The key of the variable.

### Returns
- **T | undefined** - The value of the variable, or undefined if it does not exist.
```

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

### setupPixivnViteData

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite-listener/index

Sets up PixiVN specific data within the Vite environment.

```APIDOC
## setupPixivnViteData

### Description
Sets up PixiVN specific data within the Vite environment. This function is intended to be called during the Vite build or development process to ensure PixiVN data is correctly initialized.

### Usage
```typescript
setupPixivnViteData(): void
```
```

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

### loadIsStarted

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/ImageContainer

Checks if the loading process for the ImageContainer has started.

```APIDOC
## loadIsStarted

### Description
Returns the status of the loading process.

### Returns
- **boolean**
```

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

### Create and Configure a Sprite

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Sprite

Demonstrates loading a texture, creating a Sprite instance, setting basic properties, and adding it to the canvas.

```ts
const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const sprite = Sprite.from(texture);

sprite.anchor.set(0.5);
sprite.x = canvas.screen.width / 2;
sprite.y = canvas.screen.height / 2;

sprite.eventMode = 'static';
sprite.cursor = 'pointer';
sprite.onEvent('pointerdown', EventTest);

canvas.add("bunny", sprite);
```

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

### GET /__pixi-vn/labels

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite/variables/PIXIVN_DEV_API_LABELS

Retrieves the current narration labels.

```APIDOC
## GET /__pixi-vn/labels

### Description
Retrieves the current narration labels.

### Method
GET

### Endpoint
/__pixi-vn/labels
```

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

### hello

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Whether to log the version and type information of the renderer to the console.

```APIDOC
## hello

### Description
Whether to log the version and type information of the renderer to the console.

### Type
`boolean`

### Default
`false`
```

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

### GET /__pixi-vn/canvas-options

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite/variables/PIXIVN_DEV_API_CANVAS_OPTIONS

Retrieves the current canvas options.

```APIDOC
## GET /__pixi-vn/canvas-options

### Description
Retrieves the current canvas configuration options.

### Method
GET

### Endpoint
/__pixi-vn/canvas-options
```

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

### Import Sound Manager

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/sound/SKILL.md

The primary entry point for all audio operations in Pixi'VN.

```ts
import { sound } from "@drincs/pixi-vn";
```

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

### Initialize sound channels

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/sound/SKILL.md

Configure sound channels immediately after Game.init resolves, setting background properties and default aliases.

```ts
import { BGM_CHANNEL_NAME, SFX_CHANNEL_NAME } from "@/constants";
import { sound } from "@drincs/pixi-vn";

Game.init(body, options).then(() => {
  sound.channels.add(BGM_CHANNEL_NAME, { background: true }); // looping music
  sound.channels.add(SFX_CHANNEL_NAME); // one-shot effects
  sound.defaultChannelAlias = SFX_CHANNEL_NAME; // so play() calls needn't pass {channel: ...} every time
});
```

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

### texture

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Sprite

Gets or sets the texture displayed by the sprite.

```APIDOC
## texture

### Description
The texture that is displayed by the sprite. When changed, it automatically updates the sprite dimensions and manages texture event listeners.

### Signature
- **get**(): `Texture`
- **set**(`value`: `Texture`): `void`
```

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

### paused

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Gets or sets the paused state of the video.

```APIDOC
## paused

### Description
Gets or sets whether the video is currently paused.

### Signature
- **get paused()**: `boolean`
- **set paused(value: boolean)**: `void`
```

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

### positionType

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Sprite

Gets the current positioning type of the sprite.

```APIDOC
## positionType

### Description
Returns the current positioning mode of the sprite.

### Signature
- **get**: returns "pixel" | "percentage" | "align"
```

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

### Initialize Pixi'VN Engine

Source: https://github.com/drincs-productions/pixi-vn/blob/main/README.md

Initializes the game engine on the document body and sets up event listeners for game lifecycle events.

```ts
import { Game } from "@drincs/pixi-vn";

const body = document.body;
if (!body) {
  throw new Error("body element not found");
}

Game.init(body, {
  height: 1080,
  width: 1920,
  backgroundColor: "#303030",
}).then(() => {
  // ...
  Game.start("start", {});
});

// read more here: https://pixi-vn.com/start/other-narrative-features.html#how-manage-the-end-of-the-game
Game.onEnd(async (props) => {
  Game.clear();
  // navigate to main menu
});

Game.addOnError((error, props) => {
  console.error(`Error occurred`, error);
});

Game.onNavigate((path) => navigateTo(path));
```

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

### get

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/RegisteredCanvasComponents/index

Retrieves a registered canvas component by its name.

```APIDOC
## get

### Description
Retrieves a registered canvas component by its name.

### Method
get(name: string): CanvasComponent

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the component to retrieve.
```

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

### Set width and size

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Demonstrates setting width directly versus using setSize for performance optimization.

```ts
// Set width directly
texture.width = 200;
console.log(texture.scale.x); // Scale adjusted to match width

// For better performance when setting both width and height
texture.setSize(300, 400); // Avoids recalculating bounds twice
```

```ts
// Basic width setting
container.width = 100;
// Optimized width setting
container.setSize(100, 100);
```

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

### Configure Text Styles

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/TextMemory

Demonstrates how to apply different styles to Text, HTMLText, and BitmapText instances.

```ts
const text = new Text({
    text: 'Styled Text',
    style: {
        fontSize: 24,
        fill: 0xff1010, // Red color
        fontFamily: 'Arial',
        align: 'center', // Center alignment
        stroke: { color: '#4a1850', width: 5 }, // Purple stroke
        dropShadow: {
            color: '#000000', // Black shadow
            blur: 4, // Shadow blur
            distance: 6 // Shadow distance
        }
    }
});
const htmlText = new HTMLText({
    text: 'HTML Styled Text',
    style: {
        fontSize: '20px',
        fill: 'blue',
        fontFamily: 'Verdana',
    }
});
const bitmapText = new BitmapText({
    text: 'Bitmap Styled Text',
    style: {
        fontName: 'Arial',
        fontSize: 32,
    }
})
```

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

### positionType

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Container

Gets the current positioning type of the container.

```APIDOC
## positionType

### Description
Returns the positioning mode of the container.

### Signature
- **get**: `"pixel" | "percentage" | "align"`
```

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

### pixivnId

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Container

Get the unique identifier for the canvas element.

```APIDOC
## pixivnId

### Description
Get the id of the canvas element. This variable is used in the system to get the canvas element by id.

### Type
`string`
```

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

### rotation

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasBaseInterface

Gets or sets the rotation of the object in radians.

```APIDOC
## rotation

### Description
The rotation of the object in radians.

### Signature
- **get**: `number`
- **set**: `void` (value: `number`)

### Note
'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
```

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

### angle

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasBaseInterface

Gets or sets the angle of the object in degrees.

```APIDOC
## Property: angle

### Description
The angle of the object in degrees. Note that 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

### Type
`number`
```

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

### get(label)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasLayersInterface

Retrieves a layer from the canvas by its label.

```APIDOC
## get(label)

### Description
Get a layer from the canvas.

### Parameters
- **label** (string) - Required - The label of the layer.

### Returns
- **Layer | null** - The layer.

### Example
```ts
const uiLayer = canvas.layers.get("ui");
```
```

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

### Game.start

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

Clears all game data and begins narration from the specified label.

```APIDOC
## Game.start<T>(label, props)

### Description
Clears all game data using Game.clear() and begins narration from the given label.

### Parameters
- **label** (LabelIdType | LabelAbstract) - Required - The label to start from.
- **props** (T) - Required - Properties to pass to the label.

### Request Example
```ts
await Game.start("start", {});
```
```

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

### stopTransientAll()

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/SoundUnsavedInterface

Stops all transient media instances started with playTransient.

```APIDOC
## stopTransientAll()

### Description
Stop all transient media instances started with playTransient.
```

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

### vitePluginPixivn(options?)

Source: https://github.com/drincs-productions/pixi-vn/wiki/vite/functions/vitePluginPixivn

Initializes the Pixi-VN Vite plugin with optional configuration settings.

```APIDOC
## vitePluginPixivn(options?)

### Description
Initializes the Pixi-VN Vite plugin. This function accepts an optional configuration object to define content and type file paths.

### Parameters
- **options** (VitePluginPixivnOptions) - Optional - Configuration object for the plugin.

### Returns
- **Plugin** - A Vite plugin instance.

### Example
```ts
// vite.config.ts
import { defineConfig } from "vite";
import { vitePluginPixivn } from "@drincs/pixi-vn/vite";

export default defineConfig({
  plugins: [
    vitePluginPixivn({
      content: "./src/content/index.ts",
      typeFilePath: "./src/pixi-vn.gen.d.ts",
    }),
  ],
});
```
```

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

### rotation

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Gets or sets the rotation of the text object in radians.

```APIDOC
## rotation

### Description
The rotation of the object in radians.

### Signature
- **get**: returns `number`
- **set**: accepts `value: number`
```

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

### init(element, options, devtoolsOptions?)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasManagerInterface

Initializes the PixiJS Application and the interface div. This method must be called before any other canvas operations.

```APIDOC
## init(element, options, devtoolsOptions?)

### Description
Initialize the PixiJS Application and the interface div. This method should be called before any other method.

### Parameters
- **element** (HTMLElement) - Required - The html element where the canvas will be placed.
- **options** (Partial<ApplicationOptions> & object) - Required - The options for the PixiJS Application.
- **devtoolsOptions** (Devtools) - Optional - The options for the devtools.

### Example
```ts
const body = document.body;
await canvas.init(body, {
    width: 1920,
    height: 1080,
    backgroundColor: "#303030"
});
```
```

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

### positionType

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Gets the current positioning type of the text object.

```APIDOC
## positionType

### Description
Returns the positioning mode of the text object.

### Signature
- **get**: returns `"pixel" | "percentage" | "align"`
```

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

### Initialize and display a VideoSprite

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Demonstrates creating a new VideoSprite instance, loading it, and adding it to the canvas.

```ts
let film = new VideoSprite({
    x: 100,
    y: 100,
}, 'https://pixijs.com/assets/video.mp4')
await film.load()
canvas.add("film", film)
```

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

### currentTime

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/VideoSprite

Gets or sets the current playback time of the video.

```APIDOC
## Property: currentTime

### Description
The current playback time of the video in seconds.

### Type
number

### Usage
```ts
// Get current time
const time = videoSprite.currentTime;

// Set current time
videoSprite.currentTime = 10.5;
```
```

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

### skew

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/ImageSprite

Gets or sets the skew factor for the object in radians.

```APIDOC
## skew

### Description
The skew factor for the object in radians. Skewing is a transformation that distorts the object by rotating it differently at each point.

### Signature
- **get**(): ObservablePoint
- **set**(value: PointData): void
```

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

### GameUnifier.init(options)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/GameUnifier

Initializes the game engine with required callbacks for state management, variable handling, and navigation.

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

### Description
Initializes the game engine by providing necessary callback functions for character retrieval, variable management, flag handling, and navigation logic.

### Parameters
- **options** (object) - Required - Configuration object containing callbacks for game state operations (e.g., animate, getCharacter, getVariable, setFlag, etc.).
```

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

### y

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasBaseInterface

Gets or sets the y-axis position of the container relative to its parent.

```APIDOC
## Property: y

### Description
The position of the container on the y axis relative to the local coordinates of the parent. This is an alias to position.y.

### Usage
- **Get**: `container.y` (returns number)
- **Set**: `container.y = value` (value: number)

### Example
```ts
container.y = 200;
```
```

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

### resolution

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Gets or sets the resolution/device pixel ratio for text rendering.

```APIDOC
## resolution

### Description
The resolution/device pixel ratio for rendering. Higher values result in sharper text at the cost of performance.

### Signature
- **get**: returns `number`
- **set**: accepts `value: number`
```

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

### Mounting an HTML UI Layer

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/ui/SKILL.md

Demonstrates how to initialize an HTML layer on top of the PixiJS canvas and define the base HTML structure.

```ts
const root = document.getElementById("root");
if (!root) {
  throw new Error("root element not found");
}
const htmlLayer = canvas.htmlLayers.add("ui", root, {
  position: "absolute",
  pointerEvents: "none",
  userSelect: "none",
});
// createRoot(htmlLayer).render(<App />)
```

```html
<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

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

### percentagePosition

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Container

Get or set the position of the element in the canvas calculated in percentage.

```APIDOC
## percentagePosition

### Description
Sets or retrieves the position of the element in the canvas calculated in percentage. The position is relative to the canvas dimensions and is affected by the PixiContainer.pivot setting.

### Signature
- **Get**: `percentagePosition(): number | Partial<PointData>`
- **Set**: `percentagePosition(value: number | Partial<PointData>): void`

### Parameters
- **value** (number | Partial<PointData>) - The percentage position to set. Can be a single number or a partial PointData object.

### Returns
- (number | Partial<PointData>) - The current percentage position.
```

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

### x

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasBaseInterface

Gets or sets the x-axis position of the container relative to its parent.

```APIDOC
## Property: x

### Description
The position of the container on the x axis relative to the local coordinates of the parent. This is an alias to position.x.

### Usage
- **Get**: `container.x` (returns number)
- **Set**: `container.x = value` (value: number)

### Example
```ts
container.x = 100;
```
```

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

### Initialize and Add Text

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Create a new Text instance, set its content, and add it to the canvas.

```ts
const text = new Text();
text.text = "Hello World"
canvas.add("text", text);
```

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

### duration

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/SoundManagerInterface

Get the duration in seconds of the loaded sound with the given alias.

```APIDOC
## duration(alias)

### Description
Duration in seconds of the loaded sound with the given alias.

### Parameters
- **alias** (string) - Required - The alias of the sound.

### Returns
- **number** - The duration in seconds.
```

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

### ApplicationOptions

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Configuration options for the PixiJS Application.

```APIDOC
## ApplicationOptions

### Description

Configuration options for the PixiJS Application.

### Properties

#### antialias? (boolean)

Optional. Whether to enable anti-aliasing. This may affect performance.

#### autoDensity? (boolean)

Optional. Resizes renderer view in CSS pixels to allow for resolutions other than 1. This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

#### autoStart? (boolean)

Optional. Controls whether the animation loop starts automatically after initialization. Setting this to `false` does NOT stop the shared ticker even if `sharedTicker` is `true`. You must stop the shared ticker manually if needed.

**Default:** `true`

**Example:**
```ts
// Auto-start (default behavior)
await app.init({ autoStart: true });

// Manual start
await app.init({ autoStart: false });
app.start(); // Start when ready
```

#### background? (ColorSource)

Optional. Alias for `backgroundColor`.

#### backgroundAlpha? (number)

Optional. Transparency of the background color, value from `0` (fully transparent) to `1` (fully opaque). This value determines whether the canvas is initialized with alpha transparency support. Note: This cannot be changed after initialization. If set to `1`, the canvas will remain opaque, even if a transparent background color is set later.

**Default:** `1`

#### backgroundColor (ColorSource)

The background color used to clear the canvas. See ColorSource for accepted color values.

**Default:** `'black'`

#### bezierSmoothness (number)

A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother).

**Default:** `0.5`

#### canvas? (ICanvas)

Optional. The canvas to use as a view, optional.

#### canvasOptions? (Partial<CanvasOptions>)

Optional. Optional CanvasOptions to pass only to the Canvas renderer.

#### clearBeforeRender? (boolean)

Optional. Whether to clear the canvas before new render passes.

**Default:** `true`

#### context (WebGL2RenderingContext | null)

User-provided WebGL rendering context object.

**Default:** `null`

#### culler? (object)

Optional. Options for the culler behavior.

##### updateTransform? (boolean)

Optional. Update the transform of culled objects. Keeping this as `false` can improve performance by avoiding unnecessary calculations, however, the transform used for culling may not be up-to-date if the object has moved since the last render.

**Default:** `true`

**Example:**
```ts
const app = new Application();
await app.init({
    culler: {
        updateTransform: false // Skip updating transforms for culled objects
    }
});
```

**Example:**
```ts
// Basic culling options
const app = new Application();
await app.init({
    culler: {...}
});
```

```

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

### get(id)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasHtmlLayersInterface

Retrieves an existing HTML layer from the canvas by its ID.

```APIDOC
## get(id)

### Description
Retrieves a previously added HTML layer from the canvas using its unique ID.

### Parameters
- **id** (string) - Required - The unique identifier of the layer to retrieve.

### Returns
- **HTMLElement | undefined** - The requested HTML element, or undefined if no layer exists with that ID.
```

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

### Get a layer from the canvas

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/CanvasLayersInterface

Retrieves a previously added layer by its label.

```ts
const uiLayer = canvas.layers.get("ui");
```

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

### Configure Container Scale

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ContainerMemory

Demonstrates initializing a Container with different scale formats, including Point objects, numbers, and coordinate objects.

```ts
new Container({ scale: new Point(2, 2) }); // Scale by 2x
new Container({ scale: 0.5 }); // Scale by 0.5x
new Container({ scale: { x: 1.5, y: 1.5 } }); // Scale by 1.5x
```

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

### GameUnifier.stepCounter

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/GameUnifier

Gets or sets the total number of steps executed in the game.

```APIDOC
## GameUnifier.stepCounter

### Description
Gets or sets the total number of steps executed in the game.

### Signature
`static get stepCounter(): number`
`static set stepCounter(value: number): void`

### Throws
- Throws an error if `Game.init()` has not been called yet.
```

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

### init()

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/namespaces/Game/functions/init

Initializes only the GameUnifier without the PixiJS Application or interface div.

```APIDOC
## init()

### Description
Initialize only the GameUnifier, and not the PixiJS Application and the interface div. This method can be used if you want to use only the GameUnifier features, such as save/load game, without initializing the canvas.

### Returns
- **Promise<void>**
```

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

### Displaying images with showImage

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/functions/showImage

Demonstrates adding images using a direct URL or a pre-registered asset alias.

```ts
let bunny1 = showImage("bunny1", "https://pixijs.com/assets/bunny1.png")
Assets.add({ alias: "bunny2", src: "https://pixijs.com/assets/bunny2.png" })
let bunny2 = showImage("bunny2")
```

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

### Game.init

Source: https://github.com/drincs-productions/pixi-vn/blob/main/skills/game-init/SKILL.md

Initializes the game engine. This must be called first before any other game functions.

```APIDOC
## Game.init(element?, options?, devtoolsOptions?)

### Description
Initializes the game engine. This must be called first before any other game functions.

### Returns
- **Promise<void>**
```

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

### Override StepLabelProps

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/StepLabelProps

Example of extending the StepLabelProps interface via module augmentation.

```ts
// pixi-vn.d.ts
declare module '@drincs/pixi-vn' {
    interface StepLabelProps {
        navigate: (route: string) => void,
        [key: string]: any
    }
}
```

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

### newLabel<T>(id, steps, props?)

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/functions/newLabel

Creates a new label and registers it in the system. This function must be called at least once at system startup to register the label.

```APIDOC
## newLabel<T>(id, steps, props?)

### Description
Creates a new label and registers it in the system. This function must be called at least once at system startup to register the label, otherwise the system cannot be used.

### Parameters
- **id** (string) - Required - A unique identifier used to reference the label in the game.
- **steps** (LabelSteps<T> | () => LabelSteps<T>) - Required - An array of functions to be executed in order.
- **props** (LabelProps<Label<T>, number>) - Optional - An object with the label's options.

### Returns
- **Label<T>** - The created label instance.
```

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

### tint

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Text

Gets or sets the tint applied to the text. Accepts any valid ColorSource.

```APIDOC
## Property: tint

### Description
The tint applied to the sprite. This can be any valid ColorSource.

### Signature
- **get tint()**: `number`
- **set tint(value)**: `void`

### Parameters
- **value** (`ColorSource`) - The color to apply as a tint.
```

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

### load

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/SoundManagerInterface

Load one or more sound assets.

```APIDOC
## load(...alias)

### Description
Load one or more sound assets.

### Parameters
- **alias** (string[]) - Required - The aliases of the sound assets to load.

### Returns
- **Promise<void>** - A promise that resolves when the assets have finished loading.
```

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

### percentageY

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/ImageSprite

Gets or sets the vertical position of the element in the canvas calculated as a percentage.

```APIDOC
## percentageY

### Description
Gets or sets the vertical position of the element in the canvas calculated as a percentage. The value is affected by the PixiContainer.pivot property.

### Signature
- **get**: () => number
- **set**: (_value: number) => void

### Parameters
- **_value** (number) - The vertical percentage position to set.
```

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

### yAlign

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/classes/Container

Gets or sets the vertical alignment of the element as a percentage of the canvas height.

```APIDOC
## yAlign

### Description
A percentage-based value used to determine the vertical proximity of the element from the edges of the canvas. 0 represents the top, 0.5 the center, and 1 the bottom.

### Signature
`get yAlign(): number`
`set yAlign(value: number): void`

### Parameters
- **value** (number) - The alignment percentage (0 to 1).

### Returns
- **number** - The current vertical alignment value.
```

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

### failIfMajorPerformanceCaveat?

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ApplicationOptions

Option to fail initialization if major performance caveats are detected.

```APIDOC
## failIfMajorPerformanceCaveat?

### Description
Option to fail initialization if major performance caveats are detected.

### Type
`boolean`

### Optional
true
```

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

### ContainerOptions Properties

Source: https://github.com/drincs-productions/pixi-vn/wiki/index/interfaces/ContainerOptions

Configuration options available when initializing a Container.

```APIDOC
## ContainerOptions Properties

### children? (Container[])
- Optional: The array of children to add to the container upon initialization.

### cullable? (boolean)
- Optional: Controls whether this object should be culled when out of view. Default: false.

### cullableChildren? (boolean)
- Optional: Controls whether children of this container can be culled. Default: true.

### cullArea? (Rectangle)
- Optional: Custom shape used for culling calculations instead of object bounds. Default: null.

### cursor? (Cursor | string)
- Optional: The cursor style to display when the mouse pointer is hovering over the object. Accepts valid CSS cursor values.
```