# AI-Generated Content (/start/ai-generated-content)



<CalloutContainer type="warning">
  <CalloutDescription>
    The AI integration is currently in a testing phase and its API may change in future releases.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="What is @drincs/pixi-vn-ai?" id="what-is-ai">
    `@drincs/pixi-vn-ai` is a small, high-level AI abstraction for **Pixi’VN**. It is **not** a
    low-level LLM client: it exposes three functions — `ai.text.generateDialog`,
    `ai.image.generateBackground` and `ai.image.generateElement` — that hide all prompt engineering.
    You pass a natural-language request plus a few structured options (scene, style, speaker,
    alignment, ...), and the library assembles the actual prompt and sends it to whatever model you
    configured.

    It is designed to run entirely in the **browser**, and can generate dialogue, backgrounds and
    characters directly during a play session, without a custom backend.
  </Accordion>
</Accordions>

Within your **Pixi’VN** project, you can use the AI integration to generate narrative dialogue and
images (backgrounds, characters, ...) on the fly, using any [AI SDK](https://ai-sdk.dev) compatible
model (OpenAI, Anthropic, Google, Ollama, ...), a self-hosted [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
server, or a small local [WebLLM](https://github.com/mlc-ai/web-llm) model that requires no API key
and no server at all.

## Installation [#installation]

To install the AI package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-ai
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-ai
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-ai
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-ai
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Call `ai.init(...)` once, at startup. Wrap it in its own function, exported from a dedicated file,
so it can be awaited alongside your other startup tasks and later swapped for a different provider
without touching where it's called from:

```ts title="lib/utils/ai-utility.ts"
import { ai } from "@drincs/pixi-vn-ai";

export async function initAi() {
    await ai.init();
}
```

If you're using the router-based template, run it from the root route's `loader`, alongside the
other startup tasks, instead of from `main.ts`:

```tsx title="routes/__root.tsx"
import { initAi } from "@/lib/utils/ai-utility"; // [!code focus]

export const Route = createRootRouteWithContext<RouterContext>()({
    // ...
    loader: async ({ context, location }) => {
        await Promise.all([
            import("@/content"),
            initAi(), // [!code focus]
            // ...
        ]);
        await setupPixivnViteData();
        // ...
    },
    // ...
});
```

With no arguments, `ai.init()` downloads and runs a small local WebLLM model
(`SmolLM2-360M-Instruct`) directly in the browser. This covers `ai.text.generateDialog` out of the
box.

<CalloutContainer type="info">
  <CalloutDescription>
    For images, `ai.image.generateBackground`/`ai.image.generateElement` always require an external
    model — an AI SDK provider or ComfyUI. WebLLM cannot generate images.
  </CalloutDescription>
</CalloutContainer>

To use a specific model instead, pass it through the AI SDK. From here on, only the body of
`initAi` changes — how and where you call it stays the same:

```ts title="lib/utils/ai-utility.ts"
import { ai } from "@drincs/pixi-vn-ai";
import { openai } from "@ai-sdk/openai";

export async function initAi() {
    await ai.init({
        textProvider: openai("gpt-5"),
        imageProvider: openai.image("gpt-image-1"),
    });
}
```

* `textProvider` is a [`LanguageModel`](https://ai-sdk.dev/docs/foundations/providers-and-models)
  from any AI SDK provider. It drives `ai.text.generateDialog`, and is also used as a fallback for
  image generation on multimodal models (e.g. Gemini's image generation).
* `imageProvider` is an [`ImageModel`](https://ai-sdk.dev/docs/ai-sdk-core/image-generation) from
  any AI SDK provider. It drives `ai.image.generateBackground`/`ai.image.generateElement`.

You don't need both: set only `textProvider` for dialogue, only `imageProvider` for images, or
both.

<Accordions>
  <Accordion title="ink" id="ink">
    You can enable AI hashtag commands in your **ink** scripts by using the
    [`createAiHandler`](/jsdoc/pixi-vn-ai/ink/functions/createAiHandler) function.

    ```ts title="content/ink/hashtag-commands.ts"
    import { addBaseHashtagCommands } from "@drincs/pixi-vn-ink";
    import { createAiHandler } from "@drincs/pixi-vn-ai/ink"; // [!code focus]

    addBaseHashtagCommands({ bundleIds, assetAliasIds });
    createAiHandler(); // [!code focus]
    ```

    This registers four commands: `# ai background`, `# ai element`, `# ai dialog` and
    `# ai dialog as <character>` — see the [Usage](#usage) section below for each of them.

    Optionally, pass known character ids (e.g. the `characterIds` generated by `vitePluginPixivn`'s
    `assetsManifest` option) so `# ai dialog as <character>` validates the character at runtime instead
    of accepting any string:

    ```ts title="content/ink/hashtag-commands.ts"
    createAiHandler({ characterIds }); // [!code focus]
    ```
  </Accordion>

  <Accordion title="ComfyUI" id="comfyui">
    If you want to generate images with a self-hosted [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
    server instead of an AI SDK image provider, also install:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @stable-canvas/comfyui-client
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @stable-canvas/comfyui-client
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @stable-canvas/comfyui-client
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @stable-canvas/comfyui-client
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Then pass a [`ComfyUIImageModel`](/jsdoc/pixi-vn-ai/comfyui/classes/ComfyUIImageModel) as
    `imageProvider`:

    ```ts title="lib/utils/ai-utility.ts"
    import { ai } from "@drincs/pixi-vn-ai";
    import { ComfyUIImageModel } from "@drincs/pixi-vn-ai/comfyui";
    import myWorkflow from "./my-workflow-api.json"; // exported from ComfyUI's "Save (API Format)"

    export async function initAi() {
        await ai.init({
            imageProvider: new ComfyUIImageModel({
                apiHost: "127.0.0.1:8188",
                workflow: myWorkflow,
                // the node/input in `myWorkflow` that holds the positive prompt (usually a CLIPTextEncode node)
                promptNodeId: "6",
                promptInputName: "text", // optional, defaults to "text"
            }),
        });
    }
    ```

    Since ComfyUI runs an arbitrary node graph rather than accepting a plain prompt,
    `ComfyUIImageModel` only injects the developer request into the node/input you point it at —
    everything else (checkpoint, sampler, seed, resolution, ...) is whatever your exported workflow
    already specifies.
  </Accordion>

  <Accordion title="Bundling a ComfyUI server (desktop)" id="comfyui-desktop">
    `ComfyUIImageModel` only talks HTTP to `apiHost` — it doesn't start the server for you. The
    simplest setup is to let the player point `apiHost` at a ComfyUI instance they already run
    themselves (locally or on a LAN/remote machine), with no bundling at all.

    If instead you want your <DynamicLink href="/start/distribution-desktop-mobile">Tauri</DynamicLink>
    build to ship and launch ComfyUI itself, since ComfyUI is a Python process, Rust doesn't run it
    in-process — it spawns it as a child process. The standard way to do this in Tauri is a
    [sidecar](https://v2.tauri.app/develop/sidecar/) binary via
    [`tauri-plugin-shell`](https://v2.tauri.app/plugin/shell/), pointing at a portable ComfyUI build
    (which bundles its own Python) added to `externalBin`:

    ```toml title="src-tauri/Cargo.toml"
    [dependencies]
    tauri-plugin-shell = "2"
    ```

    ```json title="src-tauri/tauri.conf.json"
    {
        "bundle": {
            "externalBin": ["binaries/comfyui-portable/run_nvidia_gpu"]
        }
    }
    ```

    ```rust title="src-tauri/src/lib.rs"
    use tauri_plugin_shell::ShellExt;

    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .setup(|app| {
            app.shell().sidecar("comfyui-portable/run_nvidia_gpu")?.spawn()?;
            Ok(())
        })
        // ...
    ```

    Tauri sidecars must be named with the target's platform triple suffix (e.g.
    `run_nvidia_gpu-x86_64-pc-windows-msvc.exe`) — see the [sidecar
    docs](https://v2.tauri.app/develop/sidecar/) for the exact naming and signing requirements per
    platform.

    Since ComfyUI takes a few seconds to boot, poll its HTTP API before calling `ai.init`. Add the wait
    inside the same `initAi` function from before — where and how it's called doesn't change:

    ```ts title="lib/utils/ai-utility.ts"
    import { ai } from "@drincs/pixi-vn-ai";
    import { ComfyUIImageModel } from "@drincs/pixi-vn-ai/comfyui";
    import myWorkflow from "./my-workflow-api.json"; // exported from ComfyUI's "Save (API Format)"

    async function waitForComfyUI(apiHost: string, timeoutMs = 30000) {
        const start = Date.now();
        while (Date.now() - start < timeoutMs) {
            try {
                if ((await fetch(`http://${apiHost}/system_stats`)).ok) return;
            } catch {
                // not up yet
            }
            await new Promise((r) => setTimeout(r, 500));
        }
        throw new Error("ComfyUI did not start in time");
    }

    export async function initAi() {
        await waitForComfyUI("127.0.0.1:8188");
        await ai.init({
            imageProvider: new ComfyUIImageModel({
                apiHost: "127.0.0.1:8188",
                workflow: myWorkflow,
                promptNodeId: "6",
            }),
        });
    }
    ```

    <CalloutContainer type="warning">
      <CalloutDescription>
        A bundled Python + PyTorch + model environment can add several GB to your installer and needs a
        compatible GPU on the player's machine. Most games only bundle ComfyUI for internal/offline asset
        generation, and ship the "point at an external server" option to end users.
      </CalloutDescription>
    </CalloutContainer>
  </Accordion>
</Accordions>

## Usage [#usage]

`@drincs/pixi-vn-ai` never asks you to write a prompt yourself. As a developer, you just describe
in plain language **what** you want to generate and, optionally, pass a few structured options
(`scene`, `style`, `context`, the narrative `history`, a `speaker`, an alignment, ...); the library
is the only one responsible for turning that into the actual message sent to the model, filling in
whatever extra information it needs (canvas size, reference images, narrative history, ...) along
the way.

<Accordions>
  <Accordion title="showBackground" id="show-background">
    [`showBackground`](/jsdoc/pixi-vn-ai/index/functions/showBackground) generates a background image
    and shows it on the canvas, filling it edge-to-edge. It's the combination of
    `ai.image.generateBackground` and Pixi’VN's `showImage`, using
    [`AIImageSprite`](/jsdoc/pixi-vn-ai/index/classes/AIImageSprite) so the generated image itself is
    saved with the game and restored on load, without generating it again.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { newLabel } from "@drincs/pixi-vn";
        import { showBackground } from "@drincs/pixi-vn-ai";

        export const startLabel = newLabel("start", [
            async () => {
                await showBackground(
                    "throneRoom",
                    "The throne room, lit by torches, a storm outside the windows.",
                    {
                        scene: "Night, medieval castle interior.",
                        style: "Oil painting, warm color palette.",
                    },
                );
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # ai background throneRoom "The throne room, lit by torches, a storm outside the windows." scene "Night, medieval castle interior." style "Oil painting, warm color palette."
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    The ink command also accepts an optional entrance transition, just like `# show` for any other
    canvas element:

    ```ink title="ink/start.ink"
    # ai background throneRoom "The throne room, lit by torches." with dissolve duration 1
    ```
  </Accordion>

  <Accordion title="showElement" id="show-element">
    [`showElement`](/jsdoc/pixi-vn-ai/index/functions/showElement) generates a single visual element
    (typically a character), with a transparent background, and shows it on the canvas. It's
    positioned with `align` — the only supported way to position it, since the image itself is already
    composed for that position. It's the combination of `ai.image.generateElement` and Pixi’VN's
    `showImage`, again using [`AIImageSprite`](/jsdoc/pixi-vn-ai/index/classes/AIImageSprite).

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { newLabel } from "@drincs/pixi-vn";
        import { showElement } from "@drincs/pixi-vn-ai";

        export const startLabel = newLabel("start", [
            async () => {
                await showElement(
                    "advisor",
                    "The advisor, an elderly man with a long grey beard, wearing dark blue robes, worried expression.",
                    {
                        style: "Oil painting, warm color palette, matching the background.",
                        backgroundImage: true,
                        align: { x: 0.75, y: 1 },
                    },
                );
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # ai element advisor "The advisor, an elderly man with a long grey beard, wearing dark blue robes, worried expression." style "Oil painting, warm color palette, matching the background." align { x: 0.75, y: 1 } with dissolve duration 1
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    `backgroundImage` (a Pixi’VN asset alias, or `true` to capture whatever is currently on the game
    canvas) gives the model visual context on what it's being composited over, so it can match
    lighting, perspective and scale. See <DynamicLink href="/start/canvas-position">canvas
    position</DynamicLink> for more about `align`.
  </Accordion>

  <Accordion title="showDialog" id="show-dialog">
    [`showDialog`](/jsdoc/pixi-vn-ai/index/functions/showDialog) generates a line of dialogue from a
    developer request and sets it as the current Pixi’VN narration dialogue. It's the combination of
    `ai.text.generateDialog` and Pixi’VN's `narration.dialogue`. Passing a

    <DynamicLink href="/start/character">character</DynamicLink> also sets it as the
    dialogue's character, and — unless `options.speaker` is already set — as the
    prompt's `speaker`, so the model knows who it's writing for.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { newLabel } from "@drincs/pixi-vn";
        import { showDialog } from "@drincs/pixi-vn-ai";

        export const startLabel = newLabel("start", [
            async () => {
                await showDialog("Greet the king with the bad news.", "advisor", {
                    scene: "The throne room, late at night, lit only by torches.",
                    style: "Tense, formal, a little melancholic.",
                });
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # ai dialog as advisor "Greet the king with the bad news." scene "The throne room, late at night, lit only by torches." style "Tense, formal, a little melancholic."
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Without a character, use `# ai dialog <request> [<key> <value> …]` (or call `showDialog(request,
    undefined, options)`).
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="ai.image" id="ai-image">
    [`ai.image.generateBackground`](/jsdoc/pixi-vn-ai/index/namespaces/ai/namespaces/image/functions/generateBackground)
    and
    [`ai.image.generateElement`](/jsdoc/pixi-vn-ai/index/namespaces/ai/namespaces/image/functions/generateElement)
    are the lower-level functions behind `showBackground`/`showElement`: they only generate the image
    and return it as a data URI, without touching the canvas. Use them directly when you want to
    post-process the generated image yourself, cache it, or show it with something other than
    `AIImageSprite`.

    ```ts
    import { canvas } from "@drincs/pixi-vn/canvas";
    import { ai, AIImageSprite } from "@drincs/pixi-vn-ai";

    const dataUri = await ai.image.generateBackground(
        "The throne room, lit by torches, a storm outside the windows.",
    );
    const sprite = new AIImageSprite(undefined, dataUri);
    await sprite.load();
    canvas.add("throneRoom", sprite);
    ```

    `generateBackground`'s image is meant to fill the whole game canvas — its size is read directly
    from Pixi’VN and included in the prompt automatically. `generateElement`'s image is meant to be
    layered on top of other visuals, with a transparent background; both accept a `referenceImage`
    (a Pixi’VN asset alias, or a URL/data URI) used as image-to-image guidance.

    You can also override the default prompt "Instructions" per kind — `ai.templates.image.background`
    / `ai.templates.image.element` (and `ai.templates.dialog` for text, see below).
  </Accordion>

  <Accordion title="ai.text" id="ai-text">
    [`ai.text.generateDialog`](/jsdoc/pixi-vn-ai/index/namespaces/ai/namespaces/text/functions/generateDialog)
    is the lower-level function behind `showDialog`: it only generates the dialogue text and returns
    it as a string, without setting it as the current narration dialogue. Use it directly when you want
    to use the generated text for something other than `narration.dialogue` (e.g. a log, a tooltip, a
    custom UI element).

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

    const line = await ai.text.generateDialog(
        "The advisor reassures the king that the kingdom is safe.",
        { speaker: "advisor", listeners: ["king"] },
    );
    ```

    `history` (on by default) pulls Pixi’VN's narrative history so the model has continuity;
    `speaker`/`listeners` accept a character id (resolved against Pixi’VN's registered characters, or
    used as-is otherwise) or a plain object, single or array.
  </Accordion>

  <Accordion title="AIImageSprite" id="ai-image-sprite">
    [`AIImageSprite`](/jsdoc/pixi-vn-ai/index/classes/AIImageSprite) is the canvas component used
    internally by `showBackground`/`showElement` and by the `# ai background`/`# ai element` ink
    commands. It behaves exactly like Pixi’VN's own `ImageSprite`, but also keeps the generated image
    (a data URI) in its `memory`, so that <DynamicLink href="/start/save">save games</DynamicLink>
    store the generated image itself and restore the exact same image on load, instead of calling the
    AI provider again — which would produce a different image.

    <CalloutContainer type="warning">
      <CalloutDescription>
        That same `memory` is also kept in the <DynamicLink href="/start/labels-flow#go-back">go back</DynamicLink>
        step history, as a plain string — a data URI can easily be several hundred KB, so generating many
        `AIImageSprite`s can make that history heavy. It's recommended to lower
        [`stepHistory.stepLimitSaved`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#steplimitsaved)
        so only the last few steps keep their full canvas/storage data in the save file.
      </CalloutDescription>
    </CalloutContainer>

    ```ts
    import { canvas } from "@drincs/pixi-vn/canvas";
    import { ai, AIImageSprite } from "@drincs/pixi-vn-ai";

    const dataUri = await ai.image.generateBackground(
        "The throne room, lit by torches.",
    );
    const sprite = new AIImageSprite(undefined, dataUri);
    await sprite.load();
    canvas.add("background", sprite);
    ```

    You only need to construct it yourself if you're combining `ai.image.*` with the canvas manually,
    as shown above; `showBackground`/`showElement` and the ink commands already do this for you.
  </Accordion>
</Accordions>


# Loading assets (/start/assets-management)



Especially for games with online assets, following good loading practices is essential to avoid long wait times and keep the experience smooth for the player.

To load and manipulate assets (images, gifs, videos, etc.) you will need to use `Assets`. `Assets` is a class with many features and comes from the PixiJS library. For more information, read [here](https://pixijs.com/8.x/guides/components/assets).

## Use aliases to load assets [#use-aliases-to-load-assets]

To load an asset, always use its **alias** — the unique identifier defined in the manifest or when registering the asset. Using the `src` path directly is strongly discouraged: it couples your code to the file location, making it fragile when paths or hosting change.

```ts title="main.ts"
import { Assets } from "@drincs/pixi-vn";

const texture = await Assets.load("eggHead");
```

```json title="assets/manifest.gen.json"
{
    "bundles": [
        {
            "name": "default",
            "assets": [
                {
                    "alias": "eggHead",
                    "src": "./assets/eggHead.png"
                }
            ]
        }
    ]
}
```

## Organize assets into bundles [#organize-assets-into-bundles]

A best practice is to group assets into **bundles** rather than registering them individually. Bundles allow you to load a whole set of assets with a single call, and to defer loading until the assets are actually needed.

<CalloutContainer type="info">
  <CalloutDescription>
    For local assets, naming bundles based on where they are used is less critical — since local files load instantly, there is no real benefit in splitting them by screen or label. This convention is most valuable for online assets, where targeted loading directly reduces wait times.
  </CalloutDescription>
</CalloutContainer>

It is recommended to name each bundle based on **where it will be used**. For example:

* use the label's id (e.g. `startLabel.id`) as the bundle name for assets used in that specific label
* use the route path (e.g. `"/"`) as the bundle name for assets used in the corresponding screen, such as the main menu

This way, you can load exactly the right assets at the right moment, without loading more than necessary.

```ts title="assets/index.ts"
import { startLabel } from "@/content/labels/start.label";
import type { FileRouteTypes } from "@/routeTree.gen";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        // screens
        {
            // main menu
            name: "/" as FileRouteTypes["fullPaths"],
            assets: [
                {
                    alias: "background_main_menu",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/main-menu.png",
                },
            ],
        },
        // labels
        {
            name: startLabel.id,
            assets: [
                {
                    alias: "bg01-hallway",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/breakdown/bg01-hallway.webp",
                },
            ],
        },
    ],
};
```

## When to load assets [#when-to-load-assets]

By default, assets are loaded on demand — only when they are actually needed. However, loading at the last moment can cause noticeable pauses during gameplay.

Here are the most common and recommended moments to load assets in advance:

<Accordions>
  <Accordion title="Load assets at project start" id="load-assets-at-project-start">
    It is possible to load assets at project startup before the player can interact with the project, for example during the startup loading screen. It is suggested to use this procedure only for assets used in the main page or for assets used frequently, and not to exceed 100MB.

    To do this, you must use the `Assets.load` function and wait for it to finish (with `await`) when the project starts.

    <CodeBlockTabs defaultValue="lib/utils/assets-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/assets-utility.ts">
          lib/utils/assets-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/assets-utility.ts">
        ```ts
        import { manifest } from "@/assets";
        import { Assets, sound } from "@drincs/pixi-vn";

        let assetsInitialized = false;

        /**
         * Define all the assets that will be used in the game.
         * This function will be called before the game starts.
         */
        export async function defineAssets() {
            if (!assetsInitialized) {
                await Assets.init({ manifest });
                assetsInitialized = true;
            }

            // The game will not start until these asserts are loaded.
            await Assets.loadBundle("base");
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import type { AssetsManifest } from "@drincs/pixi-vn";

        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "base",
                    assets: [
                        {
                            alias: "eggHead",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flowerTop",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Load assets in the background at project start" id="load-assets-in-the-background-at-project-start">
    It is possible to load assets in the background when the project starts, reducing loading times when your project starts. It is recommended not to exceed 2GB.

    To do this, you can use the `Assets.backgroundLoad` function when the project starts. You can learn more about the `Assets.backgroundLoad` function [here](https://pixijs.com/8.x/guides/components/assets).

    <CodeBlockTabs defaultValue="lib/utils/assets-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/assets-utility.ts">
          lib/utils/assets-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/assets-utility.ts">
        ```ts
        import { manifest } from "@/assets";
        import { Assets, sound } from "@drincs/pixi-vn";

        let assetsInitialized = false;

        /**
         * Define all the assets that will be used in the game.
         * This function will be called before the game starts.
         */
        export async function defineAssets() {
            if (!assetsInitialized) {
                await Assets.init({ manifest });
                assetsInitialized = true;
            }

            // The game will start immediately, but these assets will be loaded in the background.
            Assets.backgroundLoadBundle(["audio"]);
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import type { AssetsManifest } from "@drincs/pixi-vn";

        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "audio",
                    assets: [
                        {
                            alias: "bgm",
                            src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/bgm.mp3",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Load assets at label start" id="load-assets-at-label-start">
    <CalloutContainer type="info">
      <CalloutTitle>
        *ink*
      </CalloutTitle>

      <CalloutDescription>
        You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/assets">here</DynamicLink>.
      </CalloutDescription>
    </CalloutContainer>

    To group the loadings from one `step` to another of a `label` into a single loading, it is possible to load all or part of the assets used by the `label` before it starts. Since this does not reduce the waiting times for the player, but adds them to a single loading, it is recommended to [load them in the background](#load-assets-in-the-background-at-label-start).

    To do this, you must use the `Assets.load` function and wait for it to finish (with `await`) when the `label` starts. You will use the <DynamicLink href="/start/labels-advanced#onloadinglabel">`onLoadingLabel`</DynamicLink> function.

    For cleaner code, it is recommended to define a bundle in your manifest with the id corresponding to the `label` id and define within it the assets that will be used in that `label`.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, showImage, Assets } from "@drincs/pixi-vn";

        const startLabel = newLabel(
            "start",
            [
                () => {
                    await showImage("eggHead");
                },
                () => {
                    await showImage("flowerTop");
                },
            ],
            {
                onLoadingLabel: async (_stepId, label) => {
                    // The label will not start until these assets are loaded.
                    await Assets.loadBundle(label.id);
            },
        );
        export default startLabel;
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import type { AssetsManifest } from "@drincs/pixi-vn";
        import startLabel from "@/content/labels/start.label";

        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: startLabel.id,
                    assets: [
                        {
                            alias: "eggHead",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flowerTop",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Load assets in the background at label start" id="load-assets-in-the-background-at-label-start">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, when a `label` is started, the background loading of the bundle (if it exists) with the id corresponding to the `label` will be started. So, it is enough to &#x2A;*create a manifest with a bundle for each `label`**.
      </CalloutDescription>
    </CalloutContainer>

    To make the game smoother by trying to remove asset loading times from one `step` to another, it is possible to start a "loading group" at the beginning of a `label`. This means that you may potentially not feel any loading, especially in the later `steps` of the `label`.

    To do this, you can use the `Assets.backgroundLoad` function when the `label` starts. You can learn more about the `Assets.backgroundLoad` function [here](https://pixijs.com/8.x/guides/components/assets). And, you will use the <DynamicLink href="/start/labels-advanced#onloadinglabel">`onLoadingLabel`</DynamicLink> function.

    For cleaner code, it is recommended to define a bundle in your manifest with the id corresponding to the `label` id and define within it the assets that will be used in that `label`.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, showImage, Assets } from "@drincs/pixi-vn";

        const startLabel = newLabel(
            "start",
            [
                () => {
                    await showImage("eggHead");
                },
                () => {
                    await showImage("flowerTop");
                },
            ],
            {
                onLoadingLabel: async (_stepId, label) => {
                    // The label will start immediately, but these assets will be loaded in the background.
                    Assets.backgroundLoadBundle(label.id);
                },
            },
        );
        export default startLabel;
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import type { AssetsManifest } from "@drincs/pixi-vn";
        import startLabel from "@/content/labels/start.label";

        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: startLabel.id,
                    assets: [
                        {
                            alias: "eggHead",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flowerTop",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Load assets before a screen is shown" id="load-assets-before-screen">
    It is possible to load assets before a screen is shown. This is useful when a screen uses images or other resources that must be ready before the component renders.

    In this example, TanStack Router is used, which is already included in all templates. You can find more information about it <DynamicLink href="/start/interface-navigate">here</DynamicLink>.

    The `loader` function runs before the route component mounts. You can call `Assets.loadBundle` inside `loader` to preload the bundle associated with that route.

    Additionally, you can use `pendingComponent` to display a loading indicator while the assets are being fetched, so the user sees a meaningful transition instead of a blank screen.

    <CodeBlockTabs defaultValue="routes/game/narration.tsx">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="routes/game/narration.tsx">
          routes/game/narration.tsx
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="routes/game/narration.tsx">
        ```tsx
        import { NarrationPendingComponent } from "@/components/loading";
        import { NarrationScreen } from "@/components/screens/narration";
        import { Assets } from "@drincs/pixi-vn";
        import { createFileRoute } from "@tanstack/react-router";

        export const Route = createFileRoute("/game/narration")({
            component: NarrationElement,
            pendingComponent: NarrationPendingComponent,
            loader: async () => {
                await Assets.loadBundle("/game/narration");
            },
        });

        function NarrationElement() {
            return <NarrationScreen />;
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import type { AssetsManifest } from "@drincs/pixi-vn";
        import startLabel from "@/content/labels/start.label";

        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "/game/narration",
                    assets: [
                        {
                            alias: "next-button",
                            src: "https://raw.githubusercontent.com/user/project/refs/heads/main/assets/next-button.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Assets (/start/assets)



<Accordions>
  <Accordion title="What are assets?" id="what-is-assets">
    Assets are all files that are not code, such as images, sounds, and videos.
  </Accordion>
</Accordions>

Assets can be stored **locally** inside the project or hosted **online**. Frequently used assets — such as character sprites, backgrounds, and background music — are best kept local. Assets used only once or large optional files are better hosted online. Each approach has trade-offs:

## Local assets [#local-assets]

To save and use assets locally, you can use any folder—there are no restrictions. However, it is recommended to use the `src/assets` folder. Inside this folder, you can create subfolders to better organize your assets.

<Accordions>
  <Accordion title="What is PixiJS AssetPack?" id="what-is-pixijsassetpack">
    PixiJS AssetPack is a tool for optimizing local assets for the web. It can be used to transform, combine, and compress assets.

    You can learn more about PixiJS AssetPack on the [PixiJS website](https://pixijs.io/assetpack).
  </Accordion>
</Accordions>

PixiJS AssetPack is already pre-configured in the Pixi’VN project templates through the Vite.js integration — automating the processing and optimization of your assets so you can focus on building your project.

During development (`vite dev`) it watches the `src/assets` folder for changes and processes them on the fly. During the production build (`vite build`) it runs a full optimization pass before bundling.

The optimizations it applies include:

* **Compression** — reduces file sizes for faster loading.
* **Format conversion** — converts images to modern formats (e.g. WebP, AVIF) when supported.
* **Texture atlases** — combines multiple small images into a single sprite sheet to reduce draw calls.

Once processing is complete, it generates optimized files in `public/assets` and the `src/assets/manifest.gen.json` file, which contains the list of all asset bundles and their paths. These outputs are then used by PixiJS to load assets efficiently.

<Files>
  <Folder name="project">
    <Folder name="public">
      <Folder name="assets">
        <Folder name="audio">
          <File name="bgm_cheerful.ogg" />

          <File name="sfx_whoosh.ogg" />
        </Folder>

        <Folder name="mainmenu">
          <File name="background_main_menu.avif" />
        </Folder>

        <Folder name="start">
          <File name="bg01-hallway.avif" />
        </Folder>

        <Folder name="mc">
          <File name="mc-neutral.avif" />
        </Folder>
      </Folder>
    </Folder>

    <Folder name="src">
      <Folder name="assets">
        <Folder name="audio">
          <File name="bgm_cheerful.wav" />

          <File name="sfx_whoosh.wav" />
        </Folder>

        <Folder name="mainmenu">
          <File name="background_main_menu.png" />
        </Folder>

        <Folder name="start">
          <File name="bg01-hallway.webp" />
        </Folder>

        <Folder name="mc">
          <File name="mc-neutral.png" />
        </Folder>

        <File name="manifest.gen.json" />

        <File name="index.ts" />
      </Folder>
    </Folder>

    <File name=".assetpack.ts" />

    <File name="vite.config.ts" />
  </Folder>
</Files>

<CodeBlockTabs defaultValue="src/assets/manifest.gen.json">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value=".assetpack.ts">
      .assetpack.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="vite.config.ts">
      vite.config.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "audio",
                "assets": [
                    {
                        "alias": "bgm_cheerful",
                        "src": "./assets/audio/bgm_cheerful.wav"
                    },
                    {
                        "alias": "sfx_whoosh",
                        "src": "./assets/audio/sfx_whoosh.wav"
                    }
                ]
            },
            {
                "name": "mainmenu",
                "assets": [
                    {
                        "alias": "background_main_menu",
                        "src": "./assets/mainmenu/background_main_menu.png"
                    }
                ]
            },
            {
                "name": "start",
                "assets": [
                    {
                        "alias": "bg01-hallway",
                        "src": "./assets/start/bg01-hallway.webp"
                    }
                ]
            },
            {
                "name": "mc",
                "assets": [
                    {
                        "alias": "mc-neutral",
                        "src": "./assets/mc/mc-neutral.png"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value=".assetpack.ts">
    ```ts
    import fs from "node:fs/promises";
    import type { AssetPackConfig, AssetPipe } from "@assetpack/core";
    import { path } from "@assetpack/core";
    import { pixiPipes } from "@assetpack/core/pixi";

    // TAURI_ENV_TARGET_TRIPLE is set by `tauri build` before running beforeBuildCommand
    const isTauri = !!process.env.TAURI_ENV_TARGET_TRIPLE;

    const manifestOutput = "src/assets/manifest.gen.json";

    /**
     * AssetPack only creates a manifest bundle for folders explicitly tagged
     * with "{m}" (see pixiManifest's `manifest` tag); everything else lands in
     * the single "default" bundle. This splits the "default" bundle into one
     * bundle per top-level folder under the assets entry, named after that
     * folder, so bundles mirror the folder structure without needing to tag
     * every folder manually. Files directly at the entry root (no folder) stay
     * in "default". Runs after the manifest has been written to disk, so it
     * re-reads and rewrites the file.
     */
    function groupBundlesByFolder(options: {
        output: string;
    }): AssetPipe<{ output: string }> {
        return {
            name: "group-bundles-by-folder",
            defaultOptions: options,
            async finish(_asset, opts) {
                const manifest = JSON.parse(
                    await fs.readFile(opts.output, "utf-8"),
                );

                const bundles = new Map<
                    string,
                    { name: string; assets: unknown[] }
                >();
                for (const bundle of manifest.bundles) {
                    if (bundle.name !== "default") {
                        bundles.set(bundle.name, bundle);
                        continue;
                    }
                    for (const asset of bundle.assets) {
                        const folder = path.dirname(asset.src[0]).split("/")[0];
                        const bundleName = folder === "." ? "default" : folder;
                        const target = bundles.get(bundleName) ?? {
                            name: bundleName,
                            assets: [],
                        };
                        target.assets.push(asset);
                        bundles.set(bundleName, target);
                    }
                }
                manifest.bundles = [...bundles.values()];

                await fs.writeFile(opts.output, JSON.stringify(manifest, null, 2));
            },
        };
    }

    /**
     * Removes file extensions from the aliases generated by the pixi manifest
     * pipe and replaces path separators with underscores (e.g.
     * "yard/yard1.png" -> "yard_yard1"). Runs after the manifest has been
     * written to disk, so it re-reads and rewrites the file.
     *
     * If two assets end up with the same normalized alias, the later one is
     * prefixed with its bundle name (e.g. "yard_yard_yard1") to keep aliases
     * unique across the whole manifest.
     */
    function normalizeAliases(options: {
        output: string;
    }): AssetPipe<{ output: string }> {
        return {
            name: "normalize-aliases",
            defaultOptions: options,
            async finish(_asset, opts) {
                const manifest = JSON.parse(
                    await fs.readFile(opts.output, "utf-8"),
                );

                const seen = new Set<string>();
                for (const bundle of manifest.bundles) {
                    for (const asset of bundle.assets) {
                        asset.alias = asset.alias.map((alias: string) => {
                            const normalized = path
                                .trimExt(alias)
                                .replaceAll("/", "_");
                            const unique = seen.has(normalized)
                                ? `${bundle.name}_${normalized}`
                                : normalized;
                            seen.add(normalized);
                            return unique;
                        });
                    }
                }

                await fs.writeFile(opts.output, JSON.stringify(manifest, null, 2));
            },
        };
    }

    const config: AssetPackConfig = {
        entry: "./src/assets",
        output: "./public/assets",
        ignore: ["**/*.ts", "**/*.js", "**/*.gen.*"],
        pipes: [
            ...pixiPipes({
                manifest: {
                    output: manifestOutput,
                    createShortcuts: true,
                },
                // For Tauri: skip @0.5x mipmaps (unused on desktop, WebView handles DPR)
                resolutions: isTauri ? { default: 1 } : undefined,
                // For Tauri: raise WebP quality — files are local so bandwidth is not a concern
                compression: isTauri
                    ? {
                          png: true,
                          jpg: true,
                          webp: { quality: 88, alphaQuality: 88 },
                      }
                    : undefined,
            }),
            groupBundlesByFolder({ output: manifestOutput }),
            normalizeAliases({ output: manifestOutput }),
        ],
    };

    export default config;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="vite.config.ts">
    ```ts
    import { AssetPack } from "@assetpack/core";
    import { defineConfig, type Plugin, type ResolvedConfig } from "vite";
    import assetPackConfig from "./.assetpack.ts";

    export default defineConfig(() => ({
        plugins: [
            assetpackPlugin(),
            // ...
        ],
    }));

    function assetpackPlugin(): Plugin {
        let mode: ResolvedConfig["command"];
        let ap: AssetPack | undefined;

        return {
            name: "vite-plugin-assetpack",
            configResolved(resolvedConfig) {
                mode = resolvedConfig.command;
                if (!resolvedConfig.publicDir) return;
                if (assetPackConfig.output) return;
                const publicDir = resolvedConfig.publicDir.replace(
                    process.cwd(),
                    "",
                );
                assetPackConfig.output = `.${publicDir}/assets/`;
            },
            buildStart: async () => {
                if (mode === "serve") {
                    if (ap) return;
                    ap = new AssetPack(assetPackConfig);
                    void ap.watch();
                } else {
                    await new AssetPack(assetPackConfig).run();
                }
            },
            buildEnd: async () => {
                if (ap) {
                    await ap.stop();
                    ap = undefined;
                }
            },
        };
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Assets hosting [#assets-hosting]

You can save your assets online. This is a good option if you want to save space in your project or if you want create a game playable online without the need to download it first. You can use any cloud service that allows you to upload files and generate a public URL (you need to make sure that the cloud service you are using allows *CORS requests*).

Here are some popular options for hosting your assets online:

<Accordions>
  <Accordion title="Github" id="github">
    You can use Github to host your assets. You can use the raw link of the file in your project. The link will be in the following format:

    ```text
    https://raw.githubusercontent.com/[repository]/raw/refs/heads/main/[file path]
    ```

    * **Price**: Completely free.
    * **Space limits**: No space limits, but each single file must not exceed 100 MB.
    * **Type of files**: You can upload any type of file.
    * **Traffic**: Speed is not the best.
    * **Edit assets**: You can edit the file while keeping the same URL.
  </Accordion>

  <Accordion title="Image hosting" id="image-hosting">
    Image hosting is a service that allows you to upload images. There are many sites to upload images for free, for example [imgbb](https://imgbb.com/), [imgix](https://www.imgix.com/), [imgur](https://imgur.com/). You can use the link of the image in your project.

    * **Price**: Completely free, but you can pay for more features.
    * **Space limits**: No space limits, but each single file can have a maximum size.
    * **Type of files**: You can upload only images.
    * **Traffic**: Speed is good.
    * **Edit assets**: You can't edit the file while keeping the same URL.
  </Accordion>

  <Accordion title="Cloud storage" id="Cloud-storage">
    Cloud storage is a service that allows you to upload any type of file online. There are many popular options, for example [Cloudflare R2](https://www.cloudflare.com/developer-platform/r2/), [Firebase Storage](https://firebase.google.com/pricing), [Amazon S3](https://aws.amazon.com/s3/pricing/), [Supabase](https://supabase.io/pricing), [Convex](https://www.convex.dev/pricing).

    * **Price**: Usually paid or with a free version with limits.
    * **Space limits**: Monthly cost based on space used (usually free if you do not exceed a certain threshold).
    * **Type of files**: You can upload any type of file.
    * **Traffic**: Speed is good.
    * **Edit assets**: You can edit the file while keeping the same URL.
  </Accordion>
</Accordions>

Once you have your assets ready, you need to manually define which ones your game can use and how they are grouped into bundles.

<CalloutContainer type="info">
  <CalloutDescription>
    It is strongly recommended to follow the <DynamicLink href="/start/assets-management">asset loading best practices</DynamicLink> to minimize loading times and avoid blocking the game unnecessarily.
  </CalloutDescription>
</CalloutContainer>

All Pixi’VN templates include a `src/assets/index.ts` file that you can edit to register your assets:

```ts title="src/assets/index.ts"
import generatedManifestJson from "@/assets/manifest.gen.json";
import { AUDIO_BUNDLE_NAME } from "@/constants";
import { startLabel } from "@/content/labels/start.label";
import type { FileRouteTypes } from "@/routeTree.gen";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        ...generatedManifestJson.bundles,
        {
            name: AUDIO_BUNDLE_NAME,
            assets: [
                {
                    alias: "bgm_cheerful",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/bgm_cheerful.wav",
                },
                {
                    alias: "sfx_whoosh",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/sfx_whoosh.wav",
                },
            ],
        },
        // screens
        {
            // main menu
            name: "/" as FileRouteTypes["fullPaths"],
            assets: [
                {
                    alias: "background_main_menu",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/main-menu.png",
                },
            ],
        },
        // labels
        {
            name: startLabel.id,
            assets: [
                {
                    alias: "bg01-hallway",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/breakdown/bg01-hallway.webp",
                },
            ],
        },
        // characters
        {
            name: "mc",
            assets: [
                {
                    alias: "mc-neutral",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/characters/mc-neutral.png",
                },
            ],
        },
    ],
};
```

## Other features [#other-features]

<Accordions>
  <Accordion title="Caching assets" id="caching-assets">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, assets loaded from external URLs are automatically cached by the service worker for offline use. This is configured in the `vite.config.ts` file using the `vite-plugin-pwa` plugin.
      </CalloutDescription>
    </CalloutContainer>

    For online games, caching external assets is crucial: it avoids re-downloading the same files on every session, reduces latency, and allows the game to work even when the connection is temporarily unavailable.

    This is handled by [VitePWA](https://vite-pwa-org.netlify.app/), which is pre-configured in the templates. You can customize the caching behavior directly in `vite.config.ts`:

    * **`CACHED_EXTERNAL_HOSTNAMES`** — list of external hostnames whose assets should be cached. Add any CDN or remote host you use.
    * **`cacheableResponse`** — defines which HTTP responses are eligible for caching (e.g. status `0` for opaque responses and `200` for successful ones).
    * **`expiration`** — controls how long cached assets are kept. By default assets are cached for 7 days (`maxAgeSeconds: 7 * 24 * 60 * 60`).

    ```ts title="vite.config.ts"
    import { defineConfig } from "vite";
    import { VitePWA } from "vite-plugin-pwa";

    /**
     * List of external hostnames whose responses should be cached by the service worker.
     * Add any CDN or remote asset host here to enable offline caching for it.
     * Examples:
     *   "cdn.jsdelivr.net"
     *   "your.cdn.domain.com"
     */
    const CACHED_EXTERNAL_HOSTNAMES: string[] = ["raw.githubusercontent.com"];

    export default defineConfig(() => ({
        plugins: [
            VitePWA({
                // ...
                workbox: {
                    runtimeCaching: [
                        {
                            urlPattern: ({ url }) =>
                                CACHED_EXTERNAL_HOSTNAMES.includes(url.hostname),
                            handler: "CacheFirst",
                            options: {
                                cacheName: "external-assets-v1",
                                cacheableResponse: {
                                    statuses: [0, 200],
                                },
                                expiration: {
                                    maxAgeSeconds: 7 * 24 * 60 * 60,
                                },
                            },
                        },
                    ],
                },
            }),
        ],
    }));
    ```
  </Accordion>
</Accordions>


# Component aliases (/start/canvas-alias)





Each component added into the canvas must be assigned an `alias`. An `alias` is a way to refer to a component by a unique string.

<Accordions>
  <Accordion title="What does `alias` correspond to in PixiJS?" id="what-is-an-alias">
    The `alias` corresponds to `PixiJSComponent.label`, so do not change the `label`, but use the <DynamicLink href="/start/canvas-functions">methods provided by Pixi’VN</DynamicLink> to change the `alias`.
  </Accordion>
</Accordions>

If a component is added by assigning an existing `alias`, the new component will replace the old one.

## Heredity factor [#heredity-factor]

If a component is added using an existing `alias`, the new component, in addition to replacing the old one, will inherit the properties, the `zIndex`, and the <DynamicLink href="/start/canvas-tickers">tickers</DynamicLink> of the old component.

<HeredityFactorExample />

## Edit [#edit]

To edit the `alias` of a canvas component, you can use [`canvas.editAlias`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#editalias). If the alias has one or more <DynamicLink href="/start/canvas-tickers">tickers</DynamicLink> associated, it will be automatically updated in the ticker.

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

canvas.editAlias("sprite1", "sprite2");
```

## Other features [#other-features]

<Accordions>
  <Accordion title="Game layer alias" id="game-layer-alias">
    In Pixi’VN, the game layer is a special component that represents the main game area where all the game elements are rendered.

    This component has been assigned a special `alias`, [`CANVAS_APP_GAME_LAYER_ALIAS`](/jsdoc/pixi-vn/index/variables/CANVAS_APP_GAME_LAYER_ALIAS), which is used to reference the game layer in the script.

    This is very useful if you want to run some <DynamicLink href="/start/canvas-animations-effects">animations or effects</DynamicLink> on the entire layer. Some features are not allowed on this item, such as deletion.

    ```ts
    import { CANVAS_APP_GAME_LAYER_ALIAS, shakeEffect } from "@drincs/pixi-vn";

    shakeEffect(CANVAS_APP_GAME_LAYER_ALIAS);
    ```
  </Accordion>
</Accordions>


# Animations and transitions (/start/canvas-animations-effects)



Animations are a key part of any video game, helping to create a more engaging and immersive experience. In Pixi’VN, animations are managed using tickers and the `animate` function.

The <DynamicLink href="/start/canvas-motion">`animate`</DynamicLink> function is a wrapper around the [`motion`](https://motion.dev/) library, providing a simple yet powerful way to animate canvas components. You can define animations with properties such as duration, `easing`, and more.

Pixi’VN also provides several functions to perform <DynamicLink href="/start/canvas-transition">transitions</DynamicLink> between `steps`. All transitions are built on top of the `animate` function, making it easy to create custom transitions as well.

All animations in Pixi’VN are triggered by <DynamicLink href="/start/canvas-tickers">tickers</DynamicLink>, which are classes that run on every frame and execute functions leveraging PixiJS.


# Articulated animations (/start/canvas-articulated-animations-effects)





Articulated animations are functions that use the [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) function to create animations that can be applied to canvas components. These functions are typically used to create effects like shaking, bouncing, or other complex animations that involve multiple steps or components.

<Accordions>
  <Accordion title="Shake" id="shake">
    The [`shakeEffect`](/jsdoc/pixi-vn/index/functions/shakeEffect) function is an articulated animation that shakes a component.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import {
            CANVAS_APP_GAME_LAYER_ALIAS,
            newLabel,
            shakeEffect,
            showImage,
        } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("bg", "bg", { scale: 1.3 });
                await showImage("alien", "alien", { align: 0.5 });
                shakeEffect("alien"); // [!code focus]
            },
            async () => {
                shakeEffect(CANVAS_APP_GAME_LAYER_ALIAS); // [!code focus]
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "bg",
                            src: "https://pixijs.com/assets/bg_grass.jpg",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ShakeExample />
  </Accordion>
</Accordions>


# Components (/start/canvas-components)



Pixi’VN provides a set of canvas components. These components extend the [Pixi.js](https://pixijs.com/) components, adding various features, such as the ability to save their current state.

<Accordions>
  <Accordion title="Built-in components" id="base-components">
    * [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) corresponds to the component [`PixiJS.Sprite`](https://pixijs.com/8.x/guides/components/sprites).
    * [`Container`](/jsdoc/pixi-vn/index/classes/Container) corresponds to the component [`PixiJS.Container`](https://pixijs.com/8.x/guides/components/containers).
    * <DynamicLink href="/start/canvas-image">`ImageSprite`</DynamicLink> is a
      component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-image-container">`ImageContainer`</DynamicLink> is a component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-video">`VideoSprite`</DynamicLink> is a
      component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-text">`Text`</DynamicLink> is a component
      introduced by Pixi’VN.
  </Accordion>

  <Accordion title="Plugin components" id="additional-components">
    * <DynamicLink href="/start/canvas-spine2D">Spine 2D</DynamicLink> is a
      component installable via the Pixi’VN plugin system. It is used to render
      Spine 2D animations.
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Custom components" id="custom-components">
    You can create custom components by extending the base components. To do this, you need to use the decorator [`@canvasComponentDecorator`](/jsdoc/pixi-vn/index/functions/canvasComponentDecorator).

    It is necessary to override the [`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory) getter and the [`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory) method to store the custom component properties.
    In `get memory()`, it is very important to return the `className` property; this property must be equal to the id used in the decorator.

    For example, you can create an `AlienTinting` class that extends the `Sprite` class to manage the direction and speed of each individual alien in an animation.

    ```ts title="canvas/components/AlienTinting.ts"
    const ALIEN_TINTING_TEST_ID = "AlienTintingTest";
    @canvasComponentDecorator({
        name: ALIEN_TINTING_TEST_ID,
    })
    class AlienTintingTest extends Sprite<IAlienTintingMemory> {
        readonly pixivnId: string = CANVAS_SPINE_ID;
        override get memory() {
            return {
                ...super.memory,
                pixivnId: CANVAS_SPINE_ID,
                direction: this.direction,
                turningSpeed: this.turningSpeed,
                speed: this.speed,
            };
        }
        override async setMemory(memory: IAlienTintingMemory) {
            await super.setMemory(memory);
            this.direction = memory.direction;
            this.turningSpeed = memory.turningSpeed;
            this.speed = memory.speed;
        }
        direction: number = 0;
        turningSpeed: number = 0;
        speed: number = 0;
        static override from(
            source: Texture | TextureSourceLike,
            skipCache?: boolean,
        ) {
            let sprite = Sprite.from(source, skipCache);
            let mySprite = new AlienTintingTest();
            mySprite.texture = sprite.texture;
            return mySprite;
        }
    }
    ```
  </Accordion>
</Accordions>


# Filters (/start/canvas-filters)



<Callout title="This page is under construction" type="warn">
  Currently, this functionality is not available in Pixi’VN, but we plan to implement it. If you are interested, feel free to write in the chat below!
</Callout>

Having the ability to filter the entire canvas or a specific component can be very useful in many cases.

![image](https://filters.pixijs.download/main/screenshots/shockwave.gif?v=3)

The [PixiJS Filters](https://pixijs.io/filters/docs/) library provides this capability to PixiJS.


# Components functions (/start/canvas-functions)





## Add [#add]

To add a component to the game canvas, you can use [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<AddCanvasComponents />

## Get [#get]

To get a component from the game canvas, you can use [`canvas.find`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#find).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite);
        },
        () => {
            const sprite = canvas.find("sprite"); // [!code focus]
            if (sprite) {
                sprite.x = 100;
                sprite.y = 100;
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<GetCanvasComponents />

## Remove [#remove]

To remove a component from the game canvas, you can use [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            const sprite = new Sprite();
            const texture = await Assets.load("egg_head");
            sprite.texture = texture;
            canvas.add("sprite", sprite);
        },
        () => {
            canvas.remove("sprite"); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<RemoveCanvasComponents />

## Remove all [#remove-all]

To remove all components from the game canvas, you can use [`canvas.removeAll`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#removeAll).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            const texture = await Assets.load("egg_head");
            for (let i = 0; i < 3; i++) {
                const sprite = new Sprite();
                sprite.texture = texture;
                sprite.x = i * 150;
                canvas.add(`sprite${i}`, sprite);
            }
        },
        () => {
            canvas.removeAll(); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<RemoveAllCanvasComponents />

## Other features [#other-features]

<Accordions>
  <Accordion title="Add a listener to an event" id="add-a-listener-to-an-event">
    <CalloutContainer type="info">
      <CalloutDescription>
        If possible, try using <DynamicLink href="/start/interface">HTML and PixiJS UI</DynamicLink> to add buttons or other elements with events.
      </CalloutDescription>
    </CalloutContainer>

    In Pixi’VN, compared to PixiJS, you can use a [listener with the `on` method](https://pixijs.com/8.x/examples/events/click) (for example to make it clickable), but if you don't use the [`@eventDecorator`](/jsdoc/pixi-vn/index/functions/eventDecorator) decorator, the event will not be registered in the Pixi’VN event system, so if you load a save where that event was used, it will be lost.

    <CodeBlockTabs defaultValue="content/canvas/events.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/canvas/events.ts">
          content/canvas/events.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/canvas/events.ts">
        ```ts
        import { eventDecorator, FederatedEvent, Sprite } from "@drincs/pixi-vn";

        export default class Events {
            @eventDecorator()
            static buttonEvent(event: FederatedEvent, sprite: Sprite): void {
                switch (event.type) {
                    case "pointerdown":
                        sprite.scale.x *= 1.25;
                        sprite.scale.y *= 1.25;
                        break;
                }
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, showImage } from "@drincs/pixi-vn";
        import Events from "../canvas/events";

        export const startLabel = newLabel("start", [
            async () => {
                const bunny = await showImage("bunny", "bunny", {
                    align: 0.5,
                    anchor: 0.5,
                });
                // Opt-in to interactivity
                bunny.eventMode = "static";
                // Shows hand cursor
                bunny.cursor = "pointer";
                // Pointers normalize touch and mouse (good for mobile and desktop)
                bunny.on("pointerdown", Events.buttonEvent);
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        { alias: "bunny", src: "https://pixijs.com/assets/bunny.png" },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <AddListenerGivenEvent />
  </Accordion>
</Accordions>


# Container (`ImageContainer`) (/start/canvas-image-container)





The [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) component extends the [`Container`](/jsdoc/pixi-vn/index/classes/Container) component, so you can use all the methods and properties of [`Container`](/jsdoc/pixi-vn/index/classes/Container). It allows you to group multiple images into a single component and manipulate them as one.

The children of the [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) are [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) components.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { canvas, ImageContainer } from "@drincs/pixi-vn";

    let james = new ImageContainer(
        {
            anchor: { x: 0.5, y: 0.5 },
            x: 100,
            y: 100,
        },
        ["m01-body", "m01-eyes", "m01-mouth"],
    );

    await james.load();
    canvas.add("james", james);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "m01",
                "assets": [
                    {
                        "alias": "m01-body",
                        "src": "./assets/m01/m01-body.png"
                    },
                    {
                        "alias": "m01-head",
                        "src": "./assets/m01/m01-head.png"
                    },
                    {
                        "alias": "m01-eyes",
                        "src": "./assets/m01/m01-eyes.png"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`Container`](/jsdoc/pixi-vn/index/classes/Container) component, [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) adds the following features:

* [`load`](/jsdoc/pixi-vn/index/classes/ImageContainer#load): Loads all image URLs and sets the resulting textures in the children.
* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show a group of images on the canvas is to use the [`showImageContainer`](/jsdoc/pixi-vn/index/functions/showImageContainer) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageContainer#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        ImageContainer,
        newLabel,
        showImageContainer,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            let james = await showImageContainer(
                "james",
                ["m01-body", "m01-eyes", "m01-mouth"],
                {
                    xAlign: 0.5,
                    yAlign: 1,
                },
            );
        },
        () => {
            canvas.removeAllTickers();
            let tickerId = canvas.animate<ImageContainer>("james", {
                xAlign: 0,
                yAlign: 1,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "m01-body",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                    },
                    {
                        alias: "m01-eyes",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                    },
                    {
                        alias: "m01-mouth",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ShowImageContainerExample />

## Add [#add]

To add a group of images to the canvas, use the [`addImageCointainer`](/jsdoc/pixi-vn/index/functions/addImageCointainer) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        addImageCointainer,
        canvas,
        ImageContainer,
        newLabel,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            let james = await addImageCointainer(
                "james",
                ["m01-body", "m01-eyes", "m01-mouth"],
                {
                    xAlign: 0.5,
                    yAlign: 1,
                },
            );
        },
        async () => {
            let james = canvas.find<ImageContainer>("james");
            james && (await james.load());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "m01-body",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                    },
                    {
                        alias: "m01-eyes",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                    },
                    {
                        alias: "m01-mouth",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<AddImageContainerExample />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.


# Image (`ImageSprite`) (/start/canvas-image)





The [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component extends the [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) component, so you can use all the methods and properties of [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite). It is used to display a single image on the canvas.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { canvas, ImageSprite } from "@drincs/pixi-vn";

    let alien = new ImageSprite(
        {
            anchor: { x: 0.5, y: 0.5 },
            x: 100,
            y: 100,
        },
        "alien",
    );

    await alien.load();
    canvas.add("alien", alien);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "image",
                "assets": [
                    {
                        "alias": "alien",
                        "src": "./assets/image/eggHead.png"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) component, [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) adds the following features:

* [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load): Loads the image URL and sets the resulting texture to the component.
* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show an image on the canvas is to use the [`showImage`](/jsdoc/pixi-vn/index/functions/showImage) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showImage } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            // Show the images on the canvas
            let alien1 = await showImage("alien");
            // Show the image with a different alias and position
            let alien2 = await showImage("alien2", "alien", {
                xAlign: 0.5,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "alien",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ImageSpriteShow />

## Add [#add]

To add an image to the canvas, use the [`addImage`](/jsdoc/pixi-vn/index/functions/addImage) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            // Add the images to the canvas
            let alien1 = addImage("alien");
            // Add the image with a different alias and position
            let alien2 = addImage("alien2", "alien", {
                xAlign: 0.5,
            });
        },
        async () => {
            let alien1 = canvas.find<ImageSprite>("alien");
            let alien2 = canvas.find<ImageSprite>("alien2");
            // Load the textures
            alien1 && (await alien1.load());
            alien2 && (await alien2.load());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "alien",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ImageSpriteAdd />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.


# Lights (/start/canvas-lights)



<Callout title="This page is under construction" type="warn">
  Currently, this functionality is not available in Pixi’VN, but we plan to implement it. If you are interested, feel free to write in the chat below!
</Callout>

Having the ability to create light and shadow effects can be very useful in many cases.

![357854550-af5a80c0-6996-4b74-a8b8-36b63c8b825c](https://github.com/user-attachments/assets/1ce47130-322e-4a62-96c0-b5513615545c)

The [PixiJS Lights](https://userland.pixijs.io/lights/docs/index.html) library provides this capability to PixiJS.


# Live2D (/start/canvas-live2d)





<CalloutContainer type="warning">
  <CalloutDescription>
    The Live2D integration is currently in a testing phase and its API may change in future releases.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="What is Live2D?" id="what-is-live2d">
    Live2D is a technology that allows 2D illustrations to move naturally, creating fluid and expressive animations without the need to redraw every frame. Instead of a bone skeleton (as in Spine 2D), a Live2D model is a single illustration whose parts are deformed and blended by **parameters** (angle, eye openness, mouth shape, ...), driven by **motions** (predefined animation clips) and **expressions** (predefined parameter presets, e.g. facial expressions).

    It is widely used in visual novels, games, and interactive applications (especially VTubers) to bring characters to life.

    You can learn more about Live2D on the [official Live2D website](https://www.live2d.com/).
  </Accordion>
</Accordions>

Within your **Pixi’VN** project, you can use the Live2D integration to display and animate Live2D models for your characters.
This integration is a wrapper around [untitled-pixi-live2d-engine](https://github.com/Untitled-Story/untitled-pixi-live2d-engine) — note that this is **not an official PixiJS/Live2D plugin**, but a community-maintained engine that bridges Live2D with PixiJS — allowing you to use its features directly inside your Pixi’VN project.

## Installation [#installation]

To install the Live2D package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-live2d
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-live2d
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-live2d
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-live2d
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CalloutContainer type="error">
  <CalloutDescription>
    `extensions.add(Live2DPlugin)` must be called at startup, in your main file, before `Game.init` is called.
  </CalloutDescription>
</CalloutContainer>

```ts title="main.ts"
import { extensions } from "pixi.js";
import { Live2DPlugin } from "@drincs/pixi-vn-live2d/core";
extensions.add(Live2DPlugin);

Game.init(body, {
    // ...
});
```

<Accordions>
  <Accordion title="ink" id="ink">
    You can enable Live2D hashtag commands in your **ink** scripts by using the [`createLive2DHandler`](/jsdoc/pixi-vn-live2d/ink/functions/createLive2DHandler) function.

    ```ts title="content/ink/hashtag-commands.ts"
    import { addBaseHashtagCommands } from "@drincs/pixi-vn-ink";
    import { createLive2DHandler } from "@drincs/pixi-vn-live2d/ink"; // [!code focus]

    addBaseHashtagCommands({ bundleIds, assetAliasIds });
    createLive2DHandler(); // [!code focus]
    ```

    The `show`, `edit`, and `remove` hashtag commands can also be used with `live2d`, just like with any other canvas element.
  </Accordion>
</Accordions>

## Usage [#usage]

You can use the [`Live2D`](/jsdoc/pixi-vn-live2d/index/classes/Live2D) component just like any other Pixi’VN component. Unlike Spine, a Live2D model doesn't need to be pre-loaded through `Assets.load` — registering the alias with `Assets.add` is enough, since `Live2D` resolves and fetches the model itself.

Because that fetch is asynchronous, the model isn't safe to use until its [`ready`](/jsdoc/pixi-vn-live2d/index/classes/Live2D#ready) promise resolves — `await` it right after construction, before reading anything derived from the loaded model (e.g. its size).

For example:

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/index.ts">
      src/assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="main.ts" groupId="narrative_language"
    import { canvas } from "@drincs/pixi-vn";
    import { Live2D } from "@drincs/pixi-vn-live2d";

    const live2d = new Live2D({
        source: "shizuku",
        xAlign: 0.5,
        yAlign: 1,
        scale: 0.5,
    });
    await live2d.ready;
    canvas.add("shizuku", live2d);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    # show live2d shizuku xAlign 0.5 yAlign 1 scale 0.5
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "shizuku",
                        src: "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Live2DExample />

<Accordions>
  <Accordion title="Motion" id="motion">
    A Live2D model's animations are grouped into **motion groups** (e.g. `idle`, `tap_body`), each containing one or more motion clips. You can start one with the [`motion`](/jsdoc/pixi-vn-live2d/index/classes/Live2D#motion) function; omitting the clip index plays a random clip from the group.

    By default, the model automatically loops its `idle` motion group (Cubism 2) or `Idle` group (Cubism 4) on its own — configurable via the `idleMotionGroup` option — so you only need to call `motion` for a deliberate, one-off animation such as reacting to a tap or a click.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { canvas, newLabel } from "@drincs/pixi-vn";
        import { Live2D } from "@drincs/pixi-vn-live2d";

        export const startLabel = newLabel("start", [
            async () => {
                const live2d = new Live2D({
                    source: "shizuku",
                    xAlign: 0.5,
                    yAlign: 1,
                    scale: 0.5,
                });
                await live2d.ready;
                canvas.add("shizuku", live2d);
            },
            () => {
                canvas.find<Live2D>("shizuku")?.motion("tap_body");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show live2d shizuku xAlign 0.5 yAlign 1 scale 0.5
        # pause
        # play motion tap_body on live2d shizuku
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <MotionExample />
  </Accordion>

  <Accordion title="Expression" id="expression">
    A Live2D model can define multiple **expressions** — presets of parameter values, typically used for facial expressions — which you can switch between at runtime with the [`expression`](/jsdoc/pixi-vn-live2d/index/classes/Live2D#expression) function. As with `motion`, omitting the id picks a random expression.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { canvas, newLabel } from "@drincs/pixi-vn";
        import { Live2D } from "@drincs/pixi-vn-live2d";

        export const startLabel = newLabel("start", [
            async () => {
                const live2d = new Live2D({
                    source: "shizuku",
                    xAlign: 0.5,
                    yAlign: 1,
                    scale: 0.5,
                });
                await live2d.ready;
                canvas.add("shizuku", live2d);
            },
            () => {
                canvas.find<Live2D>("shizuku")?.expression("f01");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show live2d shizuku xAlign 0.5 yAlign 1 scale 0.5
        # pause
        # change expression f01 on live2d shizuku
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ExpressionExample />
  </Accordion>

  <Accordion title="Live2D + motion.js animations" id="motion-js">
    You can combine Live2D motions with Pixi’VN's classic motion-based animations ([`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate)), as shown in the example below.

    For more advanced games, you can also drive Live2D directly from a ticker triggered by events, such as a button press, instead of relying only on predefined sequences.

    ```ts title="content/labels/start.label.ts" groupId="narrative_language"
    import { canvas, newLabel } from "@drincs/pixi-vn";
    import { Live2D } from "@drincs/pixi-vn-live2d";

    export const startLabel = newLabel("start", [
        async () => {
            const live2d = new Live2D({
                source: "shizuku",
                xAlign: 0.3,
                yAlign: 1,
                scale: 0.5,
            });
            await live2d.ready;
            canvas.add("shizuku", live2d);
            canvas.animate(
                live2d,
                [
                    [{ x: canvas.width * 0.7 }, { duration: 2, ease: "linear" }],
                    [{ x: canvas.width * 0.3 }, { duration: 2, ease: "linear" }],
                ],
                { repeat: Infinity },
            );
        },
    ]);
    ```

    <PixiMotionExample />
  </Accordion>

  <Accordion title="Stop motions" id="stop-motions">
    You can stop every motion currently playing on a model — as well as any lipsync audio — with the [`stopMotions`](/jsdoc/pixi-vn-live2d/index/classes/Live2D#stopmotions) function.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { canvas, newLabel } from "@drincs/pixi-vn";
        import { Live2D } from "@drincs/pixi-vn-live2d";

        export const startLabel = newLabel("start", [
            async () => {
                const live2d = new Live2D({
                    source: "shizuku",
                    xAlign: 0.5,
                    yAlign: 1,
                    scale: 0.5,
                });
                await live2d.ready;
                canvas.add("shizuku", live2d);
                live2d.motion("tap_body");
            },
            () => {
                canvas.find<Live2D>("shizuku")?.stopMotions();
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show live2d shizuku xAlign 0.5 yAlign 1 scale 0.5
        # play motion tap_body on live2d shizuku
        # pause
        # stop motions on live2d shizuku
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <StopMotionsExample />
  </Accordion>
</Accordions>


# Animate (motion) (/start/canvas-motion)





Pixi’VN allows developers to animate canvas components using a function called [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate). This function is a re-implementation of the [`animate` function from the `motion` library](https://motion.dev/docs/animate), adapted to use PixiJS tickers for triggering animation events.

<Accordions>
  <Accordion title="What is motion?" id="what-is-motion">
    `motion` is a popular JavaScript library that provides a simple and powerful way to create animations. You can read more about it [here](https://motion.dev/).
  </Accordion>
</Accordions>

## Use [#use]

[`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) is one of the most commonly used functions in Pixi’VN and is designed to be straightforward — though the underlying concept may not be immediately obvious at first. The idea is simple: you define a **target state** for a canvas component (e.g. a position, scale, or opacity) and a **duration**, and Pixi’VN will smoothly transition the component to that state frame by frame. Once the target is reached, the animation ends automatically.

For example, to move a component to position `{ x: 100, y: 50 }` over one second, you pass `{ x: 100, y: 50 }` as the [`keyframes`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#keyframes) and `{ duration: 1 }` as the [`options`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#options). The [`keyframes`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#keyframes) parameter defines *what* to reach; [`options`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#options) defines *how* to get there.

<CalloutContainer type="warning">
  <CalloutDescription>
    [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) internally creates a Ticker. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the <DynamicLink href="/start/canvas-tickers#functions">functions available to control Pixi’VN Tickers</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

## Examples [#examples]

<Accordions>
  <Accordion title="Move" id="move">
    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, ImageSprite, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                const alien = await showImage("alien");
                canvas.animate(alien, { xAlign: 1, yAlign: 0 }, { ease: "easeOut" });
            },
            () =>
                canvas.animate<ImageSprite>(
                    "alien",
                    { xAlign: 1, yAlign: 1 },
                    { ease: "backOut" },
                ),
            () =>
                canvas.animate<ImageSprite>(
                    "alien",
                    { xAlign: 0, yAlign: 1 },
                    { ease: "circIn" },
                ),
            () =>
                canvas.animate<ImageSprite>(
                    "alien",
                    { xAlign: 0, yAlign: 0 },
                    { ease: "linear" },
                ),
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <MoveExample />
  </Accordion>

  <Accordion title="Rotate" id="rotate">
    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                const alien = await showImage("alien", "alien", {
                    align: 0.5,
                    anchor: 0.5,
                });
                canvas.animate(
                    alien,
                    { angle: 360 },
                    { duration: 1, type: "spring", repeat: Infinity, repeatDelay: 0.2 },
                );
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <RotateExample />
  </Accordion>

  <Accordion title="Fade" id="fade">
    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                const alien = await showImage("alien", "alien", {
                    align: 0.5,
                    anchor: 0.5,
                    alpha: 0,
                });
                canvas.animate(alien, { alpha: 1 }, { ease: "linear", duration: 1 });
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <FadeExample />
  </Accordion>

  <Accordion title="Zoom" id="zoom">
    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                const alien = await showImage("alien", "alien", {
                    align: 0.5,
                    anchor: 0.5,
                    scale: 0,
                });
                canvas.animate(
                    alien,
                    { scaleX: 1, scaleY: 1 },
                    { ease: "circInOut", duration: 1 },
                );
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ZoomExample />
  </Accordion>

  <Accordion title="Mirror" id="mirror">
    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                const alien = await showImage("alien", "alien", {
                    align: 0.5,
                    anchor: 0.5,
                });
                canvas.animate(alien, { scaleX: -1 });
            },
            () => canvas.animate("alien", { scaleX: 1 }),
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <MirrorExample />
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Sequence" id="sequence">
    The [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) function can also be used to create sequences of animations.

    To create a sequence, you can pass arrays as properties values in the keyframes object. In this case, you can use the [`times` property](https://motion.dev/docs/animate#times) to specify the timing of each keyframe.

    For example:

    <CodeBlockTabs defaultValue="main.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="main.ts">
        ```ts
        import { canvas, showImage } from "@drincs/pixi-vn";

        const alien = await showImage("alien");
        canvas.animate(
            alien,
            {
                xAlign: [0, 1, 1, 0, 0],
                yAlign: [0, 0, 1, 1, 0],
            },
            { repeat: Infinity, duration: 10 },
        );
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <SequenceExample />
  </Accordion>

  <Accordion title="Timeline sequences" id="timeline-sequences">
    <CalloutContainer type="warning">
      <CalloutDescription>
        This method has some limitations compared to the previous one, such as restrictions on the [`repeat`](https://motion.dev/docs/animate#repeat) property due to the original `motion` library.
      </CalloutDescription>
    </CalloutContainer>

    Another way to create animation sequences with [`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate) is by using a [timeline](https://motion.dev/docs/animate#timeline-sequences). This is useful when you want to chain multiple animations that are not strictly linear. You can provide an array of keyframes, where each keyframe is an object with the properties to animate and their values, along with optional animation options.

    For example:

    <CodeBlockTabs defaultValue="main.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="main.ts">
        ```ts
        import { canvas, showImage } from "@drincs/pixi-vn";

        const alien = await showImage("alien");
        canvas.animate(
            alien,
            [
                [{ xAlign: 0, yAlign: 0 }, { ease: "circInOut" }],
                [{ xAlign: 1, yAlign: 0 }, { ease: "backInOut" }],
                [{ xAlign: 1, yAlign: 1 }, { ease: "linear" }],
                [{ xAlign: 0, yAlign: 1 }, { ease: "anticipate" }],
                [{ xAlign: 0, yAlign: 0 }, { ease: "easeOut" }],
            ],
            { repeat: 10, duration: 10 },
        );
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <MotionSequenceExample />
  </Accordion>

  <Accordion title="Animate PixiJS UI" id="animate-pixijs-ui">
    Pixi’VN also exposes the `animate` function directly from `motion`, which you can import as:

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

    Unlike `canvas.animate`, this function does **not** save the current animation state. This makes it more performant, and it is the right choice for animating <DynamicLink href="/start/interface-pixijs">PixiJS UI</DynamicLink> components — since PixiJS UI elements are not part of Pixi’VN's saved state anyway.
  </Accordion>
</Accordions>


# Properties for positioning (/start/canvas-position)









<CalloutContainer type="info">
  <CalloutTitle>
    References and citations
  </CalloutTitle>

  <CalloutDescription>
    Most of the texts and images on this page were copied from Position Properties – [Pos and Anchor](https://feniksdev.com/renpy-position-properties-pos-and-anchor/) and [align, xycenter, and offset](https://feniksdev.com/renpy-position-properties-align-xycenter-and-offset/). Feniks in these two pages explained very well the properties of Ren'Py positioning, common to many other canvases including Pixi’VN.
  </CalloutDescription>
</CalloutContainer>

Before we get into the different positioning properties, note that Pixi’VN considers the default for all position properties to be `{ x: 0, y: 0 }`, which corresponds to the top-left of the element you’re positioning.

Positive numbers move the element to the right and down. So, something at a position of `{ x: 200, y: 300 }` in the game will be 200 pixels from the left edge of the screen and 300 pixels from the top edge of the screen. Negative numbers move the element left and up relative to their starting position.

[Position](#position-pixel) and [anchor](#anchor-and-pivot) are the main properties you use to move elements around on the screen. It’s important to understand how they work, because most other positioning properties act as some combination of these two.

## Position (pixel) [#position-pixel]

Position is used to position the component using pixel units.

You can modify it with these properties:

* `x`: moves the component left-to-right (along the x-axis)
* `y`: moves the component top-to-bottom (along the y-axis)
* `position`: an object `{ x: number, y: number }`. You can also set both x and y to the same value, e.g. `component.position = 200`.

## Anchor and pivot [#anchor-and-pivot]

The pivot is an offset, expressed in pixels, from the top-left corner of the component. If you have a component whose texture is 100px x 50px, and want to set the pivot point to the center of the image, you'd set your pivot to (50, 25) - half the width, and half the height.

Anchors are specified in percentages, from 0.0 to 1.0, in each dimension. It has the same utility as the pivot, but to deduce the point where it is located it calculates the percentage of the height and width of the texture. For example, to rotate around the center point of a texture using anchors, you'd set your component's anchor to (0.5, 0.5) - 50% in width and height. Anchors compared to Pivot are easier to use.

You can modify it with these properties:

* `anchor`: an object `{ x: number, y: number }`. You can also set both x and y to the same value, e.g. `conponent.anchor = 0.5`.
* `pivot`: is an object that corresponds to `{ x: number, y: number }`.

<Accordions>
  <Accordion title="What, exactly, is anchor/pivot?" id="what-exactly-is-anchor-pivot">
    Let’s think of it in terms of something you may be more familiar with. Instead of positioning an element on a screen, you are trying to pin a photo onto a cork board. You have three things:

    * a cork board
    * a push pin
    * a photograph

    Let’s pretend that 1mm is equal to 1 pixel on a computer screen.

        <img alt="17351596389764883495402859713640" src="__img0" />

    * The cork board is the screen, or the container you’re trying to position the element inside.
    * The photograph is the element.
    * Where you put the pin on the photo is the anchor/pivot of the photograph.
    * Where you push the pin into on the cork board is the position of the photograph.

    By default in Pixi’VN, the push pin always starts in the top left corner of the photo, so to speak. If you want the top-left corner of the photo 200mm from the left side of the cork board, you will put it at x 200. If you also want the top-left corner 300mm down from the top of the board, you will put it at y 300.

        <img alt="17351597056618553068745888144175" src="__img1" />

    What if you want the center of the photo at 200mm x 300mm?

    This means you need to move where the pin is relative to the photo. The pin will stay at the point (200, 300) on the cork board – you just need to center the photo around that point as well. This means you need to change the anchor/pivot of the photo.

    To set the anchor point of the photo to the center of the photo, you can use anchor (0.5, 0.5) or pivot (100, 150)
  </Accordion>
</Accordions>

## Position with percentage [#position-with-percentage]

Pixi’VN introduces the ability to position a component by percentage. Its operation is very similar to that of html.

In practice, the percentage will be multiplied by the height or width of the parent component to calculate the position in pixels.

You can modify it with these properties:

* `percentageX`: for moving things left-to-right (along the x-axis)
* `percentageY`: for moving things top-to-bottom (along the y-axis).
* `percentagePosition`: an object `{ x: number, y: number }`. You can also set both x and y to the same value, e.g. `conponent.align = 0.5`.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showImage } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            await showImage("egg_head", "egg_head", {
                percentagePosition: 0.5,
                anchor: 0.5,
            });
            await showImage("flower_top", "flower_top", {
                percentagePosition: 0,
            });
            await showImage("panda", "panda", {
                percentageX: 1,
                percentageY: 0,
                anchor: { x: 1, y: 0 },
            });
            await showImage("skully", "skully", {
                percentageX: 0,
                percentageY: 1,
                anchor: { x: 0, y: 1 },
            });
            await showImage("helmlok", "helmlok", {
                percentagePosition: 1,
                anchor: 1,
            });
            await showImage("bunny", "bunny", {
                percentageX: 0.5,
                percentageY: 1,
                anchor: { x: 0.5, y: 1 },
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                    {
                        alias: "flower_top",
                        src: "https://pixijs.com/assets/flowerTop.png",
                    },
                    { alias: "panda", src: "https://pixijs.com/assets/panda.png" },
                    {
                        alias: "skully",
                        src: "https://pixijs.com/assets/skully.png",
                    },
                    {
                        alias: "helmlok",
                        src: "https://pixijs.com/assets/helmlok.png",
                    },
                    { alias: "bunny", src: "https://pixijs.com/assets/bunny.png" },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PositionwithpercentageExample />

## Align [#align]

Until now we have seen positioning methods influenced by [anchor/pivot](#anchor-and-pivot). The disadvantage of these methods is that if for example you want to add your component to the center of the screen you will first have to set the anchor to 0.5 and then set the position to half the width and height of the screen. This is where the align property comes in.

Align is a feature originally created for &#x2A;**Ren'Py***, which was also introduced in Pixi’VN. Align combines [position](#position-pixel) and [anchor/pivot](#anchor-and-pivot) to give you a more intuitive way to position your components at the beginning, in the center or in the end of the screen.

Align are specified in percentages, from 0.0 to 1.0, in each dimension. For example if you use 0.25 as a percentage, your component will be positioned at 25% of the screen with anchor at 0.25.

You can modify it with these properties:

* `xAlign`: for moving things left-to-right (along the x-axis)
* `yAlign`: for moving things top-to-bottom (along the y-axis).
* `align`: an object `{ x: number, y: number }`. You can also set both x and y to the same value, e.g. `conponent.align = 0.5`.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showImage } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            await showImage("egg_head", "egg_head", { align: 0.5 });
            await showImage("flower_top", "flower_top", { align: 0 });
            await showImage("panda", "panda", { xAlign: 1, yAlign: 0 });
            await showImage("skully", "skully", { xAlign: 0, yAlign: 1 });
            await showImage("helmlok", "helmlok", { align: 1 });
            await showImage("bunny", "bunny", { xAlign: 0.5, yAlign: 1 });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "egg_head",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                    {
                        alias: "flower_top",
                        src: "https://pixijs.com/assets/flowerTop.png",
                    },
                    { alias: "panda", src: "https://pixijs.com/assets/panda.png" },
                    {
                        alias: "skully",
                        src: "https://pixijs.com/assets/skully.png",
                    },
                    {
                        alias: "helmlok",
                        src: "https://pixijs.com/assets/helmlok.png",
                    },
                    { alias: "bunny", src: "https://pixijs.com/assets/bunny.png" },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<AlignExample />


# Spine 2D (/start/canvas-spine2d)





<Accordions>
  <Accordion title="What is Spine 2D?" id="what-is-spine-2d">
    Spine 2D is a powerful 2D animation software specifically designed for game development. It uses a skeletal animation system, meaning that characters and objects are animated through a hierarchy of **bones** that control the movement of attached parts.

    You can learn more about Spine 2D on the [official Spine 2D website](https://it.esotericsoftware.com/).
  </Accordion>
</Accordions>

Within your **Pixi’VN** project, you can use the Spine 2D integration to create complex and smooth animations for your characters and objects.
This integration is essentially a wrapper around the official [Spine 2D runtime for PixiJS](https://it.esotericsoftware.com/spine-pixi), allowing you to use all Spine 2D features directly inside your Pixi’VN project.

## Installation [#installation]

To install the Spine 2D package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-spine
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-spine
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-spine
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-spine
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CalloutContainer type="error">
  <CalloutDescription>
    The library must be imported when the game is initialized, so that it can be used inside Lazy components.
  </CalloutDescription>
</CalloutContainer>

```ts title="main.ts"
import "@drincs/pixi-vn-spine";

Game.init(body, {
    // ...
});
```

<Accordions>
  <Accordion title="ink" id="ink">
    You can enable Spine 2D hashtag commands in your **ink** scripts by using the [`createSpineHandler`](/jsdoc/pixi-vn-spine/ink/functions/createSpineHandler) function.

    ```ts title="content/ink/hashtag-commands.ts"
    import { addBaseHashtagCommands } from "@drincs/pixi-vn-ink";
    import { createSpineHandler } from "@drincs/pixi-vn-spine/ink"; // [!code focus]

    addBaseHashtagCommands({ bundleIds, assetAliasIds });
    createSpineHandler(); // [!code focus]
    ```

    The `show`, `edit`, and `remove` hashtag commands can also be used with `spine`, just like with any other canvas element.
  </Accordion>
</Accordions>

## Usage [#usage]

You can use the [`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine) component just like any other Pixi’VN component.
However, you must first load the Spine 2D assets (**skeleton** and **atlas**) before using it.

For example:

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/index.ts">
      src/assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="main.ts" groupId="narrative_language"
    import { Assets, canvas } from "@drincs/pixi-vn";
    import { Spine } from "@drincs/pixi-vn-spine";

    await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
    const spine = new Spine({
        atlas: "spineboyAtlas",
        skeleton: "spineboySkeleton",
        xAlign: 0.5,
        yAlign: 1,
        animation: "idle",
    });
    canvas.add("boy", spine);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    # show spine boy skeleton spineboySkeleton atlas spineboyAtlas xAlign 0.5 yAlign 1 animation idle
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "spineboySkeleton",
                        src: "https://raw.githubusercontent.com/EsotericSoftware/spine-runtimes/4.3/examples/spineboy/export/spineboy-pro.skel",
                    },
                    {
                        alias: "spineboyAtlas",
                        src: "https://raw.githubusercontent.com/EsotericSoftware/spine-runtimes/4.3/examples/spineboy/export/spineboy-pma.atlas",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<SpineExample />

<Accordions>
  <Accordion title="Skin" id="skin">
    A Spine model can have multiple skins, and you can switch between them at runtime by using the [`setSkin`](/jsdoc/pixi-vn-spine/index/classes/Spine#setskin) function.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
        import { Spine } from "@drincs/pixi-vn-spine";

        export const startLabel = newLabel("start", [
            async () => {
                await Assets.load(["goblinsSkeleton", "goblinsAtlas"]);
                const spine = new Spine({
                    atlas: "goblinsAtlas",
                    skeleton: "goblinsSkeleton",
                    skin: "goblin",
                    xAlign: 0.5,
                    yAlign: 1,
                    animation: "walk",
                });
                canvas.add("goblin", spine);
            },
            () => {
                canvas.find<Spine>("goblin")?.setSkin("goblingirl");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show spine goblin skeleton goblinsSkeleton atlas goblinsAtlas skin goblin xAlign 0.5 yAlign 1 animation walk
        # pause
        # change skin goblingirl on spine goblin
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <SkinExample />
  </Accordion>

  <Accordion title="Animation" id="animation">
    There are two functions you can use to play a Spine animation: [`setAnimation`](/jsdoc/pixi-vn-spine/index/classes/Spine#setanimation) and [`addAnimation`](/jsdoc/pixi-vn-spine/index/classes/Spine#addanimation).

    * [`setAnimation`](/jsdoc/pixi-vn-spine/index/classes/Spine#setanimation) immediately replaces whatever animation is currently playing on the track with the new one.
    * [`addAnimation`](/jsdoc/pixi-vn-spine/index/classes/Spine#addanimation) queues the new animation so that it starts only after the current animation on the track finishes, without interrupting it.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
        import { Spine } from "@drincs/pixi-vn-spine";

        export const startLabel = newLabel("start", [
            async () => {
                await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
                const spine = new Spine({
                    atlas: "spineboyAtlas",
                    skeleton: "spineboySkeleton",
                    xAlign: 0.5,
                    yAlign: 1,
                    animation: "idle",
                });
                canvas.add("boy", spine);
            },
            () => {
                canvas.find<Spine>("boy")?.addAnimation("walk", { loop: true });
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show spine boy skeleton spineboySkeleton atlas spineboyAtlas xAlign 0.5 yAlign 1 animation idle
        # pause
        # play walk on spine boy loop true
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <AnimationExample />
  </Accordion>

  <Accordion title="Spine + motion.js animations" id="motion">
    You can combine Spine animations with Pixi’VN's classic motion-based animations ([`canvas.animate`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#animate)), as shown in the example below.

    For more advanced games, you can also drive Spine animations directly from a ticker triggered by events, such as a button press, instead of relying only on predefined sequences.

    ```ts title="content/labels/start.label.ts" groupId="narrative_language"
    import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
    import { Spine } from "@drincs/pixi-vn-spine";

    export const startLabel = newLabel("start", [
        async () => {
            await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
            const spine = new Spine({
                atlas: "spineboyAtlas",
                skeleton: "spineboySkeleton",
                xAlign: 0,
                yAlign: 1,
                animation: "walk",
            });
            canvas.add("boy", spine);
            canvas.animate(
                spine,
                [
                    [{ xAlign: 1 }, { duration: 1, ease: "linear" }],
                    [{ scaleX: -1 }, { duration: 0.2 }],
                    [{ xAlign: 0 }, { duration: 1, ease: "linear" }],
                    [{ scaleX: 1 }, { duration: 0.2 }],
                ],
                { repeat: Infinity },
            );
        },
    ]);
    ```

    <MotionExample />
  </Accordion>

  <Accordion title="Animation sequence" id="animation-sequence">
    It is also possible to create animation sequences by using the [`playSequence`](/jsdoc/pixi-vn-spine/index/classes/Spine#playsequence) function.

    ```ts title="content/labels/start.label.ts" groupId="narrative_language"
    import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
    import { Spine } from "@drincs/pixi-vn-spine";

    export const startLabel = newLabel("start", [
        async () => {
            await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
            const spine = new Spine({
                atlas: "spineboyAtlas",
                skeleton: "spineboySkeleton",
                xAlign: 0.5,
                yAlign: 1,
            });
            spine.playSequence([["idle", { loop: true, duration: 0.5 }], "jump"], {
                repeat: Infinity,
            });
            canvas.add("boy", spine);
        },
    ]);
    ```

    <AnimationSequenceExample />
  </Accordion>

  <Accordion title="Clear tracks" id="clear-tracks">
    You can remove Spine animations using two methods: [`clearTrack`](/jsdoc/pixi-vn-spine/index/classes/Spine#cleartrack), which clears the animation on a single track, and [`clearTracks`](/jsdoc/pixi-vn-spine/index/classes/Spine#cleartracks), which clears the animations on all tracks.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { Assets, canvas, newLabel } from "@drincs/pixi-vn";
        import { Spine } from "@drincs/pixi-vn-spine";

        export const startLabel = newLabel("start", [
            async () => {
                await Assets.load(["spineboySkeleton", "spineboyAtlas"]);
                const spine = new Spine({
                    atlas: "spineboyAtlas",
                    skeleton: "spineboySkeleton",
                    xAlign: 0,
                    yAlign: 1,
                    animation: "walk",
                });
                canvas.add("boy", spine);
            },
            () => {
                canvas.find<Spine>("boy")?.clearTracks();
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # show spine boy skeleton spineboySkeleton atlas spineboyAtlas x 0 y 1 animation walk
        # pause
        # clear tracks on spine boy
        # pause
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ClearExample />
  </Accordion>
</Accordions>


# Text (`Text`) (/start/canvas-text)





The [`Text`](/jsdoc/pixi-vn/index/classes/Text) component extends the [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text) component, so you can use all the methods and properties of [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text). It is used to display text on the canvas.

```ts title="main.ts"
import { canvas, Text } from "@drincs/pixi-vn";

const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });

canvas.add("text", basicText);
```

Compared to the [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/scene-objects/text) component, [`Text`](/jsdoc/pixi-vn/index/classes/Text) adds the following features:

* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show text on the canvas is to use the [`showText`](/jsdoc/pixi-vn/index/functions/showText) function.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showText } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            let text = await showText("text", "Hello World!", {
                xAlign: 0.5,
                yAlign: 0.5,
            });
            text.style.fontSize = 30;
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<TextCanvas />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.

## Style [#style]

To style the text, use [`TextStyle`](/jsdoc/pixi-vn/index/variables/TextStyle). This class allows you to customize font family, size, color, stroke, shadow, and more.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { canvas, newLabel, Text, TextStyle } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            const skewStyle = new TextStyle({
                fontFamily: "Arial",
                dropShadow: {
                    alpha: 0.8,
                    angle: 2.1,
                    blur: 4,
                    color: "0x111111",
                    distance: 10,
                },
                fill: "#ffffff",
                stroke: { color: "#004620", width: 12, join: "round" },
                fontSize: 60,
                fontWeight: "lighter",
            });

            const skewText = new Text({
                text: "SKEW IS COOL",
                style: skewStyle,
                align: 0.5,
                skew: { x: 0.65, y: -0.3 },
            });

            canvas.add("text", skewText);
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<TextCanvasStyle />


# Three.js (/start/canvas-threejs)



<Callout title="This page is under construction" type="warn">
  Currently, this functionality is not available in Pixi’VN, but we plan to implement it. If you are interested, feel free to write in the chat below!
</Callout>

**What is Three.js?** Three.js is a JavaScript library that makes it easy to render 3D graphics in a web browser. It uses WebGL to render 3D graphics in the browser. Three.js is a popular choice for creating 3D graphics on the web.

You can learn more about Three.js on the [Three.js website](https://threejs.org/).

Having the ability interact with 3D elements can be very useful in many cases.

The [three-pixi](https://pixijs.com/8.x/guides/advanced/mixing-three-and-pixi#example-combining-3d-and-2d-elements) library provides this capability to PixiJS.


# Ticker (/start/canvas-tickers)



Pixi’VN allows you to animate canvas components using tickers.

<Accordions>
  <Accordion title="What is a Ticker?" id="what-is-ticker">
    A ticker is a class that runs on every frame and executes a function. Tickers can be used to animate components, perform transitions, or run any logic that needs to update regularly.
  </Accordion>

  <Accordion title="Differences between Pixi’VN tickers and PixiJS tickers" id="pixijs-ticker-differences">
    Compared to `PixiJS.tickers`, Pixi’VN tickers are classes with a [`fn`](/jsdoc/pixi-vn/index/classes/TickerBase#fn) method that is called every frame. This method is used to animate canvas components. Pixi’VN manages all running tickers, detects when they are no longer needed, and lets you pause, resume, or delete them using various methods.
  </Accordion>
</Accordions>

## Functions [#functions]

To play, pause, or stop a ticker, you must use the functions of the [`canvas`](/jsdoc/pixi-vn/index/variables/canvas).

It is important to keep the following behaviors in mind:

* If a ticker does not have any canvas components associated with it, it will be deleted.
* If you <DynamicLink href="/start/canvas-functions#remove">remove a canvas component</DynamicLink>, your alias will be unlinked from the ticker.
* If you add a canvas component with an alias that already exists, the new component will replace the old one. The new component will inherit the tickers of the old component.

<Accordions>
  <Accordion title="Get" id="get">
    To find a ticker, you must use the [`canvas.findTicker`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#findticker) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", {
                    yAlign: 0.5,
                    xAlign: 0.25,
                    anchor: 0.5,
                });
                await showImage("flower_top", "flower_top", {
                    yAlign: 0.5,
                    xAlign: 0.75,
                    anchor: 0.5,
                });
                let tikerId = canvas.addTicker(
                    ["egg_head", "flower_top"],
                    new RotateTicker({}),
                );
                let ticker = canvas.findTicker(tikerId); // [!code focus]
                console.log(ticker);
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
            Assets.add({
                alias: "flower_top",
                src: "https://pixijs.com/assets/flowerTop.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Remove" id="remove">
    To remove a ticker, you must use the [`canvas.removeTicker`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#removeticker) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import {
            canvas,
            newLabel,
            RotateTicker,
            showImage,
            storage,
        } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", {
                    yAlign: 0.5,
                    xAlign: 0.25,
                    anchor: 0.5,
                });
                await showImage("flower_top", "flower_top", {
                    yAlign: 0.5,
                    xAlign: 0.75,
                    anchor: 0.5,
                });
                let tikerId = canvas.addTicker(
                    ["egg_head", "flower_top"],
                    new RotateTicker({}),
                );
                storage.set("tiker_id", tikerId);
            },
            () => {
                let tikerId = storage.get<string>("tiker_id");
                tikerId && canvas.removeTicker(tikerId); // [!code focus]
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
            Assets.add({
                alias: "flower_top",
                src: "https://pixijs.com/assets/flowerTop.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Sandbox template="zglj8q" entry="/src/labels/startLabel.ts,/src/utils/assets-utility.ts" />
  </Accordion>

  <Accordion title="Pause and resume" id="pause-and-resume">
    To pause a ticker, you must use the [`canvas.pauseTicker`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#pauseticker) function.

    To resume a paused ticker, you must use the [`canvas.resumeTicker`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#resumeticker) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import {
            canvas,
            narration,
            newLabel,
            RotateTicker,
            showImage,
        } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", { align: 0.5, anchor: 0.5 });
                let tikerId = canvas.addTicker(["egg_head"], new RotateTicker({}));
                narration.dialogue = "start";
            },
            () => {
                canvas.pauseTicker("egg_head"); // [!code focus]
                narration.dialogue = "pause";
            },
            () => {
                canvas.resumeTicker("egg_head"); // [!code focus]
                narration.dialogue = "resume";
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Sandbox template="ns726n" entry="/src/labels/startLabel.ts,/src/utils/assets-utility.ts" />
  </Accordion>

  <Accordion title="Force completion at step end" id="force-completion-at-step-end">
    When the animation has a goal to reach, such as a destination, we sometimes need the animation to reach the goal before the current `step` ends.

    To do this, you can use the [`canvas.completeTickerOnStepEnd`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#completetickeronstepend) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, narration, newLabel, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", {
                    yAlign: 0,
                    xAlign: 0,
                    anchor: 0,
                });
                let tikerId = canvas.addTicker(
                    ["egg_head"],
                    new MoveTicker({
                        destination: { x: 1, y: 0, type: "align" },
                        speed: 1,
                    }),
                );
                tikerId && canvas.completeTickerOnStepEnd({ id: tikerId }); // [!code focus]
            },
            () => {
                narration.dialogue = "complete";
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Sandbox template="7zgqr6" entry="/src/labels/startLabel.ts,/src/utils/assets-utility.ts" />
  </Accordion>

  <Accordion title="Sequence" id="sequence">
    If you want to run a sequence of tickers, you can use the [`canvas.addTickersSequence`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#addtickerssequence) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", { anchor: 0.5 });
                let tikerId = canvas.addTickersSequence("egg_head", [
                    new MoveTicker({
                        destination: { x: 0.5, y: 0.5, type: "align" },
                    }),
                    new RotateTicker({ speed: 2, clockwise: false }, 2),
                ]);
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Sandbox template="k3wj6d" entry="/src/labels/startLabel.ts,/src/utils/assets-utility.ts" />
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Create your own ticker" id="create-your-own-ticker">
    Creating your own ticker is simple: extend the [`TickerBase`](/jsdoc/pixi-vn/index/classes/TickerBase) class, override the [`fn`](/jsdoc/pixi-vn/index/classes/TickerBase#fn) method, and implement your logic.

    Then, decorate the class with the [`@tickerDecorator`](/jsdoc/pixi-vn/index/functions/tickerDecorator) decorator. The decorator can take a string as the ticker's alias; if not provided, the class name is used.

    For example:

    ```typescript title="canvas/tickers/RotateTicker.ts"
    import {
        canvas,
        Container,
        TickerBase,
        tickerDecorator,
        TickerValue,
    } from "@drincs/pixi-vn";

    @tickerDecorator() // or @tickerDecorator('RotateTicker')
    export default class RotateTicker extends TickerBase<{
        speed?: number;
        clockwise?: boolean;
    }> {
        fn(
            t: TickerValue,
            args: {
                speed?: number;
                clockwise?: boolean;
            },
            aliases: string[],
        ): void {
            let speed = args.speed === undefined ? 0.1 : args.speed;
            let clockwise = args.clockwise === undefined ? true : args.clockwise;
            aliases.forEach((alias) => {
                let component = canvas.find(alias);
                if (component && component instanceof Container) {
                    if (clockwise) component.rotation += speed * t.deltaTime;
                    else component.rotation -= speed * t.deltaTime;
                }
            });
        }
    }
    ```
  </Accordion>

  <Accordion title="Run a ticker" id="run-a-ticker">
    To add a ticker you must use the [`canvas.addTicker`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#addticker) function.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { canvas, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showImage("egg_head", "egg_head", {
                    yAlign: 0.5,
                    xAlign: 0.25,
                    anchor: 0.5,
                });
                await showImage("flower_top", "flower_top", {
                    yAlign: 0.5,
                    xAlign: 0.75,
                    anchor: 0.5,
                });
                let tikerId = canvas.addTicker(
                    ["egg_head", "flower_top"],
                    new RotateTicker({}),
                );
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { Assets } from "@drincs/pixi-vn";

        export async function defineAssets() {
            Assets.add({
                alias: "egg_head",
                src: "https://pixijs.com/assets/eggHead.png",
            });
            Assets.add({
                alias: "flower_top",
                src: "https://pixijs.com/assets/flowerTop.png",
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Sandbox template="vfqzch" entry="/src/labels/startLabel.ts,/src/utils/assets-utility.ts" />
  </Accordion>
</Accordions>


# Transitions (/start/canvas-transition)





Pixi’VN provides various transition effects to show or remove a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink>, as well as the ability to [create your own transitions](#custom-functionality).

<Accordions>
  <Accordion title="Dissolve" id="dissolve">
    The dissolve transition:

    * When showing a component, gradually increases its `alpha`. If a component with the same alias exists, it will be removed when the new component's transition is complete.
    * When removing a component, gradually decreases its `alpha`.

    The [`showWithDissolve`](/jsdoc/pixi-vn/index/functions/showWithDissolve) function displays a canvas element with a dissolve transition.

    The [`removeWithDissolve`](/jsdoc/pixi-vn/index/functions/removeWithDissolve) function removes a canvas element with a dissolve transition.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import {
            newLabel,
            removeWithDissolve,
            showWithDissolve,
        } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showWithDissolve("alien", "egg_head");
                await showWithDissolve("human", {
                    value: ["m01-body", "m01-eyes", "m01-mouth"],
                    options: { scale: 0.5, xAlign: 0.7 },
                });
            },
            async () => {
                await showWithDissolve("alien", "flower_top");
                removeWithDissolve("human");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "egg_head",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flower_top",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <DissolveTransitionExample />
  </Accordion>

  <Accordion title="Fade" id="fade">
    The fade transition:

    * When showing a component, gradually increases its `alpha`. If a component with the same alias exists, the existing component will be removed with a fade-out effect before the new component is shown.
    * When removing a component, gradually decreases its `alpha`.

    The [`showWithFade`](/jsdoc/pixi-vn/index/functions/showWithFade) function displays a canvas element with a fade transition.

    The [`removeWithFade`](/jsdoc/pixi-vn/index/functions/removeWithFade) function removes a canvas element with a fade transition.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, removeWithFade, showWithFade } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await showWithFade("alien", "egg_head", { duration: 5 });
                await showWithFade("human", {
                    value: ["m01-body", "m01-eyes", "m01-mouth"],
                    options: { scale: 0.5, xAlign: 0.7 },
                });
            },
            async () => {
                await showWithFade("alien", "flower_top");
                removeWithFade("human");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "egg_head",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flower_top",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <FadeTransitionExample />
  </Accordion>

  <Accordion title="Move in/out" id="move-in-out">
    The move in/out transition:

    * When showing a component, moves it from outside (right, left, top, or bottom) to its position on the canvas. If a component with the same alias exists, the existing component will be removed with a move-out effect before the new component is shown.
    * When removing a component, moves it from its position to outside the canvas.

    The [`moveIn`](/jsdoc/pixi-vn/index/functions/moveIn) function displays a canvas element with a move-in transition.

    The [`moveOut`](/jsdoc/pixi-vn/index/functions/moveOut) function removes a canvas element with a move-out transition.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { moveIn, moveOut, newLabel } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await moveIn("alien", "egg_head", { direction: "up" });
                await moveIn("human", {
                    value: ["m01-body", "m01-eyes", "m01-mouth"],
                    options: { scale: 0.5, xAlign: 0.7 },
                });
            },
            async () => {
                await moveIn("alien", "flower_top", { direction: "up" });
                moveOut("human");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "egg_head",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flower_top",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <MoveinTransitionExample />
  </Accordion>

  <Accordion title="Push in/out" id="push-in-out">
    The push in/out transition:

    * When showing a component, moves it from outside (right, left, top, or bottom) to its position on the canvas. If a component with the same alias exists, the existing component will be removed with a push-out effect while the new component is moving in.
    * When removing a component, moves it from its position to outside the canvas.

    The [`pushIn`](/jsdoc/pixi-vn/index/functions/pushIn) function displays a canvas element with a push-in transition.

    The [`pushOut`](/jsdoc/pixi-vn/index/functions/pushOut) function removes a canvas element with a push-out transition.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, pushIn, pushOut } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await pushIn("alien", "egg_head");
                await pushIn("human", {
                    value: ["m01-body", "m01-eyes", "m01-mouth"],
                    options: { scale: 0.5, xAlign: 0.7 },
                });
            },
            async () => {
                await pushIn("alien", "flower_top", { direction: "up" });
                pushOut("human");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "egg_head",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flower_top",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <PushinTransitionExample />
  </Accordion>

  <Accordion title="Zoom in/out" id="zoom-in-out">
    The zoom in/out transition:

    * When showing a component, scales it from 0 (from outside the canvas) to its original scale and position. If a component with the same alias exists, the existing component will be removed when the new component's transition is complete.
    * When removing a component, scales it from its original size to 0, moving it outside the canvas.

    The [`zoomIn`](/jsdoc/pixi-vn/index/functions/zoomIn) function displays a canvas element with a zoom-in transition.

    The [`zoomOut`](/jsdoc/pixi-vn/index/functions/zoomOut) function removes a canvas element with a zoom-out transition.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, zoomIn, zoomOut } from "@drincs/pixi-vn";

        export const startLabel = newLabel("start", [
            async () => {
                await zoomIn("alien", "egg_head");
                await zoomIn("human", {
                    value: ["m01-body", "m01-eyes", "m01-mouth"],
                    options: { scale: 0.5, xAlign: 0.7 },
                });
            },
            async () => {
                await zoomIn("alien", "flower_top");
                zoomOut("human");
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "egg_head",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flower_top",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ZoominTransitionExample />
  </Accordion>
</Accordions>

## Custom functionality [#custom-functionality]

<Callout type="info">
  The Pixi’VN Team welcomes new proposals and contributions to make this library even more complete. Feel free to share or propose your transition in the chat below!
</Callout>

Creating your own transition is simple: use <DynamicLink href="/start/canvas-motion">`canvas.animate`</DynamicLink> to define custom effects.

To help you get started, here is a simplified version of [`showWithDissolve`](/jsdoc/pixi-vn/index/functions/showWithDissolve):

```ts title="canvas/transitions/showWithDissolve.ts"
import { canvas, ImageSprite, UPDATE_PRIORITY } from "@drincs/pixi-vn";
import { AnimationOptions } from "@drincs/pixi-vn/motion";

export default async function showWithDissolve(
    alias: string,
    component: ImageSprite,
    props: AnimationOptions = {},
    priority?: UPDATE_PRIORITY,
): Promise<string[] | undefined> {
    let { completeOnContinue = true, ...options } = props;
    // add the new component
    canvas.add(alias, component);
    // edit the properties of the new component
    component.alpha = 0;
    // create the ticker and play it
    let id = canvas.animate(
        alias,
        {
            alpha: 1,
        },
        {
            ...options,
            completeOnContinue,
        },
        priority,
    );
    // load the image if the image is not loaded
    if (component.haveEmptyTexture) {
        await component.load();
    }
    // return the ids of the tickers
    if (id) {
        return [id];
    }
}
```

### Replace or remove the previous component [#replace-or-remove-the-previous-component]

If a component with the same alias already exists, you can let it be replaced, or:

<Accordions>
  <Accordion title="Remove the previous component after completion" id="remove-the-previous-component-after-completion">
    To remove the previous component when the new component's transition is complete, use the <DynamicLink href="/start/canvas-motion">`aliasToRemoveAfter` property</DynamicLink>.

    ```ts title="canvas/transitions/showWithDissolve.ts"
    import { canvas, ImageSprite, UPDATE_PRIORITY } from "@drincs/pixi-vn";
    import { AnimationOptions } from "@drincs/pixi-vn/motion";

    export default async function showWithDissolve(
        alias: string,
        component: ImageSprite,
        props: AnimationOptions = {},
        priority?: UPDATE_PRIORITY,
    ): Promise<string[] | undefined> {
        let { completeOnContinue = true, ...options } = props;
        // check if the alias is already exist // [!code ++]
        let oldComponentAlias: string | undefined = undefined; // [!code ++]
        let oldComponent = canvas.find(alias); // [!code ++]
        if (oldComponent) {
            // [!code ++]
            oldComponentAlias = alias + "_temp_disolve"; // [!code ++]
            canvas.editAlias(alias, oldComponentAlias); // [!code ++]
        } // [!code ++]
        // add the new component and transfer the properties of the old component to the new component
        canvas.add(alias, component);
        oldComponent?.parent?.setChildIndex(
            oldComponent,
            oldComponent.parent.getChildIndex(oldComponent) - 0.1,
        ); // [!code ++]
        oldComponentAlias &&
            canvas.copyCanvasElementProperty(oldComponentAlias, alias); // [!code ++]
        oldComponentAlias &&
            canvas.transferTickers(oldComponentAlias, alias, "duplicate"); // [!code ++]
        // edit the properties of the new component
        component.alpha = 0;
        // create the ticker and play it
        let id = canvas.animate(
            alias,
            {
                alpha: 1,
            },
            {
                ...options,
                completeOnContinue,
            },
            priority,
        );
        // load the image if the image is not loaded
        if (component.haveEmptyTexture) {
            await component.load();
        }
        // return the ids of the tickers
        if (id) {
            return [id];
        }
    }
    ```
  </Accordion>

  <Accordion title="Remove the previous component with a transition" id="remove-the-previous-component-with-a-transition">
    To remove the previous component with a transition, run another animation with <DynamicLink href="/start/canvas-motion">`canvas.animate`</DynamicLink> and use the <DynamicLink href="/start/canvas-motion">`tickerIdToResume` property</DynamicLink>.

    ```ts title="canvas/transitions/showWithFade.ts"
    import { canvas, ImageSprite, UPDATE_PRIORITY } from "@drincs/pixi-vn";
    import { AnimationOptions } from "@drincs/pixi-vn/motion";

    export default async function showWithDissolve(
        alias: string,
        component: ImageSprite,
        props: AnimationOptions = {},
        priority?: UPDATE_PRIORITY,
    ): Promise<string[] | undefined> {
        let { completeOnContinue = true, ...options } = props;
        // check if the alias is already exist // [!code ++]
        let oldComponentAlias: string | undefined = undefined; // [!code ++]
        let oldComponent = canvas.find(alias); // [!code ++]
        if (oldComponent) {
            // [!code ++]
            return showWithDissolve(alias, component, props, priority); // [!code ++]
        } // [!code ++]
        let oldComponentAlias = alias + "_temp_fade"; // [!code ++]
        canvas.editAlias(alias, oldComponentAlias); // [!code ++]
        // add the new component and transfer the properties of the old component to the new component // [!code ++]
        canvas.add(alias, component);
        oldComponent?.parent?.setChildIndex(
            oldComponent,
            oldComponent.parent.getChildIndex(oldComponent) - 0.1,
        ); // [!code ++]
        oldComponentAlias &&
            canvas.copyCanvasElementProperty(oldComponentAlias, alias); // [!code ++]
        oldComponentAlias &&
            canvas.transferTickers(oldComponentAlias, alias, "duplicate"); // [!code ++]
        // edit the properties of the new component
        component.alpha = 0;
        // create the ticker and play it
        let id = canvas.animate(
            alias,
            {
                alpha: 1,
            },
            {
                ...options,
                completeOnContinue,
            },
            priority,
        );
        if (id) {
            // [!code ++]
            // pause the ticker // [!code ++]
            canvas.pauseTicker({ id: id }); // [!code ++]
            // remove the old component // [!code ++]
            canvas.animate(
                // [!code ++]
                alias, // [!code ++]
                {
                    // [!code ++]
                    alpha: 0, // [!code ++]
                }, // [!code ++]
                {
                    // [!code ++]
                    ...options, // [!code ++]
                    tickerIdToResume: id, // [!code ++]
                    aliasToRemoveAfter: oldComponentAlias, // [!code ++]
                    completeOnContinue, // [!code ++]
                }, // [!code ++]
                priority, // [!code ++]
            ); // [!code ++]
        } // [!code ++]
        // load the image if the image is not loaded
        if (component.haveEmptyTexture) {
            await component.load();
        }
        // return the ids of the tickers
        if (id) {
            return [id];
        }
    }
    ```
  </Accordion>
</Accordions>


# Video (`VideoSprite`) (/start/canvas-video)





The [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite) component extends the [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component, so you can use all the methods and properties of [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite). It is used to display a single video on the canvas.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { canvas, VideoSprite } from "@drincs/pixi-vn";

    let video = new VideoSprite(
        {
            anchor: { x: 0.5, y: 0.5 },
            x: 100,
            y: 100,
        },
        "film",
    );

    await video.load();
    canvas.add("my_video", video);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "video",
                "assets": [
                    {
                        "alias": "film",
                        "src": "https://pixijs.com/assets/video.mp4"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component, [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite) adds the following features:

* [`loop`](/jsdoc/pixi-vn/index/classes/VideoSprite#loop): Indicates if the video should loop after it finishes.
* [`paused`](/jsdoc/pixi-vn/index/classes/VideoSprite#paused): Indicates if the video is paused.
* [`pause`](/jsdoc/pixi-vn/index/classes/VideoSprite#pause): Method to pause the video.
* [`play`](/jsdoc/pixi-vn/index/classes/VideoSprite#play): Method to play the video.
* [`currentTime`](/jsdoc/pixi-vn/index/classes/VideoSprite#currenttime): The current time of the video.
* [`restart`](/jsdoc/pixi-vn/index/classes/VideoSprite#restart): Method to restart the video from the beginning.

## Show [#show]

The simplest way to show a video on the canvas is to use the [`showVideo`](/jsdoc/pixi-vn/index/functions/showVideo) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showVideo } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            // Show the videos on the canvas
            let video1 = await showVideo("video");
            // Show the video with a different alias and position
            let video2 = await showVideo("video2", "video", {
                xAlign: 0.5,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<VideoSpriteShow />

## Add [#add]

To add an video to the canvas, use the [`addVideo`](/jsdoc/pixi-vn/index/functions/addVideo) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { addVideo, canvas, VideoSprite, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            // Add the videos to the canvas
            let video1 = addVideo("video");
            // Add the video with a different alias and position
            let video2 = addVideo("video2", "video", {
                xAlign: 0.5,
            });
        },
        async () => {
            let video1 = canvas.find<VideoSprite>("video");
            let video2 = canvas.find<VideoSprite>("video2");
            // Load the textures
            video1 && (await video1.load());
            video2 && (await video2.load());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<VideoSpriteAdd />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.

## Play and pause [#play-and-pause]

Use [`play`](/jsdoc/pixi-vn/index/classes/VideoSprite#play) and [`pause`](/jsdoc/pixi-vn/index/classes/VideoSprite#pause) methods, or set the [`paused`](/jsdoc/pixi-vn/index/classes/VideoSprite#paused) property.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        narration,
        newLabel,
        showVideo,
        VideoSprite,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            narration.dialogue = "add video";
            await showVideo("video");
        },
        async () => {
            narration.dialogue = "pause video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.pause();
                // or: video.paused = true
            }
        },
        async () => {
            narration.dialogue = "resume video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.play();
                // or: video.paused = false
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<VideoSpritePlayPause />

## Looping [#looping]

Set the [`loop`](/jsdoc/pixi-vn/index/classes/VideoSprite#loop) property to make the video repeat.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showVideo } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            let video = await showVideo("video");
            video.loop = true;
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<VideoSpriteLooping />

## Restart [#restart]

Use the [`restart`](/jsdoc/pixi-vn/index/classes/VideoSprite#restart) method to restart playback.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        narration,
        newLabel,
        showVideo,
        VideoSprite,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            narration.dialogue = "add video";
            await showVideo("video");
        },
        async () => {
            narration.dialogue = "restart video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.restart();
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<VideoSpriteRestart />


# Canvas (WebGL/WebGPU) (/start/canvas)







Pixi’VN uses [PixiJS](https://pixijs.com/8.x/guides/basics/what-pixijs-is) — a 2D WebGL/WebGPU rendering engine — to draw everything on screen. The Pixi’VN API wraps PixiJS to let you add, update, and remove images, text, and animations while automatically keeping track of the canvas state, so it can be saved and restored correctly across game saves and loads.

<Accordions>
  <Accordion title="What is PixiJS?" id="what-is-pixijs">
    PixiJS is the fastest, most lightweight 2D library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL and WebGPU. It is fast, flexible, and easy to use. PixiJS is used in games like [Good Pizza, Great Pizza](https://www.goodpizzagreatpizza.com/) and [The Enchanted Cave 2](https://store.steampowered.com/app/368610/The_Enchanted_Cave_2/).

    You can learn more about PixiJS on the [PixiJS website](https://www.pixijs.com/).
  </Accordion>
</Accordions>

## Use [#use]

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/canvas">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

To interact with the PixiJS application, you can use the `canvas` element, which acts as a wrapper. With it, you can add the set of <DynamicLink href="/start/canvas-components">components</DynamicLink> provided by Pixi’VN and start <DynamicLink href="/start/canvas-animations-effects">animations</DynamicLink>.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { canvas, Sprite } from "@drincs/pixi-vn"; // [!code focus]

    export const startLabel = newLabel("start", [
        () => {
            let sprite = new Sprite({}); // [!code focus]
            canvas.add("sprite", sprite); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Other features [#other-features]

<Accordions>
  <Accordion title="Use PixiJS directly" id="use-pixijs-directly">
    <CalloutContainer type="info">
      <CalloutTitle>
        CDN
      </CalloutTitle>

      <CalloutDescription>
        In CDN-based environments like CodePen, you cannot install pixi.js, but you will have to use the `@drincs/pixi-vn/pixi.js` submodule.
      </CalloutDescription>
    </CalloutContainer>

    If you are using build tools such as Vite.js or similar systems, you can directly install and use the `pixi.js` package.

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install pixi.js
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add pixi.js
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add pixi.js
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add pixi.js
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    This is useful when creating <DynamicLink href="/start/interface#adding-pixijs-ui-layers">UI layers with PixiJS</DynamicLink> or for <DynamicLink href="/start/minigames">creating minigames</DynamicLink>.

    ```ts
    import { canvas } from "@drincs/pixi-vn";
    import { Graphics } from "pixi.js";

    const graphic = new Graphics().rect(0, 0, 200, 100).fill(0xff0000);

    const container = canvas.addLayer("ui");
    container.addChild(graphic);
    ```

    Although not recommended, you can use [`canvas.app`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#app) to directly access the PixiJS application used by Pixi’VN.

    ```ts
    import { canvas } from "@drincs/pixi-vn";
    import { Graphics } from "pixi.js";

    const graphic = new Graphics().rect(0, 0, 200, 100).fill(0xff0000);

    canvas.app.stage.addChild(graphic);
    ```
  </Accordion>

  <Accordion title="Differences between Pixi’VN and PixiJS" id="pixijs-differences">
    Using the canvas in Pixi’VN is very similar to PixiJS, with the following differences:

    * All components added to the canvas are linked to an <DynamicLink href="/start/canvas-alias">alias</DynamicLink> of your choice. This alias is used to identify and manipulate the component.
    * Pixi’VN saves the current canvas state at each `step`.
      &#x2A;*Note:** Only components linked to an alias are saved. If you add components directly to [`canvas.app`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#app), they will not be included in the saved state.
    * Pixi’VN provides <DynamicLink href="/start/canvas-functions">various functions</DynamicLink> to add, remove, find, and manipulate components in the canvas.
    * Pixi’VN offers <DynamicLink href="/start/canvas-components">custom components</DynamicLink>, some of which correspond to PixiJS components, while others add new features.
    * Tickers are managed by Pixi’VN. If you use a PixiJS ticker, its state will not be saved.
    * To add event listeners and save their state in saves, it is recommended to read <DynamicLink href="/start/canvas-functions#add-a-listener-for-a-given-event">here</DynamicLink>.
  </Accordion>

  <Accordion title="PixiJS DevTools" id="pixijs-devtools">
    [**PixiJS DevTools**](https://pixijs.io/devtools/) is a [Chrome extension](https://chromewebstore.google.com/detail/pixijs-devtools/dlkffcaaoccbofklocbjcmppahjjboce) that allows you to inspect and debug PixiJS applications. You can use it to view the display list, inspect textures, and debug your PixiJS application. PixiJS DevTools works with Pixi’VN, allowing you to inspect the canvas.

        <img alt="devtools" src="__img0" />

    After installing PixiJS DevTools, open Chrome DevTools (F12) and go to the `PixiJS` tab.

        <img alt="image" src="__img1" />
  </Accordion>

  <Accordion title="Renderer" id="renderer">
    PixiJS supports various rendering backends, including WebGL and WebGPU. Pixi’VN detects the best available renderer for the user's device and uses it by default. However, you can specify a preferred renderer in the [`Game.init`](/jsdoc/pixi-vn/index/namespaces/Game/functions/init) method.

    For example:

    ```ts
    Game.init({
        // ...
        preference: "webgpu",
    });
    ```
  </Accordion>

  <Accordion title="Error handling" id="error-handling">
    To handle errors related to the canvas, you can use the [`drawCanvasErrorHandler`](/jsdoc/pixi-vn/index/functions/drawCanvasErrorHandler) handler provided by Pixi’VN. This handler will draw an error message on the canvas when an error linked to the canvas component occurs. You can use it in the [`Game.addOnError`](/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnError) function.

    ```ts title="main.ts"
    import { Game, drawCanvasErrorHandler } from "@drincs/pixi-vn";

    Game.addOnError(drawCanvasErrorHandler());
    ```
  </Accordion>

  <Accordion title="Pause" id="pause">
    It is possible to pause the main layer used for the game by using the [`canvas.pause()`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#pause) function. This will pause all animations and tickers associated with the canvas. To resume execution, you can use [`canvas.resume()`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#resume).

    The pause state of the canvas is not saved in game saves, so if the canvas is paused when a save is created, it will resume execution when the save is loaded.

    This function is useful for pausing the canvas while displaying settings or other menus, and not for creating pause effects during gameplay.
  </Accordion>
</Accordions>


# Characters (/start/character)



**What are `characters`?** Characters are the actors that appear in a visual novel. In Pixi’VN, characters are created using the [`CharacterBaseModel`](/jsdoc/pixi-vn/index/classes/CharacterBaseModel) class or a [custom class](#custom-class).

## Initialize [#initialize]

To initialize a character, create a new instance of the [`CharacterBaseModel`](/jsdoc/pixi-vn/index/classes/CharacterBaseModel) class (or your [custom class](#custom-class)) and add it to the game character dictionary when the game is initialized.

<CalloutContainer type="info">
  <CalloutDescription>
    It is recommended to import the instances at project startup.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="warning">
  <CalloutDescription>
    [`RegisteredCharacters.add`](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/add) is **required** to save the characters in the game.
  </CalloutDescription>
</CalloutContainer>

```ts title="content/characters.ts"
import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

export const liam = new CharacterBaseModel("liam", {
    name: "Liam",
    surname: "Smith",
    age: 25,
    icon: "https://example.com/liam.png",
    color: "#9e2e12",
});

export const emma = new CharacterBaseModel("emma", {
    name: "Emma",
    surname: "Johnson",
    age: 23,
    icon: "https://example.com/emma.png",
    color: "#9e2e12",
});

RegisteredCharacters.add([liam, emma]);
```

## Get [#get]

To get a character by its `id`, use the [`RegisteredCharacters.get`](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/get) function.

```typescript
import { RegisteredCharacters } from "@drincs/pixi-vn";

const liam = RegisteredCharacters.get("liam");
```

## Get all [#get-all]

To get all characters, use the [`RegisteredCharacters.values`](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/values) function.

```typescript
import { RegisteredCharacters } from "@drincs/pixi-vn";

const characters = RegisteredCharacters.values();
```

## Use [#use]

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/character#use">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

You can use a game character, for example, to <DynamicLink href="/start/dialogue#set-the-current-dialogue">link it to the current dialogue</DynamicLink>. You can use the character's `id` or the character's instance, but it is recommended to use the instance.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="content/characters.ts">
      content/characters.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { liam } from "@/content/characters";

    narration.dialogue = { character: liam, text: "Hello" };
    // or
    narration.dialogue = { character: "liam_id", text: "Hello" };
    ```
  </CodeBlockTab>

  <CodeBlockTab value="content/characters.ts">
    ```ts
    export const liam = new CharacterBaseModel("liam_id", {
        name: "Liam",
        surname: "Smith",
        age: 25,
        icon: "https://example.com/liam.png",
        color: "#9e2e12",
    });
    RegisteredCharacters.add([liam]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Edit [#edit]

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/character#edit">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

[`CharacterBaseModel`](/jsdoc/pixi-vn/index/classes/CharacterBaseModel) is a <DynamicLink href="/start/stored-classes">stored class</DynamicLink>, which means its properties are saved in <DynamicLink href="/start/storage">game storage</DynamicLink>. For example, if you change the character's name during the game, the new name will be saved in the game storage and linked to its `id`.

<CalloutContainer type="warning">
  <CalloutDescription>
    If the **character's `id` is changed** from one version to another, the system will **not** move the data linked from the previous `id` to the new `id`.
  </CalloutDescription>
</CalloutContainer>

To get the properties used when instantiating the class, you can use the `default` properties.

```ts
import { liam } from "@/content/characters";
console.log(liam.name); // Liam
liam.name = "Liam Smith";
console.log(liam.name); // Liam Smith
```

<Accordions>
  <Accordion title="`CharacterBaseModel`" id="characterbasemodel">
    Here's a simplified implementation of the [`CharacterBaseModel`](/jsdoc/pixi-vn/index/classes/CharacterBaseModel) class for better understanding of the properties that are stored in the game storage:

    ```typescript title="CharacterBaseModel.ts"
    export default class CharacterBaseModel
        extends StoredClassModel
        implements CharacterBaseModelProps
    {
        constructor(id: string, props: CharacterBaseModelProps) {
            super();
            // ...
            this.defaultName = props.name;
            this.icon = props.icon;
            // ...
        }

        // name property is stored in the game storage
        private defaultName: string = "";
        get name(): string {
            return this.getStorageProperty<string>("name") || this.defaultName;
        }
        set name(value: string) {
            this.setStorageProperty("name", value);
        }

        // icon property is not stored in the game storage
        icon: string = "";

        // ...
    }
    ```
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Character emotions" id="character-emotions">
    <CalloutContainer type="info">
      <CalloutTitle>
        *ink*
      </CalloutTitle>

      <CalloutDescription>
        You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/character#character-emotions">here</DynamicLink>.
      </CalloutDescription>
    </CalloutContainer>

    It is often useful to have multiple types of the same character. For example, a character "Alice" and a subtype related to her emotional state, like "Angry Alice". The character and the subtype have the same characteristics, except for one or more properties, such as the icon.

    With Pixi’VN, you can create a "character with an emotion" by passing an [object](/jsdoc/pixi-vn/index/interfaces/CharacterEmotionId) instead of the id:

    ```ts title="content/characters.ts"
    import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

    export const alice = new CharacterBaseModel("alice", {
        name: "Alice",
        icon: "https://example.com/alice.png",
        color: "#9e2e12",
    });

    export const angryAlice = new CharacterBaseModel(
        { id: "alice", emotion: "angry" },
        {
            icon: "https://example.com/angryAlice.png",
        },
    );

    RegisteredCharacters.add([alice, angryAlice]);
    ```

    ```ts title="main.ts"
    console.log(alice.name); // Alice

    alice.name = "Eleonora";
    console.log(alice.name); // Eleonora
    console.log(angryAlice.name); // Eleonora

    angryAlice.name = "Angry Eleonora";
    console.log(alice.name); // Eleonora
    console.log(angryAlice.name); // Angry Eleonora
    ```
  </Accordion>

  <Accordion title="Custom class" id="custom-class">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, the `Character` class is already defined in the file `models/Character.ts`. You can use it directly or modify it to suit your needs.
      </CalloutDescription>
    </CalloutContainer>

    It is recommended to create your own class `Character` that extends [`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass) and "override" the interface [`CharacterInterface`](/jsdoc/pixi-vn/index/interfaces/CharacterInterface) to add, edit, or remove properties or methods.

    For example, if you want to create a class `Character`, you must "override" the interface [`CharacterInterface`](/jsdoc/pixi-vn/index/interfaces/CharacterInterface) to use your properties or methods. (See the file `pixi-vn.d.ts`)

    Now you can create a class `Character` that extends [`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass) and implements the [`CharacterInterface`](/jsdoc/pixi-vn/index/interfaces/CharacterInterface). (For more information on how to create a class in TypeScript, read [the official documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html))

    To create a property that stores its value in the game storage, you can create [Getters/Setters](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters) and use the [`this.getStorageProperty()`](/jsdoc/pixi-vn/index/classes/StoredClassModel#getstorageproperty)/[`this.setStorageProperty()`](/jsdoc/pixi-vn/index/classes/StoredClassModel#setstorageproperty) methods. (See the file `Character.ts`)

    <CodeBlockTabs defaultValue="models/Character.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="models/Character.ts">
          models/Character.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="models/Character.ts">
        ```ts
        import { CharacterInterface, CharacterStoredClass } from "@drincs/pixi-vn";

        export class Character
            extends CharacterStoredClass
            implements CharacterInterface
        {
            constructor(
                id: string | { id: string; emotion: string },
                props: CharacterProps,
            ) {
                super(
                    typeof id === "string" ? id : id.id,
                    typeof id === "string" ? "" : id.emotion,
                );
                this._icon = props.icon;
                this._color = props.color;
                this.defaultName = props.name;
                this.defaultSurname = props.surname;
                this.defaultAge = props.age;
            }

            // Not stored properties

            readonly icon?: string;
            readonly color?: string | undefined;

            // Stored properties

            private defaultName?: string;
            get name(): string {
                return (
                    this.getStorageProperty<string>("name") ||
                    this.defaultName ||
                    this.id
                );
            }
            set name(value: string | undefined) {
                this.setStorageProperty("name", value);
            }
            private defaultSurname?: string;
            get surname(): string | undefined {
                return (
                    this.getStorageProperty<string>("surname") || this.defaultSurname
                );
            }
            set surname(value: string | undefined) {
                this.setStorageProperty("surname", value);
            }
            private defaultAge?: number | undefined;
            get age(): number | undefined {
                return this.getStorageProperty<number>("age") || this.defaultAge;
            }
            set age(value: number | undefined) {
                this.setStorageProperty("age", value);
            }
        }

        interface CharacterProps {
            /**
             * The name of the character.
             */
            name?: string;
            /**
             * The surname of the character.
             */
            surname?: string;
            /**
             * The age of the character.
             */
            age?: number;
            /**
             * The icon of the character.
             */
            icon?: string;
            /**
             * The color of the character.
             */
            color?: string;
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        declare module "@drincs/pixi-vn" {
            interface CharacterInterface {
                /**
                 * The name of the character.
                 * If you set undefined, it will return the default name.
                 */
                name: string;
                /**
                 * The surname of the character.
                 * If you set undefined, it will return the default surname.
                 */
                surname?: string;
                /**
                 * The age of the character.
                 * If you set undefined, it will return the default age.
                 */
                age?: number;
                /**
                 * The icon of the character.
                 */
                readonly icon?: string;
                /**
                 * The color of the character.
                 */
                readonly color?: string;
            }
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Choice menus (/start/choices)





<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find an example of the choice menu UI screen in the <DynamicLink href="/start/interface-examples#choice-menu">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/choices">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

In visual novels, choice menus allow the player to make decisions that affect the story.

In Pixi’VN, you can prompt the player to make a choice. Each choice can either start a `label` or close the choice menu.

## Require the player to make a choice [#require-the-player-to-make-a-choice]

To require the player to make a choice, set [`narration.choices`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#choices) to an array of [`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface). To create a [`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface) object, use:

* [`newChoiceOption`](/jsdoc/pixi-vn/index/functions/newChoiceOption)
* [`newCloseChoiceOption`](/jsdoc/pixi-vn/index/functions/newCloseChoiceOption)

```ts title="content/labels/start.label.ts"
import {
    newChoiceOption,
    newCloseChoiceOption,
    narration,
    newLabel,
} from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    async () => {
        narration.dialogue = "Choose a fruit:";
        narration.choices = [
            // [!code focus]
            newChoiceOption("Orange", orangeLabel, {}), // by default, the label will be called with "call" // [!code focus]
            newChoiceOption("Banana", bananaLabel, {}, { type: "jump" }), // [!code focus]
            newChoiceOption(
                // [!code focus]
                "Apple", // [!code focus]
                appleLabel, // [!code focus]
                { quantity: 5 }, // [!code focus]
                { type: "call" }, // [!code focus]
            ), // [!code focus]
            newCloseChoiceOption("Cancel"), // [!code focus]
        ]; // [!code focus]
    },
    () => {
        narration.dialogue = "Restart";
    },
    async (props) => await narration.jump("start", props),
]);
```

<ChoiceMenus />

## Get [#get]

To get the current choice menu, use [`narration.choices`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#choices). This returns an array of [`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface).

```ts
const menuOptions: StoredChoiceInterface[] = narration.choices;
```

## Request [#request]

To select a choice, use [`narration.selectChoice`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#selectchoice).

```ts
const item = narration.choices![0]; // get the first item

narration
    .selectChoice(item, {
        // Add StepLabelProps here
        navigate: navigate, // example
        // And the props to pass to the label
        ...item.props,
    })
    .then(() => {
        // ...
    })
    .catch((e) => {
        // ...
    });
```

## Remove [#remove]

To clear the choice options, set `narration.choices = undefined`.

```ts
narration.choices = undefined;
```

## Other features [#other-features]

<Accordions>
  <Accordion title="Choices already made" id="choices-already-made">
    To get the choices already made in the current `step`, use [`narration.alreadyCurrentStepMadeChoices`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#alreadycurrentstepmadechoices).

    <CodeBlockTabs defaultValue="hooks/useQueryInterface.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="components/menus/choice-menus.tsx">
          components/menus/choice-menus.tsx
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
        import { narration } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        const CHOICE_MENU_OPTIONS_USE_QUERY_KEY = "choice_menu_options_use_query_key";
        export function useQueryChoiceMenuOptions() {
            return useQuery({
                queryKey: [
                    INTERFACE_DATA_USE_QUERY_KEY,
                    CHOICE_MENU_OPTIONS_USE_QUERY_KEY,
                ],
                queryFn: async () =>
                    narration.choices?.map((option) => ({
                        ...option,
                        text:
                            typeof option.text === "string"
                                ? option.text
                                : option.text.map((text) => text).join(" "),
                        alreadyChosen: // [!code ++]
                            narration.alreadyCurrentStepMadeChoices?.find( // [!code ++]
                                (index) => index === option.choiceIndex, // [!code ++]
                            ) !== undefined, // [!code ++]
                    })) || [],
            });
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="components/menus/choice-menus.tsx">
        ```tsx
        import { Button } from "@/components/ui/button";
        import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
        import { useQueryChoiceMenuOptions } from "@/lib/query/narration-query";
        import { CornerDownLeft } from "lucide-react";

        export function ChoiceMenu() {
            const { data: menu = [] } = useQueryChoiceMenuOptions();
            const { selectChoice } = useNarrationFunctions();

            return (
                <div
                    className="flex flex-col items-center justify-center gap-2 w-full h-full overflow-auto"
                    role="menu"
                >
                    {menu.map((item) => (
                        <div key={`choice-${item.choiceIndex}`}>
                            <Button onClick={() => selectChoice(item)}>
                                {item.alreadyChosen ? "✓ " : ""} // [!code ++]
                                {item.type === "close" && <CornerDownLeft />}
                                {item.text}
                            </Button>
                        </div>
                    ))}
                </div>
            );
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ChoicesAlreadyMade />
  </Accordion>

  <Accordion title="Custom class" id="custom-class">
    You can customize a choice menu option by adding properties to the [`ChoiceInterface`](/jsdoc/pixi-vn/index/interfaces/ChoiceInterface) interface. For example, add an `icon` property to display an icon.

    Override the [`ChoiceInterface`](/jsdoc/pixi-vn/index/interfaces/ChoiceInterface) interface in your `.d.ts` file:

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="components/menus/choice-menus.tsx">
          components/menus/choice-menus.tsx
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        declare module "@drincs/pixi-vn" {
            interface ChoiceInterface {
                icon?: string;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        narration.choices = [
            newChoiceOption("Orange", orangeLabel, {}, { icon: "orange.png" }),
            newChoiceOption("Banana", bananaLabel, {}, { icon: "banana.png" }),
            newChoiceOption("Apple", appleLabel, {}, { icon: "apple.png" }),
        ];
        ```
      </CodeBlockTab>

      <CodeBlockTab value="components/menus/choice-menus.tsx">
        ```tsx
        import { Button } from "@/components/ui/button";
        import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
        import { useQueryChoiceMenuOptions } from "@/lib/query/narration-query";
        import { CornerDownLeft } from "lucide-react";

        export function ChoiceMenu() {
            const { data: menu = [] } = useQueryChoiceMenuOptions();
            const { selectChoice } = useNarrationFunctions();

            return (
                <div
                    className="flex flex-col items-center justify-center gap-2 w-full h-full overflow-auto"
                    role="menu"
                >
                    {menu.map((item) => (
                        <div key={`choice-${item.choiceIndex}`}>
                            {choice.icon && <img src={choice.icon} alt={choice.text} />} // [!code ++]
                            <Button onClick={() => selectChoice(item)}>
                                {item.type === "close" && <CornerDownLeft />}
                                {item.text}
                            </Button>
                        </div>
                    ))}
                </div>
            );
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Dialogue (/start/dialogue)





<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find the example of the narrative dialogue UI screen in the <DynamicLink href="/start/interface-examples#narrative-dialogue">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

**What is dialogue?** A written composition in which two or more characters are represented as conversing.

In Pixi’VN, `dialogue` is an object that contains information about *who* and *what* is currently being said. Its functionality can be broader, as it can also be used for other purposes, such as monologues, soliloquies, or to display a message to the player. For this reason, it is more appropriate to consider it as a text that can be linked to a <DynamicLink href="/start/character#use-characters-in-the-game">character</DynamicLink>.

## Set [#set]

To set the current dialogue, you can use [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue).

```ts title="content/labels/start.label.ts"
import { narration, newLabel } from "@drincs/pixi-vn";
import { eggHead } from "@/content/characters";

export const startLabel = newLabel("start", [
    // A simple dialogue with only text, without a character // [!code focus]
    () => (narration.dialogue = "Hello, world!"), // [!code focus]
    // A dialogue with a character // [!code focus]
    () => {
        narration.dialogue = { // [!code focus]
            character: eggHead, // [!code focus]
            text: "My name is ${eggHead.name}!", // [!code focus]
        }; // [!code focus]
    },
    // A dialogue with a character, but the character is not defined in the characters list // [!code focus]
    () => {
        narration.dialogue = { // [!code focus]
            character: "Narrator", // [!code focus]
            text: "This is a narration without a character.", // [!code focus]
        }; // [!code focus]
    },
]);
```

<CurrentDialogueExample />

## Get [#get]

To get the current dialogue, use [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue). The return value is a [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface).

```ts
const currentDialogue: DialogueInterface = narration.dialogue;
```

## Delete [#delete]

To clear the current dialogue, set [`narration.dialogue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogue) to `undefined`.

```ts
narration.dialogue = undefined;
```

## Other features [#other-features]

<Accordions>
  <Accordion title="Glue" id="dialogue-glue">
    <CalloutContainer type="info">
      <CalloutDescription>
        "Glue" is a feature originally created for &#x2A;**ink***, which was also introduced in Pixi’VN.
      </CalloutDescription>
    </CalloutContainer>

    When "glue" is enabled, the next dialogue will be appended after the current dialogue. You can enable "glue" by setting [`narration.dialogGlue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#dialogglue) to `true`.

    ```ts title="content/labels/start.label.ts"
    import { narration, newLabel } from "@drincs/pixi-vn";

    const startLabel = newLabel("start", [
        () => {
            narration.dialogue = `Hello, my name is Alice and ...`; // [!code focus]
        },
        () => {
            narration.dialogGlue = true; // [!code focus]
            narration.dialogue = `I am a character in this game.`; // [!code focus]
        },
    ]);
    ```

    <DialogueGlueExample />
  </Accordion>

  <Accordion title="Custom class" id="custom-class">
    You can customize the dialogue interface by adding additional properties to the [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface). For example, you can add a `color` property to change the color of the text.

    To do this, "override" the [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface) interface in your `.d.ts` file:

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="content/labels/startLabel.ts">
          content/labels/startLabel.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        declare module "@drincs/pixi-vn" {
            interface DialogueInterface {
                color?: string;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="content/labels/startLabel.ts">
        ```ts
        narration.dialogue = {
            character: "Alice",
            text: "Hello, world!",
            color: "#ff0000",
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Desktop & mobile devices (/start/distribution-desktop-mobile)



There are several ways to distribute your game for desktop and mobile platforms. Common choices include [Tauri](https://v2.tauri.app/), [Ionic](https://ionicframework.com/), [Electron](https://www.electronjs.org/) and [NW.js](https://nwjs.io/).

If you don't want to manage a heavily customized native project, consider using the <DynamicLink href="/start#project-initialization">multi-device templates</DynamicLink>. Those templates include Tauri so you can develop a web app and also build desktop and mobile apps from the same codebase.

## Distributing your game with Tauri [#distributing-your-game-with-tauri]

<Accordions>
  <Accordion title="What is Tauri?" id="what-is-tauri">
    Tauri is a framework for building desktop and mobile applications with web technologies. It leverages **Rust** to produce secure, lightweight, and fast native binaries, while a WebView renders your HTML, CSS, and JavaScript.

    Learn more on the [Tauri website](https://v2.tauri.app/).
  </Accordion>
</Accordions>

Creating releases manually for every platform is difficult: it requires many tools to be installed, and building iOS apps requires a Mac. For these reasons, manual release generation is generally not recommended.

Tauri supports using GitHub Actions to automate release builds. GitHub Actions runs jobs on virtual machines (runners) that you configure with YAML workflow files. In a workflow you define the events that trigger the pipeline (for example, pushing a tag) and the list of commands the runner should execute.

<Accordions>
  <Accordion title="desktop.yml workflow file" id="desktop-yml">
    ```yml title=".github/workflows/desktop.yml"
    name: "Build & Publish Desktop App"

    on:
        push:
            tags:
                - "v*"

    jobs:
        # ── Create the release exactly once before the matrix starts ────────────────
        create-release:
            runs-on: ubuntu-latest
            permissions:
                contents: write
            outputs:
                release_tag: ${{ github.ref_name }}
            steps:
                - uses: actions/checkout@v4

                - name: create release
                  run: |
                      gh release view "${{ github.ref_name }}" 2>/dev/null || \
                      gh release create "${{ github.ref_name }}" \
                        --title "App v$(jq -r '.version' src-tauri/tauri.conf.json)" \
                        --notes "See the assets to download this version and install." \
                        2>/dev/null || \
                      gh release view "${{ github.ref_name }}" > /dev/null
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

        # ── Build and upload per platform ───────────────────────────────────────────
        publish-tauri:
            needs: create-release
            permissions:
                contents: write
            strategy:
                fail-fast: false
                matrix:
                    include:
                        - platform: "macos-latest"
                          args: "--target aarch64-apple-darwin"
                          target: "aarch64-apple-darwin"
                          arch: "aarch64"
                        - platform: "macos-latest"
                          args: "--target x86_64-apple-darwin"
                          target: "x86_64-apple-darwin"
                          arch: "x86_64"
                        - platform: "ubuntu-22.04"
                          args: ""
                          target: ""
                          arch: "x64"
                        - platform: "windows-latest"
                          args: ""
                          target: ""
                          arch: "x64"

            runs-on: ${{ matrix.platform }}
            steps:
                - uses: actions/checkout@v4

                - name: setup node
                  uses: actions/setup-node@v6
                  with:
                      node-version: lts/*

                - name: install Rust stable
                  uses: dtolnay/rust-toolchain@stable
                  with:
                      targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}

                - name: install dependencies (ubuntu only)
                  if: matrix.platform == 'ubuntu-22.04'
                  run: |
                      sudo apt-get update
                      sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf

                - name: install frontend dependencies
                  run: npm i

                - name: build app
                  uses: tauri-apps/tauri-action@v0
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                  with:
                      args: ${{ matrix.args }}

                # ── Linux: .deb + .AppImage (AppImage is already portable) ─────────────
                - name: upload artifacts (Linux)
                  if: matrix.platform == 'ubuntu-22.04'
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                      TAG: ${{ needs.create-release.outputs.release_tag }}
                  run: |
                      upload_file() {
                        local file="$1"
                        local limit=$((1900 * 1024 * 1024))
                        local size; size=$(stat -c%s "$file")
                        if [ "$size" -gt "$limit" ]; then
                          echo "Splitting $(basename "$file") (${size} bytes) into 1.9 GB parts..."
                          split -b 1900m "$file" "${file}.part"
                          for part in "${file}.part"*; do
                            gh release upload "$TAG" "$part" --clobber
                          done
                        else
                          gh release upload "$TAG" "$file" --clobber
                        fi
                      }
                      find src-tauri/target/release/bundle -type f \
                        \( -name "*.deb" -o -name "*.AppImage" -o -name "*.rpm" \) |
                      while IFS= read -r f; do upload_file "$f"; done

                # ── macOS: .dmg installer + portable .app.tar.gz ───────────────────────
                - name: upload artifacts (macOS)
                  if: matrix.platform == 'macos-latest'
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                      TAG: ${{ needs.create-release.outputs.release_tag }}
                  run: |
                      BIN_NAME=$(grep '^name = ' src-tauri/Cargo.toml | head -1 | cut -d'"' -f2)
                      VERSION=$(jq -r '.version' src-tauri/tauri.conf.json)
                      ARCH="${{ matrix.arch }}"
                      BUNDLE_DIR="src-tauri/target/${{ matrix.target }}/release/bundle"

                      upload_file() {
                        local file="$1"
                        local limit=$((1900 * 1024 * 1024))
                        local size; size=$(stat -f%z "$file")
                        if [ "$size" -gt "$limit" ]; then
                          echo "Splitting $(basename "$file") (${size} bytes) into 1.9 GB parts..."
                          split -b 1900m "$file" "${file}.part"
                          for part in "${file}.part"*; do
                            gh release upload "$TAG" "$part" --clobber
                          done
                        else
                          gh release upload "$TAG" "$file" --clobber
                        fi
                      }

                      # DMG installer
                      find "$BUNDLE_DIR/dmg" -name "*.dmg" |
                      while IFS= read -r f; do upload_file "$f"; done

                      # Portable: bundle .app into a tar.gz
                      APP_PATH=$(find "$BUNDLE_DIR/macos" -maxdepth 1 -name "*.app" | head -1)
                      PORTABLE="${BIN_NAME}_${VERSION}_macos_${ARCH}-portable.tar.gz"
                      tar -czf "$PORTABLE" -C "$(dirname "$APP_PATH")" "$(basename "$APP_PATH")"
                      upload_file "$PORTABLE"

                # ── Windows: NSIS/.msi installers + portable .zip ──────────────────────
                - name: upload artifacts (Windows)
                  if: matrix.platform == 'windows-latest'
                  shell: pwsh
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                  run: |
                      $tag  = "${{ needs.create-release.outputs.release_tag }}"
                      $ver  = (Get-Content src-tauri/tauri.conf.json | ConvertFrom-Json).version
                      $name = (Select-String -Path src-tauri/Cargo.toml `
                                -Pattern '^name = "(.+)"').Matches[0].Groups[1].Value

                      function Upload-File($Path, $Tag) {
                        $limitBytes = 1900 * 1MB
                        $item = Get-Item $Path
                        if ($item.Length -gt $limitBytes) {
                          Write-Host "Splitting $($item.Name) ($($item.Length) bytes) into 1.9 GB parts..."
                          $stream = [System.IO.File]::OpenRead($Path)
                          $buf    = New-Object byte[] $limitBytes
                          $i      = 0
                          while (($n = $stream.Read($buf, 0, $buf.Length)) -gt 0) {
                            $part = "$Path.part$($i.ToString('D3'))"
                            $data = if ($n -eq $buf.Length) { $buf } else { $buf[0..($n - 1)] }
                            [System.IO.File]::WriteAllBytes($part, $data)
                            gh release upload $Tag $part --clobber
                            $i++
                          }
                          $stream.Dispose()
                        } else {
                          gh release upload $Tag $Path --clobber
                        }
                      }

                      # NSIS and MSI installers
                      Get-ChildItem -Recurse src-tauri/target/release/bundle -Include "*.exe","*.msi" |
                        ForEach-Object { Upload-File $_.FullName $tag }

                      # Portable ZIP (single EXE, no installer)
                      $zip = "${name}_${ver}_windows_x64-portable.zip"
                      Compress-Archive -Path "src-tauri/target/release/$name.exe" -DestinationPath $zip
                      Upload-File $zip $tag
    ```
  </Accordion>

  <Accordion title="mobile.yml workflow file" id="desktop-yml">
    <CalloutContainer type="info">
      <CalloutTitle>
        Mobile
      </CalloutTitle>

      <CalloutDescription>
        Currently, mobile builds via GitHub Actions are experimental.
      </CalloutDescription>
    </CalloutContainer>

    ```yml title=".github/workflows/mobile.yml"
    name: "Build Mobile App (Debug)"

    on:
        push:
            tags:
                - "v*"
        workflow_dispatch:

    jobs:
        # ── Create the release exactly once before the builds start ──────────────────
        create-release:
            runs-on: ubuntu-latest
            permissions:
                contents: write
            outputs:
                release_tag: ${{ github.ref_name }}
            steps:
                - uses: actions/checkout@v4

                - name: create release
                  run: |
                      gh release view "${{ github.ref_name }}" 2>/dev/null || \
                      gh release create "${{ github.ref_name }}" \
                        --title "App v$(jq -r '.version' src-tauri/tauri.conf.json)" \
                        --notes "See the assets to download this version and install." \
                        2>/dev/null || \
                      gh release view "${{ github.ref_name }}" > /dev/null
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

        # ---------------------------------------------------------------------------
        # Android debug — unsigned APK uploaded to the release
        # ---------------------------------------------------------------------------
        build-android:
            needs: create-release
            runs-on: ubuntu-22.04
            permissions:
                contents: write
            steps:
                - uses: actions/checkout@v4

                - name: setup node
                  uses: actions/setup-node@v4
                  with:
                      node-version: lts/*

                - name: setup Java 17
                  uses: actions/setup-java@v4
                  with:
                      distribution: "zulu"
                      java-version: "17"

                - name: setup Android SDK
                  uses: android-actions/setup-android@v3

                - name: install Android NDK r27
                  run: sdkmanager "ndk;27.0.12077973"

                - name: install Rust stable + Android targets
                  uses: dtolnay/rust-toolchain@stable
                  with:
                      targets: aarch64-linux-android,armv7-linux-androideabi,i686-linux-android,x86_64-linux-android

                - name: install Linux dependencies
                  run: |
                      sudo apt-get update
                      sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf

                - name: install frontend dependencies
                  run: npm i

                - name: init Tauri Android project
                  run: npx tauri android init
                  env:
                      NDK_HOME: ${{ env.ANDROID_HOME }}/ndk/27.0.12077973

                - name: patch Android manifest (landscape + fullscreen)
                  run: |
                      python3 << 'PYEOF'
                      import glob, re

                      manifest = glob.glob('src-tauri/gen/android/app/src/main/AndroidManifest.xml')[0]
                      with open(manifest) as f:
                          content = f.read()
                      # Remove any pre-existing screenOrientation to avoid duplicates
                      content = re.sub(r'\s+android:screenOrientation="[^"]*"', '', content)
                      # Insert screenOrientation directly on the first <activity tag (robust, independent
                      # of which other attributes Tauri generates)
                      patched, n = re.subn(
                          r'(<activity\b)',
                          r'\1\n            android:screenOrientation="sensorLandscape"',
                          content,
                          count=1
                      )
                      if n == 0:
                          print('WARNING: <activity> tag not found in manifest — orientation NOT patched')
                      else:
                          content = patched
                          print(f'Patched {manifest} (screenOrientation=sensorLandscape)')
                      with open(manifest, 'w') as f:
                          f.write(content)

                      # Tauri may generate styles.xml or themes.xml, and both a light (values/)
                      # and dark (values-night/) variant — patch every variant we find so the
                      # fullscreen flag doesn't silently no-op when the device is in dark mode.
                      styles_candidates = (
                          glob.glob('src-tauri/gen/android/app/src/main/res/values*/styles.xml') +
                          glob.glob('src-tauri/gen/android/app/src/main/res/values*/themes.xml')
                      )
                      if not styles_candidates:
                          print('Warning: no styles.xml/themes.xml found, skipping fullscreen patch')
                      else:
                          for styles in styles_candidates:
                              with open(styles) as f:
                                  content = f.read()
                              # Hide status bar (fullscreen) — kept as a best-effort theme hint,
                              # but on targetSdk 35+ (edge-to-edge is enforced by the OS) this
                              # alone has no effect; the real fix is the MainActivity.kt patch below.
                              content = content.replace(
                                  '</style>',
                                  '    <item name="android:windowFullscreen">true</item>\n    </style>',
                                  1
                              )
                              with open(styles, 'w') as f:
                                  f.write(content)
                              print(f'Patched {styles}')

                      # Since this project's Android template targets SDK 35+, edge-to-edge display
                      # is enforced by the OS and the theme-based windowFullscreen flag above no
                      # longer hides the status bar (it's always drawn, transparent, over the
                      # content). The only reliable way to hide it is to hide the system bars at
                      # runtime via WindowInsetsControllerCompat in MainActivity.kt.
                      activity_candidates = glob.glob(
                          'src-tauri/gen/android/app/src/main/**/MainActivity.kt', recursive=True
                      )
                      if not activity_candidates:
                          print('WARNING: MainActivity.kt not found — status bar hiding NOT patched')
                      else:
                          activity = activity_candidates[0]
                          with open(activity) as f:
                              content = f.read()

                          new_imports = [
                              'androidx.core.view.WindowCompat',
                              'androidx.core.view.WindowInsetsCompat',
                              'androidx.core.view.WindowInsetsControllerCompat',
                          ]
                          import_lines = list(re.finditer(r'^import .+$', content, re.MULTILINE))
                          if import_lines:
                              insert_at = import_lines[-1].end()
                              addition = ''.join(
                                  f'\nimport {imp}' for imp in new_imports if imp not in content
                              )
                              content = content[:insert_at] + addition + content[insert_at:]

                          if 'hideSystemBars' not in content:
                              content = content.replace(
                                  'super.onCreate(savedInstanceState)',
                                  'super.onCreate(savedInstanceState)\n    hideSystemBars()',
                                  1
                              )
                              content = re.sub(
                                  r'\n}\s*$',
                                  '\n\n'
                                  '  override fun onWindowFocusChanged(hasFocus: Boolean) {\n'
                                  '    super.onWindowFocusChanged(hasFocus)\n'
                                  '    if (hasFocus) {\n'
                                  '      hideSystemBars()\n'
                                  '    }\n'
                                  '  }\n'
                                  '\n'
                                  '  private fun hideSystemBars() {\n'
                                  '    WindowCompat.setDecorFitsSystemWindows(window, false)\n'
                                  '    val controller = WindowInsetsControllerCompat(window, window.decorView)\n'
                                  '    controller.hide(WindowInsetsCompat.Type.systemBars())\n'
                                  '    controller.systemBarsBehavior =\n'
                                  '      WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE\n'
                                  '  }\n'
                                  '}\n',
                                  content,
                                  count=1
                              )
                          with open(activity, 'w') as f:
                              f.write(content)
                          print(f'Patched {activity} (hide system bars at runtime)')
                      PYEOF

                - name: build Android app
                  run: npx tauri android build --debug
                  env:
                      NDK_HOME: ${{ env.ANDROID_HOME }}/ndk/27.0.12077973

                - name: upload APK to release
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                      TAG: ${{ needs.create-release.outputs.release_tag }}
                  run: |
                      find src-tauri/gen/android -name "*.apk" | while IFS= read -r f; do
                        gh release upload "$TAG" "$f" --clobber
                      done

        # ---------------------------------------------------------------------------
        # iOS debug — unsigned build uploaded to the release (best-effort)
        # ---------------------------------------------------------------------------
        build-ios:
            needs: create-release
            runs-on: macos-latest
            permissions:
                contents: write
            steps:
                - uses: actions/checkout@v4

                - name: setup node
                  uses: actions/setup-node@v4
                  with:
                      node-version: lts/*

                - name: install Rust stable + iOS targets
                  uses: dtolnay/rust-toolchain@stable
                  with:
                      targets: aarch64-apple-ios,aarch64-apple-ios-sim,x86_64-apple-ios

                - name: install frontend dependencies
                  run: npm i

                - name: init Tauri iOS project
                  run: npx tauri ios init

                - name: disable code signing in Xcode project
                  run: |
                      python3 << 'PYEOF'
                      import glob, re
                      pbxproj = glob.glob('src-tauri/gen/apple/*.xcodeproj/project.pbxproj')[0]
                      with open(pbxproj) as f:
                          content = f.read()
                      sign_off = (
                          '\n\t\t\t\tCODE_SIGN_IDENTITY = "";'
                          '\n\t\t\t\tCODE_SIGNING_REQUIRED = NO;'
                          '\n\t\t\t\tCODE_SIGNING_ALLOWED = NO;'
                          '\n\t\t\t\tDEVELOPMENT_TEAM = "";'
                      )
                      content = re.sub(r'(buildSettings = \{)', r'\1' + sign_off, content)
                      with open(pbxproj, 'w') as f:
                          f.write(content)
                      print(f'Patched {pbxproj}')
                      PYEOF

                - name: patch iOS Info.plist (landscape + hide status bar)
                  run: |
                      python3 << 'PYEOF'
                      import glob, re

                      plists = glob.glob('src-tauri/gen/apple/*/Info.plist')
                      if not plists:
                          plists = glob.glob('src-tauri/gen/apple/*/*/Info.plist')
                      for plist in plists:
                          with open(plist) as f:
                              content = f.read()

                          # Remove any existing orientation / status bar keys so we can replace them
                          for key in [
                              'UISupportedInterfaceOrientations',
                              'UISupportedInterfaceOrientations~ipad',
                              'UIStatusBarHidden',
                              'UIViewControllerBasedStatusBarAppearance',
                          ]:
                              content = re.sub(
                                  rf'\s*<key>{re.escape(key)}</key>\s*(<(true|false)/>|<array>.*?</array>)',
                                  '', content, flags=re.DOTALL
                              )

                          additions = (
                              '\t<key>UIStatusBarHidden</key>\n'
                              '\t<true/>\n'
                              '\t<key>UIViewControllerBasedStatusBarAppearance</key>\n'
                              '\t<false/>\n'
                              '\t<key>UISupportedInterfaceOrientations</key>\n'
                              '\t<array>\n'
                              '\t\t<string>UIInterfaceOrientationLandscapeLeft</string>\n'
                              '\t\t<string>UIInterfaceOrientationLandscapeRight</string>\n'
                              '\t</array>\n'
                              '\t<key>UISupportedInterfaceOrientations~ipad</key>\n'
                              '\t<array>\n'
                              '\t\t<string>UIInterfaceOrientationLandscapeLeft</string>\n'
                              '\t\t<string>UIInterfaceOrientationLandscapeRight</string>\n'
                              '\t</array>\n'
                          )
                          new_content, n = re.subn(
                              r'</dict>\s*</plist>\s*$',
                              additions + '</dict>\n</plist>\n',
                              content.rstrip(),
                              flags=re.DOTALL
                          )
                          if n == 0:
                              print(f'WARNING: </dict></plist> not found in {plist} — orientation NOT patched')
                          else:
                              content = new_content
                              print(f'Patched {plist}')
                          with open(plist, 'w') as f:
                              f.write(content)
                      PYEOF

                - name: build iOS app
                  run: npx tauri ios build --debug
                  # Export step fails without a signing team; archive still succeeds.
                  # We extract the .app from the .xcarchive below instead.
                  continue-on-error: true

                - name: package and upload iOS app from archive
                  env:
                      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                      TAG: ${{ needs.create-release.outputs.release_tag }}
                  run: |
                      BIN_NAME=$(grep '^name = ' src-tauri/Cargo.toml | head -1 | cut -d'"' -f2)
                      VERSION=$(jq -r '.version' src-tauri/tauri.conf.json)

                      ARCHIVE=$(find src-tauri/gen/apple/build -name "*.xcarchive" 2>/dev/null | head -1)
                      if [ -z "$ARCHIVE" ]; then
                        echo "No .xcarchive found — build may have failed before archiving"
                        exit 1
                      fi

                      APP=$(find "$ARCHIVE/Products/Applications" -name "*.app" | head -1)
                      if [ -z "$APP" ]; then
                        echo "No .app found inside archive $ARCHIVE"
                        exit 1
                      fi

                      mkdir Payload
                      cp -r "$APP" Payload/
                      IPA="${BIN_NAME}_${VERSION}_ios-debug.ipa"
                      zip -r "$IPA" Payload/
                      gh release upload "$TAG" "$IPA" --clobber
    ```
  </Accordion>
</Accordions>

To trigger this workflow you need a GitHub repository for your project and a Git tag that starts with `v`. For example:

```bash
git tag v1.0.0
git push origin v1.0.0
```

You can follow the workflow runs in the repository's Actions tab.

![Actions section](https://github.com/user-attachments/assets/b39055a9-02a7-472b-930f-daf0a9c6c78b)

At the end of a successful run a GitHub Release will be created. Read more about GitHub Releases [here](https://docs.github.com/repositories/releasing-projects-on-github/viewing-your-repositorys-releases-and-tags).


# itch.io (/start/distribution-itchio)



You can distribute your game on [itch.io](https://itch.io/). It is a platform that allows you to upload your game and distribute it to the public. It is a great platform to distribute your game and get feedback from the community.

## Game playable in browser [#game-playable-in-browser]

On itch.io you can enable the "This file will be played in the browser" flag for an uploaded file to make it playable in the browser.

<Accordions>
  <Accordion title="Uploading the dist folder does not work" id="dist-folder-does-not-work">
    Only a single html or js file can be executed and not a directory. So, uploading a zip of the generated `dist` folder from a build will not work. For example, if you try, you will see a result of something like this:

    ![image](https://github.com/user-attachments/assets/0482a6fa-8c21-4fa6-b4e1-04f05bc4315d)
  </Accordion>
</Accordions>

Instead, you need to <DynamicLink href="/start/distribution-website#hosting-and-deploying">host the game on a server</DynamicLink> and then upload to itch.io a single html file containing an iframe that points to the URL where the game is hosted.

For example, after hosting the game on a server, you can create a index.html file with the following content:

```html title="index.html"
<!doctype html>
<html lang="en" style="height: 100%; width: 100%;">
  <head></head>
  <body
    style="height: 100%; width: 100%; display: flex; overflow: hidden; margin: 0; background-color: #242424;"
  >
    <div id="root"
      style="height: 100%; width: 100%;"
    >
      <iframe
        src="https://pixi-vn-visual-novel-example.pages.dev/"
        style="height: 100%; width: 100%; border: none;"
        allowfullscreen
      >
      </iframe>
    </div>
  </body>
</html>
```

Then you can upload the index.html file to itch.io.


# Reddit (/start/distribution-reddit)



<CalloutContainer type="warning">
  <CalloutTitle>
    Work in progress
  </CalloutTitle>

  <CalloutDescription>
    This page is a work in progress. More detailed instructions on distributing a Pixi’VN game on Reddit will be added soon.
  </CalloutDescription>
</CalloutContainer>

[Reddit](https://www.reddit.com/) is one of the largest communities on the web, with subreddits dedicated to almost every topic — including a large and active gaming audience.

Beyond talking about games, Reddit also lets you publish small, interactive games directly inside posts through the **Reddit Developer Platform** (Devvit). These "Reddit apps" are nothing more than web projects: they run inside a webview embedded in a post, built with the same web technologies Pixi’VN already uses.

This means a Pixi’VN game can be distributed as a playable Reddit post the same way it can be <DynamicLink href="/start/distribution-website">hosted on any website</DynamicLink>, reaching Reddit's audience directly without requiring players to leave the platform.

For more information about building and publishing games on Reddit, see the official documentation: [Reddit Developer Platform — Introduction to games](https://developers.reddit.com/docs/introduction/intro-games).


# Steam (/start/distribution-steam)



<CalloutContainer type="info">
  <CalloutTitle>
    Mobile
  </CalloutTitle>

  <CalloutDescription>
    Steam is not supported on iOS or Android — the feature is automatically disabled on those targets.
  </CalloutDescription>
</CalloutContainer>

The multiplatform template includes a **ready-to-use Steam integration** built on [Tauri](https://tauri.app/) and the Rust crate [`steamworks`](https://crates.io/crates/steamworks) (a wrapper around the Steamworks SDK). Everything is opt-in: the feature is excluded from the build by default and adds zero overhead when unused.

## Enabling Steam support [#enabling-steam-support]

Edit `steam_appid.txt` in the repo root and replace the value with your real Steam App ID.\
Use `480` (Spacewar) for local testing without a published app.

```txt title="steam_appid.txt"
480
```

Open `src-tauri/Cargo.toml` and add `steam` to the default features list:

```toml title="src-tauri/Cargo.toml"
default = ["steam"]
```

Alternatively, pass `--features steam` to any `cargo` or `tauri build` command without touching the file.

The `steamworks` Rust crate already ships the native redistributable libraries for all platforms — **nothing to download manually**. The `build.rs` in this template copies the correct file into `src-tauri/` automatically during compilation.

### Bundling for distribution [#bundling-for-distribution]

To include the library in the final installer you need to tell Tauri to bundle it. Create a platform-specific config file for the platform you are targeting — you only need the one(s) that apply to you:

<CodeBlockTabs defaultValue="Windows">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Windows">
      Windows
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="MacOS">
      MacOS
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Linux">
      Linux
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Windows">
    ```json  title="src-tauri/tauri.windows.conf.json"
    {
        "bundle": { "resources": ["steam_api64.dll"] }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="MacOS">
    ```json  title="src-tauri/tauri.macos.conf.json"
    {
        "bundle": { "resources": ["libsteam_api.dylib"] }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Linux">
    ```json  title="src-tauri/tauri.linux.conf.json"
    {
        "bundle": { "resources": ["libsteam_api.so"] }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Tauri v2 merges the matching file into `tauri.conf.json` automatically at build time. Create only the files for the platforms you want to distribute on — one, two, or all three.

## API [#api]

Import the `steam` namespace from `@/lib/steam` and call any function directly.\
All functions are safe to call even when Steam is unavailable or the app runs in a browser: they simply return `null` / `false` / `0` without throwing.

<Accordions>
  <Accordion title="`General`" id="general">
    **`steam.isAvailable()`** returns `true` when the Steam client is running and the SDK is initialised. Use it to gate any Steam-specific UI or logic.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const available = await steam.isAvailable();
        if (available) {
            console.log("Steam is running");
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.getPlayerName()`** returns the display name of the logged-in Steam user, or `null` if Steam is unavailable.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const name = await steam.getPlayerName();
        if (name) {
            console.log(`Welcome, ${name}!`);
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.getAppId()`** returns the numeric App ID of the running application as registered on Steamworks, or `null` if Steam is unavailable.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const appId = await steam.getAppId();
        console.log(`Running app: ${appId}`);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Achievements" id="achievements">
    **`steam.unlockAchievement(id)`** unlocks and persists an achievement. The `id` must match the API Name set in the Steamworks Partner dashboard.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="***ink***">
          ***ink***
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.unlockAchievement("FIRST_WIN");
        ```
      </CodeBlockTab>

      <CodeBlockTab value="***ink***">
        ```ts
        # unlock achievement {achievementId}
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.isAchievementUnlocked(id)`** returns `true` if the user has already unlocked the given achievement. Use it to avoid showing unlock animations more than once.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const unlocked = await steam.isAchievementUnlocked("FIRST_WIN");
        if (!unlocked) {
            await steam.unlockAchievement("FIRST_WIN");
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.clearAchievement(id)`** resets an achievement back to locked. This is intended for development and QA only — do not call it in production.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.clearAchievement("FIRST_WIN");
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Stats" id="stats">
    **`steam.setStatInt(name, value)`** writes an integer stat. Changes are staged locally; call `storeStats()` to commit them to Steam.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.setStatInt("TOTAL_KILLS", 42);
        await steam.storeStats();
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.getStatInt(name)`** reads an integer stat. Returns `0` if the stat does not exist or Steam is unavailable.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const kills = await steam.getStatInt("TOTAL_KILLS");
        console.log(`Total kills: ${kills}`);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.setStatFloat(name, value)`** writes a float stat. Same staging behaviour as `setStatInt` — requires `storeStats()` to persist.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.setStatFloat("ACCURACY", 0.87);
        await steam.storeStats();
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.getStatFloat(name)`** reads a float stat. Returns `0` if the stat does not exist or Steam is unavailable.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const accuracy = await steam.getStatFloat("ACCURACY");
        console.log(`Accuracy: ${(accuracy * 100).toFixed(1)}%`);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.storeStats()`** commits all pending stat changes to Steam. Achievement unlock functions call this automatically, but you must call it manually after `setStatInt` or `setStatFloat`.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.setStatInt("GAMES_PLAYED", current + 1);
        await steam.storeStats();
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="DLC" id="dlc">
    **`steam.isDlcInstalled(appId)`** returns `true` if the user owns and has installed the DLC identified by the given App ID. Use it to gate DLC content at runtime.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        const hasDlc = await steam.isDlcInstalled(1234560);
        if (hasDlc) {
            // unlock DLC chapter
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Overlay" id="overlay">
    **`steam.openOverlay(dialog)`** opens the Steam overlay to a specific page. Accepted values are `"achievements"`, `"friends"`, `"community"`, `"stats"`, `"settings"`, `"officialgamegroup"`, and `"players"`.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        await steam.openOverlay("achievements");
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **`steam.openStore(appId?)`** opens the Steam Store page for this game. Pass a different `appId` to link to another app, for example a DLC or a sequel.

    <CodeBlockTabs defaultValue="JavaScript/TypeScript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="JavaScript/TypeScript">
          JavaScript/TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="JavaScript/TypeScript">
        ```ts
        import { steam } from "@/lib/steam";

        // Open the store page for this game
        await steam.openStore();

        // Open the store page for a specific DLC
        await steam.openStore(1234560);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Base implementation [#base-implementation]

For reference, the base implementation is located in `src-tauri/src/steam.rs` and the API is exposed to the frontend via Tauri's `invoke` system in `src-tauri/src/lib.rs`.

<CodeBlockTabs defaultValue="src-tauri/Cargo.toml">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="src-tauri/Cargo.toml">
      src-tauri/Cargo.toml
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src-tauri/src/lib.rs">
      src-tauri/src/lib.rs
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="src-tauri/Cargo.toml">
    ```toml
    [features]
    default = []          # change to ["steam"] to enable
    steam = ["dep:steamworks"]

    [dependencies]
    steamworks = { version = "0.13", optional = true }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src-tauri/src/lib.rs">
    ```rust
    #[cfg(all(feature = "steam", not(target_os = "ios"), not(target_os = "android")))]
    mod steam;

    // inside run():
    #[cfg(all(feature = "steam", not(target_os = "ios"), not(target_os = "android")))]
    {
        builder = builder
            .manage(steam::SteamClient { client: Mutex::new(steam::try_init()) })
            .invoke_handler(tauri::generate_handler![
                steam::steam_is_available,
                steam::steam_get_player_name,
                steam::steam_get_app_id,
                steam::steam_unlock_achievement,
                steam::steam_is_achievement_unlocked,
                steam::steam_clear_achievement,
                steam::steam_set_stat_int,
                steam::steam_get_stat_int,
                steam::steam_set_stat_float,
                steam::steam_get_stat_float,
                steam::steam_store_stats,
                steam::steam_is_dlc_installed,
                steam::steam_open_overlay,
                steam::steam_open_store,
            ]);
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Website (/start/distribution-website)





Your Pixi’VN game can be distributed as a website, allowing players to access it directly in their web browsers. This is a great way to reach a wider audience, as no downloads or installations are required.\
To do this, you need to [host the game on a server](#hosting-and-deploying).

## Hosting and deploying [#hosting-and-deploying]

You can use various hosting services like [Cloudflare Pages](https://pages.cloudflare.com/), [Vercel](https://vercel.com/), or [Netlify](https://www.netlify.com/). These platforms offer free plans and have similar setup processes.

<Accordions>
  <Accordion title="Cloudflare Pages" id="cloudflare-pages">
    This guide uses Cloudflare Pages as an example for hosting, deploying automatically via GitHub Actions whenever you push to a dedicated `deploy` branch.

    1. [Create a Cloudflare account](https://dash.cloudflare.com/sign-up) and a Pages project, if you haven't already.
    2. In your Cloudflare dashboard, generate an API token with the `Cloudflare Pages: Edit` permission, and note your Account ID.
    3. In your GitHub repository settings, add them as repository secrets named `CF_API_TOKEN` and `CF_ACCOUNT_ID`.
    4. Add the following workflow to your repository:

    ```yaml title=".github/workflows/deploy.yml"
    name: Deploy to Cloudflare Pages

    on:
        push:
            branches: [deploy]

    jobs:
        build:
            runs-on: ubuntu-latest
            steps:
                - uses: actions/checkout@v4
                - name: Use Node.js
                  uses: actions/setup-node@v3
                  with:
                      node-version: 20
                - name: Install and build
                  run: |
                      npm install
                      npm run build
                - name: Archive Build
                  uses: actions/upload-artifact@v4
                  with:
                      name: dist
                      path: dist

        deploy:
            name: Deploy
            needs: build
            runs-on: ubuntu-latest
            steps:
                - uses: actions/checkout@v4
                - name: Download Build
                  uses: actions/download-artifact@v4
                  with:
                      name: dist
                      path: dist
                - name: Deploy
                  uses: cloudflare/wrangler-action@v3
                  with:
                      apiToken: ${{ secrets.CF_API_TOKEN }}
                      accountId: ${{ secrets.CF_ACCOUNT_ID }}
                      command: pages deploy dist --project-name=your-project-name --branch=main
    ```

    Replace `your-project-name` with your Cloudflare Pages project name, then push to the `deploy` branch to trigger your first deployment.
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Enable PWA features (Add to Home Screen)" id="pwa">
        <img alt="image" src="__img0" />

    Enabling installation as a "browser application" allows users to use your game as a standalone app on their device.

    If you use [Vite js](https://vitejs.dev/) as your build tool, you can add the [PWA Vite Plugin](https://vite-pwa-org.netlify.app/).

    ```ts title="vite.config.ts"
    import { defineConfig } from "vite";
    import { VitePWA } from "vite-plugin-pwa";

    export default defineConfig(() => ({
        plugins: [
            VitePWA({
                manifest: {
                    name: "my-app-project-name",
                    short_name: "my-app-package-name",
                    description: "my-app-description",
                    theme_color: "#ffffff",
                    start_url: "/",
                    display: "fullscreen",
                    orientation: "landscape",
                    icons: [
                        // ...
                    ],
                },
            }),
        ],
    }));
    ```
  </Accordion>
</Accordions>


# Distribution (/start/distribution)



How you plan to distribute your game is one of the most important decisions to make before development starts: it determines which players you can reach and how they'll play the game.

Since Pixi’VN games are built with JavaScript/TypeScript, they can natively be distributed on **any device capable of running a browser** — which already covers a huge range of platforms. Discord, for example, is a JavaScript/TypeScript project shipped as a desktop app, a web app, and a mobile app — the same is possible for your game.

For desktop and mobile, you can go a step further and cut out some of those layers by wrapping your game with a thin Rust layer (via <DynamicLink href="/start/distribution-desktop-mobile">Tauri</DynamicLink>): it packages your existing JavaScript/TypeScript code into a lightweight native binary, improving performance over a browser-based build without requiring you to write any Rust yourself.

<CalloutContainer type="info">
  <CalloutDescription>
    Beyond that, it's also possible — though considerably more involved — to target embedded systems, letting you reach devices that don't support a browser at all.
  </CalloutDescription>
</CalloutContainer>

Pick the distribution channel that best fits your game:

* <DynamicLink href="/start/distribution-website">
    Website (native support)
  </DynamicLink>
  * <DynamicLink href="/start/distribution-itchio">itch.io</DynamicLink>-
    <DynamicLink href="/start/distribution-reddit">Reddit</DynamicLink>
* <DynamicLink href="/start/distribution-desktop-mobile">
    Desktop & Mobile devices
  </DynamicLink>
  * <DynamicLink href="/start/distribution-steam">
      Steam
    </DynamicLink>


# Flags management (/start/flags)



Pixi’VN provides functions to manage "game flags". Game flags are boolean values used to control the flow of the game or to store other boolean value in the game storage.

This mechanic has much less impact on save size than using the normal storage, so it is recommended to use flags for boolean values that are frequently changed.

## Set [#set]

To set a flag, use the [`storage.setFlag`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#setflag) function.

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

storage.setFlag("flag1", true);
```

## Get [#get]

To get a flag, use the [`storage.getFlag`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#getflag) function.

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

const flag1 = storage.getFlag("flag1");
```


# History (/start/history)



<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find an example of the history UI screen in the <DynamicLink href="/start/interface-examples#history">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    Nomenclature
  </CalloutTitle>

  <CalloutDescription>
    In this documentation, the term "narrative history" refers to the list of all dialogues, choices, and more that have been shown to the player.
  </CalloutDescription>
</CalloutContainer>

Pixi’VN saves all dialogues, choices, responses, and more at every `step` executed during the game. This makes it possible to navigate back to previous steps, letting the player review past events or revisit earlier choices.

## Get [#get]

To get the narrative history, use [`stepHistory.narrativeHistory`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#narrativehistory).

```ts
const dialogues: NarrativeHistory[] = stepHistory.narrativeHistory;
```

## Remove [#remove]

To delete all narrative history, use [`stepHistory.removeNarrativeHistory`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#removenarrativehistory).

```ts
stepHistory.removeNarrativeHistory();
```

To delete part of the narrative history, pass a number to remove the first N elements:

```ts
// Delete the first 2 elements
stepHistory.removeNarrativeHistory(2);
```

## Other features [#other-features]

<Accordions>
  <Accordion title="Limit of saved `steps`" id="limit-saved-steps">
    At each `step`, all information about the current game state is saved.

    To prevent the save file from growing too large, there is a limit on the number of `steps` saved. By default, only the last 20 `steps` are saved, but you can increase this limit (e.g., to 100). When the limit is reached, only essential information from older `steps` is kept. This allows you to display the full <DynamicLink href="/start/history">narrative history</DynamicLink>, but you cannot <DynamicLink href="/start/labels-flow#go-back">return</DynamicLink> to a specific `step` beyond the limit.

    You can change the `step` save limit by setting the [`stepHistory.stepLimitSaved`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#steplimitsaved) property.

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

    stepHistory.stepLimitSaved = 100;
    ```

    To disable the `step` save limit, set [`stepHistory.stepLimitSaved`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#steplimitsaved) to `Infinity`.

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

    stepHistory.stepLimitSaved = Infinity;
    ```
  </Accordion>
</Accordions>


# Hotkeys (/start/hotkeys)



Hotkeys let players trigger actions directly from the keyboard, such as quick saving, skipping dialogue, or controlling a <DynamicLink href="/start/minigames">minigame</DynamicLink>. Rather than managing `window.addEventListener("keydown", ...)` calls yourself, it is recommended to use [TanStack Hotkeys](https://tanstack.com/hotkeys/latest), a library that turns keyboard input into a typed command system with scopes, sequences, held keys, and conflict detection.

<CalloutContainer type="info">
  <CalloutDescription>
    A list of hotkeys commonly used in visual novels (quick save, quick load, history, settings, ...) is available in the <DynamicLink href="/faq#hotkeys">FAQ</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Installation" id="installation">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, the TanStack Hotkeys package is already installed.
      </CalloutDescription>
    </CalloutContainer>

    TanStack Hotkeys ships a separate package for each framework. For a React project, install:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @tanstack/react-hotkeys
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @tanstack/react-hotkeys
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @tanstack/react-hotkeys
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @tanstack/react-hotkeys
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Vue, Angular, and Lit adapters are also available — swap `@tanstack/react-hotkeys` for the package of your framework.
  </Accordion>
</Accordions>

## Usage [#usage]

Register a hotkey with the `useHotkey` hook:

```tsx
import { useHotkey } from "@tanstack/react-hotkeys";

useHotkey("Mod+S", () => {
    quickSave();
});
```

The `Mod` modifier automatically resolves to `Meta` (Cmd) on macOS and `Control` on Windows/Linux, so the same code works across platforms.

## Scoping and enabling conditionally [#scoping-and-enabling-conditionally]

`useHotkey` is a hook, so it registers the shortcut when the component mounts and cleans it up automatically when the component unmounts — you don't need to remove the listener yourself, unlike a manual `window.addEventListener`.

Use the `target` option to limit a hotkey to a specific element, and `enabled` to turn it on or off based on your game state, for example while a minigame is running:

```tsx
const panelRef = useRef<HTMLDivElement>(null);

useHotkey("Escape", () => closePanel(), { target: panelRef });
useHotkey("ArrowUp", () => setDirection(0, -1), { enabled: !gameOver });
```

## Learn more [#learn-more]

TanStack Hotkeys also supports key sequences (e.g. "G then D"), held keys, conflict detection, and a devtools panel. See the [official documentation](https://tanstack.com/hotkeys/latest) for the full feature set.


# Quick start (/start)



You can start using Pixi’VN by [initializing a new project](#project-initialization) or [installing the package](#installation) in an existing project.

<Accordions>
  <Accordion title="Prerequisites" id="prerequisites">
    Before starting, you must have the following tools installed:

    * [Node.js](https://nodejs.org/) version 18 or higher.
    * Text editor with TypeScript support, such as:
      * [Visual Studio Code](https://code.visualstudio.com/)
      * [Cursor](https://www.cursor.com/)
      * [VSCodium](https://vscodium.com/)
    * (Recommended) [Git](https://git-scm.com/)
      * A [GitHub account](https://github.com/) - You will be able to use Copilot (Al assistant), auto-generation of packages to distribute and add comments to the wiki
  </Accordion>
</Accordions>

## Project initialization [#project-initialization]

If you want to start from a new project, you can use the following command to initialize a new project with the Pixi’VN templates:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm create pixi-vn@latest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bunx create-pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can see the list of available templates and interactive demos <DynamicLink href="/start/templates">here</DynamicLink>.

After the project is initialized, open the project directory with your text editor (VSCode is recommended) and start developing your project.

## Installation [#installation]

To install the Pixi’VN package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="CDN version" id="cdn-installation">
    You can also use the CDN version of this plugin:

    <CodeBlockTabs defaultValue="script tag">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="script tag">
          script tag
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="map import">
          map import
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="js import">
          js import
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="script tag">
        ```html  title="index.html"
        <script src="https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm"></script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="map import">
        ```html  title="index.html"
        <script type="importmap">
            {
                "imports": {
                    "@drincs/pixi-vn@<version>": "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn/+esm"
                }
            }
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="js import">
        ```js  title="index.js"
        import pixivn from "https://cdn.jsdelivr.net/npm/@drincs/pixi-vn@<version>/+esm";
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <iframe
      src="https://codepen.io/BlackRam-oss/embed/oNrqgNd?default-tab=js%2Cresult"
      height="300"
      style="{
      width: &#x22;100%&#x22;,
  }"
      title="Pixi’VN"
      loading="lazy"
      allowFullScreen="true"
    />
  </Accordion>

  <Accordion title="Vite.js plugin" id="vite-plugin">
    For a better developer experience, use [`vitePluginPixivn`](/jsdoc/pixi-vn/vite/functions/vitePluginPixivn) and [`setupPixivnViteData`](/jsdoc/pixi-vn/vite-listener/functions/setupPixivnViteData).

    <CodeBlockTabs defaultValue="vite.config.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="vite.config.ts">
          vite.config.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="vite.config.ts">
        ```ts
        import { defineConfig } from "vite";
        import { vitePluginPixivn } from "@drincs/pixi-vn/vite";
        export default defineConfig({
            // ...
            plugins: [
                // other plugins...
                vitePluginPixivn(),
            ],
        });
        ```
      </CodeBlockTab>

      <CodeBlockTab value="main.ts">
        ```ts
        import { setupPixivnViteData } from "@drincs/pixi-vn/vite-listener"; // [!code focus]

        await Promise.all([import("./values"), import("./labels")]);
        await Promise.all([initializeIndexedDB(), defineAssets(), useI18n()]);
        setupPixivnViteData(); // [!code focus]
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Error handling" id="error-handling">
    To handle errors in Pixi’VN, you can use the [`Game.addOnError`](/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnError) function. This function takes a callback that will be called whenever an error occurs in the game.
  </Accordion>

  <Accordion title="Agent Skills" id="agent-skills">
    Pixi’VN ships a set of [Agent Skills](https://www.skills.sh/) that teach AI coding assistants (like Claude Code) how to correctly use each part of the engine. If you use Claude Code, you can install all of them into your project with:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx skills add DRincs-Productions/pixi-vn --all
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx skills add DRincs-Productions/pixi-vn --all
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx skills add DRincs-Productions/pixi-vn --all
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x skills add DRincs-Productions/pixi-vn --all
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

### Initialize [#initialize]

Before using the Pixi’VN engine, you must initialize the game. You can do this by calling the [`Game.init`](/jsdoc/pixi-vn/index/namespaces/Game/functions/init) method.

```ts title="src/main.tsx"
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));
```

```html title="index.html"
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Game</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
```

```css title="styles.css"
html,
body {
    background-color: #242424;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}
```


# Input prompt (/start/input)





<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find an example of the input prompt dialog UI in the <DynamicLink href="/start/interface-examples#input-prompt">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/input">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

In visual novels, you may need to ask the player to enter text, numbers, dates, or other values.

Pixi’VN provides functions to handle input prompts. The developer can require the player to enter a value (the game will not continue until a value is provided), while the <DynamicLink href="/start/interface">UI</DynamicLink> is responsible for displaying the prompt.

## Request [#request]

To prompt the player for input, use the [`narration.requestInput`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#requestinput) function.

```ts title="content/labels/start.label.ts"
import { narration, newLabel } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Hello";
    },
    () => {
        narration.dialogue = "What is your name?";
        narration.requestInput({ type: "string" });
    },
    () => {
        narration.dialogue = `My name is ${narration.inputValue}`;
    },
    () => {
        narration.dialogue = "How old are you?";
        narration.requestInput({ type: "number" }, 18);
    },
    () => {
        narration.dialogue = `I am ${narration.inputValue} years old`;
    },
    () => {
        narration.dialogue = "Describe who you are:";
        narration.requestInput({ type: "html textarea" });
    },
    () => {
        narration.dialogue = `${narration.inputValue}`;
    },
    () => {
        narration.dialogue = "Restart";
    },
]);
```

<InputPrompt />

## Get [#get]

To get input prompt information, use:

* [`narration.isRequiredInput`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#isrequiredinput)
* [`narration.inputType`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#inputtype)

```ts
if (narration.isRequiredInput) {
    openInputModal(narration.inputType);
}
```

## Remove [#remove]

To remove the input prompt request, use [`narration.removeInputRequest`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#removeinputrequest).

```ts
narration.removeInputRequest();
```


# UI variables (/start/interface-connect-storage)



In a Pixi’VN UI, the variables you display or edit generally fall into three categories, and each one has a different recommended pattern. Pixi’VN <DynamicLink href="/start/templates">templates</DynamicLink> already use these patterns throughout `src/lib/stores/` and `src/lib/query/` — worth opening as real, working examples.

## Settings variables [#settings-variables]

Things like text speed, font size, or auto-forward delay are **not** part of the <DynamicLink href="/start/storage">game storage</DynamicLink>: they must persist across every playthrough (and even before a save exists), so they live in `localStorage`, mirrored into a [TanStack Store](https://tanstack.com/store/latest) so components can react to changes.

```ts title="src/lib/stores/auto-settings-store.ts"
import { Store } from "@tanstack/store";

type AutoSettingsStore = {
    enabled: boolean;
    time: number;
};

export namespace AutoSettings {
    export const store = new Store<AutoSettingsStore>({
        enabled: Boolean(localStorage.getItem("auto_forward_enabled") ?? false),
        time: Number(localStorage.getItem("auto_forward_second") ?? 1),
    });

    export function setEnabled(value: boolean) {
        localStorage.setItem("auto_forward_enabled", value.toString());
        store.setState((state) => ({ ...state, enabled: value }));
    }

    export function setTime(value: number) {
        localStorage.setItem("auto_forward_second", value.toString());
        store.setState((state) => ({ ...state, time: value }));
    }
}
```

```tsx
import { useSelector } from "@tanstack/react-store";
import { AutoSettings } from "@/lib/stores/auto-settings-store";

function AutoForwardToggle() {
    const enabled = useSelector(AutoSettings.store, (state) => state.enabled);
    return (
        <Switch checked={enabled} onCheckedChange={AutoSettings.setEnabled} />
    );
}
```

## Read-only game variables [#read-only-game-variables]

For variables you only need to **display** (a stat, a flag, a piece of dialogue), read them straight from the <DynamicLink href="/start/storage">game storage</DynamicLink> inside a [TanStack Query](https://tanstack.com/query/latest) `queryFn`.

```ts
import { useQuery } from "@tanstack/react-query";
import { storage } from "@drincs/pixi-vn";

export function useQueryAffection() {
    return useQuery({
        queryKey: ["affection_use_query_key"],
        queryFn: async () => storage.get<number>("affection") ?? 0,
    });
}
```

Game storage variables only change during a <DynamicLink href="/start/labels#continue-and-go-back">`step` / go back</DynamicLink>, when running a <DynamicLink href="/start/labels#run-a-label">`label`</DynamicLink>, or when <DynamicLink href="/start/save#load">loading a save</DynamicLink> — Pixi’VN has no way of knowing you have a query depending on that data, so your UI has to ask TanStack Query to refetch after those events. Rather than invalidating each query key one by one, it's simpler to invalidate everything at once at a handful of call sites (after `narration.continue()`/`goNext`, `stepHistory.back()`, `narration.call()`/`jump`, and after restoring a save):

```ts
const queryClient = useQueryClient();

narration.continue({}).then(() => {
    queryClient.invalidateQueries();
});
```

## Read/write game variables [#readwrite-game-variables]

For variables the UI itself can change (a selected option, a toggle tied to a quest flag), use the same TanStack Store wrapper as for settings, but back it with the <DynamicLink href="/start/storage">game storage</DynamicLink> instead of `localStorage`, so the value survives saves and `go back`:

```ts
import { storage } from "@drincs/pixi-vn";
import { Store } from "@tanstack/store";

const SELECTED_QUEST_KEY = "selectedQuestId";

export namespace Memo {
    export const store = new Store<{ selectedQuestId: string | undefined }>({
        selectedQuestId: storage.get<string>(SELECTED_QUEST_KEY),
    });

    export function setSelectedQuestId(id: string | undefined) {
        storage.set(SELECTED_QUEST_KEY, id);
        store.setState((state) => ({ ...state, selectedQuestId: id }));
    }
}
```

Because the setter updates the Store directly, the UI stays in sync automatically for changes made **through this same setter** — no manual refresh needed.

## Keeping the UI in sync with storage changes made elsewhere [#keeping-the-ui-in-sync-with-storage-changes-made-elsewhere]

The Store pattern above only keeps the UI in sync when the UI itself is the one calling `storage.set`. If a `label`, a `step`, or any other part of the game changes the same game storage variable, nothing tells that Store — or a `useQuery` reading that key — to refresh.

To catch **every** game storage write in one place, use [`storage.setStorageHandler`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#setstoragehandler). It lets you register callbacks that fire whenever a variable is set, removed, or a temporary variable expires — anywhere in the game, not just from the UI:

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

storage.setStorageHandler({
    onSetVariable: (key, value) => {
        queryClient.invalidateQueries();
    },
    onRemoveVariable: (key) => {
        queryClient.invalidateQueries();
    },
    onClearOldTempVariable: (key) => {
        queryClient.invalidateQueries();
    },
});
```

<CalloutContainer type="warning">
  <CalloutTitle>
    Only one handler at a time
  </CalloutTitle>

  <CalloutDescription>
    `setStorageHandler` does not stack handlers — it holds a single one internally, and every call **replaces** the previous one. If you call it from several files, only the last one registered will actually run; the earlier ones stop firing silently.

    Set it **once**, in a single place close to app start-up (e.g. your root provider), with one handler that does everything the UI needs (invalidate queries, update stores, etc.). Because it re-runs on every single storage write in the whole game, prefer this broad, centralized handler over sprinkling many targeted ones — it's easy to reason about, and there's no risk of one overwriting another.
  </CalloutDescription>
</CalloutContainer>


# UI screen examples (/start/interface-examples)



<CalloutContainer type="info">
  <CalloutTitle>
    AI
  </CalloutTitle>

  <CalloutDescription>
    You can use the button above to create your own AI UI screen.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutDescription>
    All examples were created using basic HTML elements, you will need to replace them with UI components from your favorite library to improve the graphics.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Narrative dialogue UI screen" id="narrative-dialogue">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import Markdown from "react-markdown";
        import rehypeRaw from "rehype-raw";
        import remarkGfm from "remark-gfm";
        import { useQueryDialogue } from "../hooks/useQueryInterface";
        import ChoiceMenu from "./ChoiceMenu";

        export default function NarrationScreen() {
            const { data: { text, character } = {} } = useQueryDialogue();

            return (
                <div
                    style={{
                        position: "absolute",
                        display: "flex",
                        flexDirection: "column",
                        height: "100%",
                        width: "100%",
                    }}
                >
                    <div style={{ flex: 1, minHeight: 0 }}>
                        <ChoiceMenu />
                    </div>
                    {text && (
                        <div
                            style={{
                                flex: "0 0 auto",
                                height: "30%",
                                minHeight: 0,
                                pointerEvents: "auto",
                                backgroundColor: "white",
                                display: "flex",
                                flexDirection: "column",
                                overflow: "hidden",
                            }}
                        >
                            {character && character.name && (
                                <b>{`${character?.name || ""} ${character?.surname || ""}`}</b>
                            )}
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    height: "100%",
                                    minHeight: 0,
                                    overflow: "hidden",
                                }}
                            >
                                {character?.icon && (
                                    <img
                                        src={character?.icon}
                                        loading="lazy"
                                        alt=""
                                        style={{
                                            maxWidth: "30%",
                                            height: "auto",
                                            objectFit: "contain",
                                            display: "block",
                                        }}
                                    />
                                )}
                                <div
                                    style={{
                                        flex: 1,
                                        minHeight: 0,
                                        overflow: "auto",
                                        height: "100%",
                                    }}
                                >
                                    <Markdown
                                        remarkPlugins={[remarkGfm]}
                                        rehypePlugins={[rehypeRaw]}
                                    >
                                        {text}
                                    </Markdown>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <div
                style="position: absolute; display: flex; flex-direction: column; height: 100%; width: 100%;"
            >
                <div style="flex: 1; min-height: 0;">
                    <ChoiceMenu />
                </div>
                <div
                    v-if="text"
                    style="flex: 0 0 auto; height: 30%; min-height: 0; pointer-events: auto; background-color: white; display: flex; flex-direction: column; overflow: hidden;"
                >
                    <b v-if="character && (character.name || character.surname)"
                        >{{ character?.name || "" }} {{ character?.surname || "" }}</b
                    >
                    <div
                        style="display: flex; flex-direction: row; height: 100%; min-height: 0; overflow: hidden;"
                    >
                        <img
                            v-if="character && character.icon"
                            :src="character.icon"
                            loading="lazy"
                            alt=""
                            style="max-width: 30%; height: auto; object-fit: contain; display: block;"
                        />
                        <div
                            style="flex: 1; min-height: 0; overflow: auto; height: 100%;"
                        >
                            <Markdown v-if="text" :source="text" />
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <script setup>
        import { computed } from "vue";
        import Markdown from "vue3-markdown-it";
        import { useQueryDialogue } from "../hooks/useQueryInterface";
        import ChoiceMenu from "./ChoiceMenu.vue";

        const { data } = useQueryDialogue();
        const text = computed(() => data.value?.text);
        const character = computed(() => data.value?.character);
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { CharacterBaseModel, narration } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
        export function useQueryDialogue() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
                queryFn: async ({ queryKey }) => {
                    let dialogue = narration.dialogue;
                    let text = dialogue?.text;
                    if (Array.isArray(text)) {
                        text = text.join(" ");
                    }
                    let character = dialogue?.character as
                        | string
                        | CharacterBaseModel
                        | undefined;
                    if (typeof character === "string") {
                        character = new CharacterBaseModel(character, {
                            name: character,
                        });
                    }

                    return {
                        text,
                        character,
                    };
                },
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Choice menu UI screen" id="choice-menu">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useNarrationFunctions.ts">
          hooks/useNarrationFunctions.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryChoiceMenuOptions } from "../hooks/useQueryInterface";

        export default function ChoiceMenu() {
            const { data: menu = [] } = useQueryChoiceMenuOptions();
            const { selectChoice } = useNarrationFunctions();

            return (
                <div
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "center",
                        alignItems: "center",
                        width: "100%",
                        height: "100%",
                        overflow: "auto",
                        gap: "8px",
                        maxHeight: "100%",
                        margin: 0,
                        pointerEvents: menu?.length > 0 ? "auto" : "none",
                    }}
                >
                    {menu?.map((item, index) => (
                        <button
                            key={"choice-" + index}
                            style={{
                                justifyContent: "center",
                                alignItems: "center",
                            }}
                            onClick={() => selectChoice(item)}
                        >
                            {item.text}
                        </button>
                    ))}
                </div>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <div
                :style="{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: '100%',
                    height: '100%',
                    overflow: 'auto',
                    gap: '8px',
                    maxHeight: '100%',
                    margin: 0,
                }"
                :pointer-events="menu.length > 0 ? 'auto' : 'none'"
            >
                <button
                    v-for="(item, index) in menu"
                    :key="'choice-' + index"
                    :style="{ justifyContent: 'center', alignItems: 'center' }"
                    @click="selectChoice(item)"
                >
                    {{ item.text }}
                </button>
            </div>
        </template>

        <script setup>
        import { computed } from "vue";
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryChoiceMenuOptions } from "../hooks/useQueryInterface";

        const { data } = useQueryChoiceMenuOptions();
        const menu = computed(() => data.value || []);
        const { selectChoice } = useNarrationFunctions();
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { CharacterBaseModel, narration } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_key";
        export function useQueryChoiceMenuOptions() {
            return useQuery({
                queryKey: [
                    INTERFACE_DATA_USE_QUEY_KEY,
                    CHOICE_MENU_OPTIONS_USE_QUEY_KEY,
                ],
                queryFn: async () =>
                    narration.choices?.map((option) => ({
                        ...option,
                        text:
                            typeof option.text === "string"
                                ? option.text
                                : option.text.join(" "),
                    })) || [],
            });
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useNarrationFunctions.ts">
        ```ts
        import { narration, StoredIndexedChoiceInterface } from "@drincs/pixi-vn";
        import { useQueryClient } from "@tanstack/react-query";
        import { useCallback } from "react";
        import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";

        export default function useNarrationFunctions() {
            const queryClient = useQueryClient();
            const gameProps = {};

            const selectChoice = useCallback(
                async (item: StoredIndexedChoiceInterface) => {
                    return narration
                        .selectChoice(item, gameProps)
                        .then(() =>
                            queryClient.invalidateQueries({
                                queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
                            }),
                        )
                        .catch((e) => console.error(e));
                },
                [gameProps, queryClient],
            );

            return {
                selectChoice,
            };
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Go next button" id="go-next">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useNarrationFunctions.ts">
          hooks/useNarrationFunctions.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import { useState } from "react";
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryCanGoNext } from "../hooks/useQueryInterface";

        export default function NextButton() {
            const { data: canGoNext = false } = useQueryCanGoNext();
            const [loading, setLoading] = useState(false);
            const { goNext } = useNarrationFunctions();

            if (!canGoNext) {
                return null;
            }

            return (
                <button
                    onClick={() => {
                        setLoading(true);
                        goNext()
                            .then(() => setLoading(false))
                            .catch(() => setLoading(false));
                    }}
                    disabled={loading}
                    style={{
                        width: 40,
                        height: 20,
                        pointerEvents: "auto",
                    }}
                >
                    Next
                </button>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <button
                v-if="canGoNext"
                :disabled="loading"
                :style="{ width: '40px', height: '20px', pointerEvents: 'auto' }"
                @click="handleClick"
            >
                Next
            </button>
        </template>

        <script setup>
        import { ref, computed } from "vue";
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryCanGoNext } from "../hooks/useQueryInterface";

        const { data } = useQueryCanGoNext();
        const canGoNext = computed(() => data.value ?? false);
        const loading = ref(false);
        const { goNext } = useNarrationFunctions();

        function handleClick() {
            loading.value = true;
            goNext()
                .then(() => (loading.value = false))
                .catch(() => (loading.value = false));
        }
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { narration } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_key";
        export function useQueryCanGoNext() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_NEXT_USE_QUEY_KEY],
                queryFn: async () =>
                    narration.canContinue && !narration.isRequiredInput,
            });
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useNarrationFunctions.ts">
        ```ts
        import { narration } from "@drincs/pixi-vn";
        import { useQueryClient } from "@tanstack/react-query";
        import { useCallback } from "react";
        import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";

        export default function useNarrationFunctions() {
            const queryClient = useQueryClient();
            const gameProps = {};

            const goNext = useCallback(async () => {
                try {
                    if (!narration.canContinue) {
                        return;
                    }
                    return narration
                        .continue(gameProps)
                        .then(() =>
                            queryClient.invalidateQueries({
                                queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
                            }),
                        )
                        .catch((e) => console.error(e));
                } catch (e) {
                    console.error(e);
                    return;
                }
            }, [gameProps, queryClient]);

            return {
                goNext,
            };
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Go back button" id="go-back">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useNarrationFunctions.ts">
          hooks/useNarrationFunctions.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import { useState } from "react";
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryCanGoBack } from "../hooks/useQueryInterface";

        export default function BackButton() {
            const { data: canGoBack = false } = useQueryCanGoBack();
            const [loading, setLoading] = useState(false);
            const { goBack } = useNarrationFunctions();

            if (!canGoBack) {
                return null;
            }

            return (
                <button
                    onClick={() => {
                        setLoading(true);
                        goBack()
                            .then(() => setLoading(false))
                            .catch(() => setLoading(false));
                    }}
                    disabled={loading}
                    style={{
                        width: 40,
                        height: 20,
                        pointerEvents: "auto",
                    }}
                >
                    Back
                </button>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <button
                v-if="canGoBack"
                :disabled="loading"
                :style="{ width: '40px', height: '20px', pointerEvents: 'auto' }"
                @click="handleClick"
            >
                Back
            </button>
        </template>

        <script setup>
        import { ref, computed } from "vue";
        import useNarrationFunctions from "../hooks/useNarrationFunctions";
        import { useQueryCanGoBack } from "../hooks/useQueryInterface";

        const { data } = useQueryCanGoBack();
        const canGoBack = computed(() => data.value ?? false);
        const loading = ref(false);
        const { goBack } = useNarrationFunctions();

        function handleClick() {
            loading.value = true;
            goBack()
                .then(() => (loading.value = false))
                .catch(() => (loading.value = false));
        }
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { stepHistory } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const CAN_GO_BACK_USE_QUEY_KEY = "can_go_back_use_quey_key";
        export function useQueryCanGoBack() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_BACK_USE_QUEY_KEY],
                queryFn: async () => stepHistory.canGoBack,
            });
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useNarrationFunctions.ts">
        ```ts
        import { stepHistory } from "@drincs/pixi-vn";
        import { useQueryClient } from "@tanstack/react-query";
        import { useCallback } from "react";
        import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";

        export default function useNarrationFunctions() {
            const queryClient = useQueryClient();
            const gameProps = {};

            const goBack = useCallback(async () => {
                return stepHistory
                    .back(gameProps)
                    .then(() =>
                        queryClient.invalidateQueries({
                            queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
                        }),
                    )
                    .catch((e) => console.error(e));
            }, [gameProps, queryClient]);

            return {
                goBack,
            };
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Input prompt dialog UI" id="input-prompt">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import { narration } from "@drincs/pixi-vn";
        import { useQueryClient } from "@tanstack/react-query";
        import { useState } from "react";
        import {
            INTERFACE_DATA_USE_QUEY_KEY,
            useQueryDialogue,
            useQueryInputValue,
        } from "../../hooks/useQueryInterface";

        export default function TextInput() {
            const { data: { text } = {} } = useQueryDialogue();
            const {
                data: { isRequired: open, currentValue } = {
                    currentValue: undefined,
                    isRequired: false,
                },
            } = useQueryInputValue<string | number>();
            const [tempValue, setTempValue] = useState<string | number>();
            const queryClient = useQueryClient();

            return (
                <dialog
                    open={open}
                    style={{
                        pointerEvents: "auto",
                    }}
                >
                    <p>{text}</p>
                    {open && (
                        <input
                            defaultValue={currentValue || ""}
                            onChange={(e) => {
                                if (e && e.target && "value" in e.target) {
                                    let value: any = e.target.value;
                                    if (
                                        "type" in e.target &&
                                        e.target.type === "number" &&
                                        "valueAsNumber" in e.target
                                    ) {
                                        value = e.target.valueAsNumber;
                                    }
                                    setTempValue(value);
                                }
                            }}
                        />
                    )}
                    <button
                        onClick={() => {
                            narration.inputValue = tempValue || currentValue;
                            setTempValue(undefined);
                            queryClient.invalidateQueries({
                                queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
                            });
                        }}
                    >
                        Confirm
                    </button>
                </dialog>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <dialog :open="open" style="pointer-events: auto;">
                <p>{{ text }}</p>
                <input v-if="open" :value="currentValue || ''" @input="onInput" />
                <button @click="confirm">Confirm</button>
            </dialog>
        </template>

        <script setup>
        import { ref, computed } from "vue";
        import { useQueryClient } from "@tanstack/vue-query";
        import { narration } from "@drincs/pixi-vn";
        import {
            INTERFACE_DATA_USE_QUEY_KEY,
            useQueryDialogue,
            useQueryInputValue,
        } from "../../hooks/useQueryInterface";

        const { data: dialogueData } = useQueryDialogue();
        const text = computed(() => dialogueData.value?.text);

        const { data: inputData } = useQueryInputValue();
        const open = computed(() => inputData.value?.isRequired ?? false);
        const currentValue = computed(() => inputData.value?.currentValue);

        const tempValue = ref(undefined);
        const queryClient = useQueryClient();

        function onInput(e) {
            tempValue.value = e.target?.value;
        }

        function confirm() {
            narration.inputValue = tempValue.value ?? currentValue.value;
            tempValue.value = undefined;
            queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
        }
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import { CharacterBaseModel, narration } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_key";
        export function useQueryInputValue<T>() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, INPUT_VALUE_USE_QUEY_KEY],
                queryFn: async () => ({
                    isRequired: narration.isRequiredInput,
                    type: narration.inputType,
                    currentValue: narration.inputValue as T | undefined,
                }),
            });
        }

        const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
        export function useQueryDialogue() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
                queryFn: async ({ queryKey }) => {
                    let dialogue = narration.dialogue;
                    let text = dialogue?.text;
                    if (Array.isArray(text)) {
                        text = text.join(" ");
                    }
                    let character = dialogue?.character as
                        | string
                        | CharacterBaseModel
                        | undefined;
                    if (typeof character === "string") {
                        character = new CharacterBaseModel(character, {
                            name: character,
                        });
                    }

                    return {
                        text,
                        character,
                    };
                },
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="History UI screen" id="history">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useQueryInterface.ts">
          hooks/useQueryInterface.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import { Box, Stack } from "@mui/system";
        import React from "react";
        import { useQueryNarrativeHistory } from "../use_query/useQueryInterface";

        export default function HistoryScreen() {
            const { data = [] } = useQueryNarrativeHistory();

            return (
                <dialog
                    open={true}
                    style={{
                        height: "80%",
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flex: 1,
                            minHeight: 0,
                            px: 2,
                            py: 3,
                            overflowY: "scroll",
                            flexDirection: "column-reverse",
                            pointerEvents: "auto",
                            overflow: "auto",
                            height: "80%",
                        }}
                    >
                        <Stack spacing={2} justifyContent="flex-end">
                            {data.map((data, index) => {
                                return (
                                    <React.Fragment key={"history" + index}>
                                        <Stack direction="row" spacing={1.5}>
                                            <img
                                                src={data.icon}
                                                loading="lazy"
                                                alt=""
                                                style={{
                                                    verticalAlign: "middle",
                                                    maxWidth: "50px",
                                                    maxHeight: "50px",
                                                    borderRadius: "50%",
                                                }}
                                            />
                                            <Box sx={{ flex: 1 }}>
                                                {data.character && data.character}
                                                <div />
                                                {data.text}
                                            </Box>
                                        </Stack>
                                        <Stack direction="row" spacing={0.5}>
                                            <Box sx={{ flex: 1 }}>
                                                {data.choices &&
                                                    data.choices.map(
                                                        (choice, index) => {
                                                            if (choice.hidden) {
                                                                return null;
                                                            }
                                                            if (choice.isResponse) {
                                                                return (
                                                                    <div
                                                                        key={
                                                                            "choices-success" +
                                                                            index
                                                                        }
                                                                        style={{
                                                                            display:
                                                                                "inline-block",
                                                                            padding:
                                                                                "5px 5px",
                                                                            fontSize:
                                                                                "12px",
                                                                            borderRadius:
                                                                                "25px",
                                                                            backgroundColor:
                                                                                "#21ff3e",
                                                                        }}
                                                                    >
                                                                        {choice.text}
                                                                    </div>
                                                                );
                                                            }
                                                            return (
                                                                <div
                                                                    key={
                                                                        "choices" +
                                                                        index
                                                                    }
                                                                    style={{
                                                                        display:
                                                                            "inline-block",
                                                                        padding:
                                                                            "5px 5px",
                                                                        fontSize:
                                                                            "12px",
                                                                        borderRadius:
                                                                            "25px",
                                                                        backgroundColor:
                                                                            "#bcfdff",
                                                                    }}
                                                                >
                                                                    {choice.text}
                                                                </div>
                                                            );
                                                        },
                                                    )}
                                                {data.inputValue && (
                                                    <div
                                                        key={"choices-success" + index}
                                                        style={{
                                                            display: "inline-block",
                                                            padding: "5px 5px",
                                                            fontSize: "12px",
                                                            borderRadius: "25px",
                                                            backgroundColor: "#b0c2b2",
                                                        }}
                                                    >
                                                        {data.inputValue.toString()}
                                                    </div>
                                                )}
                                            </Box>
                                        </Stack>
                                    </React.Fragment>
                                );
                            })}
                        </Stack>
                    </Box>
                </dialog>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <dialog open style="height: 80%;">
                <div
                    style="display:flex;flex:1;min-height:0;padding:0 16px;overflow-y:scroll;flex-direction:column-reverse;pointer-events:auto;height:80%;"
                >
                    <div
                        v-for="(item, index) in data"
                        :key="'history' + index"
                        style="margin-bottom: 12px;"
                    >
                        <div style="display:flex;gap:12px;align-items:center;">
                            <img
                                :src="item.icon"
                                loading="lazy"
                                alt=""
                                style="vertical-align:middle;max-width:50px;max-height:50px;border-radius:50%;"
                            />
                            <div style="flex:1;">
                                <div>{{ item.character }}</div>
                                <div />
                                <div>{{ item.text }}</div>
                            </div>
                        </div>
                        <div style="display:flex;gap:8px;margin-top:8px;">
                            <div style="flex:1;">
                                <template v-if="item.choices">
                                    <template
                                        v-for="(choice, i) in item.choices"
                                        :key="'choice-' + i"
                                    >
                                        <span
                                            v-if="!choice.hidden"
                                            :style="
                                                choice.isResponse
                                                    ? responseStyle
                                                    : choiceStyle
                                            "
                                            >{{ choice.text }}</span
                                        >
                                    </template>
                                </template>
                                <div v-if="item.inputValue" :style="inputStyle">
                                    {{ item.inputValue.toString() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </dialog>
        </template>

        <script setup>
        import { computed } from "vue";
        import { useQueryNarrativeHistory } from "../use_query/useQueryInterface";

        const { data } = useQueryNarrativeHistory();
        const responseStyle = {
            display: "inline-block",
            padding: "5px 5px",
            fontSize: "12px",
            borderRadius: "25px",
            backgroundColor: "#21ff3e",
        };
        const choiceStyle = {
            display: "inline-block",
            padding: "5px 5px",
            fontSize: "12px",
            borderRadius: "25px",
            backgroundColor: "#bcfdff",
        };
        const inputStyle = {
            display: "inline-block",
            padding: "5px 5px",
            fontSize: "12px",
            borderRadius: "25px",
            backgroundColor: "#b0c2b2",
        };
        </script>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useQueryInterface.ts">
        ```ts
        import {
            CharacterBaseModel,
            getCharacterById,
            narration,
        } from "@drincs/pixi-vn";
        import { useQuery } from "@tanstack/react-query";

        export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";

        const NARRATIVE_HISTORY_USE_QUEY_KEY = "narrative_history_use_quey_key";
        export function useQueryNarrativeHistory() {
            return useQuery({
                queryKey: [INTERFACE_DATA_USE_QUEY_KEY, NARRATIVE_HISTORY_USE_QUEY_KEY],
                queryFn: () => {
                    return narration.narrativeHistory.map((step) => {
                        let character = step.dialoge?.character
                            ? (getCharacterById(step.dialoge?.character) ??
                              new CharacterBaseModel(step.dialoge?.character, {
                                  name: step.dialoge?.character,
                              }))
                            : undefined;
                        return {
                            character: character?.name
                                ? character.name +
                                  (character.surname ? " " + character.surname : "")
                                : undefined,
                            text: step.dialoge?.text || "",
                            icon: character?.icon,
                            choices: step.choices,
                            inputValue: step.inputValue,
                        };
                    });
                },
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Styles & Theming (/start/interface-font)



Pixi’VN templates build the UI with [shadcn/ui](https://ui.shadcn.com/) on top of Tailwind CSS. Unlike a regular component library, shadcn/ui does not ship as a package: the component source is copied into your own project (under `src/components/ui/`).

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    Pixi’VN templates use Vite, Tailwind CSS, and shadcn/ui, so the instructions below are tuned for that setup. See <DynamicLink href="/start/templates">Templates</DynamicLink> for the full project structure.
  </CalloutDescription>
</CalloutContainer>

The whole theme — colors, roundness, fonts, and more — depends on a single file: `src/styles.css`.

## Beyond the base theme builder [#beyond-the-base-theme-builder]

Rather than editing `styles.css` by hand, you can generate a full theme with a visual tool.

### shadcn/ui theme builder [#shadcnui-theme-builder]

The [official theme builder](https://ui.shadcn.com/create) is a visual editor: you pick a base color, adjust the palette for light and dark mode, and set the corner radius, with a live preview of real shadcn components (buttons, cards, inputs, etc.) so you can see the result before applying anything. Once you are happy with it, open the **Copy** section of the page: it gives you a ready-to-run command in the form:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Running this command from the root of your project fetches your generated theme and overwrites the color/radius variables in `styles.css` with it, as described in <DynamicLink href="/start/templates">Templates → Customise the style</DynamicLink>.

Once you have that generated code applied to your project, run:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm run ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm run ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun run ui:reinit
    ```
  </CodeBlockTab>
</CodeBlockTabs>

This force-reinstalls every shadcn component already in your project straight from the shadcn registry, using your updated `styles.css` and `components.json`, and reformats the source files afterwards. It keeps all components consistent with the new theme, instead of leaving them on whatever variables they were built with.

### tweakcn [#tweakcn]

[tweakcn](https://tweakcn.com/) is a community-made alternative to the official theme builder. It covers the same colors and radius, but adds live editing of fonts and shadows too, and comes with a gallery of ready-made presets you can start from instead of building a palette from scratch. It also exports its result as CSS variables, so you paste the output into `styles.css` the same way, and can follow it with `npm run ui:reinit`.

These two are the theme generators most widely used with shadcn/ui today. If you come across others, the important thing is that they output plain CSS variables (or a shadcn registry command) — anything in that format drops into `styles.css` the same way.


# Navigate/switch between UI screens (/start/interface-navigate)



To navigate between different UI screens, it is necessary to use a routing system. A routing system allows you to define routes (or paths) for different screens and manage navigation between them.

## TanStack Router [#tanstack-router]

<Accordions>
  <Accordion title="What is TanStack Router?" id="what-is-tanstack-router">
    TanStack Router is a routing system for web applications that allows you to manage navigation between different pages or components in a simple and efficient way. It is designed to be flexible and easy to use, offering advanced features such as support for dynamic parameters, router state management, and integration with rendering libraries like React, Vue, and Angular.
  </Accordion>
</Accordions>

The main advantage of TanStack Router is its ability to automatically generate route handling using `createFileRoute`. With `createFileRoute`, you can define your routes simply by creating files in a specific folder structure. For example, if you create a file `about.tsx` in the `src/routes` folder, TanStack Router will automatically generate a route for `/about` that renders the component defined in `about.tsx`.

```ts title="src/routes/about.tsx"
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({ // [!code focus]
    component: About, // [!code focus]
}); // [!code focus]

function About() {
    return (
        <main className="page-wrap px-4 py-12">
            <section className="island-shell rounded-2xl p-6 sm:p-8">
                <p className="island-kicker mb-2">About</p>
                <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
                    A small starter with room to grow.
                </h1>
                <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
                    TanStack Start gives you type-safe routing, server functions, and modern SSR defaults. Use this as a
                    clean foundation, then layer in your own routes, styling, and add-ons.
                </p>
            </section>
        </main>
    );
}
```

## How to navigate between screens/routes? [#how-to-navigate-between-screensroutes]

To navigate between screens/routes, use the navigation function provided by your routing system.

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, the `StepLabelProps` interface is already extended to include a `navigate` function. You can find it in the `pixi-vn.d.ts` file.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Initialize" id="initialize">
    To enable this, the navigation function must be included in the <DynamicLink href="/start/labels#steplabelprops">`StepLabelProps` interface</DynamicLink>.

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="hooks/useGameProps.ts">
          hooks/useGameProps.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        import { narration } from "@drincs/pixi-vn";

        declare module "@drincs/pixi-vn" {
            interface StepLabelProps {
                navigate: (route: string) => void;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="hooks/useGameProps.ts">
        ```ts
        import { StepLabelProps } from "@drincs/pixi-vn";
        import useMyNavigate from "./useMyNavigate";

        export default function useGameProps(): StepLabelProps {
            const navigate = useMyNavigate();

            return {
                navigate,
            };
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

<Callout title="ink" type="info">
  In all *ink* templates, a <DynamicLink href="/ink/hashtag">custom hashtag command</DynamicLink> has been introduced to navigate between routes. To do this, you need to use the following syntax:

  ```ink title="ink"
  # navigate [route]
  ```

  * `route`: The destination route/path. For example, `# navigate /new-route`.
</Callout>

When you create a new label, you can use the `navigate` function to switch between routes:

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    export const startLabel = newLabel("start", [
        ({ navigate }) => {
            navigate("/new-route");
        },
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Other features [#other-features]

<Accordions>
  <Accordion title="Block the browser's back and forward buttons" id="block-back-forward">
    Using the browser's back and forward buttons can cause the game to be in an inconsistent state. This is because those keys allow the player to navigate between routes, not between narrative `steps`.

    It is recommended to prevent the path from changing when the browser's back button is pressed. There are many ways to do this, but the following approach is suggested:

    Intercept the `popstate` event, which is triggered after the browser's back button is pressed, and call `history.forward()` to cancel the navigation. To allow users to navigate back if they press the back button twice in succession, we can push a new state to the history stack on each route change.

    For example:

    ```ts title="hooks/useConfirmBackNavigation.ts"
    import { useLocation } from "@tanstack/react-router";
    import { useEffect } from "react";

    /**
     * useConfirmBackNavigation
     *
     * Prevent accidental browser "back" navigation.
     * Behavior:
     * - On each `href` change it pushes a history state (`pushState`).
     * - Listens for `popstate` and calls `history.forward()` to cancel a single
     *   press of the browser back button.
     * - If the user presses back twice in succession (i.e. the second press occurs
     *   before the first is handled), the browser will navigate back.
     *
     * Usage: call this hook at the app root to avoid unintended back navigations
     * (e.g. accidental taps or gestures). Returns `null`.
     */
    export default function useConfirmBackNavigation() {
        const { href } = useLocation();

        useEffect(() => {
            const isInIframe =
                typeof window !== "undefined" && window.self !== window.top;
            if (isInIframe) return;
            const listener = () => {
                window.history.forward();
            };
            window.addEventListener("popstate", listener);

            return () => {
                window.removeEventListener("popstate", listener);
            };
        }, []);

        useEffect(() => {
            window.history.pushState(null, href, href);
        }, [href]);
    }
    ```
  </Accordion>
</Accordions>


# PixiJS UI (/start/interface-pixijs)



As explained in more detail <DynamicLink href="/start/canvas#pixijs-differences">here</DynamicLink>, the entire rendering part of Pixi’VN is based on PixiJS. By taking advantage of <DynamicLink href="/start/interface#adding-pixijs-ui-layers">PixiJS Layers</DynamicLink>, you can use PixiJS to create custom UI screens.

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, a PixiJS Layer called "ui" is created on startup. You can use this layer to create your UI screens.
  </CalloutDescription>
</CalloutContainer>

You can also combine HTML Layer components with PixiJS Layer ones. To do this, add the PixiJS components during the first rendering of an HTML screen and clean up the PixiJS Layer when the screen is closed.

For example:

```tsx title="React"
import { useEffect } from "react";
import { Assets, canvas } from "@drincs/pixi-vn";
import { Sprite } from "pixi.js";

export default function MyScreen() {
    useEffect(() => {
        let layer = canvas.getLayer("ui");
        if (layer) {
            const texture = await Assets.load(
                "https://pixijs.com/assets/bunny.png",
            );
            const bunny = new Sprite(texture);
            layer.addChild(bg);
        }

        return () => {
            canvas.getLayer("ui")?.removeChildren();
        };
    });

    return null;
}
```

## Best PixiJS component libraries [#best-pixijs-component-libraries]

To create a beautiful user interface, you can use some of the best PixiJS component libraries:

* [PixiJS](https://pixijs.com/)
* [PixiUI](https://github.com/pixijs/ui)
* [PixiLayout](https://github.com/pixijs/layout)


# React UI (/start/interface-react)



Pixi’VN works great as a **visual novel React** engine, letting you build the UI of your visual novel or story-driven game with React components while Pixi’VN handles the narration and canvas.

**What is React?** React is a JavaScript library for building user interfaces (UIs) for websites, apps, and more. It's free, open-source, and maintained by Meta (formerly Facebook) and a large community.

You can learn more about React on the [React website](https://react.dev/).

## How to add Pixi’VN to a React application [#how-to-add-pixivn-to-a-react-application]

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    There are Pixi’VN templates available that use React. You can read more about them in the <DynamicLink href="/start#project-initialization">templates</DynamicLink> section.

    If you want to add Pixi’VN to an existing React application, follow the steps below.
  </CalloutDescription>
</CalloutContainer>

First, you need a React application and to <DynamicLink href="/start#installation">install pixi-vn</DynamicLink>. It is recommended to use [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) to create a new React application.

Now you can replace the content of the following files with the code below:

<CodeBlockTabs defaultValue="src/main.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="src/main.tsx">
      src/main.tsx
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/index.css">
      src/index.css
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/App.tsx">
      src/App.tsx
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="src/main.tsx">
    ```tsx
    import { Assets, canvas, Container, drawCanvasErrorHandler, Game, showImage, sound } from "@drincs/pixi-vn"; // [!code ++]
    import { StrictMode } from "react";
    import { createRoot } from "react-dom/client";
    import App from "./App.tsx";
    import "./index.css";

    createRoot(document.getElementById("root")!).render( // [!code --]
    const body = document.body; // [!code ++]
    if (!body) { // [!code ++]
        throw new Error("body element not found"); // [!code ++]
    } // [!code ++]

    Game.init(body, { // [!code ++]
        height: 1080, // [!code ++]
        width: 1920, // [!code ++]
        backgroundColor: "#303030", // [!code ++]
        resizeMode: "contain", // [!code ++]
    }).then(() => { // [!code ++]
        showImage( // [!code ++]
            "juliette", // [!code ++]
            "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/icon.webp", // [!code ++]
            { xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }, // [!code ++]
        ).then(() => { // [!code ++]
            canvas.animate("juliette", { angle: 360 }, { repeat: Infinity, duration: 5 }); // [!code ++]
        }); // [!code ++]

        // Pixi.JS UI Layer // [!code ++]
        canvas.addLayer("ui", new Container()); // [!code ++]

        // Sound setup // [!code ++]
        sound.addChannel("bgm", { background: true }); // [!code ++]
        sound.addChannel("sfx"); // [!code ++]
        sound.defaultChannelAlias = "sfx"; // [!code ++]

        // React setup with ReactDOM // [!code ++]
        const root = document.getElementById("root"); // [!code ++]
        if (!root) { // [!code ++]
            throw new Error("root element not found"); // [!code ++]
        } // [!code ++]

        const htmlLayout = canvas.addHtmlLayer("ui", root); // [!code ++]
        if (!htmlLayout) { // [!code ++]
            throw new Error("htmlLayout not found"); // [!code ++]
        } // [!code ++]
        const reactRoot = createRoot(htmlLayout); // [!code ++]

        reactRoot.render(
            <StrictMode>
                <App />
            </StrictMode>,
        )
    }); // [!code ++]

    Game.onEnd(async (props) => { // [!code ++]
        Game.clear(); // [!code ++]
        // Navigate to the main menu after the game ends // [!code ++]
    }); // [!code ++]

    Game.addOnError(drawCanvasErrorHandler()); // [!code ++]
    Game.addOnError((error, props) => { // [!code ++]
        console.error(`Error occurred`, error); // [!code ++]
    }); // [!code ++]

    Game.onLoadingLabel((_stepId, { id }) => Assets.backgroundLoadBundle(id)); // [!code ++]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/index.css">
    ```css
    :root {
        --text: #6b6375;
        --text-h: #08060d;
        --bg: #fff;
        --border: #e5e4e7;
        --code-bg: #f4f3ec;
        --accent: #aa3bff;
        --accent-bg: rgba(170, 59, 255, 0.1);
        --accent-border: rgba(170, 59, 255, 0.5);
        --social-bg: rgba(244, 243, 236, 0.5);
        --shadow:
            rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

        --sans: system-ui, "Segoe UI", Roboto, sans-serif;
        --heading: system-ui, "Segoe UI", Roboto, sans-serif;
        --mono: ui-monospace, Consolas, monospace;

        font: 18px/145% var(--sans);
        letter-spacing: 0.18px;
        color-scheme: light dark;
        color: var(--text);
        background: var(--bg);
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        @media (max-width: 1024px) {
            font-size: 16px;
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --text: #9ca3af;
            --text-h: #f3f4f6;
            --bg: #16171d;
            --border: #2e303a;
            --code-bg: #1f2028;
            --accent: #c084fc;
            --accent-bg: rgba(192, 132, 252, 0.15);
            --accent-border: rgba(192, 132, 252, 0.5);
            --social-bg: rgba(47, 48, 58, 0.5);
            --shadow:
                rgba(0, 0, 0, 0.4) 0 10px 15px -3px,
                rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
        }

        #social .button-icon {
            filter: invert(1) brightness(2);
        }
    }

    #root {
        width: 1126px;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        border-inline: 1px solid var(--border);
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    html, /* [!code ++] */
    body {
        /* [!code ++] */
        background-color: #242424; /* [!code ++] */
        height: 100%; /* [!code ++] */
    } /* [!code ++] */

    body {
        margin: 0;
        min-height: 100vh; /* [!code ++] */
        display: flex; /* [!code ++] */
        overflow: hidden; /* [!code ++] */
    }

    h1,
    h2 {
        font-family: var(--heading);
        font-weight: 500;
        color: var(--text-h);
    }

    h1 {
        font-size: 56px;
        letter-spacing: -1.68px;
        margin: 32px 0;
        @media (max-width: 1024px) {
            font-size: 36px;
            margin: 20px 0;
        }
    }
    h2 {
        font-size: 24px;
        line-height: 118%;
        letter-spacing: -0.24px;
        margin: 0 0 8px;
        @media (max-width: 1024px) {
            font-size: 20px;
        }
    }
    p {
        margin: 0;
    }

    code,
    .counter {
        font-family: var(--mono);
        display: inline-flex;
        border-radius: 4px;
        color: var(--text-h);
    }

    code {
        font-size: 15px;
        line-height: 135%;
        padding: 4px 8px;
        background: var(--code-bg);
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/App.tsx">
    ```tsx
    import { useState } from "react";
    import "./App.css";
    import heroImg from "./assets/hero.png";
    import reactLogo from "./assets/react.svg";
    import viteLogo from "./assets/vite.svg";

    function App() {
        const [count, setCount] = useState(0);

        return (
            <>
                <section id="center">
                    <div className="hero">
                        <img
                            src={heroImg}
                            className="base"
                            width="170"
                            height="179"
                            alt=""
                        />
                        <img
                            src={reactLogo}
                            className="framework"
                            alt="React logo"
                        />
                        <img src={viteLogo} className="vite" alt="Vite logo" />
                    </div>
                    <div>
                        <h1>Get started</h1>
                        <p>
                            Edit <code>src/App.tsx</code> and save to test{" "}
                            <code>HMR</code>
                        </p>
                    </div>
                    <button
                        className="counter"
                        onClick={() => setCount((count) => count + 1)}
                        // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                        style={{ pointerEvents: "auto" }} // [!code ++]
                    >
                        Count is {count}
                    </button>
                </section>

                <div className="ticks"></div>

                <section id="next-steps">
                    <div id="docs">
                        <svg
                            className="icon"
                            role="presentation"
                            aria-hidden="true"
                        >
                            <use href="/icons.svg#documentation-icon"></use>
                        </svg>
                        <h2>Documentation</h2>
                        <p>Your questions, answered</p>
                        <ul>
                            <li>
                                <a
                                    href="https://vite.dev/"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <img className="logo" src={viteLogo} alt="" />
                                    Explore Vite
                                </a>
                            </li>
                            <li>
                                <a
                                    href="https://react.dev/"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <img
                                        className="button-icon"
                                        src={reactLogo}
                                        alt=""
                                    />
                                    Learn more
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div id="social">
                        <svg
                            className="icon"
                            role="presentation"
                            aria-hidden="true"
                        >
                            <use href="/icons.svg#social-icon"></use>
                        </svg>
                        <h2>Connect with us</h2>
                        <p>Join the Vite community</p>
                        <ul>
                            <li>
                                <a
                                    href="https://github.com/vitejs/vite"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <svg
                                        className="button-icon"
                                        role="presentation"
                                        aria-hidden="true"
                                    >
                                        <use href="/icons.svg#github-icon"></use>
                                    </svg>
                                    GitHub
                                </a>
                            </li>
                            <li>
                                <a
                                    href="https://chat.vite.dev/"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <svg
                                        className="button-icon"
                                        role="presentation"
                                        aria-hidden="true"
                                    >
                                        <use href="/icons.svg#discord-icon"></use>
                                    </svg>
                                    Discord
                                </a>
                            </li>
                            <li>
                                <a
                                    href="https://x.com/vite_js"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <svg
                                        className="button-icon"
                                        role="presentation"
                                        aria-hidden="true"
                                    >
                                        <use href="/icons.svg#x-icon"></use>
                                    </svg>
                                    X.com
                                </a>
                            </li>
                            <li>
                                <a
                                    href="https://bsky.app/profile/vite.dev"
                                    target="_blank"
                                    // Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction // [!code ++]
                                    style={{ pointerEvents: "auto" }} // [!code ++]
                                >
                                    <svg
                                        className="button-icon"
                                        role="presentation"
                                        aria-hidden="true"
                                    >
                                        <use href="/icons.svg#bluesky-icon"></use>
                                    </svg>
                                    Bluesky
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>

                <div className="ticks"></div>
                <section id="spacer"></section>
            </>
        );
    }

    export default App;
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Vue UI (/start/interface-vue)



**What is Vue?** Vue is a progressive framework for building user interfaces. It is designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.

You can learn more about Vue on the [Vue website](https://vuejs.org/).

## How to add Pixi’VN to a Vue application [#how-to-add-pixivn-to-a-vue-application]

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    I am looking for someone to help me develop Vue templates. Are you available to help?

    If you are interested or available to help, feel free to write in the chat below!
  </CalloutDescription>
</CalloutContainer>

First, you need a Vue application and to <DynamicLink href="/start#installation">install pixi-vn</DynamicLink>. Is recommended to use [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) to create a new Vue application.

Now you can replace the content of the following files with the code below:

<CodeBlockTabs defaultValue="src/main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="src/main.ts">
      src/main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/style.css">
      src/style.css
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/components/HelloWorld.vue">
      src/components/HelloWorld.vue
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="index.html">
      index.html
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="src/main.ts">
    ```tsx
    import {
        canvas,
        Container,
        Game,
        RotateTicker,
        showImage,
    } from "@drincs/pixi-vn";
    import { createApp } from "vue";
    import "./style.css";
    import App from "./App.vue";

    createApp(App).mount("#app"); // [!code --]
    const body = document.body; // [!code ++]
    if (!body) {
        // [!code ++]
        throw new Error("body element not found"); // [!code ++]
    } // [!code ++]
    // [!code ++]
    Game.init(body, {
        // [!code ++]
        height: 1080, // [!code ++]
        width: 1920, // [!code ++]
        backgroundColor: "#303030", // [!code ++]
    }) // [!code ++]
        .then(
            () => {
                // [!code ++]
                // [!code ++]
                // Pixi.JS UI Layer [!code ++]
                canvas.addLayer("ui", new Container()); // [!code ++]
                showImage(
                    // [!code ++]
                    "juliette", // [!code ++]
                    "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e", // [!code ++]
                    { xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }, // [!code ++]
                ); // [!code ++]
                canvas.addTicker("juliette", new RotateTicker({ speed: 1 })); // [!code ++]
                // [!code ++]
                // Vue setup [!code ++]
                const app = document.getElementById("app"); // [!code ++]
                if (!app) {
                    // [!code ++]
                    throw new Error("app element not found"); // [!code ++]
                } // [!code ++]
                // [!code ++]
                const htmlLayer = canvas.addHtmlLayer("ui", app, {
                    // [!code ++]
                    position: "absolute", // [!code ++]
                    pointerEvents: "none", // [!code ++]
                }); // [!code ++]
                if (!htmlLayer) {
                    // [!code ++]
                    throw new Error("htmlLayer not found"); // [!code ++]
                } // [!code ++]
                createApp(App).mount(htmlLayer); // [!code ++]
            }, // [!code ++]
        ); // [!code ++]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/style.css">
    ```css
    :root {
        font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
        line-height: 1.5;
        font-weight: 400;

        color-scheme: light dark;
        color: rgba(255, 255, 255, 0.87);

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    a {
        font-weight: 500;
        color: #646cff;
        text-decoration: inherit;
    }
    a:hover {
        color: #535bf2;
    }

    html, /* [!code ++] */
    body {
        /* [!code ++] */
        background-color: #242424; /* [!code ++] */
        height: 100%; /* [!code ++] */
    } /* [!code ++] */

    body {
        margin: 0;
        display: flex;
        min-height: 100vh;
        place-items: center; /* [!code --] */
        min-width: 320px; /* [!code --] */
        overflow: hidden; /* [!code ++] */
    }

    h1 {
        font-size: 3.2em;
        line-height: 1.1;
    }

    button {
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0.6em 1.2em;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        background-color: #1a1a1a;
        cursor: pointer;
        transition: border-color 0.25s;
    }
    button:hover {
        border-color: #646cff;
    }
    button:focus,
    button:focus-visible {
        outline: 4px auto -webkit-focus-ring-color;
    }

    .card {
        padding: 2em;
    }

    #app {
        max-width: 1280px;
        margin: 0 auto;
        padding: 2rem; /* [!code --] */
        text-align: center;
    }

    @media (prefers-color-scheme: light) {
        :root {
            color: #213547;
            background-color: #ffffff;
        }
        a:hover {
            color: #747bff;
        }
        button {
            background-color: #f9f9f9;
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/components/HelloWorld.vue">
    ```vue
    <script setup lang="ts">
    import { ref } from "vue";

    defineProps<{ msg: string }>();

    const count = ref(0);
    </script>

    <template>
        <h1>{{ msg }}</h1>

        <div class="card">
            <!-- Read here: https://pixi-vn.com/start/interface#how-to-enable-ui-interaction -->
            <button type="button" @click="count++">count is {{ count }}</button>
            <!-- [!code --] -->
            <button
                type="button"
                @click="count++"
                :style="{ pointerEvents: 'auto' }"
            >
                count is {{ count }}
            </button>
            <!-- [!code ++] -->
            <p>
                Edit
                <code>components/HelloWorld.vue</code> to test HMR
            </p>
        </div>

        <p>
            Check out
            <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
                >create-vue</a
            >, the official Vue + Vite starter
        </p>
        <p>
            Learn more about IDE Support for Vue in the
            <a
                href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
                target="_blank"
                >Vue Docs Scaling up Guide</a
            >.
        </p>
        <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
    </template>

    <style scoped>
    .read-the-docs {
        color: #888;
    }
    </style>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="index.html">
    ```html
    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <link rel="icon" type="image/svg+xml" href="/vite.svg" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Vite + Vue</title>
            <!-- [!code --] -->
            <title>Vite + Vue + Pixi’VN</title>
            <!-- [!code ++] -->
        </head>
        <body>
            <div id="app"></div>
            <script type="module" src="/src/main.ts"></script>
        </body>
    </html>
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# User Interface (UI) (/start/interface)



<Accordions>
  <Accordion title="What is UI?" id="what-is-ui">
    UI stands for User Interface. It refers to the visual elements and interactive components through which a user interacts with a digital device, application, or website. The UI includes everything that users interact with, such as buttons, menus, icons, text fields, and layout. The goal of UI design is to create an interface that is both aesthetically pleasing and functional, providing a seamless and intuitive experience for users.
  </Accordion>
</Accordions>

Pixi’VN does not provide built-in components to create the game UI, and it does not reinvent what already exists in the JavaScript ecosystem. Instead of locking you into a specific framework, it lets you use any external JavaScript framework you prefer to build your UI, so you can leverage systems such as React, Vue, etc., to create complex and high-performance **UI screens**.

This flexibility also makes Pixi’VN a great fit for AI-assisted development: because the UI is built with standard, widely-used frameworks rather than a proprietary system, AI coding assistants already know these tools well and can generate, understand, and modify UI code very effectively.

* <DynamicLink href="/start/interface-react">
    React
  </DynamicLink>
* <DynamicLink href="/start/interface-vue">
    Vue
  </DynamicLink>
* <DynamicLink href="/start/interface-pixijs">
    PixiJS
  </DynamicLink>

Pixi’VN offers features to improve compatibility with other JavaScript frameworks:

<Accordions>
  <Accordion title="Adding HTML UI Layers" id="adding-html-ui-layers">
    **What is an HTML UI Layer?** An HTML UI Layer is an HTML element that is added above the PixiJS canvas and has the same dimensions as the canvas. This allows you to create a UI with a JavaScript framework such as React or Vue.

    To add an HTML UI Layer, you can use the [`canvas.addHtmlLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#addhtmllayer) function.

    <CodeBlockTabs defaultValue="main.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="index.html">
          index.html
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="main.ts">
        ```ts
        const root = document.getElementById("root");
        if (!root) {
            throw new Error("root element not found");
        }
        const htmlLayer = canvas.addHtmlLayer("ui", root, {
            position: "absolute",
            pointerEvents: "none",
            userSelect: "none",
        });
        ```
      </CodeBlockTab>

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

    To get the HTML element of the layer, you can use the [`canvas.getHtmlLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#gethtmllayer) function.

    To remove an HTML UI Layer, you can use the [`canvas.removeHtmlLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#removehtmllayer) function.
  </Accordion>

  <Accordion title="How to enable HTML UI interaction?" id="how-to-enable-ui-interaction">
    By default, all HTML elements of the HTML UI Layers have the `pointer-events: none` style. This means that the HTML elements will not intercept any mouse or touch events, allowing the PixiJS canvas to receive all events. This is useful when you want to display an image or a video in the canvas and you don't want the UI to interfere with it.

    So you must set the `pointer-events: auto` style only for the conponent that you want to interact with the user.

    For example:

    <CodeBlockTabs defaultValue="Shadcn - Tailwind CSS">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Shadcn - Tailwind CSS">
          Shadcn - Tailwind CSS
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Shadcn - Tailwind CSS">
        ```css  title="styles.css"
        @layer components {
            [data-slot="button"],
            [data-slot="card"],
            [data-slot="resizable-handle"],
            [data-slot="scroll-area"],
            [data-slot="scroll-area-scrollbar"],
            [data-slot="toggle"] {
                pointer-events: auto;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="React">
        ```tsx
        export default function NextButton() {
            return (
                <button
                    style={{
                        pointerEvents: "auto",
                    }}
                >
                    Next
                </button>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <template>
            <button style="pointer-events: auto;">Next</button>
        </template>
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Adding PixiJS UI Layers" id="adding-pixijs-ui-layers">
    **What is an PixiJS UI Layer?** It is PixiJS Container. Unlike the main Container dedicated only for Pixi’VN features:

    * The current state of the Ul will not be included in saves.
    * It has better performance. Pixi’VN will not do any checks on it.
    * You can't use Pixi’VN features.
    * Being a core PixiJS component, you can add all PixiJS compatible components.

    To add a PixiJS UI Layer, you can use the [`canvas.addLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#addlayer) function.

    For example:

    ```ts title="src/main.ts"
    const container = canvas.addLayer("ui");
    ```

    To get the PixiJS Container of the layer, you can use the [`canvas.getLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#getlayer) function.

    To remove a PixiJS UI Layer, you can use the [`canvas.removeLayer`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#removelayer) function.
  </Accordion>
</Accordions>

{/* ![Architecture](/arch.png) */}

## Differences between the UI and the canvas [#differences-between-the-ui-and-the-canvas]

As Pixi’VN was designed and conceived, the UI and the canvas are two distinct and independent elements. The UI is above the canvas and is used to create buttons, forms, etc. The canvas is used to display images, videos, etc.

All information about the current state of the canvas is included in the save and it is possible to restore the state of a previous step. The current state of the UI will not be included in the saves. So you have to <DynamicLink href="/start/interface-connect-storage">manage it yourself by saving the information</DynamicLink> you need to <DynamicLink href="/start/storage">game storage</DynamicLink> or browser storage.

In the canvas you can add components during each step. In the UI you can't do that, you can create several <DynamicLink href="/start/interface-connect-storage">"screens" and navigate between them</DynamicLink>.

In the canvas you can only add Pixi’VN components. In the UI you can add any HTML/PixiJS component or use any UI component library, so you can create much more complex interfaces.


# Advanced label features (/start/labels-advanced)





This section covers advanced <DynamicLink href="/start/labels">label</DynamicLink> features. These are not required to create a basic game, but can help you build more complex and interactive experiences.

<Accordions>
  <Accordion title="`onLoadingLabel`" id="onloadinglabel">
    [`onLoadingLabel`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onloadinglabel) is a function executed in [`onStepStart`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) if the `step` index is 0, and also when the user loads a save file.

    When a save file is loaded, all [`onLoadingLabel`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onloadinglabel) functions of the [`narration.openedLabels`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels) (the current `label` and all `labels` in the stack) are executed.

    This is useful, for example, to ensure all images used in the `label` are cached before the `label` starts.

    You can set this function by passing it to the [`onLoadingLabel`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onloadinglabel) property in the `label` options.

    ```ts title="content/labels/start.label.ts"
    const startLabel = newLabel(
        "start",
        [
            async () => {
                await showImage("image1", "path/to/image1.png");
                await showImage("image2", "path/to/image2.png");
            },
        ],
        {
            onLoadingLabel: async (stepIndex, label) => { // [!code focus]
                await Assets.load("path/to/image1.png"); // [!code focus]
                await Assets.load("path/to/image2.png"); // [!code focus]
            }, // [!code focus]
        },
    );
    ```

    You can also use [`Game.onLoadingLabel`](/jsdoc/pixi-vn/index/namespaces/Game/functions/onLoadingLabel) to intercept the loading of all `labels` globally.

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

    Game.onLoadingLabel((_stepId, label) => { // [!code focus]
        Assets.backgroundLoadBundle(label.id); // [!code focus]
    }); // [!code focus]
    ```
  </Accordion>

  <Accordion title="`onStepStart`" id="onstepstart">
    [`onStepStart`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) is a function executed before each `step` of a `label`. Set it via the [`onStepStart`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) property in the `label` options.

    ```ts title="content/labels/start.label.ts"
    const startLabel = newLabel(
        "start",
        [
            () => {
                narration.dialogue = "Step 1";
            },
            () => {
                narration.dialogue = "Step 2";
            },
        ],
        {
            onStepStart: (stepIndex, label) => { // [!code focus]
                console.log(`Step ${stepIndex} started`); // [!code focus]
            }, // [!code focus]
        },
    );
    ```

    You can also use [`Game.onStepStart`](/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepStart) to intercept the start of any `step` in any `label`.

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

    Game.onStepStart((stepIndex, label) => { // [!code focus]
        console.log(`Step ${stepIndex} started`); // [!code focus]
    }); // [!code focus]
    ```
  </Accordion>

  <Accordion title="`onStepEnd`" id="onstepend">
    [`onStepEnd`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepend) is a function executed after each `step` of a `label`. Set it via the [`onStepEnd`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepend) property in the `label` options.

    ```ts title="content/labels/start.label.ts"
    const startLabel = newLabel(
        "start",
        [
            () => {
                narration.dialogue = "Step 1";
            },
            () => {
                narration.dialogue = "Step 2";
            },
        ],
        {
            onStepEnd: (stepIndex, label) => { // [!code focus]
                console.log(`Step ${stepIndex} ended`); // [!code focus]
            }, // [!code focus]
        },
    );
    ```

    You can also use [`Game.onStepEnd`](/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepEnd) to intercept the end of any `step` in any `label`.

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

    Game.onStepEnd((stepIndex, label) => { // [!code focus]
        console.log(`Step ${stepIndex} ended`); // [!code focus]
    }); // [!code focus]
    ```
  </Accordion>

  <Accordion title="Dynamic `step` list" id="dynamic-step-list">
    When creating a new `label`, you can pass a function that returns the `steps` for that `label`. This allows you to change the `step` list dynamically based on a condition.

    ```ts title="content/labels/start.label.ts"
    import { storage, narration, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", () => {
        let condition = storage.getFlag("condition");
        if (condition) {
            return [
                () => {
                    narration.dialogue = "Step 2";
                },
                () => {
                    narration.dialogue = "Restart";
                },
            ];
        } else {
            return [
                () => {
                    narration.dialogue = "Step 1";
                },
                async (props, { labelId }) => {
                    storage.setFlag("condition", true);
                    return await narration.jump(labelId, props);
                },
            ];
        }
    });
    ```

    <ReturningDifferentStepLists />
  </Accordion>
</Accordions>


# Manage narration flow with labels (/start/labels-flow)



The narration flow is managed by functions such as `call`, `jump`, `continue`, `back`, and `closeLabel`, all available in the `narration` object.

## Run a label [#run-a-label]

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/labels#run-a-knot">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="`call` a `label`" id="call-a-label">
    To call a `label`, use the [`narration.call`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) function.

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

    narration.call(startLabel, {});
    ```

    When you call a `label`, the first `step` of that `label` is executed. If another `label` was running before the call, the remaining `steps` of that previous `label` will resume after the called `label` finishes.

    For example, if the game is running `step` 5 of `label` A and you **call** `label` B, after all `steps` of `label` B are executed, the game continues with `step` 6 of `label` A.

    [`narration.call`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) returns the <DynamicLink href="/start/labels#step-results">result</DynamicLink> of the first `step` of the called `label`.

    ***

    If you execute [`narration.call`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) inside a `step`, you should return the result of [`narration.call`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) and use `await`. This ensures the history is managed correctly.

    ```ts title="content/labels/start.label.ts"
    import { narration, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async (props) => {
            return await narration.call(TestLabel, props);
        },
        async (props) => await narration.call(TestLabel, props),
    ]);
    ```
  </Accordion>

  <Accordion title="`jump` a `label`" id="jump-to-a-label">
    To jump to a `label`, use the [`narration.jump`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump) function.

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

    narration.jump(startLabel, {});
    ```

    When you jump to a `label`, the current `label`'s `steps` are stopped and the new `label`'s `steps` begin.

    For example, if the game is running `step` 5 of `label` A, and you **call** `label` B, but then **jump** to `label` C, after `label` C finishes, the game continues with `step` 6 of `label` A. When you jump to `label` C, `label` B is closed.

    [`narration.jump`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump) returns the <DynamicLink href="/start/labels#all-steps-result">result of the first `step` of the called `label`</DynamicLink>.

    ***

    If you execute [`narration.jump`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump) inside a `step`, you should return the result of [`narration.jump`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump) and use `await`. This ensures the first `step` of the new `label` is awaited.

    ```ts title="content/labels/start.label.ts"
    import { narration } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async (props) => {
            return await narration.jump(TestLabel, props);
        },
        async (props) => await narration.jump(TestLabel, props),
    ]);
    ```
  </Accordion>

  <Accordion title="Start the game" id="start-game">
    To start the game, use the [`Game.start`](/jsdoc/pixi-vn/index/namespaces/Game/functions/start) function. This function is equivalent to calling a `label`, but it is recommended to use it for a cleaner startup.

    ```ts title="content/labels/start.label.ts"
    import { Game } from "@drincs/pixi-vn";

    Game.start(startLabel, gameProps);
    ```
  </Accordion>
</Accordions>

## Continue and go back in steps [#continue-and-go-back-in-steps]

### Continue [#continue]

<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find the example of the "continue" button in the <DynamicLink href="/start/interface-examples#go-next">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

To execute the next `step`, use the [`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) function.

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

await narration.continue({});
```

[`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) is asynchronous, so you can use `.then` to, for example, disable a "Next" button until the `step` is complete.

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

// disable next button
narration.continue({}).then((result) => {
    // enable next button
});
```

<Accordions>
  <Accordion title="Execute continue inside a `step`" id="call-continue-inside-a-step">
    If you call [`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) inside a `step`, the "continue" request will be queued and executed when the queue is empty.

    ```ts title="content/labels/start.label.ts"
    import { narration, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async (props) => {
            narration.continue(props);
        },
    ]);
    ```

    Here is an example to illustrate how the queue works:

    ```ts title="content/labels/start.label.ts"
    import { narration, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async (props) => {
            await narration.call(label2, props);
            console.log(1);
        },
        () => {
            console.log(3);
        },
    ]);

    const label2 = newLabel("label_02", [
        async (props) => {
            await narration.continue(props);
            console.log(2);
        },
    ]);
    ```

    In this example, the output will be `2`, `1`, `3`. The steps are:

    1. `await narration.call(label2, props)` calls label2 and awaits its first `step`. (1 item in the queue)
    2. The first `step` of label2 executes `await narration.continue(props)`, but the continue request is queued because the queue is not empty. (2 items in the queue)
    3. `console.log(2)` runs, finishing the first `step` of label2. (1 item in the queue)
    4. `console.log(1)` runs, finishing the first `step` of startLabel. (0 items in the queue)
    5. Now the continue request is executed, and the second `step` of startLabel runs. (1 item in the queue)
    6. `console.log(3)` runs, finishing the second `step` of startLabel. (0 items in the queue)
  </Accordion>

  <Accordion title="Check if can go to the next `step`" id="can-go-next">
    You can use the [`narration.canContinue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#cancontinue) property to check if the next `step` can be executed.

    [`narration.canContinue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#cancontinue) is `false` when:

    * A `step` is running
    * The player must <DynamicLink href="/start/choices">make a choice</DynamicLink>
    * The player must <DynamicLink href="/start/input">enter a value</DynamicLink>

    ```tsx title="components/NextButton.tsx"
    import { narration } from "@drincs/pixi-vn";

    function NextButton() {
        return (
            <button
                disabled={!narration.canContinue}
                onClick={() => {
                    narration.continue({});
                }}
            >
                Next
            </button>
        );
    }
    ```
  </Accordion>
</Accordions>

### Go back [#go-back]

<CalloutContainer type="info">
  <CalloutTitle>
    UI screen
  </CalloutTitle>

  <CalloutDescription>
    You can find the example of the go back button in the <DynamicLink href="/start/interface-examples#go-back">interface examples</DynamicLink> section.
  </CalloutDescription>
</CalloutContainer>

At every `step`, the system saves the current state of the game. To go back to the previous `step`, use the [`stepHistory.back`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#back) function.

<Accordions>
  <Accordion title="Check if can go back" id="can-go-back">
    You can use the [`stepHistory.canGoBack`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#cangoback) property to check if going back is possible.

    [`stepHistory.canGoBack`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#cangoback) is `false` when there are no `steps` in the history to restore.

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

    if (stepHistory.canGoBack) {
        stepHistory.back();
    }
    ```
  </Accordion>

  <Accordion title="Block the possibility of going back" id="block-the-possibility-of-going-back">
    You can block the "go back" by calling [`stepHistory.blockGoBack`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#blockgoback).

    ```typescript
    import { stepHistory } from "@drincs/pixi-vn";

    stepHistory.blockGoBack();
    ```
  </Accordion>
</Accordions>

## Close labels [#close-labels]

<Accordions>
  <Accordion title="Close current label" id="close-current-label">
    To close the current `label`, use the [`narration.closeCurrentLabel`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#closecurrentlabel) function.

    ```typescript
    import { narration } from "@drincs/pixi-vn";

    narration.closeCurrentLabel();
    ```
  </Accordion>

  <Accordion title="Close all labels" id="close-all-labels">
    To close all `labels`, use the [`narration.closeAllLabels`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#closealllabels) function. **If you call this function and do not call any `label` afterwards, the game will end**

    ```typescript
    import { narration } from "@drincs/pixi-vn";

    narration.closeAllLabels();
    ```
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Rollback and Rollforward" id="rollback-rollforward">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, this implementation is already included.
      </CalloutDescription>
    </CalloutContainer>

    If you execute multiple [`stepHistory.back`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#back) and [`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) requests synchronously, the system will internally queue them and calculate the delta to execute only the necessary processes.

    So you can implement rollback and rollforward features using the [`stepHistory.back`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#back) and [`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) functions.

    ```tsx title="lib/hooks/quick-tools-hooks.ts"
    import { HTML_CANVAS_LAYER_NAME, HTML_UI_LAYER_NAME } from "@/constans";
    import { useGameProps } from "@/lib/hooks/props-hooks";
    import { GameStatus } from "@/lib/stores/game-status-store";
    import { hasScrollableParent } from "@/lib/utils/scroll-utils";
    import { type StepLabelProps, stepHistory } from "@drincs/pixi-vn";
    import { narration } from "@drincs/pixi-vn/narration";
    import { useThrottler } from "@tanstack/react-pacer";
    import { useEffect, useRef } from "react";

    function isInsideRoot(target: EventTarget | null, selector: string): boolean {
        if (!(target instanceof HTMLElement)) return false;
        return target.closest(`#${selector}`) !== null;
    }

    export function useWheelActions({
        throttleMs = 300,
        minDelta = 20,
    }: {
        throttleMs?: number;
        minDelta?: number;
    } = {}) {
        const pendingAsync = useRef(0);
        const gameProps = useGameProps();

        const runAsync = async (
            fn: (props: StepLabelProps) => Promise<unknown>,
        ) => {
            try {
                pendingAsync.current += 1;
                GameStatus.setLoading(pendingAsync.current > 0);
                await fn(gameProps);
            } finally {
                pendingAsync.current -= 1;
                GameStatus.setLoading(pendingAsync.current > 0);
                if (pendingAsync.current === 0) {
                    gameProps.invalidateInterfaceData();
                }
            }
        };

        const handleWheel = useThrottler(
            async (event: WheelEvent) => {
                if (
                    !(
                        isInsideRoot(event.target, HTML_UI_LAYER_NAME) ||
                        isInsideRoot(event.target, HTML_CANVAS_LAYER_NAME)
                    )
                )
                    return;
                if (hasScrollableParent(event.target)) return;

                // blocca lo scroll nativo
                event.preventDefault();

                const { deltaY } = event;

                // ignora micro-movimenti del trackpad
                if (Math.abs(deltaY) < minDelta) return;

                if (deltaY < 0) {
                    // ⬆️ Scroll up
                    await runAsync(narration.continue.bind(narration));
                }

                if (deltaY > 0) {
                    // ⬇️ Scroll down
                    await runAsync(stepHistory.back.bind(stepHistory));
                }
            },
            { wait: throttleMs },
        );

        useEffect(() => {
            window.addEventListener("wheel", handleWheel.maybeExecute, {
                passive: false,
            });

            return () => {
                window.removeEventListener("wheel", handleWheel.maybeExecute);
            };
        }, [handleWheel.maybeExecute]);

        return null;
    }
    ```
  </Accordion>
</Accordions>


# Labels and steps (/start/labels)



Visual novels are typically a sequence of scenes with images and text. In Pixi’VN, the entire narrative flow is based on the concepts of `labels` and `steps`.

A `label` is used to organize the narrative; it works as a "bookmark" or section of the story. Technically, a `label` is a class that acts as a container for `steps`.

A `step` is an individual action or event that occurs within a `label`. Steps are used to display images, text, and other narrative elements.

<CalloutContainer type="info">
  <CalloutTitle>
    Nomenclature
  </CalloutTitle>

  <CalloutDescription>
    The term `label` is borrowed from Ren'Py, where it acts as a "bookmark" or "landmark" in the story. In the ink language, the equivalent term is `knot`.

    The term `step` is introduced by Pixi’VN to represent the individual actions or events that occur within a `label`.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Lifecycle" id="lifecycle">
    1. The game starts by calling a `label`, with the [`Game.start`](/jsdoc/pixi-vn/index/namespaces/Game/functions/start) function. The first `step` of the `label` is executed automatically.
    2. After that, by connecting the [`narration.continue`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) function to an event (such as a button click), each time the function is called, the next `step` of the `label` is executed. Some `steps` can also start other `labels`.
    3. The game ends only when all `steps` are completed. At that point, the [`Game.onEnd`](/jsdoc/pixi-vn/index/namespaces/Game/functions/onEnd) function is triggered.
  </Accordion>
</Accordions>

## Add [#add]

To create a `label`, use the [`newLabel`](/jsdoc/pixi-vn/index/functions/newLabel) function.

```ts title="content/labels/start.label.ts"
import { narration, StepLabelProps } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    () => {
        narration.dialogue = { character: liam, text: "Example of dialogue" };
    },
    (props: StepLabelProps, { labelId }) => narration.jump(labelId, props),
]);
```

## Other features [#other-features]

<Accordions>
  <Accordion title="`StepLabelProps`" id="steplabelprops">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, the `StepLabelProps` interface is already overridden. You can find it in the `pixi-vn.d.ts` file.
      </CalloutDescription>
    </CalloutContainer>

    All <DynamicLink href="/start/labels-flow">narration flow control functions</DynamicLink> require an object matching the [`StepLabelProps`](/jsdoc/pixi-vn/index/interfaces/StepLabelProps) interface. You can "override" the `StepLabelProps` interface in your `.d.ts` file to specify required parameters.

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        import { narration } from "@drincs/pixi-vn";

        declare module "@drincs/pixi-vn" {
            interface StepLabelProps {
                navigate: (route: string) => void;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        export const startLabel = newLabel("start", [
            ({ navigate }) => {
                navigate("/new-route");
            },
        ]);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="`step` pros" id="step-pros">
    You can pass a type to the [`newLabel`](/jsdoc/pixi-vn/index/functions/newLabel) function to add custom parameters for that `label`, in addition to [`StepLabelProps`](#steplabelprops).

    ```ts title="content/labels/start.label.ts"
    import { narration } from "@drincs/pixi-vn";

    export const startLabel = newLabel<{ name: string }>("start", [
        (props) => {
            console.log(props.name);
        },
    ]);

    narration.call(startLabel, {
        // Add StepLabelProps here
        navigate: navigate, // example
        // And the custom props for the label
        name: "John",
    });
    ```
  </Accordion>

  <Accordion title="`StepLabelResult`" id="step-results">
    Steps can return a [`StepLabelResult`](/jsdoc/pixi-vn/index/interfaces/StepLabelResult) object. You can "override" the `StepLabelResult` interface in your `.d.ts` file to define custom properties for `step` results.

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        declare module "@drincs/pixi-vn" {
            interface StepLabelResult {
                newRoute?: string;
                [key: string]: any;
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        export const startLabel = newLabel("start", [
            () => {
                return {
                    newRoute: "/new-route",
                    customProperty: 12,
                };
            },
        ]);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Make your game engine (/start/make-game-engine)



<Callout type="info">
  This guide is designed only for developers with good experience in JavaScript. If you are not a developer, you can skip this page and use the default engine.
</Callout>

One of the main goals of Pixi’VN is to provide basic utilities for developing video games. The engine is designed to be modular and flexible, allowing developers to use only the parts they need for their specific projects. This modularity also makes it easier to maintain and update the engine over time.

This is exactly what enables you to create your own game engine using the `pixi-vn` package.

The first `step` is to create a new project. You can find more information on how to create a new project starting from a template <DynamicLink href="/start#project-initialization">here</DynamicLink>. The "Game Engine" template is a simple project that contains the basic structure of a game engine. By default, it exports the basic functionality of pixi-vn while removing anything unused from the package.

<Callout type="info">
  A special thread was created to share your idea or ask for help during the development of your game engine. Feel free to write in the chat below!
</Callout>

The second `step` is to understand that Pixi’VN is divided into independent "modules". This means you can replace one "module" without having to worry about modifying the others. To do this, you just need to modify `GameUnifier`, which connects the modules together, as explained below.

It is also important to understand that by default the engine saves the current state of the game at each `step`, to give the player the possibility to go back. To do this, the following functions are defined:

* `GameUnifier.getCurrentGameStepState`: This function returns the current state of the game `step`.
* `GameUnifier.restoreGameStepState`: This function restores the state of the game `step`.
* `Game.exportGameState`: This function returns the current state of the game. (Optional)
* `Game.restoreGameState`: This function restores the state of the game. (Optional)

## Storage [#storage]

Replacing the base storage of Pixi’VN is straightforward.

For example, here is how you could replace it with [`cacheable`](https://www.npmjs.com/package/cacheable):

<CodeBlockTabs defaultValue="index.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="index.ts">
      index.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="interfaces/GameState.ts">
      interfaces/GameState.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="index.ts">
    ```ts
    import { CacheableMemory } from "cacheable"; // [!code ++]

    const storage = new CacheableMemory(); // [!code ++]
    const flagStorage = new CacheableMemory(); // [!code ++]

    export namespace Game {
        export async function initialize(
            element: HTMLElement,
            options: Partial<ApplicationOptions> & { width: number; height: number },
            devtoolsOptions?: Devtools
        ) {
            GameUnifier.init({
                getCurrentGameStepState: () => {
                    return {
                        // ...
                        storage: storage.export(), // [!code --]
                        storage: { // [!code ++]
                            main: createExportableElement([...storage.items]), // [!code ++]
                            flags: createExportableElement([...flagStorage.items]), // [!code ++]
                        }, // [!code ++]
                    };
                },
                restoreGameStepState: async (state, navigate) => {
                    // ...
                    storage.restore(state.storage); // [!code --]
                    storage.setMany(state.storage.main); // [!code ++]
                    flagStorage.setMany(state.storage.flags); // [!code ++]
                },
                // storage
                getVariable: (key) => storage.get(key), // [!code --]
                setVariable: (key, value) => storage.set(key, value), // [!code --]
                removeVariable: (key) => storage.remove(key), // [!code --]
                getFlag: (key) => storage.getFlag(key), // [!code --]
                setFlag: (name, value) => storage.setFlag(name, value), // [!code --]
                // onLabelClosing is called when the label is closed, it can use for example to clear the temporary variables in the storage // [!code --]
                onLabelClosing: (openedLabelsNumber) => StorageManagerStatic.clearOldTempVariables(openedLabelsNumber),  // [!code --]
                getVariable: (key) => storage.get(key), // [!code ++]
                setVariable: (key, value) => storage.set(key, value), // [!code ++]
                removeVariable: (key) => storage.delete(key), // [!code ++]
                getFlag: (key) => flagStorage.get(key) ?? false, // [!code ++]
                setFlag: (name, value) => flagStorage.set(name, value), // [!code ++]
            });
            // ...
        }

        export function clear() {
            // ...
            storage.clear(); // [!code --]
            storage.clear(); // new class // [!code ++]
            flagStorage.clear(); // [!code ++]
        }

        export function exportGameState(): GameState {
            return {
                // ...
                storageData: storage.export(), // [!code --]
                storageData: { // [!code ++]
                    main: createExportableElement([...storage.items]), // [!code ++]
                    flags: createExportableElement([...flagStorage.items]), // [!code ++]
                }, // [!code ++]
            };
        }

        export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
            // ...
            storage.restore(data.storageData); // [!code --]
            storage.clear(); // [!code ++]
            storage.setMany(data.storageData.main); // [!code ++]
            flagStorage.clear(); // [!code ++]
            flagStorage.setMany(data.storageData.flags); // [!code ++]
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="interfaces/GameState.ts">
    ```ts
    import { CacheableItem } from "cacheable";

    export default interface GameState {
        engine_version: string;
        step: NarrationGameState;
        storageData: StorageGameState; // [!code --]
        storageData: { // [!code ++]
            main: CacheableItem[]; // [!code ++]
            flags: CacheableItem[]; // [!code ++]
        }; // [!code ++]
        canvasData: CanvasGameState;
        soundData: SoundGameState;
        historyData: HistoryGameState;
        path: string;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Renderer [#renderer]

The canvas is also a module that can be replaced. The default canvas uses the `pixi.js` library, but you can use any other canvas library you want.

You are not forced to use a WebGL-based 2D renderer. You can use any renderer you want, including 3D or React-based renderers. The only requirement is that the renderer state must be saved and restored at each `step`.

For example:

<CodeBlockTabs defaultValue="index.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="index.ts">
      index.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="interfaces/GameState.ts">
      interfaces/GameState.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="index.ts">
    ```ts
    const canvas = new Canvas(); // [!code ++]

    export namespace Game {
        export async function initialize(
            options: CanvasOptions, // [!code ++]
        ) {
            GameUnifier.init({
                getCurrentGameStepState: () => {
                    return {
                        // ...
                        canvas: canvas.export(), // [!code ++]
                    };
                },
                restoreGameStepState: async (state, navigate) => {
                    // ...
                    await canvas.restore(state.canvas); // [!code ++]
                },
                // This function is called when the step is completed, it can be used to force the completion of the animations // [!code ++]
                onPreContinue: async () => { // [!code ++]
                    canvas.forceCompletionOfAnimations(); // [!code ++]
                }, // [!code ++]
            });
            return await canvas.init(options); // [!code ++]
        }

        export function clear() {
            // ...
            canvas.clear(); // [!code ++]
        }

        export function exportGameState(): GameState {
            return {
                // ...
                canvasData: canvas.export(), // [!code ++]
            };
        }

        export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
            // ...
            await canvas.restore(data.canvasData); // [!code ++]
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="interfaces/GameState.ts">
    ```ts
    import { CanvasGameState } from "./canvas"; // [!code ++]

    export default interface GameState {
        engine_version: string;
        stepData: NarrationGameState;
        storageData: StorageGameState;
        canvasData: CanvasState; // [!code ++]
        soundData: SoundGameState;
        historyData: HistoryGameState;
        path: string;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Sound [#sound]

The sound module can also be replaced. The default uses [`PixiJS Sound`](https://pixijs.io/sound/examples/index.html), but you can use any sound library.

For example, to use [`howler.js`](https://howlerjs.com/):

<CodeBlockTabs defaultValue="index.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="index.ts">
      index.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="interfaces/GameState.ts">
      interfaces/GameState.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="index.ts">
    ```ts
    import { Howl, Howler } from "howler"; // [!code ++]

    export function exportHowlerState() { // [!code ++]
        const state = Howler._howls.map((howl) => ({ // [!code ++]
            src: howl._src, // [!code ++]
            volume: howl.volume(), // [!code ++]
            rate: howl.rate(), // [!code ++]
            loop: howl.loop(), // [!code ++]
            playing: howl.playing(), // [!code ++]
            seek: howl.seek(), // [!code ++]
        })); // [!code ++]
        return state; // [!code ++]
    } // [!code ++]

    export async function restoreHowlerState(state: Array<any>) { // [!code ++]
        state.forEach((soundData) => { // [!code ++]
            const sound = new Howl({ // [!code ++]
                src: soundData.src, // [!code ++]
                volume: soundData.volume, // [!code ++]
                rate: soundData.rate, // [!code ++]
                loop: soundData.loop, // [!code ++]
            }); // [!code ++]

            if (soundData.playing) { // [!code ++]
                sound.seek(soundData.seek); // [!code ++]
                sound.play(); // [!code ++]
            } // [!code ++]
        }); // [!code ++]
    } // [!code ++]

    export namespace Game {
        export async function initialize(
            element: HTMLElement,
            options: Partial<ApplicationOptions> & { width: number; height: number },
            devtoolsOptions?: Devtools
        ) {
            GameUnifier.init({
                getCurrentGameStepState: () => {
                    return {
                        // ...
                        sound: sound.export(), // [!code --]
                        sound: exportHowlerState(), // [!code ++]
                    };
                },
                restoreGameStepState: async (state, navigate) => {
                    // ...
                    sound.restore(state.sound); // [!code --]
                    await restoreHowlerState(state.soundData); // [!code ++]
                },
            });
            // ...
        }

        export function clear() {
            sound.clear(); // [!code --]
            Howler._howls.forEach((howl) => howl.unload()); // [!code ++]
            // ...
        }

        export function exportGameState(): GameState {
            return {
                // ...
                soundData: sound.export(), // [!code --]
                soundData: exportHowlerState(), // [!code ++]
            };
        }

        export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
            // ...
            sound.restore(data.soundData); // [!code --]
            await restoreHowlerState(data.soundData); // [!code ++]
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="interfaces/GameState.ts">
    ```ts
    import { CacheableItem } from "cacheable";

    export default interface GameState {
        engine_version: string;
        stepData: NarrationGameState;
        storageData: StorageGameState;
        canvasData: CanvasGameState;
        soundData: SoundGameState; // [!code --]
        soundData: Array<any>; // [!code ++]
        historyData: HistoryGameState;
        path: string;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Narration [#narration]

Replacing the entire narration module is possible but not recommended, as it is a strong point of Pixi’VN.

Since it is handled generically, you can implement your own <DynamicLink href="/start/labels#label">`Label`</DynamicLink> (the key element of narration) by extending `LabelAbstract`.

For example:

<CodeBlockTabs defaultValue="classes/Label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="classes/Label.ts">
      classes/Label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="utils/label.ts">
      utils/label.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="classes/Label.ts">
    ```ts
    import { LabelAbstract, LabelProps, StepLabelType } from "@drincs/pixi-vn";
    import sha1 from "crypto-js/sha1";

    export default class Label<T extends {} = {}> extends LabelAbstract<Label<T>, T> {
        public get stepCount(): number {
            return this.steps.length;
        }
        public getStepById(stepId: number): StepLabelType<T> | undefined {
            return this.steps[stepId];
        }
        /**
         * @param id is the id of the label
         * @param steps is the list of steps that the label will perform
         * @param props is the properties of the label
         */
        constructor(id: string, steps: StepLabelType<T>[] | (() => StepLabelType<T>[]), props?: LabelProps<Label<T>>) {
            super(id, props);
            this._steps = steps;
        }

        private _steps: StepLabelType<T>[] | (() => StepLabelType<T>[]);
        /**
         * Get the steps of the label.
         */
        public get steps(): StepLabelType<T>[] {
            if (typeof this._steps === "function") {
                return this._steps();
            }
            return this._steps;
        }

        public getStepSha(index: number): string {
            if (index < 0 || index >= this.steps.length) {
                console.warn("stepSha not found, setting to ERROR");
                return "error";
            }
            try {
                let step = this.steps[index];
                let sha1String = sha1(step.toString().toLocaleLowerCase());
                return sha1String.toString();
            } catch (e) {
                console.warn("stepSha not found, setting to ERROR", e);
                return "error";
            }
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="utils/label.ts">
    ```ts
    import { LabelProps, RegisteredLabels, StepLabelType } from "@drincs/pixi-vn";
    import Label from "../classes/Label";

    /**
     * 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.**
     * @param id The id of the label, it must be unique
     * @param steps The steps of the label
     * @param props The properties of the label
     * @returns The created label
     */
    export function newLabel<T extends {} = {}>(
        id: string,
        steps: StepLabelType<T>[] | (() => StepLabelType<T>[]),
        props?: Omit<LabelProps<Label<T>>, "choiseIndex">
    ): Label<T> {
        if (RegisteredLabels.get(id)) {
            console.info(`Label ${id} already exists, it will be overwritten`);
        }
        let label = new Label<T>(id, steps, props);
        RegisteredLabels.add(label);
        return label;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## History [#history]

The history module can be replaced. The default uses the [`deep-diff`](https://www.npmjs.com/package/deep-diff) library, but you can use any history library.

For example:

<CodeBlockTabs defaultValue="index.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="index.ts">
      index.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="classes/HistoryManager.ts">
      classes/HistoryManager.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="index.ts">
    ```ts
    import HistoryManager, { HistoryManagerStatic } from "./classes/HistoryManager"; // [!code ++]

    const stepHistory = new HistoryManager(); // [!code ++]

    export namespace Game {
        export async function initialize(
            element: HTMLElement,
            options: Partial<ApplicationOptions> & { width: number; height: number },
            devtoolsOptions?: Devtools
        ) {
            GameUnifier.init({
                restoreGameStepState: async (state, navigate) => {
                    HistoryManagerStatic.originalStepData = state; // [!code ++]
                    // ...
                },
                addHistoryItem: (historyInfo, opstions) => {
                    return stepHistory.add(historyInfo, opstions); // [!code ++]
                },
                // ...
            });
            // ...
        }

        export function clear() {
            // ...
            stepHistory.clear(); // [!code ++]
        }

        export function exportGameState(): GameState {
            return {
                // ...
                historyData: stepHistory.export(), // [!code ++]
            };
        }

        export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
            stepHistory.restore(data.historyData); // [!code ++]
            // ...
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="classes/HistoryManager.ts">
    ```ts
    import { GameStepStateData, GameUnifier, HistoryGameState, HistoryStep } from "@drincs/pixi-vn";
    import { diff } from "deep-diff";

    export class HistoryManagerStatic {
        static _stepsHistory: HistoryStep[] = [];
        static stepLimitSaved: number = 20;
        static get lastHistoryStep(): HistoryStep | null {
            if (HistoryManagerStatic._stepsHistory.length > 0) {
                return HistoryManagerStatic._stepsHistory[HistoryManagerStatic._stepsHistory.length - 1];
            }
            return null;
        }
        static originalStepData: GameStepStateData | undefined = undefined;
    }

    /**
     * This class is a class that manages the steps and labels of the game.
     */
    export default class HistoryManager {
        get stepsHistory() {
            return HistoryManagerStatic._stepsHistory;
        }
        add(
            historyInfo: HistoryInfo = {},
            opstions: {
                ignoreSameStep?: boolean;
            } = {}
        ) {
            const originalStepData = HistoryManagerStatic.originalStepData;
            const { ignoreSameStep } = opstions;
            const currentStepData: GameStepStateData = GameUnifier.currentGameStepState;
            if (!ignoreSameStep && this.isSameStep(originalStepData, currentStepData)) {
                return;
            }
            let data = diff(originalStepData, currentStepData);
            this.stepsHistory.push({
                ...(historyInfo as Omit<HistoryStep, "diff">),
                diff: data,
            });
            HistoryManagerStatic.originalStepData = currentStepData;
        }

        private isSameStep(originalState: GameStepStateData, newState: GameStepStateData) {
            if (originalState.openedLabels.length === newState.openedLabels.length) {
                try {
                    let lastStepDataOpenedLabelsString = JSON.stringify(originalState.openedLabels);
                    let historyStepOpenedLabelsString = JSON.stringify(newState.openedLabels);
                    if (
                        lastStepDataOpenedLabelsString === historyStepOpenedLabelsString &&
                        originalState.path === newState.path &&
                        originalState.labelIndex === newState.labelIndex
                    ) {
                        return true;
                    }
                } catch (e) {
                    console.error("Error comparing opened labels", e);
                    return true;
                }
            }
            return false;
        }

        public clear() {
            HistoryManagerStatic._stepsHistory = [];
            HistoryManagerStatic.originalStepData = undefined;
        }

        /* Export and Import Methods */

        public export(): HistoryGameState {
            return {
                stepsHistory: this.stepsHistory,
                originalStepData: HistoryManagerStatic.originalStepData,
            };
        }
        public async restore(data: object) {
            this.clear();
            HistoryManagerStatic._stepsHistory = (data as HistoryGameState)["stepsHistory"];
            HistoryManagerStatic.originalStepData = (data as HistoryGameState)["originalStepData"];
        }

        /* Options Methods */

        async back() {
            // TODO To be implemented
        }
        get narrativeHistory() {
            // TODO To be implemented
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Make your VN builder or web-game editor (/start/make-ide)



Pixi’VN is a free, open-source npm library and will never be tied to a single VN builder or web-game editor.

We encourage VN builder or web-game editor developers to add an export that produces a file compatible with Pixi’VN projects.

<Callout type="info">
  Before you begin, contact the Pixi’VN team. We can offer advice, collaborate, and help promote your integration.
</Callout>

## Create [#create]

If you are starting from scratch, here is some practical advice:

* Be realistic about the time and skills required.
* Choose your languages and tools based on your team and goals. We recommend using TypeScript so you can reuse Pixi’VN typings.
* The simplest and most portable approach is to export a JSON that follows the [PixiVNJson](/jsdoc/pixi-vn-json) model. That JSON contains the sequence of instructions Pixi’VN will execute and can be injected into a Pixi’VN template by the user or your tool.
* Exporting JSON keeps your tool engine-agnostic and makes it easier to support other engines later.

## Migrate [#migrate]

Already have a tool and want Pixi’VN compatibility? Usually this is straightforward:

* If your tool already exports or internally serializes instructions as objects or JSON, create a small mapping layer that converts your format to the [PixiVNJson](/jsdoc/pixi-vn-json) model.

Once you can produce PixiVNJson, users can drop the exported JSON into a Pixi’VN template to run the game.


# Make your first RPG game (/start/make-rpg)



<Callout title="This page is under construction" type="warn">
  The toolkit for creating an RPG on Pixi’VN is still in development. If you are interested, feel free to write in the chat below!
</Callout>


# Make your first Visual Novel (/start/make-visual-novel)



This tutorial will guide you through the process of creating your first Visual Novel.

<Accordions>
  <Accordion title="What is a Visual Novel?" id="what-is-a-visual-novel">
    A visual novel (VN) is a form of digital interactive fiction. Visual novels are often associated with the medium of video games, but are not always labeled as such themselves. They combine a textual narrative with static or animated illustrations and a varying degree of interactivity. The format is more rarely referred to as novel game, a retranscription of the wasei-eigo term noberu gēmu (ノベルゲーム), which is more often used in Japanese.
  </Accordion>
</Accordions>

For testing purposes, in this guide we will be recreating the visual novel [Breakdown](https://joshpowlison.itch.io/breakdown) using Pixi’VN. Breakdown is a short story that has all the features that a visual novel should have. Josh Powlison, the creator of Breakdown, has given us permission to use his narration for educational purposes❤️.

<CalloutContainer type="info">
  <CalloutDescription>
    Since Pixi’VN gives you the ability to write your own narration by choosing one or more <DynamicLink href="/start/narration">available narrative languages</DynamicLink>, examples will be made for each currently available language at each development step.
  </CalloutDescription>
</CalloutContainer>

## Create a new project [#create-a-new-project]

Before starting, make sure you have installed the <DynamicLink href="/start#prerequisites">prerequisites</DynamicLink>.

The first step is to create a new project. You can do this by running:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm create pixi-vn@latest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bunx create-pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

and selecting the `Visual Novel` template.

<CalloutContainer type="info">
  <CalloutTitle>
    VS Code
  </CalloutTitle>

  <CalloutDescription>
    If you open the project with VS Code, you will be asked to consent to running some workspace tasks and to install the recommended extensions for the project. It is strongly advised to accept both.
  </CalloutDescription>
</CalloutContainer>

You can find more information about templates, tasks, and extensions <DynamicLink href="/start/templates">here</DynamicLink>.

<Accordions>
  <Accordion title="Manual commands" id="manual-commands">
    If you prefer not to use the VS Code tasks, you can achieve the same result by running the following commands from the root of the project:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install
        npm start
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm install
        pnpm start
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn install
        yarn start
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun install
        bun start
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Characters creation [#characters-creation]

Now we will define the characters of this story. To do this, we will define in the `/content/characters.ts` file the characters that we will be using.

<Accordions>
  <Accordion title="What does `mc` mean?" id="what-does-mc-mean">
    `mc` is a common abbreviation for "Main Character". It is a common practice in visual novels to use `mc` as the main character's name.
  </Accordion>

  <Accordion title="Where is the `Character` model defined?" id="where-is-the-character-model-defined">
    The `Character` model used below is defined in `models/Character.ts`. You can modify it to your liking, for example to add more properties related to the character (e.g. `surname`, `age`, ...). You can find more information about this file <DynamicLink href="/start/character#custom-class">here</DynamicLink>.
  </Accordion>
</Accordions>

<CalloutContainer type="info">
  <CalloutDescription>
    For more information on how to create and use characters you can consult: <DynamicLink href="/start/character">Characters</DynamicLink>
  </CalloutDescription>
</CalloutContainer>

```ts title="content/characters.ts"
import Character from "@/models/Character";
import { RegisteredCharacters } from "@drincs/pixi-vn";

export const mc = new Character("mc", {
    name: "Me",
});

export const james = new Character("james", {
    name: "James",
    color: "#0084ac",
});

export const steph = new Character("steph", {
    name: "Steph",
    color: "#ac5900",
});

export const sly = new Character("sly", {
    name: "Sly",
    color: "#6d00ac",
});

RegisteredCharacters.add([mc, james, steph, sly]);
```

## First draft of the narrative [#first-draft-of-the-narrative]

<CalloutContainer type="info">
  <CalloutTitle>
    Markup
  </CalloutTitle>

  <CalloutDescription>
    All templates have <DynamicLink href="/start/markup-markdown">Markdown</DynamicLink> and <DynamicLink href="/start/markup-tailwindcss">Tailwind CSS</DynamicLink> support, so we will use it for our narration.
  </CalloutDescription>
</CalloutContainer>

Now we can start writing the "first draft" of the <DynamicLink href="/start/narration">narration</DynamicLink> of the visual novel.
We will create the first <DynamicLink href="/start/labels">`label`</DynamicLink> called `start`, which will be the beginning of the game. After that we can write the <DynamicLink href="/start/dialogue">dialogues</DynamicLink> that will follow in our visual novel.

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    james: You're my roommate's replacement, huh?
    james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you' fine!
    mc: ...

    He thrusts out his hand.

    james: James!
    mc: ...Peter.

    I take his hand and shake.

    james: Ooh, Peter! Nice, firm handshake! The last quy always gave me the dead fish. I already think we'r gonna get along fine.
    james: Come on in and...
    james: ...
    james: I know you're both watching, come on out already!

    sly: I just wanted to see what the new guy was like. Hey, you, Peter- be nice to our little brother, or you'll have to deal with *us*.
    mc: ...
    james: Peter, this is Sly. Yes, that is her real name.

    I put out my hand.

    sly: I'm not shakin' your hand until I decide you're an all-right dude. Sorry, policy.
    mc: Fair enough, I'm a pretty scary guy, or so l've been told.
    james: The redhead behind her is Stephanie.
    // Example of using Tailwind CSS
    steph: <span class="inline-block motion-translate-y-loop-25">Hey</span>! Everyone calls me Steph. I'll shake your hand.

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        () =>
            (narration.dialogue = {
                character: james,
                text: `You're my roommate's replacement, huh?`,
            }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you' fine!`,
            }),
        () => (narration.dialogue = { character: mc, text: `...` }),
        () => {
            narration.dialogue = "He thrusts out his hand.";
        },
        () => (narration.dialogue = { character: james, text: `James!` }),
        () => (narration.dialogue = { character: mc, text: `...Peter.` }),
        () => {
            narration.dialogue = "I take his hand and shake.";
        },
        () =>
            (narration.dialogue = {
                character: james,
                text: `Ooh, Peter! Nice, firm handshake! The last quy always gave me the dead fish. I already think we'r gonna get along fine.`,
            }),
        () =>
            (narration.dialogue = { character: james, text: `Come on in and...` }),
        () => (narration.dialogue = { character: james, text: `...` }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `I know you're both watching, come on out already!`,
            }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `I just wanted to see what the new guy was like. Hey, you, Peter- be nice to our little brother, or you'll have to deal with *us*.`,
            }),
        () => (narration.dialogue = { character: mc, text: `...` }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `Peter, this is Sly. Yes, that is her real name.`,
            }),
        () => {
            narration.dialogue = "I put out my hand.";
        },
        () =>
            (narration.dialogue = {
                character: james,
                text: `I'm not shakin' your hand until I decide you're an all-right dude. Sorry, policy.`,
            }),
        () =>
            (narration.dialogue = {
                character: mc,
                text: `Fair enough, I'm a pretty scary guy, or so l've been told.`,
            }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `The redhead behind her is Stephanie.`,
            }),
        // Example of using Tailwind CSS
        () =>
            (narration.dialogue = {
                character: steph,
                text: `<span class="inline-block motion-translate-y-loop-25">Hey</span>! Everyone calls me Steph. I'll shake your hand.`,
            }),
        // ...
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Use the `glue` feature of dialogues" id="use-the-glue-feature-of-dialogues">
    In visual novels, it is often useful to paste text into the current dialogue. For example, to pause a conversation and have it continue in a subsequent `step`. To do this, we can use the <DynamicLink href="/start/dialogue#dialogue-glue">glue functionality</DynamicLink>.

    This is the example:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        // ...

        james: Ooh, [mc]! Nice, firm handshake!
        <>The last guy always gave me the dead fish.
        <>I already think we're gonna get along fine.
        james: Come on in and...

        // ...
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        const startLabel = newLabel("start", [
            // ...
            async () =>
                (narration.dialogue = {
                    character: james,
                    text: `Ooh, ${mc.name}! Nice, firm handshake!`,
                }),
            async () => {
                narration.dialogGlue = true;
                narration.dialogue = `The last guy always gave me the dead fish.`;
            },
            async () => {
                narration.dialogGlue = true;
                narration.dialogue = `I already think we're gonna get along fine.`;
            },
            async () =>
                (narration.dialogue = { character: james, text: `Come on in and...` }),
            // ...
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Create a pause effect" id="create-a-pause-effect">
    It is also possible to create a "pause" effect, hiding the dialogue card for a moment. In *ink*, you can use <DynamicLink href="/ink/other-narrative-features#pause">`# pause`</DynamicLink>, while in JS/TS you can <DynamicLink href="/start/dialogue#delete">set `narration.dialogue` to `undefined`</DynamicLink>.

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        // ...

        # pause

        // ...
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        const startLabel = newLabel("start", [
            // ...
            async () => {
                narration.dialogue = undefined;
            },
            // ...
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

### Split the narrative into `labels` [#split-the-narrative-into-labels]

It is not advisable to create very long `labels` (even for linear visual novels), but it is advisable to create multiple small `labels` and "call" them when needed with the <DynamicLink href="/start/labels-flow">narration flow control features</DynamicLink>.

For this reason, even if in our case our story is linear, it will be divided into two `labels`, the first will be the one we just created (`start`), while the second will be called `second_part`.

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    james: You're my roommate's replacement, huh?
    james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you' fine!
    mc: ...

    He thrusts out his hand.

    james: James!
    mc: ...Peter.

    // ...
    -> second_part

    === second_part ===

    She enters my room before I'VE even had a chance to. \\n\\n...I could've just come back and gotten the platter later...
    She sets it on a desk. I throw my two paper bags down beside the empty bed.

    steph: They got you a new mattress, right? That last guy was a druggie, did James tell you that?
    sly: *We're* the reason he got expelled!
    steph: Sly! If word gets out about that... well, actually, it wouldn't matter, *he's* the one who shot himself up.

    I'm fumbling for a new subject.

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        () =>
            (narration.dialogue = {
                character: james,
                text: `You're my roommate's replacement, huh?`,
            }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you' fine!`,
            }),
        () => (narration.dialogue = { character: mc, text: `...` }),
        () => {
            narration.dialogue = "He thrusts out his hand.";
        },
        () => (narration.dialogue = { character: james, text: `James!` }),
        () => (narration.dialogue = { character: mc, text: `...Peter.` }),
        // ...
        async (props) => await narration.jump(secondPart, props),
    ]);
    export default startLabel;

    const secondPart = newLabel("second_part", [
        () => {
            narration.dialogue = `She enters my room before I'VE even had a chance to. \n\n...I could've just come back and gotten the platter later...`;
        },
        () => {
            narration.dialogue = `She sets it on a desk. I throw my two paper bags down beside the empty bed.`;
        },
        () =>
            (narration.dialogue = {
                character: steph,
                text: `They got you a new mattress, right? That last guy was a druggie, did James tell you that?`,
            }),
        () =>
            (narration.dialogue = {
                character: sly,
                text: `*We're* the reason he got expelled!`,
            }),
        () =>
            (narration.dialogue = {
                character: steph,
                text: `Sly! If word gets out about that... well, actually, it wouldn't matter, *he's* the one who shot himself up.`,
            }),
        () => {
            narration.dialogue = `I'm fumbling for a new subject.`;
        },
        // ...
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Choice menus [#choice-menus]

Now we will ask the player if he wants to continue with the second part of the visual novel.

To do this, we will set [`narration.choices`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#choices) to an array of choice options created with [`newChoiceOption`](/jsdoc/pixi-vn/index/functions/newChoiceOption) (to jump or call a `label`) and [`newCloseChoiceOption`](/jsdoc/pixi-vn/index/functions/newCloseChoiceOption) (to close the choice menu without navigating anywhere).

<CalloutContainer type="info">
  <CalloutDescription>
    You can find more information about choice menus <DynamicLink href="/start/choices">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    // ...

    You want continue to the next part?
    * Yes, I want to continue
    -> second_part
    * No, I want to stop here
    -> END

    === second_part ===

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        // ...
        async () => {
            narration.dialogue = `You want continue to the next part?`;
            narration.choices = [
                newChoiceOption(
                    "Yes, I want to continue",
                    secondPart,
                    {},
                    { type: "jump" },
                ),
                newCloseChoiceOption("No, I want to stop here"),
            ];
        },
    ]);
    export default startLabel;

    const secondPart = newLabel("second_part", [
        // ...
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Edit character information and use it as a variable [#edit-character-information-and-use-it-as-a-variable]

Now I will give the player the ability to change the name of the `mc`.
To do this, I will ask the player to <DynamicLink href="/start/input">complete an input box using Pixi’VN's features</DynamicLink>.

After getting the input value, you can <DynamicLink href="/start/character#edit">set the character name</DynamicLink> using the obtained value.

<CalloutContainer type="info">
  <CalloutDescription>
    In *ink*, `_input_value_` is a special variable that holds the value entered by the player. You can read more about it <DynamicLink href="/ink/input">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    // ...

    He thrusts out his hand.
    # request input type string default Peter
    What is your name?
    # rename mc { _input_value_ }

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        // ...
        () => {
            narration.dialogue = `He thrusts out his hand.`;
        },
        () => {
            narration.requestInput({ type: "string" }, "Peter");
            narration.dialogue = `What is your name?`;
        },
        () => {
            mc.name = narration.inputValue as string;
        },
        // ...
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Now we could <DynamicLink href="/start/character#use">use character names</DynamicLink> within dialogues.

<CalloutContainer type="info">
  <CalloutDescription>
    In *ink*, you can use square brackets (e.g. `[sly]`) to take advantage of the <DynamicLink href="/ink/replacement">text replacement</DynamicLink> mechanism: by default, the templates check whether the text between the brackets matches a character `id`, and if so, replace it with that character's name.

    In JS/TS, you can achieve the same result using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `${}` (e.g. `` `${sly.name}` ``).
  </CalloutDescription>
</CalloutContainer>

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    VAR steph_fullname = "Stephanie"

    === start ===
    // ...

    sly: I just wanted to see what the new guy was like. Hey, you, [mc]- be nice to our little brother, or you'll have to deal with *us*.
    mc: ...
    james: [mc], this is [sly]. Yes, that is her real name.

    I put out my hand.

    sly: I'm not shakin' your hand until I decide you're an all-right dude. Sorry, policy.
    mc: Fair enough, I'm a pretty scary guy, or so l've been told.
    james: The redhead behind her is [steph_fullname].
    steph: Hey! Everyone calls me [steph]. I'll shake your hand.

    She puts out her hand, and I take it.

    mc: Thanks, good to meet you, [steph_fullname].
    steph: WOW, that is, like, the most perfect handshake I've ever had! Firm, but also gentle. [sly], you *gotta* shake his hand!

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const steph_fullname = "Stephanie";

    const startLabel = newLabel("start", [
        // ...
        () =>
            (narration.dialogue = {
                character: sly,
                text: `I just wanted to see what the new guy was like. Hey, you, ${mc.name}- be nice to our little brother, or you'll have to deal with *us*.`,
            }),
        () => (narration.dialogue = { character: mc, text: `...` }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `${mc.name}, this is ${sly.name}. Yes, that is her real name.`,
            }),
        () => {
            narration.dialogue = `I put out my hand.`;
        },
        () =>
            (narration.dialogue = {
                character: sly,
                text: `I'm not shakin' your hand until I decide you're an all-right dude. Sorry, policy.`,
            }),
        () =>
            (narration.dialogue = {
                character: mc,
                text: `Fair enough, I'm a pretty scary guy, or so I've been told.`,
            }),
        () =>
            (narration.dialogue = {
                character: james,
                text: `The redhead behind her is ${steph_fullname}.`,
            }),
        () =>
            (narration.dialogue = {
                character: steph,
                text: `Hey! Everyone calls me ${steph.name}. I'll shake your hand.`,
            }),
        () => {
            narration.dialogue = `She puts out her hand, and I take it.`;
        },
        () =>
            (narration.dialogue = {
                character: mc,
                text: `Thanks, good to meet you, ${steph_fullname}.`,
            }),
        () =>
            (narration.dialogue = {
                character: steph,
                text: `WOW, that is, like, the most perfect handshake I've ever had! Firm, but also gentle. ${sly.name}, you *gotta* shake his hand!`,
            }),
        // ...
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Define assets and load them [#define-assets-and-load-them]

<CalloutContainer type="info">
  <CalloutDescription>
    To load and manipulate assets (images, gifs, videos...) you will need to use `Assets`. `Assets` is a class with many features and comes from the PixiJS library, if you want more information read [here](https://pixijs.com/8.x/guides/components/assets).
  </CalloutDescription>
</CalloutContainer>

One of the first steps is choosing where to save your visual novel assets: you can use an online hosting service or save them locally in the project. You can find more information about both options <DynamicLink href="/start/assets">here</DynamicLink>.

If you choose to save the assets locally, you just need to place them inside `src/assets`: the template automatically uses AssetPack to analyze the files and define them in `src/assets/manifest.gen.json`. If instead you choose to keep them online, you will need to manually edit `assets/index.ts` to register them.

In both cases, each asset is assigned one or more `alias`, which you can then use in your code to reference that asset.

<Files>
  <Folder name="project">
    <Folder name="src">
      <Folder name="assets">
        <Folder name="images">
          <File name="icon.png" />
        </Folder>

        <File name="manifest.gen.json" />

        <File name="index.ts" />
      </Folder>
    </Folder>
  </Folder>
</Files>

<CodeBlockTabs defaultValue="Local assets">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Local assets">
      Local assets
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Assets hosting">
      Assets hosting
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Local assets">
    ```ts  title="assets/manifest.gen.json"
    {
      "bundles": [
        {
          "name": "images",
          "assets": [
            {
              "alias": [
                "images_icon",
                "icon"
              ],
              "src": [
                "images/icon-WgfH5g@0.5x.png",
                "images/icon-VA-NtA.webp",
                "images/icon-Jh9tDw@0.5x.webp",
                "images/icon-E_ZC2g.png"
              ],
              "data": {
                "tags": {}
              }
            }
          ]
        }
      ]
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Assets hosting">
    ```ts  title="assets/index.ts"
    import generatedManifestJson from "@/assets/manifest.gen.json";
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        ...generatedManifestJson.bundles,
        bundles: [
            {
                name: "audio",
                assets: [
                    {
                        alias: "bgm_cheerful",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/audio/bgm_cheerful.wav",
                    },
                    {
                        alias: "sfx_whoosh",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/audio/sfx_whoosh.wav",
                    },
                ],
            },
            // screens
            {
                name: "/",
                assets: [
                    {
                        alias: "background_main_menu",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/main-menu.png",
                    },
                ],
            },
            // labels
            {
                name: "start",
                assets: [
                    {
                        alias: "bg01-hallway",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/bg01-hallway.webp",
                    },
                ],
            },
            {
                name: "second_part",
                assets: [
                    {
                        alias: "bg02-dorm",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/bg02-dorm.webp",
                    },
                ],
            },
            // characters
            {
                name: "fm01",
                assets: [
                    {
                        alias: "fm01-body",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-body.webp",
                    },
                    {
                        alias: "fm01-eyes-grin",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-eyes-grin.webp",
                    },
                    {
                        alias: "fm01-eyes-smile",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-eyes-smile.webp",
                    },
                    {
                        alias: "fm01-eyes-soft",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-eyes-soft.webp",
                    },
                    {
                        alias: "fm01-eyes-upset",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-eyes-upset.webp",
                    },
                    {
                        alias: "fm01-eyes-wow",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-eyes-wow.webp",
                    },
                    {
                        alias: "fm01-mouth-grin00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-grin00.webp",
                    },
                    {
                        alias: "fm01-mouth-serious00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-serious00.webp",
                    },
                    {
                        alias: "fm01-mouth-serious01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-serious01.webp",
                    },
                    {
                        alias: "fm01-mouth-smile00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-smile00.webp",
                    },
                    {
                        alias: "fm01-mouth-smile01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-smile01.webp",
                    },
                    {
                        alias: "fm01-mouth-soft00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-soft00.webp",
                    },
                    {
                        alias: "fm01-mouth-soft01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-soft01.webp",
                    },
                    {
                        alias: "fm01-mouth-upset00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-upset00.webp",
                    },
                    {
                        alias: "fm01-mouth-upset01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-upset01.webp",
                    },
                    {
                        alias: "fm01-mouth-wow01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm01/fm01-mouth-wow01.webp",
                    },
                ],
            },
            {
                name: "fm02",
                assets: [
                    {
                        alias: "fm02-body",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-body.webp",
                    },
                    {
                        alias: "fm02-eyes-bawl",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-bawl.webp",
                    },
                    {
                        alias: "fm02-eyes-joy",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-joy.webp",
                    },
                    {
                        alias: "fm02-eyes-nervous",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-nervous.webp",
                    },
                    {
                        alias: "fm02-eyes-smile",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-smile.webp",
                    },
                    {
                        alias: "fm02-eyes-upset",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-upset.webp",
                    },
                    {
                        alias: "fm02-eyes-wow",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-eyes-wow.webp",
                    },
                    {
                        alias: "fm02-mouth-cry01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-cry01.webp",
                    },
                    {
                        alias: "fm02-mouth-nervous00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-nervous00.webp",
                    },
                    {
                        alias: "fm02-mouth-nervous01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-nervous01.webp",
                    },
                    {
                        alias: "fm02-mouth-smile00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-smile00.webp",
                    },
                    {
                        alias: "fm02-mouth-smile01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-smile01.webp",
                    },
                    {
                        alias: "fm02-mouth-upset00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-upset00.webp",
                    },
                    {
                        alias: "fm02-mouth-upset01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-upset01.webp",
                    },
                    {
                        alias: "fm02-mouth-wow01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/fm02/fm02-mouth-wow01.webp",
                    },
                ],
            },
            {
                name: "m01",
                assets: [
                    {
                        alias: "m01-body",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-body.webp",
                    },
                    {
                        alias: "m01-eyes-annoy",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-annoy.webp",
                    },
                    {
                        alias: "m01-eyes-concern",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-concern.webp",
                    },
                    {
                        alias: "m01-eyes-cry",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-cry.webp",
                    },
                    {
                        alias: "m01-eyes-grin",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-grin.webp",
                    },
                    {
                        alias: "m01-eyes-smile",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-smile.webp",
                    },
                    {
                        alias: "m01-eyes-wow",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-eyes-wow.webp",
                    },
                    {
                        alias: "m01-mouth-annoy00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-annoy00.webp",
                    },
                    {
                        alias: "m01-mouth-annoy01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-annoy01.webp",
                    },
                    {
                        alias: "m01-mouth-concern00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-concern00.webp",
                    },
                    {
                        alias: "m01-mouth-concern01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-concern01.webp",
                    },
                    {
                        alias: "m01-mouth-cry00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-cry00.webp",
                    },
                    {
                        alias: "m01-mouth-cry01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-cry01.webp",
                    },
                    {
                        alias: "m01-mouth-grin00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-grin00.webp",
                    },
                    {
                        alias: "m01-mouth-neutral00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-neutral00.webp",
                    },
                    {
                        alias: "m01-mouth-neutral01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-neutral01.webp",
                    },
                    {
                        alias: "m01-mouth-smile00",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-smile00.webp",
                    },
                    {
                        alias: "m01-mouth-smile01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-smile01.webp",
                    },
                    {
                        alias: "m01-mouth-wow01",
                        src: "https://pub-72ff059a2c6642fb9eab15df80fb3b45.r2.dev/breakdown/m01/m01-mouth-wow01.webp",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Smart asset loading" id="smart-asset-loading">
    In our case we saved the game images on a hosting service. For this reason the asset loading is not timely.

    In order for the player not to perceive too many loadings we should group them in certain phases of the game. In my case I will load the most used images at the start of the `label`.

    You can find more information on how to manage the loadings <DynamicLink href="/start/assets-management">here</DynamicLink>.

    This is the example:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        # lazyload bundle m01 fm01 fm02 // [!code focus]

        # show image bg bg01-hallway
        # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-neutral01] xAlign 0.5 yAlign 1 with movein direction right speed 300
        james: You're my roommate's replacement, huh?
        # show imagecontainer james [m01-body m01-eyes-grin m01-mouth-smile01]
        james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!
        # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-grin00]
        mc: ...

        // ...
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        const startLabel = newLabel(
            "start",
            [
                // ...
            ],
            {
                onLoadingLabel: () => {
                    // [!code focus]
                    Assets.backgroundLoadBundle(["fm01", "fm02", "m01"]); // [!code focus]
                }, // [!code focus]
            },
        );
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Add background and character images [#add-background-and-character-images]

Now it's time to think about the visual part too. We will add the background and character images to the visual novel canvas.

<Accordions>
  <Accordion title="What is a `sprite`?" id="what-is-a-sprite">
    In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene, most often in a 2D video game. In Pixi’VN, a single image shown on the canvas (e.g. the background, or the body/eyes/mouth of a character) is a `Sprite`.
  </Accordion>

  <Accordion title="What is a `container`?" id="what-is-a-container">
    A container is a component that groups other components (sprites or even other containers) so that they can be positioned, moved, and manipulated as a single unit, while still being able to access and edit each individual child.
  </Accordion>
</Accordions>

In our case, each character is composed of 3 sprites: the body, the eyes and the mouth. We use <DynamicLink href="/start/canvas-image-container">ImageContainer</DynamicLink>, a `Container` that groups `Sprite` children, to group them together and compose the character. You can find more information on how to add canvas components in <DynamicLink href="/start/canvas-components">this documentation</DynamicLink>.

This is the example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    # show image bg bg01-hallway
    # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-neutral01] xAlign 0.5 yAlign 1
    james: You're my roommate's replacement, huh?
    # show imagecontainer james [m01-body m01-eyes-grin m01-mouth-smile01]
    james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!
    # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-grin00]
    mc: ...

    // ...
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        async () => {
            await showImage("bg", "bg01-hallway");
            await showImageContainer(
                "james",
                ["m01-body", "m01-eyes-smile", "m01-mouth-neutral01"],
                { xAlign: 0.5, yAlign: 1 },
            );
            narration.dialogue = {
                character: james,
                text: `You're my roommate's replacement, huh?`,
            };
        },
        async () => {
            await showImageContainer("james", [
                "m01-body",
                "m01-eyes-grin",
                "m01-mouth-smile01",
            ]);
            narration.dialogue = {
                character: james,
                text: `Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!`,
            };
        },
        async () => {
            await showImageContainer("james", [
                "m01-body",
                "m01-eyes-smile",
                "m01-mouth-grin00",
            ]);
            narration.dialogue = { character: mc, text: `...` };
        },
        // ...
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Use transitions" id="use-transitions">
    To make the visual novel more dynamic, you can use transitions to show or remove canvas components (images, containers, ...) with an animated effect, instead of making them appear or disappear abruptly. Pixi’VN provides several built-in transitions — such as dissolve, fade, move in/out, push in/out, and zoom in/out — and also lets you create your own custom ones.

    In this example, we use the move in/out transition to make `james` enter the scene from outside the canvas. In *ink*, this is done by appending `with movein` (and its parameters) to the `# show` command, while in JS/TS you can use the `moveIn`/`moveOut` functions.

    <CalloutContainer type="info">
      <CalloutDescription>
        You can find more information about using transitions <DynamicLink href="/start/canvas-transition">here</DynamicLink>.
      </CalloutDescription>
    </CalloutContainer>

    This is the example:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        // ...

        # show image bg bg01-hallway
        # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-neutral01] xAlign 0.5 yAlign 1 with movein direction right speed 300
        james: You're my roommate's replacement, huh?
        # show imagecontainer james [m01-body m01-eyes-grin m01-mouth-smile01]
        james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!
        # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-grin00]
        mc: ...

        // ...
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        const startLabel = newLabel("start", [
            async () => {
                await showImage("bg", "bg01-hallway");
                await moveIn(
                    "james",
                    {
                        value: ["m01-body", "m01-eyes-smile", "m01-mouth-neutral01"],
                        options: { xAlign: 0.5, yAlign: 1 },
                    },
                    { direction: "right", ease: "circInOut", type: "spring" },
                );
                narration.dialogue = {
                    character: james,
                    text: `You're my roommate's replacement, huh?`,
                };
            },
            async () => {
                await showImageContainer("james", [
                    "m01-body",
                    "m01-eyes-grin",
                    "m01-mouth-smile01",
                ]);
                narration.dialogue = {
                    character: james,
                    text: `Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!`,
                };
            },
            async () => {
                await showImageContainer("james", [
                    "m01-body",
                    "m01-eyes-smile",
                    "m01-mouth-grin00",
                ]);
                narration.dialogue = { character: mc, text: `...` };
            },
            // ...
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Building an animation" id="building-an-animation">
    To make the visual novel more dynamic, you can use animations. I recommend using TypeScript if you need to set many properties, as this gives you more control, more functionality, and type feedback.

    In this example, my animation will take `steph` out of the scene and reinsert her in the next `step`. I'll also mirror her on the x-axis to make sure she's facing the right way.

    To take `steph` out/in, I will use the `moveOut` and `moveIn` functions. For the mirror effect, I will use the `canvas.animate` function.

    First, I use the `canvas.animate` function to create an animation that sets the `scaleX` property from `-1` (mirrored) to `1`, with `autoplay: false` so it does not start immediately.

    Just for explanation purposes, this is what the equivalent would look like in *ink*:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        # animate steph scaleX 1 options autoplay false completeOnContinue true
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts
        canvas.animate<ImageContainer>(
            "steph",
            {
                scaleX: 1,
            },
            { autoplay: false, completeOnContinue: true },
        );
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Then, I use the `moveIn` function to move `steph` into the scene, passing the `tickerId` of the animation so it can be resumed after the transition is complete.

    I use the `completeOnContinue: true` option to ensure the animation completes before the next `step` is executed. For `moveIn`, being a transition, `completeOnContinue` is true by default.

    <CalloutContainer type="info">
      <CalloutDescription>
        For more information about how to use animations, see <DynamicLink href="/start/canvas-animations-effects">here</DynamicLink>.
      </CalloutDescription>
    </CalloutContainer>

    Since I use TypeScript for this animation, I created a `label` for it, so it can be called from other languages as well.

    ```ts title="labels/animation01.ts"
    import { canvas, ImageContainer, moveIn, newLabel } from "@drincs/pixi-vn";

    export const animation01 = newLabel("animation_01", [
        async () => {
            let tickerId = canvas.animate<ImageContainer>(
                "steph",
                {
                    scaleX: 1,
                },
                { autoplay: false, completeOnContinue: true },
            );

            await moveIn(
                "steph",
                {
                    value: ["fm02-body", "fm02-eyes-joy", "fm02-mouth-smile01"],
                    options: {
                        xAlign: 0.8,
                        yAlign: 1,
                        scale: { y: 1, x: -1 },
                        anchor: 0.5,
                    },
                },
                {
                    direction: "right",
                    ease: "easeInOut",
                    tickerIdToResume: tickerId,
                },
            );
        },
    ]);
    ```

    <CalloutContainer type="info">
      <CalloutTitle>
        *ink*
      </CalloutTitle>

      <CalloutDescription>
        As explained <DynamicLink href="/ink/labels#use-the-call-script">here</DynamicLink>, from *ink* you can call `labels` written in JS/TS and vice versa.
      </CalloutDescription>
    </CalloutContainer>

    Now you can call this `label` (`animation_01`) from the main `label` (`start`).

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        // ...

        # show imagecontainer james [m01-body m01-eyes-grin m01-mouth-grin00]
        # show imagecontainer sly [fm01-body fm01-eyes-smile fm01-mouth-smile00]
        # show imagecontainer steph [fm02-body fm02-eyes-upset fm02-mouth-nervous00]
        # remove image steph with moveout direction left speed 300
        [steph_fullname] goes through the opposite door,
        -> animation_01 ->
        <> and returns with a HUGE tinfoil-covered platter.

        // ...
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        const startLabel = newLabel("start", [
            // ...
            async () => {
                await showImageContainer("james", [
                    "m01-body",
                    "m01-eyes-grin",
                    "m01-mouth-grin00",
                ]);
                await showImageContainer("sly", [
                    "fm01-body",
                    "fm01-eyes-smile",
                    "fm01-mouth-smile00",
                ]);
                await showImageContainer("steph", [
                    "fm02-body",
                    "fm02-eyes-upset",
                    "fm02-mouth-nervous00",
                ]);
                moveOut("steph", { direction: "left", speed: 300 });
                narration.dialogue = `${steph_fullname} goes through the opposite door,`;
            },
            async (props) => {
                narration.dialogGlue = true;
                narration.dialogue = ` and returns with a HUGE tinfoil-covered platter.`;
                await narration.call(animation01, props);
            },
            // ...
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Sounds and music [#sounds-and-music]

To add sounds and music to your visual novel, you can use the `sound` utility.

You can define sound channels to manage different types of sounds (e.g., BGM, SFX) and control their volume, pause, resume, etc. It is recommended to define the channels at the start of the game, for example in the `then` callback of the `Game.init` function.

Into this example, I define two channels: one for the background music (BGM) and one for the sound effects (SFX). I also set the `defaultChannelAlias` to the SFX channel, so if I don't specify a channel when playing a sound, it will be played in the SFX channel by default. To define the background channel, I set the `background` property to `true`, so unlike the other channels the sounds will not be stopped at the end of each narrative `step`, but they will continue until they are paused or stopped.

```ts title="main.ts"
import { Game, sound } from "@drincs/pixi-vn";
import { BGM_CHANNEL_NAME, SFX_CHANNEL_NAME } from "@/constans";

Game.init(body, {
    // ...
}).then(() => {
    sound.addChannel(BGM_CHANNEL_NAME, { background: true });
    sound.addChannel(SFX_CHANNEL_NAME);
    sound.defaultChannelAlias = SFX_CHANNEL_NAME;
});
```

Finally, you can play the sounds and music in the `labels` using the `sound.play` function. You can also use channels to manage different types of sounds (e.g., BGM, SFX) and control their volume, pause, resume, etc.

<CalloutContainer type="info">
  <CalloutDescription>
    You can find more information about how to use it <DynamicLink href="/start/sound">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    # show image bg bg01-hallway
    # play sound sfx_whoosh delay 0.1
    # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-neutral01] xAlign 0.5 yAlign 1 with movein direction right ease circInOut type spring
    james: You're my roommate's replacement, huh?
    # play sound sfx_whoosh channel bgm loop true
    # show imagecontainer james [m01-body m01-eyes-grin m01-mouth-smile01]
    james: Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!
    # show imagecontainer james [m01-body m01-eyes-smile m01-mouth-grin00]
    mc: ...

    // ...

    # pause all sounds
    # show imagecontainer steph [fm02-body fm02-eyes-smile fm02-mouth-smile00]
    # play sound sfx_whoosh delay 0.1
    # remove image james with moveout direction right ease circInOut type spring duration 0.5 delay 0.05
    # remove image sly with moveout direction right ease anticipate duration 0.5
    # remove image steph with moveout direction left ease easeInOut duration 0.5 delay 0.1

    You want continue to the next part?<># continue
    * Yes, I want to continue
    -> second_part
    * No, I want to stop here
    -> END

    === second_part ===
    # show text bg "(A few minutes later...)" style \{ fontFamily: "Arial", dropShadow: \{ alpha: 0.8, angle: 2.1, blur: 4, color: "0x111111", distance: 10, \}, fill: "\#ffffff", stroke: \{ color: "\#004620", width: 12, join: "round" \}, fontSize: 60, fontWeight: "lighter" \} with fade
    # edit text bg align 0.5
    # pause

    # resume all sounds
    # show image bg bg02-dorm align 0 with fade
    # play sound sfx_whoosh delay 0.4
    // ...
    She enters my room before I'VE even had a chance to.

    // ...

    -> DONE

    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    const startLabel = newLabel("start", [
        async () => {
            await showImage("bg", "bg01-hallway");
            await sound.play("sfx_whoosh", { delay: 0.1 });
            await moveIn("james", {
                value: ["m01-body", "m01-eyes-smile", "m01-mouth-neutral01"],
                options: { xAlign: 0.5, yAlign: 1 },
            });
            narration.dialogue = {
                character: james,
                text: `You're my roommate's replacement, huh?`,
            };
        },
        async () => {
            await sound.play("bgm_cheerful", {
                channel: BGM_CHANNEL_NAME,
                loop: true,
            });
            await showImageContainer("james", [
                "m01-body",
                "m01-eyes-grin",
                "m01-mouth-smile01",
            ]);
            narration.dialogue = {
                character: james,
                text: `Don't worry, you don't have much to live up to. Just don't use heroin like the last guy, and you'll be fine!`,
            };
        },
        async () => {
            await showImageContainer("james", [
                "m01-body",
                "m01-eyes-smile",
                "m01-mouth-grin00",
            ]);
            narration.dialogue = { character: mc, text: `...` };
        },
        // ...
        async () => {
            sound.pauseAll();
            await showImageContainer("steph", [
                "fm02-body",
                "fm02-eyes-smile",
                "fm02-mouth-smile00",
            ]);
            await sound.play("sfx_whoosh", { delay: 0.1 });
            moveOut("james", {
                direction: "right",
                ease: "circInOut",
                type: "spring",
                duration: 0.5,
                delay: 0.05,
            });
            moveOut("sly", {
                direction: "right",
                ease: "anticipate",
                duration: 0.5,
            });
            moveOut("steph", {
                direction: "left",
                ease: "easeInOut",
                duration: 0.5,
                delay: 0.1,
            });
            narration.dialogue = `You want continue to the next part?`;
            narration.choices = [
                newChoiceOption(
                    "Yes, I want to continue",
                    secondPart,
                    {},
                    { type: "jump" },
                ),
                newCloseChoiceOption("No, I want to stop here"),
            ];
        },
    ]);
    export default startLabel;

    const secondPart = newLabel("second_part", [
        async ({ t }) => {
            narration.dialogue = undefined;
            const text = new Text({
                text: t(`(A few minutes later...)`),
            });
            await showWithFade("bg", text);
            text.align = 0.5;
        },
        async () => {
            sound.resumeAll();
            await showWithFade("bg", "bg02-dorm");
            await sound.play("sfx_whoosh", { delay: 0.4 });
            // ...
            narration.dialogue = `She enters my room before I'VE even had a chance to.`;
        },
        // ...
    ]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Conclusion [#conclusion]

Well, now you know how to create a visual novel with Pixi’VN. With great power comes great responsibility, so use it wisely and create a great story! 🚀

<iframe
  src="https://pixi-vn-visual-novel-example.pages.dev/demo"
  title="Visual Novel Demo"
  style="{
      width: &#x22;100%&#x22;,
      height: &#x22;400px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
  allowFullScreen="true"
/>


# Markdown (/start/markup-markdown)



<Accordions>
  <Accordion title="What is Markdown?" id="what-is-markdown">
    **Markdown** is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004, in collaboration with Aaron Swartz, as a markup language that is intended to be easy to read in its source code form. Markdown is widely used for blogging and instant messaging, and also used elsewhere in online forums, collaborative software, documentation pages, and readme files.
  </Accordion>
</Accordions>

Pixi’VN is not tied to any markup, and gives the developer the ability to choose the markup they prefer. However, it is recommended to use Markdown.

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, the Markdown component is already defined.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/markup#markdown">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

Here are some examples of implementations of Markdown in the JavaScript ecosystem:

<CodeBlockTabs defaultValue="React">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="React">
      React
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Vue">
      Vue
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Svelte">
      Svelte
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Angular">
      Angular
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="React">
    ```tsx
    // I use the react-markdown library to convert the Markdown to HTML
    // read more about it here: https://www.npmjs.com/package/react-markdown
    import Markdown from "react-markdown";
    import rehypeRaw from "rehype-raw";
    import remarkGfm from "remark-gfm";

    export default function MarkdownComponent({ text }: { text: string }) {
        return (
            <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                {text}
            </Markdown>
        );
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Vue">
    ```vue
    <!-- I use the vue-markdown-render library to convert the Markdown to HTML -->
    <!-- read more about it here: https://www.npmjs.com/package/vue-markdown-render -->
    <template>
        <div>
            <vue-markdown :source="src" />
        </div>
    </template>

    <script lang="ts">
    import VueMarkdown from 'vue-markdown-render'

    export default defineComponent({
      name: 'MyComponent',
      components: {
        VueMarkdown
      },
      setup(props, ctx) {
        const src = ref('---
    title: header')
    ---

        return {
          src
        }
      }
    })
    </script>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Svelte">
    ```svelte
    <!-- I use the svelte-markdown library to convert the Markdown to HTML -->
    <!-- read more about it here: https://www.npmjs.com/package/svelte-markdown -->
    <script>
      import SvelteMarkdown from 'svelte-markdown'
      const source = `
      ---
    title: This is a header
    ---

    This is a paragraph.

    * This is a list
    * With two items
      1. And a sublist
      2. That is ordered
        * With another
        * Sublist inside

    | And this is | A table |
    |-------------|---------|
    | With two    | columns |`
    </script>

    <SvelteMarkdown {source} />
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Angular">
    ```tsx
    // I use the ngx-markdown library to convert the Markdown to HTML
    // read more about it here: https://www.npmjs.com/package/ngx-markdown
    import { Component, Input } from "@angular/core";
    import { MarkdownModule } from "ngx-markdown";

    @Component({
        selector: "app-markdown",
        template: ` <markdown [data]="text"></markdown> `,
    })
    export class MarkdownComponent {
        @Input() text: string;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Sandbox template="4h8wst" entry="/src/components/MarkdownComponent.tsx" previewHeight="300" />

## React Markdown Typewriter [#react-markdown-typewriter]

[React Markdown Typewriter](https://www.npmjs.com/package/react-markdown-typewriter) is a library that combines Markdown and Typewriter. This library was created by me for my need to add a Typewriter effect to the Markdown component in my React templates.

If you are using React, I recommend you use it:

```tsx title="React"
import { MarkdownTypewriter } from "react-markdown-typewriter";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";

export default function MarkdownComponent({ text }: { text: string }) {
    return (
        <MarkdownTypewriter
            remarkPlugins={[remarkGfm]}
            rehypePlugins={[rehypeRaw]}
        >
            {text}
        </MarkdownTypewriter>
    );
}
```

<Sandbox template="rgjf6t" entry="/src/components/MarkdownComponent.tsx" previewHeight="320" />


# Tailwind CSS (/start/markup-tailwindcss)



<Accordions>
  <Accordion title="What is Tailwind CSS?" id="what-is-tailwindcss">
    Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It is a low-level framework that provides a set of utility classes that can be used to build custom designs without having to leave the HTML. You can learn more on the [Tailwind CSS website](https://tailwindcss.com/).
  </Accordion>
</Accordions>

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, the Tailwind CSS is already installed and configured.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/markup#css">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

There are various Tailwind CSS plugins available. Here is a list of some of them:

* [tailwind-animations](https://tailwind-animations.com/): A community Tailwind CSS plugin that provides a collection of smooth animation utilities focused on micro-interactions (e.g. `animate-fade-in-down`, `animate-jump-in`, `animate-wiggle`).
* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css): A Tailwind CSS v4 plugin that ports the popular [Animate.css](https://animate.style/) library as utility classes. It exposes ready-made entrance, exit, and attention-seeking animations (e.g. `animate-fade-in`, `animate-bounce-in`, `animate-shake`) that can be applied directly to HTML elements.
* [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography): The official Tailwind CSS Typography plugin provides a set of classes you can use to add beautiful typographic.

It is recommended to use Tailwind CSS in your Pixi’VN project to add styling or animations to your dialogue text.

```ts title="content/labels/start.label.ts"
import { narration, newLabel } from "@drincs/pixi-vn";

const startLabel = newLabel("start", [
    async () => {
        narration.dialogue = `The night was <span class="inline-block animate-pulse text-violet-400">still</span>.
        Elena pressed the crumpled letter against her chest, her <span class="inline-block animate-pulse text-pink-500">heart</span> pounding beneath her ribs.
        Outside, the <span class="inline-block text-sky-500">cold</span> wind <span class="inline-block animate-bounce text-sky-400">rustled</span> the curtains
        and carried all her <span class="inline-block text-slate-500 italic">secrets</span> into the <span class="inline-block animate-bounce text-indigo-500">dark</span>.`;
    },
]);
export default startLabel;
```

<iframe
  src="https://play.tailwindcss.com/w745YOtxBy?layout=preview"
  title="Tailwind CSS Motion"
  style="{
      width: &#x22;100%&#x22;,
      height: &#x22;320px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
/>


# Markup language and CSS (/start/markup)



<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/markup">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

A markup language is a text-encoding system that specifies the structure, formatting, and relationships within a document. Markup can control how a document is displayed or enrich its content for automated processing. Common markup languages include HTML, KML/KMZ, XML, Markdown, and others.

For Pixi’VN, it is recommended to use <DynamicLink href="/start/markup-markdown">**Markdown**</DynamicLink> due to its simplicity and popularity. Markdown can often be combined with HTML, allowing you to use CSS for custom text styling. For advanced styling, consider using a CSS framework like <DynamicLink href="/start/markup-tailwindcss">**Tailwind CSS**</DynamicLink>.


# Minigames (/start/minigames)





<CalloutContainer type="info">
  <CalloutTitle>
    AI
  </CalloutTitle>

  <CalloutDescription>
    You can use the button above to create your own minigame, with AI.
  </CalloutDescription>
</CalloutContainer>

The beauty of an interactive story compared to normal text is that you can take a break and interact with minigames related to the story.

<CalloutContainer type="info">
  <CalloutDescription>
    Minigames in visual novels are typically launched during the narrative. To switch between the narrative UI and the minigame UI, it is recommended to link the minigame to a route (e.g., "/minigame/snake") and navigate to it from the story. More information is available <DynamicLink href="/start/interface-navigate">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

Here are some tips:

* Use PixiJS directly — either the `pixi.js` package itself or the `@drincs/pixi-vn/pixi.js` submodule that re-exports it — with components such as `Graphics`, `Sprite`, and `Text`, combined with <DynamicLink href="/start/interface#adding-pixijs-ui-layers">PixiJS Layers</DynamicLink> to create a separate layer for your minigame, managed independently from the main visual novel interface.
* Use hotkeys to handle keyboard input for your minigame controls. See <DynamicLink href="/start/hotkeys">Hotkeys</DynamicLink> to learn how to set them up.
* It is always recommended not to use PixiJS to build the UI (buttons, score displays, game over messages, ...); use a framework such as <DynamicLink href="/start/interface-react">React</DynamicLink> or <DynamicLink href="/start/interface-vue">Vue</DynamicLink> instead.
* Saving and restoring the minigame's current state is the developer's responsibility.
* Since a minigame is its own route, a project usually ends up with more than one of them under the same `/minigame` path (e.g. `/minigame/snake`, `/minigame/quiz`); use <DynamicLink href="/start/interface-navigate">TanStack Router</DynamicLink>'s file-based routing to share logic between them instead of duplicating it in every minigame (see below).
* Starting a minigame is nothing more than navigating to its route from the story; if it needs a parameter (a difficulty, a level id, ...), pass it through that same route (see below).

<Accordions>
  <Accordion title="Starting a minigame" id="minigame-start">
    Since a minigame lives on its own route (see above), starting it is just a navigation — normally
    triggered from a step, using the `navigate` function already available on

    <DynamicLink href="/start/labels#steplabelprops">`StepLabelProps`</DynamicLink>(
    <DynamicLink href="/start/interface-navigate">set up once</DynamicLink> in every
    official template):

    ```ts title="content/labels/start.label.ts"
    export const startLabel = newLabel("start", [
        ({ navigate }) => {
            navigate({ to: "/minigame/snake" });
        },
    ]);
    ```

    When the minigame ends, navigate back to the narrative route the same way — typically from the
    `onExit` callback passed to `useMinigame` (see below), or from a button in the minigame's
    game-over UI.
  </Accordion>

  <Accordion title="Passing parameters to a minigame (e.g. difficulty)" id="minigame-params">
    A minigame is often configurable from the story — a difficulty level, a level id, a seed, ... Since
    it's reached by navigating to a route, these are passed exactly like any other route parameter,
    using <DynamicLink href="/start/interface-navigate">TanStack Router</DynamicLink>: as a **search
    param** (query string) for optional/configuration values, or a **path param** when the value is
    really part of the route's identity.

    <CodeBlockTabs defaultValue="Search param">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Search param">
          Search param
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Path param">
          Path param
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Search param">
        ```tsx  title="src/routes/minigame/snake.tsx" groupId="minigame_param_style"
        import { createFileRoute } from "@tanstack/react-router";

        export const Route = createFileRoute("/minigame/snake")({
            validateSearch: (search: Record<string, unknown>) => ({
                difficulty:
                    search.difficulty === "easy" || search.difficulty === "hard"
                        ? search.difficulty
                        : "normal",
            }),
            component: SnakeGame,
        });

        function SnakeGame() {
            const { difficulty } = Route.useSearch();
            // e.g. use `difficulty` to change `moveInterval` or scoring
            return null;
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Path param">
        ```tsx  title="src/routes/minigame/snake.$difficulty.tsx" groupId="minigame_param_style"
        import { createFileRoute } from "@tanstack/react-router";

        export const Route = createFileRoute("/minigame/snake/$difficulty")({
            component: SnakeGame,
        });

        function SnakeGame() {
            const { difficulty } = Route.useParams();
            return null;
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    And from the step that launches the minigame, pass the value the same way:

    <CodeBlockTabs defaultValue="Search param">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Search param">
          Search param
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Path param">
          Path param
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Search param">
        ```ts  title="content/labels/start.label.ts" groupId="minigame_param_style"
        export const startLabel = newLabel("start", [
            ({ navigate }) => {
                navigate({ to: "/minigame/snake", search: { difficulty: "hard" } });
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Path param">
        ```ts  title="content/labels/start.label.ts" groupId="minigame_param_style"
        export const startLabel = newLabel("start", [
            ({ navigate }) => {
                navigate({
                    to: "/minigame/snake/$difficulty",
                    params: { difficulty: "hard" },
                });
            },
        ]);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Sharing menu and logic between multiple minigame routes" id="minigame-routes-layout">
    Since a minigame is its own route, a project usually ends up with more than one of them under the
    same `/minigame` path (e.g. `/minigame/snake`, `/minigame/quiz`). With

    <DynamicLink href="/start/interface-navigate">TanStack Router</DynamicLink>'s
    file-based routing, you can factor out anything shared by every minigame
    (pausing narration/audio while it's open, common hotkeys, a shared HUD wrapper,
    ...) into a single pathless layout route, `src/routes/minigame.tsx`, the same
    way the official templates already do for `/game` (`src/routes/game.tsx` wraps
    every `/game/*` screen with `<Outlet />
    `):

    ```tsx title="src/routes/minigame.tsx"
    import { createFileRoute, Outlet } from "@tanstack/react-router";

    export const Route = createFileRoute("/minigame")({
        component: MinigameLayout,
    });

    function MinigameLayout() {
        // hooks/providers shared by every minigame go here (e.g. pause narration audio)
        return <Outlet />;
    }
    ```

    Each individual minigame then only needs its own file under `src/routes/minigame/`, which

    <DynamicLink href="/start/interface-navigate">TanStack Router</DynamicLink>
    turns into the actual route:

    ```tsx title="src/routes/minigame/snake.tsx"
    import { createFileRoute } from "@tanstack/react-router";
    import SnakeGame from "@/screens/minigames/SnakeGame";

    export const Route = createFileRoute("/minigame/snake")({
        component: SnakeGame,
    });
    ```
  </Accordion>
</Accordions>

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    `useMinigame` is a custom hook that helps you manage the lifecycle of a minigame, including starting, updating, and cleaning up resources. It is present in all templates.
  </CalloutDescription>
</CalloutContainer>

For example:

<CodeBlockTabs defaultValue="React">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="React">
      React
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="lib/hooks/minigame-hooks.ts">
      lib/hooks/minigame-hooks.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="React">
    ```tsx  title="src/routes/minigame/example.tsx"
    import { Layer } from "@drincs/pixi-vn";
    import { Graphics, Ticker } from "@drincs/pixi-vn/pixi.js";
    import { createFileRoute } from "@tanstack/react-router";
    import { useCallback, useMemo, useState } from "react";
    import { useHotkey } from "@tanstack/react-hotkeys";
    import useMinigame from "@/lib/hooks/minigame-hooks";

    export const Route = createFileRoute("/minigame/example")({
        component: MiniGame,
    });

    function MiniGame() {
        const [displayScore, setDisplayScore] = useState(0);
        const [gameOver, setGameOver] = useState(false);

        const ticker = useMemo(() => {
            const ticker = new Ticker();

            const endGame = () => {
                ticker.stop();
                setGameOver(true);
            };

            ticker.add(({ deltaMS }) => {
                // Update game logic here
            });

            return ticker;
        }, []);

        useHotkey(
            "ArrowUp",
            () => {
                // Handle key down events for game controls
            },
            { enabled: !gameOver },
        );

        const game = useCallback(
            (layer: Layer) => {
                ticker.start();
            },
            [ticker], // They must not be changed during the game otherwise the game will restart
        );

        const options = useMemo(
            () => ({
                onExit() {
                    ticker.stop();
                    ticker.destroy();
                },
            }),
            [ticker], // They must not be changed during the game otherwise the game will restart
        );

        const { loading } = useMinigame(game, options);

        return (
            <>
                <div
                    style={{
                        position: "absolute",
                        top: 10,
                        left: 10,
                        color: "white",
                        fontSize: "24px",
                        background: "rgba(0,0,0,0.5)",
                        padding: "5px 10px",
                        borderRadius: "5px",
                    }}
                >
                    Score: {displayScore}
                </div>

                {gameOver && (
                    <div
                        style={{
                            position: "absolute",
                            top: "50%",
                            left: "50%",
                            transform: "translate(-50%, -50%)",
                            color: "red",
                            fontSize: "48px",
                            background: "rgba(0,0,0,0.7)",
                            padding: "20px 40px",
                            borderRadius: "10px",
                        }}
                    >
                        GAME OVER
                    </div>
                )}
            </>
        );
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="lib/hooks/minigame-hooks.ts">
    ```ts
    import { CANVAS_MINIGAME_LAYER_NAME } from "@/constants";
    import { canvas, type Layer } from "@drincs/pixi-vn";
    import { Container } from "pixi.js";
    import { useEffect, useRef } from "react";

    export function useMinigame(
        game: (layer: Layer) => void,
        props?: {
            onStart?: () => Promise<void>;
            onExit?: (layer: Layer) => void;
        },
    ) {
        const loading = useRef(false);

        // Keep latest callbacks in refs to avoid effect restarts
        const startRef = useRef<() => Promise<void>>(
            props?.onStart ?? (async () => {}),
        );
        const exitRef = useRef<(layer: Layer) => void>(props?.onExit);

        // Update refs when props change, without changing effect identity
        useEffect(() => {
            startRef.current = props?.onStart ?? (async () => {});
        }, [props?.onStart]);

        useEffect(() => {
            exitRef.current = props?.onExit;
        }, [props?.onExit]);

        useEffect(() => {
            // Create the layer and start the game once
            loading.current = true;
            const layer = canvas.addLayer(
                CANVAS_MINIGAME_LAYER_NAME,
                new Container(),
            );
            if (!layer) {
                console.error("Failed to create UI layer for minigame");
                return;
            }

            let cancelled = false;

            startRef.current().then(() => {
                if (cancelled) return;
                loading.current = false;
                game(layer);
            });

            return () => {
                cancelled = true;
                canvas.removeLayer(CANVAS_MINIGAME_LAYER_NAME);
                if (exitRef.current) {
                    exitRef.current(layer);
                }
            };
        }, [game]);

        return { loading };
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Examples [#examples]

<CalloutContainer type="info">
  <CalloutDescription>
    The Pixi’VN Team welcomes new proposals and contributions to make this library even more complete. Feel free to share or propose your minigame implementations in the chat below!
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Snake (minigame)" id="snake">
    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx  title="src/routes/minigame/snake.tsx"
        import { canvas, Layer } from "@drincs/pixi-vn";
        import { Graphics, Ticker } from "pixi.js";
        import { createFileRoute } from "@tanstack/react-router";
        import { useCallback, useMemo, useRef, useState } from "react";
        import { useHotkeys } from "@tanstack/react-hotkeys";
        import useMinigame from "@/lib/hooks/minigame-hooks";

        const gridSize = 20;
        const moveInterval = 150;

        export const Route = createFileRoute("/minigame/snake")({
            component: SnakeGame,
        });

        function SnakeGame() {
            const [displayScore, setDisplayScore] = useState(0);
            const [gameOver, setGameOver] = useState(false);

            const directionRef = useRef({ x: 1, y: 0 });
            const setDirection = (x: number, y: number) => {
                if (
                    (x !== 0 && directionRef.current.x === 0) ||
                    (y !== 0 && directionRef.current.y === 0)
                ) {
                    directionRef.current = { x, y };
                }
            };

            useHotkeys([
                {
                    hotkey: "ArrowUp",
                    callback: () => setDirection(0, -1),
                    options: { enabled: !gameOver },
                },
                {
                    hotkey: "ArrowDown",
                    callback: () => setDirection(0, 1),
                    options: { enabled: !gameOver },
                },
                {
                    hotkey: "ArrowLeft",
                    callback: () => setDirection(-1, 0),
                    options: { enabled: !gameOver },
                },
                {
                    hotkey: "ArrowRight",
                    callback: () => setDirection(1, 0),
                    options: { enabled: !gameOver },
                },
            ]);

            // Populated by `game(layer)` once the minigame layer is created
            const layerRef = useRef<Layer>(null!);
            const snakeRef = useRef<Graphics[]>([]);
            const appleRef = useRef<Graphics>(null!);

            const placeApple = useCallback(() => {
                const apple = appleRef.current;
                const cols = Math.floor(canvas.width / gridSize);
                const rows = Math.floor(canvas.height / gridSize);
                apple.x = Math.floor(Math.random() * cols) * gridSize;
                apple.y = Math.floor(Math.random() * rows) * gridSize;

                // Avoid placing the apple on top of the snake
                for (let segment of snakeRef.current) {
                    if (segment.x === apple.x && segment.y === apple.y) {
                        placeApple();
                        return;
                    }
                }
            }, []);

            const ticker = useMemo(() => {
                const ticker = new Ticker();
                let elapsed = 0;

                const endGame = () => {
                    ticker.stop();
                    setGameOver(true);
                };

                ticker.add(({ deltaMS }) => {
                    const snake = snakeRef.current;
                    const apple = appleRef.current;
                    const head = snake[0];

                    elapsed += deltaMS;
                    if (elapsed < moveInterval) return;
                    elapsed = 0;

                    // Move the body
                    for (let i = snake.length - 1; i > 0; i--) {
                        snake[i].position.set(snake[i - 1].x, snake[i - 1].y);
                    }

                    // Move the head
                    head.x += directionRef.current.x * gridSize;
                    head.y += directionRef.current.y * gridSize;

                    // Collision with the wall
                    if (
                        head.x < 0 ||
                        head.y < 0 ||
                        head.x >= canvas.width ||
                        head.y >= canvas.height
                    ) {
                        endGame();
                        return;
                    }

                    // Collision with the body
                    for (let i = 1; i < snake.length; i++) {
                        if (head.x === snake[i].x && head.y === snake[i].y) {
                            endGame();
                            return;
                        }
                    }

                    // Eat the apple
                    if (head.x === apple.x && head.y === apple.y) {
                        const newSegment = new Graphics();
                        newSegment
                            .rect(0, 0, gridSize, gridSize)
                            .fill({ color: 0x00ff00 });
                        newSegment.position.set(head.x, head.y);
                        layerRef.current.addChild(newSegment);
                        snake.push(newSegment);

                        setDisplayScore((prev) => prev + 1);
                        placeApple();
                    }
                });

                return ticker;
            }, [placeApple]);

            const game = useCallback(
                (layer: Layer) => {
                    layerRef.current = layer;

                    const head = new Graphics();
                    head.rect(0, 0, gridSize, gridSize).fill({ color: 0x00ff00 });
                    head.x = 200;
                    head.y = 200;
                    layer.addChild(head);
                    snakeRef.current = [head];

                    const apple = new Graphics();
                    apple.rect(0, 0, gridSize, gridSize).fill({ color: 0xff0000 });
                    layer.addChild(apple);
                    appleRef.current = apple;
                    placeApple();

                    ticker.start();
                },
                [ticker, placeApple], // They must not be changed during the game otherwise the game will restart
            );

            const options = useMemo(
                () => ({
                    onExit() {
                        ticker.stop();
                        ticker.destroy();
                    },
                }),
                [ticker],
            );

            useMinigame(game, options);

            return (
                <>
                    <div
                        style={{
                            position: "absolute",
                            top: 10,
                            left: 10,
                            color: "white",
                            fontSize: "24px",
                            background: "rgba(0,0,0,0.5)",
                            padding: "5px 10px",
                            borderRadius: "5px",
                        }}
                    >
                        Score: {displayScore}
                    </div>

                    {gameOver && (
                        <div
                            style={{
                                position: "absolute",
                                top: "50%",
                                left: "50%",
                                transform: "translate(-50%, -50%)",
                                color: "red",
                                fontSize: "48px",
                                background: "rgba(0,0,0,0.7)",
                                padding: "20px 40px",
                                borderRadius: "10px",
                            }}
                        >
                            GAME OVER
                        </div>
                    )}

                    {/* Direction buttons */}
                    <div
                        style={{
                            position: "absolute",
                            bottom: 0,
                            right: 0,
                            textAlign: "center",
                            pointerEvents: "auto",
                        }}
                    >
                        <div style={{ marginTop: "10px" }}>
                            <button
                                style={{ fontSize: "30px" }}
                                onClick={() => setDirection(0, -1)}
                            >
                                ⬆️
                            </button>
                        </div>
                        <div>
                            <button
                                style={{ fontSize: "30px", marginRight: "50px" }}
                                onClick={() => setDirection(-1, 0)}
                            >
                                ⬅️
                            </button>
                            <button
                                style={{ fontSize: "30px" }}
                                onClick={() => setDirection(1, 0)}
                            >
                                ➡️
                            </button>
                        </div>
                        <div>
                            <button
                                style={{ fontSize: "30px" }}
                                onClick={() => setDirection(0, 1)}
                            >
                                ⬇️
                            </button>
                        </div>
                    </div>
                </>
            );
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <SnakeExample />
  </Accordion>
</Accordions>


# Narration (/start/narration)



Narration is the core of a visual novel. It consists of <DynamicLink href="/start/dialogue">dialogues</DynamicLink>, <DynamicLink href="/start/choices">choices</DynamicLink>, and <DynamicLink href="/start/input">input prompts</DynamicLink> shown to the player as the game progresses.

With Pixi’VN, you can use different narrative languages and even switch between them to take advantage of each one's features.

* **JavaScript/TypeScript**: A programming language that lets you write your narrative with full access to all project functions, but may require more code.
* **<DynamicLink href="/ink">*ink*</DynamicLink>**: A narrative language designed for writing stories easily, with minimal code.
* **<DynamicLink href="/renpy">Ren'Py</DynamicLink>**: Coming soon.

| Narrative languages                  | JavaScript/TypeScript | *ink*                                                                |
| ------------------------------------ | --------------------- | -------------------------------------------------------------------- |
| Ease of learning                     | ❌                     | ✅                                                                    |
| Is it a typed language?              | ✅                     | ❌                                                                    |
| Visual Studio Code extension         | ✅                     | ✅                                                                    |
| Translatable into multiple languages | ✅                     | ✅                                                                    |
| Auto-generation of translation files | ❌                     | ✅                                                                    |
| Ability to use non-Pixi’VN features  | ✅                     | ✅ (<DynamicLink href="/ink/hashtag">custom "# script"</DynamicLink>) |
| Debugging                            | ✅                     | ❌                                                                    |


# Other narrative features (/start/other-narrative-features)



<Accordions>
  <Accordion title="Managing the end of the game" id="managing-the-end-of-the-game">
    When all `steps` of all `labels` are executed, the game will stop. The developer is responsible for handling the end of the game, as visual novels can have different ending strategies:

    * The game ends when all `steps` are executed.
    * The game has no end; if all steps are completed, another `label` will be started or the player will have to interact with an interface that can potentially start another `label`.
    * The game ends when the player reaches a specific point, such as due to game over.

    To manage the end of the game, set [`Game.onEnd`](/jsdoc/pixi-vn/index/namespaces/Game/functions/onEnd). This function is called when the game ends and has the same signature as a `step`.

    For example, to end the game and navigate to an end screen:

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

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

    If your game has no end and should restart or loop:

    ```ts title="content/labels/start.label.ts"
    export const startLabel = newLabel("start", () => {
        return [
            // ...
        ];
    });
    ```

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

    Game.onEnd(async (props) => {
        narration.call(startLabel, props);
    });
    ```
  </Accordion>

  <Accordion title="Random number generation" id="random-number-generation">
    Pixi’VN includes a built-in function to generate random numbers, use [`narration.getRandomNumber`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#getrandomnumber).
  </Accordion>

  <Accordion title="Check if the label has already been completed" id="check-if-the-label-has-already-been-completed">
    To check if a `label` has already been completed, use the [`narration.isLabelAlreadyCompleted`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#islabelalreadycompleted) function.

    ```typescript
    const isLabelCompleted = narration.isLabelAlreadyCompleted(startLabel);
    const isLabelCompleted = narration.isLabelAlreadyCompleted("labelid");
    ```
  </Accordion>

  <Accordion title="Check if current step has already been opened" id="check-if-current-step-is-already-been-opened">
    To check if the current `step` has already been opened, use [`narration.isCurrentStepAlreadyOpened`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#iscurrentstepalreadyopened).

    ```typescript
    const isCurrentStepOpened = narration.isCurrentStepAlreadyOpened;
    ```
  </Accordion>

  <Accordion title="Counter of execution times of the current step" id="counter-of-execution-times-of-the-current-step">
    To get the execution count for the current `step`, use [`narration.currentStepTimesCounter`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#currentsteptimescounter). &#x2A;*Important:** The counter is only incremented if [`narration.currentStepTimesCounter`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#currentsteptimescounter) is executed.

    ```ts title="content/labels/start.label.ts"
    export const label = newLabel("id", () => {
        if (narration.currentStepTimesCounter === 0) {
            // ✅ will be incremented
            // ...
        } else {
            // ...
        }
    });
    ```

    ```ts title="content/labels/start.label.ts"
    export const label = newLabel("id", () => {
        if (narration.currentStepTimesCounter === 0) {
            // ✅ will be incremented
            // ...
        } else if (narration.currentStepTimesCounter === 1) {
            // ✅ Not incremented again in this step
            // ...
        }
    });
    ```

    ```ts title="content/labels/start.label.ts"
    export const label = newLabel("id", () => {
        if (flag) {
            if (narration.currentStepTimesCounter === 1) {
                // ❌ Only incremented if "flag" is true
                // ...
            }
        }
    });
    ```

    To reset the execution counter for the current `step`, set [`narration.currentStepTimesCounter`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#currentsteptimescounter) to `0`.

    ```ts
    narration.currentStepTimesCounter = 0;
    ```
  </Accordion>
</Accordions>


# Save and load (/start/save)



Saving and loading progress is a core feature of most games, and it's especially important in story-driven games, where players expect to close the game mid-story and pick it up again exactly where they left off. In Pixi’VN, a save is a plain, serializable snapshot of the whole game state — narration position, canvas, sound, and any custom data you track — so you're free to persist it however suits your project: a downloadable file, a database, or the browser's local storage.

<Accordions>
  <Accordion title="Create" id="create">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        This functionality is already implemented in all templates, via the `createGameSave` function. See `utils/save-utility.ts`.
      </CalloutDescription>
    </CalloutContainer>

    To create a save, use [`Game.exportGameState`](/jsdoc/pixi-vn/index/namespaces/Game/functions/exportGameState). It returns an object with the current game state, which you can then store in a file, a database, or any storage of your choice.

    Tip: Enrich the save with extra metadata — such as a name, the creation date, and a screenshot of the current game state — so it can be displayed nicely in a save/load menu.

    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        To generate a screenshot, use [`canvas.extractImage`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#extractimage). This returns a base64 string of the current canvas.
      </CalloutDescription>
    </CalloutContainer>

    For example:

    <CodeBlockTabs defaultValue="lib/utils/save-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="models/GameSaveData.ts">
          models/GameSaveData.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        import type GameSaveData from "@/models/GameSaveData";
        import { Game } from "@drincs/pixi-vn";

        export function createGameSave(options?: {
            image?: string;
            name?: string;
        }): GameSaveData {
            const { image, name = "" } = options || {};
            return {
                saveData: Game.exportGameState(),
                gameVersion: __APP_VERSION__,
                date: new Date(),
                name: name,
                image: image,
            };
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="models/GameSaveData.ts">
        ```ts
        import type { GameState } from "@drincs/pixi-vn";

        export default interface GameSaveData {
            saveData: GameState;
            gameVersion: string;
            date: Date;
            name: string;
            image?: string;
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Load" id="load">
    To restore a save, use [`Game.restoreGameState`](/jsdoc/pixi-vn/index/namespaces/Game/functions/restoreGameState).

    For example:

    <CodeBlockTabs defaultValue="lib/utils/save-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        import { Game } from "@drincs/pixi-vn";
        import { LOADING_ROUTE } from "../constans";
        import GameSaveData from "../models/GameSaveData";

        export async function loadSave(
            saveData: GameSaveData,
            navigate: NavigateFunction,
        ) {
            await navigate(LOADING_ROUTE);
            await Game.restoreGameState(saveData.saveData);
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Export the save to a file" id="generate-file">
    You can export the save data to a file for backup or sharing.

    For example:

    <CodeBlockTabs defaultValue="lib/utils/save-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        import GameSaveData from "@/models/GameSaveData";

        const SAVE_FILE_EXTENSION = "json";

        export function downloadGameSave(data: GameSaveData = createGameSave()) {
            const jsonString = JSON.stringify(data);
            // download the save data as a JSON file
            const blob = new Blob([jsonString], { type: "application/json" });
            // download the file
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = `${__APP_NAME__}-${__APP_VERSION__}-${data.name} ${data.date.toISOString()}.${SAVE_FILE_EXTENSION}`;
            a.click();
        }

        export function loadGameSaveFromFile(afterLoad?: (error?: Error) => void) {
            // load the save data from a JSON file
            const input = document.createElement("input");
            input.type = "file";
            input.accept = `application/${SAVE_FILE_EXTENSION}`;
            input.onchange = (e) => {
                const file = (e.target as HTMLInputElement).files?.[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const jsonString = e.target?.result as string;
                        const data: GameSaveData = JSON.parse(jsonString);
                        // load the save data from the JSON string
                        loadSave(data)
                            .then(() => {
                                afterLoad?.();
                            })
                            .catch((err) => {
                                afterLoad?.(err);
                            });
                    };
                    reader.readAsText(file);
                }
            };
            input.click();
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Save to a database" id="save-to-db">
    You can also save game data to a database instead of a file. In this example we'll use IndexedDB, but it can be replaced with any other type of database.

    <Accordions>
      <Accordion title="What is IndexedDB?" id="what-is-indexeddb">
        IndexedDB is a browser API for storing large amounts of structured data, including files/blobs. It lets you save and load game states efficiently.
      </Accordion>
    </Accordions>

    For example:

    <CodeBlockTabs defaultValue="lib/utils/save-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="lib/utils/db-utility.ts">
          lib/utils/db-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        import {
            deleteRowFromIndexDB,
            getLastRowFromIndexDB,
            getRowFromIndexDB,
            INDEXED_DB_SAVE_TABLE,
            putRowIntoIndexDB,
        } from "@/lib/utils/db-utility";
        import { canvas } from "@drincs/pixi-vn";
        import GameSaveData from "@/models/GameSaveData";

        export async function saveGameToIndexDB(
            info: Partial<GameSaveData> & { id?: number } = {},
            data = createGameSave(),
        ): Promise<GameSaveData & { id: number }> {
            const { image = await canvas.extractImage(), ...rest } = info;
            const item = {
                ...data,
                image: image,
                ...rest,
            };
            if (item.id === undefined) {
                const lastSave = await getLastRowFromIndexDB<
                    GameSaveData & { id: number }
                >(INDEXED_DB_SAVE_TABLE);
                if (lastSave) {
                    item.id = lastSave.id + 1;
                } else {
                    item.id = 0;
                }
            }
            await putRowIntoIndexDB(INDEXED_DB_SAVE_TABLE, item);
            if (item.id) {
                return item as GameSaveData & { id: number };
            }
            return (await getLastSaveFromIndexDB()) as GameSaveData & { id: number };
        }

        export async function getSaveFromIndexDB(
            id: number,
        ): Promise<(GameSaveData & { id: number }) | null> {
            return await getRowFromIndexDB(INDEXED_DB_SAVE_TABLE, id);
        }

        export async function deleteSaveFromIndexDB(id: number): Promise<void> {
            return await deleteRowFromIndexDB(INDEXED_DB_SAVE_TABLE, id);
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="lib/utils/db-utility.ts">
        ```ts
        const INDEXED_DB_VERSION = 2; // Increment this version number when you change the database schema
        const INDEXED_DB_NAME = "game_db";
        export const INDEXED_DB_SAVE_TABLE = "saves";

        export function initializeIndexedDB(): Promise<void> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
                // check if the object store exists
                request.onupgradeneeded = (_event) => {
                    const db = request.result;
                    if (!db.objectStoreNames.contains(INDEXED_DB_SAVE_TABLE)) {
                        // create the object store
                        const objectStore = db.createObjectStore(
                            INDEXED_DB_SAVE_TABLE,
                            {
                                keyPath: "id",
                                autoIncrement: true,
                            },
                        );
                        objectStore.createIndex("id", "id", { unique: true });
                        objectStore.createIndex("date", "date", { unique: false });
                        objectStore.createIndex("name", "name", { unique: false });
                        objectStore.createIndex("gameVersion", "gameVersion", {
                            unique: false,
                        });
                    }
                };

                request.onsuccess = (_event) => {
                    resolve();
                };
                request.onerror = (event) => {
                    console.error("Error opening indexDB", event);
                    reject();
                };
            });
        }

        export async function putRowIntoIndexDB<T extends {}>(
            tableName: string,
            data: T,
        ): Promise<T> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME);

                request.onsuccess = (_event) => {
                    const db = request.result;
                    // run onupgradeneeded before onsuccess
                    if (!db.objectStoreNames.contains(tableName)) {
                        console.error("Object store rescues does not exist");
                        reject();
                    }
                    const transaction = db.transaction([tableName], "readwrite");
                    const objectStore = transaction.objectStore(tableName);
                    const setRequest = objectStore.put(data);
                    setRequest.onsuccess = (_event) => {
                        resolve(data);
                    };
                    setRequest.onerror = (event) => {
                        console.error("Error adding save data to indexDB", event);
                        reject();
                    };
                };
                request.onerror = (event) => {
                    console.error("Error adding save data to indexDB", event);
                };
            });
        }

        export async function getRowFromIndexDB<T extends {}>(
            tableName: string,
            id: number | string,
        ): Promise<T | null> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME);
                request.onsuccess = (_event) => {
                    const db = request.result;
                    // check if the object store exists
                    if (!db.objectStoreNames.contains(tableName)) {
                        resolve(null);
                        return;
                    }
                    const transaction = db.transaction([tableName], "readwrite");
                    const objectStore = transaction.objectStore(tableName);
                    const getRequest = objectStore.get(id);
                    getRequest.onsuccess = (_event) => {
                        resolve(getRequest.result);
                    };
                    getRequest.onerror = (event) => {
                        console.error("Error getting save data from indexDB", event);
                        reject();
                    };
                };
                request.onerror = (event) => {
                    console.error("Error opening indexDB", event);
                    reject();
                };
            });
        }

        export async function getLastRowFromIndexDB<T extends {}>(
            tableName: string,
        ): Promise<T | null> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME);
                request.onsuccess = (_event) => {
                    const db = request.result;
                    // check if the object store exists
                    if (!db.objectStoreNames.contains(tableName)) {
                        resolve(null);
                        return;
                    }
                    const transaction = db.transaction([tableName], "readwrite");
                    const objectStore = transaction.objectStore(tableName);
                    const getRequest = objectStore.openCursor(null, "prev");
                    getRequest.onsuccess = (_event) => {
                        const cursor = getRequest.result;
                        if (cursor) {
                            resolve(cursor.value);
                        } else {
                            resolve(null);
                        }
                    };
                    getRequest.onerror = (event) => {
                        console.error("Error getting save data from indexDB", event);
                        reject();
                    };
                };
                request.onerror = (event) => {
                    console.error("Error opening indexDB", event);
                    reject();
                };
            });
        }

        export async function deleteRowFromIndexDB(
            tableName: string,
            id: number | string,
        ): Promise<void> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME);
                request.onsuccess = (_event) => {
                    const db = request.result;
                    const transaction = db.transaction([tableName], "readwrite");
                    const objectStore = transaction.objectStore(tableName);
                    const deleteRequest = objectStore.delete(id);
                    deleteRequest.onsuccess = (_event) => {
                        resolve();
                    };
                    deleteRequest.onerror = (event) => {
                        console.error("Error deleting save data from indexDB", event);
                        reject();
                    };
                };
                request.onerror = (event) => {
                    console.error("Error deleting save data from indexDB", event);
                };
            });
        }

        export async function getListFromIndexDB<T extends {}>(
            tableName: string,
            options: {
                order?: { field: keyof T; direction: IDBCursorDirection };
                pagination?: { offset: number; limit: number };
            } = {},
        ): Promise<T[]> {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(INDEXED_DB_NAME);
                request.onsuccess = (_event) => {
                    const db = request.result;
                    // check if the object store exists
                    if (!db.objectStoreNames.contains(tableName)) {
                        resolve([]);
                        return;
                    }
                    const transaction = db.transaction([tableName], "readwrite");
                    const objectStore = transaction.objectStore(tableName);
                    const getRequest = options.order
                        ? objectStore
                              .index(options.order.field as string)
                              .openCursor(null, options.order.direction)
                        : objectStore.openCursor();
                    const results: T[] = [];
                    let counter = 0;
                    const limit = options.pagination?.limit ?? Infinity;
                    const offset = options.pagination?.offset ?? 0;
                    let advanced = false;
                    getRequest.onsuccess = (_event) => {
                        const cursor = getRequest.result;
                        if (cursor) {
                            if (counter >= offset) {
                                results.push(cursor.value);
                                if (results.length >= limit) {
                                    resolve(results);
                                    advanced = true;
                                }
                            }
                            counter++;
                            cursor.continue();
                        } else {
                            if (!advanced) {
                                resolve(results);
                            }
                        }
                    };
                    getRequest.onerror = (event) => {
                        console.error("Error getting save data from indexDB", event);
                        reject();
                    };
                };
                request.onerror = (event) => {
                    console.error("Error opening indexDB", event);
                    reject();
                };
            });
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Save to prevent accidental closure" id="prevent-accidental-closure">
    Since it is possible to create browser games, the problem of losing the last state of the game after accidentally closing the browser is common.

    To prevent this, you can generate a save automatically whenever the player leaves the page or the tab becomes hidden, without going through the game's own save menu.

    For example:

    <CodeBlockTabs defaultValue="lib/hooks/save-hooks.tsx">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/hooks/save-hooks.tsx">
          lib/hooks/save-hooks.tsx
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/hooks/save-hooks.tsx">
        ```ts
        import { addAutoExitSave } from "@/lib/utils/save-utility";
        import type { FileRouteTypes } from "@/routeTree.gen";
        import { useLocation } from "@tanstack/react-router";
        import { useCallback, useEffect } from "react";

        /**
         * useAutoSaveOnPageClose
         *
         * Trigger a refresh/save when the user is about to leave the page or when the
         * document becomes hidden. Skips the root path (`/`).
         *
         * This hook does not return a value.
         */
        export function useAutoSaveOnPageClose(): void {
            const location = useLocation();

            const callback = useCallback(() => {
                if ((location.pathname as FileRouteTypes["fullPaths"]) === "/") {
                    return;
                }
                addAutoExitSave();
            }, [location.pathname]);

            useEffect(() => {
                const onBeforeUnload = () => callback();
                const onVisibilityChange = () => {
                    if (document.visibilityState === "hidden") {
                        callback();
                    }
                };

                window.addEventListener("beforeunload", onBeforeUnload);
                document.addEventListener("visibilitychange", onVisibilityChange);

                return () => {
                    window.removeEventListener("beforeunload", onBeforeUnload);
                    document.removeEventListener(
                        "visibilitychange",
                        onVisibilityChange,
                    );
                };
            }, [callback]);
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        const AUTO_EXIT_SAVE_LOCAL_STORAGE_KEY = "auto_exit_save";

        export async function addAutoExitSave() {
            const data = createGameSave();
            const jsonString = JSON.stringify(data);
            if (jsonString) {
                localStorage.setItem(AUTO_EXIT_SAVE_LOCAL_STORAGE_KEY, jsonString);
            }
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Continue" id="continue">
    Most story-driven games show a "Continue" button in the main menu that jumps straight into the most recent save, without going through the load menu. Combined with the auto-exit save described above, this also lets players continue even if they closed the game via the browser instead of saving manually.

    To implement it, look up the most recent save — comparing the latest regular save against the auto-exit save, if any — and use it to enable/disable the button and to restore the game when the player clicks it.

    For example:

    <CodeBlockTabs defaultValue="lib/utils/save-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="lib/utils/save-utility.ts">
          lib/utils/save-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="lib/utils/save-utility.ts">
        ```ts
        export async function getLastSaveFromIndexDB(): Promise<
            (GameSaveData & { id: number }) | null
        > {
            const list = await getListFromIndexDB<GameSaveData & { id: number }>(
                INDEXED_DB_SAVE_TABLE,
                {
                    pagination: { limit: 1, offset: 0 },
                    order: { field: "date", direction: "prev" },
                },
            );
            const indexedDbSave = list.length > 0 ? list[0] : null;

            const autoExitJsonString = localStorage.getItem(
                AUTO_EXIT_SAVE_LOCAL_STORAGE_KEY,
            );
            if (autoExitJsonString) {
                const autoExitSave: GameSaveData & { id: number } = {
                    ...(JSON.parse(autoExitJsonString) as GameSaveData),
                    id: -1,
                };
                if (
                    !indexedDbSave ||
                    new Date(autoExitSave.date) > new Date(indexedDbSave.date)
                ) {
                    return autoExitSave;
                }
            }

            return indexedDbSave;
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Use it in the main menu to power a "Continue" button: disable the button when it returns `null`, and pass the result to [`loadSave`](#load) when the player clicks it.
  </Accordion>

  <Accordion title="Quick Save" id="quick-save">
    Quick save lets players save and restore progress instantly, usually bound to a hotkey (see <DynamicLink href="/start/hotkeys">Hotkeys</DynamicLink>), without opening the save menu.

    To keep quick saves separate from regular saves, reserve a fixed range of ids for them (for example, negative ids) and cycle through a limited number of slots: fill the first empty slot, then overwrite the least recently used one once all slots are full.

    For example:

    ```ts title="lib/utils/save-utility.ts"
    const QUICK_SAVE_ID_START = -2;
    const QUICK_SAVE_SLOTS = 6;

    function getQuickSaveId(slotIndex: number): number {
        return QUICK_SAVE_ID_START - slotIndex;
    }

    function getQuickSaveIds(): number[] {
        return Array.from({ length: QUICK_SAVE_SLOTS }, (_, index) =>
            getQuickSaveId(index),
        );
    }

    export async function quickSaveGameToIndexDB(): Promise<
        GameSaveData & { id: number }
    > {
        const ids = getQuickSaveIds();
        const slots = await Promise.all(ids.map((id) => getSaveFromIndexDB(id)));

        let targetIndex = slots.findIndex((slot) => !slot);
        if (targetIndex === -1) {
            targetIndex = 0;
            for (let index = 1; index < slots.length; index++) {
                const slot = slots[index];
                const oldest = slots[targetIndex];
                if (slot && oldest && new Date(slot.date) < new Date(oldest.date)) {
                    targetIndex = index;
                }
            }
        }

        return saveGameToIndexDB({ id: ids[targetIndex] });
    }
    ```
  </Accordion>
</Accordions>


# Sounds and music (/start/sound)





<CalloutContainer type="warning">
  <CalloutDescription>
    The entire audio system has been revised in version 1.6.0/1.8.0.
  </CalloutDescription>
</CalloutContainer>

The sound module is a wrapper around the [Tone.js](https://tonejs.github.io/examples/) library. It provides a simple interface for playing sounds and saves the current state at each <DynamicLink href="/start/labels">`step`</DynamicLink>.

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/sound">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Nomenclature" id="nomenclature">
    It is composed of the following elements, which will be referenced later:

    * `sound` (manager) is the controller of the entire audio system. It is used to manage `channels`, start and control musical `media`, and retrieve information or modify sound `assets`. You can set values to adjust the overall audio level. These settings are not stored in save files and are mainly intended for game settings.
    * `channels` is a sub-level of the sound manager and can be seen as a container. It is used to contain, start, and manage musical `media`. You can set values to affect only the contained media. These settings are not stored in save files and are mainly intended for game settings.
    * `media` are instances of a sound that has been started. You can set values that apply only to themselves. All settings applied to them are saved in the game save. These settings are mainly intended to be modified during gameplay. They are contained within a `channel` in a one-to-many relationship. Each media has a unique `alias`.
    * `assets` (sound assets), as the name suggests, are the assets used during the game to play sounds. You can set values to influence all media that use this asset. These settings are not saved and are mainly intended to be configured during game initialization when loading assets.
  </Accordion>
</Accordions>

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { narration, newLabel, sound } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            await sound.play("sfx_whoosh", { delay: 0.1 });
            await sound.play("bgm_cheerful", { loop: true, channel: "bgm" });
            narration.dialogue =
                "Hello, I'm a cheerful background music that will loop forever until you stop me.";
        },
        () => {
            sound.pause("bgm_cheerful");
            narration.dialogue = "I'm paused, but I can be resumed.";
        },
        () => {
            sound.resume("bgm_cheerful");
            narration.dialogue = "I'm back!";
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "audio",
                assets: [
                    {
                        alias: "bgm_cheerful",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
                    },
                    {
                        alias: "sfx_whoosh",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<SoundExample />

## Initialize [#initialize]

<Accordions>
  <Accordion title="Assets" id="assets">
    As with other components that use assets, you need to define them in the <DynamicLink href="/start/assets">assets</DynamicLink>. After that, it is recommended to <DynamicLink href="/start/assets-management#load-assets-in-the-background-at-project-start">load the main sounds in the background</DynamicLink> at game startup using the functions provided by [`sound`](/jsdoc/pixi-vn/index/variables/sound).

    <CodeBlockTabs defaultValue="utils/assets-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="utils/assets-utility.ts">
          utils/assets-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/index.ts">
          assets/index.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="utils/assets-utility.ts">
        ```ts
        import { manifest } from "@/assets";
        import { AUDIO_BUNDLE_NAME } from "@/constants";
        import { Assets, sound } from "@drincs/pixi-vn";

        let assetsInitialized = false;

        /**
         * Define all the assets that will be used in the game.
         * This function will be called before the game starts.
         * You can read more about assets management in the documentation: https://pixi-vn.com/start/assets-management.html
         */
        export async function defineAssets() {
            if (!assetsInitialized) {
                await Assets.init({ manifest });
                assetsInitialized = true;
            }

            // The audio bundle will be loaded in the background, so it will be available when needed, but it won't block the game start.
            sound.backgroundLoadBundle(AUDIO_BUNDLE_NAME);
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/index.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        export const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "audio",
                    assets: [
                        {
                            alias: "bgm_cheerful",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
                        },
                        {
                            alias: "sfx_whoosh",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
                        },
                    ],
                },
            ],
        };
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

It is also recommended to define `channels` immediately after game initialization. To do this, you can use the [`sound.addChannel`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#addchannel) function.

```ts title="main.ts"
import { Game, sound } from "@drincs/pixi-vn";

Game.init(body, {
    // ...
}).then(() => {
    sound.addChannel("bgm", { background: true });
    sound.addChannel("sfx");
    sound.defaultChannelAlias = "sfx";
});
```

## Play [#play]

<CalloutContainer type="info">
  <CalloutDescription>
    If no `channel` is specified during the `play` function, the `media` will be assigned to [`sound.defaultChannelAlias`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#defaultchannelalias).
  </CalloutDescription>
</CalloutContainer>

The basic functionality is to start a sound (`asset`). This can be done using the `play` function. The `play` function generates a `media` instance that you can interact with to control the produced sound.

<Accordions>
  <Accordion title="channel" id="channel-play">
    [`channel.play`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface#play) starts a `media` directly on a specific `channel`, so you don't need to pass a `channel` option yourself.

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

    await sound.findChannel("sfx").play("sfx_whoosh", { delay: 0.1 });
    await sound.findChannel("bgm").play("bgm", "bgm_cheerful", { loop: true });
    ```
  </Accordion>

  <Accordion title="`sound` (manager)" id="sound-manager-play">
    [`sound.play`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#play) starts a `media` from the manager. Use the `channel` option to assign it to a specific `channel`, otherwise it falls back to [`sound.defaultChannelAlias`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#defaultchannelalias).

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

    await sound.play("sfx_whoosh", { delay: 0.1 });
    await sound.play("bgm", "bgm_cheerful", { loop: true, channel: "bgm" });
    ```
  </Accordion>
</Accordions>

## Transitions [#transitions]

<Accordions>
  <Accordion title="Fade" id="fade">
    You can start a `media` with a fade transition using the [`fadeIn`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#fadein)/[`fadeOut`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#fadeout) options of `play`. `fadeIn` only affects the start, while `fadeOut` is kept on the `media` and applied automatically both when it ends naturally and when you call `stop()` later.

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

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

    // later...
    sound.stop("theme"); // automatically fades out over the 3s set above
    ```
  </Accordion>
</Accordions>

## Pause and resume [#pause-and-resume]

There are various ways to pause individual or multiple `media`.

<Accordions>
  <Accordion title="media" id="media-pause">
    Setting [`media.paused`](/jsdoc/pixi-vn/index/interfaces/MediaInterface#paused) pauses or resumes that single `media` instance directly.

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

    const bgmMedia = sound.find("bgm_cheerful");
    if (bgmMedia) bgmMedia.paused = true;
    // ...
    if (bgmMedia) bgmMedia.paused = false;
    ```
  </Accordion>

  <Accordion title="channel" id="channel-pause">
    [`channel.pauseAll`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface#pauseall)/[`channel.resumeAll`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface#resumeall) pause or resume every `media` contained in that `channel`.

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

    sound.findChannel("sfx").pauseAll();
    sound.findChannel("sfx").resumeAll();
    ```
  </Accordion>

  <Accordion title="`sound` (manager)" id="sound-manager-pause">
    [`sound.pause`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#pause)/[`sound.resume`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#resume) target a single `media` by `alias`, while [`sound.pauseAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#pauseall)/[`sound.resumeAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#resumeall) affect every `media` across all `channels`.

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

    sound.pause("bgm_cheerful");
    sound.pauseAll();

    sound.resume("bgm_cheerful");
    sound.resumeAll();
    ```
  </Accordion>
</Accordions>

## Edit [#edit]

<CalloutContainer type="info">
  <CalloutDescription>
    Only `media` settings will be saved in game save files.
  </CalloutDescription>
</CalloutContainer>

It is possible to edit almost all settings at any time for different purposes.

<Accordions>
  <Accordion title="media" id="media-edit">
    Settings assigned directly on a [`media`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) instance (like `volume`) only affect that instance, and are saved in the game save.

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

    const bgmMedia = sound.find("bgm_cheerful");
    if (bgmMedia) bgmMedia.volume.value = 90;
    ```
  </Accordion>

  <Accordion title="channel" id="channel-edit">
    Settings assigned on a [`channel`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface) (like `volume`) affect every `media` it contains, without being saved.

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

    sound.findChannel("sfx").volume = 90;
    ```
  </Accordion>

  <Accordion title="`sound` (manager)" id="sound-manager-edit">
    Settings assigned on the [`sound`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface) manager (like `volumeAll`) affect every `channel`/`media` globally, without being saved.

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

    sound.volumeAll = 90;
    ```
  </Accordion>
</Accordions>

## Stop [#stop]

To stop a sound, you can use the `stop` function.

<Accordions>
  <Accordion title="media" id="media-stop">
    [`media.stop`](/jsdoc/pixi-vn/index/interfaces/MediaInterface#stop) stops that single `media` instance directly.

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

    sound.find("bgm_cheerful")?.stop();
    ```
  </Accordion>

  <Accordion title="channel" id="channel-stop">
    [`channel.stopAll`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface#stopall) stops every `media` contained in that `channel`.

    ```ts
    import { sound } from "@drincs/pixi-vn";
    sound.findChannel("sfx").stopAll();
    ```
  </Accordion>

  <Accordion title="`sound` (manager)" id="sound-manager-stop">
    [`sound.stop`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#stop) stops a single `media` by `alias`, while [`sound.stopAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#stopall) stops every `media` across all `channels`.

    ```ts
    import { sound } from "@drincs/pixi-vn";
    sound.stop("bgm_cheerful");
    sound.stopAll();
    ```
  </Accordion>
</Accordions>

## Filters [#filters]

<CalloutContainer type="warning">
  <CalloutDescription>
    Currently, they can only be modified when starting a media.
  </CalloutDescription>
</CalloutContainer>

Filters are elements that allow advanced customization of sounds.

<Accordions>
  <Accordion title="media" id="media-edit">
    Passing `filters` to [`sound.play`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#play) applies them only to that `media` instance.

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

    await sound.play("sfx_whoosh", { filters: [new filters.ReverbFilter()] });
    ```
  </Accordion>

  <Accordion title="channel" id="channel-edit">
    Passing `filters` to [`sound.addChannel`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#addchannel) applies them to every `media` started on that `channel`.

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

    sound.addChannel("bgm", {
        filters: [new filters.ReverbFilter()],
    });
    ```
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Menu functions" id="menu-functions">
    There are also functions available for managing sounds in menus, such as in the settings screen.

    All changes made by these functions are not saved in game saves, so when a save is loaded, sounds will return to the state they were in before being modified by these functions.

    The [`sound.pauseUnsavedAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#pauseunsavedall) and [`sound.resumeUnsavedAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#resumeunsavedall) functions are intended to be used when opening and closing a menu, such as the settings. The first function pauses all sounds that are not already paused, while the second resumes all sounds that were paused by the first function.

    Meanwhile, the [`sound.playTransient`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#playtransient) and [`stopTransientAll`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface#stoptransientall) functions are intended for temporary sounds, such as UI interaction sounds. The first function plays a sound that will not be saved in game saves, while the second stops all sounds started with the first function.
  </Accordion>
</Accordions>


# Storage (/start/storage)



<Accordions>
  <Accordion title="What is the game storage?" id="what-is-storage">
    The game storage is a place where you can save variables that you want to keep between game sessions.
  </Accordion>
</Accordions>

It is essential to understand that if variables are not saved in the game memory, the engine will not be able to handle them when you <DynamicLink href="/start/save#load">load a save</DynamicLink> or when you <DynamicLink href="/start/labels-flow#go-back">go back</DynamicLink>.

Additionally, in the game archive you can save any type of variable, except `class` and `function` (because they cannot be converted to JSON), such as: `string`, `number`, `boolean`, `object`, `array`, etc. If you want to save "flags" (boolean), it is recommended to use the <DynamicLink href="/start/flags">flags functionality</DynamicLink>, a very high-performance flag management system.

<Callout title="ink" type="info">
  You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/storage">here</DynamicLink>.
</Callout>

## Set [#set]

To set a variable in the game storage, use [`storage.set`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#set).

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

storage.set("myVariable", 42);
```

## Get [#get]

To get a variable from the game storage, use [`storage.get`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#get).

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

const myVariable = storage.get("myVariable");
```

## Remove [#remove]

To remove a variable from the game storage, use [`storage.remove`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#remove).

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

storage.remove("myVariable");
```

## Other features [#other-features]

<Accordions>
  <Accordion title="System variables" id="system-variables">
    In game storage, there are some system variables that are used by the game engine. All system variables start with the prefix `___`.
    So please avoid using this prefix in your variables.

    You can get all system variable keys from the [`SYSTEM_RESERVED_STORAGE_KEYS`](/jsdoc/pixi-vn/index/variables/SYSTEM_RESERVED_STORAGE_KEYS) constant.
  </Accordion>

  <Accordion title="Keyv" id="keyv">
    The entire storage system was developed using `Map`, a native JavaScript object, so you can use Keyv to interact with game storage.

    **What is Keyv?** Keyv is a simple key-value storage. It is a very easy-to-use system and very popular in the Node.js community. Keyv can be combined with other libraries, such as [Cacheable](https://cacheable.org/) (Caching for Node.js based on Keyv). You can learn more on the [Keyv website](https://keyv.org/).

    **How to use Keyv with Pixi’VN?** You can use Keyv with Pixi’VN by creating a new instance of Keyv and passing the storage object as a parameter.

    ```ts
    import { storage } from "@drincs/pixi-vn";
    import Keyv from "keyv";

    const keyvStorage = new Keyv({ store: storage.base });

    keyvStorage.get<string>("myValue").then((value) => {
        console.log(value);
    });
    ```
  </Accordion>

  <Accordion title="Default storage variables" id="default-storage-variables">
    You can set the starting value of storage variables.

    These variables will have the following characteristics:

    * If they are removed or set to undefined or null, the value will automatically be set to the default value (so they can never be undefined or null).
    * Default values ​​will not be saved in saves, so you can change them from one version to another without any problems.

    You can set the default storage variables using the [`storage.default`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#default) object.

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

    storage.default = {
        myVariable: 42,
        anotherVariable: "Hello, world!",
    };
    ```
  </Accordion>
</Accordions>


# Storage classes (/start/stored-classes)



Pixi’VN provides an abstract class [`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel) that you can use to create classes with properties saved in the game storage.

```ts
const CITY_CATEGORY = "city";

export default class City extends StoredClassModel {
    constructor(id: string, props: CityProps) {
        super(CITY_CATEGORY, id);
        // ...
    }
}
```

```ts
const milan = new City("milan", {
    // ...
});
```

## Storate properties [#storate-properties]

To stored class properties in the game storage use the [`getStorageProperty`](/jsdoc/pixi-vn/index/classes/StoredClassModel#getstorageproperty) and [`setStorageProperty`](/jsdoc/pixi-vn/index/classes/StoredClassModel#setstorageproperty) helpers.

```ts
export default class City extends StoredClassModel {
    constructor(id: string, props: CityProps) {
        // ...
    }

    get inhabitants(): number {
        return this.getStorageProperty<string>("inhabitants") || "";
    }
    set inhabitants(value: number) {
        this.setStorageProperty("inhabitants", value);
    }
}
```

```ts
const milan = new City("milan", {
    // ...
});

milan.inhabitants = 100000;
```


# Temporary storage (/start/temp-storage)



In many cases, it is useful to use variables only during a certain period of the narrative. Using normal storage, you would need to manually remove these variables when they are no longer needed, to keep saves light and efficient.

To solve this problem, Pixi’VN has a temporary storage system. Temporary variables initialized in a `label` will be deleted when the `label` is closed. If another `label` is called from it, the temporary variable will still be accessible from the child `label`. However, if another `label` is called with `jump` (so the current `label` will be closed and the new one started), the temporary variable will no longer be accessible.

## Set [#set]

To set a temporary variable, use [`storage.setTempVariable`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#settempvariable).

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

storage.setTempVariable("myTempVariable", 42);
```

## Get [#get]

To get a temporary variable, use the normal [`storage.get`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#get) function.

## Remove [#remove]

To remove a temporary variable, use [`storage.removeTempVariable`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface#removetempvariable).

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

storage.removeTempVariable("myTempVariable");
```


# Templates (/start/templates)





You can generate a new project from a template by running:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm create pixi-vn@latest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bunx create-pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Interactive demo [#interactive-demo]

<Accordions>
  <Accordion title="Visual Novel" id="visual-novel">
    <iframe
      src="https://pixi-vn-visual-novel-example.pages.dev/demo"
      title="Visual Novel"
      style="{
      width: &#x22;100%&#x22;,
      height: &#x22;400px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
      allowFullScreen="true"
    />
  </Accordion>

  <Accordion title="Point & Click" id="point-click-adventure">
    <iframe
      src="https://pixi-vn-point-and-click-example.pages.dev/demo"
      title="Point & Click"
      style="{
      width: &#x22;100%&#x22;,
      height: &#x22;400px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
      allowFullScreen="true"
    />
  </Accordion>
</Accordions>

## How to use a template [#how-to-use-a-template]

If you are reading this page, you likely already have a project generated from a template. The following sections will guide you through the first steps to get it up and running.

### Initial setup [#initial-setup]

Open the project folder with your IDE. The examples below use [Visual Studio Code](https://code.visualstudio.com/).

Once the project is open, VS Code will automatically suggest a few things:

* **Install recommended extensions** — a notification will appear asking you to install the workspace-recommended extensions. It is strongly advised to accept. If the notification does not appear, you can install them manually from the Extensions panel by filtering for [recommended extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_recommended-extensions).
* **Run startup tasks** — VS Code may prompt you to run the configured startup tasks, which will install all project dependencies. If you prefer to do it manually, run:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm install
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn install
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun install
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CalloutContainer type="warning">
  <CalloutTitle>
    Multi-platform
  </CalloutTitle>

  <CalloutDescription>
    If you selected a template that targets desktop or mobile platforms, you will need to install the additional dependencies required by [Tauri](https://v2.tauri.app/start/prerequisites/) (Rust toolchain and platform-specific build tools). Because Tauri integrates deeply with the system environment, you will likely need to **restart VS Code one or more times** before the project can be launched as a desktop application.
  </CalloutDescription>
</CalloutContainer>

<Accordions>
  <Accordion title="Installing Rust" id="installing-rust">
    The easiest way to install Rust on any platform is via [rustup](https://rustup.rs/), the official Rust toolchain installer.

    <Tabs items="[&#x22;Windows&#x22;, &#x22;macOS&#x22;, &#x22;Linux&#x22;]" groupId="os">
      <Tab>
        Download and run [`rustup-init.exe`](https://win.rustup.rs/), or install it from the terminal with `winget`:

        ```powershell
        winget install --id Rustlang.Rustup
        ```

        After installation, restart your terminal (and VS Code) so the `cargo` command is available on `PATH`.
      </Tab>

      <Tab>
        Open a terminal and run:

        ```bash
        curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
        ```

        Follow the on-screen instructions, then restart your terminal (and VS Code) so the `cargo` command is available on `PATH`. You will also need the Xcode Command Line Tools:

        ```bash
        xcode-select --install
        ```
      </Tab>

      <Tab>
        Open a terminal and run:

        ```bash
        curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
        ```

        Follow the on-screen instructions, then restart your terminal (and VS Code) so the `cargo` command is available on `PATH`. Depending on your distribution, you may also need to install additional system packages required by Tauri (e.g. `webkit2gtk`, `build-essential`, `libssl-dev`) — see the [Tauri Linux prerequisites](https://v2.tauri.app/start/prerequisites/#linux) for the exact packages for your distro.
      </Tab>
    </Tabs>

    Once installed, verify it with:

    ```bash
    rustc --version
    ```
  </Accordion>
</Accordions>

### Run the project [#run-the-project]

The template includes a set of pre-configured **launch configurations** for VS Code. If you are not familiar with them: launch configurations are shortcuts that tell VS Code how to start your project (and optionally attach a debugger), so you do not need to type commands in the terminal every time. You can access them from the **Run and Debug** panel (the play-button icon in the left sidebar, or press `F5`). Select the configuration you want from the dropdown at the top of the panel and press the green play button.

<img alt="Run-and-Debug-panel" src="__img0" />

The following configurations are available:

* **Debug Game**: his is the configuration you will use most often during development — every time you save a file, the browser refreshes automatically. Keep in mind that in this mode animations may not be perfectly smooth and asset loading can be slower than in the final published build.
* **Debug Game Preview**: which closely simulates how the game will behave once published: animations are fluid, loading times are realistic, and optimisations are active. Use this configuration when you want to verify that everything looks and feels correct before publishing.
* **Run as Desktop App (Dev)**: it compiles the Rust/Tauri backend and launches the game as a native desktop window. If your template does not target desktop or mobile platforms, this configuration will not be present.

<Accordions>
  <Accordion title="Command line" id="command-line">
    All commands must be run from the root of the project.

    **Development**

    | Command                     | Description                                                                                             |
    | --------------------------- | ------------------------------------------------------------------------------------------------------- |
    | `npm run dev`               | Start the Vite development server and open the game in the browser.                                     |
    | `npm run tauri:dev`         | Start the game as a **desktop** application (requires the multi-platform template and Tauri installed). |
    | `npm run tauri:android:dev` | Start the game on a connected Android device or emulator.                                               |
    | `npm run tauri:ios:dev`     | Start the game on a connected iOS device or simulator.                                                  |

    **Build & Preview**

    | Command              | Description                                                                              |
    | -------------------- | ---------------------------------------------------------------------------------------- |
    | `npm run build:fast` | Build the web app only (no Tauri). Fast, suitable for web publishing.                    |
    | `npm run build`      | Full build: compiles TypeScript, builds the web app, and packages the Tauri desktop app. |
    | `npm run preview`    | Run `build:fast` and then serve the result locally — simulates the published web game.   |

    **Assets & icons**

    | Command        | Description                                                                                                  |
    | -------------- | ------------------------------------------------------------------------------------------------------------ |
    | `npm run icon` | Generate all icon variants (PWA, desktop, mobile) from `public/icon.png`. Run this after replacing the icon. |

    **UI**

    | Command             | Description                                                                                                                          |
    | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
    | `npm run ui:reinit` | Reinitialize [shadcn/ui](https://ui.shadcn.com/) from scratch (force-reinstall all components) and reformat source files afterwards. |

    **Code quality**

    | Command          | Description                                                    |
    | ---------------- | -------------------------------------------------------------- |
    | `npm run lint`   | Check the code for errors using [Biome](https://biomejs.dev/). |
    | `npm run check`  | Run all Biome checks (lint + format verification).             |
    | `npm run format` | Automatically format all source files.                         |
  </Accordion>
</Accordions>

### Customise the style [#customise-the-style]

The template UI is built entirely with [shadcn/ui](https://ui.shadcn.com/), which means you can customise the colour theme without touching any component code.

Open the [shadcn/ui theme builder](https://ui.shadcn.com/create?template=vite\&base=base\&preset=b1s9eyGkS), adjust the colours to your taste, then navigate to the **Copy** section of the page to copy the generated CSS command. Run that command from the root of your project:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add <paste-the-generated-command-here>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add <paste-the-generated-command-here>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add <paste-the-generated-command-here>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add <paste-the-generated-command-here>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Once applied, it is recommended to reformat the source files:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm run format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm run format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn format
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun run format
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For further customisation — fonts, global styles, and more — see <DynamicLink href="/start/interface-font">Styles & font</DynamicLink>.

### Project structure [#project-structure]

<Files>
  <Folder name="project">
    <Folder name="ink">
      <File name="start.ink" />
    </Folder>

    <Folder name="public">
      <File name="icon.png" />
    </Folder>

    <Folder name="src">
      <Folder name="assets">
        <File name="manifest.gen.json" />

        <File name="ink-manifest.gen.json" />

        <File name="index.ts" />
      </Folder>

      <Folder name="components" />

      <Folder name="content">
        <Folder name="ink">
          <File name="hashtag-commands.ts" />

          <File name="text-replaces.ts" />
        </Folder>

        <Folder name="labels">
          <File name="start.label.ts" />
        </Folder>

        <File name="characters.ts" />

        <File name="index.ts" />
      </Folder>

      <Folder name="lib">
        <Folder name="hooks" />

        <Folder name="query" />

        <Folder name="stores" />

        <Folder name="utils" />

        <File name="i18n.ts" />

        <File name="steam.ts" />
      </Folder>

      <Folder name="locales">
        <File name="en.json" />
      </Folder>

      <Folder name="models">
        <File name="Character.ts" />

        <File name="GameSaveData.ts" />
      </Folder>

      <Folder name="routes">
        <Folder name="game">
          <File name="narration.tsx" />
        </Folder>

        <File name="__root.tsx" />

        <File name="game.tsx" />

        <File name="index.tsx" />
      </Folder>

      <File name="constants.ts" />

      <File name="main.tsx" />

      <File name="pixi-vn.keys.gen.ts" />

      <File name="pixi-vn.d.ts" />

      <File name="styles.css" />
    </Folder>

    <Folder name="src-tauri" />
  </Folder>
</Files>

<Accordions>
  <Accordion title="Narration" id="project-structure-narration">
    * `ink/&#x60; — write your story in &#x2A;**ink*** scripts here. The template includes a sample `start.ink` to get you started.
    * `src/content/` — auto-imported at startup; define all game elements here:
      * `ink/hashtag-commands.ts&#x60; — custom hashtag commands from &#x2A;**ink*** scripts. See <DynamicLink href="/ink/hashtag">***ink*** hashtag commands</DynamicLink>.
      * `ink/text-replaces.ts&#x60; — text replacements for &#x2A;**ink*** dialogue. See <DynamicLink href="/ink/replacement">***ink*** text replacements</DynamicLink>.
      * `labels/` — labels defining game flow and scenes (use the `.label.ts` naming convention).
      * `characters.ts` — character definitions.
  </Accordion>

  <Accordion title="Assets" id="project-structure-assets">
    * `src/assets/` — source game assets (images, audio, fonts, etc.). Auto-analysed by [Pixi Asset Pack](https://pixijs.io/assetpack/).
    * `public/assets/` — auto-generated optimized assets used by the project at runtime.
    * `public/icon.png` — source icon. Replace it and run `npm run icon` to regenerate all PWA/desktop/mobile variants.
    * `src/assets/index.ts` — re-exports the auto-generated asset manifest for the engine.
  </Accordion>

  <Accordion title="UI" id="project-structure-ui">
    * `src/components/` — React UI components (screens, menus, dialogue boxes, etc.).
    * `src/routes/` — [TanStack Router](https://tanstack.com/router) route definitions. See <DynamicLink href="/start/interface-navigate">Navigation</DynamicLink>.
    * `src/styles.css` — global stylesheet ([shadcn/ui](https://ui.shadcn.com/)). See <DynamicLink href="/start/interface-font">Fonts & styles</DynamicLink>.
  </Accordion>

  <Accordion title="Translations" id="project-structure-translations">
    * `src/lib/i18n.ts` — internationalisation setup. See <DynamicLink href="/start/translate">Translations</DynamicLink>.
    * `src/locales/` — one translation JSON per language (e.g. `en.json`). See <DynamicLink href="/start/translate">Translations</DynamicLink>.
  </Accordion>

  <Accordion title="Initial setup" id="project-structure-initial-setup">
    * `src/models/` — custom classes and TypeScript types.
    * `src/main.tsx` — application entry point; initialises Pixi’VN.
    * `src/pixi-vn.keys.gen.ts` — auto-generated file with TypeScript types for all keys in the Pixi’VN API (e.g. `PixivnCharacterIds`, `PixivnLabelIds`, etc.). Used for type safety and autocompletion when working with the engine.
    * `src/pixi-vn.d.ts` — TypeScript declaration overrides for `@drincs/pixi-vn`.
  </Accordion>

  <Accordion title="Multi-platform" id="project-structure-multi-platform">
    * `src-tauri/` — Rust/Tauri source (multi-platform templates only); enables native desktop and mobile builds.
  </Accordion>

  <Accordion title="Other" id="project-structure-other">
    * `src/lib/` — utilities and internals:
      * `steam.ts` — Steam API (achievements, cloud saves). See <DynamicLink href="/start/distribution-steam">Steam distribution</DynamicLink>.
    * `src/constants.ts` — project-wide constants (screen sizes, config values, etc.).
  </Accordion>
</Accordions>

### Template screens [#template-screens]

The template comes with a set of pre-built screens that cover the essential parts of a visual novel. Each screen is a React component connected to a route managed by TanStack Router.

* **Main menu** (`/`) — the first screen the player sees when they launch the game. It provides the entry point to start a new game, continue a saved one, and open the settings.
* **Narration screen** (`/game/narration`) — the core gameplay screen where the story is displayed. It renders dialogue, character sprites, backgrounds, and choices.
* **Settings** — the settings panel does not have its own dedicated route. Instead it uses [Search Params](https://tanstack.com/router/latest/docs/framework/react/guide/search-params) to overlay itself on top of whatever screen is currently active. This approach keeps the URL clean while still allowing the player to open settings from anywhere in the game, and to navigate between settings sections (audio, display, language, etc.) without losing track of where they were.
* **Navigation screen** (`/game/navigation`) — *Point & Click* only. It lets the player navigate between rooms and perform the various actions available in the current location.
* **Map screen** (`/game/map`) — *Point & Click* only. It shows the map and lets the player move from one location to another. It also supports managing multiple maps.


# Internalization (/start/translate)



In visual novels and similar games, it is common to allow players to select their native language.

For your Pixi’VN project, you should use an external library to handle translations. This gives you the flexibility to choose the implementation that best fits your needs.

The most popular and widely compatible library is **i18next**.

<Accordions>
  <Accordion title="What is i18next?" id="what-is-i18next">
    i18next is an internationalization framework for JavaScript. To use it, you need to install and initialize it. Learn more on the [i18next website](https://www.i18next.com/).
  </Accordion>
</Accordions>

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    In all templates, i18next is already included and configured. You can start translating your game right away.
  </CalloutDescription>
</CalloutContainer>

Translations are stored in multiple JSON files (one per language), using key-value pairs. The key is a unique identifier for the text, and the value is the translated string.

<Accordions>
  <Accordion title="Initialize" id="initialize">
    ```ts title="lib/i18n.ts"
    import i18n, { type ReadCallback } from "i18next";
    import LanguageDetector from "i18next-browser-languagedetector";
    import ChainedBackend from "i18next-chained-backend";
    import { initReactI18next } from "react-i18next";

    class Backend extends ChainedBackend {
        override async read(lng: string, ns: string, callback: ReadCallback) {
            try {
                const object = await getLocalesResource(lng);
                const result = object[ns];
                callback(null, result);
            } catch (error) {
                callback(error as Error, { data: null });
            }
        }
    }

    export const useI18n = async () => {
        if (!i18n.isInitialized) {
            return await i18n
                .use(Backend)
                .use(LanguageDetector)
                .use(initReactI18next)
                .init({
                    debug: false,
                    fallbackLng: "en",
                    supportedLngs: ["en"],
                    interpolation: {
                        escapeValue: false,
                    },
                    load: "currentOnly",
                    detection: {
                        order: ["localStorage"],
                        caches: ["localStorage"],
                    },
                    missingInterpolationHandler(_text, value, _options) {
                        return value[1];
                    },
                });
        }
    };

    function getLocalesResource(
        lng: string,
    ): Promise<Record<string, Record<string, string>>> {
        return import(`./../locales/${lng}.json`);
    }
    ```
  </Accordion>

  <Accordion title="Translate the UI" id="translate-ui">
    To translate the UI, use the `t` function provided by i18next. Pass the translation key to `t` to get the corresponding text in the player's language.

    For example:

    <CodeBlockTabs defaultValue="React">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="React">
          React
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Vue">
          Vue
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="Svelte">
          Svelte
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="React">
        ```tsx
        import { useTranslation } from "react-i18next";

        export default function MyComponent() {
            const { t } = useTranslation("ui");

            return (
                <div>
                    <Button>{t("text_speed")}</Button>
                </div>
            );
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Vue">
        ```vue
        <script setup>
        import { useTranslation } from "i18next-vue";
        const { t } = useTranslation("ui");
        </script>

        <template>
            <div>
                <button>{{ t("text_speed") }}</button>
            </div>
        </template>
        ```
      </CodeBlockTab>

      <CodeBlockTab value="Svelte">
        ```svelte
        <script>
            import { useTranslation } from 'svelte-i18n';
            const { t } = useTranslation("ui");
        </script>

        <div>
            <button>{t('text_speed')}</button>
        </div>
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Translate the narration (TypeScript/JavaScript)" id="translate-narration">
    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, the `StepLabelProps` interface already includes a `t` function. See `pixi-vn.d.ts`.
      </CalloutDescription>
    </CalloutContainer>

    <CalloutContainer type="info">
      <CalloutDescription>
        It is recommended to use `t` inside the <DynamicLink href="/start/labels">label</DynamicLink> rather than directly in the UI, so you can take advantage of [i18n Interpolation](https://i18next.com/translation-function/interpolation).
      </CalloutDescription>
    </CalloutContainer>

    In Pixi’VN projects, you often need to translate narration text in TypeScript/JavaScript <DynamicLink href="/start/labels">`labels`</DynamicLink>. To enable this, the translation function must be in the <DynamicLink href="/start/labels#steplabelprops">`StepLabelProps` interface</DynamicLink>.

    It is recommended to use the original string as the translation key.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="locales/es.json">
          locales/es.json
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="lib/hooks/props-hooks.ts">
          lib/hooks/props-hooks.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        export const startLabel = newLabel("start", [
            ({ t }) => {
                narration.dialogue = {
                    character: liam,
                    text: t("Hello, my name is {{name}}", { name: "Liam" }),
                };
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        import type { TFunction } from "i18next";

        declare module "@drincs/pixi-vn" {
            interface StepLabelProps {
                /**
                 * Translate a key to a string.
                 * @param key The key to translate.
                 * @returns The translated string.
                 */
                t: TFunction<[string], undefined>;
                // ...
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="locales/es.json">
        ```ts
        {
            "narration": {
                "Hello, my name is {{name}}": "Hola, mi nombre es {{name}}"
                // ...
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="lib/hooks/props-hooks.ts">
        ```ts
        import { useTranslation } from "react-i18next";

        export function useGameProps(): StepLabelProps {
            const { t } = useTranslation(["narration"]);

            return {
                // ...
                t,
            };
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Create [#create]

<CalloutContainer type="info">
  <CalloutTitle>
    *ink*
  </CalloutTitle>

  <CalloutDescription>
    If you use *ink*, you can automatically extract strings from *ink* text for translation. See more <DynamicLink href="/ink/translate">here</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

Translation JSON files must be created manually. It is recommended to split translations into two sections (see `es.json`):

* UI texts: for screens, settings, quick buttons, etc.—everything not part of the narration.
* Narration texts: for dialogues, choice menus, etc.

<CodeBlockTabs defaultValue="locales/es.json">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="locales/es.json">
      locales/es.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="locales/es.json">
    ```json
    {
        "ui": {
            "text_speed": "Velocidad del texto"
            // ...
        },
        "narration": {
            "Hello, my name is {{name}}": "Hola, mi nombre es {{name}}"
            // ...
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Ren'Py vs Pixi’VN (/start/versus-renpy)





If you are looking for a **Ren'Py alternative**, this comparison is for you. Making a comparison between Ren'Py and Pixi’VN is necessary because Ren'Py is currently the most widely used engine for creating visual novels.

<Callout title="Templates" type="info">
  This comparison was made by the Pixi’VN team, aiming to be unbiased. If you disagree with this comparison or think other features should be compared, feel free to write in the chat below!
</Callout>

**What is Ren'Py?**

Ren'Py is a visual novel engine – used by thousands of creators from around the world – that helps you use words, images, and sounds to tell interactive stories that run on computers and mobile devices. These can be both visual novels and life simulation games.

* Programming language: `Ren'Py language`, a programming language that allows you to develop visual novels quickly, even without much programming knowledge. It is based on Python.
* Canvas library: [`Pygame_sdl2`](https://github.com/renpy/pygame_sdl2) is a reimplementation of the Pygame API using SDL2 and related libraries. While it was originally meant to support multiple applications, it is now mainly used as the technology underlying Ren'Py.
* How does it work: Ren'Py is a complete visual novel engine/framework that takes care of creating a project, executing it, distributing it, and much more.

## Programming language [#programming-language]

Ren'Py uses its own language, `Ren'Py language`, which is a superset of Python. You can use Python statements in Ren'Py language.

Pixi’VN uses JavaScript/TypeScript, which are powerful and popular languages. To write the narration, you can use JavaScript/TypeScript or choose one or more narrative languages from those available.

| Programming language      | Ren'Py                                                                                                                                            | Pixi’VN                                                                                                                                                                            |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Ease of learning          | Intended for people who do not know how to program                                                                                                | You can get started quickly using a template, but as you progress and need to integrate new features, you will need to learn some basics of JavaScript/TypeScript, NodeJS, and npm |
| Is it a typed language?   | ❌ (Using Python you can use types, but the Ren'Py compiler does not have type checking. Also, much of the native Ren'Py code does not use types.) | ✅                                                                                                                                                                                  |
| Can you use the debugger? | ❌                                                                                                                                                 | ✅                                                                                                                                                                                  |
| Package/libraries manager | ❌                                                                                                                                                 | npm                                                                                                                                                                                |
| Narrative Language        | Ren'Py language and Python statements                                                                                                             | JavaScript/TypeScript and various narrative languages (including Ren'Py language)                                                                                                  |
| Mini-games implementation | You can use Ren'Py Creator-Defined Displayables (CDD)                                                                                             | You can use PixiJS or install other libraries                                                                                                                                      |
| UI implementation         | You can use Ren'Py screens                                                                                                                        | You can use PixiJS, React, Vue, etc.                                                                                                                                               |
| UI components             | Components provided by Ren'Py, usually based on images                                                                                            | Depending on the UI framework, you can use any component library (e.g., Material-UI, Bootstrap, PixiJS UI, etc.)                                                                   |

### Writing the narrative [#writing-the-narrative]

With Ren'Py, to write the narrative, you use the `Ren'Py language`. This language is simple and easy to learn. It is based on Python, and you can use Python statements in Ren'Py language.

With Pixi’VN, you can use JavaScript/TypeScript to write the narration. You can also use various narrative languages (potentially you can integrate any narrative language using [PixiVNJson](/jsdoc/pixi-vn-json)).

Example of Ren'Py:

```renpy title="start.rpy"
label start:
    "Hello, world!"
    "This is a Pixi’VN tutorial."
    "I hope you enjoy it!"
```

Example of Pixi’VN:

```typescript title="startLabel.ts"
const startLabel = newLabel("start", [
    () => (narration.dialogue = "Hello, world!"),
    () => (narration.dialogue = "This is a Pixi’VN tutorial."),
    () => (narration.dialogue = "I hope you enjoy it!"),
]);
```

```ink title="start.ink"
=== start
Hello, world!
This is a Pixi’VN tutorial.
I hope you enjoy it!
->DONE
```

### Implementation of minigames [#implementation-of-minigames]

With Ren'Py, for creating minigames with complex mechanics/animations, you need to use [`Creator-Defined Displayables (CDD)`](https://www.renpy.org/doc/html/cdd.html). This is necessary because otherwise you will have performance problems. With CDD you can create/control one or more graphic elements through a render loop.
CDD is not very intuitive and is complicated to use. There are very few examples and few developers using CDD. In fact, most minigames do not have complex logic and animations.

With Pixi’VN, you can use PixiJS to create minigames. PixiJS is a very powerful library that allows you to create complex animations and mechanics. The documentation and examples are detailed, and there are many developers using PixiJS.

You can try some Ren'Py and PixiJS minigames to understand the difference:

* [Ren'Py minigames](https://itch.io/game-assets/free/tag-minigames/tag-renpy)
* [PixiJS minigames](https://github.com/pixijs/open-games)
* [PixiJS tutorials](https://pixijs.com/8.x/tutorials)

### UI implementation [#ui-implementation]

With Ren'Py, to create the user interface, you use `screens` and `styles`. The recommended implementation is to draw a series of images and add them inside the canvas through the graphics components. The graphic components are limited and not very intuitive.

With Pixi’VN, in addition to using the components of PixiJS, you can also use systems such as React, Vue, etc., and install component libraries such as Material-UI, Bootstrap, etc. This allows you to create much more complex UI screens with excellent performance.

## Performance and project size [#performance-and-project-size]

Performance and project size are important factors to consider when choosing a framework.

**Canvas libraries used:**

* [`Pygame_sdl2`](https://github.com/renpy/pygame_sdl2): This canvas is underperforming. You can test this by inserting lots of moving graphics into Ren'Py.
* PixiJS: It is based on modern systems and has great performance. This can be tested directly from this example:

<PerformanceExample />

**UI performance:**

* Ren'Py's UI is based on canvas components that use images within the project.
* With Pixi’VN you can use HTML and/or JavaScript frameworks, known for their performance and usability, or the canvas. HTML/JavaScript components are not necessarily based on images, which leads to a smaller project size.

**Project size:**

* The entire UI of Ren'Py is based on "physical images", making the project size very large.
* Since Pixi’VN is a library, it does not determine the project size, but if you use [vite](https://vitejs.dev/) or other tools, the project size will be very light.

## Distribution on multiple devices [#distribution-on-multiple-devices]

Ren'Py is directly responsible for distributing the game on various devices.

Pixi’VN does not handle distribution. You can use various frameworks (Tauri, Electron, Cordova, etc.) to distribute the project on multiple devices. Pixi’VN provides templates that already include the necessary configurations for distribution.

| Distribution on multiple devices                              | Ren'Py                                                                         | Pixi’VN                                                                                                                                 |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| Ease of use                                                   | **Very simple**. You can use the Ren'Py UI to create the package to distribute | For less experienced users, it **can be difficult** to set up the project for multiple devices. Using templates can simplify this step. |
| Package configurations                                        | Essential                                                                      | Very complete (you can choose if the package should be installed or run without installation)                                           |
| Deployment automations with GitHub Actions or GitLab Pipeline | ❌                                                                              | ✅                                                                                                                                       |
| System notification                                           | ❌                                                                              | ✅                                                                                                                                       |
| Use connected devices (Camera, Flashlight, etc.)              | ❌                                                                              | ✅                                                                                                                                       |
| UI scaling based on device type                               | ✅                                                                              | ✅                                                                                                                                       |
| UI scaling to fit screen size                                 | ❌                                                                              | ✅                                                                                                                                       |
| Windows/Linux/Mac OS                                          | ✅ (using Ren'Py)                                                               | ✅ (using Tauri, Electron, Cordova, etc.)                                                                                                |
| Android/iOS                                                   | ✅ (using Ren'Py)                                                               | ✅ (using Ionic or Cordova)                                                                                                              |
| Web                                                           | ✅ (in beta)                                                                    | ✅ (natively supported)                                                                                                                  |
| Xbox/PlayStation/Nintendo Switch                              | ✅ (using Sen’py)                                                               | Only Xbox with UWP                                                                                                                      |

## Development possibilities [#development-possibilities]

Ren'Py is an engine designed only for creating visual novels. Adding complex functionality through Python that goes beyond the development of a normal visual novel is very complicated and is not recommended by the Ren'Py team. It does not have a package/library manager.

Pixi’VN is an [npm](https://www.npmjs.com/) library that allows you to create visual novels. You can also use this library in a project that is not natively a visual novel. [npm](https://www.npmjs.com/) is a package manager for JavaScript and the world's largest software registry.

## Longevity and ease of internal development [#longevity-and-ease-of-internal-development]

Ren'Py was born in 2004 and is still used today. It is a very stable and mature project.
Ren'Py, in addition to including the development of its own library for visual novels, also includes the development of `Ren'Py language` and `Pygame_sdl2`. Since Ren'Py also handles the distribution of the project on various devices, it is necessary to keep the system up to date with updates for supported operating systems.

This means that keeping Ren'Py updated is a constant and very complex process that "touches" many types of programming (parsing, graphics, etc.).

Pixi’VN was born in 2024. It is a very young project.
Pixi’VN is only a library that uses PixiJS for the canvas. As well as providing functionality for visual novels, it doesn't handle anything else.

This means that keeping Pixi’VN updated is a very simple process and, once it reaches a stable version, it will not need constant updates to be compatible with the latest devices.

## Conclusion [#conclusion]

In conclusion, if you know object-oriented programming and want to create a visual novel with many features, minigames, a very complex UI, etc., you should use Pixi’VN. If you are not a programmer, want to create your visual novel quickly, and are willing to learn knowledge over time that you can reuse later, consider Pixi’VN. If you want a unified framework that takes care of everything without you having to decide which libraries to use, then Pixi’VN is not for you—Ren'Py is a valid option. If you want a no-code framework, currently, neither Ren'Py nor Pixi’VN are for you.


# Why? (/start/why)



The reason why Pixi’VN was born is that the current systems for creating visual novels or 2D RPGs are based on old systems and have many shortcomings.

Pixi’VN combines the development of various story-driven games in a single engine, bringing video game development closer to web applications in order to take advantage of their great compatibility and cloud services.

## What is Pixi’VN? [#what-is-pixivn]

Pixi’VN is a versatile and powerful story-driven game engine based on JavaScript/TypeScript and [PixiJS](https://pixijs.com/).

It provides the following features:

* Narrative management
* 2D rendering
* Functionality to play sounds and music
* Storage to set and get game variables
* Saves the current state of the entire game at each `step`, giving the possibility to go back
* Functionality to save and load the current state of the game

For a quick start, various <DynamicLink href="/start#project-initialization">project templates</DynamicLink> are available. Less experienced developers can use these templates without much knowledge of JavaScript/TypeScript.

You have the option to use various types of narrative languages (in addition to JavaScript/TypeScript). Currently you can use the following:

* <DynamicLink href="/ink">
    *ink*
  </DynamicLink>
* <DynamicLink href="/renpy">
    Ren'Py
  </DynamicLink>

## Features of Pixi’VN [#features-of-pixivn]

Its great **versatility** is due to the fact that Pixi’VN is an npm package, not a framework. This means it can be installed in any JavaScript project and integrated with your favorite JavaScript framework (React, Vue, etc.).
You may use the provided functionality for a variety of purposes, from creating a visual novel or other type of story-driven game (such as point-and-click adventure, RPGs, etc.), using only the narrative features in a 3D game, displaying an animation on a website, and more.

To be as **lightweight** as possible, it only deals with specific features, allowing and encouraging you to add more with other libraries. There is no need to use heavy IDEs for development; any code editor will do.

It does **not reinvent things** that already exist. Pixi’VN binds together several very popular libraries and provides APIs to interact with them and have full access. It does not invent new programming or narrative languages.


# Arithmetic logic (/ink/arithmetic-logic)



<Callout type="info">
  You can read more about logic and variables in ink on the [official documentation](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#2-logic).
</Callout>

***ink*** is fully-featured in terms of arithmetic and logic. Any line prefixed with `~` is treated as a **logic line** rather than story text, which is how you perform calculations and assignments without printing anything to the screen.

## Arithmetic operators [#arithmetic-operators]

***ink*** supports the following arithmetic operators:

| Operator    | Description                               |
| ----------- | ----------------------------------------- |
| `+`         | Addition                                  |
| `-`         | Subtraction                               |
| `*`         | Multiplication                            |
| `/`         | Division                                  |
| `%` / `mod` | Modulo (remainder after integer division) |

```ink title="ink"
~ x = (x * x) - (y * y) + c
~ y = 2 * x * y
~ remainder = 10 mod 3
```

### Implicit numerical types [#implicit-numerical-types]

Results of operations are typed based on the type of the inputs. In particular, **integer division returns an integer**, while floating-point division returns a float:

```ink title="ink"
~ x = 2 / 3    // x is 0   (integer)
~ y = 7 / 3    // y is 2   (integer)
~ z = 1.2 / 0.5 // z is 2.4 (float)
```

## Comparison and logical operators [#comparison-and-logical-operators]

The following operators are available for building conditions:

| Operator      | Description              |
| ------------- | ------------------------ |
| `==`          | Equal to                 |
| `!=`          | Not equal to             |
| `>`           | Greater than             |
| `<`           | Less than                |
| `>=`          | Greater than or equal to |
| `<=`          | Less than or equal to    |
| `&&` / `and`  | Logical AND              |
| `\|\|` / `or` | Logical OR               |
| `!` / `not`   | Logical NOT              |

Conditions are written inline inside `{` `}` braces:

```ink title="ink"
{ x == 1.2 }
{ x / 2 > 4 }
{ y - 1 <= x * x }
```

### String queries [#string-queries]

***ink*** supports three basic string operations:

```ink title="ink"
{ "Yes, please." == "Yes, please." }   // equality
{ "No, thank you." != "Yes, please." } // inequality
{ "Yes, please" ? "ease" }             // substring / contains
```

## Conditional blocks (if / else) [#conditional-blocks-if--else]

<Accordions>
  <Accordion title="Simple if" id="if">
    ```ink title="ink"
    { x > 0:
        ~ y = x - 1
    }
    ```
  </Accordion>

  <Accordion title="if / else" id="else">
    ```ink title="ink"
    { x > 0:
        ~ y = x - 1
    - else:
        ~ y = x + 1
    }
    ```
  </Accordion>

  <Accordion title="if / else-if / else" id="elseif">
    ```ink title="ink"
    {
        - x == 0:
            ~ y = 0
        - x > 0:
            ~ y = x - 1
        - else:
            ~ y = x + 1
    }
    ```
  </Accordion>

  <Accordion title="Switch" id="switch">
    ```ink title="ink"
    { x:
    - 0:    zero
    - 1:    one
    - 2:    two
    - else: lots
    }
    ```
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="`POW()`" id="pow">
    To raise a number to a power use `POW(base, exponent)`:

    ```ink title="ink"
    {POW(3, 2)} is 9.
    {POW(16, 0.5)} is 4.
    ```
  </Accordion>

  <Accordion title="`INT()`, `FLOOR()` and `FLOAT()`" id="rounding">
    When you need explicit type conversion or controlled rounding, use the built-in cast functions:

    | Function   | Description                            |
    | ---------- | -------------------------------------- |
    | `INT(x)`   | Truncates toward zero                  |
    | `FLOOR(x)` | Rounds down (toward negative infinity) |
    | `FLOAT(x)` | Converts to floating-point             |

    ```ink title="ink"
    {INT(3.2)}    // 3
    {FLOOR(4.8)}  // 4
    {INT(-4.8)}   // -4
    {FLOOR(-4.8)} // -5
    {FLOAT(4)}    // 4.0
    ```
  </Accordion>

  <Accordion title="`RANDOM(min, max)`" id="random">
    ***ink*** can generate a random integer with `RANDOM(min, max)`. Both bounds are **inclusive** (like rolling a dice):

    ```ink title="ink"
    ~ temp dice_roll = RANDOM(1, 6)
    ~ temp score = RANDOM(30, 75)
    ~ temp heads = RANDOM(3, 8)
    ```
  </Accordion>

  <Accordion title="Conditions on story content" id="story-condition">
    Conditional blocks are not limited to pure logic — they can wrap story text and even choices:

    ```ink title="ink"
    I stared at Monsieur Fogg.
    { know_about_wager:
        <> "But surely you are not serious?" I demanded.
    - else:
        <> "But there must be a reason for this trip," I observed.
    }
    ```

    ```ink title="ink"
    { door_open:
        *   I strode out of the compartment[] and I fancied I heard my master quietly tutting to himself.
            -> go_outside
    - else:
        *   I asked permission to leave[] and Monsieur Fogg looked surprised.
            -> open_door
        *   I stood and went to open the door[]. Monsieur Fogg seemed untroubled by this small rebellion.
            -> open_door
    }
    ```
  </Accordion>

  <Accordion title="Complex conditions with AND / OR" id="complex-conditions">
    Multiple conditions can be combined with `and` / `&&` and `or` / `||`:

    ```ink title="ink"
    {
        - visited_snakes && not dream_about_snakes:
            ~ fear++
            -> dream_about_snakes

        - visited_poland && not dream_about_polish_beer:
            ~ fear--
            -> dream_about_polish_beer

        - else:
            -> dream_about_marmalade
    }
    ```
  </Accordion>
</Accordions>


# Assets (/ink/assets)



As explained in more detail <DynamicLink href="/start/assets-management">here</DynamicLink>, initialize the asset matrix at project start and decide when assets should be loaded.

In &#x2A;**ink**&#x2A; you have less control than in JavaScript/TypeScript over how and when to load assets. Pixi’VN provides a single &#x2A;**ink*** command that <DynamicLink href="/start/assets-management#load-assets-before-a-label-starts">loads assets before a `label` starts</DynamicLink>. Use the following syntax:

To load the assets or bundle with await, use the `load` operation:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # load assets eggHead flowerTop
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # load <assets or bundle> <list of URL/path/alias>

    where:
        assets or bundle = the type to load. `assets` loads with `Assets.load`, `bundle` loads with `Assets.loadBundle`.
        list of URL/path/alias = the list of URLs/paths of the images (or other assets), or of the bundle names, you want to load. If you initialized the <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">asset matrix</DynamicLink>, you can use an asset alias instead of a URL. Note: to write `https://` in ***ink*** you must escape the slashes as `https:\/\/` because `//` is treated as a comment in ***ink***.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To load the assets or bundle in the background, use the `lazyload` operation:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # lazyload bundle main_menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # lazyload <assets or bundle> <list of URL/path/alias>

    where:
        assets or bundle = the type to load. `assets` loads with `Assets.backgroundLoad`, `bundle` loads with `Assets.backgroundLoadBundle`.
        list of URL/path/alias = the list of URLs/paths of the images (or other assets), or of the bundle names, you want to load. If you initialized the <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">asset matrix</DynamicLink>, you can use an asset alias instead of a URL. Note: to write `https://` in ***ink*** you must escape the slashes as `https:\/\/` because `//` is treated as a comment in ***ink***.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # lazyload bundle main_menu start
    # load assets eggHead flowerTop my_video
    # show image eggHead
    # show image flowerTop
    # show video my_video
    # pause
    -> start
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```ts title="src/assets/index.ts"
import generatedManifestJson from "@/assets/manifest.gen.json";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        ...generatedManifestJson.bundles,
        {
            name: "main_menu",
            assets: [
                {
                    alias: "background_main_menu",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/main-menu.png",
                },
            ],
        },
        {
            name: "start",
            assets: [
                {
                    alias: "bg01-hallway",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/bg01-hallway.webp",
                },
            ],
        },
        {
            name: "images",
            assets: [
                {
                    alias: "eggHead",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/images/eggHead.png",
                },
                {
                    alias: "flowerTop",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/images/flowerTop.png",
                },
            ],
        },
    ],
};
```


# Canvas (WebGL/WebGPU) (/ink/canvas)





The ***ink* + Pixi’VN integration** introduces a "# script" that allows you to show, edit, remove, and animate a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink>. To do this, you need to use the following syntax:

```ink title="ink"
# {operation} {component type} {alias} {parameters}
```

* `#`: is the hashtag symbol to identify a hashtag command.
* `operation`: the operation to perform. Currently supported:
  * `show`: Show a canvas component. (Read more [here](#show))
  * `edit`: Edit a canvas component. (Read more [here](#edit))
  * `remove`: Remove a canvas component. (Read more [here](#remove))
  * `pause`: Pause a canvas component. (Read more [here](#pause))
  * `resume`: Resume a canvas component. (Read more [here](#resume))
* `component type`: the component type. Available types:
  * <DynamicLink href="/start/canvas-image">
      `image`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-image-container">
      `imagecontainer`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-video">
      `video`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-text">
      `text`
    </DynamicLink>
* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component. Use double quotes if the alias contains spaces.
* `parameters&#x60; (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`).

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # show image eggHead x 20 y 20
    # show image flowerTop x 220 y 20 with dissolve
    # show image helmlok x 20 y 220 with movein
    # show image skully x 220 y 220 with zoomin
    # pause
    # move eggHead x 300 y 0
    # rotate flowerTop
    # edit image helmlok alpha 0.5
    # shake skully
    # pause
    # remove image eggHead
    # remove image flowerTop with dissolve duration 2
    # remove image helmlok with moveout
    # remove image skully with zoomout
    # pause
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "eggHead",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                    {
                        alias: "flowerTop",
                        src: "https://pixijs.com/assets/flowerTop.png",
                    },
                    {
                        alias: "helmlok",
                        src: "https://pixijs.com/assets/helmlok.png",
                    },
                    {
                        alias: "skully",
                        src: "https://pixijs.com/assets/skully.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CanvasExample />

## Components functions [#components-functions]

### Show [#show]

You can use the `show` to show a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink&#x3E; in &#x2A;**ink***.

Is raccomended to <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">initialize the asset matrix at project start</DynamicLink> to use the alias of texture in `source`. To do this, you need to use the following syntax:

```ink title="ink"
# show {component type} {alias} {source} {parameters}
```

<CalloutContainer type="info">
  <CalloutDescription>
    To include `https://&#x60; in an ***ink* script** you must escape the slashes like `https:\/\/` because `//&#x60; is treated as a comment in &#x2A;**ink***.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutDescription>
    If you initialize the <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">asset matrix</DynamicLink> at project start, you can use the asset alias as the `source` parameter.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutDescription>
    If omitting the `source` parameter, it defaults to the `alias`.
  </CalloutDescription>
</CalloutContainer>

* `component type`: the component type. Available types:
  * <DynamicLink href="/start/canvas-image">
      `image`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-image-container">
      `imagecontainer`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-video">
      `video`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-text">
      `text`
    </DynamicLink>
* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component. Use double quotes if the alias contains spaces.
* `source` (Optional): meaning varies by component:
  * `image` and `video`: URL or asset alias for the texture.
  * `text`: the text to display.
  * `imagecontainer`: a list of texture aliases/URLs (e.g. `[url1 url2 url3]`).
* `parameters&#x60; (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). Valid parameters vary by component:
  * `image` and `video`: [`PixiJS.Sprite`](https://pixijs.download/release/docs/scene.Sprite.html) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `text`: [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/text) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `imagecontainer`: [`PixiJS.Container`](https://pixijs.com/8.x/guides/components/containers) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.

<Accordions>
  <Accordion title="example" id="example">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show image eggHead
        # show image "eggHead 2" eggHead xAlign 1 yAlign 1
        # show image flowerTop xAlign 0 yAlign 1 visible true cursor "pointer" alpha 0.5
        # show video my_video xAlign 1 yAlign 0
        # show text hello "Hello, this is a text" xAlign 0.5 yAlign 0.5 style \\\{ "fill": "red", "fontSize": 30 \\\}
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "eggHead",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flowerTop",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "my_video",
                            src: "https://pixijs.com/assets/video.mp4",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ShowComponentExample />
  </Accordion>

  <Accordion title="Example with imagecontainer" id="example-imagecontainer">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/defineAssets.ts">
          utils/defineAssets.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show imagecontainer james [m01-body m01-eyes m01-mouth] xAlign 0.5 yAlign 1
        # show imagecontainer sly [fm01-body fm01-eyes fm01-mouth] xAlign 0.2 yAlign 1 with movein
        # show imagecontainer steph [fm02-body fm02-eyes fm02-mouth] xAlign 0.8 yAlign 1 with dissolve
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/defineAssets.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "fm01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-body.webp",
                        },
                        {
                            alias: "fm01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-smile.webp",
                        },
                        {
                            alias: "fm01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-smile00.webp",
                        },
                        {
                            alias: "fm02-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-body.webp",
                        },
                        {
                            alias: "fm02-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-smile.webp",
                        },
                        {
                            alias: "fm02-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-smile00.webp",
                        },
                        {
                            alias: "m01-body",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                        },
                        {
                            alias: "m01-eyes",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                        },
                        {
                            alias: "m01-mouth",
                            src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ShowContainerExample />
  </Accordion>

  <Accordion title="Show with transition" id="show-with-transition">
    If you want to show the canvas component with a <DynamicLink href="/start/canvas-transition">transition</DynamicLink>, you can add into the parameters the `with {transition type}`.

    ```ink title="ink"
    # show {component type} {alias} {source} {parameters} with {transition type} {transition parameters}
    ```

    * `transition type` (Optional): the available transitions are:
      * `dissolve`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#dissolve-transition">dissolve transition</DynamicLink>.
      * `fade`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#fade-transition">fade transition</DynamicLink>.
      * `movein`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#move-inout-transition">movein transition</DynamicLink>.
      * `zoomin`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#zoom-inout-transition">zoomin transition</DynamicLink>.
      * `pushin`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#push-inout-transition">pushin transition</DynamicLink>.
    * `transition parameters` (Optional): a space-separated list of property/value pairs. Corresponds to the `options&#x60; parameter of their Javascript counterpart. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). You can add all the [`motion` options](https://motion.dev/docs/animate#options) and additional parameters you would use in JS/TS.

    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show eggHead with dissolve duration 3
        temp durationVar = 3
        # show eggHead eggHead2 with fade duration {durationVar}
        # show flowerTop x 20 y 30 with movein direction left
        # show helmlok x 20 y 30 with zoomin
        # show skully x 20 y 30 with pushin
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "eggHead",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                        {
                            alias: "flowerTop",
                            src: "https://pixijs.com/assets/flowerTop.png",
                        },
                        {
                            alias: "my_video",
                            src: "https://pixijs.com/assets/video.mp4",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

### Edit [#edit]

You can use the `edit` to edit a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink&#x3E; in &#x2A;**ink***. To do this, you need to use the following syntax:

```ink title="ink"
# edit {component type} {alias} {parameters}
```

* `component type`: the component type. Available types:
  * <DynamicLink href="/start/canvas-image">
      `image`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-image-container">
      `imagecontainer`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-video">
      `video`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-text">
      `text`
    </DynamicLink>
* `parameters&#x60; (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). Valid parameters vary by component:
  * `image` and `video`: [`PixiJS.Sprite`](https://pixijs.download/release/docs/scene.Sprite.html) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `text`: [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/text) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `imagecontainer`: [`PixiJS.Container`](https://pixijs.com/8.x/guides/components/containers) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.

```ink title="ink"
# edit image bg position \{ "x": 20, "y": 30 \} visible true cursor "pointer" alpha 0.5
```

### Remove [#remove]

You can use the `remove` to remove a <DynamicLink href="/start/canvas-components">canvas component</DynamicLink&#x3E; in &#x2A;**ink***. To do this, you need to use the following syntax:

```ink title="ink"
# remove {component type} {alias}
```

* `component type`: the component type. Available types:
  * <DynamicLink href="/start/canvas-image">
      `image`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-image-container">
      `imagecontainer`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-video">
      `video`
    </DynamicLink>
  * <DynamicLink href="/start/canvas-text">
      `text`
    </DynamicLink>
* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component. Use double quotes if the alias contains spaces.

```ink title="ink"
# remove image bg
# remove image "bg 2"
```

<Accordions>
  <Accordion title="Remove with transition" id="remove-with-transition">
    If you want to remove the canvas component with a <DynamicLink href="/start/canvas-transition">transition</DynamicLink>, you can add after the alias of the canvas component `with {transition type}`.

    ```ink title="ink"
    # remove {component type} {alias} with {transition type} {transition parameters}
    ```

    * `transition type` (Optional): the available transitions are:
      * `dissolve`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#dissolve-transition">dissolve transition</DynamicLink>.
      * `fade`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#fade-transition">fade transition</DynamicLink>.
      * `movein`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#move-inout-transition">movein transition</DynamicLink>.
      * `zoomin`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#zoom-inout-transition">zoomin transition</DynamicLink>.
      * `pushin`: The canvas component appears with a <DynamicLink href="/start/canvas-transition#push-inout-transition">pushin transition</DynamicLink>.
    * `transition parameters` (Optional): a space-separated list of property/value pairs. Corresponds to the `options&#x60; parameter of their Javascript counterpart. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). You can add all the [`motion` options](https://motion.dev/docs/animate#options) and additional parameters you would use in JS/TS.

    ```ink title="ink"
    # remove image bg with dissolve duration 3
    temp durationVar = 3
    # remove image bg with fade duration {durationVar}
    # remove image bg with moveout
    # remove image bg with zoomout
    # remove image bg with pushout
    ```
  </Accordion>
</Accordions>

### Pause and resume [#pause-and-resume]

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # show video my_video
    Video started
    # pause video my_video
    Video
    Video paused
    # resume video my_video
    Video resumed
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "my_video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Sandbox template="p3qgjq" entry="/src/ink/start.ink,/src/utils/assets-utility.ts" />

<Accordions>
  <Accordion title="pause" id="pause">
    To pause a video in &#x2A;**ink***, you can use `pause`. To do this, you need to use the following syntax:

    ```ink title="ink"
    # pause video {alias}
    ```

    ```ink title="ink"
    # pause video bg
    # pause video "bg 2"
    ```
  </Accordion>

  <Accordion title="resume" id="resume">
    To resume a video in &#x2A;**ink***, you can use `resume`. To do this, you need to use the following syntax:

    ```ink title="ink"
    # resume video {alias}
    ```

    ```ink title="ink"
    # resume video bg
    # resume video "bg 2"
    ```
  </Accordion>
</Accordions>

## Animate [#animate]

You can use the `animate` to use the <DynamicLink href="/start/canvas-motion">animations</DynamicLink&#x3E; in &#x2A;**ink***. To do this, you need to use the following syntax:

```ink title="ink"
# animate {alias} {keyframes} options {parameters}
```

* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component. Use double quotes if the alias contains spaces.
* `keyframes&#x60;: a space-separated list of property/value pairs representing the properties to animate and the values to reach. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). Valid parameters vary by component:
  * `image` and `video`: [`PixiJS.Sprite`](https://pixijs.com/8.x/guides/components/sprites) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `text`: [`PixiJS.Text`](https://pixijs.com/8.x/guides/components/text) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
  * `imagecontainer`: [`PixiJS.Container`](https://pixijs.com/8.x/guides/components/containers) and <DynamicLink href="/start/canvas-position">`properties for positioning`</DynamicLink> properties.
* `parameters` (Optional): a space-separated list of property/value pairs. Corresponds to the `options&#x60; parameter of their Javascript counterpart. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for &#x2A;**ink*** (e.g. `\{ "placeholder": "Enter your name", "maxLength": 20 \}`). You can add all the [`motion` options](https://motion.dev/docs/animate#options) and additional parameters you would use in JS/TS.

Here are some examples:

<Accordions>
  <Accordion title="Move" id="move">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show image alien
        # animate alien xAlign 1 yAlign 0 options ease "easeOut"
        # pause
        # animate alien xAlign 1 yAlign 1 options ease "backOut"
        # pause
        # animate alien xAlign 0 yAlign 1 options ease "circIn"
        # pause
        # animate alien xAlign 0 yAlign 0 options ease "linear"
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Rotate" id="rotate">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show alien
        # animate alien angle 360 options duration 1 type "spring" repeat Infinity repeatDelay 0.2
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Fade" id="fade">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show alien
        # animate alien alpha 0 options ease "linear" duration 1
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Zoom" id="zoom">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show alien
        # animate alien scaleX 0 scaleY 0 options ease "circInOut" duration 1
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Mirror" id="mirror">
    <CodeBlockTabs defaultValue="ink/start.ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="assets/manifest.ts">
          assets/manifest.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show alien
        # animate alien scaleX -1 options duration 1
        # pause
        # animate alien scaleX 1 options duration 1
        # pause
        -> DONE
        ```
      </CodeBlockTab>

      <CodeBlockTab value="assets/manifest.ts">
        ```ts
        import { AssetsManifest } from "@drincs/pixi-vn";

        /**
         * Manifest for the assets used in the game.
         * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
         */
        const manifest: AssetsManifest = {
            bundles: [
                {
                    name: "start",
                    assets: [
                        {
                            alias: "alien",
                            src: "https://pixijs.com/assets/eggHead.png",
                        },
                    ],
                },
            ],
        };
        export default manifest;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Characters (/ink/character)





<CalloutContainer type="info">
  <CalloutDescription>
    Before to read this section, it is recommended to read <DynamicLink href="/start/character#initialize">how to create and use characters in Pixi’VN</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

## Use [#use]

### Associate a character with a dialogue [#associate-a-character-with-a-dialogue]

You can associate a character with a dialogue in &#x2A;**ink***. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    mc: Hello
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    <character_id>: <text>

    where:
        character_id = character identifier
        text = any text message
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/characters.ts">
      values/characters.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    mc: Hello, I'm Liam.
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/characters.ts">
    ```ts
    import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

    export const mc = new CharacterBaseModel("mc", {
        name: "Liam",
    });

    RegisteredCharacters.add(mc);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CharacterDialogueExample />

### Use character name in dialogues text [#use-character-name-in-dialogues-text]

You can use the character name in dialogues. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    Hello, [mc].
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    [<character_id>]

    where:
        character_id = character identifier
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/characters.ts">
      values/characters.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    Hello, [mc].
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/characters.ts">
    ```ts
    import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

    export const mc = new CharacterBaseModel("mc", {
        name: "Liam",
    });

    RegisteredCharacters.add(mc);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Implementation" id="replace-implementation">
    To use this syntax, you need to register a <DynamicLink href="/ink/replacement">text replace</DynamicLink> that replaces the character id with the character's name.

    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, this text replace is already included.
      </CalloutDescription>
    </CalloutContainer>

    For example, you can add the following text replace:

    ```ts title="content/ink/text-replaces.ts"
    import { TextReplaces } from "@drincs/pixi-vn-ink";
    import { RegisteredCharacters } from "@drincs/pixi-vn/characters";

    TextReplaces.add((key) => RegisteredCharacters.get(key)?.name, {
        name: "character name",
        validation: "characterId",
        type: "after-translation",
        i18nInterpolation: true,
        description:
            "Replaces a character ID with the character's name in the game.",
    });
    ```
  </Accordion>
</Accordions>

<CharacterDialogueTextExample />

## Edit [#edit]

You can edit a character's information in &#x2A;**ink***, for example, you can change the character's name. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # rename mc Liam
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # rename <character_id> <new_name>

    where:
        character_id = character identifier
        new_name = the new name for the character
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/characters.ts">
      values/characters.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    mc: Hello, I'm [mc].
    # request input string
    mc: My name is:
    # rename mc {_input_value_}
    mc: My name is [mc]
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/characters.ts">
    ```ts
    import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

    export const mc = new CharacterBaseModel("mc", {
        name: "Liam",
    });

    RegisteredCharacters.add(mc);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Implementation" id="rename-implementation">
    To use this syntax, you need to register a <DynamicLink href="/ink/hashtag">hashtag command</DynamicLink> that renames the character.

    <CalloutContainer type="info">
      <CalloutTitle>
        Templates
      </CalloutTitle>

      <CalloutDescription>
        In all templates, this hashtag command is already included.
      </CalloutDescription>
    </CalloutContainer>

    For example, you can add the following hashtag command:

    ```ts title="content/ink/hashtag-commands.ts"
    import { characterIdsEnum } from "@/pixi-vn.keys.gen";
    import { HashtagCommands } from "@drincs/pixi-vn-ink";
    import { RegisteredCharacters } from "@drincs/pixi-vn/characters";
    import zod from "zod";

    HashtagCommands.add(
        async (script) => {
            const character = RegisteredCharacters.get(script[1]);
            if (character) {
                character.name = script[2];
            }
            return true;
        },
        {
            name: "character rename",
            description: `Renames a character in the game.

    \`\`\`ink
    # rename <characterId> <newName>
    \`\`\``,
            validation: zod.tuple([
                zod.literal("rename"),
                zod.enum(characterIdsEnum),
                zod.string(),
            ]),
        },
    );
    ```
  </Accordion>
</Accordions>

<CharacterEditExample />

## Character emotions [#character-emotions]

You can use the <DynamicLink href="/start/character#character-emotions">character emotions</DynamicLink&#x3E; in &#x2A;**ink***. To do this you just need to use a special ID composed of the character id, the `@` separator, and the emotion:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    mc@happy: Hi, I'm Liam. I'm very happy today.
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    <character_id>@<emotion>: <text>

    where:
        character_id = character identifier
        emotion = the emotion defined in JavaScript/TypeScript
        text = any text message
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/characters.ts">
      values/characters.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    mc@happy: Hi, I'm Liam. I'm very happy today.
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/characters.ts">
    ```ts
    import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

    export const mc = new CharacterBaseModel("mc", {
        name: "Liam",
    });

    export const mcHappy = new CharacterBaseModel(
        { id: "mc", emotion: "happy" },
        {
            name: "Liam happy",
        },
    );

    RegisteredCharacters.add([mc, mcHappy]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CharacterEmotionsExample />


# Choice menus (/ink/choices)



<CalloutContainer type="info">
  <CalloutDescription>
    The ***ink* + Pixi’VN integration** supports native *ink* choices without introducing new choice types. For full details on choice syntax and behavior, refer to the [official ink documentation](https://www.inklestudios.com/ink/).
  </CalloutDescription>
</CalloutContainer>

You can ask the player to make a choice in *ink* using a list of `*` or `+` bullets, followed by the choice text. The choice text is displayed to the player and they select one option to continue the story.

* `*` indicates a choice that can only be made once.
* `+` indicates a choice that can be made multiple times (sticky choice).

```ink title="ink/start.ink"
=== start ===
* Go to Paris
  You decide to visit Paris. -> visit_paris
+ Go to London -> visit_london
* Stay at home
  You decide to stay at home. -> DONE
```

## Suppressing choice text [#suppressing-choice-text]

By default, the text of a chosen option is printed again in the output. If the visible choice text is given in square brackets, that text is shown only in the choice menu and not printed in the subsequent output.

```ink title="ink/start.ink"
=== start ===
Hello world!
* [Hello back!]
 Nice to hear from you!
```

The square brackets split the option content: what appears before is printed in both the menu and the output; what is inside the brackets appears only in the menu; what follows appears only in the output. This is useful for dialogue choices:

```ink title="ink/start.ink"
=== start ===
"What's that?" my master asked.
* "I am somewhat tired[."]," I repeated.
 "Really," he responded. "How deleterious."
```

## Varying choices [#varying-choices]

<Accordions>
  <Accordion title="Fallback choices" id="fallback-choices">
    Fallback choices are never shown to the player but are automatically chosen by the engine if no other options are available.

    A fallback choice is simply a choice without visible choice text:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        * -> out_of_options
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        * -> <knot_name>

        where:
            knot_name = the name of the knot to jump to when no other choice is available
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    For example:

    ```ink title="ink/start.ink"
    === start ===
     You search desperately for a friendly face in the crowd.
     * The woman in the hat[?] pushes you roughly aside. -> find_help
     * The man with the briefcase[?] looks disgusted as you stumble past him. -> find_help
     * -> // fallback
      But it is too late: you collapse onto the station platform. This is the end.
      -> END
    ```
  </Accordion>

  <Accordion title="Conditional choices" id="conditional-choices">
    You can enable or disable choices with conditions. The simplest test is whether the player has previously visited a particular `knot` or `stitch`.

    ```ink title="ink"
    * { not visit_paris }  [Go to Paris] -> visit_paris
    + { visit_paris }      [Return to Paris] -> visit_paris
    * { visit_paris.met_estelle } [Telephone Mme Estelle] -> phone_estelle
    ```

    Note: the test `knot_name` is true if any `stitch` inside that knot has been visited. Conditionals do not override the once-only behaviour of `*` options — use `+` for repeatable options.
  </Accordion>
</Accordions>


# Functions (/ink/functions)



<Callout type="warning">
  It is preferable to use <DynamicLink href="/ink/hashtag">hashtag commands</DynamicLink> to add custom functionality to your game, instead of defining custom functions. Hashtag commands are more flexible and integrate better with the game engine.
</Callout>

The ***ink* + Pixi’VN integration*&#x2A; allows the use of custom functions, but unlike &#x2A;**native ink***, these functions are defined in JavaScript and not in *ink*.

In fact, if you define a function in *ink*, it will be ignored by Pixi’VN. For example, the following function will have no effect:

```ink title="ink"
=== function myfunction(x) === // ❌ This will be ignored  [!code warning]
~ return x * 2 // ❌ This will be ignored  [!code warning]
```

However, you can use the functions defined in <DynamicLink href="/start/labels#steplabelprops">`StepLabelProps`</DynamicLink>.

**Warning**: It is important to note that functions used in *ink* cannot have optional parameters.

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pixi-vn.d.ts">
      pixi-vn.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    Navigate to main menu screen
    ~ navigate("/") // [!code focus]
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pixi-vn.d.ts">
    ```ts
    import { narration } from '@drincs/pixi-vn'

    declare module '@drincs/pixi-vn' {
        interface StepLabelProps {
            navigate: (route: string) => void,
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Custom hashtag command (/ink/hashtag)



***ink*** gives the ability to use the `#` character to define custom hashtag commands (or *tags*). Pixi’VN uses this feature to add custom functionality to the ink script, for example, to interact with the canvas.

Pixi’VN gives the developer the ability to intercept the event that parses the scripts # to add custom functionality. This is done through the `HashtagCommands.add` function.

The `HashtagCommands.add` function receives a callback function that will be called whenever a hashtag command is found in the ink script. The callback function returns a boolean or a string. The return value will be used to determine if the script was processed.

* If it is not returned or returns `false`, the script will be processed by the default functionality of Pixi’VN.
* If it returns `true`, the script will not be processed by the default functionality of Pixi’VN.
* If it returns a string, the string will be used as the new hashtag command. For example, if you want to add a feature that shows the image linked to a character `# show character alice xAlign 0.8 yAlign 1 with dissolve`, you can return `# show imagecontainer alice [alice-body alice-eyes alice-mouth] xAlign 0.8 yAlign 1 with dissolve` for leverage the <DynamicLink href="/ink/canvas#show-a-image-container-in-ink">existing functionality to add a container</DynamicLink>.

The callback function receives two parameters:

* `script`: an array with the hashtag command split by spaces. For add a space in a string, you need to use `""`. For example, the Hashtag-Script `# command "Hello World"` will be split into `["command", "Hello World"]`.
* `convertListStringToObj`: a function that receives an array of strings and returns an object. This function is used to convert a list of strings into an object. For example, the array `["prop1", "value 1", "prop2", "value 2"]` will be converted to `{prop1: "value 1", prop2: "value 2"}`.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { HashtagCommands } from '@drincs/pixi-vn-ink'

    HashtagCommands.add((script, convertListStringToObj) => {
        // script: ["navigate", "scene_name", "relative", "path"]
        if (script[0] === "navigate" && script.length > 1) {
            let prop = undefined
            if (script.length > 2) {
                // prop: {relative: "path"}
                prop = convertListStringToObj(script.slice(2))
            }
            navigateTo(script[1], prop)
            return true
        }
        return false
    })
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # navigate /game relative path
    -> DONE
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# ink (Inkle) integration (/ink)





Pixi’VN lets you write interactive narratives using &#x2A;**ink***, a scripting language designed for branching stories.

<Accordions>
  <Accordion title="What is _ink_?" id="what-is-ink">
    ***ink*** is a simple scripting language for interactive stories, used in games like 80 Days, Heaven's Vault, and Sorcery! Learn more on the [*ink* website](https://www.inklestudios.com/ink/).
  </Accordion>

  <Accordion title="Why use _ink_?" id="why-use-ink">
    Writing narrative directly in **JavaScript/TypeScript*&#x2A; can be slow and complex, especially for beginners. &#x2A;**ink*** is much easier to learn and write.

    New developers can start with an <DynamicLink href="/start#project-initialization">*ink* template</DynamicLink>, then gradually learn JavaScript/TypeScript for advanced features.
  </Accordion>
</Accordions>

The ***ink* + Pixi’VN integration** uses [inkjs](https://github.com/inkle/inkjs) and [PixiVNJson](/jsdoc/pixi-vn-json&#x29; to parse ***ink* code*&#x2A; and generate JSON that Pixi’VN can interpret. This means JavaScript/TypeScript and &#x2A;**ink**&#x2A; share the same storage and canvas, and you can launch &#x2A;**ink*** `knots` (or `labels&#x60;) from JavaScript/TypeScript and vice versa. You get the best of both worlds: write narration in &#x2A;**ink***, and use JavaScript/TypeScript for minigames or advanced animations.

```ink title="ink/start.ink"
=== start ===
We arrived into London at 9.45pm exactly.

* "There is not a moment to lose!"[] I declared.
 -> hurry_outside

* "Monsieur, let us savour this moment!"[] I declared.
 My master clouted me firmly around the head and dragged me out of the door.
 -> dragged_outside

* [We hurried home] -> hurry_outside

=== hurry_outside ===
We hurried home to Savile Row -> as_fast_as_we_could

=== dragged_outside ===
He insisted that we hurried home to Savile Row
-> as_fast_as_we_could

=== as_fast_as_we_could ===
<> as fast as we could.
-> start
```

<InkExample />

## Installation [#installation]

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    Starting a new Pixi’VN project? Use a <DynamicLink href="/start#project-initialization">template</DynamicLink> that already includes *ink*.
  </CalloutDescription>
</CalloutContainer>

To install the *ink* package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="deno">
      deno
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```sh
    npm install @drincs/pixi-vn @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```sh
    yarn add @drincs/pixi-vn @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```sh
    pnpm add @drincs/pixi-vn @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```sh
    bun add @drincs/pixi-vn @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="deno">
    ```sh
    deno install npm:@drincs/pixi-vn npm:@drincs/pixi-vn-ink
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Initialize [#initialize]

After installing, use [`importInkText`](/jsdoc/pixi-vn-ink/index/functions/importInkText&#x29; to load your ***ink* script**:

```typescript title="main.ts"
import { importInkText } from '@drincs/pixi-vn-ink'

const inkText = `
=== start ===
Hello
-> END
`

importInkText([inkText, ...])
```

Now you can run an &#x2A;**ink* `knot`** (or `label`) using <DynamicLink href="/start/labels#run-a-label">Pixi’VN functions</DynamicLink>:

```typescript title="main.ts"
import { narration } from "@drincs/pixi-vn";

narration.call(`start`, {});
```

<Accordions>
  <Accordion title="Import text from .ink files" id="import-ink-files">
    <CalloutContainer type="info">
      <CalloutDescription>
        This guide uses [Vite](https://vitejs.dev/), but the same logic applies elsewhere.
      </CalloutDescription>
    </CalloutContainer>

    To import `.ink` files, you need to configure your project to handle them as text files.

    Below are the steps to do this:

    * Declare the `*.ink` module in `ink.d.ts`.
    * Add `.ink` to `assetsInclude` in `vite.config.ts`.
    * Import the file with `?raw` to get its text content.

    <CodeBlockTabs defaultValue="main.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="vite.config.ts">
          vite.config.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink.d.ts">
          ink.d.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="main.ts">
        ```ts
        import { importInkText } from '@drincs/pixi-vn-ink'
        import startLabel from './ink/start.ink?raw'

        importInkText([startLabel, ...])
        ```
      </CodeBlockTab>

      <CodeBlockTab value="vite.config.ts">
        ```ts
        export default defineConfig({
            // ...
            assetsInclude: ["**/*.ink"],
        });
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink.d.ts">
        ```ts
        declare module "*.ink" {
            const value: string;
            export default value;
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Vite.js plugin" id="vite-plugin">
    For a better developer experience, use the [`vitePluginInk`](https://pixi-vn.com/jsdoc/pixi-vn-ink/vite/functions/vitePluginInk):

    <CodeBlockTabs defaultValue="vite.config.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="vite.config.ts">
          vite.config.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="utils/ink-utility.ts">
          utils/ink-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="vite.config.ts">
        ```ts
        import { defineConfig } from "vite";
        import { vitePluginInk } from "@drincs/pixi-vn-ink/vite";
        export default defineConfig({
            // ...
            plugins: [
                // other plugins...
                vitePluginInk(),
            ],
        });
        ```
      </CodeBlockTab>

      <CodeBlockTab value="main.ts">
        ```ts
        import { setupInkHmrListener } from "@drincs/pixi-vn-ink/vite-listener";

        setupInkHmrListener();
        ```
      </CodeBlockTab>

      <CodeBlockTab value="utils/ink-utility.ts">
        ```ts
        async function getInkText() {
            const files = import.meta.glob<string>("../ink/*.ink", {
                eager: true,
                import: "default",
            });
            return await Promise.all(
                Object.values(files).map(async (importFile) => {
                    return importFile;
                }),
            );
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Enable base Hashtag Commands" id="base-hashtag-commands">
    Pixi’VN ships a set of built-in <DynamicLink href="/ink/hashtag">Hashtag Commands</DynamicLink> (the default `#` commands used to interact with the canvas, such as `# show`, `# moveIn`, etc.), but they are **not registered automatically**. Call [`addBaseHashtagCommands`](/jsdoc/pixi-vn-ink/index/functions/addBaseHashtagCommands) once during your app's setup to enable them.

    ```ts title="content/ink/hashtag-commands.ts"
    import { addBaseHashtagCommands } from "@drincs/pixi-vn-ink";

    addBaseHashtagCommands();
    ```
  </Accordion>
</Accordions>

## Upcoming features [#upcoming-features]

These features are in development.

\:::\[tip]

If you are interested, feel free to write in the chat below!

\:::

* `CHOICE_COUNT()`
* `TURNS()`
* `TURNS_SINCE()`
* `SEED_RANDOM()`
* `LIST_RANDOM()`
* `LIST_COUNT()`
* `LIST_INVERT()`
* `LIST_ALL()`
* `LIST_RANGE()`
* `LIST_MIN()`
* `LIST_MAX()`
* `LIST_VALUE()`

## Syntax ignored by Pixi’VN [#syntax-ignored-by-pixivn]

Some *ink&#x2A; syntax is ignored by Pixi’VN. You can use these in your ***ink* script** (e.g., for testing in Inky editor), but Pixi’VN will ignore them.

<Accordions>
  <Accordion title="INCLUDE" id="include">
    `INCLUDE` is an *ink* statement to include another *ink* file. In Pixi’VN, you should use [`importInkText`](/jsdoc/pixi-vn-ink/index/functions/importInkText) to load multiple *ink* files instead, so `INCLUDE` is ignored.
  </Accordion>

  <Accordion title="Function definitions" id="function-definitions">
    Function definitions are ignored by Pixi’VN, you can read more about this in the <DynamicLink href="/ink/functions">Functions</DynamicLink> page.
  </Accordion>

  <Accordion title="Narration outside the knots" id="narration-outside-the-knots">
    Narration outside the `knots` (or `labels`) is ignored, except for variables.

    For example:

    ```ink title="ink"
    VAR my_var = false // ✅ This will be handled (because it is a variable)
    Hello // ❌ This will be ignored  [!code warning]
    -> start // ❌ This will be ignored [!code warning]
    === start === // ✅ This will be handled
    My name is John // ✅ This will be handled
    -> DONE // ✅ This will be handled
    ```
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Differences between native *ink* and Pixi’VN *ink*" id="ink-differences">
    * **LIST entry access*&#x2A;: In native &#x2A;**ink*** you can reference a list entry either by its short name (e.g. `sword`) or by its qualified name (e.g. `items.sword`) and they are equivalent. In &#x2A;*Pixi’VN *ink*** you must **always** use the qualified form `items.sword`. Writing just `sword` resolves to a plain storage entry whose key is the string `"sword"` — it will **not** point to the list member. This applies to all `LIST` declarations.

    * Since "Threads" are not supported by pixi-vn, the `<-` symbol corresponds to <DynamicLink href="/ink/labels#call">calling a knot</DynamicLink>.

    * in this case:

      ```ink title="ink"
      { shuffle:
        -  2 of Diamonds.
          'You lose this time!' crowed the croupier.
      }
      ```

      **In native *ink***, you will see two different dialogues, the first one will be `2 of Diamonds.` and the second one will be `'You lose this time!' crowed the croupier.`.

      **In Pixi’VN *ink***, you will not see two different dialogues, but the following dialogue: `2 of Diamonds.\n\n'You lose this time!' crowed the croupier.`. In <DynamicLink href="/ink/markup#markdown-on-ink">Markdown</DynamicLink> it will be displayed like this:

      ```txt
      2 of Diamonds.
      'You lose this time!' crowed the croupier.
      ```

    * if a `weave` (in following example `shove`) is attached to a one time choice, and it is opened with `-> shove` it will not invalidate the one time choice. To invalidate it you will have to select the choice as usual.

      Here is an example:

      ```ink title="ink"
      -> start
      === start ===
      * [1] -> shove
      * (shove) [2] 2
      * {shove} [3] -> END
      -  -> start
      -> DONE
      ```

      In case you take choice `1`, the second time it will be opened `start`:

      * if you use &#x2A;*native *ink***, you will only be able to choose choice `3`. The choice `2` is hidden because being "one time" &#x2A;*native *ink*** will know that you have already made this decision with `-> shove`.
      * if you use &#x2A;*Pixi’VN *ink***, you will be able to choose choice `2` or `3`. The choice `2` is not hidden because &#x2A;*Pixi’VN *ink*** doesn't know that `shove` is paired with a choice.

      To get the same logic as `start` both in &#x2A;*native *ink*** and &#x2A;*Pixi’VN *ink*** you will have to write the following code:

      ```ink title="ink"
      -> start
      === start ===
      * [1] -> shove
      * (shove) {!shove} [2] 2
      * {shove} [3] -> END
      -  -> start
      -> DONE
      ```
  </Accordion>
</Accordions>


# Inky (/ink/inky)





<Callout title="VS Code" type="warn">
  If you are using VS Code, consider installing the [Ink extension](https://marketplace.visualstudio.com/items?itemName=drincs-productions.pixi-vn-ink-vscode) for syntax highlighting and basic support for ink files. It has a setting to put the engine, so you can set it to `pixi-vn` to avoid warnings for Pixi’VN-specific features.
</Callout>

**Inky** is the official editor for *ink* scripts, developed by Inkle (the creators of *ink*). Download it from [the official site](https://www.inklestudios.com/ink/).

<img alt="Inky" src="__img0" />

## Why? [#why]

Writing and testing your narrative in Inky is much faster than running your own web project. Inky gives you a clear overview of all branching paths and story logic.

<Callout type="info">
  Pixi’VN-specific features (such as character sprites, backgrounds, music, etc.) are ignored in Inky.
</Callout>

To use Inky, create a file named `main.ink` in your project and include the ink file you want to run. Then open `main.ink` in Inky.

```ink title="main.ink"
INCLUDE ink/start.ink
-> start
```


# Input prompt (/ink/input)





The ***ink* + Pixi’VN integration** introduces a "# script" that allows you to request an <DynamicLink href="/start/input">input prompt</DynamicLink> from the user. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # request input type string
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # request input [<parameters>]

    where:
        parameters (Optional) = a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Available `parameters` (all Optional): [`type`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonInputRequest#valuetype), [`default`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonInputRequest#defaultvalue).

<CalloutContainer type="info">
  <CalloutDescription>
    The entered value is saved in storage under the system key `_input_value_`, so you can reference `{ _input_value_ }` in your ink content.
  </CalloutDescription>
</CalloutContainer>

For example:

```ink title="ink/start.ink"
=== start ===
Hello,
# request input type string // [!code focus]
<>what is your name?
My name is { _input_value_ } // [!code focus]
# request input type number default 18 // [!code focus]
How old are you?
I am { _input_value_ } years old // [!code focus]
# request input type "html textarea" // [!code focus]
Describe who you are:
{ _input_value_ } // [!code focus]
Restart
-> DONE
```

<InputExample />


# Knots (/ink/labels)





<Accordions>
  <Accordion title="What is a `knot`?" id="what-is-a-knot">
    As explained in the [official documentation](https://www.inklestudios.com/ink/web-tutorial/), the story is comprised of multiple linked sections which we call `knots&#x60; in ***ink* terminology**. The start of a `knot&#x60; is indicated in &#x2A;**ink*** using at least two equals signs on the left hand side of the `knot`'s name, and optionally on the right too.

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        === london ===
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        === <knot_name> ===

        where:
            knot_name = the name of the knot
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Are there differences between `label` and `knot`?" id="label-vs-knot">
    No, they are the same thing. In Pixi’VN, when you create a `knot&#x60; with &#x2A;**ink***, a `label` will be created internally and saved in the registry.
  </Accordion>
</Accordions>

## Run a knot [#run-a-knot]

To run a `knot` you can use the following methods:

<Accordions>
  <Accordion title="Diverts `-> start` (jump a `label`)" id="jump">
    You can execute a `knot` using the Divert operator, which is represented by the `-> start` syntax. It corresponds to the <DynamicLink href="/start/labels#jump-to-a-label">`jump` functionality</DynamicLink> in the Pixi’VN library.

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        -> after
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        -> <knot_name>

        where:
            knot_name = the name of the knot to jump to
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    For example:

    ```ink title="ink/start.ink"
    === start ===
    Start
    -> after

    === after ===
    After
    End
    -> DONE
    ```

    <NativeJumpExample />
  </Accordion>

  <Accordion title="Tunnels `-> start ->` or Threads `<- start`  (call a `label`)" id="call">
    You can execute a `knot` using the Tunnels operator, which is represented by the `-> start ->` syntax. It corresponds to the <DynamicLink href="/start/labels#call-to-a-label">`call` functionality</DynamicLink> in the Pixi’VN library.

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        -> guard_dialogue ->
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        -> <knot_name> ->

        where:
            knot_name = the name of the knot to call
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Or, using the Threads syntax, write the `<-` symbol followed by the name of the `knot`:

    <CodeBlockTabs defaultValue="ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CLI">
          CLI
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ink">
        ```ink
        <- guard_dialogue
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CLI">
        ```txt
        <- <knot_name>

        where:
            knot_name = the name of the knot to call
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <CalloutContainer type="info">
      <CalloutTitle>
        Threads
      </CalloutTitle>

      <CalloutDescription>
        Unlike **native ink**, in **ink + Pixi’VN integration** "Threads" are not supported, so the `<-` symbol corresponds to calling a `knot` instead of being a "Thread" operator.
      </CalloutDescription>
    </CalloutContainer>

    <CalloutContainer type="info">
      <CalloutDescription>
        For simplicity, in **ink + Pixi’VN integration**, `->->` and `-> DONE` will correctly close the `label`, so they are equivalent.
      </CalloutDescription>
    </CalloutContainer>

    For example:

    ```ink title="ink/start.ink"
    VAR reputation = 0

    -> start
    === start ===
    You are in the square.

    * [Talk to the guard]
        -> guard_dialogue ->
        You return to the square.
        -> start
        You don't see this line because you are sent back to the city before.

    * {reputation >= 1} [Ask for a favor]
        The guard helps you.
        -> END

    === guard_dialogue ===
    The guard looks at you.

    * [Greet]
        "Hello citizen."
        ~ reputation += 1
    ->->

    * [Insult]
        "Hey you!"
        ~ reputation -= 1

    ->->
    ```

    <NativeCallExample />
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Parameters" id="parameters">
    A particularly useful form of temporary variable is a **parameter**. Any knot or stitch can receive a value as a parameter, which is treated as a local temporary variable inside that knot:

    ```ink title="ink/start.ink"
    === start ===
    *   [Accuse Hastings]
            -> accuse("Hastings")
    *   [Accuse Mrs Black]
            -> accuse("Claudia")
    *   [Accuse myself]
            -> accuse("myself")

    === accuse(who) ===
        "I accuse {who}!" Poirot declared.
        "Really?" Japp replied. "{who == "myself":You did it?|{who}?}"
        "And why not?" Poirot shot back.
    ```

    Parameters are the correct way to pass a temporary value from one knot or stitch into another, because ordinary `temp` variables are not accessible outside the stitch where they were declared.
  </Accordion>

  <Accordion title="Recursive knots with parameters" id="recursive-knots-with-parameters">
    Temporary variables (including parameters) are safe to use in recursive knots:

    ```ink title="ink/start.ink"
    -> add_one_to_one_hundred(0, 1)

    === add_one_to_one_hundred(total, x) ===
        ~ total = total + x
        { x == 100:
            -> finished(total)
        - else:
            -> add_one_to_one_hundred(total, x + 1)
        }

    === finished(total) ===
        "The result is {total}!" you announce.
        -> END
    ```
  </Accordion>

  <Accordion title="Sending divert targets as parameters" id="sending-divert-targets-as-parameters">
    Knot addresses can also be passed as parameters. Use `->` to indicate that a parameter is a divert target:

    ```ink title="ink/start.ink"
    === sleeping_in_hut ===
        You lie down and close your eyes.
        -> generic_sleep(-> waking_in_the_hut)

    === generic_sleep(-> waking) ===
        You sleep perchance to dream etc. etc.
        -> waking

    === waking_in_the_hut ===
        You get back to your feet, ready to continue your journey.
    ```
  </Accordion>
</Accordions>


# LIST (/ink/list)



<Callout type="info">
  You can read more about lists in ink on the [official documentation](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#part-5-advanced-state-tracking).
</Callout>

***ink*** provides a powerful system for tracking state via **lists*&#x2A;. A list in &#x2A;**ink*** is not an array — it is closer to an **enum** or a **boolean set** that can hold one or multiple values at the same time.

In the ***ink* + Pixi’VN integration**, both `LIST` declarations and `VAR` variables holding list values are stored in the <DynamicLink href="/start/storage">Pixi’VN storage</DynamicLink>.

## Define [#define]

A list is defined with the `LIST` keyword followed by its name and a comma-separated sequence of possible values.

```ink title="ink"
LIST items = sword, key, potion
```

`LIST` works like an **enum*&#x2A;: each entry is a named constant with an implicit numeric value (the first entry = 1, the second = 2, and so on). You can use these names in conditions and assignments — &#x2A;**ink*** handles the numeric comparison for you.

<Callout type="info">
  In **Pixi’VN storage**, the declaration above creates the following entries:

  * a list definition called `items` with numeric values `[1, 2, 3]`
  * `items.sword = 1`
  * `items.key = 2`
  * `items.potion = 3`

  The entries are stored under the **qualified name** `listName.entryName`, just like accessing a member of an enum via its namespace.
</Callout>

<Callout type="warning">
  **Pixi’VN vs. native ink — use the qualified name**

  In native &#x2A;**ink*** you can reference a list entry either by its short name (`sword`) or by its qualified name (`items.sword`) and they are equivalent.

  In **Pixi’VN*&#x2A; you must always use the qualified form &#x2A;*`items.sword`**. If you write just `sword`, Pixi’VN will look for a generic storage entry whose key is `"sword"` — it will **not** resolve to the list member. This is a common source of bugs when porting or reading ink scripts.
</Callout>

The `LIST` statement simultaneously defines the possible values (as named constants) and a variable (with the same name as the list) that holds the current state.

By default, none of the values are "active". You can make a value active from the start by wrapping it in brackets:

```ink title="ink"
LIST kettleState = cold, (boiling), recently_boiled
// the kettle starts boiling
```

### VAR with a list value [#var-with-a-list-value]

You can also create a variable that holds a list value using `VAR`:

```ink title="ink"
VAR inventory = ()
```

<Callout type="info">
  In **Pixi’VN storage**, the declaration above creates:

  * a list called `inventory` that is empty (or with elements if specified)

  For example, `VAR inventory = (sword, potion)` creates an `inventory` list that initially contains `sword` and `potion`.
</Callout>

You can use the same set of states in multiple variables:

```ink title="ink"
LIST daysOfTheWeek = Monday, Tuesday, Wednesday, Thursday, Friday
VAR today = daysOfTheWeek.Monday
VAR tomorrow = daysOfTheWeek.Tuesday
```

<Callout type="info">
  In **Pixi’VN storage**, the declaration above creates entries such as `daysOfTheWeek.Monday = 1`, `daysOfTheWeek.Tuesday = 2`, … Always use the qualified form `daysOfTheWeek.Monday` — not the bare `Monday` — when referencing an entry in &#x2A;*Pixi’VN *ink***.
</Callout>

## Set [#set]

Change the current value of a list variable using the `~` logic syntax:

```ink title="ink"
~ kettleState = kettleState.cold
~ kettleState = kettleState.boiling
```

For multi-valued lists, you can assign several values at once:

```ink title="ink"
~ DoctorsInSurgery = (DoctorsInSurgery.Adams, DoctorsInSurgery.Bernard)
```

Or clear the list entirely:

```ink title="ink"
~ DoctorsInSurgery = ()
```

### Adding and removing entries [#adding-and-removing-entries]

Use `+=` and `-=` to add or remove individual entries without touching the rest of the list:

```ink title="ink"
~ DoctorsInSurgery += DoctorsInSurgery.Adams
~ DoctorsInSurgery -= DoctorsInSurgery.Eamonn
~ DoctorsInSurgery += (DoctorsInSurgery.Eamonn, DoctorsInSurgery.Denver)
~ DoctorsInSurgery -= (DoctorsInSurgery.Adams, DoctorsInSurgery.Eamonn, DoctorsInSurgery.Denver)
```

Adding an entry that is already present, or removing one that isn't, does nothing — no error is produced.

### Step forward / backward [#step-forward--backward]

Because list values have an implicit numeric order, you can step through them with `++` and `--`:

```ink title="ink"
LIST PancakeState = ingredients_gathered, batter_mix, pan_hot, pancakes_tossed, ready_to_eat
~ PancakeState++   // advances to the next state
```

## Get / Query [#get--query]

### Reading the current value [#reading-the-current-value]

Print the current value of a list variable using the standard `{...}` syntax — it outputs the value's name:

```ink title="ink"
LIST volumeLevel = off, quiet, medium, loud, deafening
VAR lecturersVolume = volumeLevel.quiet

The lecturer's voice becomes {lecturersVolume}.
```

### Testing a single value [#testing-a-single-value]

```ink title="ink"
{ kettleState == kettleState.cold:
    The kettle is cool to the touch.
- else:
    The outside of the kettle is very warm!
}
```

### Testing for containment (`has` / `?`) [#testing-for-containment-has--]

Use `has` (or `?`) to check whether a value is present in a multi-valued list:

```ink title="ink"
{ DoctorsInSurgery has DoctorsInSurgery.Eamonn:
    Dr Eamonn is polishing his glasses.
}

{ DoctorsInSurgery ? (DoctorsInSurgery.Adams, DoctorsInSurgery.Bernard):
    Dr Adams and Dr Bernard are having a hushed argument in one corner.
}
```

Use `hasnt` (or `!?`) to negate:

```ink title="ink"
{ DoctorsInSurgery !? DoctorsInSurgery.Eamonn:
    Dr Eamonn has left.
}
```

### Testing for emptiness [#testing-for-emptiness]

A list evaluates to `true` unless it is empty:

```ink title="ink"
{ DoctorsInSurgery: The surgery is open today. | Everyone has gone home. }
```

### Comparison operators [#comparison-operators]

List values carry numeric weights (first value = 1, second = 2, …), so you can compare them:

```ink title="ink"
{ lecturersVolume < volumeLevel.deafening:
    ~ lecturersVolume++
}
```

Exact equality (`==`) on a multi-valued list means **set equality** — both lists must contain exactly the same entries:

```ink title="ink"
{ DoctorsInSurgery == (DoctorsInSurgery.Adams, DoctorsInSurgery.Bernard):
    Dr Adams and Dr Bernard are having a loud argument.
}
```

## List functions [#list-functions]

***ink*** provides several built-in functions for working with lists.

| Function                     | Description                                |
| ---------------------------- | ------------------------------------------ |
| `LIST_COUNT(list)`           | Number of active entries                   |
| `LIST_MIN(list)`             | Lowest active entry                        |
| `LIST_MAX(list)`             | Highest active entry                       |
| `LIST_RANDOM(list)`          | A random active entry                      |
| `LIST_ALL(list)`             | All possible entries (active and inactive) |
| `LIST_VALUE(entry)`          | Numeric value of an entry (first = 1)      |
| `LIST_INVERT(list)`          | Returns all entries *not* currently active |
| `LIST_RANGE(list, min, max)` | Slice of the full list between two values  |

```ink title="ink"
LIST DoctorsInSurgery = (Adams), Bernard, (Cartwright), Denver, Eamonn

{LIST_COUNT(DoctorsInSurgery)}   // "2"
{LIST_MIN(DoctorsInSurgery)}     // "Adams"
{LIST_MAX(DoctorsInSurgery)}     // "Cartwright"
{LIST_RANDOM(DoctorsInSurgery)}  // "Adams" or "Cartwright"
{LIST_ALL(DoctorsInSurgery)}     // "Adams, Bernard, Cartwright, Denver, Eamonn"
```

### Converting between values and numbers [#converting-between-values-and-numbers]

```ink title="ink"
LIST volumeLevel = off, quiet, medium, loud, deafening

// number → name: LIST_VALUE returns the integer (first entry = 1)
The lecturer has {LIST_VALUE(volumeLevel.deafening) - LIST_VALUE(lecturersVolume)} notches left.

// number → value: use the list name as a function
LIST Numbers = one, two, three
VAR score = Numbers.one
~ score = Numbers(2)  // score is now "two"
```

### Custom numeric values [#custom-numeric-values]

By default values are numbered 1, 2, 3, … You can assign your own:

```ink title="ink"
LIST primeNumbers = two = 2, three = 3, five = 5
```

## Usage patterns [#usage-patterns]

<Accordions>
  <Accordion title="ink_list_flags" id="flags">
    Track game events as flags — add an entry when it happens, test it later:

    ```ink title="ink"
    LIST GameEvents = foundSword, openedCasket, metGorgon

    ~ GameEvents += GameEvents.metGorgon

    { GameEvents ? GameEvents.openedCasket: You remember opening the casket. }
    { GameEvents ? (GameEvents.foundSword, GameEvents.metGorgon): You are well prepared. }
    ```
  </Accordion>

  <Accordion title="ink_list_state_machine" id="state-machine">
    Use a list as a state machine — each entry is a state, advance with `++`:

    ```ink title="ink"
    LIST PancakeState = ingredients_gathered, batter_mix, pan_hot, pancakes_tossed, ready_to_eat

    { PancakeState == PancakeState.batter_mix: The batter is ready. }
    { PancakeState < PancakeState.ready_to_eat: Keep cooking! }
    ~ PancakeState++
    ```
  </Accordion>

  <Accordion title="ink_list_properties" id="properties">
    Model objects with multiple independent properties using a multi-list variable:

    ```ink title="ink"
    LIST OnOffState = on, off
    LIST ChargeState = uncharged, charging, charged

    VAR PhoneState = (OnOffState.off, ChargeState.uncharged)

    * { PhoneState !? ChargeState.uncharged } [Plug in phone]
        ~ PhoneState -= LIST_ALL(ChargeState)
        ~ PhoneState += ChargeState.charging
        You plug the phone into charge.
    * { PhoneState ? (OnOffState.on, ChargeState.charged) } [Call my mother]
    ```
  </Accordion>

  <Accordion title="ink_list_multilist" id="multi-list">
    Variables can hold entries from multiple different lists, allowing you to model room contents or inventories:

    ```ink title="ink"
    LIST Characters = Alfred, Batman, Robin
    LIST Props = champagne_glass, newspaper

    VAR BallroomContents = (Characters.Alfred, Characters.Batman, Props.newspaper)
    VAR HallwayContents = (Characters.Robin, Props.champagne_glass)
    ```
  </Accordion>

  <Accordion title="ink_list_knowledge" id="knowledge-tracking">
    Track accumulated knowledge as a chain of facts:

    ```ink title="ink"
    LIST Facts = (Fogg_is_fairly_odd), first_name_phileas, (Fogg_is_English)

    { Facts ? Facts.Fogg_is_fairly_odd: I smiled politely. | I frowned. }
    { Facts ? (Facts.Fogg_is_English, Facts.Fogg_is_fairly_odd):
        'I know Englishmen are strange, but this is *incredible*!'
    }
    ```
  </Accordion>
</Accordions>

## Ambiguous names [#ambiguous-names]

If two lists share an entry name, qualify it with the list name:

```ink title="ink"
LIST colours = red, green, blue, purple
LIST moods = mad, happy, blue

VAR status = colours.blue  // must be explicit
```

## Reusing list types in multiple variables [#reusing-list-types-in-multiple-variables]

A `LIST` declaration defines both the set of possible values *and* a variable. You can create additional variables of the same "type" using `VAR`:

```ink title="ink"
LIST heatedWaterStates = cold, boiling, recently_boiled
VAR kettleState = heatedWaterStates.cold
VAR potState = heatedWaterStates.cold
```

Both `kettleState` and `potState` hold values drawn from `heatedWaterStates`.

## Intersection (`^`) [#intersection-]

Use `^` to find the overlap between two lists:

```ink title="ink"
LIST CoreValues = strength, courage, compassion, greed, nepotism, self_belief
VAR desiredValues = (CoreValues.strength, CoreValues.courage, CoreValues.compassion, CoreValues.self_belief)
VAR actualValues  = (CoreValues.greed, CoreValues.nepotism, CoreValues.self_belief)

{desiredValues ^ actualValues}  // prints "self_belief"
{ desiredValues ^ actualValues: The new president has at least one desirable quality. }
```


# Markup language and CSS (/ink/markup)





The ***ink* + Pixi’VN integration** provides some additional features to facilitate the use of components that introduce a <DynamicLink href="/start/markup-markdown">Markup</DynamicLink> in the text.

## New Lines [#new-lines]

To create a new line, you can use the escape character `\\n`.

<Callout>
  In our case, since we use Markdown to display the line break, we will need two `\\n\\n`.
</Callout>

For example:

```ink title="ink"
=== start ===
Hello, this is a test. \\n\\n This is a new line.
```

<NewLinesExample />

## Markdown [#markdown]

On Pixi’VN it is recommended to use Markdown to add style to your text. If you have <DynamicLink href="/start/markup-markdown">implemented Markdown in your project</DynamicLink&#x3E; then you will be able to use Markdown syntax to style your text in &#x2A;**ink***.

To do this you need to keep in mind that many symbols of Markdown syntax are also used by ***ink* syntax**, such as: `#`, `*`, `/`, `~`, `-`, `|` etc. To avoid conflicts you can use the escape character `\` before the Markdown symbol.

For example:

```ink title="ink"
Hello, this is some *italic* text and this is some **bold** text.
```

<MarkdownExample />

<Accordions>
  <Accordion title="Advanced case: escaping every Markdown symbol" id="advanced-markdown-escaping">
    <CodeBlockTabs defaultValue="On ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="On ink">
          On ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="On Markdown">
          On Markdown
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="On ink">
        ```ink
        \# Markdown Test \\n<>
        Hello, this is a test of the markdown parser. Pixi’VN does not manage markdown, but you can implement a markdown parser to display text with markdown syntax. \\n<>
        For example in React, you can use the library [react-markdown](https:\/\/www.npmjs.com/package/react-markdown). \\n<>
        \#\# Bold Text \\n<>
        \**This is bold text.** \\n<>
        \#\# Italic Text \\n<>
        \*This is italic text.* \\n<>
        \#\# Delete Text \\n<>
        \~~This is deleted text.~~ \\n<>
        \#\# Link Test \\n<>
        [Link to Google](https:\/\/www.google.com) \\n<>
        \#\# H2 Test \\n<>
        \#\#\# H3 Test \\n<>
        \#\#\#\# H4 Test \\n<>
        \#\# Code Test \\n<>
        \`Hello World\` \\n<>
        \`\`\`js \\n<>
        console.log("Hello World") \\n<>
        \`\`\` \\n<>
        \#\# List Test \\n<>
        \- Item 1 \\n<>
        \* Item 2 \\n<>
        \- [x] Item 3 \\n<>
        \#\# Table Test \\n<>
        \| Header 1 \| Header 2 \| \\n<>
        \| -------- \| -------- \| \\n<>
        \| Cell 1   \| Cell 2   \| \\n<>
        \#\# Separator Test \\n<>
        \*\*\* \\n<>
        Footer
        ```
      </CodeBlockTab>

      <CodeBlockTab value="On Markdown">
        ```markdown
        # Markdown Test

        Hello, this is a test of the markdown parser. Pixi’VN does not manage markdown, but you can implement a markdown parser to display text with markdown syntax.

        For example in React, you can use the library [react-markdown](https://www.npmjs.com/package/react-markdown).

        ## Bold Text

        **This is bold text.**

        ## Italic Text

        _This is italic text._

        ## Delete Text

        ~~This is deleted text.~~

        ## Link Test

        [Link to Google](https://www.google.com)

        ## H2 Test

        ### H3 Test

        #### H4 Test

        ## Code Test

        \`Hello World\`

        \`\`\`js
        console.log("Hello World")
        \`\`\`

        ## List Test

        - Item 1

        * Item 2

        - [x] Item 3

        ## Table Test

        | Header 1 | Header 2 |
        | -------- | -------- |
        | Cell 1   | Cell 2   |

        ## Separator Test

        ---

        Footer
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Markdown2Example />
  </Accordion>
</Accordions>

## CSS [#css]

You can also use Tailwind CSS classes to format text using HTML.

For example:

```ink title="ink"
<span class="inline-block text-blue-500">some *blue* text</span>.
<span class="inline-block text-red-500">some *red* text</span>.
<span class="inline-block text-green-500">some *green* text</span>.
```

<CSSExample />


# Other narrative features (/ink/other-narrative-features)





## Pause [#pause]

After executing a "# script", the system performs a <DynamicLink href="/start/labels-flow#continue">`continue`</DynamicLink> to move to the next `step`. For example, in this case you will see the image and the dialogue text.

```ink title="ink/start.ink"
=== start ===
# show image alien eggHead
Hello, world!
-> DONE
```

You can use `# pause` to stop progression to the next `step` and clear the dialogue text until the flow resumes. This is useful when you need to display an image or change state without showing any dialogue.

The syntax is:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # pause
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # pause
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # show image alien eggHead
    # pause
    Hello, world!
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "eggHead",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PauseExample />

## Continue [#continue]

Normally, when a choice is presented after dialogue the narration uses two `steps`: the first shows only the dialogue, and the second shows the dialogue plus the choices.

```ink title="ink/start.ink"
=== start ===
Who are we going to rescue: the kitten or the wizard?
* [workplace_midground_kitten] 
    -> END
* [workplace_midground_wizard]
    -> END
```

To present the dialogue and the choices in a single `step`, append `<># continue` to the dialogue line. This avoids an extra `step`.

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    Who are we going to rescue: the kitten or the wizard?<># continue
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    <text><># continue

    where:
        text = the dialogue text
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

```ink title="ink/start.ink"
=== start ===
Who are we going to rescue: the kitten or the wizard?<># continue
* [workplace_midground_kitten] 
    -> END
* [workplace_midground_wizard]
    -> END
```

<ContinueExample />


# Text replacement (/ink/replacement)



In &#x2A;*native *ink*** it is possible to inject variables in the text as in the following example `Hello, {name}`. But in case you need to use a property of an object that is in the storage or if you want to use the value of a JS/TS function, you cannot use the following syntax `{ key }`.

In &#x2A;*Pixi’VN *ink*** you can use the following syntax to replace the text:

```ink title="ink"
What do you want, [alice]?
* Talk to \[bob\]
```

In this case Pixi’VN checks if there is a value linked to the keys `alice` and `bob`. If there is a value linked to the key `alice`, the text `[alice]` will be replaced by the value, same for the key `bob`.

To assign a value to a key you can use the following 2 methods:

## Replace after translation [#replace-after-translation]

You can override the function `onReplaceTextAfterTranslation` to assign a value to a key. This function is called after the <DynamicLink href="/ink/translate">translation</DynamicLink> of the text and have how parameter the key to replace and return the value to replace or `undefined` if the key does not need to be replaced (so the key will be displayed with the brackets `[key]`).

```ts
import { onReplaceTextAfterTranslation } from '@drincs/pixi-vn-ink'
import { getCharacterById } from "@drincs/pixi-vn";

onReplaceTextAfterTranslation((key) => {
    if (key === 'bob') {
        return 'Bob'
    }

    let character = getCharacterById(key)
    if (character) {
        return character.name
    }

    // if return undefined, the system will not replace the character id
    return undefined
})
```

## Replace before translation [#replace-before-translation]

You can override the function `onReplaceTextBeforeTranslation` to add a script that can be interpreted by the <DynamicLink href="/ink/translate">translation library</DynamicLink> used (for example [i18next](https://www.i18next.com/)).

```ts
import { onReplaceTextBeforeTranslation, onInkTranslate } from '@drincs/pixi-vn-ink'
import { useTranslation } from "react-i18next";
import { bob } from "../values/characters"

const { t } = useTranslation(["narration"]);

onInkTranslate((text) => {
    return t(text)
})

onReplaceTextBeforeTranslation((key) => {
    return `{{${key}}}`
})

i18n.init({
    debug: false,
    fallbackLng: 'en',
    // ...
    missingInterpolationHandler(_text, value, _options) {
        let key = value[1]
        if (key === 'bob') {
            return 'Bob'
        }

        let character = getCharacterById(key)
        if (character) {
            return character.name
        }

        return `[${key}]`
    },
});
```


# Sounds and music (/ink/sound)





The ***ink* + Pixi’VN integration** introduces a "# script" that allows you to use the <DynamicLink href="/start/sound">sounds and music</DynamicLink>.

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    # play sound sfx_whoosh delay 0.1
    # play sound bgm_cheerful loop true channel bgm
    Hello, I'm a cheerful background music that will loop forever until you stop me.
    # pause sound bgm_cheerful
    I'm paused, but I can be resumed.
    # resume sound bgm_cheerful
    I'm back!
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```ts title="src/assets/index.ts"
import generatedManifestJson from "@/assets/manifest.gen.json";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        ...generatedManifestJson.bundles,
        {
            name: "audio",
            assets: [
                {
                    alias: "bgm_cheerful",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
                },
                {
                    alias: "sfx_whoosh",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
                },
            ],
        },
    ],
};
```

<SoundExample />

## Play [#play]

You can use the `play` to <DynamicLink href="/start/sound#play">play</DynamicLink&#x3E; a sound in &#x2A;**ink***. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # play sound sfx_whoosh volume 100
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # play sound <alias> [<source>] [<parameters>]

    where:
        alias = the alias to identify the sound. Use double quotes if it contains spaces.
        source (Optional) = the alias or URL of the asset to use as the sound source. If not set, `alias` will be used as the source.
        parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Available `parameters` (all Optional) are the properties of [`PixiVNJsonSoundPlayProps`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlayProps).

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    # play sound sfx_whoosh
    Now the sfx_whoosh is singing.
    # play sound sfx_whoosh volume 100
    Now the sfx_whoosh is singing louder.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```ts title="src/assets/index.ts"
import generatedManifestJson from "@/assets/manifest.gen.json";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        ...generatedManifestJson.bundles,
        {
            name: "audio",
            assets: [
                {
                    alias: "bgm_cheerful",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
                },
                {
                    alias: "sfx_whoosh",
                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
                },
            ],
        },
    ],
};
```

## Pause and resume [#pause-and-resume]

To <DynamicLink href="/start/sound#pause-and-resume">pause</DynamicLink&#x3E; a sound or a channel in &#x2A;**ink***, you can use the `pause` operation. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # pause sound bgm_cheerful
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # pause <component type> <alias>

    where:
        component type = the component type to pause. Available types: `sound`, `channel`.
        alias = the alias to identify the sound or channel to pause. Use double quotes if it contains spaces.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To <DynamicLink href="/start/sound#pause-and-resume">resume</DynamicLink&#x3E; a sound or a channel in &#x2A;**ink***, you can use the `resume` operation. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # resume sound bgm_cheerful
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # resume <component type> <alias>

    where:
        component type = the component type to resume. Available types: `sound`, `channel`.
        alias = the alias to identify the sound or channel to resume. Use double quotes if it contains spaces.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To pause or resume all sounds, you can use the following syntax:

```ink title="ink"
# pause all sounds
# resume all sounds
```

## Edit [#edit]

To <DynamicLink href="/start/sound#edit">edit</DynamicLink&#x3E; a sound in &#x2A;**ink***, you can use the `edit` operation. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # edit sound bgm_cheerful volume 50
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # edit sound <alias> [<parameters>]

    where:
        alias = the alias to identify the sound to edit. Use double quotes if it contains spaces.
        parameters (Optional) = a space-separated list of property/value pairs. If a value is a string and includes spaces, you must use double quotes.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Available `parameters` (all Optional) are the properties of [`PixiVNJsonSoundEditProps`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEditProps).

```ink title="ink"
# edit sound bgm_cheerful volume 50
# edit sound bgm_cheerful loop false
```

## Stop [#stop]

To <DynamicLink href="/start/sound#stop">stop</DynamicLink&#x3E; a sound in &#x2A;**ink***, you can use the `stop` operation. To do this, you need to use the following syntax:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # stop sound bgm_cheerful
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # stop sound <alias>

    where:
        alias = the alias to identify the sound to stop. Use double quotes if it contains spaces.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To stop all sounds, you can use the following syntax:

```ink title="ink"
# stop all sounds
```


# Storage (/ink/storage)



<CalloutContainer type="info">
  <CalloutDescription>
    You can read more about using variables in ink on the [official documentation](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#part-3-variables-and-logic).
  </CalloutDescription>
</CalloutContainer>

***ink*** also supports variables, both temporary and global, storing numerical and content data, or even story flow commands. It is fully-featured in terms of logic, and contains a few additional structures to help keep the often complex logic of a branching story better organised.

In the ***ink* + Pixi’VN integration**, the variables `VAR` and `CONST` are equivalent to <DynamicLink href="/start/storage">variables in storage</DynamicLink> and the variables `temp` are equivalent to <DynamicLink href="/start/storage#temporary-storage">temporary variables in storage</DynamicLink>.

The name of the &#x2A;**ink*** variables corresponds to the key of a variable in the <DynamicLink href="/start/storage">storage</DynamicLink>.

## Define [#define]

<CalloutContainer type="info">
  <CalloutDescription>
    This functionality in Javascript/TypeScript corresponds to <DynamicLink href="/start/storage#default-storage-variables">"Default storage variables"</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

You can define a variable in &#x2A;**ink*** with the following code:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    VAR myVariable = 42
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    VAR <variable_name> = <value>

    where:
        variable_name = the name of the variable
        value = the initial value of the variable
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Set [#set]

<CalloutContainer type="info">
  <CalloutDescription>
    This functionality in Javascript/TypeScript corresponds to <DynamicLink href="/start/storage#set">`storage.set`</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

You can set a variable in &#x2A;**ink*** with the following code:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    ~ myVariable = 100
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    ~ <variable_name> = <value>

    where:
        variable_name = the name of an already declared variable
        value = the new value to assign
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Get [#get]

<CalloutContainer type="info">
  <CalloutDescription>
    This functionality in Javascript/TypeScript corresponds to <DynamicLink href="/start/storage#get">`storage.get`</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

In ink, variables can be used for different purposes. For each of these purposes, the way to get the value of a variable is different.

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    The value of myDuration is: {myDuration}
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    {<variable_name>}

    where:
        variable_name = the name of the variable to print or evaluate
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

```ink title="ink"
The value of myDuration is: {myDuration}
# show image bg /image.png with dissolve duration {myDuration}
{myDuration > 5:
    The duration is greater than 5.
- else:
    The duration is 5 or less.
}
```


# Temporary storage (/ink/temp-storage)



<CalloutContainer type="info">
  <CalloutDescription>
    You can read more about temporary variables in ink on the [official documentation](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#4-temporary-variables).
  </CalloutDescription>
</CalloutContainer>

Sometimes a global variable is unwieldy. &#x2A;**ink*** provides **temporary variables** for quick, local calculations. Unlike global variables (`VAR`), a temporary variable is **discarded as soon as the story leaves the knot or stitch in which it was defined**.

In the ***ink* + Pixi’VN integration**, `temp` variables are equivalent to <DynamicLink href="/start/storage#temporary-storage">temporary variables in storage</DynamicLink>.

## Define [#define]

<CalloutContainer type="info">
  <CalloutDescription>
    This functionality in Javascript/TypeScript corresponds to <DynamicLink href="/start/storage#temporary-storage">temporary variables in storage</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

Declare a temporary variable with the `temp` keyword inside a `~` logic line:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    ~ temp myTemp = 42
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    ~ temp <variable_name> = <value>

    where:
        variable_name = the name of the temporary variable
        value = the initial value of the variable
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can use any type that &#x2A;**ink*** supports: integer, floating point, boolean, or string.

```ink title="ink/start.ink"
=== near_north_pole ===
    ~ temp number_of_warm_things = 0
    { blanket:
        ~ number_of_warm_things++
    }
    { ear_muffs:
        ~ number_of_warm_things++
    }
    { gloves:
        ~ number_of_warm_things++
    }
    { number_of_warm_things > 2:
        Despite the snow, I felt incorrigibly snug.
    - else:
        That night I was colder than I have ever been.
    }
```

The variable `number_of_warm_things` is created when the knot is entered and thrown away when it is left.

## Set [#set]

<CalloutContainer type="info">
  <CalloutDescription>
    This functionality in Javascript/TypeScript corresponds to <DynamicLink href="/start/storage#set">`storage.set`</DynamicLink>.
  </CalloutDescription>
</CalloutContainer>

After the initial declaration you can reassign a temporary variable with the same `~` syntax (without repeating the `temp` keyword):

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    ~ score = score + 10
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    ~ <variable_name> = <expression>

    where:
        variable_name = the name of an already declared temporary variable
        expression = the new value, which can reference the variable itself
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

```ink title="ink"
~ temp score = 0
~ score = score + 10
~ score++
```

## Get [#get]

To get a temporary variable, use the normal <DynamicLink href="/ink/storage#get">`storage.get` function</DynamicLink>.

Inside &#x2A;**ink*** itself, you read a temporary variable exactly the same way as any other variable – by using its name in an expression, inline print, or condition:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    The duration is: {duration}
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    {<variable_name>}

    where:
        variable_name = the name of the temporary variable to print or evaluate
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

```ink title="ink"
~ temp duration = 3

The duration is: {duration}
{ duration > 2:
    It's a long scene.
- else:
    It's a short scene.
}
```


# Internalization (/ink/translate)





As explained in more detail <DynamicLink href="/start/translate">here</DynamicLink>, Pixi’VN gives the possibility to translate the game text using a library, such as [i18next](https://www.i18next.com/&#x29;. Also in ***ink* + Pixi’VN integration*&#x2A; you can use a library to translate the text of the &#x2A;**ink***.

Pixi’VN gives the developer the ability to intercept the translation event with the [`onInkTranslate`](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate) function.

<CodeBlockTabs defaultValue="lib/hooks/ink-hooks.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="lib/hooks/ink-hooks.tsx">
      lib/hooks/ink-hooks.tsx
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="locales/es.json">
      locales/es.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="lib/hooks/ink-hooks.tsx">
    ```ts
    import { onInkTranslate } from "@drincs/pixi-vn-ink";
    import { useEffect } from "react";
    import { useTranslation } from "react-i18next";

    export default function useInkInitialization() {
        const { t } = useTranslation(["narration"]);
        useEffect(() => {
            onInkTranslate(t);
        }, [t]);

        return null;
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    Hello, my name is [joe]
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="locales/es.json">
    ```json
    {
        "narration": {
            "Hello, my name is [joe]": "Hola, mi nombre es {{joe}}"
            // ...
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Auto-generation of translation files [#auto-generation-of-translation-files]

<Callout title="Templates" type="info">
  In all templates, you can use the following button in the settings to automatically generate the json file that will be used for translations.
    <img alt="dowload-translate" src="__img0" />
</Callout>

To facilitate the creation of the translation files, you can use the [`generateJsonInkTranslation`](/jsdoc/pixi-vn-ink/index/functions/generateJsonInkTranslation) function to automatically generate the JSON structure from the ink text.

```ts title="lib/i18n.ts"
import { generateJsonInkTranslation } from "@drincs/pixi-vn-ink";
import i18n from "i18next";
import { convertInkToJson } from "./utils/ink-utility";

function getLocalesResource(
    lng: string,
): Promise<Record<string, Record<string, string>>> {
    return import(`./../locales/${lng}.json`);
}

async function generateResourceToTranslate(lng: string): Promise<any> {
    let res = await getLocalesResource(lng);
    res = { ...res };
    if (!res) {
        res = {};
    }
    if (!res.narration) {
        res.narration = {};
    }
    if (res.default) {
        delete res.default;
    }
    const manifest = await import("@/assets/ink-manifest.gen.json");
    for (const path of manifest.default) {
        const element = await fetch(path).then((r) => r.json());
        element && (await generateJsonInkTranslation(element, res.narration));
    }
    return res;
}

export async function downloadResourceToTranslate() {
    const lng = i18n.options.fallbackLng?.toString() || "en";
    const data = await generateResourceToTranslate(lng);
    const jsonString = JSON.stringify(data);
    // download the save data as a JSON file
    const blob = new Blob([jsonString], { type: "application/json" });
    // download the file
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `strings_${lng}.json`;
    a.click();
}
```


# VS Code Extension (/ink/vscode-extension)





If you're using *ink*, we recommend using the *ink* extension we developed. In addition to providing standard *ink* language features, it lets you select `pixi-vn` as your game engine and test your narration in real time.

You can download it and get more information [here](https://marketplace.visualstudio.com/items?itemName=drincs-productions.pixi-vn-ink-vscode).

<img alt="ink VS Code Extension" src="__img0" />

Here's the recommended settings file:

```json title="settings.json"
{
    "ink.mainFile": "start.ink",
    "ink.rootFolder": "src/ink",
    "ink.markup": "Markdown",
    "ink.engine": "pixi-vn"
}
```


# Ren'Py Language Integration (/renpy)



Pixi’VN gives you the ability to write your own narrative using Ren'Py Language.

<Callout title="This page is under construction" type="warn">
  Ren'Py integration is in development. If you are interested, feel free to write in the chat below!
</Callout>

**What is Ren'Py Language?**

Ren'Py Language is a scripting language for writing interactive narrative. It is used in games like Doki Doki Literature Club, Katawa Shoujo, and Long Live the Queen to create branching stories. Ren'Py Language is used in Ren'Py, a visual novel engine that helps you to create visual novels and story-based games.

You can learn more about Ren'Py on the [Ren'Py website](https://www.renpy.org/).

## Why use Ren'Py integration? [#why-use-renpy-integration]

Programming a game narrative in **Javascript/Typescript** has the advantage of having total development freedom, but the disadvantage is that it slows down the writing of a narrative (it makes you write a lot of code).


# Activity (/nqtr/activity)



The `activity` are actions the player can take, and they can be linked to a <DynamicLink href="/nqtr/navigation">navigation element</DynamicLink>. The developer will decide how the player interacts with them.

## Initialize [#initialize]

To initialize a `activity`, create a new instance of the `ActivityBaseModel` class (or your [custom class](#custom-class)) and add it to the game activity dictionary when the game is initialized.

<Callout type="info">
  It is recommended to import the instances at project startup, see the `src/main.ts` file.
</Callout>

To create a new instance of `ActivityBaseModel`, you need the following parameters:

* `id`: A unique identifier (string). Used to reference the `activity` in the game (must be unique).
* `onRun`: A function that is called when the `activity` is run. It receives two parameters:
  * The `activity` instance itself.
  * `props`: the properties that will be passed to the activity. Its interface corresponds to <DynamicLink href="/nqtr#onrunprops">`OnRunProps`</DynamicLink>.
* `props`: An object with the activity's properties:
  * `name`: The name of the activity (Optional).
  * `timeSlot`: The time slot in which the activity will be active (Optional).
  * `dateScheduling`: Used to schedule what date it will be added and removed (Optional).
  * `disabled`: Whether the activity is disabled. You can also pass a Pixi’VN flag name (optional, default is `false`).
  * `hidden`: Whether the activity is hidden. You can also pass a Pixi’VN flag name (optional, default is `false`).
  * `renderIcon`: The icon of the activity (Optional).

<CodeBlockTabs defaultValue="values/activities.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/activities.ts">
      values/activities.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/activities.ts">
    ```ts
    import {
        ActivityBaseModel,
        RegisteredActivities,
        timeTracker,
    } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../constans";
    import { napLabel, sleepLabel } from "../labels/sleepNapLabels";
    import {
        ORDER_PRODUCT_LABEL_KEY,
        TAKE_KEY_LABEL_KEY,
    } from "../labels/variousActionsLabelKeys";

    export const bed = new ActivityBaseModel(
        "bed",
        async (_, props) => {
            await props.navigate(NARRATION_ROUTE);
            if (timeTracker.nowIsBetween(5, 22)) {
                await narration.jump(napLabel, props);
            } else {
                await narration.jump(sleepLabel, props);
            }
        },
        {
            name: "bed",
        },
    );

    export const orderProduct = new ActivityBaseModel(
        "order_product",
        async (_, props) => {
            await props.navigate(NARRATION_ROUTE);
            await narration.jump(ORDER_PRODUCT_LABEL_KEY, props);
        },
        {
            name: "order_product",
        },
    );

    export const takeProduct = new Activity(
        "take_product",
        async (_, props) => {
            await props.navigate(NARRATION_ROUTE);
            await narration.jump(TAKE_KEY_LABEL_KEY, props);
        },
        {
            name: "take_product",
        },
    );

    RegisteredActivities.add([bed, orderProduct, takeProduct]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="main.ts">
    ```ts
    import "./values/activities";

    // ...
    ```
  </CodeBlockTab>
</CodeBlockTabs>

`RegisteredActivities.add` is **required** to save the `activities` in the game.

You can also create a function to load `activities`. The important thing is that it is called at least once before the `activities` are used in the game, otherwise they will not be available.

## Link [#link]

For an `activity` to be available to the player, it must be linked to a <DynamicLink href="/nqtr/navigation">navigation element</DynamicLink>. The relationship between an `activity` and a navigation element is many-to-many, meaning that an `activity` can be linked to multiple navigation elements and a navigation element can have multiple `activities` associated with it.

There are two ways to do this:

### During game initialization [#during-game-initialization]

When the game starts, a list of related activities will be defined. This list will not be saved when the game is saved. Therefore, the developer can modify this list from one version of the game to another without having to worry about migrations for older versions.

<CodeBlockTabs defaultValue="values/rooms.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/rooms.ts">
      values/rooms.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/activities.ts">
      values/activities.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/rooms.ts">
    ```ts
    import { RegisteredRooms, RoomBaseModel } from "@drincs/nqtr";
    import { bed } from "./activity";
    import { mcHome } from "./locations";

    export const mcRoom = new RoomBaseModel("mc_room", mcHome, {
        name: "MC room",
        image: "location_myroom",
        activities: [bed], // [!code ++]
    });

    RegisteredRooms.add([mcRoom]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/activities.ts">
    ```ts
    import {
        ActivityBaseModel,
        RegisteredActivities,
        timeTracker,
    } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { napLabel, sleepLabel } from "../labels/sleepNapLabels";

    export const bed = new ActivityBaseModel(
        "bed",
        async (_, props) => {
            if (timeTracker.nowIsBetween(5, 22)) {
                await narration.jump(napLabel, props);
            } else {
                await narration.jump(sleepLabel, props);
            }
        },
        {
            name: "bed",
        },
    );

    RegisteredActivities.add([bed]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### During the game [#during-the-game]

You can also link an activity to a navigation element during the game. This feature is useful if you want to temporarily add an activity. The list of activities added this way will be included in your game saves.

To link an activity to a navigation element during the game, you can use the `addActivity` method.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/activities.ts">
      values/activities.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/rooms.ts">
      values/rooms.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel, showImageContainer } from "@drincs/pixi-vn";
    import { orderProduct } from "../activities";
    import { mcRoom } from "../rooms";

    const startLabel = newLabel("start", [
        async () => {
            mcRoom.addActivity(orderProduct); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    == start ==
    // {order_product} is the id of the activity
    # add activity {order_product} in mc_room
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/activities.ts">
    ```ts
    import { ActivityBaseModel, RegisteredActivities } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { orderProductLabel } from "../labels/variousActionsLabels";

    export const orderProduct = new ActivityBaseModel(
        "order_product",
        async (_, props) => await narration.jump(orderProductLabel, props),
        {
            name: "order_product",
        },
    );

    RegisteredActivities.add([orderProduct]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/rooms.ts">
    ```ts
    import { RegisteredRooms, RoomBaseModel } from "@drincs/nqtr";
    import { mcHome } from "./locations";

    export const mcRoom = new RoomBaseModel("mc_room", mcHome, {
        name: "MC room",
        image: "location_myroom",
    });

    RegisteredRooms.add([mcRoom]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Unlink [#unlink]

To unlink an activity from a navigation element, you can use the `removeActivity` method.

<CodeBlockTabs defaultValue="Example">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Example">
      Example
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/rooms.ts">
      values/rooms.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Example">
    ```ts
    import { orderProduct } from "../activities";
    import { mcRoom } from "../rooms";

    mcRoom.removeActivity(orderProduct);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { ActivityBaseModel, RegisteredActivities } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { orderProductLabel } from "../labels/variousActionsLabels";

    export const orderProduct = new ActivityBaseModel(
        "order_product",
        async (_, props) => await narration.jump(orderProductLabel, props),
        {
            name: "order_product",
        },
    );

    RegisteredActivities.add([orderProduct]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {order_product} is the id of the activity
    # remove activity {order_product} from mc_room
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/rooms.ts">
    ```ts
    import { RegisteredRooms, RoomBaseModel } from "@drincs/nqtr";
    import { mcHome } from "./locations";

    export const mcRoom = new RoomBaseModel("mc_room", mcHome, {
        name: "MC room",
        image: "location_myroom",
    });

    RegisteredRooms.add([mcRoom]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Get [#get]

To get a `activity` by its `id`, use the `RegisteredActivities.get` function.

```ts
import { RegisteredActivities } from "@drincs/nqtr";

const orderProduct = RegisteredActivities.get("order_product");
```

## Get all [#get-all]

To get all `activities`, use the `RegisteredActivities.values` function.

```ts
import { RegisteredActivities } from "@drincs/nqtr";

const activities = RegisteredActivities.values();
```

## Custom class [#custom-class]

<Callout title="Templates" type="info">
  In all templates, the `Activity` class is already defined in the file `models/nqtr/Activity.ts`. You can use it directly or modify it to suit your needs.
</Callout>

It is recommended to create your own class `Activity` that extends `ActivityStoredClass` and "override" the interface `ActivityInterface` to add, edit, or remove properties or methods.

For example, if you want to create a class `Activity`, you must "override" the interface `ActivityInterface` to use your properties or methods. (See the file `nqtr.d.ts`)

Now you can create a class `Activity` that extends `ActivityStoredClass` and implements the `ActivityInterface`. (For more information on how to create a class in TypeScript, read [the official documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html))

To create a property that stores its value in the game storage, you can create [Getters/Setters](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters) and use the `this.getStorageProperty()` / `this.setStorageProperty()` methods. (See the file `Activity.ts`)

<CodeBlockTabs defaultValue="models/nqtr/Activity.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="models/nqtr/Activity.ts">
      models/nqtr/Activity.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="nqtr.d.ts">
      nqtr.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="models/nqtr/Activity.ts">
    ```ts
    import {
        ActiveScheduling,
        ActivityInterface,
        ActivityStoredClass,
        ActivityStoredClassProps,
        OnRunEvent,
        OnRunProps,
    } from "@drincs/nqtr";
    import {
        PixiUIParam,
        PixiUIProp,
        ReactUIParam,
        ReactUIProp,
    } from "./ui-elements";
    import { OnRunAsyncFunction } from "@drincs/nqtr";

    export default class Activity
        extends ActivityStoredClass
        implements ActivityInterface
    {
        constructor(
            id: string,
            onRun: OnRunEvent<ActivityInterface>,
            props: {
                name?: string;
                sprite?: PixiUIParam<Activity>;
                icon?: ReactUIParam<Activity>;
                disabled?: boolean | (() => boolean);
                hidden?: boolean | (() => boolean);
            } & ActivityStoredClassProps,
        ) {
            super(id, onRun, props);
            this.name = props.name || "";
            this._sprite = props.sprite;
            this._icon = props.icon;
            this._defaultDisabled = props.disabled || false;
            this._defaultHidden = props.hidden || false;
        }
        readonly name: string;
        private readonly _sprite?: PixiUIParam<Activity>;
        get sprite(): PixiUIProp | undefined {
            const sprite = this._sprite;
            if (typeof sprite === "function") {
                return (runProps: OnRunProps) => sprite(this, runProps);
            }
            return sprite;
        }
        private readonly _icon?: ReactUIParam<Activity>;
        get icon(): ReactUIProp | undefined {
            const icon = this._icon;
            if (typeof icon === "function") {
                return (runProps: OnRunProps) => icon(this, runProps);
            }
            return icon;
        }
        private _defaultDisabled: boolean | (() => boolean) = false;
        get disabled(): boolean {
            let value =
                this.getStorageProperty<boolean>("disabled") ||
                this._defaultDisabled;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set disabled(value: boolean) {
            this.setStorageProperty("disabled", value);
        }
        private _defaultHidden: boolean | (() => boolean) = false;
        get hidden(): boolean {
            let value =
                this.getStorageProperty<boolean>("hidden") || this._defaultHidden;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set hidden(value: boolean) {
            this.setStorageProperty("hidden", value);
        }
        override isActive(options?: ActiveScheduling): boolean {
            if (this.hidden) {
                return false;
            }
            return super.isActive(options);
        }
        override get run(): OnRunAsyncFunction {
            return async (runProps: OnRunProps) => {
                const res = await super.run(runProps);
                await runProps.invalidateInterfaceData();
                return res;
            };
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="nqtr.d.ts">
    ```ts
    import { StepLabelProps } from "@drincs/pixi-vn";
    import { PixiUIProp, ReactUIProp } from "./models/nqtr/ui-elements";

    declare module "@drincs/nqtr" {
        interface ActivityInterface {
            /**
             * The name of the activity.
             */
            readonly name: string;
            /**
             * Whether is disabled.
             */
            disabled: boolean;
            /**
             * Whether is hidden.
             */
            hidden: boolean;
            /**
             * The sprite of the activity.
             */
            readonly sprite?: PixiUIProp;
            /**
             * The React icon of the activity.
             */
            readonly icon?: ReactUIProp;
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Navigation Quest Time Routine (NQTR) (/nqtr)



**What is NQTR?** NQTR (Navigation Quest Time Routine) is an extension for Pixi’VN that adds advanced systems for navigation, quests, time management, and game state handling. It is fully customizable and extensible, enabling developers to implement complex game mechanics with ease.

## Installation [#installation]

<Callout title="Templates" type="info">
  Starting a new Pixi’VN project? Use a <DynamicLink href="/start#project-initialization">template</DynamicLink> that already includes NQTR.
</Callout>

To install the NQTR package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/nqtr
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="*ink* integration" id="ink">
    To access NQTR features you can add a handler to *ink*'s hashtag commands.

    <CodeBlockTabs defaultValue="utils/ink-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="utils/ink-utility.ts">
          utils/ink-utility.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="utils/ink-utility.ts">
        ```ts
        import { nqtrHandler } from "@drincs/nqtr/ink";
        import { HashtagCommands } from "@drincs/pixi-vn-ink";

        export function initializeInk() {
            HashtagCommands.add(nqtrHandler());
            // ...
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="onrunprops" id="onrunprops">
    <Callout title="Templates" type="info">
      In all templates, the `StepLabelProps` interface is already overridden. You can find it in the `pixi-vn.d.ts` file.
    </Callout>

    Some NQTR functions require you to pass an `OnRunProps` object as a parameter. This allows you to customize and access properties in system-triggered functions.

    By default, `OnRunProps` is `{ [key: string]: any }`. You can override the `OnRunProps` interface in your `.d.ts` file to specify required parameters.

    <CodeBlockTabs defaultValue="pixi-vn.d.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        import { narration } from "@drincs/pixi-vn";

        declare module "@drincs/pixi-vn" {
            interface OnRunProps {
                navigate: (route: string) => void;
            }
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Features [#features]

NQTR provides the following features (the order is important):

1. <DynamicLink href="/nqtr/navigation">
     Navigation and map
   </DynamicLink>
2. <DynamicLink href="/nqtr/time">
     Time system
   </DynamicLink>
3. <DynamicLink href="/nqtr/activity">
     Activity
   </DynamicLink>
4. <DynamicLink href="/nqtr/routine">
     Routine
   </DynamicLink>
5. <DynamicLink href="/nqtr/quest">
     Quest system
   </DynamicLink>


# Make your first Point & Click Adventure (/nqtr/make-point-and-click)



<Callout type="warn">
  Before continuing, it is important to consider that this page assumes the concepts explained in <DynamicLink href="/start/make-visual-novel">"Make your first Visual Novel"</DynamicLink>, and that all the features explained on that page can also be applied here. Additionally, having an intermediate knowledge of JS/TS (such as functions, classes, interfaces, and the use of `.d.ts` files) is essential.
  Do not continue if you do not have this knowledge.
</Callout>

This tutorial will guide you through the process of creating your first Point & Click Adventure.

**What is a Point & Click Adventure?** A Point & Click Adventure is a story-driven game genre in which the player interacts with the environment and objects through mouse pointing and clicking. These games often feature puzzles, dialogues, and an engaging narrative.

**How to implement it in a Pixi’VN project?** The Pixi’VN environment provides a utility library and base models, called `NQTR` (Navigation Quest Time Routine), which allow you to easily implement a navigation system, time management, and quests. The way NQTR works is based on creating class instances that comply with specific interfaces, which will be registered and provided by the NQTR utilities. In this way, it is possible to create a UI tailored to the game's needs. Alternatively, you can use the base models provided by NQTR and the UI included in the "Point & Click Adventure - React" template to create a complete game in a short time.

Additionally, it is very important to consider that elements can trigger `labels` (narratives), allowing you to switch to the narrative interface and back.

## Create a new project [#create-a-new-project]

The first step is to create a new project. You can find more information on how to create a new project starting from a template <DynamicLink href="/start#project-initialization">here</DynamicLink>. We will use the template "Point & Click Adventure - React".

`Point & Click Adventure -> React`

After the creation is complete, it is very important to read the `README.md` file that is in the root of the project. This file contains important information about the project and how to use it.

In our case, to start the project we will simply need to execute the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install
    npm start
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm install
    pnpm start
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn install
    yarn start
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun install
    bun start
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Add clickable elements [#add-clickable-elements]

The main feature of a Point & Click Adventure is the ability to interact with the environment through mouse clicks. To add clickable elements, it is recommended to use UI (in our case React or PixiJS) rather than the Pixi’VN canvas, as it is easier to manage events and interactions.

In the template we are using, when creating the elements that we will see later, there is the possibility to define graphical elements (such as an icon). These graphical elements can be defined using different types; based on this, the system will add the graphical element to the <DynamicLink href="/start/interface-pixijs">PixiJS UI</DynamicLink> or to the <DynamicLink href="/start/interface-react">React</DynamicLink> UI. In this way, it is possible to create clickable elements in a simple and fast way.

Usually, it is possible to define a graphical element as a string representing the asset alias. The template also provides the possibility to use the <DynamicLink href="/nqtr/time#image-time-period">`TimeSlotsImage`</DynamicLink> class, which allows you to define a different image depending on the time of day.

```ts
export const nightcityMap = new Map("nightcity_map", {
    name: "Nightcity",
    background: "map-nightcity", // [!code focus]
    neighboringMaps: {
        south: "main_map",
    },
});
```

Usually, it is possible to define a graphical element as a React element.

```tsx
export const bed = new Activity(
    "bed",
    async (_, props) => {
        await props.navigate(NARRATION_ROUTE);
        if (timeTracker.nowIsBetween(5, 22)) {
            await narration.jump(napLabel, props);
        } else {
            await narration.jump(sleepLabel, props);
        }
    },
    {
        name: "bed",
        icon: (activity, props) => {
            // [!code focus]
            return (
                // [!code focus]
                <NqtrRoundIconButton // [!code focus]
                    disabled={activity.disabled} // [!code focus]
                    onClick={() => {
                        // [!code focus]
                        activity.run(props).then(() => {
                            // [!code focus]
                            props.invalidateInterfaceData(); // [!code focus]
                        }); // [!code focus]
                    }} // [!code focus]
                    ariaLabel={props.uiTransition(activity.name)} // [!code focus]
                    variant="solid" // [!code focus]
                    color="primary" // [!code focus]
                >
                    {" "}
                    {/* [!code focus] */}
                    <BedIcon // [!code focus]
                        sx={{
                            // [!code focus]
                            fontSize: {
                                sx: "1.5rem",
                                sm: "2rem",
                                md: "2.5rem",
                                lg: "3rem",
                                xl: "3.5rem",
                            }, // [!code focus]
                        }} // [!code focus]
                    />{" "}
                    {/* [!code focus] */}
                </NqtrRoundIconButton> // [!code focus]
            ); // [!code focus]
        }, // [!code focus]
    },
);
```

Additionally, when the `sprite` property is available, it is possible to define a graphical element as a PixiJS element.

```ts
import { Assets, Sprite, Texture } from "@drincs/pixi-vn/pixi.js";

export const mcHome = new Location("mc_home", mainMap, {
    name: "MC Home",
    sprite: async (location, { navigate }) => {
        // [!code focus]
        const texture = await Assets.load<Texture>("icon_location_home"); // [!code focus]
        const icon = new Sprite({
            // [!code focus]
            texture, // [!code focus]
            x: 300, // [!code focus]
            y: 200, // [!code focus]
            height: 120, // [!code focus]
            width: 120, // [!code focus]
            eventMode: "static", // [!code focus]
            cursor: "pointer", // [!code focus]
        }); // [!code focus]
        icon.on("pointerdown", () => {
            // [!code focus]
            const entrance = location.entrance; // [!code focus]
            if (entrance) {
                // [!code focus]
                navigator.currentRoom = entrance; // [!code focus]
                navigate(NAVIGATION_ROUTE); // [!code focus]
            } // [!code focus]
        }); // [!code focus]
        return icon; // [!code focus]
    }, // [!code focus]
});
```

## Navigation and map [#navigation-and-map]

<Callout type="info">
  You can find more detailed documentation about these elements <DynamicLink href="/nqtr/navigation">here</DynamicLink>.
</Callout>

The first step to create a Point & Click Adventure is to create the navigation elements. These elements allow the player to move within the game and interact with the environment.

The navigation system is composed of the following elements:

* `rooms`: The core elements of navigation, from which the position of the `mc` and `npc` is deduced.
* `locations`: A container of `rooms`.
* `maps`: A container of `locations`.

For example:

```ts title="values/rooms.ts"
import { RegisteredRooms } from "@drincs/nqtr";
import TimeSlotsImage from "../models/TimeSlotsImage";
import Room from "../models/nqtr/Room";
import { bed } from "./activities";
import { mcHome } from "./locations";

export const mcRoom = new Room("mc_room", mcHome, {
    name: "MC room",
    background: new TimeSlotsImage({
        morning: "location_myroom-0",
        afternoon: "location_myroom-1",
        evening: "location_myroom-2",
        night: "location_myroom-3",
    }),
    activities: [bed],
});

RegisteredRooms.add([mcRoom]);
```

```ts title="values/locations.ts"
import { navigator, RegisteredLocations } from "@drincs/nqtr";
import { Assets, Sprite, Texture } from "@drincs/pixi-vn/pixi.js";
import { NAVIGATION_ROUTE } from "../constans";
import Location from "../models/nqtr/Location";
import { mainMap } from "./maps";

export const mcHome = new Location("mc_home", mainMap, {
    name: "MC Home",
    sprite: async (location, { navigate }) => {
        const texture = await Assets.load<Texture>("icon_location_home");
        const icon = new Sprite({
            texture,
            x: 300,
            y: 200,
            height: 120,
            width: 120,
            eventMode: "static",
            cursor: "pointer",
        });
        icon.on("pointerdown", () => {
            const entrance = location.entrance;
            if (entrance) {
                navigator.currentRoom = entrance;
                navigate(NAVIGATION_ROUTE);
            }
        });
        return icon;
    },
});

RegisteredLocations.add([mcHome]);
```

```ts title="values/maps.ts"
import { RegisteredMaps } from "@drincs/nqtr";
import TimeSlotsImage from "../models/TimeSlotsImage";
import Map from "../models/nqtr/Map";

export const mainMap = new Map("main_map", {
    name: "Main Map",
    background: new TimeSlotsImage({
        morning: "map-0",
        afternoon: "map-1",
        evening: "map-2",
        night: "map-3",
    }),
    neighboringMaps: {
        north: "nightcity_map",
    },
});

RegisteredMaps.add([mainMap]);
```

Now, before you can use the navigation utilities, you need to set the current room. After that, it is possible to navigate to the navigation screen at the start of the game or after a short initial narrative.

Additionally, it is important to keep in mind that the current `location` and `map` are deduced from the current `room`, so it is sufficient to set the `room` to obtain all the necessary information for navigation.

<Callout type="info">
  You can find more detailed documentation on how to navigate between UI screens <DynamicLink href="/start/interface-navigate">here</DynamicLink>.
</Callout>

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
        # navigate /narration
        Hello, welcome to the my first game!

        # enter room mc_room
        # navigate /navigation
        -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { navigator } from "@drincs/nqtr";
    import { narration, newLabel } from "@drincs/pixi-vn";
    import { mcRoom } from "../values/rooms";

    const startLabel = newLabel("start", [
        async (props) => {
            await props.navigate("/narration");
            narration.dialogue = "Hello, welcome to the my first game!";
        },
        async (props) => {
            navigator.currentRoom = mcRoom;
            await props.navigate("/navigation");
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Time system [#time-system]

<Callout type="info">
  You can find more detailed documentation about these elements <DynamicLink href="/nqtr/time">here</DynamicLink>.
</Callout>

Now let's move on to another fundamental element: the time management system. The time management system is a key component in a Point & Click Adventure, as it allows you to create a dynamic and realistic world where the player's actions can have different consequences depending on the time of day.

Before you can use the time management features, it is necessary to initialize the `timeTracker` with the information required for the system to function. As shown in the following example, it is possible to define every aspect of the time management system, such as time slots, days of the week, the start and end time of the day, and so on.

<CodeBlockTabs defaultValue="utils/nqtr-utility.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="utils/nqtr-utility.ts">
      utils/nqtr-utility.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="constans.ts">
      constans.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="utils/nqtr-utility.ts">
    ```ts
    import { timeTracker } from "@drincs/nqtr";
    import { timeSlots } from "../constans";

    const weekDaysNames = [
        "monday",
        "tuesday",
        "wednesday",
        "thursday",
        "friday",
        "saturday",
        "sunday",
    ];
    export function initializeNQTR() {
        timeTracker.initialize({
            defaultTimeSpent: 1,
            dayStartTime: 0,
            dayEndTime: 24,
            timeSlots: [
                {
                    name: timeSlots.morning.description,
                    startTime: timeSlots.morning.value,
                },
                {
                    name: timeSlots.afternoon.description,
                    startTime: timeSlots.afternoon.value,
                },
                {
                    name: timeSlots.evening.description,
                    startTime: timeSlots.evening.value,
                },
                {
                    name: timeSlots.night.description,
                    startTime: timeSlots.night.value,
                },
            ],
            getDayName: (weekDayNumber: number) => {
                return weekDaysNames[weekDayNumber];
            },
            weekendStartDay: 6,
            weekLength: 7,
        });
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="constans.ts">
    ```ts
    export const timeSlots = {
        morning: { description: "morning", value: 5 },
        afternoon: { description: "afternoon", value: 12 },
        evening: { description: "evening", value: 18 },
        night: { description: "night", value: 22 },
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

The main functionality of the time management system is the ability to advance time based on the player's actions.

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {timeValue} is a number representing the amount of time to increment
    // {dateValue} is a number representing the amount of days to increment
    # wait {timeValue} // Increment time by {value}
    # wait // Increment time by defaultTimeSpent
    # wait days {dateValue} // Increment date by {dateValue} and set time to dayStartTime
    # wait days {dateValue} hours {timeValue} // Increment date by {dateValue} and time by {timeValue}
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { timeTracker } from "@drincs/nqtr";

    timeTracker.increaseTime(2);
    timeTracker.increaseDate(1, 8); // Increment date by 1 and set time to 8
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Activity [#activity]

<Callout type="info">
  You can find more detailed documentation about these elements <DynamicLink href="/nqtr/activity">here</DynamicLink>.
</Callout>

A fundamental element in Point & Click Adventures is interactive elements, which allow the player to interact with the environment and progress the story. In NQTR, these elements are represented by `activity`. `activity` are elements that can be executed by the player and can have different consequences depending on the context in which they are performed.

For example:

<CodeBlockTabs defaultValue="values/activities.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/activities.tsx">
      values/activities.tsx
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/activities.tsx">
    ```ts
    import { RegisteredActivities, timeTracker } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import BedIcon from "@mui/icons-material/Bed";
    import NqtrRoundIconButton from "../components/NqtrRoundIconButton";
    import { NARRATION_ROUTE } from "../constans";
    import { napLabel, sleepLabel } from "../labels/sleepNapLabels";
    import Activity from "../models/nqtr/Activity";

    export const bed = new Activity(
        "bed",
        async (_, props) => {
            await props.navigate(NARRATION_ROUTE);
            if (timeTracker.nowIsBetween(5, 22)) {
                await narration.jump(napLabel, props);
            } else {
                await narration.jump(sleepLabel, props);
            }
        },
        {
            name: "bed",
            icon: (activity, props) => {
                return (
                    <NqtrRoundIconButton
                        disabled={activity.disabled}
                        onClick={() => {
                            activity.run(props).then(() => {
                                props.invalidateInterfaceData();
                            });
                        }}
                        ariaLabel={props.uiTransition(activity.name)}
                        variant='solid'
                        color='primary'
                    >
                        <BedIcon
                            sx={{
                                fontSize: { sx: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" },
                            }}
                        />
                    </NqtrRoundIconButton>
                );
            },
        },
    );

    RegisteredActivities.add([bed]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Callout type="info">
  Activities are connected to rooms in a many-to-many relationship, meaning that an activity can be present in multiple rooms and a room can contain multiple activities.
</Callout>

To use them, you must link them to a `room` [through the `activities` property](#navigation-and-map). This way, when the player is in that room, they will be able to see the activity and interact with it.

Alternatively, during the narrative session, it is possible to add an activity to a room using the `addActivity` function.

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  groupId="narrative_language"
    == start ==
    # add activity bed in mc_room
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  groupId="narrative_language"
    import { newLabel, showImageContainer } from "@drincs/pixi-vn";
    import { bed } from "../activities";
    import { mcRoom } from "../rooms";

    const startLabel = newLabel("start", [
        async () => {
            mcRoom.addActivity(bed); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Routine [#routine]

<Callout type="info">
  You can find more detailed documentation about these elements <DynamicLink href="/nqtr/routine">here</DynamicLink>.
</Callout>

`Routine` refers to the set of elements that make up the daily routine of non-player characters (NPC).

The routine is composed of `commitment`, which represent a character’s obligation to perform a specific activity at a certain moment of the day. These commitments are very similar to `activity`, as they represent an activity that the character performs.

For example:

<CodeBlockTabs defaultValue="values/routine.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/routine.tsx">
      values/routine.tsx
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/routine.tsx">
    ```ts
    import { RegisteredCommitments } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
    import NqtrRoundIconButton from "../components/NqtrRoundIconButton";
    import { NARRATION_ROUTE } from "../constans";
    import { TALK_SLEEP_LABEL_KEY } from "../labels/variousActionsLabelKeys";
    import Commitment from "../models/nqtr/Commitment";
    import { alice } from "./characters";

    export const aliceSleep = new Commitment("alice_sleep", alice, {
        priority: 1,
        timeSlot: {
            from: 20,
            to: 10,
        },
        background: "alice_roomsleep0A",
        icon: (commitment, props) => {
            return (
                <NqtrRoundIconButton
                    disabled={commitment.disabled}
                    onClick={() => {
                        if (commitment.run) {
                            commitment.run(props);
                        }
                    }}
                    ariaLabel={commitment.name}
                    variant='solid'
                    color='primary'
                >
                    <QuestionAnswerIcon
                        sx={{
                            fontSize: { sx: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" },
                        }}
                    />
                </NqtrRoundIconButton>
            );
        },
        onRun: async (_, event) => {
            await event.navigate(NARRATION_ROUTE);
            await narration.jump(TALK_SLEEP_LABEL_KEY, event);
        },
    });

    RegisteredCommitments.add([aliceSleep]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Callout type="info">
  Commitments are linked to rooms in a one-to-many relationship, meaning that a room can have multiple commitments, but a commitment is present in only one room (a character cannot be in multiple rooms at the same time).
</Callout>

To use them, you need to link them to a `room` [through the `commitments` property](#navigation-and-map). This will also set the NPC positions, as the position of a commitment is deduced from the room it is linked to. When the player is in that room, they will see the active commitments and be able to interact with them.

Alternatively, during the narrative session, it is possible to add a commitment to a room using the `addCommitment` function.

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  groupId="narrative_language"
    == start ==
    # add routine alice_sleep in alice_room
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceSleep } from "../routine";
    import { aliceRoom } from "../rooms";

    const startLabel = newLabel("start", [
        async () => {
            aliceRoom.addCommitment(aliceSleep); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Quests [#quests]

<Callout type="info">
  You can find more detailed documentation about these elements <DynamicLink href="/nqtr/quest">here</DynamicLink>.
</Callout>

`Quest` represent an objective or a series of objectives that the player can complete during the game. Quests are composed of `stage`, which represent the different phases of a quest. Each stage has a specific objective and can be completed in different ways depending on the player's choices.

For example:

<CodeBlockTabs defaultValue="values/quests/aliceQuest.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/quests/aliceQuest.tsx">
      values/quests/aliceQuest.tsx
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/quests/aliceQuest.tsx">
    ```ts
    import { RegisteredCommitments, RegisteredQuests, routine } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../../constans";
    import { TALK_ALICE_QUEST_KEY } from "../../labels/variousActionsLabelKeys";
    import TimeSlotsImage from "../../models/TimeSlotsImage";
    import Commitment from "../../models/nqtr/Commitment";
    import Quest from "../../models/nqtr/Quest";
    import Stage from "../../models/nqtr/Stage";
    import { orderProduct, takeProduct } from "../activities";
    import { alice } from "../characters";
    import { mcRoom, terrace } from "../rooms";

    export const aliceQuest = new Quest(
        "aliceQuest",
        [
            // stages
            new Stage("talk_alice1", {
                onStart: () => {
                    terrace.addCommitment(aliceQuest_talk);
                },
                name: "Talk to Alice",
                description: "Talk to Alice on the terrace",
            }),
            new Stage("order_products", {
                onStart: () => {
                    mcRoom.addActivity(orderProduct);
                },
                name: "Order products",
                description: "Order the products with your PC",
            }),
            new Stage("take_products", {
                onStart: (_, { notify }) => {
                    terrace.addActivity(takeProduct);
                    notify("You can take the products on the Terrace");
                },
                name: "Take products",
                description: "Take products on the Terrace",
                requestDescriptionToStart:
                    "Wait for the products you ordered to arrive (2 day)",
                deltaDateRequired: 2,
            }),
            new Stage("talk_alice2", {
                name: "Talk to Alice",
                description: "Talk to Alice on the terrace",
            }),
        ],
        {
            // props
            name: "Help Alice",
            description:
                'To learn more about how the repo works, Talk to Alice. \nGoing when she is there will automatically start an "Event" (see aliceQuest.tsx to learn more). \nAfter that an action will be added to open the pc, in MC room. \n\n(during the quest you can talk to Alice and you will see her talking during the quests of the same Quest)',
            image: "alice_terrace0A",
            onStart: (quest, { notify, uiTransition }) => {
                notify(
                    uiTransition("notify_quest_is_started", { quest: quest.name }),
                );
            },
            onContinue: (stage, { notify, uiTransition }) => {
                notify(
                    uiTransition("notify_quest_is_updated", { quest: stage.name }),
                );
            },
        },
    );

    RegisteredQuests.add(aliceQuest);

    const aliceQuest_talk = new Commitment("alice_quest_talk", alice, {
        timeSlot: {
            from: 10,
            to: 20,
        },
        image: new TimeSlotsImage("alice_terrace0A"),
        executionType: "automatic",
        priority: 1,
        onRun: async (_, props) => {
            await props.navigate(NARRATION_ROUTE);
            await narration.jump(TALK_ALICE_QUEST_KEY, props);
            routine.remove(aliceQuest_talk);
        },
    });

    RegisteredCommitments.add(aliceQuest_talk);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To start a quest, you need to call the `start` function on the quest itself. This will begin the first stage of the quest, allowing the player to start completing its objectives.

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    == start ==
    # start quest aliceQuest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceQuest } from "../values/quests";

    const startLabel = newLabel("start", [
        async (props) => {
            await aliceQuest.start(props); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To continue a quest that has already been started, you need to call the `continue` function on the quest itself. This will complete the current stage of the quest and move on to the next one.

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    == start ==
    # continue quest aliceQuest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceQuest } from "../values/quests";

    const startLabel = newLabel("start", [
        async (props) => {
            await aliceQuest.continue(props); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

During gameplay or narrative sequences, it is very useful to perform checks on the state of a quest, such as verifying whether a quest has been completed or if a specific stage has been reached. To do this, you can use various query functions available in the `Quest` class, such as `completed` or `failed`.

<Callout type="info">
  You can find a complete list of query functions in the `Quest` class documentation <DynamicLink href="/nqrt/quest#queries">here</DynamicLink>.
</Callout>

For example:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink  title="ink/variousActionsLabels.ink" groupId="narrative_language"
    === talkAliceQuest ===
    # show image background alice_terrace0At
    { aliceQuest_currentStageIndex:
    - 0:  -> talkAliceQuest0
    - 1:  -> talkAliceQuest1
    - 2:  -> talkAliceQuest2
    - else: alice: Thanks for the book.
    }
    -> DONE

    = talkAliceQuest0
    alice: Hi, can you order me a new book from pc?
    mc: Ok
    alice: Thanks
    # continue quest aliceQuest
    -> DONE

    = talkAliceQuest1
    mc: What book do you want me to order?
    alice: For me it is the same.
    -> DONE

    = talkAliceQuest2
    mc: I ordered the Book, hope you enjoy it.
    alice: Great, when it arrives remember to bring it to me.
    -> DONE

    = talkAliceQuest3
    mc: Here's your book.
    alice: Thank you, I can finally read something new.
    # continue quest aliceQuest
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Typescript">
    ```ts  title="labels/variousActionsLabels.ts" groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceQuest } from "../values/quests";

    export const talkAliceQuest = newLabel(
        TALK_ALICE_QUEST_KEY,
        () => {
            if (aliceQuest.currentStageIndex == 0) {
                return [
                    async () => {
                        narration.dialogue = {
                            character: alice,
                            text: "Hi, can you order me a new book from pc?",
                        };
                    },
                    () => {
                        narration.dialogue = { character: mc, text: "Ok" };
                    },
                    () => {
                        narration.dialogue = { character: alice, text: "Thanks" };
                    },
                    (props) => {
                        aliceQuest.continue(props);
                        narration.continue(props);
                    },
                ];
            } else if (aliceQuest.currentStageIndex == 1) {
                return [
                    async () => {
                        narration.dialogue = {
                            character: mc,
                            text: "What book do you want me to order?",
                        };
                    },
                    () => {
                        narration.dialogue = {
                            character: alice,
                            text: "For me it is the same.",
                        };
                    },
                ];
            } else if (aliceQuest.currentStageIndex == 2) {
                return [
                    async () => {
                        narration.dialogue = {
                            character: mc,
                            text: "I ordered the Book, hope you enjoy it.",
                        };
                    },
                    () => {
                        narration.dialogue = {
                            character: alice,
                            text: "Great, when it arrives remember to bring it to me.",
                        };
                    },
                ];
            } else if (aliceQuest.currentStageIndex == 3) {
                return [
                    async () => {
                        narration.dialogue = {
                            character: mc,
                            text: "Here's your book.",
                        };
                    },
                    () => {
                        narration.dialogue = {
                            character: alice,
                            text: "Thank you, I can finally read something new.",
                        };
                    },
                    (props) => {
                        aliceQuest.continue(props);
                        narration.continue(props);
                    },
                ];
            }
            return [
                () => {
                    narration.dialogue = {
                        character: alice,
                        text: "Thanks for the book.",
                    };
                },
            ];
        },
        {
            onStepStart: async (stepIndex) => {
                if (stepIndex == 0) {
                    await showImage(BACKGROUND_ID, "alice_terrace0At");
                }
            },
        },
    );
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Conclusion [#conclusion]

Now you know the basics for creating a Point & Click Adventure with Pixi’VN and NQTR. So far, we have only looked at the components provided by the template, but it is possible to create custom components to adapt them to the needs of your game. If you have some experience with JS/TS, I’m confident that by modifying the `.d.ts` files and creating classes that implement NQTR interfaces, you will be able to create custom components quickly and easily.

Make me proud by creating an amazing Point & Click Adventure with Pixi’VN and NQTR! 🚀

Now, you can try a small Point & Click Adventure created with the template to see in practice how the components work and interact with each other.

<iframe
  src="https://pixi-vn-point-and-click-example.pages.dev/demo"
  title="Point & Click Adventure Demo"
  style="{
      width: &#x22;100%&#x22;,
      height: &#x22;400px&#x22;,
      border: &#x22;0&#x22;,
      borderRadius: &#x22;4px&#x22;,
      overflow: &#x22;hidden&#x22;,
  }"
  allowFullScreen="true"
/>


# Navigation and map (/nqtr/navigation)



<Callout title="Nomenclature" type="info">
  Usually in video games, navigation elements used to identify the position of characters are called room, location (e.g. restaurant, house, hospital, etc.), and map. For this reason, names that follow this logic are used.

  This does not prevent you from using these elements to manage navigation with the same logic but with different terms. For example, in a game set in space where the player moves between planets, rooms can be the planets, locations can be the solar systems, and maps can be the galaxy.
</Callout>

The navigation system is composed of the following elements:

* `rooms`: The core elements of navigation, from which the position of the `mc` and `npc` is deduced.
* `locations`: A container of `rooms`.
* `maps`: A container of `locations`.

The player can move between `rooms`. The `location` and the `map` are also determined based on the `room` in which the player is located.

## Initialize [#initialize]

To initialize a `room`/`location`/`map`, create a new instance of the `RoomBaseModel` / `LocationBaseModel` / `MapBaseModel` class (or your [custom class](#custom-class)) and add it to the game room/location/map dictionary when the game is initialized.

<Callout type="info">
  It is recommended to import the instances at project startup, see the `src/main.ts` file.
</Callout>

To create a new instance of `RoomBaseModel`, you need the following parameters:

* `id`: A unique identifier (string). Used to reference the `room` in the game (must be unique).
* `location`: The `location` where the `room` is.
* `props`: An object with the room's properties:
  * `name` (Optional): The room's name.
  * `image` (Optional): The room's image URL.
  * `activities` (Optional): The <DynamicLink href="/nqtr/activity">activities</DynamicLink> available in this room.
  * `routine` (Optional): The <DynamicLink href="/nqtr/routine">commitments</DynamicLink> that run automatically when the player is in this room.
  * `disabled` (Optional): Whether the room is disabled. You can also pass a <DynamicLink href="/start/flags">Pixi’VN flag</DynamicLink> name.
  * `hidden` (Optional): Whether the room is hidden. You can also pass a <DynamicLink href="/start/flags">Pixi’VN flag</DynamicLink> name.
  * `icon` (Optional): The room's icon image URL.

To create a new instance of `LocationBaseModel`, you need the following parameters:

* `id`: A unique identifier (string). Used to reference the `location` in the game (must be unique).
* `map`: The `map` where the `location` is.
* `props`: An object with the location's properties:
  * `name` (Optional): The location's name.
  * `icon` (Optional): The location's icon image URL.
  * `activities` (Optional): The <DynamicLink href="/nqtr/activity">activities</DynamicLink> available in this location.
  * `disabled` (Optional): Whether the location is disabled. You can also pass a <DynamicLink href="/start/flags">Pixi’VN flag</DynamicLink> name.
  * `hidden` (Optional): Whether the location is hidden. You can also pass a <DynamicLink href="/start/flags">Pixi’VN flag</DynamicLink> name.

To create a new instance of `MapBaseModel`, you need the following parameters:

* `id`: A unique identifier (string). Used to reference the `map` in the game (must be unique).
* `props`: An object with the map's properties:
  * `name` (Optional): The map's name.
  * `image` (Optional): The map's image URL.
  * `activities` (Optional): The <DynamicLink href="/nqtr/activity">activities</DynamicLink> available in this map.

<CodeBlockTabs defaultValue="values/rooms.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/rooms.ts">
      values/rooms.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/locations.ts">
      values/locations.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/maps.ts">
      values/maps.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/rooms.ts">
    ```ts
    import { RegisteredRooms, RoomBaseModel } from "@drincs/nqtr";
    import { bed } from "./activities";
    import { mcHome } from "./locations";
    import { aliceSleep, aliceSmokes } from "./routine";

    export const mcRoom = new RoomBaseModel("mc_room", mcHome, {
        name: "MC room",
        image: "location_myroom",
        activities: [bed],
    });

    export const aliceRoom = new RoomBaseModel("alice_room", mcHome, {
        name: "Alice room",
        image: "location_aliceroom",
        routine: [aliceSleep],
    });

    export const annRoom = new RoomBaseModel("ann_room", mcHome, {
        name: "Ann room",
        image: "location_annroom",
    });

    export const bathroom = new RoomBaseModel("bathroom", mcHome, {
        name: "Bathroom",
        image: "location_bathroom",
    });

    export const lounge = new RoomBaseModel("lounge", mcHome, {
        name: "Lounge",
        image: "location_lounge",
    });

    export const terrace = new RoomBaseModel("terrace", mcHome, {
        name: "Terrace",
        image: "location_terrace",
        routine: [aliceSmokes],
    });

    RegisteredRooms.add([mcRoom, aliceRoom, annRoom, bathroom, lounge, terrace]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/locations.ts">
    ```ts
    import {
        LocationBaseModel,
        navigator,
        RegisteredLocations,
    } from "@drincs/nqtr";
    import { mainMap } from "./maps";

    export const mcHome = new LocationBaseModel("mc_home", mainMap, {
        name: "MC Home",
    });

    export const gym = new LocationBaseModel("gym", mainMap, {
        name: "Gym",
    });

    export const school = new LocationBaseModel("school", mainMap, {
        name: "School",
    });

    RegisteredLocations.add([mcHome, gym, school]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/maps.ts">
    ```ts
    import { MapBaseModel, RegisteredMaps } from "@drincs/nqtr";

    export const mainMap = new MapBaseModel("main_map", {
        name: "Main Map",
        image: "map",
    });

    export const nightcityMap = new MapBaseModel("nightcity_map", {
        name: "Nightcity",
        image: "nightcity_map",
    });

    RegisteredMaps.add([mainMap, nightcityMap]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="main.ts">
    ```ts
    import "./values/rooms";
    import "./values/locations";
    import "./values/maps";

    // ...
    ```
  </CodeBlockTab>
</CodeBlockTabs>

`RegisteredRooms.add` / `RegisteredLocations.add` / `RegisteredMaps.add` is **required** to save the `rooms`/`locations`/`maps` in the game.

You can also create a function to load `rooms`/`locations`/`maps`. The important thing is that it is called at least once before the `rooms`/`locations`/`maps` are used in the game, otherwise they will not be available.

It is also recommended to [set the current room](#navigate) during the start of the game.

```ts title="content/labels/start.label.ts"
import { navigator } from "@drincs/nqtr";
import { newLabel } from "@drincs/pixi-vn";
import { mcRoom } from "../values/rooms";

const startLabel = newLabel("start", [
    async () => {
        navigator.currentRoom = mcRoom;
        // ... other initialization logic
    },
]);
export default startLabel;
```

## Get [#get]

To get a `room`/`location`/`map` by its `id`, use the `RegisteredRooms.get` / `RegisteredLocations.get` / `RegisteredMaps.get` function.

<CodeBlockTabs defaultValue="Rooms">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Rooms">
      Rooms
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Locations">
      Locations
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Maps">
      Maps
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Rooms">
    ```ts
    import { RegisteredRooms } from "@drincs/nqtr";

    const mcRoom = RegisteredRooms.get("mc_room");
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Locations">
    ```ts
    import { RegisteredLocations } from "@drincs/nqtr";

    const mcHome = RegisteredLocations.get("mc_home");
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Maps">
    ```ts
    import { RegisteredMaps } from "@drincs/nqtr";

    const mainMap = RegisteredMaps.get("main_map");
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Get all [#get-all]

To get all `rooms`/`locations`/`maps`, use the `RegisteredRooms.values` / `RegisteredLocations.values` / `RegisteredMaps.values` function.

<CodeBlockTabs defaultValue="Rooms">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Rooms">
      Rooms
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Locations">
      Locations
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Maps">
      Maps
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Rooms">
    ```ts
    import { RegisteredRooms } from "@drincs/nqtr";

    const rooms = RegisteredRooms.values();
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Locations">
    ```ts
    import { RegisteredLocations } from "@drincs/nqtr";

    const locations = RegisteredLocations.values();
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Maps">
    ```ts
    import { RegisteredMaps } from "@drincs/nqtr";

    const maps = RegisteredMaps.values();
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Navigate [#navigate]

As explained above, the player can navigate between `rooms`, and the current `room` determines the current `location` and `map`.

To navigate to a `room`, set the `navigator.currentRoom` property to the desired room instance. This will automatically update the current `location` and `map` based on the room's location and map.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { navigator } from "@drincs/nqtr";
    import { mcRoom } from "../values/rooms";

    navigator.currentRoom = mcRoom;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {roomId} is the id of the room
    # enter room {roomId}
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Custom class [#custom-class]

<Callout title="Templates" type="info">
  In all templates, the `Room` / `Location` / `Map` class is already defined in the file `models/nqtr/Room.ts` / `models/nqtr/Location.ts` / `models/nqtr/Map.ts`. You can use it directly or modify it to suit your needs.
</Callout>

It is recommended to create your own class `Room` / `Location` / `Map` that extends `RoomStoredClass` / `LocationStoredClass` / `MapStoredClass` and "override" the interface `RoomInterface` / `LocationInterface` / `MapInterface` to add, edit, or remove properties or methods.

For example, if you want to create a class `Room` / `Location` / `Map`, you must "override" the interface `RoomInterface` / `LocationInterface` / `MapInterface` to use your properties or methods. (See the file `nqtr.d.ts`)

Now you can create a class `Room` / `Location` / `Map` that extends `RoomStoredClass` / `LocationStoredClass` / `MapStoredClass` and implements the `RoomInterface` / `LocationInterface` / `MapInterface`. (For more information on how to create a class in TypeScript, read [the official documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html))

To create a property that stores its value in the game storage, you can create [Getters/Setters](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters) and use the `this.getStorageProperty()` / `this.setStorageProperty()` methods. (See the file `Room.ts` / `Location.ts` / `Map.ts`)

<CodeBlockTabs defaultValue="models/nqtr/Room.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="models/nqtr/Room.ts">
      models/nqtr/Room.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="models/nqtr/Location.ts">
      models/nqtr/Location.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="models/nqtr/Map.ts">
      models/nqtr/Map.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="nqtr.d.ts">
      nqtr.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="models/nqtr/Room.ts">
    ```ts
    import {
        ActivityInterface,
        CommitmentInterface,
        LocationInterface,
        OnRunProps,
        RoomInterface,
        RoomStoredClass,
    } from "@drincs/nqtr";
    import { PixiUIParam, PixiUIProp } from "./ui-elements";

    export default class Room extends RoomStoredClass implements RoomInterface {
        constructor(
            id: string,
            location: LocationInterface,
            props: {
                name: string;
                disabled?: boolean | (() => boolean);
                hidden?: boolean | (() => boolean);
                background: PixiUIParam<Room>;
                activities?: ActivityInterface[];
                routine?: CommitmentInterface[];
                isEntrance?: boolean;
            },
        ) {
            super(id, location, {
                activities: props.activities || [],
                routine: props.routine || [],
            });
            this.name = props.name;
            this._defaultDisabled = props.disabled || false;
            this._defaultHidden = props.hidden || false;
            this._background = props.background;
            this.isEntrance = props.isEntrance || false;
        }
        readonly name: string;
        private readonly _background: PixiUIParam<Room>;
        get background(): PixiUIProp {
            const background = this._background;
            if (typeof background === "function") {
                return (runProps: OnRunProps) => background(this, runProps);
            }
            return background;
        }
        readonly isEntrance: boolean;
        private _defaultDisabled: boolean | (() => boolean) = false;
        get disabled(): boolean {
            let value =
                this.getStorageProperty<boolean>("disabled") ||
                this._defaultDisabled;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set disabled(value: boolean) {
            this.setStorageProperty("disabled", value);
        }
        private _defaultHidden: boolean | (() => boolean) = false;
        get hidden(): boolean {
            let value =
                this.getStorageProperty<boolean>("hidden") || this._defaultHidden;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set hidden(value: boolean) {
            this.setStorageProperty("hidden", value);
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="models/nqtr/Location.ts">
    ```ts
    import {
        ActivityInterface,
        LocationInterface,
        LocationStoredClass,
        MapInterface,
        OnRunProps,
        RoomInterface,
    } from "@drincs/nqtr";
    import { PixiUIParam, PixiUIProp } from "./ui-elements";

    export default class Location
        extends LocationStoredClass
        implements LocationInterface
    {
        constructor(
            id: string,
            map: MapInterface,
            props: {
                activities?: ActivityInterface[];
                name: string;
                disabled?: boolean | (() => boolean);
                hidden?: boolean | (() => boolean);
                sprite: PixiUIParam<Location>;
            },
        ) {
            super(id, map, props.activities);
            this.name = props.name;
            this._defaultDisabled = props.disabled || false;
            this._defaultHidden = props.hidden || false;
            this._sprite = props.sprite;
        }
        readonly name: string;
        private readonly _sprite: PixiUIParam<Location>;
        get sprite(): PixiUIProp {
            let sprite = this._sprite;
            if (typeof sprite === "function") {
                return (runProps: OnRunProps) => sprite(this, runProps);
            }
            return sprite;
        }
        private _defaultDisabled: boolean | (() => boolean) = false;
        get disabled(): boolean {
            let value =
                this.getStorageProperty<boolean>("disabled") ||
                this._defaultDisabled;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set disabled(value: boolean) {
            this.setStorageProperty("disabled", value);
        }
        private _defaultHidden: boolean | (() => boolean) = false;
        get hidden(): boolean {
            let value =
                this.getStorageProperty<boolean>("hidden") || this._defaultHidden;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set hidden(value: boolean) {
            this.setStorageProperty("hidden", value);
        }
        override get rooms(): RoomInterface[] {
            return super.rooms.filter((room) => !room.hidden);
        }
        get entrance(): RoomInterface | undefined {
            if (super.rooms.length === 0) {
                return undefined;
            }
            return super.rooms.find((room) => room.isEntrance) || super.rooms[0];
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="models/nqtr/Map.ts">
    ```ts
    import {
        ActivityInterface,
        LocationInterface,
        MapInterface,
        MapStoredClass,
        OnRunProps,
    } from "@drincs/nqtr";
    import { PixiUIParam, PixiUIProp } from "./ui-elements";

    export default class Map extends MapStoredClass implements MapInterface {
        constructor(
            id: string,
            props: {
                activities?: ActivityInterface[];
                name: string;
                background: PixiUIParam<Map>;
            },
        ) {
            super(id, props.activities);
            this.name = props.name;
            this._background = props.background;
        }
        readonly name: string;
        private readonly _background: PixiUIParam<Map>;
        get background(): PixiUIProp {
            const background = this._background;
            if (typeof background === "function") {
                return (runProps: OnRunProps) => background(this, runProps);
            }
            return background;
        }
        override get locations(): LocationInterface[] {
            return super.locations.filter((location) => !location.hidden);
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="nqtr.d.ts">
    ```ts
    import { PixiUIProp } from "./models/nqtr/ui-elements";

    declare module "@drincs/nqtr" {
        interface RoomInterface {
            /**
             * The name.
             * If you set undefined, it will return the initial value of name.
             */
            readonly name: string;
            /**
             * The background of the room.
             */
            readonly background: PixiUIProp;
            /**
             * Whether is disabled.
             */
            disabled: boolean;
            /**
             * Whether is hidden.
             */
            hidden: boolean;
            /**
             * If is the entrance of the location. (the first room)
             */
            readonly isEntrance: boolean;
        }
        interface LocationInterface {
            /**
             * The name of the location.
             * If you set undefined, it will return the initial value of name.
             */
            readonly name: string;
            /**
             * Whether is disabled.
             */
            disabled: boolean;
            /**
             * Whether is hidden.
             */
            hidden: boolean;
            /**
             * The sprite of the location.
             */
            readonly sprite: PixiUIProp;
            /**
             * The entrance room of the location.
             */
            readonly entrance: RoomInterface | undefined;
        }
        interface MapInterface {
            /**
             * The name of the map.
             */
            readonly name: string;
            /**
             * The background of the map.
             */
            readonly background: PixiUIProp;
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## FAQ [#faq]

<Accordions>
  <Accordion title="How do I set a room for a location that will open by default?" id="how-set-default-room-for-location">
    The developer can designate an "index" `room` for locations.

    To set a default room for a location, you can add in your [Custom class](#custom-class) a property `isEntrance` to the `Room` class, which will be set to `true` for the default room of the location, and then use the `entrance` property of the `Location` class to get the default room.

    For example:

    <CodeBlockTabs defaultValue="mcRoom.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="mcRoom.ts">
          mcRoom.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="models/nqtr/Room.ts">
          models/nqtr/Room.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="models/nqtr/Location.ts">
          models/nqtr/Location.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="nqtr.d.ts">
          nqtr.d.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="mcRoom.ts">
        ```ts
        import { navigator, RegisteredRooms } from "@drincs/nqtr";
        import { ImageSprite } from "@drincs/pixi-vn";
        import { NAVIGATION_ROUTE } from "../constans";
        import Location from "../models/nqtr/Location";
        import Room from "../models/nqtr/Room";
        import { mainMap } from "./maps";

        export const mcHome = new Location("mc_home", mainMap, {
            name: "MC Home",
            icon: (location, { navigate }) => {
                const icon = new ImageSprite(
                    {
                        xAlign: 0.3,
                        yAlign: 0.2,
                        height: 120,
                        width: 120,
                        eventMode: "static",
                        cursor: "pointer",
                    },
                    "icon_location_home",
                );
                icon.on("pointerdown", () => {
                    const entrance = location.entrance;
                    if (entrance) {
                        navigator.currentRoom = entrance;
                        navigate(NAVIGATION_ROUTE);
                    }
                });
                icon.load();
                return icon;
            },
        });

        export const mcRoom = new Room("mc_room", mcHome, {
            name: "MC room",
            image: "location_myroom",
            isEntrance: true, // This room is the entrance of the location
        });

        RegisteredRooms.add([mcRoom]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="models/nqtr/Room.ts">
        ```ts
        import { RoomInterface, RoomStoredClass } from "@drincs/nqtr";

        export default class Room extends RoomStoredClass implements RoomInterface {
            constructor() {
                // ... other initializations
                this.isEntrance = props.isEntrance || false;
            }
            // ... other methods and properties
            readonly isEntrance: boolean;
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="models/nqtr/Location.ts">
        ```ts
        import {
            LocationInterface,
            LocationStoredClass,
            RoomInterface,
        } from "@drincs/nqtr";

        export default class Location
            extends LocationStoredClass
            implements LocationInterface
        {
            // ... other methods and properties
            get entrance(): RoomInterface | undefined {
                if (super.rooms.length === 0) {
                    return undefined;
                }
                return super.rooms.find((room) => room.isEntrance) || super.rooms[0];
            }
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="nqtr.d.ts">
        ```ts
        declare module "@drincs/nqtr" {
            interface LocationInterface {
                /**
                 * The entrance room of the location.
                 */
                readonly entrance: RoomInterface | undefined;
            }
            interface RoomInterface {
                /**
                 * If is the entrance of the location. (the first room)
                 */
                readonly isEntrance: boolean;
            }
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Quests (/nqtr/quest)



The quest system is a way to create and manage quests in your game. Quests can have multiple stages, and players can complete them to earn rewards or progress in the story.

## Initialize [#initialize]

To initialize a `quest`, create a new instance of the `QuestBaseModel` class (or your [custom class](#custom-class)) and add it to the game quest dictionary when the game is initialized.

<Callout type="info">
  It is recommended to import the instances at project startup, see the `src/main.ts` file.
</Callout>

To create a new instance of `QuestBaseModel`, you need the following parameters:

<CodeBlockTabs defaultValue="values/aliceQuest.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/aliceQuest.ts">
      values/aliceQuest.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/aliceQuest.ts">
    ```ts
    import { QuestBaseModel, RegisteredQuests, StageBaseModel } from "@drincs/nqtr";
    import { orderProduct, takeProduct } from "../quests";
    import { mcRoom, terrace } from "../rooms";

    export const aliceQuest = new QuestBaseModel(
        "aliceQuest",
        [
            // stages
            new StageBaseModel("talk_alice1", {
                name: "Talk to Alice",
                description: "Talk to Alice on the terrace",
            }),
            new StageBaseModel("order_products", {
                onStart: () => {
                    mcRoom.addActivity(orderProduct);
                },
                name: "Order products",
                description: "Order the products with your PC",
            }),
            new StageBaseModel("take_products", {
                onStart: (_, { notify }) => {
                    terrace.addActivity(takeProduct);
                    notify("You can take the products on the Terrace");
                },
                name: "Take products",
                description: "Take products on the Terrace",
                requestDescriptionToStart:
                    "Wait for the products you ordered to arrive (2 day)",
                deltaDateRequired: 2,
            }),
            new StageBaseModel("talk_alice2", {
                name: "Talk to Alice",
                description: "Talk to Alice on the terrace",
            }),
        ],
        {
            // props
            name: "Help Alice",
            description:
                'To learn more about how the repo works, Talk to Alice. \nGoing when she is there will automatically start an "Event" (see aliceQuest.tsx to learn more). \nAfter that an action will be added to open the pc, in MC room. \n\n(during the quest you can talk to Alice and you will see her talking during the quests of the same Quest)',
            image: "alice_terrace0A",
            onStart: (quest, { notify, uiTransition }) => {
                notify(
                    uiTransition("notify_quest_is_started", { quest: quest.name }),
                );
            },
            onContinue: (stage, { notify, uiTransition }) => {
                notify(
                    uiTransition("notify_quest_is_updated", { quest: stage.name }),
                );
            },
        },
    );

    RegisteredQuests.add(aliceQuest);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="main.ts">
    ```ts
    import "./values/aliceQuest";

    // ...
    ```
  </CodeBlockTab>
</CodeBlockTabs>

`RegisteredQuests.add` is **required** to save the `quests` in the game.

You can also create a function to load `quests`. The important thing is that it is called at least once before the `quests` are used in the game, otherwise they will not be available.

## Start [#start]

To start a `quest`, you can use the `start` method of the Quest class. This method will set the current stage to the first stage of the quest and trigger the `onStart` action defined in the quest. This function has the following parameters:

* `props`: the properties that will be passed to `onStart`. Its interface corresponds to <DynamicLink href="/nqtr#onrunprops">`OnRunProps`</DynamicLink>.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceQuest } from "../values/quests";

    const startLabel = newLabel("start", [
        async (props) => {
            await aliceQuest.start(props); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    //  {aliceQuest} the id of the quest
    # start quest {aliceQuest}
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Continue [#continue]

To go to the next stage of a `quest`, you can use the `continue` method of the Quest class. This method will set the current stage to the next stage of the quest and trigger the `onContinue` action defined in the quest. This function has the following parameters:

* `props`: the properties that will be passed to `onContinue`. Its interface corresponds to <DynamicLink href="/nqtr#onrunprops">`OnRunProps`</DynamicLink>.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel } from "@drincs/pixi-vn";
    import { aliceQuest } from "../values/quests";

    const startLabel = newLabel("start", [
        async (props) => {
            await aliceQuest.continue(props); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    === start ===
    //  {aliceQuest} the id of the quest
    # continue quest {aliceQuest}
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="Go next only if is completed" id="go-next-only-if-is-completed">
    To go to the next stage of a `quest` only if the current stage is completed, you can use the `advanceIfCompleted` method of the Quest class. This method will check if the current stage is completed and then set the current stage to the next stage of the quest and trigger the `onContinue` action defined in the quest. This function has the following parameters:

    * `props`: the properties that will be passed to `onContinue`. Its interface corresponds to <DynamicLink href="/nqtr#onrunprops">`OnRunProps`</DynamicLink>.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel } from "@drincs/pixi-vn";
        import { aliceQuest } from "../values/quests";

        const startLabel = newLabel("start", [
            async (props) => {
                await aliceQuest.advanceIfCompleted(props); // [!code focus]
            },
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>

## Get [#get]

To get a `quest` by its `id`, use the `RegisteredQuests.get` function.

```ts
import { RegisteredQuests } from "@drincs/nqtr";

const aliceQuest = RegisteredQuests.get("aliceQuest");
```

## Get all [#get-all]

To get all `quests`, use the `RegisteredQuests.values` function.

```ts
import { RegisteredQuests } from "@drincs/nqtr";

const quests = RegisteredQuests.values();
```

## Custom class [#custom-class]

<Callout title="Templates" type="info">
  In all templates, the `Quest` class is already defined in the file `models/nqtr/Quest.ts`. You can use it directly or modify it to suit your needs.
</Callout>

It is recommended to create your own class `Quest` that extends `QuestStoredClass` and "override" the interface `QuestInterface` to add, edit, or remove properties or methods.

For example, if you want to create a class `Quest`, you must "override" the interface `QuestInterface` to use your properties or methods. (See the file `nqtr.d.ts`)

Now you can create a class `Quest` that extends `QuestStoredClass` and implements the `QuestInterface`. (For more information on how to create a class in TypeScript, read [the official documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html))

To create a property that stores its value in the game storage, you can create [Getters/Setters](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters) and use the `this.getStorageProperty()` / `this.setStorageProperty()` methods. (See the file `Quest.ts`)

<CodeBlockTabs defaultValue="models/nqtr/Quest.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="models/nqtr/Quest.ts">
      models/nqtr/Quest.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="nqtr.d.ts">
      nqtr.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="models/nqtr/Quest.ts">
    ```ts
    import {
        QuestInterface,
        QuestStoredClass,
        QuestStoredClassProps,
        StageInterface,
    } from "@drincs/nqtr";

    export default class Quest extends QuestStoredClass implements QuestInterface {
        constructor(
            id: string,
            _stages: StageInterface[],
            props: {
                name?: string;
                description?: string;
                image?: string;
                inDevelopment?: boolean;
            } & QuestStoredClassProps,
        ) {
            super(id, _stages, props);
            this.name = props.name || "";
            this.description = props.description || "";
            this.image = props.image;
            this.inDevelopment = props.inDevelopment || false;
        }
        readonly name: string;
        readonly description: string;
        readonly image?: string;
        readonly inDevelopment: boolean;
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="nqtr.d.ts">
    ```ts
    declare module "@drincs/nqtr" {
        interface QuestInterface {
            /**
             * The name of the quest.
             */
            readonly name: string;
            /**
             * The description of the quest.
             */
            readonly description: string;
            /**
             * The image of the quest.
             */
            readonly image?: string;
            /**
             * If the quest is in development.
             */
            readonly inDevelopment: boolean;
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## FAQ [#faq]

<Accordions>
  <Accordion title="Fail a quest" id="fail-quest">
    To fail a quest, you can use the `failed` property of the `QuestBaseModel` class. This property is a boolean that indicates whether the quest has been failed or not. You can set it to `true` to fail the quest.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel } from "@drincs/pixi-vn";
        import { aliceQuest } from "../values/quests";

        const startLabel = newLabel("start", [
            async (props) => {
                aliceQuest.failed = true; // [!code focus]
            },
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="queries" id="queries">
    To query the state of a quest, you can use the following properties and methods:

    `currentStageIndex`: the index of the current stage of the quest. It starts at `0` and goes up to `stages.length - 1`. If the quest is completed, it will be equal to `stages.length`.

    * `started`: a boolean that indicates whether the quest has been started or not.
    * `completed`: a boolean that indicates whether the quest has been completed or not.
    * `failed`: a boolean that indicates whether the quest has been failed or not.

    <CodeBlockTabs defaultValue="Typescript">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="Typescript">
          Typescript
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink">
          ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="Typescript">
        ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
        import { newLabel } from "@drincs/pixi-vn";
        import { aliceQuest } from "../values/quests";

        const startLabel = newLabel("start", [
            async () => {
                await showImage(BACKGROUND_ID, "alice_terrace0At");
                narration.dialogue = {
                    character: alice,
                    text: "Hi, what do you want to talk about?",
                };
                let optionsMenu: StoredChoiceInterface[] = [];
                if (aliceQuest.started) {
                    // [!code focus]
                    optionsMenu.push(newChoiceOption("Quest started", startLabel, {}));
                }
                if (aliceQuest.completed) {
                    // [!code focus]
                    optionsMenu.push(
                        newChoiceOption("Quest completed", startLabel, {}),
                    );
                }
                if (aliceQuest.failed) {
                    // [!code focus]
                    optionsMenu.push(newChoiceOption("Quest failed", startLabel, {}));
                }
                if (aliceQuest.currentStageIndex === 3) {
                    // [!code focus]
                    optionsMenu.push(
                        newChoiceOption("Quest not started", startLabel, {}),
                    );
                }
                narration.choices = [...optionsMenu, newCloseChoiceOption("Cancel")];
            },
        ]);
        export default startLabel;
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink">
        ```ink  title="ink/start.ink" groupId="narrative_language"
        === start ===
        //  {aliceQuest} the id of the quest
        + {aliceQuest_started} Quest started
            -> start
        + {aliceQuest_completed} Quest completed
            -> start
        + {aliceQuest_failed} Quest failed
            -> start
        + {aliceQuest_currentStageIndex == 3} Quest not started
            -> start
        + Cancel
            -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# Routine (/nqtr/routine)



## Initialize [#initialize]

To initialize a `commitment`, create a new instance of the `CommitmentBaseModel` class (or your [custom class](#custom-class)) and add it to the game commitment dictionary when the game is initialized.

<Callout type="info">
  It is recommended to import the instances at project startup, see the `src/main.ts` file.
</Callout>

To create a new instance of `CommitmentBaseModel`, you need the following parameters:

* `id`: A unique identifier (string). Used to reference the `commitment` in the game (must be unique).
* `character`: The character or characters that are in the commitment and so in the room. It can be a single character or an array of characters.
* `props`: An object with the commitment's properties:
  * `name`: The name of the commitment (Optional).
  * `image`: The image of the commitment (Optional). It can be a string with the path to the image or a function that returns a `ContainerChild` (Optional).
  * `icon`: The React icon of the commitment (Optional). It can be a React element or a function that returns a React element (Optional).
  * `onRun`: A function that is called when the commitment is run. It receives two parameters:
    * The `commitment` instance itself.
    * `event`: The event that triggered the run. It is an instance of `OnRunEvent<CommitmentInterface>`, which contains methods to navigate to other routes, jump to labels, and more.
  * `disabled`: Whether the commitment is disabled. It can be a boolean or a function that returns a boolean (optional, default is `false`). If it is disabled, this commitment will not be taken into consideration, so the characters will not be in the room, but will be busy with other commitments.
  * `hidden`: Whether the commitment is hidden. It can be a boolean or a function that returns a boolean (optional, default is `false`). If it is hidden, the commitment will not be displayed in the UI.
  * `priority`: The priority of the commitment. The higher the number, the higher the priority (optional, default is `0`).
  * `executionType`: The execution type of the commitment. It can be "automatic" or "interaction". If it is "automatic", the `onRun` function will be called automatically when the player is in the room. If it is "interaction", the player must interact with the character to run the `onRun` function (optional, default is "interaction").
  * `dateScheduling`: Used to schedule what date it will be added and removed. It is an instance of `DateSchedulingInterface` (Optional).
  * `timeSlot`: The time slot in which the commitment will be active. It is an instance of `TimeSchedulingInterface` (Optional).

<CodeBlockTabs defaultValue="values/routine.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/routine.ts">
      values/routine.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/routine.ts">
    ```ts
    import { CommitmentBaseModel, RegisteredCommitments } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../constans";
    import { TALK_SLEEP_LABEL_KEY } from "../labels/variousActionsLabelKeys";
    import { aliceTalkMenuLabel } from "../labels/variousActionsLabels";
    import { alice } from "./characters";

    export const aliceSleep = new CommitmentBaseModel("alice_sleep", alice, {
        priority: 1,
        timeSlot: {
            from: 20,
            to: 10,
        },
        onRun: async (_, event) => {
            await event.navigate(NARRATION_ROUTE);
            await narration.jump(TALK_SLEEP_LABEL_KEY, event);
        },
    });

    export const aliceGoSchool = new CommitmentBaseModel("alice_go_school", alice, {
        timeSlot: {
            from: 8,
            to: 14,
        },
        priority: 2,
    });

    export const aliceSmokes = new CommitmentBaseModel("alice_smokes", alice, {
        timeSlot: {
            from: 10,
            to: 20,
        },
        onRun: async (_, event) => {
            await event.navigate(NARRATION_ROUTE);
            await narration.jump(aliceTalkMenuLabel, event);
        },
    });

    RegisteredCommitments.add([aliceSleep, aliceGoSchool, aliceSmokes]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="main.ts">
    ```ts
    import "./values/routine";

    // ...
    ```
  </CodeBlockTab>
</CodeBlockTabs>

`RegisteredCommitments.add` is **required** to save the `commitments` in the game.

You can also create a function to load `commitments`. The important thing is that it is called at least once before the `commitments` are used in the game, otherwise they will not be available.

## Link [#link]

For an `commitment` to be linked to a `room`, the `room` must be included in the `Commitment` instance. The relationship between a `commitment` and a `room` is one-to-many, meaning that a `rooms` can be linked to multiple `commitments`, but a `commitment` can only be linked to one `room` (a character cannot be in two places at the same time).

There are two ways to do this:

### During game initialization [#during-game-initialization]

For a `commitment` to be available to the player, it must be linked to a `room`.

<CodeBlockTabs defaultValue="values/rooms.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="values/rooms.ts">
      values/rooms.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/routine.ts">
      values/routine.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="values/rooms.ts">
    ```ts
    import { RegisteredRooms, RoomBaseModel } from "@drincs/nqtr";
    import { mcHome } from "./locations";
    import { aliceSleep } from "./routine";

    export const aliceRoom = new RoomBaseModel("alice_room", mcHome, {
        name: "Alice room",
        background: "location_aliceroom",
        routine: [aliceSleep], // [!code ++]
    });

    RegisteredRooms.add([aliceRoom]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/routine.ts">
    ```ts
    import { CommitmentBaseModel, RegisteredCommitments } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../constans";
    import { TALK_SLEEP_LABEL_KEY } from "../labels/variousActionsLabelKeys";
    import { alice } from "./characters";

    export const aliceSleep = new CommitmentBaseModel("alice_sleep", alice, {
        priority: 1,
        timeSlot: {
            from: 20,
            to: 10,
        },
        onRun: async (_, event) => {
            await event.navigate(NARRATION_ROUTE);
            await narration.jump(TALK_SLEEP_LABEL_KEY, event);
        },
    });

    RegisteredCommitments.add([aliceSleep]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### During the game [#during-the-game]

You can also link a commitment to a room during the game. This feature is useful if you want to temporarily add a commitment. The list of routine added this way will be included in your game saves.

To link a commitment to a room during the game, you can use the `addCommitment` method.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/routine.ts">
      values/routine.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="content/labels/start.label.ts" groupId="narrative_language"
    import { newLabel, showImageContainer } from "@drincs/pixi-vn";
    import { aliceSmokes } from "../routine";
    import { terrace } from "../rooms";

    const startLabel = newLabel("start", [
        async () => {
            terrace.addCommitment(aliceSmokes); // [!code focus]
        },
    ]);
    export default startLabel;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="ink/start.ink" groupId="narrative_language"
    == start ==
    // {alice_smokes} is the id of the commitment
    # add routine {alice_smokes} in terrace
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/routine.ts">
    ```ts
    import { CommitmentBaseModel, RegisteredCommitments } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../constans";
    import { aliceTalkMenuLabel } from "../labels/variousActionsLabels";
    import { alice } from "./characters";

    export const aliceSmokes = new CommitmentBaseModel("alice_smokes", alice, {
        timeSlot: {
            from: 10,
            to: 20,
        },
        onRun: async (_, event) => {
            await event.navigate(NARRATION_ROUTE);
            await narration.jump(aliceTalkMenuLabel, event);
        },
    });

    RegisteredCommitments.add([aliceSmokes]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Unlink [#unlink]

To detach a `commitment` from a `room`, you must first consider how it was linked.

If it was linked during the game initialization, it cannot be removed. However, you can add another `commitment` with the same character at the same time slot, so the character will be occupied with the new `commitment` and therefore will no longer be present in the previous `room`. By default, priority is given to the `commitment` added during gameplay over the one added during initialization, but this behavior can be modified using the `priority` property.

If it was linked during gameplay, it can be removed using the `removeCommitment` method.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="values/routine.ts">
      values/routine.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { aliceSmokes } from "../routine";
    import { routine } from "@drincs/nqtr";

    routine.remove(aliceSmokes);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {alice_smokes} is the id of the commitment
    # remove routine {alice_smokes}
    ```
  </CodeBlockTab>

  <CodeBlockTab value="values/routine.ts">
    ```ts
    import { CommitmentBaseModel, RegisteredCommitments } from "@drincs/nqtr";
    import { narration } from "@drincs/pixi-vn";
    import { NARRATION_ROUTE } from "../constans";
    import { aliceTalkMenuLabel } from "../labels/variousActionsLabels";
    import { alice } from "./characters";
    import { terrace } from "./rooms";

    const aliceSmokes = new CommitmentBaseModel("alice_smokes", alice, terrace, {
        timeSlot: {
            from: 10,
            to: 20,
        },
        onRun: (_, event) => {
            event.navigate(NARRATION_ROUTE);
            narration.jump(aliceTalkMenuLabel, event);
        },
    });

    RegisteredCommitments.add([aliceSmokes]);
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Get [#get]

To get a `commitment` by its `id`, use the `RegisteredCommitments.get` function.

```ts
import { RegisteredCommitments } from "@drincs/nqtr";

const aliceWorks = RegisteredCommitments.get("alice_works");
```

## Get all [#get-all]

To get all `commitments`, use the `RegisteredCommitments.values` function.

```ts
import { RegisteredCommitments } from "@drincs/nqtr";

const commitments = RegisteredCommitments.values();
```

## Custom class [#custom-class]

<Callout title="Templates" type="info">
  In all templates, the `Commitment` class is already defined in the file `models/nqtr/Commitment.ts`. You can use it directly or modify it to suit your needs.
</Callout>

It is recommended to create your own class `Commitment` that extends `CommitmentStoredClass` and "override" the interface `CommitmentInterface` to add, edit, or remove properties or methods.

For example, if you want to create a class `Commitment`, you must "override" the interface `CommitmentInterface` to use your properties or methods. (See the file `nqtr.d.ts`)

Now you can create a class `Commitment` that extends `CommitmentStoredClass` and implements the `CommitmentInterface`. (For more information on how to create a class in TypeScript, read [the official documentation](https://www.typescriptlang.org/docs/handbook/2/classes.html))

To create a property that stores its value in the game storage, you can create [Getters/Setters](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters) and use the `this.getStorageProperty()` / `this.setStorageProperty()` methods. (See the file `Commitment.ts`)

<CodeBlockTabs defaultValue="models/nqtr/Commitment.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="models/nqtr/Commitment.ts">
      models/nqtr/Commitment.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="nqtr.d.ts">
      nqtr.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="models/nqtr/Commitment.ts">
    ```ts
    import {
        ActiveScheduling,
        CommitmentInterface,
        CommitmentStoredClass,
        CommitmentStoredClassProps,
        OnRunAsyncFunction,
        OnRunEvent,
        OnRunProps,
    } from "@drincs/nqtr";
    import { CharacterInterface } from "@drincs/pixi-vn";
    import {
        PixiUIParam,
        PixiUIProp,
        ReactUIParam,
        ReactUIProp,
    } from "./ui-elements";

    export default class Commitment
        extends CommitmentStoredClass
        implements CommitmentInterface
    {
        constructor(
            id: string,
            characters: CharacterInterface | CharacterInterface[],
            props: {
                name?: string;
                image?: PixiUIParam<Commitment>;
                background?: PixiUIParam<Commitment>;
                icon?: ReactUIParam<Commitment>;
                onRun?: OnRunEvent<CommitmentInterface>;
                disabled?: boolean | (() => boolean);
                hidden?: boolean | (() => boolean);
            } & CommitmentStoredClassProps,
        ) {
            characters = Array.isArray(characters) ? characters : [characters];
            super(id, characters, props.onRun, props);
            this.name = props.name || "";
            this._image = props.image;
            this._background = props.background;
            this._icon = props.icon;
            this._defaultDisabled = props.disabled || false;
            this._defaultHidden = props.hidden || false;
        }
        readonly name: string;
        private readonly _image?: PixiUIParam<Commitment>;
        get sprite(): PixiUIProp | undefined {
            const image = this._image;
            if (typeof image === "function") {
                return (runProps: OnRunProps) => image(this, runProps);
            }
            return image;
        }
        private readonly _background?: PixiUIParam<Commitment>;
        get background(): PixiUIProp | undefined {
            const background = this._background;
            if (typeof background === "function") {
                return (runProps: OnRunProps) => background(this, runProps);
            }
            return background;
        }
        private readonly _icon?: ReactUIParam<Commitment>;
        get icon(): ReactUIProp | undefined {
            const icon = this._icon;
            if (typeof icon === "function") {
                return (runProps: OnRunProps) => icon(this, runProps);
            }
            return icon;
        }
        private _defaultDisabled: boolean | (() => boolean) = false;
        get disabled(): boolean {
            let value =
                this.getStorageProperty<boolean>("disabled") ||
                this._defaultDisabled;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set disabled(value: boolean) {
            this.setStorageProperty("disabled", value);
        }
        private _defaultHidden: boolean | (() => boolean) = false;
        get hidden(): boolean {
            let value =
                this.getStorageProperty<boolean>("hidden") || this._defaultHidden;
            if (typeof value === "function") {
                return value();
            }
            return value;
        }
        set hidden(value: boolean) {
            this.setStorageProperty("hidden", value);
        }
        override isActive(options?: ActiveScheduling): boolean {
            if (this.hidden) {
                return false;
            }
            return super.isActive(options);
        }
        override get run(): OnRunAsyncFunction {
            return async (runProps: OnRunProps) => {
                const res = await super.run(runProps);
                await runProps.invalidateInterfaceData();
                return res;
            };
        }
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="nqtr.d.ts">
    ```ts
    import { ReactElement } from "react";
    import { ContainerChild } from "@drincs/pixi-vn";

    declare module "@drincs/nqtr" {
        interface CommitmentInterface {
            /**
             * The name of the commitment.
             */
            readonly name: string;
            /**
             * The sprite of the commitment.
             */
            readonly sprite?: PixiUIProp;
            /**
             * The background of the commitment.
             */
            readonly background?: PixiUIProp;
            /**
             * The React icon of the commitment.
             */
            readonly icon?: ReactUIProp;
            /**
             * Whether is disabled.
             */
            disabled: boolean;
            /**
             * Whether is hidden.
             */
            hidden: boolean;
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# Time system (/nqtr/time)



<Callout title="Nomenclature" type="info">
  It was decided to use the very generic terms date and time. The reason is that, depending on what is being developed, time can correspond to hours, minutes, or a long period of time. The same applies to date.
</Callout>

The time system is composed of the following elements:

* `date`: A counter used to determine the date of the game.
* `time`: A counter is used to determine the time of day and which is reset every time date is incremented.

You can use `timeTracker` instance to manage your time system. It provides methods to initialize, get, increment time, etc. The time system is designed to be flexible and can be adapted to various game requirements.

## Initialize [#initialize]

To initialize the time system, you need use the `initialize` method of the `timeTracker` instance. This function has the following parameters:

* `defaultTimeSpent`: The default time spent in the game (number). It is used to increment the time when no specific time is set.
* `dayStartTime`: The minimum time of the day (number). It is used to determine the start time of the day.
* `dayEndTime`: The maximum time of the day (number). It is used to determine the end time of the day.
* `timeSlots`: An array of time slots. Each slot is an object with the following properties:
  * `name`: The name of the time slot (string).
  * `startTime`: The start time of the time slot (number). It is used to determine the start time of the slot.
* `weekLength`: The length of the week (number). It is used to determine the number of days in the week.
* `weekendStartDay`: The start day of the weekend (number). It is used to determine the weekend days.
* `getDayName`: A function that returns the name of the day based on the week day number (number). It is used to determine the name of the day.

```ts title="main.ts"
timeTracker.initialize({
    defaultTimeSpent: 1,
    dayStartTime: 0,
    dayEndTime: 24,
    timeSlots: [
        { name: "Morning", startTime: 5 },
        { name: "Afternoon", startTime: 12 },
        { name: "Evening", startTime: 18 },
        { name: "Night", startTime: 22 },
    ],
    getDayName: (weekDayNumber: number) => {
        const weekDaysNames = [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday",
        ];
        return weekDaysNames[weekDayNumber];
    },
    weekendStartDay: 6,
    weekLength: 7,
});
```

## Get [#get]

To get a current `time`, use the `timeTracker.currentTime` property. It returns the current time as a number.

```typescript
import { timeTracker } from "@drincs/nqtr";

const currentTime: number = timeTracker.currentTime;
```

To get a current `date`, use the `timeTracker.currentDate` property. It returns the current date as a number.

```typescript
import { timeTracker } from "@drincs/nqtr";

const currentDate: number = timeTracker.currentDate;
```

## Set [#set]

To set a specific `time`, use the `timeTracker.currentTime` property. It accepts a number representing the time to set.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { timeTracker } from "@drincs/nqtr";

    timeTracker.currentTime = 12; // Set time to 12
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {value} is a number representing the time to set
    # set time {value}
    // you can use a float number to set the time with decimals
    # set time 18.30
    # set time 18:30 // if you prefer to use the colon as a separator, it will be converted to a dot internally
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To set a specific `date`, use the `timeTracker.currentDate` property. It accepts a number representing the date to set.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { timeTracker } from "@drincs/nqtr";

    timeTracker.currentDate = 5; // Set date to 5
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {value} is a number representing the date to set
    # set date {value}
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Increment [#increment]

`timeTracker` has some functions to increment the time and date with some additional logic.

To increment the current `time` by a specific amount, use the `increaseTime` method. In case that the new time exceeds the `dayEndTime`, it will automatically increment the date and reset the time to the `dayStartTime` plus the overflow time.
This function has the following parameters:

* `delta`: The amount of time to increment (number). If not provided, it defaults to the `defaultTimeSpent` value.

To increment the current `date` by a specific amount, use the `increaseDate` method. This function has the following parameters:

* `delta`: The number of days to increase (number). If not provided, it defaults to 1.
* `time`: The time of the new day (number). If not provided, it defaults to the `dayStartTime`.

<CodeBlockTabs defaultValue="Typescript">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Typescript">
      Typescript
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Typescript">
    ```ts  title="index.ts" groupId="narrative_language"
    import { timeTracker } from "@drincs/nqtr";

    timeTracker.increaseTime(2);
    timeTracker.increaseDate(1, 8); // Increment date by 1 and set time to 8
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink">
    ```ink  title="index.ink" groupId="narrative_language"
    // {timeValue} is a number representing the amount of time to increment
    // {dateValue} is a number representing the amount of days to increment
    # wait {timeValue} // Increment time by {value}
    # wait // Increment time by defaultTimeSpent
    # wait days {dateValue} // Increment date by {dateValue} and set time to dayStartTime
    # wait days {dateValue} hours {timeValue} // Increment date by {dateValue} and time by {timeValue}
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Is weekend [#is-weekend]

To check if the current day is a weekend, use the `timeTracker.isWeekend` property. It returns a boolean indicating whether the current day is a weekend.

<CodeBlockTabs defaultValue="Example">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Example">
      Example
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Example">
    ```ts
    import { timeTracker } from "@drincs/nqtr";

    const isWeekend: boolean = timeTracker.isWeekend;
    ```
  </CodeBlockTab>

  <CodeBlockTab value="main.ts">
    ```ts
    timeTracker.initialize({
        defaultTimeSpent: 1,
        dayStartTime: 0,
        dayEndTime: 24,
        timeSlots: [
            { name: "Morning", startTime: 5 },
            { name: "Afternoon", startTime: 12 },
            { name: "Evening", startTime: 18 },
            { name: "Night", startTime: 22 },
        ],
        getDayName: (weekDayNumber: number) => {
            const weekDaysNames = [
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday",
                "Sunday",
            ];
            return weekDaysNames[weekDayNumber];
        },
        weekendStartDay: 6, // [!code focus]
        weekLength: 7, // [!code focus]
    });
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## FAQ [#faq]

<Accordions>
  <Accordion title="Image that changes based on the time period" id="image-time-period">
    You can create a class that manages the image based on the current time slot. The class can have properties for each time slot and a method to get the current image based on the time slot.

    For example:

    <CodeBlockTabs defaultValue="models/TimeSlotsImage.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="models/TimeSlotsImage.ts">
          models/TimeSlotsImage.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="main.ts">
          main.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="models/TimeSlotsImage.ts">
        ```ts
        import { timeTracker } from "@drincs/nqtr";

        export default class TimeSlotsImage {
            constructor(
                data:
                    | {
                          morning: string;
                          afternoon: string;
                          evening: string;
                          night: string;
                      }
                    | string,
            ) {
                if (typeof data === "string") {
                    this.morning = data;
                    this.afternoon = data;
                    this.evening = data;
                    this.night = data;
                    return;
                }
                this.morning = data.morning;
                this.afternoon = data.afternoon;
                this.evening = data.evening;
                this.night = data.night;
            }
            get src(): string {
                if (timeTracker.currentTimeSlot === 0) {
                    return this.morning;
                } else if (timeTracker.currentTimeSlot === 2) {
                    return this.evening;
                } else if (timeTracker.currentTimeSlot === 3) {
                    return this.night;
                }
                return this.afternoon;
            }
            morning: string;
            afternoon: string;
            evening: string;
            night: string;
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="main.ts">
        ```ts
        timeTracker.initialize({
            defaultTimeSpent: 1,
            dayStartTime: 0,
            dayEndTime: 24,
            timeSlots: [
                // [!code focus]
                { name: "Morning", startTime: 5 }, // [!code focus]
                { name: "Afternoon", startTime: 12 }, // [!code focus]
                { name: "Evening", startTime: 18 }, // [!code focus]
                { name: "Night", startTime: 22 }, // [!code focus]
            ], // [!code focus]
            getDayName: (weekDayNumber: number) => {
                const weekDaysNames = [
                    "Monday",
                    "Tuesday",
                    "Wednesday",
                    "Thursday",
                    "Friday",
                    "Saturday",
                    "Sunday",
                ];
                return weekDaysNames[weekDayNumber];
            },
            weekendStartDay: 6,
            weekLength: 7,
        });
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>
</Accordions>


# FAQ (/faq)



Some common questions you may encounter.

<Accordions>
  <Accordion title="How enable the decorators in TypeScript?" id="enable-typescript-decorators">
    In Pixi’VN, in some advanced features, it is necessary to use decorators.

    By default, TypeScript does not enable the use of decorators. To enable the use of decorators in TypeScript, you must add the following configuration to the `tsconfig.json` file:

    ```json title="tsconfig.json"
    {
        "compilerOptions": {
            // ...
            "experimentalDecorators": true
        }
    }
    ```
  </Accordion>

  <Accordion title="Skip `steps` and auto forward" id="skip-auto">
    In a visual novel, it's very useful to be able to "skip," accelerate, or skip multiple `steps`, or automatically advance to the next `step` after a period of time.

    The suggested implementation for this feature is to create the following function:

    ```tsx title="React example"
    const [skipEnabled, setSkipEnabled] = useState<boolean>(false);
    const [autoEnabled, setAutoEnabled] = useState<boolean>(false);
    const [recheckSkipAuto, setRecheckSkipAuto] = useState<number>(0);

    useEffect(() => {
        if (skipEnabled || autoEnabled) {
            nextOnClick();
        }
    }, [skipEnabled, recheckSkipAuto, autoEnabled]);

    function nextOnClick() {
        narration
            .continue({})
            .then(() => {
                if (skipEnabled) {
                    setTimeout(() => {
                        setRecheckSkipAuto((p) => p + 1);
                    }, 0.2);
                } else if (autoEnabled) {
                    setTimeout(() => {
                        setRecheckSkipAuto((p) => p + 1);
                    }, 2);
                }
            })
            .catch((e) => {
                // ...
            });
    }

    // Button for enable skip and auto ...
    ```
  </Accordion>

  <Accordion title="How to link a character to an image to add to the canvas?" id="link-character-to-image">
    Linking a character to an image to add to the canvas is a common feature in visual novels. It can be useful for example for showing the character's expression.

    To do this, you just need to create a <DynamicLink href="/start/character#custom-class">custom character</DynamicLink> or modify the existing one (it is already present in the templates).
    I recommend adding an array of strings containing the links/aliases of the images that make up the character (body, head...), and using an <DynamicLink href="/start/canvas-image-container">ImageContainer</DynamicLink> when you need to display the character.

    For example:

    <CodeBlockTabs defaultValue="models/Character.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="models/Character.ts">
          models/Character.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pixi-vn.d.ts">
          pixi-vn.d.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="models/Character.ts">
        ```ts
        import { CharacterInterface, CharacterStoredClass } from "@drincs/pixi-vn";

        export class Character
            extends CharacterStoredClass
            implements CharacterInterface
        {
            constructor(
                id: string | { id: string; emotion: string },
                props: CharacterProps,
            ) {
                // ...
                this.images = props.images ?? [];
            }

            // other properties...

            readonly images: string[] = [];
        }

        interface CharacterProps {
            // other properties...
            images?: string[]; // is optional
        }
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pixi-vn.d.ts">
        ```ts
        declare module "@drincs/pixi-vn" {
            interface CharacterInterface {
                // other properties...
                readonly images: string[];
            }
        }
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Now you can use the `images` property to show the character on the canvas.

    <CodeBlockTabs defaultValue="content/labels/start.label.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="content/labels/start.label.ts">
          content/labels/start.label.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="values/characters.ts">
          values/characters.ts
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="content/labels/start.label.ts">
        ```ts
        import { newLabel, showImageContainer } from "@drincs/pixi-vn";
        import { alice } from "../values/characters";

        export const startLabel = newLabel("start", [
            async () => {
                await showImageContainer("alice", alice.images, {
                    // [!code focus]
                    xAlign: 0.5, // [!code focus]
                    yAlign: 1, // [!code focus]
                }); // [!code focus]
            },
        ]);
        ```
      </CodeBlockTab>

      <CodeBlockTab value="values/characters.ts">
        ```ts
        import { Character } from "../models/Character";

        const alice = new Character("alice_id", {
            // other properties...
            images: ["alice-body", "alice-head", "alice-eyes"],
        });
        RegisteredCharacters.add(alice);
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **If you are using *ink***:

    You can create a <DynamicLink href="/ink/hashtag">custom hashtag command</DynamicLink> to use this feature.
    For example you can add a script with the following syntax and convert it to a <DynamicLink href="/ink/canvas#show-a-image-container-in-ink">show imagecontainer script</DynamicLink>:

    ```ink title="ink"
    # show character {character id} {parameters}
    ```

    <CodeBlockTabs defaultValue="utils/ink-utility.ts">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="utils/ink-utility.ts">
          utils/ink-utility.ts
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="ink/start.ink">
          ink/start.ink
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="utils/ink-utility.ts">
        ```ts
        import { HashtagCommands } from "@drincs/pixi-vn-ink";
        import { getCharacterById } from "@drincs/pixi-vn";

        HashtagCommands.add((script, convertListStringToObj) => {
            // ...
            if (
                script[0] === "show" &&
                script[1] === "character" &&
                script.length > 2
            ) {
                let character = getCharacterById(script[2]);
                if (character) {
                    console.error("Character not found");
                    return false;
                }
                let characterId: string = script[2].split("@")[0]; // to remove the emotion
                let oltherProps: string = script.slice(3).join(" ");
                let images = character.images.join(" ");
                let newScript: string = `show imagecontainer ${characterId} [${images}] ${oltherProps}`;
                return newScript;
            }
            return false;
        });
        ```
      </CodeBlockTab>

      <CodeBlockTab value="ink/start.ink">
        ```ink
        === start ===
        # show character alice xAlign 0.8 yAlign 1 with dissolve
        -> DONE
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Accordion>

  <Accordion title="Keyboard shortcuts (hotkeys)" id="hotkeys">
    I suggest the following hotkeys, based on the ones used in the [pixi-vn-react-template](https://github.com/DRincs-Productions/pixi-vn-react-template):

    * `Space` or `Enter` (hold): Skip through the dialogue while pressed.
    * `Space` or `Enter` (release): Continue the dialogue.
    * `F5` or `Ctrl + S`: Quick save the game.
    * `F9` or `Ctrl + L`: Quick load the most recent save.
    * `Esc`: Open the settings modal.
    * `H`: Open the history modal.
    * `K`: Open the controls/hotkeys list.
    * `Tab`: Toggle the quick actions wheel.
    * `Arrow Up` / `Arrow Down`: Navigate the choices in a choice menu.

    Function keys (`F5`, `F9`) are used as the primary bindings because they are rarely intercepted by the browser, with `Ctrl` + `S`/`Ctrl` + `L` provided as alternatives for keyboards or setups without function keys.
  </Accordion>

  <Accordion title="license" id="license">
    Pixi’VN is released under the &#x2A;*GNU Lesser General Public License v2.1 (LGPL 2.1)**.\
    This license is designed for *libraries*, making it a great fit for a game engine like this.

    Here’s what it means in simple, practical terms — even if you’re not an expert in licenses.

    **What You Can Freely Do**

    If you use Pixi’VN in your own project — for example, to create a game, a visual novel, or a tool — **you have almost no restrictions**.

    You can:

    * **Use Pixi’VN in free or commercial projects**: You can sell your game, publish it on Steam, itch.io, mobile stores, etc.
    * **Keep your game’s source code private**: You are **not** required to open-source your project.
    * **Use Pixi’VN without giving credit**: You are *not* required to mention Pixi’VN anywhere.\
      (Though we always appreciate it!)
    * **Install and use the library from npm without limitations**: Normal dependency usage is fully allowed.

    **When Restrictions Apply**

    The LGPL only matters **if you modify Pixi’VN itself**, meaning:

    * you create a *fork* of the engine,
    * you change its source code,
    * or you distribute a modified version of the library.

    In that case:

    * **Your modifications to Pixi’VN must remain open source**: If you change the engine and distribute your version, you must publish your modifications.
    * **You must keep the same license (LGPL 2.1)**: Modified versions of the library must remain under LGPL.

    > These conditions apply **only to the engine**, *not* to your game.
  </Accordion>
</Accordions>


# Migration guide (/faq/migration)



## pixi-vn [#pixi-vn]

### Migration from v1.7.x to v1.8.0 [#migration-from-v17x-to-v180]

In this version, it has been decided to migrate from `@pixi/sound` to `Tone.js` as the audio system. This decision was made to improve performance, stability, and flexibility of the audio system, as well as to resolve some known issues with `@pixi/sound`.

To migrate to the new audio system, it is necessary to change how the volume of a `media` is modified.

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

const bgmMedia = sound.find("bgm_cheerful");

if (bgmMedia) bgmMedia.volume = 90; // [!code --]
if (bgmMedia) bgmMedia.volume.value = 90; // [!code ++]
```

Additionally, it will no longer be possible to modify audio assets directly.

```ts
sound.backgroundLoadBundle(AUDIO_BUNDLE_NAME).then(() => {
    // [!code --]
    sound.edit("bgm_cheerful", { volume: 90 }); // [!code --]
}); // [!code --]
```

### Migration from v1.6.x to v1.7.0 [#migration-from-v16x-to-v170]

This version has been designed to improve integration with the template.

The first change introduced is that HTML layouts now use `userSelect: "none"` by default (so text is not selectable). This was done to prevent issues with text selection during UI interactions. If you want to make text selectable, you can simply override this property with `userSelect: "auto"`.

```ts
const htmlLayer = canvas.addHtmlLayer("ui", root, {
    userSelect: "auto", // [!code ++]
});
```

Additionally, some features have been deprecated to centralize navigation management into a single function. You should now use `Game.onNavigate` to handle navigation between UI screens, instead of passing a navigation function to every function that requires one (for example `Game.restoreGameState`).

```ts
Game.onNavigate((path) => {
    // [!code ++]
    navigateTo(path); // [!code ++]
}); // [!code ++]

Game.restoreGameState(data, navigateTo); // [!code --]
Game.restoreGameState(data); // [!code ++]
```

Finally, the ability to implement a custom UI storage has been added, allowing automatic rerendering when game variables change. To do this, you need to use the `storage.setStorageHandler` function to set a handler that updates the state of your custom UI storage whenever a game variable is modified.

```ts
import { Store } from "@tanstack/store";
// Create a TanStack store that mirrors the game storage variables
const gameStore = new Store<Record<string, unknown>>({});

storage.setStorageHandler({
    onSetVariable: (key, value) => {
        gameStore.setState((state) => ({ ...state, [key]: value }));
    },
    onRemoveVariable: (key) => {
        gameStore.setState((state) => {
            const next = { ...state };
            delete next[key];
            return next;
        });
    },
    onClearOldTempVariable: (key) => {
        gameStore.setState((state) => {
            const next = { ...state };
            delete next[key];
            return next;
        });
    },
});
```

### Migration from v1.5.x to v1.6.0 [#migration-from-v15x-to-v160]

In this version, the audio system has been completely redesigned, as the previous implementation was very limiting. In this new version, the `channel` component has been introduced, and the system has been divided into four elements, each responsible for a specific role, unlike before where they could be used in multiple ways, leading to instability (`sound` (manager), `channels`, `media`, sound `assets`).

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

sound.add('bird', 'resources/bird.mp3'); // [!code --]
sound.play('bird', {
    loop: true,
});

let s = sound.add('bird', 'resources/bird.mp3'); // [!code --]
s.play({ // [!code --]
sound.play('bird', { // [!code ++]
    loop: true,
});

let s = sound.add('bird', { // [!code --]
    url: 'resources/bird.mp3', // [!code --]
    loop: true, // [!code --]
}); // [!code --]
s.play(); // [!code --]
sound.play('bird', { // [!code ++]
    loop: true, // [!code ++]
}); // [!code ++]

s.play(); // [!code --]
sound.play('bird'); // [!code ++]
s.pause(); // [!code --]
sound.pause('bird'); // [!code ++]
s.resume(); // [!code --]
sound.resume('bird'); // [!code ++]
s.stop(); // [!code --]
sound.stop('bird'); // [!code ++]
```

Also, to have a cleaner start to the game, `Game.start` has been added. `Game.start` has the same functionality as `narration.call`, but in the future if I need to add some processes before starting the narration, I can do it without breaking changes. For now, it is just an alias for `narration.call`, but it is recommended to use `Game.start` instead of `narration.call` to start the game.

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

The storage keyword system has also been improved by adopting a common naming convention using `:` as a separator, and by adding the ability to use prefixes to better identify keys (for example `character:alice:friendship`). This change was made to improve the cache management of storage and to make it easier to identify the type of data stored. (This change does not affect the API and will not cause any issues with existing saves).

Finally, error handling has been improved by adding the ability to manage errors through specific handlers.

```ts title="main.ts"
import { Game, drawCanvasErrorHandler } from '@drincs/pixi-vn'

Game.addOnError(drawCanvasErrorHandler()); // [!code ++]

Game.onError((type, error, { notify, uiTransition }) => { // [!code --]
    notify(uiTransition("allert_error_occurred"), { variant: "error" }); // [!code --]
    console.error(`Error occurred: ${type}`, error); // [!code --]
Game.addOnError((error, { notify, uiTransition }) => { // [!code ++]
    notify && uiTransition && notify(uiTransition("allert_error_occurred"), { variant: "error" }); // [!code ++]
    console.error(`Error occurred`, error); // [!code ++]
});
```

### Migration from v1.4.x to v1.5.0 [#migration-from-v14x-to-v150]

In this update, the `pixi.js` dependency has been marked as **external** for non-CDN builds (for example, when using Vite.js or the official templates).

When using a CDN, the version of `pixi.js` bundled with the library will continue to be used. This ensures compatibility, prevents known issues, and preserves the overall integrity of the library.

**Why is `pixi.js` now external?** `pixi.js` does not support multiple instances. Making it external allows developers to safely integrate third-party libraries that are designed to work with `pixi.js`, without running into instance conflicts.

In v1.5.4, the canvas resizing logic has also been changed. If you used an official template, it's recommended to modify the CSS as follows:

```css title="src/index.css"
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-motion";

html, /* [!code ++] */
body {
    /* [!code ++] */
    background-color: #242424; /* [!code ++] */
    height: 100%; /* [!code ++] */
} /* [!code ++] */

body {
    margin: 0;
    min-height: 100vh; /* [!code ++] */
    display: flex;
    overflow: hidden;
}
```

### Migration from v1.3.x to v1.4.0 [#migration-from-v13x-to-v140]

This document describes the changes that need to be made to your code to migrate from v1.3.x to v1.4.0.

In this release, some functions for managing "navigation of the narrative" have been modified to allow for the easy implementation of rollback and rollforward. Specifically, it is now possible to execute multiple back and continue requests synchronously, and the system will internally queue them and calculate the delta to execute only the necessary processes. You can read more about this in the <DynamicLink href="/start/labels-flow#rollback-rollforward">Rollback and Rollforward</DynamicLink> section.

For this reason it was necessary to modify the `stepHistory.back()` function and the `Game.init()` function. `stepHistory.back()` now requires a path navigation function rather than a `StepLabelProps` function. You can now define the path navigation function in `Game.init()`.

```ts
stepHistory.back((_path) => {
    // [!code --]
    // TODO: navigate in the url path // [!code --]
    // READ THIS: https://pixi-vn.com/start/interface.html#navigate-switch-between-ui-screens // [!code --]
}); // [!code --]
const gameProps = {}; // [!code ++]
stepHistory.back(gameProps); // [!code ++]
```

```ts
Game.init(body, {
    height: 1080,
    width: 1920,
    backgroundColor: "#303030",
    navigate: (_path) => {
        // [!code ++]
        // TODO: navigate in the url path // [!code ++]
    }, // [!code ++]
}).then(() => {
    // ...
});
```

Some long-deprecated features have been removed in this release, including: `stepHistory.goBack`, `narration.goNext`, `PIXI`, `canvas.canvasWidth`, `canvas.canvasHeight`, `canvas.onEndOfTicker`, `FadeAlphaTicker`, `MoveTicker`, `RotateTicker`, `ZoomTicker`, `narration.canContinue`, `narration.callLabel`, `narration.jumpLabel`, `narration.choiceMenuOptions`, `storage.startingStorage`, `storage.setVariable`, `storage.getVariable` and `storage.removeVariable`.

### Migration from v1.2.x to v1.3.0 [#migration-from-v12x-to-v130]

This document describes the changes that need to be made to your code to migrate from v1.2.x to v1.3.0.

In this release, the canvas component animations have been revolutionized. The core animation function is now <DynamicLink href="/start/canvas-motion">`canvas.animate`</DynamicLink>, a function that combines PixiJS tickers and [`motion`](https://motion.dev/docs/animate). So the provided tickers preset (`FadeAlphaTicker`, `MoveTicker`, `RotateTicker`, `ZoomTicker`) has been deprecated.

### Migration from v0.10.x to v1.0 [#migration-from-v010x-to-v10]

This document describes the changes that need to be made to your code to migrate from v0.10.x to v1.0.

Being version 1.0.0 it is the first complete release of the library. It is a breaking change and the API has changed significantly. The fundamental change of this release was to split the entire engine into independent modules. This allows for a more modular and flexible design, making it easier to use the engine in different contexts. The size of packages has been reduced significantly (150 MB to 50 MB) and the engine is now more efficient and faster.

The `Game` namespace object has been introduced for the which contains all the functionality that exploits multiple modules. This is the main entry point for the engine and is used to access all the functions of the engine.

The `stepHistory` module has been introduced to manage the history of the game. Previously the entire management of the game's history was handled by `narration`.

```ts
clearAllGameDatas(); // [!code --]
Game.clear(); // [!code ++]
```

```ts
canvas // [!code --]
    .initialize(body, { // [!code --]
        height: 1080, // [!code --]
        width: 1920, // [!code --]
        backgroundColor: "#303030", // [!code --]
    }) // [!code --]
    .then(() => { // [!code --]
        // Pixi.JS UI Layer // [!code --]
        canvas.addLayer(CANVAS_UI_LAYER_NAME, new Container()); // [!code --]
Game.init(body, { // [!code ++]
    height: 1080, // [!code ++]
    width: 1920, // [!code ++]
    backgroundColor: "#303030", // [!code ++]
}).then(() => { // [!code ++]
    // Pixi.JS UI Layer // [!code ++]
    canvas.addLayer(CANVAS_UI_LAYER_NAME, new Container()); // [!code ++]
```

```ts
getSaveData(); // [!code --]
Game.exportGameState(); // [!code ++]
```

```ts
getSaveJson(); // [!code --]
JSON.stringify(Game.exportGameState()); // [!code ++]
```

```ts
loadSaveData(data, navigate); // [!code --]
Game.restoreGameState(data, navigate); // [!code ++]
```

```ts
loadSaveJson(data, navigate); // [!code --]
Game.restoreGameState(JSON.parse(dataString) as GameState, navigate); // [!code ++]
```

```ts
loadSaveJson(data, navigate); // [!code --]
Game.restoreGameState(JSON.parse(dataString) as GameState, navigate); // [!code ++]
```

```ts
jsonToSaveData(json); // [!code --]
JSON.parse(json); // [!code ++]
```

```ts
narration.canGoBack; // [!code --]
stepHistory.canGoBack; // [!code ++]
```

```ts
narration.back(); // [!code --]
stepHistory.back(); // [!code ++]
```

```ts
narration.narrativeHistory; // [!code --]
stepHistory.narrativeHistory; // [!code ++]
```

## nqtr [#nqtr]

### Migration from v0.7.x to v0.8.0 (nqtr) [#migration-from-v07x-to-v080-nqtr]

<Callout title="ink" type="error">
  This version does not support save files created with previous versions if temporary `commitment` were used (i.e., if they were added using `routine.add`).

  To make the saves compatible, you need to modify the save file (remember that it is a JSON) by changing the `___nqtr-temporary_commitment___` variable from an array of strings (a list of `commitment` IDs) to an object with keys corresponding to the `commitment` IDs and values corresponding to an object containing `id` and `roomId` (the latter is required to identify the link between the `commitment` and the `room`).

  ```json title="save.json"
  {
      // ...
      "___nqtr-temporary_commitment___": [
          // [!code --]
          "alice_sleep", // [!code --]
          "alice_eat" // [!code --]
      ], // [!code --]
      "___nqtr-temporary_commitment___": {
          // [!code ++]
          "alice_sleep": {
              // [!code ++]
              "id": "alice_sleep", // [!code ++]
              "roomId": "alice_room" // [!code ++]
          }, // [!code ++]
          "alice_eat": {
              // [!code ++]
              "id": "alice_eat", // [!code ++]
              "roomId": "alice_room" // [!code ++]
          } // [!code ++]
      } // [!code ++]
      // ...
  }
  ```
</Callout>

This document describes the changes that need to be made to your code to migrate from v0.7.x to v0.8.0.

In this release, the way to link a `commitment` to a `room` has been changed. You can now define its routine directly inside the `room`. Therefore, instead of passing the `room` in the `commitment` constructor, you can define the routine directly in the `room` constructor.

This change was made to simplify the management of routines and to make the relationship between `commitment` and `room` clearer.

```ts title="models/nqtr/Commitment.ts"
export default class Commitment extends CommitmentStoredClass implements CommitmentInterface {
    constructor(
        id: string,
        characters: CharacterInterface | CharacterInterface[],
        room: RoomInterface, // [!code --]
        props: {
            name?: string;
            image?: PixiUIParam<Commitment>;
            background?: PixiUIParam<Commitment>;
            icon?: ReactUIParam<Commitment>;
            onRun?: OnRunEvent<CommitmentInterface>;
            disabled?: boolean | (() => boolean);
            hidden?: boolean | (() => boolean);
        } & CommitmentStoredClassProps,
    ) {
        characters = Array.isArray(characters) ? characters : [characters];
        super(id, characters, room, props.onRun, props); // [!code --]
        super(id, characters, props.onRun, props); // [!code ++]
        this.name = props.name || "";
        this._image = props.image;
        this._background = props.background;
        this._icon = props.icon;
        this._defaultDisabled = props.disabled || false;
        this._defaultHidden = props.hidden || false;
    }
    // ...
    override get isActive(): boolean { // [!code --]
    override isActive(options?: ActiveScheduling): boolean { // [!code ++]
        if (this.hidden) {
            return false;
        }
        return super.isActive; // [!code --]
        return super.isActive(options); // [!code ++]
    }
}
```

```ts title="models/nqtr/Room.ts"
export default class Room extends RoomStoredClass implements RoomInterface {
    constructor(
        id: string,
        location: LocationInterface,
        props: {
            name: string;
            disabled?: boolean | (() => boolean);
            hidden?: boolean | (() => boolean);
            background: PixiUIParam<Room>;
            activities?: ActivityInterface[];
            routine?: CommitmentInterface[]; // [!code ++]
            isEntrance?: boolean;
        },
    ) {
        super(id, location, props.activities); // [!code --]
        super(id, location, {
            // [!code ++]
            activities: props.activities || [], // [!code ++]
            routine: props.routine || [], // [!code ++]
        }); // [!code ++]
        this.name = props.name;
        this._defaultDisabled = props.disabled || false;
        this._defaultHidden = props.hidden || false;
        this._background = props.background;
        this.isEntrance = props.isEntrance || false;
    }
    // ...
}
```

```ts title="models/nqtr/Activity.ts"
export default class Activity extends ActivityStoredClass implements ActivityInterface {
    // ...
    override get isActive(): boolean { // [!code --]
    override isActive(options?: ActiveScheduling): boolean { // [!code ++]
        if (this.hidden) {
            return false;
        }
        return super.isActive; // [!code --]
        return super.isActive(options); // [!code ++]
    }
}
```

```tsx title="values/routine.tsx"
const aliceSleep = new Commitment("alice_sleep", alice, aliceRoom, { // [!code --]
const aliceSleep = new Commitment("alice_sleep", alice, { // [!code ++]
    priority: 1,
    timeSlot: {
        from: 20,
        to: 10,
    },
    // ...
});

// ...

export const fixedRoutine = [aliceSleep, ...]; // [!code --]

RegisteredCommitments.add(fixedRoutine); // [!code --]
RegisteredCommitments.add([aliceSleep, ...]);  // [!code ++]
```

```ts title="utils/nqtr-utility.ts"
export function initializeNQTR() {
    // ...
    routine.fixedRoutine = fixedRoutine; // [!code --]
}
```

```tsx title="values/rooms.tsx"
export const aliceRoom = new Room("alice_room", mcHome, {
    name: "Alice room",
    background: new TimeSlotsImage({
        morning: "location_aliceroom-0",
        afternoon: "location_aliceroom-1",
        evening: "location_aliceroom-2",
        night: "location_aliceroom-3",
    }),
    routine: [aliceSleep], // [!code ++]
});
```

```ts
routine.add(aliceSleep); // [!code --]
aliceRoom.addCommitment(aliceSleep); // [!code ++]
```

## pixi-vn-ink [#pixi-vn-ink]

### Migration from v1.0.x to v1.1.0 (ink) [#migration-from-v10x-to-v110-ink]

In this release, the base <DynamicLink href="/ink/hashtag">hashtag commands</DynamicLink> (the default `#` commands used to interact with the canvas, such as `# show`, `# moveIn`, etc.) are no longer registered automatically. You now need to call [`addBaseHashtagCommands`](/jsdoc/pixi-vn-ink/index/functions/addBaseHashtagCommands) yourself before they can be used in your ink scripts.

```ts title="content/ink/hashtag-commands.ts"
import { addBaseHashtagCommands } from "@drincs/pixi-vn-ink"; // [!code ++]

addBaseHashtagCommands(); // [!code ++]
```


# Pixi’VN - PixiJS Game Engine (/jsdoc/pixi-vn)



![pixi-vn-cover](https://github.com/user-attachments/assets/28c41fe1-c539-4ebb-b7d4-8cb9f79e089e)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

Pixi’VN is a very versatile and powerful 2D game engine. It is based on JavaScript/TypeScript and [PixiJS](https://pixijs.com/).

It provides the following features:

* narrative management
* provides a 2D canvas
* providing functionality to play sounds and music
* storage to set and get game variables.
* saves the current state of the entire game at each "story step" giving the possibility to go back
* functionality to save and load the current state of the game.

For a quick start, various [project templates](#project-initialization) are available. Less experienced developers can use these templates without much knowledge of JavaScript/TypeScript.

You have the option to use various types of narrative languages ​​(in addition to JavaScript/TypeScript). Currently you can use the following:

* [*ink*](https://pixi-vn.com/ink/ink)

Pixi’VN does not provide built-in components to create the game UI. Instead, you should use external JavaScript frameworks to build your UI. This allows you to leverage systems such as React, Vue, etc., to create complex and high-performance **UI screens**.

## Wiki [#wiki]

* [Why Pixi’VN?](https://pixi-vn.com/start/why)
  * [Ren'Py vs Pixi’VN](https://pixi-vn.com/start/versus-renpy)
* [Quick Start](https://pixi-vn.com/start/getting-started)
  * [Templates](https://pixi-vn.com/start/templates)
* Make your first:
  * [Visual Novel](https://pixi-vn.com/start/make-visual-novel)
  * [Point & Click Adventure](https://pixi-vn.com/nqtr/make-point-and-click)
  * [RPG game](https://pixi-vn.com/start/make-rpg)
  * [IDE or graphical editor](https://pixi-vn.com/start/make-ide)
  * [Game engine](https://pixi-vn.com/start/make-game-engine)

## Prerequisites [#prerequisites]

Before starting, you must have the following tools installed:

* [Node.js](https://nodejs.org/) version 18 or higher.
* Text editor with TypeScript support, such as:
  * [Visual Studio Code](https://code.visualstudio.com/)
  * [Cursor](https://www.cursor.com/)
  * [VSCodium](https://vscodium.com/)

## Project Initialization [#project-initialization]

If you want to start from a new project, you can use the following command to initialize a new project with the Pixi’VN templates:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm create pixi-vn@latest
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn create pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bunx create-pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

You can see the list of available templates and interactive demos \<DynamicLink href="/start/templates">here</DynamicLink>.

After the project is initialized, open the project directory with your text editor (VSCode is recommended) and start developing your project.

## Installation [#installation]

To install the Pixi’VN package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Initialize [#initialize]

Before using the Pixi’VN engine, you must initialize the game. You can do this by calling the `Game.init` method.

```ts title="src/main.tsx"
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));
```

```html title="index.html"
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

```css title="styles.css"
html,
body {
  background-color: #242424;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}
```


# @drincs/pixi-vn (/jsdoc/pixi-vn/modules)



## Modules [#modules]

* [index](/jsdoc/pixi-vn/index)
* [vite](/jsdoc/pixi-vn/vite)
* [vite-listener](/jsdoc/pixi-vn/vite-listener)


# index (/jsdoc/pixi-vn/index)



## app [#app]

* [ApplicationOptions](/jsdoc/pixi-vn/index/interfaces/ApplicationOptions)

## assets [#assets]

* [AssetsBundle](/jsdoc/pixi-vn/index/interfaces/AssetsBundle)
* [AssetsManifest](/jsdoc/pixi-vn/index/interfaces/AssetsManifest)
* [ResolvedAsset](/jsdoc/pixi-vn/index/interfaces/ResolvedAsset)
* [ResolvedSrc](/jsdoc/pixi-vn/index/interfaces/ResolvedSrc)
* [UnresolvedAsset](/jsdoc/pixi-vn/index/interfaces/UnresolvedAsset)
* [AssetSrc](/jsdoc/pixi-vn/index/type-aliases/AssetSrc)
* [~~LoadParserName~~](/jsdoc/pixi-vn/index/type-aliases/LoadParserName)

## events [#events]

* [FederatedEvent](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)
* [AllFederatedEventMap](/jsdoc/pixi-vn/index/type-aliases/AllFederatedEventMap)

## Other [#other]

* [CanvasPropertyUtility](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility)
* [Game](/jsdoc/pixi-vn/index/namespaces/Game)
* [RegisteredCanvasComponents](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents)
* [RegisteredCharacters](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters)
* [RegisteredEvents](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents)
* [RegisteredLabels](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels)
* [RegisteredTickers](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers)
* [SoundRegistry](/jsdoc/pixi-vn/index/namespaces/SoundRegistry)
* [StorageRegistry](/jsdoc/pixi-vn/index/namespaces/StorageRegistry)
* [CachedMap](/jsdoc/pixi-vn/index/classes/CachedMap)
* [CanvasBaseItem](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)
* [CanvasManagerStatic](/jsdoc/pixi-vn/index/classes/CanvasManagerStatic)
* [CharacterBaseModel](/jsdoc/pixi-vn/index/classes/CharacterBaseModel)
* [CharacterStoredClass](/jsdoc/pixi-vn/index/classes/CharacterStoredClass)
* [Container](/jsdoc/pixi-vn/index/classes/Container)
* [GameUnifier](/jsdoc/pixi-vn/index/classes/GameUnifier)
* [HistoryManagerStatic](/jsdoc/pixi-vn/index/classes/HistoryManagerStatic)
* [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer)
* [ImageSprite](/jsdoc/pixi-vn/index/classes/ImageSprite)
* [Label](/jsdoc/pixi-vn/index/classes/Label)
* [LabelAbstract](/jsdoc/pixi-vn/index/classes/LabelAbstract)
* [NarrationManagerStatic](/jsdoc/pixi-vn/index/classes/NarrationManagerStatic)
* [PixiError](/jsdoc/pixi-vn/index/classes/PixiError)
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite)
* [StoredClassModel](/jsdoc/pixi-vn/index/classes/StoredClassModel)
* [Text](/jsdoc/pixi-vn/index/classes/Text)
* [TickerBase](/jsdoc/pixi-vn/index/classes/TickerBase)
* [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite)
* [AdditionalPositionsExtension](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension)
* [AdditionalPositionsExtensionProps](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)
* [AnchorExtension](/jsdoc/pixi-vn/index/interfaces/AnchorExtension)
* [AnchorExtensionProps](/jsdoc/pixi-vn/index/interfaces/AnchorExtensionProps)
* [AssetMemory](/jsdoc/pixi-vn/index/interfaces/AssetMemory)
* [AudioChannelInterface](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)
* [CanvasBaseInterface](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)
* [CanvasBaseItemMemory](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)
* [CanvasGameState](/jsdoc/pixi-vn/index/interfaces/CanvasGameState)
* [CanvasManagerInterface](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface)
* [ChannelOptions](/jsdoc/pixi-vn/index/interfaces/ChannelOptions)
* [CharacterEmotionId](/jsdoc/pixi-vn/index/interfaces/CharacterEmotionId)
* [CharacterInterface](/jsdoc/pixi-vn/index/interfaces/CharacterInterface)
* [ChoiceInterface](/jsdoc/pixi-vn/index/interfaces/ChoiceInterface)
* [ChoiceOptionInterface](/jsdoc/pixi-vn/index/interfaces/ChoiceOptionInterface)
* [CloseChoiceOptionInterface](/jsdoc/pixi-vn/index/interfaces/CloseChoiceOptionInterface)
* [ContainerMemory](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)
* [ContainerOptions](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)
* [DialogueInterface](/jsdoc/pixi-vn/index/interfaces/DialogueInterface)
* [ExportedSound](/jsdoc/pixi-vn/index/interfaces/ExportedSound)
* [ExportedSoundPlay](/jsdoc/pixi-vn/index/interfaces/ExportedSoundPlay)
* [GameState](/jsdoc/pixi-vn/index/interfaces/GameState)
* [GameStepStateData](/jsdoc/pixi-vn/index/interfaces/GameStepStateData)
* [HistoryGameState](/jsdoc/pixi-vn/index/interfaces/HistoryGameState)
* [HistoryManagerInterface](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface)
* [HistoryStep](/jsdoc/pixi-vn/index/interfaces/HistoryStep)
* [ImageContainerMemory](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)
* [ImageContainerOptions](/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)
* [ImageSpriteMemory](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)
* [ImageSpriteOptions](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)
* [LabelProps](/jsdoc/pixi-vn/index/interfaces/LabelProps)
* [ListenerExtension](/jsdoc/pixi-vn/index/interfaces/ListenerExtension)
* [ListenerExtensionMemory](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory)
* [MediaInterface](/jsdoc/pixi-vn/index/interfaces/MediaInterface)
* [MoveInOutProps](/jsdoc/pixi-vn/index/interfaces/MoveInOutProps)
* [NarrationGameState](/jsdoc/pixi-vn/index/interfaces/NarrationGameState)
* [NarrationHistory](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)
* [NarrationManagerInterface](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface)
* [OnEventsHandlers](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)
* [OpenedLabel](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)
* [PixivnAssetAliasIds](/jsdoc/pixi-vn/index/interfaces/PixivnAssetAliasIds)
* [PixivnBundleIds](/jsdoc/pixi-vn/index/interfaces/PixivnBundleIds)
* [PixivnCharacterIds](/jsdoc/pixi-vn/index/interfaces/PixivnCharacterIds)
* [PixivnLabelIds](/jsdoc/pixi-vn/index/interfaces/PixivnLabelIds)
* [PushInOutProps](/jsdoc/pixi-vn/index/interfaces/PushInOutProps)
* [ShakeEffectProps](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps)
* [ShowWithDissolveTransitionProps](/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps)
* [ShowWithFadeTransitionProps](/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps)
* [SoundGameState](/jsdoc/pixi-vn/index/interfaces/SoundGameState)
* [SoundManagerInterface](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface)
* [SoundOptions](/jsdoc/pixi-vn/index/interfaces/SoundOptions)
* [SoundPlay](/jsdoc/pixi-vn/index/interfaces/SoundPlay)
* [SoundPlayOptions](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)
* [SoundPlayOptionsWithChannel](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptionsWithChannel)
* [SpriteBaseMemory](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)
* [SpriteMemory](/jsdoc/pixi-vn/index/interfaces/SpriteMemory)
* [SpriteOptions](/jsdoc/pixi-vn/index/interfaces/SpriteOptions)
* [StepLabelProps](/jsdoc/pixi-vn/index/interfaces/StepLabelProps)
* [StepLabelResult](/jsdoc/pixi-vn/index/interfaces/StepLabelResult)
* [StorageExternalStoreHandler](/jsdoc/pixi-vn/index/interfaces/StorageExternalStoreHandler)
* [StorageManagerInterface](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface)
* [TextMemory](/jsdoc/pixi-vn/index/interfaces/TextMemory)
* [TextOptions](/jsdoc/pixi-vn/index/interfaces/TextOptions)
* [Ticker](/jsdoc/pixi-vn/index/interfaces/Ticker)
* [TickerArgs](/jsdoc/pixi-vn/index/interfaces/TickerArgs)
* [TickerHistory](/jsdoc/pixi-vn/index/interfaces/TickerHistory)
* [TickerInfo](/jsdoc/pixi-vn/index/interfaces/TickerInfo)
* [TickerProgrationExponential](/jsdoc/pixi-vn/index/interfaces/TickerProgrationExponential)
* [TickerProgrationLinear](/jsdoc/pixi-vn/index/interfaces/TickerProgrationLinear)
* [TickersSequence](/jsdoc/pixi-vn/index/interfaces/TickersSequence)
* [TickerTimeoutHistory](/jsdoc/pixi-vn/index/interfaces/TickerTimeoutHistory)
* [VideoSpriteMemory](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)
* [VideoSpriteOptions](/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)
* [ZoomInOutProps](/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps)
* [AssetAliasIdType](/jsdoc/pixi-vn/index/type-aliases/AssetAliasIdType)
* [BundleIdType](/jsdoc/pixi-vn/index/type-aliases/BundleIdType)
* [CharacterIdType](/jsdoc/pixi-vn/index/type-aliases/CharacterIdType)
* [CommonTickerProps](/jsdoc/pixi-vn/index/type-aliases/CommonTickerProps)
* [ContainerChild](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)
* [ErrorCodeType](/jsdoc/pixi-vn/index/type-aliases/ErrorCodeType)
* [HistoryChoiceMenuOption](/jsdoc/pixi-vn/index/type-aliases/HistoryChoiceMenuOption)
* [InputInfo](/jsdoc/pixi-vn/index/type-aliases/InputInfo)
* [LabelIdType](/jsdoc/pixi-vn/index/type-aliases/LabelIdType)
* [LabelRunModeType](/jsdoc/pixi-vn/index/type-aliases/LabelRunModeType)
* [LabelSteps](/jsdoc/pixi-vn/index/type-aliases/LabelSteps)
* [Layer](/jsdoc/pixi-vn/index/type-aliases/Layer)
* [MotionAnimationOptions](/jsdoc/pixi-vn/index/type-aliases/MotionAnimationOptions)
* [OnErrorHandler](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)
* [PauseType](/jsdoc/pixi-vn/index/type-aliases/PauseType)
* [RepeatType](/jsdoc/pixi-vn/index/type-aliases/RepeatType)
* [StepLabelPropsType](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)
* [StepLabelResultType](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)
* [StepLabelType](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)
* [StorageElementType](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)
* [StorageGameState](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)
* [StorageObjectType](/jsdoc/pixi-vn/index/type-aliases/StorageObjectType)
* [StoredChoiceInterface](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface)
* [StoredIndexedChoiceInterface](/jsdoc/pixi-vn/index/type-aliases/StoredIndexedChoiceInterface)
* [TickerProgrationType](/jsdoc/pixi-vn/index/type-aliases/TickerProgrationType)
* [Assets](/jsdoc/pixi-vn/index/variables/Assets)
* [canvas](/jsdoc/pixi-vn/index/variables/canvas)
* [CANVAS\_APP\_GAME\_LAYER\_ALIAS](/jsdoc/pixi-vn/index/variables/CANVAS_APP_GAME_LAYER_ALIAS)
* [Color](/jsdoc/pixi-vn/index/variables/Color)
* [default](/jsdoc/pixi-vn/index/variables/default)
* [narration](/jsdoc/pixi-vn/index/variables/narration)
* [PIXIVN\_VERSION](/jsdoc/pixi-vn/index/variables/PIXIVN_VERSION)
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle)
* [~~Repeat~~](/jsdoc/pixi-vn/index/variables/Repeat)
* [sound](/jsdoc/pixi-vn/index/variables/sound)
* [stepHistory](/jsdoc/pixi-vn/index/variables/stepHistory)
* [storage](/jsdoc/pixi-vn/index/variables/storage)
* [SYSTEM\_RESERVED\_STORAGE\_KEYS](/jsdoc/pixi-vn/index/variables/SYSTEM_RESERVED_STORAGE_KEYS)
* [TextStyle](/jsdoc/pixi-vn/index/variables/TextStyle)
* [Texture](/jsdoc/pixi-vn/index/variables/Texture)
* [UPDATE\_PRIORITY](/jsdoc/pixi-vn/index/variables/UPDATE_PRIORITY)
* [addImage](/jsdoc/pixi-vn/index/functions/addImage)
* [addImageCointainer](/jsdoc/pixi-vn/index/functions/addImageCointainer)
* [addListenerHandler](/jsdoc/pixi-vn/index/functions/addListenerHandler)
* [addVideo](/jsdoc/pixi-vn/index/functions/addVideo)
* [analizePositionsExtensionProps](/jsdoc/pixi-vn/index/functions/analizePositionsExtensionProps)
* [canvasComponentDecorator](/jsdoc/pixi-vn/index/functions/canvasComponentDecorator)
* [createExportableElement](/jsdoc/pixi-vn/index/functions/createExportableElement)
* [drawCanvasErrorHandler](/jsdoc/pixi-vn/index/functions/drawCanvasErrorHandler)
* [eventDecorator](/jsdoc/pixi-vn/index/functions/eventDecorator)
* [getTexture](/jsdoc/pixi-vn/index/functions/getTexture)
* [moveIn](/jsdoc/pixi-vn/index/functions/moveIn)
* [moveOut](/jsdoc/pixi-vn/index/functions/moveOut)
* [newChoiceOption](/jsdoc/pixi-vn/index/functions/newChoiceOption)
* [newCloseChoiceOption](/jsdoc/pixi-vn/index/functions/newCloseChoiceOption)
* [newLabel](/jsdoc/pixi-vn/index/functions/newLabel)
* [~~Pause~~](/jsdoc/pixi-vn/index/functions/Pause)
* [pushIn](/jsdoc/pixi-vn/index/functions/pushIn)
* [pushOut](/jsdoc/pixi-vn/index/functions/pushOut)
* [removeWithDissolve](/jsdoc/pixi-vn/index/functions/removeWithDissolve)
* [removeWithFade](/jsdoc/pixi-vn/index/functions/removeWithFade)
* [setMemoryContainer](/jsdoc/pixi-vn/index/functions/setMemoryContainer)
* [shakeEffect](/jsdoc/pixi-vn/index/functions/shakeEffect)
* [showImage](/jsdoc/pixi-vn/index/functions/showImage)
* [showImageContainer](/jsdoc/pixi-vn/index/functions/showImageContainer)
* [showText](/jsdoc/pixi-vn/index/functions/showText)
* [showVideo](/jsdoc/pixi-vn/index/functions/showVideo)
* [showWithDissolve](/jsdoc/pixi-vn/index/functions/showWithDissolve)
* [showWithFade](/jsdoc/pixi-vn/index/functions/showWithFade)
* [tickerDecorator](/jsdoc/pixi-vn/index/functions/tickerDecorator)
* [zoomIn](/jsdoc/pixi-vn/index/functions/zoomIn)
* [zoomOut](/jsdoc/pixi-vn/index/functions/zoomOut)

## rendering [#rendering]

* [TextureSourceLike](/jsdoc/pixi-vn/index/type-aliases/TextureSourceLike)

## ticker [#ticker]

* [TickerValue](/jsdoc/pixi-vn/index/interfaces/TickerValue)


# vite (/jsdoc/pixi-vn/vite)



## Interfaces [#interfaces]

* [VitePluginPixivnOptions](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions)

## Variables [#variables]

* [PIXIVN\_DEV\_API\_ASSETS\_MANIFEST](/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_ASSETS_MANIFEST)
* [PIXIVN\_DEV\_API\_CANVAS\_OPTIONS](/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_CANVAS_OPTIONS)
* [PIXIVN\_DEV\_API\_CHARACTERS](/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_CHARACTERS)
* [PIXIVN\_DEV\_API\_LABELS](/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_LABELS)

## Functions [#functions]

* [vitePluginPixivn](/jsdoc/pixi-vn/vite/functions/vitePluginPixivn)


# vite-listener (/jsdoc/pixi-vn/vite-listener)



## Functions [#functions]

* [isViteDevelopmentMode](/jsdoc/pixi-vn/vite-listener/functions/isViteDevelopmentMode)
* [setupPixivnViteData](/jsdoc/pixi-vn/vite-listener/functions/setupPixivnViteData)


# Class: CachedMap<K, V> (/jsdoc/pixi-vn/index/classes/CachedMap)



Defined in: [src/classes/CachedMap.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L3)

## Type Parameters [#type-parameters]

### K [#k]

`K` *extends* `object`

### V [#v]

`V` *extends* `object`

## Implements [#implements]

* `Map`\<`K`, `V`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CachedMap**\<`K`, `V`>(`options`): `CachedMap`\<`K`, `V`>

Defined in: [src/classes/CachedMap.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L6)

#### Parameters [#parameters]

##### options [#options]

###### cacheSize [#cachesize]

`number`

#### Returns [#returns]

`CachedMap`\<`K`, `V`>

## Properties [#properties]

### cache [#cache]

\> `readonly` **cache**: `LRUCache`\<`K`, `V`>

Defined in: [src/classes/CachedMap.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L4)

***

### map [#map]

\> `readonly` **map**: `Map`\<`K`, `V`>

Defined in: [src/classes/CachedMap.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L5)

## Accessors [#accessors]

### \[iterator] [#iterator]

#### Get Signature [#get-signature]

\> **get*&#x2A; &#x2A;*\[iterator]**(): () => `MapIterator`\<\[`K`, `V`]>

Defined in: [src/classes/CachedMap.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L12)

##### Returns [#returns-1]

\> (): `MapIterator`\<\[`K`, `V`]>

Returns an iterable of entries in the map.

###### Returns [#returns-2]

`MapIterator`\<\[`K`, `V`]>

#### Implementation of [#implementation-of]

`Map.[iterator]`

***

### \[toStringTag] [#tostringtag]

#### Get Signature [#get-signature-1]

\> **get*&#x2A; &#x2A;*\[toStringTag]**(): `string`

Defined in: [src/classes/CachedMap.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L15)

##### Returns [#returns-3]

`string`

#### Implementation of [#implementation-of-1]

`Map.[toStringTag]`

***

### forEach [#foreach]

#### Get Signature [#get-signature-2]

\> **get** **forEach**(): (`callbackfn`, `thisArg?`) => `void`

Defined in: [src/classes/CachedMap.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L29)

Executes a provided function once per each key/value pair in the Map, in insertion order.

##### Returns [#returns-4]

\> (`callbackfn`, `thisArg?`): `void`

Executes a provided function once per each key/value pair in the Map, in insertion order.

###### Parameters [#parameters-1]

###### callbackfn [#callbackfn]

(`value`, `key`, `map`) => `void`

###### thisArg? [#thisarg]

`any`

###### Returns [#returns-5]

`void`

#### Implementation of [#implementation-of-2]

`Map.forEach`

***

### size [#size]

#### Get Signature [#get-signature-3]

\> **get** **size**(): `number`

Defined in: [src/classes/CachedMap.ts:47](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L47)

##### Returns [#returns-6]

`number`

the number of elements in the Map.

#### Implementation of [#implementation-of-3]

`Map.size`

## Methods [#methods]

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/classes/CachedMap.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L18)

#### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-4]

`Map.clear`

***

### delete() [#delete]

\> **delete**(`key`): `boolean`

Defined in: [src/classes/CachedMap.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L22)

#### Parameters [#parameters-2]

##### key [#key]

`K`

#### Returns [#returns-8]

`boolean`

true if an element in the Map existed and has been removed, or false if the element does not exist.

#### Implementation of [#implementation-of-5]

`Map.delete`

***

### entries() [#entries]

\> **entries**(): `MapIterator`\<\[`K`, `V`]>

Defined in: [src/classes/CachedMap.ts:50](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L50)

Returns an iterable of key, value pairs for every entry in the map.

#### Returns [#returns-9]

`MapIterator`\<\[`K`, `V`]>

#### Implementation of [#implementation-of-6]

`Map.entries`

***

### get() [#get]

\> **get**(`key`): `V` | `undefined`

Defined in: [src/classes/CachedMap.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L32)

Returns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.

#### Parameters [#parameters-3]

##### key [#key-1]

`K`

#### Returns [#returns-10]

`V` | `undefined`

Returns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.

#### Implementation of [#implementation-of-7]

`Map.get`

***

### has() [#has]

\> **has**(`key`): `boolean`

Defined in: [src/classes/CachedMap.ts:39](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L39)

#### Parameters [#parameters-4]

##### key [#key-2]

`K`

#### Returns [#returns-11]

`boolean`

boolean indicating whether an element with the specified key exists or not.

#### Implementation of [#implementation-of-8]

`Map.has`

***

### keys() [#keys]

\> **keys**(): `MapIterator`\<`K`>

Defined in: [src/classes/CachedMap.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L53)

Returns an iterable of keys in the map

#### Returns [#returns-12]

`MapIterator`\<`K`>

#### Implementation of [#implementation-of-9]

`Map.keys`

***

### set() [#set]

\> **set**(`key`, `value`): `this`

Defined in: [src/classes/CachedMap.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L42)

Adds a new element with a specified key and value to the Map. If an element with the same key already exists, the element will be updated.

#### Parameters [#parameters-5]

##### key [#key-3]

`K`

##### value [#value]

`V`

#### Returns [#returns-13]

`this`

#### Implementation of [#implementation-of-10]

`Map.set`

***

### values() [#values]

\> **values**(): `MapIterator`\<`V`>

Defined in: [src/classes/CachedMap.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/classes/CachedMap.ts#L56)

Returns an iterable of values in the map

#### Returns [#returns-14]

`MapIterator`\<`V`>

#### Implementation of [#implementation-of-11]

`Map.values`


# Class: CanvasBaseItem<T2> (/jsdoc/pixi-vn/index/classes/CanvasBaseItem)



Defined in: [src/canvas/classes/CanvasBaseItem.ts:31](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L31)

This class is used to create a canvas element to add into a Pixi Application.
You can use [()](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add this element into the application.
This class should be implemented and the memory method should be overridden.
You must use the [canvasComponentDecorator](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents) to register the canvas in the game.
In Ren'Py is a displayable.

## Example [#example]

```ts
const CANVAS_EXAMPLE_ID = "CanvasExample";

\@canvasComponentDecorator({
    name: CANVAS_EXAMPLE_ID,
})
export class CanvasExample extends Container implements CanvasBaseItem<Memory> {
    get memory(): Memory {
        return {
            pixivnId: CANVAS_EXAMPLE_ID,
            // ... other properties
        }
    }
    async setMemory(value: Memory) {
        // ... set other properties
    }
}
```

## Extended by [#extended-by]

* [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)

## Type Parameters [#type-parameters]

### T2 [#t2]

`T2` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CanvasBaseItem**\<`T2`>(...`_options`): `CanvasBaseItem`\<`T2`>

Defined in: [src/canvas/classes/CanvasBaseItem.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L32)

#### Parameters [#parameters]

##### \_options [#_options]

...`any`

#### Returns [#returns]

`CanvasBaseItem`\<`T2`>

## Properties [#properties]

### pixivnId [#pixivnid]

\> **pixivnId**: `string` = `"canvas_element_id_not_set"`

Defined in: [src/canvas/classes/CanvasBaseItem.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L56)

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

## Accessors [#accessors]

### memory [#memory]

#### Get Signature [#get-signature]

\> **get** **memory**(): `T2`

Defined in: [src/canvas/classes/CanvasBaseItem.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L37)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-1]

`T2`

## Methods [#methods]

### setMemory() [#setmemory]

\> **setMemory**(`_value`): `void` | `Promise`\<`void`>

Defined in: [src/canvas/classes/CanvasBaseItem.ts:47](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L47)

This method set the memory of the canvas element.

#### Parameters [#parameters-1]

##### \_value [#_value]

`T2`

#### Returns [#returns-2]

`void` | `Promise`\<`void`>

#### Throws [#throws-1]

when the method is not overridden in the subclass.


# Class: CanvasManagerStatic (/jsdoc/pixi-vn/index/classes/CanvasManagerStatic)



Defined in: [src/canvas/CanvasManagerStatic.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L19)

This class is responsible for managing the canvas, the tickers, the events, and the window size and the children of the window.

## Properties [#properties]

### \_currentTickers [#_currenttickers]

\> `readonly` `static&#x60; **\_currentTickers**: `Map`\<`string`, [`TickerInfo`](/jsdoc/pixi-vn/index/interfaces/TickerInfo)\<`any`>>

Defined in: [src/canvas/CanvasManagerStatic.ts:252](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L252)

***

### \_currentTickersSequence [#_currenttickerssequence]

\> `readonly` `static&#x60; **\_currentTickersSequence**: `Map`\<`string`, `Map`\<`string`, [`TickersSequence`](/jsdoc/pixi-vn/index/interfaces/TickersSequence)>>

Defined in: [src/canvas/CanvasManagerStatic.ts:253](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L253)

***

### \_currentTickersTimeouts [#_currenttickerstimeouts]

\> `readonly` `static&#x60; **\_currentTickersTimeouts**: `Map`\<`string`, [`TickerTimeoutHistory`](/jsdoc/pixi-vn/index/interfaces/TickerTimeoutHistory)>

Defined in: [src/canvas/CanvasManagerStatic.ts:263](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L263)

***

### \_isInitialized [#_isinitialized]

\> `static&#x60; **\_isInitialized**: `boolean` = `false`

Defined in: [src/canvas/CanvasManagerStatic.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L51)

***

### \_tickersToCompleteOnStepEnd [#_tickerstocompleteonstepend]

\> `readonly` `static&#x60; **\_tickersToCompleteOnStepEnd**: `object`

Defined in: [src/canvas/CanvasManagerStatic.ts:264](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L264)

#### stepAlias [#stepalias]

\> **stepAlias**: `object`\[]

#### tikersIds [#tikersids]

\> **tikersIds**: `object`\[]

***

### canvasHeight [#canvasheight]

\> `static` **canvasHeight**: `number` = `300`

Defined in: [src/canvas/CanvasManagerStatic.ts:50](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L50)

***

### canvasWidth [#canvaswidth]

\> `static` **canvasWidth**: `number` = `300`

Defined in: [src/canvas/CanvasManagerStatic.ts:49](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L49)

***

### htmlLayers [#htmllayers]

\> `static` **htmlLayers**: `HTMLElement`\[] = `[]`

Defined in: [src/canvas/CanvasManagerStatic.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L48)

This is the div that have same size of the canvas.
This is useful to put interface elements.
You can use React or other framework to put elements in this div.

## Accessors [#accessors]

### app [#app]

#### Get Signature [#get-signature]

\> **get** `static` **app**(): `Application`\<`Renderer`>

Defined in: [src/canvas/CanvasManagerStatic.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L27)

The Pixi.js application instance.

##### Throws [#throws]

when the canvas has not been initialized yet (i.e. before calling `Game.init()`).

##### Returns [#returns]

`Application`\<`Renderer`>

***

### childrenAliasesOrder [#childrenaliasesorder]

#### Get Signature [#get-signature-1]

\> **get** `static` **childrenAliasesOrder**(): `string`\[]

Defined in: [src/canvas/CanvasManagerStatic.ts:220](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L220)

The order of the elements in the canvas, is determined by the zIndex.

##### Returns [#returns-1]

`string`\[]

***

### currentTickersSequence [#currenttickerssequence]

#### Get Signature [#get-signature-2]

\> **get** `static` **currentTickersSequence**(): `object`

Defined in: [src/canvas/CanvasManagerStatic.ts:254](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L254)

##### Returns [#returns-2]

`object`

***

### currentTickersWithoutCreatedBySteps [#currenttickerswithoutcreatedbysteps]

#### Get Signature [#get-signature-3]

\> **get** `static` **currentTickersWithoutCreatedBySteps**(): `object`

Defined in: [src/canvas/CanvasManagerStatic.ts:233](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L233)

Edit Tickers Methods

##### Returns [#returns-3]

`object`

***

### gameLayer [#gamelayer]

#### Get Signature [#get-signature-4]

\> **get** `static` **gameLayer**(): `Container`\<`ContainerChild`>

Defined in: [src/canvas/CanvasManagerStatic.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L34)

##### Returns [#returns-4]

`Container`\<`ContainerChild`>

## Methods [#methods]

### addHtmlLayer() [#addhtmllayer]

\> `static` **addHtmlLayer**(`id`, `element`, `style?`): `HTMLDivElement`

Defined in: [src/canvas/CanvasManagerStatic.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L137)

#### Parameters [#parameters]

##### id [#id]

`string`

##### element [#element]

`HTMLElement`

##### style? [#style]

`Partial`\<`Pick`\<`CSSStyleDeclaration`, `"position"` | `"pointerEvents"` | `"userSelect"`>> = `{}`

#### Returns [#returns-5]

`HTMLDivElement`

***

### addTickerTimeoutInfo() [#addtickertimeoutinfo]

\> `static` **addTickerTimeoutInfo**(`aliases`, `ticker`, `timeout`, `canBeDeletedBeforeEnd`): `void`

Defined in: [src/canvas/CanvasManagerStatic.ts:275](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L275)

#### Parameters [#parameters-1]

##### aliases [#aliases]

`string` | `string`\[]

##### ticker [#ticker]

`string`

##### timeout [#timeout]

`string`

##### canBeDeletedBeforeEnd [#canbedeletedbeforeend]

`boolean`

#### Returns [#returns-6]

`void`

***

### generateTickerId() [#generatetickerid]

\> `static` **generateTickerId**(...`args`): `string`

Defined in: [src/canvas/CanvasManagerStatic.ts:268](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L268)

#### Parameters [#parameters-2]

##### args [#args]

...`any`\[]

#### Returns [#returns-7]

`string`

***

### getHtmlLayer() [#gethtmllayer]

\> `static` **getHtmlLayer**(`id`): `HTMLElement` | `undefined`

Defined in: [src/canvas/CanvasManagerStatic.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L162)

#### Parameters [#parameters-3]

##### id [#id-1]

`string`

#### Returns [#returns-8]

`HTMLElement` | `undefined`

***

### init() [#init]

\> `static` **init**(`element`, `options?`, `devtoolsOptions?`): `Promise`\<`void`>

Defined in: [src/canvas/CanvasManagerStatic.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L53)

#### Parameters [#parameters-4]

##### element [#element-1]

`HTMLElement`

##### options? [#options]

`Partial`\<[`ApplicationOptions`](/jsdoc/pixi-vn/index/interfaces/ApplicationOptions)> & `object`

##### devtoolsOptions? [#devtoolsoptions]

`Devtools`

#### Returns [#returns-9]

`Promise`\<`void`>

***

### removeHtmlLayer() [#removehtmllayer]

\> `static` **removeHtmlLayer**(`id`): `void`

Defined in: [src/canvas/CanvasManagerStatic.ts:153](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L153)

#### Parameters [#parameters-5]

##### id [#id-2]

`string`

#### Returns [#returns-10]

`void`

***

### removeTickerTimeout() [#removetickertimeout]

\> `static` **removeTickerTimeout**(`timeout`): `void`

Defined in: [src/canvas/CanvasManagerStatic.ts:296](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L296)

#### Parameters [#parameters-6]

##### timeout [#timeout-1]

`string` | `Timeout`

#### Returns [#returns-11]

`void`

***

### removeTickerTimeoutInfo() [#removetickertimeoutinfo]

\> `static` **removeTickerTimeoutInfo**(`timeout`): `void`

Defined in: [src/canvas/CanvasManagerStatic.ts:290](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L290)

#### Parameters [#parameters-7]

##### timeout [#timeout-2]

`string` | `Timeout`

#### Returns [#returns-12]

`void`

***

### removeTickerTimeoutsByAlias() [#removetickertimeoutsbyalias]

\> `static` **removeTickerTimeoutsByAlias**(`alias`, `checkCanBeDeletedBeforeEnd`): `void`

Defined in: [src/canvas/CanvasManagerStatic.ts:303](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/CanvasManagerStatic.ts#L303)

#### Parameters [#parameters-8]

##### alias [#alias]

`string`

##### checkCanBeDeletedBeforeEnd [#checkcanbedeletedbeforeend]

`boolean`

#### Returns [#returns-13]

`void`


# Class: CharacterBaseModel (/jsdoc/pixi-vn/index/classes/CharacterBaseModel)



Defined in: [src/characters/classes/CharacterBaseModel.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L33)

CharacterBaseModel is a class that is used to create a character model.
You must use the [RegisteredCharacters.add](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/add) function to save the character in the game.
It is raccomended to create your own class Character, read more here: [https://pixi-vn.com/start/character.html#custom-character](https://pixi-vn.com/start/character.html#custom-character)

## Example [#example]

```ts
import { CharacterBaseModel, RegisteredCharacters } from "@drincs/pixi-vn";

export const liam = new CharacterBaseModel("liam", {
    name: "Liam",
    surname: "Smith",
    age: 25,
    icon: "https://example.com/liam.png",
    color: "#9e2e12",
});

export const emma = new CharacterBaseModel("emma", {
    name: "Emma",
    surname: "Johnson",
    age: 23,
    icon: "https://example.com/emma.png",
    color: "#9e2e12",
});

RegisteredCharacters.add([liam, emma]);
```

## Extends [#extends]

* [`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CharacterBaseModel**(`id`, `props`): `CharacterBaseModel`

Defined in: [src/characters/classes/CharacterBaseModel.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L38)

#### Parameters [#parameters]

##### id [#id]

`string` | [`CharacterEmotionId`](/jsdoc/pixi-vn/index/interfaces/CharacterEmotionId)

A unique identifier (string). It is used to reference the character in the game (must be unique). If you want to create a character with an "emotion", you can pass an object.

##### props [#props]

`CharacterBaseModelProps`

The properties of the character.

#### Returns [#returns]

`CharacterBaseModel`

#### Overrides [#overrides]

[`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass).[`constructor`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass#constructor)

## Properties [#properties]

### color? [#color]

\> `readonly` `optional` &#x2A;*color?**: `string`

Defined in: [src/characters/classes/CharacterBaseModel.ts:86](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L86)

The color of the character.

***

### defaultAge? [#defaultage]

\> `readonly` `optional` &#x2A;*defaultAge?**: `number`

Defined in: [src/characters/classes/CharacterBaseModel.ts:68](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L68)

***

### defaultName? [#defaultname]

\> `readonly` `optional` &#x2A;*defaultName?**: `string`

Defined in: [src/characters/classes/CharacterBaseModel.ts:46](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L46)

***

### defaultSurname? [#defaultsurname]

\> `readonly` `optional` &#x2A;*defaultSurname?**: `string`

Defined in: [src/characters/classes/CharacterBaseModel.ts:57](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L57)

***

### icon? [#icon]

\> `readonly` `optional` &#x2A;*icon?**: `string`

Defined in: [src/characters/classes/CharacterBaseModel.ts:82](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L82)

The icon of the character.

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/storage/classes/StoredClassModel.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L63)

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from]

[`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass).[`id`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass#id)

## Accessors [#accessors]

### age [#age]

#### Get Signature [#get-signature]

\> **get** **age**(): `number` | `undefined`

Defined in: [src/characters/classes/CharacterBaseModel.ts:73](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L73)

The age of the character.
If you set undefined, it will return the default age.

##### Returns [#returns-1]

`number` | `undefined`

#### Set Signature [#set-signature]

\> **set** **age**(`value`): `void`

Defined in: [src/characters/classes/CharacterBaseModel.ts:76](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L76)

##### Parameters [#parameters-1]

###### value [#value]

`number` | `undefined`

##### Returns [#returns-2]

`void`

***

### name [#name]

#### Get Signature [#get-signature-1]

\> **get** **name**(): `string`

Defined in: [src/characters/classes/CharacterBaseModel.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L51)

The name of the character.
If you set undefined, it will return the default name.

##### Returns [#returns-3]

`string`

#### Set Signature [#set-signature-1]

\> **set** **name**(`value`): `void`

Defined in: [src/characters/classes/CharacterBaseModel.ts:54](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L54)

##### Parameters [#parameters-2]

###### value [#value-1]

`string` | `undefined`

##### Returns [#returns-4]

`void`

***

### surname [#surname]

#### Get Signature [#get-signature-2]

\> **get** **surname**(): `string` | `undefined`

Defined in: [src/characters/classes/CharacterBaseModel.ts:62](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L62)

The surname of the character.
If you set undefined, it will return the default surname.

##### Returns [#returns-5]

`string` | `undefined`

#### Set Signature [#set-signature-2]

\> **set** **surname**(`value`): `void`

Defined in: [src/characters/classes/CharacterBaseModel.ts:65](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterBaseModel.ts#L65)

##### Parameters [#parameters-3]

###### value [#value-2]

`string` | `undefined`

##### Returns [#returns-6]

`void`

## Methods [#methods]

### getStorageProperty() [#getstorageproperty]

\> **getStorageProperty**\<`T`>(`propertyName`): `T` | `undefined`

Defined in: [src/characters/classes/CharacterStoredClass.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterStoredClass.ts#L16)

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T`

#### Parameters [#parameters-4]

##### propertyName [#propertyname]

`string`

The name of the property to get.

#### Returns [#returns-7]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-1]

[`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass).[`getStorageProperty`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass#getstorageproperty)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L43)

#### Parameters [#parameters-5]

##### oldCategoryId? [#oldcategoryid]

`string` = `...`

#### Returns [#returns-8]

`void`

#### Inherited from [#inherited-from-2]

[`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass).[`migrateOldStorage`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L71)

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-6]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-3]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-3]

[`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass).[`setStorageProperty`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass#setstorageproperty)


# Class: CharacterStoredClass (/jsdoc/pixi-vn/index/classes/CharacterStoredClass)



Defined in: [src/characters/classes/CharacterStoredClass.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterStoredClass.ts#L5)

StoredClassModel is a abstract class that contains the methods to store a class in the game.
I suggest you extend this class to create your own stored class.

## Example [#example]

```ts
export class CharacterBaseModel extends StoredClassModel implements CharacterBaseModelProps {
    constructor(id: string, props: CharacterBaseModelProps) {
        super("___character___", id)
        this.defaultName = props.name
        this.defaultSurname = props.surname
    }
    readonly defaultName: string = ""
    get name(): string {
        return this.getStorageProperty<string>("name") || this.defaultName
    }
    set name(value: string) {
        this.setStorageProperty("name", value)
    }
    readonly defaultSurname?: string
    get surname(): string | undefined {
        return this.getStorageProperty<string>("surname") || this.defaultSurname
    }
    set surname(value: string | undefined) {
        this.setStorageProperty("surname", value)
    }
}
```

## Extends [#extends]

* [`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel)

## Extended by [#extended-by]

* [`CharacterBaseModel`](/jsdoc/pixi-vn/index/classes/CharacterBaseModel)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CharacterStoredClass**(`id`, `emotion?`): `CharacterStoredClass`

Defined in: [src/characters/classes/CharacterStoredClass.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterStoredClass.ts#L7)

#### Parameters [#parameters]

##### id [#id]

`string`

##### emotion? [#emotion]

`string` = `""`

#### Returns [#returns]

`CharacterStoredClass`

#### Overrides [#overrides]

[`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel).[`constructor`](/jsdoc/pixi-vn/index/classes/StoredClassModel#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/storage/classes/StoredClassModel.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L63)

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from]

[`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel).[`id`](/jsdoc/pixi-vn/index/classes/StoredClassModel#id)

## Methods [#methods]

### getStorageProperty() [#getstorageproperty]

\> **getStorageProperty**\<`T`>(`propertyName`): `T` | `undefined`

Defined in: [src/characters/classes/CharacterStoredClass.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/classes/CharacterStoredClass.ts#L16)

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T`

#### Parameters [#parameters-1]

##### propertyName [#propertyname]

`string`

The name of the property to get.

#### Returns [#returns-1]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Overrides [#overrides-1]

[`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel).[`getStorageProperty`](/jsdoc/pixi-vn/index/classes/StoredClassModel#getstorageproperty)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L43)

#### Parameters [#parameters-2]

##### oldCategoryId? [#oldcategoryid]

`string` = `...`

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-1]

[`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel).[`migrateOldStorage`](/jsdoc/pixi-vn/index/classes/StoredClassModel#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L71)

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-3]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-3]

`void`

#### Inherited from [#inherited-from-2]

[`StoredClassModel`](/jsdoc/pixi-vn/index/classes/StoredClassModel).[`setStorageProperty`](/jsdoc/pixi-vn/index/classes/StoredClassModel#setstorageproperty)


# Class: Container<C, Memory> (/jsdoc/pixi-vn/index/classes/Container)



Defined in: [src/canvas/components/Container.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L42)

This class is a extension of the [PIXI.Container class](https://pixijs.com/8.x/examples/basic/container), it has the same properties and methods,
but it has the ability to be saved and loaded by the Pixi’VN library.

## Example [#example]

```ts
 const container = new Container();
 canvas.add(container);
 const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
 for (let i = 0; i < 25; i++)
 {
     const bunny = new Sprite(texture);
     bunny.x = (i % 5) * 40;
     bunny.y = Math.floor(i / 5) * 40;
     container.addChild(bunny);
 }
```

## Extends [#extends]

* `Container`\<`C`>

## Extended by [#extended-by]

* [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer)

## Type Parameters [#type-parameters]

### C [#c]

`C` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) = [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

### Memory [#memory]

`Memory` *extends* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory) = [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)

## Implements [#implements]

* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`Memory`>
* [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension)
* [`AnchorExtension`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension)
* [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Container**\<`C`, `Memory`>(`options?`): `Container`\<`C`, `Memory`>

Defined in: [src/canvas/components/Container.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L53)

#### Parameters [#parameters]

##### options? [#options]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)\<`C`>

#### Returns [#returns]

`Container`\<`C`, `Memory`>

#### Overrides [#overrides]

`PixiContainer<C>.constructor`

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

`PixiContainer.__devtoolIgnore`

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

`PixiContainer.__devtoolIgnoreChildren`

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

`PixiContainer.__devtoolLocked`

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-3]

`PixiContainer._cx`

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-4]

`PixiContainer._cy`

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-5]

`PixiContainer._pivot`

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-6]

`PixiContainer._position`

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-7]

`PixiContainer._scale`

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-8]

`PixiContainer._skew`

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-9]

`PixiContainer._sx`

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-10]

`PixiContainer._sy`

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-11]

`PixiContainer._zIndex`

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-12]

`PixiContainer.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-13]

`PixiContainer.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-14]

`PixiContainer.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-15]

`PixiContainer.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-16]

`PixiContainer.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-17]

`PixiContainer.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-18]

`PixiContainer.accessibleType`

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:10

**`Internal`**

#### Inherited from [#inherited-from-19]

`PixiContainer.allowChildren`

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-20]

`PixiContainer.boundsArea`

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-21]

`PixiContainer.cacheAsBitmap`

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-22]

`PixiContainer.cacheAsTexture`

***

### children [#children]

\> `readonly` **children**: `C`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](#addchild) For adding children
* [Container#removeChild](#removechild) For removing children

#### Inherited from [#inherited-from-23]

`PixiContainer.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-24]

`PixiContainer.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-25]

`PixiContainer.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-26]

`PixiContainer.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-27]

`PixiContainer.cursor`

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-28]

`PixiContainer.depthOfChildModified`

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](#destroy) For destroying objects

#### Inherited from [#inherited-from-29]

`PixiContainer.destroyed`

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-30]

`PixiContainer.effects`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-31]

`PixiContainer.eventMode`

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-32]

`PixiContainer.filterArea`

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-33]

`PixiContainer.globalDisplayStatus`

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-34]

`PixiContainer.groupAlpha`

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-35]

`PixiContainer.groupBlendMode`

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-36]

`PixiContainer.groupColor`

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-37]

`PixiContainer.groupColorAlpha`

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-38]

`PixiContainer.groupTransform`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-39]

`PixiContainer.hitArea`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-40]

`PixiContainer.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-41]

`PixiContainer.interactiveChildren`

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](#cacheastexture) For enabling caching
* [Container#updateCacheTexture](#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-42]

`PixiContainer.isCachedAsTexture`

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-43]

`PixiContainer.isInteractive`

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-45]

`PixiContainer.layerParentId`

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-46]

`PixiContainer.localAlpha`

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-47]

`PixiContainer.localBlendMode`

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-48]

`PixiContainer.localColor`

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-49]

`PixiContainer.localDisplayStatus`

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-50]

`PixiContainer.localTransform`

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-51]

`PixiContainer.mask`

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-52]

`PixiContainer.name`

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-53]

`PixiContainer.onclick`

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Container.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L93)

ListenerExtension

#### Implementation of [#implementation-of]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`onEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-54]

`PixiContainer.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-55]

`PixiContainer.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-56]

`PixiContainer.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-57]

`PixiContainer.onmousedown`

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-58]

`PixiContainer.onmouseenter`

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-59]

`PixiContainer.onmouseleave`

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-60]

`PixiContainer.onmousemove`

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-61]

`PixiContainer.onmouseout`

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-62]

`PixiContainer.onmouseover`

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-63]

`PixiContainer.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-64]

`PixiContainer.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-65]

`PixiContainer.onpointercancel`

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-66]

`PixiContainer.onpointerdown`

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-67]

`PixiContainer.onpointerenter`

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-68]

`PixiContainer.onpointerleave`

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-69]

`PixiContainer.onpointermove`

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-70]

`PixiContainer.onpointerout`

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-71]

`PixiContainer.onpointerover`

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-72]

`PixiContainer.onpointertap`

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-73]

`PixiContainer.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-74]

`PixiContainer.onpointerupoutside`

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-76]

`PixiContainer.onrightclick`

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-77]

`PixiContainer.onrightdown`

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-78]

`PixiContainer.onrightup`

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-79]

`PixiContainer.onrightupoutside`

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-80]

`PixiContainer.ontap`

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-81]

`PixiContainer.ontouchcancel`

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-82]

`PixiContainer.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-83]

`PixiContainer.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-84]

`PixiContainer.ontouchmove`

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-57]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-85]

`PixiContainer.ontouchstart`

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-86]

`PixiContainer.onwheel`

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](#addchild) For adding to a parent
* [Container#removeChild](#removechild) For removing from parent

#### Inherited from [#inherited-from-87]

`PixiContainer.parent`

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-88]

`PixiContainer.parentRenderLayer`

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_CONTAINER_ID`

Defined in: [src/canvas/components/Container.ts:68](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L68)

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

#### Implementation of [#implementation-of-1]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`pixivnId`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-89]

`PixiContainer.relativeGroupTransform`

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:800

**`Internal`**

#### Inherited from [#inherited-from-90]

`PixiContainer.renderPipeId`

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-91]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-92]

`PixiContainer.sortChildren`

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-93]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-94]

`PixiContainer.tabIndex`

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-95]

`PixiContainer.uid`

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-96]

`PixiContainer.updateCacheTexture`

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-97]

`PixiContainer.updateTick`

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-98]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-99]

`PixiContainer.prefixed`

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Container.ts:160](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L160)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:148](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L148)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-2]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-100]

`PixiContainer.alpha`

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `PointData`

Defined in: [src/canvas/components/Container.ts:119](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L119)

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-66]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Returns [#returns-10]

`PointData`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:124](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L124)

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-67]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

#### Example [#example-68]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

#### Implementation of [#implementation-of-3]

[`AnchorExtension`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension).[`anchor`](/jsdoc/pixi-vn/index/interfaces/AnchorExtension#anchor)

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-69]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-101]

`PixiContainer.angle`

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-70]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-102]

`PixiContainer.blendMode`

***

### filters [#filters]

#### Get Signature [#get-signature-5]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-71]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-16]

Filter For filter base class

##### Returns [#returns-16]

readonly `Filter`\[]

#### Set Signature [#set-signature-5]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-72]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-17]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-5]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-103]

`PixiContainer.filters`

***

### height [#height]

#### Get Signature [#get-signature-6]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-73]

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

##### Returns [#returns-18]

`number`

#### Set Signature [#set-signature-6]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118

##### Parameters [#parameters-8]

###### value [#value-6]

`number`

##### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-104]

`PixiContainer.height`

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-7]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-20]

`boolean`

#### Inherited from [#inherited-from-105]

`PixiContainer.isRenderable`

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-8]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-21]

`boolean`

#### Set Signature [#set-signature-7]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-7]

`boolean`

##### Returns [#returns-22]

`void`

#### Inherited from [#inherited-from-106]

`PixiContainer.isRenderGroup`

***

### memory [#memory-1]

#### Get Signature [#get-signature-9]

\> **get** **memory**(): `Memory`

Defined in: [src/canvas/components/Container.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L69)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-23]

`Memory`

#### Implementation of [#implementation-of-4]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory)

***

### origin [#origin]

#### Get Signature [#get-signature-10]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-74]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-24]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-8]

`number` | `PointData`

##### Returns [#returns-25]

`void`

#### Inherited from [#inherited-from-107]

`PixiContainer.origin`

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-11]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Container.ts:231](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L231)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-26]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-9]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:219](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L219)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-9]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-27]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-5]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-12]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Container.ts:245](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L245)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-28]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Container.ts:237](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L237)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-29]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-6]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-13]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Container.ts:256](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L256)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-30]

`number`

#### Set Signature [#set-signature-11]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Container.ts:248](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L248)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-31]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-7]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-14]

\> **get** **pivot**(): `ObservablePoint`

Defined in: [src/canvas/components/Container.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L137)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-75]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-32]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **pivot**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L140)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-76]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-3]

4.0.0

##### Parameters [#parameters-14]

###### value [#value-10]

`ObservablePoint`

##### Returns [#returns-33]

`void`

#### Overrides [#overrides-1]

`PixiContainer.pivot`

***

### position [#position]

#### Get Signature [#get-signature-15]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Container.ts:323](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L323)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-77]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Returns [#returns-34]

`ObservablePoint`

#### Set Signature [#set-signature-13]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:326](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L326)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-78]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-5]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-11]

`ObservablePoint`

##### Returns [#returns-35]

`void`

#### Overrides [#overrides-2]

`PixiContainer.position`

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-16]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Container.ts:267](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L267)

##### Returns [#returns-36]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-14]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:277](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L277)

##### Parameters [#parameters-16]

###### value [#value-12]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-37]

`void`

#### Implementation of [#implementation-of-8]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionInfo`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-17]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Container.ts:259](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L259)

##### Returns [#returns-38]

`"pixel"` | `"percentage"` | `"align"`

#### Implementation of [#implementation-of-9]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionType`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-18]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-79]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-18]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-39]

`boolean`

#### Set Signature [#set-signature-15]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-13]

`boolean`

##### Returns [#returns-40]

`void`

#### Inherited from [#inherited-from-108]

`PixiContainer.renderable`

***

### rotation [#rotation]

#### Get Signature [#get-signature-19]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-80]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-41]

`number`

#### Set Signature [#set-signature-16]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-18]

###### value [#value-14]

`number`

##### Returns [#returns-42]

`void`

#### Inherited from [#inherited-from-109]

`PixiContainer.rotation`

***

### scale [#scale]

#### Get Signature [#get-signature-20]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-81]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-6]

4.0.0

##### Returns [#returns-43]

`ObservablePoint`

#### Set Signature [#set-signature-17]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-19]

###### value [#value-15]

`string` | `number` | `PointData`

##### Returns [#returns-44]

`void`

#### Inherited from [#inherited-from-110]

`PixiContainer.scale`

***

### skew [#skew]

#### Get Signature [#get-signature-21]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-82]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-7]

4.0.0

##### Default [#default-55]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-45]

`ObservablePoint`

#### Set Signature [#set-signature-18]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-20]

###### value [#value-16]

`PointData`

##### Returns [#returns-46]

`void`

#### Inherited from [#inherited-from-111]

`PixiContainer.skew`

***

### tint [#tint]

#### Get Signature [#get-signature-22]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-83]

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

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

##### Default [#default-56]

```ts
0xFFFFFF
```

##### See [#see-19]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-47]

`number`

#### Set Signature [#set-signature-19]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-21]

###### value [#value-17]

`ColorSource`

##### Returns [#returns-48]

`void`

#### Inherited from [#inherited-from-112]

`PixiContainer.tint`

***

### visible [#visible]

#### Get Signature [#get-signature-23]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-84]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-57]

```ts
true
```

##### See [#see-20]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-49]

`boolean`

#### Set Signature [#set-signature-20]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-22]

###### value [#value-18]

`boolean`

##### Returns [#returns-50]

`void`

#### Inherited from [#inherited-from-113]

`PixiContainer.visible`

***

### width [#width]

#### Get Signature [#get-signature-24]

\> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set.
\> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-85]

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

##### Returns [#returns-51]

`number`

#### Set Signature [#set-signature-21]

\> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103

##### Parameters [#parameters-23]

###### value [#value-19]

`number`

##### Returns [#returns-52]

`void`

#### Inherited from [#inherited-from-114]

`PixiContainer.width`

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-25]

\> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-86]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-21]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-53]

`Matrix`

#### Inherited from [#inherited-from-115]

`PixiContainer.worldTransform`

***

### x [#x-2]

#### Get Signature [#get-signature-26]

\> **get** **x**(): `number`

Defined in: [src/canvas/components/Container.ts:331](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L331)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-87]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-54]

`number`

#### Set Signature [#set-signature-22]

\> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:334](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L334)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-88]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-24]

###### value [#value-20]

`number`

##### Returns [#returns-55]

`void`

#### Overrides [#overrides-3]

`PixiContainer.x`

***

### xAlign [#xalign]

#### Get Signature [#get-signature-27]

\> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Container.ts:188](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L188)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-56]

`number`

#### Set Signature [#set-signature-23]

\> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L180)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-25]

###### value [#value-21]

`number`

##### Returns [#returns-57]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-10]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-28]

\> **get** **y**(): `number`

Defined in: [src/canvas/components/Container.ts:339](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L339)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-89]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-58]

`number`

#### Set Signature [#set-signature-24]

\> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:342](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L342)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-90]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-26]

###### value [#value-22]

`number`

##### Returns [#returns-59]

`void`

#### Overrides [#overrides-4]

`PixiContainer.y`

***

### yAlign [#yalign]

#### Get Signature [#get-signature-29]

\> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Container.ts:207](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L207)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-60]

`number`

#### Set Signature [#set-signature-25]

\> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L199)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-27]

###### value [#value-23]

`number`

##### Returns [#returns-61]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-11]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

\> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-28]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-62]

`void`

#### Inherited from [#inherited-from-116]

`PixiContainer._getGlobalBoundsRecursive`

***

### addChild() [#addchild]

\> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters-1]

##### U [#u]

`U` *extends* `C`\[]

#### Parameters [#parameters-29]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-63]

`U`\[`0`]

The first child that was added

#### Example [#example-91]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-22]

* [Container#removeChild](#removechild) For removing children
* [Container#addChildAt](#addchildat) For adding at specific index

#### Inherited from [#inherited-from-117]

`PixiContainer.addChild`

***

### addChildAt() [#addchildat]

\> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-2]

##### U [#u-1]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-30]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-64]

`U`

The child that was added

#### Example [#example-92]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-23]

* [Container#addChild](#addchild) For adding to the end
* [Container#setChildIndex](#setchildindex) For moving existing children

#### Inherited from [#inherited-from-118]

`PixiContainer.addChildAt`

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

\> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-3]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-31]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-65]

`void`

##### Example [#example-93]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-119]

`PixiContainer.addEventListener`

#### Call Signature [#call-signature-1]

\> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-32]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-66]

`void`

##### Inherited from [#inherited-from-120]

`PixiContainer.addEventListener`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-4]

##### T [#t]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-33]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-67]

`this`

#### Inherited from [#inherited-from-121]

`PixiContainer.addListener`

***

### collectRenderables() [#collectrenderables]

\> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-34]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-68]

`void`

#### Inherited from [#inherited-from-122]

`PixiContainer.collectRenderables`

***

### collectRenderablesSimple() [#collectrenderablessimple]

\> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:30

**`Internal`**

Collects renderables using a simple method, suitable for containers marked as simple.
This method iterates over the container's children and adds their renderables to the instruction set.

#### Parameters [#parameters-35]

##### instructionSet [#instructionset-1]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-1]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-69]

`void`

#### Inherited from [#inherited-from-123]

`PixiContainer.collectRenderablesSimple`

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

\> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-36]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-70]

`void`

#### Inherited from [#inherited-from-124]

`PixiContainer.collectRenderablesWithEffects`

***

### destroy() [#destroy]

\> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1343

Removes all internal references and listeners as well as removes children from the display list.
Do not use a Container after calling `destroy`.

#### Parameters [#parameters-37]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-71]

`void`

#### Example [#example-94]

```ts
container.destroy();
container.destroy(true);
container.destroy({ children: true });
container.destroy({ children: true, texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-125]

`PixiContainer.destroy`

***

### disableRenderGroup() [#disablerendergroup]

\> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-72]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-126]

`PixiContainer.disableRenderGroup`

***

### dispatchEvent() [#dispatchevent]

\> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this Container using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-38]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-73]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-95]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-127]

`PixiContainer.dispatchEvent`

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-1]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-39]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`C`> & `AnyEvent`>\[`Extract`\<`T`, keyof AnyEvent | keyof ContainerEvents\<C>>]

#### Returns [#returns-74]

`boolean`

#### Inherited from [#inherited-from-128]

`PixiContainer.emit`

***

### enableRenderGroup() [#enablerendergroup]

\> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-75]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-129]

`PixiContainer.enableRenderGroup`

***

### eventNames() [#eventnames]

\> **eventNames**(): (keyof AnyEvent | keyof ContainerEvents\<C>)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-76]

(keyof AnyEvent | keyof ContainerEvents\<C>)\[]

#### Inherited from [#inherited-from-130]

`PixiContainer.eventNames`

***

### getBounds() [#getbounds]

\> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-40]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-1]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-77]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-96]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-24]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-131]

`PixiContainer.getBounds`

***

### getChildAt() [#getchildat]

\> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-6]

##### U [#u-2]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-41]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-78]

`U`

The child at the given index

#### Example [#example-97]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-25]

* [Container#children](#children) For direct array access
* [Container#getChildByLabel](#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-132]

`PixiContainer.getChildAt`

***

### getChildByLabel() [#getchildbylabel]

\> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-42]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-79]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-98]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-26]

* [Container#getChildrenByLabel](#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-133]

`PixiContainer.getChildByLabel`

***

### ~~getChildByName()~~ [#getchildbyname]

\> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-43]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-80]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-27]

Container#getChildByLabel

#### Inherited from [#inherited-from-134]

`PixiContainer.getChildByName`

***

### getChildIndex() [#getchildindex]

\> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-44]

##### child [#child-1]

`C`

The Container instance to identify

#### Returns [#returns-81]

`number`

The index position of the child container

#### Example [#example-99]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-28]

* [Container#setChildIndex](#setchildindex) For changing index
* [Container#children](#children) For direct array access

#### Inherited from [#inherited-from-135]

`PixiContainer.getChildIndex`

***

### getChildrenByLabel() [#getchildrenbylabel]

\> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-45]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-82]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-100]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-29]

* [Container#getChildByLabel](#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-136]

`PixiContainer.getChildrenByLabel`

***

### getFastGlobalBounds() [#getfastglobalbounds]

\> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-46]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-2]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-83]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-137]

`PixiContainer.getFastGlobalBounds`

***

### getGlobalAlpha() [#getglobalalpha]

\> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-47]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-84]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-101]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-138]

`PixiContainer.getGlobalAlpha`

***

### getGlobalPosition() [#getglobalposition]

\> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-48]

##### point? [#point]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-85]

`Point`

The updated point

#### Example [#example-102]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-30]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-139]

`PixiContainer.getGlobalPosition`

***

### getGlobalTint() [#getglobaltint]

\> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-49]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-86]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-103]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-140]

`PixiContainer.getGlobalTint`

***

### getGlobalTransform() [#getglobaltransform]

\> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-50]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-87]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-141]

`PixiContainer.getGlobalTransform`

***

### getLocalBounds() [#getlocalbounds]

\> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-88]

`Bounds`

The bounding area

#### Example [#example-105]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-31]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-142]

`PixiContainer.getLocalBounds`

***

### getSize() [#getsize]

\> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a \[Size]Size object.

This is faster than get the width and height separately.

#### Parameters [#parameters-51]

##### out? [#out-1]

`Size`

Optional object to store the size in.

#### Returns [#returns-89]

`Size`

The size of the container.

#### Example [#example-106]

```ts
// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);
```

#### Inherited from [#inherited-from-143]

`PixiContainer.getSize`

***

### importChildren() [#importchildren]

\> `protected` **importChildren**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/Container.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L83)

#### Parameters [#parameters-52]

##### value [#value-24]

`Memory`

#### Returns [#returns-90]

`Promise`\<`void`>

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-53]

##### event [#event-2]

keyof AnyEvent | keyof ContainerEvents\<C>

#### Returns [#returns-91]

`number`

#### Inherited from [#inherited-from-144]

`PixiContainer.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-7]

##### T [#t-2]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-54]

##### event [#event-3]

`T`

#### Returns [#returns-92]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-145]

`PixiContainer.listeners`

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-8]

##### T [#t-3]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-55]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-93]

`this`

#### Inherited from [#inherited-from-146]

`PixiContainer.off`

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Container.ts:94](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L94)

Add a listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<C>

#### Parameters [#parameters-56]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-94]

`this`

#### Implementation of [#implementation-of-12]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`on`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#on)

#### Overrides [#overrides-5]

`PixiContainer.on`

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-10]

##### T [#t-5]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-57]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-95]

`this`

#### Inherited from [#inherited-from-147]

`PixiContainer.once`

***

### reloadAnchor() [#reloadanchor]

\> `protected` **reloadAnchor**(): `void`

Defined in: [src/canvas/components/Container.ts:132](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L132)

#### Returns [#returns-96]

`void`

***

### reloadPosition() [#reloadposition]

\> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Container.ts:286](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L286)

#### Returns [#returns-97]

`void`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-58]

##### event? [#event-7]

keyof AnyEvent | keyof ContainerEvents\<C>

#### Returns [#returns-98]

`this`

#### Inherited from [#inherited-from-148]

`PixiContainer.removeAllListeners`

***

### removeChild() [#removechild]

\> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-11]

##### U [#u-3]

`U` *extends* `C`\[]

#### Parameters [#parameters-59]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-99]

`U`\[`0`]

The first child that was removed

#### Example [#example-107]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-32]

* [Container#addChild](#addchild) For adding children
* [Container#removeChildren](#removechildren) For removing multiple children

#### Inherited from [#inherited-from-149]

`PixiContainer.removeChild`

***

### removeChildAt() [#removechildat]

\> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-12]

##### U [#u-4]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-60]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-100]

`U`

The child that was removed

#### Example [#example-108]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-33]

* [Container#removeChild](#removechild) For removing specific children
* [Container#removeChildren](#removechildren) For removing multiple children

#### Inherited from [#inherited-from-150]

`PixiContainer.removeChildAt`

***

### removeChildren() [#removechildren]

\> **removeChildren**(`beginIndex?`, `endIndex?`): `C`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-61]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-101]

`C`\[]

List of removed children

#### Example [#example-109]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-34]

* [Container#addChild](#addchild) For adding children
* [Container#removeChild](#removechild) For removing specific children

#### Inherited from [#inherited-from-151]

`PixiContainer.removeChildren`

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

\> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-13]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-62]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-102]

`void`

##### Inherited from [#inherited-from-152]

`PixiContainer.removeEventListener`

#### Call Signature [#call-signature-3]

\> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-63]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-103]

`void`

##### Inherited from [#inherited-from-153]

`PixiContainer.removeEventListener`

***

### removeFromParent() [#removefromparent]

\> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-104]

`void`

#### Example [#example-110]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-35]

* [Container#addChild](#addchild) For adding to a new parent
* [Container#removeChild](#removechild) For parent removing children

#### Inherited from [#inherited-from-154]

`PixiContainer.removeFromParent`

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-14]

##### T [#t-6]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<C>

#### Parameters [#parameters-64]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-105]

`this`

#### Inherited from [#inherited-from-155]

`PixiContainer.removeListener`

***

### reparentChild() [#reparentchild]

\> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-5]

`U` *extends* `C`\[]

#### Parameters [#parameters-65]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-106]

`U`\[`0`]

The first child that was reparented

#### Example [#example-111]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-36]

* [Container#reparentChildAt](#reparentchildat) For index-specific reparenting
* [Container#addChild](#addchild) For simple parenting

#### Inherited from [#inherited-from-156]

`PixiContainer.reparentChild`

***

### reparentChildAt() [#reparentchildat]

\> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-16]

##### U [#u-6]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-66]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-107]

`U`

The reparented child

#### Example [#example-112]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-37]

* [Container#reparentChild](#reparentchild) For appending reparented children
* [Container#addChildAt](#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-157]

`PixiContainer.reparentChildAt`

***

### replaceChild() [#replacechild]

\> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-17]

##### U [#u-7]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

##### T [#t-7]

`T` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-67]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-108]

`void`

#### Inherited from [#inherited-from-158]

`PixiContainer.replaceChild`

***

### setChildIndex() [#setchildindex]

\> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-68]

##### child [#child-4]

`C`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-109]

`void`

#### Example [#example-113]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-38]

* [Container#getChildIndex](#getchildindex) For getting current index
* [Container#swapChildren](#swapchildren) For swapping positions

#### Inherited from [#inherited-from-159]

`PixiContainer.setChildIndex`

***

### setFromMatrix() [#setfrommatrix]

\> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-69]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-110]

`void`

#### Example [#example-114]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-39]

* [Container#updateTransform](#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-160]

`PixiContainer.setFromMatrix`

***

### setMask() [#setmask]

\> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-70]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-111]

`void`

#### Example [#example-115]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-40]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-161]

`PixiContainer.setMask`

***

### setMemory() [#setmemory]

\> **setMemory**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/Container.ts:77](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L77)

This method set the memory of the canvas element.

#### Parameters [#parameters-71]

##### value [#value-25]

`Memory`

#### Returns [#returns-112]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Implementation of [#implementation-of-13]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory)

***

### setSize() [#setsize]

\> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height.
This is more efficient than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-72]

##### value [#value-26]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a \[Size]Size object.

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided.

#### Returns [#returns-113]

`void`

#### Example [#example-116]

```ts
// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100
```

#### Inherited from [#inherited-from-162]

`PixiContainer.setSize`

***

### swapChildren() [#swapchildren]

\> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-18]

##### U [#u-8]

`U` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

#### Parameters [#parameters-73]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-114]

`void`

#### Example [#example-117]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-41]

* [Container#setChildIndex](#setchildindex) For direct index placement
* [Container#getChildIndex](#getchildindex) For getting current positions

#### Inherited from [#inherited-from-163]

`PixiContainer.swapChildren`

***

### toGlobal() [#toglobal]

\> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-19]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-74]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-1]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-115]

`P`

The global position

#### Example [#example-118]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-42]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-164]

`PixiContainer.toGlobal`

***

### toLocal() [#tolocal]

\> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-20]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-75]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-2]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-116]

`P`

A point object representing the position in local space

#### Example [#example-119]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-43]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-165]

`PixiContainer.toLocal`

***

### updateLocalTransform() [#updatelocaltransform]

\> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-117]

`void`

#### Inherited from [#inherited-from-166]

`PixiContainer.updateLocalTransform`

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-76]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-118]

`this`

This container, for chaining

#### Example [#example-120]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-44]

* [Container#setFromMatrix](#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-167]

`PixiContainer.updateTransform`

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-77]

##### source [#source]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-119]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-168]

`PixiContainer.mixin`


# Class: GameUnifier (/jsdoc/pixi-vn/index/classes/GameUnifier)



Defined in: [src/core/GameUnifier.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L14)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new GameUnifier**(): `GameUnifier`

#### Returns [#returns]

`GameUnifier`

## Properties [#properties]

### onEnd? [#onend]

\> `static` `optional` &#x2A;*onEnd?**: [`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)

Defined in: [src/core/GameUnifier.ts:485](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L485)

***

### runningStepsCount [#runningstepscount]

\> `static` **runningStepsCount**: `number` = `0`

Defined in: [src/core/GameUnifier.ts:471](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L471)

Count of currently executing steps.
If a step triggers a narration.continue(), this number is greater than 1.

## Accessors [#accessors]

### addHistoryItem [#addhistoryitem]

#### Get Signature [#get-signature]

\> **get** `static` **addHistoryItem**(): (`historyInfo?`, `opstions?`) => `void`

Defined in: [src/core/GameUnifier.ts:464](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L464)

Add a history step to the history.

##### Returns [#returns-1]

(`historyInfo?`, `opstions?`) => `void`

***

### animate [#animate]

#### Get Signature [#get-signature-1]

\> **get** `static` **animate**(): \<`T`>(`components`, `keyframes`, `options?`, `priority?`) => `string` | `undefined`

Defined in: [src/core/GameUnifier.ts:534](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L534)

This function is called to animate a component.

##### Default [#default]

```ts
UPDATE_PRIORITY.NORMAL
```

##### Returns [#returns-2]

The id of tickers.

\<`T`>(`components`, `keyframes`, `options?`, `priority?`) => `string` | `undefined`

***

### backRequestsCount [#backrequestscount]

#### Get Signature [#get-signature-2]

\> **get** `static` **backRequestsCount**(): `number`

Defined in: [src/core/GameUnifier.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L317)

This function is called to get the number of pending back requests.
Returns the negation of navigationRequestsCount:

* Positive value (absolute value of navigationRequestsCount) when navigationRequestsCount is negative (back requests pending)
* Negative value when navigationRequestsCount is positive (continue requests pending)
* Zero when navigationRequestsCount is zero (no requests pending)
  If it is > 0, after the stepsRunning is 0, the previous step will be executed.

##### Returns [#returns-3]

`number`

***

### continueRequestsCount [#continuerequestscount]

#### Get Signature [#get-signature-3]

\> **get** `static` **continueRequestsCount**(): `number`

Defined in: [src/core/GameUnifier.ts:296](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L296)

This function is called to get the number of pending continue requests.
Returns a positive count of pending continue requests when navigationRequestsCount is positive.
If it is > 0, after the stepsRunning is 0, the next step will be executed.

##### Returns [#returns-4]

`number`

***

### currentGameStepState [#currentgamestepstate]

#### Get Signature [#get-signature-4]

\> **get** `static` **currentGameStepState**(): `GameStepState`

Defined in: [src/core/GameUnifier.ts:215](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L215)

Returns the current state of the game step.

##### Throws [#throws]

when `Game.init()` has not been called yet.

##### Returns [#returns-5]

`GameStepState`

***

### getCharacter [#getcharacter]

#### Get Signature [#get-signature-5]

\> **get** `static` **getCharacter**(): (`id`) => `CharacterInterface` | `undefined`

Defined in: [src/core/GameUnifier.ts:481](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L481)

This function returns the character by its id.

##### Returns [#returns-6]

The character or undefined if it does not exist.

(`id`) => `CharacterInterface` | `undefined`

***

### getFlag [#getflag]

#### Get Signature [#get-signature-6]

\> **get** `static` **getFlag**(): (`name`) => `boolean`

Defined in: [src/core/GameUnifier.ts:417](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L417)

This function returns the value of a flag.

##### Returns [#returns-7]

(`name`) => `boolean`

***

### getVariable [#getvariable]

#### Get Signature [#get-signature-7]

\> **get** `static` **getVariable**(): \<`T`>(`prefix`, `key`) => `T` | `undefined`

Defined in: [src/core/GameUnifier.ts:373](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L373)

This function returns the value of a variable.

##### Returns [#returns-8]

The value of the variable.

\<`T`>(`prefix`, `key`) => `T` | `undefined`

***

### navigate [#navigate]

#### Get Signature [#get-signature-8]

\> **get** `static` **navigate**(): (`path`) => `void` | `Promise`\<`void`>

Defined in: [src/core/GameUnifier.ts:170](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L170)

The navigate function.

##### Returns [#returns-9]

(`path`) => `void` | `Promise`\<`void`>

#### Set Signature [#set-signature]

\> **set** `static` **navigate**(`value`): `void`

Defined in: [src/core/GameUnifier.ts:173](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L173)

##### Parameters [#parameters]

###### value [#value]

(`path`) => `void` | `Promise`\<`void`>

##### Returns [#returns-10]

`void`

***

### onLabelClosing [#onlabelclosing]

#### Get Signature [#get-signature-9]

\> **get** `static` **onLabelClosing**(): (`openedLabelsNumber`) => `void`

Defined in: [src/core/GameUnifier.ts:441](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L441)

This function is called after the narration.continue() method is executed
It can be used to clear old temporary variables.

##### Returns [#returns-11]

(`openedLabelsNumber`) => `void`

***

### onPreContinue [#onprecontinue]

#### Get Signature [#get-signature-10]

\> **get** `static` **onPreContinue**(): () => `Promise`\<`void`>

Defined in: [src/core/GameUnifier.ts:277](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L277)

This function is called immediately before a narration "continue" operation.

##### Returns [#returns-12]

() => `Promise`\<`void`>

***

### openedLabels [#openedlabels]

#### Get Signature [#get-signature-11]

\> **get** `static` **openedLabels**(): `number`

Defined in: [src/core/GameUnifier.ts:247](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L247)

Returns the number of opened labels.

##### Throws [#throws-1]

when `Game.init()` has not been called yet.

##### Returns [#returns-13]

`number`

***

### removeVariable [#removevariable]

#### Get Signature [#get-signature-12]

\> **get** `static` **removeVariable**(): (`prefix`, `key`) => `void`

Defined in: [src/core/GameUnifier.ts:403](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L403)

This function removes a variable.

##### Returns [#returns-14]

(`prefix`, `key`) => `void`

***

### restoreGameStepState [#restoregamestepstate]

#### Get Signature [#get-signature-13]

\> **get** `static` **restoreGameStepState**(): (`state`, `navigate`) => `Promise`\<`void`>

Defined in: [src/core/GameUnifier.ts:233](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L233)

Restores the game step state.

##### Returns [#returns-15]

(`state`, `navigate`) => `Promise`\<`void`>

***

### setFlag [#setflag]

#### Get Signature [#get-signature-14]

\> **get** `static` **setFlag**(): (`name`, `value`) => `void`

Defined in: [src/core/GameUnifier.ts:432](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L432)

This function sets the value of a flag.

##### Returns [#returns-16]

(`name`, `value`) => `void`

***

### setVariable [#setvariable]

#### Get Signature [#get-signature-15]

\> **get** `static` **setVariable**(): (`prefix`, `key`, `value`) => `void`

Defined in: [src/core/GameUnifier.ts:389](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L389)

This function sets the value of a variable.

##### Returns [#returns-17]

(`prefix`, `key`, `value`) => `void`

***

### stepCounter [#stepcounter]

#### Get Signature [#get-signature-16]

\> **get** `static` **stepCounter**(): `number`

Defined in: [src/core/GameUnifier.ts:194](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L194)

Returns the current step counter. This counter corresponds to the total number of steps that have been executed so far.

##### Throws [#throws-2]

when `Game.init()` has not been called yet.

##### Returns [#returns-18]

`number`

#### Set Signature [#set-signature-1]

\> **set** `static` **stepCounter**(`value`): `void`

Defined in: [src/core/GameUnifier.ts:201](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L201)

Returns the current state of the game step.

##### Throws [#throws-3]

when `Game.init()` has not been called yet.

##### Parameters [#parameters-1]

###### value [#value-1]

`number`

##### Returns [#returns-19]

`void`

## Methods [#methods]

### addOnError() [#addonerror]

\> `static` **addOnError**(`handler`): () => `void`

Defined in: [src/core/GameUnifier.ts:491](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L491)

#### Parameters [#parameters-2]

##### handler [#handler]

[`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)

#### Returns [#returns-20]

() => `void`

***

### addOnPreContinue() [#addonprecontinue]

\> `static` **addOnPreContinue**(`handler`): `void`

Defined in: [src/core/GameUnifier.ts:256](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L256)

Register a handler to run immediately before a narration "continue" operation.
Handlers are executed in registration order and may be async. Use
`{@link addOnPreContinue}` / `{@link removeOnPreContinue}` to manage them programmatically.

#### Parameters [#parameters-3]

##### handler [#handler-1]

() => `void` | `Promise`\<`void`>

#### Returns [#returns-21]

`void`

***

### clearOnErrorHandlers() [#clearonerrorhandlers]

\> `static` **clearOnErrorHandlers**(): `void`

Defined in: [src/core/GameUnifier.ts:500](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L500)

#### Returns [#returns-22]

`void`

***

### clearOnPreContinueHandlers() [#clearonprecontinuehandlers]

\> `static` **clearOnPreContinueHandlers**(): `void`

Defined in: [src/core/GameUnifier.ts:264](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L264)

#### Returns [#returns-23]

`void`

***

### increaseBackRequest() [#increasebackrequest]

\> `static` **increaseBackRequest**(`amount?`): `void`

Defined in: [src/core/GameUnifier.ts:327](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L327)

This function is called to increase the number of pending back requests.
Note: While the decrement operation itself is atomic, the overall navigation
processing uses a lock in processNavigationRequests to ensure atomicity of
read-modify-write operations across async boundaries.

#### Parameters [#parameters-4]

##### amount? [#amount]

`number` = `1`

The number of steps to increase. Default is 1.

#### Returns [#returns-24]

`void`

***

### increaseContinueRequest() [#increasecontinuerequest]

\> `static` **increaseContinueRequest**(`amount?`): `void`

Defined in: [src/core/GameUnifier.ts:306](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L306)

This function is called to increase the number of pending continue requests.
Note: While the increment operation itself is atomic, the overall navigation
processing uses a lock in processNavigationRequests to ensure atomicity of
read-modify-write operations across async boundaries.

#### Parameters [#parameters-5]

##### amount? [#amount-1]

`number` = `1`

The number of steps to increase. Default is 1.

#### Returns [#returns-25]

`void`

***

### init() [#init]

\> `static` **init**(`options`): `void`

Defined in: [src/core/GameUnifier.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L15)

#### Parameters [#parameters-6]

##### options [#options]

###### animate [#animate-1]

\<`T`>(`components`, `keyframes`, `options?`, `priority?`) => `string` | `undefined`

This function is called to animate a component.

**Default**

```ts
UPDATE_PRIORITY.NORMAL
```

###### getCharacter [#getcharacter-1]

(`id`) => `CharacterInterface` | `undefined`

This function returns the character by its id.

###### getCurrentGameStepState [#getcurrentgamestepstate]

() => `GameStepState`

This function returns the current state of the game step.

If your game engine does not have a history of steps, you can return an empty object.

###### getFlag [#getflag-1]

(`name`) => `boolean`

This function returns the value of a flag.

###### getOpenedLabels [#getopenedlabels]

() => `number`

This function returns the number of opened labels.

If your game engine does not have a narration system, you can return 0.

###### getStepCounter [#getstepcounter]

() => `number`

This function returns the current step counter. This counter corresponds to the total number of steps that have been executed so far.

If your game engine does not have a history of steps, you can return 0.

###### getVariable [#getvariable-1]

\<`T`>(`prefix`, `key`) => `T` | `undefined`

This function returns the value of a variable.

###### navigate? [#navigate-1]

(`path`) => `void` | `Promise`\<`void`>

The navigate function.

###### onLabelClosing? [#onlabelclosing-1]

(`openedLabelsNumber`) => `void`

This function is called after the narration.continue() method is executed.

It can be used to clear old temporary variables.

###### processNavigationRequests [#processnavigationrequests]

(`navigationRequestsCount`, `props`) => `object`

This function is called to process the pending navigation requests (continue/back).

###### removeVariable [#removevariable-1]

(`prefix`, `key`) => `void`

This function removes a variable.

###### restoreGameStepState [#restoregamestepstate-1]

(`state`, `navigate`) => `Promise`\<`void`>

This function restores the game step state.

If your game engine does not have a history of steps, you can return a resolved promise.

###### setFlag [#setflag-1]

(`name`, `value`) => `void`

This function sets the value of a flag.

###### setStepCounter [#setstepcounter]

(`value`) => `void`

This function sets the current step counter.

If your game engine does not have a history of steps, you can not set the step counter.

###### setVariable [#setvariable-1]

(`prefix`, `key`, `value`) => `void`

This function sets the value of a variable.

###### addHistoryItem [#addhistoryitem-1]

#### Returns [#returns-26]

`void`

***

### processNavigationRequests() [#processnavigationrequests-1]

\> `static` **processNavigationRequests**(`props`): `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/core/GameUnifier.ts:347](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L347)

This function processes the pending navigation requests (continue/back).

#### Parameters [#parameters-7]

##### props [#props]

`any`

#### Returns [#returns-27]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

#### Throws [#throws-4]

when `Game.init()` has not been called yet.

***

### removeOnError() [#removeonerror]

\> `static` **removeOnError**(`handler`): `void`

Defined in: [src/core/GameUnifier.ts:496](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L496)

#### Parameters [#parameters-8]

##### handler [#handler-2]

[`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)

#### Returns [#returns-28]

`void`

***

### removeOnPreContinue() [#removeonprecontinue]

\> `static` **removeOnPreContinue**(`handler`): `void`

Defined in: [src/core/GameUnifier.ts:259](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L259)

#### Parameters [#parameters-9]

##### handler [#handler-3]

() => `void` | `Promise`\<`void`>

#### Returns [#returns-29]

`void`

***

### runOnError() [#runonerror]

\> `static` **runOnError**(`error`, `props`): `Promise`\<`void`>

Defined in: [src/core/GameUnifier.ts:504](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/GameUnifier.ts#L504)

#### Parameters [#parameters-10]

##### error [#error]

`unknown`

##### props [#props-1]

`any`

#### Returns [#returns-30]

`Promise`\<`void`>


# Class: HistoryManagerStatic (/jsdoc/pixi-vn/index/classes/HistoryManagerStatic)



Defined in: [src/history/HistoryManagerStatic.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L7)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new HistoryManagerStatic**(): `HistoryManagerStatic`

#### Returns [#returns]

`HistoryManagerStatic`

## Properties [#properties]

### \_diffHistory [#_diffhistory]

\> `static&#x60; **\_diffHistory**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, `Difference`\[]>

Defined in: [src/history/HistoryManagerStatic.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L8)

***

### \_narrationHistory [#_narrationhistory]

\> `static&#x60; **\_narrationHistory**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)>

Defined in: [src/history/HistoryManagerStatic.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L12)

***

### \_originalStepData [#_originalstepdata]

\> `static&#x60; **\_originalStepData**: `GameStepState` | `undefined` = `undefined`

Defined in: [src/history/HistoryManagerStatic.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L14)

***

### \_stepsInfoHistory [#_stepsinfohistory]

\> `static&#x60; **\_stepsInfoHistory**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, `Omit`\<[`HistoryStep`](/jsdoc/pixi-vn/index/interfaces/HistoryStep), `"diff"`>>

Defined in: [src/history/HistoryManagerStatic.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L11)

***

### stepLimitSaved [#steplimitsaved]

\> `static` **stepLimitSaved**: `number` = `20`

Defined in: [src/history/HistoryManagerStatic.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L13)

## Accessors [#accessors]

### originalStepData [#originalstepdata]

#### Get Signature [#get-signature]

\> **get** `static` **originalStepData**(): `GameStepState`

Defined in: [src/history/HistoryManagerStatic.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L15)

##### Returns [#returns-1]

`GameStepState`

#### Set Signature [#set-signature]

\> **set** `static` **originalStepData**(`value`): `void`

Defined in: [src/history/HistoryManagerStatic.ts:41](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/HistoryManagerStatic.ts#L41)

##### Parameters [#parameters]

###### value [#value]

`GameStepState`

##### Returns [#returns-2]

`void`


# Class: ImageContainer (/jsdoc/pixi-vn/index/classes/ImageContainer)



Defined in: [src/canvas/components/ImageContainer.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L28)

This class is a extension of the [Container](/jsdoc/pixi-vn/index/classes/Container), it has the same properties and methods,
but this container is composed only of [ImageSprite](/jsdoc/pixi-vn/index/classes/ImageSprite) and introduces the [load](#load) functionality

## Example [#example]

```ts
 const liamBodyImageUrl = 'https://example.com/assets/liam/body.png';
 const liamHeadImageUrl = 'https://example.com/assets/liam/head.png';
 const container = new ImageContainer(undefined, [liamBodyImageUrl, liamHeadImageUrl]);
 await container.load()
 canvas.add(container);
```

## Extends [#extends]

* [`Container`](/jsdoc/pixi-vn/index/classes/Container)\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite), [`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new ImageContainer**(`options?`, `textureAliases?`): `ImageContainer`

Defined in: [src/canvas/components/ImageContainer.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L33)

#### Parameters [#parameters]

##### options? [#options]

[`ImageContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>>

The options for the component.

##### textureAliases? [#texturealiases]

`string`\[]

An array of image URLs or paths. If you have initialized the "asset matrix", you can use the alias of the texture.

#### Returns [#returns]

`ImageContainer`

#### Overrides [#overrides]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`constructor`](/jsdoc/pixi-vn/index/classes/Container#constructor)

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`__devtoolIgnore`](/jsdoc/pixi-vn/index/classes/Container#__devtoolignore)

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`__devtoolIgnoreChildren`](/jsdoc/pixi-vn/index/classes/Container#__devtoolignorechildren)

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`__devtoolLocked`](/jsdoc/pixi-vn/index/classes/Container#__devtoollocked)

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-3]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_cx`](/jsdoc/pixi-vn/index/classes/Container#_cx)

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-4]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_cy`](/jsdoc/pixi-vn/index/classes/Container#_cy)

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-5]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_pivot`](/jsdoc/pixi-vn/index/classes/Container#_pivot)

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-6]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_position`](/jsdoc/pixi-vn/index/classes/Container#_position)

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-7]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_scale`](/jsdoc/pixi-vn/index/classes/Container#_scale)

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-8]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_skew`](/jsdoc/pixi-vn/index/classes/Container#_skew)

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-9]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_sx`](/jsdoc/pixi-vn/index/classes/Container#_sx)

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-10]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_sy`](/jsdoc/pixi-vn/index/classes/Container#_sy)

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-11]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_zIndex`](/jsdoc/pixi-vn/index/classes/Container#_zindex)

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-12]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessible`](/jsdoc/pixi-vn/index/classes/Container#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-13]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessibleChildren`](/jsdoc/pixi-vn/index/classes/Container#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-14]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessibleHint`](/jsdoc/pixi-vn/index/classes/Container#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-15]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/classes/Container#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-16]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessibleText`](/jsdoc/pixi-vn/index/classes/Container#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-17]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessibleTitle`](/jsdoc/pixi-vn/index/classes/Container#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-18]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`accessibleType`](/jsdoc/pixi-vn/index/classes/Container#accessibletype)

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:10

**`Internal`**

#### Inherited from [#inherited-from-19]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`allowChildren`](/jsdoc/pixi-vn/index/classes/Container#allowchildren)

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-20]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`boundsArea`](/jsdoc/pixi-vn/index/classes/Container#boundsarea)

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-21]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cacheAsBitmap`](/jsdoc/pixi-vn/index/classes/Container#cacheasbitmap)

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-22]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cacheAsTexture`](/jsdoc/pixi-vn/index/classes/Container#cacheastexture)

***

### children [#children]

\> `readonly` **children**: [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-23]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`children`](/jsdoc/pixi-vn/index/classes/Container#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-24]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cullable`](/jsdoc/pixi-vn/index/classes/Container#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-25]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cullableChildren`](/jsdoc/pixi-vn/index/classes/Container#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-26]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cullArea`](/jsdoc/pixi-vn/index/classes/Container#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-27]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`cursor`](/jsdoc/pixi-vn/index/classes/Container#cursor)

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-28]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`depthOfChildModified`](/jsdoc/pixi-vn/index/classes/Container#depthofchildmodified)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-29]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`destroyed`](/jsdoc/pixi-vn/index/classes/Container#destroyed)

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-30]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`effects`](/jsdoc/pixi-vn/index/classes/Container#effects)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-31]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`eventMode`](/jsdoc/pixi-vn/index/classes/Container#eventmode)

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-32]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`filterArea`](/jsdoc/pixi-vn/index/classes/Container#filterarea)

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-33]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`globalDisplayStatus`](/jsdoc/pixi-vn/index/classes/Container#globaldisplaystatus)

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-34]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`groupAlpha`](/jsdoc/pixi-vn/index/classes/Container#groupalpha)

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-35]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`groupBlendMode`](/jsdoc/pixi-vn/index/classes/Container#groupblendmode)

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-36]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`groupColor`](/jsdoc/pixi-vn/index/classes/Container#groupcolor)

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-37]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`groupColorAlpha`](/jsdoc/pixi-vn/index/classes/Container#groupcoloralpha)

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-38]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`groupTransform`](/jsdoc/pixi-vn/index/classes/Container#grouptransform)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-39]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`hitArea`](/jsdoc/pixi-vn/index/classes/Container#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-40]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`interactive`](/jsdoc/pixi-vn/index/classes/Container#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-41]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/Container#interactivechildren)

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-42]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`isCachedAsTexture`](/jsdoc/pixi-vn/index/classes/Container#iscachedastexture)

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-43]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`isInteractive`](/jsdoc/pixi-vn/index/classes/Container#isinteractive)

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-45]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`layerParentId`](/jsdoc/pixi-vn/index/classes/Container#layerparentid)

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-46]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`localAlpha`](/jsdoc/pixi-vn/index/classes/Container#localalpha)

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-47]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`localBlendMode`](/jsdoc/pixi-vn/index/classes/Container#localblendmode)

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-48]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`localColor`](/jsdoc/pixi-vn/index/classes/Container#localcolor)

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-49]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`localDisplayStatus`](/jsdoc/pixi-vn/index/classes/Container#localdisplaystatus)

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-50]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`localTransform`](/jsdoc/pixi-vn/index/classes/Container#localtransform)

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-51]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`mask`](/jsdoc/pixi-vn/index/classes/Container#mask)

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`name`](/jsdoc/pixi-vn/index/classes/Container#name)

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onclick`](/jsdoc/pixi-vn/index/classes/Container#onclick)

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Container.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L93)

ListenerExtension

#### Inherited from [#inherited-from-54]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onEventsHandlers`](/jsdoc/pixi-vn/index/classes/Container#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-55]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/Container#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-56]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/Container#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-57]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/Container#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmousedown`](/jsdoc/pixi-vn/index/classes/Container#onmousedown)

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/Container#onmouseenter)

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/Container#onmouseleave)

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmousemove`](/jsdoc/pixi-vn/index/classes/Container#onmousemove)

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseout`](/jsdoc/pixi-vn/index/classes/Container#onmouseout)

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseover`](/jsdoc/pixi-vn/index/classes/Container#onmouseover)

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseup`](/jsdoc/pixi-vn/index/classes/Container#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/Container#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-66]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/Container#onpointercancel)

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-67]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/Container#onpointerdown)

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-68]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/Container#onpointerenter)

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-69]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/Container#onpointerleave)

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-70]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointermove`](/jsdoc/pixi-vn/index/classes/Container#onpointermove)

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-71]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerout`](/jsdoc/pixi-vn/index/classes/Container#onpointerout)

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-72]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerover`](/jsdoc/pixi-vn/index/classes/Container#onpointerover)

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-73]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointertap`](/jsdoc/pixi-vn/index/classes/Container#onpointertap)

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-74]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerup`](/jsdoc/pixi-vn/index/classes/Container#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-75]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/Container#onpointerupoutside)

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-77]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onrightclick`](/jsdoc/pixi-vn/index/classes/Container#onrightclick)

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-78]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onrightdown`](/jsdoc/pixi-vn/index/classes/Container#onrightdown)

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-79]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onrightup`](/jsdoc/pixi-vn/index/classes/Container#onrightup)

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-80]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/Container#onrightupoutside)

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-81]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontap`](/jsdoc/pixi-vn/index/classes/Container#ontap)

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-82]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/Container#ontouchcancel)

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-83]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontouchend`](/jsdoc/pixi-vn/index/classes/Container#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-84]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/Container#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-85]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/Container#ontouchmove)

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-57]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-86]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/Container#ontouchstart)

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-87]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`onwheel`](/jsdoc/pixi-vn/index/classes/Container#onwheel)

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-88]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`parent`](/jsdoc/pixi-vn/index/classes/Container#parent)

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-89]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`parentRenderLayer`](/jsdoc/pixi-vn/index/classes/Container#parentrenderlayer)

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_IMAGE_CONTAINER_ID`

Defined in: [src/canvas/components/ImageContainer.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L69)

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

#### Overrides [#overrides-1]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`pixivnId`](/jsdoc/pixi-vn/index/classes/Container#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-90]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`relativeGroupTransform`](/jsdoc/pixi-vn/index/classes/Container#relativegrouptransform)

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:800

**`Internal`**

#### Inherited from [#inherited-from-91]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`renderPipeId`](/jsdoc/pixi-vn/index/classes/Container#renderpipeid)

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-92]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-93]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`sortChildren`](/jsdoc/pixi-vn/index/classes/Container#sortchildren)

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-94]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-95]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`tabIndex`](/jsdoc/pixi-vn/index/classes/Container#tabindex)

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-96]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`uid`](/jsdoc/pixi-vn/index/classes/Container#uid)

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-97]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`updateCacheTexture`](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture)

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-98]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`updateTick`](/jsdoc/pixi-vn/index/classes/Container#updatetick)

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-99]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-100]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`prefixed`](/jsdoc/pixi-vn/index/classes/Container#prefixed)

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Container.ts:160](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L160)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:148](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L148)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-101]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`align`](/jsdoc/pixi-vn/index/classes/Container#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-102]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`alpha`](/jsdoc/pixi-vn/index/classes/Container#alpha)

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `PointData`

Defined in: [src/canvas/components/Container.ts:119](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L119)

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-66]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Returns [#returns-10]

`PointData`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:124](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L124)

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-67]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

#### Example [#example-68]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

#### Inherited from [#inherited-from-103]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`anchor`](/jsdoc/pixi-vn/index/classes/Container#anchor)

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-69]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-104]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`angle`](/jsdoc/pixi-vn/index/classes/Container#angle)

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-70]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-105]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`blendMode`](/jsdoc/pixi-vn/index/classes/Container#blendmode)

***

### filters [#filters]

#### Get Signature [#get-signature-5]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-71]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-16]

Filter For filter base class

##### Returns [#returns-16]

readonly `Filter`\[]

#### Set Signature [#set-signature-5]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-72]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-17]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-5]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-106]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`filters`](/jsdoc/pixi-vn/index/classes/Container#filters)

***

### haveEmptyTexture [#haveemptytexture]

#### Get Signature [#get-signature-6]

\> **get** **haveEmptyTexture**(): `boolean`

Defined in: [src/canvas/components/ImageContainer.ts:109](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L109)

Check if there is a child with the empty texture.

##### Returns [#returns-18]

`boolean`

A boolean that is true if there is a child with the empty texture.

***

### height [#height]

#### Get Signature [#get-signature-7]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-73]

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

##### Returns [#returns-19]

`number`

#### Set Signature [#set-signature-6]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118

##### Parameters [#parameters-8]

###### value [#value-6]

`number`

##### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-107]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`height`](/jsdoc/pixi-vn/index/classes/Container#height)

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-8]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-21]

`boolean`

#### Inherited from [#inherited-from-108]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`isRenderable`](/jsdoc/pixi-vn/index/classes/Container#isrenderable)

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-9]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-22]

`boolean`

#### Set Signature [#set-signature-7]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-7]

`boolean`

##### Returns [#returns-23]

`void`

#### Inherited from [#inherited-from-109]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`isRenderGroup`](/jsdoc/pixi-vn/index/classes/Container#isrendergroup)

***

### loadIsStarted [#loadisstarted]

#### Get Signature [#get-signature-10]

\> **get** **loadIsStarted**(): `boolean`

Defined in: [src/canvas/components/ImageContainer.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L71)

##### Returns [#returns-24]

`boolean`

***

### memory [#memory]

#### Get Signature [#get-signature-11]

\> **get** **memory**(): [`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)

Defined in: [src/canvas/components/ImageContainer.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L56)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-25]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)

#### Overrides [#overrides-2]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`memory`](/jsdoc/pixi-vn/index/classes/Container#memory-1)

***

### origin [#origin]

#### Get Signature [#get-signature-12]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-74]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-26]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-8]

`number` | `PointData`

##### Returns [#returns-27]

`void`

#### Inherited from [#inherited-from-110]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`origin`](/jsdoc/pixi-vn/index/classes/Container#origin)

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-13]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Container.ts:231](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L231)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-28]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-9]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:219](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L219)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-9]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-29]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-111]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`percentagePosition`](/jsdoc/pixi-vn/index/classes/Container#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-14]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Container.ts:245](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L245)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-30]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Container.ts:237](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L237)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-31]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-112]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`percentageX`](/jsdoc/pixi-vn/index/classes/Container#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-15]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Container.ts:256](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L256)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-32]

`number`

#### Set Signature [#set-signature-11]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Container.ts:248](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L248)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-33]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-113]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`percentageY`](/jsdoc/pixi-vn/index/classes/Container#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-16]

\> **get** **pivot**(): `ObservablePoint`

Defined in: [src/canvas/components/Container.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L137)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-75]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-34]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **pivot**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L140)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-76]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-3]

4.0.0

##### Parameters [#parameters-14]

###### value [#value-10]

`ObservablePoint`

##### Returns [#returns-35]

`void`

#### Inherited from [#inherited-from-114]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`pivot`](/jsdoc/pixi-vn/index/classes/Container#pivot)

***

### position [#position]

#### Get Signature [#get-signature-17]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Container.ts:323](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L323)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-77]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Returns [#returns-36]

`ObservablePoint`

#### Set Signature [#set-signature-13]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:326](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L326)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-78]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-5]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-11]

`ObservablePoint`

##### Returns [#returns-37]

`void`

#### Inherited from [#inherited-from-115]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`position`](/jsdoc/pixi-vn/index/classes/Container#position)

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-18]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Container.ts:267](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L267)

##### Returns [#returns-38]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-14]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:277](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L277)

##### Parameters [#parameters-16]

###### value [#value-12]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-39]

`void`

#### Inherited from [#inherited-from-116]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`positionInfo`](/jsdoc/pixi-vn/index/classes/Container#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-19]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Container.ts:259](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L259)

##### Returns [#returns-40]

`"pixel"` | `"percentage"` | `"align"`

#### Inherited from [#inherited-from-117]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`positionType`](/jsdoc/pixi-vn/index/classes/Container#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-20]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-79]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-18]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-41]

`boolean`

#### Set Signature [#set-signature-15]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-13]

`boolean`

##### Returns [#returns-42]

`void`

#### Inherited from [#inherited-from-118]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`renderable`](/jsdoc/pixi-vn/index/classes/Container#renderable)

***

### rotation [#rotation]

#### Get Signature [#get-signature-21]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-80]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-43]

`number`

#### Set Signature [#set-signature-16]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-18]

###### value [#value-14]

`number`

##### Returns [#returns-44]

`void`

#### Inherited from [#inherited-from-119]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`rotation`](/jsdoc/pixi-vn/index/classes/Container#rotation)

***

### scale [#scale]

#### Get Signature [#get-signature-22]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-81]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-6]

4.0.0

##### Returns [#returns-45]

`ObservablePoint`

#### Set Signature [#set-signature-17]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-19]

###### value [#value-15]

`string` | `number` | `PointData`

##### Returns [#returns-46]

`void`

#### Inherited from [#inherited-from-120]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`scale`](/jsdoc/pixi-vn/index/classes/Container#scale)

***

### skew [#skew]

#### Get Signature [#get-signature-23]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-82]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-7]

4.0.0

##### Default [#default-55]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-47]

`ObservablePoint`

#### Set Signature [#set-signature-18]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-20]

###### value [#value-16]

`PointData`

##### Returns [#returns-48]

`void`

#### Inherited from [#inherited-from-121]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`skew`](/jsdoc/pixi-vn/index/classes/Container#skew)

***

### texture [#texture]

#### Get Signature [#get-signature-24]

\> **get** **texture**(): `Texture`\<`TextureSource`\<`any`>>

Defined in: [src/canvas/components/ImageContainer.ts:98](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L98)

The texture of the first child.
If there is no child, it returns a new [Texture](/jsdoc/pixi-vn/index/variables/Texture).

##### Returns [#returns-49]

`Texture`\<`TextureSource`\<`any`>>

***

### tint [#tint]

#### Get Signature [#get-signature-25]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-83]

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

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

##### Default [#default-56]

```ts
0xFFFFFF
```

##### See [#see-19]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-50]

`number`

#### Set Signature [#set-signature-19]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-21]

###### value [#value-17]

`ColorSource`

##### Returns [#returns-51]

`void`

#### Inherited from [#inherited-from-122]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`tint`](/jsdoc/pixi-vn/index/classes/Container#tint)

***

### visible [#visible]

#### Get Signature [#get-signature-26]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-84]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-57]

```ts
true
```

##### See [#see-20]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-52]

`boolean`

#### Set Signature [#set-signature-20]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-22]

###### value [#value-18]

`boolean`

##### Returns [#returns-53]

`void`

#### Inherited from [#inherited-from-123]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`visible`](/jsdoc/pixi-vn/index/classes/Container#visible)

***

### width [#width]

#### Get Signature [#get-signature-27]

\> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set.
\> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-85]

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

##### Returns [#returns-54]

`number`

#### Set Signature [#set-signature-21]

\> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103

##### Parameters [#parameters-23]

###### value [#value-19]

`number`

##### Returns [#returns-55]

`void`

#### Inherited from [#inherited-from-124]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`width`](/jsdoc/pixi-vn/index/classes/Container#width)

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-28]

\> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-86]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-21]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-56]

`Matrix`

#### Inherited from [#inherited-from-125]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`worldTransform`](/jsdoc/pixi-vn/index/classes/Container#worldtransform)

***

### x [#x-2]

#### Get Signature [#get-signature-29]

\> **get** **x**(): `number`

Defined in: [src/canvas/components/Container.ts:331](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L331)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-87]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-57]

`number`

#### Set Signature [#set-signature-22]

\> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:334](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L334)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-88]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-24]

###### value [#value-20]

`number`

##### Returns [#returns-58]

`void`

#### Inherited from [#inherited-from-126]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`x`](/jsdoc/pixi-vn/index/classes/Container#x)

***

### xAlign [#xalign]

#### Get Signature [#get-signature-30]

\> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Container.ts:188](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L188)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-59]

`number`

#### Set Signature [#set-signature-23]

\> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L180)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-25]

###### value [#value-21]

`number`

##### Returns [#returns-60]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-127]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`xAlign`](/jsdoc/pixi-vn/index/classes/Container#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-31]

\> **get** **y**(): `number`

Defined in: [src/canvas/components/Container.ts:339](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L339)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-89]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-61]

`number`

#### Set Signature [#set-signature-24]

\> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:342](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L342)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-90]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-26]

###### value [#value-22]

`number`

##### Returns [#returns-62]

`void`

#### Inherited from [#inherited-from-128]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`y`](/jsdoc/pixi-vn/index/classes/Container#y)

***

### yAlign [#yalign]

#### Get Signature [#get-signature-32]

\> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Container.ts:207](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L207)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-63]

`number`

#### Set Signature [#set-signature-25]

\> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Container.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L199)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-27]

###### value [#value-23]

`number`

##### Returns [#returns-64]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-129]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`yAlign`](/jsdoc/pixi-vn/index/classes/Container#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

\> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-28]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-65]

`void`

#### Inherited from [#inherited-from-130]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`_getGlobalBoundsRecursive`](/jsdoc/pixi-vn/index/classes/Container#_getglobalboundsrecursive)

***

### addChild() [#addchild]

\> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters]

##### U [#u]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

#### Parameters [#parameters-29]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-66]

`U`\[`0`]

The first child that was added

#### Example [#example-91]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-22]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-131]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`addChild`](/jsdoc/pixi-vn/index/classes/Container#addchild)

***

### addChildAt() [#addchildat]

\> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-1]

##### U [#u-1]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-30]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-67]

`U`

The child that was added

#### Example [#example-92]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-23]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-132]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`addChildAt`](/jsdoc/pixi-vn/index/classes/Container#addchildat)

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

\> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-2]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-31]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-68]

`void`

##### Example [#example-93]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-133]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`addEventListener`](/jsdoc/pixi-vn/index/classes/Container#addeventlistener)

#### Call Signature [#call-signature-1]

\> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-32]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-69]

`void`

##### Inherited from [#inherited-from-134]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`addEventListener`](/jsdoc/pixi-vn/index/classes/Container#addeventlistener)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-3]

##### T [#t]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-33]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-70]

`this`

#### Inherited from [#inherited-from-135]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`addListener`](/jsdoc/pixi-vn/index/classes/Container#addlistener)

***

### collectRenderables() [#collectrenderables]

\> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-34]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-71]

`void`

#### Inherited from [#inherited-from-136]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`collectRenderables`](/jsdoc/pixi-vn/index/classes/Container#collectrenderables)

***

### collectRenderablesSimple() [#collectrenderablessimple]

\> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:30

**`Internal`**

Collects renderables using a simple method, suitable for containers marked as simple.
This method iterates over the container's children and adds their renderables to the instruction set.

#### Parameters [#parameters-35]

##### instructionSet [#instructionset-1]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-1]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-72]

`void`

#### Inherited from [#inherited-from-137]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`collectRenderablesSimple`](/jsdoc/pixi-vn/index/classes/Container#collectrenderablessimple)

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

\> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-36]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-73]

`void`

#### Inherited from [#inherited-from-138]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`collectRenderablesWithEffects`](/jsdoc/pixi-vn/index/classes/Container#collectrenderableswitheffects)

***

### destroy() [#destroy]

\> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1343

Removes all internal references and listeners as well as removes children from the display list.
Do not use a Container after calling `destroy`.

#### Parameters [#parameters-37]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-74]

`void`

#### Example [#example-94]

```ts
container.destroy();
container.destroy(true);
container.destroy({ children: true });
container.destroy({ children: true, texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-139]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`destroy`](/jsdoc/pixi-vn/index/classes/Container#destroy)

***

### disableRenderGroup() [#disablerendergroup]

\> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-75]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-140]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`disableRenderGroup`](/jsdoc/pixi-vn/index/classes/Container#disablerendergroup)

***

### dispatchEvent() [#dispatchevent]

\> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-38]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-76]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-95]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-141]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`dispatchEvent`](/jsdoc/pixi-vn/index/classes/Container#dispatchevent)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-1]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-39]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>> & `AnyEvent`>\[`Extract`\<`T`, keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>>]

#### Returns [#returns-77]

`boolean`

#### Inherited from [#inherited-from-142]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`emit`](/jsdoc/pixi-vn/index/classes/Container#emit)

***

### enableRenderGroup() [#enablerendergroup]

\> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-78]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-143]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`enableRenderGroup`](/jsdoc/pixi-vn/index/classes/Container#enablerendergroup)

***

### eventNames() [#eventnames]

\> **eventNames**(): (keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-79]

(keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>)\[]

#### Inherited from [#inherited-from-144]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`eventNames`](/jsdoc/pixi-vn/index/classes/Container#eventnames)

***

### getBounds() [#getbounds]

\> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-40]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-1]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-80]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-96]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-24]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-145]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getBounds`](/jsdoc/pixi-vn/index/classes/Container#getbounds)

***

### getChildAt() [#getchildat]

\> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-5]

##### U [#u-2]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-41]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-81]

`U`

The child at the given index

#### Example [#example-97]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-25]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-146]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getChildAt`](/jsdoc/pixi-vn/index/classes/Container#getchildat)

***

### getChildByLabel() [#getchildbylabel]

\> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-42]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-82]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-98]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-26]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-147]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getChildByLabel`](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel)

***

### ~~getChildByName()~~ [#getchildbyname]

\> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-43]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-83]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-27]

Container#getChildByLabel

#### Inherited from [#inherited-from-148]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getChildByName`](/jsdoc/pixi-vn/index/classes/Container#getchildbyname)

***

### getChildIndex() [#getchildindex]

\> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-44]

##### child [#child-1]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)

The Container instance to identify

#### Returns [#returns-84]

`number`

The index position of the child container

#### Example [#example-99]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-28]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-149]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getChildIndex`](/jsdoc/pixi-vn/index/classes/Container#getchildindex)

***

### getChildrenByLabel() [#getchildrenbylabel]

\> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-45]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-85]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-100]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-29]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-150]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getChildrenByLabel`](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel)

***

### getFastGlobalBounds() [#getfastglobalbounds]

\> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-46]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-2]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-86]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-151]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getFastGlobalBounds`](/jsdoc/pixi-vn/index/classes/Container#getfastglobalbounds)

***

### getGlobalAlpha() [#getglobalalpha]

\> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-47]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-87]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-101]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-152]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getGlobalAlpha`](/jsdoc/pixi-vn/index/classes/Container#getglobalalpha)

***

### getGlobalPosition() [#getglobalposition]

\> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-48]

##### point? [#point]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-88]

`Point`

The updated point

#### Example [#example-102]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-30]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-153]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getGlobalPosition`](/jsdoc/pixi-vn/index/classes/Container#getglobalposition)

***

### getGlobalTint() [#getglobaltint]

\> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-49]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-89]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-103]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-154]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getGlobalTint`](/jsdoc/pixi-vn/index/classes/Container#getglobaltint)

***

### getGlobalTransform() [#getglobaltransform]

\> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-50]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-90]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-155]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getGlobalTransform`](/jsdoc/pixi-vn/index/classes/Container#getglobaltransform)

***

### getLocalBounds() [#getlocalbounds]

\> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-91]

`Bounds`

The bounding area

#### Example [#example-105]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-31]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-156]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getLocalBounds`](/jsdoc/pixi-vn/index/classes/Container#getlocalbounds)

***

### getSize() [#getsize]

\> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a \[Size]Size object.

This is faster than get the width and height separately.

#### Parameters [#parameters-51]

##### out? [#out-1]

`Size`

Optional object to store the size in.

#### Returns [#returns-92]

`Size`

The size of the container.

#### Example [#example-106]

```ts
// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);
```

#### Inherited from [#inherited-from-157]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`getSize`](/jsdoc/pixi-vn/index/classes/Container#getsize)

***

### importChildren() [#importchildren]

\> `protected` **importChildren**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/Container.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L83)

#### Parameters [#parameters-52]

##### value [#value-24]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)

#### Returns [#returns-93]

`Promise`\<`void`>

#### Inherited from [#inherited-from-158]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`importChildren`](/jsdoc/pixi-vn/index/classes/Container#importchildren)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-53]

##### event [#event-2]

keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Returns [#returns-94]

`number`

#### Inherited from [#inherited-from-159]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`listenerCount`](/jsdoc/pixi-vn/index/classes/Container#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-2]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-54]

##### event [#event-3]

`T`

#### Returns [#returns-95]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-160]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`listeners`](/jsdoc/pixi-vn/index/classes/Container#listeners)

***

### load() [#load]

\> **load**(): `Promise`\<`void`>

Defined in: [src/canvas/components/ImageContainer.ts:78](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L78)

Load the children images.

#### Returns [#returns-96]

`Promise`\<`void`>

A promise that resolves when the images are loaded.

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-7]

##### T [#t-3]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-55]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-97]

`this`

#### Inherited from [#inherited-from-161]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`off`](/jsdoc/pixi-vn/index/classes/Container#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Container.ts:94](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L94)

Add a listener for a given event.

#### Type Parameters [#type-parameters-8]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<C>

#### Parameters [#parameters-56]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-98]

`this`

#### Inherited from [#inherited-from-162]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`on`](/jsdoc/pixi-vn/index/classes/Container#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-5]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-57]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-99]

`this`

#### Inherited from [#inherited-from-163]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`once`](/jsdoc/pixi-vn/index/classes/Container#once)

***

### reloadAnchor() [#reloadanchor]

\> `protected` **reloadAnchor**(): `void`

Defined in: [src/canvas/components/Container.ts:132](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L132)

#### Returns [#returns-100]

`void`

#### Inherited from [#inherited-from-164]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`reloadAnchor`](/jsdoc/pixi-vn/index/classes/Container#reloadanchor)

***

### reloadPosition() [#reloadposition]

\> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Container.ts:286](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Container.ts#L286)

#### Returns [#returns-101]

`void`

#### Inherited from [#inherited-from-165]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`reloadPosition`](/jsdoc/pixi-vn/index/classes/Container#reloadposition)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-58]

##### event? [#event-7]

keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Returns [#returns-102]

`this`

#### Inherited from [#inherited-from-166]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeAllListeners`](/jsdoc/pixi-vn/index/classes/Container#removealllisteners)

***

### removeChild() [#removechild]

\> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-10]

##### U [#u-3]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

#### Parameters [#parameters-59]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-103]

`U`\[`0`]

The first child that was removed

#### Example [#example-107]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-32]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-167]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeChild`](/jsdoc/pixi-vn/index/classes/Container#removechild)

***

### removeChildAt() [#removechildat]

\> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-11]

##### U [#u-4]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-60]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-104]

`U`

The child that was removed

#### Example [#example-108]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-33]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-168]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeChildAt`](/jsdoc/pixi-vn/index/classes/Container#removechildat)

***

### removeChildren() [#removechildren]

\> **removeChildren**(`beginIndex?`, `endIndex?`): [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-61]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-105]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

List of removed children

#### Example [#example-109]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-34]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-169]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeChildren`](/jsdoc/pixi-vn/index/classes/Container#removechildren)

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

\> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-12]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-62]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-106]

`void`

##### Inherited from [#inherited-from-170]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/Container#removeeventlistener)

#### Call Signature [#call-signature-3]

\> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-63]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-107]

`void`

##### Inherited from [#inherited-from-171]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/Container#removeeventlistener)

***

### removeFromParent() [#removefromparent]

\> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-108]

`void`

#### Example [#example-110]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-35]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-172]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeFromParent`](/jsdoc/pixi-vn/index/classes/Container#removefromparent)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-13]

##### T [#t-6]

`T` *extends* keyof AnyEvent | keyof ContainerEvents\<ImageSprite\<ImageSpriteMemory>>

#### Parameters [#parameters-64]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-109]

`this`

#### Inherited from [#inherited-from-173]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`removeListener`](/jsdoc/pixi-vn/index/classes/Container#removelistener)

***

### reparentChild() [#reparentchild]

\> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-14]

##### U [#u-5]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

#### Parameters [#parameters-65]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-110]

`U`\[`0`]

The first child that was reparented

#### Example [#example-111]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-36]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-174]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`reparentChild`](/jsdoc/pixi-vn/index/classes/Container#reparentchild)

***

### reparentChildAt() [#reparentchildat]

\> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-6]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-66]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-111]

`U`

The reparented child

#### Example [#example-112]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-37]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-175]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`reparentChildAt`](/jsdoc/pixi-vn/index/classes/Container#reparentchildat)

***

### replaceChild() [#replacechild]

\> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-16]

##### U [#u-7]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

##### T [#t-7]

`T` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-67]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-112]

`void`

#### Inherited from [#inherited-from-176]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`replaceChild`](/jsdoc/pixi-vn/index/classes/Container#replacechild)

***

### setChildIndex() [#setchildindex]

\> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-68]

##### child [#child-4]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-113]

`void`

#### Example [#example-113]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-38]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-177]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`setChildIndex`](/jsdoc/pixi-vn/index/classes/Container#setchildindex)

***

### setFromMatrix() [#setfrommatrix]

\> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-69]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-114]

`void`

#### Example [#example-114]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-39]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-178]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`setFromMatrix`](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix)

***

### setMask() [#setmask]

\> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-70]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-115]

`void`

#### Example [#example-115]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-40]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-179]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`setMask`](/jsdoc/pixi-vn/index/classes/Container#setmask)

***

### setMemory() [#setmemory]

\> **setMemory**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/ImageContainer.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageContainer.ts#L63)

This method set the memory of the canvas element.

#### Parameters [#parameters-71]

##### value [#value-25]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)

#### Returns [#returns-116]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Overrides [#overrides-3]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`setMemory`](/jsdoc/pixi-vn/index/classes/Container#setmemory)

***

### setSize() [#setsize]

\> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height.
This is more efficient than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-72]

##### value [#value-26]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a \[Size]Size object.

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided.

#### Returns [#returns-117]

`void`

#### Example [#example-116]

```ts
// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100
```

#### Inherited from [#inherited-from-180]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`setSize`](/jsdoc/pixi-vn/index/classes/Container#setsize)

***

### swapChildren() [#swapchildren]

\> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-17]

##### U [#u-8]

`U` *extends* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

#### Parameters [#parameters-73]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-118]

`void`

#### Example [#example-117]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-41]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-181]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`swapChildren`](/jsdoc/pixi-vn/index/classes/Container#swapchildren)

***

### toGlobal() [#toglobal]

\> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-18]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-74]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-1]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-119]

`P`

The global position

#### Example [#example-118]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-42]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-182]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`toGlobal`](/jsdoc/pixi-vn/index/classes/Container#toglobal)

***

### toLocal() [#tolocal]

\> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-19]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-75]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-2]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-120]

`P`

A point object representing the position in local space

#### Example [#example-119]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-43]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-183]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`toLocal`](/jsdoc/pixi-vn/index/classes/Container#tolocal)

***

### updateLocalTransform() [#updatelocaltransform]

\> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-121]

`void`

#### Inherited from [#inherited-from-184]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`updateLocalTransform`](/jsdoc/pixi-vn/index/classes/Container#updatelocaltransform)

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-76]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-122]

`this`

This container, for chaining

#### Example [#example-120]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-44]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-185]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`updateTransform`](/jsdoc/pixi-vn/index/classes/Container#updatetransform)

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-77]

##### source [#source]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-123]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-186]

[`Container`](/jsdoc/pixi-vn/index/classes/Container).[`mixin`](/jsdoc/pixi-vn/index/classes/Container#mixin)


# Class: ImageSprite<Memory> (/jsdoc/pixi-vn/index/classes/ImageSprite)



Defined in: [src/canvas/components/ImageSprite.ts:40](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L40)

This class is a extension of the [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) class, it has the same properties and methods,
but it has some features that make texture management easier.
You need to use [load](#load) to show the image in the canvas.
This class is used for functions like [addImage](/jsdoc/pixi-vn/index/functions/addImage) and [showWithDissolve](/jsdoc/pixi-vn/index/functions/showWithDissolve).

## Examples [#examples]

```ts
let alien = new ImageSprite({
    anchor: { x: 0.5, y: 0.5 },
    x: 100,
    y: 100,
}, 'https://pixijs.com/assets/eggHead.png')
await alien.load()
canvas.add("alien", alien)
```

```ts
let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
alien.anchor.set(0.5);
alien.x = 100
alien.y = 100
await alien.load()
```

## Extends [#extends]

* [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite)\<`Memory`>

## Extended by [#extended-by]

* [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite)

## Type Parameters [#type-parameters]

### Memory [#memory]

`Memory` *extends* [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory) = [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new ImageSprite**\<`Memory`>(`options?`, `textureAlias?`): `ImageSprite`\<`Memory`>

Defined in: [src/canvas/components/ImageSprite.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L55)

#### Parameters [#parameters]

##### options? [#options]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions) | `Omit`\<`Texture`\<`TextureSource`\<`any`>>, `"on"`>

The options for the component.

##### textureAlias? [#texturealias]

`string`

The URL or path. If you have initialized the "asset matrix", you can use the alias of the texture.

#### Returns [#returns]

`ImageSprite`\<`Memory`>

#### Overrides [#overrides]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`constructor`](/jsdoc/pixi-vn/index/classes/Sprite#constructor)

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`__devtoolIgnore`](/jsdoc/pixi-vn/index/classes/Sprite#__devtoolignore)

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`__devtoolIgnoreChildren`](/jsdoc/pixi-vn/index/classes/Sprite#__devtoolignorechildren)

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`__devtoolLocked`](/jsdoc/pixi-vn/index/classes/Sprite#__devtoollocked)

***

### \_anchor [#_anchor]

\> `readonly&#x60; **\_anchor**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:155

**`Internal`**

#### Inherited from [#inherited-from-3]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_anchor`](/jsdoc/pixi-vn/index/classes/Sprite#_anchor)

***

### \_bounds [#_bounds]

\> `protected&#x60; **\_bounds**: `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

#### Inherited from [#inherited-from-4]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_bounds`](/jsdoc/pixi-vn/index/classes/Sprite#_bounds)

***

### \_boundsDirty [#_boundsdirty]

\> `protected&#x60; **\_boundsDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

#### Inherited from [#inherited-from-5]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_boundsDirty`](/jsdoc/pixi-vn/index/classes/Sprite#_boundsdirty)

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-6]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_cx`](/jsdoc/pixi-vn/index/classes/Sprite#_cx)

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-7]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_cy`](/jsdoc/pixi-vn/index/classes/Sprite#_cy)

***

### \_gcData? [#_gcdata]

\> `optional&#x60; &#x2A;*\_gcData?**: `GCData`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

**`Internal`**

#### Inherited from [#inherited-from-8]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_gcData`](/jsdoc/pixi-vn/index/classes/Sprite#_gcdata)

***

### \_gcLastUsed [#_gclastused]

\> **\_gcLastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

**`Internal`**

#### Inherited from [#inherited-from-9]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_gcLastUsed`](/jsdoc/pixi-vn/index/classes/Sprite#_gclastused)

***

### \_gpuData [#_gpudata]

\> **\_gpuData**: `Record`\<`number`, `GPU_DATA`>

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

**`Internal`**

#### Inherited from [#inherited-from-10]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_gpuData`](/jsdoc/pixi-vn/index/classes/Sprite#_gpudata)

***

### \_lastUsed [#_lastused]

\> **\_lastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

**`Internal`**

#### Inherited from [#inherited-from-11]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_lastUsed`](/jsdoc/pixi-vn/index/classes/Sprite#_lastused)

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-12]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_pivot`](/jsdoc/pixi-vn/index/classes/Sprite#_pivot)

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-13]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_position`](/jsdoc/pixi-vn/index/classes/Sprite#_position)

***

### \_roundPixels [#_roundpixels]

\> **\_roundPixels**: `0` | `1`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

**`Internal`**

#### Inherited from [#inherited-from-14]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_roundPixels`](/jsdoc/pixi-vn/index/classes/Sprite#_roundpixels)

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-15]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_scale`](/jsdoc/pixi-vn/index/classes/Sprite#_scale)

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-16]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_skew`](/jsdoc/pixi-vn/index/classes/Sprite#_skew)

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-17]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_sx`](/jsdoc/pixi-vn/index/classes/Sprite#_sx)

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-18]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_sy`](/jsdoc/pixi-vn/index/classes/Sprite#_sy)

***

### \_texture [#_texture]

\> **\_texture**: `Texture`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:157

**`Internal`**

#### Inherited from [#inherited-from-19]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_texture`](/jsdoc/pixi-vn/index/classes/Sprite#_texture)

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-20]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_zIndex`](/jsdoc/pixi-vn/index/classes/Sprite#_zindex)

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-21]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessible`](/jsdoc/pixi-vn/index/classes/Sprite#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-22]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessibleChildren`](/jsdoc/pixi-vn/index/classes/Sprite#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-23]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessibleHint`](/jsdoc/pixi-vn/index/classes/Sprite#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-24]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/classes/Sprite#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-25]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessibleText`](/jsdoc/pixi-vn/index/classes/Sprite#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-26]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessibleTitle`](/jsdoc/pixi-vn/index/classes/Sprite#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-27]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`accessibleType`](/jsdoc/pixi-vn/index/classes/Sprite#accessibletype)

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

**`Internal`**

#### Inherited from [#inherited-from-28]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`allowChildren`](/jsdoc/pixi-vn/index/classes/Sprite#allowchildren)

***

### autoGarbageCollect [#autogarbagecollect]

\> **autoGarbageCollect**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-29]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/classes/Sprite#autogarbagecollect)

***

### batched [#batched]

\> **batched**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:153

**`Internal`**

#### Inherited from [#inherited-from-30]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`batched`](/jsdoc/pixi-vn/index/classes/Sprite#batched)

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-7]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-31]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`boundsArea`](/jsdoc/pixi-vn/index/classes/Sprite#boundsarea)

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-32]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cacheAsBitmap`](/jsdoc/pixi-vn/index/classes/Sprite#cacheasbitmap)

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-8]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-33]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cacheAsTexture`](/jsdoc/pixi-vn/index/classes/Sprite#cacheastexture)

***

### canBundle [#canbundle]

\> `readonly` **canBundle**: `true` = `true`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

**`Internal`**

#### Inherited from [#inherited-from-34]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`canBundle`](/jsdoc/pixi-vn/index/classes/Sprite#canbundle)

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-9]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-35]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`children`](/jsdoc/pixi-vn/index/classes/Sprite#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-10]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-36]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cullable`](/jsdoc/pixi-vn/index/classes/Sprite#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-11]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-37]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cullableChildren`](/jsdoc/pixi-vn/index/classes/Sprite#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-12]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cullArea`](/jsdoc/pixi-vn/index/classes/Sprite#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-13]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-39]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`cursor`](/jsdoc/pixi-vn/index/classes/Sprite#cursor)

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-40]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`depthOfChildModified`](/jsdoc/pixi-vn/index/classes/Sprite#depthofchildmodified)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-14]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-41]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`destroyed`](/jsdoc/pixi-vn/index/classes/Sprite#destroyed)

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-42]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`effects`](/jsdoc/pixi-vn/index/classes/Sprite#effects)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-15]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-43]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/Sprite#eventmode)

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-16]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-44]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`filterArea`](/jsdoc/pixi-vn/index/classes/Sprite#filterarea)

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-45]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`globalDisplayStatus`](/jsdoc/pixi-vn/index/classes/Sprite#globaldisplaystatus)

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-46]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`groupAlpha`](/jsdoc/pixi-vn/index/classes/Sprite#groupalpha)

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-47]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`groupBlendMode`](/jsdoc/pixi-vn/index/classes/Sprite#groupblendmode)

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-48]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`groupColor`](/jsdoc/pixi-vn/index/classes/Sprite#groupcolor)

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-49]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`groupColorAlpha`](/jsdoc/pixi-vn/index/classes/Sprite#groupcoloralpha)

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-50]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`groupTransform`](/jsdoc/pixi-vn/index/classes/Sprite#grouptransform)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-17]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-51]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/Sprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-18]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-52]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`interactive`](/jsdoc/pixi-vn/index/classes/Sprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-19]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-53]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/Sprite#interactivechildren)

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-20]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-54]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`isCachedAsTexture`](/jsdoc/pixi-vn/index/classes/Sprite#iscachedastexture)

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-21]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-55]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`isInteractive`](/jsdoc/pixi-vn/index/classes/Sprite#isinteractive)

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-57]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`layerParentId`](/jsdoc/pixi-vn/index/classes/Sprite#layerparentid)

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-58]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`localAlpha`](/jsdoc/pixi-vn/index/classes/Sprite#localalpha)

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-59]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`localBlendMode`](/jsdoc/pixi-vn/index/classes/Sprite#localblendmode)

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-60]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`localColor`](/jsdoc/pixi-vn/index/classes/Sprite#localcolor)

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-61]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`localDisplayStatus`](/jsdoc/pixi-vn/index/classes/Sprite#localdisplaystatus)

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-22]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-62]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`localTransform`](/jsdoc/pixi-vn/index/classes/Sprite#localtransform)

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-23]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-63]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`mask`](/jsdoc/pixi-vn/index/classes/Sprite#mask)

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`name`](/jsdoc/pixi-vn/index/classes/Sprite#name)

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onclick`](/jsdoc/pixi-vn/index/classes/Sprite#onclick)

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Sprite.ts:99](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L99)

ListenerExtension

#### Inherited from [#inherited-from-66]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onEventsHandlers`](/jsdoc/pixi-vn/index/classes/Sprite#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-67]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/Sprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-68]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/Sprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-69]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/Sprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-70]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/Sprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-71]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-72]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseleave)

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-73]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/Sprite#onmousemove)

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-74]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseout)

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-75]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseover)

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-76]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-77]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/Sprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-78]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/Sprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-79]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-80]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-81]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerleave)

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-82]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/Sprite#onpointermove)

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-83]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerout)

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-84]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerover)

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-85]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/Sprite#onpointertap)

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-86]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-87]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/Sprite#onpointerupoutside)

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-46]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-88]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-89]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/Sprite#onrightclick)

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-48]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-90]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/Sprite#onrightdown)

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-91]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/Sprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-92]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/Sprite#onrightupoutside)

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-93]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontap`](/jsdoc/pixi-vn/index/classes/Sprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-94]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/Sprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-95]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/Sprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-96]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/Sprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-97]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/Sprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-56]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-98]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/Sprite#ontouchstart)

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-57]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-99]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/Sprite#onwheel)

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-58]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-100]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`parent`](/jsdoc/pixi-vn/index/classes/Sprite#parent)

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-101]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`parentRenderLayer`](/jsdoc/pixi-vn/index/classes/Sprite#parentrenderlayer)

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_IMAGE_ID`

Defined in: [src/canvas/components/ImageSprite.ts:50](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L50)

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

#### Overrides [#overrides-1]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`pixivnId`](/jsdoc/pixi-vn/index/classes/Sprite#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-102]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`relativeGroupTransform`](/jsdoc/pixi-vn/index/classes/Sprite#relativegrouptransform)

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:151

**`Internal`**

#### Inherited from [#inherited-from-103]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`renderPipeId`](/jsdoc/pixi-vn/index/classes/Sprite#renderpipeid)

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-59]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-104]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-60]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-105]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`sortChildren`](/jsdoc/pixi-vn/index/classes/Sprite#sortchildren)

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-106]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-61]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-107]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`tabIndex`](/jsdoc/pixi-vn/index/classes/Sprite#tabindex)

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-108]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`uid`](/jsdoc/pixi-vn/index/classes/Sprite#uid)

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-62]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-109]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`updateCacheTexture`](/jsdoc/pixi-vn/index/classes/Sprite#updatecachetexture)

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-110]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`updateTick`](/jsdoc/pixi-vn/index/classes/Sprite#updatetick)

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-63]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-111]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-112]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`prefixed`](/jsdoc/pixi-vn/index/classes/Sprite#prefixed)

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L140)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L128)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-113]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`align`](/jsdoc/pixi-vn/index/classes/Sprite#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-64]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-114]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`alpha`](/jsdoc/pixi-vn/index/classes/Sprite#alpha)

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:256

The anchor sets the origin point of the sprite. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

* The default is `(0,0)`, this means the sprite's origin is the top left.
* Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
* Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-65]

```ts
// Center the anchor point
sprite.anchor = 0.5; // Sets both x and y to 0.5
sprite.position.set(400, 300); // Sprite will be centered at this position

// Set specific x/y anchor points
sprite.anchor = {
    x: 1, // Right edge
    y: 0  // Top edge
};

// Using individual coordinates
sprite.anchor.set(0.5, 1); // Center-bottom

// For rotation around center
sprite.anchor.set(0.5);
sprite.rotation = Math.PI / 4; // 45 degrees around center

// For scaling from center
sprite.anchor.set(0.5);
sprite.scale.set(2); // Scales from center point
```

##### Returns [#returns-10]

`ObservablePoint`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:257

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

#### Inherited from [#inherited-from-115]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`anchor`](/jsdoc/pixi-vn/index/classes/Sprite#anchor)

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-66]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-116]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`angle`](/jsdoc/pixi-vn/index/classes/Sprite#angle)

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-67]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-117]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`blendMode`](/jsdoc/pixi-vn/index/classes/Sprite#blendmode)

***

### bounds [#bounds]

#### Get Signature [#get-signature-5]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:74

The local bounds of the view in its own coordinate space.
Bounds are automatically updated when the view's content changes.

##### Example [#example-68]

```ts
// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);
```

##### See [#see-16]

Bounds For bounds operations

##### Returns [#returns-16]

`Bounds`

The rectangular bounds of the view

#### Inherited from [#inherited-from-118]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`bounds`](/jsdoc/pixi-vn/index/classes/Sprite#bounds)

***

### filters [#filters]

#### Get Signature [#get-signature-6]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-69]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-17]

Filter For filter base class

##### Returns [#returns-17]

readonly `Filter`\[]

#### Set Signature [#set-signature-5]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-70]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-18]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-5]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-18]

`void`

#### Inherited from [#inherited-from-119]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`filters`](/jsdoc/pixi-vn/index/classes/Sprite#filters)

***

### haveEmptyTexture [#haveemptytexture]

#### Get Signature [#get-signature-7]

\> **get** **haveEmptyTexture**(): `boolean`

Defined in: [src/canvas/components/ImageSprite.ts:138](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L138)

Check if the texture is empty.

##### Returns [#returns-19]

`boolean`

A boolean that is true if the texture is empty.

***

### height [#height]

#### Get Signature [#get-signature-8]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:300

The height of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example [#example-71]

```ts
// Set height directly
sprite.height = 150;
console.log(sprite.scale.y); // Scale adjusted to match height

// Set height while preserving aspect ratio
const ratio = sprite.width / sprite.height;
sprite.height = 200;
sprite.width = 200 * ratio;

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

// Reset to original texture size
sprite.height = sprite.texture.orig.height;
```

##### Returns [#returns-20]

`number`

#### Set Signature [#set-signature-6]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:301

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-72]

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

##### Parameters [#parameters-8]

###### value [#value-6]

`number`

##### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-120]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`height`](/jsdoc/pixi-vn/index/classes/Sprite#height)

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-9]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-22]

`boolean`

#### Inherited from [#inherited-from-121]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`isRenderable`](/jsdoc/pixi-vn/index/classes/Sprite#isrenderable)

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-10]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-23]

`boolean`

#### Set Signature [#set-signature-7]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-7]

`boolean`

##### Returns [#returns-24]

`void`

#### Inherited from [#inherited-from-122]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`isRenderGroup`](/jsdoc/pixi-vn/index/classes/Sprite#isrendergroup)

***

### loadIsStarted [#loadisstarted]

#### Get Signature [#get-signature-11]

\> **get** **loadIsStarted**(): `boolean`

Defined in: [src/canvas/components/ImageSprite.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L96)

##### Returns [#returns-25]

`boolean`

***

### memory [#memory-1]

#### Get Signature [#get-signature-12]

\> **get** **memory**(): [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)

Defined in: [src/canvas/components/ImageSprite.ts:64](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L64)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-26]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)

#### Overrides [#overrides-2]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`memory`](/jsdoc/pixi-vn/index/classes/Sprite#memory-1)

***

### origin [#origin]

#### Get Signature [#get-signature-13]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-73]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-27]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-8]

`number` | `PointData`

##### Returns [#returns-28]

`void`

#### Inherited from [#inherited-from-123]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`origin`](/jsdoc/pixi-vn/index/classes/Sprite#origin)

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-14]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:211](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L211)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-29]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-9]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L199)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-9]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-30]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-124]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`percentagePosition`](/jsdoc/pixi-vn/index/classes/Sprite#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-15]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Sprite.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L217)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-31]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:220](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L220)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-32]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-125]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`percentageX`](/jsdoc/pixi-vn/index/classes/Sprite#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-16]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Sprite.ts:226](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L226)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-33]

`number`

#### Set Signature [#set-signature-11]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:229](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L229)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-34]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-126]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`percentageY`](/jsdoc/pixi-vn/index/classes/Sprite#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-17]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-74]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-35]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-14]

###### value [#value-10]

`number` | `PointData`

##### Returns [#returns-36]

`void`

#### Inherited from [#inherited-from-127]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`pivot`](/jsdoc/pixi-vn/index/classes/Sprite#pivot)

***

### position [#position]

#### Get Signature [#get-signature-18]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Sprite.ts:301](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L301)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-75]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-37]

`ObservablePoint`

#### Set Signature [#set-signature-13]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:304](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L304)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-76]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-11]

`ObservablePoint`

##### Returns [#returns-38]

`void`

#### Inherited from [#inherited-from-128]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`position`](/jsdoc/pixi-vn/index/classes/Sprite#position)

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-19]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Sprite.ts:243](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L243)

##### Returns [#returns-39]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-14]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:253](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L253)

##### Parameters [#parameters-16]

###### value [#value-12]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-40]

`void`

#### Inherited from [#inherited-from-129]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`positionInfo`](/jsdoc/pixi-vn/index/classes/Sprite#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-20]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Sprite.ts:235](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L235)

##### Returns [#returns-41]

`"pixel"` | `"percentage"` | `"align"`

#### Inherited from [#inherited-from-130]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`positionType`](/jsdoc/pixi-vn/index/classes/Sprite#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-21]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-77]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-19]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-42]

`boolean`

#### Set Signature [#set-signature-15]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-13]

`boolean`

##### Returns [#returns-43]

`void`

#### Inherited from [#inherited-from-131]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`renderable`](/jsdoc/pixi-vn/index/classes/Sprite#renderable)

***

### rotation [#rotation]

#### Get Signature [#get-signature-22]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-78]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-44]

`number`

#### Set Signature [#set-signature-16]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-18]

###### value [#value-14]

`number`

##### Returns [#returns-45]

`void`

#### Inherited from [#inherited-from-132]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`rotation`](/jsdoc/pixi-vn/index/classes/Sprite#rotation)

***

### roundPixels [#roundpixels]

#### Get Signature [#get-signature-23]

\> **get** **roundPixels**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

##### Example [#example-79]

```ts
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
```

##### Default [#default-55]

```ts
false
```

##### Returns [#returns-46]

`boolean`

#### Set Signature [#set-signature-17]

\> **set** **roundPixels**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

##### Parameters [#parameters-19]

###### value [#value-15]

`boolean`

##### Returns [#returns-47]

`void`

#### Inherited from [#inherited-from-133]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`roundPixels`](/jsdoc/pixi-vn/index/classes/Sprite#roundpixels)

***

### scale [#scale]

#### Get Signature [#get-signature-24]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-80]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-5]

4.0.0

##### Returns [#returns-48]

`ObservablePoint`

#### Set Signature [#set-signature-18]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-20]

###### value [#value-16]

`string` | `number` | `PointData`

##### Returns [#returns-49]

`void`

#### Inherited from [#inherited-from-134]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`scale`](/jsdoc/pixi-vn/index/classes/Sprite#scale)

***

### skew [#skew]

#### Get Signature [#get-signature-25]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-81]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-6]

4.0.0

##### Default [#default-56]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-50]

`ObservablePoint`

#### Set Signature [#set-signature-19]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-21]

###### value [#value-17]

`PointData`

##### Returns [#returns-51]

`void`

#### Inherited from [#inherited-from-135]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`skew`](/jsdoc/pixi-vn/index/classes/Sprite#skew)

***

### texture [#texture]

#### Get Signature [#get-signature-26]

\> **get** **texture**(): `Texture`\<`TextureSource`\<`any`>>

Defined in: [src/canvas/components/ImageSprite.ts:130](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L130)

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

##### Example [#example-82]

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

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;
```

##### See [#see-20]

* [Texture](/jsdoc/pixi-vn/index/variables/Texture) For texture creation and management
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading

##### Returns [#returns-52]

`Texture`\<`TextureSource`\<`any`>>

#### Set Signature [#set-signature-20]

\> **set** **texture**(`value`): `void`

Defined in: [src/canvas/components/ImageSprite.ts:126](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L126)

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

##### Example [#example-83]

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

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;
```

##### See [#see-21]

* [Texture](/jsdoc/pixi-vn/index/variables/Texture) For texture creation and management
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading

##### Parameters [#parameters-22]

###### value [#value-18]

`Texture`\<`TextureSource`\<`any`>>

##### Returns [#returns-53]

`void`

#### Overrides [#overrides-3]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`texture`](/jsdoc/pixi-vn/index/classes/Sprite#texture)

***

### textureAlias [#texturealias-1]

#### Get Signature [#get-signature-27]

\> **get** `protected` **textureAlias**(): `string`

Defined in: [src/canvas/components/ImageSprite.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L44)

##### Returns [#returns-54]

`string`

***

### tint [#tint]

#### Get Signature [#get-signature-28]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-84]

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

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

##### Default [#default-57]

```ts
0xFFFFFF
```

##### See [#see-22]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-55]

`number`

#### Set Signature [#set-signature-21]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-23]

###### value [#value-19]

`ColorSource`

##### Returns [#returns-56]

`void`

#### Inherited from [#inherited-from-136]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`tint`](/jsdoc/pixi-vn/index/classes/Sprite#tint)

***

### visible [#visible]

#### Get Signature [#get-signature-29]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-85]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-58]

```ts
true
```

##### See [#see-23]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-57]

`boolean`

#### Set Signature [#set-signature-22]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-24]

###### value [#value-20]

`boolean`

##### Returns [#returns-58]

`void`

#### Inherited from [#inherited-from-137]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`visible`](/jsdoc/pixi-vn/index/classes/Sprite#visible)

***

### visualBounds [#visualbounds]

#### Get Signature [#get-signature-30]

\> **get** **visualBounds**(): `BoundsData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:205

The bounds of the sprite, taking into account the texture's trim area.

##### Example [#example-86]

````ts
const texture = new Texture({
    source: new TextureSource({ width: 300, height: 300 }),
    frame: new Rectangle(196, 66, 58, 56),
    trim: new Rectangle(4, 4, 58, 56),
    orig: new Rectangle(0, 0, 64, 64),
    rotate: 2,
});
const sprite = new Sprite(texture);
const visualBounds = sprite.visualBounds;
// console.log(visualBounds); // { minX: -4, maxX: 62, minY: -4, maxY: 60 }

##### Returns

`BoundsData`

#### Inherited from

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`visualBounds`](/jsdoc/pixi-vn/index/classes/Sprite#visualbounds)

***

### width

#### Get Signature

> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:278

The width of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example

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

// Set width while preserving aspect ratio
const ratio = sprite.height / sprite.width;
sprite.width = 300;
sprite.height = 300 * ratio;

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

// Reset to original texture size
sprite.width = sprite.texture.orig.width;
````

##### Returns [#returns-59]

`number`

#### Set Signature [#set-signature-23]

> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:279

The width of the Container, setting this will actually modify the scale to achieve the value set.

> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
> as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-87]

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

##### Parameters [#parameters-25]

###### value [#value-21]

`number`

##### Returns [#returns-60]

`void`

#### Inherited from [#inherited-from-138]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`width`](/jsdoc/pixi-vn/index/classes/Sprite#width)

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-31]

> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-88]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-24]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-61]

`Matrix`

#### Inherited from [#inherited-from-139]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`worldTransform`](/jsdoc/pixi-vn/index/classes/Sprite#worldtransform)

***

### x [#x-2]

#### Get Signature [#get-signature-32]

> **get** **x**(): `number`

Defined in: [src/canvas/components/Sprite.ts:309](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L309)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-89]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-62]

`number`

#### Set Signature [#set-signature-24]

> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:312](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L312)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-90]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-26]

###### value [#value-22]

`number`

##### Returns [#returns-63]

`void`

#### Inherited from [#inherited-from-140]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`x`](/jsdoc/pixi-vn/index/classes/Sprite#x)

***

### xAlign [#xalign]

#### Get Signature [#get-signature-33]

> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:168](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L168)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-64]

`number`

#### Set Signature [#set-signature-25]

> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L162)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-27]

###### value [#value-23]

`number`

##### Returns [#returns-65]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-141]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`xAlign`](/jsdoc/pixi-vn/index/classes/Sprite#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-34]

> **get** **y**(): `number`

Defined in: [src/canvas/components/Sprite.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L317)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-91]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-66]

`number`

#### Set Signature [#set-signature-26]

> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:320](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L320)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-92]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-28]

###### value [#value-24]

`number`

##### Returns [#returns-67]

`void`

#### Inherited from [#inherited-from-142]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`y`](/jsdoc/pixi-vn/index/classes/Sprite#y)

***

### yAlign [#yalign]

#### Get Signature [#get-signature-35]

> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:186](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L186)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-68]

`number`

#### Set Signature [#set-signature-27]

> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L180)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-29]

###### value [#value-25]

`number`

##### Returns [#returns-69]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-143]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`yAlign`](/jsdoc/pixi-vn/index/classes/Sprite#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-30]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-70]

`void`

#### Inherited from [#inherited-from-144]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_getGlobalBoundsRecursive`](/jsdoc/pixi-vn/index/classes/Sprite#_getglobalboundsrecursive)

***

### \_onTouch()? [#_ontouch]

> `optional&#x60; **\_onTouch**(`now`): `void`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

#### Parameters [#parameters-31]

##### now [#now]

`number`

#### Returns [#returns-71]

`void`

#### Inherited from [#inherited-from-145]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`_onTouch`](/jsdoc/pixi-vn/index/classes/Sprite#_ontouch)

***

### addChild() [#addchild]

> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters-1]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-32]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-72]

`U`\[`0`]

The first child that was added

#### Example [#example-93]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-25]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-146]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`addChild`](/jsdoc/pixi-vn/index/classes/Sprite#addchild)

***

### addChildAt() [#addchildat]

> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-2]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-33]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-73]

`U`

The child that was added

#### Example [#example-94]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-26]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-147]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`addChildAt`](/jsdoc/pixi-vn/index/classes/Sprite#addchildat)

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-3]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-34]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-74]

`void`

##### Example [#example-95]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-148]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`addEventListener`](/jsdoc/pixi-vn/index/classes/Sprite#addeventlistener)

#### Call Signature [#call-signature-1]

> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-35]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-75]

`void`

##### Inherited from [#inherited-from-149]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`addEventListener`](/jsdoc/pixi-vn/index/classes/Sprite#addeventlistener)

***

### addListener() [#addlistener]

> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-4]

##### T [#t]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-36]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-76]

`this`

#### Inherited from [#inherited-from-150]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`addListener`](/jsdoc/pixi-vn/index/classes/Sprite#addlistener)

***

### collectRenderables() [#collectrenderables]

> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-37]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-77]

`void`

#### Inherited from [#inherited-from-151]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`collectRenderables`](/jsdoc/pixi-vn/index/classes/Sprite#collectrenderables)

***

### collectRenderablesSimple() [#collectrenderablessimple]

> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

**`Internal`**

Collects renderables for the view container.

#### Parameters [#parameters-38]

##### instructionSet [#instructionset-1]

`InstructionSet`

The instruction set to collect renderables for.

##### renderer [#renderer-1]

`Renderer`

The renderer to collect renderables for.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer.

#### Returns [#returns-78]

`void`

#### Inherited from [#inherited-from-152]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`collectRenderablesSimple`](/jsdoc/pixi-vn/index/classes/Sprite#collectrenderablessimple)

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-39]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-79]

`void`

#### Inherited from [#inherited-from-153]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`collectRenderablesWithEffects`](/jsdoc/pixi-vn/index/classes/Sprite#collectrenderableswitheffects)

***

### containsPoint() [#containspoint]

> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:104

Checks if the object contains the given point in local coordinates.
Uses the view's bounds for hit testing.

#### Parameters [#parameters-40]

##### point [#point]

`PointData`

The point to check in local coordinates

#### Returns [#returns-80]

`boolean`

True if the point is within the view's bounds

#### Example [#example-96]

```ts
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);
```

#### See [#see-27]

* [ViewContainer#bounds](/jsdoc/pixi-vn/index/classes/VideoSprite#bounds) For the bounds used in hit testing
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting global coordinates to local

#### Inherited from [#inherited-from-154]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`containsPoint`](/jsdoc/pixi-vn/index/classes/Sprite#containspoint)

***

### destroy() [#destroy]

> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:222

Destroys this sprite renderable and optionally its texture.

#### Parameters [#parameters-41]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-81]

`void`

#### Example [#example-97]

```ts
sprite.destroy();
sprite.destroy(true);
sprite.destroy({ texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-155]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`destroy`](/jsdoc/pixi-vn/index/classes/Sprite#destroy)

***

### disableRenderGroup() [#disablerendergroup]

> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-82]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-156]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`disableRenderGroup`](/jsdoc/pixi-vn/index/classes/Sprite#disablerendergroup)

***

### dispatchEvent() [#dispatchevent]

> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-42]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-83]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-98]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-157]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`dispatchEvent`](/jsdoc/pixi-vn/index/classes/Sprite#dispatchevent)

***

### emit() [#emit]

> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-1]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-43]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents\<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-84]

`boolean`

#### Inherited from [#inherited-from-158]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`emit`](/jsdoc/pixi-vn/index/classes/Sprite#emit)

***

### enableRenderGroup() [#enablerendergroup]

> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-85]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-159]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`enableRenderGroup`](/jsdoc/pixi-vn/index/classes/Sprite#enablerendergroup)

***

### eventNames() [#eventnames]

> **eventNames**(): (keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-86]

(keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-160]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`eventNames`](/jsdoc/pixi-vn/index/classes/Sprite#eventnames)

***

### getBounds() [#getbounds]

> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-44]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-2]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-87]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-99]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-28]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-161]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getBounds`](/jsdoc/pixi-vn/index/classes/Sprite#getbounds)

***

### getChildAt() [#getchildat]

> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-6]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-45]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-88]

`U`

The child at the given index

#### Example [#example-100]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-29]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-162]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getChildAt`](/jsdoc/pixi-vn/index/classes/Sprite#getchildat)

***

### getChildByLabel() [#getchildbylabel]

> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-46]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-89]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-101]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-30]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-163]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getChildByLabel`](/jsdoc/pixi-vn/index/classes/Sprite#getchildbylabel)

***

### ~~getChildByName()~~ [#getchildbyname]

> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-47]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-90]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-31]

Container#getChildByLabel

#### Inherited from [#inherited-from-164]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getChildByName`](/jsdoc/pixi-vn/index/classes/Sprite#getchildbyname)

***

### getChildIndex() [#getchildindex]

> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-48]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-91]

`number`

The index position of the child container

#### Example [#example-102]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-32]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-165]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getChildIndex`](/jsdoc/pixi-vn/index/classes/Sprite#getchildindex)

***

### getChildrenByLabel() [#getchildrenbylabel]

> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-49]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-92]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-103]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-33]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-166]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getChildrenByLabel`](/jsdoc/pixi-vn/index/classes/Sprite#getchildrenbylabel)

***

### getFastGlobalBounds() [#getfastglobalbounds]

> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-50]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-3]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-93]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-167]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getFastGlobalBounds`](/jsdoc/pixi-vn/index/classes/Sprite#getfastglobalbounds)

***

### getGlobalAlpha() [#getglobalalpha]

> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-51]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-94]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-168]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getGlobalAlpha`](/jsdoc/pixi-vn/index/classes/Sprite#getglobalalpha)

***

### getGlobalPosition() [#getglobalposition]

> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-52]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-95]

`Point`

The updated point

#### Example [#example-105]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-34]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-169]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getGlobalPosition`](/jsdoc/pixi-vn/index/classes/Sprite#getglobalposition)

***

### getGlobalTint() [#getglobaltint]

> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-53]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-96]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-106]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-170]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getGlobalTint`](/jsdoc/pixi-vn/index/classes/Sprite#getglobaltint)

***

### getGlobalTransform() [#getglobaltransform]

> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-54]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-97]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-107]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-171]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getGlobalTransform`](/jsdoc/pixi-vn/index/classes/Sprite#getglobaltransform)

***

### getLocalBounds() [#getlocalbounds]

> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-98]

`Bounds`

The bounding area

#### Example [#example-108]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-35]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-172]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getLocalBounds`](/jsdoc/pixi-vn/index/classes/Sprite#getlocalbounds)

***

### getSize() [#getsize]

> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:322

Retrieves the size of the Sprite as a \[Size]Size object based on the texture dimensions and scale.
This is faster than getting width and height separately as it only calculates the bounds once.

#### Parameters [#parameters-55]

##### out? [#out-1]

`Size`

Optional object to store the size in, to avoid allocating a new object

#### Returns [#returns-99]

`Size`

The size of the Sprite

#### Example [#example-109]

```ts
// Basic size retrieval
const sprite = new Sprite(Texture.from('sprite.png'));
const size = sprite.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
sprite.getSize(reuseSize);
```

#### See [#see-36]

* [Sprite#width](/jsdoc/pixi-vn/index/classes/Sprite#width) For getting just the width
* [Sprite#height](/jsdoc/pixi-vn/index/classes/Sprite#height) For getting just the height
* [Sprite#setSize](/jsdoc/pixi-vn/index/classes/Sprite#setsize) For setting both width and height

#### Inherited from [#inherited-from-173]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`getSize`](/jsdoc/pixi-vn/index/classes/Sprite#getsize)

***

### listenerCount() [#listenercount]

> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-56]

##### event [#event-2]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-100]

`number`

#### Inherited from [#inherited-from-174]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`listenerCount`](/jsdoc/pixi-vn/index/classes/Sprite#listenercount)

***

### listeners() [#listeners]

> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-7]

##### T [#t-2]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-57]

##### event [#event-3]

`T`

#### Returns [#returns-101]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-175]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`listeners`](/jsdoc/pixi-vn/index/classes/Sprite#listeners)

***

### load() [#load]

> **load**(): `Promise`\<`void`>

Defined in: [src/canvas/components/ImageSprite.ts:103](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L103)

Load the image from the link and set the texture of the sprite.

#### Returns [#returns-102]

`Promise`\<`void`>

A promise that resolves when the image is loaded.

***

### off() [#off]

> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-8]

##### T [#t-3]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-58]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-103]

`this`

#### Inherited from [#inherited-from-176]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`off`](/jsdoc/pixi-vn/index/classes/Sprite#off)

***

### on() [#on]

> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Sprite.ts:100](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L100)

Add a listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<ContainerChild>

#### Parameters [#parameters-59]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-104]

`this`

#### Inherited from [#inherited-from-177]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`on`](/jsdoc/pixi-vn/index/classes/Sprite#on)

***

### once() [#once-1]

> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-10]

##### T [#t-5]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-60]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-105]

`this`

#### Inherited from [#inherited-from-178]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`once`](/jsdoc/pixi-vn/index/classes/Sprite#once)

***

### reloadPosition() [#reloadposition]

> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Sprite.ts:262](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L262)

#### Returns [#returns-106]

`void`

#### Inherited from [#inherited-from-179]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`reloadPosition`](/jsdoc/pixi-vn/index/classes/Sprite#reloadposition)

***

### removeAllListeners() [#removealllisteners]

> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-61]

##### event? [#event-7]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-107]

`this`

#### Inherited from [#inherited-from-180]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeAllListeners`](/jsdoc/pixi-vn/index/classes/Sprite#removealllisteners)

***

### removeChild() [#removechild]

> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-11]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-62]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-108]

`U`\[`0`]

The first child that was removed

#### Example [#example-110]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-37]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-181]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeChild`](/jsdoc/pixi-vn/index/classes/Sprite#removechild)

***

### removeChildAt() [#removechildat]

> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-12]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-63]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-109]

`U`

The child that was removed

#### Example [#example-111]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-38]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-182]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeChildAt`](/jsdoc/pixi-vn/index/classes/Sprite#removechildat)

***

### removeChildren() [#removechildren]

> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-64]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-110]

`ContainerChild`\[]

List of removed children

#### Example [#example-112]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-39]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-183]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeChildren`](/jsdoc/pixi-vn/index/classes/Sprite#removechildren)

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-13]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-65]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-111]

`void`

##### Inherited from [#inherited-from-184]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/Sprite#removeeventlistener)

#### Call Signature [#call-signature-3]

> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-66]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-112]

`void`

##### Inherited from [#inherited-from-185]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/Sprite#removeeventlistener)

***

### removeFromParent() [#removefromparent]

> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-113]

`void`

#### Example [#example-113]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-40]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-186]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeFromParent`](/jsdoc/pixi-vn/index/classes/Sprite#removefromparent)

***

### removeListener() [#removelistener]

> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-14]

##### T [#t-6]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-67]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-114]

`this`

#### Inherited from [#inherited-from-187]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`removeListener`](/jsdoc/pixi-vn/index/classes/Sprite#removelistener)

***

### reparentChild() [#reparentchild]

> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-68]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-115]

`U`\[`0`]

The first child that was reparented

#### Example [#example-114]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-41]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-188]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`reparentChild`](/jsdoc/pixi-vn/index/classes/Sprite#reparentchild)

***

### reparentChildAt() [#reparentchildat]

> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-16]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-69]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-116]

`U`

The reparented child

#### Example [#example-115]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-42]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-189]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`reparentChildAt`](/jsdoc/pixi-vn/index/classes/Sprite#reparentchildat)

***

### replaceChild() [#replacechild]

> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-17]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-70]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-117]

`void`

#### Inherited from [#inherited-from-190]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`replaceChild`](/jsdoc/pixi-vn/index/classes/Sprite#replacechild)

***

### setChildIndex() [#setchildindex]

> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-71]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-118]

`void`

#### Example [#example-116]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-43]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-191]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`setChildIndex`](/jsdoc/pixi-vn/index/classes/Sprite#setchildindex)

***

### setFromMatrix() [#setfrommatrix]

> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-72]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-119]

`void`

#### Example [#example-117]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-44]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-192]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`setFromMatrix`](/jsdoc/pixi-vn/index/classes/Sprite#setfrommatrix)

***

### setMask() [#setmask]

> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-73]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-120]

`void`

#### Example [#example-118]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-45]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-193]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`setMask`](/jsdoc/pixi-vn/index/classes/Sprite#setmask)

***

### setMemory() [#setmemory]

> **setMemory**(`memory`): `Promise`\<`void`>

Defined in: [src/canvas/components/ImageSprite.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L71)

This method set the memory of the canvas element.

#### Parameters [#parameters-74]

##### memory [#memory-2]

[`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory) | `Memory`

#### Returns [#returns-121]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Overrides [#overrides-4]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`setMemory`](/jsdoc/pixi-vn/index/classes/Sprite#setmemory)

***

### setSize() [#setsize]

> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:353

Sets the size of the Sprite to the specified width and height.
This is faster than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-75]

##### value [#value-26]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a Size object

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided

#### Returns [#returns-122]

`void`

#### Example [#example-119]

```ts
// Basic size setting
const sprite = new Sprite(Texture.from('sprite.png'));
sprite.setSize(100, 200); // Width: 100, Height: 200

// Set uniform size
sprite.setSize(100); // Sets both width and height to 100

// Set size with object
sprite.setSize({
    width: 200,
    height: 300
});

// Reset to texture size
sprite.setSize(
    sprite.texture.orig.width,
    sprite.texture.orig.height
);
```

#### See [#see-46]

* [Sprite#width](/jsdoc/pixi-vn/index/classes/Sprite#width) For setting width only
* [Sprite#height](/jsdoc/pixi-vn/index/classes/Sprite#height) For setting height only
* [Sprite#texture](/jsdoc/pixi-vn/index/classes/Sprite#texture) For the source dimensions

#### Inherited from [#inherited-from-194]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`setSize`](/jsdoc/pixi-vn/index/classes/Sprite#setsize)

***

### swapChildren() [#swapchildren]

> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-18]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-76]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-123]

`void`

#### Example [#example-120]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-47]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-195]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`swapChildren`](/jsdoc/pixi-vn/index/classes/Sprite#swapchildren)

***

### toGlobal() [#toglobal]

> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-19]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-77]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-2]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-124]

`P`

The global position

#### Example [#example-121]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-48]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-196]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`toGlobal`](/jsdoc/pixi-vn/index/classes/Sprite#toglobal)

***

### toLocal() [#tolocal]

> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-20]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-78]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-3]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-125]

`P`

A point object representing the position in local space

#### Example [#example-122]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-49]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-197]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`toLocal`](/jsdoc/pixi-vn/index/classes/Sprite#tolocal)

***

### unload() [#unload]

> **unload**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:110

Unloads the GPU data from the view.

#### Returns [#returns-126]

`void`

#### Inherited from [#inherited-from-198]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`unload`](/jsdoc/pixi-vn/index/classes/Sprite#unload)

***

### updateLocalTransform() [#updatelocaltransform]

> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-127]

`void`

#### Inherited from [#inherited-from-199]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`updateLocalTransform`](/jsdoc/pixi-vn/index/classes/Sprite#updatelocaltransform)

***

### updateTransform() [#updatetransform]

> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-79]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-128]

`this`

This container, for chaining

#### Example [#example-123]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-50]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-200]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`updateTransform`](/jsdoc/pixi-vn/index/classes/Sprite#updatetransform)

***

### from() [#from-1]

> `static` **from**(`source`, `skipCache?`): `ImageSprite`\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

Defined in: [src/canvas/components/ImageSprite.ts:89](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L89)

Creates a new sprite based on a source texture, image, video, or canvas element.
This is a convenience method that automatically creates and manages textures.

#### Parameters [#parameters-80]

##### source [#source]

`Texture`\<`TextureSource`\<`any`>> | [`TextureSourceLike`](/jsdoc/pixi-vn/index/type-aliases/TextureSourceLike)

The source to create the sprite from. Can be a path to an image, a texture,
or any valid texture source (canvas, video, etc.)

##### skipCache? [#skipcache]

`boolean`

Whether to skip adding to the texture cache when creating a new texture

#### Returns [#returns-129]

`ImageSprite`\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>

A new sprite based on the source

#### Example [#example-124]

```ts
// Create from path or URL
const sprite = Sprite.from('assets/image.png');

// Create from existing texture
const sprite = Sprite.from(texture);

// Create from canvas
const canvas = document.createElement('canvas');
const sprite = Sprite.from(canvas, true); // Skip caching new texture
```

#### See [#see-51]

* Texture.from For texture creation details
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading and management

#### Overrides [#overrides-5]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`from`](/jsdoc/pixi-vn/index/classes/Sprite#from)

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-81]

##### source [#source-1]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-130]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-201]

[`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite).[`mixin`](/jsdoc/pixi-vn/index/classes/Sprite#mixin)


# Class: Label<T> (/jsdoc/pixi-vn/index/classes/Label)



Defined in: [src/narration/classes/Label.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L33)

Label is a class that contains a list of steps, which will be performed as the game continues.
For Ren'py this is the equivalent of a label.

## Example [#example]

```ts
const START_LABEL_ID = "StartLabel"

export const startLabel = newLabel(START_LABEL_ID,
    [
        (props) => {
            canvas.clear()
            narration.dialogue = { character: liam, text: "Which test do you want to perform?" }
            narration.choices = [
                newChoiceOption("Events Test", eventsTestLabel),
                newChoiceOption("Show Image Test", showImageTest),
            ]
        },
        (props) => narration.jump(START_LABEL_ID, props),
    ]
)

narration.call(StartLabel)
```

## Extends [#extends]

* [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`Label`\<`T`>, `T`>

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = \{ }

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Label**\<`T`>(`id`, `steps`, `props?`): `Label`\<`T`>

Defined in: [src/narration/classes/Label.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L45)

#### Parameters [#parameters]

##### id [#id]

`string`

is the id of the label

##### steps [#steps]

[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`>\[] | (() => [`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`>\[])

is the list of steps that the label will perform

##### props? [#props]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps)\<`Label`\<`T`>, `number`>

is the properties of the label

#### Returns [#returns]

`Label`\<`T`>

#### Overrides [#overrides]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`constructor`](/jsdoc/pixi-vn/index/classes/LabelAbstract#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/narration/classes/LabelAbstract.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L22)

Get the id of the label. This variable is used in the system to get the label by id, [RegisteredLabels.get](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/get)

#### Inherited from [#inherited-from]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`id`](/jsdoc/pixi-vn/index/classes/LabelAbstract#id)

## Accessors [#accessors]

### onLoadingLabel [#onloadinglabel]

#### Get Signature [#get-signature]

\> **get** **onLoadingLabel**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:60](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L60)

Is a function that will be executed in [onStepStart](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

##### Example [#example-1]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

##### Returns [#returns-1]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Is a function that will be executed in [onStepStart](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

#### Example [#example-2]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

#### Inherited from [#inherited-from-1]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`onLoadingLabel`](/jsdoc/pixi-vn/index/classes/LabelAbstract#onloadinglabel)

***

### onStepEnd [#onstepend]

#### Get Signature [#get-signature-1]

\> **get** **onStepEnd**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:67](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L67)

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

##### Example [#example-3]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

##### Returns [#returns-2]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

#### Example [#example-4]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

#### Inherited from [#inherited-from-2]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`onStepEnd`](/jsdoc/pixi-vn/index/classes/LabelAbstract#onstepend)

***

### onStepStart [#onstepstart]

#### Get Signature [#get-signature-2]

\> **get** **onStepStart**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L44)

A function executed before each `step`.

##### Example [#example-5]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```

##### Returns [#returns-3]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

A function executed before each `step`.

#### Example [#example-6]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```

#### Inherited from [#inherited-from-3]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`onStepStart`](/jsdoc/pixi-vn/index/classes/LabelAbstract#onstepstart)

***

### stepCount [#stepcount]

#### Get Signature [#get-signature-3]

\> **get** **stepCount**(): `number`

Defined in: [src/narration/classes/Label.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L34)

Get the number of steps in the label. This variable is used in the system to get the number of steps in the label.

##### Returns [#returns-4]

`number`

The number of steps in the label

#### Overrides [#overrides-1]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`stepCount`](/jsdoc/pixi-vn/index/classes/LabelAbstract#stepcount)

***

### steps [#steps-1]

#### Get Signature [#get-signature-4]

\> **get** **steps**(): [`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`>\[]

Defined in: [src/narration/classes/Label.ts:58](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L58)

Get the steps of the label.

##### Returns [#returns-5]

[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`>\[]

## Methods [#methods]

### getStepById() [#getstepbyid]

\> **getStepById**(`stepId`): [`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`> | `undefined`

Defined in: [src/narration/classes/Label.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L37)

Get the step by id

#### Parameters [#parameters-1]

##### stepId [#stepid]

`number`

Id of the step

#### Returns [#returns-6]

[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`> | `undefined`

The step or undefined if it does not exist

#### Overrides [#overrides-2]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`getStepById`](/jsdoc/pixi-vn/index/classes/LabelAbstract#getstepbyid)

***

### getStepSha() [#getstepsha]

\> **getStepSha**(`index`): `string`

Defined in: [src/narration/classes/Label.ts:65](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/Label.ts#L65)

Get the sha of the step

#### Parameters [#parameters-2]

##### index [#index]

`number`

Index of the step

#### Returns [#returns-7]

`string`

#### Overrides [#overrides-3]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract).[`getStepSha`](/jsdoc/pixi-vn/index/classes/LabelAbstract#getstepsha)


# Abstract Class: LabelAbstract<TLabel, TProps, StepIdType> (/jsdoc/pixi-vn/index/classes/LabelAbstract)



Defined in: [src/narration/classes/LabelAbstract.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L5)

## Extended by [#extended-by]

* [`Label`](/jsdoc/pixi-vn/index/classes/Label)

## Type Parameters [#type-parameters]

### TLabel [#tlabel]

`TLabel`

### TProps [#tprops]

`TProps` *extends* `object` = \{ }

### StepIdType [#stepidtype]

`StepIdType` = `number`

## Implements [#implements]

* [`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps)\<`TLabel`, `StepIdType`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new LabelAbstract**\<`TLabel`, `TProps`, `StepIdType`>(`id`, `props?`): `LabelAbstract`\<`TLabel`, `TProps`, `StepIdType`>

Defined in: [src/narration/classes/LabelAbstract.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L12)

#### Parameters [#parameters]

##### id [#id]

`string`

is the id of the label

##### props? [#props]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps)\<`TLabel`, `StepIdType`>

is the properties of the label

#### Returns [#returns]

`LabelAbstract`\<`TLabel`, `TProps`, `StepIdType`>

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/narration/classes/LabelAbstract.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L22)

Get the id of the label. This variable is used in the system to get the label by id, [RegisteredLabels.get](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/get)

## Accessors [#accessors]

### onLoadingLabel [#onloadinglabel]

#### Get Signature [#get-signature]

\> **get** **onLoadingLabel**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:60](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L60)

Is a function that will be executed in [onStepStart](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

##### Example [#example]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

##### Returns [#returns-1]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Is a function that will be executed in [onStepStart](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

#### Example [#example-1]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

#### Implementation of [#implementation-of]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps).[`onLoadingLabel`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onloadinglabel)

***

### onStepEnd [#onstepend]

#### Get Signature [#get-signature-1]

\> **get** **onStepEnd**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:67](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L67)

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

##### Example [#example-2]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

##### Returns [#returns-2]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

#### Example [#example-3]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

#### Implementation of [#implementation-of-1]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps).[`onStepEnd`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepend)

***

### onStepStart [#onstepstart]

#### Get Signature [#get-signature-2]

\> **get** **onStepStart**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L44)

A function executed before each `step`.

##### Example [#example-4]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```

##### Returns [#returns-3]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

A function executed before each `step`.

#### Example [#example-5]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```

#### Implementation of [#implementation-of-2]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps).[`onStepStart`](/jsdoc/pixi-vn/index/interfaces/LabelProps#onstepstart)

***

### stepCount [#stepcount]

#### Get Signature [#get-signature-3]

\> **get** `abstract` **stepCount**(): `number`

Defined in: [src/narration/classes/LabelAbstract.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L28)

Get the number of steps in the label. This variable is used in the system to get the number of steps in the label.

##### Returns [#returns-4]

`number`

The number of steps in the label

## Methods [#methods]

### getStepById() [#getstepbyid]

\> `abstract` **getStepById**(`stepId`): [`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`TProps`> | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:41](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L41)

Get the step by id

#### Parameters [#parameters-1]

##### stepId [#stepid]

`StepIdType`

Id of the step

#### Returns [#returns-5]

[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`TProps`> | `undefined`

The step or undefined if it does not exist

***

### getStepSha() [#getstepsha]

\> `abstract` **getStepSha**(`stepId`): `string` | `undefined`

Defined in: [src/narration/classes/LabelAbstract.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/LabelAbstract.ts#L34)

Get the sha of the step

#### Parameters [#parameters-2]

##### stepId [#stepid-1]

`StepIdType`

#### Returns [#returns-6]

`string` | `undefined`


# Class: NarrationManagerStatic (/jsdoc/pixi-vn/index/classes/NarrationManagerStatic)



Defined in: [src/narration/NarrationManagerStatic.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L27)

## Properties [#properties]

### \_stepCounter [#_stepcounter]

\> `static&#x60; **\_stepCounter**: `number` = `0`

Defined in: [src/narration/NarrationManagerStatic.ts:202](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L202)

***

### choiceMadeTemp [#choicemadetemp]

\> `static` **choiceMadeTemp**: `number` | `undefined` = `undefined`

Defined in: [src/narration/NarrationManagerStatic.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L29)

***

### lastHistoryStep [#lasthistorystep]

\> `static` **lastHistoryStep**: `Omit`\<[`HistoryStep`](/jsdoc/pixi-vn/index/interfaces/HistoryStep), `"diff"`> | `null` = `null`

Defined in: [src/narration/NarrationManagerStatic.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L30)

***

### onLabelStarting? [#onlabelstarting]

\> `static` `optional` &#x2A;*onLabelStarting?**: (`labelId`, `props`, `options`, `defaultStart`) => [`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) | `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/NarrationManagerStatic.ts:369](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L369)

Is a function that will be executed every time a label is about to be started, either via
`call` or `jump` (this includes labels started through a choice of type `"call"` or `"jump"`).

By default (when this is not set), the label is started immediately, exactly like before this
hook existed. If you set it, you take control: call `defaultStart()` yourself whenever you want
the label to actually run (right away, or later, e.g. from a subsequent `next()`-like action in
your template). Until `defaultStart()` is called, nothing about the label happens: it is not
added to the history and no step of it runs.

#### Parameters [#parameters]

##### labelId [#labelid]

`string`

##### props [#props]

`StepLabelProps`

##### options [#options]

###### choiceMade? [#choicemade]

`number`

###### closeCurrentLabel? [#closecurrentlabel]

`boolean`

###### type [#type]

`string`

##### defaultStart [#defaultstart]

() => `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

#### Returns [#returns]

[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) | `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

***

### onLoadingLabel? [#onloadinglabel]

\> `static` `optional` &#x2A;*onLoadingLabel?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/NarrationManagerStatic.ts:357](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L357)

#### Parameters [#parameters-1]

##### stepId [#stepid]

`number`

##### label [#label]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`>

#### Returns [#returns-1]

`void` | `Promise`\<`void`>

***

### onStepEnd? [#onstepend]

\> `static` `optional` &#x2A;*onStepEnd?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/NarrationManagerStatic.ts:358](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L358)

#### Parameters [#parameters-2]

##### stepId [#stepid-1]

`number`

##### label [#label-1]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`>

#### Returns [#returns-2]

`void` | `Promise`\<`void`>

## Accessors [#accessors]

### \_currentLabel [#_currentlabel]

#### Get Signature [#get-signature]

\> **get** `static&#x60; **\_currentLabel**(): [`Label`](/jsdoc/pixi-vn/index/classes/Label)\<\{ }> | `undefined`

Defined in: [src/narration/NarrationManagerStatic.ts:223](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L223)

##### Returns [#returns-3]

[`Label`](/jsdoc/pixi-vn/index/classes/Label)\<\{ }> | `undefined`

***

### allChoicesMade [#allchoicesmade]

#### Get Signature [#get-signature-1]

\> **get** `static` **allChoicesMade**(): `ChoicesMadeType`\[]

Defined in: [src/narration/NarrationManagerStatic.ts:187](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L187)

is a list of all choices made by the player during the progression of the steps.

##### Returns [#returns-4]

`ChoicesMadeType`\[]

#### Set Signature [#set-signature]

\> **set** `static` **allChoicesMade**(`value`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:195](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L195)

##### Parameters [#parameters-3]

###### value [#value]

`ChoicesMadeType`\[]

##### Returns [#returns-5]

`void`

***

### allOpenedLabels [#allopenedlabels]

#### Get Signature [#get-signature-2]

\> **get** `static` **allOpenedLabels**(): `AllOpenedLabelsType`

Defined in: [src/narration/NarrationManagerStatic.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L35)

is a list of all labels that have been opened during the progression of the steps.
the key is the label id and the biggest step opened.

##### Returns [#returns-6]

`AllOpenedLabelsType`

#### Set Signature [#set-signature-1]

\> **set** `static` **allOpenedLabels**(`value`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L43)

##### Parameters [#parameters-4]

###### value [#value-1]

`AllOpenedLabelsType`

##### Returns [#returns-7]

`void`

***

### currentLabelId [#currentlabelid]

#### Get Signature [#get-signature-3]

\> **get** `static` **currentLabelId**(): `string` | `undefined`

Defined in: [src/narration/NarrationManagerStatic.ts:232](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L232)

currentLabelId is the current label id that occurred during the progression of the steps.

##### Returns [#returns-8]

`string` | `undefined`

***

### currentLabelStepIndex [#currentlabelstepindex]

#### Get Signature [#get-signature-4]

\> **get** `static` **currentLabelStepIndex**(): `number` | `null`

Defined in: [src/narration/NarrationManagerStatic.ts:242](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L242)

##### Returns [#returns-9]

`number` | `null`

***

### onStepStart [#onstepstart]

#### Get Signature [#get-signature-5]

\> **get** `static` **onStepStart**(): ((`stepId`, `label`) => `Promise`\<`void`\[]>) | `undefined`

Defined in: [src/narration/NarrationManagerStatic.ts:343](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L343)

##### Returns [#returns-10]

((`stepId`, `label`) => `Promise`\<`void`\[]>) | `undefined`

#### Set Signature [#set-signature-2]

\> **set** `static` **onStepStart**(`value`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:337](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L337)

##### Parameters [#parameters-5]

###### value [#value-2]

(`stepId`, `label`) => `void` | `Promise`\<`void`>

##### Returns [#returns-11]

`void`

***

### openedLabels [#openedlabels]

#### Get Signature [#get-signature-6]

\> **get** `static` **openedLabels**(): [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/narration/NarrationManagerStatic.ts:210](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L210)

##### Returns [#returns-12]

[`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

#### Set Signature [#set-signature-3]

\> **set** `static` **openedLabels**(`value`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:213](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L213)

##### Parameters [#parameters-6]

###### value [#value-3]

[`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

##### Returns [#returns-13]

`void`

***

### originalOpenedLabels [#originalopenedlabels]

#### Get Signature [#get-signature-7]

\> **get** `static` **originalOpenedLabels**(): [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/narration/NarrationManagerStatic.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L217)

##### Returns [#returns-14]

[`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

#### Set Signature [#set-signature-4]

\> **set** `static` **originalOpenedLabels**(`value`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:220](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L220)

##### Parameters [#parameters-7]

###### value [#value-4]

[`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

##### Returns [#returns-15]

`void`

## Methods [#methods]

### addChoicesMade() [#addchoicesmade]

\> `static` **addChoicesMade**(`label`, `stepIndex`, `stepSha`, `choiceMade`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:269](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L269)

#### Parameters [#parameters-8]

##### label [#label-2]

`string`

##### stepIndex [#stepindex]

`number`

##### stepSha [#stepsha]

`string`

##### choiceMade [#choicemade-1]

`number`

#### Returns [#returns-16]

`void`

***

### addLabelHistory() [#addlabelhistory]

\> `static` **addLabelHistory**(`label`, `stepIndex`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:260](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L260)

Add a label to the history.

#### Parameters [#parameters-9]

##### label [#label-3]

`string`

The label to add to the history.

##### stepIndex [#stepindex-1]

`number`

The step index of the label.

#### Returns [#returns-17]

`void`

***

### getCurrentStepTimesCounter() [#getcurrentsteptimescounter]

\> `static` **getCurrentStepTimesCounter**(`nestedId?`): `number`

Defined in: [src/narration/NarrationManagerStatic.ts:110](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L110)

#### Parameters [#parameters-10]

##### nestedId? [#nestedid]

`string` = `""`

#### Returns [#returns-18]

`number`

***

### getCurrentStepTimesCounterData() [#getcurrentsteptimescounterdata]

\> `static` **getCurrentStepTimesCounterData**(`nestedId?`): `CurrentStepTimesCounterMemotyData` | `null`

Defined in: [src/narration/NarrationManagerStatic.ts:50](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L50)

#### Parameters [#parameters-11]

##### nestedId? [#nestedid-1]

`string` = `""`

#### Returns [#returns-19]

`CurrentStepTimesCounterMemotyData` | `null`

***

### getRandomNumber() [#getrandomnumber]

\> `static` **getRandomNumber**(`min`, `max`, `options?`): `number` | `undefined`

Defined in: [src/narration/NarrationManagerStatic.ts:126](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L126)

#### Parameters [#parameters-12]

##### min [#min]

`number`

##### max [#max]

`number`

##### options? [#options-1]

###### nestedId? [#nestedid-2]

`string`

###### onceOnly? [#onceonly]

`boolean`

#### Returns [#returns-20]

`number` | `undefined`

***

### increaseCurrentStepIndex() [#increasecurrentstepindex]

\> `static` **increaseCurrentStepIndex**(): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:319](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L319)

Increase the current step index of the current label.

#### Returns [#returns-21]

`void`

***

### increaseStepCounter() [#increasestepcounter]

\> `static` **increaseStepCounter**(): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:206](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L206)

Increase the last step index that occurred during the progression of the steps.

#### Returns [#returns-22]

`void`

***

### pushNewLabel() [#pushnewlabel]

\> `static` **pushNewLabel**(`label`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:301](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L301)

Add a label to the history.

#### Parameters [#parameters-13]

##### label [#label-4]

`string`

The label to add to the history.

#### Returns [#returns-23]

`void`

#### Throws [#throws]

when the label is not found in the registered labels.

***

### resetCurrentStepTimesCounter() [#resetcurrentsteptimescounter]

\> `static` **resetCurrentStepTimesCounter**(`nestedId?`): `void`

Defined in: [src/narration/NarrationManagerStatic.ts:161](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/NarrationManagerStatic.ts#L161)

#### Parameters [#parameters-14]

##### nestedId? [#nestedid-3]

`string` = `""`

#### Returns [#returns-24]

`void`


# Class: PixiError (/jsdoc/pixi-vn/index/classes/PixiError)



Defined in: [src/core/PixiError.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L5)

## Extends [#extends]

* `Error`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new PixiError**(`code`, `message`): `PixiError`

Defined in: [src/core/PixiError.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L7)

#### Parameters [#parameters]

##### code [#code]

[`ErrorCodeType`](/jsdoc/pixi-vn/index/type-aliases/ErrorCodeType)

##### message [#message]

`string`

#### Returns [#returns]

`PixiError`

#### Overrides [#overrides]

`Error.constructor`

### Constructor [#constructor-1]

\> **new PixiError**(`code`, `message`, `type`, `data`, `parent?`): `PixiError`

Defined in: [src/core/PixiError.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L8)

#### Parameters [#parameters-1]

##### code [#code-1]

[`ErrorCodeType`](/jsdoc/pixi-vn/index/type-aliases/ErrorCodeType)

##### message [#message-1]

`string`

##### type [#type]

`"canvas"`

##### data [#data]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory) | [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory) & `ContainerOptions`\<`ContainerChild`>

##### parent? [#parent]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`any`>

#### Returns [#returns-1]

`PixiError`

#### Overrides [#overrides-1]

`Error.constructor`

## Properties [#properties]

### canvasElementInfo? [#canvaselementinfo]

\> `optional` &#x2A;*canvasElementInfo?**: [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

Defined in: [src/core/PixiError.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L32)

***

### cause? [#cause]

\> `optional` &#x2A;*cause?**: `unknown`

Defined in: node\_modules/typescript/lib/lib.es2022.error.d.ts:26

#### Inherited from [#inherited-from]

`Error.cause`

***

### code [#code-2]

\> **code**: [`ErrorCodeType`](/jsdoc/pixi-vn/index/type-aliases/ErrorCodeType)

Defined in: [src/core/PixiError.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L6)

***

### message [#message-2]

\> **message**: `string`

Defined in: node\_modules/typescript/lib/lib.es5.d.ts:1077

#### Inherited from [#inherited-from-1]

`Error.message`

***

### name [#name]

\> **name**: `string`

Defined in: node\_modules/typescript/lib/lib.es5.d.ts:1076

#### Inherited from [#inherited-from-2]

`Error.name`

***

### parent? [#parent-1]

\> `optional` &#x2A;*parent?**: [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`any`>

Defined in: [src/core/PixiError.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/PixiError.ts#L33)

***

### stack? [#stack]

\> `optional` &#x2A;*stack?**: `string`

Defined in: node\_modules/typescript/lib/lib.es5.d.ts:1078

#### Inherited from [#inherited-from-3]

`Error.stack`

***

### stackTraceLimit [#stacktracelimit]

\> `static` **stackTraceLimit**: `number`

Defined in: node\_modules/@types/node/globals.d.ts:67

The `Error.stackTraceLimit` property specifies the number of stack frames
collected by a stack trace (whether generated by `new Error().stack` or
`Error.captureStackTrace(obj)`).

The default value is `10` but may be set to any valid JavaScript number. Changes
will affect any stack trace captured *after* the value has been changed.

If set to a non-number value, or set to a negative number, stack traces will
not capture any frames.

#### Inherited from [#inherited-from-4]

`Error.stackTraceLimit`

## Methods [#methods]

### captureStackTrace() [#capturestacktrace]

\> `static` **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`

Defined in: node\_modules/@types/node/globals.d.ts:51

Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.

```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack;  // Similar to `new Error().stack`
```

The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.

The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.

The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:

```js
function a() {
  b();
}

function b() {
  c();
}

function c() {
  // Create an error without stack trace to avoid calculating the stack trace twice.
  const { stackTraceLimit } = Error;
  Error.stackTraceLimit = 0;
  const error = new Error();
  Error.stackTraceLimit = stackTraceLimit;

  // Capture the stack trace above function b
  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
  throw error;
}

a();
```

#### Parameters [#parameters-2]

##### targetObject [#targetobject]

`object`

##### constructorOpt? [#constructoropt]

`Function`

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-5]

`Error.captureStackTrace`

***

### isError() [#iserror]

\> `static` **isError**(`error`): `error is Error`

Defined in: node\_modules/typescript/lib/lib.esnext.error.d.ts:23

Indicates whether the argument provided is a built-in Error instance or not.

#### Parameters [#parameters-3]

##### error [#error]

`unknown`

#### Returns [#returns-3]

`error is Error`

#### Inherited from [#inherited-from-6]

`Error.isError`

***

### prepareStackTrace() [#preparestacktrace]

\> `static` **prepareStackTrace**(`err`, `stackTraces`): `any`

Defined in: node\_modules/@types/node/globals.d.ts:55

#### Parameters [#parameters-4]

##### err [#err]

`Error`

##### stackTraces [#stacktraces]

`CallSite`\[]

#### Returns [#returns-4]

`any`

#### See [#see]

[https://v8.dev/docs/stack-trace-api#customizing-stack-traces](https://v8.dev/docs/stack-trace-api#customizing-stack-traces)

#### Inherited from [#inherited-from-7]

`Error.prepareStackTrace`


# Class: Sprite<Memory> (/jsdoc/pixi-vn/index/classes/Sprite)



Defined in: [src/canvas/components/Sprite.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L52)

This class is a extension of the [PIXI.Sprite class](https://pixijs.com/8.x/examples/sprite/basic), it has the same properties and methods,
but it has the ability to be saved and loaded by the Pixi’VN library.

## Example [#example]

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

## Extends [#extends]

* `Sprite`

## Extended by [#extended-by]

* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)

## Type Parameters [#type-parameters]

### Memory [#memory]

`Memory` *extends* `PixiSpriteOptions` & [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory) = [`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory)

## Implements [#implements]

* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`Memory` | [`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory)>
* [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension)
* [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Sprite**\<`Memory`>(`options?`): `Sprite`\<`Memory`>

Defined in: [src/canvas/components/Sprite.ts:62](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L62)

#### Parameters [#parameters]

##### options? [#options]

`Texture`\<`TextureSource`\<`any`>> | [`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions)

The options for the component.

#### Returns [#returns]

`Sprite`\<`Memory`>

#### Overrides [#overrides]

`PIXI.Sprite.constructor`

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

`PIXI.Sprite.__devtoolIgnore`

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

`PIXI.Sprite.__devtoolIgnoreChildren`

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

`PIXI.Sprite.__devtoolLocked`

***

### \_anchor [#_anchor]

\> `readonly&#x60; **\_anchor**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:155

**`Internal`**

#### Inherited from [#inherited-from-3]

`PIXI.Sprite._anchor`

***

### \_bounds [#_bounds]

\> `protected&#x60; **\_bounds**: `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

#### Inherited from [#inherited-from-4]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_bounds`](/jsdoc/pixi-vn/index/classes/VideoSprite#_bounds)

***

### \_boundsDirty [#_boundsdirty]

\> `protected&#x60; **\_boundsDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

#### Inherited from [#inherited-from-5]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_boundsDirty`](/jsdoc/pixi-vn/index/classes/VideoSprite#_boundsdirty)

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-6]

`PIXI.Sprite._cx`

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-7]

`PIXI.Sprite._cy`

***

### \_gcData? [#_gcdata]

\> `optional&#x60; &#x2A;*\_gcData?**: `GCData`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

**`Internal`**

#### Inherited from [#inherited-from-8]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_gcData`](/jsdoc/pixi-vn/index/classes/VideoSprite#_gcdata)

***

### \_gcLastUsed [#_gclastused]

\> **\_gcLastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

**`Internal`**

#### Inherited from [#inherited-from-9]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_gcLastUsed`](/jsdoc/pixi-vn/index/classes/VideoSprite#_gclastused)

***

### \_gpuData [#_gpudata]

\> **\_gpuData**: `Record`\<`number`, `GPU_DATA`>

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

**`Internal`**

#### Inherited from [#inherited-from-10]

`PIXI.Sprite._gpuData`

***

### \_lastUsed [#_lastused]

\> **\_lastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

**`Internal`**

#### Inherited from [#inherited-from-11]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_lastUsed`](/jsdoc/pixi-vn/index/classes/VideoSprite#_lastused)

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-12]

`PIXI.Sprite._pivot`

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-13]

`PIXI.Sprite._position`

***

### \_roundPixels [#_roundpixels]

\> **\_roundPixels**: `0` | `1`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

**`Internal`**

#### Inherited from [#inherited-from-14]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`_roundPixels`](/jsdoc/pixi-vn/index/classes/VideoSprite#_roundpixels)

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-15]

`PIXI.Sprite._scale`

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-16]

`PIXI.Sprite._skew`

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-17]

`PIXI.Sprite._sx`

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-18]

`PIXI.Sprite._sy`

***

### \_texture [#_texture]

\> **\_texture**: `Texture`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:157

**`Internal`**

#### Inherited from [#inherited-from-19]

`PIXI.Sprite._texture`

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-20]

`PIXI.Sprite._zIndex`

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-21]

`PIXI.Sprite.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-22]

`PIXI.Sprite.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-23]

`PIXI.Sprite.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-24]

`PIXI.Sprite.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-25]

`PIXI.Sprite.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-26]

`PIXI.Sprite.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-27]

`PIXI.Sprite.accessibleType`

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

**`Internal`**

#### Inherited from [#inherited-from-28]

`PIXI.Sprite.allowChildren`

***

### autoGarbageCollect [#autogarbagecollect]

\> **autoGarbageCollect**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/classes/VideoSprite#autogarbagecollect)

***

### batched [#batched]

\> **batched**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:153

**`Internal`**

#### Inherited from [#inherited-from-30]

`PIXI.Sprite.batched`

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-31]

`PIXI.Sprite.boundsArea`

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-32]

`PIXI.Sprite.cacheAsBitmap`

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-33]

`PIXI.Sprite.cacheAsTexture`

***

### canBundle [#canbundle]

\> `readonly` **canBundle**: `true` = `true`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

**`Internal`**

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`canBundle`](/jsdoc/pixi-vn/index/classes/VideoSprite#canbundle)

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-35]

`PIXI.Sprite.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-36]

`PIXI.Sprite.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-37]

`PIXI.Sprite.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-38]

`PIXI.Sprite.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-39]

`PIXI.Sprite.cursor`

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-40]

`PIXI.Sprite.depthOfChildModified`

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-41]

`PIXI.Sprite.destroyed`

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-42]

`PIXI.Sprite.effects`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-43]

`PIXI.Sprite.eventMode`

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-44]

`PIXI.Sprite.filterArea`

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-45]

`PIXI.Sprite.globalDisplayStatus`

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-46]

`PIXI.Sprite.groupAlpha`

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-47]

`PIXI.Sprite.groupBlendMode`

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-48]

`PIXI.Sprite.groupColor`

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-49]

`PIXI.Sprite.groupColorAlpha`

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-50]

`PIXI.Sprite.groupTransform`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-51]

`PIXI.Sprite.hitArea`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-52]

`PIXI.Sprite.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-53]

`PIXI.Sprite.interactiveChildren`

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-54]

`PIXI.Sprite.isCachedAsTexture`

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-55]

`PIXI.Sprite.isInteractive`

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-57]

`PIXI.Sprite.layerParentId`

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-58]

`PIXI.Sprite.localAlpha`

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-59]

`PIXI.Sprite.localBlendMode`

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-60]

`PIXI.Sprite.localColor`

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-61]

`PIXI.Sprite.localDisplayStatus`

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-62]

`PIXI.Sprite.localTransform`

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a Sprite object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* Sprite For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-63]

`PIXI.Sprite.mask`

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-64]

`PIXI.Sprite.name`

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-65]

`PIXI.Sprite.onclick`

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Sprite.ts:99](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L99)

ListenerExtension

#### Implementation of [#implementation-of]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`onEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-66]

`PIXI.Sprite.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-67]

`PIXI.Sprite.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-68]

`PIXI.Sprite.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-69]

`PIXI.Sprite.onmousedown`

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-70]

`PIXI.Sprite.onmouseenter`

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-71]

`PIXI.Sprite.onmouseleave`

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-72]

`PIXI.Sprite.onmousemove`

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-73]

`PIXI.Sprite.onmouseout`

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-74]

`PIXI.Sprite.onmouseover`

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-75]

`PIXI.Sprite.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-76]

`PIXI.Sprite.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-77]

`PIXI.Sprite.onpointercancel`

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-78]

`PIXI.Sprite.onpointerdown`

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-79]

`PIXI.Sprite.onpointerenter`

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-80]

`PIXI.Sprite.onpointerleave`

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-81]

`PIXI.Sprite.onpointermove`

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-82]

`PIXI.Sprite.onpointerout`

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-83]

`PIXI.Sprite.onpointerover`

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-84]

`PIXI.Sprite.onpointertap`

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-85]

`PIXI.Sprite.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-86]

`PIXI.Sprite.onpointerupoutside`

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-87]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-88]

`PIXI.Sprite.onrightclick`

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-89]

`PIXI.Sprite.onrightdown`

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-90]

`PIXI.Sprite.onrightup`

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-91]

`PIXI.Sprite.onrightupoutside`

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-92]

`PIXI.Sprite.ontap`

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-93]

`PIXI.Sprite.ontouchcancel`

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-94]

`PIXI.Sprite.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-95]

`PIXI.Sprite.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-96]

`PIXI.Sprite.ontouchmove`

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-57]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-97]

`PIXI.Sprite.ontouchstart`

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-98]

`PIXI.Sprite.onwheel`

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-99]

`PIXI.Sprite.parent`

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-100]

`PIXI.Sprite.parentRenderLayer`

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_SPRITE_ID`

Defined in: [src/canvas/components/Sprite.ts:78](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L78)

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

#### Implementation of [#implementation-of-1]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`pixivnId`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-101]

`PIXI.Sprite.relativeGroupTransform`

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:151

**`Internal`**

#### Inherited from [#inherited-from-102]

`PIXI.Sprite.renderPipeId`

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-103]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-104]

`PIXI.Sprite.sortChildren`

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-105]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-106]

`PIXI.Sprite.tabIndex`

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-107]

`PIXI.Sprite.uid`

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-108]

`PIXI.Sprite.updateCacheTexture`

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-109]

`PIXI.Sprite.updateTick`

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-110]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-111]

`PIXI.Sprite.prefixed`

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L140)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L128)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-2]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-112]

`PIXI.Sprite.alpha`

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:256

The anchor sets the origin point of the sprite. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

* The default is `(0,0)`, this means the sprite's origin is the top left.
* Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
* Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-66]

```ts
// Center the anchor point
sprite.anchor = 0.5; // Sets both x and y to 0.5
sprite.position.set(400, 300); // Sprite will be centered at this position

// Set specific x/y anchor points
sprite.anchor = {
    x: 1, // Right edge
    y: 0  // Top edge
};

// Using individual coordinates
sprite.anchor.set(0.5, 1); // Center-bottom

// For rotation around center
sprite.anchor.set(0.5);
sprite.rotation = Math.PI / 4; // 45 degrees around center

// For scaling from center
sprite.anchor.set(0.5);
sprite.scale.set(2); // Scales from center point
```

##### Returns [#returns-10]

`ObservablePoint`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:257

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

#### Inherited from [#inherited-from-113]

`PIXI.Sprite.anchor`

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-67]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-114]

`PIXI.Sprite.angle`

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-68]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-115]

`PIXI.Sprite.blendMode`

***

### bounds [#bounds]

#### Get Signature [#get-signature-5]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:74

The local bounds of the view in its own coordinate space.
Bounds are automatically updated when the view's content changes.

##### Example [#example-69]

```ts
// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);
```

##### See [#see-16]

Bounds For bounds operations

##### Returns [#returns-16]

`Bounds`

The rectangular bounds of the view

#### Inherited from [#inherited-from-116]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`bounds`](/jsdoc/pixi-vn/index/classes/VideoSprite#bounds)

***

### filters [#filters]

#### Get Signature [#get-signature-6]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-70]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-17]

Filter For filter base class

##### Returns [#returns-17]

readonly `Filter`\[]

#### Set Signature [#set-signature-5]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-71]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-18]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-5]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-18]

`void`

#### Inherited from [#inherited-from-117]

`PIXI.Sprite.filters`

***

### height [#height]

#### Get Signature [#get-signature-7]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:300

The height of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example [#example-72]

```ts
// Set height directly
sprite.height = 150;
console.log(sprite.scale.y); // Scale adjusted to match height

// Set height while preserving aspect ratio
const ratio = sprite.width / sprite.height;
sprite.height = 200;
sprite.width = 200 * ratio;

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

// Reset to original texture size
sprite.height = sprite.texture.orig.height;
```

##### Returns [#returns-19]

`number`

#### Set Signature [#set-signature-6]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:301

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-73]

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

##### Parameters [#parameters-8]

###### value [#value-6]

`number`

##### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-118]

`PIXI.Sprite.height`

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-8]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-21]

`boolean`

#### Inherited from [#inherited-from-119]

`PIXI.Sprite.isRenderable`

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-9]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-22]

`boolean`

#### Set Signature [#set-signature-7]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-7]

`boolean`

##### Returns [#returns-23]

`void`

#### Inherited from [#inherited-from-120]

`PIXI.Sprite.isRenderGroup`

***

### memory [#memory-1]

#### Get Signature [#get-signature-10]

\> **get** **memory**(): [`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory) | `Memory`

Defined in: [src/canvas/components/Sprite.ts:79](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L79)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-24]

[`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory) | `Memory`

#### Implementation of [#implementation-of-3]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory)

***

### origin [#origin]

#### Get Signature [#get-signature-11]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-74]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-25]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-8]

`number` | `PointData`

##### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-121]

`PIXI.Sprite.origin`

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-12]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:211](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L211)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-27]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-9]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L199)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-9]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-28]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-4]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-13]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Sprite.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L217)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-29]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:220](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L220)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-30]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-5]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-14]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Sprite.ts:226](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L226)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-31]

`number`

#### Set Signature [#set-signature-11]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:229](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L229)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-32]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-6]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-15]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-75]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-33]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-14]

###### value [#value-10]

`number` | `PointData`

##### Returns [#returns-34]

`void`

#### Inherited from [#inherited-from-122]

`PIXI.Sprite.pivot`

***

### position [#position]

#### Get Signature [#get-signature-16]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Sprite.ts:301](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L301)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-76]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-35]

`ObservablePoint`

#### Set Signature [#set-signature-13]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:304](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L304)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-77]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-11]

`ObservablePoint`

##### Returns [#returns-36]

`void`

#### Overrides [#overrides-1]

`PIXI.Sprite.position`

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-17]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Sprite.ts:243](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L243)

##### Returns [#returns-37]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-14]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:253](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L253)

##### Parameters [#parameters-16]

###### value [#value-12]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-38]

`void`

#### Implementation of [#implementation-of-7]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionInfo`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-18]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Sprite.ts:235](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L235)

##### Returns [#returns-39]

`"pixel"` | `"percentage"` | `"align"`

#### Implementation of [#implementation-of-8]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionType`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-19]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-78]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-19]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-40]

`boolean`

#### Set Signature [#set-signature-15]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-13]

`boolean`

##### Returns [#returns-41]

`void`

#### Inherited from [#inherited-from-123]

`PIXI.Sprite.renderable`

***

### rotation [#rotation]

#### Get Signature [#get-signature-20]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-79]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-42]

`number`

#### Set Signature [#set-signature-16]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-18]

###### value [#value-14]

`number`

##### Returns [#returns-43]

`void`

#### Inherited from [#inherited-from-124]

`PIXI.Sprite.rotation`

***

### roundPixels [#roundpixels]

#### Get Signature [#get-signature-21]

\> **get** **roundPixels**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

##### Example [#example-80]

```ts
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
```

##### Default [#default-55]

```ts
false
```

##### Returns [#returns-44]

`boolean`

#### Set Signature [#set-signature-17]

\> **set** **roundPixels**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

##### Parameters [#parameters-19]

###### value [#value-15]

`boolean`

##### Returns [#returns-45]

`void`

#### Inherited from [#inherited-from-125]

`PIXI.Sprite.roundPixels`

***

### scale [#scale]

#### Get Signature [#get-signature-22]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-81]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-5]

4.0.0

##### Returns [#returns-46]

`ObservablePoint`

#### Set Signature [#set-signature-18]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-20]

###### value [#value-16]

`string` | `number` | `PointData`

##### Returns [#returns-47]

`void`

#### Inherited from [#inherited-from-126]

`PIXI.Sprite.scale`

***

### skew [#skew]

#### Get Signature [#get-signature-23]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-82]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-6]

4.0.0

##### Default [#default-56]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-48]

`ObservablePoint`

#### Set Signature [#set-signature-19]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-21]

###### value [#value-17]

`PointData`

##### Returns [#returns-49]

`void`

#### Inherited from [#inherited-from-127]

`PIXI.Sprite.skew`

***

### texture [#texture]

#### Get Signature [#get-signature-24]

\> **get** **texture**(): `Texture`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:189

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

##### Example [#example-83]

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

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;
```

##### See [#see-20]

* [Texture](/jsdoc/pixi-vn/index/variables/Texture) For texture creation and management
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading

##### Returns [#returns-50]

`Texture`

#### Set Signature [#set-signature-20]

\> **set** **texture**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:165

##### Parameters [#parameters-22]

###### value [#value-18]

`Texture`

##### Returns [#returns-51]

`void`

#### Inherited from [#inherited-from-128]

`PIXI.Sprite.texture`

***

### tint [#tint]

#### Get Signature [#get-signature-25]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-84]

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

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

##### Default [#default-57]

```ts
0xFFFFFF
```

##### See [#see-21]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-52]

`number`

#### Set Signature [#set-signature-21]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-23]

###### value [#value-19]

`ColorSource`

##### Returns [#returns-53]

`void`

#### Inherited from [#inherited-from-129]

`PIXI.Sprite.tint`

***

### visible [#visible]

#### Get Signature [#get-signature-26]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-85]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-58]

```ts
true
```

##### See [#see-22]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-54]

`boolean`

#### Set Signature [#set-signature-22]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-24]

###### value [#value-20]

`boolean`

##### Returns [#returns-55]

`void`

#### Inherited from [#inherited-from-130]

`PIXI.Sprite.visible`

***

### visualBounds [#visualbounds]

#### Get Signature [#get-signature-27]

\> **get** **visualBounds**(): `BoundsData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:205

The bounds of the sprite, taking into account the texture's trim area.

##### Example [#example-86]

````ts
const texture = new Texture({
    source: new TextureSource({ width: 300, height: 300 }),
    frame: new Rectangle(196, 66, 58, 56),
    trim: new Rectangle(4, 4, 58, 56),
    orig: new Rectangle(0, 0, 64, 64),
    rotate: 2,
});
const sprite = new Sprite(texture);
const visualBounds = sprite.visualBounds;
// console.log(visualBounds); // { minX: -4, maxX: 62, minY: -4, maxY: 60 }

##### Returns

`BoundsData`

#### Inherited from

`PIXI.Sprite.visualBounds`

***

### width

#### Get Signature

> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:278

The width of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example

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

// Set width while preserving aspect ratio
const ratio = sprite.height / sprite.width;
sprite.width = 300;
sprite.height = 300 * ratio;

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

// Reset to original texture size
sprite.width = sprite.texture.orig.width;
````

##### Returns [#returns-56]

`number`

#### Set Signature [#set-signature-23]

> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:279

The width of the Container, setting this will actually modify the scale to achieve the value set.

> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
> as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-87]

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

##### Parameters [#parameters-25]

###### value [#value-21]

`number`

##### Returns [#returns-57]

`void`

#### Inherited from [#inherited-from-131]

`PIXI.Sprite.width`

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-28]

> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-88]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-23]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-58]

`Matrix`

#### Inherited from [#inherited-from-132]

`PIXI.Sprite.worldTransform`

***

### x [#x-2]

#### Get Signature [#get-signature-29]

> **get** **x**(): `number`

Defined in: [src/canvas/components/Sprite.ts:309](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L309)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-89]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-59]

`number`

#### Set Signature [#set-signature-24]

> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:312](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L312)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-90]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-26]

###### value [#value-22]

`number`

##### Returns [#returns-60]

`void`

#### Overrides [#overrides-2]

`PIXI.Sprite.x`

***

### xAlign [#xalign]

#### Get Signature [#get-signature-30]

> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:168](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L168)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-61]

`number`

#### Set Signature [#set-signature-25]

> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L162)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-27]

###### value [#value-23]

`number`

##### Returns [#returns-62]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-9]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-31]

> **get** **y**(): `number`

Defined in: [src/canvas/components/Sprite.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L317)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-91]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-63]

`number`

#### Set Signature [#set-signature-26]

> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:320](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L320)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-92]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-28]

###### value [#value-24]

`number`

##### Returns [#returns-64]

`void`

#### Overrides [#overrides-3]

`PIXI.Sprite.y`

***

### yAlign [#yalign]

#### Get Signature [#get-signature-32]

> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:186](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L186)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-65]

`number`

#### Set Signature [#set-signature-27]

> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L180)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-29]

###### value [#value-25]

`number`

##### Returns [#returns-66]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-10]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-30]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-67]

`void`

#### Inherited from [#inherited-from-133]

`PIXI.Sprite._getGlobalBoundsRecursive`

***

### \_onTouch()? [#_ontouch]

> `optional&#x60; **\_onTouch**(`now`): `void`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

#### Parameters [#parameters-31]

##### now [#now]

`number`

#### Returns [#returns-68]

`void`

#### Inherited from [#inherited-from-134]

`PIXI.Sprite._onTouch`

***

### addChild() [#addchild]

> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters-1]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-32]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-69]

`U`\[`0`]

The first child that was added

#### Example [#example-93]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-24]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-135]

`PIXI.Sprite.addChild`

***

### addChildAt() [#addchildat]

> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-2]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-33]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-70]

`U`

The child that was added

#### Example [#example-94]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-25]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-136]

`PIXI.Sprite.addChildAt`

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-3]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-34]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-71]

`void`

##### Example [#example-95]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-137]

`PIXI.Sprite.addEventListener`

#### Call Signature [#call-signature-1]

> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-35]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-72]

`void`

##### Inherited from [#inherited-from-138]

`PIXI.Sprite.addEventListener`

***

### addListener() [#addlistener]

> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-4]

##### T [#t]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-36]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-73]

`this`

#### Inherited from [#inherited-from-139]

`PIXI.Sprite.addListener`

***

### collectRenderables() [#collectrenderables]

> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-37]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-74]

`void`

#### Inherited from [#inherited-from-140]

`PIXI.Sprite.collectRenderables`

***

### collectRenderablesSimple() [#collectrenderablessimple]

> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

**`Internal`**

Collects renderables for the view container.

#### Parameters [#parameters-38]

##### instructionSet [#instructionset-1]

`InstructionSet`

The instruction set to collect renderables for.

##### renderer [#renderer-1]

`Renderer`

The renderer to collect renderables for.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer.

#### Returns [#returns-75]

`void`

#### Inherited from [#inherited-from-141]

`PIXI.Sprite.collectRenderablesSimple`

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-39]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-76]

`void`

#### Inherited from [#inherited-from-142]

`PIXI.Sprite.collectRenderablesWithEffects`

***

### containsPoint() [#containspoint]

> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:104

Checks if the object contains the given point in local coordinates.
Uses the view's bounds for hit testing.

#### Parameters [#parameters-40]

##### point [#point]

`PointData`

The point to check in local coordinates

#### Returns [#returns-77]

`boolean`

True if the point is within the view's bounds

#### Example [#example-96]

```ts
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);
```

#### See [#see-26]

* [ViewContainer#bounds](/jsdoc/pixi-vn/index/classes/VideoSprite#bounds) For the bounds used in hit testing
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting global coordinates to local

#### Inherited from [#inherited-from-143]

`PIXI.Sprite.containsPoint`

***

### destroy() [#destroy]

> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:222

Destroys this sprite renderable and optionally its texture.

#### Parameters [#parameters-41]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-78]

`void`

#### Example [#example-97]

```ts
sprite.destroy();
sprite.destroy(true);
sprite.destroy({ texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-144]

`PIXI.Sprite.destroy`

***

### disableRenderGroup() [#disablerendergroup]

> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-79]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-145]

`PIXI.Sprite.disableRenderGroup`

***

### dispatchEvent() [#dispatchevent]

> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-42]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-80]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-98]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-146]

`PIXI.Sprite.dispatchEvent`

***

### emit() [#emit]

> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-1]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-43]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents\<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-81]

`boolean`

#### Inherited from [#inherited-from-147]

`PIXI.Sprite.emit`

***

### enableRenderGroup() [#enablerendergroup]

> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-82]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-148]

`PIXI.Sprite.enableRenderGroup`

***

### eventNames() [#eventnames]

> **eventNames**(): (keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-83]

(keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-149]

`PIXI.Sprite.eventNames`

***

### getBounds() [#getbounds]

> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-44]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-2]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-84]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-99]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-27]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-150]

`PIXI.Sprite.getBounds`

***

### getChildAt() [#getchildat]

> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-6]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-45]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-85]

`U`

The child at the given index

#### Example [#example-100]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-28]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-151]

`PIXI.Sprite.getChildAt`

***

### getChildByLabel() [#getchildbylabel]

> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-46]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-86]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-101]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-29]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-152]

`PIXI.Sprite.getChildByLabel`

***

### ~~getChildByName()~~ [#getchildbyname]

> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-47]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-87]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-30]

Container#getChildByLabel

#### Inherited from [#inherited-from-153]

`PIXI.Sprite.getChildByName`

***

### getChildIndex() [#getchildindex]

> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-48]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-88]

`number`

The index position of the child container

#### Example [#example-102]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-31]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-154]

`PIXI.Sprite.getChildIndex`

***

### getChildrenByLabel() [#getchildrenbylabel]

> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-49]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-89]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-103]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-32]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-155]

`PIXI.Sprite.getChildrenByLabel`

***

### getFastGlobalBounds() [#getfastglobalbounds]

> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-50]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-3]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-90]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-156]

`PIXI.Sprite.getFastGlobalBounds`

***

### getGlobalAlpha() [#getglobalalpha]

> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-51]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-91]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-157]

`PIXI.Sprite.getGlobalAlpha`

***

### getGlobalPosition() [#getglobalposition]

> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-52]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-92]

`Point`

The updated point

#### Example [#example-105]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-33]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-158]

`PIXI.Sprite.getGlobalPosition`

***

### getGlobalTint() [#getglobaltint]

> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-53]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-93]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-106]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-159]

`PIXI.Sprite.getGlobalTint`

***

### getGlobalTransform() [#getglobaltransform]

> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-54]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-94]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-107]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-160]

`PIXI.Sprite.getGlobalTransform`

***

### getLocalBounds() [#getlocalbounds]

> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-95]

`Bounds`

The bounding area

#### Example [#example-108]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-34]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-161]

`PIXI.Sprite.getLocalBounds`

***

### getSize() [#getsize]

> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:322

Retrieves the size of the Sprite as a \[Size]Size object based on the texture dimensions and scale.
This is faster than getting width and height separately as it only calculates the bounds once.

#### Parameters [#parameters-55]

##### out? [#out-1]

`Size`

Optional object to store the size in, to avoid allocating a new object

#### Returns [#returns-96]

`Size`

The size of the Sprite

#### Example [#example-109]

```ts
// Basic size retrieval
const sprite = new Sprite(Texture.from('sprite.png'));
const size = sprite.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
sprite.getSize(reuseSize);
```

#### See [#see-35]

* [Sprite#width](#width) For getting just the width
* [Sprite#height](#height) For getting just the height
* [Sprite#setSize](#setsize) For setting both width and height

#### Inherited from [#inherited-from-162]

`PIXI.Sprite.getSize`

***

### listenerCount() [#listenercount]

> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-56]

##### event [#event-2]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-97]

`number`

#### Inherited from [#inherited-from-163]

`PIXI.Sprite.listenerCount`

***

### listeners() [#listeners]

> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-7]

##### T [#t-2]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-57]

##### event [#event-3]

`T`

#### Returns [#returns-98]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-164]

`PIXI.Sprite.listeners`

***

### off() [#off]

> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-8]

##### T [#t-3]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-58]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-99]

`this`

#### Inherited from [#inherited-from-165]

`PIXI.Sprite.off`

***

### on() [#on]

> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Sprite.ts:100](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L100)

Add a listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<ContainerChild>

#### Parameters [#parameters-59]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-100]

`this`

#### Implementation of [#implementation-of-11]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`on`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#on)

#### Overrides [#overrides-4]

`PIXI.Sprite.on`

***

### once() [#once-1]

> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-10]

##### T [#t-5]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-60]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-101]

`this`

#### Inherited from [#inherited-from-166]

`PIXI.Sprite.once`

***

### reloadPosition() [#reloadposition]

> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Sprite.ts:262](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L262)

#### Returns [#returns-102]

`void`

***

### removeAllListeners() [#removealllisteners]

> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-61]

##### event? [#event-7]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-103]

`this`

#### Inherited from [#inherited-from-167]

`PIXI.Sprite.removeAllListeners`

***

### removeChild() [#removechild]

> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-11]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-62]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-104]

`U`\[`0`]

The first child that was removed

#### Example [#example-110]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-36]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-168]

`PIXI.Sprite.removeChild`

***

### removeChildAt() [#removechildat]

> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-12]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-63]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-105]

`U`

The child that was removed

#### Example [#example-111]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-37]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-169]

`PIXI.Sprite.removeChildAt`

***

### removeChildren() [#removechildren]

> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-64]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-106]

`ContainerChild`\[]

List of removed children

#### Example [#example-112]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-38]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-170]

`PIXI.Sprite.removeChildren`

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-13]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-65]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-107]

`void`

##### Inherited from [#inherited-from-171]

`PIXI.Sprite.removeEventListener`

#### Call Signature [#call-signature-3]

> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-66]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-108]

`void`

##### Inherited from [#inherited-from-172]

`PIXI.Sprite.removeEventListener`

***

### removeFromParent() [#removefromparent]

> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-109]

`void`

#### Example [#example-113]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-39]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-173]

`PIXI.Sprite.removeFromParent`

***

### removeListener() [#removelistener]

> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-14]

##### T [#t-6]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-67]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-110]

`this`

#### Inherited from [#inherited-from-174]

`PIXI.Sprite.removeListener`

***

### reparentChild() [#reparentchild]

> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-68]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-111]

`U`\[`0`]

The first child that was reparented

#### Example [#example-114]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-40]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-175]

`PIXI.Sprite.reparentChild`

***

### reparentChildAt() [#reparentchildat]

> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-16]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-69]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-112]

`U`

The reparented child

#### Example [#example-115]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-41]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-176]

`PIXI.Sprite.reparentChildAt`

***

### replaceChild() [#replacechild]

> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-17]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-70]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-113]

`void`

#### Inherited from [#inherited-from-177]

`PIXI.Sprite.replaceChild`

***

### setChildIndex() [#setchildindex]

> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-71]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-114]

`void`

#### Example [#example-116]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-42]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-178]

`PIXI.Sprite.setChildIndex`

***

### setFromMatrix() [#setfrommatrix]

> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-72]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-115]

`void`

#### Example [#example-117]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-43]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-179]

`PIXI.Sprite.setFromMatrix`

***

### setMask() [#setmask]

> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-73]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-116]

`void`

#### Example [#example-118]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-44]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-180]

`PIXI.Sprite.setMask`

***

### setMemory() [#setmemory]

> **setMemory**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/Sprite.ts:87](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L87)

This method set the memory of the canvas element.

#### Parameters [#parameters-74]

##### value [#value-26]

[`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory) | `Memory`

#### Returns [#returns-117]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Implementation of [#implementation-of-12]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory)

***

### setSize() [#setsize]

> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:353

Sets the size of the Sprite to the specified width and height.
This is faster than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-75]

##### value [#value-27]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a Size object

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided

#### Returns [#returns-118]

`void`

#### Example [#example-119]

```ts
// Basic size setting
const sprite = new Sprite(Texture.from('sprite.png'));
sprite.setSize(100, 200); // Width: 100, Height: 200

// Set uniform size
sprite.setSize(100); // Sets both width and height to 100

// Set size with object
sprite.setSize({
    width: 200,
    height: 300
});

// Reset to texture size
sprite.setSize(
    sprite.texture.orig.width,
    sprite.texture.orig.height
);
```

#### See [#see-45]

* [Sprite#width](#width) For setting width only
* [Sprite#height](#height) For setting height only
* [Sprite#texture](#texture) For the source dimensions

#### Inherited from [#inherited-from-181]

`PIXI.Sprite.setSize`

***

### swapChildren() [#swapchildren]

> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-18]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-76]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-119]

`void`

#### Example [#example-120]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-46]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-182]

`PIXI.Sprite.swapChildren`

***

### toGlobal() [#toglobal]

> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-19]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-77]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-2]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-120]

`P`

The global position

#### Example [#example-121]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-47]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-183]

`PIXI.Sprite.toGlobal`

***

### toLocal() [#tolocal]

> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-20]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-78]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-3]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-121]

`P`

A point object representing the position in local space

#### Example [#example-122]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-48]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-184]

`PIXI.Sprite.toLocal`

***

### unload() [#unload]

> **unload**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:110

Unloads the GPU data from the view.

#### Returns [#returns-122]

`void`

#### Inherited from [#inherited-from-185]

`PIXI.Sprite.unload`

***

### updateLocalTransform() [#updatelocaltransform]

> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-123]

`void`

#### Inherited from [#inherited-from-186]

`PIXI.Sprite.updateLocalTransform`

***

### updateTransform() [#updatetransform]

> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-79]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-124]

`this`

This container, for chaining

#### Example [#example-123]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-49]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-187]

`PIXI.Sprite.updateTransform`

***

### from() [#from-1]

> `static` **from**(`source`, `skipCache?`): `Sprite`\<`any`>

Defined in: [src/canvas/components/Sprite.ts:90](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L90)

Creates a new sprite based on a source texture, image, video, or canvas element.
This is a convenience method that automatically creates and manages textures.

#### Parameters [#parameters-80]

##### source [#source]

`Texture`\<`TextureSource`\<`any`>> | [`TextureSourceLike`](/jsdoc/pixi-vn/index/type-aliases/TextureSourceLike)

The source to create the sprite from. Can be a path to an image, a texture,
or any valid texture source (canvas, video, etc.)

##### skipCache? [#skipcache]

`boolean`

Whether to skip adding to the texture cache when creating a new texture

#### Returns [#returns-125]

`Sprite`\<`any`>

A new sprite based on the source

#### Example [#example-124]

```ts
// Create from path or URL
const sprite = Sprite.from('assets/image.png');

// Create from existing texture
const sprite = Sprite.from(texture);

// Create from canvas
const canvas = document.createElement('canvas');
const sprite = Sprite.from(canvas, true); // Skip caching new texture
```

#### See [#see-50]

* Texture.from For texture creation details
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading and management

#### Overrides [#overrides-5]

`PIXI.Sprite.from`

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-81]

##### source [#source-1]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-126]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-188]

`PIXI.Sprite.mixin`


# Class: StoredClassModel (/jsdoc/pixi-vn/index/classes/StoredClassModel)



Defined in: [src/storage/classes/StoredClassModel.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L33)

StoredClassModel is a abstract class that contains the methods to store a class in the game.
I suggest you extend this class to create your own stored class.

## Example [#example]

```ts
export class CharacterBaseModel extends StoredClassModel implements CharacterBaseModelProps {
    constructor(id: string, props: CharacterBaseModelProps) {
        super("___character___", id)
        this.defaultName = props.name
        this.defaultSurname = props.surname
    }
    readonly defaultName: string = ""
    get name(): string {
        return this.getStorageProperty<string>("name") || this.defaultName
    }
    set name(value: string) {
        this.setStorageProperty("name", value)
    }
    readonly defaultSurname?: string
    get surname(): string | undefined {
        return this.getStorageProperty<string>("surname") || this.defaultSurname
    }
    set surname(value: string | undefined) {
        this.setStorageProperty("surname", value)
    }
}
```

## Extended by [#extended-by]

* [`CharacterStoredClass`](/jsdoc/pixi-vn/index/classes/CharacterStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new StoredClassModel**(`categoryId`, `id`): `StoredClassModel`

Defined in: [src/storage/classes/StoredClassModel.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L38)

#### Parameters [#parameters]

##### categoryId [#categoryid]

`string`

The id of the category. For example if you are storing a character class, you can use "characters" as categoryId. so all instances of the character class will be stored in the "characters" category.

##### id [#id]

`string`

The id of instance of the class. This id must be unique for the category.

#### Returns [#returns]

`StoredClassModel`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/storage/classes/StoredClassModel.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L63)

Is id of the stored class. is unique for this class.

## Methods [#methods]

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: [src/storage/classes/StoredClassModel.ts:80](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L80)

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

#### Parameters [#parameters-1]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string` = `...`

The id of the instance to get the property.

#### Returns [#returns-1]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L43)

#### Parameters [#parameters-2]

##### oldCategoryId? [#oldcategoryid]

`string` = `...`

#### Returns [#returns-2]

`void`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: [src/storage/classes/StoredClassModel.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/classes/StoredClassModel.ts#L71)

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-3]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-3]

`void`


# Class: Text (/jsdoc/pixi-vn/index/classes/Text)



Defined in: [src/canvas/components/Text.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L34)

This class is a extension of the [PIXI.Text class](https://pixijs.com/8.x/examples/text/pixi-text), it has the same properties and methods,
but it has the ability to be saved and loaded by the Pixi’VN library.

## Example [#example]

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

## Extends [#extends]

* `Text`

## Implements [#implements]

* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<[`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)>
* [`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension)
* [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Text**(`options?`): `Text`

Defined in: [src/canvas/components/Text.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L38)

#### Parameters [#parameters]

##### options? [#options]

[`TextOptions`](/jsdoc/pixi-vn/index/interfaces/TextOptions)

#### Returns [#returns]

`Text`

#### Overrides [#overrides]

`PIXI.Text.constructor`

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

`PIXI.Text.__devtoolIgnore`

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

`PIXI.Text.__devtoolIgnoreChildren`

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

`PIXI.Text.__devtoolLocked`

***

### \_anchor [#_anchor]

\> **\_anchor**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:241

**`Internal`**

#### Inherited from [#inherited-from-3]

`Text`.[`_anchor`](#_anchor)

***

### \_autoResolution [#_autoresolution]

\> **\_autoResolution**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:245

**`Internal`**

#### Inherited from [#inherited-from-4]

`Text`.[`_autoResolution`](#_autoresolution)

***

### \_bounds [#_bounds]

\> `protected&#x60; **\_bounds**: `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

#### Inherited from [#inherited-from-5]

`PIXI.Text._bounds`

***

### \_boundsDirty [#_boundsdirty]

\> `protected&#x60; **\_boundsDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

#### Inherited from [#inherited-from-6]

`PIXI.Text._boundsDirty`

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-7]

`PIXI.Text._cx`

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-8]

`PIXI.Text._cy`

***

### \_didTextUpdate [#_didtextupdate]

\> **\_didTextUpdate**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:249

**`Internal`**

#### Inherited from [#inherited-from-9]

`Text`.[`_didTextUpdate`](#_didtextupdate)

***

### \_gcData? [#_gcdata]

\> `optional&#x60; &#x2A;*\_gcData?**: `GCData`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

**`Internal`**

#### Inherited from [#inherited-from-10]

`PIXI.Text._gcData`

***

### \_gcLastUsed [#_gclastused]

\> **\_gcLastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

**`Internal`**

#### Inherited from [#inherited-from-11]

`PIXI.Text._gcLastUsed`

***

### \_gpuData [#_gpudata]

\> **\_gpuData**: `Record`\<`number`, `GPU_DATA`>

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

**`Internal`**

#### Inherited from [#inherited-from-12]

`PIXI.Text._gpuData`

***

### \_lastUsed [#_lastused]

\> **\_lastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

**`Internal`**

#### Inherited from [#inherited-from-13]

`PIXI.Text._lastUsed`

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-14]

`PIXI.Text._pivot`

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-15]

`PIXI.Text._position`

***

### \_resolution [#_resolution]

\> **\_resolution**: `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:243

**`Internal`**

#### Inherited from [#inherited-from-16]

`Text`.[`_resolution`](#_resolution)

***

### \_roundPixels [#_roundpixels]

\> **\_roundPixels**: `0` | `1`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

**`Internal`**

#### Inherited from [#inherited-from-17]

`PIXI.Text._roundPixels`

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-18]

`PIXI.Text._scale`

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-19]

`PIXI.Text._skew`

***

### \_style [#_style]

\> **\_style**: `TextStyle`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:247

**`Internal`**

#### Inherited from [#inherited-from-20]

`PIXI.Text._style`

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-21]

`PIXI.Text._sx`

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-22]

`PIXI.Text._sy`

***

### \_text [#_text]

\> `protected&#x60; **\_text**: `string`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:250

#### Inherited from [#inherited-from-23]

`Text`.[`_text`](#_text)

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-24]

`PIXI.Text._zIndex`

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-25]

`PIXI.Text.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-26]

`PIXI.Text.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-27]

`PIXI.Text.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-28]

`PIXI.Text.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-29]

`PIXI.Text.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-30]

`PIXI.Text.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-31]

`PIXI.Text.accessibleType`

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

**`Internal`**

#### Inherited from [#inherited-from-32]

`PIXI.Text.allowChildren`

***

### autoGarbageCollect [#autogarbagecollect]

\> **autoGarbageCollect**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-33]

`PIXI.Text.autoGarbageCollect`

***

### autoGenerateMipmaps? [#autogeneratemipmaps]

\> `optional` &#x2A;*autoGenerateMipmaps?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/Text.d.ts:166

Whether to generate mipmaps for the text texture.
Improves rendering quality when the text is scaled down.
\> \[!NOTE] Text is not updated when this property is updated,
\> you must update the text manually by calling `text.onViewUpdate()`

#### Default [#default-7]

```ts
undefined - Falls back to TextureSource.defaultOptions.autoGenerateMipmaps
```

#### Inherited from [#inherited-from-34]

`PIXI.Text.autoGenerateMipmaps`

***

### batched [#batched]

\> **batched**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:239

**`Internal`**

#### Inherited from [#inherited-from-35]

`Text`.[`batched`](#batched)

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-36]

`PIXI.Text.boundsArea`

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-37]

`PIXI.Text.cacheAsBitmap`

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-38]

`PIXI.Text.cacheAsTexture`

***

### canBundle [#canbundle]

\> `readonly` **canBundle**: `true` = `true`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

**`Internal`**

#### Inherited from [#inherited-from-39]

`PIXI.Text.canBundle`

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-40]

`PIXI.Text.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-8]

```ts
false
```

#### Inherited from [#inherited-from-41]

`PIXI.Text.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-9]

```ts
true
```

#### Inherited from [#inherited-from-42]

`PIXI.Text.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-10]

```ts
null
```

#### Inherited from [#inherited-from-43]

`PIXI.Text.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-11]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-44]

`PIXI.Text.cursor`

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-45]

`PIXI.Text.depthOfChildModified`

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-12]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-46]

`PIXI.Text.destroyed`

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-47]

`PIXI.Text.effects`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-48]

`PIXI.Text.eventMode`

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-49]

`PIXI.Text.filterArea`

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-50]

`PIXI.Text.globalDisplayStatus`

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-51]

`PIXI.Text.groupAlpha`

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-52]

`PIXI.Text.groupBlendMode`

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-53]

`PIXI.Text.groupColor`

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-54]

`PIXI.Text.groupColorAlpha`

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-55]

`PIXI.Text.groupTransform`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-56]

`PIXI.Text.hitArea`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-57]

`PIXI.Text.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-13]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-58]

`PIXI.Text.interactiveChildren`

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-59]

`PIXI.Text.isCachedAsTexture`

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-60]

`PIXI.Text.isInteractive`

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-62]

`PIXI.Text.layerParentId`

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-63]

`PIXI.Text.localAlpha`

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-64]

`PIXI.Text.localBlendMode`

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-65]

`PIXI.Text.localColor`

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-66]

`PIXI.Text.localDisplayStatus`

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-67]

`PIXI.Text.localTransform`

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-68]

`PIXI.Text.mask`

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-69]

`PIXI.Text.name`

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-70]

`PIXI.Text.onclick`

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Text.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L63)

#### Implementation of [#implementation-of]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`onEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-71]

`PIXI.Text.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-72]

`PIXI.Text.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-73]

`PIXI.Text.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-74]

`PIXI.Text.onmousedown`

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-75]

`PIXI.Text.onmouseenter`

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-76]

`PIXI.Text.onmouseleave`

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-77]

`PIXI.Text.onmousemove`

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-78]

`PIXI.Text.onmouseout`

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-79]

`PIXI.Text.onmouseover`

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-80]

`PIXI.Text.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-81]

`PIXI.Text.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-82]

`PIXI.Text.onpointercancel`

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-83]

`PIXI.Text.onpointerdown`

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-84]

`PIXI.Text.onpointerenter`

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-85]

`PIXI.Text.onpointerleave`

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-86]

`PIXI.Text.onpointermove`

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-87]

`PIXI.Text.onpointerout`

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-88]

`PIXI.Text.onpointerover`

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-89]

`PIXI.Text.onpointertap`

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-90]

`PIXI.Text.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-91]

`PIXI.Text.onpointerupoutside`

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-92]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-93]

`PIXI.Text.onrightclick`

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

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

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

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-94]

`PIXI.Text.onrightdown`

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-95]

`PIXI.Text.onrightup`

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-96]

`PIXI.Text.onrightupoutside`

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-97]

`PIXI.Text.ontap`

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-98]

`PIXI.Text.ontouchcancel`

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-99]

`PIXI.Text.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-100]

`PIXI.Text.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-101]

`PIXI.Text.ontouchmove`

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-57]

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

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-102]

`PIXI.Text.ontouchstart`

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-103]

`PIXI.Text.onwheel`

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-104]

`PIXI.Text.parent`

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-105]

`PIXI.Text.parentRenderLayer`

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_TEXT_ID`

Defined in: [src/canvas/components/Text.ts:50](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L50)

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

#### Implementation of [#implementation-of-1]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`pixivnId`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-106]

`PIXI.Text.relativeGroupTransform`

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/text/Text.d.ts:151

**`Internal`**

#### Inherited from [#inherited-from-107]

`PIXI.Text.renderPipeId`

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-49]

```ts
false
```

#### Inherited from [#inherited-from-108]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-109]

`PIXI.Text.sortChildren`

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-50]

```ts
false
@internal
```

#### Inherited from [#inherited-from-110]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-51]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-111]

`PIXI.Text.tabIndex`

***

### textureStyle? [#texturestyle]

\> `optional` &#x2A;*textureStyle?**: `TextureStyle`

Defined in: node\_modules/pixi.js/lib/scene/text/Text.d.ts:158

Optional texture style to use for the text.
\> \[!NOTE] Text is not updated when this property is updated,
\> you must update the text manually by calling `text.onViewUpdate()`

#### Advanced [#advanced-7]

#### Inherited from [#inherited-from-112]

`PIXI.Text.textureStyle`

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-113]

`PIXI.Text.uid`

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-114]

`PIXI.Text.updateCacheTexture`

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-115]

`PIXI.Text.updateTick`

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-52]

```ts
0
```

#### Inherited from [#inherited-from-116]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-117]

`PIXI.Text.prefixed`

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Text.ts:103](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L103)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:91](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L91)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-2]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-53]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-118]

`PIXI.Text.alpha`

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:278

The anchor point of the text that controls the origin point for positioning and rotation.
Can be a number (same value for x/y) or a PointData object.

* (0,0) is top-left
* (0.5,0.5) is center
* (1,1) is bottom-right

```ts
// Set anchor to center
const text = new Text({
    text: 'Hello Pixi!',
    anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
});
// Set anchor to top-left
const text2 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 0, y: 0 } // Top-left corner
});
// Set anchor to bottom-right
const text3 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 1, y: 1 } // Bottom-right corner
});
```

##### Default [#default-54]

```ts
{ x: 0, y: 0 }
```

##### Returns [#returns-10]

`ObservablePoint`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:279

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

#### Inherited from [#inherited-from-119]

`PIXI.Text.anchor`

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-66]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-120]

`PIXI.Text.angle`

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-67]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-55]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-121]

`PIXI.Text.blendMode`

***

### bounds [#bounds]

#### Get Signature [#get-signature-5]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:74

The local bounds of the view in its own coordinate space.
Bounds are automatically updated when the view's content changes.

##### Example [#example-68]

```ts
// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);
```

##### See [#see-16]

Bounds For bounds operations

##### Returns [#returns-16]

`Bounds`

The rectangular bounds of the view

#### Inherited from [#inherited-from-122]

`PIXI.Text.bounds`

***

### filters [#filters]

#### Get Signature [#get-signature-6]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-69]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-17]

Filter For filter base class

##### Returns [#returns-17]

readonly `Filter`\[]

#### Set Signature [#set-signature-5]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-70]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-18]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-5]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-18]

`void`

#### Inherited from [#inherited-from-123]

`PIXI.Text.filters`

***

### height [#height]

#### Get Signature [#get-signature-7]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:401

The height of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example [#example-71]

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

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

##### Returns [#returns-19]

`number`

#### Set Signature [#set-signature-6]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:402

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-72]

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

##### Parameters [#parameters-8]

###### value [#value-6]

`number`

##### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-124]

`PIXI.Text.height`

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-8]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-8]

##### Returns [#returns-21]

`boolean`

#### Inherited from [#inherited-from-125]

`PIXI.Text.isRenderable`

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-9]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-9]

##### Returns [#returns-22]

`boolean`

#### Set Signature [#set-signature-7]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-7]

`boolean`

##### Returns [#returns-23]

`void`

#### Inherited from [#inherited-from-126]

`PIXI.Text.isRenderGroup`

***

### memory [#memory]

#### Get Signature [#get-signature-10]

\> **get** **memory**(): [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

Defined in: [src/canvas/components/Text.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L51)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-24]

[`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

#### Implementation of [#implementation-of-3]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory)

***

### origin [#origin]

#### Get Signature [#get-signature-11]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-73]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-25]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-8]

`number` | `PointData`

##### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-127]

`PIXI.Text.origin`

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-12]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Text.ts:174](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L174)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-27]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-9]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L162)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-9]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-28]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-4]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-13]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Text.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L180)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-29]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Text.ts:183](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L183)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-30]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-5]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-14]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Text.ts:189](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L189)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Returns [#returns-31]

`number`

#### Set Signature [#set-signature-11]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Text.ts:192](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L192)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-32]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Implementation of [#implementation-of-6]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-15]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-74]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-33]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-14]

###### value [#value-10]

`number` | `PointData`

##### Returns [#returns-34]

`void`

#### Inherited from [#inherited-from-128]

`PIXI.Text.pivot`

***

### position [#position]

#### Get Signature [#get-signature-16]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Text.ts:264](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L264)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-75]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-35]

`ObservablePoint`

#### Set Signature [#set-signature-13]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:267](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L267)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-76]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-11]

`ObservablePoint`

##### Returns [#returns-36]

`void`

#### Overrides [#overrides-1]

`PIXI.Text.position`

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-17]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Text.ts:206](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L206)

##### Returns [#returns-37]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-14]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:216](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L216)

##### Parameters [#parameters-16]

###### value [#value-12]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-38]

`void`

#### Implementation of [#implementation-of-7]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionInfo`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-18]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Text.ts:198](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L198)

##### Returns [#returns-39]

`"pixel"` | `"percentage"` | `"align"`

#### Implementation of [#implementation-of-8]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`positionType`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-19]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-77]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-56]

```ts
true
```

##### See [#see-19]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-40]

`boolean`

#### Set Signature [#set-signature-15]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-13]

`boolean`

##### Returns [#returns-41]

`void`

#### Inherited from [#inherited-from-129]

`PIXI.Text.renderable`

***

### resolution [#resolution]

#### Get Signature [#get-signature-20]

\> **get** **resolution**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:327

##### Returns [#returns-42]

`number`

#### Set Signature [#set-signature-16]

\> **set** **resolution**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:326

The resolution/device pixel ratio for rendering.
Higher values result in sharper text at the cost of performance.
Set to null for auto-resolution based on device.

##### Example [#example-78]

```ts
const text = new Text({
    text: 'Hello Pixi!',
    resolution: 2 // High DPI for sharper text
});
const autoResText = new Text({
    text: 'Auto Resolution',
    resolution: null // Use device's pixel ratio
});
```

##### Default [#default-57]

```ts
null
```

##### Parameters [#parameters-18]

###### value [#value-14]

`number`

##### Returns [#returns-43]

`void`

#### Inherited from [#inherited-from-130]

`PIXI.Text.resolution`

***

### rotation [#rotation]

#### Get Signature [#get-signature-21]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-79]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-44]

`number`

#### Set Signature [#set-signature-17]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-19]

###### value [#value-15]

`number`

##### Returns [#returns-45]

`void`

#### Inherited from [#inherited-from-131]

`PIXI.Text.rotation`

***

### roundPixels [#roundpixels]

#### Get Signature [#get-signature-22]

\> **get** **roundPixels**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

##### Example [#example-80]

```ts
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
```

##### Default [#default-58]

```ts
false
```

##### Returns [#returns-46]

`boolean`

#### Set Signature [#set-signature-18]

\> **set** **roundPixels**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

##### Parameters [#parameters-20]

###### value [#value-16]

`boolean`

##### Returns [#returns-47]

`void`

#### Inherited from [#inherited-from-132]

`PIXI.Text.roundPixels`

***

### scale [#scale]

#### Get Signature [#get-signature-23]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-81]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-5]

4.0.0

##### Returns [#returns-48]

`ObservablePoint`

#### Set Signature [#set-signature-19]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-21]

###### value [#value-17]

`string` | `number` | `PointData`

##### Returns [#returns-49]

`void`

#### Inherited from [#inherited-from-133]

`PIXI.Text.scale`

***

### skew [#skew]

#### Get Signature [#get-signature-24]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-82]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-6]

4.0.0

##### Default [#default-59]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-50]

`ObservablePoint`

#### Set Signature [#set-signature-20]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-22]

###### value [#value-18]

`PointData`

##### Returns [#returns-51]

`void`

#### Inherited from [#inherited-from-134]

`PIXI.Text.skew`

***

### style [#style]

#### Get Signature [#get-signature-25]

\> **get** **style**(): `TEXT_STYLE`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:328

##### Returns [#returns-52]

`TEXT_STYLE`

#### Set Signature [#set-signature-21]

\> **set** **style**(`style`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:374

The style configuration for the text.
Can be a TextStyle instance or a configuration object.
Supports canvas text styles, HTML text styles, and bitmap text styles.

##### Example [#example-83]

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

// Update style dynamically
text.style = {
    fontSize: 30, // Change font size
    fill: 0x00ff00, // Change color to green
    align: 'right', // Change alignment to right
    stroke: { color: '#000000', width: 2 }, // Add black stroke
}

##### Parameters

###### style

`TEXT_STYLE` \| `TEXT_STYLE_OPTIONS` \| `Partial`\<`TEXT_STYLE`\>

##### Returns

`void`

#### Inherited from

`PIXI.Text.style`

***

### styleKey

#### Get Signature

> **get** **styleKey**(): `string`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:487

Returns a unique key for this instance.
This key is used for caching.

##### Returns

`string`

Unique key for the instance

#### Inherited from

`Text`.[`styleKey`](#stylekey)

***

### text

#### Get Signature

> **get** **text**(): `string`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:308

##### Returns

`string`

#### Set Signature

> **set** **text**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:307

The text content to display. Use '\n' for line breaks.
Accepts strings, numbers, or objects with toString() method.

##### Example

```ts
const text = new Text({
    text: 'Hello Pixi!',
});
const multilineText = new Text({
    text: 'Line 1\nLine 2\nLine 3',
});
const numberText = new Text({
    text: 12345, // Will be converted to '12345'
});
const objectText = new Text({
    text: { toString: () =&gt; 'Object Text' }, // Custom toString
});

// Update text dynamically
text.text = 'Updated Text'; // Re-renders with new text
text.text = 67890; // Updates to '67890'
text.text = { toString: () =&gt; 'Dynamic Text' }; // Uses custom toString method
// Clear text
text.text = ''; // Clears the text
````

##### Default [#default-60]

```ts
''
```

##### Parameters [#parameters-23]

###### value [#value-19]

`TextString`

##### Returns [#returns-53]

`void`

#### Inherited from [#inherited-from-135]

`PIXI.Text.text`

***

### tint [#tint]

#### Get Signature [#get-signature-26]

> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-84]

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

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

##### Default [#default-61]

```ts
0xFFFFFF
```

##### See [#see-20]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-54]

`number`

#### Set Signature [#set-signature-22]

> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-24]

###### value [#value-20]

`ColorSource`

##### Returns [#returns-55]

`void`

#### Inherited from [#inherited-from-136]

`PIXI.Text.tint`

***

### visible [#visible]

#### Get Signature [#get-signature-27]

> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-85]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-62]

```ts
true
```

##### See [#see-21]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-56]

`boolean`

#### Set Signature [#set-signature-23]

> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-25]

###### value [#value-21]

`boolean`

##### Returns [#returns-57]

`void`

#### Inherited from [#inherited-from-137]

`PIXI.Text.visible`

***

### width [#width]

#### Get Signature [#get-signature-28]

> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:387

The width of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example [#example-86]

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

##### Returns [#returns-58]

`number`

#### Set Signature [#set-signature-24]

> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:388

The width of the Container, setting this will actually modify the scale to achieve the value set.

> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
> as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-87]

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

##### Parameters [#parameters-26]

###### value [#value-22]

`number`

##### Returns [#returns-59]

`void`

#### Inherited from [#inherited-from-138]

`PIXI.Text.width`

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-29]

> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-88]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-22]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-60]

`Matrix`

#### Inherited from [#inherited-from-139]

`PIXI.Text.worldTransform`

***

### x [#x-2]

#### Get Signature [#get-signature-30]

> **get** **x**(): `number`

Defined in: [src/canvas/components/Text.ts:272](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L272)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-89]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-61]

`number`

#### Set Signature [#set-signature-25]

> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:275](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L275)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-90]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-27]

###### value [#value-23]

`number`

##### Returns [#returns-62]

`void`

#### Overrides [#overrides-2]

`PIXI.Text.x`

***

### xAlign [#xalign]

#### Get Signature [#get-signature-31]

> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Text.ts:131](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L131)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-63]

`number`

#### Set Signature [#set-signature-26]

> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:125](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L125)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-28]

###### value [#value-24]

`number`

##### Returns [#returns-64]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-9]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-32]

> **get** **y**(): `number`

Defined in: [src/canvas/components/Text.ts:280](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L280)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-91]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-65]

`number`

#### Set Signature [#set-signature-27]

> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:283](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L283)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-92]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-29]

###### value [#value-25]

`number`

##### Returns [#returns-66]

`void`

#### Overrides [#overrides-3]

`PIXI.Text.y`

***

### yAlign [#yalign]

#### Get Signature [#get-signature-33]

> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Text.ts:149](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L149)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Returns [#returns-67]

`number`

#### Set Signature [#set-signature-28]

> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Text.ts:143](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L143)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

##### Parameters [#parameters-30]

###### value [#value-26]

`number`

##### Returns [#returns-68]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Implementation of [#implementation-of-10]

[`AdditionalPositionsExtension`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-31]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-69]

`void`

#### Inherited from [#inherited-from-140]

`PIXI.Text._getGlobalBoundsRecursive`

***

### \_onTouch()? [#_ontouch]

> `optional&#x60; **\_onTouch**(`now`): `void`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

#### Parameters [#parameters-32]

##### now [#now]

`number`

#### Returns [#returns-70]

`void`

#### Inherited from [#inherited-from-141]

`PIXI.Text._onTouch`

***

### addChild() [#addchild]

> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-33]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-71]

`U`\[`0`]

The first child that was added

#### Example [#example-93]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-23]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-142]

`PIXI.Text.addChild`

***

### addChildAt() [#addchildat]

> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-1]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-34]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-72]

`U`

The child that was added

#### Example [#example-94]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-24]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-143]

`PIXI.Text.addChildAt`

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-2]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-35]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-73]

`void`

##### Example [#example-95]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-144]

`PIXI.Text.addEventListener`

#### Call Signature [#call-signature-1]

> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-36]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-74]

`void`

##### Inherited from [#inherited-from-145]

`PIXI.Text.addEventListener`

***

### addListener() [#addlistener]

> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-3]

##### T [#t]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-37]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-75]

`this`

#### Inherited from [#inherited-from-146]

`PIXI.Text.addListener`

***

### collectRenderables() [#collectrenderables]

> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-38]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-76]

`void`

#### Inherited from [#inherited-from-147]

`PIXI.Text.collectRenderables`

***

### collectRenderablesSimple() [#collectrenderablessimple]

> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

**`Internal`**

Collects renderables for the view container.

#### Parameters [#parameters-39]

##### instructionSet [#instructionset-1]

`InstructionSet`

The instruction set to collect renderables for.

##### renderer [#renderer-1]

`Renderer`

The renderer to collect renderables for.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer.

#### Returns [#returns-77]

`void`

#### Inherited from [#inherited-from-148]

`PIXI.Text.collectRenderablesSimple`

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-40]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-78]

`void`

#### Inherited from [#inherited-from-149]

`PIXI.Text.collectRenderablesWithEffects`

***

### containsPoint() [#containspoint]

> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:468

Checks if the object contains the given point in local coordinates.
Uses the text's bounds for hit testing.

#### Parameters [#parameters-41]

##### point [#point]

`PointData`

The point to check in local coordinates

#### Returns [#returns-79]

`boolean`

True if the point is within the text's bounds

#### Example [#example-96]

```ts
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = text.containsPoint(localPoint);
console.log('Point is inside:', contains);
```

#### See [#see-25]

[Container#toLocal](/jsdoc/pixi-vn/index/classes/Container#tolocal) For converting global coordinates to local

#### Inherited from [#inherited-from-150]

`PIXI.Text.containsPoint`

***

### destroy() [#destroy]

> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:481

Destroys this text renderable and optionally its style texture.

#### Parameters [#parameters-42]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-80]

`void`

#### Example [#example-97]

```ts
// Destroys the text and its style
text.destroy({ style: true, texture: true, textureSource: true });
text.destroy(true);
text.destroy() // Destroys the text, but not its style
```

#### Inherited from [#inherited-from-151]

`PIXI.Text.destroy`

***

### disableRenderGroup() [#disablerendergroup]

> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-81]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-152]

`PIXI.Text.disableRenderGroup`

***

### dispatchEvent() [#dispatchevent]

> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-43]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-82]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-98]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-153]

`PIXI.Text.dispatchEvent`

***

### emit() [#emit]

> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-1]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-44]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents\<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-83]

`boolean`

#### Inherited from [#inherited-from-154]

`PIXI.Text.emit`

***

### enableRenderGroup() [#enablerendergroup]

> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-84]

`void`

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-155]

`PIXI.Text.enableRenderGroup`

***

### eventNames() [#eventnames]

> **eventNames**(): (keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-85]

(keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-156]

`PIXI.Text.eventNames`

***

### getBounds() [#getbounds]

> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-45]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-2]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-86]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-99]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-26]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-157]

`PIXI.Text.getBounds`

***

### getChildAt() [#getchildat]

> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-5]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-46]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-87]

`U`

The child at the given index

#### Example [#example-100]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-27]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-158]

`PIXI.Text.getChildAt`

***

### getChildByLabel() [#getchildbylabel]

> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-47]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-88]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-101]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-28]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-159]

`PIXI.Text.getChildByLabel`

***

### ~~getChildByName()~~ [#getchildbyname]

> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-48]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-89]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-29]

Container#getChildByLabel

#### Inherited from [#inherited-from-160]

`PIXI.Text.getChildByName`

***

### getChildIndex() [#getchildindex]

> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-49]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-90]

`number`

The index position of the child container

#### Example [#example-102]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-30]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-161]

`PIXI.Text.getChildIndex`

***

### getChildrenByLabel() [#getchildrenbylabel]

> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-50]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-91]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-103]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-31]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-162]

`PIXI.Text.getChildrenByLabel`

***

### getFastGlobalBounds() [#getfastglobalbounds]

> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-51]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-3]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-92]

`Bounds`

The computed bounds.

#### Advanced [#advanced-12]

#### Inherited from [#inherited-from-163]

`PIXI.Text.getFastGlobalBounds`

***

### getGlobalAlpha() [#getglobalalpha]

> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-52]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-93]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-164]

`PIXI.Text.getGlobalAlpha`

***

### getGlobalPosition() [#getglobalposition]

> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-53]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-94]

`Point`

The updated point

#### Example [#example-105]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-32]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-165]

`PIXI.Text.getGlobalPosition`

***

### getGlobalTint() [#getglobaltint]

> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-54]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-95]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-106]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-166]

`PIXI.Text.getGlobalTint`

***

### getGlobalTransform() [#getglobaltransform]

> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-55]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-96]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-107]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-167]

`PIXI.Text.getGlobalTransform`

***

### getLocalBounds() [#getlocalbounds]

> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-97]

`Bounds`

The bounding area

#### Example [#example-108]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-33]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-168]

`PIXI.Text.getLocalBounds`

***

### getSize() [#getsize]

> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:426

Retrieves the size of the Text as a \[Size]Size object based on the texture dimensions and scale.
This is faster than getting width and height separately as it only calculates the bounds once.

#### Parameters [#parameters-56]

##### out? [#out-1]

`Size`

Optional object to store the size in, to avoid allocating a new object

#### Returns [#returns-98]

`Size`

The size of the Sprite

#### Example [#example-109]

```ts
// Basic size retrieval
const text = new Text({
    text: 'Hello Pixi!',
    style: { fontSize: 24 }
});
const size = text.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
text.getSize(reuseSize);
```

#### See [#see-34]

* [Text#width](#width) For getting just the width
* [Text#height](#height) For getting just the height
* [Text#setSize](#setsize) For setting both width and height

#### Inherited from [#inherited-from-169]

`PIXI.Text.getSize`

***

### listenerCount() [#listenercount]

> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-57]

##### event [#event-2]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-99]

`number`

#### Inherited from [#inherited-from-170]

`PIXI.Text.listenerCount`

***

### listeners() [#listeners]

> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-2]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-58]

##### event [#event-3]

`T`

#### Returns [#returns-100]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-171]

`PIXI.Text.listeners`

***

### off() [#off]

> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-7]

##### T [#t-3]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-59]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-101]

`this`

#### Inherited from [#inherited-from-172]

`PIXI.Text.off`

***

### on() [#on]

> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Text.ts:64](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L64)

Add a listener for a given event.

#### Type Parameters [#type-parameters-8]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<ContainerChild>

#### Parameters [#parameters-60]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-102]

`this`

#### Implementation of [#implementation-of-11]

[`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension).[`on`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension#on)

#### Overrides [#overrides-4]

`PIXI.Text.on`

***

### once() [#once-1]

> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-5]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-61]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-103]

`this`

#### Inherited from [#inherited-from-173]

`PIXI.Text.once`

***

### onViewUpdate() [#onviewupdate]

> **onViewUpdate**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:470

**`Internal`**

#### Returns [#returns-104]

`void`

#### Inherited from [#inherited-from-174]

`PIXI.Text.onViewUpdate`

***

### reloadPosition() [#reloadposition]

> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Text.ts:225](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L225)

#### Returns [#returns-105]

`void`

***

### removeAllListeners() [#removealllisteners]

> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-62]

##### event? [#event-7]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-106]

`this`

#### Inherited from [#inherited-from-175]

`PIXI.Text.removeAllListeners`

***

### removeChild() [#removechild]

> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-10]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-63]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-107]

`U`\[`0`]

The first child that was removed

#### Example [#example-110]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-35]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-176]

`PIXI.Text.removeChild`

***

### removeChildAt() [#removechildat]

> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-11]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-64]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-108]

`U`

The child that was removed

#### Example [#example-111]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-36]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-177]

`PIXI.Text.removeChildAt`

***

### removeChildren() [#removechildren]

> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-65]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-109]

`ContainerChild`\[]

List of removed children

#### Example [#example-112]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-37]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-178]

`PIXI.Text.removeChildren`

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-12]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-66]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-110]

`void`

##### Inherited from [#inherited-from-179]

`PIXI.Text.removeEventListener`

#### Call Signature [#call-signature-3]

> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-67]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-111]

`void`

##### Inherited from [#inherited-from-180]

`PIXI.Text.removeEventListener`

***

### removeFromParent() [#removefromparent]

> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-112]

`void`

#### Example [#example-113]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-38]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-181]

`PIXI.Text.removeFromParent`

***

### removeListener() [#removelistener]

> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-13]

##### T [#t-6]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-68]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-113]

`this`

#### Inherited from [#inherited-from-182]

`PIXI.Text.removeListener`

***

### reparentChild() [#reparentchild]

> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-14]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-69]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-114]

`U`\[`0`]

The first child that was reparented

#### Example [#example-114]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-39]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-183]

`PIXI.Text.reparentChild`

***

### reparentChildAt() [#reparentchildat]

> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-70]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-115]

`U`

The reparented child

#### Example [#example-115]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-40]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-184]

`PIXI.Text.reparentChildAt`

***

### replaceChild() [#replacechild]

> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-16]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-71]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-116]

`void`

#### Inherited from [#inherited-from-185]

`PIXI.Text.replaceChild`

***

### setChildIndex() [#setchildindex]

> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-72]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-117]

`void`

#### Example [#example-116]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-41]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-186]

`PIXI.Text.setChildIndex`

***

### setFromMatrix() [#setfrommatrix]

> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-73]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-118]

`void`

#### Example [#example-117]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-42]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-187]

`PIXI.Text.setFromMatrix`

***

### setMask() [#setmask]

> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-74]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-119]

`void`

#### Example [#example-118]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-43]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-188]

`PIXI.Text.setMask`

***

### setMemory() [#setmemory]

> **setMemory**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/Text.ts:59](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Text.ts#L59)

This method set the memory of the canvas element.

#### Parameters [#parameters-75]

##### value [#value-27]

[`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

#### Returns [#returns-120]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Implementation of [#implementation-of-12]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory)

***

### setSize() [#setsize]

> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:453

Sets the size of the Text to the specified width and height.
This is faster than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-76]

##### value [#value-28]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a Size object

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided

#### Returns [#returns-121]

`void`

#### Example [#example-119]

```ts
// Basic size setting
const text = new Text({
   text: 'Hello Pixi!',
   style: { fontSize: 24 }
});
text.setSize(100, 200); // Width: 100, Height: 200

// Set uniform size
text.setSize(100); // Sets both width and height to 100

// Set size with object
text.setSize({
    width: 200,
    height: 300
});
```

#### See [#see-44]

* [Text#width](#width) For setting width only
* [Text#height](#height) For setting height only

#### Inherited from [#inherited-from-189]

`PIXI.Text.setSize`

***

### swapChildren() [#swapchildren]

> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-17]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-77]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-122]

`void`

#### Example [#example-120]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-45]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-190]

`PIXI.Text.swapChildren`

***

### toGlobal() [#toglobal]

> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-18]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-78]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-2]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-123]

`P`

The global position

#### Example [#example-121]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-46]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-191]

`PIXI.Text.toGlobal`

***

### toLocal() [#tolocal]

> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-19]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-79]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-3]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-124]

`P`

A point object representing the position in local space

#### Example [#example-122]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-47]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-192]

`PIXI.Text.toLocal`

***

### unload() [#unload]

> **unload**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:110

Unloads the GPU data from the view.

#### Returns [#returns-125]

`void`

#### Inherited from [#inherited-from-193]

`PIXI.Text.unload`

***

### updateLocalTransform() [#updatelocaltransform]

> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-126]

`void`

#### Inherited from [#inherited-from-194]

`PIXI.Text.updateLocalTransform`

***

### updateTransform() [#updatetransform]

> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-80]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-127]

`this`

This container, for chaining

#### Example [#example-123]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-48]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-195]

`PIXI.Text.updateTransform`

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-81]

##### source [#source]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-128]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-196]

`PIXI.Text.mixin`


# Abstract Class: TickerBase<TArgs> (/jsdoc/pixi-vn/index/classes/TickerBase)



Defined in: [src/canvas/tickers/classes/TickerBase.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L44)

A class is used to create a ticker element to add into a Pixi Application.
You can use [()](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#addticker) to add this element into the application.
This class should be extended and the fn method should be overridden.
You must use the [tickerDecorator](/jsdoc/pixi-vn/index/functions/tickerDecorator) to register the ticker in the game.
In Ren'Py is a transform.

## Example [#example]

```ts
\@tickerDecorator() // this is equivalent to tickerDecorator("RotateTicker")
export class RotateTicker extends TickerBase<{ speed?: number }> {
    override fn(
        t: TickerValue, // the ticker that is calling this method
        args: { // the arguments that you passed when you added the ticker
            speed?: number,
        },
        aliases: string[], // the aliases of the canvas elements that are connected to this ticker
        tickerId: string, // the id of the ticker. You can use this to get the ticker from the canvas.currentTickers
    ): void {
        let speed = args.speed === undefined ? 0.1 : args.speed
        aliases.forEach((alias) => {
                let element = canvas.find(alias)
                if (element && element instanceof Container) {
                    if (clockwise)
                        element.rotation += speed * t.deltaTime
                    else
                        element.rotation -= speed * t.deltaTime
                }
            })
    }
}
```

## Type Parameters [#type-parameters]

### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

The type of the arguments that you want to pass to the ticker.

## Implements [#implements]

* [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new TickerBase**\<`TArgs`>(`args`, `options?`): `TickerBase`\<`TArgs`>

Defined in: [src/canvas/tickers/classes/TickerBase.ts:49](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L49)

#### Parameters [#parameters]

##### args [#args]

`TArgs`

The arguments that you want to pass to the ticker.

##### options? [#options]

The options of the ticker.

###### canvasElementAliases? [#canvaselementaliases]

`string`\[]

The aliases of the canvas elements that are connected to this ticker. This is used by the system to know which canvas elements are connected to this ticker, and to pass them to the fn method.

**Default**

```ts
[]
```

###### duration? [#duration]

`number`

The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish).

**Default**

```ts
undefined
```

###### id? [#id]

`string`

The id of the ticker. This param is used by the system when will ber restoring the tickers from a save. If not provided, a random id will be generated.

**Default**

```ts
undefined
```

###### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the ticker.

**Default**

```ts
UPDATE_PRIORITY.NORMAL
```

#### Returns [#returns]

`TickerBase`\<`TArgs`>

## Properties [#properties]

### alias [#alias]

\> `readonly` **alias**: `string`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L83)

Get the alias of the ticker class. This variable is used in the system to get the ticker class by id, [RegisteredTickers.getInstance](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/getInstance)

#### Implementation of [#implementation-of]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`alias`](/jsdoc/pixi-vn/index/interfaces/Ticker#alias)

***

### args [#args-1]

\> **args**: `TArgs`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:85](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L85)

Arguments to pass to the ticker

#### Implementation of [#implementation-of-1]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`args`](/jsdoc/pixi-vn/index/interfaces/Ticker#args)

***

### canvasElementAliases [#canvaselementaliases-1]

\> **canvasElementAliases**: `string`\[] = `[]`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:89](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L89)

The aliases of the canvas elements that are connected to this ticker

#### Implementation of [#implementation-of-2]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`canvasElementAliases`](/jsdoc/pixi-vn/index/interfaces/Ticker#canvaselementaliases)

***

### duration? [#duration-1]

\> `optional` &#x2A;*duration?**: `number`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:86](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L86)

Duration in seconds to run the ticker

#### Implementation of [#implementation-of-3]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`duration`](/jsdoc/pixi-vn/index/interfaces/Ticker#duration)

***

### fnValue? [#fnvalue]

\> `protected` `optional` &#x2A;*fnValue?**: () => `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:115](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L115)

#### Returns [#returns-1]

`void`

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:84](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L84)

The id of the ticker. Must be unique for each ticker instance.

#### Implementation of [#implementation-of-4]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`id`](/jsdoc/pixi-vn/index/interfaces/Ticker#id)

***

### priority? [#priority-1]

\> `optional` &#x2A;*priority?**: `UPDATE_PRIORITY`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:87](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L87)

Priority of the ticker

#### Implementation of [#implementation-of-5]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`priority`](/jsdoc/pixi-vn/index/interfaces/Ticker#priority)

***

### ticker [#ticker]

\> `protected` **ticker**: [`TickerValue`](/jsdoc/pixi-vn/index/interfaces/TickerValue)

Defined in: [src/canvas/tickers/classes/TickerBase.ts:88](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L88)

## Accessors [#accessors]

### paused [#paused]

#### Get Signature [#get-signature]

\> **get** **paused**(): `boolean`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L140)

Checks if the ticker is paused.

##### Returns [#returns-2]

`boolean`

true if the ticker is paused, false otherwise.

Checks if the ticker is paused.

#### Implementation of [#implementation-of-6]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`paused`](/jsdoc/pixi-vn/index/interfaces/Ticker#paused)

## Methods [#methods]

### complete() [#complete]

\> **complete**(`_options?`): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:116](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L116)

Completes the animation and applies the final state.

#### Parameters [#parameters-1]

##### \_options? [#_options]

###### ignoreTickerSteps? [#ignoretickersteps]

`boolean`

#### Returns [#returns-3]

`void`

#### Implementation of [#implementation-of-7]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`complete`](/jsdoc/pixi-vn/index/interfaces/Ticker#complete)

***

### fn() [#fn]

\> `abstract` **fn**(`_ticker`, `_args`, `_alias`, `_tickerId`): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:109](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L109)

The method that will be called every frame.
This method should be overridden and you can use [()](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to get the canvas element of the canvas, and edit them.

#### Parameters [#parameters-2]

##### \_ticker [#_ticker]

[`TickerValue`](/jsdoc/pixi-vn/index/interfaces/TickerValue)

The ticker that is calling this method

##### \_args [#_args]

`TArgs`

The arguments that you passed when you added the ticker

##### \_alias [#_alias]

`string` | `string`\[]

The alias of the canvas elements that are connected to this ticker

##### \_tickerId [#_tickerid]

`string`

The id of the ticker. You can use this to get the ticker from the [canvas.currentTickers](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#currenttickers)

#### Returns [#returns-4]

`void`

***

### pause() [#pause]

\> **pause**(): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:134](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L134)

Pauses the animation.

#### Returns [#returns-5]

`void`

#### Implementation of [#implementation-of-8]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`pause`](/jsdoc/pixi-vn/index/interfaces/Ticker#pause)

***

### play() [#play]

\> **play**(): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L137)

Plays the animation.

#### Returns [#returns-6]

`void`

#### Implementation of [#implementation-of-9]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`play`](/jsdoc/pixi-vn/index/interfaces/Ticker#play)

***

### start() [#start]

\> **start**(): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:127](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L127)

Starts the ticker. This will start the ticker and begin the animation.

#### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-10]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`start`](/jsdoc/pixi-vn/index/interfaces/Ticker#start)

***

### stop() [#stop]

\> **stop**(): `void`

Defined in: [src/canvas/tickers/classes/TickerBase.ts:119](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/classes/TickerBase.ts#L119)

Stops the animation at its current state, and prevents it from resuming when the animation is played again.

#### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-11]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker).[`stop`](/jsdoc/pixi-vn/index/interfaces/Ticker#stop)


# Class: VideoSprite (/jsdoc/pixi-vn/index/classes/VideoSprite)



Defined in: [src/canvas/components/VideoSprite.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L33)

This class is a extension of the [ImageSprite](/jsdoc/pixi-vn/index/classes/ImageSprite) class, it has the same properties and methods,
but it has some features that make video management easier.
You need to use [load](#load) to show the video in the canvas.
This class is used for functions like [addVideo](/jsdoc/pixi-vn/index/functions/addVideo) and [showWithDissolve](/jsdoc/pixi-vn/index/functions/showWithDissolve).

## Examples [#examples]

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

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

## Extends [#extends]

* [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new VideoSprite**(`options?`, `textureAlias?`): `VideoSprite`

Defined in: [src/canvas/components/VideoSprite.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L38)

#### Parameters [#parameters]

##### options? [#options]

`Texture`\<`TextureSource`\<`any`>> | [`VideoSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)

The options for the component.

##### textureAlias? [#texturealias]

`string`

The URL or path. If you have initialized the "asset matrix", you can use the alias of the texture.

#### Returns [#returns]

`VideoSprite`

#### Overrides [#overrides]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`constructor`](/jsdoc/pixi-vn/index/classes/ImageSprite#constructor)

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`__devtoolIgnore`](/jsdoc/pixi-vn/index/classes/ImageSprite#__devtoolignore)

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`__devtoolIgnoreChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#__devtoolignorechildren)

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`__devtoolLocked`](/jsdoc/pixi-vn/index/classes/ImageSprite#__devtoollocked)

***

### \_anchor [#_anchor]

\> `readonly&#x60; **\_anchor**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:155

**`Internal`**

#### Inherited from [#inherited-from-3]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_anchor`](/jsdoc/pixi-vn/index/classes/ImageSprite#_anchor)

***

### \_bounds [#_bounds]

\> `protected&#x60; **\_bounds**: `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

#### Inherited from [#inherited-from-4]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_bounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#_bounds)

***

### \_boundsDirty [#_boundsdirty]

\> `protected&#x60; **\_boundsDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

#### Inherited from [#inherited-from-5]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_boundsDirty`](/jsdoc/pixi-vn/index/classes/ImageSprite#_boundsdirty)

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-6]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_cx`](/jsdoc/pixi-vn/index/classes/ImageSprite#_cx)

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-7]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_cy`](/jsdoc/pixi-vn/index/classes/ImageSprite#_cy)

***

### \_gcData? [#_gcdata]

\> `optional&#x60; &#x2A;*\_gcData?**: `GCData`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

**`Internal`**

#### Inherited from [#inherited-from-8]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_gcData`](/jsdoc/pixi-vn/index/classes/ImageSprite#_gcdata)

***

### \_gcLastUsed [#_gclastused]

\> **\_gcLastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

**`Internal`**

#### Inherited from [#inherited-from-9]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_gcLastUsed`](/jsdoc/pixi-vn/index/classes/ImageSprite#_gclastused)

***

### \_gpuData [#_gpudata]

\> **\_gpuData**: `Record`\<`number`, `GPU_DATA`>

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

**`Internal`**

#### Inherited from [#inherited-from-10]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_gpuData`](/jsdoc/pixi-vn/index/classes/ImageSprite#_gpudata)

***

### \_lastUsed [#_lastused]

\> **\_lastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

**`Internal`**

#### Inherited from [#inherited-from-11]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_lastUsed`](/jsdoc/pixi-vn/index/classes/ImageSprite#_lastused)

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-12]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_pivot`](/jsdoc/pixi-vn/index/classes/ImageSprite#_pivot)

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-13]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_position`](/jsdoc/pixi-vn/index/classes/ImageSprite#_position)

***

### \_roundPixels [#_roundpixels]

\> **\_roundPixels**: `0` | `1`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

**`Internal`**

#### Inherited from [#inherited-from-14]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_roundPixels`](/jsdoc/pixi-vn/index/classes/ImageSprite#_roundpixels)

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-15]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_scale`](/jsdoc/pixi-vn/index/classes/ImageSprite#_scale)

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-16]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_skew`](/jsdoc/pixi-vn/index/classes/ImageSprite#_skew)

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-17]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_sx`](/jsdoc/pixi-vn/index/classes/ImageSprite#_sx)

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-18]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_sy`](/jsdoc/pixi-vn/index/classes/ImageSprite#_sy)

***

### \_texture [#_texture]

\> **\_texture**: `Texture`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:157

**`Internal`**

#### Inherited from [#inherited-from-19]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_texture`](/jsdoc/pixi-vn/index/classes/ImageSprite#_texture)

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-20]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_zIndex`](/jsdoc/pixi-vn/index/classes/ImageSprite#_zindex)

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-21]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessible`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-22]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessibleChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-23]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessibleHint`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-24]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-25]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessibleText`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-26]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessibleTitle`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-27]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`accessibleType`](/jsdoc/pixi-vn/index/classes/ImageSprite#accessibletype)

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

**`Internal`**

#### Inherited from [#inherited-from-28]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`allowChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#allowchildren)

***

### autoGarbageCollect [#autogarbagecollect]

\> **autoGarbageCollect**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-29]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/classes/ImageSprite#autogarbagecollect)

***

### batched [#batched]

\> **batched**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:153

**`Internal`**

#### Inherited from [#inherited-from-30]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`batched`](/jsdoc/pixi-vn/index/classes/ImageSprite#batched)

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-7]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-31]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`boundsArea`](/jsdoc/pixi-vn/index/classes/ImageSprite#boundsarea)

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-32]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cacheAsBitmap`](/jsdoc/pixi-vn/index/classes/ImageSprite#cacheasbitmap)

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-8]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-33]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cacheAsTexture`](/jsdoc/pixi-vn/index/classes/ImageSprite#cacheastexture)

***

### canBundle [#canbundle]

\> `readonly` **canBundle**: `true` = `true`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

**`Internal`**

#### Inherited from [#inherited-from-34]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`canBundle`](/jsdoc/pixi-vn/index/classes/ImageSprite#canbundle)

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-9]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-35]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`children`](/jsdoc/pixi-vn/index/classes/ImageSprite#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-10]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-36]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cullable`](/jsdoc/pixi-vn/index/classes/ImageSprite#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-11]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-37]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cullableChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-12]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cullArea`](/jsdoc/pixi-vn/index/classes/ImageSprite#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-13]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-39]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/ImageSprite#cursor)

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-40]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`depthOfChildModified`](/jsdoc/pixi-vn/index/classes/ImageSprite#depthofchildmodified)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-14]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-41]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`destroyed`](/jsdoc/pixi-vn/index/classes/ImageSprite#destroyed)

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-42]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`effects`](/jsdoc/pixi-vn/index/classes/ImageSprite#effects)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-15]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-43]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/ImageSprite#eventmode)

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-16]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-44]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`filterArea`](/jsdoc/pixi-vn/index/classes/ImageSprite#filterarea)

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-45]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`globalDisplayStatus`](/jsdoc/pixi-vn/index/classes/ImageSprite#globaldisplaystatus)

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-46]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`groupAlpha`](/jsdoc/pixi-vn/index/classes/ImageSprite#groupalpha)

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-47]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`groupBlendMode`](/jsdoc/pixi-vn/index/classes/ImageSprite#groupblendmode)

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-48]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`groupColor`](/jsdoc/pixi-vn/index/classes/ImageSprite#groupcolor)

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-49]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`groupColorAlpha`](/jsdoc/pixi-vn/index/classes/ImageSprite#groupcoloralpha)

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-50]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`groupTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#grouptransform)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-17]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-51]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/ImageSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](#eventmode)

#### Example [#example-18]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-52]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/ImageSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-19]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-53]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#interactivechildren)

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-20]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-54]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`isCachedAsTexture`](/jsdoc/pixi-vn/index/classes/ImageSprite#iscachedastexture)

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-21]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-55]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`isInteractive`](/jsdoc/pixi-vn/index/classes/ImageSprite#isinteractive)

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-57]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`layerParentId`](/jsdoc/pixi-vn/index/classes/ImageSprite#layerparentid)

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-58]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`localAlpha`](/jsdoc/pixi-vn/index/classes/ImageSprite#localalpha)

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-59]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`localBlendMode`](/jsdoc/pixi-vn/index/classes/ImageSprite#localblendmode)

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-60]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`localColor`](/jsdoc/pixi-vn/index/classes/ImageSprite#localcolor)

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-61]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`localDisplayStatus`](/jsdoc/pixi-vn/index/classes/ImageSprite#localdisplaystatus)

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-22]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](#worldtransform) For global transform
* [Container#groupTransform](#grouptransform) For render group transform

#### Inherited from [#inherited-from-62]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`localTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#localtransform)

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-23]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-63]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`mask`](/jsdoc/pixi-vn/index/classes/ImageSprite#mask)

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`name`](/jsdoc/pixi-vn/index/classes/ImageSprite#name)

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/ImageSprite#onclick)

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers) = `{}`

Defined in: [src/canvas/components/Sprite.ts:99](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L99)

ListenerExtension

#### Inherited from [#inherited-from-66]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onEventsHandlers`](/jsdoc/pixi-vn/index/classes/ImageSprite#oneventshandlers)

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-67]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/ImageSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-68]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/ImageSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-69]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/ImageSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-70]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-71]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-72]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-73]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmousemove)

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-74]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseout)

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-75]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseover)

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-76]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-77]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/ImageSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-78]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-79]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-80]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-81]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-82]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointermove)

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-83]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerout)

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-84]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerover)

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-85]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointertap)

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-86]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-87]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/ImageSprite#onpointerupoutside)

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-46]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-88]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-89]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/ImageSprite#onrightclick)

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-48]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-90]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/ImageSprite#onrightdown)

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-91]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/ImageSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-92]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/ImageSprite#onrightupoutside)

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-93]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-94]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-95]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-96]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-97]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-56]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-98]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/ImageSprite#ontouchstart)

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-57]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-99]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/ImageSprite#onwheel)

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-58]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-100]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`parent`](/jsdoc/pixi-vn/index/classes/ImageSprite#parent)

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-101]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`parentRenderLayer`](/jsdoc/pixi-vn/index/classes/ImageSprite#parentrenderlayer)

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_VIDEO_ID`

Defined in: [src/canvas/components/VideoSprite.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L55)

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

#### Overrides [#overrides-1]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`pixivnId`](/jsdoc/pixi-vn/index/classes/ImageSprite#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-102]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`relativeGroupTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#relativegrouptransform)

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:151

**`Internal`**

#### Inherited from [#inherited-from-103]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`renderPipeId`](/jsdoc/pixi-vn/index/classes/ImageSprite#renderpipeid)

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-59]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-104]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-4]

`void`

#### Example [#example-60]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](#sortablechildren) For enabling automatic sorting
* [Container#zIndex](#zindex) For setting child order

#### Inherited from [#inherited-from-105]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`sortChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#sortchildren)

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-106]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-61]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-107]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`tabIndex`](/jsdoc/pixi-vn/index/classes/ImageSprite#tabindex)

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-108]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`uid`](/jsdoc/pixi-vn/index/classes/ImageSprite#uid)

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-5]

`void`

#### Example [#example-62]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-109]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`updateCacheTexture`](/jsdoc/pixi-vn/index/classes/ImageSprite#updatecachetexture)

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-110]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`updateTick`](/jsdoc/pixi-vn/index/classes/ImageSprite#updatetick)

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-63]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-111]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-112]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`prefixed`](/jsdoc/pixi-vn/index/classes/ImageSprite#prefixed)

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L140)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Returns [#returns-6]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L128)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Parameters [#parameters-2]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-7]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-113]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`align`](/jsdoc/pixi-vn/index/classes/ImageSprite#align)

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-64]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](#visible) For toggling visibility
* [Container#renderable](#renderable) For render control

##### Returns [#returns-8]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-3]

###### value [#value-1]

`number`

##### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-114]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`alpha`](/jsdoc/pixi-vn/index/classes/ImageSprite#alpha)

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:256

The anchor sets the origin point of the sprite. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

* The default is `(0,0)`, this means the sprite's origin is the top left.
* Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
* Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-65]

```ts
// Center the anchor point
sprite.anchor = 0.5; // Sets both x and y to 0.5
sprite.position.set(400, 300); // Sprite will be centered at this position

// Set specific x/y anchor points
sprite.anchor = {
    x: 1, // Right edge
    y: 0  // Top edge
};

// Using individual coordinates
sprite.anchor.set(0.5, 1); // Center-bottom

// For rotation around center
sprite.anchor.set(0.5);
sprite.rotation = Math.PI / 4; // 45 degrees around center

// For scaling from center
sprite.anchor.set(0.5);
sprite.scale.set(2); // Scales from center point
```

##### Returns [#returns-10]

`ObservablePoint`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:257

##### Parameters [#parameters-4]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-11]

`void`

#### Inherited from [#inherited-from-115]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`anchor`](/jsdoc/pixi-vn/index/classes/ImageSprite#anchor)

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-66]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-116]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`angle`](/jsdoc/pixi-vn/index/classes/ImageSprite#angle)

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-4]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-67]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](#alpha) For transparency
* [Container#tint](#tint) For color adjustments

##### Returns [#returns-14]

`BLEND_MODES`

#### Set Signature [#set-signature-4]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-4]

`BLEND_MODES`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-117]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`blendMode`](/jsdoc/pixi-vn/index/classes/ImageSprite#blendmode)

***

### bounds [#bounds]

#### Get Signature [#get-signature-5]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:74

The local bounds of the view in its own coordinate space.
Bounds are automatically updated when the view's content changes.

##### Example [#example-68]

```ts
// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);
```

##### See [#see-16]

Bounds For bounds operations

##### Returns [#returns-16]

`Bounds`

The rectangular bounds of the view

#### Inherited from [#inherited-from-118]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`bounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#bounds)

***

### currentTime [#currenttime]

#### Get Signature [#get-signature-6]

\> **get** **currentTime**(): `number`

Defined in: [src/canvas/components/VideoSprite.ts:137](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L137)

The current time of the video.

##### Returns [#returns-17]

`number`

#### Set Signature [#set-signature-5]

\> **set** **currentTime**(`value`): `void`

Defined in: [src/canvas/components/VideoSprite.ts:140](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L140)

##### Parameters [#parameters-7]

###### value [#value-5]

`number`

##### Returns [#returns-18]

`void`

***

### duration [#duration]

#### Get Signature [#get-signature-7]

\> **get** **duration**(): `number` | `undefined`

Defined in: [src/canvas/components/VideoSprite.ts:161](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L161)

The duration of the video.

##### Returns [#returns-19]

`number` | `undefined`

***

### filters [#filters]

#### Get Signature [#get-signature-8]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-69]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-17]

Filter For filter base class

##### Returns [#returns-20]

readonly `Filter`\[]

#### Set Signature [#set-signature-6]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-70]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-18]

Filter For filter base class

##### Parameters [#parameters-8]

###### value [#value-6]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-119]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`filters`](/jsdoc/pixi-vn/index/classes/ImageSprite#filters)

***

### haveEmptyTexture [#haveemptytexture]

#### Get Signature [#get-signature-9]

\> **get** **haveEmptyTexture**(): `boolean`

Defined in: [src/canvas/components/ImageSprite.ts:138](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L138)

Check if the texture is empty.

##### Returns [#returns-22]

`boolean`

A boolean that is true if the texture is empty.

#### Inherited from [#inherited-from-120]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`haveEmptyTexture`](/jsdoc/pixi-vn/index/classes/ImageSprite#haveemptytexture)

***

### height [#height]

#### Get Signature [#get-signature-10]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:300

The height of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example [#example-71]

```ts
// Set height directly
sprite.height = 150;
console.log(sprite.scale.y); // Scale adjusted to match height

// Set height while preserving aspect ratio
const ratio = sprite.width / sprite.height;
sprite.height = 200;
sprite.width = 200 * ratio;

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

// Reset to original texture size
sprite.height = sprite.texture.orig.height;
```

##### Returns [#returns-23]

`number`

#### Set Signature [#set-signature-7]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:301

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-72]

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

##### Parameters [#parameters-9]

###### value [#value-7]

`number`

##### Returns [#returns-24]

`void`

#### Inherited from [#inherited-from-121]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`height`](/jsdoc/pixi-vn/index/classes/ImageSprite#height)

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-11]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-25]

`boolean`

#### Inherited from [#inherited-from-122]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`isRenderable`](/jsdoc/pixi-vn/index/classes/ImageSprite#isrenderable)

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-12]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-26]

`boolean`

#### Set Signature [#set-signature-8]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-10]

###### value [#value-8]

`boolean`

##### Returns [#returns-27]

`void`

#### Inherited from [#inherited-from-123]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`isRenderGroup`](/jsdoc/pixi-vn/index/classes/ImageSprite#isrendergroup)

***

### loadIsStarted [#loadisstarted]

#### Get Signature [#get-signature-13]

\> **get** **loadIsStarted**(): `boolean`

Defined in: [src/canvas/components/ImageSprite.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L96)

##### Returns [#returns-28]

`boolean`

#### Inherited from [#inherited-from-124]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`loadIsStarted`](/jsdoc/pixi-vn/index/classes/ImageSprite#loadisstarted)

***

### loop [#loop]

#### Get Signature [#get-signature-14]

\> **get** **loop**(): `boolean`

Defined in: [src/canvas/components/VideoSprite.ts:87](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L87)

Set to true if you want the video to loop.

##### Returns [#returns-29]

`boolean`

#### Set Signature [#set-signature-9]

\> **set** **loop**(`value`): `void`

Defined in: [src/canvas/components/VideoSprite.ts:90](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L90)

##### Parameters [#parameters-11]

###### value [#value-9]

`boolean`

##### Returns [#returns-30]

`void`

***

### memory [#memory]

#### Get Signature [#get-signature-15]

\> **get** **memory**(): [`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)

Defined in: [src/canvas/components/VideoSprite.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L56)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-31]

[`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)

#### Overrides [#overrides-2]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`memory`](/jsdoc/pixi-vn/index/classes/ImageSprite#memory-1)

***

### origin [#origin]

#### Get Signature [#get-signature-16]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-73]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-32]

`ObservablePoint`

#### Set Signature [#set-signature-10]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-12]

###### value [#value-10]

`number` | `PointData`

##### Returns [#returns-33]

`void`

#### Inherited from [#inherited-from-125]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`origin`](/jsdoc/pixi-vn/index/classes/ImageSprite#origin)

***

### paused [#paused]

#### Get Signature [#get-signature-17]

\> **get** **paused**(): `boolean`

Defined in: [src/canvas/components/VideoSprite.ts:101](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L101)

Set to true if you want the video to be paused.

##### Returns [#returns-34]

`boolean`

#### Set Signature [#set-signature-11]

\> **set** **paused**(`value`): `void`

Defined in: [src/canvas/components/VideoSprite.ts:104](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L104)

##### Parameters [#parameters-13]

###### value [#value-11]

`boolean`

##### Returns [#returns-35]

`void`

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-18]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/Sprite.ts:211](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L211)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Returns [#returns-36]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-12]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L199)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-14]

###### value [#value-12]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-37]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-126]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`percentagePosition`](/jsdoc/pixi-vn/index/classes/ImageSprite#percentageposition)

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-19]

\> **get** **percentageX**(): `number`

Defined in: [src/canvas/components/Sprite.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L217)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Returns [#returns-38]

`number`

#### Set Signature [#set-signature-13]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:220](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L220)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-15]

###### \_value [#_value]

`number`

##### Returns [#returns-39]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-127]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`percentageX`](/jsdoc/pixi-vn/index/classes/ImageSprite#percentagex)

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-20]

\> **get** **percentageY**(): `number`

Defined in: [src/canvas/components/Sprite.ts:226](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L226)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Returns [#returns-40]

`number`

#### Set Signature [#set-signature-14]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/canvas/components/Sprite.ts:229](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L229)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

##### Parameters [#parameters-16]

###### \_value [#_value-1]

`number`

##### Returns [#returns-41]

`void`

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-128]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`percentageY`](/jsdoc/pixi-vn/index/classes/ImageSprite#percentagey)

***

### pivot [#pivot]

#### Get Signature [#get-signature-21]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-74]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-42]

`ObservablePoint`

#### Set Signature [#set-signature-15]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-17]

###### value [#value-13]

`number` | `PointData`

##### Returns [#returns-43]

`void`

#### Inherited from [#inherited-from-129]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`pivot`](/jsdoc/pixi-vn/index/classes/ImageSprite#pivot)

***

### position [#position]

#### Get Signature [#get-signature-22]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/canvas/components/Sprite.ts:301](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L301)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-75]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-44]

`ObservablePoint`

#### Set Signature [#set-signature-16]

\> **set** **position**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:304](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L304)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-76]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Parameters [#parameters-18]

###### value [#value-14]

`ObservablePoint`

##### Returns [#returns-45]

`void`

#### Inherited from [#inherited-from-130]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`position`](/jsdoc/pixi-vn/index/classes/ImageSprite#position)

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-23]

\> **get** **positionInfo**(): `object`

Defined in: [src/canvas/components/Sprite.ts:243](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L243)

##### Returns [#returns-46]

`object`

###### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-17]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:253](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L253)

##### Parameters [#parameters-19]

###### value [#value-15]

###### type? [#type-1]

`"pixel"` | `"percentage"` | `"align"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-47]

`void`

#### Inherited from [#inherited-from-131]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`positionInfo`](/jsdoc/pixi-vn/index/classes/ImageSprite#positioninfo)

***

### positionType [#positiontype]

#### Get Signature [#get-signature-24]

\> **get** **positionType**(): `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/Sprite.ts:235](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L235)

##### Returns [#returns-48]

`"pixel"` | `"percentage"` | `"align"`

#### Inherited from [#inherited-from-132]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`positionType`](/jsdoc/pixi-vn/index/classes/ImageSprite#positiontype)

***

### renderable [#renderable]

#### Get Signature [#get-signature-25]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-77]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-19]

* [Container#visible](#visible) For skipping transform updates
* [Container#alpha](#alpha) For transparency

##### Returns [#returns-49]

`boolean`

#### Set Signature [#set-signature-18]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-20]

###### value [#value-16]

`boolean`

##### Returns [#returns-50]

`void`

#### Inherited from [#inherited-from-133]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`renderable`](/jsdoc/pixi-vn/index/classes/ImageSprite#renderable)

***

### rotation [#rotation]

#### Get Signature [#get-signature-26]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-78]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-51]

`number`

#### Set Signature [#set-signature-19]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-21]

###### value [#value-17]

`number`

##### Returns [#returns-52]

`void`

#### Inherited from [#inherited-from-134]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`rotation`](/jsdoc/pixi-vn/index/classes/ImageSprite#rotation)

***

### roundPixels [#roundpixels]

#### Get Signature [#get-signature-27]

\> **get** **roundPixels**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

##### Example [#example-79]

```ts
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
```

##### Default [#default-55]

```ts
false
```

##### Returns [#returns-53]

`boolean`

#### Set Signature [#set-signature-20]

\> **set** **roundPixels**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

##### Parameters [#parameters-22]

###### value [#value-18]

`boolean`

##### Returns [#returns-54]

`void`

#### Inherited from [#inherited-from-135]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`roundPixels`](/jsdoc/pixi-vn/index/classes/ImageSprite#roundpixels)

***

### scale [#scale]

#### Get Signature [#get-signature-28]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-80]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-5]

4.0.0

##### Returns [#returns-55]

`ObservablePoint`

#### Set Signature [#set-signature-21]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-23]

###### value [#value-19]

`string` | `number` | `PointData`

##### Returns [#returns-56]

`void`

#### Inherited from [#inherited-from-136]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`scale`](/jsdoc/pixi-vn/index/classes/ImageSprite#scale)

***

### skew [#skew]

#### Get Signature [#get-signature-29]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-81]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-6]

4.0.0

##### Default [#default-56]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-57]

`ObservablePoint`

#### Set Signature [#set-signature-22]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-24]

###### value [#value-20]

`PointData`

##### Returns [#returns-58]

`void`

#### Inherited from [#inherited-from-137]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`skew`](/jsdoc/pixi-vn/index/classes/ImageSprite#skew)

***

### texture [#texture]

#### Get Signature [#get-signature-30]

\> **get** **texture**(): `Texture`\<`TextureSource`\<`any`>>

Defined in: [src/canvas/components/ImageSprite.ts:130](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L130)

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

##### Example [#example-82]

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

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;
```

##### See [#see-20]

* [Texture](/jsdoc/pixi-vn/index/variables/Texture) For texture creation and management
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading

##### Returns [#returns-59]

`Texture`\<`TextureSource`\<`any`>>

#### Set Signature [#set-signature-23]

\> **set** **texture**(`value`): `void`

Defined in: [src/canvas/components/ImageSprite.ts:126](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L126)

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

##### Example [#example-83]

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

// Update texture
sprite.texture = Texture.from('newSprite.png');

// Use texture from spritesheet
const sheet = await Assets.load('spritesheet.json');
sprite.texture = sheet.textures['frame1.png'];

// Reset to empty texture
sprite.texture = Texture.EMPTY;
```

##### See [#see-21]

* [Texture](/jsdoc/pixi-vn/index/variables/Texture) For texture creation and management
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading

##### Parameters [#parameters-25]

###### value [#value-21]

`Texture`\<`TextureSource`\<`any`>>

##### Returns [#returns-60]

`void`

#### Inherited from [#inherited-from-138]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`texture`](/jsdoc/pixi-vn/index/classes/ImageSprite#texture)

***

### textureAlias [#texturealias-1]

#### Get Signature [#get-signature-31]

\> **get** `protected` **textureAlias**(): `string`

Defined in: [src/canvas/components/ImageSprite.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ImageSprite.ts#L44)

##### Returns [#returns-61]

`string`

#### Inherited from [#inherited-from-139]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`textureAlias`](/jsdoc/pixi-vn/index/classes/ImageSprite#texturealias)

***

### tint [#tint]

#### Get Signature [#get-signature-32]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-84]

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

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

##### Default [#default-57]

```ts
0xFFFFFF
```

##### See [#see-22]

* [Container#alpha](#alpha) For transparency
* [Container#visible](#visible) For visibility control

##### Returns [#returns-62]

`number`

#### Set Signature [#set-signature-24]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-26]

###### value [#value-22]

`ColorSource`

##### Returns [#returns-63]

`void`

#### Inherited from [#inherited-from-140]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`tint`](/jsdoc/pixi-vn/index/classes/ImageSprite#tint)

***

### visible [#visible]

#### Get Signature [#get-signature-33]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-85]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-58]

```ts
true
```

##### See [#see-23]

* [Container#renderable](#renderable) For render-only control
* [Container#alpha](#alpha) For transparency

##### Returns [#returns-64]

`boolean`

#### Set Signature [#set-signature-25]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-27]

###### value [#value-23]

`boolean`

##### Returns [#returns-65]

`void`

#### Inherited from [#inherited-from-141]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`visible`](/jsdoc/pixi-vn/index/classes/ImageSprite#visible)

***

### visualBounds [#visualbounds]

#### Get Signature [#get-signature-34]

\> **get** **visualBounds**(): `BoundsData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:205

The bounds of the sprite, taking into account the texture's trim area.

##### Example [#example-86]

````ts
const texture = new Texture({
    source: new TextureSource({ width: 300, height: 300 }),
    frame: new Rectangle(196, 66, 58, 56),
    trim: new Rectangle(4, 4, 58, 56),
    orig: new Rectangle(0, 0, 64, 64),
    rotate: 2,
});
const sprite = new Sprite(texture);
const visualBounds = sprite.visualBounds;
// console.log(visualBounds); // { minX: -4, maxX: 62, minY: -4, maxY: 60 }

##### Returns

`BoundsData`

#### Inherited from

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`visualBounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#visualbounds)

***

### width

#### Get Signature

> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:278

The width of the sprite, setting this will actually modify the scale to achieve the value set.

##### Example

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

// Set width while preserving aspect ratio
const ratio = sprite.height / sprite.width;
sprite.width = 300;
sprite.height = 300 * ratio;

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

// Reset to original texture size
sprite.width = sprite.texture.orig.width;
````

##### Returns [#returns-66]

`number`

#### Set Signature [#set-signature-26]

> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:279

The width of the Container, setting this will actually modify the scale to achieve the value set.

> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
> as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-87]

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

##### Parameters [#parameters-28]

###### value [#value-24]

`number`

##### Returns [#returns-67]

`void`

#### Inherited from [#inherited-from-142]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`width`](/jsdoc/pixi-vn/index/classes/ImageSprite#width)

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-35]

> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-88]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-24]

[Container#localTransform](#localtransform) For local space transform

##### Returns [#returns-68]

`Matrix`

#### Inherited from [#inherited-from-143]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`worldTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#worldtransform)

***

### x [#x-2]

#### Get Signature [#get-signature-36]

> **get** **x**(): `number`

Defined in: [src/canvas/components/Sprite.ts:309](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L309)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-89]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-69]

`number`

#### Set Signature [#set-signature-27]

> **set** **x**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:312](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L312)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-90]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-29]

###### value [#value-25]

`number`

##### Returns [#returns-70]

`void`

#### Inherited from [#inherited-from-144]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`x`](/jsdoc/pixi-vn/index/classes/ImageSprite#x)

***

### xAlign [#xalign]

#### Get Signature [#get-signature-37]

> **get** **xAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:168](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L168)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Returns [#returns-71]

`number`

#### Set Signature [#set-signature-28]

> **set** **xAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L162)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Parameters [#parameters-30]

###### value [#value-26]

`number`

##### Returns [#returns-72]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-145]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`xAlign`](/jsdoc/pixi-vn/index/classes/ImageSprite#xalign)

***

### y [#y-2]

#### Get Signature [#get-signature-38]

> **get** **y**(): `number`

Defined in: [src/canvas/components/Sprite.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L317)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-91]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-73]

`number`

#### Set Signature [#set-signature-29]

> **set** **y**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:320](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L320)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-92]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-31]

###### value [#value-27]

`number`

##### Returns [#returns-74]

`void`

#### Inherited from [#inherited-from-146]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`y`](/jsdoc/pixi-vn/index/classes/ImageSprite#y)

***

### yAlign [#yalign]

#### Get Signature [#get-signature-39]

> **get** **yAlign**(): `number`

Defined in: [src/canvas/components/Sprite.ts:186](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L186)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Returns [#returns-75]

`number`

#### Set Signature [#set-signature-30]

> **set** **yAlign**(`value`): `void`

Defined in: [src/canvas/components/Sprite.ts:180](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L180)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

##### Parameters [#parameters-32]

###### value [#value-28]

`number`

##### Returns [#returns-76]

`void`

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-147]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`yAlign`](/jsdoc/pixi-vn/index/classes/ImageSprite#yalign)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-33]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-77]

`void`

#### Inherited from [#inherited-from-148]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_getGlobalBoundsRecursive`](/jsdoc/pixi-vn/index/classes/ImageSprite#_getglobalboundsrecursive)

***

### \_onTouch()? [#_ontouch]

> `optional&#x60; **\_onTouch**(`now`): `void`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

#### Parameters [#parameters-34]

##### now [#now]

`number`

#### Returns [#returns-78]

`void`

#### Inherited from [#inherited-from-149]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`_onTouch`](/jsdoc/pixi-vn/index/classes/ImageSprite#_ontouch)

***

### addChild() [#addchild]

> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-35]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-79]

`U`\[`0`]

The first child that was added

#### Example [#example-93]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-25]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-150]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`addChild`](/jsdoc/pixi-vn/index/classes/ImageSprite#addchild)

***

### addChildAt() [#addchildat]

> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-1]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-36]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-80]

`U`

The child that was added

#### Example [#example-94]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-26]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-151]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`addChildAt`](/jsdoc/pixi-vn/index/classes/ImageSprite#addchildat)

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-2]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-37]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-81]

`void`

##### Example [#example-95]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-152]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`addEventListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#addeventlistener)

#### Call Signature [#call-signature-1]

> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-38]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-82]

`void`

##### Inherited from [#inherited-from-153]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`addEventListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#addeventlistener)

***

### addListener() [#addlistener]

> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-3]

##### T [#t]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-39]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-83]

`this`

#### Inherited from [#inherited-from-154]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`addListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#addlistener)

***

### collectRenderables() [#collectrenderables]

> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-40]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-84]

`void`

#### Inherited from [#inherited-from-155]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`collectRenderables`](/jsdoc/pixi-vn/index/classes/ImageSprite#collectrenderables)

***

### collectRenderablesSimple() [#collectrenderablessimple]

> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

**`Internal`**

Collects renderables for the view container.

#### Parameters [#parameters-41]

##### instructionSet [#instructionset-1]

`InstructionSet`

The instruction set to collect renderables for.

##### renderer [#renderer-1]

`Renderer`

The renderer to collect renderables for.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer.

#### Returns [#returns-85]

`void`

#### Inherited from [#inherited-from-156]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`collectRenderablesSimple`](/jsdoc/pixi-vn/index/classes/ImageSprite#collectrenderablessimple)

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-42]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-86]

`void`

#### Inherited from [#inherited-from-157]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`collectRenderablesWithEffects`](/jsdoc/pixi-vn/index/classes/ImageSprite#collectrenderableswitheffects)

***

### containsPoint() [#containspoint]

> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:104

Checks if the object contains the given point in local coordinates.
Uses the view's bounds for hit testing.

#### Parameters [#parameters-43]

##### point [#point]

`PointData`

The point to check in local coordinates

#### Returns [#returns-87]

`boolean`

True if the point is within the view's bounds

#### Example [#example-96]

```ts
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);
```

#### See [#see-27]

* [ViewContainer#bounds](#bounds) For the bounds used in hit testing
* [Container#toLocal](#tolocal) For converting global coordinates to local

#### Inherited from [#inherited-from-158]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`containsPoint`](/jsdoc/pixi-vn/index/classes/ImageSprite#containspoint)

***

### destroy() [#destroy]

> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:222

Destroys this sprite renderable and optionally its texture.

#### Parameters [#parameters-44]

##### options? [#options-3]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-88]

`void`

#### Example [#example-97]

```ts
sprite.destroy();
sprite.destroy(true);
sprite.destroy({ texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-159]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`destroy`](/jsdoc/pixi-vn/index/classes/ImageSprite#destroy)

***

### disableRenderGroup() [#disablerendergroup]

> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-89]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-160]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`disableRenderGroup`](/jsdoc/pixi-vn/index/classes/ImageSprite#disablerendergroup)

***

### dispatchEvent() [#dispatchevent]

> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-45]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-90]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-98]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-161]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`dispatchEvent`](/jsdoc/pixi-vn/index/classes/ImageSprite#dispatchevent)

***

### emit() [#emit]

> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-1]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-46]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents\<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-91]

`boolean`

#### Inherited from [#inherited-from-162]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`emit`](/jsdoc/pixi-vn/index/classes/ImageSprite#emit)

***

### enableRenderGroup() [#enablerendergroup]

> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-92]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-163]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`enableRenderGroup`](/jsdoc/pixi-vn/index/classes/ImageSprite#enablerendergroup)

***

### eventNames() [#eventnames]

> **eventNames**(): (keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-93]

(keyof ContainerEvents\<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-164]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`eventNames`](/jsdoc/pixi-vn/index/classes/ImageSprite#eventnames)

***

### getBounds() [#getbounds]

> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-47]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-2]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-94]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-99]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-28]

* [Container#getLocalBounds](#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-165]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getBounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#getbounds)

***

### getChildAt() [#getchildat]

> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-5]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-48]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-95]

`U`

The child at the given index

#### Example [#example-100]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-29]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-166]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getChildAt`](/jsdoc/pixi-vn/index/classes/ImageSprite#getchildat)

***

### getChildByLabel() [#getchildbylabel]

> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-49]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-96]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-101]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-30]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](#label) For setting labels

#### Inherited from [#inherited-from-167]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getChildByLabel`](/jsdoc/pixi-vn/index/classes/ImageSprite#getchildbylabel)

***

### ~~getChildByName()~~ [#getchildbyname]

> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-50]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-97]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-31]

Container#getChildByLabel

#### Inherited from [#inherited-from-168]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getChildByName`](/jsdoc/pixi-vn/index/classes/ImageSprite#getchildbyname)

***

### getChildIndex() [#getchildindex]

> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-51]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-98]

`number`

The index position of the child container

#### Example [#example-102]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-32]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-169]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getChildIndex`](/jsdoc/pixi-vn/index/classes/ImageSprite#getchildindex)

***

### getChildrenByLabel() [#getchildrenbylabel]

> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-52]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-99]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-103]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-33]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](#label) For setting labels

#### Inherited from [#inherited-from-170]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getChildrenByLabel`](/jsdoc/pixi-vn/index/classes/ImageSprite#getchildrenbylabel)

***

### getFastGlobalBounds() [#getfastglobalbounds]

> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-53]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-3]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-100]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-171]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getFastGlobalBounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#getfastglobalbounds)

***

### getGlobalAlpha() [#getglobalalpha]

> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-54]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-101]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-104]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-172]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getGlobalAlpha`](/jsdoc/pixi-vn/index/classes/ImageSprite#getglobalalpha)

***

### getGlobalPosition() [#getglobalposition]

> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-55]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-102]

`Point`

The updated point

#### Example [#example-105]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-34]

* [Container#toGlobal](#toglobal) For converting specific points
* [Container#toLocal](#tolocal) For converting to local space

#### Inherited from [#inherited-from-173]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getGlobalPosition`](/jsdoc/pixi-vn/index/classes/ImageSprite#getglobalposition)

***

### getGlobalTint() [#getglobaltint]

> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-56]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-103]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-106]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-174]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getGlobalTint`](/jsdoc/pixi-vn/index/classes/ImageSprite#getglobaltint)

***

### getGlobalTransform() [#getglobaltransform]

> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-57]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-104]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-107]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-175]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getGlobalTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#getglobaltransform)

***

### getLocalBounds() [#getlocalbounds]

> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-105]

`Bounds`

The bounding area

#### Example [#example-108]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-35]

* [Container#getBounds](#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-176]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getLocalBounds`](/jsdoc/pixi-vn/index/classes/ImageSprite#getlocalbounds)

***

### getSize() [#getsize]

> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:322

Retrieves the size of the Sprite as a \[Size]Size object based on the texture dimensions and scale.
This is faster than getting width and height separately as it only calculates the bounds once.

#### Parameters [#parameters-58]

##### out? [#out-1]

`Size`

Optional object to store the size in, to avoid allocating a new object

#### Returns [#returns-106]

`Size`

The size of the Sprite

#### Example [#example-109]

```ts
// Basic size retrieval
const sprite = new Sprite(Texture.from('sprite.png'));
const size = sprite.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
sprite.getSize(reuseSize);
```

#### See [#see-36]

* [Sprite#width](/jsdoc/pixi-vn/index/classes/Sprite#width) For getting just the width
* [Sprite#height](/jsdoc/pixi-vn/index/classes/Sprite#height) For getting just the height
* [Sprite#setSize](/jsdoc/pixi-vn/index/classes/Sprite#setsize) For setting both width and height

#### Inherited from [#inherited-from-177]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`getSize`](/jsdoc/pixi-vn/index/classes/ImageSprite#getsize)

***

### listenerCount() [#listenercount]

> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-59]

##### event [#event-2]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-107]

`number`

#### Inherited from [#inherited-from-178]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`listenerCount`](/jsdoc/pixi-vn/index/classes/ImageSprite#listenercount)

***

### listeners() [#listeners]

> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-2]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-60]

##### event [#event-3]

`T`

#### Returns [#returns-108]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-179]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`listeners`](/jsdoc/pixi-vn/index/classes/ImageSprite#listeners)

***

### load() [#load]

> **load**(): `Promise`\<`void`>

Defined in: [src/canvas/components/VideoSprite.ts:76](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L76)

Load the image from the link and set the texture of the sprite.

#### Returns [#returns-109]

`Promise`\<`void`>

A promise that resolves when the image is loaded.

#### Overrides [#overrides-3]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load)

***

### off() [#off]

> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-7]

##### T [#t-3]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-61]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-110]

`this`

#### Inherited from [#inherited-from-180]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`off`](/jsdoc/pixi-vn/index/classes/ImageSprite#off)

***

### on() [#on]

> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/canvas/components/Sprite.ts:100](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L100)

Add a listener for a given event.

#### Type Parameters [#type-parameters-8]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents\<ContainerChild>

#### Parameters [#parameters-62]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-111]

`this`

#### Inherited from [#inherited-from-181]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`on`](/jsdoc/pixi-vn/index/classes/ImageSprite#on)

***

### once() [#once-1]

> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-5]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-63]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-112]

`this`

#### Inherited from [#inherited-from-182]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`once`](/jsdoc/pixi-vn/index/classes/ImageSprite#once)

***

### pause() [#pause]

> **pause**(): `void`

Defined in: [src/canvas/components/VideoSprite.ts:114](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L114)

Pause the video.

#### Returns [#returns-113]

`void`

***

### play() [#play]

> **play**(): `void`

Defined in: [src/canvas/components/VideoSprite.ts:123](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L123)

Play the video.

#### Returns [#returns-114]

`void`

***

### reloadPosition() [#reloadposition]

> `protected` **reloadPosition**(): `void`

Defined in: [src/canvas/components/Sprite.ts:262](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Sprite.ts#L262)

#### Returns [#returns-115]

`void`

#### Inherited from [#inherited-from-183]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`reloadPosition`](/jsdoc/pixi-vn/index/classes/ImageSprite#reloadposition)

***

### removeAllListeners() [#removealllisteners]

> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-64]

##### event? [#event-7]

keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Returns [#returns-116]

`this`

#### Inherited from [#inherited-from-184]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeAllListeners`](/jsdoc/pixi-vn/index/classes/ImageSprite#removealllisteners)

***

### removeChild() [#removechild]

> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-10]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-65]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-117]

`U`\[`0`]

The first child that was removed

#### Example [#example-110]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-37]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-185]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeChild`](/jsdoc/pixi-vn/index/classes/ImageSprite#removechild)

***

### removeChildAt() [#removechildat]

> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-11]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-66]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-118]

`U`

The child that was removed

#### Example [#example-111]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-38]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-186]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeChildAt`](/jsdoc/pixi-vn/index/classes/ImageSprite#removechildat)

***

### removeChildren() [#removechildren]

> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-67]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-119]

`ContainerChild`\[]

List of removed children

#### Example [#example-112]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-39]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-187]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#removechildren)

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-12]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-68]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-4]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-120]

`void`

##### Inherited from [#inherited-from-188]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#removeeventlistener)

#### Call Signature [#call-signature-3]

> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-69]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-5]

`RemoveListenerOptions`

##### Returns [#returns-121]

`void`

##### Inherited from [#inherited-from-189]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeEventListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#removeeventlistener)

***

### removeFromParent() [#removefromparent]

> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-122]

`void`

#### Example [#example-113]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-40]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-190]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeFromParent`](/jsdoc/pixi-vn/index/classes/ImageSprite#removefromparent)

***

### removeListener() [#removelistener]

> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-13]

##### T [#t-6]

`T` *extends* keyof ContainerEvents\<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-70]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-123]

`this`

#### Inherited from [#inherited-from-191]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`removeListener`](/jsdoc/pixi-vn/index/classes/ImageSprite#removelistener)

***

### reparentChild() [#reparentchild]

> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-14]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-71]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-124]

`U`\[`0`]

The first child that was reparented

#### Example [#example-114]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-41]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-192]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`reparentChild`](/jsdoc/pixi-vn/index/classes/ImageSprite#reparentchild)

***

### reparentChildAt() [#reparentchildat]

> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-72]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-125]

`U`

The reparented child

#### Example [#example-115]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-42]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-193]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`reparentChildAt`](/jsdoc/pixi-vn/index/classes/ImageSprite#reparentchildat)

***

### replaceChild() [#replacechild]

> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-16]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-73]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-126]

`void`

#### Inherited from [#inherited-from-194]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`replaceChild`](/jsdoc/pixi-vn/index/classes/ImageSprite#replacechild)

***

### restart() [#restart]

> **restart**(): `void`

Defined in: [src/canvas/components/VideoSprite.ts:154](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L154)

Restart the video.

#### Returns [#returns-127]

`void`

***

### setChildIndex() [#setchildindex]

> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-74]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-128]

`void`

#### Example [#example-116]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-43]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-195]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`setChildIndex`](/jsdoc/pixi-vn/index/classes/ImageSprite#setchildindex)

***

### setFromMatrix() [#setfrommatrix]

> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-75]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-129]

`void`

#### Example [#example-117]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-44]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-196]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`setFromMatrix`](/jsdoc/pixi-vn/index/classes/ImageSprite#setfrommatrix)

***

### setMask() [#setmask]

> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-76]

##### options [#options-6]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-130]

`void`

#### Example [#example-118]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-45]

* [Container#mask](#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-197]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`setMask`](/jsdoc/pixi-vn/index/classes/ImageSprite#setmask)

***

### setMemory() [#setmemory]

> **setMemory**(`value`): `Promise`\<`void`>

Defined in: [src/canvas/components/VideoSprite.ts:65](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L65)

This method set the memory of the canvas element.

#### Parameters [#parameters-77]

##### value [#value-29]

[`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)

#### Returns [#returns-131]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Overrides [#overrides-4]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`setMemory`](/jsdoc/pixi-vn/index/classes/ImageSprite#setmemory)

***

### setSize() [#setsize]

> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:353

Sets the size of the Sprite to the specified width and height.
This is faster than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-78]

##### value [#value-30]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a Size object

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided

#### Returns [#returns-132]

`void`

#### Example [#example-119]

```ts
// Basic size setting
const sprite = new Sprite(Texture.from('sprite.png'));
sprite.setSize(100, 200); // Width: 100, Height: 200

// Set uniform size
sprite.setSize(100); // Sets both width and height to 100

// Set size with object
sprite.setSize({
    width: 200,
    height: 300
});

// Reset to texture size
sprite.setSize(
    sprite.texture.orig.width,
    sprite.texture.orig.height
);
```

#### See [#see-46]

* [Sprite#width](/jsdoc/pixi-vn/index/classes/Sprite#width) For setting width only
* [Sprite#height](/jsdoc/pixi-vn/index/classes/Sprite#height) For setting height only
* [Sprite#texture](/jsdoc/pixi-vn/index/classes/Sprite#texture) For the source dimensions

#### Inherited from [#inherited-from-198]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`setSize`](/jsdoc/pixi-vn/index/classes/ImageSprite#setsize)

***

### swapChildren() [#swapchildren]

> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-17]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-79]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-133]

`void`

#### Example [#example-120]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-47]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-199]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`swapChildren`](/jsdoc/pixi-vn/index/classes/ImageSprite#swapchildren)

***

### toGlobal() [#toglobal]

> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-18]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-80]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-2]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-134]

`P`

The global position

#### Example [#example-121]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-48]

* [Container#toLocal](#tolocal) For reverse conversion
* [Container#getGlobalPosition](#getglobalposition) For container position

#### Inherited from [#inherited-from-200]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`toGlobal`](/jsdoc/pixi-vn/index/classes/ImageSprite#toglobal)

***

### toLocal() [#tolocal]

> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-19]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-81]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-3]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-135]

`P`

A point object representing the position in local space

#### Example [#example-122]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-49]

* [Container#toGlobal](#toglobal) For reverse conversion
* [Container#getGlobalPosition](#getglobalposition) For container position

#### Inherited from [#inherited-from-201]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`toLocal`](/jsdoc/pixi-vn/index/classes/ImageSprite#tolocal)

***

### unload() [#unload]

> **unload**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:110

Unloads the GPU data from the view.

#### Returns [#returns-136]

`void`

#### Inherited from [#inherited-from-202]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`unload`](/jsdoc/pixi-vn/index/classes/ImageSprite#unload)

***

### updateLocalTransform() [#updatelocaltransform]

> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-137]

`void`

#### Inherited from [#inherited-from-203]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`updateLocalTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#updatelocaltransform)

***

### updateTransform() [#updatetransform]

> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-82]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-138]

`this`

This container, for chaining

#### Example [#example-123]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-50]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface#position) For direct position access

#### Inherited from [#inherited-from-204]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`updateTransform`](/jsdoc/pixi-vn/index/classes/ImageSprite#updatetransform)

***

### from() [#from-1]

> `static` **from**(`source`, `skipCache?`): `VideoSprite`

Defined in: [src/canvas/components/VideoSprite.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/VideoSprite.ts#L69)

Creates a new sprite based on a source texture, image, video, or canvas element.
This is a convenience method that automatically creates and manages textures.

#### Parameters [#parameters-83]

##### source [#source]

`Texture`\<`TextureSource`\<`any`>> | [`TextureSourceLike`](/jsdoc/pixi-vn/index/type-aliases/TextureSourceLike)

The source to create the sprite from. Can be a path to an image, a texture,
or any valid texture source (canvas, video, etc.)

##### skipCache? [#skipcache]

`boolean`

Whether to skip adding to the texture cache when creating a new texture

#### Returns [#returns-139]

`VideoSprite`

A new sprite based on the source

#### Example [#example-124]

```ts
// Create from path or URL
const sprite = Sprite.from('assets/image.png');

// Create from existing texture
const sprite = Sprite.from(texture);

// Create from canvas
const canvas = document.createElement('canvas');
const sprite = Sprite.from(canvas, true); // Skip caching new texture
```

#### See [#see-51]

* Texture.from For texture creation details
* [Assets](/jsdoc/pixi-vn/index/variables/Assets) For asset loading and management

#### Overrides [#overrides-5]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`from`](/jsdoc/pixi-vn/index/classes/ImageSprite#from)

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-84]

##### source [#source-1]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-140]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-205]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite).[`mixin`](/jsdoc/pixi-vn/index/classes/ImageSprite#mixin)


# Function: Pause() (deprecated) (/jsdoc/pixi-vn/index/functions/Pause)



\> **Pause**(`duration`): [`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType)

Defined in: [src/constants.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/constants.ts#L14)

Pause the tickers for a duration.

## Parameters [#parameters]

### duration [#duration]

`number`

Duration in seconds

## Returns [#returns]

[`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType)

The pause object

## Deprecated [#deprecated]


# Function: addImage() (/jsdoc/pixi-vn/index/functions/addImage)



\> **addImage**(`alias`, `imageUrl?`, `options?`): [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)

Defined in: [src/canvas/functions/image-utility.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/image-utility.ts#L25)

Add a image in the canvas.
Is the same that [showImage](/jsdoc/pixi-vn/index/functions/showImage), but the image is not shown.
If you want to show the image, then you need to use the function [ImageSprite.load](/jsdoc/pixi-vn/index/classes/ImageSprite#load).

## Parameters [#parameters]

### alias [#alias]

`string`

is the unique alias of the image. You can use this alias to refer to this image

### imageUrl? [#imageurl]

`string`

The url of the image. If you have initialized the "asset matrix", you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL.

### options? [#options]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)

The options of the image.

## Returns [#returns]

[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)

This function returns an [ImageSprite](/jsdoc/pixi-vn/index/classes/ImageSprite) that you can use to manipulate the component.

## Throws [#throws]

when `imageUrl` is not provided and `alias` is not registered in the asset cache.

## Example [#example]

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


# Function: addImageCointainer() (/jsdoc/pixi-vn/index/functions/addImageCointainer)



\> **addImageCointainer**(`alias`, `imageUrls`, `options?`): [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer)

Defined in: [src/canvas/functions/image-container-utility.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/image-container-utility.ts#L19)

Add a list of images in the container, after that, the images are added to the canvas.
Is the same that [showImageContainer](/jsdoc/pixi-vn/index/functions/showImageContainer), but the image is not shown.
If you want to show the container, then you need to use the function [()](/jsdoc/pixi-vn/index/classes/ImageSprite#load).

## Parameters [#parameters]

### alias [#alias]

`string`

is the unique alias of the container. You can use this alias to refer to this container

### imageUrls [#imageurls]

`string`\[]

is the url of the image. If you don't provide the url, then the alias is used as the url.

### options? [#options]

[`ImageContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>>

The options of the container.

## Returns [#returns]

[`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer)

This function returns an [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) that you can use to manipulate the component.

## Example [#example]

```ts
let bunny = addImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"])
await bunny.load()
```


# Function: addListenerHandler() (/jsdoc/pixi-vn/index/functions/addListenerHandler)



\> **addListenerHandler**\<`T`>(`event`, `element`, `fn`): `boolean`

Defined in: [src/canvas/components/ListenerExtension.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L52)

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* [`ListenerExtension`](/jsdoc/pixi-vn/index/interfaces/ListenerExtension)

## Parameters [#parameters]

### event [#event]

`string` | `symbol`

### element [#element]

`T`

### fn [#fn]

(...`args`) => `unknown`

## Returns [#returns]

`boolean`


# Function: addVideo() (/jsdoc/pixi-vn/index/functions/addVideo)



\> **addVideo**(`alias`, `videoUrl?`, `options?`): [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite)

Defined in: [src/canvas/functions/video-utility.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/video-utility.ts#L25)

Add a video in the canvas.
Is the same that [showVideo](/jsdoc/pixi-vn/index/functions/showVideo), but the video is not shown.
If you want to show the video, then you need to use the function [()](/jsdoc/pixi-vn/index/classes/VideoSprite#load).

## Parameters [#parameters]

### alias [#alias]

`string`

is the unique alias of the video. You can use this alias to refer to this video

### videoUrl? [#videourl]

`string`

is the url of the video. If you don't provide the url, then the alias is used as the url.

### options? [#options]

[`VideoSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)

The options of the video.

## Returns [#returns]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite)

This function returns an [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) that you can use to manipulate the component.

## Throws [#throws]

when `videoUrl` is not provided and `alias` is not registered in the asset cache.

## Example [#example]

```ts
let video1 = addVideo("video1", "https://pixijs.com/assets/video1.mp4")
await video1.load()
Assets.add({ alias: "video2", src: "https://pixijs.com/assets/video2.png" })
let video2 = addVideo("video2")
await video2.load()
```


# Function: analizePositionsExtensionProps() (/jsdoc/pixi-vn/index/functions/analizePositionsExtensionProps)



\> **analizePositionsExtensionProps**\<`T`>(`props?`): `T` | `undefined`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:131](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L131)

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* [`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Parameters [#parameters]

### props? [#props]

`T`

## Returns [#returns]

`T` | `undefined`


# Function: canvasComponentDecorator() (/jsdoc/pixi-vn/index/functions/canvasComponentDecorator)



\> **canvasComponentDecorator**\<`M`, `T`>(`options?`): (`target`) => `void`

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L53)

Is a decorator that register a canvas component in the game.

## Type Parameters [#type-parameters]

### M [#m]

`M` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

### T [#t]

`T` *extends* *typeof* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)

## Parameters [#parameters]

### options? [#options]

Options for the canvas component.

#### copyProperty? [#copyproperty]

(`component`, `memory`) => `void` | `Promise`\<`void`>

Function to copy the properties of the canvas component. This function is used when to copy the properties of the canvas component into another instance of the same canvas component.
This function is used into [canvas.copyCanvasElementProperty](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#copycanvaselementproperty) to copy the properties of the canvas component.

#### getInstance? [#getinstance]

(`canvasClass`, `memory`) => [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`> | `Promise`\<[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`>>

Function to get the instance of the canvas component. If not set, it will use the default constructor of the class.
This function is used into [canvas.restore](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#restore) to restore the canvas.

#### name? [#name]

`string`

The id used by Pixi’VN to refer to this class (must be unique). If you don't pass the id, the class name will be used as the id.

**Default**

```ts
target.name
```

## Returns [#returns]

(`target`) => `void`

## Example [#example]

```ts title="canvas/components/AlienTinting.ts"
const ALIEN_TINTING_TEST_ID = "AlienTintingTest";
@canvasComponentDecorator({
    name: ALIEN_TINTING_TEST_ID,
})
class AlienTintingTest extends Sprite<IAlienTintingMemory> {
    readonly pixivnId: string = CANVAS_SPINE_ID;
    override get memory() {
        // ...
    }
    override async setMemory(memory: IAlienTintingMemory) {
        // ...
    }
    // ...
}
```


# Function: createExportableElement() (/jsdoc/pixi-vn/index/functions/createExportableElement)



\> **createExportableElement**\<`T`>(`element`): `T`

Defined in: [src/utils/export-utility.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/utils/export-utility.ts#L10)

This function is used to create a deep copy of the element

## Type Parameters [#type-parameters]

### T [#t]

`T`

## Parameters [#parameters]

### element [#element]

`T`

The element to be copied

## Returns [#returns]

`T`

The copied element

## Throws [#throws]

when the element is not JSON serializable (e.g. contains functions or class instances).


# Function: drawCanvasErrorHandler() (/jsdoc/pixi-vn/index/functions/drawCanvasErrorHandler)



\> **drawCanvasErrorHandler**(): [`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)

Defined in: [src/canvas/functions/error-handler.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/error-handler.ts#L12)

Canvas error handler: when a `PixiError` contains `canvasElementInfo`,
draw a simple `ErrorGraphics` placeholder on the canvas so the scene
remains visible and debuggable.

## Returns [#returns]

[`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)


# Function: eventDecorator() (/jsdoc/pixi-vn/index/functions/eventDecorator)



\> **eventDecorator**(`name?`): (`_target`, `propertyKey`, `descriptor`) => `void`

Defined in: [src/canvas/decorators/event-decorator.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L29)

Is a decorator that register a event in the game.
Is a required decorator for use the event in the game.
Thanks to this decoration the game has the possibility of updating the events to the latest modification and saving the game.

## Parameters [#parameters]

### name? [#name]

`string`

The id used by Pixi’VN to refer to this function (must be unique). If you don't pass the id, the function name will be used as the id.

## Returns [#returns]

(`_target`, `propertyKey`, `descriptor`) => `void`

## Example [#example]

```ts
export class Events {
    \@eventDecorator()
    static eventExample(event: FederatedEvent, component: Sprite) {
        // event code here
    }
}

sprite.on("pointerdown", Events.eventExample);
```


# Function: getTexture() (/jsdoc/pixi-vn/index/functions/getTexture)



\> **getTexture**(`textureAlias?`): `Promise`\<`Texture`\<`TextureSource`\<`any`>> | `undefined`>

Defined in: [src/canvas/functions/texture-utility.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/texture-utility.ts#L12)

Get a texture from a url.

## Parameters [#parameters]

### textureAlias? [#texturealias]

`string`

is the url of the file.

## Returns [#returns]

`Promise`\<`Texture`\<`TextureSource`\<`any`>> | `undefined`>

the texture of the image or video, or `undefined` when `textureAlias` is the `"EMPTY"` sentinel value.

## Throws [#throws]

when the alias is missing, the asset is not found in the cache/network, or the loaded resource is not a `Texture`.


# Function: moveIn() (/jsdoc/pixi-vn/index/functions/moveIn)



\> **moveIn**(`alias`, `component?`, `props?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-transition.ts:355](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L355)

Show a image in the canvas with a move effect. The image is moved from outside the canvas to the x and y position of the image.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### component? [#component]

`TComponent`

The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) is added to the canvas.
If imageUrl is an array, then the [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) is added to the canvas.
If you don't provide the component, then the alias is used as the url.

### props? [#props]

[`MoveInOutProps`](/jsdoc/pixi-vn/index/interfaces/MoveInOutProps) & `object` = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>

A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.


# Function: moveOut() (/jsdoc/pixi-vn/index/functions/moveOut)



\> **moveOut**(`alias`, `props?`, `priority?`): `string`\[] | `undefined`

Defined in: [src/canvas/functions/canvas-transition.ts:484](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L484)

Remove a image from the canvas with a move effect. The image is moved from the x and y position of the image to outside the canvas.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### props? [#props]

[`MoveInOutProps`](/jsdoc/pixi-vn/index/interfaces/MoveInOutProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`string`\[] | `undefined`

The ids of the tickers that are used in the effect.


# Function: newChoiceOption() (/jsdoc/pixi-vn/index/functions/newChoiceOption)



\> **newChoiceOption**\<`T`>(`text`, `label`, `props`, `options?`): [`ChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/ChoiceOptionInterface)

Defined in: [src/narration/classes/ChoiceMenuOption.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/ChoiceMenuOption.ts#L29)

Function to create a new choice menu option.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* [`StorageObjectType`](/jsdoc/pixi-vn/index/type-aliases/StorageObjectType)

## Parameters [#parameters]

### text [#text]

`string` | `string`\[]

The text displayed in the choice menu.

### label [#label]

`string` | [`Label`](/jsdoc/pixi-vn/index/classes/Label)\<`T`> | [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, `T`, `number`>

The `label` to call when the player selects the option.

### props [#props]

`T`

The properties passed to the `label`. If the `label` does not require parameters, pass an empty object `{}`.

### options? [#options]

`ChoiceMenuOptionOptions`

An object with the `choice`'s options

## Returns [#returns]

[`ChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/ChoiceOptionInterface)

## Example [#example]

```ts
newChoiceOption("Hello", HelloLabel, {})
```


# Function: newCloseChoiceOption() (/jsdoc/pixi-vn/index/functions/newCloseChoiceOption)



\> **newCloseChoiceOption**(`text`, `options?`): [`CloseChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/CloseChoiceOptionInterface)

Defined in: [src/narration/classes/CloseChoiceOption.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/classes/CloseChoiceOption.ts#L24)

In addition to `newChoiceOption`, you can use `newCloseChoiceOption` to create a closing option.
This closes the choice menu and continues with the `steps`, without calling any `label`.

## Parameters [#parameters]

### text [#text]

`string` | `string`\[]

The text displayed in the choice menu.

### options? [#options]

`ChoiceMenuOptionCloseOptions`

An object with the `choice`'s options

## Returns [#returns]

[`CloseChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/CloseChoiceOptionInterface)

## Example [#example]

```ts
newCloseChoiceOption("Return")
```


# Function: newLabel() (/jsdoc/pixi-vn/index/functions/newLabel)



\> **newLabel**\<`T`>(`id`, `steps`, `props?`): [`Label`](/jsdoc/pixi-vn/index/classes/Label)\<`T`>

Defined in: [src/narration/decorators/newLabel.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/newLabel.ts#L14)

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

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = \{ }

## Parameters [#parameters]

### id [#id]

`string`

A unique identifier. Used to reference the `label` in the game (must be unique).

### steps [#steps]

[`LabelSteps`](/jsdoc/pixi-vn/index/type-aliases/LabelSteps)\<`T`> | (() => [`LabelSteps`](/jsdoc/pixi-vn/index/type-aliases/LabelSteps)\<`T`>)

An array of functions to be executed in order. To create a dynamic array.

### props? [#props]

[`LabelProps`](/jsdoc/pixi-vn/index/interfaces/LabelProps)\<[`Label`](/jsdoc/pixi-vn/index/classes/Label)\<`T`>, `number`>

An object with the `label`'s options

## Returns [#returns]

[`Label`](/jsdoc/pixi-vn/index/classes/Label)\<`T`>

The created label


# Function: pushIn() (/jsdoc/pixi-vn/index/functions/pushIn)



\> **pushIn**(`alias`, `component?`, `props?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-transition.ts:784](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L784)

Show a image in the canvas with a push effect. The new image is pushed in from the inside of the canvas and the old image is pushed out to the outside of the canvas.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### component? [#component]

`TComponent`

The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) is added to the canvas.
If imageUrl is an array, then the [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) is added to the canvas.
If you don't provide the component, then the alias is used as the url.

### props? [#props]

[`PushInOutProps`](/jsdoc/pixi-vn/index/interfaces/PushInOutProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>

A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.


# Function: pushOut() (/jsdoc/pixi-vn/index/functions/pushOut)



\> **pushOut**(`alias`, `props?`, `priority?`): `string`\[] | `undefined`

Defined in: [src/canvas/functions/canvas-transition.ts:899](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L899)

Remove a image from the canvas with a push effect. The image is pushed out to the outside of the canvas.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### props? [#props]

[`PushInOutProps`](/jsdoc/pixi-vn/index/interfaces/PushInOutProps) = `...`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`string`\[] | `undefined`

The ids of the tickers that are used in the effect.


# Function: removeWithDissolve() (/jsdoc/pixi-vn/index/functions/removeWithDissolve)



\> **removeWithDissolve**(`alias`, `props?`, `priority?`): `string`\[] | `undefined`

Defined in: [src/canvas/functions/canvas-transition.ts:198](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L198)

Remove a image from the canvas with a disolve effect.
Disolve effect is a effect that the image is removed with a fade out.
This function is equivalent to [removeWithFade](/jsdoc/pixi-vn/index/functions/removeWithFade).

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### props? [#props]

[`ShowWithDissolveTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`string`\[] | `undefined`

The ids of the tickers that are used in the effect.


# Function: removeWithFade() (/jsdoc/pixi-vn/index/functions/removeWithFade)



\> **removeWithFade**(`alias`, `props?`, `priority?`): `string`\[] | `undefined`

Defined in: [src/canvas/functions/canvas-transition.ts:336](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L336)

Remove a image from the canvas with a fade effect.
Fade effect is a effect that the image is removed with a fade out.
This function is equivalent to [removeWithDissolve](/jsdoc/pixi-vn/index/functions/removeWithDissolve).

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### props? [#props]

[`ShowWithFadeTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`string`\[] | `undefined`

The ids of the tickers that are used in the effect.


# Function: setMemoryContainer() (/jsdoc/pixi-vn/index/functions/setMemoryContainer)



\> **setMemoryContainer**\<`T`>(`element`, `memory`, `options?`): `Promise`\<`void`>

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:86](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L86)

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `Container`\<`ContainerChild`>

## Parameters [#parameters]

### element [#element]

`Container`\<`ContainerChild`> | `T`

### memory [#memory]

\{ } | `ContainerOptions`\<`ContainerChild`>

### options? [#options]

#### end? [#end]

() => `void` | `Promise`\<`void`>

#### ignoreScale? [#ignorescale]

`boolean`

## Returns [#returns]

`Promise`\<`void`>


# Function: shakeEffect() (/jsdoc/pixi-vn/index/functions/shakeEffect)



\> **shakeEffect**(`alias`, `options?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-effect.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-effect.ts#L13)

Shake the canvas element.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The alias to identify the component.

### options? [#options]

[`ShakeEffectProps`](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps) = `{}`

Animation options, matching the `options` of animate function.

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>


# Function: showImage() (/jsdoc/pixi-vn/index/functions/showImage)



\> **showImage**(`alias`, `imageUrl?`, `options?`): `Promise`\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>>

Defined in: [src/canvas/functions/image-utility.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/image-utility.ts#L69)

Add and show a image in the canvas. This function is a combination of [addImage](/jsdoc/pixi-vn/index/functions/addImage).

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### imageUrl? [#imageurl]

`string`

The url of the image. If you have initialized the "asset matrix", you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL.

### options? [#options]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)

The options of the image.

## Returns [#returns]

`Promise`\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>>

This function returns an [ImageSprite](/jsdoc/pixi-vn/index/classes/ImageSprite) that you can use to manipulate the component.

## Throws [#throws]

when `imageUrl` is not provided and `alias` is not registered in the asset cache.

## Example [#example]

```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")
```


# Function: showImageContainer() (/jsdoc/pixi-vn/index/functions/showImageContainer)



\> **showImageContainer**(`alias`, `imageUrls`, `options?`): `Promise`\<[`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer)>

Defined in: [src/canvas/functions/image-container-utility.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/image-container-utility.ts#L44)

Add a list of images in the container, after that, the images are added and shown in the canvas.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the container. You can use this alias to refer to this container

### imageUrls [#imageurls]

`string`\[]

The url of the image.

### options? [#options]

[`ImageContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>>

The options of the container.

## Returns [#returns]

`Promise`\<[`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer)>

This function returns an [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) that you can use to manipulate the component.

## Example [#example]

```ts
let bunny = showImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"])
```


# Function: showText() (/jsdoc/pixi-vn/index/functions/showText)



\> **showText**(`alias`, `text`, `options?`): [`Text`](/jsdoc/pixi-vn/index/classes/Text)

Defined in: [src/canvas/functions/text-utility.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/text-utility.ts#L14)

Add and show a text in the canvas.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the text. You can use this alias to refer to this text.

### text [#text]

`string`

### options? [#options]

`Omit`\<[`TextOptions`](/jsdoc/pixi-vn/index/interfaces/TextOptions), `"text"`>

The options of the text.

## Returns [#returns]

[`Text`](/jsdoc/pixi-vn/index/classes/Text)

This function returns an [Text](/jsdoc/pixi-vn/index/classes/Text) that you can use to manipulate the component.

## Example [#example]

```ts
let text = showText("text", "Hello World", { fontSize: 24, fill: "white" })
```


# Function: showVideo() (/jsdoc/pixi-vn/index/functions/showVideo)



\> **showVideo**(`alias`, `videoUrl?`, `options?`): `Promise`\<[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite)>

Defined in: [src/canvas/functions/video-utility.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/video-utility.ts#L69)

Add and show a video in the canvas. This function is a combination of [addVideo](/jsdoc/pixi-vn/index/functions/addVideo).

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the video. You can use this alias to refer to this video

### videoUrl? [#videourl]

`string`

The url of the video.

### options? [#options]

[`VideoSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)

The options of the video.

## Returns [#returns]

`Promise`\<[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite)>

This function returns an [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) that you can use to manipulate the component.

## Throws [#throws]

when `videoUrl` is not provided and `alias` is not registered in the asset cache.

## Example [#example]

```ts
let video1 = showVideo("video1", "https://pixijs.com/assets/video1.mp4")
Assets.add({ alias: "video2", src: "https://pixijs.com/assets/video2.png" })
let video2 = showVideo("video2")
```


# Function: showWithDissolve() (/jsdoc/pixi-vn/index/functions/showWithDissolve)



\> **showWithDissolve**(`alias`, `component?`, `props?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-transition.ts:116](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L116)

Show a image in the canvas with a disolve effect.
Disolve effect is a effect that the image is shown with a fade in.
If exist a image with the same alias, then the image is replaced and the first image is removed after the effect is done.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### component? [#component]

`TComponent`

The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) is added to the canvas.
If imageUrl is an array, then the [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) is added to the canvas.
If you don't provide the component, then the alias is used as the url.

### props? [#props]

[`ShowWithDissolveTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>

A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.


# Function: showWithFade() (/jsdoc/pixi-vn/index/functions/showWithFade)



\> **showWithFade**(`alias`, `component?`, `props?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-transition.ts:243](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L243)

Show a image in the canvas with a fade effect.
Fade effect is a effect that the image is shown with a fade in.
If exist a image with the same alias, the existing image is removed with a fade transition, and after the effect is done, the new image is shown with a fade transition.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### component? [#component]

`TComponent`

The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) is added to the canvas.
If imageUrl is an array, then the [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) is added to the canvas.
If you don't provide the component, then the alias is used as the url.

### props? [#props]

[`ShowWithFadeTransitionProps`](/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>

A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.


# Function: tickerDecorator() (/jsdoc/pixi-vn/index/functions/tickerDecorator)



\> **tickerDecorator**(`name?`): (`target`) => `void`

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L32)

Is a decorator that register a ticker in the game.
Is a required decorator for use the ticker in the game.
Thanks to this decoration the game has the possibility of updating the tickers to the latest modification and saving the game.

## Parameters [#parameters]

### name? [#name]

`string`

is th identifier of the label, by default is the name of the class

## Returns [#returns]

(`target`) => `void`


# Function: zoomIn() (/jsdoc/pixi-vn/index/functions/zoomIn)



\> **zoomIn**(`alias`, `component?`, `props?`, `priority?`): `Promise`\<`string`\[] | `undefined`>

Defined in: [src/canvas/functions/canvas-transition.ts:549](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L549)

Show a image in the canvas with a zoom effect. The image is zoomed in from the center of the canvas.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### component? [#component]

`TComponent`

The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the [VideoSprite](/jsdoc/pixi-vn/index/classes/VideoSprite) is added to the canvas.
If imageUrl is an array, then the [ImageContainer](/jsdoc/pixi-vn/index/classes/ImageContainer) is added to the canvas.
If you don't provide the component, then the alias is used as the url.

### props? [#props]

[`ZoomInOutProps`](/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps) & `object` = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`Promise`\<`string`\[] | `undefined`>

A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.


# Function: zoomOut() (/jsdoc/pixi-vn/index/functions/zoomOut)



\> **zoomOut**(`alias`, `props?`, `priority?`): `string`\[] | `undefined`

Defined in: [src/canvas/functions/canvas-transition.ts:701](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-transition.ts#L701)

Remove a image from the canvas with a zoom effect. The image is zoomed out to the center of the canvas.
If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.

## Parameters [#parameters]

### alias [#alias]

`string`

The unique alias of the image. You can use this alias to refer to this image

### props? [#props]

[`ZoomInOutProps`](/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps) = `{}`

The properties of the effect

### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the effect

## Returns [#returns]

`string`\[] | `undefined`

The ids of the tickers that are used in the effect.


# Interface: AdditionalPositionsExtension (/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtension)



Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:66](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L66)

## Properties [#properties]

### align [#align]

\> **align**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:76](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L76)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

***

### percentagePosition [#percentageposition]

\> **percentagePosition**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:106](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L106)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### percentageX [#percentagex]

\> **percentageX**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:116](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L116)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### percentageY [#percentagey]

\> **percentageY**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:126](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L126)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### positionInfo [#positioninfo]

\> `readonly` **positionInfo**: `object`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L128)

#### type [#type]

\> **type**: `"pixel"` | `"percentage"` | `"align"`

#### x [#x]

\> **x**: `number`

#### y [#y]

\> **y**: `number`

***

### positionType [#positiontype]

\> `readonly` **positionType**: `"pixel"` | `"percentage"` | `"align"`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:127](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L127)

***

### xAlign [#xalign]

\> **xAlign**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:86](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L86)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

***

### yAlign [#yalign]

\> **yAlign**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L96)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.


# Interface: AdditionalPositionsExtensionProps (/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)



Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L3)

## Extended by [#extended-by]

* [`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)
* [`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions)
* [`TextOptions`](/jsdoc/pixi-vn/index/interfaces/TextOptions)
* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)
* [`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)
* [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

## Properties [#properties]

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

***

### percentagePosition? [#percentageposition]

\> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### percentageX? [#percentagex]

\> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### percentageY? [#percentagey]

\> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

***

### xAlign? [#xalign]

\> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

***

### yAlign? [#yalign]

\> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.


# Interface: AnchorExtension (/jsdoc/pixi-vn/index/interfaces/AnchorExtension)



Defined in: [src/canvas/components/AnchorExtension.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L7)

## Properties [#properties]

### anchor [#anchor]

\> **anchor**: `PointData`

Defined in: [src/canvas/components/AnchorExtension.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L25)

The anchor sets the origin point of the imageContainer. The default value is taken from the [Texture](/jsdoc/pixi-vn/index/variables/Texture)
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

#### Example [#example]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```


# Interface: AnchorExtensionProps (/jsdoc/pixi-vn/index/interfaces/AnchorExtensionProps)



Defined in: [src/canvas/components/AnchorExtension.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L3)

## Extended by [#extended-by]

* [`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)

## Properties [#properties]

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: [src/canvas/components/AnchorExtension.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L4)


# Interface: ApplicationOptions (/jsdoc/pixi-vn/index/interfaces/ApplicationOptions)



Defined in: node\_modules/pixi.js/lib/app/Application.d.ts:107

Application options supplied to the Application#init method.
These options configure how your PixiJS application behaves.

## Standard [#standard]

## Example [#example]

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

## See [#see]

* WebGLOptions For resize-related options
* WebGPUOptions For resize-related options
* TickerPlugin For ticker-related options
* ResizePlugin For resize-related options

## Extends [#extends]

* `AutoDetectOptions`.`ApplicationOptions`

## Properties [#properties]

### antialias? [#antialias]

\> `optional` &#x2A;*antialias?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:42

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

#### Inherited from [#inherited-from]

`AutoDetectOptions.antialias`

***

### autoDensity? [#autodensity]

\> `optional` &#x2A;*autoDensity?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:38

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.

#### Inherited from [#inherited-from-1]

`AutoDetectOptions.autoDensity`

***

### autoStart? [#autostart]

\> `optional` &#x2A;*autoStart?**: `boolean`

Defined in: node\_modules/pixi.js/lib/app/TickerPlugin.d.ts:55

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

#### Example [#example-1]

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

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

#### Default [#default]

```ts
true
```

#### Inherited from [#inherited-from-2]

`PixiMixins.ApplicationOptions.autoStart`

***

### background? [#background]

\> `optional` &#x2A;*background?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:17

Alias for `backgroundColor`

#### Inherited from [#inherited-from-3]

`AutoDetectOptions.background`

***

### backgroundAlpha? [#backgroundalpha]

\> `optional` &#x2A;*backgroundAlpha?**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:25

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 [#default-1]

```ts
1
```

#### Inherited from [#inherited-from-4]

`AutoDetectOptions.backgroundAlpha`

***

### backgroundColor [#backgroundcolor]

\> **backgroundColor**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:15

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

#### Default [#default-2]

```ts
'black'
```

#### Inherited from [#inherited-from-5]

`AutoDetectOptions.backgroundColor`

***

### bezierSmoothness [#beziersmoothness]

\> **bezierSmoothness**: `number`

Defined in: node\_modules/pixi.js/lib/scene/graphics/GraphicsMixins.d.ts:35

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

#### Default [#default-3]

```ts
0.5
```

#### Inherited from [#inherited-from-6]

`AutoDetectOptions.bezierSmoothness`

***

### canvas? [#canvas]

\> `optional` &#x2A;*canvas?**: `ICanvas`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:26

The canvas to use as a view, optional.

#### Inherited from [#inherited-from-7]

`AutoDetectOptions.canvas`

***

### canvasOptions? [#canvasoptions]

\> `optional` &#x2A;*canvasOptions?**: `Partial`\<`CanvasOptions`>

Defined in: node\_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:32

Optional CanvasOptions to pass only to the Canvas renderer

#### Inherited from [#inherited-from-8]

`AutoDetectOptions.canvasOptions`

***

### clearBeforeRender? [#clearbeforerender]

\> `optional` &#x2A;*clearBeforeRender?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:30

Whether to clear the canvas before new render passes.

#### Default [#default-4]

```ts
true
```

#### Inherited from [#inherited-from-9]

`AutoDetectOptions.clearBeforeRender`

***

### context [#context]

\> **context**: `WebGL2RenderingContext` | `null`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:29

User-provided WebGL rendering context object.

#### Default [#default-5]

```ts
null
```

#### Inherited from [#inherited-from-10]

`AutoDetectOptions.context`

***

### culler? [#culler]

\> `optional` &#x2A;*culler?**: `object`

Defined in: node\_modules/pixi.js/lib/culling/CullerPlugin.d.ts:34

Options for the culler behavior.

#### updateTransform? [#updatetransform]

\> `optional` &#x2A;*updateTransform?**: `boolean`

Update the transform of culled objects.

\> \[!IMPORTANT] 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 [#default-6]

```ts
true
```

##### Example [#example-2]

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

#### Example [#example-3]

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

#### Inherited from [#inherited-from-11]

`PixiMixins.ApplicationOptions.culler`

***

### depth? [#depth]

\> `optional` &#x2A;*depth?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:44

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

#### Inherited from [#inherited-from-12]

`AutoDetectOptions.depth`

***

### eventFeatures? [#eventfeatures]

\> `optional` &#x2A;*eventFeatures?**: `Partial`\<`EventSystemFeatures`>

Defined in: node\_modules/pixi.js/lib/events/EventsMixins.d.ts:73

Configuration for enabling/disabling specific event features.
Use this to optimize performance by turning off unused functionality.

#### Example [#example-4]

```ts
const app = new Application();
await app.init({
    eventFeatures: {
        // Core interaction events
        move: true,        // Pointer/mouse/touch movement
        click: true,       // Click/tap events
        wheel: true,       // Mouse wheel/scroll events
        // Global tracking
        globalMove: false  // Global pointer movement
    }
});
```

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-13]

`AutoDetectOptions.eventFeatures`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/EventsMixins.d.ts:53

The type of interaction behavior for a Container. This is set via the [Container#eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode) property.

#### Example [#example-5]

```ts
// Basic event mode setup
const sprite = new Sprite(texture);
sprite.eventMode = 'static';    // Enable standard interaction
sprite.on('pointerdown', () => { console.log('clicked!'); });

// Different event modes
sprite.eventMode = 'none';      // Disable all interaction
sprite.eventMode = 'passive';   // Only allow interaction on children
sprite.eventMode = 'auto';      // Like DOM pointer-events: auto
sprite.eventMode = 'dynamic';   // For moving/animated objects
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and
  non-interactive children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive.
  Same as `interactive = false` in v7
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7
* `'dynamic'`: Emits events and is hit tested but will also receive mock interaction events fired from
  a ticker to allow for interaction when the mouse isn't moving

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard buttons/controls
* Use `'dynamic'` only for moving/animated interactive elements

#### Since [#since-1]

7.2.0

#### Inherited from [#inherited-from-14]

`AutoDetectOptions.eventMode`

***

### failIfMajorPerformanceCaveat? [#failifmajorperformancecaveat]

\> `optional` &#x2A;*failIfMajorPerformanceCaveat?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:15

#### Inherited from [#inherited-from-15]

`AutoDetectOptions.failIfMajorPerformanceCaveat`

***

### forceFallbackAdapter [#forcefallbackadapter]

\> **forceFallbackAdapter**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gpu/GpuDeviceSystem.d.ts:41

Force the use of the fallback adapter

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-16]

`AutoDetectOptions.forceFallbackAdapter`

***

### gcActive [#gcactive]

\> **gcActive**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:50

If set to true, this will enable the garbage collector.

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-17]

`AutoDetectOptions.gcActive`

***

### gcFrequency [#gcfrequency]

\> **gcFrequency**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:60

How frequently to run garbage collection in milliseconds.

#### Default [#default-9]

```ts
30000
```

#### Inherited from [#inherited-from-18]

`AutoDetectOptions.gcFrequency`

***

### gcMaxUnusedTime [#gcmaxunusedtime]

\> **gcMaxUnusedTime**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:55

The maximum time in milliseconds a resource can be unused before being garbage collected.

#### Default [#default-10]

```ts
60000
```

#### Inherited from [#inherited-from-19]

`AutoDetectOptions.gcMaxUnusedTime`

***

### gpu? [#gpu]

\> `optional` &#x2A;*gpu?**: `GPU`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gpu/GpuDeviceSystem.d.ts:43

Using shared device and adaptor from other engine

#### Inherited from [#inherited-from-20]

`AutoDetectOptions.gpu`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:24

The height of the screen.

#### Default [#default-11]

```ts
600
```

#### Inherited from [#inherited-from-21]

`AutoDetectOptions.height`

***

### hello [#hello]

\> **hello**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/startup/HelloSystem.d.ts:15

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

#### Default [#default-12]

```ts
false
```

#### Inherited from [#inherited-from-22]

`AutoDetectOptions.hello`

***

### ~~manageImports?~~ [#manageimports]

\> `optional` &#x2A;*manageImports?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/system/SharedSystems.d.ts:73

#### Default [#default-13]

```ts
true
```

#### Deprecated [#deprecated]

since 8.1.6

#### See [#see-1]

`skipExtensionImports`

#### Inherited from [#inherited-from-23]

`AutoDetectOptions.manageImports`

***

### multiView [#multiview]

\> **multiView**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:60

Whether to enable multi-view rendering. Set to true when rendering to multiple
canvases on the dom.

#### Default [#default-14]

```ts
false
```

#### Inherited from [#inherited-from-24]

`AutoDetectOptions.multiView`

***

### powerPreference? [#powerpreference]

\> `optional` &#x2A;*powerPreference?**: `GpuPowerPreference`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:37

An optional hint indicating what configuration of GPU is suitable for the WebGL context,
can be `'high-performance'` or `'low-power'`.
Setting to `'high-performance'` will prioritize rendering performance over power consumption,
while setting to `'low-power'` will prioritize power saving over rendering performance.

#### Default [#default-15]

```ts
undefined
```

#### Inherited from [#inherited-from-25]

`AutoDetectOptions.powerPreference`

***

### preference? [#preference]

\> `optional` &#x2A;*preference?**: `RendererPreference` | `RendererPreference`\[]

Defined in: node\_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:26

The preferred renderer type(s).

* When a **string** is provided (e.g. `'webgpu'`), that renderer is tried first and
  the remaining renderers are used as fallbacks in the default priority order.
* When an **array** is provided (e.g. `['webgpu', 'webgl']`), only the listed
  renderers are tried, in the given order. Any renderer type **not** in the array
  is excluded entirely — this can be used as a blocklist.

#### Inherited from [#inherited-from-26]

`AutoDetectOptions.preference`

***

### preferWebGLVersion? [#preferwebglversion]

\> `optional` &#x2A;*preferWebGLVersion?**: `1` | `2`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:54

The preferred WebGL version to use.

#### Default [#default-16]

```ts
2
```

#### Inherited from [#inherited-from-27]

`AutoDetectOptions.preferWebGLVersion`

***

### premultipliedAlpha [#premultipliedalpha]

\> **premultipliedAlpha**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:42

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

#### Default [#default-17]

```ts
true
```

#### Inherited from [#inherited-from-28]

`AutoDetectOptions.premultipliedAlpha`

***

### preserveDrawingBuffer [#preservedrawingbuffer]

\> **preserveDrawingBuffer**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:48

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve
its value until cleared or overwritten. Enable this if you need to call `toDataUrl` on the WebGL context.

#### Default [#default-18]

```ts
false
```

#### Inherited from [#inherited-from-29]

`AutoDetectOptions.preserveDrawingBuffer`

***

### renderableGCActive [#renderablegcactive]

\> **renderableGCActive**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:20

If set to true, this will enable the garbage collector on the GPU.

#### Default [#default-19]

```ts
true
```

#### Inherited from [#inherited-from-30]

`AutoDetectOptions.renderableGCActive`

***

### renderableGCFrequency [#renderablegcfrequency]

\> **renderableGCFrequency**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:30

Frames between two garbage collections.

#### Default [#default-20]

```ts
600
```

#### Inherited from [#inherited-from-31]

`AutoDetectOptions.renderableGCFrequency`

***

### renderableGCMaxUnusedTime [#renderablegcmaxunusedtime]

\> **renderableGCMaxUnusedTime**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:25

The maximum idle frames before a texture is destroyed by garbage collection.

#### Default [#default-21]

```ts
60 * 60
```

#### Inherited from [#inherited-from-32]

`AutoDetectOptions.renderableGCMaxUnusedTime`

***

### resizeTo? [#resizeto]

\> `optional` &#x2A;*resizeTo?**: `HTMLElement` | `Window`

Defined in: node\_modules/pixi.js/lib/app/ResizePlugin.d.ts:34

Element to automatically resize the renderer to.

#### Example [#example-6]

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

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

`PixiMixins.ApplicationOptions.resizeTo`

***

### resolution? [#resolution]

\> `optional` &#x2A;*resolution?**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:40

The resolution / device pixel ratio of the renderer.

#### Inherited from [#inherited-from-34]

`AutoDetectOptions.resolution`

***

### roundPixels? [#roundpixels]

\> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:16

#### Inherited from [#inherited-from-35]

`AutoDetectOptions.roundPixels`

***

### sharedTicker? [#sharedticker]

\> `optional` &#x2A;*sharedTicker?**: `boolean`

Defined in: node\_modules/pixi.js/lib/app/TickerPlugin.d.ts:80

Controls whether to use the shared global ticker or create a new instance.

The shared ticker is useful when you have multiple instances that should sync their updates.
However, it has some limitations regarding update order control.

Update Order:

1. System ticker (always runs first)
2. Shared ticker (if enabled)
3. App ticker (if using own ticker)

#### Example [#example-7]

```ts
// Use shared ticker (global instance)
await app.init({ sharedTicker: true });

// Use dedicated ticker (default)
await app.init({ sharedTicker: false });

// Access ticker properties
console.log(app.ticker.FPS);    // Current FPS
console.log(app.ticker.deltaMS); // MS since last update
```

#### Default [#default-23]

```ts
false
```

#### Inherited from [#inherited-from-36]

`PixiMixins.ApplicationOptions.sharedTicker`

***

### skipExtensionImports? [#skipextensionimports]

\> `optional` &#x2A;*skipExtensionImports?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/system/SharedSystems.d.ts:67

Whether to stop PixiJS from dynamically importing default extensions for the renderer.
It is false by default, and means PixiJS will load all the default extensions, based
on the environment e.g browser/webworker.
If you set this to true, then you will need to manually import the systems and extensions you need.

e.g.

```js
import 'accessibility';
import 'app';
import 'events';
import 'spritesheet';
import 'graphics';
import 'mesh';
import 'text';
import 'text-bitmap';
import 'text-html';
import { autoDetectRenderer } from 'pixi.js';

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

#### Default [#default-24]

```ts
false
```

#### Inherited from [#inherited-from-37]

`AutoDetectOptions.skipExtensionImports`

***

### ~~textureGCActive~~ [#texturegcactive]

\> **textureGCActive**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:17

If set to true, this will enable the garbage collector on the GPU.

#### Default [#default-25]

```ts
true
```

#### Deprecated [#deprecated-1]

since 8.15.0

#### Inherited from [#inherited-from-38]

`AutoDetectOptions.textureGCActive`

***

### ~~textureGCAMaxIdle~~ [#texturegcamaxidle]

\> **textureGCAMaxIdle**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:22

#### Deprecated [#deprecated-2]

since 8.3.0

#### See [#see-2]

[TextureGCSystemOptions.textureGCMaxIdle](#texturegcmaxidle)

#### Inherited from [#inherited-from-39]

`AutoDetectOptions.textureGCAMaxIdle`

***

### ~~textureGCCheckCountMax~~ [#texturegccheckcountmax]

\> **textureGCCheckCountMax**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:34

Frames between two garbage collections.

#### Default [#default-26]

```ts
600
```

#### Deprecated [#deprecated-3]

since 8.15.0

#### Inherited from [#inherited-from-40]

`AutoDetectOptions.textureGCCheckCountMax`

***

### ~~textureGCMaxIdle~~ [#texturegcmaxidle]

\> **textureGCMaxIdle**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:28

The maximum idle frames before a texture is destroyed by garbage collection.

#### Default [#default-27]

```ts
60 * 60
```

#### Deprecated [#deprecated-4]

since 8.15.0

#### Inherited from [#inherited-from-41]

`AutoDetectOptions.textureGCMaxIdle`

***

### useBackBuffer? [#usebackbuffer]

\> `optional` &#x2A;*useBackBuffer?**: `boolean`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/gl/GlBackBufferSystem.d.ts:17

if true will use the back buffer where required

#### Default [#default-28]

```ts
false
```

#### Inherited from [#inherited-from-42]

`AutoDetectOptions.useBackBuffer`

***

### ~~view?~~ [#view]

\> `optional` &#x2A;*view?**: `ICanvas`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:31

Alias for `canvas`.

#### Deprecated [#deprecated-5]

since 8.0.0

#### Inherited from [#inherited-from-43]

`AutoDetectOptions.view`

***

### webgl? [#webgl]

\> `optional` &#x2A;*webgl?**: `Partial`\<`WebGLOptions`>

Defined in: node\_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:30

Optional WebGLOptions to pass only to the WebGL renderer

#### Inherited from [#inherited-from-44]

`AutoDetectOptions.webgl`

***

### webgpu? [#webgpu]

\> `optional` &#x2A;*webgpu?**: `Partial`\<`WebGPUOptions`>

Defined in: node\_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:28

Optional WebGPUOptions to pass only to WebGPU renderer.

#### Inherited from [#inherited-from-45]

`AutoDetectOptions.webgpu`

***

### width? [#width]

\> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:19

The width of the screen.

#### Default [#default-29]

```ts
800
```

#### Inherited from [#inherited-from-46]

`AutoDetectOptions.width`


# Interface: AssetMemory (/jsdoc/pixi-vn/index/interfaces/AssetMemory)



Defined in: [src/canvas/interfaces/AssetMemory.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/AssetMemory.ts#L4)

Interface for Asset memory

## Properties [#properties]

### alias? [#alias]

\> `optional` &#x2A;*alias?**: `string`

Defined in: [src/canvas/interfaces/AssetMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/AssetMemory.ts#L9)

***

### ~~image?~~ [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/canvas/interfaces/AssetMemory.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/AssetMemory.ts#L8)

#### Deprecated [#deprecated]

***

### url [#url]

\> **url**: `string`

Defined in: [src/canvas/interfaces/AssetMemory.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/AssetMemory.ts#L10)


# Interface: AssetsBundle (/jsdoc/pixi-vn/index/interfaces/AssetsBundle)



Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:258

Structure of a bundle found in a [AssetsManifest](/jsdoc/pixi-vn/index/interfaces/AssetsManifest) file. Bundles allow you to
group related assets together for easier management and loading.

## Example [#example]

```ts
// Basic bundle structure
const bundle: AssetsBundle = {
    name: 'level-1',
    assets: [
        {
            alias: 'background',
            src: 'level1/bg.{webp,png}'
        },
        {
            alias: 'sprites',
            src: 'level1/sprites.json'
        }
    ]
};

// Using object format for assets
const bundle: AssetsBundle = {
    name: 'ui',
    assets: {
        button: 'ui/button.png',
        panel: 'ui/panel.png',
        icons: ['ui/icons.webp', 'ui/icons.png']
    }
};
```

## See [#see]

* Assets.addBundle For adding bundles programmatically
* Assets.loadBundle For loading bundles

## Standard [#standard]

## Properties [#properties]

### assets [#assets]

\> **assets**: [`UnresolvedAsset`](/jsdoc/pixi-vn/index/interfaces/UnresolvedAsset)\<`any`>\[] | `Record`\<`string`, `ArrayOr`\<`string`> | [`UnresolvedAsset`](/jsdoc/pixi-vn/index/interfaces/UnresolvedAsset)\<`any`>>

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:262

Assets contained in the bundle. Can be an array of assets or a record mapping aliases to sources.

***

### name [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:260

Unique identifier for the bundle


# Interface: AssetsManifest (/jsdoc/pixi-vn/index/interfaces/AssetsManifest)



Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:308

The manifest format for defining all assets in your application. Manifests provide a
structured way to organize and manage your assets through bundles.

## Example [#example]

```ts
const manifest: AssetsManifest = {
    bundles: [
        {
            name: 'loading',
            assets: [
                {
                    alias: 'logo',
                    src: 'logo.{webp,png}',
                    data: { scaleMode: 'nearest' }
                },
                {
                    alias: 'progress-bar',
                    src: 'progress.png'
                }
            ]
        },
        {
            name: 'game',
            assets: {
                background: ['bg.webp', 'bg.png'],
                character: 'hero.json',
                music: 'theme.mp3'
            }
        }
    ]
};

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

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

## See [#see]

* Assets.init For initializing with a manifest
* [AssetsBundle](/jsdoc/pixi-vn/index/interfaces/AssetsBundle) For bundle structure details

## Standard [#standard]

## Properties [#properties]

### bundles [#bundles]

\> **bundles**: [`AssetsBundle`](/jsdoc/pixi-vn/index/interfaces/AssetsBundle)\[]

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:310

Array of asset bundles that make up the manifest


# Interface: AudioChannelInterface (/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)



Defined in: [src/sound/interfaces/AudioChannelInterface.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L5)

## Properties [#properties]

### alias [#alias]

\> `readonly` **alias**: `string`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L9)

The alias of the audio channel. This is used to reference the channel when playing sounds. The alias must be unique among all channels.

***

### background [#background]

\> `readonly` **background**: `boolean`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:54](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L54)

Whether this channel is a background channel.
Background channels are special channels. Unlike normal channels, media connected to a background channel does not stop when a scene changes, but continues to play in the background.

***

### mediaInstances [#mediainstances]

\> `readonly` **mediaInstances**: [`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)\[]

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:49](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L49)

The MediaInstances currently playing through this channel. This is read-only and cannot be modified directly. Use the play method to add new MediaInstances to this channel.

***

### muted [#muted]

\> **muted**: `boolean`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L45)

Whether the audio channel is muted. This is combined with the muted state of each sound played through this channel.

***

### pan [#pan]

\> **pan**: `number`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L37)

The stereo pan position for this channel in the range \[-1, 1].
-1 is full left, 0 is centre, 1 is full right.

***

### panParam [#panparam]

\> `readonly` **panParam**: `Param`\<`"audioRange"`>

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:141](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L141)

**Advanced** — the raw `Tone.Param<"audioRange">` for this channel's
stereo pan position.

Unlike the [pan](#pan) property (which sets the value instantly), this
Param exposes all Tone.js automation methods such as `rampTo`,
`linearRampTo`, and `exponentialRampTo`.

Use this when you need to smoothly automate panning over time instead of
setting it instantly.  Values range from -1 (full left) to 1 (full right).

#### Example [#example]

```ts
const channel = sound.findChannel("music");

// Gradually pan to the left over 3 seconds.
channel.panParam.rampTo(-1, 3);

// Return to centre over 2 seconds.
channel.panParam.rampTo(0, 2);
```

***

### volume [#volume]

\> **volume**: `number`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:41](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L41)

The volume of the audio channel, between 0 and 1. This is multiplied with the volume of each sound played through this channel.

***

### volumeParam [#volumeparam]

\> `readonly` **volumeParam**: `Param`\<`"decibels"`>

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:118](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L118)

**Advanced** — the raw `Tone.Param<"decibels">` for this channel's volume.

Unlike the [volume](#volume) property (which uses a linear 0–1 scale), this
Param works directly in **decibels** and exposes all Tone.js automation
methods such as `rampTo`, `linearRampTo`, and `exponentialRampTo`.

Use this when you need to smoothly automate volume over time instead of
setting it instantly.

#### Example [#example-1]

```ts
const channel = sound.findChannel("music");

// Fade the volume from its current level to -12 dB over 3 seconds.
channel.volumeParam.rampTo(-12, 3);

// Fade to silence over 2 seconds.
channel.volumeParam.rampTo(-Infinity, 2);
```

## Methods [#methods]

### chain() [#chain]

\> **chain**(...`nodes`): `this`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L96)

Useful for inserting channel-wide audio effects such as reverb, delay or EQ.

Install "tone" to use this method.

#### Parameters [#parameters]

##### nodes [#nodes]

...`ToneAudioNode`\<`ToneWithContextOptions`>\[]

One or more Tone.js ToneAudioNode instances to chain in series.

#### Returns [#returns]

`this`

Instance for chaining.

#### Example [#example-2]

```ts
import * as Tone from "tone";

const channel = sound.findChannel("music");

// Create a reverb effect and wait for its impulse response to be ready.
const reverb = new Tone.Reverb({ decay: 2.5 });

// Route the channel through the reverb to the master output.
channel.chain(reverb);
```

***

### pauseAll() [#pauseall]

\> **pauseAll**(): `this`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:64](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L64)

Pauses any playing sounds.

#### Returns [#returns-1]

`this`

Instance for chaining.

***

### play() [#play]

#### Call Signature [#call-signature]

\> **play**(`alias`, `options?`): `Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L18)

Plays a sound.

##### Parameters [#parameters-1]

###### alias [#alias-1]

`string`

The media and sound (asset) alias reference.

###### options? [#options]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

The options

##### Returns [#returns-2]

`Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

The sound instance,
this cannot be reused after it is done playing. Returns a Promise if the sound
has not yet loaded.

#### Call Signature [#call-signature-1]

\> **play**(`mediaAlias`, `soundAlias`, `options?`): `Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L28)

Plays a sound.

##### Parameters [#parameters-2]

###### mediaAlias [#mediaalias]

`string`

The media alias reference.

###### soundAlias [#soundalias]

`string`

The sound (asset) alias reference.

###### options? [#options-1]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

The options

##### Returns [#returns-3]

`Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

The sound instance,
this cannot be reused after it is done playing. Returns a Promise if the sound
has not yet loaded.

***

### resumeAll() [#resumeall]

\> **resumeAll**(): `this`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L69)

Resumes any sounds.

#### Returns [#returns-4]

`this`

Instance for chaining.

***

### stopAll() [#stopall]

\> **stopAll**(): `this`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:59](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L59)

Stops all media currently playing through this channel.

#### Returns [#returns-5]

`this`

Instance for chaining.

***

### toggleMuteAll() [#togglemuteall]

\> **toggleMuteAll**(): `boolean`

Defined in: [src/sound/interfaces/AudioChannelInterface.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/AudioChannelInterface.ts#L74)

Toggle muted property for all sounds.

#### Returns [#returns-6]

`boolean`

`true` if all sounds are muted.


# Interface: CanvasBaseInterface<T2> (/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)



Defined in: [src/canvas/interfaces/CanvasBaseInterface.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasBaseInterface.ts#L5)

This class is used to create a canvas element to add into a Pixi Application.
You can use [()](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add this element into the application.
This class should be implemented and the memory method should be overridden.
You must use the [canvasComponentDecorator](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents) to register the canvas in the game.
In Ren'Py is a displayable.

## Example [#example]

```ts
const CANVAS_EXAMPLE_ID = "CanvasExample";

\@canvasComponentDecorator({
    name: CANVAS_EXAMPLE_ID,
})
export class CanvasExample extends Container implements CanvasBaseItem<Memory> {
    get memory(): Memory {
        return {
            pixivnId: CANVAS_EXAMPLE_ID,
            // ... other properties
        }
    }
    async setMemory(value: Memory) {
        // ... set other properties
    }
}
```

## Extends [#extends]

* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`T2`>.`Container`

## Type Parameters [#type-parameters]

### T2 [#t2]

`T2` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

`PixiContainer.__devtoolIgnore`

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

`PixiContainer.__devtoolIgnoreChildren`

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

`PixiContainer.__devtoolLocked`

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-3]

`PixiContainer._cx`

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-4]

`PixiContainer._cy`

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-5]

`PixiContainer._pivot`

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-6]

`PixiContainer._position`

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-7]

`PixiContainer._scale`

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-8]

`PixiContainer._skew`

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-9]

`PixiContainer._sx`

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-10]

`PixiContainer._sy`

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-11]

`PixiContainer._zIndex`

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-12]

`PixiContainer.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-13]

`PixiContainer.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-14]

`PixiContainer.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-15]

`PixiContainer.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-16]

`PixiContainer.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-17]

`PixiContainer.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-18]

`PixiContainer.accessibleType`

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:10

**`Internal`**

#### Inherited from [#inherited-from-19]

`PixiContainer.allowChildren`

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-20]

`PixiContainer.boundsArea`

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-21]

`PixiContainer.cacheAsBitmap`

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn/index/classes/VideoSprite#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-22]

`PixiContainer.cacheAsTexture`

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-23]

`PixiContainer.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-24]

`PixiContainer.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-25]

`PixiContainer.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-26]

`PixiContainer.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-27]

`PixiContainer.cursor`

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-28]

`PixiContainer.depthOfChildModified`

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

[Container#destroy](/jsdoc/pixi-vn/index/classes/Container#destroy) For destroying objects

#### Inherited from [#inherited-from-29]

`PixiContainer.destroyed`

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-30]

`PixiContainer.effects`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-31]

`PixiContainer.eventMode`

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* [Container#filters](/jsdoc/pixi-vn/index/classes/Container#filters) For applying filters
* [Rectangle](/jsdoc/pixi-vn/index/variables/Rectangle) For area definition

#### Inherited from [#inherited-from-32]

`PixiContainer.filterArea`

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-33]

`PixiContainer.globalDisplayStatus`

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-34]

`PixiContainer.groupAlpha`

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-35]

`PixiContainer.groupBlendMode`

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-36]

`PixiContainer.groupColor`

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-37]

`PixiContainer.groupColorAlpha`

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-38]

`PixiContainer.groupTransform`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-39]

`PixiContainer.hitArea`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-40]

`PixiContainer.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-41]

`PixiContainer.interactiveChildren`

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* [Container#cacheAsTexture](/jsdoc/pixi-vn/index/classes/Container#cacheastexture) For enabling caching
* [Container#updateCacheTexture](/jsdoc/pixi-vn/index/classes/Container#updatecachetexture) For updating cache

#### Inherited from [#inherited-from-42]

`PixiContainer.isCachedAsTexture`

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-2]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

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

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-43]

`PixiContainer.isInteractive`

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-45]

`PixiContainer.layerParentId`

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-46]

`PixiContainer.localAlpha`

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-47]

`PixiContainer.localBlendMode`

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-48]

`PixiContainer.localColor`

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-49]

`PixiContainer.localDisplayStatus`

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#grouptransform) For render group transform

#### Inherited from [#inherited-from-50]

`PixiContainer.localTransform`

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* [Sprite](/jsdoc/pixi-vn/index/classes/Sprite) For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn/index/classes/VideoSprite#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-51]

`PixiContainer.mask`

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-52]

`PixiContainer.name`

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-53]

`PixiContainer.onclick`

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-54]

`PixiContainer.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-55]

`PixiContainer.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-56]

`PixiContainer.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-57]

`PixiContainer.onmousedown`

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-58]

`PixiContainer.onmouseenter`

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-59]

`PixiContainer.onmouseleave`

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-60]

`PixiContainer.onmousemove`

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-61]

`PixiContainer.onmouseout`

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-62]

`PixiContainer.onmouseover`

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-63]

`PixiContainer.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-64]

`PixiContainer.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-65]

`PixiContainer.onpointercancel`

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-66]

`PixiContainer.onpointerdown`

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-67]

`PixiContainer.onpointerenter`

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-68]

`PixiContainer.onpointerleave`

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-69]

`PixiContainer.onpointermove`

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-70]

`PixiContainer.onpointerout`

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-71]

`PixiContainer.onpointerover`

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-72]

`PixiContainer.onpointertap`

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-73]

`PixiContainer.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-74]

`PixiContainer.onpointerupoutside`

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-76]

`PixiContainer.onrightclick`

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

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

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

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-77]

`PixiContainer.onrightdown`

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-78]

`PixiContainer.onrightup`

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-79]

`PixiContainer.onrightupoutside`

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-80]

`PixiContainer.ontap`

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-81]

`PixiContainer.ontouchcancel`

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-82]

`PixiContainer.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-83]

`PixiContainer.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-84]

`PixiContainer.ontouchmove`

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-57]

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

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-85]

`PixiContainer.ontouchstart`

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

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

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-86]

`PixiContainer.onwheel`

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-87]

`PixiContainer.parent`

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-88]

`PixiContainer.parentRenderLayer`

***

### pixivnId [#pixivnid]

\> **pixivnId**: `string` = `"canvas_element_id_not_set"`

Defined in: [src/canvas/classes/CanvasBaseItem.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L56)

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

#### Inherited from [#inherited-from-89]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`pixivnId`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#pixivnid)

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-90]

`PixiContainer.relativeGroupTransform`

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:800

**`Internal`**

#### Inherited from [#inherited-from-91]

`PixiContainer.renderPipeId`

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-92]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-3]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn/index/classes/VideoSprite#zindex) For setting child order

#### Inherited from [#inherited-from-93]

`PixiContainer.sortChildren`

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-94]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-95]

`PixiContainer.tabIndex`

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-96]

`PixiContainer.uid`

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-4]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-97]

`PixiContainer.updateCacheTexture`

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-98]

`PixiContainer.updateTick`

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-99]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)

## Accessors [#accessors]

### alpha [#alpha]

#### Get Signature [#get-signature]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

##### Returns [#returns-5]

`number`

#### Set Signature [#set-signature]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-1]

###### value [#value]

`number`

##### Returns [#returns-6]

`void`

#### Inherited from [#inherited-from-100]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`alpha`](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha)

***

### angle [#angle]

#### Get Signature [#get-signature-1]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-66]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-7]

`number`

#### Set Signature [#set-signature-1]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-2]

###### value [#value-1]

`number`

##### Returns [#returns-8]

`void`

#### Inherited from [#inherited-from-101]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`angle`](/jsdoc/pixi-vn/index/classes/VideoSprite#angle)

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-2]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-67]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

##### Returns [#returns-9]

`BLEND_MODES`

#### Set Signature [#set-signature-2]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-3]

###### value [#value-2]

`BLEND_MODES`

##### Returns [#returns-10]

`void`

#### Inherited from [#inherited-from-102]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`blendMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#blendmode)

***

### filters [#filters]

#### Get Signature [#get-signature-3]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-68]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-16]

Filter For filter base class

##### Returns [#returns-11]

readonly `Filter`\[]

#### Set Signature [#set-signature-3]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-69]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-17]

Filter For filter base class

##### Parameters [#parameters-4]

###### value [#value-3]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-12]

`void`

#### Inherited from [#inherited-from-103]

`PixiContainer.filters`

***

### height [#height]

#### Get Signature [#get-signature-4]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-70]

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

##### Returns [#returns-13]

`number`

#### Set Signature [#set-signature-4]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118

##### Parameters [#parameters-5]

###### value [#value-4]

`number`

##### Returns [#returns-14]

`void`

#### Inherited from [#inherited-from-104]

[`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer).[`height`](/jsdoc/pixi-vn/index/classes/ImageContainer#height)

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-5]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-15]

`boolean`

#### Inherited from [#inherited-from-105]

`PixiContainer.isRenderable`

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-6]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-16]

`boolean`

#### Set Signature [#set-signature-5]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-6]

###### value [#value-5]

`boolean`

##### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-106]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`isRenderGroup`](/jsdoc/pixi-vn/index/classes/VideoSprite#isrendergroup)

***

### memory [#memory]

#### Get Signature [#get-signature-7]

\> **get** **memory**(): `T2`

Defined in: [src/canvas/classes/CanvasBaseItem.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L37)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-18]

`T2`

#### Inherited from [#inherited-from-107]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory)

***

### origin [#origin]

#### Get Signature [#get-signature-8]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-71]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-19]

`ObservablePoint`

#### Set Signature [#set-signature-6]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-7]

###### value [#value-6]

`number` | `PointData`

##### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-108]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`origin`](/jsdoc/pixi-vn/index/classes/VideoSprite#origin)

***

### pivot [#pivot]

#### Get Signature [#get-signature-9]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-72]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-21]

`ObservablePoint`

#### Set Signature [#set-signature-7]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-8]

###### value [#value-7]

`number` | `PointData`

##### Returns [#returns-22]

`void`

#### Inherited from [#inherited-from-109]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`pivot`](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot)

***

### position [#position]

#### Get Signature [#get-signature-10]

\> **get** **position**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:959

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-73]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-23]

`ObservablePoint`

#### Set Signature [#set-signature-8]

\> **set** **position**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:960

##### Parameters [#parameters-9]

###### value [#value-8]

`PointData`

##### Returns [#returns-24]

`void`

#### Inherited from [#inherited-from-110]

`CanvasBaseInterface`.[`position`](#position)

***

### renderable [#renderable]

#### Get Signature [#get-signature-11]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-74]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-18]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-25]

`boolean`

#### Set Signature [#set-signature-9]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-10]

###### value [#value-9]

`boolean`

##### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-111]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`renderable`](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable)

***

### rotation [#rotation]

#### Get Signature [#get-signature-12]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-75]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-27]

`number`

#### Set Signature [#set-signature-10]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-11]

###### value [#value-10]

`number`

##### Returns [#returns-28]

`void`

#### Inherited from [#inherited-from-112]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`rotation`](/jsdoc/pixi-vn/index/classes/VideoSprite#rotation)

***

### scale [#scale]

#### Get Signature [#get-signature-13]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-76]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-4]

4.0.0

##### Returns [#returns-29]

`ObservablePoint`

#### Set Signature [#set-signature-11]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-12]

###### value [#value-11]

`string` | `number` | `PointData`

##### Returns [#returns-30]

`void`

#### Inherited from [#inherited-from-113]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`scale`](/jsdoc/pixi-vn/index/classes/VideoSprite#scale)

***

### skew [#skew]

#### Get Signature [#get-signature-14]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-77]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-5]

4.0.0

##### Default [#default-55]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-31]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-13]

###### value [#value-12]

`PointData`

##### Returns [#returns-32]

`void`

#### Inherited from [#inherited-from-114]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`skew`](/jsdoc/pixi-vn/index/classes/VideoSprite#skew)

***

### tint [#tint]

#### Get Signature [#get-signature-15]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-78]

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

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

##### Default [#default-56]

```ts
0xFFFFFF
```

##### See [#see-19]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

##### Returns [#returns-33]

`number`

#### Set Signature [#set-signature-13]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-14]

###### value [#value-13]

`ColorSource`

##### Returns [#returns-34]

`void`

#### Inherited from [#inherited-from-115]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`tint`](/jsdoc/pixi-vn/index/classes/VideoSprite#tint)

***

### visible [#visible]

#### Get Signature [#get-signature-16]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

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

##### Example [#example-79]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-57]

```ts
true
```

##### See [#see-20]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

##### Returns [#returns-35]

`boolean`

#### Set Signature [#set-signature-14]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-15]

###### value [#value-14]

`boolean`

##### Returns [#returns-36]

`void`

#### Inherited from [#inherited-from-116]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`visible`](/jsdoc/pixi-vn/index/classes/VideoSprite#visible)

***

### width [#width]

#### Get Signature [#get-signature-17]

\> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set.
\> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use [Container#setSize](/jsdoc/pixi-vn/index/classes/Container#setsize)
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-80]

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

##### Returns [#returns-37]

`number`

#### Set Signature [#set-signature-15]

\> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103

##### Parameters [#parameters-16]

###### value [#value-15]

`number`

##### Returns [#returns-38]

`void`

#### Inherited from [#inherited-from-117]

[`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer).[`width`](/jsdoc/pixi-vn/index/classes/ImageContainer#width)

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-18]

\> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-81]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-21]

[Container#localTransform](/jsdoc/pixi-vn/index/classes/VideoSprite#localtransform) For local space transform

##### Returns [#returns-39]

`Matrix`

#### Inherited from [#inherited-from-118]

`PixiContainer.worldTransform`

***

### x [#x]

#### Get Signature [#get-signature-19]

\> **get** **x**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:933

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-82]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-40]

`number`

#### Set Signature [#set-signature-16]

\> **set** **x**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:934

##### Parameters [#parameters-17]

###### value [#value-16]

`number`

##### Returns [#returns-41]

`void`

#### Inherited from [#inherited-from-119]

`CanvasBaseInterface`.[`x`](#x)

***

### y [#y]

#### Get Signature [#get-signature-20]

\> **get** **y**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:945

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-83]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-42]

`number`

#### Set Signature [#set-signature-17]

\> **set** **y**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:946

##### Parameters [#parameters-18]

###### value [#value-17]

`number`

##### Returns [#returns-43]

`void`

#### Inherited from [#inherited-from-120]

`CanvasBaseInterface`.[`y`](#y)

## Methods [#methods]

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

\> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-19]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-44]

`void`

#### Inherited from [#inherited-from-121]

`PixiContainer._getGlobalBoundsRecursive`

***

### addChild() [#addchild]

\> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters-1]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-20]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-45]

`U`\[`0`]

The first child that was added

#### Example [#example-84]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-22]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For adding at specific index

#### Inherited from [#inherited-from-122]

`PixiContainer.addChild`

***

### addChildAt() [#addchildat]

\> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-2]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-21]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-46]

`U`

The child that was added

#### Example [#example-85]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-23]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to the end
* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For moving existing children

#### Inherited from [#inherited-from-123]

`PixiContainer.addChildAt`

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

\> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-3]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-22]

###### type [#type]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-47]

`void`

##### Example [#example-86]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-124]

`PixiContainer.addEventListener`

#### Call Signature [#call-signature-1]

\> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-23]

###### type [#type-1]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-1]

`AddListenerOptions`

##### Returns [#returns-48]

`void`

##### Inherited from [#inherited-from-125]

`PixiContainer.addEventListener`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-4]

##### T [#t]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-24]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-49]

`this`

#### Inherited from [#inherited-from-126]

`PixiContainer.addListener`

***

### collectRenderables() [#collectrenderables]

\> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-25]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-50]

`void`

#### Inherited from [#inherited-from-127]

`PixiContainer.collectRenderables`

***

### collectRenderablesSimple() [#collectrenderablessimple]

\> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:30

**`Internal`**

Collects renderables using a simple method, suitable for containers marked as simple.
This method iterates over the container's children and adds their renderables to the instruction set.

#### Parameters [#parameters-26]

##### instructionSet [#instructionset-1]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-1]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-51]

`void`

#### Inherited from [#inherited-from-128]

`PixiContainer.collectRenderablesSimple`

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

\> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-27]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-52]

`void`

#### Inherited from [#inherited-from-129]

`PixiContainer.collectRenderablesWithEffects`

***

### destroy() [#destroy]

\> **destroy**(`options?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1343

Removes all internal references and listeners as well as removes children from the display list.
Do not use a Container after calling `destroy`.

#### Parameters [#parameters-28]

##### options? [#options-2]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-53]

`void`

#### Example [#example-87]

```ts
container.destroy();
container.destroy(true);
container.destroy({ children: true });
container.destroy({ children: true, texture: true, textureSource: true });
```

#### Inherited from [#inherited-from-130]

`PixiContainer.destroy`

***

### disableRenderGroup() [#disablerendergroup]

\> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-54]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-131]

`PixiContainer.disableRenderGroup`

***

### dispatchEvent() [#dispatchevent]

\> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this [Container](/jsdoc/pixi-vn/index/classes/Container) using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-29]

##### e [#e]

[`FederatedEvent`](/jsdoc/pixi-vn/index/interfaces/FederatedEvent)

The event to dispatch.

#### Returns [#returns-55]

`boolean`

Whether the [preventDefault](/jsdoc/pixi-vn/index/interfaces/FederatedEvent#preventdefault)() method was not invoked.

#### Example [#example-88]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-132]

`PixiContainer.dispatchEvent`

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-1]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-30]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-56]

`boolean`

#### Inherited from [#inherited-from-133]

`PixiContainer.emit`

***

### enableRenderGroup() [#enablerendergroup]

\> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-57]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-134]

`PixiContainer.enableRenderGroup`

***

### eventNames() [#eventnames]

\> **eventNames**(): (keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-58]

(keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-135]

`PixiContainer.eventNames`

***

### getBounds() [#getbounds]

\> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-31]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-1]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-59]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-89]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-24]

* [Container#getLocalBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-136]

`PixiContainer.getBounds`

***

### getChildAt() [#getchildat]

\> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-6]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-32]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-60]

`U`

The child at the given index

#### Example [#example-90]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-25]

* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access
* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For name-based lookup

#### Inherited from [#inherited-from-137]

`PixiContainer.getChildAt`

***

### getChildByLabel() [#getchildbylabel]

\> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-33]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-61]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-91]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-26]

* [Container#getChildrenByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildrenbylabel) For finding all matches
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-138]

`PixiContainer.getChildByLabel`

***

### ~~getChildByName()~~ [#getchildbyname]

\> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-34]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-62]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-27]

Container#getChildByLabel

#### Inherited from [#inherited-from-139]

`PixiContainer.getChildByName`

***

### getChildIndex() [#getchildindex]

\> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-35]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-63]

`number`

The index position of the child container

#### Example [#example-92]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-28]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For changing index
* [Container#children](/jsdoc/pixi-vn/index/classes/Container#children) For direct array access

#### Inherited from [#inherited-from-140]

`PixiContainer.getChildIndex`

***

### getChildrenByLabel() [#getchildrenbylabel]

\> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-36]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-64]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-93]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-29]

* [Container#getChildByLabel](/jsdoc/pixi-vn/index/classes/Container#getchildbylabel) For finding first match
* [Container#label](/jsdoc/pixi-vn/index/classes/VideoSprite#label) For setting labels

#### Inherited from [#inherited-from-141]

`PixiContainer.getChildrenByLabel`

***

### getFastGlobalBounds() [#getfastglobalbounds]

\> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-37]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-2]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-65]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-142]

`PixiContainer.getFastGlobalBounds`

***

### getGlobalAlpha() [#getglobalalpha]

\> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-38]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-66]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-94]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-143]

`PixiContainer.getGlobalAlpha`

***

### getGlobalPosition() [#getglobalposition]

\> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-39]

##### point? [#point]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-67]

`Point`

The updated point

#### Example [#example-95]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-30]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For converting to local space

#### Inherited from [#inherited-from-144]

`PixiContainer.getGlobalPosition`

***

### getGlobalTint() [#getglobaltint]

\> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-40]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-68]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-96]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-145]

`PixiContainer.getGlobalTint`

***

### getGlobalTransform() [#getglobaltransform]

\> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-41]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-69]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-97]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-146]

`PixiContainer.getGlobalTransform`

***

### getLocalBounds() [#getlocalbounds]

\> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-70]

`Bounds`

The bounding area

#### Example [#example-98]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-31]

* [Container#getBounds](/jsdoc/pixi-vn/index/classes/VideoSprite#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-147]

`PixiContainer.getLocalBounds`

***

### getSize() [#getsize]

\> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a \[Size]Size object.

This is faster than get the width and height separately.

#### Parameters [#parameters-42]

##### out? [#out-1]

`Size`

Optional object to store the size in.

#### Returns [#returns-71]

`Size`

The size of the container.

#### Example [#example-99]

```ts
// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);
```

#### Inherited from [#inherited-from-148]

`PixiContainer.getSize`

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-43]

##### event [#event-2]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-72]

`number`

#### Inherited from [#inherited-from-149]

`PixiContainer.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-7]

##### T [#t-2]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-44]

##### event [#event-3]

`T`

#### Returns [#returns-73]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-150]

`PixiContainer.listeners`

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-8]

##### T [#t-3]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-45]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-74]

`this`

#### Inherited from [#inherited-from-151]

`PixiContainer.off`

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-4]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-46]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-75]

`this`

#### Inherited from [#inherited-from-152]

`PixiContainer.on`

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-10]

##### T [#t-5]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-47]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-76]

`this`

#### Inherited from [#inherited-from-153]

`PixiContainer.once`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-48]

##### event? [#event-7]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-77]

`this`

#### Inherited from [#inherited-from-154]

`PixiContainer.removeAllListeners`

***

### removeChild() [#removechild]

\> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-11]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-49]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-78]

`U`\[`0`]

The first child that was removed

#### Example [#example-100]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-32]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-155]

`PixiContainer.removeChild`

***

### removeChildAt() [#removechildat]

\> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-12]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-50]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-79]

`U`

The child that was removed

#### Example [#example-101]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-33]

* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children
* [Container#removeChildren](/jsdoc/pixi-vn/index/classes/Container#removechildren) For removing multiple children

#### Inherited from [#inherited-from-156]

`PixiContainer.removeChildAt`

***

### removeChildren() [#removechildren]

\> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-51]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-80]

`ContainerChild`\[]

List of removed children

#### Example [#example-102]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-34]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing specific children

#### Inherited from [#inherited-from-157]

`PixiContainer.removeChildren`

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

\> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-13]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-52]

###### type [#type-2]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-3]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-81]

`void`

##### Inherited from [#inherited-from-158]

`PixiContainer.removeEventListener`

#### Call Signature [#call-signature-3]

\> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-53]

###### type [#type-3]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-4]

`RemoveListenerOptions`

##### Returns [#returns-82]

`void`

##### Inherited from [#inherited-from-159]

`PixiContainer.removeEventListener`

***

### removeFromParent() [#removefromparent]

\> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-83]

`void`

#### Example [#example-103]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-35]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a new parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For parent removing children

#### Inherited from [#inherited-from-160]

`PixiContainer.removeFromParent`

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-14]

##### T [#t-6]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-54]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-84]

`this`

#### Inherited from [#inherited-from-161]

`PixiContainer.removeListener`

***

### reparentChild() [#reparentchild]

\> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-55]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-85]

`U`\[`0`]

The first child that was reparented

#### Example [#example-104]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-36]

* [Container#reparentChildAt](/jsdoc/pixi-vn/index/classes/Container#reparentchildat) For index-specific reparenting
* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For simple parenting

#### Inherited from [#inherited-from-162]

`PixiContainer.reparentChild`

***

### reparentChildAt() [#reparentchildat]

\> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-16]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-56]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-86]

`U`

The reparented child

#### Example [#example-105]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-37]

* [Container#reparentChild](/jsdoc/pixi-vn/index/classes/Container#reparentchild) For appending reparented children
* [Container#addChildAt](/jsdoc/pixi-vn/index/classes/Container#addchildat) For simple indexed parenting

#### Inherited from [#inherited-from-163]

`PixiContainer.reparentChildAt`

***

### replaceChild() [#replacechild]

\> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-17]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-57]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-87]

`void`

#### Inherited from [#inherited-from-164]

`PixiContainer.replaceChild`

***

### setChildIndex() [#setchildindex]

\> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-58]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-88]

`void`

#### Example [#example-106]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-38]

* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current index
* [Container#swapChildren](/jsdoc/pixi-vn/index/classes/Container#swapchildren) For swapping positions

#### Inherited from [#inherited-from-165]

`PixiContainer.setChildIndex`

***

### setFromMatrix() [#setfrommatrix]

\> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-59]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-89]

`void`

#### Example [#example-107]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-39]

* [Container#updateTransform](/jsdoc/pixi-vn/index/classes/Container#updatetransform) For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-166]

`PixiContainer.setFromMatrix`

***

### setMask() [#setmask]

\> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-60]

##### options [#options-5]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-90]

`void`

#### Example [#example-108]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-40]

* [Container#mask](/jsdoc/pixi-vn/index/classes/VideoSprite#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-167]

`PixiContainer.setMask`

***

### setMemory() [#setmemory]

\> **setMemory**(`_value`): `void` | `Promise`\<`void`>

Defined in: [src/canvas/classes/CanvasBaseItem.ts:47](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/classes/CanvasBaseItem.ts#L47)

This method set the memory of the canvas element.

#### Parameters [#parameters-61]

##### \_value [#_value]

`T2`

#### Returns [#returns-91]

`void` | `Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Inherited from [#inherited-from-168]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem).[`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory)

***

### setSize() [#setsize]

\> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height.
This is more efficient than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-62]

##### value [#value-18]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a \[Size]Size object.

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided.

#### Returns [#returns-92]

`void`

#### Example [#example-109]

```ts
// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100
```

#### Inherited from [#inherited-from-169]

`PixiContainer.setSize`

***

### swapChildren() [#swapchildren]

\> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-18]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-63]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-93]

`void`

#### Example [#example-110]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-41]

* [Container#setChildIndex](/jsdoc/pixi-vn/index/classes/Container#setchildindex) For direct index placement
* [Container#getChildIndex](/jsdoc/pixi-vn/index/classes/Container#getchildindex) For getting current positions

#### Inherited from [#inherited-from-170]

`PixiContainer.swapChildren`

***

### toGlobal() [#toglobal]

\> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-19]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-64]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-1]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-94]

`P`

The global position

#### Example [#example-111]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-42]

* [Container#toLocal](/jsdoc/pixi-vn/index/classes/VideoSprite#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-171]

`PixiContainer.toGlobal`

***

### toLocal() [#tolocal]

\> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-20]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-65]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-2]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-95]

`P`

A point object representing the position in local space

#### Example [#example-112]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-43]

* [Container#toGlobal](/jsdoc/pixi-vn/index/classes/VideoSprite#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn/index/classes/VideoSprite#getglobalposition) For container position

#### Inherited from [#inherited-from-172]

`PixiContainer.toLocal`

***

### updateLocalTransform() [#updatelocaltransform]

\> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-96]

`void`

#### Inherited from [#inherited-from-173]

`PixiContainer.updateLocalTransform`

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-66]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-97]

`this`

This container, for chaining

#### Example [#example-113]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-44]

* [Container#setFromMatrix](/jsdoc/pixi-vn/index/classes/Container#setfrommatrix) For matrix-based transforms
* [Container#position](#position) For direct position access

#### Inherited from [#inherited-from-174]

`PixiContainer.updateTransform`


# Interface: CanvasBaseItemMemory (/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)



Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L4)

Interface for the canvas base memory

## Extended by [#extended-by]

* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)
* [`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)
* [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

## Properties [#properties]

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L14)

***

### parentLabel? [#parentlabel]

\> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

***

### pixivnId [#pixivnid]

\> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

***

### zIndex? [#zindex]

\> `optional` &#x2A;*zIndex?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L15)


# Interface: CanvasGameState (/jsdoc/pixi-vn/index/interfaces/CanvasGameState)



Defined in: [src/canvas/interfaces/CanvasGameState.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L6)

Interface exported canvas

## Properties [#properties]

### ~~elementAliasesOrder~~ [#elementaliasesorder]

\> **elementAliasesOrder**: `string`\[]

Defined in: [src/canvas/interfaces/CanvasGameState.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L14)

#### Deprecated [#deprecated]

***

### elements [#elements]

\> **elements**: `object`

Defined in: [src/canvas/interfaces/CanvasGameState.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L9)

#### Index Signature [#index-signature]

\[`alias`: `string`]: [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

***

### stage [#stage]

\> **stage**: `Partial`\<[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)>

Defined in: [src/canvas/interfaces/CanvasGameState.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L10)

***

### tickers [#tickers]

\> **tickers**: `object`

Defined in: [src/canvas/interfaces/CanvasGameState.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L7)

#### Index Signature [#index-signature-1]

\[`id`: `string`]: [`TickerHistory`](/jsdoc/pixi-vn/index/interfaces/TickerHistory)\<`any`>

***

### tickersSteps [#tickerssteps]

\> **tickersSteps**: `object`

Defined in: [src/canvas/interfaces/CanvasGameState.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L8)

#### Index Signature [#index-signature-2]

\[`alias`: `string`]: `object`

***

### tickersToCompleteOnStepEnd [#tickerstocompleteonstepend]

\> **tickersToCompleteOnStepEnd**: `object`

Defined in: [src/canvas/interfaces/CanvasGameState.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasGameState.ts#L15)

#### stepAlias [#stepalias]

\> **stepAlias**: `object`\[]

#### tikersIds [#tikersids]

\> **tikersIds**: `object`\[]


# Interface: CanvasManagerInterface (/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface)



Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L25)

## Properties [#properties]

### app [#app]

\> `readonly` **app**: `Application`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L30)

The PIXI Application instance.
It not recommended to use this property directly.

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L93)

The children of the canvas.

***

### currentTickers [#currenttickers]

\> `readonly` **currentTickers**: `Map`\<`string`, [`TickerInfo`](/jsdoc/pixi-vn/index/interfaces/TickerInfo)\<`any`>>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:215](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L215)

Currently tickers that are running.

***

### currentTickersSteps [#currenttickerssteps]

\> `readonly` **currentTickersSteps**: `Map`\<`string`, `Map`\<`string`, [`TickersSequence`](/jsdoc/pixi-vn/index/interfaces/TickersSequence)>>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:219](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L219)

The steps of the tickers

***

### gameLayer [#gamelayer]

\> `readonly` **gameLayer**: `Container`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L35)

The PIXI Container that contains all the canvas elements.

***

### height [#height]

\> **height**: `number`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L48)

The height of the canvas.

***

### isInitialized [#isinitialized]

\> `readonly` **isInitialized**: `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:39](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L39)

If the manager is initialized.

***

### screen [#screen]

\> `readonly` **screen**: `Rectangle`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L52)

The screen of the canvas (Application.screen).

***

### width [#width]

\> **width**: `number`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L44)

The width of the canvas.

## Methods [#methods]

### add() [#add]

\> **add**(`alias`, `canvasComponent`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:135](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L135)

Add a canvas element to the canvas.
If there is a canvas element with the same alias, all "style", zIndex, and [TickerBase](/jsdoc/pixi-vn/index/classes/TickerBase) will be transferred to the new canvas element,
and the old canvas element will be removed.

#### Parameters [#parameters]

##### alias [#alias]

`string`

The alias to identify the component.

##### canvasComponent [#canvascomponent]

[`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The component to add.

##### options? [#options]

The options of the canvas element.

###### ignoreOldStyle? [#ignoreoldstyle]

`boolean`

If there is a canvas element with the same alias, the "style" of the old canvas element will be imported to the new canvas element.

**Default**

```ts
false
```

###### zIndex? [#zindex]

`number`

The zIndex of the canvas element.

**Default**

```ts
undefined
```

#### Returns [#returns]

`void`

#### Example [#example]

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

***

### addHtmlLayer() [#addhtmllayer]

\> **addHtmlLayer**(`id`, `element`, `style?`): `HTMLDivElement`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:467](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L467)

Add a HTML layer to the canvas.

#### Parameters [#parameters-1]

##### id [#id]

`string`

The id of the layer.

##### element [#element]

`HTMLElement`

The html element to be added.

##### style? [#style]

`Partial`\<`Pick`\<`CSSStyleDeclaration`, `"pointerEvents"` | `"position"` | `"userSelect"`>>

The style of the layer.

#### Returns [#returns-1]

`HTMLDivElement`

#### Default [#default]

```ts
{ position: "absolute", pointerEvents: "none", userSelect: "none" }.
```

#### Example [#example-1]

```tsx
const root = document.getElementById('root')
if (!root) {
    throw new Error('root element not found')
}
const htmlLayer = canvas.addHtmlLayer("ui", root, {
   position: "absolute",
   pointerEvents: "none"
})
const reactRoot = createRoot(htmlLayer)
reactRoot.render(
    <App />
)
```

***

### addLayer() [#addlayer]

\> **addLayer**(`label`, `layer`): [`Layer`](/jsdoc/pixi-vn/index/type-aliases/Layer) | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:426](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L426)

Add a layer to the canvas.

#### Parameters [#parameters-2]

##### label [#label]

`string`

The label of the layer.

##### layer [#layer]

`Container`

The layer to be added.

#### Returns [#returns-2]

[`Layer`](/jsdoc/pixi-vn/index/type-aliases/Layer) | `undefined`

The layer.

#### Example [#example-2]

```ts
const uiLayer = new Container();
canvas.addLayer("ui", uiLayer);
```

***

### addTicker() [#addticker]

\> **addTicker**\<`TArgs`>(`canvasElementAlias`, `ticker`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:239](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L239)

Run a ticker. You can run multiple addTicker with the same alias and different tickerClasses.
If you run a ticker with the same alias and tickerClass, the old ticker will be removed.
If already exists a sequence of tickers with the same alias, it will be removed.

#### Type Parameters [#type-parameters]

##### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

#### Parameters [#parameters-3]

##### canvasElementAlias [#canvaselementalias]

`string` | `string`\[]

The alias of the canvas element that will use the ticker.

##### ticker [#ticker]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`>

The ticker class to be run.

#### Returns [#returns-3]

`string` | `undefined`

The id of the ticker that was added.

#### Example [#example-3]

```ts
canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))
```

***

### addTickersSequence() [#addtickerssequence]

\> **addTickersSequence**(`alias`, `steps`, `currentStepNumber?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:259](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L259)

Run a sequence of tickers.

#### Parameters [#parameters-4]

##### alias [#alias-1]

`string`

The alias of canvas element that will use the tickers.

##### steps [#steps]

(`"repeat"` | [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`> | [`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType))\[]

The steps of the tickers.

##### currentStepNumber? [#currentstepnumber]

`number`

The current step number. It is used to continue the sequence of tickers.

#### Returns [#returns-4]

`string` | `undefined`

The id of tickers.

#### Example [#example-4]

```ts
canvas.addTickersSequence("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
    Pause(1), // 1 second
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
    Repeat,
])
```

***

### animate() [#animate]

#### Call Signature [#call-signature]

\> **animate**\<`T`>(`components`, `keyframes`, `options?`, `priority?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:387](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L387)

Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function.
So Pixi’VN will save the animation state in saves.

##### Type Parameters [#type-parameters-1]

###### T [#t]

`T` *extends* [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The type of Pixi’VN component(s) being animated.

##### Parameters [#parameters-5]

###### components [#components]

`string` | `T` | (`string` | `T`)\[]

The PixiJS component(s) to animate. This can be a single component, an array of components, or a string representing the component's alias.

###### keyframes [#keyframes]

`KeyframesType`\<`T`>

This is an object containing the properties to animate and the values to reach.

###### options? [#options-1]

`AnimationOptions`

[`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker.

###### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

##### Returns [#returns-5]

`string` | `undefined`

The function returns the ID of the ticker created to animate the component(s).

##### Default [#default-1]

```ts
UPDATE_PRIORITY.NORMAL
```

#### Call Signature [#call-signature-1]

\> **animate**\<`T`>(`components`, `sequence`, `options?`, `priority?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:406](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L406)

Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function.
So Pixi’VN will save the animation state in saves.

##### Type Parameters [#type-parameters-2]

###### T [#t-1]

`T` *extends* [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The type of Pixi’VN component(s) being animated.

##### Parameters [#parameters-6]

###### components [#components-1]

`string` | `T`

The PixiJS component(s) to animate. This can be a single component, an array of components, or a string representing the component's alias.

###### sequence [#sequence]

(`ObjectSegment`\<`T`> | `ObjectSegmentWithTransition`\<`T`>)\[]

The sequence of keyframes to animate the component(s) with.

###### options? [#options-2]

`SequenceOptions`

[`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker.

###### priority? [#priority-1]

`UPDATE_PRIORITY`

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

##### Returns [#returns-6]

`string` | `undefined`

The function returns the ID of the ticker created to animate the component(s).

##### Default [#default-2]

```ts
UPDATE_PRIORITY.NORMAL
```

***

### canvasElementIsOnCanvas() [#canvaselementisoncanvas]

\> **canvasElementIsOnCanvas**\<`T`>(`pixiElement`): `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:187](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L187)

Check if a DisplayObject is on the canvas.

#### Type Parameters [#type-parameters-3]

##### T [#t-2]

`T` *extends* `Container`\<`ContainerChild`>

#### Parameters [#parameters-7]

##### pixiElement [#pixielement]

`T`

The DisplayObject to be checked.

#### Returns [#returns-7]

`boolean`

If the DisplayObject is on the canvas.

***

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:494](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L494)

Clear the canvas and the tickers.

#### Returns [#returns-8]

`void`

***

### completeTickerOnStepEnd() [#completetickeronstepend]

\> **completeTickerOnStepEnd**(`step`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:357](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L357)

Add a ticker that must be completed before the next step.
This method is used for example into a transition between scenes.

#### Parameters [#parameters-8]

##### step [#step]

The step that the ticker must be completed before the next step.

###### alias? [#alias-2]

`string`

If is a sequence of tickers, the alias of the sequence of tickers.

###### id [#id-1]

`string`

The id of the step.

#### Returns [#returns-9]

`void`

***

### copyCanvasElementProperty() [#copycanvaselementproperty]

\> **copyCanvasElementProperty**\<`T`>(`oldAlias`, `newAlias`, `options?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:101](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L101)

Copy the properties of an old canvas element to a new canvas element.

#### Type Parameters [#type-parameters-4]

##### T [#t-3]

`T` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

#### Parameters [#parameters-9]

##### oldAlias [#oldalias]

`string` | `T` | [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`T`>

Old alias

##### newAlias [#newalias]

`string` | [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`T`>

New alias

##### options? [#options-3]

The options of the copy.

###### ignoreProperties? [#ignoreproperties]

(`defaultProperties`) => `string`\[]

If provided, the properties returned by this function will not be copied from the old canvas element to the new canvas element.

#### Returns [#returns-10]

`Promise`\<`void`>

***

### editAlias() [#editalias]

\> **editAlias**(`oldAlias`, `newAlias`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:198](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L198)

Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.

#### Parameters [#parameters-10]

##### oldAlias [#oldalias-1]

`string`

The old alias of the component to edit.

##### newAlias [#newalias-1]

`string`

The new alias of the component.

##### options? [#options-4]

The options of the canvas element.

###### ignoreTickers? [#ignoretickers]

`boolean`

If true, the tickers that are connected to the canvas element will not be transferred.

**Default**

```ts
false
```

#### Returns [#returns-11]

`void`

***

### export() [#export]

\> **export**(): [`CanvasGameState`](/jsdoc/pixi-vn/index/interfaces/CanvasGameState)

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:502](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L502)

Export the canvas and the tickers to an object.

#### Returns [#returns-12]

[`CanvasGameState`](/jsdoc/pixi-vn/index/interfaces/CanvasGameState)

The object.

***

### extractImage() [#extractimage]

\> **extractImage**(): `Promise`\<`string`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:489](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L489)

Extract the canvas as an image.

#### Returns [#returns-13]

`Promise`\<`string`>

The image as a base64 string.

***

### find() [#find]

\> **find**\<`T`>(`alias`): `T` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:181](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L181)

Get a canvas element by the alias.

#### Type Parameters [#type-parameters-5]

##### T [#t-4]

`T` *extends* [`CanvasBaseInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

#### Parameters [#parameters-11]

##### alias [#alias-3]

`string`

The alias to identify the component.

#### Returns [#returns-14]

`T` | `undefined`

The canvas element. If the component does not exist, it will return `undefined`.

#### Example [#example-5]

```ts
const sprite = canvas.find<Sprite>("bunny");
```

***

### findTicker() [#findticker]

\> **findTicker**\<`TArgs`>(`tickerId`, `args?`): [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:226](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L226)

Find a ticker by its id.

#### Type Parameters [#type-parameters-6]

##### TArgs [#targs-1]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

#### Parameters [#parameters-12]

##### tickerId [#tickerid]

`string`

The id of the ticker to be found.

##### args? [#args]

`TArgs`

The args of the ticker.

#### Returns [#returns-15]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

The ticker if found, undefined otherwise.

***

### forceCompletionOfTicker() [#forcecompletionofticker]

\> **forceCompletionOfTicker**(`id`, `alias?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:373](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L373)

This method force the completion of the tickers that are running.
This funcions is called in the next step.

#### Parameters [#parameters-13]

##### id [#id-2]

`string`

The id of the ticker. If the alias provided, the id is the id of the sequence of tickers.

##### alias? [#alias-4]

`string`

The alias of the sequence of tickers.

#### Returns [#returns-16]

`Promise`\<`void`>

***

### getHtmlLayer() [#gethtmllayer]

\> **getHtmlLayer**(`id`): `HTMLElement` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:481](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L481)

Get a HTML layer from the canvas.

#### Parameters [#parameters-14]

##### id [#id-3]

`string`

The id of the layer.

#### Returns [#returns-17]

`HTMLElement` | `undefined`

***

### getLayer() [#getlayer]

\> **getLayer**(`label`): [`Layer`](/jsdoc/pixi-vn/index/type-aliases/Layer) | `null`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:436](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L436)

Get a layer from the canvas.

#### Parameters [#parameters-15]

##### label [#label-1]

`string`

The label of the layer.

#### Returns [#returns-18]

[`Layer`](/jsdoc/pixi-vn/index/type-aliases/Layer) | `null`

The layer.

#### Example [#example-6]

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

***

### init() [#init]

\> **init**(`element`, `options`, `devtoolsOptions?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L74)

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

#### Parameters [#parameters-16]

##### element [#element-1]

`HTMLElement`

The html element where I will put the canvas. Example: document.body

##### options [#options-5]

`Partial`\<[`ApplicationOptions`](/jsdoc/pixi-vn/index/interfaces/ApplicationOptions)> & `object`

The options of PixiJS Application

##### devtoolsOptions? [#devtoolsoptions]

`Devtools`

The options of the devtools. You can read more about it in the [PixiJS Devtools documentation](https://pixijs.io/devtools/docs/plugin/)

#### Returns [#returns-19]

`Promise`\<`void`>

#### Example [#example-7]

```ts
const body = document.body
if (!body) {
    throw new Error('body element not found')
}
await canvas.init(body, {
    width: 1920,
    height: 1080,
    backgroundColor: "#303030"
})
```

***

### ~~isTickerPaused()~~ [#istickerpaused]

\> **isTickerPaused**(`alias`, `tickerId?`): `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:340](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L340)

#### Parameters [#parameters-17]

##### alias [#alias-5]

`string`

The alias of the canvas element that will use the ticker.

##### tickerId? [#tickerid-1]

`string`

The ticker that will be checked.

#### Returns [#returns-20]

`boolean`

If the ticker is paused.

#### Deprecated [#deprecated]

Use [findTicker](#findticker)(id).paused
Check if a ticker is paused.

***

### onTickerComplete() [#ontickercomplete]

\> **onTickerComplete**(`tickerId`, `options`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:508](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L508)

#### Parameters [#parameters-18]

##### tickerId [#tickerid-2]

`string`

##### options [#options-6]

###### aliasToRemoveAfter [#aliastoremoveafter]

`string`\[]

###### ignoreTickerSteps? [#ignoretickersteps]

`boolean`

###### stopTicker? [#stopticker]

`boolean`

###### tickerAliasToResume [#tickeraliastoresume]

`string`\[]

###### tickerIdToResume [#tickeridtoresume]

`string`\[]

#### Returns [#returns-21]

`void`

***

### pause() [#pause]

\> **pause**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:346](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L346)

Pause the rendering of gameLayer and pause currently running tickers.
Use [resume](#resume) to restore rendering and resume only
the tickers paused by this method.

#### Returns [#returns-22]

`void`

***

### pauseTicker() [#pauseticker]

\> **pauseTicker**(`filters`): `string`\[]

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:293](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L293)

Pause a ticker. If a paused ticker have a time to be removed, it will be removed after the time.

#### Parameters [#parameters-19]

##### filters [#filters]

\{ `canvasAlias`: `string`; `tickerIdsExcluded?`: `string`\[]; } | \{ `id`: `string` | `string`\[]; }

The filters to pause the ticker.

###### Type Literal [#type-literal]

\{ `canvasAlias`: `string`; `tickerIdsExcluded?`: `string`\[]; }

The filters to pause the ticker.

###### canvasAlias [#canvasalias]

`string`

The alias of the canvas element that will use the ticker.
Will pause all tickers that are connected to this canvas element.

###### tickerIdsExcluded? [#tickeridsexcluded]

`string`\[]

Ticker ids excluded from the pause. If not provided, all tickers will be paused.

***

###### Type Literal [#type-literal-1]

\{ `id`: `string` | `string`\[]; }

The filters to pause the ticker.

###### id [#id-4]

`string` | `string`\[]

The id of the ticker to be paused. If provided, only this ticker will be paused.

#### Returns [#returns-23]

`string`\[]

The ids of the paused tickers.

***

### remove() [#remove]

\> **remove**(`alias`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:162](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L162)

Remove a canvas element from the canvas.
And remove all tickers that are not connected to any canvas element.

#### Parameters [#parameters-20]

##### alias [#alias-6]

`string` | `string`\[]

The alias of the canvas element to be removed.

##### options? [#options-7]

The options of the canvas element.

###### ignoreTickers? [#ignoretickers-1]

`boolean`

If true, the tickers that are connected to the canvas element will not be removed.

**Default**

```ts
false
```

#### Returns [#returns-24]

`void`

#### Example [#example-8]

```ts
canvas.remove("bunny");
```

***

### removeAll() [#removeall]

\> **removeAll**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:191](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L191)

Remove all canvas elements from the canvas.

#### Returns [#returns-25]

`void`

***

### removeAllTickers() [#removealltickers]

\> **removeAllTickers**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:282](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L282)

Remove all tickers from the canvas.

#### Returns [#returns-26]

`void`

***

### removeHtmlLayer() [#removehtmllayer]

\> **removeHtmlLayer**(`id`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:476](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L476)

Get a HTML layer from the canvas.

#### Parameters [#parameters-21]

##### id [#id-5]

`string`

The id of the layer to be removed.

#### Returns [#returns-27]

`void`

***

### removeLayer() [#removelayer]

\> **removeLayer**(`label`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:445](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L445)

Remove a layer from the canvas.

#### Parameters [#parameters-22]

##### label [#label-2]

`string`

The label of the layer to be removed.

#### Returns [#returns-28]

`void`

#### Example [#example-9]

```ts
canvas.removeLayer("ui");
```

***

### removeTicker() [#removeticker]

\> **removeTicker**(`tickerId`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:287](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L287)

Remove a ticker by the id.

#### Parameters [#parameters-23]

##### tickerId [#tickerid-3]

`string` | `string`\[]

The id or an array of ids of the ticker to be removed.

#### Returns [#returns-29]

`void`

***

### restore() [#restore]

\> **restore**(`data`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:507](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L507)

Restore the canvas and the tickers from an object.

#### Parameters [#parameters-24]

##### data [#data]

`object`

The object.

#### Returns [#returns-30]

`Promise`\<`void`>

***

### resume() [#resume]

\> **resume**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:351](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L351)

Resume the rendering of gameLayer and resume tickers that were paused by
[pause](#pause).

#### Returns [#returns-31]

`void`

***

### resumeTicker() [#resumeticker]

\> **resumeTicker**(`filters`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L317)

Resume a ticker.

#### Parameters [#parameters-25]

##### filters [#filters-1]

\{ `canvasAlias`: `string`; } | \{ `id`: `string` | `string`\[]; }

The filters to resume the ticker.

###### Type Literal [#type-literal-2]

\{ `canvasAlias`: `string`; }

The filters to resume the ticker.

###### canvasAlias [#canvasalias-1]

`string`

The alias of the canvas element that will use the ticker.
Will resume all tickers that are connected to this canvas element.

***

###### Type Literal [#type-literal-3]

\{ `id`: `string` | `string`\[]; }

The filters to resume the ticker.

###### id [#id-6]

`string` | `string`\[]

The id of the ticker to be resumed. If provided, only this ticker will be resumed.

#### Returns [#returns-32]

`void`

***

### transferTickers() [#transfertickers]

\> **transferTickers**(`oldAlias`, `newAlias`, `mode?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:120](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L120)

Transfer the tickers from an old alias to a new alias.

#### Parameters [#parameters-26]

##### oldAlias [#oldalias-2]

`string`

Old alias

##### newAlias [#newalias-2]

`string`

New alias

##### mode? [#mode]

`"move"` | `"duplicate"`

If "move", the old alias will be removed from the ticker. If "duplicate", the old alias will be kept in the ticker.

#### Returns [#returns-33]

`void`

***

### ~~unlinkComponentFromTicker()~~ [#unlinkcomponentfromticker]

\> **unlinkComponentFromTicker**(`alias`, `ticker?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:275](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/CanvasManagerInterface.ts#L275)

Remove a connection between a canvas element and a ticker.
And remove the ticker if there is no canvas element connected to it.

#### Parameters [#parameters-27]

##### alias [#alias-7]

`string` | `string`\[]

The alias of the canvas element that will use the ticker.

##### ticker? [#ticker-1]

`string` | (() => [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`>)

The ticker class to be removed.

#### Returns [#returns-34]

`void`

#### Example [#example-10]

```ts
canvas.unlinkComponentFromTicker("alien", RotateTicker)
```

#### Deprecated [#deprecated-1]


# Interface: ChannelOptions (/jsdoc/pixi-vn/index/interfaces/ChannelOptions)



Defined in: [src/sound/interfaces/SoundOptions.ts:67](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L67)

## Extends [#extends]

* `Pick`\<[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions), `"filters"` | `"muted"` | `"volume"`>

## Properties [#properties]

### background? [#background]

\> `optional` &#x2A;*background?**: `boolean`

Defined in: [src/sound/interfaces/SoundOptions.ts:73](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L73)

Whether this channel is a background channel.
Background channels are special: media playing on them is not stopped
when a scene changes, but continues in the background.

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `ToneAudioNode`\<`ToneWithContextOptions`>\[]

Defined in: [src/sound/interfaces/SoundOptions.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L34)

A collection of audio filters/effects to apply to this sound.

Install "tone" for the full list of available filters.

#### Example [#example]

```ts
import * as Tone from "tone";

const filters = [new Tone.FeedbackDelay("8n", 0.5)];
```

#### Inherited from [#inherited-from]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`filters`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#filters)

***

### ~~muted?~~ [#muted]

\> `optional` &#x2A;*muted?**: `boolean`

Defined in: [src/sound/interfaces/SoundOptions.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L42)

#### Deprecated [#deprecated]

Use [mute](/jsdoc/pixi-vn/index/interfaces/SoundOptions#mute) instead.

#### Inherited from [#inherited-from-1]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`muted`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#muted)

***

### pan? [#pan]

\> `optional` &#x2A;*pan?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:79](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L79)

The stereo pan position for this channel in the range \[-1, 1].
-1 is full left, 0 is centre, 1 is full right.
Defaults to 0.

***

### volume? [#volume]

\> `optional` &#x2A;*volume?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L21)

The volume of this sound in the linear range \[0, 1], where 0 is silence
and 1 is full volume.  This is converted to decibels internally before
being passed to the Tone.js Player.

#### Inherited from [#inherited-from-2]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`volume`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#volume)


# Interface: CharacterEmotionId (/jsdoc/pixi-vn/index/interfaces/CharacterEmotionId)



Defined in: [src/characters/types/CharacterEmotionId.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/types/CharacterEmotionId.ts#L6)

CharacterEmotionId is used to identify a character together with an emotion.

## Properties [#properties]

### emotion [#emotion]

\> **emotion**: `string`

Defined in: [src/characters/types/CharacterEmotionId.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/types/CharacterEmotionId.ts#L8)

***

### id [#id]

\> **id**: `string`

Defined in: [src/characters/types/CharacterEmotionId.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/types/CharacterEmotionId.ts#L7)


# Interface: CharacterInterface (/jsdoc/pixi-vn/index/interfaces/CharacterInterface)



Defined in: [src/characters/interfaces/CharacterInterface.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/interfaces/CharacterInterface.ts#L56)

CharacterInterface is the interface that character must implement or extend.
So if you want to create your own Character, you must override this interface, implement or extend it and extend the [CharacterStoredClass](/jsdoc/pixi-vn/index/classes/CharacterStoredClass) class.
You can override this interface to add your own props.

## Example [#example]

```ts
// pixi-vn.d.ts
declare module '@drincs/pixi-vn' {
    interface CharacterInterface {
        name: string
        surname?: string
        age?: number
        icon?: string
        color?: string
    }
}
// You Character class
export class Character extends CharacterStoredClass implements CharacterInterface {
    constructor(id: string, props: CharacterProps) {
        super(id)
        this.defaultName = props.name
        this.defaultSurname = props.surname
        this.defaultAge = props.age
        this.icon = props.icon
        this.color = props.color
    }
    readonly defaultName: string = ""
    get name(): string {
        return this.getStorageProperty<string>("name") || this.defaultName
    }
    set name(value: string | undefined) {
        this.setStorageProperty("name", value)
    }
    readonly defaultSurname?: string
    get surname(): string | undefined {
        return this.getStorageProperty<string>("surname") || this.defaultSurname
    }
    set surname(value: string | undefined) {
        this.setStorageProperty("surname", value)
    }
    readonly defaultAge?: number | undefined
    get age(): number | undefined {
        return this.getStorageProperty<number>("age") || this.defaultAge
    }
    set age(value: number | undefined) {
        this.setStorageProperty("age", value)
    }
    readonly icon?: string
    get icon(): string | undefined {
        return this._icon
    }
    readonly color?: string | undefined
}
```

## Properties [#properties]

### id [#id]

\> **id**: `string`

Defined in: [src/characters/interfaces/CharacterInterface.ts:60](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/interfaces/CharacterInterface.ts#L60)

The id of the character. It must be unique.


# Interface: ChoiceInterface (/jsdoc/pixi-vn/index/interfaces/ChoiceInterface)



Defined in: [src/narration/interfaces/ChoiceInterface.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L6)

## Properties [#properties]

### autoSelect? [#autoselect]

\> `optional` &#x2A;*autoSelect?**: `boolean`

Defined in: [src/narration/interfaces/ChoiceInterface.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L30)

If this is true and if is the only choice, it will be automatically selected, and call/jump to the label.

***

### closeCurrentLabel? [#closecurrentlabel]

\> `optional` &#x2A;*closeCurrentLabel?**: `boolean`

Defined in: [src/narration/interfaces/ChoiceInterface.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L34)

If true, the current label will be closed

***

### label [#label]

\> **label**: `string`

Defined in: [src/narration/interfaces/ChoiceInterface.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L14)

Label Id to be opened when the option is selected

***

### oneTime? [#onetime]

\> `optional` &#x2A;*oneTime?**: `boolean`

Defined in: [src/narration/interfaces/ChoiceInterface.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L22)

If this is true, the choice can only be made once.

***

### onlyHaveNoChoice? [#onlyhavenochoice]

\> `optional` &#x2A;*onlyHaveNoChoice?**: `boolean`

Defined in: [src/narration/interfaces/ChoiceInterface.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L26)

If this is true, the choice can see only if there are no other choices. For example, all choices are one-time choices and they are already selected.

***

### props? [#props]

\> `optional` &#x2A;*props?**: [`StorageObjectType`](/jsdoc/pixi-vn/index/type-aliases/StorageObjectType)

Defined in: [src/narration/interfaces/ChoiceInterface.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L38)

Properties to be passed to the label and olther parameters that you can use when get all the choice menu options.

***

### text [#text]

\> **text**: `string` | `string`\[]

Defined in: [src/narration/interfaces/ChoiceInterface.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L10)

Text to be displayed in the menu

***

### type [#type]

\> **type**: `"close"` | [`LabelRunModeType`](/jsdoc/pixi-vn/index/type-aliases/LabelRunModeType)

Defined in: [src/narration/interfaces/ChoiceInterface.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/ChoiceInterface.ts#L18)

Type of the label to be opened


# Interface: ChoiceOptionInterface (/jsdoc/pixi-vn/index/interfaces/ChoiceOptionInterface)



Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L6)

## Extends [#extends]

* `Omit`\<`ChoiceInterface`, `"label"` | `"type"` | `"closeCurrentLabel"`>

## Properties [#properties]

### autoSelect? [#autoselect]

\> `optional` &#x2A;*autoSelect?**: `boolean`

Defined in: [src/pixi-vn.d.ts:66](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L66)

If `true` and it is the only choice, it will be selected automatically.

#### Inherited from [#inherited-from]

`Omit.autoSelect`

***

### label [#label]

\> **label**: `string`

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L11)

Label Id to be opened when the option is selected

***

### oneTime? [#onetime]

\> `optional` &#x2A;*oneTime?**: `boolean`

Defined in: [src/pixi-vn.d.ts:57](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L57)

If `true`, the choice can only be made once.

#### Inherited from [#inherited-from-1]

`Omit.oneTime`

***

### onlyHaveNoChoice? [#onlyhavenochoice]

\> `optional` &#x2A;*onlyHaveNoChoice?**: `boolean`

Defined in: [src/pixi-vn.d.ts:62](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L62)

If `true`, the choice is shown only if there are no other choices.
For example, all choices are one-time choices and they are already selected.

#### Inherited from [#inherited-from-2]

`Omit.onlyHaveNoChoice`

***

### props? [#props]

\> `optional` &#x2A;*props?**: `any`

Defined in: [src/pixi-vn.d.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L74)

Properties to be passed to the label and olther parameters that you can use when get all the choice menu options.

#### Inherited from [#inherited-from-3]

`Omit.props`

***

### text [#text]

\> **text**: `string` | `string`\[]

Defined in: [src/pixi-vn.d.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L45)

Text to be displayed in the menu

#### Inherited from [#inherited-from-4]

`Omit.text`

***

### type [#type]

\> **type**: [`LabelRunModeType`](/jsdoc/pixi-vn/index/type-aliases/LabelRunModeType)

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L15)

Type of the label to be opened


# Interface: CloseChoiceOptionInterface (/jsdoc/pixi-vn/index/interfaces/CloseChoiceOptionInterface)



Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L18)

## Extends [#extends]

* `Omit`\<`ChoiceInterface`, `"label"` | `"type"` | `"closeCurrentLabel"`>

## Properties [#properties]

### autoSelect? [#autoselect]

\> `optional` &#x2A;*autoSelect?**: `boolean`

Defined in: [src/pixi-vn.d.ts:66](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L66)

If `true` and it is the only choice, it will be selected automatically.

#### Inherited from [#inherited-from]

`Omit.autoSelect`

***

### closeCurrentLabel? [#closecurrentlabel]

\> `optional` &#x2A;*closeCurrentLabel?**: `boolean`

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L27)

If true, the current label will be closed

***

### oneTime? [#onetime]

\> `optional` &#x2A;*oneTime?**: `boolean`

Defined in: [src/pixi-vn.d.ts:57](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L57)

If `true`, the choice can only be made once.

#### Inherited from [#inherited-from-1]

`Omit.oneTime`

***

### onlyHaveNoChoice? [#onlyhavenochoice]

\> `optional` &#x2A;*onlyHaveNoChoice?**: `boolean`

Defined in: [src/pixi-vn.d.ts:62](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L62)

If `true`, the choice is shown only if there are no other choices.
For example, all choices are one-time choices and they are already selected.

#### Inherited from [#inherited-from-2]

`Omit.onlyHaveNoChoice`

***

### props? [#props]

\> `optional` &#x2A;*props?**: `any`

Defined in: [src/pixi-vn.d.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L74)

Properties to be passed to the label and olther parameters that you can use when get all the choice menu options.

#### Inherited from [#inherited-from-3]

`Omit.props`

***

### text [#text]

\> **text**: `string` | `string`\[]

Defined in: [src/pixi-vn.d.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/pixi-vn.d.ts#L45)

Text to be displayed in the menu

#### Inherited from [#inherited-from-4]

`Omit.text`

***

### type [#type]

\> **type**: `"close"`

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L23)

Type of the label to be opened


# Interface: ContainerMemory<C> (/jsdoc/pixi-vn/index/interfaces/ContainerMemory)



Defined in: [src/canvas/interfaces/memory/ContainerMemory.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ContainerMemory.ts#L10)

Interface for the canvas container memory

## Extends [#extends]

* `ContainerOptions`\<`C`>.[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory).[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Extended by [#extended-by]

* [`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)

## Type Parameters [#type-parameters]

### C [#c]

`C` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) = [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`ContainerOptions.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`ContainerOptions.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`ContainerOptions.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`ContainerOptions.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`ContainerOptions.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`ContainerOptions.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`ContainerOptions.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

`ContainerOptions.alpha`

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-9]

`ContainerOptions.angle`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-10]

`ContainerOptions.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-11]

`ContainerOptions.boundsArea`

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-12]

`ContainerOptions.cacheAsTexture`

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `C`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-13]

`ContainerOptions.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-14]

`ContainerOptions.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-15]

`ContainerOptions.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-16]

`ContainerOptions.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-17]

`ContainerOptions.cursor`

***

### elements [#elements]

\> **elements**: [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)\[]

Defined in: [src/canvas/interfaces/memory/ContainerMemory.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ContainerMemory.ts#L18)

The elements contained in this container

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-18]

`ContainerOptions.eventMode`

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-19]

`ContainerOptions.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-20]

`ContainerOptions.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-21]

`ContainerOptions.hitArea`

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-22]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-23]

`ContainerOptions.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-24]

`ContainerOptions.interactiveChildren`

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-25]

`ContainerOptions.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-26]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`ContainerOptions.mask`

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

`ContainerOptions.onclick`

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-28]

[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

`ContainerOptions.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

`ContainerOptions.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-31]

`ContainerOptions.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-32]

`ContainerOptions.onmousedown`

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-33]

`ContainerOptions.onmouseenter`

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-34]

`ContainerOptions.onmouseleave`

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-35]

`ContainerOptions.onmousemove`

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-36]

`ContainerOptions.onmouseout`

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-37]

`ContainerOptions.onmouseover`

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-38]

`ContainerOptions.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-39]

`ContainerOptions.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-40]

`ContainerOptions.onpointercancel`

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-41]

`ContainerOptions.onpointerdown`

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-42]

`ContainerOptions.onpointerenter`

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-43]

`ContainerOptions.onpointerleave`

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-44]

`ContainerOptions.onpointermove`

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-45]

`ContainerOptions.onpointerout`

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-46]

`ContainerOptions.onpointerover`

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-47]

`ContainerOptions.onpointertap`

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-48]

`ContainerOptions.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-49]

`ContainerOptions.onpointerupoutside`

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-50]

`ContainerOptions.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

`ContainerOptions.onrightclick`

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-52]

`ContainerOptions.onrightdown`

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-53]

`ContainerOptions.onrightup`

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-54]

`ContainerOptions.onrightupoutside`

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-55]

`ContainerOptions.ontap`

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-56]

`ContainerOptions.ontouchcancel`

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-57]

`ContainerOptions.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-58]

`ContainerOptions.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-59]

`ContainerOptions.ontouchmove`

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-60]

`ContainerOptions.ontouchstart`

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-61]

`ContainerOptions.onwheel`

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-62]

`ContainerOptions.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-63]

`ContainerOptions.parent`

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-64]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-68]

`ContainerOptions.pivot`

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-69]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-70]

`ContainerOptions.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-71]

`ContainerOptions.renderable`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-72]

`ContainerOptions.rotation`

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

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

#### Inherited from [#inherited-from-73]

`ContainerOptions.scale`

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-74]

`ContainerOptions.setMask`

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-75]

`ContainerOptions.skew`

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-76]

`ContainerOptions.sortableChildren`

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-77]

`ContainerOptions.sortDirty`

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-78]

`ContainerOptions.tabIndex`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-79]

`ContainerOptions.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-80]

`ContainerOptions.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-81]

`ContainerOptions.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-82]

`ContainerOptions.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-83]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-84]

`ContainerOptions.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#zindex)


# Interface: ContainerOptions<C> (/jsdoc/pixi-vn/index/interfaces/ContainerOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L10)

## Extends [#extends]

* `Omit`\<`PixiContainerOptions`\<`C`>, `"on"`>.[`AnchorExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AnchorExtensionProps).[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Extended by [#extended-by]

* [`ImageContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)

## Type Parameters [#type-parameters]

### C [#c]

`C` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) = [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`Omit.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`Omit.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`Omit.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`Omit.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`Omit.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`Omit.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`Omit.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: [src/canvas/components/AnchorExtension.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L4)

#### Inherited from [#inherited-from-9]

[`AnchorExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AnchorExtensionProps).[`anchor`](/jsdoc/pixi-vn/index/interfaces/AnchorExtensionProps#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-11]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `C`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-14]

`Omit.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-15]

`Omit.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-16]

`Omit.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-17]

`Omit.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-18]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-19]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-20]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-22]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-23]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-25]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-28]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-49]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-61]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-62]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-63]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-64]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-66]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

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

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-71]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-75]

`Omit.tabIndex`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-76]

`Omit.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-77]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-78]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-79]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-80]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-82]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-83]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: DialogueInterface (/jsdoc/pixi-vn/index/interfaces/DialogueInterface)



Defined in: [src/narration/interfaces/DialogueInterface.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/DialogueInterface.ts#L3)

## Properties [#properties]

### character? [#character]

\> `optional` &#x2A;*character?**: `string` | `CharacterInterface`

Defined in: [src/narration/interfaces/DialogueInterface.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/DialogueInterface.ts#L11)

The id of the character that is speaking.

***

### text [#text]

\> **text**: `string` | `string`\[]

Defined in: [src/narration/interfaces/DialogueInterface.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/DialogueInterface.ts#L7)

The text of the dialogue.


# Interface: ExportedSound (/jsdoc/pixi-vn/index/interfaces/ExportedSound)



Defined in: [src/sound/interfaces/SoundGameState.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L6)

## Properties [#properties]

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `SoundFilterMemory`\[]

Defined in: [src/sound/interfaces/SoundGameState.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L8)

***

### options [#options]

\> **options**: [`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions)

Defined in: [src/sound/interfaces/SoundGameState.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L7)


# Interface: ExportedSoundPlay (/jsdoc/pixi-vn/index/interfaces/ExportedSoundPlay)



Defined in: [src/sound/interfaces/SoundGameState.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L17)

## Extends [#extends]

* [`SoundPlay`](/jsdoc/pixi-vn/index/interfaces/SoundPlay)

## Properties [#properties]

### options? [#options]

\> `optional` &#x2A;*options?**: `string` | [`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

Defined in: [src/sound/interfaces/SoundGameState.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L14)

#### Inherited from [#inherited-from]

[`SoundPlay`](/jsdoc/pixi-vn/index/interfaces/SoundPlay).[`options`](/jsdoc/pixi-vn/index/interfaces/SoundPlay#options)

***

### paused [#paused]

\> **paused**: `boolean`

Defined in: [src/sound/interfaces/SoundGameState.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L13)

#### Inherited from [#inherited-from-1]

[`SoundPlay`](/jsdoc/pixi-vn/index/interfaces/SoundPlay).[`paused`](/jsdoc/pixi-vn/index/interfaces/SoundPlay#paused)

***

### sound [#sound]

\> **sound**: [`ExportedSound`](/jsdoc/pixi-vn/index/interfaces/ExportedSound)

Defined in: [src/sound/interfaces/SoundGameState.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L18)

***

### stepIndex [#stepindex]

\> **stepIndex**: `number`

Defined in: [src/sound/interfaces/SoundGameState.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L12)

#### Inherited from [#inherited-from-2]

[`SoundPlay`](/jsdoc/pixi-vn/index/interfaces/SoundPlay).[`stepIndex`](/jsdoc/pixi-vn/index/interfaces/SoundPlay#stepindex)


# Interface: FederatedEvent<N> (/jsdoc/pixi-vn/index/interfaces/FederatedEvent)



Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:105

A DOM-compatible synthetic event implementation for PixiJS's event system.
This class implements the standard DOM Event interface while providing additional
functionality specific to PixiJS events.
\> \[!NOTE] You wont receive an instance of this class directly, but rather a subclass
\> of this class, such as FederatedPointerEvent, FederatedMouseEvent, or
\> FederatedWheelEvent. This class is the base for all federated events.

## Example [#example]

```ts
// Basic event handling
sprite.on('pointerdown', (event: FederatedEvent) => {
    // Access standard DOM event properties
    console.log('Target:', event.target);
    console.log('Phase:', event.eventPhase);
    console.log('Type:', event.type);

    // Control propagation
    event.stopPropagation();
});
```

## Remarks [#remarks]

* Implements the standard DOM UIEvent interface
* Provides event bubbling and capturing phases
* Supports propagation control
* Manages event paths through display tree
* Normalizes native browser events

## See [#see]

* [https://dom.spec.whatwg.org/#event](https://dom.spec.whatwg.org/#event) DOM Event Specification
* FederatedPointerEvent For pointer-specific events
* FederatedMouseEvent For mouse-specific events
* FederatedWheelEvent For wheel-specific events

## Standard [#standard]

## Type Parameters [#type-parameters]

### N [#n]

`N` *extends* `UIEvent` | `PixiTouch` = `UIEvent` | `PixiTouch`

The type of native event held. Can be either a UIEvent or PixiTouch.

## Implements [#implements]

* `UIEvent`

## Properties [#properties]

### AT\_TARGET [#at_target]

\> `readonly` **AT\_TARGET**: `2` = `2`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:291

The event propagation phase AT\_TARGET that indicates that the event is at the target.

#### Default [#default]

```ts
2
```

#### Advanced [#advanced]

#### Implementation of [#implementation-of]

`UIEvent.AT_TARGET`

***

### bubbles [#bubbles]

\> **bubbles**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:107

Flags whether this event bubbles. This will take effect only if it is set before propagation.

#### Implementation of [#implementation-of-1]

`UIEvent.bubbles`

***

### BUBBLING\_PHASE [#bubbling_phase]

\> `readonly` **BUBBLING\_PHASE**: `3` = `3`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:297

The event propagation phase BUBBLING\_PHASE that indicates that the event is in the bubbling phase.

#### Default [#default-1]

```ts
3
```

#### Advanced [#advanced-1]

#### Implementation of [#implementation-of-2]

`UIEvent.BUBBLING_PHASE`

***

### cancelable [#cancelable]

\> `readonly` **cancelable**: `false` = `false`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:114

Flags whether this event can be canceled using [FederatedEvent.preventDefault](#preventdefault). This is always
false (for now).

#### Implementation of [#implementation-of-3]

`UIEvent.cancelable`

***

### ~~cancelBubble~~ [#cancelbubble]

\> **cancelBubble**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:109

#### Deprecated [#deprecated]

since 7.0.0

#### Implementation of [#implementation-of-4]

`UIEvent.cancelBubble`

***

### CAPTURING\_PHASE [#capturing_phase]

\> `readonly` **CAPTURING\_PHASE**: `1` = `1`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:285

The event propagation phase CAPTURING\_PHASE that indicates that the event is in the capturing phase.

#### Default [#default-2]

```ts
1
```

#### Advanced [#advanced-2]

#### Implementation of [#implementation-of-5]

`UIEvent.CAPTURING_PHASE`

***

### currentTarget [#currenttarget]

\> **currentTarget**: `Container`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:123

The listeners of the event target that are being notified.

#### Implementation of [#implementation-of-6]

`UIEvent.currentTarget`

***

### defaultPrevented [#defaultprevented]

\> **defaultPrevented**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:125

Flags whether the default response of the user agent was prevent through this event.

#### Implementation of [#implementation-of-7]

`UIEvent.defaultPrevented`

***

### detail [#detail]

\> **detail**: `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:156

Event-specific detail

#### Implementation of [#implementation-of-8]

`UIEvent.detail`

***

### eventPhase [#eventphase]

\> **eventPhase**: `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:130

The propagation phase.

#### Default [#default-3]

[FederatedEvent.NONE](#none)

#### Implementation of [#implementation-of-9]

`UIEvent.eventPhase`

***

### isTrusted [#istrusted]

\> **isTrusted**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:132

Flags whether this is a user-trusted event

#### Implementation of [#implementation-of-10]

`UIEvent.isTrusted`

***

### layer [#layer]

\> **layer**: `Point`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:166

The coordinates of the event relative to the nearest DOM layer. This is a non-standard property.

***

### manager [#manager]

\> `readonly` **manager**: `EventBoundary`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:154

The EventBoundary that manages this event. Null for root events.

***

### nativeEvent [#nativeevent]

\> **nativeEvent**: `N`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:144

The native event that caused the foremost original event.

***

### NONE [#none]

\> `readonly` **NONE**: `0` = `0`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:279

The event propagation phase NONE that indicates that the event is not in any phase.

#### Default [#default-4]

```ts
0
```

#### Advanced [#advanced-3]

#### Implementation of [#implementation-of-11]

`UIEvent.NONE`

***

### originalEvent [#originalevent]

\> **originalEvent**: `FederatedEvent`\<`N`>

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:146

The original event that caused this event, if any.

***

### page [#page]

\> **page**: `Point`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:172

The coordinates of the event relative to the DOM document. This is a non-standard property.

***

### path [#path]

\> **path**: `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:152

The composed path of the event's propagation. The `target` is at the end.

***

### propagationImmediatelyStopped [#propagationimmediatelystopped]

\> **propagationImmediatelyStopped**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:150

Flags whether propagation was immediately stopped.

***

### propagationStopped [#propagationstopped]

\> **propagationStopped**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:148

Flags whether propagation was stopped.

***

### ~~returnValue~~ [#returnvalue]

\> **returnValue**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:134

#### Deprecated [#deprecated-1]

since 7.0.0

#### Implementation of [#implementation-of-12]

`UIEvent.returnValue`

***

### ~~srcElement~~ [#srcelement]

\> **srcElement**: `EventTarget`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:136

#### Deprecated [#deprecated-2]

since 7.0.0

#### Implementation of [#implementation-of-13]

`UIEvent.srcElement`

***

### target [#target]

\> **target**: `Container`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:138

The event target that this will be dispatched to.

#### Implementation of [#implementation-of-14]

`UIEvent.target`

***

### timeStamp [#timestamp]

\> **timeStamp**: `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:140

The timestamp of when the event was created.

#### Implementation of [#implementation-of-15]

`UIEvent.timeStamp`

***

### type [#type]

\> **type**: `string`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:142

The type of event, e.g. `"mouseup"`.

#### Implementation of [#implementation-of-16]

`UIEvent.type`

***

### view [#view]

\> **view**: `Window`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:158

The global Window object.

#### Implementation of [#implementation-of-17]

`UIEvent.view`

## Accessors [#accessors]

### data [#data]

#### Get Signature [#get-signature]

\> **get** **data**(): `this`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:186

Fallback for the deprecated `InteractionEvent.data`.

##### Deprecated [#deprecated-3]

since 7.0.0

##### Returns [#returns]

`this`

***

### layerX [#layerx]

#### Get Signature [#get-signature-1]

\> **get** **layerX**(): `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:168

##### Returns [#returns-1]

`number`

***

### layerY [#layery]

#### Get Signature [#get-signature-2]

\> **get** **layerY**(): `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:170

##### Returns [#returns-2]

`number`

***

### pageX [#pagex]

#### Get Signature [#get-signature-3]

\> **get** **pageX**(): `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:174

##### Returns [#returns-3]

`number`

***

### pageY [#pagey]

#### Get Signature [#get-signature-4]

\> **get** **pageY**(): `number`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:176

##### Returns [#returns-4]

`number`

## Methods [#methods]

### composedPath() [#composedpath]

\> **composedPath**(): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:191

The propagation path for this event. Alias for EventBoundary.propagationPath.

#### Returns [#returns-5]

`Container`\<`ContainerChild`>\[]

#### Advanced [#advanced-4]

#### Implementation of [#implementation-of-18]

`UIEvent.composedPath`

***

### preventDefault() [#preventdefault]

\> **preventDefault**(): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:229

Prevent default behavior of both PixiJS and the user agent.

#### Returns [#returns-6]

`void`

#### Example [#example-1]

```ts
sprite.on('click', (event) => {
    // Prevent both browser's default click behavior
    // and PixiJS's default handling
    event.preventDefault();

    // Custom handling
    customClickHandler();
});
```

#### Remarks [#remarks-1]

* Only works if the native event is cancelable
* Does not stop event propagation

#### Implementation of [#implementation-of-19]

`UIEvent.preventDefault`

***

### stopImmediatePropagation() [#stopimmediatepropagation]

\> **stopImmediatePropagation**(): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:249

Stop this event from propagating to any additional listeners, including those
on the current target and any following targets in the propagation path.

#### Returns [#returns-7]

`void`

#### Example [#example-2]

```ts
container.on('pointerdown', (event) => {
    // Stop all further event handling
    event.stopImmediatePropagation();

    // These handlers won't be called:
    // - Other pointerdown listeners on this container
    // - Any pointerdown listeners on parent containers
});
```

#### Remarks [#remarks-2]

* Immediately stops all event propagation
* Prevents other listeners on same target from being called
* More aggressive than stopPropagation()

#### Implementation of [#implementation-of-20]

`UIEvent.stopImmediatePropagation`

***

### stopPropagation() [#stoppropagation]

\> **stopPropagation**(): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEvent.d.ts:273

Stop this event from propagating to the next target in the propagation path.
The rest of the listeners on the current target will still be notified.

#### Returns [#returns-8]

`void`

#### Example [#example-3]

```ts
child.on('pointermove', (event) => {
    // Handle event on child
    updateChild();

    // Prevent parent handlers from being called
    event.stopPropagation();
});

// This won't be called if child handles the event
parent.on('pointermove', (event) => {
    updateParent();
});
```

#### Remarks [#remarks-3]

* Stops event bubbling to parent containers
* Does not prevent other listeners on same target
* Less aggressive than stopImmediatePropagation()

#### Implementation of [#implementation-of-21]

`UIEvent.stopPropagation`


# Interface: GameState (/jsdoc/pixi-vn/index/interfaces/GameState)



Defined in: [src/interfaces/GameState.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L7)

## Properties [#properties]

### canvasData [#canvasdata]

\> **canvasData**: [`CanvasGameState`](/jsdoc/pixi-vn/index/interfaces/CanvasGameState)

Defined in: [src/interfaces/GameState.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L11)

***

### historyData [#historydata]

\> **historyData**: [`HistoryGameState`](/jsdoc/pixi-vn/index/interfaces/HistoryGameState)

Defined in: [src/interfaces/GameState.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L13)

***

### path [#path]

\> **path**: `string`

Defined in: [src/interfaces/GameState.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L14)

***

### pixivn\_version [#pixivn_version]

\> **pixivn\_version**: `string`

Defined in: [src/interfaces/GameState.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L8)

***

### soundData [#sounddata]

\> **soundData**: [`SoundGameState`](/jsdoc/pixi-vn/index/interfaces/SoundGameState)

Defined in: [src/interfaces/GameState.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L12)

***

### stepData [#stepdata]

\> **stepData**: [`NarrationGameState`](/jsdoc/pixi-vn/index/interfaces/NarrationGameState)

Defined in: [src/interfaces/GameState.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L9)

***

### storageData [#storagedata]

\> **storageData**: [`StorageGameState`](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)

Defined in: [src/interfaces/GameState.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameState.ts#L10)


# Interface: GameStepStateData (/jsdoc/pixi-vn/index/interfaces/GameStepStateData)



Defined in: [src/interfaces/GameStepStateData.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L9)

It is a interface that contains the information of a step.

## Properties [#properties]

### canvas [#canvas]

\> **canvas**: [`CanvasGameState`](/jsdoc/pixi-vn/index/interfaces/CanvasGameState)

Defined in: [src/interfaces/GameStepStateData.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L25)

The canvas that occurred during the progression of the steps.

***

### labelIndex [#labelindex]

\> **labelIndex**: `number`

Defined in: [src/interfaces/GameStepStateData.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L21)

The index of the label that occurred during the progression of the steps.

***

### openedLabels [#openedlabels]

\> **openedLabels**: [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/interfaces/GameStepStateData.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L29)

The opened labels that occurred during the progression of the steps.

***

### path [#path]

\> **path**: `string`

Defined in: [src/interfaces/GameStepStateData.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L13)

The browser path that occurred during the progression of the steps.

***

### sound [#sound]

\> **sound**: [`SoundGameState`](/jsdoc/pixi-vn/index/interfaces/SoundGameState)

Defined in: [src/interfaces/GameStepStateData.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L33)

The sound data that occurred during the progression of the steps.

***

### storage [#storage]

\> **storage**: [`StorageGameState`](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)

Defined in: [src/interfaces/GameStepStateData.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/interfaces/GameStepStateData.ts#L17)

The storage that occurred during the progression of the steps.


# Interface: HistoryGameState (/jsdoc/pixi-vn/index/interfaces/HistoryGameState)



Defined in: [src/history/interfaces/HistoryGameState.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryGameState.ts#L7)

Interface exported step data

## Properties [#properties]

### originalStepData [#originalstepdata]

\> **originalStepData**: `GameStepState` | `undefined`

Defined in: [src/history/interfaces/HistoryGameState.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryGameState.ts#L9)

***

### stepsHistory [#stepshistory]

\> **stepsHistory**: [`HistoryStep`](/jsdoc/pixi-vn/index/interfaces/HistoryStep)\[]

Defined in: [src/history/interfaces/HistoryGameState.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryGameState.ts#L8)


# Interface: HistoryManagerInterface (/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface)



Defined in: [src/history/interfaces/HistoryManagerInterface.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L12)

## Properties [#properties]

### back [#back]

\> **back**: (`props`, `options?`) => `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:59](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L59)

Go back to the last step and add it to the history.

#### Parameters [#parameters]

##### props [#props]

`StepLabelProps`

The step label properties.

##### options? [#options]

The navigation options.

###### steps? [#steps]

`number`

The number of steps to go back. Must be greater than 0.

**Default**

```ts
1
```

#### Returns [#returns]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

***

### canGoBack [#cangoback]

\> `readonly` **canGoBack**: `boolean`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:75](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L75)

Return true if it is possible to go back.

***

### currentLabelHistory [#currentlabelhistory]

\> `readonly` **currentLabelHistory**: [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)\[]

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L26)

Get the history of the latest steps belonging to the current label and its child labels.

This is effectively the current "page" of an interactive book: it starts over every time a
[NarrationManagerInterface.jump](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump) is performed.

#### Returns [#returns-1]

the history of the dialogues, choices and steps

***

### currentPageParagraphs [#currentpageparagraphs]

\> `readonly` **currentPageParagraphs**: [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)\[]\[]

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:36](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L36)

Get the current page ([HistoryManagerInterface.currentLabelHistory](#currentlabelhistory)) split into paragraphs.

A new paragraph starts every time the number of opened labels changes compared to the previous step
(i.e. a [NarrationManagerInterface.call](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) was made, or a called label returned), using
[NarrationHistory.openedLabelsNumber](/jsdoc/pixi-vn/index/interfaces/NarrationHistory#openedlabelsnumber).

#### Returns [#returns-2]

the current page as an ordered list of paragraphs, each one a list of steps

***

### diffMap [#diffmap]

\> `readonly` **diffMap**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, `Difference`\[]>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:135](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L135)

Map that contains all the differences between the steps in the history.
The differences will be used to restore a step.

**Don't edit unless you're sure what you're doing.**

***

### lastKey [#lastkey]

\> `readonly` **lastKey**: `number` | `null`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:104](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L104)

Get the last key (id) of the history.

***

### narrationMap [#narrationmap]

\> `readonly` **narrationMap**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:141](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L141)

Map that contains all the narration history.

**Don't edit unless you're sure what you're doing.**

***

### narrativeHistory [#narrativehistory]

\> `readonly` **narrativeHistory**: [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory)\[]

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L17)

Get the narrative history.

#### Returns [#returns-3]

the history of the dialogues, choices and steps

***

### size [#size]

\> `readonly` **size**: `number`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:100](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L100)

Number of items in the history.

***

### stepLimitSaved [#steplimitsaved]

\> **stepLimitSaved**: `number`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:47](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L47)

The number of steps to keep in the history into the save file.

The other older steps will be compressed will be used in [HistoryManagerInterface.narrativeHistory](#narrativehistory) to show the older dialogues.
In the compressed steps, the canvas and storage information will be removed.

This also means that a player, after saving and loading a save, will only be able to go back to NarrationManagerInterface.stepLimitSaved steps.

If you want to keep all steps in the history, you can set this value to Infinity.

***

### stepsInfoMap [#stepsinfomap]

\> `readonly` **stepsInfoMap**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`number`, `Omit`\<[`HistoryStep`](/jsdoc/pixi-vn/index/interfaces/HistoryStep), `"diff"`>>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L128)

Map that contains all information about the steps in the history.

**Don't edit unless you're sure what you're doing.**

## Methods [#methods]

### add() [#add]

\> **add**(`historyInfo?`, `opstions?`): `void`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:84](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L84)

Add a step to the history.

#### Parameters [#parameters-1]

##### historyInfo? [#historyinfo]

`HistoryInfo`

Info about the step to add.

##### opstions? [#opstions]

Options to add the step.

###### ignoreSameStep? [#ignoresamestep]

`boolean`

If true, the step will not be added to the history if the current step is the same as the last step.

#### Returns [#returns-4]

`void`

***

### blockGoBack() [#blockgoback]

\> **blockGoBack**(): `void`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L71)

Block the go back function.

#### Returns [#returns-5]

`void`

***

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L96)

Clear the history.

#### Returns [#returns-6]

`void`

***

### delete() [#delete]

\> **delete**(`stepIndex`): `void`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:122](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L122)

Remove a step from the history.

#### Parameters [#parameters-2]

##### stepIndex [#stepindex]

`number`

The key (id) of the step to remove.

#### Returns [#returns-7]

`void`

True if the step was removed, false if it was not found.

***

### export() [#export]

\> **export**(): [`HistoryGameState`](/jsdoc/pixi-vn/index/interfaces/HistoryGameState)

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:149](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L149)

Export the history to an object.

#### Returns [#returns-8]

[`HistoryGameState`](/jsdoc/pixi-vn/index/interfaces/HistoryGameState)

The history in an object.

***

### get() [#get]

\> **get**(`stepIndex`): [`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory) | `undefined`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:116](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L116)

Get a step from the history.

**Note:** If the step not contains any information, this method will return undefined.

#### Parameters [#parameters-3]

##### stepIndex [#stepindex-1]

`number`

The key (id) of the step to get.

#### Returns [#returns-9]

[`NarrationHistory`](/jsdoc/pixi-vn/index/interfaces/NarrationHistory) | `undefined`

The step.

***

### keys() [#keys]

\> **keys**(): `MapIterator`\<`number`>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:108](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L108)

Get all the keys (id) of the history.

#### Returns [#returns-10]

`MapIterator`\<`number`>

***

### removeNarrativeHistory() [#removenarrativehistory]

\> **removeNarrativeHistory**(`itemsNumber?`): `void`

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L52)

Delete the narrative history.

#### Parameters [#parameters-4]

##### itemsNumber? [#itemsnumber]

`number`

The number of items to delete. If undefined, all items will be deleted.

#### Returns [#returns-11]

`void`

***

### restore() [#restore]

\> **restore**(`data`): `Promise`\<`void`>

Defined in: [src/history/interfaces/HistoryManagerInterface.ts:154](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/interfaces/HistoryManagerInterface.ts#L154)

Restore the history from an object.

#### Parameters [#parameters-5]

##### data [#data]

`object`

The history in an object.

#### Returns [#returns-12]

`Promise`\<`void`>


# Interface: HistoryStep (/jsdoc/pixi-vn/index/interfaces/HistoryStep)



Defined in: [src/narration/interfaces/HistoryStep.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L20)

## Properties [#properties]

### alreadyMadeChoices? [#alreadymadechoices]

\> `optional` &#x2A;*alreadyMadeChoices?**: `number`\[]

Defined in: [src/narration/interfaces/HistoryStep.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L52)

List of choices already made by the player

***

### choiceIndexMade? [#choiceindexmade]

\> `optional` &#x2A;*choiceIndexMade?**: `number`

Defined in: [src/narration/interfaces/HistoryStep.ts:60](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L60)

The choice made by the player

***

### choices? [#choices]

\> `optional` &#x2A;*choices?**: [`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface)\[]

Defined in: [src/narration/interfaces/HistoryStep.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L48)

List of choices asked of the player

***

### currentLabel? [#currentlabel]

\> `optional` &#x2A;*currentLabel?**: `string`

Defined in: [src/narration/interfaces/HistoryStep.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L28)

The label id of the current step.

***

### dialogue? [#dialogue]

\> `optional` &#x2A;*dialogue?**: `StoredDialogue`

Defined in: [src/narration/interfaces/HistoryStep.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L44)

Dialogue to be shown in the game

***

### diff? [#diff]

\> `optional` &#x2A;*diff?**: `Difference`\[]

Defined in: [src/narration/interfaces/HistoryStep.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L24)

The difference between the previous step and the current step.

***

### index [#index]

\> **index**: `number`

Defined in: [src/narration/interfaces/HistoryStep.ts:36](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L36)

Equivalent to the narration.stepCounter

***

### inputValue? [#inputvalue]

\> `optional` &#x2A;*inputValue?**: [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

Defined in: [src/narration/interfaces/HistoryStep.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L56)

The input value of the player

***

### isGlued? [#isglued]

\> `optional` &#x2A;*isGlued?**: `boolean`

Defined in: [src/narration/interfaces/HistoryStep.ts:64](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L64)

If true, the current dialogue will be glued to the previous one.

***

### labelStepIndex [#labelstepindex]

\> **labelStepIndex**: `number` | `null`

Defined in: [src/narration/interfaces/HistoryStep.ts:40](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L40)

The data of the step of the label.

***

### openedLabels? [#openedlabels]

\> `optional` &#x2A;*openedLabels?**: [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/narration/interfaces/HistoryStep.ts:68](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L68)

Opened Labels in the current step.

***

### stepSha1 [#stepsha1]

\> **stepSha1**: `string`

Defined in: [src/narration/interfaces/HistoryStep.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/HistoryStep.ts#L32)

The sha1 of the step function.


# Interface: ImageContainerMemory (/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory)



Defined in: [src/canvas/interfaces/memory/ImageContainerMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageContainerMemory.ts#L9)

Interface for the canvas container memory

## Extends [#extends]

* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)\<[`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)>

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`align`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `PointData`

Defined in: [src/canvas/interfaces/memory/ImageContainerMemory.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageContainerMemory.ts#L11)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-9]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-11]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite)\<[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`children`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-14]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cullable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-15]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-16]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-17]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cursor`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cursor)

***

### elements [#elements]

\> **elements**: [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)\[]

Defined in: [src/canvas/interfaces/memory/ImageContainerMemory.ts:10](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageContainerMemory.ts#L10)

The elements contained in this container

#### Overrides [#overrides]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`elements`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#elements)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-18]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`eventMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-19]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-20]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`hitArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#hitarea)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-22]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-23]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`interactive`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-24]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`interactiveChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-25]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### loadIsStarted [#loadisstarted]

\> **loadIsStarted**: `boolean`

Defined in: [src/canvas/interfaces/memory/ImageContainerMemory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageContainerMemory.ts#L12)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onclick`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onclick)

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-28]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onglobalmousemove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onglobalpointermove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-31]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmousedown`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseenter`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseleave`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmousemove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseout`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseover`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onmouseupoutside`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointercancel`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerdown`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerenter`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerleave`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointermove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerout`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerover`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointertap`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onpointerupoutside`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-50]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onrightclick`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onrightdown`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onrightup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onrightupoutside`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontap`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontouchcancel`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontouchend`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontouchendoutside`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontouchmove`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`ontouchstart`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onwheel`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-62]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-63]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#parent)

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-64]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-71]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

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

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-77]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-78]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#tabindex)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-79]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`tint`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-80]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-82]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-83]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-84]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: ImageContainerOptions<C> (/jsdoc/pixi-vn/index/interfaces/ImageContainerOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L20)

## Extends [#extends]

* [`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions)\<`C`>

## Type Parameters [#type-parameters]

### C [#c]

`C` *extends* [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild) = [`ContainerChild`](/jsdoc/pixi-vn/index/type-aliases/ContainerChild)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessible`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`align`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: [src/canvas/components/AnchorExtension.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AnchorExtension.ts#L4)

#### Inherited from [#inherited-from-9]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-11]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `C`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-14]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`children`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-15]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`cullable`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-16]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-17]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-18]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-19]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-20]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-22]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-23]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-25]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-28]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-49]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-61]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-62]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-63]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-64]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-66]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

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

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-71]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-75]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#tabindex)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-76]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`tint`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-77]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-78]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-79]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-80]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-82]

[`ContainerOptions`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/ContainerOptions#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-83]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: ImageSpriteMemory (/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)



Defined in: [src/canvas/interfaces/memory/ImageSpriteMemory.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageSpriteMemory.ts#L6)

The memory of the image. It uses for save the state of the image.

## Extends [#extends]

* [`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)

## Extended by [#extended-by]

* [`VideoSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessible`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`align`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

`ImageSpriteMemory`.[`anchor`](#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`children`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullable`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cursor`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`eventMode`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`hitArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#hitarea)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-24]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`interactive`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`interactiveChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#label)

***

### loadIsStarted [#loadisstarted]

\> **loadIsStarted**: `boolean`

Defined in: [src/canvas/interfaces/memory/ImageSpriteMemory.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageSpriteMemory.ts#L7)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-29]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onclick`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onclick)

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-30]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-31]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobalmousemove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobalpointermove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-33]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmousedown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseenter`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseleave`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmousemove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseout`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseover`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointercancel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerdown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerenter`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerleave`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointermove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerout`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerover`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointertap`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-52]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightclick`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightdown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontap`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchcancel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchend`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchendoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchmove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-55]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchstart`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onwheel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

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

#### Inherited from [#inherited-from-64]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-65]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-66]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-70]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#pivot)

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-71]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-72]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-73]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-74]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-75]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

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

#### Inherited from [#inherited-from-76]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-77]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-78]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-79]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-80]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-81]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#tabindex)

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-82]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#texture)

***

### textureData? [#texturedata]

> `optional` &#x2A;*textureData?**: [`AssetMemory`](/jsdoc/pixi-vn/index/interfaces/AssetMemory)

Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L12)

#### Inherited from [#inherited-from-83]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`textureData`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#texturedata)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-84]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`tint`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-85]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-87]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-88]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-89]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-90]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-91]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#zindex)


# Interface: ImageSpriteOptions (/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L22)

## Extends [#extends]

* [`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions)

## Extended by [#extended-by]

* [`VideoSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessible`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`align`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`children`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`cullable`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-25]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-50]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-55]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

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

#### Inherited from [#inherited-from-62]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-63]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-64]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-71]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

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

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-77]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#tabindex)

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-78]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#texture)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-79]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`tint`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-80]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-82]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-83]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-84]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`SpriteOptions`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteOptions#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: LabelProps<T, StepIdType> (/jsdoc/pixi-vn/index/interfaces/LabelProps)



Defined in: [src/narration/interfaces/LabelProps.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/LabelProps.ts#L3)

## Type Parameters [#type-parameters]

### T [#t]

`T`

### StepIdType [#stepidtype]

`StepIdType` = `number`

## Properties [#properties]

### onLoadingLabel? [#onloadinglabel]

\> `optional` &#x2A;*onLoadingLabel?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/LabelProps.ts#L44)

Is a function that will be executed in [onStepStart](#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

#### Parameters [#parameters]

##### stepId [#stepid]

`StepIdType`

The index of the `step` being executed

##### label [#label]

`T`

The `label` being executed

#### Returns [#returns]

`void` | `Promise`\<`void`>

#### Example [#example]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

***

### onStepEnd? [#onstepend]

\> `optional` &#x2A;*onStepEnd?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:65](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/LabelProps.ts#L65)

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

#### Parameters [#parameters-1]

##### stepId [#stepid-1]

`StepIdType`

The index of the `step` that ended

##### label [#label-1]

`T`

The `label` containing the `step`

#### Returns [#returns-1]

`void` | `Promise`\<`void`>

#### Example [#example-1]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

***

### onStepStart? [#onstepstart]

\> `optional` &#x2A;*onStepStart?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/LabelProps.ts#L25)

A function executed before each `step`.

#### Parameters [#parameters-2]

##### stepId [#stepid-2]

`StepIdType`

The index of the `step` being executed

##### label [#label-2]

`T`

The `label` containing the `step`

#### Returns [#returns-2]

`void` | `Promise`\<`void`>

#### Example [#example-2]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```


# Interface: ListenerExtension (/jsdoc/pixi-vn/index/interfaces/ListenerExtension)



Defined in: [src/canvas/components/ListenerExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L13)

## Properties [#properties]

### on [#on]

\> **on**: \<`T`>(`event`, `fn`, `context?`) => `this`

Defined in: [src/canvas/components/ListenerExtension.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L28)

Add a listener for a given event.

Add a listener for a given event.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns]

`this`

#### Example [#example]

```ts
export class Events {
    \@eventDecorator()
    static eventExample(event: FederatedEvent, component: Sprite) {
        // event code here
    }
}

sprite.on("pointerdown", Events.eventExample);
```

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L29)


# Interface: ListenerExtensionMemory (/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory)



Defined in: [src/canvas/components/ListenerExtension.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L5)

## Extended by [#extended-by]

* [`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory)
* [`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)
* [`TextMemory`](/jsdoc/pixi-vn/index/interfaces/TextMemory)

## Properties [#properties]

### onEvents? [#onevents]

\> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)


# Interface: MediaInterface (/jsdoc/pixi-vn/index/interfaces/MediaInterface)



Defined in: [src/sound/interfaces/MediaInterface.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/MediaInterface.ts#L3)

## Extends [#extends]

* `Pick`\<`Player`, `"blockTime"` | `"disposed"` | `"loaded"` | `"loop"` | `"loopEnd"` | `"loopStart"` | `"mute"` | `"now"` | `"playbackRate"` | `"reverse"` | `"restart"` | `"start"` | `"stop"` | `"chain"` | `"disconnect"` | `"volume"` | `"state"`>

## Properties [#properties]

### blockTime [#blocktime]

\> **blockTime**: `number`

Defined in: node\_modules/tone/build/esm/core/context/ToneWithContext.d.ts:57

#### Inherited from [#inherited-from]

`Pick.blockTime`

***

### disposed [#disposed]

\> **disposed**: `boolean`

Defined in: node\_modules/tone/build/esm/core/Tone.d.ts:52

#### Inherited from [#inherited-from-1]

`Pick.disposed`

***

### loaded [#loaded]

\> **loaded**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:189

#### Inherited from [#inherited-from-2]

`Pick.loaded`

***

### loop [#loop]

\> **loop**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:163

#### Inherited from [#inherited-from-3]

`Pick.loop`

***

### loopEnd [#loopend]

\> **loopEnd**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:149

#### Inherited from [#inherited-from-4]

`Pick.loopEnd`

***

### loopStart [#loopstart]

\> **loopStart**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:144

#### Inherited from [#inherited-from-5]

`Pick.loopStart`

***

### mute [#mute]

\> **mute**: `boolean`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:97

#### Inherited from [#inherited-from-6]

`Pick.mute`

***

### ~~muted~~ [#muted]

\> **muted**: `boolean`

Defined in: [src/sound/interfaces/MediaInterface.ts:31](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/MediaInterface.ts#L31)

#### Deprecated [#deprecated]

Use [mute](#mute) instead.

***

### paused [#paused]

\> **paused**: `boolean`

Defined in: [src/sound/interfaces/MediaInterface.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/MediaInterface.ts#L27)

Whether the sound is currently paused.

***

### playbackRate [#playbackrate]

\> **playbackRate**: `number`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:174

#### Inherited from [#inherited-from-7]

`Pick.playbackRate`

***

### reverse [#reverse]

\> **reverse**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:184

#### Inherited from [#inherited-from-8]

`Pick.reverse`

***

### ~~speed~~ [#speed]

\> **speed**: `number`

Defined in: [src/sound/interfaces/MediaInterface.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/MediaInterface.ts#L35)

#### Deprecated [#deprecated-1]

Use [playbackRate](#playbackrate) instead.

***

### state [#state]

\> **state**: `BasicPlaybackState`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:89

#### Inherited from [#inherited-from-9]

`Pick.state`

***

### volume [#volume]

\> **volume**: `Param`\<`"decibels"`>

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:49

The volume of the output in decibels.

#### Example [#example]

```ts
const source = new Tone.PWMOscillator().toDestination();
source.volume.value = -6;
```

#### Inherited from [#inherited-from-10]

`Pick.volume`

## Methods [#methods]

### chain() [#chain]

\> **chain**(...`nodes`): `this`

Defined in: node\_modules/tone/build/esm/core/context/ToneAudioNode.d.ts:125

Connect the output of this node to the rest of the nodes in series.

#### Parameters [#parameters]

##### nodes [#nodes]

...`InputNode`\[]

#### Returns [#returns]

`this`

#### Example [#example-1]

```ts
const player = new Tone.Player("https://tonejs.github.io/audio/drum-samples/handdrum-loop.mp3");
player.autostart = true;
const filter = new Tone.AutoFilter(4).start();
const distortion = new Tone.Distortion(0.5);
// connect the player to the filter, distortion and then to the master output
player.chain(filter, distortion, Tone.Destination);
```

#### Inherited from [#inherited-from-11]

`Pick.chain`

***

### disconnect() [#disconnect]

\> **disconnect**(`destination?`, `outputNum?`, `inputNum?`): `this`

Defined in: node\_modules/tone/build/esm/core/context/ToneAudioNode.d.ts:114

disconnect the output

#### Parameters [#parameters-1]

##### destination? [#destination]

`InputNode`

##### outputNum? [#outputnum]

`number`

##### inputNum? [#inputnum]

`number`

#### Returns [#returns-1]

`this`

#### Inherited from [#inherited-from-12]

`Pick.disconnect`

***

### now() [#now]

\> **now**(): `number`

Defined in: node\_modules/tone/build/esm/core/context/ToneWithContext.d.ts:39

Return the current time of the Context clock plus the lookAhead.

#### Returns [#returns-2]

`number`

#### Example [#example-2]

```ts
setInterval(() => {
	console.log(Tone.now());
}, 100);
```

#### Inherited from [#inherited-from-13]

`Pick.now`

***

### restart() [#restart]

\> **restart**(`time?`, `offset?`, `duration?`): `this`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:114

Stop and then restart the player from the beginning (or offset)

#### Parameters [#parameters-2]

##### time? [#time]

`number`

When the player should start.

##### offset? [#offset]

`Time`

The offset from the beginning of the sample to start at.

##### duration? [#duration]

`Time`

How long the sample should play. If no duration is given,
it will default to the full length of the sample (minus any offset)

#### Returns [#returns-3]

`this`

#### Inherited from [#inherited-from-14]

`Pick.restart`

***

### start() [#start]

\> **start**(`time?`, `offset?`, `duration?`): `this`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:98

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 [#parameters-3]

##### time? [#time-1]

`Time`

When the player should start.

##### offset? [#offset-1]

`Time`

The offset from the beginning of the sample to start at.

##### duration? [#duration-1]

`Time`

How long the sample should play. If no duration is given, it will default to the full length of the sample (minus any offset)

#### Returns [#returns-4]

`this`

#### Inherited from [#inherited-from-15]

`Pick.start`

***

### stop() [#stop]

\> **stop**(`time?`): `this`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:125

Stop the source at the specified time. If no time is given,
stop the source now.

#### Parameters [#parameters-4]

##### time? [#time-2]

`Time`

When the source should be stopped.

#### Returns [#returns-5]

`this`

#### Example [#example-3]

```ts
const source = new Tone.Oscillator().toDestination();
source.start();
source.stop("+0.5"); // stops the source 0.5 seconds from now
```

#### Inherited from [#inherited-from-16]

`Pick.stop`


# Interface: MoveInOutProps (/jsdoc/pixi-vn/index/interfaces/MoveInOutProps)



Defined in: [src/canvas/interfaces/transition-props.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L18)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### direction? [#direction]

\> `optional` &#x2A;*direction?**: `"left"` | `"right"` | `"up"` | `"down"`

Defined in: [src/canvas/interfaces/transition-props.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L23)

The direction of the movement.

#### Default [#default-3]

```ts
"right"
```

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-4]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-5]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-6]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-7]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Interface: NarrationGameState (/jsdoc/pixi-vn/index/interfaces/NarrationGameState)



Defined in: [src/narration/interfaces/NarrationGameState.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationGameState.ts#L6)

Interface exported step data

## Properties [#properties]

### openedLabels [#openedlabels]

\> **openedLabels**: [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/narration/interfaces/NarrationGameState.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationGameState.ts#L7)

***

### stepCounter [#stepcounter]

\> **stepCounter**: `number`

Defined in: [src/narration/interfaces/NarrationGameState.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationGameState.ts#L8)


# Interface: NarrationHistory (/jsdoc/pixi-vn/index/interfaces/NarrationHistory)



Defined in: [src/narration/interfaces/NarrationHistory.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L4)

## Properties [#properties]

### choices? [#choices]

\> `optional` &#x2A;*choices?**: [`HistoryChoiceMenuOption`](/jsdoc/pixi-vn/index/type-aliases/HistoryChoiceMenuOption)\[]

Defined in: [src/narration/interfaces/NarrationHistory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L12)

List of choices asked of the player

***

### dialogue? [#dialogue]

\> `optional` &#x2A;*dialogue?**: [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface)

Defined in: [src/narration/interfaces/NarrationHistory.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L8)

Dialogue to be shown in the game

***

### inputValue? [#inputvalue]

\> `optional` &#x2A;*inputValue?**: [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

Defined in: [src/narration/interfaces/NarrationHistory.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L24)

The input value of the player

***

### openedLabelsNumber? [#openedlabelsnumber]

\> `optional` &#x2A;*openedLabelsNumber?**: `number`

Defined in: [src/narration/interfaces/NarrationHistory.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L33)

The number of labels that were opened (via [NarrationManagerInterface.call](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#call) or [NarrationManagerInterface.jump](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#jump)) when this step ran.

This is the size of the label call-stack at this step, and can be used to split a page into paragraphs:
every time this number increases compared to the previous step, a `call` opened a new paragraph. A `jump`
instead starts a whole new page, so it is already reflected by [HistoryManagerInterface.currentLabelHistory](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface#currentlabelhistory)
starting over.

***

### playerMadeChoice? [#playermadechoice]

\> `optional` &#x2A;*playerMadeChoice?**: `boolean`

Defined in: [src/narration/interfaces/NarrationHistory.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L16)

The player made a choice

***

### stepIndex [#stepindex]

\> **stepIndex**: `number`

Defined in: [src/narration/interfaces/NarrationHistory.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationHistory.ts#L20)

The index of the step in the history.


# Interface: NarrationManagerInterface (/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface)



Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L16)

## Properties [#properties]

### alreadyCurrentStepMadeChoices [#alreadycurrentstepmadechoices]

\> `readonly` **alreadyCurrentStepMadeChoices**: `number`\[] | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:82](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L82)

Get the choices already made in the current step. **Attention**: if the choice step index is edited or the code of choice step is edited, the result will be wrong.

#### Returns [#returns]

The choices already made in the current step. If there are no choices, it will return undefined.

***

### canContinue [#cancontinue]

\> `readonly` **canContinue**: `boolean`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:113](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L113)

Return if can go to the next step. It's `false` when:

* A `step` is running
* The player must "make a choice"
* The player must "enter a value"

#### Returns [#returns-1]

True if can go to the next step.

***

### continue [#continue]

\> **continue**: (`props`, `options?`) => `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:139](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L139)

Execute the next step and add it to the history. If a step is already running, it will put the request in the queue,
and when the step is finished, it will execute the next step.

#### Parameters [#parameters]

##### props [#props]

`StepLabelProps`

The props to pass to the step.

##### options? [#options]

The options.

###### runNow? [#runnow]

`boolean`

If true, ignore the running step, ignore the choice menu/required input and run the next step immediately.

###### steps? [#steps]

`number`

The number of steps to advance. Must be a valid finite number greater than 0.
If NaN, Infinity, or a value less than or equal to 0 is provided, the implementation
will emit a warning and return early without advancing steps.

**Default**

```ts
1
```

#### Returns [#returns-2]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

StepLabelResultType or undefined.

#### Example [#example]

```ts
    function nextOnClick() {
    setLoading(true)
    narration.continue(yourParams)
        .then((result) => {
            setUpdate((p) => p + 1)
            setLoading(false)
            if (result) {
                // your code
            }
        })
        .catch((e) => {
            setLoading(false)
            console.error(e)
        })
}
```

***

### currentLabel [#currentlabel]

\> `readonly` **currentLabel**: [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, \{ }, `number`> | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:59](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L59)

currentLabel is the current label that occurred during the progression of the steps.

***

### currentStepTimesCounter [#currentsteptimescounter]

\> **currentStepTimesCounter**: `number`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L27)

Counter of execution times of the current step. Current execution is also included. Starts from 1.

**Attention**: if the step index is edited or the code of step is edited, the counter will be reset.

You can restart the counter in this way:

```ts
narration.currentStepTimesCounter = 0
```

***

### dialogGlue [#dialogglue]

\> **dialogGlue**: `boolean`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:277](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L277)

If true, the next dialogue text will be added to the current dialogue text.

***

### inputType [#inputtype]

\> `readonly` **inputType**: `string` | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:289](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L289)

Returns the type of input prompt requested.

***

### inputValue [#inputvalue]

\> **inputValue**: [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:281](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L281)

The input value to be inserted by the player.

***

### isCurrentStepAlreadyOpened [#iscurrentstepalreadyopened]

\> `readonly` **isCurrentStepAlreadyOpened**: `boolean`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:87](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L87)

Check if the current step is already completed.

#### Returns [#returns-3]

True if the current step is already completed.

***

### isRequiredInput [#isrequiredinput]

\> `readonly` **isRequiredInput**: `boolean`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:285](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L285)

If true, the player must enter a value.

***

### openedLabels [#openedlabels]

\> `readonly` **openedLabels**: [`OpenedLabel`](/jsdoc/pixi-vn/index/interfaces/OpenedLabel)\[]

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L55)

The stack of the opened labels.

***

### stepCounter [#stepcounter]

\> `readonly` **stepCounter**: `number`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L51)

This counter corresponds to the total number of steps that have been executed so far.

**Not is the history.stepsHistory.length - 1.**

## Accessors [#accessors]

### choices [#choices]

#### Get Signature [#get-signature]

\> **get** **choices**(): [`StoredIndexedChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredIndexedChoiceInterface)\[] | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:258](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L258)

The options to be shown in the game

##### Example [#example-1]

```ts
narration.choices = [
    newChoiceOption("Events Test", EventsTestLabel, {}),
    newChoiceOption("Show Image Test", ShowImageTest, { image: "imageId" }, "call"),
    newChoiceOption("Ticker Test", TickerTestLabel, {}),
    newChoiceOption("Tinting Test", TintingTestLabel, {}, "jump"),
    newChoiceOption("Base Canvas Element Test", BaseCanvasElementTestLabel, {})
]
```

##### Returns [#returns-4]

[`StoredIndexedChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredIndexedChoiceInterface)\[] | `undefined`

#### Set Signature [#set-signature]

\> **set** **choices**(`data`): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:273](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L273)

The options to be shown in the game

##### Throws [#throws]

when a choice contains functions or class instances that cannot be serialized to JSON.

##### Example [#example-2]

```ts
narration.choices = [
    newChoiceOption("Events Test", EventsTestLabel, {}),
    newChoiceOption("Show Image Test", ShowImageTest, { image: "imageId" }, "call"),
    newChoiceOption("Ticker Test", TickerTestLabel, {}),
    newChoiceOption("Tinting Test", TintingTestLabel, {}, "jump"),
    newChoiceOption("Base Canvas Element Test", BaseCanvasElementTestLabel, {})
]
```

##### Parameters [#parameters-1]

###### data [#data]

[`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface)\[] | `undefined`

##### Returns [#returns-5]

`void`

***

### dialogue [#dialogue]

#### Get Signature [#get-signature-1]

\> **get** **dialogue**(): [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface) | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:239](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L239)

Dialogue to be shown in the game

##### Returns [#returns-6]

[`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface) | `undefined`

#### Set Signature [#set-signature-1]

\> **set** **dialogue**(`props`): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:244](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L244)

Dialogue to be shown in the game

##### Throws [#throws-1]

when the dialogue contains functions or class instances that cannot be serialized to JSON.

##### Parameters [#parameters-2]

###### props [#props-1]

`string` | `string`\[] | [`DialogueInterface`](/jsdoc/pixi-vn/index/interfaces/DialogueInterface) | `undefined`

##### Returns [#returns-7]

`void`

## Methods [#methods]

### addCurrentStepToHistory() [#addcurrentsteptohistory]

\> **addCurrentStepToHistory**(): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:102](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L102)

Save the current step to the history.

#### Returns [#returns-8]

`void`

***

### call() [#call]

\> **call**\<`T`>(`label`, `props`): `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:176](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L176)

Execute the label, add the label to the history and execute the next step of the label.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `object` = \{ }

#### Parameters [#parameters-3]

##### label [#label]

`string` | [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, `T`, `number`>

The label to execute or the id of the label

##### props [#props-2]

[`StepLabelPropsType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)\<`T`>

The props to pass to the label.

#### Returns [#returns-9]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

StepLabelResultType or undefined.

#### Throws [#throws-2]

when the label is not found in the registered labels.

#### Examples [#examples]

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

***

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:304](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L304)

Clear all narration data

#### Returns [#returns-10]

`void`

***

### closeAllLabels() [#closealllabels]

\> **closeAllLabels**(): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:71](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L71)

Close all labels and add them to the history. &#x2A;*Attention: This method can cause an unhandled game ending.**

#### Returns [#returns-11]

`void`

***

### closeCurrentLabel() [#closecurrentlabel]

\> **closeCurrentLabel**(): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:67](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L67)

Close the current label and add it to the history.

#### Returns [#returns-12]

`void`

***

### export() [#export]

\> **export**(): [`NarrationGameState`](/jsdoc/pixi-vn/index/interfaces/NarrationGameState)

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:312](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L312)

Export the narration to an object.

#### Returns [#returns-13]

[`NarrationGameState`](/jsdoc/pixi-vn/index/interfaces/NarrationGameState)

The narration in an object.

***

### getRandomNumber() [#getrandomnumber]

\> **getRandomNumber**(`min`, `max`, `options?`): `number` | `undefined`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L35)

Get a random number between min and max.

#### Parameters [#parameters-4]

##### min [#min]

`number`

The minimum number.

##### max [#max]

`number`

The maximum number.

##### options? [#options-1]

The options.

###### onceOnly? [#onceonly]

`boolean`

If `true`, the number will be generated only once for the current `step` of the `label` (default: `false`). Note: `min` and `max` affect the storage of already generated numbers.

**Default**

```ts
false
```

#### Returns [#returns-14]

`number` | `undefined`

The random number or undefined. If options.onceonly is true and all numbers between min and max have already been generated, it will return undefined.

***

### getTimesChoiceMade() [#gettimeschoicemade]

\> **getTimesChoiceMade**(`index`): `number`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:98](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L98)

Get times a choice has been made in the current step.

#### Parameters [#parameters-5]

##### index [#index]

`number`

The index of the choice.

#### Returns [#returns-15]

`number`

The number of times the choice has been made.

***

### getTimesLabelOpened() [#gettimeslabelopened]

\> **getTimesLabelOpened**(`label`): `number`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:92](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L92)

Get times a label has been opened

#### Parameters [#parameters-6]

##### label [#label-1]

`string`

#### Returns [#returns-16]

`number`

times a label has been opened

***

### isLabelAlreadyCompleted() [#islabelalreadycompleted]

\> **isLabelAlreadyCompleted**(`label`): `boolean`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:77](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L77)

Check if the label is already completed.

#### Parameters [#parameters-7]

##### label [#label-2]

`string` | [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, \{ }, `number`>

The label to check.

#### Returns [#returns-17]

`boolean`

True if the label is already completed.

***

### jump() [#jump]

\> **jump**\<`T`>(`label`, `props`): `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:202](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L202)

Execute the label, replace the current label in the history with the new label and execute the next step of the label.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `object`

#### Parameters [#parameters-8]

##### label [#label-3]

`string` | [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, `T`, `number`>

The label to execute.

##### props [#props-3]

[`StepLabelPropsType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)\<`T`>

The props to pass to the label or the id of the label

#### Returns [#returns-18]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

StepLabelResultType or undefined.

#### Throws [#throws-3]

when the label is not found in the registered labels.

#### Examples [#examples-1]

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

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

***

### removeInputRequest() [#removeinputrequest]

\> **removeInputRequest**(): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:299](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L299)

Remove the input request.

#### Returns [#returns-19]

`void`

***

### requestInput() [#requestinput]

\> **requestInput**(`info?`, `defaultValue?`): `void`

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:295](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L295)

Returns `true` if the player must enter a value.

#### Parameters [#parameters-9]

##### info? [#info]

`Omit`\<[`InputInfo`](/jsdoc/pixi-vn/index/type-aliases/InputInfo), `"isRequired"`>

The input value to be inserted by the player.

##### defaultValue? [#defaultvalue]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The default value to be inserted.

#### Returns [#returns-20]

`void`

***

### restore() [#restore]

\> **restore**(`data`, `lastHistoryStep`): `Promise`\<`void`>

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:317](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L317)

Restore the narration from an object.

#### Parameters [#parameters-10]

##### data [#data-1]

`object`

The narration in an object.

##### lastHistoryStep [#lasthistorystep]

`Omit`\<[`HistoryStep`](/jsdoc/pixi-vn/index/interfaces/HistoryStep), `"diff"`> | `null`

#### Returns [#returns-21]

`Promise`\<`void`>

***

### selectChoice() [#selectchoice]

\> **selectChoice**\<`T`>(`item`, `props`): `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/interfaces/NarrationManagerInterface.ts:227](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/NarrationManagerInterface.ts#L227)

Select a choice from the choice menu. and close the choice menu.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `object`

#### Parameters [#parameters-11]

##### item [#item]

[`StoredIndexedChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredIndexedChoiceInterface)

##### props [#props-4]

[`StepLabelPropsType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)\<`T`>

#### Returns [#returns-22]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

#### Throws [#throws-4]

when the choice type is not `"call"`, `"jump"`, or `"close"`.

#### Example [#example-3]

```ts
narration.selectChoice(item, {
    navigate: navigate,
    // your props
    ...item.props
})
    .then(() => {
        // your code
    })
    .catch((e) => {
        // your code
    })
```


# Interface: OnEventsHandlers (/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)



Defined in: [src/canvas/components/ListenerExtension.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L9)

## Indexable [#indexable]

\> \[`name`: `string`]: `string`


# Interface: OpenedLabel (/jsdoc/pixi-vn/index/interfaces/OpenedLabel)



Defined in: [src/narration/interfaces/OpenedLabel.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/OpenedLabel.ts#L3)

## Properties [#properties]

### currentStepIndex [#currentstepindex]

\> **currentStepIndex**: `number`

Defined in: [src/narration/interfaces/OpenedLabel.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/OpenedLabel.ts#L5)

***

### label [#label]

\> **label**: `string`

Defined in: [src/narration/interfaces/OpenedLabel.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/OpenedLabel.ts#L4)


# Interface: PixivnAssetAliasIds (/jsdoc/pixi-vn/index/interfaces/PixivnAssetAliasIds)



Defined in: [src/canvas/types/AssetAliasIdType.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/AssetAliasIdType.ts#L26)

An empty interface that can be augmented via `declare module '@drincs/pixi-vn/canvas'`
to constrain the set of valid asset aliases to a known union of string literals.

When this interface has no keys (the default), [AssetAliasIdType](/jsdoc/pixi-vn/index/type-aliases/AssetAliasIdType) resolves to `string`,
preserving full backwards compatibility. Once you augment it, [AssetAliasIdType](/jsdoc/pixi-vn/index/type-aliases/AssetAliasIdType) becomes
the union of the declared keys and the compiler will reject any unknown asset alias.

The augmentation is typically written into an auto-generated declaration file by the
Vite plugin (see the `assetsManifest` option of `vitePluginPixivn`), but it can
also be written by hand.

## Example [#example]

```ts
// pixi-vn.gen.d.ts  (auto-generated — do not edit manually)
declare module "@drincs/pixi-vn/canvas" {
    interface PixivnAssetAliasIds {
        logo: never;
        hero: never;
    }
}
export {};
```


# Interface: PixivnBundleIds (/jsdoc/pixi-vn/index/interfaces/PixivnBundleIds)



Defined in: [src/canvas/types/BundleIdType.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/BundleIdType.ts#L26)

An empty interface that can be augmented via `declare module '@drincs/pixi-vn/canvas'`
to constrain the set of valid asset bundle names to a known union of string literals.

When this interface has no keys (the default), [BundleIdType](/jsdoc/pixi-vn/index/type-aliases/BundleIdType) resolves to `string`,
preserving full backwards compatibility. Once you augment it, [BundleIdType](/jsdoc/pixi-vn/index/type-aliases/BundleIdType) becomes
the union of the declared keys and the compiler will reject any unknown bundle name.

The augmentation is typically written into an auto-generated declaration file by the
Vite plugin (see the `assetsManifest` option of `vitePluginPixivn`), but it can
also be written by hand.

## Example [#example]

```ts
// pixi-vn.gen.d.ts  (auto-generated — do not edit manually)
declare module "@drincs/pixi-vn/canvas" {
    interface PixivnBundleIds {
        main: never;
        ui: never;
    }
}
export {};
```


# Interface: PixivnCharacterIds (/jsdoc/pixi-vn/index/interfaces/PixivnCharacterIds)



Defined in: [src/characters/types/CharacterIdType.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/types/CharacterIdType.ts#L26)

An empty interface that can be augmented via `declare module '@drincs/pixi-vn/characters'`
to constrain the set of valid character IDs to a known union of string literals.

When this interface has no keys (the default), [CharacterIdType](/jsdoc/pixi-vn/index/type-aliases/CharacterIdType) resolves to `string`,
preserving full backwards compatibility. Once you augment it, [CharacterIdType](/jsdoc/pixi-vn/index/type-aliases/CharacterIdType) becomes
the union of the declared keys and the compiler will reject any unknown character ID.

The augmentation is typically written into an auto-generated declaration file by the
Vite plugin (see the `typeFilePath` option of `vitePluginPixivn`), but it can
also be written by hand.

## Example [#example]

```ts
// pixi-vn.gen.d.ts  (auto-generated — do not edit manually)
declare module "@drincs/pixi-vn/characters" {
    interface PixivnCharacterIds {
        liam: never;
        emma: never;
    }
}
export {};
```


# Interface: PixivnLabelIds (/jsdoc/pixi-vn/index/interfaces/PixivnLabelIds)



Defined in: [src/narration/types/LabelIdType.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/LabelIdType.ts#L26)

An empty interface that can be augmented via `declare module '@drincs/pixi-vn/narration'`
to constrain the set of valid label IDs to a known union of string literals.

When this interface has no keys (the default), [LabelIdType](/jsdoc/pixi-vn/index/type-aliases/LabelIdType) resolves to `string`,
preserving full backwards compatibility. Once you augment it, [LabelIdType](/jsdoc/pixi-vn/index/type-aliases/LabelIdType) becomes
the union of the declared keys and the compiler will reject any unknown label ID.

The augmentation is typically written into an auto-generated declaration file by the
Vite plugin (see the `labelTypeFilePath` option of `vitePluginPixivn`), but it can
also be written by hand.

## Example [#example]

```ts
// pixi-vn.gen.d.ts  (auto-generated — do not edit manually)
declare module "@drincs/pixi-vn/narration" {
    interface PixivnLabelIds {
        startLabel: never;
        menuLabel: never;
    }
}
export {};
```


# Interface: PushInOutProps (/jsdoc/pixi-vn/index/interfaces/PushInOutProps)



Defined in: [src/canvas/interfaces/transition-props.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L32)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### direction? [#direction]

\> `optional` &#x2A;*direction?**: `"left"` | `"right"` | `"up"` | `"down"`

Defined in: [src/canvas/interfaces/transition-props.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L37)

The direction of the push effect.

#### Default [#default-3]

```ts
"right"
```

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-4]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-5]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-6]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-7]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Interface: ResolvedAsset<T> (/jsdoc/pixi-vn/index/interfaces/ResolvedAsset)



Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:56

A fully resolved asset, with all the information needed to load it.
This represents an asset that has been processed by the resolver and is ready to be loaded.

## Example [#example]

```ts
// Basic resolved asset
const asset: ResolvedAsset = {
    alias: ['hero'],
    src: 'hero.png',
    format: 'png'
};

// Resolved asset with multiple aliases
const asset: ResolvedAsset = {
    alias: ['character', 'player'],
    src: 'character@2x.webp',
    format: 'webp',
};

// Resolved asset with specific parser
const asset: ResolvedAsset = {
    alias: ['config'],
    src: 'data.txt',
    format: 'txt',
    parser: 'text'
};
```

## Standard [#standard]

## Type Parameters [#type-parameters]

### T [#t]

`T` = `any`

## Properties [#properties]

### alias? [#alias]

\> `optional` &#x2A;*alias?**: `string`\[]

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:58

Array of alternative names for this asset. Used for looking up the same asset by different keys.

***

### data? [#data]

\> `optional` &#x2A;*data?**: `T`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:65

Optional data passed to the asset loader.
Can include texture settings, parser options, or other asset-specific data.

***

### format? [#format]

\> `optional` &#x2A;*format?**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:67

File format of the asset, usually the file extension. Used to determine which loader parser to use.

***

### ~~loadParser?~~ [#loadparser]

\> `optional` &#x2A;*loadParser?**: [`LoadParserName`](/jsdoc/pixi-vn/index/type-aliases/LoadParserName)

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:71

#### Deprecated [#deprecated]

Use `parser` instead.

***

### parser? [#parser]

\> `optional` &#x2A;*parser?**: `AssetParser`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:73

Override to specify which parser should load this asset. Useful when file extensions don't match the content type.

***

### progressSize? [#progresssize]

\> `optional` &#x2A;*progressSize?**: `number`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:79

The amount of progress an asset will contribute to the onProgress event when loading.
This can be any arbitrary value but typically represents the file size.

#### Default [#default]

```ts
1
```

***

### src? [#src]

\> `optional` &#x2A;*src?**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:60

The URL or relative path to the asset. This is the final, resolved path that will be used for loading.


# Interface: ResolvedSrc (/jsdoc/pixi-vn/index/interfaces/ResolvedSrc)



Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:117

A fully resolved src specification after pattern resolution and format detection.
Unlike raw asset sources, this type represents the final, concrete source path and format.

## Example [#example]

```ts
// Basic resolved source
const src: ResolvedSrc = {
    src: 'images/sprite.png',
    format: 'png'
};

// With resolution and format preferences
const src: ResolvedSrc = {
    src: 'images/sprite@2x.webp',
    format: 'webp',
    data: { resolution: 2 }
};

// With specific loader
const src: ResolvedSrc = {
    src: 'data/config.txt',
    format: 'txt',
    parser: 'text',
};
```

## Remarks [#remarks]

* Pattern strings like `{png,webp}` are resolved to specific formats
* Resolution and format are determined based on browser support
* Used internally by the Assets system after resolution
* Data property can contain format-specific options

## See [#see]

* [AssetSrc](/jsdoc/pixi-vn/index/type-aliases/AssetSrc) For unresolved source format
* [ResolvedAsset](/jsdoc/pixi-vn/index/interfaces/ResolvedAsset) For complete resolved asset specification

## Advanced [#advanced]

## Properties [#properties]

### data? [#data]

\> `optional` &#x2A;*data?**: `any`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:65

Optional data passed to the asset loader.
Can include texture settings, parser options, or other asset-specific data.

***

### format? [#format]

\> `optional` &#x2A;*format?**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:67

File format of the asset, usually the file extension. Used to determine which loader parser to use.

***

### ~~loadParser?~~ [#loadparser]

\> `optional` &#x2A;*loadParser?**: [`LoadParserName`](/jsdoc/pixi-vn/index/type-aliases/LoadParserName)

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:71

#### Deprecated [#deprecated]

Use `parser` instead.

***

### parser? [#parser]

\> `optional` &#x2A;*parser?**: `AssetParser`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:73

Override to specify which parser should load this asset. Useful when file extensions don't match the content type.

***

### src? [#src]

\> `optional` &#x2A;*src?**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:60

The URL or relative path to the asset. This is the final, resolved path that will be used for loading.


# Interface: ShakeEffectProps (/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps)



Defined in: [src/canvas/interfaces/effect-props.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/effect-props.ts#L4)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-3]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### maxShockSize? [#maxshocksize]

\> `optional` &#x2A;*maxShockSize?**: `number`

Defined in: [src/canvas/interfaces/effect-props.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/effect-props.ts#L21)

The maximum size of the shock.
For horizontal type, it is the maximum size of the x axis.
For vertical type, it is the maximum size of the y axis.

#### Default [#default-4]

```ts
10
```

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### shakeType? [#shaketype]

\> `optional` &#x2A;*shakeType?**: `"horizontal"` | `"vertical"`

Defined in: [src/canvas/interfaces/effect-props.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/effect-props.ts#L14)

The type of the shake effect

#### Default [#default-5]

```ts
"horizontal"
```

***

### shocksNumber? [#shocksnumber]

\> `optional` &#x2A;*shocksNumber?**: `number`

Defined in: [src/canvas/interfaces/effect-props.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/effect-props.ts#L9)

The number of shocks. **Must be at least 3**.

#### Default [#default-6]

```ts
10
```

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-7]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-8]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-9]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Interface: ShowWithDissolveTransitionProps (/jsdoc/pixi-vn/index/interfaces/ShowWithDissolveTransitionProps)



Defined in: [src/canvas/interfaces/transition-props.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L16)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-3]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-4]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-5]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-6]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Interface: ShowWithFadeTransitionProps (/jsdoc/pixi-vn/index/interfaces/ShowWithFadeTransitionProps)



Defined in: [src/canvas/interfaces/transition-props.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L17)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-3]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-4]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-5]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-6]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Interface: SoundGameState (/jsdoc/pixi-vn/index/interfaces/SoundGameState)



Defined in: [src/sound/interfaces/SoundGameState.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L24)

Interface exported sounds

## Properties [#properties]

### mediaInstances [#mediainstances]

\> **mediaInstances**: `object`

Defined in: [src/sound/interfaces/SoundGameState.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L29)

#### Index Signature [#index-signature]

\[`key`: `string`]: `object`

***

### ~~soundsPlaying?~~ [#soundsplaying]

\> `optional` &#x2A;*soundsPlaying?**: `object`

Defined in: [src/sound/interfaces/SoundGameState.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L28)

#### Index Signature [#index-signature-1]

\[`key`: `string`]: [`ExportedSoundPlay`](/jsdoc/pixi-vn/index/interfaces/ExportedSoundPlay)

#### Deprecated [#deprecated]


# Interface: SoundManagerInterface (/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface)



Defined in: [src/sound/interfaces/SoundManagerInterface.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L7)

## Properties [#properties]

### channels [#channels]

\> `readonly` **channels**: [`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)\[]

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:133](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L133)

All registered audio channels.

***

### defaultChannelAlias [#defaultchannelalias]

\> **defaultChannelAlias**: `string`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L19)

The default channel alias used when playing a sound without specifying a
channel. Defaults to `"general"`.

***

### muted [#muted]

\> `readonly` **muted**: `boolean`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:73](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L73)

Whether all sounds are currently muted. Note that individual channels or media instances may still be muted or unmuted; this is just the global master mute state.

***

### ~~speedAll~~ [#speedall]

\> **speedAll**: `number`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L13)

#### Deprecated [#deprecated]

Global playback speed. This is not a well-supported feature and may be removed in a future release. Use individual sound speed options instead.

***

### volumeAll [#volumeall]

\> **volumeAll**: `number`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L9)

Master volume in the range \[0, 1].

## Methods [#methods]

### ~~add()~~ [#add]

\> **add**(`alias`, `options`): `void`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L24)

#### Parameters [#parameters]

##### alias [#alias]

`string`

##### options [#options]

`string`

#### Returns [#returns]

`void`

#### Deprecated [#deprecated-1]

Register sound assets directly via `PIXI.Assets` instead.

***

### addChannel() [#addchannel]

\> **addChannel**(`alias`, `options?`): [`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface) | `undefined`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:122](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L122)

Add a new audio channel.
Returns the created channel, or `undefined` if the alias already exists.

#### Parameters [#parameters-1]

##### alias [#alias-1]

`string` | `string`\[]

##### options? [#options-1]

[`ChannelOptions`](/jsdoc/pixi-vn/index/interfaces/ChannelOptions)

#### Returns [#returns-1]

[`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface) | `undefined`

***

### backgroundLoad() [#backgroundload]

\> **backgroundLoad**(...`alias`): `Promise`\<`void`>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:111](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L111)

Trigger background loading of one or more sound assets.

#### Parameters [#parameters-2]

##### alias [#alias-2]

...`string`\[]

#### Returns [#returns-2]

`Promise`\<`void`>

***

### backgroundLoadBundle() [#backgroundloadbundle]

\> **backgroundLoadBundle**(`alias`): `Promise`\<`void`>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:113](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L113)

Trigger background loading of a sound bundle.

#### Parameters [#parameters-3]

##### alias [#alias-3]

`string`

#### Returns [#returns-3]

`Promise`\<`void`>

***

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:116](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L116)

Stop all sounds and clear internal state.

#### Returns [#returns-4]

`void`

***

### duration() [#duration]

\> **duration**(`alias`): `number`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:66](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L66)

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

#### Parameters [#parameters-4]

##### alias [#alias-4]

`string`

#### Returns [#returns-5]

`number`

***

### export() [#export]

\> **export**(): [`SoundGameState`](/jsdoc/pixi-vn/index/interfaces/SoundGameState)

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:138](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L138)

Export the current sound state, including currently playing sounds and their options, for saving or debugging purposes. This is not guaranteed to be stable across versions and may contain implementation details; it is not intended for use in general application code.

#### Returns [#returns-6]

[`SoundGameState`](/jsdoc/pixi-vn/index/interfaces/SoundGameState)

***

### find() [#find]

\> **find**(`alias`): [`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L48)

Find a tracked media instance by alias.

#### Parameters [#parameters-5]

##### alias [#alias-5]

`string`

#### Returns [#returns-7]

[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

***

### findChannel() [#findchannel]

\> **findChannel**(`alias`): [`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:130](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L130)

Find the channel for the given alias, creating it if it does not yet exist.

#### Parameters [#parameters-6]

##### alias [#alias-6]

`string`

#### Returns [#returns-8]

[`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)

***

### load() [#load]

\> **load**(...`alias`): `Promise`\<`void`>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:109](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L109)

Load one or more sound assets.

#### Parameters [#parameters-7]

##### alias [#alias-7]

...`string`\[]

#### Returns [#returns-9]

`Promise`\<`void`>

***

### muteAll() [#muteall]

\> **muteAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:75](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L75)

Mute all sounds.

#### Returns [#returns-10]

`this`

***

### pause() [#pause]

\> **pause**(`alias`): [`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:58](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L58)

Pause a tracked media instance.

#### Parameters [#parameters-8]

##### alias [#alias-8]

`string`

#### Returns [#returns-11]

[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

***

### pauseAll() [#pauseall]

\> **pauseAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:81](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L81)

Pause all sounds.

#### Returns [#returns-12]

`this`

***

### pauseUnsavedAll() [#pauseunsavedall]

\> **pauseUnsavedAll**(`channel?`): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:96](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L96)

Temporarily pause all currently-playing sounds (or just those in the given
channel) without persisting the paused state. Useful for overlays / pause
menus.

Only sounds that are **actively playing** at the time of the call are paused;
sounds that were already paused beforehand are left untouched so that they
remain paused when [resumeUnsavedAll](#resumeunsavedall) is called later.

When called without a channel argument all transient players started with
[playTransient](#playtransient) are also stopped.

#### Parameters [#parameters-9]

##### channel? [#channel]

`string`

#### Returns [#returns-13]

`this`

***

### play() [#play]

#### Call Signature [#call-signature]

\> **play**(`alias`, `options?`): `Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L32)

Plays a sound.

##### Parameters [#parameters-10]

###### alias [#alias-9]

`string`

The media and sound (asset) alias reference.

###### options? [#options-2]

[`SoundPlayOptionsWithChannel`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptionsWithChannel)

The options.

##### Returns [#returns-14]

`Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

The media instance (resolves immediately if already loaded).

#### Call Signature [#call-signature-1]

\> **play**(`mediaAlias`, `soundAlias`, `options?`): `Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L33)

##### Parameters [#parameters-11]

###### mediaAlias [#mediaalias]

`string`

###### soundAlias [#soundalias]

`string`

###### options? [#options-3]

[`SoundPlayOptionsWithChannel`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptionsWithChannel)

##### Returns [#returns-15]

`Promise`\<[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface)>

***

### playTransient() [#playtransient]

\> **playTransient**(`alias`, `options?`): `Promise`\<`Player`>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L43)

Plays a non-persistent ("transient") sound (e.g. UI / menu sounds).
Transient playback is not tracked in save/export state.

#### Parameters [#parameters-12]

##### alias [#alias-10]

`string`

##### options? [#options-4]

`Partial`\<`PlayerOptions`>

#### Returns [#returns-16]

`Promise`\<`Player`>

***

### restore() [#restore]

\> **restore**(`data`): `Promise`\<`void`>

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:142](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L142)

Restore a sound state exported by [export](#export). This will stop any currently playing sounds and replace them with the sounds specified in the exported state. This is not guaranteed to be stable across versions and may contain implementation details; it is not intended for use in general application code.

#### Parameters [#parameters-13]

##### data [#data]

`object`

#### Returns [#returns-17]

`Promise`\<`void`>

***

### resume() [#resume]

\> **resume**(`alias`): [`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L63)

Resume a paused media instance.

#### Parameters [#parameters-14]

##### alias [#alias-11]

`string`

#### Returns [#returns-18]

[`MediaInterface`](/jsdoc/pixi-vn/index/interfaces/MediaInterface) | `undefined`

***

### resumeAll() [#resumeall]

\> **resumeAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L83)

Resume all sounds.

#### Returns [#returns-19]

`this`

***

### resumeUnsavedAll() [#resumeunsavedall]

\> **resumeUnsavedAll**(`channel?`): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:102](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L102)

Resume all sounds (or just those in the given channel) that were paused by
the most recent call to [pauseUnsavedAll](#pauseunsavedall). Sounds that were already
paused before `pauseUnsavedAll` was called are **not** resumed.

#### Parameters [#parameters-15]

##### channel? [#channel-1]

`string`

#### Returns [#returns-20]

`this`

***

### stop() [#stop]

\> **stop**(`alias`): `void`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L53)

Stop a tracked media instance and remove it from the manager.

#### Parameters [#parameters-16]

##### alias [#alias-12]

`string`

#### Returns [#returns-21]

`void`

***

### stopAll() [#stopall]

\> **stopAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:79](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L79)

Stop all sounds.

#### Returns [#returns-22]

`this`

***

### stopTransientAll() [#stoptransientall]

\> **stopTransientAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:106](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L106)

Stop all transient media instances started with [playTransient](#playtransient).

#### Returns [#returns-23]

`this`

***

### toggleMuteAll() [#togglemuteall]

\> **toggleMuteAll**(): `boolean`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:69](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L69)

Toggle mute on all sounds. Returns the new muted state.

#### Returns [#returns-24]

`boolean`

***

### unmuteAll() [#unmuteall]

\> **unmuteAll**(): `this`

Defined in: [src/sound/interfaces/SoundManagerInterface.ts:77](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundManagerInterface.ts#L77)

Unmute all sounds.

#### Returns [#returns-25]

`this`


# Interface: SoundOptions (/jsdoc/pixi-vn/index/interfaces/SoundOptions)



Defined in: [src/sound/interfaces/SoundOptions.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L3)

## Extends [#extends]

* `Pick`\<`Partial`\<`PlayerOptions`>, `"loop"` | `"autostart"` | `"fadeIn"` | `"fadeOut"` | `"mute"` | `"loopEnd"` | `"loopStart"` | `"reverse"` | `"playbackRate"`>

## Extended by [#extended-by]

* [`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

## Properties [#properties]

### autostart? [#autostart]

\> `optional` &#x2A;*autostart?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:9

#### Inherited from [#inherited-from]

`Pick.autostart`

***

### fadeIn? [#fadein]

\> `optional` &#x2A;*fadeIn?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:13

#### Inherited from [#inherited-from-1]

`Pick.fadeIn`

***

### fadeOut? [#fadeout]

\> `optional` &#x2A;*fadeOut?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:14

#### Inherited from [#inherited-from-2]

`Pick.fadeOut`

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `ToneAudioNode`\<`ToneWithContextOptions`>\[]

Defined in: [src/sound/interfaces/SoundOptions.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L34)

A collection of audio filters/effects to apply to this sound.

Install "tone" for the full list of available filters.

#### Example [#example]

```ts
import * as Tone from "tone";

const filters = [new Tone.FeedbackDelay("8n", 0.5)];
```

***

### loop? [#loop]

\> `optional` &#x2A;*loop?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:8

#### Inherited from [#inherited-from-3]

`Pick.loop`

***

### loopEnd? [#loopend]

\> `optional` &#x2A;*loopEnd?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:11

#### Inherited from [#inherited-from-4]

`Pick.loopEnd`

***

### loopStart? [#loopstart]

\> `optional` &#x2A;*loopStart?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:10

#### Inherited from [#inherited-from-5]

`Pick.loopStart`

***

### mute? [#mute]

\> `optional` &#x2A;*mute?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:10

#### Inherited from [#inherited-from-6]

`Pick.mute`

***

### ~~muted?~~ [#muted]

\> `optional` &#x2A;*muted?**: `boolean`

Defined in: [src/sound/interfaces/SoundOptions.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L42)

#### Deprecated [#deprecated]

Use [mute](#mute) instead.

***

### playbackRate? [#playbackrate]

\> `optional` &#x2A;*playbackRate?**: `number`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:7

#### Inherited from [#inherited-from-7]

`Pick.playbackRate`

***

### reverse? [#reverse]

\> `optional` &#x2A;*reverse?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:12

#### Inherited from [#inherited-from-8]

`Pick.reverse`

***

### ~~speed?~~ [#speed]

\> `optional` &#x2A;*speed?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L38)

#### Deprecated [#deprecated-1]

Use [playbackRate](#playbackrate) instead.

***

### volume? [#volume]

\> `optional` &#x2A;*volume?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L21)

The volume of this sound in the linear range \[0, 1], where 0 is silence
and 1 is full volume.  This is converted to decibels internally before
being passed to the Tone.js Player.


# Interface: SoundPlay (/jsdoc/pixi-vn/index/interfaces/SoundPlay)



Defined in: [src/sound/interfaces/SoundGameState.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L11)

## Extended by [#extended-by]

* [`ExportedSoundPlay`](/jsdoc/pixi-vn/index/interfaces/ExportedSoundPlay)

## Properties [#properties]

### options? [#options]

\> `optional` &#x2A;*options?**: `string` | [`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

Defined in: [src/sound/interfaces/SoundGameState.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L14)

***

### paused [#paused]

\> **paused**: `boolean`

Defined in: [src/sound/interfaces/SoundGameState.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L13)

***

### stepIndex [#stepindex]

\> **stepIndex**: `number`

Defined in: [src/sound/interfaces/SoundGameState.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundGameState.ts#L12)


# Interface: SoundPlayOptions (/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)



Defined in: [src/sound/interfaces/SoundOptions.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L45)

## Extends [#extends]

* [`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions)

## Extended by [#extended-by]

* [`SoundPlayOptionsWithChannel`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptionsWithChannel)

## Properties [#properties]

### autostart? [#autostart]

\> `optional` &#x2A;*autostart?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:9

#### Inherited from [#inherited-from]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`autostart`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#autostart)

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L51)

The delay in seconds before playback starts. If specified, playback is
scheduled to begin after the delay has elapsed rather than starting
immediately in a paused state.

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L55)

The offset in seconds from the start of the sound at which to begin playback.

***

### fadeIn? [#fadein]

\> `optional` &#x2A;*fadeIn?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:13

#### Inherited from [#inherited-from-1]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`fadeIn`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#fadein)

***

### fadeOut? [#fadeout]

\> `optional` &#x2A;*fadeOut?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:14

#### Inherited from [#inherited-from-2]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`fadeOut`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#fadeout)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `ToneAudioNode`\<`ToneWithContextOptions`>\[]

Defined in: [src/sound/interfaces/SoundOptions.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L34)

A collection of audio filters/effects to apply to this sound.

Install "tone" for the full list of available filters.

#### Example [#example]

```ts
import * as Tone from "tone";

const filters = [new Tone.FeedbackDelay("8n", 0.5)];
```

#### Inherited from [#inherited-from-3]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`filters`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#filters)

***

### loop? [#loop]

\> `optional` &#x2A;*loop?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:8

#### Inherited from [#inherited-from-4]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`loop`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#loop)

***

### loopEnd? [#loopend]

\> `optional` &#x2A;*loopEnd?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:11

#### Inherited from [#inherited-from-5]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`loopEnd`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#loopend)

***

### loopStart? [#loopstart]

\> `optional` &#x2A;*loopStart?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:10

#### Inherited from [#inherited-from-6]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`loopStart`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#loopstart)

***

### mute? [#mute]

\> `optional` &#x2A;*mute?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:10

#### Inherited from [#inherited-from-7]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`mute`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#mute)

***

### ~~muted?~~ [#muted]

\> `optional` &#x2A;*muted?**: `boolean`

Defined in: [src/sound/interfaces/SoundOptions.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L42)

#### Deprecated [#deprecated]

Use [mute](/jsdoc/pixi-vn/index/interfaces/SoundOptions#mute) instead.

#### Inherited from [#inherited-from-8]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`muted`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#muted)

***

### playbackRate? [#playbackrate]

\> `optional` &#x2A;*playbackRate?**: `number`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:7

#### Inherited from [#inherited-from-9]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`playbackRate`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#playbackrate)

***

### reverse? [#reverse]

\> `optional` &#x2A;*reverse?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:12

#### Inherited from [#inherited-from-10]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`reverse`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#reverse)

***

### ~~speed?~~ [#speed]

\> `optional` &#x2A;*speed?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L38)

#### Deprecated [#deprecated-1]

Use [playbackRate](/jsdoc/pixi-vn/index/interfaces/SoundOptions#playbackrate) instead.

#### Inherited from [#inherited-from-11]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`speed`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#speed)

***

### volume? [#volume]

\> `optional` &#x2A;*volume?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L21)

The volume of this sound in the linear range \[0, 1], where 0 is silence
and 1 is full volume.  This is converted to decibels internally before
being passed to the Tone.js Player.

#### Inherited from [#inherited-from-12]

[`SoundOptions`](/jsdoc/pixi-vn/index/interfaces/SoundOptions).[`volume`](/jsdoc/pixi-vn/index/interfaces/SoundOptions#volume)


# Interface: SoundPlayOptionsWithChannel (/jsdoc/pixi-vn/index/interfaces/SoundPlayOptionsWithChannel)



Defined in: [src/sound/interfaces/SoundOptions.ts:58](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L58)

## Extends [#extends]

* [`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions)

## Properties [#properties]

### autostart? [#autostart]

\> `optional` &#x2A;*autostart?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:9

#### Inherited from [#inherited-from]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`autostart`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#autostart)

***

### channel? [#channel]

\> `optional` &#x2A;*channel?**: `string`

Defined in: [src/sound/interfaces/SoundOptions.ts:64](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L64)

The alias of the audio channel to play the sound on. If the channel does
not exist it will be created automatically.
Defaults to `SoundManagerInterface.defaultChannelAlias` ("general").

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L51)

The delay in seconds before playback starts. If specified, playback is
scheduled to begin after the delay has elapsed rather than starting
immediately in a paused state.

#### Inherited from [#inherited-from-1]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`delay`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#delay)

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L55)

The offset in seconds from the start of the sound at which to begin playback.

#### Inherited from [#inherited-from-2]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`elapsed`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#elapsed)

***

### fadeIn? [#fadein]

\> `optional` &#x2A;*fadeIn?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:13

#### Inherited from [#inherited-from-3]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`fadeIn`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#fadein)

***

### fadeOut? [#fadeout]

\> `optional` &#x2A;*fadeOut?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:14

#### Inherited from [#inherited-from-4]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`fadeOut`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#fadeout)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `ToneAudioNode`\<`ToneWithContextOptions`>\[]

Defined in: [src/sound/interfaces/SoundOptions.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L34)

A collection of audio filters/effects to apply to this sound.

Install "tone" for the full list of available filters.

#### Example [#example]

```ts
import * as Tone from "tone";

const filters = [new Tone.FeedbackDelay("8n", 0.5)];
```

#### Inherited from [#inherited-from-5]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`filters`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#filters)

***

### loop? [#loop]

\> `optional` &#x2A;*loop?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:8

#### Inherited from [#inherited-from-6]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`loop`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#loop)

***

### loopEnd? [#loopend]

\> `optional` &#x2A;*loopEnd?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:11

#### Inherited from [#inherited-from-7]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`loopEnd`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#loopend)

***

### loopStart? [#loopstart]

\> `optional` &#x2A;*loopStart?**: `Time`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:10

#### Inherited from [#inherited-from-8]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`loopStart`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#loopstart)

***

### mute? [#mute]

\> `optional` &#x2A;*mute?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/Source.d.ts:10

#### Inherited from [#inherited-from-9]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`mute`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#mute)

***

### ~~muted?~~ [#muted]

\> `optional` &#x2A;*muted?**: `boolean`

Defined in: [src/sound/interfaces/SoundOptions.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L42)

#### Deprecated [#deprecated]

Use [mute](/jsdoc/pixi-vn/index/interfaces/SoundOptions#mute) instead.

#### Inherited from [#inherited-from-10]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`muted`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#muted)

***

### playbackRate? [#playbackrate]

\> `optional` &#x2A;*playbackRate?**: `number`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:7

#### Inherited from [#inherited-from-11]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`playbackRate`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#playbackrate)

***

### reverse? [#reverse]

\> `optional` &#x2A;*reverse?**: `boolean`

Defined in: node\_modules/tone/build/esm/source/buffer/Player.d.ts:12

#### Inherited from [#inherited-from-12]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`reverse`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#reverse)

***

### ~~speed?~~ [#speed]

\> `optional` &#x2A;*speed?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L38)

#### Deprecated [#deprecated-1]

Use [playbackRate](/jsdoc/pixi-vn/index/interfaces/SoundOptions#playbackrate) instead.

#### Inherited from [#inherited-from-13]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`speed`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#speed)

***

### volume? [#volume]

\> `optional` &#x2A;*volume?**: `number`

Defined in: [src/sound/interfaces/SoundOptions.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/interfaces/SoundOptions.ts#L21)

The volume of this sound in the linear range \[0, 1], where 0 is silence
and 1 is full volume.  This is converted to decibels internally before
being passed to the Tone.js Player.

#### Inherited from [#inherited-from-14]

[`SoundPlayOptions`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions).[`volume`](/jsdoc/pixi-vn/index/interfaces/SoundPlayOptions#volume)


# Interface: SpriteBaseMemory (/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)



Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L7)

Interface for the canvas base memory

## Extends [#extends]

* `SpriteOptions`.[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory).[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Extended by [#extended-by]

* [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)
* [`SpriteMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteMemory)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`SpriteOptions.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`SpriteOptions.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`SpriteOptions.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`SpriteOptions.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`SpriteOptions.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`SpriteOptions.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`SpriteOptions.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

`SpriteOptions.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

`SpriteOptions.anchor`

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

`SpriteOptions.angle`

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

`SpriteOptions.autoGarbageCollect`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

`SpriteOptions.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

`SpriteOptions.boundsArea`

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

`SpriteOptions.cacheAsTexture`

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

`SpriteOptions.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

`SpriteOptions.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

`SpriteOptions.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

`SpriteOptions.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

`SpriteOptions.cursor`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

`SpriteOptions.eventMode`

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

`SpriteOptions.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

`SpriteOptions.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

`SpriteOptions.hitArea`

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-24]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

`SpriteOptions.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

`SpriteOptions.interactiveChildren`

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

`SpriteOptions.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`SpriteOptions.mask`

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-29]

`SpriteOptions.onclick`

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-30]

[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-31]

`SpriteOptions.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

`SpriteOptions.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-33]

`SpriteOptions.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-34]

`SpriteOptions.onmousedown`

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-35]

`SpriteOptions.onmouseenter`

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-36]

`SpriteOptions.onmouseleave`

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-37]

`SpriteOptions.onmousemove`

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-38]

`SpriteOptions.onmouseout`

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-39]

`SpriteOptions.onmouseover`

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-40]

`SpriteOptions.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-41]

`SpriteOptions.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-42]

`SpriteOptions.onpointercancel`

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-43]

`SpriteOptions.onpointerdown`

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-44]

`SpriteOptions.onpointerenter`

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-45]

`SpriteOptions.onpointerleave`

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-46]

`SpriteOptions.onpointermove`

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-47]

`SpriteOptions.onpointerout`

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-48]

`SpriteOptions.onpointerover`

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-49]

`SpriteOptions.onpointertap`

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-50]

`SpriteOptions.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

`SpriteOptions.onpointerupoutside`

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-52]

`SpriteOptions.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-53]

`SpriteOptions.onrightclick`

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-54]

`SpriteOptions.onrightdown`

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-55]

`SpriteOptions.onrightup`

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-56]

`SpriteOptions.onrightupoutside`

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-57]

`SpriteOptions.ontap`

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-58]

`SpriteOptions.ontouchcancel`

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-59]

`SpriteOptions.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-60]

`SpriteOptions.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-61]

`SpriteOptions.ontouchmove`

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-55]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-62]

`SpriteOptions.ontouchstart`

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-63]

`SpriteOptions.onwheel`

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

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

#### Inherited from [#inherited-from-64]

`SpriteOptions.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-65]

`SpriteOptions.parent`

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-66]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-70]

`SpriteOptions.pivot`

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-71]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-72]

`SpriteOptions.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-73]

`SpriteOptions.renderable`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-74]

`SpriteOptions.rotation`

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-75]

`SpriteOptions.roundPixels`

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

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

#### Inherited from [#inherited-from-76]

`SpriteOptions.scale`

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-77]

`SpriteOptions.setMask`

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-78]

`SpriteOptions.skew`

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-79]

`SpriteOptions.sortableChildren`

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-80]

`SpriteOptions.sortDirty`

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-81]

`SpriteOptions.tabIndex`

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-82]

`SpriteOptions.texture`

***

### textureData? [#texturedata]

> `optional` &#x2A;*textureData?**: [`AssetMemory`](/jsdoc/pixi-vn/index/interfaces/AssetMemory)

Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L12)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-83]

`SpriteOptions.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-84]

`SpriteOptions.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-85]

`SpriteOptions.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-86]

`SpriteOptions.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-87]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-88]

`SpriteOptions.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-89]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-90]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#zindex)


# Interface: SpriteMemory (/jsdoc/pixi-vn/index/interfaces/SpriteMemory)



Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L18)

Interface for the canvas sprite memory

## Extends [#extends]

* [`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessible`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`align`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`children`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullable`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cullarea)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`cursor`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`eventMode`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`hitArea`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#hitarea)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-24]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`interactive`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`interactiveChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-29]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onclick`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onclick)

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-30]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-31]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobalmousemove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobalpointermove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-33]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmousedown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseenter`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseleave`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmousemove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseout`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseover`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onmouseupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointercancel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerdown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerenter`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerleave`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointermove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerout`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerover`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointertap`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onpointerupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-52]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightclick`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightdown`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightup`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onrightupoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontap`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchcancel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchend`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchendoutside`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchmove`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-55]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`ontouchstart`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`onwheel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

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

#### Inherited from [#inherited-from-64]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-65]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-66]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-70]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#pivot)

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-71]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-72]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-73]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-74]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-75]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

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

#### Inherited from [#inherited-from-76]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-77]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-78]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-79]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-80]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-81]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#tabindex)

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-82]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#texture)

***

### textureData? [#texturedata]

> `optional` &#x2A;*textureData?**: [`AssetMemory`](/jsdoc/pixi-vn/index/interfaces/AssetMemory)

Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L12)

#### Inherited from [#inherited-from-83]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`textureData`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#texturedata)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-84]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`tint`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-85]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-87]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-88]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-89]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-90]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-91]

[`SpriteBaseMemory`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/SpriteBaseMemory#zindex)


# Interface: SpriteOptions (/jsdoc/pixi-vn/index/interfaces/SpriteOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L14)

## Extends [#extends]

* `Omit`\<`PixiSpriteOptions`, `"on"`>.[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Extended by [#extended-by]

* [`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`Omit.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`Omit.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`Omit.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`Omit.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`Omit.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`Omit.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`Omit.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

`Omit.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

`Omit.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

`Omit.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

`Omit.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-25]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-50]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-55]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

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

#### Inherited from [#inherited-from-62]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-63]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-64]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-71]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

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

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-77]

`Omit.tabIndex`

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-78]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#texture)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-79]

`Omit.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-80]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-82]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-83]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-84]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: StepLabelProps (/jsdoc/pixi-vn/index/interfaces/StepLabelProps)



Defined in: [src/narration/interfaces/StepLabelProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StepLabelProps.ts#L17)

StepLabelPropsType is the type of the props that will be passed to the StepLabel.
You can override this interface to add your own props.

## Default [#default]

```ts
{}
```

## Example [#example]

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


# Interface: StepLabelResult (/jsdoc/pixi-vn/index/interfaces/StepLabelResult)



Defined in: [src/narration/interfaces/StepLabelResult.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StepLabelResult.ts#L18)

StepLabelResultType is the return type of the StepLabel function.
It can be useful for returning to the information calling function to perform other operations that cannot be performed within the StepLabel.
You can override this interface to add your own return types.

## Default [#default]

```ts
{}
```

## Example [#example]

```ts
// pixi-vn.d.ts
declare module '@drincs/pixi-vn' {
    interface StepLabelResult {
        newRoute?: string,
        [key: string]: any
    }
}
```


# Interface: StorageExternalStoreHandler (/jsdoc/pixi-vn/index/interfaces/StorageExternalStoreHandler)



Defined in: [src/storage/interfaces/StorageExternalStoreHandler.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageExternalStoreHandler.ts#L3)

## Properties [#properties]

### onClearOldTempVariable? [#onclearoldtempvariable]

\> `optional` &#x2A;*onClearOldTempVariable?**: (`key`) => `void`

Defined in: [src/storage/interfaces/StorageExternalStoreHandler.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageExternalStoreHandler.ts#L13)

Triggered when a temp variable is removed by [StorageRegistry.clearOldTempVariables](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/clearOldTempVariables).
The key is provided without any storage prefix.

#### Parameters [#parameters]

##### key [#key]

`string`

#### Returns [#returns]

`void`

***

### onRemoveVariable? [#onremovevariable]

\> `optional` &#x2A;*onRemoveVariable?**: (`key`) => `void`

Defined in: [src/storage/interfaces/StorageExternalStoreHandler.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageExternalStoreHandler.ts#L18)

Triggered when [StorageRegistry.removeVariable](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/removeVariable) is called.
The key is provided without any storage prefix.

#### Parameters [#parameters-1]

##### key [#key-1]

`string`

#### Returns [#returns-1]

`void`

***

### onSetVariable? [#onsetvariable]

\> `optional` &#x2A;*onSetVariable?**: (`key`, `value`) => `void`

Defined in: [src/storage/interfaces/StorageExternalStoreHandler.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageExternalStoreHandler.ts#L8)

Triggered when [StorageRegistry.setVariable](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setVariable) is called.
The key is provided without any storage prefix.

#### Parameters [#parameters-2]

##### key [#key-2]

`string`

##### value [#value]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

#### Returns [#returns-2]

`void`


# Interface: StorageManagerInterface (/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface)



Defined in: [src/storage/interfaces/StorageManagerInterface.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L6)

## Properties [#properties]

### base [#base]

\> `readonly` **base**: `Map`\<`string`, [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)>

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L24)

The internal storage. &#x2A;*Do not modify this directly.**

ATTENTION: If you edit this directly, the [cache](#cache) will not be updated.

You can use Keyv with Pixi’VN by creating a new instance of Keyv and passing the storage object as a parameter.

```ts
import { storage } from '@drincs/pixi-vn'
import Keyv from 'keyv';

const keyvStorage = new Keyv({ store: storage.base });

keyvStorage.get<string>("myValue").then((value) => {
    console.log(value);
});
```

***

### cache [#cache]

\> `readonly` **cache**: `LRUCache`\<`string`, `any`, `unknown`>

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L28)

The internal cache. &#x2A;*Do not modify this directly.**

## Accessors [#accessors]

### default [#default]

#### Set Signature [#set-signature]

\> **set** **default**(`value`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:34](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L34)

Set the starting storage. The starting storage that will be used when the game starts.
&#x2A;*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.**
By default, the starting storage is empty.

##### Parameters [#parameters]

###### value [#value]

##### Returns [#returns]

`void`

## Methods [#methods]

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:118](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L118)

Clear the storage and the oidsUsed

#### Returns [#returns-1]

`void`

***

### export() [#export]

\> **export**(): [`StorageGameState`](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:123](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L123)

Export the storage to an object

#### Returns [#returns-2]

[`StorageGameState`](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)

The object

***

### get() [#get]

\> **get**\<`T`>(`key`): `T` | `undefined`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:47](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L47)

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

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

#### Parameters [#parameters-1]

##### key [#key]

`string`

The key of the variable

#### Returns [#returns-3]

`T` | `undefined`

The value of the variable. If the variable does not exist, it will return undefined

***

### getFlag() [#getflag]

\> **getFlag**(`key`): `boolean`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:79](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L79)

Get the value of a flag

#### Parameters [#parameters-2]

##### key [#key-1]

`string`

The name of the flag

#### Returns [#returns-4]

`boolean`

The value of the flag

***

### remove() [#remove]

\> **remove**(`key`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L53)

Remove a variable from the storage

#### Parameters [#parameters-3]

##### key [#key-2]

`string`

The key of the variable

#### Returns [#returns-5]

`void`

***

### removeTempVariable() [#removetempvariable]

\> **removeTempVariable**(`key`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:66](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L66)

Remove a temporary variable

#### Parameters [#parameters-4]

##### key [#key-3]

`string`

The key of the temporary variable

#### Returns [#returns-6]

`void`

***

### restore() [#restore]

\> **restore**(`data`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L128)

Restore the storage from an object

#### Parameters [#parameters-5]

##### data [#data]

[`StorageGameState`](/jsdoc/pixi-vn/index/type-aliases/StorageGameState)

The object

#### Returns [#returns-7]

`void`

***

### set() [#set]

\> **set**(`key`, `value`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:41](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L41)

Set a variable in the storage

#### Parameters [#parameters-6]

##### key [#key-4]

`string`

The key of the variable

##### value [#value-1]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The value of the variable. If undefined, the variable will be removed

#### Returns [#returns-8]

`void`

***

### setFlag() [#setflag]

\> **setFlag**(`key`, `value`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:73](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L73)

Set a flag to true or false.

#### Parameters [#parameters-7]

##### key [#key-5]

`string`

The name of the flag

##### value [#value-2]

`boolean`

The value of the flag.

#### Returns [#returns-9]

`void`

***

### setStorageHandler() [#setstoragehandler]

\> **setStorageHandler**(`value?`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:113](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L113)

Configure the handler used to mirror game storage changes into an external reactive store.
Call this at any time to start/stop mirroring.

#### Parameters [#parameters-8]

##### value? [#value-3]

[`StorageExternalStoreHandler`](/jsdoc/pixi-vn/index/interfaces/StorageExternalStoreHandler)

The handler to set. If undefined, the handler will be removed.

#### Returns [#returns-10]

`void`

#### Example [#example]

```ts
import { Store } from '@tanstack/store'

// Create a TanStack store that mirrors the game storage variables
const gameStore = new Store<Record<string, unknown>>({})

storage.setStorageHandler({
    onSetVariable: (key, value) => {
        gameStore.setState((state) => ({ ...state, [key]: value }))
    },
    onRemoveVariable: (key) => {
        gameStore.setState((state) => {
            const next = { ...state }
            delete next[key]
            return next
        })
    },
    onClearOldTempVariable: (key) => {
        gameStore.setState((state) => {
            const next = { ...state }
            delete next[key]
            return next
        })
    },
})
```

***

### setTempVariable() [#settempvariable]

\> **setTempVariable**(`key`, `value`): `void`

Defined in: [src/storage/interfaces/StorageManagerInterface.ts:61](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageManagerInterface.ts#L61)

Set a variable in the temporary storage. The lifespan of the variable is the number of opened labels.
To get the temporary variable, use [get](#get)

#### Parameters [#parameters-9]

##### key [#key-6]

`string`

The key of the temporary variable

##### value [#value-4]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

The value of the temporary variable. If undefined, the variable will be removed

#### Returns [#returns-11]

`void`


# Interface: TextMemory (/jsdoc/pixi-vn/index/interfaces/TextMemory)



Defined in: [src/canvas/interfaces/memory/TextMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/TextMemory.ts#L9)

Interface for the canvas text memory

## Extends [#extends]

* `TextOptions`.[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`TextOptions.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`TextOptions.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`TextOptions.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`TextOptions.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`TextOptions.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`TextOptions.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`TextOptions.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

`TextOptions.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:136

The anchor point of the text that controls the origin point for positioning and rotation.
Can be a number (same value for x/y) or a PointData object.

* (0,0) is top-left
* (0.5,0.5) is center
* (1,1) is bottom-right

```ts
// Set anchor to center
const text = new Text({
    text: 'Hello Pixi!',
    anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
});
// Set anchor to top-left
const text2 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 0, y: 0 } // Top-left corner
});
// Set anchor to bottom-right
const text3 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 1, y: 1 } // Bottom-right corner
});
```

#### Default [#default-8]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-9]

`TextOptions.anchor`

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

`TextOptions.angle`

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

`TextOptions.autoGarbageCollect`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

`TextOptions.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

`TextOptions.boundsArea`

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

`TextOptions.cacheAsTexture`

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

`TextOptions.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

`TextOptions.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

`TextOptions.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

`TextOptions.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

`TextOptions.cursor`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

`TextOptions.eventMode`

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

`TextOptions.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

`TextOptions.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

`TextOptions.hitArea`

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-24]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

`TextOptions.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

`TextOptions.interactiveChildren`

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

`TextOptions.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`TextOptions.mask`

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-29]

`TextOptions.onclick`

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-30]

[`ListenerExtensionMemory`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/ListenerExtensionMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-31]

`TextOptions.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

`TextOptions.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-33]

`TextOptions.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-34]

`TextOptions.onmousedown`

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-35]

`TextOptions.onmouseenter`

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-36]

`TextOptions.onmouseleave`

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-37]

`TextOptions.onmousemove`

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-38]

`TextOptions.onmouseout`

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-39]

`TextOptions.onmouseover`

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-40]

`TextOptions.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-41]

`TextOptions.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-42]

`TextOptions.onpointercancel`

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-43]

`TextOptions.onpointerdown`

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-44]

`TextOptions.onpointerenter`

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-45]

`TextOptions.onpointerleave`

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-46]

`TextOptions.onpointermove`

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-47]

`TextOptions.onpointerout`

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-48]

`TextOptions.onpointerover`

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-49]

`TextOptions.onpointertap`

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-50]

`TextOptions.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-51]

`TextOptions.onpointerupoutside`

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-52]

`TextOptions.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-53]

`TextOptions.onrightclick`

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-54]

`TextOptions.onrightdown`

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-55]

`TextOptions.onrightup`

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-56]

`TextOptions.onrightupoutside`

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-57]

`TextOptions.ontap`

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-58]

`TextOptions.ontouchcancel`

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-59]

`TextOptions.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-60]

`TextOptions.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-61]

`TextOptions.ontouchmove`

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-62]

`TextOptions.ontouchstart`

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-63]

`TextOptions.onwheel`

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-64]

`TextOptions.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-65]

`TextOptions.parent`

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-66]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#parentlabel)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-70]

`TextOptions.pivot`

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-71]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-72]

`TextOptions.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-73]

`TextOptions.renderable`

***

### resolution? [#resolution]

> `optional` &#x2A;*resolution?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:175

The resolution/device pixel ratio for rendering.
Higher values result in sharper text at the cost of performance.
Set to null for auto-resolution based on device.

#### Example [#example-60]

```ts
const text = new Text({
    text: 'Hello Pixi!',
    resolution: 2 // High DPI for sharper text
});
const autoResText = new Text({
    text: 'Auto Resolution',
    resolution: null // Use device's pixel ratio
});
```

#### Default [#default-51]

```ts
null
```

#### Inherited from [#inherited-from-74]

`TextOptions.resolution`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-75]

`TextOptions.rotation`

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:225

Whether to round the x/y position to whole pixels.
Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.

#### Example [#example-62]

````ts
const text = new Text({
    text: 'Rounded Text',
    roundPixels: true // Rounds position to whole pixels
});
@default false

#### Inherited from

`TextOptions.roundPixels`

***

### scale?

&gt; `optional` **scale?**: `number` \| `PointData`

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example

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

#### Inherited from [#inherited-from-76]

`TextOptions.scale`

***

### setMask? [#setmask]

\> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-77]

`TextOptions.setMask`

***

### skew? [#skew]

\> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-63]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-78]

`TextOptions.skew`

***

### sortableChildren? [#sortablechildren]

\> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-64]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-79]

`TextOptions.sortableChildren`

***

### sortDirty? [#sortdirty]

\> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-80]

`TextOptions.sortDirty`

***

### style? [#style]

\> `optional` &#x2A;*style?**: `TextStyle` | `TextStyleOptions`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:213

The style configuration for the text.
Can be a TextStyle instance or a configuration object.
Supports canvas text styles, HTML text styles, and bitmap text styles.

#### Example [#example-65]

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

#### Inherited from

`TextOptions.style`

***

### tabIndex?

> `optional` **tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default

```ts
0
````

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-81]

`TextOptions.tabIndex`

***

### text? [#text]

> `optional` &#x2A;*text?**: `TextString`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:157

The text content to display. Use '\n' for line breaks.
Accepts strings, numbers, or objects with toString() method.

#### Example [#example-67]

```ts
const text = new Text({
    text: 'Hello Pixi!',
});
const multilineText = new Text({
    text: 'Line 1\nLine 2\nLine 3',
});
const numberText = new Text({
    text: 12345, // Will be converted to '12345'
});
const objectText = new Text({
    text: { toString: () =&gt; 'Object Text' }, // Custom toString
});
```

#### Default [#default-55]

```ts
''
```

#### Inherited from [#inherited-from-82]

`TextOptions.text`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-56]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-83]

`TextOptions.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-57]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-84]

`TextOptions.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-58]

```ts
0
```

#### Inherited from [#inherited-from-85]

`TextOptions.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-86]

`TextOptions.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-87]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-88]

`TextOptions.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-89]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-90]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory#zindex)


# Interface: TextOptions (/jsdoc/pixi-vn/index/interfaces/TextOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L17)

## Extends [#extends]

* `Omit`\<`CanvasTextOptions`, `"on"`>.[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`Omit.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`Omit.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`Omit.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`Omit.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`Omit.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`Omit.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`Omit.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`align`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:136

The anchor point of the text that controls the origin point for positioning and rotation.
Can be a number (same value for x/y) or a PointData object.

* (0,0) is top-left
* (0.5,0.5) is center
* (1,1) is bottom-right

```ts
// Set anchor to center
const text = new Text({
    text: 'Hello Pixi!',
    anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
});
// Set anchor to top-left
const text2 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 0, y: 0 } // Top-left corner
});
// Set anchor to bottom-right
const text3 = new Text({
    text: 'Hello Pixi!',
    anchor: { x: 1, y: 1 } // Bottom-right corner
});
```

#### Default [#default-8]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-9]

`Omit.anchor`

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#autogarbagecollect)

***

### autoGenerateMipmaps? [#autogeneratemipmaps]

\> `optional` &#x2A;*autoGenerateMipmaps?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/Text.d.ts:68

Whether to generate mipmaps for the text texture.
Improves rendering quality when the text is scaled down.

#### Default [#default-9]

```ts
undefined - Falls back to TextureSource.defaultOptions.autoGenerateMipmaps
```

#### Inherited from [#inherited-from-12]

`Omit.autoGenerateMipmaps`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-10]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-14]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-15]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-16]

`Omit.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-11]

```ts
false
```

#### Inherited from [#inherited-from-17]

`Omit.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-12]

```ts
true
```

#### Inherited from [#inherited-from-18]

`Omit.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-19]

`Omit.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-14]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-20]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-21]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-22]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-15]

```ts
0
```

#### Inherited from [#inherited-from-23]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-16]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-18]

```ts
null
```

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-21]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

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

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

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

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

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

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

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

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

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

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

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

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

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

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

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

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

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

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

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

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

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

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

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

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

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

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

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

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

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

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-51]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

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

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

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

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

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

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

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

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

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

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

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

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

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

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

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

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

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

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

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

#### Example [#example-54]

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

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

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

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

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-50]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

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

#### Inherited from [#inherited-from-63]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-64]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-51]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### resolution? [#resolution]

> `optional` &#x2A;*resolution?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:175

The resolution/device pixel ratio for rendering.
Higher values result in sharper text at the cost of performance.
Set to null for auto-resolution based on device.

#### Example [#example-60]

```ts
const text = new Text({
    text: 'Hello Pixi!',
    resolution: 2 // High DPI for sharper text
});
const autoResText = new Text({
    text: 'Auto Resolution',
    resolution: null // Use device's pixel ratio
});
```

#### Default [#default-52]

```ts
null
```

#### Inherited from [#inherited-from-71]

`Omit.resolution`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:225

Whether to round the x/y position to whole pixels.
Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.

#### Example [#example-62]

````ts
const text = new Text({
    text: 'Rounded Text',
    roundPixels: true // Rounds position to whole pixels
});
@default false

#### Inherited from

`Omit.roundPixels`

***

### scale?

&gt; `optional` **scale?**: `number` \| `PointData`

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example

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

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

\> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

\> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-63]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-53]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

\> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-64]

```ts
container.sortableChildren = true;
```

#### Default [#default-54]

```ts
false
```

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

\> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-55]

```ts
false
@internal
```

#### Inherited from [#inherited-from-77]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### style? [#style]

\> `optional` &#x2A;*style?**: `TextStyle` | `TextStyleOptions`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:213

The style configuration for the text.
Can be a TextStyle instance or a configuration object.
Supports canvas text styles, HTML text styles, and bitmap text styles.

#### Example [#example-65]

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

#### Inherited from

`Omit.style`

***

### tabIndex?

> `optional` **tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default

```ts
0
````

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-78]

`Omit.tabIndex`

***

### text? [#text]

> `optional` &#x2A;*text?**: `TextString`

Defined in: node\_modules/pixi.js/lib/scene/text/AbstractText.d.ts:157

The text content to display. Use '\n' for line breaks.
Accepts strings, numbers, or objects with toString() method.

#### Example [#example-67]

```ts
const text = new Text({
    text: 'Hello Pixi!',
});
const multilineText = new Text({
    text: 'Line 1\nLine 2\nLine 3',
});
const numberText = new Text({
    text: 12345, // Will be converted to '12345'
});
const objectText = new Text({
    text: { toString: () =&gt; 'Object Text' }, // Custom toString
});
```

#### Default [#default-56]

```ts
''
```

#### Inherited from [#inherited-from-79]

`Omit.text`

***

### textureStyle? [#texturestyle]

> `optional` &#x2A;*textureStyle?**: `TextureStyleOptions` | `TextureStyle`

Defined in: node\_modules/pixi.js/lib/scene/text/Text.d.ts:62

Optional texture style to use for the text texture. This allows fine control over
how the text is rendered to a texture before being displayed.

The texture style can affect:

* Scale mode (nearest/linear)
* Resolution
* Format (rgb/rgba)
* Alpha handling

#### Example [#example-68]

```ts
const text = new Text({
    text: 'Crisp Text',
    textureStyle: {
        scaleMode: 'nearest', // Pixel-perfect scaling
    }
});
```

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-80]

`Omit.textureStyle`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-69]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-81]

`Omit.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

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

#### Example [#example-70]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-82]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-71]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-83]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-72]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-84]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-73]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-86]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-87]

[`AdditionalPositionsExtensionProps`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/AdditionalPositionsExtensionProps#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-74]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-88]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: Ticker<TArgs> (/jsdoc/pixi-vn/index/interfaces/Ticker)



Defined in: [src/canvas/tickers/interfaces/Ticker.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L5)

## Type Parameters [#type-parameters]

### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

## Properties [#properties]

### alias [#alias]

\> `readonly` **alias**: `string`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L21)

Get the alias of the ticker class. This variable is used in the system to get the ticker class by id, [RegisteredTickers.getInstance](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/getInstance)

***

### args [#args]

\> **args**: `TArgs`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L9)

Arguments to pass to the ticker

***

### canvasElementAliases [#canvaselementaliases]

\> **canvasElementAliases**: `string`\[]

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:29](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L29)

The aliases of the canvas elements that are connected to this ticker

***

### complete [#complete]

\> **complete**: (`options?`) => `void` | `Promise`\<`void`>

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L33)

Completes the animation and applies the final state.

#### Parameters [#parameters]

##### options? [#options]

###### ignoreTickerSteps? [#ignoretickersteps]

`boolean`

#### Returns [#returns]

`void` | `Promise`\<`void`>

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L13)

Duration in seconds to run the ticker

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L25)

The id of the ticker. Must be unique for each ticker instance.

***

### pause [#pause]

\> **pause**: () => `void`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:45](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L45)

Pauses the animation.

#### Returns [#returns-1]

`void`

***

### paused [#paused]

\> `readonly` **paused**: `boolean`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:54](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L54)

Checks if the ticker is paused.

#### Returns [#returns-2]

true if the ticker is paused, false otherwise.

***

### play [#play]

\> **play**: () => `void`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:49](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L49)

Plays the animation.

#### Returns [#returns-3]

`void`

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `UPDATE_PRIORITY`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L17)

Priority of the ticker

***

### start [#start]

\> **start**: () => `void`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:41](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L41)

Starts the ticker. This will start the ticker and begin the animation.

#### Returns [#returns-4]

`void`

***

### stop [#stop]

\> **stop**: () => `void`

Defined in: [src/canvas/tickers/interfaces/Ticker.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/Ticker.ts#L37)

Stops the animation at its current state, and prevents it from resuming when the animation is played again.

#### Returns [#returns-5]

`void`


# Interface: TickerArgs (/jsdoc/pixi-vn/index/interfaces/TickerArgs)



Defined in: [src/canvas/tickers/interfaces/TickerArgs.ts:2](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerArgs.ts#L2)


# Interface: TickerHistory<TArgs> (/jsdoc/pixi-vn/index/interfaces/TickerHistory)



Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L19)

## Type Parameters [#type-parameters]

### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

## Properties [#properties]

### args [#args]

\> **args**: `TArgs`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L21)

***

### canvasElementAliases [#canvaselementaliases]

\> **canvasElementAliases**: `string`\[]

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L25)

The aliases of the canvas elements that are connected to this ticker

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L27)

***

### id [#id]

\> **id**: `string`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L20)

***

### paused? [#paused]

\> `optional` &#x2A;*paused?**: `boolean`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L28)

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `UPDATE_PRIORITY`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L26)


# Interface: TickerInfo<TArgs> (/jsdoc/pixi-vn/index/interfaces/TickerInfo)



Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L8)

TickerHistory is a class that contains the name of a class and the arguments that were used to create it.

## Type Parameters [#type-parameters]

### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

## Properties [#properties]

### createdByTicketSteps? [#createdbyticketsteps]

\> `optional` &#x2A;*createdByTicketSteps?**: `object`

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L12)

If this ticker was created by steps

#### canvasElementAlias [#canvaselementalias]

\> **canvasElementAlias**: `string`

#### id [#id]

\> **id**: `string`

***

### ticker [#ticker]

\> **ticker**: [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`>

Defined in: [src/canvas/tickers/interfaces/TickerInfo.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerInfo.ts#L16)


# Interface: TickerProgrationExponential (/jsdoc/pixi-vn/index/interfaces/TickerProgrationExponential)



Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L14)

## Properties [#properties]

### limit? [#limit]

\> `optional` &#x2A;*limit?**: `number`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L22)

The limit of the effect

***

### percentage [#percentage]

\> **percentage**: `number`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:18](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L18)

The percentage of the speed to increase every frame. if the percentage is 0.1, the speed will increase by 10% every frame.

***

### type [#type]

\> **type**: `"exponential"`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L23)


# Interface: TickerProgrationLinear (/jsdoc/pixi-vn/index/interfaces/TickerProgrationLinear)



Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L3)

## Properties [#properties]

### amt [#amt]

\> **amt**: `number`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L7)

The amount of the speed to increase every frame.

***

### limit? [#limit]

\> `optional` &#x2A;*limit?**: `number`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L11)

The limit of the effect

***

### type [#type]

\> **type**: `"linear"`

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L12)


# Interface: TickerTimeoutHistory (/jsdoc/pixi-vn/index/interfaces/TickerTimeoutHistory)



Defined in: [src/canvas/tickers/interfaces/TickerTimeoutHistory.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerTimeoutHistory.ts#L1)

## Properties [#properties]

### aliases [#aliases]

\> **aliases**: `string`\[]

Defined in: [src/canvas/tickers/interfaces/TickerTimeoutHistory.ts:2](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerTimeoutHistory.ts#L2)

***

### canBeDeletedBeforeEnd [#canbedeletedbeforeend]

\> **canBeDeletedBeforeEnd**: `boolean`

Defined in: [src/canvas/tickers/interfaces/TickerTimeoutHistory.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerTimeoutHistory.ts#L4)

***

### ticker [#ticker]

\> **ticker**: `string`

Defined in: [src/canvas/tickers/interfaces/TickerTimeoutHistory.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerTimeoutHistory.ts#L3)


# Interface: TickerValue (/jsdoc/pixi-vn/index/interfaces/TickerValue)



Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:67

A Ticker class that runs an update loop that other objects listen to.
Used for managing animation frames and timing in a PixiJS application.

It provides a way to add listeners that will be called on each frame,
allowing for smooth animations and updates.

## Time Units [#time-units]

* `deltaTime`: Dimensionless scalar (typically \~1.0 at 60 FPS) for frame-independent animations
* `deltaMS`: Milliseconds elapsed (capped and speed-scaled) for time-based calculations
* `elapsedMS`: Raw milliseconds elapsed (uncapped, unscaled) for measurements
* `lastTime`: Timestamp in milliseconds since epoch (performance.now() format)

Animation frames are requested
only when necessary, e.g., when the ticker is started and the emitter has listeners.

## Example [#example]

```ts
// Basic ticker usage with different time units
const ticker = new Ticker();
ticker.add((ticker) => {
    // Frame-independent animation using dimensionless deltaTime
    sprite.rotation += 0.1 * ticker.deltaTime;

    // Time-based animation using deltaMS (milliseconds)
    sprite.x += (100 / 1000) * ticker.deltaMS; // 100 pixels per second
});
ticker.start();

// Control update priority
ticker.add(
    (ticker) => {
        // High priority updates run first
        physics.update(ticker.deltaTime);
    },
    undefined,
    UPDATE_PRIORITY.HIGH
);

// One-time updates
ticker.addOnce(() => {
    console.log('Runs on next frame only');
});
```

## See [#see]

* TickerPlugin For use with Application
* [UPDATE\_PRIORITY](/jsdoc/pixi-vn/index/variables/UPDATE_PRIORITY) For priority constants
* TickerCallback For listener function type

## Standard [#standard]

## Properties [#properties]

### autoStart [#autostart]

\> **autoStart**: `boolean`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:118

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

#### Example [#example-1]

```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 [#default]

```ts
false
```

#### See [#see-1]

* [Ticker#start](#start) For manually starting the ticker
* [Ticker#stop](#stop) For manually stopping the ticker

***

### deltaMS [#deltams]

\> **deltaMS**: `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:160

Scalar time elapsed in milliseconds from last frame to this frame.
Provides precise timing for animations and updates.

This value is capped by setting [minFPS](#minfps)
and is scaled with [speed](#speed).

If the platform supports DOMHighResTimeStamp,
this value will have a precision of 1 µs.

Defaults to target frame time

\> \[!NOTE] The cap may be exceeded by scaling.

#### Example [#example-2]

```ts
// Animation timing
ticker.add((ticker) => {
    // Use millisecond timing for precise animations
    const progress = (ticker.deltaMS / animationDuration);
    sprite.alpha = Math.min(1, progress);
});
```

#### Default [#default-1]

```ts
16.66
```

***

### deltaTime [#deltatime]

\> **deltaTime**: `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:135

Scalar representing the delta time factor.
This is a dimensionless value representing the fraction of a frame at the target framerate.
At 60 FPS, this value is typically around 1.0.

This is NOT in milliseconds - it's a scalar multiplier for frame-independent animations.
For actual milliseconds, use [Ticker#deltaMS](#deltams).

#### Example [#example-3]

```ts
// Frame-independent animation using deltaTime scalar
ticker.add((ticker) => {
    // Rotate sprite by 0.1 radians per frame, scaled by deltaTime
    sprite.rotation += 0.1 * ticker.deltaTime;
});
```

***

### elapsedMS [#elapsedms]

\> **elapsedMS**: `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:173

Time elapsed in milliseconds from the last frame to this frame.
This value is not capped or scaled and provides raw timing information.

Unlike [Ticker#deltaMS](#deltams), this value is unmodified by speed scaling or FPS capping.

#### Example [#example-4]

```ts
ticker.add((ticker) => {
    console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
});
```

***

### lastTime [#lasttime]

\> **lastTime**: `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:188

The last time update was invoked, in milliseconds since epoch.
Similar to performance.now() timestamp format.

Used internally for calculating time deltas between frames.

#### Example [#example-5]

```ts
ticker.add((ticker) => {
    const currentTime = performance.now();
    const timeSinceLastFrame = currentTime - ticker.lastTime;
    console.log(`Time since last frame: ${timeSinceLastFrame}ms`);
});
```

***

### speed [#speed]

\> **speed**: `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:208

Factor of current [deltaTime](#deltatime).
Used to scale time for slow motion or fast-forward effects.

#### Example [#example-6]

```ts
// Basic speed adjustment
ticker.speed = 0.5; // Half speed (slow motion)
ticker.speed = 2.0; // Double speed (fast forward)

// Temporary speed changes
function slowMotion() {
    const normalSpeed = ticker.speed;
    ticker.speed = 0.2;
    setTimeout(() => {
        ticker.speed = normalSpeed;
    }, 1000);
}
```

***

### started [#started]

\> **started**: `boolean`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:229

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.

#### Example [#example-7]

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

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

## Accessors [#accessors]

### count [#count]

#### Get Signature [#get-signature]

\> **get** **count**(): `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:397

The number of listeners on this ticker, calculated by walking through linked list.

##### Example [#example-8]

```ts
// Check number of active listeners
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
```

##### See [#see-2]

* [Ticker#add](#add) For adding listeners
* [Ticker#remove](#remove) For removing listeners

##### Returns [#returns]

`number`

***

### FPS [#fps]

#### Get Signature [#get-signature-1]

\> **get** **FPS**(): `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:479

The frames per second at which this ticker is running.
The default is approximately 60 in most modern browsers.
\> \[!NOTE] This does not factor in the value of
\> [speed](#speed), which is specific
\> to scaling [deltaTime](#deltatime).

##### Example [#example-9]

```ts
// Basic FPS monitoring
ticker.add(() => {
    console.log(`Current FPS: ${Math.round(ticker.FPS)}`);
});
```

##### Returns [#returns-1]

`number`

***

### maxFPS [#maxfps]

#### Get Signature [#get-signature-2]

\> **get** **maxFPS**(): `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:535

Manages the minimum amount of milliseconds required to
elapse between invoking [update](#update).

This will effect the measured value of [FPS](#fps).

If it is set to `0`, then there is no limit; PixiJS will render as many frames as it can.
Otherwise it will be at least `minFPS`.

If `maxFPS` is set below the current `minFPS`, `minFPS` is automatically lowered to match.
This keeps the two limits consistent.

##### Example [#example-10]

```ts
// Cap the frame rate
const ticker = new Ticker();
ticker.maxFPS = 60; // Never go above 60 FPS

// Use with minFPS for frame rate clamping
ticker.minFPS = 30;
ticker.maxFPS = 60;

// maxFPS below minFPS pushes minFPS down
ticker.maxFPS = 20; // minFPS is now also 20
```

##### Default [#default-2]

```ts
0
```

##### Returns [#returns-2]

`number`

#### Set Signature [#set-signature]

\> **set** **maxFPS**(`fps`): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:536

##### Parameters [#parameters]

###### fps [#fps-1]

`number`

##### Returns [#returns-3]

`void`

***

### minFPS [#minfps]

#### Get Signature [#get-signature-3]

\> **get** **minFPS**(): `number`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:507

Manages the maximum amount of milliseconds allowed to
elapse between invoking [update](#update).

This value is used to cap [deltaTime](#deltatime),
but does not effect the measured value of [FPS](#fps).

When setting this property it is clamped to a value between
`0` and `Ticker.targetFPMS * 1000` (typically 60).

If `maxFPS` is currently set (non-zero) and `minFPS` is set above it,
`maxFPS` is automatically raised to match. This keeps the two limits consistent.

##### Example [#example-11]

```ts
// Set minimum acceptable frame rate
const ticker = new Ticker();
ticker.minFPS = 30; // Never go below 30 FPS

// Use with maxFPS for frame rate clamping
ticker.minFPS = 30;
ticker.maxFPS = 60;

// minFPS above maxFPS pushes maxFPS up
ticker.minFPS = 50; // maxFPS is raised to 50
```

##### Default [#default-3]

```ts
10
```

##### Returns [#returns-4]

`number`

#### Set Signature [#set-signature-1]

\> **set** **minFPS**(`fps`): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:508

##### Parameters [#parameters-1]

###### fps [#fps-2]

`number`

##### Returns [#returns-5]

`void`

## Methods [#methods]

### add() [#add]

\> **add**\<`T`>(`fn`, `context?`, `priority?`): `this`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:296

Register a handler for tick events.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `any`

#### Parameters [#parameters-2]

##### fn [#fn]

`TickerCallback`\<`T`>

The listener function to add. Receives the Ticker instance as parameter

##### context? [#context]

`T`

The context for the listener

##### priority? [#priority]

`number`

The priority of the listener

#### Returns [#returns-6]

`this`

#### Example [#example-12]

```ts
// Access time properties through the ticker parameter
ticker.add((ticker) => {
    // Use deltaTime (dimensionless scalar) for frame-independent animations
    sprite.rotation += 0.1 * ticker.deltaTime;

    // Use deltaMS (milliseconds) for time-based calculations
    const progress = ticker.deltaMS / animationDuration;

    // Use elapsedMS for raw timing measurements
    console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
});
```

***

### addOnce() [#addonce]

\> **addOnce**\<`T`>(`fn`, `context?`, `priority?`): `this`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:332

Add a handler for the tick event which is only executed once on the next frame.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` = `any`

#### Parameters [#parameters-3]

##### fn [#fn-1]

`TickerCallback`\<`T`>

The listener function to be added for one update

##### context? [#context-1]

`T`

The listener context

##### priority? [#priority-1]

`number`

The priority for emitting (default: UPDATE\_PRIORITY.NORMAL)

#### Returns [#returns-7]

`this`

This instance of a ticker

#### Example [#example-13]

```ts
// Basic one-time update
ticker.addOnce(() => {
    console.log('Runs next frame only');
});

// With specific context
const game = {
    init(ticker) {
        this.loadResources();
        console.log('Game initialized');
    }
};
ticker.addOnce(game.init, game);

// With priority
ticker.addOnce(
    () => {
        // High priority one-time setup
        physics.init();
    },
    undefined,
    UPDATE_PRIORITY.HIGH
);
```

#### See [#see-3]

* [Ticker#add](#add) For continuous updates
* [Ticker#remove](#remove) For removing handlers

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:439

Destroy the ticker and don't use after this. Calling this method removes all references to internal events.

#### Returns [#returns-8]

`void`

#### Example [#example-14]

```ts
// Clean up with active listeners
const ticker = new Ticker();
ticker.add(() => {});
ticker.destroy(); // Removes all listeners
```

#### See [#see-4]

* [Ticker#stop](#stop) For stopping without destroying
* [Ticker#remove](#remove) For removing specific listeners

***

### remove() [#remove]

\> **remove**\<`T`>(`fn`, `context?`): `this`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:375

Removes any handlers matching the function and context parameters.
If no handlers are left after removing, then it cancels the animation frame.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` = `any`

#### Parameters [#parameters-4]

##### fn [#fn-2]

`TickerCallback`\<`T`>

The listener function to be removed

##### context? [#context-2]

`T`

The listener context to be removed

#### Returns [#returns-9]

`this`

This instance of a ticker

#### Example [#example-15]

```ts
// Basic removal
const onTick = () => {
    sprite.rotation += 0.1;
};
ticker.add(onTick);
ticker.remove(onTick);

// Remove with context
const game = {
    update(ticker) {
        this.physics.update(ticker.deltaTime);
    }
};
ticker.add(game.update, game);
ticker.remove(game.update, game);

// Remove all matching handlers
// (if same function was added multiple times)
ticker.add(onTick);
ticker.add(onTick);
ticker.remove(onTick); // Removes all instances
```

#### See [#see-5]

* [Ticker#add](#add) For adding handlers
* [Ticker#addOnce](#addonce) For one-time handlers

***

### start() [#start]

\> **start**(): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:413

Starts the ticker. If the ticker has listeners a new animation frame is requested at this point.

#### Returns [#returns-10]

`void`

#### Example [#example-16]

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

#### See [#see-6]

* [Ticker#stop](#stop) For stopping the ticker
* [Ticker#autoStart](#autostart) For automatic starting
* [Ticker#started](#started) For checking ticker state

***

### stop() [#stop]

\> **stop**(): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:426

Stops the ticker. If the ticker has requested an animation frame it is canceled at this point.

#### Returns [#returns-11]

`void`

#### Example [#example-17]

```ts
// Basic stop
const ticker = new Ticker();
ticker.stop();
```

#### See [#see-7]

* [Ticker#start](#start) For starting the ticker
* [Ticker#started](#started) For checking ticker state
* [Ticker#destroy](#destroy) For cleaning up the ticker

***

### update() [#update]

\> **update**(`currentTime?`): `void`

Defined in: node\_modules/pixi.js/lib/ticker/Ticker.d.ts:463

Triggers an update.

An update entails setting the
current [elapsedMS](#elapsedms),
the current [deltaTime](#deltatime),
invoking all listeners with current deltaTime,
and then finally setting [lastTime](#lasttime)
with the value of currentTime that was provided.

This method will be called automatically by animation
frame callbacks if the ticker instance has been started
and listeners are added.

#### Parameters [#parameters-5]

##### currentTime? [#currenttime]

`number`

The current time of execution (defaults to performance.now())

#### Returns [#returns-12]

`void`

#### Example [#example-18]

```ts
// Basic manual update
const ticker = new Ticker();
ticker.update(performance.now());
```

#### See [#see-8]

* [Ticker#deltaTime](#deltatime) For frame delta value
* [Ticker#elapsedMS](#elapsedms) For raw elapsed time


# Interface: TickersSequence (/jsdoc/pixi-vn/index/interfaces/TickersSequence)



Defined in: [src/canvas/tickers/interfaces/TickersSequence.ts:28](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickersSequence.ts#L28)

The steps of the tickers

## Properties [#properties]

### currentStepNumber [#currentstepnumber]

\> **currentStepNumber**: `number`

Defined in: [src/canvas/tickers/interfaces/TickersSequence.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickersSequence.ts#L32)

The step number

***

### steps [#steps]

\> **steps**: (`"repeat"` | [`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType) | `TickersStep`\<`any`>)\[]

Defined in: [src/canvas/tickers/interfaces/TickersSequence.ts:36](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickersSequence.ts#L36)

The steps of the tickers


# Interface: UnresolvedAsset<T> (/jsdoc/pixi-vn/index/interfaces/UnresolvedAsset)



Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:216

An asset that has not been resolved yet. This is the initial format used when adding assets
to the Assets system before they are processed into a [ResolvedAsset](/jsdoc/pixi-vn/index/interfaces/ResolvedAsset).

## Example [#example]

```ts
// Basic unresolved asset
const asset: UnresolvedAsset = {
    alias: 'hero',
    src: 'hero.png'
};

// Multiple aliases and formats
const asset: UnresolvedAsset = {
    alias: ['hero', 'player'],
    src: 'hero.{webp,png}',
    data: {
        scaleMode: 'nearest',
    }
};

// Asset with multiple sources and formats
const asset: UnresolvedAsset = {
    alias: 'background',
    src: [
        'bg@2x.webp',
        'bg@1x.webp',
        'bg@2x.png',
        'bg@1x.png',
    ]
};

// With specific loader
const asset: UnresolvedAsset = {
    alias: 'config',
    src: 'data.txt',
    parser: 'text'
};
```

## Remarks [#remarks]

* Used as input format when adding assets to the system
* Can specify multiple aliases for the same asset
* Supports format patterns for browser compatibility
* Can include loader-specific data and options

## See [#see]

* [ResolvedAsset](/jsdoc/pixi-vn/index/interfaces/ResolvedAsset) For the resolved asset format
* Assets.add For adding unresolved assets

## Standard [#standard]

## Type Parameters [#type-parameters]

### T [#t]

`T` = `any`

## Indexable [#indexable]

\> \[`key`: `string`]: `any`

## Properties [#properties]

### alias? [#alias]

\> `optional` &#x2A;*alias?**: `ArrayOr`\<`string`>

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:218

Aliases associated with asset

***

### data? [#data]

\> `optional` &#x2A;*data?**: `T`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:65

Optional data passed to the asset loader.
Can include texture settings, parser options, or other asset-specific data.

***

### format? [#format]

\> `optional` &#x2A;*format?**: `string`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:67

File format of the asset, usually the file extension. Used to determine which loader parser to use.

***

### ~~loadParser?~~ [#loadparser]

\> `optional` &#x2A;*loadParser?**: [`LoadParserName`](/jsdoc/pixi-vn/index/type-aliases/LoadParserName)

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:71

#### Deprecated [#deprecated]

Use `parser` instead.

***

### parser? [#parser]

\> `optional` &#x2A;*parser?**: `AssetParser`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:73

Override to specify which parser should load this asset. Useful when file extensions don't match the content type.

***

### src? [#src]

\> `optional` &#x2A;*src?**: [`AssetSrc`](/jsdoc/pixi-vn/index/type-aliases/AssetSrc)

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:220

The URL or relative path to the asset


# Interface: VideoSpriteMemory (/jsdoc/pixi-vn/index/interfaces/VideoSpriteMemory)



Defined in: [src/canvas/interfaces/memory/VideoSpriteMemory.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/VideoSpriteMemory.ts#L6)

The memory of the video. It uses for save the state of the video.

## Extends [#extends]

* [`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessible`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`align`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`children`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`cullable`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#cullarea)

***

### currentTime [#currenttime]

\> **currentTime**: `number`

Defined in: [src/canvas/interfaces/memory/VideoSpriteMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/VideoSpriteMemory.ts#L9)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`cursor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`eventMode`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`hitArea`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#hitarea)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L9)

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-24]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`index`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#index)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-25]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`interactive`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-26]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`interactiveChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-27]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#label)

***

### loadIsStarted [#loadisstarted]

\> **loadIsStarted**: `boolean`

Defined in: [src/canvas/interfaces/memory/ImageSpriteMemory.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/ImageSpriteMemory.ts#L7)

#### Inherited from [#inherited-from-29]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`loadIsStarted`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#loadisstarted)

***

### loop [#loop]

\> **loop**: `boolean`

Defined in: [src/canvas/interfaces/memory/VideoSpriteMemory.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/VideoSpriteMemory.ts#L7)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

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

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-30]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onclick`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onclick)

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: [`OnEventsHandlers`](/jsdoc/pixi-vn/index/interfaces/OnEventsHandlers)

Defined in: [src/canvas/components/ListenerExtension.ts:6](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/ListenerExtension.ts#L6)

#### Inherited from [#inherited-from-31]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onEvents`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onevents)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

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

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onglobalmousemove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

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

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-33]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onglobalpointermove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

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

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-34]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

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

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmousedown`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseenter`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseleave`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmousemove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseout`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseover`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseup`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onmouseupoutside`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointercancel`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerdown`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerenter`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerleave`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointermove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerout`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerover`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointertap`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerup`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onpointerupoutside`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-53]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onrightclick`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onrightdown`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onrightup`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onrightupoutside`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontap`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontouchcancel`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontouchend`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontouchendoutside`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontouchmove`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`ontouchstart`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`onwheel`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

```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)
```

#### Inherited from [#inherited-from-65]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-66]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#parent)

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L13)

The label of the parent container, if it has one

#### Inherited from [#inherited-from-67]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`parentLabel`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#parentlabel)

***

### paused [#paused]

> **paused**: `boolean`

Defined in: [src/canvas/interfaces/memory/VideoSpriteMemory.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/VideoSpriteMemory.ts#L8)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-70]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-71]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#pivot)

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: [src/canvas/interfaces/memory/CanvasBaseItemMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/CanvasBaseItemMemory.ts#L5)

#### Inherited from [#inherited-from-72]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`pixivnId`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#pixivnid)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-73]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-74]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-75]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-76]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

```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
```

#### Inherited from [#inherited-from-77]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-78]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-79]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-80]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-81]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-82]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#tabindex)

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-83]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#texture)

***

### textureData? [#texturedata]

> `optional` &#x2A;*textureData?**: [`AssetMemory`](/jsdoc/pixi-vn/index/interfaces/AssetMemory)

Defined in: [src/canvas/interfaces/memory/SpriteMemory.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/memory/SpriteMemory.ts#L12)

#### Inherited from [#inherited-from-84]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`textureData`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#texturedata)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-85]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`tint`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-86]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-87]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-88]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-89]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-90]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-91]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-92]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#zindex)


# Interface: VideoSpriteOptions (/jsdoc/pixi-vn/index/interfaces/VideoSpriteOptions)



Defined in: [src/canvas/interfaces/canvas-options.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L23)

## Extends [#extends]

* [`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions)

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessible`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessibleChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessibleHint`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessiblePointerEvents`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessibleText`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessibleTitle`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`accessibleType`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#accessibletype)

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L13)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`align`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For toggling visibility
* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render control

#### Inherited from [#inherited-from-8]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`alpha`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#alpha)

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:73

The anchor point of the sprite (0-1 range).
Controls the origin point for rotation, scaling, and positioning.
Can be a number for uniform anchor or a PointData for separate x/y values.

#### Default [#default-8]

```ts
0
```

#### Example [#example-8]

```ts
// Centered anchor
anchor: 0.5
// Separate x/y anchor
anchor: { x: 0.5, y: 0.5 }
// Right-aligned anchor
anchor: { x: 1, y: 0 }
```

#### Inherited from [#inherited-from-9]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`anchor`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-9]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`angle`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#angle)

***

### autoGarbageCollect? [#autogarbagecollect]

\> `optional` &#x2A;*autoGarbageCollect?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:29

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-11]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`autoGarbageCollect`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#autogarbagecollect)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-10]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-9]

```ts
'normal'
```

#### See [#see-1]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#tint](/jsdoc/pixi-vn/index/classes/VideoSprite#tint) For color adjustments

#### Inherited from [#inherited-from-12]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`blendMode`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#blendmode)

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-11]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-13]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`boundsArea`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#boundsarea)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-14]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`cacheAsTexture`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#cacheastexture)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-12]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding children
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing children

#### Inherited from [#inherited-from-15]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`children`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-10]

```ts
false
```

#### Inherited from [#inherited-from-16]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`cullable`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-14]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-11]

```ts
true
```

#### Inherited from [#inherited-from-17]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`cullableChildren`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-15]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-12]

```ts
null
```

#### Inherited from [#inherited-from-18]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`cullArea`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#cullarea)

***

### currentTime? [#currenttime]

\> `optional` &#x2A;*currentTime?**: `number`

Defined in: [src/canvas/interfaces/canvas-options.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L26)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-16]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-13]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-19]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`cursor`](/jsdoc/pixi-vn/index/classes/VideoSprite#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-17]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-20]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`eventMode`](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-18]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-21]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`filters`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#filters)

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-19]

```ts
new Container({ height: 100});
```

#### Default [#default-14]

```ts
0
```

#### Inherited from [#inherited-from-22]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`height`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#height)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-20]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-23]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`hitArea`](/jsdoc/pixi-vn/index/classes/VideoSprite#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode)

#### Example [#example-21]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-24]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactive`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-15]

```ts
true
```

#### Example [#example-22]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-25]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`interactiveChildren`](/jsdoc/pixi-vn/index/classes/VideoSprite#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-26]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`isRenderGroup`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#isrendergroup)

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-27]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`label`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#label)

***

### loop? [#loop]

\> `optional` &#x2A;*loop?**: `boolean`

Defined in: [src/canvas/interfaces/canvas-options.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L24)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-23]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`mask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#mask)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-17]

```ts
null
```

#### Inherited from [#inherited-from-28]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-29]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-30]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobalpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-20]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-31]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onglobaltouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousedown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-33]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-34]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmousemove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onmouseupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointercancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerenter`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerleave`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointermove`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerout`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerover`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointertap`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-44]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onpointerupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-45]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-50]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`onRender`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#onrender)

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightclick`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-47]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightdown`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightup`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onrightupoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontap`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchcancel`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchend`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchendoutside`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchmove`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`ontouchstart`](/jsdoc/pixi-vn/index/classes/VideoSprite#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-56]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite).[`onwheel`](/jsdoc/pixi-vn/index/classes/VideoSprite#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-57]

```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)
```

#### Inherited from [#inherited-from-62]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`origin`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#origin)

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* [Container#addChild](/jsdoc/pixi-vn/index/classes/Container#addchild) For adding to a parent
* [Container#removeChild](/jsdoc/pixi-vn/index/classes/Container#removechild) For removing from parent

#### Inherited from [#inherited-from-63]

[`ImageContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory).[`parent`](/jsdoc/pixi-vn/index/interfaces/ImageContainerMemory#parent)

***

### paused? [#paused]

> `optional` &#x2A;*paused?**: `boolean`

Defined in: [src/canvas/interfaces/canvas-options.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/canvas-options.ts#L25)

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L43)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-64]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`percentagePosition`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L53)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-65]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`percentageX`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L63)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does affect the percentagePosition.

#### Inherited from [#inherited-from-66]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`percentageY`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-58]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-67]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`pivot`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#pivot)

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-59]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-68]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`position`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#position)

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-60]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-50]

```ts
true
```

#### See [#see-9]

* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For skipping transform updates
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-69]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`renderable`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#renderable)

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-61]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-70]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`rotation`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#rotation)

***

### roundPixels? [#roundpixels]

> `optional` &#x2A;*roundPixels?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:86

Whether or not to round the x/y position to whole pixels.
Useful for crisp pixel art style rendering.

#### Default [#default-51]

```ts
false
```

#### Example [#example-62]

```ts
const sprite = new Sprite({
    texture: Texture.from('sprite.png'),
    roundPixels: true // Ensures crisp rendering
});
```

#### Inherited from [#inherited-from-71]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`roundPixels`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#roundpixels)

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-63]

```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
```

#### Inherited from [#inherited-from-72]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`scale`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#scale)

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-73]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`setMask`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#setmask)

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-64]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-52]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-74]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`skew`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#skew)

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-65]

```ts
container.sortableChildren = true;
```

#### Default [#default-53]

```ts
false
```

#### Inherited from [#inherited-from-75]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortableChildren`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortablechildren)

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-54]

```ts
false
@internal
```

#### Inherited from [#inherited-from-76]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`sortDirty`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#sortdirty)

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-55]

```ts
0
```

#### Example [#example-66]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-77]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`tabIndex`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#tabindex)

***

### texture? [#texture]

> `optional` &#x2A;*texture?**: `Texture`\<`TextureSource`\<`any`>>

Defined in: node\_modules/pixi.js/lib/scene/sprite/Sprite.d.ts:57

The texture to use for the sprite. If not provided, uses Texture.EMPTY

#### Default [#default-56]

```ts
Texture.EMPTY
```

#### Example [#example-67]

```ts
// Create a sprite with a texture
const sprite = new Sprite({
    texture: Texture.from('path/to/image.png')
});
// Update the texture later
sprite.texture = Texture.from('path/to/another-image.png');
```

#### Inherited from [#inherited-from-78]

[`ImageSpriteMemory`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory).[`texture`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteMemory#texture)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-68]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-57]

```ts
0xFFFFFF
```

#### See [#see-10]

* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency
* [Container#visible](/jsdoc/pixi-vn/index/classes/VideoSprite#visible) For visibility control

#### Inherited from [#inherited-from-79]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`tint`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#tint)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-69]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-58]

```ts
true
```

#### See [#see-11]

* [Container#renderable](/jsdoc/pixi-vn/index/classes/VideoSprite#renderable) For render-only control
* [Container#alpha](/jsdoc/pixi-vn/index/classes/VideoSprite#alpha) For transparency

#### Inherited from [#inherited-from-80]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`visible`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#visible)

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-70]

```ts
new Container({ width: 100});
```

#### Default [#default-59]

```ts
0
```

#### Inherited from [#inherited-from-81]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`width`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#width)

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-71]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-82]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`x`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#x)

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L23)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-83]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`xAlign`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-72]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-84]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`y`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#y)

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: [src/canvas/components/AdditionalPositionsExtension.ts:33](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/AdditionalPositionsExtension.ts#L33)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The [PixiContainer.pivot](/jsdoc/pixi-vn/index/classes/VideoSprite#pivot) field does not affect the alignment.

#### Inherited from [#inherited-from-85]

[`ImageSpriteOptions`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions).[`yAlign`](/jsdoc/pixi-vn/index/interfaces/ImageSpriteOptions#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-73]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn/index/classes/VideoSprite#sortablechildren) For enabling sorting
* [Container#sortChildren](/jsdoc/pixi-vn/index/classes/Container#sortchildren) For manual sorting

#### Default [#default-60]

```ts
0
```

#### Inherited from [#inherited-from-86]

[`ContainerMemory`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory).[`zIndex`](/jsdoc/pixi-vn/index/interfaces/ContainerMemory#zindex)


# Interface: ZoomInOutProps (/jsdoc/pixi-vn/index/interfaces/ZoomInOutProps)



Defined in: [src/canvas/interfaces/transition-props.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L25)

## Extends [#extends]

* `BaseTransitionProps`.`AnimationOptions`

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

#### Inherited from [#inherited-from]

`AnimationOptions.aliasToRemoveAfter`

***

### autoplay? [#autoplay]

\> `optional` &#x2A;*autoplay?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2212

#### Inherited from [#inherited-from-1]

`AnimationOptions.autoplay`

***

### bounce? [#bounce]

\> `optional` &#x2A;*bounce?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2035

`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.

#### Inherited from [#inherited-from-2]

`AnimationOptions.bounce`

***

### bounceDamping? [#bouncedamping]

\> `optional` &#x2A;*bounceDamping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2109

If `min` or `max` is set, this affects the damping of the bounce spring.
If set to `0`, spring will oscillate indefinitely. Set to `10` by
default.

#### Inherited from [#inherited-from-3]

`AnimationOptions.bounceDamping`

***

### bounceStiffness? [#bouncestiffness]

\> `optional` &#x2A;*bounceStiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2101

If `min` or `max` is set, this affects the stiffness of the bounce
spring. Higher values will create more sudden movement. Set to `500` by
default.

#### Inherited from [#inherited-from-4]

`AnimationOptions.bounceStiffness`

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L13)

If true, the transition will be completed before the next step.
For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

#### Default [#default-1]

```ts
true
```

#### Inherited from [#inherited-from-5]

`BaseTransitionProps.completeOnContinue`

***

### damping? [#damping]

\> `optional` &#x2A;*damping?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2055

Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to `10` by default.

#### Default [#default-2]

```ts
10

@public
```

#### Inherited from [#inherited-from-6]

`AnimationOptions.damping`

***

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2343

#### Inherited from [#inherited-from-7]

`AnimationOptions.delay`

***

### delayChildren? [#delaychildren]

\> `optional` &#x2A;*delayChildren?**: `number` | `DynamicOption`\<`number`>

Defined in: node\_modules/motion-dom/dist/index.d.ts:2151

When using variants, children animations will start after this duration
(in seconds). You can add the `transition` property to both the `motion.div` and the
`variant` directly. Adding it to the `variant` generally offers more flexibility,
as it allows you to customize the delay per visual state.

#### Inherited from [#inherited-from-8]

`AnimationOptions.delayChildren`

***

### direction? [#direction]

\> `optional` &#x2A;*direction?**: `"left"` | `"right"` | `"up"` | `"down"`

Defined in: [src/canvas/interfaces/transition-props.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L30)

The direction of the zoom effect.

#### Default [#default-3]

```ts
"right"
```

***

### driver? [#driver]

\> `optional` &#x2A;*driver?**: `Driver`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2197

#### Inherited from [#inherited-from-9]

`AnimationOptions.driver`

***

### duration? [#duration]

\> `optional` &#x2A;*duration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2211

The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.

#### Inherited from [#inherited-from-10]

`AnimationOptions.duration`

***

### ease? [#ease]

\> `optional` &#x2A;*ease?**: `Easing` | `Easing`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2182

#### Inherited from [#inherited-from-11]

`AnimationOptions.ease`

***

### elapsed? [#elapsed]

\> `optional` &#x2A;*elapsed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2196

The duration of time already elapsed in the animation. Set to `0` by
default.

#### Inherited from [#inherited-from-12]

`AnimationOptions.elapsed`

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/interfaces/transition-props.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/interfaces/transition-props.ts#L7)

#### Deprecated [#deprecated]

Use [completeOnContinue](/jsdoc/pixi-vn/index/interfaces/ShakeEffectProps#completeoncontinue) instead.

#### Inherited from [#inherited-from-13]

`BaseTransitionProps.forceCompleteBeforeNext`

***

### from? [#from]

\> `optional` &#x2A;*from?**: `any`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2214

#### Inherited from [#inherited-from-14]

`AnimationOptions.from`

***

### inherit? [#inherit]

\> `optional` &#x2A;*inherit?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2221

If true, this transition will shallow-merge with its parent transition
instead of replacing it. Inner keys win.

#### Inherited from [#inherited-from-15]

`AnimationOptions.inherit`

***

### isSync? [#issync]

\> `optional` &#x2A;*isSync?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1955

#### Inherited from [#inherited-from-16]

`AnimationOptions.isSync`

***

### mass? [#mass]

\> `optional` &#x2A;*mass?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2064

Mass of the moving object. Higher values will result in more lethargic
movement. Set to `1` by default.

#### Default [#default-4]

```ts
1

@public
```

#### Inherited from [#inherited-from-17]

`AnimationOptions.mass`

***

### max? [#max]

\> `optional` &#x2A;*max?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2121

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

#### Inherited from [#inherited-from-18]

`AnimationOptions.max`

***

### min? [#min]

\> `optional` &#x2A;*min?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2115

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

#### Inherited from [#inherited-from-19]

`AnimationOptions.min`

***

### modifyTarget? [#modifytarget]

\> `optional` &#x2A;*modifyTarget?**: (`v`) => `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2091

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

#### Parameters [#parameters]

##### v [#v]

`number`

#### Returns [#returns]

`number`

#### Inherited from [#inherited-from-20]

`AnimationOptions.modifyTarget`

***

### path? [#path]

\> `optional` &#x2A;*path?**: `MotionPath` | `MotionPath` & `ValueTransition`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2240

The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. `arc()`) to swap the default
straight-line interpolation for something curved.

Can be used in keyframe animations (`transition.path`) and layout
animations (`transition.layout.path`), including with `useAnimate`.

#### Inherited from [#inherited-from-21]

`AnimationOptions.path`

***

### power? [#power]

\> `optional` &#x2A;*power?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2078

A higher power value equals a further target. Set to `0.8` by default.

#### Inherited from [#inherited-from-22]

`AnimationOptions.power`

***

### reduceMotion? [#reducemotion]

\> `optional` &#x2A;*reduceMotion?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2353

Whether to reduce motion for transform/layout animations.

* `true`: Skip transform/layout animations (instant transition)
* `false`: Always animate transforms/layout
* `undefined`: Use device preference (default behavior)

#### Inherited from [#inherited-from-23]

`AnimationOptions.reduceMotion`

***

### repeat? [#repeat]

\> `optional` &#x2A;*repeat?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1966

The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.

Without setting `repeatType`, this will loop the animation.

#### Inherited from [#inherited-from-24]

`AnimationOptions.repeat`

***

### repeatDelay? [#repeatdelay]

\> `optional` &#x2A;*repeatDelay?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1985

When repeating an animation, `repeatDelay` will set the
duration of the time to wait, in seconds, between each repetition.

#### Inherited from [#inherited-from-25]

`AnimationOptions.repeatDelay`

***

### repeatType? [#repeattype]

\> `optional` &#x2A;*repeatType?**: `RepeatType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1978

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches `from` and `to` alternately

#### Inherited from [#inherited-from-26]

`AnimationOptions.repeatType`

***

### restDelta? [#restdelta]

\> `optional` &#x2A;*restDelta?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2003

End animation if distance is below this value and speed is below
`restSpeed`. When animation ends, spring gets "snapped" to. Set to
`0.01` by default.

#### Inherited from [#inherited-from-27]

`AnimationOptions.restDelta`

***

### restSpeed? [#restspeed]

\> `optional` &#x2A;*restSpeed?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1995

End animation if absolute speed (in units per second) drops below this
value and delta is smaller than `restDelta`. Set to `0.01` by default.

#### Inherited from [#inherited-from-28]

`AnimationOptions.restSpeed`

***

### skipAnimations? [#skipanimations]

\> `optional` &#x2A;*skipAnimations?**: `boolean`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2229

If true, the animation skips straight to its final value instead of
tweening. Used by `MotionConfig`'s `skipAnimations` to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).

#### Inherited from [#inherited-from-29]

`AnimationOptions.skipAnimations`

***

### ~~staggerChildren?~~ [#staggerchildren]

\> `optional` &#x2A;*staggerChildren?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2164

When using variants, animations of child components can be staggered by this
duration (in seconds).

For instance, if `staggerChildren` is `0.01`, the first child will be
delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
on.

The calculated stagger delay will be added to `delayChildren`.

#### Deprecated [#deprecated-1]

* Use `delayChildren: stagger(interval)` instead.

#### Inherited from [#inherited-from-30]

`AnimationOptions.staggerChildren`

***

### ~~staggerDirection?~~ [#staggerdirection]

\> `optional` &#x2A;*staggerDirection?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2173

The direction in which to stagger children.

A value of `1` staggers from the first to the last while `-1`
staggers from the last to the first.

#### Deprecated [#deprecated-2]

* Use `delayChildren: stagger(interval, { from: "last" })` instead.

#### Inherited from [#inherited-from-31]

`AnimationOptions.staggerDirection`

***

### startTime? [#starttime]

\> `optional` &#x2A;*startTime?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2213

#### Inherited from [#inherited-from-32]

`AnimationOptions.startTime`

***

### stiffness? [#stiffness]

\> `optional` &#x2A;*stiffness?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2046

Stiffness of the spring. Higher values will create more sudden movement.
Set to `100` by default.

#### Default [#default-5]

```ts
100

@public
```

#### Inherited from [#inherited-from-33]

`AnimationOptions.stiffness`

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-6]

```ts
[]
```

#### Inherited from [#inherited-from-34]

`AnimationOptions.tickerAliasToResume`

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string` | `string`\[]

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-7]

```ts
[]
```

#### Inherited from [#inherited-from-35]

`AnimationOptions.tickerIdToResume`

***

### timeConstant? [#timeconstant]

\> `optional` &#x2A;*timeConstant?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2085

Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to `700` by default.

#### Inherited from [#inherited-from-36]

`AnimationOptions.timeConstant`

***

### times? [#times]

\> `optional` &#x2A;*times?**: `number`\[]

Defined in: node\_modules/motion-dom/dist/index.d.ts:2183

#### Inherited from [#inherited-from-37]

`AnimationOptions.times`

***

### type? [#type]

\> `optional` &#x2A;*type?**: `AnimationGeneratorType`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2205

Type of animation to use.

* "tween": Duration-based animation with ease curve
* "spring": Physics or duration-based spring animation
* false: Use an instant animation

#### Inherited from [#inherited-from-38]

`AnimationOptions.type`

***

### velocity? [#velocity]

\> `optional` &#x2A;*velocity?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:1988

#### Inherited from [#inherited-from-39]

`AnimationOptions.velocity`

***

### visualDuration? [#visualduration]

\> `optional` &#x2A;*visualDuration?**: `number`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2023

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

#### Inherited from [#inherited-from-40]

`AnimationOptions.visualDuration`

***

### when? [#when]

\> `optional` &#x2A;*when?**: `string` | `false`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2142

Describes the relationship between the transition and its children. Set
to `false` by default.

#### Remarks [#remarks]

When using variants, the transition can be scheduled in relation to its
children with either `"beforeChildren"` to finish this transition before
starting children transitions, `"afterChildren"` to finish children
transitions before starting this transition.

#### Inherited from [#inherited-from-41]

`AnimationOptions.when`


# Type Alias: AllFederatedEventMap (/jsdoc/pixi-vn/index/type-aliases/AllFederatedEventMap)



\> **AllFederatedEventMap** = `FederatedEventMap` & `GlobalFederatedEventMap`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventMap.d.ts:55

The types for the events that can be emitted by a Container

## Advanced [#advanced]


# Type Alias: AssetAliasIdType (/jsdoc/pixi-vn/index/type-aliases/AssetAliasIdType)



\> **AssetAliasIdType** = \[keyof [`PixivnAssetAliasIds`](/jsdoc/pixi-vn/index/interfaces/PixivnAssetAliasIds)] *extends* \[`never`] ? `string` : keyof [`PixivnAssetAliasIds`](/jsdoc/pixi-vn/index/interfaces/PixivnAssetAliasIds)

Defined in: [src/canvas/types/AssetAliasIdType.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/AssetAliasIdType.ts#L37)

The type used wherever an asset alias is expected (e.g. `Assets.load`, `getTexture`).

* **Default** — resolves to `string` so that existing code that passes arbitrary strings
  continues to compile without any changes.
* **Augmented** — when [PixivnAssetAliasIds](/jsdoc/pixi-vn/index/interfaces/PixivnAssetAliasIds) has been extended via
  `declare module "@drincs/pixi-vn/canvas"`, this type resolves to the union of the
  declared keys, giving you compile-time safety against typos and unknown asset aliases.


# Type Alias: AssetSrc (/jsdoc/pixi-vn/index/type-aliases/AssetSrc)



\> **AssetSrc** = `ArrayOr`\<`string`> | `ArrayOr`\<[`ResolvedSrc`](/jsdoc/pixi-vn/index/interfaces/ResolvedSrc)> & `object`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:164

A valid asset source specification. This can be a URL string, a [ResolvedSrc](/jsdoc/pixi-vn/index/interfaces/ResolvedSrc),
or an array of either. The source defines where and how to load an asset.

## Example [#example]

```ts
// Single URL string
const src: AssetSrc = 'images/sprite.png';

// Multiple format options
const src: AssetSrc = ['sprite.webp', 'sprite.png'];

// With format pattern
const src: AssetSrc = 'sprite.{webp,png}';

// Resolved source with options
const src: AssetSrc = {
    src: 'sprite.png',
    format: 'png',
    parser: 'texture',
    data: {
        scaleMode: 'nearest',
    }
};

// Array of resolved sources
const src: AssetSrc = [
    {
        src: 'sprite@2x.webp',
        format: 'webp',
    },
    {
        src: 'sprite.png',
        format: 'png',
    }
];
```

## Remarks [#remarks]

When specifying multiple formats:

* The format that is selected will depend on AssetInitOptions.texturePreference
* Resolution is parsed from file names
* Custom data can be passed to loaders

## See [#see]

* [ResolvedSrc](/jsdoc/pixi-vn/index/interfaces/ResolvedSrc) For resolved source format
* Assets.add For adding assets with sources

## Standard [#standard]


# Type Alias: BundleIdType (/jsdoc/pixi-vn/index/type-aliases/BundleIdType)



\> **BundleIdType** = \[keyof [`PixivnBundleIds`](/jsdoc/pixi-vn/index/interfaces/PixivnBundleIds)] *extends* \[`never`] ? `string` : keyof [`PixivnBundleIds`](/jsdoc/pixi-vn/index/interfaces/PixivnBundleIds)

Defined in: [src/canvas/types/BundleIdType.ts:37](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/BundleIdType.ts#L37)

The type used wherever an asset bundle name is expected (e.g. `Assets.loadBundle`).

* **Default** — resolves to `string` so that existing code that passes arbitrary strings
  continues to compile without any changes.
* **Augmented** — when [PixivnBundleIds](/jsdoc/pixi-vn/index/interfaces/PixivnBundleIds) has been extended via
  `declare module "@drincs/pixi-vn/canvas"`, this type resolves to the union of the
  declared keys, giving you compile-time safety against typos and unknown bundle names.


# Type Alias: CharacterIdType (/jsdoc/pixi-vn/index/type-aliases/CharacterIdType)



\> **CharacterIdType** = \[keyof [`PixivnCharacterIds`](/jsdoc/pixi-vn/index/interfaces/PixivnCharacterIds)] *extends* \[`never`] ? `string` : keyof [`PixivnCharacterIds`](/jsdoc/pixi-vn/index/interfaces/PixivnCharacterIds)

Defined in: [src/characters/types/CharacterIdType.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/types/CharacterIdType.ts#L38)

The type used wherever a character ID is expected (e.g. `RegisteredCharacters.get`,
`RegisteredCharacters.has`, character constructors, …).

* **Default** — resolves to `string` so that existing code that passes arbitrary strings
  continues to compile without any changes.
* **Augmented** — when [PixivnCharacterIds](/jsdoc/pixi-vn/index/interfaces/PixivnCharacterIds) has been extended via
  `declare module "@drincs/pixi-vn/characters"`, this type resolves to the union of the
  declared keys, giving you compile-time safety against typos and unknown character IDs.


# Type Alias: CommonTickerProps (/jsdoc/pixi-vn/index/type-aliases/CommonTickerProps)



\> **CommonTickerProps** = `object`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:2](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L2)

## Properties [#properties]

### aliasToRemoveAfter? [#aliastoremoveafter]

\> `optional` &#x2A;*aliasToRemoveAfter?**: `string`\[] | `string`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L7)

An array of strings containing the aliases of the canvas components to remove after the animation completes.

#### Default [#default]

```ts
[]
```

***

### completeOnContinue? [#completeoncontinue]

\> `optional` &#x2A;*completeOnContinue?**: `boolean`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:32](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L32)

A boolean indicating whether the animation must complete before the next `step` of the game. If `true`, the game will force the animation to finish before proceeding.
When true, calling [()](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#continue) forces the current content to complete before advancing to the next narrative step.

#### Default [#default-1]

```ts
false
```

***

### ~~forceCompleteBeforeNext?~~ [#forcecompletebeforenext]

\> `optional` &#x2A;*forceCompleteBeforeNext?**: `boolean`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L26)

#### Deprecated [#deprecated]

Use [completeOnContinue](#completeoncontinue) instead.

***

### startOnlyIfHaveTexture? [#startonlyifhavetexture]

\> `optional` &#x2A;*startOnlyIfHaveTexture?**: `boolean`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L12)

If true, the effect only starts if the canvas element have a texture

#### Default [#default-2]

```ts
false
```

***

### tickerAliasToResume? [#tickeraliastoresume]

\> `optional` &#x2A;*tickerAliasToResume?**: `string`\[] | `string`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L17)

If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.

#### Default [#default-3]

```ts
[]
```

***

### tickerIdToResume? [#tickeridtoresume]

\> `optional` &#x2A;*tickerIdToResume?**: `string`\[] | `string`

Defined in: [src/canvas/tickers/types/CommonTickerProps.ts:22](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/types/CommonTickerProps.ts#L22)

A string containing the ticker ID to resume after the animation completes.

#### Default [#default-4]

```ts
[]
```


# Type Alias: ContainerChild (/jsdoc/pixi-vn/index/type-aliases/ContainerChild)



\> **ContainerChild** = `PixiContainer` & [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`any`>

Defined in: [src/canvas/types/ContainerChild.ts:4](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/ContainerChild.ts#L4)


# Type Alias: ErrorCodeType (/jsdoc/pixi-vn/index/type-aliases/ErrorCodeType)



\> **ErrorCodeType** = `"obsolete_save"` | `"unknown_element"` | `"unregistered_element"` | `"unregistered_asset"` | `"not_json_serializable"` | `"not_implemented"` | `"invalid_usage"` | `"unhandled_error"`

Defined in: [src/core/ErrorCodeType.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/ErrorCodeType.ts#L1)


# Type Alias: HistoryChoiceMenuOption (/jsdoc/pixi-vn/index/type-aliases/HistoryChoiceMenuOption)



\> **HistoryChoiceMenuOption** = `object`

Defined in: [src/narration/types/HistoryChoiceMenuOption.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/HistoryChoiceMenuOption.ts#L7)

HistoryChoiceMenuOption is a type that contains the history information of a choice menu option.

## Properties [#properties]

### hidden [#hidden]

\> **hidden**: `boolean`

Defined in: [src/narration/types/HistoryChoiceMenuOption.ts:23](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/HistoryChoiceMenuOption.ts#L23)

The choice is hidden

***

### isResponse [#isresponse]

\> **isResponse**: `boolean`

Defined in: [src/narration/types/HistoryChoiceMenuOption.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/HistoryChoiceMenuOption.ts#L19)

This choice is a response

***

### text [#text]

\> **text**: `string` | `string`\[]

Defined in: [src/narration/types/HistoryChoiceMenuOption.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/HistoryChoiceMenuOption.ts#L11)

Text to be displayed in the menu

***

### type [#type]

\> **type**: `CloseType` | [`LabelRunModeType`](/jsdoc/pixi-vn/index/type-aliases/LabelRunModeType)

Defined in: [src/narration/types/HistoryChoiceMenuOption.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/HistoryChoiceMenuOption.ts#L15)

Method used to open the label, or close the menu.


# Type Alias: InputInfo (/jsdoc/pixi-vn/index/type-aliases/InputInfo)



\> **InputInfo** = `object`

Defined in: [src/narration/types/InputInfo.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/InputInfo.ts#L1)

## Properties [#properties]

### isRequired? [#isrequired]

\> `optional` &#x2A;*isRequired?**: `boolean`

Defined in: [src/narration/types/InputInfo.ts:2](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/InputInfo.ts#L2)

***

### type? [#type]

\> `optional` &#x2A;*type?**: `string`

Defined in: [src/narration/types/InputInfo.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/InputInfo.ts#L3)


# Type Alias: LabelIdType (/jsdoc/pixi-vn/index/type-aliases/LabelIdType)



\> **LabelIdType** = \[keyof [`PixivnLabelIds`](/jsdoc/pixi-vn/index/interfaces/PixivnLabelIds)] *extends* \[`never`] ? `string` : keyof [`PixivnLabelIds`](/jsdoc/pixi-vn/index/interfaces/PixivnLabelIds)

Defined in: [src/narration/types/LabelIdType.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/LabelIdType.ts#L38)

The type used wherever a label ID is expected (e.g. `narration.call`, `narration.jump`,
`newLabel`, choice options, …).

* **Default** — resolves to `string` so that existing code that passes arbitrary strings
  continues to compile without any changes.
* **Augmented** — when [PixivnLabelIds](/jsdoc/pixi-vn/index/interfaces/PixivnLabelIds) has been extended via
  `declare module "@drincs/pixi-vn/narration"`, this type resolves to the union of the
  declared keys, giving you compile-time safety against typos and unknown label IDs.


# Type Alias: LabelRunModeType (/jsdoc/pixi-vn/index/type-aliases/LabelRunModeType)



\> **LabelRunModeType** = `"call"` | `"jump"`

Defined in: [src/narration/types/LabelRunModeType.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/LabelRunModeType.ts#L1)


# Type Alias: LabelSteps<T> (/jsdoc/pixi-vn/index/type-aliases/LabelSteps)



\> **LabelSteps**\<`T`> = \[[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)\<`T`>, `...StepLabelType<Partial<T>>[]`]

Defined in: [src/narration/types/LabelSteps.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/LabelSteps.ts#L3)

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object`


# Type Alias: Layer (/jsdoc/pixi-vn/index/type-aliases/Layer)



\> **Layer** = `PixiContainer`\<`ContainerChild`>

Defined in: [src/canvas/components/Layer.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/components/Layer.ts#L3)


# Type Alias: LoadParserName (deprecated) (/jsdoc/pixi-vn/index/type-aliases/LoadParserName)



\> **LoadParserName** = `"loadJson"` | `"loadSvg"` | `"loadTextures"` | `"loadTxt"` | `"loadVideo"` | `"loadWebFont"` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/assets/types.d.ts:12

## Deprecated [#deprecated]

Use AssetParser instead.

## Advanced [#advanced]


# Type Alias: MotionAnimationOptions (/jsdoc/pixi-vn/index/type-aliases/MotionAnimationOptions)



\> **MotionAnimationOptions** = `ValueAnimationWithDynamicDelay` & `ReduceMotionOption` | `ValueAnimationWithDynamicDelay` & `ReduceMotionOption` & `StyleTransitions` & `SVGPathTransitions` & `SVGForcedAttrTransitions` & `SVGTransitions` & `VariableTransitions` & `object`

Defined in: node\_modules/motion-dom/dist/index.d.ts:2355


# Type Alias: OnErrorHandler (/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)



\> **OnErrorHandler** = (`error`, `props`) => `void` | `Promise`\<`void`>

Defined in: [src/core/OnErrorHandler.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/core/OnErrorHandler.ts#L7)

Type for on-error handlers. Handlers accept the error object and the step
props; they may be synchronous or asynchronous.

## Parameters [#parameters]

### error [#error]

`unknown`

### props [#props]

`Partial`\<`StepLabelProps`>

## Returns [#returns]

`void` | `Promise`\<`void`>


# Type Alias: PauseType (/jsdoc/pixi-vn/index/type-aliases/PauseType)



\> **PauseType** = `object`

Defined in: [src/canvas/types/PauseType.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/PauseType.ts#L1)

## Properties [#properties]

### duration [#duration]

\> **duration**: `number`

Defined in: [src/canvas/types/PauseType.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/PauseType.ts#L9)

Duration in seconds

***

### type [#type]

\> **type**: `"pause"`

Defined in: [src/canvas/types/PauseType.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/PauseType.ts#L5)

The type of the value


# Type Alias: RepeatType (/jsdoc/pixi-vn/index/type-aliases/RepeatType)



\> **RepeatType** = `"repeat"`

Defined in: [src/canvas/types/RepeatType.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/types/RepeatType.ts#L1)


# Type Alias: StepLabelPropsType<T> (/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)



\> **StepLabelPropsType**\<`T`> = `StepLabelProps` & `T`

Defined in: [src/narration/types/StepLabelType.ts:16](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/StepLabelType.ts#L16)

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = \{ }


# Type Alias: StepLabelResultType (/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)



\> **StepLabelResultType** = `StepLabelResult` | `void` | `string`

Defined in: [src/narration/types/StepLabelType.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/StepLabelType.ts#L15)

Result of a [StepLabelType](/jsdoc/pixi-vn/index/type-aliases/StepLabelType) execution.

* `StepLabelResult`: a structured result consumed by the narration engine.
* `void`: the step completed without returning an explicit result.
* `string`: a simple token or message interpreted by higher-level logic.

Prefer returning a well-typed [StepLabelResult](/jsdoc/pixi-vn/index/interfaces/StepLabelResult) for anything that
needs to be consumed programmatically. Use plain strings only where a
lightweight, convention-based signal is sufficient and clearly documented
by the surrounding game logic.


# Type Alias: StepLabelType<T> (/jsdoc/pixi-vn/index/type-aliases/StepLabelType)



\> **StepLabelType**\<`T`> = (`props`, `info`) => [`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) | `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/narration/types/StepLabelType.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/types/StepLabelType.ts#L21)

StepLabel is a function that will be executed as the game continues.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = \{ }

## Parameters [#parameters]

### props [#props]

[`StepLabelPropsType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)\<`T`>

### info [#info]

#### labelId [#labelid]

`string`

The id of the label.

## Returns [#returns]

[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) | `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>


# Type Alias: StorageElementType (/jsdoc/pixi-vn/index/type-aliases/StorageElementType)



\> **StorageElementType** = `StorageElementInternalType` | `Record`\<`string` | `number` | `symbol`, `StorageElementInternalType`> | \{\[`key`: `string` | `number` | `symbol`]: `StorageElementType`; } | [`StorageObjectType`](/jsdoc/pixi-vn/index/type-aliases/StorageObjectType)\[] | (`StorageElementPrimaryType` | `StorageElementInternalType` | `StorageElementType`)\[] | \{\[`key`: `string` | `number` | `symbol`]: `NonFunctionStorage`; }

Defined in: [src/storage/types/StorageElementType.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/types/StorageElementType.ts#L25)

StorageElementType are all the types that can be stored in the storage


# Type Alias: StorageGameState (/jsdoc/pixi-vn/index/type-aliases/StorageGameState)



\> **StorageGameState** = `object`

Defined in: [src/storage/interfaces/StorageGameState.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L11)

Interface exported storage data

## Properties [#properties]

### ~~base?~~ [#base]

\> `optional` &#x2A;*base?**: `StorageGameStateItem`\[]

Defined in: [src/storage/interfaces/StorageGameState.ts:15](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L15)

#### Deprecated [#deprecated]

***

### ~~flags?~~ [#flags]

\> `optional` &#x2A;*flags?**: `string`\[]

Defined in: [src/storage/interfaces/StorageGameState.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L24)

#### Deprecated [#deprecated-1]

***

### main [#main]

\> **main**: `StorageGameStateItem`\[]

Defined in: [src/storage/interfaces/StorageGameState.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L25)

***

### ~~temp?~~ [#temp]

\> `optional` &#x2A;*temp?**: `StorageGameStateItem`\[]

Defined in: [src/storage/interfaces/StorageGameState.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L19)

#### Deprecated [#deprecated-2]

***

### tempDeadlines [#tempdeadlines]

\> **tempDeadlines**: `StorageGameStateItem`\<`number`>\[]

Defined in: [src/storage/interfaces/StorageGameState.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/interfaces/StorageGameState.ts#L20)


# Type Alias: StorageObjectType (/jsdoc/pixi-vn/index/type-aliases/StorageObjectType)



\> **StorageObjectType** = `Record`\<`string` | `number` | `symbol`, [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)>

Defined in: [src/storage/types/StorageElementType.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/types/StorageElementType.ts#L35)

StorageObjectType are all the types that can be stored in the storage


# Type Alias: StoredChoiceInterface (/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface)



\> **StoredChoiceInterface** = [`ChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/ChoiceOptionInterface) | [`CloseChoiceOptionInterface`](/jsdoc/pixi-vn/index/interfaces/CloseChoiceOptionInterface)

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L30)


# Type Alias: StoredIndexedChoiceInterface (/jsdoc/pixi-vn/index/type-aliases/StoredIndexedChoiceInterface)



\> **StoredIndexedChoiceInterface** = [`StoredChoiceInterface`](/jsdoc/pixi-vn/index/type-aliases/StoredChoiceInterface) & `object`

Defined in: [src/narration/interfaces/StoredChoiceInterface.ts:31](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/interfaces/StoredChoiceInterface.ts#L31)

## Type Declaration [#type-declaration]

### choiceIndex [#choiceindex]

\> **choiceIndex**: `number`

Is the index of the choice in the menu. It is used to identify the choice when it is selected.


# Type Alias: TextureSourceLike (/jsdoc/pixi-vn/index/type-aliases/TextureSourceLike)



\> **TextureSourceLike** = `TextureSource` | `TextureResourceOrOptions` | `string`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/Texture.d.ts:90

A texture source can be a string, an image, a video, a canvas, or a texture resource.

## Advanced [#advanced]

## See [#see]

* TextureSource
* TextureResourceOrOptions
* Texture.from


# Type Alias: TickerProgrationType (/jsdoc/pixi-vn/index/type-aliases/TickerProgrationType)



\> **TickerProgrationType** = [`TickerProgrationLinear`](/jsdoc/pixi-vn/index/interfaces/TickerProgrationLinear) | [`TickerProgrationExponential`](/jsdoc/pixi-vn/index/interfaces/TickerProgrationExponential)

Defined in: [src/canvas/tickers/interfaces/TickerProgrationType.ts:1](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/interfaces/TickerProgrationType.ts#L1)


# Variable: Assets (/jsdoc/pixi-vn/index/variables/Assets)



\> **Assets**: `AssetsClass`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: CANVAS_APP_GAME_LAYER_ALIAS (/jsdoc/pixi-vn/index/variables/CANVAS_APP_GAME_LAYER_ALIAS)



\> `const` **CANVAS\_APP\_GAME\_LAYER\_ALIAS**: `"__game_layer__"` = `"__game_layer__"`

Defined in: [src/constants.ts:24](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/constants.ts#L24)

Is a special alias to indicate the game layer.


# Variable: Color (/jsdoc/pixi-vn/index/variables/Color)



\> **Color**: *typeof* `Color`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: PIXIVN_VERSION (/jsdoc/pixi-vn/index/variables/PIXIVN_VERSION)



\> **PIXIVN\_VERSION**: `string` = `"1.8.25"`

Defined in: [package.json:3](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/package.json#L3)


# Variable: Rectangle (/jsdoc/pixi-vn/index/variables/Rectangle)



\> **Rectangle**: *typeof* `Rectangle`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: Repeat (deprecated) (/jsdoc/pixi-vn/index/variables/Repeat)



\> `const` **Repeat**: [`RepeatType`](/jsdoc/pixi-vn/index/type-aliases/RepeatType) = `"repeat"`

Defined in: [src/constants.ts:7](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/constants.ts#L7)

## Deprecated [#deprecated]


# Variable: SYSTEM_RESERVED_STORAGE_KEYS (/jsdoc/pixi-vn/index/variables/SYSTEM_RESERVED_STORAGE_KEYS)



\> `const` **SYSTEM\_RESERVED\_STORAGE\_KEYS**: `object`

Defined in: [src/constants.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/constants.ts#L42)

## Type Declaration [#type-declaration]

### ADD\_NEXT\_DIALOG\_TEXT\_INTO\_THE\_CURRENT\_DIALOG\_FLAG\_KEY [#add_next_dialog_text_into_the_current_dialog_flag_key]

\> **ADD\_NEXT\_DIALOG\_TEXT\_INTO\_THE\_CURRENT\_DIALOG\_FLAG\_KEY**: `string` = `"___glue___"`

This variable is used to add the next dialog text into the current dialog memory.
This value was added to introduce Ink Glue functionality [https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#glue](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#glue)

### ALL\_CHOICES\_MADE\_KEY [#all_choices_made_key]

\> **ALL\_CHOICES\_MADE\_KEY**: `string` = `"choices:made"`

The key of a list of all choices that have been made during the progression of the steps.

### CHARACTER\_CATEGORY\_KEY [#character_category_key]

\> **CHARACTER\_CATEGORY\_KEY**: `string` = `"character"`

The key of the characters memory

### CURRENT\_DIALOGUE\_MEMORY\_KEY [#current_dialogue_memory_key]

\> **CURRENT\_DIALOGUE\_MEMORY\_KEY**: `string` = `"dialogue"`

The key of the current dialogue memory

### CURRENT\_INPUT\_INFO\_MEMORY\_KEY [#current_input_info_memory_key]

\> **CURRENT\_INPUT\_INFO\_MEMORY\_KEY**: `string` = `"input:info"`

The key of the current input info

### CURRENT\_INPUT\_VALUE\_MEMORY\_KEY [#current_input_value_memory_key]

\> **CURRENT\_INPUT\_VALUE\_MEMORY\_KEY**: `string` = `"input:value"`

The key of the input memory. This value can be read by pixi-vn json importer

### CURRENT\_MENU\_OPTIONS\_MEMORY\_KEY [#current_menu_options_memory_key]

\> **CURRENT\_MENU\_OPTIONS\_MEMORY\_KEY**: `string` = `"choice:options"`

The key of the current menu options memory

### CURRENT\_STEP\_TIMES\_COUNTER\_KEY [#current_step_times_counter_key]

\> **CURRENT\_STEP\_TIMES\_COUNTER\_KEY**: `string` = `"label:history"`

The key of the current step times counter.
This value was added to introduce Ink Sequences, cycles and other alternatives [https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#sequences-cycles-and-other-alternatives](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#sequences-cycles-and-other-alternatives)

### LAST\_DIALOGUE\_ADDED\_IN\_STEP\_MEMORY\_KEY [#last_dialogue_added_in_step_memory_key]

\> **LAST\_DIALOGUE\_ADDED\_IN\_STEP\_MEMORY\_KEY**: `string` = `"dialogue:step_counter"`

The key of step counter of the current dialogue memory

### LAST\_INPUT\_ADDED\_IN\_STEP\_MEMORY\_KEY [#last_input_added_in_step_memory_key]

\> **LAST\_INPUT\_ADDED\_IN\_STEP\_MEMORY\_KEY**: `string` = `"input:step_counter"`

The key of the last input added in the step memory

### LAST\_MENU\_OPTIONS\_ADDED\_IN\_STEP\_MEMORY\_KEY [#last_menu_options_added_in_step_memory_key]

\> **LAST\_MENU\_OPTIONS\_ADDED\_IN\_STEP\_MEMORY\_KEY**: `string` = `"choice:step_counter"`

The key of the last menu options added in the step memory

### LAST\_STEP\_GLUED [#last_step_glued]

\> **LAST\_STEP\_GLUED**: `string` = `"glue:last_step"`

The key of the last dialogue step glued in the step memory

### OPENED\_LABELS\_COUNTER\_KEY [#opened_labels_counter_key]

\> **OPENED\_LABELS\_COUNTER\_KEY**: `string` = `"label:opened"`

The key of a list of all labels that have been opened during the progression of the steps.


# Variable: TextStyle (/jsdoc/pixi-vn/index/variables/TextStyle)



\> **TextStyle**: *typeof* `TextStyle`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: Texture (/jsdoc/pixi-vn/index/variables/Texture)



\> **Texture**: *typeof* `Texture`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: UPDATE_PRIORITY (/jsdoc/pixi-vn/index/variables/UPDATE_PRIORITY)



\> **UPDATE\_PRIORITY**: *typeof* `UPDATE_PRIORITY`

Defined in: [src/canvas/index.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L8)


# Variable: canvas (/jsdoc/pixi-vn/index/variables/canvas)



\> `const` **canvas**: [`CanvasManagerInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface)

Defined in: [src/canvas/index.ts:98](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/index.ts#L98)


# Variable: default (/jsdoc/pixi-vn/index/variables/default)



\> **default**: `object`

Defined in: [src/index.ts:476](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L476)

## Type Declaration [#type-declaration]

### canvas [#canvas]

\> **canvas**: [`CanvasManagerInterface`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface) = `canvasUtils.canvas`

### CANVAS\_APP\_GAME\_LAYER\_ALIAS [#canvas_app_game_layer_alias]

\> **CANVAS\_APP\_GAME\_LAYER\_ALIAS**: `string`

Is a special alias to indicate the game layer.

### canvasUtils [#canvasutils]

\> **canvasUtils**: `__module`

### characterUtils [#characterutils]

\> **characterUtils**: `__module`

### Game [#game]

\> **Game**: *typeof* [`Game`](/jsdoc/pixi-vn/index/namespaces/Game)

### GameUnifier [#gameunifier]

\> **GameUnifier**: *typeof* [`GameUnifier`](/jsdoc/pixi-vn/index/classes/GameUnifier)

### history [#history]

\> **history**: [`HistoryManagerInterface`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface) = `historyUtils.stepHistory`

### narration [#narration]

\> **narration**: [`NarrationManagerInterface`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface) = `narrationUtils.narration`

### narrationUtils [#narrationutils]

\> **narrationUtils**: `__module`

### Pause [#pause]

\> **Pause**: (`duration`) => [`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType)

Pause the tickers for a duration.

#### Parameters [#parameters]

##### duration [#duration]

`number`

Duration in seconds

#### Returns [#returns]

[`PauseType`](/jsdoc/pixi-vn/index/type-aliases/PauseType)

The pause object

#### Deprecated [#deprecated]

### PIXIVN\_VERSION [#pixivn_version]

\> **PIXIVN\_VERSION**: `string`

### ~~Repeat~~ [#repeat]

\> **Repeat**: `"repeat"`

#### Deprecated [#deprecated-1]

### sound [#sound]

\> **sound**: [`SoundManagerInterface`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface) = `soundUtils.sound`

### soundUtils [#soundutils]

\> **soundUtils**: `__module`

### storage [#storage]

\> **storage**: [`StorageManagerInterface`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface) = `storageUtils.storage`

### createExportableElement() [#createexportableelement]

\> **createExportableElement**\<`T`>(`element`): `T`

This function is used to create a deep copy of the element

#### Type Parameters [#type-parameters]

##### T [#t]

`T`

#### Parameters [#parameters-1]

##### element [#element]

`T`

The element to be copied

#### Returns [#returns-1]

`T`

The copied element

#### Throws [#throws]

when the element is not JSON serializable (e.g. contains functions or class instances).


# Variable: narration (/jsdoc/pixi-vn/index/variables/narration)



\> `const` **narration**: [`NarrationManagerInterface`](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface)

Defined in: [src/narration/index.ts:38](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/index.ts#L38)


# Variable: sound (/jsdoc/pixi-vn/index/variables/sound)



\> `const` **sound**: [`SoundManagerInterface`](/jsdoc/pixi-vn/index/interfaces/SoundManagerInterface)

Defined in: [src/sound/index.ts:26](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/index.ts#L26)

The singleton sound manager instance. Use this to play and manage sounds in your game.


# Variable: stepHistory (/jsdoc/pixi-vn/index/variables/stepHistory)



\> `const` **stepHistory**: [`HistoryManagerInterface`](/jsdoc/pixi-vn/index/interfaces/HistoryManagerInterface)

Defined in: [src/history/index.ts:9](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/history/index.ts#L9)


# Variable: storage (/jsdoc/pixi-vn/index/variables/storage)



\> `const` **storage**: [`StorageManagerInterface`](/jsdoc/pixi-vn/index/interfaces/StorageManagerInterface)

Defined in: [src/storage/index.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/index.ts#L12)


# Function: vitePluginPixivn() (/jsdoc/pixi-vn/vite/functions/vitePluginPixivn)



\> **vitePluginPixivn**(`options?`): `Plugin`

Defined in: [src/vite/plugins.ts:313](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L313)

Creates a Vite plugin for Pixi'VN integration.

**Static content loading**

When [VitePluginPixivnOptions.content](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#content), [VitePluginPixivnOptions.characters](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#characters), or
[VitePluginPixivnOptions.labels](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#labels) are provided, the matched files are executed server-side
via Vite SSR at startup, populating `RegisteredCharacters`, `RegisteredLabels`, and any other
singletons before downstream plugins (such as `vitePluginInk`) run — including during
`vite build`.

**Auto-generated type file**

When [VitePluginPixivnOptions.typeFilePath](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#typefilepath) is provided, the plugin writes a
TypeScript declaration file that augments `PixivnCharacterIds` in `@drincs/pixi-vn/characters`
and `PixivnLabelIds` in `@drincs/pixi-vn/narration` with all currently known IDs.
This narrows `CharacterIdType` and `LabelIdType` from `string` to unions of known literals,
giving compile-time safety for character lookups, `narration.call`, `narration.jump`, etc.

The file is regenerated whenever the character or label set changes (content reload or
external-label updates). It is **excluded from HMR** so regenerating it never triggers a page reload.

**Auto-generated list file**

When VitePluginPixivnOptions.listFilePath is provided, the plugin writes a
TypeScript file that exports runtime `as const` arrays of all currently known IDs:
`characterIds` and `labelIds`. These arrays can be used for runtime validation
(e.g. `z.enum(characterIds)`) and are regenerated on the same triggers as the type file.

**Asset bundles / aliases**

When a PIXI.js `AssetsManifest` is registered — via [VitePluginPixivnOptions.assetsManifest](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#assetsmanifest)
or, for manifests produced by an async asset pipeline, `api.setAssetsManifest(manifest)` — the
same [VitePluginPixivnOptions.typeFilePath](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#typefilepath) also gets `export const bundleIds` /
`export const assetAliasIds` (`as const` arrays) plus `declare module` augmentations for
`PixivnBundleIds` / `PixivnAssetAliasIds` in `@drincs/pixi-vn/canvas` — narrowing that module's
`BundleIdType` / `AssetAliasIdType` from `string` to unions of known literals, exactly like
`PixivnCharacterIds` / `PixivnLabelIds` narrow `CharacterIdType` / `LabelIdType` above. The
manifest also immediately backs the `GET /__pixi-vn/assets/manifest` endpoint below.

**External label providers**

Other Vite plugins can inject label IDs via the plugin API without needing to register
them through SSR-loaded modules:

* `api.setExternalLabels(providerId, labels)` — registers (or replaces) the label list for
  the given provider and regenerates the type file.
* `api.clearExternalLabels(providerId)` — removes all labels for the given provider and
  regenerates the type file.

**Dev-server HTTP endpoints**

* `GET  /__pixi-vn/characters` — retrieve registered characters
* `POST /__pixi-vn/characters&#x60; — &#x2A;(deprecated)* update from client; use the `characters` option instead
* `GET  /__pixi-vn/labels` — retrieve narration labels
* `POST /__pixi-vn/labels&#x60; — &#x2A;(deprecated)* update from client; use the `labels` / `content` option instead
* `GET  /__pixi-vn/assets/manifest` — retrieve PIXI assets manifest (immediately available
  when the `assetsManifest` option is set or `api.setAssetsManifest` has been called; otherwise
  404 until a client `POST`)
* `POST /__pixi-vn/assets/manifest&#x60; — &#x2A;(deprecated)* update from client; use the
  `assetsManifest` option instead
* `GET  /__pixi-vn/canvas-options` — retrieve canvas rendering options
* `POST /__pixi-vn/canvas-options` — update canvas options from client

**Plugin API** (consumed by `vitePluginInk`):

* `api.contentLoaded` — `Promise<void>` that resolves once all content modules have finished
  loading. Await this before generating JSON files.
* `api.characters` — the list of registered characters (populated after `contentLoaded`).
* `api.onReload(cb)` — register a callback that fires after every hot-content-reload.
* `api.setExternalLabels(providerId, labels)` — add/replace labels from an external provider.
* `api.clearExternalLabels(providerId)` — remove labels previously set for a provider.
* `api.setAssetsManifest(manifest)` — register/replace the assets manifest after
  plugin-creation time (e.g. once an async asset pipeline finishes); see
  [VitePluginPixivnOptions.assetsManifest](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions#assetsmanifest).

## Parameters [#parameters]

### options? [#options]

[`VitePluginPixivnOptions`](/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions)

Optional plugin configuration.

## Returns [#returns]

`Plugin`

A Vite plugin.

## Example [#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",
    }),
  ],
});
```


# Interface: VitePluginPixivnOptions (/jsdoc/pixi-vn/vite/interfaces/VitePluginPixivnOptions)



Defined in: [src/vite/plugins.ts:94](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L94)

Options for [vitePluginPixivn](/jsdoc/pixi-vn/vite/functions/vitePluginPixivn).

## Properties [#properties]

### assetsManifest? [#assetsmanifest]

\> `optional` &#x2A;*assetsManifest?**: `AssetsManifestOption`

Defined in: [src/vite/plugins.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L217)

A PIXI.js [AssetsManifest](/jsdoc/pixi-vn/index/interfaces/AssetsManifest) describing all asset bundles and their aliases — or a
function that resolves one, for manifests that aren't known synchronously at
plugin-creation time (e.g. one produced by an asset pipeline such as `@assetpack/core`, or
merged together from several sources in an app-owned module).

**Prefer the function form for anything backed by a generated file.** A *static*
`import manifest from "./manifest.gen.json"` in `vite.config.ts` makes Vite treat that file
as a config dependency — restarting the whole server on every change to it — which is
disastrous when the very same config's own asset pipeline rewrites that file on every
startup: an infinite restart loop. The function form sidesteps this entirely: nothing in
`vite.config.ts` itself reads or imports the file; the plugin calls your function lazily,
from inside its own plugin hooks, whenever it needs a fresh manifest.

The function receives an `ssrLoadModule`-like loader (bound to whichever context is
available — the running dev server, or a dedicated temporary server with this plugin's own
`resolve` forwarded during `vite build`) so it can load `@/`-aliased app modules the same
way `content` / `characters` / `labels` do — e.g. to import a module that merges an asset
pipeline's generated manifest with hand-written bundles. Return `undefined` if there's
nothing to register yet (e.g. the pipeline hasn't produced output on a fresh checkout).

The plugin calls this function whenever it (re)loads content — at startup, and on every
hot-reload — and, since it generally can't know which file(s) your function's own import
depends on, also on every other file change (excluding its own generated
[VitePluginPixivnOptions.typeFilePath](#typefilepath)), so a change to a manifest generated by
another plugin is picked up without any direct coupling between the two.

Either way — plain value or function — once a manifest is registered, the plugin:

* writes `export const bundleIds` and `export const assetAliasIds` — `as const` runtime
  arrays of every bundle name and every asset alias found in the manifest — to
  [VitePluginPixivnOptions.typeFilePath](#typefilepath), and augments `PixivnBundleIds` /
  `PixivnAssetAliasIds` in `@drincs/pixi-vn/canvas` (the same `declare module` pattern used
  for `PixivnCharacterIds` / `PixivnLabelIds`), narrowing `BundleIdType` / `AssetAliasIdType`
  (also exported from `@drincs/pixi-vn/canvas`) from `string` to unions of known literals.
* seeds the dev-server's `GET /__pixi-vn/assets/manifest` endpoint with this manifest
  immediately, so it is available without the browser having to `POST` it first (see
  [PIXIVN\_DEV\_API\_ASSETS\_MANIFEST](/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_ASSETS_MANIFEST)). A later `POST` (deprecated) still overrides it.

`api.setAssetsManifest(manifest)` remains available as a lower-level escape hatch for
pushing an already-computed manifest from outside this plugin entirely (e.g. from a
separate Vite plugin that doesn't need `ssrLoadModule` access).

#### Examples [#examples]

```ts
// vite.config.ts — a manifest merged from a generated file plus hand-written bundles
vitePluginPixivn({
  typeFilePath: "./src/pixi-vn.keys.gen.ts",
  assetsManifest: async (ssrLoadModule) => {
    const mod = await ssrLoadModule("/src/assets/index.ts");
    return mod.manifest;
  },
})
```

```ts
// vite.config.ts — a genuinely static manifest, known up front
vitePluginPixivn({
  assetsManifest: { bundles: [{ name: "ui", assets: { logo: "logo.png" } }] },
  typeFilePath: "./src/pixi-vn.keys.gen.ts",
})
```

***

### characters? [#characters]

\> `optional` &#x2A;*characters?**: `string` | `string`\[]

Defined in: [src/vite/plugins.ts:120](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L120)

Glob / path of module(s) whose side effects register characters via
`RegisteredCharacters.add(...)`.

Use when characters are defined separately from other content.

#### Example [#example]

```ts
"./src/characters.ts"
```

***

### content? [#content]

\> `optional` &#x2A;*content?**: `string` | `string`\[]

Defined in: [src/vite/plugins.ts:110](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L110)

Glob / path of module(s) that set up all game content as side effects:
characters, labels, hashtag-command handlers, text-replace handlers, etc.

The plugin loads these files server-side (via Vite SSR) at startup so that
every downstream plugin that depends on the registered data — most notably
`vitePluginInk` for JSON compilation — has the full registry available
before it runs.  This also works during `vite build`.

Pointing to a barrel file that re-exports everything is the simplest option.
All patterns are resolved relative to Vite `root`.

#### Examples [#examples-1]

```ts
"./src/content/index.ts"
```

```ts
"./src/content/*.ts"
```

***

### labels? [#labels]

\> `optional` &#x2A;*labels?**: `string` | `string`\[]

Defined in: [src/vite/plugins.ts:128](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L128)

Glob / path of module(s) whose side effects register narration labels via
`RegisteredLabels.register(...)`.

#### Example [#example-1]

```ts
"./src/*.label.ts"
```

***

### typeFilePath? [#typefilepath]

\> `optional` &#x2A;*typeFilePath?**: `string`

Defined in: [src/vite/plugins.ts:152](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/plugins.ts#L152)

Path to the auto-generated TypeScript file that combines compile-time type
augmentations and runtime `as const` arrays for all currently known entity IDs.

When provided, the plugin generates (or overwrites) this file:

* after all content modules have been loaded at startup,
* after every hot-reload of a watched content file,
* whenever `api.setExternalLabels` or `api.clearExternalLabels` is called.

The generated file contains:

* `declare module` augmentations for `PixivnCharacterIds` and `PixivnLabelIds`,
  narrowing `CharacterIdType` / `LabelIdType` to unions of known string literals.
* `export const characterIds` and `export const labelIds` as `as const` arrays,
  usable at runtime for validation (e.g. `z.enum(characterIds)`).

The generated file is **excluded from HMR** so that updating it never
triggers a full-page reload.

The path may be absolute or relative to Vite `root`.

#### Example [#example-2]

```ts
"./src/pixi-vn.keys.gen.ts"
```


# Variable: PIXIVN_DEV_API_ASSETS_MANIFEST (/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_ASSETS_MANIFEST)



\> `const` **PIXIVN\_DEV\_API\_ASSETS\_MANIFEST**: `"/__pixi-vn/assets/manifest"` = `"/__pixi-vn/assets/manifest"`

Defined in: [src/vite/costants.ts:8](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/costants.ts#L8)

## Const [#const]

API endpoint for assets manifest - GET to retrieve, POST to update


# Variable: PIXIVN_DEV_API_CANVAS_OPTIONS (/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_CANVAS_OPTIONS)



\> `const` **PIXIVN\_DEV\_API\_CANVAS\_OPTIONS**: `"/__pixi-vn/canvas-options"` = `"/__pixi-vn/canvas-options"`

Defined in: [src/vite/costants.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/costants.ts#L11)

## Const [#const]

API endpoint for canvas options - GET to retrieve, POST to update


# Variable: PIXIVN_DEV_API_CHARACTERS (/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_CHARACTERS)



\> `const` **PIXIVN\_DEV\_API\_CHARACTERS**: `"/__pixi-vn/characters"` = `"/__pixi-vn/characters"`

Defined in: [src/vite/costants.ts:2](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/costants.ts#L2)

## Const [#const]

API endpoint for characters data - GET to retrieve, POST to update


# Variable: PIXIVN_DEV_API_LABELS (/jsdoc/pixi-vn/vite/variables/PIXIVN_DEV_API_LABELS)



\> `const` **PIXIVN\_DEV\_API\_LABELS**: `"/__pixi-vn/labels"` = `"/__pixi-vn/labels"`

Defined in: [src/vite/costants.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite/costants.ts#L5)

## Const [#const]

API endpoint for narration labels - GET to retrieve, POST to update


# Function: isViteDevelopmentMode() (/jsdoc/pixi-vn/vite-listener/functions/isViteDevelopmentMode)



\> **isViteDevelopmentMode**(): `boolean`

Defined in: [src/vite-listener/plugins.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite-listener/plugins.ts#L56)

Checks if the current runtime is Vite development mode.
Detects Vite dev client script injected in development.
Assumes default Vite client path starts with `/@vite/client`.

## Returns [#returns]

`boolean`


# Function: setupPixivnViteData() (/jsdoc/pixi-vn/vite-listener/functions/setupPixivnViteData)



\> **setupPixivnViteData**(): `Promise`\<`void`>

Defined in: [src/vite-listener/plugins.ts:86](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/vite-listener/plugins.ts#L86)

Initializes Pixi VN development tools by syncing game state with the Vite dev server.
Sends assets manifest and canvas options.

**Note:** This function only operates in Vite development mode and is a no-op in production.

**Call this function:** After RegisteredCharacters and RegisteredLabels are populated,
typically in your client-side initialization code.

## Returns [#returns]

`Promise`\<`void`>

## Example [#example]

```ts
// In your main game initialization file
import { setupPixivnViteData } from '@drincs/pixi-vn/vite-listener';

await Promise.all([import("@/content")]);
// After game setup
await setupPixivnViteData();
```


# RegisteredCanvasComponents (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents)



## Functions [#functions]

* [add](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/add)
* [copyProperty](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/copyProperty)
* [get](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/get)
* [getInstance](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/getInstance)
* [has](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/has)
* [keys](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/keys)
* [values](/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/values)


# RegisteredCharacters (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters)



## Functions [#functions]

* [add](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/add)
* [clear](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/clear)
* [get](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/get)
* [has](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/has)
* [keys](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/keys)
* [values](/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/values)


# RegisteredEvents (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents)



## Functions [#functions]

* [add](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/add)
* [get](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/get)
* [has](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/has)
* [keys](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/keys)
* [values](/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/values)


# RegisteredLabels (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels)



## Functions [#functions]

* [add](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/add)
* [clear](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/clear)
* [get](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/get)
* [has](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/has)
* [keys](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/keys)
* [values](/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/values)


# RegisteredTickers (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers)



## Functions [#functions]

* [add](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/add)
* [get](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/get)
* [getInstance](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/getInstance)
* [has](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/has)
* [keys](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/keys)
* [values](/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/values)


# SoundRegistry (/jsdoc/pixi-vn/index/namespaces/SoundRegistry)



SoundRegistry is a singleton namespace that holds global state for the sound system.
**DO NOT** import this module directly; use `sound`.

## Variables [#variables]

* [bufferRegistry](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/bufferRegistry)
* [channels](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/channels)
* [mediaInstances](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/mediaInstances)
* [systemPausedAliases](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/systemPausedAliases)
* [transients](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/transients)


# StorageRegistry (/jsdoc/pixi-vn/index/namespaces/StorageRegistry)



StorageRegistry  is a singleton namespace that holds global state for the storage system.
**DO NOT** import this module directly; use `storage`.

## Variables [#variables]

* [defaultStorage](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/defaultStorage)
* [storage](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/storage)
* [tempStorageDeadlines](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/tempStorageDeadlines)

## Functions [#functions]

* [clearOldTempVariables](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/clearOldTempVariables)
* [getFlag](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/getFlag)
* [getVariable](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/getVariable)
* [removeVariable](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/removeVariable)
* [setExternalStoreHandler](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setExternalStoreHandler)
* [setFlag](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setFlag)
* [setVariable](/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setVariable)


# Game (/jsdoc/pixi-vn/index/namespaces/Game)



## Functions [#functions]

* [addOnError](/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnError)
* [addOnPreContinue](/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnPreContinue)
* [clear](/jsdoc/pixi-vn/index/namespaces/Game/functions/clear)
* [exportGameState](/jsdoc/pixi-vn/index/namespaces/Game/functions/exportGameState)
* [init](/jsdoc/pixi-vn/index/namespaces/Game/functions/init)
* [jsonToGameState](/jsdoc/pixi-vn/index/namespaces/Game/functions/jsonToGameState)
* [onEnd](/jsdoc/pixi-vn/index/namespaces/Game/functions/onEnd)
* [~~onError~~](/jsdoc/pixi-vn/index/namespaces/Game/functions/onError)
* [onLabelStarting](/jsdoc/pixi-vn/index/namespaces/Game/functions/onLabelStarting)
* [onLoadingLabel](/jsdoc/pixi-vn/index/namespaces/Game/functions/onLoadingLabel)
* [onNavigate](/jsdoc/pixi-vn/index/namespaces/Game/functions/onNavigate)
* [onStepEnd](/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepEnd)
* [onStepStart](/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepStart)
* [removeOnError](/jsdoc/pixi-vn/index/namespaces/Game/functions/removeOnError)
* [removeOnPreContinue](/jsdoc/pixi-vn/index/namespaces/Game/functions/removeOnPreContinue)
* [restoreGameState](/jsdoc/pixi-vn/index/namespaces/Game/functions/restoreGameState)
* [start](/jsdoc/pixi-vn/index/namespaces/Game/functions/start)


# CanvasPropertyUtility (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility)



## Functions [#functions]

* [calculateAlignByPosition](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculateAlignByPosition)
* [calculatePercentagePositionByPosition](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePercentagePositionByPosition)
* [calculatePositionByAlign](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePositionByAlign)
* [calculatePositionByPercentagePosition](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePositionByPercentagePosition)
* [getPointBySuperPoint](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getPointBySuperPoint)
* [getSuperHeight](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperHeight)
* [getSuperPoint](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperPoint)
* [getSuperWidth](/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperWidth)


# Function: add() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/add)



\> **add**\<`M`, `T`>(`target`, `options?`): `void`

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:167](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L167)

Register a canvas component in the game.

## Type Parameters [#type-parameters]

### M [#m]

`M` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

### T [#t]

`T` *extends* *typeof* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)

## Parameters [#parameters]

### target [#target]

`T`

The class of the canvas component.

### options? [#options]

Options for the canvas component.

#### copyProperty? [#copyproperty]

(`component`, `memory`) => `void` | `Promise`\<`void`>

Function to copy the properties of the canvas component. This function is used when to copy the properties of the canvas component into another instance of the same canvas component.
This function is used into [canvas.copyCanvasElementProperty](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#copycanvaselementproperty) to copy the properties of the canvas component.

#### getInstance? [#getinstance]

(`canvasClass`, `memory`) => [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`> | `Promise`\<[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`>>

Function to get the instance of the canvas component. If not set, it will use the default constructor of the class.
This function is used into [canvas.restore](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#restore) to restore the canvas.

#### name? [#name]

`string`

Name of the canvas component. If the name is already registered, it will show a warning

**Default**

```ts
target.name
```

## Returns [#returns]

`void`


# Function: copyProperty() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/copyProperty)



\> **copyProperty**\<`M`>(`canvasId`, `component`, `source`): `Promise`\<`void`>

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:254](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L254)

## Type Parameters [#type-parameters]

### M [#m]

`M` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

## Parameters [#parameters]

### canvasId [#canvasid]

`string`

### component [#component]

[`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`>

### source [#source]

[`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

## Returns [#returns]

`Promise`\<`void`>


# Function: get() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/get)



\> **get**\<`T`>(`canvasId`): `T` | `undefined`

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:221](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L221)

Get a canvas component by the id.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* *typeof* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)

## Parameters [#parameters]

### canvasId [#canvasid]

`string`

The id of the canvas component.

## Returns [#returns]

`T` | `undefined`

The canvas component type.


# Function: getInstance() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/getInstance)



\> **getInstance**\<`M`, `T`>(`canvasId`, `memory`): `Promise`\<`T` | `undefined`>

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:234](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L234)

## Type Parameters [#type-parameters]

### M [#m]

`M` *extends* [`CanvasBaseItemMemory`](/jsdoc/pixi-vn/index/interfaces/CanvasBaseItemMemory)

### T [#t]

`T` *extends* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\<`M`>

## Parameters [#parameters]

### canvasId [#canvasid]

`string`

### memory [#memory]

`M`

## Returns [#returns]

`Promise`\<`T` | `undefined`>


# Function: has() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:287](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L287)

Check if a canvas component is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the canvas component.

## Returns [#returns]

`boolean`

True if the canvas component is registered, false otherwise.


# Function: keys() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/keys)



\> **keys**(): `string`\[]

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:295](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L295)

Get a list of all canvas component ids registered.

## Returns [#returns]

`string`\[]

An array of label ids.


# Function: values() (/jsdoc/pixi-vn/index/namespaces/RegisteredCanvasComponents/functions/values)



\> **values**(): *typeof* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\[]

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:278](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/canvas-element-decorator.ts#L278)

Get a list of all canvas components registered.

## Returns [#returns]

*typeof* [`CanvasBaseItem`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem)\[]

An array of canvas components.


# Function: add() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/add)



\> **add**(...`characters`): `void`

Defined in: [src/characters/decorators/RegisteredCharacters.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L51)

Is a function that saves the character. If the character already exists, it will be overwritten.

## Parameters [#parameters]

### characters [#characters]

...(`CharacterInterface` | `CharacterInterface`\[])\[]

is the character(s) to save

## Returns [#returns]

`void`

## Example [#example]

```ts
export const liam = new CharacterBaseModel('liam', { name: 'Liam'});
export const alice = new CharacterBaseModel('alice', { name: 'Alice'});
RegisteredCharacters.add(liam, alice);
RegisteredCharacters.add([liam, alice]);
```


# Function: clear() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/clear)



\> **clear**(): `void`

Defined in: [src/characters/decorators/RegisteredCharacters.ts:98](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L98)

Removes all registered characters.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/get)



\> **get**\<`T`, `T2`>(`id`): `T` | `undefined`

Defined in: [src/characters/decorators/RegisteredCharacters.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L20)

is a function that returns the character by the id

## Type Parameters [#type-parameters]

### T [#t]

`T` = `CharacterInterface`

### T2 [#t2]

`T2` *extends* `string` = `string`

## Parameters [#parameters]

### id [#id]

`T2`

is the id of the character

## Returns [#returns]

`T` | `undefined`

the character

## Example [#example]

```ts
const liam = RegisteredCharacters.get('liam');
```


# Function: has() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/characters/decorators/RegisteredCharacters.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L83)

Check if a character is registered.

## Parameters [#parameters]

### id [#id]

`string`

is the id of the character

## Returns [#returns]

`boolean`

true if the character exists, false otherwise


# Function: keys() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/keys)



\> **keys**(): `string`\[]

Defined in: [src/characters/decorators/RegisteredCharacters.ts:91](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L91)

Get a list of all character ids registered.

## Returns [#returns]

`string`\[]

An array of character ids.


# Function: values() (/jsdoc/pixi-vn/index/namespaces/RegisteredCharacters/functions/values)



\> **values**\<`T`>(): `T`\[]

Defined in: [src/characters/decorators/RegisteredCharacters.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/characters/decorators/RegisteredCharacters.ts#L74)

is a function that returns all characters

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `CharacterInterface`

## Returns [#returns]

`T`\[]

all characters

## Example [#example]

```ts
const allCharacters = RegisteredCharacters.values();
```


# Function: add() (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/add)



\> **add**(`fn`, `name`): `void`

Defined in: [src/canvas/decorators/event-decorator.ts:43](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L43)

Register a event in the game.

## Parameters [#parameters]

### fn [#fn]

`SerializableEventHandler`

The class of the event.

### name [#name]

`string`

Name of the event, by default it will use the class name. If the name is already registered, it will show a warning

## Returns [#returns]

`void`


# Function: get() (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/get)



\> **get**(`name`): `SerializableEventHandler` | `undefined`

Defined in: [src/canvas/decorators/event-decorator.ts:56](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L56)

Get a event by the id.

## Parameters [#parameters]

### name [#name]

`string`

## Returns [#returns]

`SerializableEventHandler` | `undefined`

The event type.


# Function: has() (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/canvas/decorators/event-decorator.ts:85](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L85)

Check if a event is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the event.

## Returns [#returns]

`boolean`

True if the event is registered, false otherwise


# Function: keys() (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/keys)



\> **keys**(): `string`\[]

Defined in: [src/canvas/decorators/event-decorator.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L93)

Get a list of all event ids registered.

## Returns [#returns]

`string`\[]

An array of label ids.


# Function: values() (/jsdoc/pixi-vn/index/namespaces/RegisteredEvents/functions/values)



\> **values**(): `SerializableEventHandler`\[]

Defined in: [src/canvas/decorators/event-decorator.ts:76](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/decorators/event-decorator.ts#L76)

Get a list of all events registered.

## Returns [#returns]

`SerializableEventHandler`\[]

An array of events.


# Function: add() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/add)



\> **add**(...`labels`): `void`

Defined in: [src/narration/decorators/RegisteredLabels.ts:36](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L36)

Saves a label in the system

## Parameters [#parameters]

### labels [#labels]

...[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, `any`, `number`>\[]

The label(s) to be saved

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/clear)



\> **clear**(): `void`

Defined in: [src/narration/decorators/RegisteredLabels.ts:70](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L70)

Removes all registered labels.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/get)



\> **get**\<`T`, `T2`>(`id`): `T` | `undefined`

Defined in: [src/narration/decorators/RegisteredLabels.ts:21](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L21)

Gets a label by its id

## Type Parameters [#type-parameters]

### T [#t]

`T` = [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, \{ }, `number`>

### T2 [#t2]

`T2` *extends* `string` = `string`

## Parameters [#parameters]

### id [#id]

`T2`

The id of the label

## Returns [#returns]

`T` | `undefined`

The label or undefined if it does not exist


# Function: has() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/narration/decorators/RegisteredLabels.ts:55](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L55)

Check if a label is registered

## Parameters [#parameters]

### id [#id]

`string`

The id of the label

## Returns [#returns]

`boolean`

True if the label is registered, false otherwise


# Function: keys() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/keys)



\> **keys**(): `string`\[]

Defined in: [src/narration/decorators/RegisteredLabels.ts:63](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L63)

Get a list of all label ids registered.

## Returns [#returns]

`string`\[]

An array of label ids.


# Function: values() (/jsdoc/pixi-vn/index/namespaces/RegisteredLabels/functions/values)



\> **values**(): [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, \{ }, `number`>\[]

Defined in: [src/narration/decorators/RegisteredLabels.ts:46](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/narration/decorators/RegisteredLabels.ts#L46)

Get a list of all labels registered.

## Returns [#returns]

[`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, \{ }, `number`>\[]

An array of labels.


# Function: add() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/add)



\> **add**(`target`, `name?`): `void`

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:54](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L54)

Register a ticker in the game.

## Parameters [#parameters]

### target [#target]

(`args`, `options?`) => [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`>

The class of the ticker.

### name? [#name]

`string`

Name of the ticker, by default it will use the class name. If the name is already registered, it will show a warning

## Returns [#returns]

`void`


# Function: get() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/get)



\> **get**\<`T`>(`tickerId`): `T` | `undefined`

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:83](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L83)

Get a ticker by the id.

## Type Parameters [#type-parameters]

### T [#t]

`T` = [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`>

## Parameters [#parameters]

### tickerId [#tickerid]

`string`

## Returns [#returns]

`T` | `undefined`

The ticker type.


# Function: getInstance() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/getInstance)



\> **getInstance**\<`TArgs`>(`tickerId`, `args`, `options?`): [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:107](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L107)

Get a ticker instance by the id.

## Type Parameters [#type-parameters]

### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/jsdoc/pixi-vn/index/interfaces/TickerArgs)

## Parameters [#parameters]

### tickerId [#tickerid]

`string`

The id of the ticker.

### args [#args]

`TArgs`

The arguments that you want to pass to the ticker.

### options? [#options]

#### canvasElementAliases? [#canvaselementaliases]

`string`\[]

#### duration? [#duration]

`number`

#### id? [#id]

`string`

#### priority? [#priority]

`UPDATE_PRIORITY`

## Returns [#returns]

[`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

The instance of the ticker


# Function: has() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:155](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L155)

Check if a ticker is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the ticker.

## Returns [#returns]

`boolean`

True if the ticker is registered, false otherwise.


# Function: keys() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/keys)



\> **keys**(): `string`\[]

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:163](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L163)

Get a list of all ticker ids registered.

## Returns [#returns]

`string`\[]

An array of label ids.


# Function: values() (/jsdoc/pixi-vn/index/namespaces/RegisteredTickers/functions/values)



\> **values**(): (`args`, `options?`) => [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`>\[]

Defined in: [src/canvas/tickers/decorators/RegisteredTickers.ts:136](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/tickers/decorators/RegisteredTickers.ts#L136)

Get a list of all tickers registered.

## Returns [#returns]

(`args`, `options?`) => [`Ticker`](/jsdoc/pixi-vn/index/interfaces/Ticker)\<`any`>\[]

An array of tickers.


# Variable: bufferRegistry (/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/bufferRegistry)



\> `const` **bufferRegistry**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`string`, `ToneAudioBuffer`>

Defined in: [src/sound/SoundRegistry.ts:20](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/SoundRegistry.ts#L20)


# Variable: channels (/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/channels)



\> `const` **channels**: `Map`\<`string`, [`AudioChannelInterface`](/jsdoc/pixi-vn/index/interfaces/AudioChannelInterface)>

Defined in: [src/sound/SoundRegistry.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/SoundRegistry.ts#L12)


# Variable: mediaInstances (/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/mediaInstances)



\> `const` **mediaInstances**: `Map`\<`string`, `MediaInstance`>

Defined in: [src/sound/SoundRegistry.ts:11](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/SoundRegistry.ts#L11)


# Variable: systemPausedAliases (/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/systemPausedAliases)



\> `const` **systemPausedAliases**: `Set`\<`string`>

Defined in: [src/sound/SoundRegistry.ts:19](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/SoundRegistry.ts#L19)

Aliases of [mediaInstances](/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/mediaInstances) that were paused by `pauseUnsavedAll`.
Used by `resumeUnsavedAll` to only resume the instances it paused, leaving
any previously-paused instances untouched.


# Variable: transients (/jsdoc/pixi-vn/index/namespaces/SoundRegistry/variables/transients)



\> `const` **transients**: `Set`\<`Player`>

Defined in: [src/sound/SoundRegistry.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/sound/SoundRegistry.ts#L13)


# Function: clearOldTempVariables() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/clearOldTempVariables)



\> **clearOldTempVariables**(`openedLabelsNumber`): `void`

Defined in: [src/storage/StorageRegistry.ts:17](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L17)

## Parameters [#parameters]

### openedLabelsNumber [#openedlabelsnumber]

`number`

## Returns [#returns]

`void`


# Function: getFlag() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/getFlag)



\> **getFlag**(`key`): `boolean`

Defined in: [src/storage/StorageRegistry.ts:68](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L68)

## Parameters [#parameters]

### key [#key]

`string`

## Returns [#returns]

`boolean`


# Function: getVariable() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/getVariable)



\> **getVariable**\<`T`>(`prefix`, `key`): `T` | `undefined`

Defined in: [src/storage/StorageRegistry.ts:40](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L40)

## Type Parameters [#type-parameters]

### T [#t]

`T` = [`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

## Parameters [#parameters]

### prefix [#prefix]

`string`

### key [#key]

`string`

## Returns [#returns]

`T` | `undefined`


# Function: removeVariable() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/removeVariable)



\> **removeVariable**(`prefix`, `key`): `void`

Defined in: [src/storage/StorageRegistry.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L48)

## Parameters [#parameters]

### prefix [#prefix]

`string`

### key [#key]

`string`

## Returns [#returns]

`void`


# Function: setExternalStoreHandler() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setExternalStoreHandler)



\> **setExternalStoreHandler**(`handler?`): `void`

Defined in: [src/storage/StorageRegistry.ts:27](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L27)

## Parameters [#parameters]

### handler? [#handler]

[`StorageExternalStoreHandler`](/jsdoc/pixi-vn/index/interfaces/StorageExternalStoreHandler)

## Returns [#returns]

`void`


# Function: setFlag() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setFlag)



\> **setFlag**(`key`, `value`): `void`

Defined in: [src/storage/StorageRegistry.ts:53](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L53)

## Parameters [#parameters]

### key [#key]

`string`

### value [#value]

`boolean`

## Returns [#returns]

`void`


# Function: setVariable() (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/functions/setVariable)



\> **setVariable**(`prefix`, `key`, `value`): `void`

Defined in: [src/storage/StorageRegistry.ts:31](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L31)

## Parameters [#parameters]

### prefix [#prefix]

`string`

### key [#key]

`string`

### value [#value]

[`StorageElementType`](/jsdoc/pixi-vn/index/type-aliases/StorageElementType)

## Returns [#returns]

`void`


# Variable: defaultStorage (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/defaultStorage)



\> `const` **defaultStorage**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`string`, `any`>

Defined in: [src/storage/StorageRegistry.ts:13](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L13)


# Variable: storage (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/storage)



\> `const` **storage**: [`CachedMap`](/jsdoc/pixi-vn/index/classes/CachedMap)\<`string`, `any`>

Defined in: [src/storage/StorageRegistry.ts:12](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L12)


# Variable: tempStorageDeadlines (/jsdoc/pixi-vn/index/namespaces/StorageRegistry/variables/tempStorageDeadlines)



\> `const` **tempStorageDeadlines**: `Map`\<`string`, `number`>

Defined in: [src/storage/StorageRegistry.ts:14](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/storage/StorageRegistry.ts#L14)


# Function: addOnError() (/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnError)



\> **addOnError**(`value`): () => `void`

Defined in: [src/index.ts:363](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L363)

Register an error handler. Multiple handlers can be registered; they
will be executed in registration order.

You can also check if the error is an instance of [PixiError](/jsdoc/pixi-vn/index/classes/PixiError) to handle specific errors related to Pixi’VN.

## Parameters [#parameters]

### value [#value]

[`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)

## Returns [#returns]

() => `void`

## Example [#example]

```ts
// Register a synchronous error handler
Game.addOnError((error, props) => {
   props.notify("An error occurred")
   // send a notification to GlitchTip, Sentry, etc...
})

// Register an error handler for Pixi’VN specific errors
Game.addOnError((error, { notify }) => {
    if (error instanceof PixiError) {
        // ...
    }
});

// Register an asynchronous error handler
Game.addOnError(async (error, props) => {
   await logErrorToServer(error)
   props.notify("An error occurred")
})

// Register an error handler with step restoration/rollback
Game.addOnError(async (error, props) => {
   // Restore the game state to the previous step
   await stepHistory.back(props)
   props.notify("An error occurred, returning to previous step")
})
```


# Function: addOnPreContinue() (/jsdoc/pixi-vn/index/namespaces/Game/functions/addOnPreContinue)



\> **addOnPreContinue**(`handler`): `void`

Defined in: [src/index.ts:468](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L468)

Register a handler to run immediately before a narration "continue" operation.
Handlers are executed in registration order and may be async. Use
`{@link addOnPreContinue}` / `{@link removeOnPreContinue}` to manage them programmatically.

## Parameters [#parameters]

### handler [#handler]

() => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/pixi-vn/index/namespaces/Game/functions/clear)



\> **clear**(): `void`

Defined in: [src/index.ts:204](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L204)

Clear all game data. This function is used to reset the game.

## Returns [#returns]

`void`


# Function: exportGameState() (/jsdoc/pixi-vn/index/namespaces/Game/functions/exportGameState)



\> **exportGameState**(): [`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

Defined in: [src/index.ts:218](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L218)

Get all the game data. It can be used to save the game.

## Returns [#returns]

[`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

The game data


# Function: init() (/jsdoc/pixi-vn/index/namespaces/Game/functions/init)



## Call Signature [#call-signature]

\> **init**(`element`, `options`, `devtoolsOptions?`): `Promise`\<`void`>

Defined in: [src/index.ts:80](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L80)

Initialize the Game and PixiJS Application and the interface div.
This method should be called before any other method.

### Parameters [#parameters]

#### element [#element]

`HTMLElement`

The html element where I will put the canvas. Example: document.body

#### options [#options]

`Partial`\<[`ApplicationOptions`](/jsdoc/pixi-vn/index/interfaces/ApplicationOptions)> & `object`

Equivalent to the options you can use when initializing a [PixiJS Application](https://pixijs.com/8.x/guides/components/application). Additionally, it supports the following options:

* `id`: The id of the canvas element.
* `navigate`: The route navigate function.
* `resizeMode`: The resize mode of the canvas.

#### devtoolsOptions? [#devtoolsoptions]

`Devtools`

Equivalent to the options you can use when initializing the [PixiJS Devtools](https://pixi-vn.com/start/canvas#use-pixijs-devtools-with-pixivn).

### Returns [#returns]

`Promise`\<`void`>

### Example [#example]

```ts
const body = document.body
if (!body) {
    throw new Error('body element not found')
}
await Game.initialize(body, {
    navigate: (path) => {
        // navigate to the path
    },
    width: 1920,
    height: 1080,
    backgroundColor: "#303030"
    resizeMode: "contain"
})
```

## Call Signature [#call-signature-1]

\> **init**(): `Promise`\<`void`>

Defined in: [src/index.ts:110](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L110)

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 [#returns-1]

`Promise`\<`void`>


# Function: jsonToGameState() (/jsdoc/pixi-vn/index/namespaces/Game/functions/jsonToGameState)



\> **jsonToGameState**(`json`): [`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

Defined in: [src/index.ts:295](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L295)

Convert a JSON string to a save data

## Parameters [#parameters]

### json [#json]

`string`

The JSON string

## Returns [#returns]

[`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

The save data


# Function: onEnd() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onEnd)



\> **onEnd**(`value`): `void`

Defined in: [src/index.ts:308](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L308)

Function to be executed at the end of the game. It should be set in the game initialization.

## Parameters [#parameters]

### value [#value]

[`StepLabelType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelType)

## Returns [#returns]

`void`

## Example [#example]

```ts
Game.onEnd(async (props) => {
   props.navigate("/end")
})
```


# Function: onError() (deprecated) (/jsdoc/pixi-vn/index/namespaces/Game/functions/onError)



\> **onError**(`handler`): () => `void`

Defined in: [src/index.ts:314](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L314)

## Parameters [#parameters]

### handler [#handler]

(`type`, `error`, `props`) => `void` | `Promise`\<`void`>

## Returns [#returns]

() => `void`

## Deprecated [#deprecated]

Game.onError is deprecated. Use Game.addOnError / Game.removeOnError to register multiple handlers.


# Function: onLabelStarting() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onLabelStarting)



\> **onLabelStarting**(`value`): `void`

Defined in: [src/index.ts:432](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L432)

Is a function that will be executed every time a label is about to be started, either via
`narration.call`, `narration.jump`, or a choice of type `"call"` / `"jump"`.

By default (when this is not set), the label starts immediately, exactly like before this hook
existed. If you set it, you take control: call `defaultStart()` yourself whenever you actually
want the label to run — right away, or later (e.g. on a subsequent player action in your
template). Until `defaultStart()` is called, nothing about the label happens: it is not added to
the history and no step of it runs.

## Parameters [#parameters]

### value [#value]

(`labelId`, `props`, `options`, `defaultStart`) => [`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) | `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

## Returns [#returns]

`void`

## Example [#example]

```ts
Game.onLabelStarting((labelId, props, options, defaultStart) => {
    pendingLabelStart = defaultStart; // keep it for later, don't run it now
})
```


# Function: onLoadingLabel() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onLoadingLabel)



\> **onLoadingLabel**(`value`): `void`

Defined in: [src/index.ts:400](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L400)

Is a function that will be executed in [onStepStart](/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepStart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narrationUtils.narration](/jsdoc/pixi-vn/index/variables/narration).openedLabels.
It is useful for example to make sure all images used have been cached

## Parameters [#parameters]

### value [#value]

(`stepId`, `label`) => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`

## Example [#example]

```ts
Game.onLoadingLabel(async (stepId, label) => {
    await Assets.load('path/to/image1.png')
    await Assets.load('path/to/image2.png')
})
```


# Function: onNavigate() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onNavigate)



\> **onNavigate**(`value`): `void`

Defined in: [src/index.ts:459](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L459)

Function to be executed when navigation is requested.

## Parameters [#parameters]

### value [#value]

(`path`) => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`

## Example [#example]

```ts
Game.onNavigate(async (path) => {
   // custom navigation logic
   window.history.pushState({}, "title", path)
})
```


# Function: onStepEnd() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepEnd)



\> **onStepEnd**(`value`): `void`

Defined in: [src/index.ts:411](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L411)

Is a function that will be executed when the step ends.

## Parameters [#parameters]

### value [#value]

(`stepId`, `label`) => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`


# Function: onStepStart() (/jsdoc/pixi-vn/index/namespaces/Game/functions/onStepStart)



\> **onStepStart**(`value`): `void`

Defined in: [src/index.ts:379](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L379)

Is a function that will be executed before any step is executed.

## Parameters [#parameters]

### value [#value]

(`stepId`, `label`) => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`


# Function: removeOnError() (/jsdoc/pixi-vn/index/namespaces/Game/functions/removeOnError)



\> **removeOnError**(`handler`): `void`

Defined in: [src/index.ts:370](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L370)

Remove a previously registered error handler.

## Parameters [#parameters]

### handler [#handler]

[`OnErrorHandler`](/jsdoc/pixi-vn/index/type-aliases/OnErrorHandler)

## Returns [#returns]

`void`


# Function: removeOnPreContinue() (/jsdoc/pixi-vn/index/namespaces/Game/functions/removeOnPreContinue)



\> **removeOnPreContinue**(`handler`): `void`

Defined in: [src/index.ts:471](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L471)

## Parameters [#parameters]

### handler [#handler]

() => `void` | `Promise`\<`void`>

## Returns [#returns]

`void`


# Function: restoreGameState() (/jsdoc/pixi-vn/index/namespaces/Game/functions/restoreGameState)



Load the save data. If `navigate` is not provided, the function registered with [Game.onNavigate](/jsdoc/pixi-vn/index/namespaces/Game/functions/onNavigate)
(or the one passed to [Game.init](/jsdoc/pixi-vn/index/namespaces/Game/functions/init)) will be used.

## Param [#param]

**data**

The save data

## Param [#param-1]

**navigate**

Optional navigation function.

## Call Signature [#call-signature]

\> **restoreGameState**(`data`): `Promise`\<`void`>

Defined in: [src/index.ts:238](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L238)

Load the save data

### Parameters [#parameters]

#### data [#data]

[`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

The save data

### Returns [#returns]

`Promise`\<`void`>

## Call Signature [#call-signature-1]

\> **restoreGameState**(`data`, `navigate`): `Promise`\<`void`>

Defined in: [src/index.ts:244](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L244)

### Parameters [#parameters-1]

#### data [#data-1]

[`GameState`](/jsdoc/pixi-vn/index/interfaces/GameState)

The save data

#### navigate [#navigate]

(`path`) => `void` | `Promise`\<`void`>

Navigation function to use for this restore call.

### Returns [#returns-1]

`Promise`\<`void`>

### Deprecated [#deprecated]

Use `restoreGameState(data)` (without the `navigate` argument) and configure navigation via `Game.init({ navigate })` or `Game.onNavigate(...)`.


# Function: start() (/jsdoc/pixi-vn/index/namespaces/Game/functions/start)



\> **start**\<`T`>(`label`, `props`): `Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

Defined in: [src/index.ts:282](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/index.ts#L282)

Start the game with a label. This function will clear all the game data and start the narration from the specified label.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = \{ }

## Parameters [#parameters]

### label [#label]

`string` | [`LabelAbstract`](/jsdoc/pixi-vn/index/classes/LabelAbstract)\<`any`, `T`, `number`>

The label to start the game with. It can be a string or a LabelAbstract instance. If it is a string, it will be used as the id of the label to start. If it is a LabelAbstract instance, it will be used directly. If the label is not found, an error will be thrown.

### props [#props]

[`StepLabelPropsType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelPropsType)\<`T`>

The properties to pass to the label. It will be passed to the [StepLabelType](/jsdoc/pixi-vn/index/type-aliases/StepLabelType) of the label when it is executed.

## Returns [#returns]

`Promise`\<[`StepLabelResultType`](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType)>

The result of the label execution. It can be a [StepLabelResultType](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType) or a Promise that resolves to a [StepLabelResultType](/jsdoc/pixi-vn/index/type-aliases/StepLabelResultType).


# Function: calculateAlignByPosition() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculateAlignByPosition)



\> **calculateAlignByPosition**(`type`, `position`, `value`, `pivot`, `negativeScale`, `anchor?`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:42](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L42)

## Parameters [#parameters]

### type [#type]

`"width"` | `"height"`

### position [#position]

`number`

### value [#value]

`number`

### pivot [#pivot]

`number`

### negativeScale [#negativescale]

`boolean`

### anchor? [#anchor]

`number` = `0`

## Returns [#returns]

`number`


# Function: calculatePercentagePositionByPosition() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePercentagePositionByPosition)



\> **calculatePercentagePositionByPosition**(`type`, `position`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:88](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L88)

## Parameters [#parameters]

### type [#type]

`"width"` | `"height"`

### position [#position]

`number`

## Returns [#returns]

`number`


# Function: calculatePositionByAlign() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePositionByAlign)



\> **calculatePositionByAlign**(`type`, `align`, `value`, `pivot`, `negativeScale`, `anchor?`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:5](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L5)

## Parameters [#parameters]

### type [#type]

`"width"` | `"height"`

### align [#align]

`number`

### value [#value]

`number`

### pivot [#pivot]

`number`

### negativeScale [#negativescale]

`boolean`

### anchor? [#anchor]

`number` = `0`

## Returns [#returns]

`number`


# Function: calculatePositionByPercentagePosition() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/calculatePositionByPercentagePosition)



\> **calculatePositionByPercentagePosition**(`type`, `percentage`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:77](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L77)

## Parameters [#parameters]

### type [#type]

`"width"` | `"height"`

### percentage [#percentage]

`number`

## Returns [#returns]

`number`


# Function: getPointBySuperPoint() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getPointBySuperPoint)



\> **getPointBySuperPoint**(`superPoint`, `angle`): `object`

Defined in: [src/canvas/functions/canvas-property-utility.ts:175](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L175)

## Parameters [#parameters]

### superPoint [#superpoint]

#### x [#x]

`number`

#### y [#y]

`number`

### angle [#angle]

`number`

## Returns [#returns]

`object`

### x [#x-1]

\> **x**: `number`

### y [#y-1]

\> **y**: `number`


# Function: getSuperHeight() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperHeight)



\> **getSuperHeight**(`canvasElement`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:246](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L246)

## Parameters [#parameters]

### canvasElement [#canvaselement]

`Container`

## Returns [#returns]

`number`


# Function: getSuperPoint() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperPoint)



\> **getSuperPoint**(`point`, `angle`): `object`

Defined in: [src/canvas/functions/canvas-property-utility.ts:99](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L99)

## Parameters [#parameters]

### point [#point]

#### x [#x]

`number`

#### y [#y]

`number`

### angle [#angle]

`number`

## Returns [#returns]

`object`

### x [#x-1]

\> **x**: `number`

### y [#y-1]

\> **y**: `number`


# Function: getSuperWidth() (/jsdoc/pixi-vn/index/namespaces/CanvasPropertyUtility/functions/getSuperWidth)



\> **getSuperWidth**(`canvasElement`): `number`

Defined in: [src/canvas/functions/canvas-property-utility.ts:227](https://github.com/DRincs-Productions/pixi-vn/blob/efc9536feda21bc17c50370f5e35fd8d8d88843a/src/canvas/functions/canvas-property-utility.ts#L227)

## Parameters [#parameters]

### canvasElement [#canvaselement]

`Container`

## Returns [#returns]

`number`


# Pixi’VN + Json Integration (/jsdoc/pixi-vn-json)



![pixi-vn-cover-json](https://github.com/user-attachments/assets/ec9aa39e-6e3c-4198-8a65-e1fce1f1d637)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-json" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn-json?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-json" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn-json" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn-json" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn-json?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-json" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn-json" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

Pixi’VN can be integrated with JSON files to create a visual novel. This method is useful for:

* Add a new narrative to Pixi’VN (It was used to create the integration with &#x2A;**ink***
* Create a external tool to create visual novels with Pixi’VN

( In both these cases it is advisable to notify the developers of Pixi’VN to add the new feature to be helped )

<Mermaid
  chart="flowchart LR;
    K[RenPy] ---> Json;
    H[ink] ---> Json;
    I[Twine] ---> Json;
    J[Yarn Spinner] ---> Json;
    Json[&#x22;Pixi’VN + Json&#x22;] ===> PixiVN;
    PixiVN[&#x22;Pixi’VN&#x22;]"
/>

## How use Pixi’VN + Json? [#how-use-pixivn--json]

First of all you need to install the following library:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-json
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-json
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-json
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-json
    ```
  </CodeBlockTab>
</CodeBlockTabs>

All you need to do to use this integration is create a object using the \<DynamicLink href="/json/PixiVNJson">`PixiVNJson` Model</DynamicLink> and use the `importPixiVNJson()` function to import the object.

```ts title="labels.json"
{
    "$schema": "https://pixi-vn.com/schemas/latest/schema.json",
    "labels": {
        "back_in_london": [
            {
                "dialogue": "We arrived into London at 9.45pm exactly.",
            },
            {
                "labelToOpen": {
                    "label": "hurry_home",
                    "type": "jump",
                },
            },
        ],
        "hurry_home": [
            {
                "dialogue": "We hurried home to Savile Row as fast as we could.",
            },
            {
                "end": "label_end",
            },
        ]
    }
}
```

```ts title="main.ts"
import { PixiVNJson, importPixiVNJson } from "@drincs/pixi-vn-json";
import json from "./labels.json";

importPixiVNJson(json);
```

After that you can run the `back_in_london` label with \<DynamicLink href="/start/labels#run-a-label">Pixi’VN functions</DynamicLink>.

```ts title="main.ts"
import { narration } from "@drincs/pixi-vn";

narration.call(`back_in_london`, {});
```


# @drincs/pixi-vn-json (/jsdoc/pixi-vn-json/modules)



## Modules [#modules]

* [core](/jsdoc/pixi-vn-json/core)
* [index](/jsdoc/pixi-vn-json/index)


# core (/jsdoc/pixi-vn-json/core)



## Classes [#classes]

* [JsonUnifier](/jsdoc/pixi-vn-json/core/classes/JsonUnifier)


# index (/jsdoc/pixi-vn-json/index)



## Namespaces [#namespaces]

* [TextReplaces](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces)
* [translator](/jsdoc/pixi-vn-json/index/namespaces/translator)
* [VariableGetter](/jsdoc/pixi-vn-json/index/namespaces/VariableGetter)

## Classes [#classes]

* [LabelJson](/jsdoc/pixi-vn-json/index/classes/LabelJson)

## Interfaces [#interfaces]

* [PixiVNJson](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJson)
* [PixiVNJsonArithmeticOperationsArithmetic](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmetic)
* [PixiVNJsonArithmeticOperationsArithmeticSingle](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmeticSingle)
* [PixiVNJsonIfElse](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse)

## Type Aliases [#type-aliases]

* [PixiVNJsonAnimateBase](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateBase)
* [PixiVNJsonAnimateSequence](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateSequence)
* [PixiVNJsonArithmeticOperations](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations)
* [PixiVNJsonCanvas](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvas)
* [PixiVNJsonCanvasAnimate](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasAnimate)
* [PixiVNJsonCanvasClear](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasClear)
* [PixiVNJsonCanvasEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEdit)
* [PixiVNJsonCanvasEffect](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEffect)
* [PixiVNJsonCanvasImageContainerShow](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageContainerShow)
* [PixiVNJsonCanvasImageVideoShow](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageVideoShow)
* [PixiVNJsonCanvasRemove](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasRemove)
* [PixiVNJsonCanvasShow](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasShow)
* [PixiVNJsonCanvasTextShow](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasTextShow)
* [PixiVNJsonChoice](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoice)
* [PixiVNJsonChoiceGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoiceGet)
* [PixiVNJsonChoices](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoices)
* [PixiVNJsonComparation](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparation)
* [PixiVNJsonComparationOperatorsType](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparationOperatorsType)
* [PixiVNJsonConditionalOperation](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalOperation)
* [PixiVNJsonConditionalResultToCombine](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalResultToCombine)
* [PixiVNJsonConditionalStatements](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)
* [PixiVNJsonConditions](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)
* [PixiVNJsonDialog](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialog)
* [PixiVNJsonDialogText](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogText)
* [PixiVNJsonDialogue](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogue)
* [PixiVNJsonFunction](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonFunction)
* [PixiVNJsonImageContainerEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageContainerEdit)
* [PixiVNJsonImageEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageEdit)
* [PixiVNJsonInputRequest](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonInputRequest)
* [PixiVNJsonLabelGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelGet)
* [PixiVNJsonLabels](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabels)
* [PixiVNJsonLabelStep](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)
* [PixiVNJsonLabelToOpen](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen)
* [PixiVNJsonLogicGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLogicGet)
* [PixiVNJsonMediaTransiotions](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)
* [PixiVNJsonNarration](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonNarration)
* [PixiVNJsonOnlyStorageSet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOnlyStorageSet)
* [PixiVNJsonOperation](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperation)
* [PixiVNJsonOperationString](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperationString)
* [PixiVNJsonParamGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonParamGet)
* [PixiVNJsonSound](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSound)
* [PixiVNJsonSoundEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEdit)
* [PixiVNJsonSoundEditProps](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEditProps)
* [PixiVNJsonSoundPauseResume](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPauseResume)
* [PixiVNJsonSoundPlay](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlay)
* [PixiVNJsonSoundPlayProps](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlayProps)
* [PixiVNJsonSoundRemove](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundRemove)
* [PixiVNJsonStepSwitch](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitch)
* [PixiVNJsonStepSwitchElementsType](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementsType)
* [PixiVNJsonStepSwitchElementType](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementType)
* [PixiVNJsonStorageGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStorageGet)
* [PixiVNJsonTextEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonTextEdit)
* [PixiVNJsonUnionCondition](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnionCondition)
* [PixiVNJsonUnknownEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnknownEdit)
* [PixiVNJsonValueGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet)
* [PixiVNJsonValueSet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueSet)
* [PixiVNJsonVideoEdit](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoEdit)
* [PixiVNJsonVideoPauseResume](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoPauseResume)
* [ReplaceHandler](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandler)
* [ReplaceHandlerOptions](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions)
* [VariableGetterHandler](/jsdoc/pixi-vn-json/index/type-aliases/VariableGetterHandler)

## Variables [#variables]

* [PIXIVNJSON\_PARAM\_ID](/jsdoc/pixi-vn-json/index/variables/PIXIVNJSON_PARAM_ID)
* [PIXIVNJSON\_SCHEMA\_URL](/jsdoc/pixi-vn-json/index/variables/PIXIVNJSON_SCHEMA_URL)
* [PixiVNJsonComparationOperators](/jsdoc/pixi-vn-json/index/variables/PixiVNJsonComparationOperators)

## Functions [#functions]

* [importPixiVNJson](/jsdoc/pixi-vn-json/index/functions/importPixiVNJson)
* [init](/jsdoc/pixi-vn-json/index/functions/init)


# Class: JsonUnifier (/jsdoc/pixi-vn-json/core/classes/JsonUnifier)



Defined in: [src/core/JsonUnifier.ts:39](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L39)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new JsonUnifier**(): `JsonUnifier`

#### Returns [#returns]

`JsonUnifier`

## Accessors [#accessors]

### animateOperation [#animateoperation]

#### Get Signature [#get-signature]

\> **get** `static` **animateOperation**(): (`operation`) => `void`

Defined in: [src/core/JsonUnifier.ts:306](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L306)

Registered handler for keyframe animation operations.

##### Returns [#returns-1]

(`operation`) => `void`

***

### canvasElementOperation [#canvaselementoperation]

#### Get Signature [#get-signature-1]

\> **get** `static` **canvasElementOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:235](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L235)

Registered handler for generic canvas-element edit/remove operations.

##### Returns [#returns-2]

(`operation`) => `Promise`\<`void`>

***

### canvasOperation [#canvasoperation]

#### Get Signature [#get-signature-2]

\> **get** `static` **canvasOperation**(): (`operation`) => `void`

Defined in: [src/core/JsonUnifier.ts:319](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L319)

Registered handler for generic canvas-wide operations (e.g. clear).

##### Returns [#returns-3]

(`operation`) => `void`

***

### effectOperation [#effectoperation]

#### Get Signature [#get-signature-3]

\> **get** `static` **effectOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:293](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L293)

Registered handler for canvas visual effects (e.g. shake).

##### Returns [#returns-4]

(`operation`) => `Promise`\<`void`>

***

### getConditionalStep [#getconditionalstep]

#### Get Signature [#get-signature-4]

\> **get** `static` **getConditionalStep**(): (`originalStep`, `props?`) => [`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)

Defined in: [src/core/JsonUnifier.ts:358](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L358)

Registered handler that resolves a label step's `conditionalStep` field.

##### Returns [#returns-5]

(`originalStep`, `props?`) => [`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)

***

### getLogichValue [#getlogichvalue]

#### Get Signature [#get-signature-5]

\> **get** `static` **getLogichValue**(): \<`T`>(`value`, `props?`) => `T` | `undefined`

Defined in: [src/core/JsonUnifier.ts:342](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L342)

Registered handler that evaluates a JSON logic expression to a plain value.

##### Returns [#returns-6]

\<`T`>(`value`, `props?`) => `T` | `undefined`

***

### imageContainerOperation [#imagecontaineroperation]

#### Get Signature [#get-signature-6]

\> **get** `static` **imageContainerOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:201](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L201)

##### Returns [#returns-7]

(`operation`) => `Promise`\<`void`>

***

### imageOperation [#imageoperation]

#### Get Signature [#get-signature-7]

\> **get** `static` **imageOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:165](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L165)

Registered handler for ImageSprite show/edit/remove operations.

##### Returns [#returns-8]

(`operation`) => `Promise`\<`void`>

***

### loadAssets [#loadassets]

#### Get Signature [#get-signature-8]

\> **get** `static` **loadAssets**(): (`origin`) => `void` | `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:137](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L137)

Registered handler for loading/lazy-loading assets.

##### Returns [#returns-9]

(`origin`) => `void` | `Promise`\<`void`>

***

### narrationOperation [#narrationoperation]

#### Get Signature [#get-signature-9]

\> **get** `static` **narrationOperation**(): (`operation`) => `void`

Defined in: [src/core/JsonUnifier.ts:280](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L280)

Registered handler for narration operations (input requests, dialogue resets).

##### Returns [#returns-10]

(`operation`) => `void`

***

### setInitialStorageValue [#setinitialstoragevalue]

#### Get Signature [#get-signature-10]

\> **get** `static` **setInitialStorageValue**(): (`value`, `props?`) => `void`

Defined in: [src/core/JsonUnifier.ts:267](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L267)

Registered handler for setting a default (initial) storage value at import time.

##### Returns [#returns-11]

(`value`, `props?`) => `void`

***

### setStorageValue [#setstoragevalue]

#### Get Signature [#get-signature-11]

\> **get** `static` **setStorageValue**(): (`value`, `props?`) => `void`

Defined in: [src/core/JsonUnifier.ts:251](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L251)

Registered handler for setting a storage value during label execution.

##### Returns [#returns-12]

(`value`, `props?`) => `void`

***

### soundOperation [#soundoperation]

#### Get Signature [#get-signature-12]

\> **get** `static` **soundOperation**(): (`operation`) => `void`

Defined in: [src/core/JsonUnifier.ts:150](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L150)

Registered handler for sound play/stop/pause/resume/edit operations.

##### Returns [#returns-13]

(`operation`) => `void`

***

### textOperation [#textoperation]

#### Get Signature [#get-signature-13]

\> **get** `static` **textOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:216](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L216)

Registered handler for Text show/edit/remove operations.

##### Returns [#returns-14]

(`operation`) => `Promise`\<`void`>

***

### videoOperation [#videooperation]

#### Get Signature [#get-signature-14]

\> **get** `static` **videoOperation**(): (`operation`) => `Promise`\<`void`>

Defined in: [src/core/JsonUnifier.ts:184](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L184)

Registered handler for VideoSprite show/edit/remove/pause/resume operations.

##### Returns [#returns-15]

(`operation`) => `Promise`\<`void`>

## Methods [#methods]

### init() [#init]

\> `static` **init**(`options`): `void`

Defined in: [src/core/JsonUnifier.ts:47](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/core/JsonUnifier.ts#L47)

Registers the operation handlers that pixi-vn-json will delegate to at runtime.
Call this once at application startup (e.g. via [init](#init)) before importing any labels.

All parameters are optional except `setInitialStorageValue`, which is required because
it must be available for initial-operation processing during label import.

#### Parameters [#parameters]

##### options [#options]

###### animateOperation? [#animateoperation-1]

(`operation`) => `void`

###### canvasElementOperation? [#canvaselementoperation-1]

(`operation`) => `Promise`\<`void`>

###### canvasOperation? [#canvasoperation-1]

(`operation`) => `void`

###### effectOperation? [#effectoperation-1]

(`operation`) => `Promise`\<`void`>

###### getConditionalStep? [#getconditionalstep-1]

(`originalStep`, `props?`) => [`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)

###### getLogichValue? [#getlogichvalue-1]

\<`T`>(`value`, `props?`) => `T` | `undefined`

###### imageContainerOperation? [#imagecontaineroperation-1]

(`operation`) => `Promise`\<`void`>

###### imageOperation? [#imageoperation-1]

(`operation`) => `Promise`\<`void`>

###### loadAssets? [#loadassets-1]

(`origin`) => `void` | `Promise`\<`void`>

###### narrationOperation? [#narrationoperation-1]

(`operation`) => `void`

###### setInitialStorageValue [#setinitialstoragevalue-1]

(`value`, `props?`) => `void`

###### setStorageValue? [#setstoragevalue-1]

(`value`, `props?`) => `void`

###### soundOperation? [#soundoperation-1]

(`operation`) => `void`

###### textOperation? [#textoperation-1]

(`operation`) => `Promise`\<`void`>

###### videoOperation? [#videooperation-1]

(`operation`) => `Promise`\<`void`>

#### Returns [#returns-16]

`void`


# Class: LabelJson<T> (/jsdoc/pixi-vn-json/index/classes/LabelJson)



Defined in: [src/interpreter/LabelJson.ts:53](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L53)

A label whose steps are defined by a plain JSON structure ([PixiVNJsonLabelStep](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)\[]).

`LabelJson` bridges pixi-vn's label system and the JSON script format: each step is
lazily converted to a StepLabelType closure that resolves dialogues, choices,
operations, and conditional overrides at runtime via [JsonUnifier](/jsdoc/pixi-vn-json/core/classes/JsonUnifier).

## Extends [#extends]

* `LabelAbstract`\<`LabelJson`\<`T`>, `T`>

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = `object`

The type of the props object passed between steps.

## Constructors [#constructors]

### Constructor [#constructor]

\> **new LabelJson**\<`T`>(`id`, `steps`, `props?`, `options?`): `LabelJson`\<`T`>

Defined in: [src/interpreter/LabelJson.ts:59](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L59)

#### Parameters [#parameters]

##### id [#id]

`string`

is the id of the label

##### steps [#steps]

([`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep) | (() => [`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)))\[]

is the list of steps that the label will perform

##### props? [#props]

`LabelProps`\<`LabelJson`\<`T`>, `number`>

is the properties of the label

##### options? [#options]

`LabelJsonOptions` = `{}`

#### Returns [#returns]

`LabelJson`\<`T`>

#### Overrides [#overrides]

`LabelAbstract<LabelJson<T>, T>.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/narration.d.ts:388

Get the id of the label. This variable is used in the system to get the label by id, RegisteredLabels.get

#### Inherited from [#inherited-from]

`LabelAbstract.id`

## Accessors [#accessors]

### onLoadingLabel [#onloadinglabel]

#### Get Signature [#get-signature]

\> **get** **onLoadingLabel**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/narration.d.ts:408

Is a function that will be executed in [onStepStart](#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the narration.openedLabels.
It is useful for example to make sure all images used have been cached

##### Example [#example]

```ts title="content/labels/start.label.ts"
newLabel("start", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

##### Returns [#returns-1]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

#### Inherited from [#inherited-from-1]

`LabelAbstract.onLoadingLabel`

***

### onStepEnd [#onstepend]

#### Get Signature [#get-signature-1]

\> **get** **onStepEnd**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/narration.d.ts:410

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

##### Example [#example-1]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

##### Returns [#returns-2]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

#### Inherited from [#inherited-from-2]

`LabelAbstract.onStepEnd`

***

### onStepStart [#onstepstart]

#### Get Signature [#get-signature-2]

\> **get** **onStepStart**(): ((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/narration.d.ts:406

A function executed before each `step`.

##### Example [#example-2]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```

##### Returns [#returns-3]

((`stepId`, `label`) => `void` | `Promise`\<`void`>) | `undefined`

#### Inherited from [#inherited-from-3]

`LabelAbstract.onStepStart`

***

### stepCount [#stepcount]

#### Get Signature [#get-signature-3]

\> **get** **stepCount**(): `number`

Defined in: [src/interpreter/LabelJson.ts:106](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L106)

Get the number of steps in the label. This variable is used in the system to get the number of steps in the label.

##### Returns [#returns-4]

`number`

The number of steps in the label

#### Overrides [#overrides-1]

`LabelAbstract.stepCount`

***

### steps [#steps-1]

#### Get Signature [#get-signature-4]

\> **get** **steps**(): `StepLabelType`\<`T`>\[]

Defined in: [src/interpreter/LabelJson.ts:101](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L101)

##### Returns [#returns-5]

`StepLabelType`\<`T`>\[]

## Methods [#methods]

### getStepById() [#getstepbyid]

\> **getStepById**(`stepId`): `StepLabelType`\<`T`> | `undefined`

Defined in: [src/interpreter/LabelJson.ts:109](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L109)

Get the step by id

#### Parameters [#parameters-1]

##### stepId [#stepid]

`number`

Id of the step

#### Returns [#returns-6]

`StepLabelType`\<`T`> | `undefined`

The step or undefined if it does not exist

#### Overrides [#overrides-2]

`LabelAbstract.getStepById`

***

### getStepSha() [#getstepsha]

\> **getStepSha**(`index`): `string` | `undefined`

Defined in: [src/interpreter/LabelJson.ts:131](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/LabelJson.ts#L131)

Returns the SHA-1 hash of the raw step at the given index.
Can be used to detect step changes across label reloads.

#### Parameters [#parameters-2]

##### index [#index]

`number`

Zero-based index of the step.

#### Returns [#returns-7]

`string` | `undefined`

The hex SHA-1 string, or `undefined` if the index is out of range.

#### Overrides [#overrides-3]

`LabelAbstract.getStepSha`


# Function: importPixiVNJson() (/jsdoc/pixi-vn-json/index/functions/importPixiVNJson)



\> **importPixiVNJson**(`values`, `options?`): `Promise`\<`void`>

Defined in: [src/interpreter/importer.ts:14](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/interpreter/importer.ts#L14)

Import a Pixi'VN JSON to the system.
This feature was created to give other developers the ability to create tools that can generate Pixi'VN labels or that generate Pixi'VN after extracting information from a programming language designed for writing narratives.

## Parameters [#parameters]

### values [#values]

`string` | [`PixiVNJson`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJson) | (`string` | [`PixiVNJson`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJson))\[]

The Pixi'VN JSON to be imported

### options? [#options]

`LabelJsonOptions` = `{}`

## Returns [#returns]

`Promise`\<`void`>


# Function: init() (/jsdoc/pixi-vn-json/index/functions/init)



\> **init**(): `void`

Defined in: [src/index.ts:37](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/index.ts#L37)

Initialises the pixi-vn-json system by registering all default operation handlers
(canvas, sound, assets, storage, narration, etc.) into the [JsonUnifier](/jsdoc/pixi-vn-json/core/classes/JsonUnifier).

Call this function once at application startup, before importing any JSON labels.

## Returns [#returns]

`void`


# Interface: PixiVNJson (/jsdoc/pixi-vn-json/index/interfaces/PixiVNJson)



Defined in: [src/schema/PixiVNJson.ts:8](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJson.ts#L8)

PixiVNJson It can be defined as a programming language to write a narrative written in json.

## Properties [#properties]

### $schema? [#schema]

\> `optional&#x60; &#x2A;*$schema?**: `string`

Defined in: [src/schema/PixiVNJson.ts:19](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJson.ts#L19)

The URI of the JSON Schema that describes and validates this document.

You can point to a specific version of the schema, for example:

* `"https://pixi-vn.com/schemas/1.13.0/schema.json"` — pin to a specific version
* `"https://pixi-vn.com/schemas/latest/schema.json"` — always use the latest version

Most editors (VS Code, WebStorm, etc.) use this field to provide
auto-completion, hover documentation, and validation for the document.

***

### initialOperations? [#initialoperations]

\> `optional` &#x2A;*initialOperations?**: ([`PixiVNJsonValueSet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueSet) | [`PixiVNJsonIfElse`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse)\<[`PixiVNJsonValueSet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueSet)>)\[]

Defined in: [src/schema/PixiVNJson.ts:25](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJson.ts#L25)

The operations to be executed before the narrative starts.
For the set storage: They will be set only if there are no variables with the same key already.
For the det tempstorage: if there are variables with the same key already, they will be overwritten.

***

### labels? [#labels]

\> `optional` &#x2A;*labels?**: [`PixiVNJsonLabels`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabels)

Defined in: [src/schema/PixiVNJson.ts:29](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJson.ts#L29)

The labels to be used in the narrative. They will be added to the system


# Interface: PixiVNJsonArithmeticOperationsArithmetic (/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmetic)



Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:8](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L8)

Binary arithmetic operation between two values (left OP right).

## Properties [#properties]

### leftValue [#leftvalue]

\> **leftValue**: [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) | `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<PixiVNJsonArithmeticOperations | StorageElementType | PixiVNJsonValueGet>

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:13](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L13)

Left value of the arithmetic operation

***

### operator [#operator]

\> **operator**: `"*"` | `"/"` | `"+"` | `"-"` | `"%"` | `"POW"` | `"RANDOM"` | `"INTERSECTION"`

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:41](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L41)

Operator of the arithmetic operation:

* `"*"` multiplication
* `"/"` division
* `"+"` addition (concatenation for strings and arrays)
* `"-"` subtraction (removal of elements for arrays)
* `"%"` modulo
* `"POW"` exponentiation
* `"RANDOM"` random integer between leftValue and rightValue (inclusive)
* `"INTERSECTION"` intersection of two arrays (only elements present in both arrays are included in the result)

***

### rightValue [#rightvalue]

\> **rightValue**: [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) | `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<PixiVNJsonArithmeticOperations | StorageElementType | PixiVNJsonValueGet>

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L23)

Right value of the arithmetic operation

***

### type [#type]

\> **type**: `"arithmetic"`

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:9](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L9)


# Interface: PixiVNJsonArithmeticOperationsArithmeticSingle (/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmeticSingle)



Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:47](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L47)

Unary arithmetic operation applied to a single value (e.g. INT, FLOOR, FLOAT).

## Properties [#properties]

### leftValue [#leftvalue]

\> **leftValue**: [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) | `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<PixiVNJsonArithmeticOperations | StorageElementType | PixiVNJsonValueGet>

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:52](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L52)

Left value of the arithmetic operation

***

### operator [#operator]

\> **operator**: `"INT"` | `"FLOOR"` | `"FLOAT"`

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:65](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L65)

Operator of the arithmetic operation:

* `"INT"` truncates the value to an integer (removes the decimal part)
* `"FLOOR"` rounds down to the nearest integer
* `"FLOAT"` converts the value to a floating-point number

***

### type [#type]

\> **type**: `"arithmeticsingle"`

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:48](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L48)


# Interface: PixiVNJsonIfElse<Then> (/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse)



Defined in: [src/schema/PixiVNJsonIfElse.ts:8](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonIfElse.ts#L8)

If-Else condition for PixiVNJson

## Type Parameters [#type-parameters]

### Then [#then]

`Then`

## Properties [#properties]

### condition [#condition]

\> **condition**: [`PixiVNJsonConditions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)

Defined in: [src/schema/PixiVNJsonIfElse.ts:20](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonIfElse.ts#L20)

The list of conditions to be checked.

if is a StorageElementType or a [PixiVNJsonValueGet](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet):

* if is a array or object, the condition is true if not empty
* if is a string, the condition is true if not empty
* if is a number, the condition is true if not zero
* if is a boolean, the condition is true if true
* if is null or undefined, the condition is false

***

### else? [#else]

\> `optional` &#x2A;*else?**: `PixiVNJsonIfElse`\<`Then`> | `Then`

Defined in: [src/schema/PixiVNJsonIfElse.ts:28](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonIfElse.ts#L28)

The value to be returned if the condition is false.

***

### then [#then-1]

\> **then**: `PixiVNJsonIfElse`\<`Then`> | `Then`

Defined in: [src/schema/PixiVNJsonIfElse.ts:24](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonIfElse.ts#L24)

The value to be returned if the condition is true.

***

### type [#type]

\> **type**: `"ifelse"`

Defined in: [src/schema/PixiVNJsonIfElse.ts:9](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonIfElse.ts#L9)


# Type Alias: PixiVNJsonAnimateBase<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateBase)



\> **PixiVNJsonAnimateBase**\<`T`> = `object`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:14](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L14)

Animates one or more canvas elements simultaneously using keyframe-based animation.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `CanvasBaseInterface`\<`any`>

## Properties [#properties]

### alias [#alias]

\> **alias**: `string` | `string`\[]

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:19](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L19)

Alias (or list of aliases) of the canvas elements to animate.

***

### keyframes [#keyframes]

\> **keyframes**: `KeyframesType`\<`T`>

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L23)

The keyframes that define the animation values over time.

***

### options? [#options]

\> `optional` &#x2A;*options?**: `AnimationOptions`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:27](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L27)

Additional options controlling the animation (duration, easing, repeat, etc.).

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `UPDATE_PRIORITY`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L31)

Pixi.js update priority for this animation ticker callback.

***

### type [#type]

\> **type**: `"animate"`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:15](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L15)


# Type Alias: PixiVNJsonAnimateSequence<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateSequence)



\> **PixiVNJsonAnimateSequence**\<`T`> = `object`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:36](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L36)

Animates a canvas element using a sequence of segments (timeline-based animation).

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `CanvasBaseInterface`\<`any`>

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:41](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L41)

Alias of the canvas element to animate.

***

### options? [#options]

\> `optional` &#x2A;*options?**: `SequenceOptions`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:49](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L49)

Additional options controlling the sequence playback.

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `UPDATE_PRIORITY`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:53](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L53)

Pixi.js update priority for this animation ticker callback.

***

### sequence [#sequence]

\> **sequence**: (`ObjectSegment`\<`T`> | `ObjectSegmentWithTransition`\<`T`>)\[]

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:45](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L45)

Ordered list of animation segments, each optionally including a transition.

***

### type [#type]

\> **type**: `"animate-sequence"`

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:37](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L37)


# Type Alias: PixiVNJsonArithmeticOperations (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations)



\> **PixiVNJsonArithmeticOperations** = [`PixiVNJsonArithmeticOperationsArithmeticSingle`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmeticSingle) | [`PixiVNJsonArithmeticOperationsArithmetic`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonArithmeticOperationsArithmetic)

Defined in: [src/schema/PixiVNJsonArithmeticOperations.ts:71](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonArithmeticOperations.ts#L71)

Arithmetic operations for the PixiVNJson


# Type Alias: PixiVNJsonCanvas (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvas)



\> **PixiVNJsonCanvas** = [`PixiVNJsonCanvasShow`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasShow) | [`PixiVNJsonCanvasEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEdit) | [`PixiVNJsonCanvasRemove`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasRemove) | [`PixiVNJsonCanvasClear`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasClear) | [`PixiVNJsonVideoPauseResume`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoPauseResume) | `PixiVNJsonAssetsLoad` | [`PixiVNJsonCanvasAnimate`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasAnimate) | [`PixiVNJsonCanvasEffect`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEffect)

Defined in: [src/schema/PixiVNJsonCanvas.ts:226](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L226)

Union of all canvas operations — show, edit, remove, clear, animate, apply effects, and asset
loading.


# Type Alias: PixiVNJsonCanvasAnimate<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasAnimate)



\> **PixiVNJsonCanvasAnimate**\<`T`> = [`PixiVNJsonAnimateBase`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateBase)\<`T`> | [`PixiVNJsonAnimateSequence`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonAnimateSequence)\<`T`>

Defined in: [src/schema/PixiVNJsonCanvasAnimate.ts:59](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasAnimate.ts#L59)

Union of all canvas animation operations — keyframe-based or sequence-based.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `CanvasBaseInterface`\<`any`> = `ImageSprite`


# Type Alias: PixiVNJsonCanvasClear (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasClear)



\> **PixiVNJsonCanvasClear** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:181](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L181)

Removes every element currently on the canvas.

## Properties [#properties]

### operationType [#operationtype]

\> **operationType**: `"clear"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:183](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L183)

***

### type [#type]

\> **type**: `"canvas"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:182](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L182)


# Type Alias: PixiVNJsonCanvasEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEdit)



\> **PixiVNJsonCanvasEdit** = [`PixiVNJsonImageEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageEdit) | [`PixiVNJsonVideoEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoEdit) | [`PixiVNJsonImageContainerEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageContainerEdit) | [`PixiVNJsonTextEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonTextEdit) | [`PixiVNJsonUnknownEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnknownEdit)\<`ImageSpriteMemory` | `VideoSpriteMemory` | `ContainerMemory` | `TextMemory`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:215](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L215)

Union of all canvas-element edit operations.


# Type Alias: PixiVNJsonCanvasEffect (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasEffect)



\> **PixiVNJsonCanvasEffect** = `PixiVNJsonEffectShake`

Defined in: [src/schema/PixiVNJsonCanvasEffect.ts:26](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvasEffect.ts#L26)

Union of all canvas visual effects.


# Type Alias: PixiVNJsonCanvasImageContainerShow (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageContainerShow)



\> **PixiVNJsonCanvasImageContainerShow** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:44](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L44)

Shows an image container (a group of layered images) on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:50](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L50)

Unique identifier (alias) used to reference this element on the canvas.

***

### operationType [#operationtype]

\> **operationType**: `"show"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:46](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L46)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `ImageContainerOptions`\<`ImageSprite`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:58](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L58)

Display options for the image container.

***

### transition? [#transition]

\> `optional` &#x2A;*transition?**: [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)

Defined in: [src/schema/PixiVNJsonCanvas.ts:62](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L62)

Optional transition effect applied when the element appears on screen.

***

### type [#type]

\> **type**: `"imagecontainer"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:45](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L45)

***

### urls [#urls]

\> **urls**: `string`\[]

Defined in: [src/schema/PixiVNJsonCanvas.ts:54](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L54)

The ordered list of image URLs that compose the container layers.


# Type Alias: PixiVNJsonCanvasImageVideoShow (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageVideoShow)



\> **PixiVNJsonCanvasImageVideoShow** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:20](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L20)

Shows an image or video asset on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:26](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L26)

Unique identifier (alias) used to reference this element on the canvas.

***

### operationType [#operationtype]

\> **operationType**: `"show"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:22](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L22)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `ImageSpriteOptions`

Defined in: [src/schema/PixiVNJsonCanvas.ts:35](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L35)

Display options (position, scale, alpha, etc.) for the image or video sprite.

***

### transition? [#transition]

\> `optional` &#x2A;*transition?**: [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)

Defined in: [src/schema/PixiVNJsonCanvas.ts:39](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L39)

Optional transition effect applied when the element appears on screen.

***

### type [#type]

\> **type**: `"image"` | `"video"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:21](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L21)

***

### url? [#url]

\> `optional` &#x2A;*url?**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L31)

The url of the image or video.
If the url is not provided, the url will be set to the alias.


# Type Alias: PixiVNJsonCanvasRemove (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasRemove)



\> **PixiVNJsonCanvasRemove** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:166](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L166)

Removes a canvas element from the stage, optionally with a transition.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:172](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L172)

Alias of the canvas element to remove.

***

### operationType [#operationtype]

\> **operationType**: `"remove"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:168](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L168)

***

### transition? [#transition]

\> `optional` &#x2A;*transition?**: [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)

Defined in: [src/schema/PixiVNJsonCanvas.ts:176](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L176)

Optional transition effect applied while the element disappears.

***

### type [#type]

\> **type**: `"image"` | `"video"` | `"imagecontainer"` | `"canvaselement"` | `"text"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:167](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L167)


# Type Alias: PixiVNJsonCanvasShow (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasShow)



\> **PixiVNJsonCanvasShow** = [`PixiVNJsonCanvasImageContainerShow`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageContainerShow) | [`PixiVNJsonCanvasImageVideoShow`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasImageVideoShow) | [`PixiVNJsonCanvasTextShow`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasTextShow)

Defined in: [src/schema/PixiVNJsonCanvas.ts:208](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L208)


# Type Alias: PixiVNJsonCanvasTextShow (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvasTextShow)



\> **PixiVNJsonCanvasTextShow** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:67](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L67)

Shows a text element on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:73](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L73)

Unique identifier (alias) used to reference this element on the canvas.

***

### operationType [#operationtype]

\> **operationType**: `"show"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:69](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L69)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `TextOptions`

Defined in: [src/schema/PixiVNJsonCanvas.ts:81](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L81)

Display options (font, style, position, etc.) for the text element.

***

### text [#text]

\> **text**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:77](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L77)

The string content to display.

***

### transition? [#transition]

\> `optional` &#x2A;*transition?**: [`PixiVNJsonMediaTransiotions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)

Defined in: [src/schema/PixiVNJsonCanvas.ts:85](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L85)

Optional transition effect applied when the element appears on screen.

***

### type [#type]

\> **type**: `"text"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:68](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L68)


# Type Alias: PixiVNJsonChoice (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoice)



\> **PixiVNJsonChoice** = `object`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:14](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L14)

A player-presentable choice in a menu.

## Properties [#properties]

### autoSelect? [#autoselect]

\> `optional` &#x2A;*autoSelect?**: `boolean`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:42](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L42)

If this is true and if is the only choice, it will be automatically selected, and call/jump to the label.

***

### label [#label]

\> **label**: `string`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:22](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L22)

The label id to be opened.

***

### oneTime? [#onetime]

\> `optional` &#x2A;*oneTime?**: `boolean`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:34](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L34)

If this is true, the choice can only be made once.

***

### onlyHaveNoChoice? [#onlyhavenochoice]

\> `optional` &#x2A;*onlyHaveNoChoice?**: `boolean`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:38](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L38)

If this is true, the choice can see only if there are no other choices. For example, all choices are one-time choices and they are already selected.

***

### props [#props]

\> **props**: `StorageObjectType`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:30](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L30)

The properties to be passed to the label.

***

### text [#text]

\> **text**: [`PixiVNJsonDialogText`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogText)

Defined in: [src/schema/PixiVNJsonLabelStep.ts:18](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L18)

The text to be displayed.

***

### type [#type]

\> **type**: `LabelRunModeType`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:26](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L26)

Label opening mode


# Type Alias: PixiVNJsonChoiceGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoiceGet)



\> **PixiVNJsonChoiceGet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:51](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L51)

Retrieves the number of times a specific choice has been selected.

## Properties [#properties]

### index [#index]

\> **index**: `number`

Defined in: [src/schema/PixiVNJsonValue.ts:57](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L57)

index of the choice

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"get"`

Defined in: [src/schema/PixiVNJsonValue.ts:53](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L53)

***

### storageType [#storagetype]

\> **storageType**: `"choice"`

Defined in: [src/schema/PixiVNJsonValue.ts:61](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L61)

If it is a choice, the value will be get with the function narration.getTimesChoiceOpened

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:52](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L52)


# Type Alias: PixiVNJsonChoices (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoices)



\> **PixiVNJsonChoices** = ([`PixiVNJsonChoice`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoice) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<[`PixiVNJsonChoice`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoice)>)\[]

Defined in: [src/schema/PixiVNJsonLabelStep.ts:47](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L47)

A list of choices (possibly conditional) that are shown to the player as a menu.


# Type Alias: PixiVNJsonComparation (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparation)



\> **PixiVNJsonComparation** = `object`

Defined in: [src/schema/PixiVNJsonConditions.ts:22](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L22)

Comparation for PixiVNJson.
In this comparation, the values to be converted to string and compared.

## Properties [#properties]

### leftValue [#leftvalue]

\> **leftValue**: `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)

Defined in: [src/schema/PixiVNJsonConditions.ts:27](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L27)

Left value of the comparation

***

### operator [#operator]

\> **operator**: [`PixiVNJsonComparationOperatorsType`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparationOperatorsType)

Defined in: [src/schema/PixiVNJsonConditions.ts:35](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L35)

Operator of the comparation

***

### rightValue [#rightvalue]

\> **rightValue**: `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)

Defined in: [src/schema/PixiVNJsonConditions.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L31)

Right value of the comparation

***

### type [#type]

\> **type**: `"compare"`

Defined in: [src/schema/PixiVNJsonConditions.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L23)


# Type Alias: PixiVNJsonComparationOperatorsType (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparationOperatorsType)



\> **PixiVNJsonComparationOperatorsType** = `"=="` | `"!="` | `"<"` | `"<="` | `">"` | `">="` | `"CONTAINS"`

Defined in: [src/schema/PixiVNJsonConditions.ts:16](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L16)

Supported comparison operators.

* `"=="` equal
* `"!="` not equal
* `"<"` less than
* `"<="` less than or equal
* `">"` greater than
* `">="` greater than or equal
* `"CONTAINS"` checks whether the left string/array contains the right value, if left and right are arrays, checks if all items in right are included in left


# Type Alias: PixiVNJsonConditionalOperation (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalOperation)



\> **PixiVNJsonConditionalOperation** = [`PixiVNJsonOperation`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperation) | [`PixiVNJsonIfElse`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse)\<[`PixiVNJsonOperation`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperation)> | [`PixiVNJsonOperationString`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperationString)

Defined in: [src/schema/PixiVNJsonOperations.ts:49](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonOperations.ts#L49)

A conditional operation — either a plain operation, an if-else that resolves to one,
or an operation-string (string interpolation expression).


# Type Alias: PixiVNJsonConditionalResultToCombine<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalResultToCombine)



\> **PixiVNJsonConditionalResultToCombine**\<`T`> = `object`

Defined in: [src/schema/PixiVNJsonConditionalResultToCombine.ts:8](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalResultToCombine.ts#L8)

This element is used in case a [PixiVNJsonConditionalStatements](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements) gives a result that must be combined with another calculated through other [PixiVNJsonConditionalStatements](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements).
in case this possibility is not managed, it will be taken into consideration [PixiVNJsonConditionalResultToCombine.firstItem](#firstitem)

## Type Parameters [#type-parameters]

### T [#t]

`T`

## Properties [#properties]

### combine [#combine]

\> **combine**: `"cross"` | `"union"`

Defined in: [src/schema/PixiVNJsonConditionalResultToCombine.ts:15](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalResultToCombine.ts#L15)

Defines how the two results are combined:

* `"cross"` — cartesian product / pairwise combination of both results
* `"union"` — concatenation / merge of both results into a single collection

***

### firstItem? [#firstitem]

\> `optional` &#x2A;*firstItem?**: `T`

Defined in: [src/schema/PixiVNJsonConditionalResultToCombine.ts:19](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalResultToCombine.ts#L19)

The first (primary) result item, used as a fallback if the second conditional produces no result.

***

### secondConditionalItem? [#secondconditionalitem]

\> `optional` &#x2A;*secondConditionalItem?**: [`PixiVNJsonStepSwitchElementType`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementType)\<`T`>\[]

Defined in: [src/schema/PixiVNJsonConditionalResultToCombine.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalResultToCombine.ts#L23)

The second conditional item(s) whose result will be combined with [firstItem](#firstitem).

***

### type [#type]

\> **type**: `"resulttocombine"`

Defined in: [src/schema/PixiVNJsonConditionalResultToCombine.ts:9](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalResultToCombine.ts#L9)


# Type Alias: PixiVNJsonConditionalStatements<Then> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)



\> **PixiVNJsonConditionalStatements**\<`Then`> = [`PixiVNJsonStepSwitch`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitch)\<`Then`> | [`PixiVNJsonIfElse`](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse)\<`Then` | `PixiVNJsonConditionalStatements`\<`Then`> | [`PixiVNJsonConditionalResultToCombine`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalResultToCombine)\<`Then`>>

Defined in: [src/schema/PixiVNJsonConditionalStatements.ts:12](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditionalStatements.ts#L12)

A conditional statement that evaluates to a value of type `Then`.
It can be either:

* a [PixiVNJsonStepSwitch](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitch) — selects a result from a list based on a strategy (random, sequential, loop)
* a [PixiVNJsonIfElse](/jsdoc/pixi-vn-json/index/interfaces/PixiVNJsonIfElse) — evaluates a condition and returns the matching branch result,
  which may itself be another conditional or a [PixiVNJsonConditionalResultToCombine](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalResultToCombine)

## Type Parameters [#type-parameters]

### Then [#then]

`Then`


# Type Alias: PixiVNJsonConditions (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)



\> **PixiVNJsonConditions** = [`PixiVNJsonComparation`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparation) | `PixiVNJsonValueCondition` | [`PixiVNJsonUnionCondition`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnionCondition) | [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations)

Defined in: [src/schema/PixiVNJsonConditions.ts:50](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonConditions.ts#L50)

Union of all condition types supported by PixiVNJson:

* [PixiVNJsonComparation](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparation) — binary comparison between two values
* PixiVNJsonValueCondition — truthy/falsy check on a plain value
* [PixiVNJsonUnionCondition](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnionCondition) — logical AND, OR, or NOT of other conditions
* [PixiVNJsonArithmeticOperations](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) — arithmetic result used as a boolean (non-zero = true)


# Type Alias: PixiVNJsonDialog<Text> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialog)



\> **PixiVNJsonDialog**\<`Text`> = \{ `character`: `string`; `text`: `Text`; } | `Text`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:71](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L71)

A dialogue line, optionally attributed to a character.
When a plain `Text` value is used, no character attribution is included.

## Type Parameters [#type-parameters]

### Text [#text]

`Text` = `string`

## Union Members [#union-members]

### Type Literal [#type-literal]

\{ `character`: `string`; `text`: `Text`; }

#### character [#character]

\> **character**: `string`

The character id that will speak.

#### text [#text-1]

\> **text**: `Text`

The text to be displayed.

***

`Text`


# Type Alias: PixiVNJsonDialogText (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogText)



\> **PixiVNJsonDialogText** = `string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | `string`\[]> | (`string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | `string`\[]>)\[]

Defined in: [src/schema/PixiVNJsonLabelStep.ts:57](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L57)

The text content of a dialogue line.
Can be a plain string, a dynamic value-get, a conditional expression, or an array of any of these
(which will be concatenated into a single string at runtime).


# Type Alias: PixiVNJsonDialogue (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogue)



\> **PixiVNJsonDialogue** = `object`

Defined in: [src/schema/PixiVNJsonNarration.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L23)

Clears (resets) the current dialogue state.
This is typically used to wipe any displayed text before showing new content.

## Properties [#properties]

### operationType [#operationtype]

\> **operationType**: `"clean"`

Defined in: [src/schema/PixiVNJsonNarration.ts:25](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L25)

***

### type [#type]

\> **type**: `"dialogue"`

Defined in: [src/schema/PixiVNJsonNarration.ts:24](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L24)


# Type Alias: PixiVNJsonFunction (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonFunction)



\> **PixiVNJsonFunction** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:89](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L89)

Invokes a named function and returns its result.
Functions are registered in the Pixi'VN runtime and can receive typed arguments.

## Properties [#properties]

### args [#args]

\> **args**: ([`PixiVNJsonConditions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions) | `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations))\[]

Defined in: [src/schema/PixiVNJsonValue.ts:99](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L99)

Arguments to pass to the function. Each argument can be a condition, a raw value,
a value-get operation, or an arithmetic expression.

***

### functionName [#functionname]

\> **functionName**: `string`

Defined in: [src/schema/PixiVNJsonValue.ts:94](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L94)

The name of the registered function to call.

***

### type [#type]

\> **type**: `"function"`

Defined in: [src/schema/PixiVNJsonValue.ts:90](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L90)


# Type Alias: PixiVNJsonImageContainerEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageContainerEdit)



\> **PixiVNJsonImageContainerEdit** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:120](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L120)

Edits the properties of an existing image container on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:126](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L126)

Alias of the canvas element to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:122](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L122)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `Partial`\<`ImageContainerMemory`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:130](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L130)

Partial memory/state properties to update on the image container.

***

### type [#type]

\> **type**: `"imagecontainer"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:121](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L121)


# Type Alias: PixiVNJsonImageEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonImageEdit)



\> **PixiVNJsonImageEdit** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:90](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L90)

Edits the properties of an existing image sprite on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:96](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L96)

Alias of the canvas element to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:92](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L92)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `Partial`\<`ImageSpriteMemory`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:100](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L100)

Partial memory/state properties to update on the image sprite.

***

### type [#type]

\> **type**: `"image"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:91](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L91)


# Type Alias: PixiVNJsonInputRequest (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonInputRequest)



\> **PixiVNJsonInputRequest** = `object`

Defined in: [src/schema/PixiVNJsonNarration.ts:5](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L5)

Requests user input during the narrative.
When this operation is encountered, the engine pauses and waits for the player to provide a value.

## Properties [#properties]

### defaultValue? [#defaultvalue]

\> `optional` &#x2A;*defaultValue?**: `any`

Defined in: [src/schema/PixiVNJsonNarration.ts:16](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L16)

A default value that will be used if the player does not provide any input.

***

### operationType [#operationtype]

\> **operationType**: `"request"`

Defined in: [src/schema/PixiVNJsonNarration.ts:7](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L7)

***

### type [#type]

\> **type**: `"input"`

Defined in: [src/schema/PixiVNJsonNarration.ts:6](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L6)

***

### valueType? [#valuetype]

\> `optional` &#x2A;*valueType?**: `string`

Defined in: [src/schema/PixiVNJsonNarration.ts:12](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L12)

The expected value type for the input (e.g. `"string"`, `"number"`, `"boolean"`).
Used by the engine to validate or cast the player's answer.


# Type Alias: PixiVNJsonLabelGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelGet)



\> **PixiVNJsonLabelGet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:36](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L36)

Retrieves the number of times a label has been opened.

## Properties [#properties]

### label [#label]

\> **label**: `string`

Defined in: [src/schema/PixiVNJsonValue.ts:42](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L42)

Id of the label

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"get"`

Defined in: [src/schema/PixiVNJsonValue.ts:38](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L38)

***

### storageType [#storagetype]

\> **storageType**: `"label"`

Defined in: [src/schema/PixiVNJsonValue.ts:46](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L46)

If it is a label, the value will be get with the function narration.getTimesLabelOpened

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:37](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L37)


# Type Alias: PixiVNJsonLabelStep (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)



\> **PixiVNJsonLabelStep** = `object`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:116](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L116)

Steps of a label.
Order of operations:

1. run all [PixiVNJsonLabelStep.operations](#operations)
2. set [PixiVNJsonLabelStep.choices](#choices), [PixiVNJsonLabelStep.dialogue](#dialogue), [PixiVNJsonLabelStep.glueEnabled](#glueenabled)
3. open [PixiVNJsonLabelStep.labelToOpen](#labeltoopen)
4. go to next step if [PixiVNJsonLabelStep.goNextStep](#gonextstep) is true
5. end the label if [PixiVNJsonLabelStep.end](#end) is "label\_end"

## Properties [#properties]

### choices? [#choices]

\> `optional` &#x2A;*choices?**: [`PixiVNJsonChoices`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoices) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<[`PixiVNJsonChoices`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoices)>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:124](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L124)

Variable used to display a choice menu.

***

### conditionalStep? [#conditionalstep]

\> `optional` &#x2A;*conditionalStep?**: [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`PixiVNJsonLabelStep` | `PixiVNJsonLabelStep`\[]>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:157](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L157)

If set, this step is replaced by the result of evaluating the given conditional statement.
Allows an entire step to be chosen at runtime based on a condition or step-switch strategy.

***

### dialogue? [#dialogue]

\> `optional` &#x2A;*dialogue?**: [`PixiVNJsonDialog`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialog)\<[`PixiVNJsonDialogText`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogText)> | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<[`PixiVNJsonDialog`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialog)\<[`PixiVNJsonDialogText`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogText)>>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:128](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L128)

Variable used to display a dialog.

***

### end? [#end]

\> `optional` &#x2A;*end?**: `"game_end"` | `"label_end"` | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`"game_end"` | `"label_end"`>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:152](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L152)

Variable used to end some elements of the narrative.

* game\_end: ends the game
* label\_end: ends the label

***

### glueEnabled? [#glueenabled]

\> `optional` &#x2A;*glueEnabled?**: `boolean` | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`boolean`>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:135](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L135)

This variable is used to add the next dialog text into the current dialog memory.
This value was added to introduce Ink Glue functionality [https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#glue](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md#glue)

***

### goNextStep? [#gonextstep]

\> `optional` &#x2A;*goNextStep?**: `boolean` | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`boolean`>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:146](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L146)

If is true, the next step will be executed automatically.

***

### labelToOpen? [#labeltoopen]

\> `optional` &#x2A;*labelToOpen?**: [`PixiVNJsonLabelToOpen`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<[`PixiVNJsonLabelToOpen`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen)> | ([`PixiVNJsonLabelToOpen`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<[`PixiVNJsonLabelToOpen`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen)>)\[]

Defined in: [src/schema/PixiVNJsonLabelStep.ts:139](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L139)

Variable used to open a label.

***

### operations? [#operations]

\> `optional` &#x2A;*operations?**: [`PixiVNJsonConditionalOperation`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalOperation)\[]

Defined in: [src/schema/PixiVNJsonLabelStep.ts:120](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L120)

Operations to execute at the start of this step (storage writes, canvas updates, sound, etc.).


# Type Alias: PixiVNJsonLabelToOpen<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelToOpen)



\> **PixiVNJsonLabelToOpen**\<`T`> = `object`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:87](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L87)

Describes a label that should be opened (called or jumped to) during a step.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `object` = `object`

## Properties [#properties]

### label [#label]

\> **label**: `string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet)

Defined in: [src/schema/PixiVNJsonLabelStep.ts:91](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L91)

The id of the label to open.

***

### params? [#params]

\> `optional` &#x2A;*params?**: `unknown`\[]

Defined in: [src/schema/PixiVNJsonLabelStep.ts:104](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L104)

**It is not recommended to use it, use it only if necessary**. The parameters to be passed to the label. If you want to pass an object, use the [PixiVNJsonLabelToOpen.props](#props) attribute.
"params" attribute will be stored in the temp storage with the key: [PIXIVNJSON\_PARAM\_ID](/jsdoc/pixi-vn-json/index/variables/PIXIVNJSON_PARAM_ID) + (narration.openedLabels.length - 1).

***

### props? [#props]

\> `optional` &#x2A;*props?**: `StepLabelPropsType`\<`T`>

Defined in: [src/schema/PixiVNJsonLabelStep.ts:99](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L99)

The properties to be passed to the label. if you don't want to pass a object, but a list of parameters, you can use the [PixiVNJsonLabelToOpen.params](#params) attribute.

***

### type [#type]

\> **type**: `LabelRunModeType`

Defined in: [src/schema/PixiVNJsonLabelStep.ts:95](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabelStep.ts#L95)

Label opening mode


# Type Alias: PixiVNJsonLabels (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabels)



\> **PixiVNJsonLabels** = `object`

Defined in: [src/schema/PixiVNJsonLabels.ts:6](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonLabels.ts#L6)

Collection of labels to be used in the narrative.

## Index Signature [#index-signature]

\[`labelId`: `string`]: [`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)\[]


# Type Alias: PixiVNJsonLogicGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLogicGet)



\> **PixiVNJsonLogicGet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:66](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L66)

Retrieves a value from the logic/arithmetic layer (result of a computation or condition).

## Properties [#properties]

### operation [#operation]

\> **operation**: [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) | [`PixiVNJsonConditions`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions)

Defined in: [src/schema/PixiVNJsonValue.ts:72](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L72)

The arithmetic or conditional operation whose result is the retrieved value.

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"get"`

Defined in: [src/schema/PixiVNJsonValue.ts:68](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L68)

***

### storageType [#storagetype]

\> **storageType**: `"logic"`

Defined in: [src/schema/PixiVNJsonValue.ts:73](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L73)

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:67](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L67)


# Type Alias: PixiVNJsonMediaTransiotions (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonMediaTransiotions)



\> **PixiVNJsonMediaTransiotions** = `DissolveTransition` | `FadeTransition` | `MoveInOutTransition` | `ZoomInOutTransition` | `PushInOutTransition`

Defined in: [src/schema/PixiVNJsonMediaTransiotions.ts:88](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonMediaTransiotions.ts#L88)

Union of all supported canvas media transitions.


# Type Alias: PixiVNJsonNarration (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonNarration)



\> **PixiVNJsonNarration** = [`PixiVNJsonDialogue`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonDialogue) | [`PixiVNJsonInputRequest`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonInputRequest)

Defined in: [src/schema/PixiVNJsonNarration.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonNarration.ts#L31)

Narration operation — either a dialogue clear or a user-input request.


# Type Alias: PixiVNJsonOnlyStorageSet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOnlyStorageSet)



\> **PixiVNJsonOnlyStorageSet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:110](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L110)

Sets a value in either the persistent storage or the temporary (session) storage.

## Properties [#properties]

### key [#key]

\> **key**: `string`

Defined in: [src/schema/PixiVNJsonValue.ts:116](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L116)

Key of the storage

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"set"`

Defined in: [src/schema/PixiVNJsonValue.ts:112](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L112)

***

### storageType [#storagetype]

\> **storageType**: `"storage"` | `"tempstorage"`

Defined in: [src/schema/PixiVNJsonValue.ts:128](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L128)

Type of the storage, if it is a flagStorage or a storage.

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:111](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L111)

***

### value [#value]

\> **value**: `StorageElementType` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonArithmeticOperations`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonArithmeticOperations) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`StorageElementType`>

Defined in: [src/schema/PixiVNJsonValue.ts:120](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L120)

Value to be set in the storage


# Type Alias: PixiVNJsonOperation (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperation)



\> **PixiVNJsonOperation** = [`PixiVNJsonValueSet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueSet) | [`PixiVNJsonCanvas`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonCanvas) | [`PixiVNJsonSound`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSound) | [`PixiVNJsonNarration`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonNarration) | [`PixiVNJsonFunction`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonFunction) & `object`

Defined in: [src/schema/PixiVNJsonOperations.ts:32](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonOperations.ts#L32)

A single resolved operation — a value set, canvas operation, sound operation,
narration operation, or function call — optionally annotated with an origin string.

## Type Declaration [#type-declaration]

### $origin? [#origin]

\> `optional&#x60; &#x2A;*$origin?**: `string`

This value is used by the system to know where this operation is from, for example, if is generated from a string operation.


# Type Alias: PixiVNJsonOperationString (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperationString)



\> **PixiVNJsonOperationString** = `object`

Defined in: [src/schema/PixiVNJsonOperations.ts:16](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonOperations.ts#L16)

An operation string that holds a list of string/value fragments to be concatenated at runtime.
Used internally to represent string interpolation expressions before they are fully resolved.

## Properties [#properties]

### type [#type]

\> **type**: `"operationtoconvert"`

Defined in: [src/schema/PixiVNJsonOperations.ts:17](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonOperations.ts#L17)

***

### values [#values]

\> **values**: (`string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet) | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`string` | [`PixiVNJsonValueGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet)>)\[]

Defined in: [src/schema/PixiVNJsonOperations.ts:21](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonOperations.ts#L21)

The ordered list of string fragments and/or value-get expressions to concatenate.


# Type Alias: PixiVNJsonParamGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonParamGet)



\> **PixiVNJsonParamGet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:23](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L23)

## Properties [#properties]

### key [#key]

\> **key**: `number`

Defined in: [src/schema/PixiVNJsonValue.ts:29](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L29)

Index of the parameter in the params array.

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"get"`

Defined in: [src/schema/PixiVNJsonValue.ts:25](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L25)

***

### storageType [#storagetype]

\> **storageType**: `"params"`

Defined in: [src/schema/PixiVNJsonValue.ts:30](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L30)

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:24](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L24)


# Type Alias: PixiVNJsonSound (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSound)



\> **PixiVNJsonSound** = [`PixiVNJsonSoundPlay`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlay) | [`PixiVNJsonSoundRemove`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundRemove) | [`PixiVNJsonSoundPauseResume`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPauseResume) | [`PixiVNJsonSoundEdit`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEdit)

Defined in: [src/schema/PixiVNJsonSound.ts:78](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L78)

Union of all sound operations — play, stop, pause/resume, and edit.


# Type Alias: PixiVNJsonSoundEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEdit)



\> **PixiVNJsonSoundEdit** = `object`

Defined in: [src/schema/PixiVNJsonSound.ts:62](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L62)

Edits the properties of a currently playing sound (volume, speed, muted, loop, etc.).

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonSound.ts:68](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L68)

Alias of the sound to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonSound.ts:64](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L64)

***

### props [#props]

\> **props**: [`PixiVNJsonSoundEditProps`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEditProps)

Defined in: [src/schema/PixiVNJsonSound.ts:72](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L72)

Partial set of properties to apply to the sound.

***

### type [#type]

\> **type**: `"sound"`

Defined in: [src/schema/PixiVNJsonSound.ts:63](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L63)


# Type Alias: PixiVNJsonSoundEditProps (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundEditProps)



\> **PixiVNJsonSoundEditProps** = `Partial`\<`Pick`\<`MediaInterface`, `"speed"` | `"muted"` | `"loop"` | `"paused"`> & `Pick`\<`SoundPlayOptionsWithChannel`, `"volume"`>>

Defined in: [src/schema/PixiVNJsonSound.ts:56](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L56)

Partial set of sound properties that can be applied when editing a currently playing sound.


# Type Alias: PixiVNJsonSoundPauseResume (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPauseResume)



\> **PixiVNJsonSoundPauseResume** = \{ `alias`: `string`; `operationType`: `"pause"` | `"resume"`; `type`: `"sound"` | `"channel"`; } | \{ `operationType`: `"pause"` | `"resume"` | `"stop"`; `type`: `"all"`; }

Defined in: [src/schema/PixiVNJsonSound.ts:40](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L40)

Pauses or resumes a sound, a channel, or all audio.

## Union Members [#union-members]

### Type Literal [#type-literal]

\{ `alias`: `string`; `operationType`: `"pause"` | `"resume"`; `type`: `"sound"` | `"channel"`; }

#### alias [#alias]

\> **alias**: `string`

Alias of the sound or channel to pause/resume.

#### operationType [#operationtype]

\> **operationType**: `"pause"` | `"resume"`

#### type [#type]

\> **type**: `"sound"` | `"channel"`

***

### Type Literal [#type-literal-1]

\{ `operationType`: `"pause"` | `"resume"` | `"stop"`; `type`: `"all"`; }


# Type Alias: PixiVNJsonSoundPlay (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlay)



\> **PixiVNJsonSoundPlay** = `object`

Defined in: [src/schema/PixiVNJsonSound.ts:10](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L10)

Starts playback of a sound asset.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonSound.ts:16](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L16)

Unique identifier (alias) used to reference this sound.

***

### operationType [#operationtype]

\> **operationType**: `"play"`

Defined in: [src/schema/PixiVNJsonSound.ts:12](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L12)

***

### props? [#props]

\> `optional` &#x2A;*props?**: [`PixiVNJsonSoundPlayProps`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlayProps)

Defined in: [src/schema/PixiVNJsonSound.ts:24](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L24)

Playback options such as volume, loop, channel, and start offset.

***

### type [#type]

\> **type**: `"sound"`

Defined in: [src/schema/PixiVNJsonSound.ts:11](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L11)

***

### url? [#url]

\> `optional` &#x2A;*url?**: `string`

Defined in: [src/schema/PixiVNJsonSound.ts:20](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L20)

URL of the sound file. If omitted, the alias is used as the URL.


# Type Alias: PixiVNJsonSoundPlayProps (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundPlayProps)



\> **PixiVNJsonSoundPlayProps** = `SoundPlayOptionsWithChannel`

Defined in: [src/schema/PixiVNJsonSound.ts:6](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L6)

Playback options such as volume, loop, channel, and start offset.


# Type Alias: PixiVNJsonSoundRemove (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonSoundRemove)



\> **PixiVNJsonSoundRemove** = `object`

Defined in: [src/schema/PixiVNJsonSound.ts:29](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L29)

Stops a playing sound and removes it from the audio context.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonSound.ts:35](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L35)

Alias of the sound to stop.

***

### operationType [#operationtype]

\> **operationType**: `"stop"`

Defined in: [src/schema/PixiVNJsonSound.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L31)

***

### type [#type]

\> **type**: `"sound"`

Defined in: [src/schema/PixiVNJsonSound.ts:30](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonSound.ts#L30)


# Type Alias: PixiVNJsonStepSwitch<Then> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitch)



\> **PixiVNJsonStepSwitch**\<`Then`> = `PixiVNJsonRandom`\<`Then`> | `PixiVNJsonSequential`\<`Then`> | `PixiVNJsonLoop`\<`Then`> | `PixiVNJsonSequentialRandom`\<`Then`>

Defined in: [src/schema/PixiVNJsonStepSwitch.ts:89](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonStepSwitch.ts#L89)

A step-switch selects one element from a list using a defined strategy (random, sequential, loop, or sequential-random).

## Type Parameters [#type-parameters]

### Then [#then]

`Then`


# Type Alias: PixiVNJsonStepSwitchElementType<Then> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementType)



\> **PixiVNJsonStepSwitchElementType**\<`Then`> = `Then` | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`Then`> | [`PixiVNJsonConditionalResultToCombine`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalResultToCombine)\<`Then`>

Defined in: [src/schema/PixiVNJsonStepSwitch.ts:8](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonStepSwitch.ts#L8)

A single element that can appear inside a step-switch, which may be a direct value,
a conditional statement, or a result-to-combine.

## Type Parameters [#type-parameters]

### Then [#then]

`Then`


# Type Alias: PixiVNJsonStepSwitchElementsType<Then> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementsType)



\> **PixiVNJsonStepSwitchElementsType**\<`Then`> = [`PixiVNJsonStepSwitchElementType`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStepSwitchElementType)\<`Then`>\[] | [`PixiVNJsonConditionalStatements`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditionalStatements)\<`Then`\[]>

Defined in: [src/schema/PixiVNJsonStepSwitch.ts:15](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonStepSwitch.ts#L15)

The elements collection of a step-switch — either a plain array or a conditional that produces an array.

## Type Parameters [#type-parameters]

### Then [#then]

`Then`


# Type Alias: PixiVNJsonStorageGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStorageGet)



\> **PixiVNJsonStorageGet** = `object`

Defined in: [src/schema/PixiVNJsonValue.ts:9](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L9)

Retrieves a value from the persistent storage, flag storage, or temporary storage.

## Properties [#properties]

### key [#key]

\> **key**: `string`

Defined in: [src/schema/PixiVNJsonValue.ts:15](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L15)

Key of the storage

***

### storageOperationType [#storageoperationtype]

\> **storageOperationType**: `"get"`

Defined in: [src/schema/PixiVNJsonValue.ts:11](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L11)

***

### storageType [#storagetype]

\> **storageType**: `"storage"` | `"flagStorage"` | `"tempstorage"`

Defined in: [src/schema/PixiVNJsonValue.ts:20](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L20)

Type of the storage, if it is a flagStorage or a storage.
If it is a flagStorage, the value will be get with the function getFlag

***

### type [#type]

\> **type**: `"value"`

Defined in: [src/schema/PixiVNJsonValue.ts:10](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L10)


# Type Alias: PixiVNJsonTextEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonTextEdit)



\> **PixiVNJsonTextEdit** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:135](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L135)

Edits the properties of an existing text element on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:141](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L141)

Alias of the canvas element to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:137](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L137)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `Partial`\<`TextMemory`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:145](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L145)

Partial memory/state properties to update on the text element.

***

### type [#type]

\> **type**: `"text"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:136](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L136)


# Type Alias: PixiVNJsonUnionCondition (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnionCondition)



\> **PixiVNJsonUnionCondition** = `PixiVNJsonUnionConditionAndOr` | `PixiVNJsonUnionConditionNot`

Defined in: [src/schema/PixiVNJsonUnionCondition.ts:32](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonUnionCondition.ts#L32)

Union of AND/OR and NOT logical operators over conditions.


# Type Alias: PixiVNJsonUnknownEdit<T> (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonUnknownEdit)



\> **PixiVNJsonUnknownEdit**\<`T`> = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:151](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L151)

Edits the properties of an unknown/generic canvas element.
Use this when the specific element type is not one of the built-in kinds.

## Type Parameters [#type-parameters]

### T [#t]

`T` *extends* `ContainerOptions`\<`any`>

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:157](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L157)

Alias of the canvas element to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:153](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L153)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `Partial`\<`T`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:161](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L161)

Partial options/properties to update on the canvas element.

***

### type [#type]

\> **type**: `"canvaselement"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:152](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L152)


# Type Alias: PixiVNJsonValueGet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueGet)



\> **PixiVNJsonValueGet** = [`PixiVNJsonStorageGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonStorageGet) | [`PixiVNJsonParamGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonParamGet) | [`PixiVNJsonLabelGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelGet) | [`PixiVNJsonChoiceGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonChoiceGet) | [`PixiVNJsonLogicGet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLogicGet) | [`PixiVNJsonFunction`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonFunction)

Defined in: [src/schema/PixiVNJsonValue.ts:78](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L78)

Union of all "get value" operations — reads from storage, params, labels, choices, or a logic expression.


# Type Alias: PixiVNJsonValueSet (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonValueSet)



\> **PixiVNJsonValueSet** = [`PixiVNJsonOnlyStorageSet`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOnlyStorageSet) | `PixiVNJsonFlagSet` | `PixiVNJsonOnlyParamSet`

Defined in: [src/schema/PixiVNJsonValue.ts:176](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonValue.ts#L176)

Union of all "set value" operations — writes to storage, flag storage, or params.


# Type Alias: PixiVNJsonVideoEdit (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoEdit)



\> **PixiVNJsonVideoEdit** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:105](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L105)

Edits the properties of an existing video sprite on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:111](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L111)

Alias of the canvas element to edit.

***

### operationType [#operationtype]

\> **operationType**: `"edit"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:107](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L107)

***

### props? [#props]

\> `optional` &#x2A;*props?**: `Partial`\<`VideoSpriteMemory`>

Defined in: [src/schema/PixiVNJsonCanvas.ts:115](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L115)

Partial memory/state properties to update on the video sprite.

***

### type [#type]

\> **type**: `"video"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:106](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L106)


# Type Alias: PixiVNJsonVideoPauseResume (/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonVideoPauseResume)



\> **PixiVNJsonVideoPauseResume** = `object`

Defined in: [src/schema/PixiVNJsonCanvas.ts:188](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L188)

Pauses or resumes playback of a video sprite on the canvas.

## Properties [#properties]

### alias [#alias]

\> **alias**: `string`

Defined in: [src/schema/PixiVNJsonCanvas.ts:194](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L194)

Alias of the video element to pause or resume.

***

### operationType [#operationtype]

\> **operationType**: `"pause"` | `"resume"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:190](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L190)

***

### type [#type]

\> **type**: `"video"`

Defined in: [src/schema/PixiVNJsonCanvas.ts:189](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/schema/PixiVNJsonCanvas.ts#L189)


# Type Alias: ReplaceHandler (/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandler)



\> **ReplaceHandler** = (`key`) => `string` | `undefined`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:11](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L11)

A handler function invoked for each `[key]` token found in the text that passes the
[ReplaceHandlerOptions.validation](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions#validation) check.

## Parameters [#parameters]

### key [#key]

`string`

The content found inside the square brackets (without the brackets themselves).
For example, for the token `[john]` the key is `"john"`.

## Returns [#returns]

`string` | `undefined`

The string to substitute in place of `[key]`, or `undefined` to leave the token unchanged.


# Type Alias: ReplaceHandlerOptions (/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions)



\> **ReplaceHandlerOptions** = `object`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:21](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L21)

Configuration options for a text-replacement handler registered via [TextReplaces.add](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/add).

## Properties [#properties]

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:31](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L31)

An optional human-readable description of what this handler does.
Used for documentation purposes.

***

### i18nInterpolation? [#i18ninterpolation]

\> `optional` &#x2A;*i18nInterpolation?**: `boolean`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:91](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L91)

When `true`, the **first** occurrence of a matched `[key]` token is converted to the i18n
double-brace format `{{[key]}}` (exactly once). Any subsequent occurrences of `[key]` in
the same text are then replaced with the handler's return value as usual.

The transformation sequence for a matched key is:

* first occurrence: `[key]` → `{{[key]}}`
* remaining occurrences: `[key]` → handler return value

When `false` or omitted, the handler's return value directly replaces all occurrences of `[key]`.

**Recommended i18n configuration:** when this option is enabled, configure
`missingInterpolationHandler` in your i18n instance so that keys with no matching
translation are left intact rather than replaced with an empty string:

```ts title="lib/i18n.ts"
i18n.init({
    // ...
    missingInterpolationHandler(_text, value, _options) {
        return value[1];
    },
});
```

#### Default [#default]

```ts
false
```

***

### name [#name]

\> **name**: `string`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:26](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L26)

A unique name that identifies this handler.
Used for documentation and debugging purposes.

***

### type? [#type]

\> `optional` &#x2A;*type?**: `"after-translation"` | `"before-translation"`

Defined in: [src/translator/interfaces/ReplaceHandler.ts:64](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L64)

When this handler should be invoked relative to the translation step.

* `"before-translation"` – the handler runs **before** onInkTranslate is called.
  Useful for pre-processing tokens, e.g. converting `[key]` into `{{key}}` for i18next.
* `"after-translation"` – the handler runs **after** onInkTranslate is called.
  Useful for substituting values that depend on the translated text.

#### Default [#default-1]

```ts
"after-translation"
```

***

### validation [#validation]

\> **validation**: `RegExp` | `"characterId"` | `"all"` | `ZodType`\<`string`>

Defined in: [src/translator/interfaces/ReplaceHandler.ts:53](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/interfaces/ReplaceHandler.ts#L53)

Determines whether this handler should be invoked for a given `[key]` token.

* `"all"` – the handler is always invoked for every token found.
* `"characterId"` – the handler is invoked only when the key matches a registered character ID
  (i.e. the character is present in `RegisteredCharacters`).
* `RegExp` – the key string is tested against the regular expression. The handler is invoked
  only if the regex matches.
* `ZodType<string>` – the key string is validated with `schema.safeParse(key)`. The handler
  is invoked only if validation succeeds.

#### Example [#example]

```ts
// RegExp: only replace keys that look like lowercase identifiers
validation: /^[a-z_]+$/

// Zod: only replace keys that are one of a fixed set of values
import { z } from "zod"
validation: z.enum(["player", "npc", "enemy"])
```


# Type Alias: VariableGetterHandler (/jsdoc/pixi-vn-json/index/type-aliases/VariableGetterHandler)



\> **VariableGetterHandler** = \<`T`>(`value`, `next`) => `T` | `undefined`

Defined in: [src/actions/interfaces/VariableGetterHandler.ts:11](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/actions/interfaces/VariableGetterHandler.ts#L11)

A middleware handler that can intercept and transform a logic value before it is
returned by [VariableGetter.getLogichValue](/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/getLogichValue).

Handlers are called in registration order, each receiving the current value and a
`next` function to invoke the rest of the chain (including the built-in resolver).
Return `undefined` to fall through to `next`.

## Type Parameters [#type-parameters]

### T [#t]

`T` = `StorageElementType`

## Parameters [#parameters]

### value [#value]

`T`

### next [#next]

(`value`) => `T` | `undefined`

## Returns [#returns]

`T` | `undefined`


# Variable: PIXIVNJSON_PARAM_ID (/jsdoc/pixi-vn-json/index/variables/PIXIVNJSON_PARAM_ID)



\> `const` **PIXIVNJSON\_PARAM\_ID**: `"___param___"` = `"___param___"`

Defined in: [src/constants.ts:10](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/constants.ts#L10)

**`Internal`**

Internal storage key prefix used to pass positional parameters to a called label.
The full key is `PIXIVNJSON_PARAM_ID + <label-depth-index>`.


# Variable: PIXIVNJSON_SCHEMA_URL (/jsdoc/pixi-vn-json/index/variables/PIXIVNJSON_SCHEMA_URL)



\> `const` **PIXIVNJSON\_SCHEMA\_URL**: `string`

Defined in: [src/constants.ts:25](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/constants.ts#L25)

The URL of the JSON Schema for the current version of pixi-vn-json.

You can use this constant as the value of the `$schema` field in your PixiVNJson documents
so that editors can validate and auto-complete the document.

Example:

```json
{
  "$schema": "https://pixi-vn.com/schemas/1.13.0/schema.json"
}
```


# Variable: PixiVNJsonComparationOperators (/jsdoc/pixi-vn-json/index/variables/PixiVNJsonComparationOperators)



\> `const` **PixiVNJsonComparationOperators**: [`PixiVNJsonComparationOperatorsType`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonComparationOperatorsType)\[]

Defined in: [src/constants.ts:30](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/constants.ts#L30)

All comparison operators supported by [PixiVNJsonConditions](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonConditions) expressions.


# TextReplaces (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces)



Manages text replacement handlers that process content enclosed in square brackets (`[key]`).

Handlers are called in the order they were added. For each handler, the current text is scanned
for all `[key]` patterns. If the handler's `validation` matches a key, the handler is
invoked with that key. If the handler returns a string, all occurrences of `[key]` are replaced
with the returned value. After a handler finishes processing the text, the next handler starts
on the updated text.

Each handler specifies whether it runs before or after translation via the `type` field in its
options (defaults to `"after-translation"`).

## Example [#example]

```ts title="content/text-replaces.ts"
import { TextReplaces } from 'pixi-vn-ink'
import { getCharacterById } from "@drincs/pixi-vn";

// Replace [characterId] with the character's display name
TextReplaces.add(
    (key) => {
        const character = getCharacterById(key)
        return character?.name
    },
    {
        name: "character-name",
        description: "Replaces character IDs with their display names",
        validation: /^[a-z_]+$/,
        type: "after-translation",
    }
)
// "Hello [john], meet [jane]!" -> "Hello John, meet Jane!"
```

## Variables [#variables]

* [options](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/variables/options)

## Functions [#functions]

* [add](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/add)
* [info](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/info)
* [remove](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/remove)
* [replace](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/replace)
* [runI18nPreStep](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/runI18nPreStep)


# VariableGetter (/jsdoc/pixi-vn-json/index/namespaces/VariableGetter)



## Functions [#functions]

* [add](/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/add)
* [clear](/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/clear)
* [getLogichValue](/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/getLogichValue)


# translator (/jsdoc/pixi-vn-json/index/namespaces/translator)



Manages the translation pipeline for all text displayed by pixi-vn-json.

The pipeline applies three optional hooks in order:

1. `beforeToTranslate` – pre-processes the key before translation.
2. `translate` – the main translation function (identity by default).
3. `afterToTranslate` – post-processes the translated string.

Use [TranslatorManager.t](/jsdoc/pixi-vn-json/index/namespaces/translator/functions/t) to translate a key or array of keys.

## Variables [#variables]

* [~~afterToTranslate~~](/jsdoc/pixi-vn-json/index/namespaces/translator/variables/afterToTranslate)
* [~~beforeToTranslate~~](/jsdoc/pixi-vn-json/index/namespaces/translator/variables/beforeToTranslate)

## Functions [#functions]

* [generateJsonTranslation](/jsdoc/pixi-vn-json/index/namespaces/translator/functions/generateJsonTranslation)
* [setTranslate](/jsdoc/pixi-vn-json/index/namespaces/translator/functions/setTranslate)
* [t](/jsdoc/pixi-vn-json/index/namespaces/translator/functions/t)
* [translate](/jsdoc/pixi-vn-json/index/namespaces/translator/functions/translate)


# Variable: options (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/variables/options)



\> `const` **options**: `object`

Defined in: [src/translator/TextReplaces.ts:42](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L42)

Configuration options for the `TextReplaces` system.

## Type Declaration [#type-declaration]

### replaceRegex [#replaceregex]

\> **replaceRegex**: `RegExp`

The regex used to find replacement tokens in the text (e.g. `[key]`).

#### Default [#default]

```ts
/\[([^\]]+)\]/
```


# Function: add() (/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/add)



\> **add**(`handler`): `void`

Defined in: [src/actions/VariableGetter.ts:17](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/actions/VariableGetter.ts#L17)

Registers a new middleware handler into the resolution chain.
Handlers are invoked in the order they were added.

## Parameters [#parameters]

### handler [#handler]

[`VariableGetterHandler`](/jsdoc/pixi-vn-json/index/type-aliases/VariableGetterHandler)

The middleware handler to register.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/clear)



\> **clear**(): `void`

Defined in: [src/actions/VariableGetter.ts:24](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/actions/VariableGetter.ts#L24)

Removes all registered middleware handlers, restoring the default resolution behaviour.

## Returns [#returns]

`void`


# Function: getLogichValue() (/jsdoc/pixi-vn-json/index/namespaces/VariableGetter/functions/getLogichValue)



\> **getLogichValue**\<`T`>(`value`, `props?`): `T` | `undefined`

Defined in: [src/actions/VariableGetter.ts:36](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/actions/VariableGetter.ts#L36)

Resolves a JSON logic value, running it through all registered middleware handlers
before falling back to the built-in storage/arithmetic/condition evaluator.

## Type Parameters [#type-parameters]

### T [#t]

`T` = `StorageElementType`

## Parameters [#parameters]

### value [#value]

`any`

The value or logic expression to resolve.

### props? [#props]

`StepLabelProps` = `{}`

The current step label props passed to each handler.

## Returns [#returns]

`T` | `undefined`

The resolved value, or `undefined`.


# Function: add() (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/add)



\> **add**(`fn`, `handlerOptions`): `void`

Defined in: [src/translator/TextReplaces.ts:79](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L79)

Registers a new replacement handler.

Handlers are executed in the order they are added. The first handler added runs first.

The TranslatorManager translation pipeline automatically calls
[TextReplaces.replace](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/replace) for both phases (`"before-translation"` and
`"after-translation"`), so no additional setup is required after calling `add`.

## Parameters [#parameters]

### fn [#fn]

[`ReplaceHandler`](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandler)

The handler function. Receives the key found inside `[...]` and should return
the replacement string, or `undefined` to leave that token unchanged.

### handlerOptions [#handleroptions]

[`ReplaceHandlerOptions`](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions)

Configuration for this handler, including its name, optional
description, validation regex, and execution phase.

## Returns [#returns]

`void`

## Example [#example]

```ts title="content/text-replaces.ts"
import { TextReplaces } from 'pixi-vn-ink'

TextReplaces.add(
    (key) => key === "player" ? "Mario" : undefined,
    {
        name: "player-name",
        validation: /^player$/,
    }
)
```


# Function: info() (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/info)



\> **info**(): [`ReplaceHandlerOptions`](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions)\[]

Defined in: [src/translator/TextReplaces.ts:103](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L103)

Returns metadata for all registered handlers, in registration order.

## Returns [#returns]

[`ReplaceHandlerOptions`](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions)\[]

An array of [ReplaceHandlerOptions](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandlerOptions) for each registered handler.


# Function: remove() (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/remove)



\> **remove**(`fn`): `void`

Defined in: [src/translator/TextReplaces.ts:91](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L91)

Removes a previously registered handler function.

Only the first registration matching `fn` is removed. If the same function was added
multiple times, subsequent registrations remain.

## Parameters [#parameters]

### fn [#fn]

[`ReplaceHandler`](/jsdoc/pixi-vn-json/index/type-aliases/ReplaceHandler)

The handler function to remove.

## Returns [#returns]

`void`


# Function: replace() (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/replace)



\> **replace**(`text`, `replaceOptions`): `string`

Defined in: [src/translator/TextReplaces.ts:125](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L125)

Applica tutti gli handler registrati del tipo specificato al testo dato.

Questa funzione NON esegue più la pre-elaborazione i18n automaticamente.
Se vuoi applicare la pre-elaborazione i18n, usa prima [runI18nPreStep](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/runI18nPreStep) sul testo.

## Parameters [#parameters]

### text [#text]

`string`

Il testo sorgente da processare.

### replaceOptions [#replaceoptions]

Specifica quale fase di handler eseguire.

#### type [#type]

`"after-translation"` | `"before-translation"`

Quale fase di handler eseguire.

## Returns [#returns]

`string`

Il testo dopo che tutti gli handler sono stati applicati.

## Example [#example]

```ts
// Solo handler di tipo "before-translation"
TextReplaces.replace("Ciao [name]", { type: "before-translation" })

// Con pre-elaborazione i18n:
let t = TextReplaces.runI18nPreStep("Ciao [name]");
t = TextReplaces.replace(t, { type: "before-translation" });
```


# Function: runI18nPreStep() (/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/runI18nPreStep)



\> **runI18nPreStep**(`text`): `string`

Defined in: [src/translator/TextReplaces.ts:153](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TextReplaces.ts#L153)

Esegue la pre-elaborazione i18n su tutti gli handler registrati con `i18nInterpolation: true`.

Per ogni handler con questa opzione, la prima occorrenza di ogni `[key]` valida viene sostituita con `{{[key]}}`.

## Parameters [#parameters]

### text [#text]

`string`

Il testo da processare.

## Returns [#returns]

`string`

Il testo dopo la pre-elaborazione i18n.

## Example [#example]

```ts
// Pre-elabora tutte le variabili i18n:
const pre = TextReplaces.runI18nPreStep("Ciao [name]");
```


# Function: generateJsonTranslation() (/jsdoc/pixi-vn-json/index/namespaces/translator/functions/generateJsonTranslation)



\> **generateJsonTranslation**(`labels`, `json?`, `options?`): `Promise`\<`object`>

Defined in: [src/translator/TranslatorManager.ts:195](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L195)

Generates a JSON translation object from the provided labels.

## Parameters [#parameters]

### labels [#labels]

[`PixiVNJsonLabelStep`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonLabelStep)\[]

The labels to translate.

### json? [#json]

`object` = `{}`

The JSON object to populate with translations.

### options? [#options]

Options for translation, including default value handling.

#### defaultValue? [#defaultvalue]

`"empty_string"` | `"copy_key"`

Default value to use when a key is not found.

* "empty\_string": Use an empty string as the default value.
* "copy\_key": Use the key itself as the default value.

**Default**

```ts
"copy_key"
```

#### operationStringConvert? [#operationstringconvert]

(`value`, `step`, `props`) => `Promise`\<[`PixiVNJsonOperation`](/jsdoc/pixi-vn-json/index/type-aliases/PixiVNJsonOperation) | `undefined`>

## Returns [#returns]

`Promise`\<`object`>

The populated JSON object with translations.


# Function: setTranslate() (/jsdoc/pixi-vn-json/index/namespaces/translator/functions/setTranslate)



\> **setTranslate**(`value`): `void`

Defined in: [src/translator/TranslatorManager.ts:91](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L91)

Sets the main translation function.
Defaults to an identity function (returns the key unchanged).

## Parameters [#parameters]

### value [#value]

(`key`) => `string`

## Returns [#returns]

`void`

## Example [#example]

```ts
setTranslate((key) => i18n.t(key));
```


# Function: t() (/jsdoc/pixi-vn-json/index/namespaces/translator/functions/t)



\> **t**\<`T`>(`key`): `T`

Defined in: [src/translator/TranslatorManager.ts:53](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L53)

Translates a single key or an array of keys using the registered pipeline.
Returns the same type (`string` or `string[]`) as the input.

## Type Parameters [#type-parameters]

### T [#t]

`T` = `string` | `string`\[]

## Parameters [#parameters]

### key [#key]

`T`

The string key or array of string keys to translate.

## Returns [#returns]

`T`

The translated string(s).


# Function: translate() (/jsdoc/pixi-vn-json/index/namespaces/translator/functions/translate)



\> **translate**(`key`): `string`

Defined in: [src/translator/TranslatorManager.ts:68](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L68)

Runs the composed translation pipeline:

1. optional `beforeToTranslate` hook (deprecated)
2. [TextReplaces.replace](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/replace) – before-translation phase
3. main `translate` function
4. optional `afterToTranslate` hook (deprecated)
5. [TextReplaces.replace](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/replace) – after-translation phase

## Parameters [#parameters]

### key [#key]

`string`

## Returns [#returns]

`string`


# Variable: afterToTranslate (deprecated) (/jsdoc/pixi-vn-json/index/namespaces/translator/variables/afterToTranslate)



\> **afterToTranslate**: ((`key`) => `string`) | `undefined`

Defined in: [src/translator/TranslatorManager.ts:44](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L44)

## Deprecated [#deprecated]

Optional hook that runs **after** the built-in [TextReplaces](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces) after-translation
replace pass. Useful for post-processing translated strings.

Prefer [TextReplaces.add](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/add) with `type: "after-translation"` instead.


# Variable: beforeToTranslate (deprecated) (/jsdoc/pixi-vn-json/index/namespaces/translator/variables/beforeToTranslate)



\> **beforeToTranslate**: ((`key`) => `string`) | `undefined`

Defined in: [src/translator/TranslatorManager.ts:35](https://github.com/DRincs-Productions/pixi-vn-json/blob/c3fc7ababe09c261f3130ab586feb49b5a221ace/src/translator/TranslatorManager.ts#L35)

## Deprecated [#deprecated]

Optional hook that runs **before** the built-in [TextReplaces](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces) before-translation
replace pass. Useful for key normalization (e.g. trimming, lowercasing).

Prefer [TextReplaces.add](/jsdoc/pixi-vn-json/index/namespaces/TextReplaces/functions/add) with `type: "before-translation"` instead.


# Ink Language Integration (/jsdoc/pixi-vn-ink)



![pixi-vn-cover-ink](https://github.com/user-attachments/assets/cc96d260-d909-4fa4-834e-85e4405b6dd1)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn-ink?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn-ink" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn-ink?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn-ink" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

Pixi’VN gives you the ability to write your own narrative using &#x2A;**ink***, a scripting language for writing interactive narrative.

The ***ink* + Pixi’VN integration**, exploits the [inkjs](https://github.com/inkle/inkjs) and [PixiVNJson](https://github.com/DRincs-Productions/pixi-vn-json&#x29; libraries, to parse ***ink* code*&#x2A; and generate a Json that can be interpreted by Pixi’VN. So Javascript/Typescript and &#x2A;**ink**&#x2A; share the same storage and canvas, and it is also possible to launch &#x2A;**ink**&#x2A; labels (or knots) from Javascript/Typescript and vice versa. This allows you to use the best of both languages. You can use &#x2A;**ink*** to write the narration, while using Javascript/Typescript to create minigames or complex animations.

**What is *ink*?**

***ink*** is a scripting language for writing interactive narrative. It is used in games like 80 Days, Heaven's Vault, and Sorcery! to create branching stories.

This language is very simple to learn. Go on [*ink* website](https://www.inklestudios.com/ink/) to learn more about it.

## Why use *ink* integration? [#why-use-ink-integration]

Programming a game narrative in **Javascript/Typescript** has the advantage of having total development freedom, but the disadvantage is that it slows down the writing of a narrative (it makes you write a lot of code).

## Installation [#installation]

To install the package, run the following command in your project:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Start using *ink* in Pixi’VN [#start-using-ink-in-pixivn]

If you have not created a project yet then it is recommended to use the [template](https://pixi-vn.com/start/getting-started.html#project-initialization&#x29; to start your project with &#x2A;**ink***.

After installing the package you need to use the `importInkText()&#x60; function to import the ***ink* script** into your project.

```ts title="main.ts"
import { narration } from "@drincs/pixi-vn";
import { importInkText } from '@drincs/pixi-vn-ink'

importInkText([inkText, ...])
narration.callLabel(`start`, {});
```

```ink title="ink/story.ink"
=== start ===
Hello, world!
-> END
```

<CodeBlockTabs defaultValue="ink.d.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink.d.ts">
      ink.d.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink.d.ts">
    ```ts
    declare module "*.ink" {
      const value: string;
      export default value;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>


# @drincs/pixi-vn-ink (/jsdoc/pixi-vn-ink/modules)



## Modules [#modules]

* [index](/jsdoc/pixi-vn-ink/index)
* [vite](/jsdoc/pixi-vn-ink/vite)
* [vite-listener](/jsdoc/pixi-vn-ink/vite-listener)


# index (/jsdoc/pixi-vn-ink/index)



## Namespaces [#namespaces]

* [HashtagCommands](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands)
* [TextReplaces](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces)
* [VariableGetter](/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter)

## Interfaces [#interfaces]

* [BaseHashtagCommandsOptions](/jsdoc/pixi-vn-ink/index/interfaces/BaseHashtagCommandsOptions)
* [HashtagHandlerOptions](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)
* [PixiVNJson](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson)

## Type Aliases [#type-aliases]

* [CharacterIdSource](/jsdoc/pixi-vn-ink/index/type-aliases/CharacterIdSource)
* [HashtagHandler](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)
* [MapperHandler](/jsdoc/pixi-vn-ink/index/type-aliases/MapperHandler)

## Functions [#functions]

* [addBaseHashtagCommands](/jsdoc/pixi-vn-ink/index/functions/addBaseHashtagCommands)
* [convertInkText](/jsdoc/pixi-vn-ink/index/functions/convertInkText)
* [generateJsonInkTranslation](/jsdoc/pixi-vn-ink/index/functions/generateJsonInkTranslation)
* [importInkText](/jsdoc/pixi-vn-ink/index/functions/importInkText)
* [importJson](/jsdoc/pixi-vn-ink/index/functions/importJson)
* [~~onInkHashtagScript~~](/jsdoc/pixi-vn-ink/index/functions/onInkHashtagScript)
* [onInkTranslate](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate)
* [~~onReplaceTextAfterTranslation~~](/jsdoc/pixi-vn-ink/index/functions/onReplaceTextAfterTranslation)
* [~~onReplaceTextBeforeTranslation~~](/jsdoc/pixi-vn-ink/index/functions/onReplaceTextBeforeTranslation)

## References [#references]

### convertInkToJson [#convertinktojson]

Renames and re-exports [convertInkText](/jsdoc/pixi-vn-ink/index/functions/convertInkText)


# vite-listener (/jsdoc/pixi-vn-ink/vite-listener)



## Type Aliases [#type-aliases]

* [InkHmrListenerOptions](/jsdoc/pixi-vn-ink/vite-listener/type-aliases/InkHmrListenerOptions)

## Functions [#functions]

* [setupInkHmrListener](/jsdoc/pixi-vn-ink/vite-listener/functions/setupInkHmrListener)


# vite (/jsdoc/pixi-vn-ink/vite)



## Interfaces [#interfaces]

* [InkHashtagCommandInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkHashtagCommandInfo)
* [InkLibraryInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkLibraryInfo)
* [InkTextReplaceInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkTextReplaceInfo)
* [VitePluginInkOptions](/jsdoc/pixi-vn-ink/vite/interfaces/VitePluginInkOptions)

## Variables [#variables]

* [INK\_DEV\_API\_HASHTAG\_COMMANDS](/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_HASHTAG_COMMANDS)
* [INK\_DEV\_API\_INFO](/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_INFO)
* [INK\_DEV\_API\_TEXT\_REPLACES](/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_TEXT_REPLACES)

## Functions [#functions]

* [vitePluginInk](/jsdoc/pixi-vn-ink/vite/functions/vitePluginInk)


# Function: addBaseHashtagCommands() (/jsdoc/pixi-vn-ink/index/functions/addBaseHashtagCommands)



\> **addBaseHashtagCommands**(`options?`): `void`

Defined in: [src/handlers/hashtag-commands.ts:602](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L602)

Registers every built-in Hashtag-Command → operation mapper (`call`, `jump`, `pause`,
`continue`, `show`/`edit`/`remove` for images/videos/text/canvas elements, sound and channel
controls, asset/bundle loading, input requests, …).

**This replaces the old behavior of registering these mappers as a side effect of importing
`@drincs/pixi-vn-ink`.** Call this once, near the start of your app (alongside e.g.
`createNqtrHandler`), before any Ink content is parsed.

## Parameters [#parameters]

### options? [#options]

[`BaseHashtagCommandsOptions`](/jsdoc/pixi-vn-ink/index/interfaces/BaseHashtagCommandsOptions) = `{}`

Optional configuration for known bundle/asset-alias ids, and which built-in
command sections (see BaseHashtagCommandsSections) to register.

## Returns [#returns]

`void`

## Example [#example]

```ts
import { addBaseHashtagCommands } from '@drincs/pixi-vn-ink';

addBaseHashtagCommands();
```


# Function: convertInkText() (/jsdoc/pixi-vn-ink/index/functions/convertInkText)



\> **convertInkText**(`text`, `options?`): [`PixiVNJson`](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson) | `undefined`

Defined in: [src/converter/converter.ts:33](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/converter/converter.ts#L33)

This function converts string written in ink language into the LabelJsonType.

## Parameters [#parameters]

### text [#text]

`string`

string or array of strings written in ink language

### options? [#options]

`Partial`\<`LoaderSharedType`> = `{}`

## Returns [#returns]

[`PixiVNJson`](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson) | `undefined`

LabelJsonType or undefined


# Function: generateJsonInkTranslation() (/jsdoc/pixi-vn-ink/index/functions/generateJsonInkTranslation)



\> **generateJsonInkTranslation**(`pixivnJson`, `json?`, `options?`): `Promise`\<`object`>

Defined in: [src/functions/translate.ts:38](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/functions/translate.ts#L38)

Generate a json object with the keys of the labels and the values of the text to be translated

## Parameters [#parameters]

### pixivnJson [#pixivnjson]

[`PixiVNJson`](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson)

The labels to be used in the narrative. They will be added to the system

### json? [#json]

`object` = `{}`

If you want to add more keys to the existing json

### options? [#options]

The options to set the default value if the key is not found

#### defaultValue? [#defaultvalue]

`"empty_string"` | `"copy_key"`

Default value to set if the key is not found

**Default**

```ts
"copy_key"
```

## Returns [#returns]

`Promise`\<`object`>

The json object with the keys of the labels and the values of the text to be translated

## Example [#example]

```ts
import { generateTranslateJson, importInkText } from 'pixi-vn-ink'

importInkText( your_ink_text_here ).then((labels) => {
    let json = generateTranslateJson(labels)
})
```


# Function: importInkText() (/jsdoc/pixi-vn-ink/index/functions/importInkText)



\> **importInkText**(`texts`, `options?`): `Promise`\<`string`\[]>

Defined in: [src/loader/importer.ts:24](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/loader/importer.ts#L24)

This function imports string or array of strings written in ink language into the Pixi’VN engine.

## Parameters [#parameters]

### texts [#texts]

`string` | `string`\[]

string or array of strings written in ink language

### options? [#options]

#### characters? [#characters]

readonly [`CharacterIdSource`](/jsdoc/pixi-vn-ink/index/type-aliases/CharacterIdSource)\[]

characters recognised when splitting `characterId: text` speakers, in
addition to `RegisteredCharacters` (pass when importing before characters are registered)

## Returns [#returns]

`Promise`\<`string`\[]>

## Example [#example]

```ts title="main.ts"
import { importInkText } from 'pixi-vn'
importInkText(`
=== back_in_london ===
Hello, World!
`).then(() => {
    GameStepManager.callLabel("back_in_london", {})
})
```


# Function: importJson() (/jsdoc/pixi-vn-ink/index/functions/importJson)



\> **importJson**(`data`): `Promise`\<`void`>

Defined in: [src/loader/importer.ts:55](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/loader/importer.ts#L55)

This function imports data in PixiVNJson format into the Pixi’VN engine.

## Parameters [#parameters]

### data [#data]

[`PixiVNJson`](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson) | [`PixiVNJson`](/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson)\[]

data in PixiVNJson format

## Returns [#returns]

`Promise`\<`void`>

the same data passed as parameter


# Function: onInkHashtagScript() (deprecated) (/jsdoc/pixi-vn-ink/index/functions/onInkHashtagScript)



\> **onInkHashtagScript**(`runCustomHashtagScript`): `void`

Defined in: [src/handlers/hashtag-commands.ts:519](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L519)

## Parameters [#parameters]

### runCustomHashtagScript [#runcustomhashtagscript]

[`HashtagHandler`](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)

## Returns [#returns]

`void`

## Deprecated [#deprecated]

This function is deprecated, use [HashtagCommands.add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add) instead


# Function: onInkTranslate() (/jsdoc/pixi-vn-ink/index/functions/onInkTranslate)



\> **onInkTranslate**(`t`): `void`

Defined in: [src/functions/translate.ts:19](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/functions/translate.ts#L19)

This function set the function to translate the text

## Parameters [#parameters]

### t [#t]

(`text`) => `string`

The function to translate the text

## Returns [#returns]

`void`

## Example [#example]

```ts
import { onInkTranslate } from 'pixi-vn-ink'
import { useTranslation } from "react-i18next";

const { t } = useTranslation(["narration"]);
onInkTranslate((text) => {
   return t(text)
})
```


# Function: onReplaceTextAfterTranslation() (deprecated) (/jsdoc/pixi-vn-ink/index/functions/onReplaceTextAfterTranslation)



\> **onReplaceTextAfterTranslation**(`getTextToReplace`): `void`

Defined in: [src/functions/replace.ts:30](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/functions/replace.ts#L30)

## Parameters [#parameters]

### getTextToReplace [#gettexttoreplace]

(`key`) => `string` | `undefined`

The function to get the text to replace

## Returns [#returns]

`void`

## Deprecated [#deprecated]

Use [TextReplaces](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces) instead.

This function is called after the [onInkTranslate](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate) function is called.
It will replace the text between square brackets.
It can be used for example to replace the character id with the character name:
If there are a character with a name "John" and id "john", and the text is "Hello, my name is \[john]",
the following function will return "Hello, my name is John"

## Example [#example]

```ts
import { onReplaceTextAfterTranslation } from 'pixi-vn-ink'
import { getCharacterById } from "@drincs/pixi-vn";

onReplaceTextAfterTranslation((key) => {
    let character = getCharacterById(key)
    if (character) {
        return character.name
    }

    // if return undefined, the system will not replace the character id
    return undefined
})
```


# Function: onReplaceTextBeforeTranslation() (deprecated) (/jsdoc/pixi-vn-ink/index/functions/onReplaceTextBeforeTranslation)



\> **onReplaceTextBeforeTranslation**(`getTextToReplace`): `void`

Defined in: [src/functions/replace.ts:71](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/functions/replace.ts#L71)

## Parameters [#parameters]

### getTextToReplace [#gettexttoreplace]

(`key`) => `string` | `undefined`

The function to get the text to replace

## Returns [#returns]

`void`

## Deprecated [#deprecated]

Use [TextReplaces](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces) instead.

This function is called before the [onInkTranslate](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate) function is called.
It will replace the text between square brackets.
It can be used for example to replace the normal method for replacing the text \[key] with a new method to replace the text \{\{key}}.
It can be used for example to optimize the text replacement with i18next, using the [onInkTranslate](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate) function.
If there are a text is "Hello, my name is \[john]", the following function will return "Hello, my name is \{\{john}}"

## Example [#example]

```ts
import { onReplaceTextBeforeTranslation, onInkTranslate } from 'pixi-vn-ink'
import { useTranslation } from "react-i18next";
import { john } from "../values/characters"

const { t } = useTranslation(["narration"]);

onInkTranslate((text) => {
    return t(text, {
        john: john.name
    })
})

onReplaceTextBeforeTranslation((key) => {
    return `{{${key}}}`
})
```


# Interface: BaseHashtagCommandsOptions (/jsdoc/pixi-vn-ink/index/interfaces/BaseHashtagCommandsOptions)



Defined in: [src/handlers/hashtag-commands.ts:562](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L562)

Options for [addBaseHashtagCommands](/jsdoc/pixi-vn-ink/index/functions/addBaseHashtagCommands).

## Properties [#properties]

### assetAliasIds? [#assetaliasids]

\> `optional` &#x2A;*assetAliasIds?**: readonly `string`\[]

Defined in: [src/handlers/hashtag-commands.ts:575](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L575)

Known asset aliases — e.g. `assetAliasIds` from the same generated file. When provided,
`# load assets <alias...>` / `# lazyload assets <alias...>` do a runtime membership check
instead of accepting any string.

***

### bundleIds? [#bundleids]

\> `optional` &#x2A;*bundleIds?**: readonly `string`\[]

Defined in: [src/handlers/hashtag-commands.ts:569](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L569)

Known asset bundle names — e.g. `bundleIds` from the file generated by `vitePluginPixivn`'s
`assetsManifest` option. When provided, `# load bundle <alias...>` /
`# lazyload bundle <alias...>` do a runtime membership check instead of accepting any
string.

***

### sections? [#sections]

\> `optional` &#x2A;*sections?**: `BaseHashtagCommandsSections`

Defined in: [src/handlers/hashtag-commands.ts:581](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L581)

Which of the four built-in groups to actually register — see
BaseHashtagCommandsSections. Any section left unset (or `sections` itself left
unset) defaults to `true`.


# Interface: HashtagHandlerOptions (/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)



Defined in: [src/handlers/interfaces/HashtagHandler.ts:69](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L69)

Configuration options for a Hashtag-Command handler registered via [HashtagCommands.add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add).

## Properties [#properties]

### deprecated? [#deprecated]

\> `optional` &#x2A;*deprecated?**: `boolean`

Defined in: [src/handlers/interfaces/HashtagHandler.ts:103](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L103)

Whether this handler is deprecated. Deprecated handlers should still function correctly
but may be replaced by newer alternatives in the future.

***

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/handlers/interfaces/HashtagHandler.ts:79](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L79)

An optional human-readable description of what this handler does.
Used for documentation purposes. Supports multi-line descriptions.

***

### keySchemas? [#keyschemas]

\> `optional` &#x2A;*keySchemas?**: `Record`\<`string` | `number`, `object`>

Defined in: [src/handlers/interfaces/HashtagHandler.ts:143](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L143)

JSON Schemas (usable with Ajv) for order-independent `<key> <value> [<value2> ...]` sections
embedded anywhere in the command's token list, keyed by the token that introduces the
section.

[validation](#validation) can only check the token list's own shape (fixed positions, or "any
number of trailing strings"); it can't express that everything after a given key must parse
into an object matching a specific JSON Schema. `keySchemas` fills that gap and — unlike
[validation](#validation) — is meant to be checked statically (by `vitePluginPixivn` / the VS Code
extension) without running the handler.

Each key in `keySchemas` is matched against the command's tokens from right to left: the
right-most occurrence of any known key starts a section that runs to the end of the
still-unprocessed tail; the scan then continues to its left for the next key, and so on.
Each section's tokens are converted to an object with the same `<key> <value>` pairing logic
as `convertListStringToObj` (passed to [HashtagHandler](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)), then validated against that
key's schema.

#### Examples [#examples]

```ts
For the command `# wait hours 3 days tomorrow`, tokens are
`["wait", "hours", "3", "days", "tomorrow"]`. With
`keySchemas: { wait: { type: "object", properties: { hours: { type: "number" }, days: { type: "string" } } } }`,
the right-most (and only) match is `"wait"` at index 0; everything after it —
`{ hours: 3, days: "tomorrow" }` — is validated against that schema.
```

```ts
For `# show imagecontainer sly props xAlign 0.2 yAlign 1 movein direction right ease anticipate`
with `keySchemas: { props: propsSchema, movein: moveinSchema }`, the scan finds `"movein"`
first (right-most), validates `{ direction: "right", ease: "anticipate" }` against
`moveinSchema`, then continues left to `"props"` and validates
`{ xAlign: 0.2, yAlign: 1 }` against `propsSchema`.

A key can also be a number (or a digit-only string — object keys are always strings at
runtime). Numeric keys are checked only after every string key has already claimed its
section, largest to smallest, counting from `0` at the command's own leading literal (e.g.
`"show"`): key `N` claims `tokens[N .. end)` — `end` being the left edge of whatever the
previous (string or numeric) match already claimed — and the token right before it
(`tokens[N - 1]`, e.g. a dynamic alias no literal key could match) is dropped along with it.
See {@link InkHashtagCommandInfo.keySchemas} for a full worked example.
```

***

### name [#name]

\> **name**: `string`

Defined in: [src/handlers/interfaces/HashtagHandler.ts:74](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L74)

A unique name that identifies this handler.
Used for documentation and debugging purposes.

***

### validation [#validation]

\> **validation**: `RegExp` | `ZodType`\<`string`\[], `unknown`, `$ZodTypeInternals`\<`string`\[], `unknown`>>

Defined in: [src/handlers/interfaces/HashtagHandler.ts:98](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L98)

Determines whether this handler should be invoked for a given command.

* `RegExp` – the command tokens are joined with a space (`script.join(" ")`) and tested
  against the regular expression. The handler is invoked only if the regex matches.
* `ZodType<string[]>` – the command token array is validated with
  `schema.safeParse(script)`. The handler is invoked only if validation succeeds.

#### Example [#example]

```ts
// RegExp: only handle commands that start with "navigate"
validation: /^navigate\b/

// Zod: only handle commands whose first element is "navigate" and second is a non-empty string
import { z } from "zod"
validation: z.tuple([z.literal("navigate"), z.string().min(1)]).rest(z.string())
```


# Interface: PixiVNJson (/jsdoc/pixi-vn-ink/index/interfaces/PixiVNJson)



Defined in: node\_modules/@drincs/pixi-vn-json/dist/schema.d.ts:19

PixiVNJson It can be defined as a programming language to write a narrative written in json.

## Properties [#properties]

### $schema? [#schema]

\> `optional&#x60; &#x2A;*$schema?**: `string`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/schema.d.ts:30

The URI of the JSON Schema that describes and validates this document.

You can point to a specific version of the schema, for example:

* `"https://pixi-vn.com/schemas/1.13.0/schema.json"` — pin to a specific version
* `"https://pixi-vn.com/schemas/latest/schema.json"` — always use the latest version

Most editors (VS Code, WebStorm, etc.) use this field to provide
auto-completion, hover documentation, and validation for the document.

***

### initialOperations? [#initialoperations]

\> `optional` &#x2A;*initialOperations?**: (`PixiVNJsonValueSet` | `PixiVNJsonIfElse`\<`PixiVNJsonValueSet`>)\[]

Defined in: node\_modules/@drincs/pixi-vn-json/dist/schema.d.ts:36

The operations to be executed before the narrative starts.
For the set storage: They will be set only if there are no variables with the same key already.
For the det tempstorage: if there are variables with the same key already, they will be overwritten.

***

### labels? [#labels]

\> `optional` &#x2A;*labels?**: `PixiVNJsonLabels`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/schema.d.ts:40

The labels to be used in the narrative. They will be added to the system


# Type Alias: CharacterIdSource (/jsdoc/pixi-vn-ink/index/type-aliases/CharacterIdSource)



\> **CharacterIdSource** = `string` | \{ `id`: `string`; }

Defined in: [src/converter/type.ts:4](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/converter/type.ts#L4)

A character id, or any object carrying one (e.g. a `CharacterInterface` / `RegisteredCharacters.values()`).


# Type Alias: HashtagHandler (/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)



\> **HashtagHandler** = (`command`, `props`, `convertListStringToObj`) => `boolean` | `string` | `Promise`\<`boolean` | `string`>

Defined in: [src/handlers/interfaces/HashtagHandler.ts:19](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L19)

A handler function invoked for each Hashtag-Command that passes the [HashtagHandlerOptions.validation](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions#validation) check.

## Parameters [#parameters]

### command [#command]

`string`\[]

The Hashtag-Command split into tokens. Corresponds to a line starting with `#`.
For example `# navigate scene_name "Hello World"` becomes `["navigate", "scene_name", "Hello World"]`.
Use `""` to embed a literal space inside a single token.

### props [#props]

`StepLabelProps`

The properties of the current step.

### convertListStringToObj [#convertliststringtoobj]

(`listParm`) => `object`

Utility function that converts an alternating key/value list into
a plain object. For example `["name", "John", "age", "20"]` → `{ name: "John", age: 20 }`.

## Returns [#returns]

`boolean` | `string` | `Promise`\<`boolean` | `string`>

* `true` – the command was handled; stop processing further handlers and skip the default interpreter.
  * A `string` – treat the returned value as a new Hashtag-Command and re-interpret it.
  * `false` / `Promise<false>` – not handled; pass to the next registered handler.


# Type Alias: MapperHandler (/jsdoc/pixi-vn-ink/index/type-aliases/MapperHandler)



\> **MapperHandler** = (`list`, `step`) => `PixiVNJsonOperation` | `undefined`

Defined in: [src/handlers/interfaces/HashtagHandler.ts:53](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/interfaces/HashtagHandler.ts#L53)

A mapper function that converts a specific Hashtag-Command token list into a
PixiVNJsonOperation (or `undefined` when the command only modifies the step without
producing an operation, e.g. `call` / `jump`).

Unlike [HashtagHandler](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler), a mapper is purely synchronous and is **selected** by its
validation rule rather than deciding for itself whether to handle the command.  The selection
logic in [HashtagCommands.convertOperation](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertOperation) tests each mapper's
[HashtagHandlerOptions.validation](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions#validation) against the full token list; only the first matching
mapper is called.

## Parameters [#parameters]

### list [#list]

`string`\[]

### step [#step]

`PixiVNJsonLabelStep`

## Returns [#returns]

`PixiVNJsonOperation` | `undefined`

The PixiVNJsonOperation to enqueue, or `undefined` if the command only produces
side-effects on `step` (such as setting `labelToOpen`).


# Function: setupInkHmrListener() (/jsdoc/pixi-vn-ink/vite-listener/functions/setupInkHmrListener)



\> **setupInkHmrListener**(`options?`): `Promise`\<`void`>

Defined in: [src/vite-listener/plugins.ts:94](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite-listener/plugins.ts#L94)

Sets up HMR listeners for live ink story reloading in the browser.

Call this once in your app entry file.
If available in your `@drincs/pixi-vn` version, call `setupPixivnViteData()`
before this function; otherwise you can safely skip that step.
Handler registration (hashtag commands, text replaces, characters, labels)
is handled server-side by `vitePluginPixivn`'s `content` / `characters` /
`labels` options — no browser POSTs are needed.

## Parameters [#parameters]

### options? [#options]

[`InkHmrListenerOptions`](/jsdoc/pixi-vn-ink/vite-listener/type-aliases/InkHmrListenerOptions) = `{}`

## Returns [#returns]

`Promise`\<`void`>

## See [#see]

[https://pixi-vn.com/ink#vite-plugin](https://pixi-vn.com/ink#vite-plugin)

## Example [#example]

```ts title="main.ts"
// main.ts
import { setupInkHmrListener } from "@drincs/pixi-vn-ink/vite-listener";

const pixivnViteListener = await import("@drincs/pixi-vn/vite-listener").catch((error) => {
  const message = error instanceof Error ? error.message : String(error);
  const code =
    typeof error === "object" && error !== null && "code" in error
      ? String((error as { code?: unknown }).code)
      : "";
  if (
    code === "ERR_MODULE_NOT_FOUND" ||
    code === "ERR_PACKAGE_PATH_NOT_EXPORTED" ||
    message.includes("@drincs/pixi-vn/vite-listener")
  ) return undefined;
  throw error;
});
await pixivnViteListener?.setupPixivnViteData?.();
await setupInkHmrListener();
```


# Type Alias: InkHmrListenerOptions (/jsdoc/pixi-vn-ink/vite-listener/type-aliases/InkHmrListenerOptions)



\> **InkHmrListenerOptions** = `object`

Defined in: [src/vite-listener/plugins.ts:18](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite-listener/plugins.ts#L18)

Options for the Ink HMR listener helpers.

## Properties [#properties]

### characters? [#characters]

\> `optional` &#x2A;*characters?**: readonly [`CharacterIdSource`](/jsdoc/pixi-vn-ink/index/type-aliases/CharacterIdSource)\[]

Defined in: [src/vite-listener/plugins.ts:23](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite-listener/plugins.ts#L23)

Characters forwarded to [importInkText](/jsdoc/pixi-vn-ink/index/functions/importInkText) when an update re-imports raw Ink text (the path
used without `inkJsonOutputPattern`), so `characterId: text` speakers resolve at reload time.


# Function: vitePluginInk() (/jsdoc/pixi-vn-ink/vite/functions/vitePluginInk)



\> **vitePluginInk**(`options?`): `Plugin`

Defined in: [src/vite/plugins.ts:490](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L490)

Creates a Vite plugin that:

* Prevents Hot Module Replacement (HMR) for `.ink` files and instead sends an `ink-updated`
  custom event to the client so that setupInkHmrListener can reload the story.
* Transforms `.ink` files so they can be imported as plain strings.
* Optionally generates a virtual module `virtual:pixi-vn-ink` (when [VitePluginInkOptions.inkGlob](/jsdoc/pixi-vn-ink/vite/interfaces/VitePluginInkOptions#inkglob)
  is provided) that exports all matched ink file contents as a `string[]`, removing the need
  to write a manual glob-import helper.
* Optionally exports the same matched `.ink` files as `.json` to a configurable location
  (when [VitePluginInkOptions.inkJsonOutputPattern](/jsdoc/pixi-vn-ink/vite/interfaces/VitePluginInkOptions#inkjsonoutputpattern) is provided), together with a
  `manifest.json` file for bulk runtime loading with `importPixiVNJson`.

## Parameters [#parameters]

### options? [#options]

[`VitePluginInkOptions`](/jsdoc/pixi-vn-ink/vite/interfaces/VitePluginInkOptions)

Optional plugin configuration.

## Returns [#returns]

`Plugin`

A Vite plugin.

## See [#see]

[https://pixi-vn.com/ink#vite-plugin](https://pixi-vn.com/ink#vite-plugin)

## Examples [#examples]

```ts title="vite.config.ts"
// vite.config.ts – without inkGlob (manual loading)
import { defineConfig } from "vite";
import { vitePluginInk } from "@drincs/pixi-vn-ink/vite";

export default defineConfig({
  plugins: [vitePluginInk()],
});
```

```ts title="vite.config.ts"
// vite.config.ts – with inkGlob (automatic loading via virtual module)
import { defineConfig } from "vite";
import { vitePluginInk } from "@drincs/pixi-vn-ink/vite";

export default defineConfig({
  plugins: [vitePluginInk({ inkGlob: "./ink/**/*.ink" })],
});
```

```ts title="main.ts"
// main.ts
import { importInkText } from "@drincs/pixi-vn-ink";
import { setupInkHmrListener } from "@drincs/pixi-vn-ink/vite-listener";
import inkTexts from "virtual:pixi-vn-ink";

await importInkText(inkTexts);
setupInkHmrListener();
```

```ts title="vite.config.ts"
// vite.config.ts – generate JSON files in public/ink-json too
import { defineConfig } from "vite";
import { vitePluginInk } from "@drincs/pixi-vn-ink/vite";

export default defineConfig({
  plugins: [
    vitePluginInk({
      inkGlob: "./ink/**/*.ink",
      inkJsonOutputPattern: "./public/ink-json/[path][name].json",
    }),
  ],
});
```

```ts title="main.ts"
// Bulk-load the generated JSON files at runtime
import { importPixiVNJson } from "@drincs/pixi-vn-json/interpreter";

const manifest = (await fetch("/ink-json/manifest.json").then((response) =>
  response.json(),
)) as string[];

const stories = await Promise.all(
  manifest.map((url) => fetch(url).then((response) => response.json())),
);

await Promise.all(stories.map((story) => importPixiVNJson(story)));
```


# Interface: InkHashtagCommandInfo (/jsdoc/pixi-vn-ink/vite/interfaces/InkHashtagCommandInfo)



Defined in: [src/parser/types.ts:63](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L63)

Serializable representation of a registered HashtagCommands handler,
as exposed by the pixi-vn-ink Vite dev-server API.

## See [#see]

[https://pixi-vn.com/ink#vite-plugin](https://pixi-vn.com/ink#vite-plugin)

## Properties [#properties]

### deprecated? [#deprecated]

\> `optional` &#x2A;*deprecated?**: `boolean`

Defined in: [src/parser/types.ts:105](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L105)

Whether this handler is deprecated. Matches HashtagHandlerOptions.deprecated.

***

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/parser/types.ts:71](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L71)

Human-readable description of what the handler does.

***

### keySchemas? [#keyschemas]

\> `optional` &#x2A;*keySchemas?**: `Record`\<`string` | `number`, `object`>

Defined in: [src/parser/types.ts:168](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L168)

JSON Schemas (usable with Ajv), keyed by the token that introduces an order-independent
`<key> <value> [<value2> ...]` section of the command's tokens. Matches
HashtagHandlerOptions.keySchemas — already plain JSON Schema objects, so no extra
serialization step is needed (unlike [validation](#validation)).

#### See [#see-1]

InkCompiler.validateKeyedJsonSchemas for how a token list is split into
sections and validated against these schemas.

#### Examples [#examples]

For the command `# wait hours 3 days tomorrow` (tokens
`["wait", "hours", "3", "days", "tomorrow"]`):

```ts
{
  name: "wait-with-options",
  validation: { type: "regexp", source: "^wait\\b", flags: "" },
  keySchemas: {
    wait: {
      type: "object",
      properties: { hours: { type: "number" }, days: { type: "string" } },
      additionalProperties: false,
    },
  },
}
```

`InkCompiler.getHashtagKeySchemaIssues` matches `"wait"` (the right-most, and only,
occurrence) and validates `{ hours: 3, days: "tomorrow" }` against its schema.

For `# show imagecontainer sly props xAlign 0.2 yAlign 1 movein direction right ease anticipate`,
with two independent sections:

```ts
keySchemas: {
  props: { type: "object", properties: { xAlign: { type: "number" }, yAlign: { type: "number" } } },
  movein: { type: "object", properties: { direction: { type: "string" }, ease: { type: "string" } } },
}
```

A key can also be a (positive integer) number — or a string made only of digits, since
object keys are always strings at runtime — instead of a literal token. Numeric keys are
resolved by **position** rather than by token identity, and are checked only after every
string key has already claimed its section (right to left, exactly as above); counting
starts at `0` for the command's own leading literal (e.g. `"show"`). Numeric keys are then
processed largest to smallest: key `N` claims `tokens[N .. end)` as its section (`end` being
the left edge of the previously-claimed section), is validated against its schema, and the
token immediately before it (`tokens[N - 1]`, e.g. a dynamic alias that can't be matched by
literal value) is dropped along with it — so the next, smaller numeric key resumes scanning
to its left.

For `# show spine flowerTop x 220 y 20 with dissolve duration 2` (tokens
`["show","spine","flowerTop","x","220","y","20","with","dissolve","duration","2"]`) with:

```ts
keySchemas: {
  with: {},
  dissolve: { type: "object", properties: { duration: { type: "number" } } },
  3: { type: "object", properties: { x: { type: "number" }, y: { type: "number" } } },
}
```

String keys are resolved first: `"dissolve"` (right-most) claims `{ duration: 2 }`, then
`"with"` claims an empty section — leaving `["show","spine","flowerTop","x","220","y","20"]`
(`"show"` is position `0`) for the numeric pass. Key `3` claims `tokens[3..7)` →
`{ x: 220, y: 20 }`, and also drops `"flowerTop"` (position `2`, the element's dynamic
alias) — nothing is left to check further left.

***

### name [#name]

\> **name**: `string`

Defined in: [src/parser/types.ts:67](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L67)

Unique name that identifies the handler.

***

### validation [#validation]

\> **validation**: `InkValidationInfo`

Defined in: [src/parser/types.ts:101](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/parser/types.ts#L101)

Serializable form of the validation rule.

#### Examples [#examples-1]

A `RegExp` validation (e.g. `/^jump\b/`) serializes to:

```ts
{ type: "regexp", source: "^jump\\b", flags: "" }
```

A Zod validation (e.g. `z.tuple([z.literal("jump"), z.string()])`) serializes to its JSON
Schema form:

```ts
{
  type: "zod",
  schema: {
    type: "array",
    prefixItems: [{ type: "string", const: "jump" }, { type: "string" }],
    minItems: 2,
    maxItems: 2,
  },
}
```

A string-literal validation (e.g. `TextReplaces`' `"all"` / `"characterId"` modes)
serializes to:

```ts
{ type: "literal", value: "all" }
```


# Interface: InkLibraryInfo (/jsdoc/pixi-vn-ink/vite/interfaces/InkLibraryInfo)



Defined in: [src/vite/info-types.ts:45](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L45)

Static information about a running `@drincs/pixi-vn-ink` instance, as returned by
`GET /__pixi-vn-ink/info`.

## See [#see]

[https://pixi-vn.com/ink#vite-plugin](https://pixi-vn.com/ink#vite-plugin)

## Properties [#properties]

### schemaUrl [#schemaurl]

\> **schemaUrl**: `string`

Defined in: [src/vite/info-types.ts:54](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L54)

The JSON Schema URL (`PIXIVNJSON_SCHEMA_URL` from `@drincs/pixi-vn-json/constants`)
embedded as `$schema` in every exported `PixiVNJson` document.

***

### version [#version]

\> **version**: `string`

Defined in: [src/vite/info-types.ts:49](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L49)

This `@drincs/pixi-vn-ink` package's own version (from its `package.json`).


# Interface: InkTextReplaceInfo (/jsdoc/pixi-vn-ink/vite/interfaces/InkTextReplaceInfo)



Defined in: [src/vite/info-types.ts:16](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L16)

Serializable representation of a registered TextReplaces handler,
as exposed by the pixi-vn-ink Vite dev-server API.

Instances of this type are returned by
`GET /__pixi-vn-ink/text-replaces`
and accepted by
`POST /__pixi-vn-ink/text-replaces`.

## See [#see]

[https://pixi-vn.com/ink#vite-plugin](https://pixi-vn.com/ink#vite-plugin)

## Properties [#properties]

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/vite/info-types.ts:26](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L26)

Human-readable description of what the handler does.
Matches ReplaceHandlerOptions.description.

***

### name [#name]

\> **name**: `string`

Defined in: [src/vite/info-types.ts:21](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L21)

Unique name that identifies the handler.
Matches ReplaceHandlerOptions.name.

***

### type? [#type]

\> `optional` &#x2A;*type?**: `"before-translation"` | `"after-translation"`

Defined in: [src/vite/info-types.ts:36](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L36)

When the handler runs relative to the translation step.
Matches ReplaceHandlerOptions.type.

#### Default [#default]

```ts
"before-translation"
```

***

### validation [#validation]

\> **validation**: `InkValidationInfo`

Defined in: [src/vite/info-types.ts:30](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/info-types.ts#L30)

Serializable form of ReplaceHandlerOptions.validation.


# Interface: VitePluginInkOptions (/jsdoc/pixi-vn-ink/vite/interfaces/VitePluginInkOptions)



Defined in: [src/vite/plugins.ts:337](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L337)

Options for [vitePluginInk](/jsdoc/pixi-vn-ink/vite/functions/vitePluginInk).

## Properties [#properties]

### characters? [#characters]

\> `optional` &#x2A;*characters?**: readonly `string`\[]

Defined in: [src/vite/plugins.ts:397](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L397)

Character ids to recognise when splitting `characterId: text` speakers in `.ink` files.
Characters from `vite-plugin-pixi-vn` (its `api.characters`) are picked up automatically;
use this to supply ids explicitly when it is not present.

#### Example [#example]

```ts
["alice", "james"]
```

***

### inkGlob? [#inkglob]

\> `optional` &#x2A;*inkGlob?**: `string`

Defined in: [src/vite/plugins.ts:355](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L355)

Glob pattern specifying which `.ink` files to scan and load automatically.

When provided, a virtual module `virtual:pixi-vn-ink` is generated and can be imported
anywhere in your app. It exports, as its default export, an array of strings (`string[]`)
containing the raw text of every matched `.ink` file.

This eliminates the need to manually write a glob-import helper such as `getInkText`.

The pattern follows the standard glob format used by
[Vite's `import.meta.glob`](https://vite.dev/guide/features#glob-import).
The plugin resolves it from Vite `root` and internally normalizes it to a root-absolute
pattern for the generated virtual module.

#### Examples [#examples]

```ts
"./ink/**/*.ink"
```

```ts
"/src/stories/**/*.ink"
```

***

### inkJsonManifestPath? [#inkjsonmanifestpath]

\> `optional` &#x2A;*inkJsonManifestPath?**: `string`

Defined in: [src/vite/plugins.ts:389](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L389)

Custom path (including filename) for the manifest file generated alongside the exported JSON
files.

When [VitePluginInkOptions.inkJsonOutputPattern](#inkjsonoutputpattern) is set, a `manifest.json` file listing
all exported JSON URLs is written into the output base directory by default. Use this option
to override the manifest file location and/or its name.

Relative values are resolved from Vite `root`.

#### Examples [#examples-1]

```ts
"./public/ink-json/index.json"
```

```ts
"./generated/manifest.json"
```

***

### inkJsonOutputPattern? [#inkjsonoutputpattern]

\> `optional` &#x2A;*inkJsonOutputPattern?**: `string`

Defined in: [src/vite/plugins.ts:375](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/plugins.ts#L375)

Output pattern for generated JSON files from matched `.ink` sources.

When provided together with [VitePluginInkOptions.inkGlob](#inkglob), each matched `.ink` file is
converted with `convertInkToJson` and written to the rendered destination.

Placeholders:

* `[name]`: filename without extension
* `[ext]`: source extension without dot
* `[extname]`: source extension with dot
* `[file]`: source path relative to the `inkGlob` static base
* `[path]`: source directory relative to the `inkGlob` static base (with trailing slash)
* `[dir]`: source directory relative to Vite `root` (with trailing slash)

Relative values are resolved from Vite `root`.

#### Examples [#examples-2]

```ts
"./public/ink-json/[path][name].json"
```

```ts
"/absolute/output/[dir][name].json"
```


# Variable: INK_DEV_API_HASHTAG_COMMANDS (/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_HASHTAG_COMMANDS)



\> `const` **INK\_DEV\_API\_HASHTAG\_COMMANDS**: `"/__pixi-vn-ink/hashtag-commands"` = `"/__pixi-vn-ink/hashtag-commands"`

Defined in: [src/vite/costants.ts:21](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/costants.ts#L21)

Dev-server endpoint that exposes and accepts the list of registered
HashtagCommands handlers as [InkHashtagCommandInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkHashtagCommandInfo) objects.

* `GET  /__pixi-vn-ink/hashtag-commands` – returns the stored `InkHashtagCommandInfo[]` as JSON.
* `POST /__pixi-vn-ink/hashtag-commands` – replaces the stored list with the JSON body
  (`InkHashtagCommandInfo[]`). Called automatically by setupInkHmrListener on
  startup and after each HMR update.
* `InkHashtagCommandInfo.validation` serializes the original validation rule:
  * `{ type: "regexp", source, flags }`
  * `{ type: "zod", schema }` (JSON Schema generated from Zod)
  * `{ type: "literal", value }`

## Example [#example]

```ts
// VS Code extension reading the registered handlers
const res = await fetch("http://localhost:5173/__pixi-vn-ink/hashtag-commands");
const commands: InkHashtagCommandInfo[] = await res.json();
```


# Variable: INK_DEV_API_INFO (/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_INFO)



\> `const` **INK\_DEV\_API\_INFO**: `"/__pixi-vn-ink/info"` = `"/__pixi-vn-ink/info"`

Defined in: [src/vite/costants.ts:64](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/costants.ts#L64)

Dev-server endpoint that exposes static information about this library instance, as an
[InkLibraryInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkLibraryInfo) object.

* `GET /__pixi-vn-ink/info` – returns `{ version, schemaUrl }`, where `version` is this
  `@drincs/pixi-vn-ink` package's own version and `schemaUrl` is the `PIXIVNJSON_SCHEMA_URL`
  (from `@drincs/pixi-vn-json/constants`) embedded as `$schema` in every exported `PixiVNJson`
  document.
* Read-only: unlike [INK\_DEV\_API\_HASHTAG\_COMMANDS](/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_HASHTAG_COMMANDS) / [INK\_DEV\_API\_TEXT\_REPLACES](/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_TEXT_REPLACES),
  there is no `POST` — both values are static per plugin instance and don't depend on
  SSR-loading the user's content, so there's nothing for setupInkHmrListener to push.

## Example [#example]

```ts
// VS Code extension reading the library version / schema URL
const res = await fetch("http://localhost:5173/__pixi-vn-ink/info");
const { version, schemaUrl }: InkLibraryInfo = await res.json();
```


# Variable: INK_DEV_API_TEXT_REPLACES (/jsdoc/pixi-vn-ink/vite/variables/INK_DEV_API_TEXT_REPLACES)



\> `const` **INK\_DEV\_API\_TEXT\_REPLACES**: `"/__pixi-vn-ink/text-replaces"` = `"/__pixi-vn-ink/text-replaces"`

Defined in: [src/vite/costants.ts:43](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/vite/costants.ts#L43)

Dev-server endpoint that exposes and accepts the list of registered
TextReplaces handlers as [InkTextReplaceInfo](/jsdoc/pixi-vn-ink/vite/interfaces/InkTextReplaceInfo) objects.

* `GET  /__pixi-vn-ink/text-replaces` – returns the stored `InkTextReplaceInfo[]` as JSON.
* `POST /__pixi-vn-ink/text-replaces` – replaces the stored list with the JSON body
  (`InkTextReplaceInfo[]`). Called automatically by setupInkHmrListener on
  startup and after each HMR update.
* `InkTextReplaceInfo.validation` serializes the original validation rule:
  * `{ type: "regexp", source, flags }`
  * `{ type: "zod", schema }` (JSON Schema generated from Zod)
  * `{ type: "literal", value }` for string modes like `"all"` / `"characterId"`

## Example [#example]

```ts
// VS Code extension reading the registered text-replace handlers
const res = await fetch("http://localhost:5173/__pixi-vn-ink/text-replaces");
const replaces: InkTextReplaceInfo[] = await res.json();
```


# HashtagCommands (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands)



This is a container for the functions related to the Hashtag-Command, a system that allows to run custom operations from the Ink command using a special syntax. The Hashtag-Command is a string that starts with `#` and is followed by the operation type and its parameters. The system will interpret the Hashtag-Command and run the corresponding operation before running the step. The developer can also add custom handlers to run custom operations from the Hashtag-Command using the [add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add) function.

## Functions [#functions]

* [add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add)
* [addMapper](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/addMapper)
* [clear](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/clear)
* [clearMappers](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/clearMappers)
* [convertListStringToObj](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertListStringToObj)
* [convertOperation](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertOperation)
* [convertTagTolist](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertTagTolist)
* [info](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/info)
* [mergeJsonBlocks](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/mergeJsonBlocks)
* [run](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/run)


# TextReplaces (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces)



Manages text replacement handlers that process content enclosed in square brackets (`[key]`).

Handlers are called in the order they were added. For each handler, the current text is scanned
for all `[key]` patterns. If the handler's `validation` matches a key, the handler is
invoked with that key. If the handler returns a string, all occurrences of `[key]` are replaced
with the returned value. After a handler finishes processing the text, the next handler starts
on the updated text.

Each handler specifies whether it runs before or after translation via the `type` field in its
options (defaults to `"after-translation"`).

## Example [#example]

```ts title="content/text-replaces.ts"
import { TextReplaces } from 'pixi-vn-ink'
import { getCharacterById } from "@drincs/pixi-vn";

// Replace [characterId] with the character's display name
TextReplaces.add(
    (key) => {
        const character = getCharacterById(key)
        return character?.name
    },
    {
        name: "character-name",
        description: "Replaces character IDs with their display names",
        validation: /^[a-z_]+$/,
        type: "after-translation",
    }
)
// "Hello [john], meet [jane]!" -> "Hello John, meet Jane!"
```

## Variables [#variables]

* [options](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/variables/options)

## Functions [#functions]

* [add](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/add)
* [info](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/info)
* [remove](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/remove)
* [replace](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/replace)
* [runI18nPreStep](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/runI18nPreStep)


# VariableGetter (/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter)



## Functions [#functions]

* [add](/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/add)
* [clear](/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/clear)
* [getLogichValue](/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/getLogichValue)


# Function: add() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add)



## Call Signature [#call-signature]

\> **add**(`handler`): `void`

Defined in: [src/handlers/hashtag-commands.ts:65](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L65)

### Parameters [#parameters]

#### handler [#handler]

[`HashtagHandler`](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)

### Returns [#returns]

`void`

### Deprecated [#deprecated]

Use the two-parameter overload with [HashtagHandlerOptions](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions) instead.

## Call Signature [#call-signature-1]

\> **add**(`handler`, `opts`): `void`

Defined in: [src/handlers/hashtag-commands.ts:90](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L90)

This function add a new handler (middleware) that will be called before the system interprets a possible Hashtag-Command that starts with `#`.
The developer can use this function to run a custom Hashtag-Command. If the function returns `true`, the system will not interpret the Hashtag-Command.
If returns a array of strings, the system will interpret the array as a new Hashtag-Command.

### Parameters [#parameters-1]

#### handler [#handler-1]

[`HashtagHandler`](/jsdoc/pixi-vn-ink/index/type-aliases/HashtagHandler)

The handler to run a custom Hashtag-Command

#### opts [#opts]

[`HashtagHandlerOptions`](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)

Configuration for this handler, including its name, optional description, and validation rule.

### Returns [#returns-1]

`void`

### Example [#example]

```ts title="content/ink/hashtag-commands.ts"
import { HashtagCommands } from 'pixi-vn-ink'

HashtagCommands.add((script, props, convertListStringToObj) => {
   // script: # navigate scene_name prop1 "value 1" prop2 "value 2"
   if (script[0] === "navigate" && script.length > 1) {
       let prop = undefined
       if (script.length > 2) {
           prop = convertListStringToObj(script.slice(2))
       }
       navigateTo(script[1], prop)
       return true
   }
   return false
}, { name: "navigate-command", validation: /^navigate\b/ })
```


# Function: addMapper() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/addMapper)



\> **addMapper**(`handler`, `opts`): `void`

Defined in: [src/handlers/hashtag-commands.ts:146](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L146)

Registers a new mapper that converts a specific Hashtag-Command pattern into a
PixiVNJsonOperation.

Mappers are evaluated in registration order by
[HashtagCommands.convertOperation](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertOperation) **before** the built-in `switch` table.  The
first mapper whose [HashtagHandlerOptions.validation](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions#validation) matches the raw token list is
called and its return value is used as the operation; subsequent mappers (and the built-in
switch) are skipped.

Use `addMapper` instead of [add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add) when you want to extend or override the built-in
command → operation translation without intercepting the full handler pipeline.

## Parameters [#parameters]

### handler [#handler]

[`MapperHandler`](/jsdoc/pixi-vn-ink/index/type-aliases/MapperHandler)

A [MapperHandler](/jsdoc/pixi-vn-ink/index/type-aliases/MapperHandler) that receives the full token list and the current
step, and returns either a PixiVNJsonOperation or `undefined`.

### opts [#opts]

[`HashtagHandlerOptions`](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)

Configuration including a name, optional description, and the validation rule
used to select this mapper.

## Returns [#returns]

`void`

## Example [#example]

```ts title="content/ink/hashtag-commands.ts"
import { HashtagCommands } from 'pixi-vn-ink'
import { z } from 'zod'

// Handle: # navigate scene_name
HashtagCommands.addMapper(
    (list, step) => {
        step.labelToOpen = { label: list[1], type: "jump" }
        step.goNextStep = undefined
        return undefined
    },
    {
        name: "navigate-command",
        validation: z.tuple([z.literal("navigate"), z.string()]),
    },
)
```


# Function: clear() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/clear)



\> **clear**(): `void`

Defined in: [src/handlers/hashtag-commands.ts:153](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L153)

This function clear all the handlers added with the [add](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/add) function.

## Returns [#returns]

`void`


# Function: clearMappers() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/clearMappers)



\> **clearMappers**(): `void`

Defined in: [src/handlers/hashtag-commands.ts:163](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L163)

Removes all mapper handlers registered with [addMapper](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/addMapper).

Useful in tests to reset the mapper state between test cases, or in applications that need
to replace the default mappers with a custom set.

## Returns [#returns]

`void`


# Function: convertListStringToObj() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertListStringToObj)



\> **convertListStringToObj**(`listParm`): `object`

Defined in: [src/handlers/hashtag-commands.ts:329](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L329)

For example:
Into Ink text:
duration 3 name "C J" surname Smith position "\{ x: 2, y 3 }"
into string list:
\["duration", "3", "x", "2", "y", "3", "name", "C J", "surname", "Smith", "position", "\{ x: 2, y 3 }"]
into object:
\{ "duration": 3, "x": 2, "y": 3, "name": "C J", "surname": "Smith", "position": \{ x: 2, y 3 } }

## Parameters [#parameters]

### listParm [#listparm]

`string`\[]

## Returns [#returns]

`object`


# Function: convertOperation() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertOperation)



\> **convertOperation**(`list`, `step`, `options?`): `PixiVNJsonOperation` | `undefined`

Defined in: [src/handlers/hashtag-commands.ts:281](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L281)

## Parameters [#parameters]

### list [#list]

`string`\[]

### step [#step]

`PixiVNJsonLabelStep`

### options? [#options]

#### silent? [#silent]

`boolean`

When `true`, suppresses the "The operation is not valid" error log on a mapper
miss. Callers that only speculatively probe the built-in `.addMapper()` table —
e.g. to decide whether a hashtag script can be resolved eagerly at parse time,
before falling back to a deferred `operationtoconvert` step that will later be
resolved through the full [run](/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/run) pipeline (custom `.add()` handlers included)
— should pass `silent: true`. Otherwise every hashtag command registered only via
`.add()` (never a mapper) would log a false "not valid" error on every parse, even
though it resolves correctly once `run()` reaches it.

## Returns [#returns]

`PixiVNJsonOperation` | `undefined`


# Function: convertTagTolist() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/convertTagTolist)



\> **convertTagTolist**(`tag`, `options?`): `string`\[]

Defined in: [src/handlers/hashtag-commands.ts:199](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L199)

## Parameters [#parameters]

### tag [#tag]

`string`

### options? [#options]

#### mergeInkVariables? [#mergeinkvariables]

`boolean`

## Returns [#returns]

`string`\[]


# Function: info() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/info)



\> **info**(): [`HashtagHandlerOptions`](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)\[]

Defined in: [src/handlers/hashtag-commands.ts:105](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L105)

This function returns an array of all the registered handlers with their configuration. It can be used to get information about the registered handlers, for example, to display a list of available Hashtag-Commands in a debug menu.

## Returns [#returns]

[`HashtagHandlerOptions`](/jsdoc/pixi-vn-ink/index/interfaces/HashtagHandlerOptions)\[]

An array of all the registered handlers with their configuration.


# Function: mergeJsonBlocks() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/mergeJsonBlocks)



\> **mergeJsonBlocks**(`tokens`): `string`\[]

Defined in: [src/handlers/hashtag-commands.ts:419](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L419)

Merges valid JSON-like blocks delimited by \{ }
into single strings.

Rules:

* Braces must be balanced.
* Inner blocks are processed before parent blocks.
* Every generated block is validated with JSON5.parse().
* If a block is invalid:
  * the block remains split
  * all parent blocks also remain split
* Unmatched braces are treated as normal strings.

## Parameters [#parameters]

### tokens [#tokens]

`string`\[]

## Returns [#returns]

`string`\[]


# Function: run() (/jsdoc/pixi-vn-ink/index/namespaces/HashtagCommands/functions/run)



\> **run**(`tag`, `step`, `props`): `Promise`\<`PixiVNJsonOperation` | `undefined`>

Defined in: [src/handlers/hashtag-commands.ts:174](https://github.com/DRincs-Productions/pixi-vn-ink/blob/8d45a4e5f29997844c9784f1a713b33e5400b7d0/src/handlers/hashtag-commands.ts#L174)

This function run the Hashtag-Command, it will be called before running the step. It will interpret the Hashtag-Command and return the corresponding operation to run before the step. If the Hashtag-Command is not valid, it will return undefined and the system will run the step normally.

## Parameters [#parameters]

### tag [#tag]

`string`

The Hashtag-Command to interpret, it is the string that starts with `#` and is followed by the operation type and its parameters.

### step [#step]

`PixiVNJsonLabelStep`

The step that will be run after the Hashtag-Command, the system will run the Hashtag-Command before running the step, so the operation returned by this function will be executed before the step. The step can be modified by the Hashtag-Command, for example, it can change the dialogue or the goNextStep properties of the step.

### props [#props]

`StepLabelProps`

The properties of the step label, it can be used to get information about the step and the label, for example, the label name or the step index. It can also be used to store custom properties that can be accessed by the handlers of the Hashtag-Command.

## Returns [#returns]

`Promise`\<`PixiVNJsonOperation` | `undefined`>

The operation to run before the step, if the Hashtag-Command is not valid, it will return undefined and the system will run the step normally.


# Function: add() (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/add)



\> **add**(`fn`, `handlerOptions`): `void`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:167

Registers a new replacement handler.

Handlers are executed in the order they are added. The first handler added runs first.

The TranslatorManager translation pipeline automatically calls
[TextReplaces.replace](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/replace) for both phases (`"before-translation"` and
`"after-translation"`), so no additional setup is required after calling `add`.

## Parameters [#parameters]

### fn [#fn]

`ReplaceHandler`

The handler function. Receives the key found inside `[...]` and should return
the replacement string, or `undefined` to leave that token unchanged.

### handlerOptions [#handleroptions]

`ReplaceHandlerOptions`

Configuration for this handler, including its name, optional
description, validation regex, and execution phase.

## Returns [#returns]

`void`

## Example [#example]

```ts title="content/text-replaces.ts"
import { TextReplaces } from 'pixi-vn-ink'

TextReplaces.add(
    (key) => key === "player" ? "Mario" : undefined,
    {
        name: "player-name",
        validation: /^player$/,
    }
)
```


# Function: info() (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/info)



\> **info**(): `ReplaceHandlerOptions`\[]

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:182

Returns metadata for all registered handlers, in registration order.

## Returns [#returns]

`ReplaceHandlerOptions`\[]

An array of ReplaceHandlerOptions for each registered handler.


# Function: remove() (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/remove)



\> **remove**(`fn`): `void`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:176

Removes a previously registered handler function.

Only the first registration matching `fn` is removed. If the same function was added
multiple times, subsequent registrations remain.

## Parameters [#parameters]

### fn [#fn]

`ReplaceHandler`

The handler function to remove.

## Returns [#returns]

`void`


# Function: replace() (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/replace)



\> **replace**(`text`, `replaceOptions`): `string`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:201

Applica tutti gli handler registrati del tipo specificato al testo dato.

Questa funzione NON esegue più la pre-elaborazione i18n automaticamente.
Se vuoi applicare la pre-elaborazione i18n, usa prima [runI18nPreStep](/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/runI18nPreStep) sul testo.

## Parameters [#parameters]

### text [#text]

`string`

Il testo sorgente da processare.

### replaceOptions [#replaceoptions]

Specifica quale fase di handler eseguire.

#### type [#type]

`"before-translation"` | `"after-translation"`

Quale fase di handler eseguire.

## Returns [#returns]

`string`

Il testo dopo che tutti gli handler sono stati applicati.

## Example [#example]

```ts
// Solo handler di tipo "before-translation"
TextReplaces.replace("Ciao [name]", { type: "before-translation" })

// Con pre-elaborazione i18n:
let t = TextReplaces.runI18nPreStep("Ciao [name]");
t = TextReplaces.replace(t, { type: "before-translation" });
```


# Function: runI18nPreStep() (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/functions/runI18nPreStep)



\> **runI18nPreStep**(`text`): `string`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:217

Esegue la pre-elaborazione i18n su tutti gli handler registrati con `i18nInterpolation: true`.

Per ogni handler con questa opzione, la prima occorrenza di ogni `[key]` valida viene sostituita con `{{[key]}}`.

## Parameters [#parameters]

### text [#text]

`string`

Il testo da processare.

## Returns [#returns]

`string`

Il testo dopo la pre-elaborazione i18n.

## Example [#example]

```ts
// Pre-elabora tutte le variabili i18n:
const pre = TextReplaces.runI18nPreStep("Ciao [name]");
```


# Variable: options (/jsdoc/pixi-vn-ink/index/namespaces/TextReplaces/variables/options)



\> `const` **options**: `object`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/translator.d.ts:134

Configuration options for the `TextReplaces` system.

## Type Declaration [#type-declaration]

### replaceRegex [#replaceregex]

\> **replaceRegex**: `RegExp`

The regex used to find replacement tokens in the text (e.g. `[key]`).

#### Default [#default]

```ts
/\[([^\]]+)\]/
```


# Function: add() (/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/add)



\> **add**(`handler`): `void`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/VariableGetter-ZDA6kdah.d.ts:20

Registers a new middleware handler into the resolution chain.
Handlers are invoked in the order they were added.

## Parameters [#parameters]

### handler [#handler]

`VariableGetterHandler`

The middleware handler to register.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/clear)



\> **clear**(): `void`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/VariableGetter-ZDA6kdah.d.ts:24

Removes all registered middleware handlers, restoring the default resolution behaviour.

## Returns [#returns]

`void`


# Function: getLogichValue() (/jsdoc/pixi-vn-ink/index/namespaces/VariableGetter/functions/getLogichValue)



\> **getLogichValue**\<`T`>(`value`, `props?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn-json/dist/VariableGetter-ZDA6kdah.d.ts:33

Resolves a JSON logic value, running it through all registered middleware handlers
before falling back to the built-in storage/arithmetic/condition evaluator.

## Type Parameters [#type-parameters]

### T [#t]

`T` = `StorageElementType`

## Parameters [#parameters]

### value [#value]

`any`

The value or logic expression to resolve.

### props? [#props]

`StepLabelProps`

The current step label props passed to each handler.

## Returns [#returns]

`T` | `undefined`

The resolved value, or `undefined`.


# Navigation Quest Time Routine (NQTR) (/jsdoc/nqtr)



![cover](https://github.com/user-attachments/assets/9b514c5c-8243-4cdd-9129-ca5e45caec62)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/nqtr" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/nqtr?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/nqtr" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/nqtr" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/nqtr" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/nqtr?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/nqtr" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/nqtr" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

**What is NQTR?** NQTR (Navigation Quest Time Routine) is an extension for Pixi’VN that adds advanced systems for navigation, quests, time management, and game state handling. It is fully customizable and extensible, enabling developers to implement complex game mechanics with ease.

## Installation [#installation]

If you are starting a new Pixi’VN project, it is recommended to use one of the [templates](https://pixi-vn.com/start#project-initialization) that already include NQTR.

To install the NQTR package in an existing JavaScript project, use one of the following commands:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/nqtr
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/nqtr
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Features [#features]

NQTR provides the following features (the order is important):

1. [Navigation and map](https://pixi-vn.com/nqtr/navigation)
2. [Time system](https://pixi-vn.com/nqtr/time)
3. [Activity](https://pixi-vn.com/nqtr/activity)
4. [Routine](https://pixi-vn.com/nqtr/routine)
5. [Quest system](https://pixi-vn.com/nqtr/quest)


# @drincs/nqtr (/jsdoc/nqtr/modules)



## Modules [#modules]

* [index](/jsdoc/nqtr/index)
* [ink](/jsdoc/nqtr/ink)
* [vite](/jsdoc/nqtr/vite)


# ink (/jsdoc/nqtr/ink)



## Functions [#functions]

* [createNqtrHandler](/jsdoc/nqtr/ink/functions/createNqtrHandler)
* [~~nqtrHandler~~](/jsdoc/nqtr/ink/functions/nqtrHandler)


# vite (/jsdoc/nqtr/vite)



## Interfaces [#interfaces]

* [VitePluginNqtrOptions](/jsdoc/nqtr/vite/interfaces/VitePluginNqtrOptions)

## Functions [#functions]

* [vitePluginNqtr](/jsdoc/nqtr/vite/functions/vitePluginNqtr)


# index (/jsdoc/nqtr/index)



## Namespaces [#namespaces]

* [RegisteredActivities](/jsdoc/nqtr/index/namespaces/RegisteredActivities)
* [RegisteredCommitments](/jsdoc/nqtr/index/namespaces/RegisteredCommitments)
* [RegisteredLocations](/jsdoc/nqtr/index/namespaces/RegisteredLocations)
* [RegisteredMaps](/jsdoc/nqtr/index/namespaces/RegisteredMaps)
* [RegisteredQuests](/jsdoc/nqtr/index/namespaces/RegisteredQuests)
* [RegisteredRooms](/jsdoc/nqtr/index/namespaces/RegisteredRooms)

## Classes [#classes]

* [ActivityBaseModel](/jsdoc/nqtr/index/classes/ActivityBaseModel)
* [ActivityStoredClass](/jsdoc/nqtr/index/classes/ActivityStoredClass)
* [CommitmentBaseModel](/jsdoc/nqtr/index/classes/CommitmentBaseModel)
* [CommitmentStoredClass](/jsdoc/nqtr/index/classes/CommitmentStoredClass)
* [LocationBaseModel](/jsdoc/nqtr/index/classes/LocationBaseModel)
* [LocationStoredClass](/jsdoc/nqtr/index/classes/LocationStoredClass)
* [MapBaseModel](/jsdoc/nqtr/index/classes/MapBaseModel)
* [MapStoredClass](/jsdoc/nqtr/index/classes/MapStoredClass)
* [QuestBaseModel](/jsdoc/nqtr/index/classes/QuestBaseModel)
* [QuestStoredClass](/jsdoc/nqtr/index/classes/QuestStoredClass)
* [RoomBaseModel](/jsdoc/nqtr/index/classes/RoomBaseModel)
* [RoomStoredClass](/jsdoc/nqtr/index/classes/RoomStoredClass)
* [StageBaseModel](/jsdoc/nqtr/index/classes/StageBaseModel)
* [StageStoredClass](/jsdoc/nqtr/index/classes/StageStoredClass)

## Interfaces [#interfaces]

* [ActiveScheduling](/jsdoc/nqtr/index/interfaces/ActiveScheduling)
* [ActivityInterface](/jsdoc/nqtr/index/interfaces/ActivityInterface)
* [ActivityProps](/jsdoc/nqtr/index/interfaces/ActivityProps)
* [ActivityStoredClassProps](/jsdoc/nqtr/index/interfaces/ActivityStoredClassProps)
* [CommitmentInfo](/jsdoc/nqtr/index/interfaces/CommitmentInfo)
* [CommitmentInterface](/jsdoc/nqtr/index/interfaces/CommitmentInterface)
* [CommitmentProps](/jsdoc/nqtr/index/interfaces/CommitmentProps)
* [CommitmentStoredClassProps](/jsdoc/nqtr/index/interfaces/CommitmentStoredClassProps)
* [DateSchedulingInterface](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)
* [LocationBaseModelProps](/jsdoc/nqtr/index/interfaces/LocationBaseModelProps)
* [LocationInterface](/jsdoc/nqtr/index/interfaces/LocationInterface)
* [MapBaseModelProps](/jsdoc/nqtr/index/interfaces/MapBaseModelProps)
* [MapInterface](/jsdoc/nqtr/index/interfaces/MapInterface)
* [NqtrActivityIds](/jsdoc/nqtr/index/interfaces/NqtrActivityIds)
* [NqtrCommitmentIds](/jsdoc/nqtr/index/interfaces/NqtrCommitmentIds)
* [NqtrLocationIds](/jsdoc/nqtr/index/interfaces/NqtrLocationIds)
* [NqtrMapIds](/jsdoc/nqtr/index/interfaces/NqtrMapIds)
* [NqtrQuestIds](/jsdoc/nqtr/index/interfaces/NqtrQuestIds)
* [NqtrRoomIds](/jsdoc/nqtr/index/interfaces/NqtrRoomIds)
* [OnRunProps](/jsdoc/nqtr/index/interfaces/OnRunProps)
* [QuestInterface](/jsdoc/nqtr/index/interfaces/QuestInterface)
* [QuestProps](/jsdoc/nqtr/index/interfaces/QuestProps)
* [QuestStoredClassProps](/jsdoc/nqtr/index/interfaces/QuestStoredClassProps)
* [RoomBaseModelProps](/jsdoc/nqtr/index/interfaces/RoomBaseModelProps)
* [RoomInterface](/jsdoc/nqtr/index/interfaces/RoomInterface)
* [StageInterface](/jsdoc/nqtr/index/interfaces/StageInterface)
* [StageProps](/jsdoc/nqtr/index/interfaces/StageProps)
* [StageStoredClassProps](/jsdoc/nqtr/index/interfaces/StageStoredClassProps)
* [TimeSchedulingInterface](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)

## Type Aliases [#type-aliases]

* [ActivityIdType](/jsdoc/nqtr/index/type-aliases/ActivityIdType)
* [CommitmentIdType](/jsdoc/nqtr/index/type-aliases/CommitmentIdType)
* [ExecutionType](/jsdoc/nqtr/index/type-aliases/ExecutionType)
* [ITimeStlot](/jsdoc/nqtr/index/type-aliases/ITimeStlot)
* [LocationIdType](/jsdoc/nqtr/index/type-aliases/LocationIdType)
* [MapIdType](/jsdoc/nqtr/index/type-aliases/MapIdType)
* [OnRunAsyncFunction](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)
* [OnRunEvent](/jsdoc/nqtr/index/type-aliases/OnRunEvent)
* [OnRunFunction](/jsdoc/nqtr/index/type-aliases/OnRunFunction)
* [QuestIdType](/jsdoc/nqtr/index/type-aliases/QuestIdType)
* [QuestsRequiredType](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)
* [RoomIdType](/jsdoc/nqtr/index/type-aliases/RoomIdType)
* [TimeSettings](/jsdoc/nqtr/index/type-aliases/TimeSettings)

## Variables [#variables]

* [default](/jsdoc/nqtr/index/variables/default)
* [navigator](/jsdoc/nqtr/index/variables/navigator)
* [questsNotebook](/jsdoc/nqtr/index/variables/questsNotebook)
* [routine](/jsdoc/nqtr/index/variables/routine)
* [timeTracker](/jsdoc/nqtr/index/variables/timeTracker)


# Function: createNqtrHandler() (/jsdoc/nqtr/ink/functions/createNqtrHandler)



\> **createNqtrHandler**(`options?`): `void`

Defined in: [src/ink/nqtrHandler.ts:88](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/ink/nqtrHandler.ts#L88)

Registers all NQTR-specific Ink hashtag command handlers for managing rooms, time, date,
activities, routines, and quests. Supports commands like `enter room`, `set time`, `set date`,
`add/remove activity`, `add/remove routine`, `start/continue quest`, and `wait`.

## Parameters [#parameters]

### options? [#options]

`NqtrHandlerOptions` = `{}`

Optional configuration for time/date conversion, wait logic, and known entity IDs.

## Returns [#returns]

`void`

## Example [#example]

```ts
import { createNqtrHandler } from '@drincs/nqtr/ink';

createNqtrHandler();
```


# Function: nqtrHandler() (deprecated) (/jsdoc/nqtr/ink/functions/nqtrHandler)



\> **nqtrHandler**(`options?`): `void`

Defined in: [src/ink/nqtrHandler.ts:477](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/ink/nqtrHandler.ts#L477)

## Parameters [#parameters]

### options? [#options]

`NqtrHandlerOptions`

## Returns [#returns]

`void`

## Deprecated [#deprecated]

Use [createNqtrHandler](/jsdoc/nqtr/ink/functions/createNqtrHandler) instead.


# Function: vitePluginNqtr() (/jsdoc/nqtr/vite/functions/vitePluginNqtr)



\> **vitePluginNqtr**(`options?`): `Plugin`

Defined in: [src/vite/index.ts:222](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L222)

Creates a Vite plugin that generates TypeScript declaration files with
compile-time–safe ID types for all six NQTR entity registries:
activities, commitments, locations, maps, quests, and rooms.

***

**How it works**

At startup (and after every hot-module reload), the plugin executes the
content modules listed in the options server-side via Vite SSR.  Those
modules register entities by calling `RegisteredActivities.add(...)`,
`RegisteredRooms.add(...)`, etc.  The plugin then reads back the IDs from
all six registries and writes a `.d.ts` declaration file that augments the
`Nqtr*Ids` interfaces in `@drincs/nqtr/registries`.

***

**Pixi-VN integration**

If `vitePluginPixivn` (from `@drincs/pixi-vn/vite`) is present in the same
Vite config, this plugin automatically waits for its `contentLoaded`
signal before reading registry state.  This means you can pass a single
`content` barrel file to `vitePluginPixivn` and have both plugins read from
it without duplicating the option:

```ts
// vite.config.ts
import { vitePluginPixivn } from "@drincs/pixi-vn/vite";
import { vitePluginNqtr } from "@drincs/nqtr/vite";

export default defineConfig({
  plugins: [
    vitePluginPixivn({ content: "./src/content/index.ts" }),
    vitePluginNqtr({ typeFilePath: "./src/nqtr.keys.gen.ts" }),
  ],
});
```

The nqtr plugin will piggy-back on pixi-vn's content loading and re-run
type generation on every hot-reload triggered by the pixi-vn plugin.

***

**Standalone usage** (without pixi-vn)

Target specific entity files directly:

```ts
vitePluginNqtr({
  activities:   "./src/activities/*.ts",
  rooms:        "./src/rooms.ts",
  locations:    "./src/locations.ts",
  maps:         "./src/maps.ts",
  typeFilePath: "./src/nqtr.keys.gen.ts",
})
```

***

**Generated file**

The file written to [VitePluginNqtrOptions.typeFilePath](/jsdoc/nqtr/vite/interfaces/VitePluginNqtrOptions#typefilepath) looks like:

```ts
// nqtr.keys.gen.ts  — auto-generated, do not edit manually
export const nqtrActivityIds = ["study", "cook"] as const;
export const nqtrRoomIds = ["bedroom", "kitchen"] as const;
// …

declare module "@drincs/nqtr/registries" {
    interface NqtrActivityIds { "study": never; "cook": never; }
    interface NqtrRoomIds     { "bedroom": never; "kitchen": never; }
    // …
}
```

The `as const` arrays can be passed to createNqtrHandler for runtime
validation of Ink hashtag commands. The `declare module` augmentation narrows
the `*IdType` helpers (`ActivityIdType`, `RoomIdType`, …) from `string` to
the union of known literal IDs at compile time.

## Parameters [#parameters]

### options? [#options]

[`VitePluginNqtrOptions`](/jsdoc/nqtr/vite/interfaces/VitePluginNqtrOptions)

Optional plugin configuration.

## Returns [#returns]

`Plugin`

A Vite plugin.


# Interface: VitePluginNqtrOptions (/jsdoc/nqtr/vite/interfaces/VitePluginNqtrOptions)



Defined in: [src/vite/index.ts:61](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L61)

Options for [vitePluginNqtr](/jsdoc/nqtr/vite/functions/vitePluginNqtr).

## Properties [#properties]

### activities? [#activities]

\> `optional` &#x2A;*activities?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L69)

Glob / path of module(s) whose side effects register activities via
`RegisteredActivities.add(...)`.

#### Examples [#examples]

```ts
"./src/activities.ts"
```

```ts
"./src/activities/*.ts"
```

***

### commitments? [#commitments]

\> `optional` &#x2A;*commitments?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:77](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L77)

Glob / path of module(s) whose side effects register commitments via
`RegisteredCommitments.add(...)`.

#### Example [#example]

```ts
"./src/commitments.ts"
```

***

### locations? [#locations]

\> `optional` &#x2A;*locations?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:85](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L85)

Glob / path of module(s) whose side effects register locations via
`RegisteredLocations.add(...)`.

#### Example [#example-1]

```ts
"./src/locations.ts"
```

***

### maps? [#maps]

\> `optional` &#x2A;*maps?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:93](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L93)

Glob / path of module(s) whose side effects register maps via
`RegisteredMaps.add(...)`.

#### Example [#example-2]

```ts
"./src/maps.ts"
```

***

### quests? [#quests]

\> `optional` &#x2A;*quests?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:102](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L102)

Glob / path of module(s) whose side effects register quests via
`RegisteredQuests.add(...)`.

#### Examples [#examples-1]

```ts
"./src/quests.ts"
```

```ts
"./src/*.quest.ts"
```

***

### rooms? [#rooms]

\> `optional` &#x2A;*rooms?**: `string` | `string`\[]

Defined in: [src/vite/index.ts:110](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L110)

Glob / path of module(s) whose side effects register rooms via
`RegisteredRooms.add(...)`.

#### Example [#example-3]

```ts
"./src/rooms.ts"
```

***

### typeFilePath? [#typefilepath]

\> `optional` &#x2A;*typeFilePath?**: `string`

Defined in: [src/vite/index.ts:132](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/vite/index.ts#L132)

Path to the auto-generated TypeScript file that contains both:

* `as const` runtime arrays of all currently known entity IDs
  (e.g. `nqtrActivityIds`, `nqtrRoomIds`, …) — import these into
  createNqtrHandler for runtime validation of Ink hashtag commands.
* a `declare module` augmentation of the six `Nqtr*Ids` interfaces in
  `@drincs/nqtr/registries` — gives compile-time–safe ID types once the
  file is included in the project's TypeScript compilation.

When provided, the plugin generates (or overwrites) this file:

* after all content modules have been loaded at startup,
* after every hot-reload of a watched content file.

The generated file is **excluded from HMR** so that regenerating it
never triggers a full-page reload.

The path may be absolute or relative to Vite `root`.

#### Example [#example-4]

```ts
"./src/nqtr.keys.gen.ts"
```


# Class: ActivityBaseModel (/jsdoc/nqtr/index/classes/ActivityBaseModel)



Defined in: [src/classes/activity/ActivityBaseModel.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L31)

The activity model. It is used to create an activity.

## Example [#example]

```tsx
export const nap = new ActivityModel("nap",
    (_, event) => {
        if (event) {
            event.navigate("/game")
            callLabelWithGoNavigationCallBack(napLabel, event)
        }
        else {
            console.error("Event is undefined")
        }
    },
    {
        name: "Nap",
        timeSlot: {
            from: 5,
            to: 23,
        },
        icon: "https://icon.jpg",
    }
)
```

## Extends [#extends]

* [`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass)\<[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new ActivityBaseModel**(`id`, `onRun`, `props`): `ActivityBaseModel`

Defined in: [src/classes/activity/ActivityBaseModel.ts:37](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L37)

#### Parameters [#parameters]

##### id [#id]

`string`

The activity id, that must be unique.

##### onRun [#onrun]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)>

The function that is called when the activity is runned. Have 2 parameters: the runned activity and the yourParams object, that is an object with the parameters that you want to pass to the onRun function.

##### props [#props]

[`ActivityProps`](/jsdoc/nqtr/index/interfaces/ActivityProps)

The activity properties.

#### Returns [#returns]

`ActivityBaseModel`

#### Overrides [#overrides]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/ActivityStoredClass#constructor)

## Properties [#properties]

### \_onRun [#_onrun]

\> `protected` `readonly&#x60; **\_onRun**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)>

Defined in: [src/classes/activity/ActivityStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L19)

#### Inherited from [#inherited-from]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`_onRun`](/jsdoc/nqtr/index/classes/ActivityStoredClass#_onrun)

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from-1]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`id`](/jsdoc/nqtr/index/classes/ActivityStoredClass#id)

## Accessors [#accessors]

### dateScheduling [#datescheduling]

#### Get Signature [#get-signature]

\> **get** **dateScheduling**(): [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L34)

Used to schedule what date it will be added and removed.

##### Returns [#returns-1]

[`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

#### Inherited from [#inherited-from-2]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`dateScheduling`](/jsdoc/nqtr/index/classes/ActivityStoredClass#datescheduling)

***

### disabled [#disabled]

#### Get Signature [#get-signature-1]

\> **get** **disabled**(): `boolean`

Defined in: [src/classes/activity/ActivityBaseModel.ts:63](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L63)

Whether is disabled. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-2]

`boolean`

#### Set Signature [#set-signature]

\> **set** **disabled**(`value`): `void`

Defined in: [src/classes/activity/ActivityBaseModel.ts:70](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L70)

##### Parameters [#parameters-1]

###### value [#value]

`string` | `boolean`

##### Returns [#returns-3]

`void`

***

### expired [#expired]

#### Get Signature [#get-signature-2]

\> **get** **expired**(): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L48)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

##### Returns [#returns-4]

`boolean`

#### Inherited from [#inherited-from-3]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`expired`](/jsdoc/nqtr/index/classes/ActivityStoredClass#expired)

***

### hidden [#hidden]

#### Get Signature [#get-signature-3]

\> **get** **hidden**(): `boolean`

Defined in: [src/classes/activity/ActivityBaseModel.ts:78](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L78)

Whether is hidden. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-5]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **hidden**(`value`): `void`

Defined in: [src/classes/activity/ActivityBaseModel.ts:85](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L85)

##### Parameters [#parameters-2]

###### value [#value-1]

`string` | `boolean`

##### Returns [#returns-6]

`void`

***

### icon [#icon]

#### Get Signature [#get-signature-4]

\> **get** **icon**(): `string` | `undefined`

Defined in: [src/classes/activity/ActivityBaseModel.ts:93](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L93)

The icon of the activity.

##### Returns [#returns-7]

`string` | `undefined`

***

### name [#name]

#### Get Signature [#get-signature-5]

\> **get** **name**(): `string`

Defined in: [src/classes/activity/ActivityBaseModel.ts:52](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L52)

The name of the activity.

##### Returns [#returns-8]

`string`

#### Set Signature [#set-signature-2]

\> **set** **name**(`value`): `void`

Defined in: [src/classes/activity/ActivityBaseModel.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityBaseModel.ts#L55)

##### Parameters [#parameters-3]

###### value [#value-2]

`string` | `undefined`

##### Returns [#returns-9]

`void`

***

### run [#run]

#### Get Signature [#get-signature-6]

\> **get** **run**(): [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

Defined in: [src/classes/activity/ActivityStoredClass.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L41)

The function that is called when the activity/commitment is runned.

##### Returns [#returns-10]

[`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

#### Inherited from [#inherited-from-4]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`run`](/jsdoc/nqtr/index/classes/ActivityStoredClass#run)

***

### timeSlot [#timeslot]

#### Get Signature [#get-signature-7]

\> **get** **timeSlot**(): [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L29)

Time slot in which activity/commitment will be active.

##### Returns [#returns-11]

[`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

#### Inherited from [#inherited-from-5]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`timeSlot`](/jsdoc/nqtr/index/classes/ActivityStoredClass#timeslot)

## Methods [#methods]

### addTempHistoryItem() [#addtemphistoryitem]

\> `protected` **addTempHistoryItem**(): `void`

Defined in: [src/classes/activity/ActivityStoredClass.ts:38](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L38)

#### Returns [#returns-12]

`void`

#### Inherited from [#inherited-from-6]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`addTempHistoryItem`](/jsdoc/nqtr/index/classes/ActivityStoredClass#addtemphistoryitem)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-4]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-13]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-7]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/ActivityStoredClass#getstorageproperty)

***

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L55)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters-5]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

The options to check if the activity/commitment is active.

#### Returns [#returns-14]

`boolean`

#### Inherited from [#inherited-from-8]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`isActive`](/jsdoc/nqtr/index/classes/ActivityStoredClass#isactive)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-6]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-9]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/ActivityStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-7]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-3]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-16]

`void`

#### Inherited from [#inherited-from-10]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/ActivityStoredClass#setstorageproperty)


# Class: ActivityStoredClass<OnRunEventType> (/jsdoc/nqtr/index/classes/ActivityStoredClass)



Defined in: [src/classes/activity/ActivityStoredClass.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L13)

## Extends [#extends]

* `StoredClassModel`

## Extended by [#extended-by]

* [`ActivityBaseModel`](/jsdoc/nqtr/index/classes/ActivityBaseModel)
* [`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass)

## Type Parameters [#type-parameters]

### OnRunEventType [#onruneventtype]

`OnRunEventType` = [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

## Implements [#implements]

* `ActivityBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new ActivityStoredClass**\<`OnRunEventType`>(`id`, `_onRun`, `props`, `category?`): `ActivityStoredClass`\<`OnRunEventType`>

Defined in: [src/classes/activity/ActivityStoredClass.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L17)

#### Parameters [#parameters]

##### id [#id]

`string`

##### \_onRun [#_onrun]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`OnRunEventType`>

##### props [#props]

[`ActivityStoredClassProps`](/jsdoc/nqtr/index/interfaces/ActivityStoredClassProps)

##### category? [#category]

`string` = `ACTIVITY_CATEGORY`

#### Returns [#returns]

`ActivityStoredClass`\<`OnRunEventType`>

#### Overrides [#overrides]

`StoredClassModel.constructor`

## Properties [#properties]

### \_onRun [#_onrun-1]

\> `protected` `readonly&#x60; **\_onRun**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`OnRunEventType`>

Defined in: [src/classes/activity/ActivityStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L19)

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`ActivityBaseInternalInterface.id`

#### Inherited from [#inherited-from]

`StoredClassModel.id`

## Accessors [#accessors]

### dateScheduling [#datescheduling]

#### Get Signature [#get-signature]

\> **get** **dateScheduling**(): [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L34)

Used to schedule what date it will be added and removed.

##### Returns [#returns-1]

[`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

#### Implementation of [#implementation-of-1]

`ActivityBaseInternalInterface.dateScheduling`

***

### expired [#expired]

#### Get Signature [#get-signature-1]

\> **get** **expired**(): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L48)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

##### Returns [#returns-2]

`boolean`

#### Implementation of [#implementation-of-2]

`ActivityBaseInternalInterface.expired`

***

### run [#run]

#### Get Signature [#get-signature-2]

\> **get** **run**(): [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

Defined in: [src/classes/activity/ActivityStoredClass.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L41)

The function that is called when the activity/commitment is runned.

##### Returns [#returns-3]

[`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

#### Implementation of [#implementation-of-3]

`ActivityBaseInternalInterface.run`

***

### timeSlot [#timeslot]

#### Get Signature [#get-signature-3]

\> **get** **timeSlot**(): [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L29)

Time slot in which activity/commitment will be active.

##### Returns [#returns-4]

[`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

#### Implementation of [#implementation-of-4]

`ActivityBaseInternalInterface.timeSlot`

## Methods [#methods]

### addTempHistoryItem() [#addtemphistoryitem]

\> `protected` **addTempHistoryItem**(): `void`

Defined in: [src/classes/activity/ActivityStoredClass.ts:38](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L38)

#### Returns [#returns-5]

`void`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-1]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-6]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-1]

`StoredClassModel.getStorageProperty`

***

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L55)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters-2]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

The options to check if the activity/commitment is active.

#### Returns [#returns-7]

`boolean`

#### Implementation of [#implementation-of-5]

`ActivityBaseInternalInterface.isActive`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-3]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-8]

`void`

#### Inherited from [#inherited-from-2]

`StoredClassModel.migrateOldStorage`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-2]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-4]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-9]

`void`

#### Inherited from [#inherited-from-3]

`StoredClassModel.setStorageProperty`


# Class: CommitmentBaseModel (/jsdoc/nqtr/index/classes/CommitmentBaseModel)



Defined in: [src/classes/activity/CommitmentBaseModel.ts:22](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L22)

The base model of a commitment. I suggest you extend this class to create your own commitment model.
You must use the saveCommitment function to save the commitment in the registered commitments.

## Example [#example]

```ts
export const miaPlay = new CommitmentBaseModel("mia_play", mia, {
    name: "Test",
    image: "https://image.jpg",
    executionType: ExecutionTypeEnum.INTERACTION,
    onRun: (commitment) => {
        // Do something
    }
})
saveCommitment(miaPlay)
```

## Extends [#extends]

* [`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CommitmentBaseModel**(`id`, `character`, `props`): `CommitmentBaseModel`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:28](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L28)

#### Parameters [#parameters]

##### id [#id]

`string`

The id of the commitment, it must be unique.

##### character [#character]

`string` | `CharacterInterface` | (`string` | `CharacterInterface`)\[] | `undefined`

The character or characters that are in the commitment and so in the room.

##### props [#props]

[`CommitmentProps`](/jsdoc/nqtr/index/interfaces/CommitmentProps)

The properties of the commitment.

#### Returns [#returns]

`CommitmentBaseModel`

#### Overrides [#overrides]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#constructor)

## Properties [#properties]

### \_onRun [#_onrun]

\> `protected` `readonly&#x60; **\_onRun**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)>

Defined in: [src/classes/activity/ActivityStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L19)

#### Inherited from [#inherited-from]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`_onRun`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#_onrun)

***

### characters [#characters]

\> `readonly` **characters**: `CharacterInterface`\[]

Defined in: [src/classes/activity/CommitmentStoredClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L72)

The character or characters that are in the commitment and so in the room.

#### Inherited from [#inherited-from-1]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`characters`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#characters)

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from-2]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`id`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#id)

***

### runOptions? [#runoptions]

\> `optional` &#x2A;*runOptions?**: `CommitmentRunOptions`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:111](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L111)

Options for [run](/jsdoc/nqtr/index/classes/CommitmentStoredClass#run).

#### Inherited from [#inherited-from-3]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`runOptions`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#runoptions)

## Accessors [#accessors]

### dateScheduling [#datescheduling]

#### Get Signature [#get-signature]

\> **get** **dateScheduling**(): [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L34)

Used to schedule what date it will be added and removed.

##### Returns [#returns-1]

[`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

#### Inherited from [#inherited-from-4]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`dateScheduling`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#datescheduling)

***

### disabled [#disabled]

#### Get Signature [#get-signature-1]

\> **get** **disabled**(): `boolean`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L82)

Whether is disabled. You can also pass a Pixi'VN flag name.

##### Returns [#returns-2]

`boolean`

#### Set Signature [#set-signature]

\> **set** **disabled**(`value`): `void`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:89](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L89)

##### Parameters [#parameters-1]

###### value [#value]

`string` | `boolean`

##### Returns [#returns-3]

`void`

***

### executionType [#executiontype]

#### Get Signature [#get-signature-2]

\> **get** **executionType**(): [`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

Defined in: [src/classes/activity/CommitmentStoredClass.ts:74](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L74)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

##### Returns [#returns-4]

[`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

#### Set Signature [#set-signature-1]

\> **set** **executionType**(`value`): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:77](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L77)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

##### Parameters [#parameters-2]

###### value [#value-1]

[`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

##### Returns [#returns-5]

`void`

#### Inherited from [#inherited-from-5]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`executionType`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#executiontype)

***

### expired [#expired]

#### Get Signature [#get-signature-3]

\> **get** **expired**(): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L48)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

##### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-6]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`expired`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#expired)

***

### hidden [#hidden]

#### Get Signature [#get-signature-4]

\> **get** **hidden**(): `boolean`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:97](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L97)

Whether is hidden. You can also pass a Pixi'VN flag name.

##### Returns [#returns-7]

`boolean`

#### Set Signature [#set-signature-2]

\> **set** **hidden**(`value`): `void`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:104](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L104)

##### Parameters [#parameters-3]

###### value [#value-2]

`string` | `boolean`

##### Returns [#returns-8]

`void`

***

### icon [#icon]

#### Get Signature [#get-signature-5]

\> **get** **icon**(): `string` | `undefined`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:74](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L74)

The icon of the commitment.

##### Returns [#returns-9]

`string` | `undefined`

***

### image [#image]

#### Get Signature [#get-signature-6]

\> **get** **image**(): `string` | `undefined`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:66](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L66)

The image of the commitment.

##### Returns [#returns-10]

`string` | `undefined`

***

### name [#name]

#### Get Signature [#get-signature-7]

\> **get** **name**(): `string`

Defined in: [src/classes/activity/CommitmentBaseModel.ts:58](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentBaseModel.ts#L58)

The name of the commitment.

##### Returns [#returns-11]

`string`

***

### priority [#priority]

#### Get Signature [#get-signature-8]

\> **get** **priority**(): `number`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:81](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L81)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

##### Returns [#returns-12]

`number`

#### Set Signature [#set-signature-3]

\> **set** **priority**(`value`): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:84](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L84)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

##### Parameters [#parameters-4]

###### value [#value-3]

`number`

##### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-7]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`priority`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#priority)

***

### run [#run]

#### Get Signature [#get-signature-9]

\> **get** **run**(): (`props`, `options?`) => `Promise`\<`any`>

Defined in: [src/classes/activity/CommitmentStoredClass.ts:120](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L120)

Executes the commitment's `onRun` callback.

##### Returns [#returns-14]

(`props`, `options?`) => `Promise`\<`any`>

#### Inherited from [#inherited-from-8]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`run`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#run)

***

### timeSlot [#timeslot]

#### Get Signature [#get-signature-10]

\> **get** **timeSlot**(): [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L29)

Time slot in which activity/commitment will be active.

##### Returns [#returns-15]

[`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

#### Inherited from [#inherited-from-9]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`timeSlot`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#timeslot)

## Methods [#methods]

### addTempHistoryItem() [#addtemphistoryitem]

\> `protected` **addTempHistoryItem**(): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:87](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L87)

#### Returns [#returns-16]

`void`

#### Inherited from [#inherited-from-10]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`addTempHistoryItem`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#addtemphistoryitem)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-5]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-17]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-11]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#getstorageproperty)

***

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L55)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters-6]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

The options to check if the activity/commitment is active.

#### Returns [#returns-18]

`boolean`

#### Inherited from [#inherited-from-12]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`isActive`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#isactive)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-7]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-13]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-8]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-4]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-14]

[`CommitmentStoredClass`](/jsdoc/nqtr/index/classes/CommitmentStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/CommitmentStoredClass#setstorageproperty)


# Class: CommitmentStoredClass (/jsdoc/nqtr/index/classes/CommitmentStoredClass)



Defined in: [src/classes/activity/CommitmentStoredClass.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L41)

## Extends [#extends]

* [`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass)\<[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)>

## Extended by [#extended-by]

* [`CommitmentBaseModel`](/jsdoc/nqtr/index/classes/CommitmentBaseModel)

## Implements [#implements]

* `CommitmentBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CommitmentStoredClass**(`id`, `characters`, `onRun`, `props`): `CommitmentStoredClass`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:45](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L45)

#### Parameters [#parameters]

##### id [#id]

`string`

##### characters [#characters]

(`string` | `CharacterInterface`)\[]

##### onRun [#onrun]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)> | `undefined`

##### props [#props]

[`CommitmentStoredClassProps`](/jsdoc/nqtr/index/interfaces/CommitmentStoredClassProps)

#### Returns [#returns]

`CommitmentStoredClass`

#### Overrides [#overrides]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/ActivityStoredClass#constructor)

## Properties [#properties]

### \_onRun [#_onrun]

\> `protected` `readonly&#x60; **\_onRun**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)>

Defined in: [src/classes/activity/ActivityStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L19)

#### Inherited from [#inherited-from]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`_onRun`](/jsdoc/nqtr/index/classes/ActivityStoredClass#_onrun)

***

### characters [#characters-1]

\> `readonly` **characters**: `CharacterInterface`\[]

Defined in: [src/classes/activity/CommitmentStoredClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L72)

The character or characters that are in the commitment and so in the room.

#### Implementation of [#implementation-of]

`CommitmentBaseInternalInterface.characters`

***

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of-1]

`CommitmentBaseInternalInterface.id`

#### Inherited from [#inherited-from-1]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`id`](/jsdoc/nqtr/index/classes/ActivityStoredClass#id)

***

### runOptions? [#runoptions]

\> `optional` &#x2A;*runOptions?**: `CommitmentRunOptions`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:111](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L111)

Options for [run](#run).

## Accessors [#accessors]

### dateScheduling [#datescheduling]

#### Get Signature [#get-signature]

\> **get** **dateScheduling**(): [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L34)

Used to schedule what date it will be added and removed.

##### Returns [#returns-1]

[`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface) | `undefined`

#### Implementation of [#implementation-of-2]

`CommitmentBaseInternalInterface.dateScheduling`

#### Inherited from [#inherited-from-2]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`dateScheduling`](/jsdoc/nqtr/index/classes/ActivityStoredClass#datescheduling)

***

### executionType [#executiontype]

#### Get Signature [#get-signature-1]

\> **get** **executionType**(): [`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

Defined in: [src/classes/activity/CommitmentStoredClass.ts:74](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L74)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

##### Returns [#returns-2]

[`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

#### Set Signature [#set-signature]

\> **set** **executionType**(`value`): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:77](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L77)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

##### Parameters [#parameters-1]

###### value [#value]

[`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

##### Returns [#returns-3]

`void`

#### Implementation of [#implementation-of-3]

`CommitmentBaseInternalInterface.executionType`

***

### expired [#expired]

#### Get Signature [#get-signature-2]

\> **get** **expired**(): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L48)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

##### Returns [#returns-4]

`boolean`

#### Implementation of [#implementation-of-4]

`CommitmentBaseInternalInterface.expired`

#### Inherited from [#inherited-from-3]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`expired`](/jsdoc/nqtr/index/classes/ActivityStoredClass#expired)

***

### priority [#priority]

#### Get Signature [#get-signature-3]

\> **get** **priority**(): `number`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:81](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L81)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

##### Returns [#returns-5]

`number`

#### Set Signature [#set-signature-1]

\> **set** **priority**(`value`): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:84](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L84)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

##### Parameters [#parameters-2]

###### value [#value-1]

`number`

##### Returns [#returns-6]

`void`

#### Implementation of [#implementation-of-5]

`CommitmentBaseInternalInterface.priority`

***

### run [#run]

#### Get Signature [#get-signature-4]

\> **get** **run**(): (`props`, `options?`) => `Promise`\<`any`>

Defined in: [src/classes/activity/CommitmentStoredClass.ts:120](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L120)

Executes the commitment's `onRun` callback.

##### Returns [#returns-7]

(`props`, `options?`) => `Promise`\<`any`>

#### Implementation of [#implementation-of-6]

`CommitmentBaseInternalInterface.run`

#### Overrides [#overrides-1]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`run`](/jsdoc/nqtr/index/classes/ActivityStoredClass#run)

***

### timeSlot [#timeslot]

#### Get Signature [#get-signature-5]

\> **get** **timeSlot**(): [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

Defined in: [src/classes/activity/ActivityStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L29)

Time slot in which activity/commitment will be active.

##### Returns [#returns-8]

[`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[] | `undefined`

#### Implementation of [#implementation-of-7]

`CommitmentBaseInternalInterface.timeSlot`

#### Inherited from [#inherited-from-4]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`timeSlot`](/jsdoc/nqtr/index/classes/ActivityStoredClass#timeslot)

## Methods [#methods]

### addTempHistoryItem() [#addtemphistoryitem]

\> `protected` **addTempHistoryItem**(): `void`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:87](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L87)

#### Returns [#returns-9]

`void`

#### Overrides [#overrides-2]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`addTempHistoryItem`](/jsdoc/nqtr/index/classes/ActivityStoredClass#addtemphistoryitem)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-3]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-10]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-5]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/ActivityStoredClass#getstorageproperty)

***

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/classes/activity/ActivityStoredClass.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L55)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters-4]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

The options to check if the activity/commitment is active.

#### Returns [#returns-11]

`boolean`

#### Implementation of [#implementation-of-8]

`CommitmentBaseInternalInterface.isActive`

#### Inherited from [#inherited-from-6]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`isActive`](/jsdoc/nqtr/index/classes/ActivityStoredClass#isactive)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-5]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-12]

`void`

#### Inherited from [#inherited-from-7]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/ActivityStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-6]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-2]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-8]

[`ActivityStoredClass`](/jsdoc/nqtr/index/classes/ActivityStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/ActivityStoredClass#setstorageproperty)


# Class: LocationBaseModel (/jsdoc/nqtr/index/classes/LocationBaseModel)



Defined in: [src/classes/navigation/LocationBaseModel.ts:16](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L16)

The base model of a location. I suggest you extend this class to create your own location model.

## Example [#example]

```typescript
export const mcHome = new LocationBaseModel('mc_home', mainMap, {
    name: 'MC Home',
    icon: "https://icon.jpg",
});
```

## Extends [#extends]

* [`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass)

## Implements [#implements]

* `LocationInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new LocationBaseModel**(`id`, `map`, `props?`): `LocationBaseModel`

Defined in: [src/classes/navigation/LocationBaseModel.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L25)

#### Parameters [#parameters]

##### id [#id]

`string`

The id of the location, it must be unique.

##### map [#map]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

The map where the location is.

##### props? [#props]

[`LocationBaseModelProps`](/jsdoc/nqtr/index/interfaces/LocationBaseModelProps) = `{}`

The properties of the location.

#### Returns [#returns]

`LocationBaseModel`

#### Overrides [#overrides]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/LocationStoredClass#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`LocationInternalInterface.id`

#### Inherited from [#inherited-from]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`id`](/jsdoc/nqtr/index/classes/LocationStoredClass#id)

## Accessors [#accessors]

### activities [#activities]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Implementation of [#implementation-of-1]

`LocationInternalInterface.activities`

#### Inherited from [#inherited-from-1]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`activities`](/jsdoc/nqtr/index/classes/LocationStoredClass#activities)

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Implementation of [#implementation-of-2]

`LocationInternalInterface.activitiesIds`

#### Inherited from [#inherited-from-2]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`activitiesIds`](/jsdoc/nqtr/index/classes/LocationStoredClass#activitiesids)

***

### disabled [#disabled]

#### Get Signature [#get-signature-2]

\> **get** **disabled**(): `boolean`

Defined in: [src/classes/navigation/LocationBaseModel.ts:49](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L49)

Whether is disabled. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-3]

`boolean`

#### Set Signature [#set-signature]

\> **set** **disabled**(`value`): `void`

Defined in: [src/classes/navigation/LocationBaseModel.ts:56](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L56)

##### Parameters [#parameters-1]

###### value [#value]

`string` | `boolean`

##### Returns [#returns-4]

`void`

***

### hidden [#hidden]

#### Get Signature [#get-signature-3]

\> **get** **hidden**(): `boolean`

Defined in: [src/classes/navigation/LocationBaseModel.ts:64](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L64)

Whether is hidden. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-5]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **hidden**(`value`): `void`

Defined in: [src/classes/navigation/LocationBaseModel.ts:71](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L71)

##### Parameters [#parameters-2]

###### value [#value-1]

`string` | `boolean`

##### Returns [#returns-6]

`void`

***

### icon [#icon]

#### Get Signature [#get-signature-4]

\> **get** **icon**(): `string` | `undefined`

Defined in: [src/classes/navigation/LocationBaseModel.ts:79](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L79)

The icon of the location.

##### Returns [#returns-7]

`string` | `undefined`

***

### map [#map-1]

#### Get Signature [#get-signature-5]

\> **get** **map**(): [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

Defined in: [src/classes/navigation/LocationStoredClass.ts:22](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L22)

The map where the location is.

##### Returns [#returns-8]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

#### Implementation of [#implementation-of-3]

`LocationInternalInterface.map`

#### Inherited from [#inherited-from-3]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`map`](/jsdoc/nqtr/index/classes/LocationStoredClass#map)

***

### name [#name]

#### Get Signature [#get-signature-6]

\> **get** **name**(): `string`

Defined in: [src/classes/navigation/LocationBaseModel.ts:38](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L38)

The name of the location.
If you set undefined, it will return the initial value of name.

##### Returns [#returns-9]

`string`

#### Set Signature [#set-signature-2]

\> **set** **name**(`value`): `void`

Defined in: [src/classes/navigation/LocationBaseModel.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationBaseModel.ts#L41)

##### Parameters [#parameters-3]

###### value [#value-2]

`string` | `undefined`

##### Returns [#returns-10]

`void`

***

### rooms [#rooms]

#### Get Signature [#get-signature-7]

\> **get** **rooms**(): [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

Defined in: [src/classes/navigation/LocationStoredClass.ts:26](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L26)

Get all rooms in the location.

##### Returns [#returns-11]

[`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

The rooms in the location.

#### Implementation of [#implementation-of-4]

`LocationInternalInterface.rooms`

#### Inherited from [#inherited-from-4]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`rooms`](/jsdoc/nqtr/index/classes/LocationStoredClass#rooms)

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-4]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-12]

`void`

#### Implementation of [#implementation-of-5]

`LocationInternalInterface.addActivity`

#### Inherited from [#inherited-from-5]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`addActivity`](/jsdoc/nqtr/index/classes/LocationStoredClass#addactivity)

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-13]

`void`

#### Implementation of [#implementation-of-6]

`LocationInternalInterface.clearExpiredActivities`

#### Inherited from [#inherited-from-6]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`clearExpiredActivities`](/jsdoc/nqtr/index/classes/LocationStoredClass#clearexpiredactivities)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-5]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-14]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Implementation of [#implementation-of-7]

`LocationInternalInterface.getStorageProperty`

#### Inherited from [#inherited-from-7]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/LocationStoredClass#getstorageproperty)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-6]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-15]

`void`

#### Implementation of [#implementation-of-8]

`LocationInternalInterface.migrateOldStorage`

#### Inherited from [#inherited-from-8]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/LocationStoredClass#migrateoldstorage)

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-7]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-16]

`void`

#### Implementation of [#implementation-of-9]

`LocationInternalInterface.removeActivity`

#### Inherited from [#inherited-from-9]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`removeActivity`](/jsdoc/nqtr/index/classes/LocationStoredClass#removeactivity)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-8]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-3]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-17]

`void`

#### Implementation of [#implementation-of-10]

`LocationInternalInterface.setStorageProperty`

#### Inherited from [#inherited-from-10]

[`LocationStoredClass`](/jsdoc/nqtr/index/classes/LocationStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/LocationStoredClass#setstorageproperty)


# Class: LocationStoredClass (/jsdoc/nqtr/index/classes/LocationStoredClass)



Defined in: [src/classes/navigation/LocationStoredClass.ts:7](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L7)

## Extends [#extends]

* `default`

## Extended by [#extended-by]

* [`LocationBaseModel`](/jsdoc/nqtr/index/classes/LocationBaseModel)

## Implements [#implements]

* `LocationInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new LocationStoredClass**(`id`, `_map`, `activities?`): `LocationStoredClass`

Defined in: [src/classes/navigation/LocationStoredClass.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L11)

#### Parameters [#parameters]

##### id [#id]

`string`

##### \_map [#_map]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

The map where the location is.

##### activities? [#activities]

(`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[] = `[]`

#### Returns [#returns]

`LocationStoredClass`

#### Overrides [#overrides]

`NavigationAbstractClass.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`LocationInternalInterface.id`

#### Inherited from [#inherited-from]

`NavigationAbstractClass.id`

## Accessors [#accessors]

### activities [#activities-1]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Implementation of [#implementation-of-1]

`LocationInternalInterface.activities`

#### Inherited from [#inherited-from-1]

`NavigationAbstractClass.activities`

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Implementation of [#implementation-of-2]

`LocationInternalInterface.activitiesIds`

#### Inherited from [#inherited-from-2]

`NavigationAbstractClass.activitiesIds`

***

### map [#map]

#### Get Signature [#get-signature-2]

\> **get** **map**(): [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

Defined in: [src/classes/navigation/LocationStoredClass.ts:22](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L22)

The map where the location is.

##### Returns [#returns-3]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

#### Implementation of [#implementation-of-3]

`LocationInternalInterface.map`

***

### rooms [#rooms]

#### Get Signature [#get-signature-3]

\> **get** **rooms**(): [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

Defined in: [src/classes/navigation/LocationStoredClass.ts:26](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/LocationStoredClass.ts#L26)

Get all rooms in the location.

##### Returns [#returns-4]

[`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

The rooms in the location.

#### Implementation of [#implementation-of-4]

`LocationInternalInterface.rooms`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-1]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-5]

`void`

#### Implementation of [#implementation-of-5]

`LocationInternalInterface.addActivity`

#### Inherited from [#inherited-from-3]

`NavigationAbstractClass.addActivity`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-6]

`void`

#### Implementation of [#implementation-of-6]

`LocationInternalInterface.clearExpiredActivities`

#### Inherited from [#inherited-from-4]

`NavigationAbstractClass.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-2]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-7]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Implementation of [#implementation-of-7]

`LocationInternalInterface.getStorageProperty`

#### Inherited from [#inherited-from-5]

`NavigationAbstractClass.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-3]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-8]

`LocationInternalInterface.migrateOldStorage`

#### Inherited from [#inherited-from-6]

`NavigationAbstractClass.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-4]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-9]

`void`

#### Implementation of [#implementation-of-9]

`LocationInternalInterface.removeActivity`

#### Inherited from [#inherited-from-7]

`NavigationAbstractClass.removeActivity`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-5]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-10]

`void`

#### Implementation of [#implementation-of-10]

`LocationInternalInterface.setStorageProperty`

#### Inherited from [#inherited-from-8]

`NavigationAbstractClass.setStorageProperty`


# Class: MapBaseModel (/jsdoc/nqtr/index/classes/MapBaseModel)



Defined in: [src/classes/navigation/MapBaseModel.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapBaseModel.ts#L15)

The base model of a map. I suggest you extend this class to create your own map model.

## Example [#example]

```typescript
export const mainMap = new MapBaseModel('main_map', {
    name: 'Main Map',
    image: "https://image.jpg",
});
```

## Extends [#extends]

* [`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass)

## Implements [#implements]

* `MapBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new MapBaseModel**(`id`, `props?`): `MapBaseModel`

Defined in: [src/classes/navigation/MapBaseModel.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapBaseModel.ts#L20)

#### Parameters [#parameters]

##### id [#id]

`string`

The id of the map, it must be unique.

##### props? [#props]

[`MapBaseModelProps`](/jsdoc/nqtr/index/interfaces/MapBaseModelProps) = `{}`

The properties of the map.

#### Returns [#returns]

`MapBaseModel`

#### Overrides [#overrides]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/MapStoredClass#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`MapBaseInternalInterface.id`

#### Inherited from [#inherited-from]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`id`](/jsdoc/nqtr/index/classes/MapStoredClass#id)

## Accessors [#accessors]

### activities [#activities]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Implementation of [#implementation-of-1]

`MapBaseInternalInterface.activities`

#### Inherited from [#inherited-from-1]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`activities`](/jsdoc/nqtr/index/classes/MapStoredClass#activities)

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Implementation of [#implementation-of-2]

`MapBaseInternalInterface.activitiesIds`

#### Inherited from [#inherited-from-2]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`activitiesIds`](/jsdoc/nqtr/index/classes/MapStoredClass#activitiesids)

***

### image [#image]

#### Get Signature [#get-signature-2]

\> **get** **image**(): `string` | `undefined`

Defined in: [src/classes/navigation/MapBaseModel.ts:42](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapBaseModel.ts#L42)

The image of the map.

##### Returns [#returns-3]

`string` | `undefined`

***

### locations [#locations]

#### Get Signature [#get-signature-3]

\> **get** **locations**(): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

Defined in: [src/classes/navigation/MapStoredClass.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapStoredClass.ts#L15)

Get all locations in the map.

##### Returns [#returns-4]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

The locations in the map.

#### Implementation of [#implementation-of-3]

`MapBaseInternalInterface.locations`

#### Inherited from [#inherited-from-3]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`locations`](/jsdoc/nqtr/index/classes/MapStoredClass#locations)

***

### name [#name]

#### Get Signature [#get-signature-4]

\> **get** **name**(): `string`

Defined in: [src/classes/navigation/MapBaseModel.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapBaseModel.ts#L31)

The name of the map.
If you set undefined, it will return the initial value of name.

##### Returns [#returns-5]

`string`

#### Set Signature [#set-signature]

\> **set** **name**(`value`): `void`

Defined in: [src/classes/navigation/MapBaseModel.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapBaseModel.ts#L34)

##### Parameters [#parameters-1]

###### value [#value]

`string` | `undefined`

##### Returns [#returns-6]

`void`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-2]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-4]

`MapBaseInternalInterface.addActivity`

#### Inherited from [#inherited-from-4]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`addActivity`](/jsdoc/nqtr/index/classes/MapStoredClass#addactivity)

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-5]

`MapBaseInternalInterface.clearExpiredActivities`

#### Inherited from [#inherited-from-5]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`clearExpiredActivities`](/jsdoc/nqtr/index/classes/MapStoredClass#clearexpiredactivities)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-3]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-9]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Implementation of [#implementation-of-6]

`MapBaseInternalInterface.getStorageProperty`

#### Inherited from [#inherited-from-6]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/MapStoredClass#getstorageproperty)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-4]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-10]

`void`

#### Implementation of [#implementation-of-7]

`MapBaseInternalInterface.migrateOldStorage`

#### Inherited from [#inherited-from-7]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/MapStoredClass#migrateoldstorage)

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-5]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-11]

`void`

#### Implementation of [#implementation-of-8]

`MapBaseInternalInterface.removeActivity`

#### Inherited from [#inherited-from-8]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`removeActivity`](/jsdoc/nqtr/index/classes/MapStoredClass#removeactivity)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-6]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-1]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-12]

`void`

#### Implementation of [#implementation-of-9]

`MapBaseInternalInterface.setStorageProperty`

#### Inherited from [#inherited-from-9]

[`MapStoredClass`](/jsdoc/nqtr/index/classes/MapStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/MapStoredClass#setstorageproperty)


# Class: MapStoredClass (/jsdoc/nqtr/index/classes/MapStoredClass)



Defined in: [src/classes/navigation/MapStoredClass.ts:7](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapStoredClass.ts#L7)

## Extends [#extends]

* `default`

## Extended by [#extended-by]

* [`MapBaseModel`](/jsdoc/nqtr/index/classes/MapBaseModel)

## Implements [#implements]

* `MapBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new MapStoredClass**(`id`, `activities?`): `MapStoredClass`

Defined in: [src/classes/navigation/MapStoredClass.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapStoredClass.ts#L11)

#### Parameters [#parameters]

##### id [#id]

`string`

##### activities? [#activities]

(`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[] = `[]`

#### Returns [#returns]

`MapStoredClass`

#### Overrides [#overrides]

`NavigationAbstractClass.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`MapBaseInternalInterface.id`

#### Inherited from [#inherited-from]

`NavigationAbstractClass.id`

## Accessors [#accessors]

### activities [#activities-1]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Implementation of [#implementation-of-1]

`MapBaseInternalInterface.activities`

#### Inherited from [#inherited-from-1]

`NavigationAbstractClass.activities`

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Implementation of [#implementation-of-2]

`MapBaseInternalInterface.activitiesIds`

#### Inherited from [#inherited-from-2]

`NavigationAbstractClass.activitiesIds`

***

### locations [#locations]

#### Get Signature [#get-signature-2]

\> **get** **locations**(): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

Defined in: [src/classes/navigation/MapStoredClass.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/MapStoredClass.ts#L15)

Get all locations in the map.

##### Returns [#returns-3]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

The locations in the map.

#### Implementation of [#implementation-of-3]

`MapBaseInternalInterface.locations`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-1]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-4]

`void`

#### Implementation of [#implementation-of-4]

`MapBaseInternalInterface.addActivity`

#### Inherited from [#inherited-from-3]

`NavigationAbstractClass.addActivity`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-5]

`void`

#### Implementation of [#implementation-of-5]

`MapBaseInternalInterface.clearExpiredActivities`

#### Inherited from [#inherited-from-4]

`NavigationAbstractClass.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-2]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-6]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Implementation of [#implementation-of-6]

`MapBaseInternalInterface.getStorageProperty`

#### Inherited from [#inherited-from-5]

`NavigationAbstractClass.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-3]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-7]

`MapBaseInternalInterface.migrateOldStorage`

#### Inherited from [#inherited-from-6]

`NavigationAbstractClass.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-4]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-8]

`MapBaseInternalInterface.removeActivity`

#### Inherited from [#inherited-from-7]

`NavigationAbstractClass.removeActivity`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-5]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-9]

`void`

#### Implementation of [#implementation-of-9]

`MapBaseInternalInterface.setStorageProperty`

#### Inherited from [#inherited-from-8]

`NavigationAbstractClass.setStorageProperty`


# Class: QuestBaseModel (/jsdoc/nqtr/index/classes/QuestBaseModel)



Defined in: [src/classes/quest/QuestBaseModel.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L4)

## Extends [#extends]

* [`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new QuestBaseModel**(`id`, `stages`, `props`): `QuestBaseModel`

Defined in: [src/classes/quest/QuestBaseModel.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L5)

#### Parameters [#parameters]

##### id [#id]

`string`

##### stages [#stages]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

##### props [#props]

[`QuestProps`](/jsdoc/nqtr/index/interfaces/QuestProps)

#### Returns [#returns]

`QuestBaseModel`

#### Overrides [#overrides]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/QuestStoredClass#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`id`](/jsdoc/nqtr/index/classes/QuestStoredClass#id)

## Accessors [#accessors]

### completed [#completed]

#### Get Signature [#get-signature]

\> **get** **completed**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L62)

If the quest is completed.

##### Returns [#returns-1]

`boolean`

#### Inherited from [#inherited-from-1]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`completed`](/jsdoc/nqtr/index/classes/QuestStoredClass#completed)

***

### currentStage [#currentstage]

#### Get Signature [#get-signature-1]

\> **get** **currentStage**(): [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface) | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L50)

The current stage.

##### Returns [#returns-2]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface) | `undefined`

#### Inherited from [#inherited-from-2]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`currentStage`](/jsdoc/nqtr/index/classes/QuestStoredClass#currentstage)

***

### currentStageIndex [#currentstageindex]

#### Get Signature [#get-signature-2]

\> **get** **currentStageIndex**(): `number` | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L43)

The index of the current stage.

##### Returns [#returns-3]

`number` | `undefined`

#### Set Signature [#set-signature]

\> **set** **currentStageIndex**(`value`): `void`

Defined in: [src/classes/quest/QuestStoredClass.ts:46](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L46)

The index of the current stage.

##### Parameters [#parameters-1]

###### value [#value]

`number` | `undefined`

##### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-3]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`currentStageIndex`](/jsdoc/nqtr/index/classes/QuestStoredClass#currentstageindex)

***

### currentStageMustStart [#currentstagemuststart]

#### Get Signature [#get-signature-3]

\> **get** **currentStageMustStart**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:188](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L188)

If the current stage must start. It is true if the current stage is not started, can start and not completed.

##### Returns [#returns-5]

`boolean`

#### Inherited from [#inherited-from-4]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`currentStageMustStart`](/jsdoc/nqtr/index/classes/QuestStoredClass#currentstagemuststart)

***

### description [#description]

#### Get Signature [#get-signature-4]

\> **get** **description**(): `string`

Defined in: [src/classes/quest/QuestBaseModel.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L29)

The description of the quest.

##### Returns [#returns-6]

`string`

***

### failed [#failed]

#### Get Signature [#get-signature-5]

\> **get** **failed**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:79](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L79)

If the quest is failed.

##### Returns [#returns-7]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **failed**(`value`): `void`

Defined in: [src/classes/quest/QuestStoredClass.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L82)

If the quest is failed.

##### Parameters [#parameters-2]

###### value [#value-1]

`boolean`

##### Returns [#returns-8]

`void`

#### Inherited from [#inherited-from-5]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`failed`](/jsdoc/nqtr/index/classes/QuestStoredClass#failed)

***

### icon [#icon]

#### Get Signature [#get-signature-6]

\> **get** **icon**(): `string` | `undefined`

Defined in: [src/classes/quest/QuestBaseModel.ts:37](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L37)

Icon of the quest.

##### Returns [#returns-9]

`string` | `undefined`

***

### image [#image]

#### Get Signature [#get-signature-7]

\> **get** **image**(): `string` | `undefined`

Defined in: [src/classes/quest/QuestBaseModel.ts:45](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L45)

Image of the quest.

##### Returns [#returns-10]

`string` | `undefined`

***

### inDevelopment [#indevelopment]

#### Get Signature [#get-signature-8]

\> **get** **inDevelopment**(): `boolean`

Defined in: [src/classes/quest/QuestBaseModel.ts:53](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L53)

If the quest is in development.

##### Returns [#returns-11]

`boolean`

***

### inProgress [#inprogress]

#### Get Signature [#get-signature-9]

\> **get** **inProgress**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L69)

If the quest is started and not completed and not failed.

##### Returns [#returns-12]

`boolean`

#### Inherited from [#inherited-from-6]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`inProgress`](/jsdoc/nqtr/index/classes/QuestStoredClass#inprogress)

***

### name [#name]

#### Get Signature [#get-signature-10]

\> **get** **name**(): `string`

Defined in: [src/classes/quest/QuestBaseModel.ts:21](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestBaseModel.ts#L21)

The name of the quest.

##### Returns [#returns-13]

`string`

***

### onContinue [#oncontinue]

#### Get Signature [#get-signature-11]

\> **get** **onContinue**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:92](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L92)

The function that will be called when the quest goes to the next stage.

##### Returns [#returns-14]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Inherited from [#inherited-from-7]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`onContinue`](/jsdoc/nqtr/index/classes/QuestStoredClass#oncontinue)

***

### onNextStage [#onnextstage]

#### Get Signature [#get-signature-12]

\> **get** **onNextStage**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:95](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L95)

##### Deprecated [#deprecated]

Use [onContinue](/jsdoc/nqtr/index/interfaces/QuestInterface#oncontinue) instead. The function that will be called when the quest goes to the next stage.

##### Returns [#returns-15]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Inherited from [#inherited-from-8]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`onNextStage`](/jsdoc/nqtr/index/classes/QuestStoredClass#onnextstage)

***

### onStart [#onstart]

#### Get Signature [#get-signature-13]

\> **get** **onStart**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:87](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L87)

The function that will be called when the quest starts.

##### Returns [#returns-16]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Inherited from [#inherited-from-9]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`onStart`](/jsdoc/nqtr/index/classes/QuestStoredClass#onstart)

***

### stages [#stages-1]

#### Get Signature [#get-signature-14]

\> **get** **stages**(): [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

Defined in: [src/classes/quest/QuestStoredClass.ts:39](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L39)

The stages of the quest.

##### Returns [#returns-17]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

#### Inherited from [#inherited-from-10]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`stages`](/jsdoc/nqtr/index/classes/QuestStoredClass#stages)

***

### started [#started]

#### Get Signature [#get-signature-15]

\> **get** **started**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:58](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L58)

If the quest is started.

##### Returns [#returns-18]

`boolean`

#### Inherited from [#inherited-from-11]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`started`](/jsdoc/nqtr/index/classes/QuestStoredClass#started)

## Methods [#methods]

### advanceIfCompleted() [#advanceifcompleted]

\> **advanceIfCompleted**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:124](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L124)

Go to the next stage if the current stage is completed.
If you want to force the change of stage, use [advanceUnconditionally](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceunconditionally).

#### Parameters [#parameters-3]

##### props [#props-1]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-19]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-12]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`advanceIfCompleted`](/jsdoc/nqtr/index/classes/QuestStoredClass#advanceifcompleted)

***

### advanceUnconditionally() [#advanceunconditionally]

\> **advanceUnconditionally**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:161](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L161)

Ignore the completed state of the current stage and go to the next stage without checking if the current stage is completed.
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceifcompleted).

#### Parameters [#parameters-4]

##### props [#props-2]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-20]

`Promise`\<`boolean`>

returns true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-13]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`advanceUnconditionally`](/jsdoc/nqtr/index/classes/QuestStoredClass#advanceunconditionally)

***

### continue() [#continue]

\> **continue**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:145](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L145)

Complete the current stage and go to the next stage with [advanceUnconditionally](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceunconditionally).
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceifcompleted).

#### Parameters [#parameters-5]

##### props [#props-3]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-21]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-14]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`continue`](/jsdoc/nqtr/index/classes/QuestStoredClass#continue)

***

### ~~forceGoNext()~~ [#forcegonext]

\> **forceGoNext**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:158](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L158)

#### Parameters [#parameters-6]

##### props [#props-4]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-22]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-1]

Use [advanceUnconditionally](/jsdoc/nqtr/index/classes/QuestStoredClass#advanceunconditionally) instead.

#### Inherited from [#inherited-from-15]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`forceGoNext`](/jsdoc/nqtr/index/classes/QuestStoredClass#forcegonext)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-7]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-23]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-16]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/QuestStoredClass#getstorageproperty)

***

### ~~goNext()~~ [#gonext]

\> **goNext**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:142](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L142)

#### Parameters [#parameters-8]

##### props [#props-5]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-24]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-2]

Use [continue](/jsdoc/nqtr/index/classes/QuestStoredClass#continue) instead.

#### Inherited from [#inherited-from-17]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`goNext`](/jsdoc/nqtr/index/classes/QuestStoredClass#gonext)

***

### ~~goNextIfCompleted()~~ [#gonextifcompleted]

\> **goNextIfCompleted**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:121](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L121)

#### Parameters [#parameters-9]

##### props [#props-6]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-25]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-3]

Use [advanceIfCompleted](/jsdoc/nqtr/index/classes/QuestStoredClass#advanceifcompleted) instead.

#### Inherited from [#inherited-from-18]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`goNextIfCompleted`](/jsdoc/nqtr/index/classes/QuestStoredClass#gonextifcompleted)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-10]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-19]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/QuestStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-11]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-2]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-27]

`void`

#### Inherited from [#inherited-from-20]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/QuestStoredClass#setstorageproperty)

***

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/QuestStoredClass.ts:99](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L99)

Start the quest.

#### Parameters [#parameters-12]

##### props [#props-7]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-28]

`Promise`\<`void`>

#### Inherited from [#inherited-from-21]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`start`](/jsdoc/nqtr/index/classes/QuestStoredClass#start)

***

### startCurrentStage() [#startcurrentstage]

\> **startCurrentStage**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/QuestStoredClass.ts:196](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L196)

Start the current stage. This is a system function, do not use it directly.

#### Parameters [#parameters-13]

##### props [#props-8]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-29]

`Promise`\<`void`>

#### Inherited from [#inherited-from-22]

[`QuestStoredClass`](/jsdoc/nqtr/index/classes/QuestStoredClass).[`startCurrentStage`](/jsdoc/nqtr/index/classes/QuestStoredClass#startcurrentstage)


# Class: QuestStoredClass (/jsdoc/nqtr/index/classes/QuestStoredClass)



Defined in: [src/classes/quest/QuestStoredClass.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L25)

## Extends [#extends]

* `StoredClassModel`

## Extended by [#extended-by]

* [`QuestBaseModel`](/jsdoc/nqtr/index/classes/QuestBaseModel)

## Implements [#implements]

* `QuestBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new QuestStoredClass**(`id`, `_stages`, `props?`): `QuestStoredClass`

Defined in: [src/classes/quest/QuestStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L29)

#### Parameters [#parameters]

##### id [#id]

`string`

##### \_stages [#_stages]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

##### props? [#props]

[`QuestStoredClassProps`](/jsdoc/nqtr/index/interfaces/QuestStoredClassProps) = `{}`

#### Returns [#returns]

`QuestStoredClass`

#### Overrides [#overrides]

`StoredClassModel.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`QuestBaseInternalInterface.id`

#### Inherited from [#inherited-from]

`StoredClassModel.id`

## Accessors [#accessors]

### completed [#completed]

#### Get Signature [#get-signature]

\> **get** **completed**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L62)

If the quest is completed.

##### Returns [#returns-1]

`boolean`

#### Implementation of [#implementation-of-1]

`QuestBaseInternalInterface.completed`

***

### currentStage [#currentstage]

#### Get Signature [#get-signature-1]

\> **get** **currentStage**(): [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface) | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L50)

The current stage.

##### Returns [#returns-2]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface) | `undefined`

#### Implementation of [#implementation-of-2]

`QuestBaseInternalInterface.currentStage`

***

### currentStageIndex [#currentstageindex]

#### Get Signature [#get-signature-2]

\> **get** **currentStageIndex**(): `number` | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L43)

The index of the current stage.

##### Returns [#returns-3]

`number` | `undefined`

#### Set Signature [#set-signature]

\> **set** **currentStageIndex**(`value`): `void`

Defined in: [src/classes/quest/QuestStoredClass.ts:46](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L46)

The index of the current stage.

##### Parameters [#parameters-1]

###### value [#value]

`number` | `undefined`

##### Returns [#returns-4]

`void`

#### Implementation of [#implementation-of-3]

`QuestBaseInternalInterface.currentStageIndex`

***

### currentStageMustStart [#currentstagemuststart]

#### Get Signature [#get-signature-3]

\> **get** **currentStageMustStart**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:188](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L188)

If the current stage must start. It is true if the current stage is not started, can start and not completed.

##### Returns [#returns-5]

`boolean`

#### Implementation of [#implementation-of-4]

`QuestBaseInternalInterface.currentStageMustStart`

***

### failed [#failed]

#### Get Signature [#get-signature-4]

\> **get** **failed**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:79](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L79)

If the quest is failed.

##### Returns [#returns-6]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **failed**(`value`): `void`

Defined in: [src/classes/quest/QuestStoredClass.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L82)

If the quest is failed.

##### Parameters [#parameters-2]

###### value [#value-1]

`boolean`

##### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-5]

`QuestBaseInternalInterface.failed`

***

### inProgress [#inprogress]

#### Get Signature [#get-signature-5]

\> **get** **inProgress**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L69)

If the quest is started and not completed and not failed.

##### Returns [#returns-8]

`boolean`

#### Implementation of [#implementation-of-6]

`QuestBaseInternalInterface.inProgress`

***

### onContinue [#oncontinue]

#### Get Signature [#get-signature-6]

\> **get** **onContinue**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:92](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L92)

The function that will be called when the quest goes to the next stage.

##### Returns [#returns-9]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Implementation of [#implementation-of-7]

`QuestBaseInternalInterface.onContinue`

***

### onNextStage [#onnextstage]

#### Get Signature [#get-signature-7]

\> **get** **onNextStage**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:95](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L95)

##### Deprecated [#deprecated]

Use [onContinue](/jsdoc/nqtr/index/interfaces/QuestInterface#oncontinue) instead. The function that will be called when the quest goes to the next stage.

##### Returns [#returns-10]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Implementation of [#implementation-of-8]

`QuestBaseInternalInterface.onNextStage`

***

### onStart [#onstart]

#### Get Signature [#get-signature-8]

\> **get** **onStart**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

Defined in: [src/classes/quest/QuestStoredClass.ts:87](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L87)

The function that will be called when the quest starts.

##### Returns [#returns-11]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)> | `undefined`

#### Implementation of [#implementation-of-9]

`QuestBaseInternalInterface.onStart`

***

### stages [#stages]

#### Get Signature [#get-signature-9]

\> **get** **stages**(): [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

Defined in: [src/classes/quest/QuestStoredClass.ts:39](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L39)

The stages of the quest.

##### Returns [#returns-12]

[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

#### Implementation of [#implementation-of-10]

`QuestBaseInternalInterface.stages`

***

### started [#started]

#### Get Signature [#get-signature-10]

\> **get** **started**(): `boolean`

Defined in: [src/classes/quest/QuestStoredClass.ts:58](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L58)

If the quest is started.

##### Returns [#returns-13]

`boolean`

#### Implementation of [#implementation-of-11]

`QuestBaseInternalInterface.started`

## Methods [#methods]

### advanceIfCompleted() [#advanceifcompleted]

\> **advanceIfCompleted**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:124](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L124)

Go to the next stage if the current stage is completed.
If you want to force the change of stage, use [advanceUnconditionally](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceunconditionally).

#### Parameters [#parameters-3]

##### props [#props-1]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-14]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Implementation of [#implementation-of-12]

`QuestBaseInternalInterface.advanceIfCompleted`

***

### advanceUnconditionally() [#advanceunconditionally]

\> **advanceUnconditionally**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:161](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L161)

Ignore the completed state of the current stage and go to the next stage without checking if the current stage is completed.
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceifcompleted).

#### Parameters [#parameters-4]

##### props [#props-2]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-15]

`Promise`\<`boolean`>

returns true if the stage was changed, false otherwise.

#### Implementation of [#implementation-of-13]

`QuestBaseInternalInterface.advanceUnconditionally`

***

### continue() [#continue]

\> **continue**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:145](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L145)

Complete the current stage and go to the next stage with [advanceUnconditionally](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceunconditionally).
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](/jsdoc/nqtr/index/interfaces/QuestInterface#advanceifcompleted).

#### Parameters [#parameters-5]

##### props [#props-3]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-16]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Implementation of [#implementation-of-14]

`QuestBaseInternalInterface.continue`

***

### ~~forceGoNext()~~ [#forcegonext]

\> **forceGoNext**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:158](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L158)

#### Parameters [#parameters-6]

##### props [#props-4]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-17]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-1]

Use [advanceUnconditionally](#advanceunconditionally) instead.

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-7]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-18]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-1]

`StoredClassModel.getStorageProperty`

***

### ~~goNext()~~ [#gonext]

\> **goNext**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:142](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L142)

#### Parameters [#parameters-8]

##### props [#props-5]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-19]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-2]

Use [continue](#continue) instead.

***

### ~~goNextIfCompleted()~~ [#gonextifcompleted]

\> **goNextIfCompleted**(`props`): `Promise`\<`boolean`>

Defined in: [src/classes/quest/QuestStoredClass.ts:121](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L121)

#### Parameters [#parameters-9]

##### props [#props-6]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-20]

`Promise`\<`boolean`>

#### Deprecated [#deprecated-3]

Use [advanceIfCompleted](#advanceifcompleted) instead.

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-10]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-2]

`StoredClassModel.migrateOldStorage`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-11]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-2]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-22]

`void`

#### Inherited from [#inherited-from-3]

`StoredClassModel.setStorageProperty`

***

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/QuestStoredClass.ts:99](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L99)

Start the quest.

#### Parameters [#parameters-12]

##### props [#props-7]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-23]

`Promise`\<`void`>

#### Implementation of [#implementation-of-15]

`QuestBaseInternalInterface.start`

***

### startCurrentStage() [#startcurrentstage]

\> **startCurrentStage**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/QuestStoredClass.ts:196](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L196)

Start the current stage. This is a system function, do not use it directly.

#### Parameters [#parameters-13]

##### props [#props-8]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-24]

`Promise`\<`void`>

#### Implementation of [#implementation-of-16]

`QuestBaseInternalInterface.startCurrentStage`


# Class: RoomBaseModel (/jsdoc/nqtr/index/classes/RoomBaseModel)



Defined in: [src/classes/navigation/RoomBaseModel.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L19)

The base model of a room. I suggest you extend this class to create your own room model.
&#x2A;*You must use the [RegisteredRooms.add](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/add) function to save the room in the registered rooms.**

## Example [#example]

```ts
export const mcRoom = new RoomBaseModel('mc_room', mcHome, {
    name: "MC Room",
    icon: "https://icon.jpg",
    image: "https://image.jpg",
})
RegisteredRooms.add(mcRoom)
```

## Extends [#extends]

* [`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new RoomBaseModel**(`id`, `location`, `props?`): `RoomBaseModel`

Defined in: [src/classes/navigation/RoomBaseModel.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L25)

#### Parameters [#parameters]

##### id [#id]

`string`

The id of the room, it must be unique.

##### location [#location]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

The location where the room is.

##### props? [#props]

[`RoomBaseModelProps`](/jsdoc/nqtr/index/interfaces/RoomBaseModelProps) = `{}`

The properties of the room.

#### Returns [#returns]

`RoomBaseModel`

#### Overrides [#overrides]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/RoomStoredClass#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`id`](/jsdoc/nqtr/index/classes/RoomStoredClass#id)

## Accessors [#accessors]

### activities [#activities]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Inherited from [#inherited-from-1]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`activities`](/jsdoc/nqtr/index/classes/RoomStoredClass#activities)

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Inherited from [#inherited-from-2]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`activitiesIds`](/jsdoc/nqtr/index/classes/RoomStoredClass#activitiesids)

***

### automaticFunctions [#automaticfunctions]

#### Get Signature [#get-signature-2]

\> **get** **automaticFunctions**(): [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:103](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L103)

Get the functions that will be executed when the room is visited.

##### Returns [#returns-3]

[`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)\[]

#### Inherited from [#inherited-from-3]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`automaticFunctions`](/jsdoc/nqtr/index/classes/RoomStoredClass#automaticfunctions)

***

### characters [#characters]

#### Get Signature [#get-signature-3]

\> **get** **characters**(): `CharacterInterface`\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:96](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L96)

Get the characters in the room.

##### Returns [#returns-4]

`CharacterInterface`\[]

#### Inherited from [#inherited-from-4]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`characters`](/jsdoc/nqtr/index/classes/RoomStoredClass#characters)

***

### disabled [#disabled]

#### Get Signature [#get-signature-4]

\> **get** **disabled**(): `boolean`

Defined in: [src/classes/navigation/RoomBaseModel.ts:61](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L61)

Whether is disabled. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-5]

`boolean`

#### Set Signature [#set-signature]

\> **set** **disabled**(`value`): `void`

Defined in: [src/classes/navigation/RoomBaseModel.ts:68](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L68)

##### Parameters [#parameters-1]

###### value [#value]

`string` | `boolean`

##### Returns [#returns-6]

`void`

***

### hidden [#hidden]

#### Get Signature [#get-signature-5]

\> **get** **hidden**(): `boolean`

Defined in: [src/classes/navigation/RoomBaseModel.ts:76](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L76)

Whether is hidden. If it is a string, it is a Pixi'VN flag name.

##### Returns [#returns-7]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **hidden**(`value`): `void`

Defined in: [src/classes/navigation/RoomBaseModel.ts:83](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L83)

##### Parameters [#parameters-2]

###### value [#value-1]

`string` | `boolean`

##### Returns [#returns-8]

`void`

***

### icon [#icon]

#### Get Signature [#get-signature-6]

\> **get** **icon**(): `string` | `undefined`

Defined in: [src/classes/navigation/RoomBaseModel.ts:91](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L91)

The function for rendering the icon of the room.

##### Returns [#returns-9]

`string` | `undefined`

***

### image [#image]

#### Get Signature [#get-signature-7]

\> **get** **image**(): `string` | `undefined`

Defined in: [src/classes/navigation/RoomBaseModel.ts:53](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L53)

The image of the room.

##### Returns [#returns-10]

`string` | `undefined`

***

### location [#location-1]

#### Get Signature [#get-signature-8]

\> **get** **location**(): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

Defined in: [src/classes/navigation/RoomStoredClass.ts:92](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L92)

The location where the room is.

##### Returns [#returns-11]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

#### Inherited from [#inherited-from-5]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`location`](/jsdoc/nqtr/index/classes/RoomStoredClass#location)

***

### name [#name]

#### Get Signature [#get-signature-9]

\> **get** **name**(): `string`

Defined in: [src/classes/navigation/RoomBaseModel.ts:42](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L42)

The name.
If you set undefined, it will return the initial value of name.

##### Returns [#returns-12]

`string`

#### Set Signature [#set-signature-2]

\> **set** **name**(`value`): `void`

Defined in: [src/classes/navigation/RoomBaseModel.ts:45](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomBaseModel.ts#L45)

##### Parameters [#parameters-3]

###### value [#value-2]

`string` | `undefined`

##### Returns [#returns-13]

`void`

***

### routine [#routine]

#### Get Signature [#get-signature-10]

\> **get** **routine**(): [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L48)

Get the character commitments of the room.

##### Returns [#returns-14]

[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

#### Inherited from [#inherited-from-6]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`routine`](/jsdoc/nqtr/index/classes/RoomStoredClass#routine)

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-4]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-7]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`addActivity`](/jsdoc/nqtr/index/classes/RoomStoredClass#addactivity)

***

### addCommitment() [#addcommitment]

\> **addCommitment**(`commitment`, `options?`): `void`

Defined in: [src/classes/navigation/RoomStoredClass.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L51)

Connects the commitment to the class.

#### Parameters [#parameters-5]

##### commitment [#commitment]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to connect to the class.

##### options? [#options-1]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-16]

`void`

#### Inherited from [#inherited-from-8]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`addCommitment`](/jsdoc/nqtr/index/classes/RoomStoredClass#addcommitment)

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-9]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`clearExpiredActivities`](/jsdoc/nqtr/index/classes/RoomStoredClass#clearexpiredactivities)

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-6]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-18]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-10]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/RoomStoredClass#getstorageproperty)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-7]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-11]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/RoomStoredClass#migrateoldstorage)

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-8]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-12]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`removeActivity`](/jsdoc/nqtr/index/classes/RoomStoredClass#removeactivity)

***

### removeCommitment() [#removecommitment]

\> **removeCommitment**(`commitment`): `void`

Defined in: [src/classes/navigation/RoomStoredClass.ts:88](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L88)

Disconnects the commitment from the class.

#### Parameters [#parameters-9]

##### commitment [#commitment-1]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to disconnect from the class.

#### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-13]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`removeCommitment`](/jsdoc/nqtr/index/classes/RoomStoredClass#removecommitment)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-10]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-3]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-22]

`void`

#### Inherited from [#inherited-from-14]

[`RoomStoredClass`](/jsdoc/nqtr/index/classes/RoomStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/RoomStoredClass#setstorageproperty)


# Class: RoomStoredClass (/jsdoc/nqtr/index/classes/RoomStoredClass)



Defined in: [src/classes/navigation/RoomStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L19)

## Extends [#extends]

* `default`

## Extended by [#extended-by]

* [`RoomBaseModel`](/jsdoc/nqtr/index/classes/RoomBaseModel)

## Implements [#implements]

* `RoomBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new RoomStoredClass**(`id`, `location`, `activities?`): `RoomStoredClass`

Defined in: [src/classes/navigation/RoomStoredClass.ts:24](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L24)

#### Parameters [#parameters]

##### id [#id]

`string`

##### location [#location]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

The location where the room is.

##### activities? [#activities]

(`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[] | \{ `activities`: (`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[]; `routine`: (`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface))\[]; }

#### Returns [#returns]

`RoomStoredClass`

#### Overrides [#overrides]

`NavigationAbstractClass.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`RoomBaseInternalInterface.id`

#### Inherited from [#inherited-from]

`NavigationAbstractClass.id`

## Accessors [#accessors]

### activities [#activities-1]

#### Get Signature [#get-signature]

\> **get** **activities**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:176](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L176)

The activities associated with this class, filtered based on their scheduling.

##### Returns [#returns-1]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

#### Implementation of [#implementation-of-1]

`RoomBaseInternalInterface.activities`

#### Inherited from [#inherited-from-1]

`NavigationAbstractClass.activities`

***

### activitiesIds [#activitiesids]

#### Get Signature [#get-signature-1]

\> **get** **activitiesIds**(): `string`\[]

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:69](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L69)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

##### Returns [#returns-2]

`string`\[]

#### Implementation of [#implementation-of-2]

`RoomBaseInternalInterface.activitiesIds`

#### Inherited from [#inherited-from-2]

`NavigationAbstractClass.activitiesIds`

***

### automaticFunctions [#automaticfunctions]

#### Get Signature [#get-signature-2]

\> **get** **automaticFunctions**(): [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:103](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L103)

Get the functions that will be executed when the room is visited.

##### Returns [#returns-3]

[`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)\[]

#### Implementation of [#implementation-of-3]

`RoomBaseInternalInterface.automaticFunctions`

***

### characters [#characters]

#### Get Signature [#get-signature-3]

\> **get** **characters**(): `CharacterInterface`\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:96](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L96)

Get the characters in the room.

##### Returns [#returns-4]

`CharacterInterface`\[]

#### Implementation of [#implementation-of-4]

`RoomBaseInternalInterface.characters`

***

### location [#location-1]

#### Get Signature [#get-signature-4]

\> **get** **location**(): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

Defined in: [src/classes/navigation/RoomStoredClass.ts:92](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L92)

The location where the room is.

##### Returns [#returns-5]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

#### Implementation of [#implementation-of-5]

`RoomBaseInternalInterface.location`

***

### routine [#routine]

#### Get Signature [#get-signature-5]

\> **get** **routine**(): [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

Defined in: [src/classes/navigation/RoomStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L48)

Get the character commitments of the room.

##### Returns [#returns-6]

[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

#### Implementation of [#implementation-of-6]

`RoomBaseInternalInterface.routine`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L72)

Connects the activity to the class.

#### Parameters [#parameters-1]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-7]

`void`

#### Implementation of [#implementation-of-7]

`RoomBaseInternalInterface.addActivity`

#### Inherited from [#inherited-from-3]

`NavigationAbstractClass.addActivity`

***

### addCommitment() [#addcommitment]

\> **addCommitment**(`commitment`, `options?`): `void`

Defined in: [src/classes/navigation/RoomStoredClass.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L51)

Connects the commitment to the class.

#### Parameters [#parameters-2]

##### commitment [#commitment]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to connect to the class.

##### options? [#options-1]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling) = `{}`

#### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-8]

`RoomBaseInternalInterface.addCommitment`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:149](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L149)

Removes the useless activities.

#### Returns [#returns-9]

`void`

#### Implementation of [#implementation-of-9]

`RoomBaseInternalInterface.clearExpiredActivities`

#### Inherited from [#inherited-from-4]

`NavigationAbstractClass.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-3]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-10]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Implementation of [#implementation-of-10]

`RoomBaseInternalInterface.getStorageProperty`

#### Inherited from [#inherited-from-5]

`NavigationAbstractClass.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-4]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-11]

`void`

#### Implementation of [#implementation-of-11]

`RoomBaseInternalInterface.migrateOldStorage`

#### Inherited from [#inherited-from-6]

`NavigationAbstractClass.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/classes/navigation/NavigationAbstractClass.ts:134](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/NavigationAbstractClass.ts#L134)

Disconnects the activity from the class.

#### Parameters [#parameters-5]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-12]

`void`

#### Implementation of [#implementation-of-12]

`RoomBaseInternalInterface.removeActivity`

#### Inherited from [#inherited-from-7]

`NavigationAbstractClass.removeActivity`

***

### removeCommitment() [#removecommitment]

\> **removeCommitment**(`commitment`): `void`

Defined in: [src/classes/navigation/RoomStoredClass.ts:88](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/navigation/RoomStoredClass.ts#L88)

Disconnects the commitment from the class.

#### Parameters [#parameters-6]

##### commitment [#commitment-1]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to disconnect from the class.

#### Returns [#returns-13]

`void`

#### Implementation of [#implementation-of-13]

`RoomBaseInternalInterface.removeCommitment`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-7]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-14]

`void`

#### Implementation of [#implementation-of-14]

`RoomBaseInternalInterface.setStorageProperty`

#### Inherited from [#inherited-from-8]

`NavigationAbstractClass.setStorageProperty`


# Class: StageBaseModel (/jsdoc/nqtr/index/classes/StageBaseModel)



Defined in: [src/classes/quest/StageBaseModel.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L6)

## Extends [#extends]

* [`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new StageBaseModel**(`id`, `props`): `StageBaseModel`

Defined in: [src/classes/quest/StageBaseModel.ts:7](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L7)

#### Parameters [#parameters]

##### id [#id]

`string`

##### props [#props]

[`StageProps`](/jsdoc/nqtr/index/interfaces/StageProps)

#### Returns [#returns]

`StageBaseModel`

#### Overrides [#overrides]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`constructor`](/jsdoc/nqtr/index/classes/StageStoredClass#constructor)

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Inherited from [#inherited-from]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`id`](/jsdoc/nqtr/index/classes/StageStoredClass#id)

## Accessors [#accessors]

### adviceDescription [#advicedescription]

#### Get Signature [#get-signature]

\> **get** **adviceDescription**(): `string`

Defined in: [src/classes/quest/StageBaseModel.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L43)

The advice description of the stage.

##### Returns [#returns-1]

`string`

***

### canStart [#canstart]

#### Get Signature [#get-signature-1]

\> **get** **canStart**(): `boolean`

Defined in: [src/classes/quest/StageBaseModel.ts:94](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L94)

Check if the stage can start.

##### Example [#example]

```ts
export default class Stage extends StageStoredClass {
	override get canStart(): boolean {
		if (this.flagsRequired.length > 0 && !this.flagsRequired.every((flag) => storage.getFlag(flag.flag))) {
			return false;
		}
		return super.canStart;
	}
}
```

##### Returns [#returns-2]

`boolean`

#### Overrides [#overrides-1]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`canStart`](/jsdoc/nqtr/index/classes/StageStoredClass#canstart)

***

### completed [#completed]

#### Get Signature [#get-signature-2]

\> **get** **completed**(): `boolean`

Defined in: [src/classes/quest/StageBaseModel.ts:79](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L79)

Check if the flag and goals are completed.
You can force the completion of the stage by setting the completed property to true.

##### Example [#example-1]

```ts
export default class Stage extends StageStoredClass {
	override get completed(): boolean {
		if (super.completed) {
			return true;
		}
		if (this.flags.length > 0) {
			if (!this.flags.every((flag) => storage.getFlag(flag.flag))) {
				return false;
			}
			return true;
		}
		return false;
	}
	override set completed(value: boolean) {
		super.completed = value;
	}
}
```

##### Returns [#returns-3]

`boolean`

#### Set Signature [#set-signature]

\> **set** **completed**(`value`): `void`

Defined in: [src/classes/quest/StageBaseModel.ts:91](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L91)

Check if the flag and goals are completed.
You can force the completion of the stage by setting the completed property to true.

##### Example [#example-2]

```ts
export default class Stage extends StageStoredClass {
	override get completed(): boolean {
		if (super.completed) {
			return true;
		}
		if (this.flags.length > 0) {
			if (!this.flags.every((flag) => storage.getFlag(flag.flag))) {
				return false;
			}
			return true;
		}
		return false;
	}
	override set completed(value: boolean) {
		super.completed = value;
	}
}
```

##### Parameters [#parameters-1]

###### value [#value]

`boolean`

##### Returns [#returns-4]

`void`

#### Overrides [#overrides-2]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`completed`](/jsdoc/nqtr/index/classes/StageStoredClass#completed)

***

### deltaDateRequired [#deltadaterequired]

#### Get Signature [#get-signature-3]

\> **get** **deltaDateRequired**(): `number`

Defined in: [src/classes/quest/StageStoredClass.ts:122](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L122)

The number of day/date required to start the stage.

##### Returns [#returns-5]

`number`

#### Inherited from [#inherited-from-1]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`deltaDateRequired`](/jsdoc/nqtr/index/classes/StageStoredClass#deltadaterequired)

***

### description [#description]

#### Get Signature [#get-signature-4]

\> **get** **description**(): `string`

Defined in: [src/classes/quest/StageBaseModel.ts:35](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L35)

The description of the stage.

##### Returns [#returns-6]

`string`

***

### flags [#flags]

#### Get Signature [#get-signature-5]

\> **get** **flags**(): `StageFlags`\[]

Defined in: [src/classes/quest/StageBaseModel.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L59)

The list of flags that the player must complete to finish the stage.

##### Returns [#returns-7]

`StageFlags`\[]

***

### flagsRequired [#flagsrequired]

#### Get Signature [#get-signature-6]

\> **get** **flagsRequired**(): `StageFlags`\[]

Defined in: [src/classes/quest/StageBaseModel.ts:67](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L67)

The list of flags required to start the stage.

##### Returns [#returns-8]

`StageFlags`\[]

***

### image [#image]

#### Get Signature [#get-signature-7]

\> **get** **image**(): `string` | `undefined`

Defined in: [src/classes/quest/StageBaseModel.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L51)

The image of the stage.

##### Returns [#returns-9]

`string` | `undefined`

***

### name [#name]

#### Get Signature [#get-signature-8]

\> **get** **name**(): `string`

Defined in: [src/classes/quest/StageBaseModel.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L27)

The name of the stage.

##### Returns [#returns-10]

`string`

***

### onEnd [#onend]

#### Get Signature [#get-signature-9]

\> **get** **onEnd**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L48)

The function that will be called when the stage ends.

##### Returns [#returns-11]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

#### Inherited from [#inherited-from-2]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`onEnd`](/jsdoc/nqtr/index/classes/StageStoredClass#onend)

***

### onStart [#onstart]

#### Get Signature [#get-signature-10]

\> **get** **onStart**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L43)

The function that will be called when the stage starts.

##### Returns [#returns-12]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

#### Inherited from [#inherited-from-3]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`onStart`](/jsdoc/nqtr/index/classes/StageStoredClass#onstart)

***

### questsRequired [#questsrequired]

#### Get Signature [#get-signature-11]

\> **get** **questsRequired**(): [`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

Defined in: [src/classes/quest/StageStoredClass.ts:127](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L127)

The list of quests required to start the stage.

##### Returns [#returns-13]

[`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

#### Inherited from [#inherited-from-4]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`questsRequired`](/jsdoc/nqtr/index/classes/StageStoredClass#questsrequired)

***

### requestDescriptionToStart [#requestdescriptiontostart]

#### Get Signature [#get-signature-12]

\> **get** **requestDescriptionToStart**(): `string`

Defined in: [src/classes/quest/StageBaseModel.ts:75](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageBaseModel.ts#L75)

The description of the request to start the stage.

##### Returns [#returns-14]

`string`

***

### startDate [#startdate]

#### Get Signature [#get-signature-13]

\> **get** **startDate**(): `number` | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:73](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L73)

The date when the stage starts.

##### Returns [#returns-15]

`number` | `undefined`

#### Inherited from [#inherited-from-5]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`startDate`](/jsdoc/nqtr/index/classes/StageStoredClass#startdate)

***

### started [#started]

#### Get Signature [#get-signature-14]

\> **get** **started**(): `boolean`

Defined in: [src/classes/quest/StageStoredClass.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L59)

If the stage is started.

##### Returns [#returns-16]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **started**(`value`): `void`

Defined in: [src/classes/quest/StageStoredClass.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L62)

If the stage is started.

##### Parameters [#parameters-2]

###### value [#value-1]

`boolean`

##### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-6]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`started`](/jsdoc/nqtr/index/classes/StageStoredClass#started)

## Methods [#methods]

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-3]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-18]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-7]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`getStorageProperty`](/jsdoc/nqtr/index/classes/StageStoredClass#getstorageproperty)

***

### inizialize() [#inizialize]

\> **inizialize**(): `void`

Defined in: [src/classes/quest/StageStoredClass.ts:103](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L103)

#### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-8]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`inizialize`](/jsdoc/nqtr/index/classes/StageStoredClass#inizialize)

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-4]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-9]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`migrateOldStorage`](/jsdoc/nqtr/index/classes/StageStoredClass#migrateoldstorage)

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-5]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-2]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-10]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`setStorageProperty`](/jsdoc/nqtr/index/classes/StageStoredClass#setstorageproperty)

***

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/StageStoredClass.ts:110](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L110)

The function that will be called when the stage starts.

#### Parameters [#parameters-6]

##### props [#props-1]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-22]

`Promise`\<`void`>

#### Inherited from [#inherited-from-11]

[`StageStoredClass`](/jsdoc/nqtr/index/classes/StageStoredClass).[`start`](/jsdoc/nqtr/index/classes/StageStoredClass#start)


# Class: StageStoredClass (/jsdoc/nqtr/index/classes/StageStoredClass)



Defined in: [src/classes/quest/StageStoredClass.ts:30](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L30)

## Extends [#extends]

* `StoredClassModel`

## Extended by [#extended-by]

* [`StageBaseModel`](/jsdoc/nqtr/index/classes/StageBaseModel)

## Implements [#implements]

* `StageBaseInternalInterface`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new StageStoredClass**(`id`, `props?`): `StageStoredClass`

Defined in: [src/classes/quest/StageStoredClass.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L34)

#### Parameters [#parameters]

##### id [#id]

`string`

##### props? [#props]

[`StageStoredClassProps`](/jsdoc/nqtr/index/interfaces/StageStoredClassProps) = `{}`

#### Returns [#returns]

`StageStoredClass`

#### Overrides [#overrides]

`StoredClassModel.constructor`

## Properties [#properties]

### id [#id-1]

\> `readonly` **id**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:41

Is id of the stored class. is unique for this class.

#### Implementation of [#implementation-of]

`StageBaseInternalInterface.id`

#### Inherited from [#inherited-from]

`StoredClassModel.id`

## Accessors [#accessors]

### canStart [#canstart]

#### Get Signature [#get-signature]

\> **get** **canStart**(): `boolean`

Defined in: [src/classes/quest/StageStoredClass.ts:81](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L81)

Check if the stage can start.

##### Example [#example]

```ts
export default class Stage extends StageStoredClass {
	override get canStart(): boolean {
		if (this.flagsRequired.length > 0 && !this.flagsRequired.every((flag) => storage.getFlag(flag.flag))) {
			return false;
		}
		return super.canStart;
	}
}
```

##### Returns [#returns-1]

`boolean`

#### Implementation of [#implementation-of-1]

`StageBaseInternalInterface.canStart`

***

### completed [#completed]

#### Get Signature [#get-signature-1]

\> **get** **completed**(): `boolean`

Defined in: [src/classes/quest/StageStoredClass.ts:52](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L52)

Check if the flag and goals are completed.
You can force the completion of the stage by setting the completed property to true.

##### Example [#example-1]

```ts
export default class Stage extends StageStoredClass {
	override get completed(): boolean {
		if (super.completed) {
			return true;
		}
		if (this.flags.length > 0) {
			if (!this.flags.every((flag) => storage.getFlag(flag.flag))) {
				return false;
			}
			return true;
		}
		return false;
	}
	override set completed(value: boolean) {
		super.completed = value;
	}
}
```

##### Returns [#returns-2]

`boolean`

#### Set Signature [#set-signature]

\> **set** **completed**(`value`): `void`

Defined in: [src/classes/quest/StageStoredClass.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L55)

Check if the flag and goals are completed.
You can force the completion of the stage by setting the completed property to true.

##### Example [#example-2]

```ts
export default class Stage extends StageStoredClass {
	override get completed(): boolean {
		if (super.completed) {
			return true;
		}
		if (this.flags.length > 0) {
			if (!this.flags.every((flag) => storage.getFlag(flag.flag))) {
				return false;
			}
			return true;
		}
		return false;
	}
	override set completed(value: boolean) {
		super.completed = value;
	}
}
```

##### Parameters [#parameters-1]

###### value [#value]

`boolean`

##### Returns [#returns-3]

`void`

#### Implementation of [#implementation-of-2]

`StageBaseInternalInterface.completed`

***

### deltaDateRequired [#deltadaterequired]

#### Get Signature [#get-signature-2]

\> **get** **deltaDateRequired**(): `number`

Defined in: [src/classes/quest/StageStoredClass.ts:122](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L122)

The number of day/date required to start the stage.

##### Returns [#returns-4]

`number`

#### Implementation of [#implementation-of-3]

`StageBaseInternalInterface.deltaDateRequired`

***

### onEnd [#onend]

#### Get Signature [#get-signature-3]

\> **get** **onEnd**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L48)

The function that will be called when the stage ends.

##### Returns [#returns-5]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

#### Implementation of [#implementation-of-4]

`StageBaseInternalInterface.onEnd`

***

### onStart [#onstart]

#### Get Signature [#get-signature-4]

\> **get** **onStart**(): [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L43)

The function that will be called when the stage starts.

##### Returns [#returns-6]

[`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)> | `undefined`

#### Implementation of [#implementation-of-5]

`StageBaseInternalInterface.onStart`

***

### questsRequired [#questsrequired]

#### Get Signature [#get-signature-5]

\> **get** **questsRequired**(): [`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

Defined in: [src/classes/quest/StageStoredClass.ts:127](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L127)

The list of quests required to start the stage.

##### Returns [#returns-7]

[`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

#### Implementation of [#implementation-of-6]

`StageBaseInternalInterface.questsRequired`

***

### startDate [#startdate]

#### Get Signature [#get-signature-6]

\> **get** **startDate**(): `number` | `undefined`

Defined in: [src/classes/quest/StageStoredClass.ts:73](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L73)

The date when the stage starts.

##### Returns [#returns-8]

`number` | `undefined`

#### Implementation of [#implementation-of-7]

`StageBaseInternalInterface.startDate`

***

### started [#started]

#### Get Signature [#get-signature-7]

\> **get** **started**(): `boolean`

Defined in: [src/classes/quest/StageStoredClass.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L59)

If the stage is started.

##### Returns [#returns-9]

`boolean`

#### Set Signature [#set-signature-1]

\> **set** **started**(`value`): `void`

Defined in: [src/classes/quest/StageStoredClass.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L62)

If the stage is started.

##### Parameters [#parameters-2]

###### value [#value-1]

`boolean`

##### Returns [#returns-10]

`void`

#### Implementation of [#implementation-of-8]

`StageBaseInternalInterface.started`

## Methods [#methods]

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-3]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-11]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-1]

`StoredClassModel.getStorageProperty`

***

### inizialize() [#inizialize]

\> **inizialize**(): `void`

Defined in: [src/classes/quest/StageStoredClass.ts:103](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L103)

#### Returns [#returns-12]

`void`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-4]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-2]

`StoredClassModel.migrateOldStorage`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-5]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value-2]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-14]

`void`

#### Inherited from [#inherited-from-3]

`StoredClassModel.setStorageProperty`

***

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/classes/quest/StageStoredClass.ts:110](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L110)

The function that will be called when the stage starts.

#### Parameters [#parameters-6]

##### props [#props-1]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns-15]

`Promise`\<`void`>

#### Implementation of [#implementation-of-9]

`StageBaseInternalInterface.start`


# Interface: ActiveScheduling (/jsdoc/nqtr/index/interfaces/ActiveScheduling)



Defined in: [src/interface/activity/ActiveScheduling.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L4)

## Extended by [#extended-by]

* [`ActivityStoredClassProps`](/jsdoc/nqtr/index/interfaces/ActivityStoredClassProps)

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `readonly` `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/ActiveScheduling.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L12)

Used to schedule what date it will be added and removed.

***

### timeSlot? [#timeslot]

\> `readonly` `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[]

Defined in: [src/interface/activity/ActiveScheduling.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L8)

Time slot in which activity/commitment will be active.


# Interface: ActivityInterface (/jsdoc/nqtr/index/interfaces/ActivityInterface)



Defined in: [src/interface/activity/ActivityInterface.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L3)

## Extends [#extends]

* `ActivityBaseInternalInterface`

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `readonly` `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/ActiveScheduling.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L12)

Used to schedule what date it will be added and removed.

#### Inherited from [#inherited-from]

`ActivityBaseInternalInterface.dateScheduling`

***

### expired [#expired]

\> `readonly` **expired**: `boolean`

Defined in: [src/interface/activity/ActivityInterface.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L19)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

#### Inherited from [#inherited-from-1]

`ActivityBaseInternalInterface.expired`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/activity/ActivityInterface.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L9)

The id of the activity/commitment.

#### Inherited from [#inherited-from-2]

`ActivityBaseInternalInterface.id`

***

### run [#run]

\> `readonly` **run**: [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

Defined in: [src/interface/activity/ActivityInterface.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L13)

The function that is called when the activity/commitment is runned.

#### Inherited from [#inherited-from-3]

`ActivityBaseInternalInterface.run`

***

### timeSlot? [#timeslot]

\> `readonly` `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[]

Defined in: [src/interface/activity/ActiveScheduling.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L8)

Time slot in which activity/commitment will be active.

#### Inherited from [#inherited-from-4]

`ActivityBaseInternalInterface.timeSlot`

## Methods [#methods]

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/interface/activity/ActivityInterface.ts:24](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L24)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

The options to check if the activity/commitment is active.

#### Returns [#returns]

`boolean`

#### Inherited from [#inherited-from-5]

`ActivityBaseInternalInterface.isActive`


# Interface: ActivityProps (/jsdoc/nqtr/index/interfaces/ActivityProps)



Defined in: [src/interface/activity/ActivityProps.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L4)

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/ActivityProps.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L17)

Used to schedule what date it will be added and removed.

***

### disabled? [#disabled]

\> `optional` &#x2A;*disabled?**: `string` | `boolean`

Defined in: [src/interface/activity/ActivityProps.ts:22](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L22)

Whether is disabled. You can also pass a Pixi'VN flag name.

#### Default [#default]

```ts
false
```

***

### hidden? [#hidden]

\> `optional` &#x2A;*hidden?**: `string` | `boolean`

Defined in: [src/interface/activity/ActivityProps.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L27)

Whether is hidden. You can also pass a Pixi'VN flag name.

#### Default [#default-1]

```ts
false
```

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/activity/ActivityProps.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L9)

The name

#### Default [#default-2]

```ts
""
```

***

### renderIcon? [#rendericon]

\> `optional` &#x2A;*renderIcon?**: `string`

Defined in: [src/interface/activity/ActivityProps.ts:32](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L32)

The icon of the activity.

#### Default [#default-3]

```ts
undefined
```

***

### timeSlot? [#timeslot]

\> `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)

Defined in: [src/interface/activity/ActivityProps.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityProps.ts#L13)

Time slot in which activity/commitment will be active.


# Interface: ActivityStoredClassProps (/jsdoc/nqtr/index/interfaces/ActivityStoredClassProps)



Defined in: [src/classes/activity/ActivityStoredClass.ts:10](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/ActivityStoredClass.ts#L10)

## Extends [#extends]

* [`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `readonly` `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/ActiveScheduling.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L12)

Used to schedule what date it will be added and removed.

#### Inherited from [#inherited-from]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling).[`dateScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling#datescheduling)

***

### timeSlot? [#timeslot]

\> `readonly` `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[]

Defined in: [src/interface/activity/ActiveScheduling.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L8)

Time slot in which activity/commitment will be active.

#### Inherited from [#inherited-from-1]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling).[`timeSlot`](/jsdoc/nqtr/index/interfaces/ActiveScheduling#timeslot)


# Interface: CommitmentInfo (/jsdoc/nqtr/index/interfaces/CommitmentInfo)



Defined in: [src/interface/activity/CommitmentInfo.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInfo.ts#L3)

## Properties [#properties]

### commitment [#commitment]

\> **commitment**: [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

Defined in: [src/interface/activity/CommitmentInfo.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInfo.ts#L4)

***

### roomId [#roomid]

\> **roomId**: `string`

Defined in: [src/interface/activity/CommitmentInfo.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInfo.ts#L5)


# Interface: CommitmentInterface (/jsdoc/nqtr/index/interfaces/CommitmentInterface)



Defined in: [src/interface/activity/CommitmentInterface.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInterface.ts#L5)

## Extends [#extends]

* `CommitmentBaseInternalInterface`

## Properties [#properties]

### characters [#characters]

\> `readonly` **characters**: `CharacterInterface`\[]

Defined in: [src/interface/activity/CommitmentInterface.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInterface.ts#L11)

The character or characters that are in the commitment and so in the room.

#### Inherited from [#inherited-from]

`CommitmentBaseInternalInterface.characters`

***

### dateScheduling? [#datescheduling]

\> `readonly` `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/ActiveScheduling.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L12)

Used to schedule what date it will be added and removed.

#### Inherited from [#inherited-from-1]

`CommitmentBaseInternalInterface.dateScheduling`

***

### executionType [#executiontype]

\> **executionType**: [`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

Defined in: [src/interface/activity/CommitmentInterface.ts:16](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInterface.ts#L16)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

#### Inherited from [#inherited-from-2]

`CommitmentBaseInternalInterface.executionType`

***

### expired [#expired]

\> `readonly` **expired**: `boolean`

Defined in: [src/interface/activity/ActivityInterface.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L19)

Whether the activity/commitment is a deadline, so it will then be removed or hidden.

It **depends only on the date**, not the time. So if you set \{ dateScheduling: \{ from: 0, to: 3 }, timeSlot \{ from: 10, to: 20 } } the activity/commitment hidden or deleted on date 3 at 0.

#### Inherited from [#inherited-from-3]

`CommitmentBaseInternalInterface.expired`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/activity/ActivityInterface.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L9)

The id of the activity/commitment.

#### Inherited from [#inherited-from-4]

`CommitmentBaseInternalInterface.id`

***

### priority [#priority]

\> **priority**: `number`

Defined in: [src/interface/activity/CommitmentInterface.ts:21](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentInterface.ts#L21)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

#### Inherited from [#inherited-from-5]

`CommitmentBaseInternalInterface.priority`

***

### run [#run]

\> `readonly` **run**: [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)

Defined in: [src/interface/activity/ActivityInterface.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L13)

The function that is called when the activity/commitment is runned.

#### Inherited from [#inherited-from-6]

`CommitmentBaseInternalInterface.run`

***

### timeSlot? [#timeslot]

\> `readonly` `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface) | [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)\[]

Defined in: [src/interface/activity/ActiveScheduling.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActiveScheduling.ts#L8)

Time slot in which activity/commitment will be active.

#### Inherited from [#inherited-from-7]

`CommitmentBaseInternalInterface.timeSlot`

## Methods [#methods]

### isActive() [#isactive]

\> **isActive**(`options?`): `boolean`

Defined in: [src/interface/activity/ActivityInterface.ts:24](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/ActivityInterface.ts#L24)

Whether the activity/commitment is active, so it will be shown in the routine and can be runned.

#### Parameters [#parameters]

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

The options to check if the activity/commitment is active.

#### Returns [#returns]

`boolean`

#### Inherited from [#inherited-from-8]

`CommitmentBaseInternalInterface.isActive`


# Interface: CommitmentProps (/jsdoc/nqtr/index/interfaces/CommitmentProps)



Defined in: [src/interface/activity/CommitmentProps.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L6)

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `readonly` `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/interface/activity/CommitmentProps.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L19)

Used to schedule what date it will be added and removed.

***

### disabled? [#disabled]

\> `optional` &#x2A;*disabled?**: `string` | `boolean`

Defined in: [src/interface/activity/CommitmentProps.ts:42](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L42)

Whether is disabled. You can also pass a Pixi'VN flag name.
If it is disabled this commitment will not be taken into consideration. So the characters will not be in the room, but will be busy with other commitments.

#### Default [#default]

```ts
false
```

***

### executionType? [#executiontype]

\> `optional` &#x2A;*executionType?**: [`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

Defined in: [src/interface/activity/CommitmentProps.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L29)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

#### Default [#default-1]

```ts
"interaction"
```

***

### hidden? [#hidden]

\> `optional` &#x2A;*hidden?**: `string` | `boolean`

Defined in: [src/interface/activity/CommitmentProps.ts:47](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L47)

Whether is hidden. You can also pass a Pixi'VN flag name.

#### Default [#default-2]

```ts
false
```

***

### icon? [#icon]

\> `optional` &#x2A;*icon?**: `string`

Defined in: [src/interface/activity/CommitmentProps.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L51)

The icon of the commitment.

***

### image? [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/interface/activity/CommitmentProps.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L23)

The image ofthe Commitment.

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/activity/CommitmentProps.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L11)

The name

#### Default [#default-3]

```ts
""
```

***

### onRun? [#onrun]

\> `optional` &#x2A;*onRun?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)>

Defined in: [src/interface/activity/CommitmentProps.ts:36](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L36)

Is a function that is called when the player interacts with the character.

#### Param [#param]

**commitment**

#### Returns [#returns]

#### Default [#default-4]

```ts
undefined
```

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `number`

Defined in: [src/interface/activity/CommitmentProps.ts:57](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L57)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

#### Default [#default-5]

```ts
0
```

***

### timeSlot? [#timeslot]

\> `readonly` `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)

Defined in: [src/interface/activity/CommitmentProps.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/activity/CommitmentProps.ts#L15)

Time slot in which activity/commitment will be active.


# Interface: CommitmentStoredClassProps (/jsdoc/nqtr/index/interfaces/CommitmentStoredClassProps)



Defined in: [src/classes/activity/CommitmentStoredClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L19)

## Properties [#properties]

### dateScheduling? [#datescheduling]

\> `optional` &#x2A;*dateScheduling?**: [`DateSchedulingInterface`](/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)

Defined in: [src/classes/activity/CommitmentStoredClass.ts:37](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L37)

Used to schedule what date it will be added and removed.

***

### executionType? [#executiontype]

\> `optional` &#x2A;*executionType?**: [`ExecutionType`](/jsdoc/nqtr/index/type-aliases/ExecutionType)

Defined in: [src/classes/activity/CommitmentStoredClass.ts:24](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L24)

Execution type. If is "automatic" the onRun() runned automatically when the palayer is in the room. If is "interaction" the player must interact with the character to run the onRun() function.
If you set "automatic" remember to remove the commitment when it is no longer needed, because otherwise it repeats itself every time.

***

### priority? [#priority]

\> `optional` &#x2A;*priority?**: `number`

Defined in: [src/classes/activity/CommitmentStoredClass.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L29)

The priority. The higher the number, the higher the priority.
To ensure that a character is not in 2 places at the same time, if there are 2 or more valid commits at the same time and with the same character, the one with the highest priority will be chosen.

***

### timeSlot? [#timeslot]

\> `optional` &#x2A;*timeSlot?**: [`TimeSchedulingInterface`](/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)

Defined in: [src/classes/activity/CommitmentStoredClass.ts:33](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/activity/CommitmentStoredClass.ts#L33)

Time slot in which activity/commitment will be active.


# Interface: DateSchedulingInterface (/jsdoc/nqtr/index/interfaces/DateSchedulingInterface)



Defined in: [src/interface/DateSchedulingInterface.ts:1](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/DateSchedulingInterface.ts#L1)

## Properties [#properties]

### from [#from]

\> **from**: `number`

Defined in: [src/interface/DateSchedulingInterface.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/DateSchedulingInterface.ts#L6)

The start date. If the item hasn't started yet, it will be hidden.
If you set it to 3, the item will be hidden on dates 1 and 2 and will be shown starting on date 3.

***

### to? [#to]

\> `optional` &#x2A;*to?**: `number`

Defined in: [src/interface/DateSchedulingInterface.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/DateSchedulingInterface.ts#L12)

The date when the item ends. If the item is ended yet, it will be deleted or hidden.
If you set \{ from: 0, to: 3 }, the item will be shown into dates 1 and 2 and will be deleted or hidden from date 3.

#### Default [#default]

```ts
undefined
```


# Interface: LocationBaseModelProps (/jsdoc/nqtr/index/interfaces/LocationBaseModelProps)



Defined in: [src/interface/navigation/LocationBaseModelProps.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L3)

## Properties [#properties]

### activities? [#activities]

\> `optional` &#x2A;*activities?**: (`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[]

Defined in: [src/interface/navigation/LocationBaseModelProps.ts:28](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L28)

The activities that are available in this location.

#### Default [#default]

```ts
[]
```

***

### disabled? [#disabled]

\> `optional` &#x2A;*disabled?**: `string` | `boolean`

Defined in: [src/interface/navigation/LocationBaseModelProps.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L13)

Whether is disabled. You can also pass a Pixi'VN flag name.

#### Default [#default-1]

```ts
false
```

***

### hidden? [#hidden]

\> `optional` &#x2A;*hidden?**: `string` | `boolean`

Defined in: [src/interface/navigation/LocationBaseModelProps.ts:18](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L18)

Whether is hidden. You can also pass a Pixi'VN flag name.

#### Default [#default-2]

```ts
false
```

***

### icon? [#icon]

\> `optional` &#x2A;*icon?**: `string`

Defined in: [src/interface/navigation/LocationBaseModelProps.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L23)

The icon of the location.

#### Default [#default-3]

```ts
undefined
```

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/navigation/LocationBaseModelProps.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationBaseModelProps.ts#L8)

The name

#### Default [#default-4]

```ts
""
```


# Interface: LocationInterface (/jsdoc/nqtr/index/interfaces/LocationInterface)



Defined in: [src/interface/navigation/LocationInterface.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationInterface.ts#L5)

## Extends [#extends]

* `LocationInternalInterface`

## Properties [#properties]

### activities [#activities]

\> **activities**: [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L31)

The activities associated with this class, filtered based on their scheduling.

#### Inherited from [#inherited-from]

`LocationInternalInterface.activities`

***

### activitiesIds [#activitiesids]

\> `readonly` **activitiesIds**: `string`\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L27)

All the ids of the activities associated with this class. Compared to [activities](#activities), they are not filtered based on their scheduling.

#### Inherited from [#inherited-from-1]

`LocationInternalInterface.activitiesIds`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/navigation/LocationInterface.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationInterface.ts#L11)

The id of the location.

#### Inherited from [#inherited-from-2]

`LocationInternalInterface.id`

***

### map [#map]

\> `readonly` **map**: [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)

Defined in: [src/interface/navigation/LocationInterface.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationInterface.ts#L15)

The map where the location is.

#### Inherited from [#inherited-from-3]

`LocationInternalInterface.map`

***

### rooms [#rooms]

\> `readonly` **rooms**: [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

Defined in: [src/interface/navigation/LocationInterface.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/LocationInterface.ts#L20)

Get all rooms in the location.

#### Returns [#returns]

The rooms in the location.

#### Inherited from [#inherited-from-4]

`LocationInternalInterface.rooms`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L13)

Connects the activity to the class.

#### Parameters [#parameters]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-5]

`LocationInternalInterface.addActivity`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L23)

Removes the useless activities.

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-6]

`LocationInternalInterface.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-1]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-3]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-7]

`LocationInternalInterface.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-2]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-8]

`LocationInternalInterface.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L19)

Disconnects the activity from the class.

#### Parameters [#parameters-3]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-5]

`void`

#### Inherited from [#inherited-from-9]

`LocationInternalInterface.removeActivity`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-4]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-6]

`void`

#### Inherited from [#inherited-from-10]

`LocationInternalInterface.setStorageProperty`


# Interface: MapBaseModelProps (/jsdoc/nqtr/index/interfaces/MapBaseModelProps)



Defined in: [src/interface/navigation/MapBaseModelProps.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapBaseModelProps.ts#L3)

## Properties [#properties]

### activities? [#activities]

\> `optional` &#x2A;*activities?**: (`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[]

Defined in: [src/interface/navigation/MapBaseModelProps.ts:18](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapBaseModelProps.ts#L18)

The activities that are available in this map.

#### Default [#default]

```ts
[]
```

***

### image? [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/interface/navigation/MapBaseModelProps.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapBaseModelProps.ts#L13)

The image of the map.

#### Default [#default-1]

```ts
undefined
```

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/navigation/MapBaseModelProps.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapBaseModelProps.ts#L8)

The name

#### Default [#default-2]

```ts
""
```


# Interface: MapInterface (/jsdoc/nqtr/index/interfaces/MapInterface)



Defined in: [src/interface/navigation/MapInterface.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapInterface.ts#L4)

## Extends [#extends]

* `MapBaseInternalInterface`

## Properties [#properties]

### activities [#activities]

\> **activities**: [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L31)

The activities associated with this class, filtered based on their scheduling.

#### Inherited from [#inherited-from]

`MapBaseInternalInterface.activities`

***

### activitiesIds [#activitiesids]

\> `readonly` **activitiesIds**: `string`\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L27)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

#### Inherited from [#inherited-from-1]

`MapBaseInternalInterface.activitiesIds`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/navigation/MapInterface.ts:10](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapInterface.ts#L10)

The id of the map.

#### Inherited from [#inherited-from-2]

`MapBaseInternalInterface.id`

***

### locations [#locations]

\> `readonly` **locations**: [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

Defined in: [src/interface/navigation/MapInterface.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/MapInterface.ts#L15)

Get all locations in the map.

#### Returns [#returns]

The locations in the map.

#### Inherited from [#inherited-from-3]

`MapBaseInternalInterface.locations`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L13)

Connects the activity to the class.

#### Parameters [#parameters]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-4]

`MapBaseInternalInterface.addActivity`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L23)

Removes the useless activities.

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-5]

`MapBaseInternalInterface.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-1]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-3]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-6]

`MapBaseInternalInterface.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-2]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-7]

`MapBaseInternalInterface.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L19)

Disconnects the activity from the class.

#### Parameters [#parameters-3]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-5]

`void`

#### Inherited from [#inherited-from-8]

`MapBaseInternalInterface.removeActivity`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-4]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-6]

`void`

#### Inherited from [#inherited-from-9]

`MapBaseInternalInterface.setStorageProperty`


# Interface: NqtrActivityIds (/jsdoc/nqtr/index/interfaces/NqtrActivityIds)



Defined in: [src/registries/NqtrIds.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L8)


# Interface: NqtrCommitmentIds (/jsdoc/nqtr/index/interfaces/NqtrCommitmentIds)



Defined in: [src/registries/NqtrIds.ts:10](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L10)


# Interface: NqtrLocationIds (/jsdoc/nqtr/index/interfaces/NqtrLocationIds)



Defined in: [src/registries/NqtrIds.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L12)


# Interface: NqtrMapIds (/jsdoc/nqtr/index/interfaces/NqtrMapIds)



Defined in: [src/registries/NqtrIds.ts:14](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L14)


# Interface: NqtrQuestIds (/jsdoc/nqtr/index/interfaces/NqtrQuestIds)



Defined in: [src/registries/NqtrIds.ts:16](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L16)


# Interface: NqtrRoomIds (/jsdoc/nqtr/index/interfaces/NqtrRoomIds)



Defined in: [src/registries/NqtrIds.ts:18](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L18)


# Interface: OnRunProps (/jsdoc/nqtr/index/interfaces/OnRunProps)



Defined in: [src/types/OnRunEvent.ts:1](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/OnRunEvent.ts#L1)


# Interface: QuestInterface (/jsdoc/nqtr/index/interfaces/QuestInterface)



Defined in: [src/interface/quest/QuestInterface.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L5)

## Extends [#extends]

* `QuestBaseInternalInterface`

## Properties [#properties]

### completed [#completed]

\> `readonly` **completed**: `boolean`

Defined in: [src/interface/quest/QuestInterface.ts:40](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L40)

If the quest is completed.

#### Inherited from [#inherited-from]

`QuestBaseInternalInterface.completed`

***

### currentStage? [#currentstage]

\> `readonly` `optional` &#x2A;*currentStage?**: [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)

Defined in: [src/interface/quest/QuestInterface.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L25)

The current stage.

#### Inherited from [#inherited-from-1]

`QuestBaseInternalInterface.currentStage`

***

### currentStageIndex? [#currentstageindex]

\> `optional` &#x2A;*currentStageIndex?**: `number`

Defined in: [src/interface/quest/QuestInterface.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L20)

The index of the current stage.

#### Inherited from [#inherited-from-2]

`QuestBaseInternalInterface.currentStageIndex`

***

### currentStageMustStart [#currentstagemuststart]

\> `readonly` **currentStageMustStart**: `boolean`

Defined in: [src/interface/quest/QuestInterface.ts:95](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L95)

If the current stage must start. It is true if the current stage is not started, can start and not completed.

#### Inherited from [#inherited-from-3]

`QuestBaseInternalInterface.currentStageMustStart`

***

### failed [#failed]

\> `readonly` **failed**: `boolean`

Defined in: [src/interface/quest/QuestInterface.ts:45](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L45)

If the quest is failed.

#### Inherited from [#inherited-from-4]

`QuestBaseInternalInterface.failed`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/quest/QuestInterface.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L11)

The id of the quest.

#### Inherited from [#inherited-from-5]

`QuestBaseInternalInterface.id`

***

### inProgress [#inprogress]

\> `readonly` **inProgress**: `boolean`

Defined in: [src/interface/quest/QuestInterface.ts:35](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L35)

If the quest is started and not completed and not failed.

#### Inherited from [#inherited-from-6]

`QuestBaseInternalInterface.inProgress`

***

### onContinue? [#oncontinue]

\> `readonly` `optional` &#x2A;*onContinue?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`QuestInterface`>

Defined in: [src/interface/quest/QuestInterface.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L59)

The function that will be called when the quest goes to the next stage.

#### Inherited from [#inherited-from-7]

`QuestBaseInternalInterface.onContinue`

***

### ~~onNextStage?~~ [#onnextstage]

\> `readonly` `optional` &#x2A;*onNextStage?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`QuestInterface`>

Defined in: [src/interface/quest/QuestInterface.ts:55](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L55)

#### Deprecated [#deprecated]

Use [onContinue](#oncontinue) instead. The function that will be called when the quest goes to the next stage.

#### Inherited from [#inherited-from-8]

`QuestBaseInternalInterface.onNextStage`

***

### onStart? [#onstart]

\> `readonly` `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`QuestInterface`>

Defined in: [src/interface/quest/QuestInterface.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L50)

The function that will be called when the quest starts.

#### Inherited from [#inherited-from-9]

`QuestBaseInternalInterface.onStart`

***

### stages [#stages]

\> `readonly` **stages**: [`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)\[]

Defined in: [src/interface/quest/QuestInterface.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L15)

The stages of the quest.

#### Inherited from [#inherited-from-10]

`QuestBaseInternalInterface.stages`

***

### started [#started]

\> `readonly` **started**: `boolean`

Defined in: [src/interface/quest/QuestInterface.ts:30](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L30)

If the quest is started.

#### Inherited from [#inherited-from-11]

`QuestBaseInternalInterface.started`

## Methods [#methods]

### advanceIfCompleted() [#advanceifcompleted]

\> **advanceIfCompleted**(`props`): `Promise`\<`boolean`>

Defined in: [src/interface/quest/QuestInterface.ts:74](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L74)

Go to the next stage if the current stage is completed.
If you want to force the change of stage, use [advanceUnconditionally](#advanceunconditionally).

#### Parameters [#parameters]

##### props [#props]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-12]

`QuestBaseInternalInterface.advanceIfCompleted`

***

### advanceUnconditionally() [#advanceunconditionally]

\> **advanceUnconditionally**(`props`): `Promise`\<`boolean`>

Defined in: [src/interface/quest/QuestInterface.ts:90](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L90)

Ignore the completed state of the current stage and go to the next stage without checking if the current stage is completed.
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](#advanceifcompleted).

#### Parameters [#parameters-1]

##### props [#props-1]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-1]

`Promise`\<`boolean`>

returns true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-13]

`QuestBaseInternalInterface.advanceUnconditionally`

***

### continue() [#continue]

\> **continue**(`props`): `Promise`\<`boolean`>

Defined in: [src/interface/quest/QuestInterface.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L82)

Complete the current stage and go to the next stage with [advanceUnconditionally](#advanceunconditionally).
If you want to go to the next stage only if the current stage is completed, use [advanceIfCompleted](#advanceifcompleted).

#### Parameters [#parameters-2]

##### props [#props-2]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-2]

`Promise`\<`boolean`>

true if the stage was changed, false otherwise.

#### Inherited from [#inherited-from-14]

`QuestBaseInternalInterface.continue`

***

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/interface/quest/QuestInterface.ts:66](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L66)

Start the quest.

#### Parameters [#parameters-3]

##### props [#props-3]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-3]

`Promise`\<`void`>

#### Inherited from [#inherited-from-15]

`QuestBaseInternalInterface.start`

***

### startCurrentStage() [#startcurrentstage]

\> **startCurrentStage**(`props`): `Promise`\<`void`>

Defined in: [src/interface/quest/QuestInterface.ts:101](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestInterface.ts#L101)

Start the current stage. This is a system function, do not use it directly.

#### Parameters [#parameters-4]

##### props [#props-4]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

The properties for the start stage. If you not want to pass any property, you can pass an \{}.

#### Returns [#returns-4]

`Promise`\<`void`>

#### Inherited from [#inherited-from-16]

`QuestBaseInternalInterface.startCurrentStage`


# Interface: QuestProps (/jsdoc/nqtr/index/interfaces/QuestProps)



Defined in: [src/interface/quest/QuestProps.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L4)

## Properties [#properties]

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/interface/quest/QuestProps.ts:14](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L14)

The description of the quest.

#### Default [#default]

```ts
""
```

***

### icon? [#icon]

\> `optional` &#x2A;*icon?**: `string`

Defined in: [src/interface/quest/QuestProps.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L19)

The icon of the quest.

#### Default [#default-1]

```ts
undefined
```

***

### image? [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/interface/quest/QuestProps.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L23)

The image of the quest.

***

### inDevelopment? [#indevelopment]

\> `optional` &#x2A;*inDevelopment?**: `boolean`

Defined in: [src/interface/quest/QuestProps.ts:28](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L28)

If the quest is in development.

#### Default [#default-2]

```ts
false
```

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/quest/QuestProps.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L9)

The name of the quest.

#### Default [#default-3]

```ts
""
```

***

### onContinue? [#oncontinue]

\> `optional` &#x2A;*onContinue?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/interface/quest/QuestProps.ts:40](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L40)

The function that will be executed when a stage end in the quest.

***

### ~~onNextStage?~~ [#onnextstage]

\> `optional` &#x2A;*onNextStage?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/interface/quest/QuestProps.ts:36](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L36)

#### Deprecated [#deprecated]

Use [onContinue](#oncontinue) instead. The function that will be executed when a stage end in the quest.

***

### onStart? [#onstart]

\> `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/interface/quest/QuestProps.ts:32](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/QuestProps.ts#L32)

The function that will be executed when the quest starts.


# Interface: QuestStoredClassProps (/jsdoc/nqtr/index/interfaces/QuestStoredClassProps)



Defined in: [src/classes/quest/QuestStoredClass.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L9)

## Properties [#properties]

### onContinue? [#oncontinue]

\> `optional` &#x2A;*onContinue?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/classes/quest/QuestStoredClass.ts:21](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L21)

The function that will be executed when a stage end in the quest.

***

### ~~onNextStage?~~ [#onnextstage]

\> `optional` &#x2A;*onNextStage?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/classes/quest/QuestStoredClass.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L17)

#### Deprecated [#deprecated]

Use [onContinue](#oncontinue) instead.

***

### onStart? [#onstart]

\> `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)>

Defined in: [src/classes/quest/QuestStoredClass.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/QuestStoredClass.ts#L13)

The function that will be executed when the quest starts.


# Interface: RoomBaseModelProps (/jsdoc/nqtr/index/interfaces/RoomBaseModelProps)



Defined in: [src/interface/navigation/RoomBaseModelProps.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L8)

## Properties [#properties]

### activities? [#activities]

\> `optional` &#x2A;*activities?**: (`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface))\[]

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L23)

The activities that are available in this room.

#### Default [#default]

```ts
[]
```

***

### disabled? [#disabled]

\> `optional` &#x2A;*disabled?**: `string` | `boolean`

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:33](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L33)

Whether is disabled. You can also pass a Pixi'VN flag name.

#### Default [#default-1]

```ts
false
```

***

### hidden? [#hidden]

\> `optional` &#x2A;*hidden?**: `string` | `boolean`

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:38](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L38)

Whether is hidden. You can also pass a Pixi'VN flag name.

#### Default [#default-2]

```ts
false
```

***

### icon? [#icon]

\> `optional` &#x2A;*icon?**: `string`

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:43](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L43)

The icon of the room.

#### Default [#default-3]

```ts
undefined
```

***

### image? [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:18](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L18)

The image of the room.

#### Default [#default-4]

```ts
undefined
```

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L13)

The name

#### Default [#default-5]

```ts
""
```

***

### routine? [#routine]

\> `optional` &#x2A;*routine?**: (`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface))\[]

Defined in: [src/interface/navigation/RoomBaseModelProps.ts:28](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomBaseModelProps.ts#L28)

The routine of the room, it is an array of commitments that are executed in the room. You can also add commitments during the game session, but this property is useful to set the initial routine of the room.

#### Default [#default-6]

```ts
undefined
```


# Interface: RoomInterface (/jsdoc/nqtr/index/interfaces/RoomInterface)



Defined in: [src/interface/navigation/RoomInterface.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L8)

## Extends [#extends]

* `RoomBaseInternalInterface`

## Properties [#properties]

### activities [#activities]

\> **activities**: [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L31)

The activities associated with this class, filtered based on their scheduling.

#### Inherited from [#inherited-from]

`RoomBaseInternalInterface.activities`

***

### activitiesIds [#activitiesids]

\> `readonly` **activitiesIds**: `string`\[]

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L27)

All the ids of the activities associated with this class. Compared to [activities](/jsdoc/nqtr/index/interfaces/LocationInterface#activities), they are not filtered based on their scheduling.

#### Inherited from [#inherited-from-1]

`RoomBaseInternalInterface.activitiesIds`

***

### automaticFunctions [#automaticfunctions]

\> `readonly` **automaticFunctions**: [`OnRunAsyncFunction`](/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)\[]

Defined in: [src/interface/navigation/RoomInterface.ts:46](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L46)

Get the functions that will be executed when the room is visited.

#### Inherited from [#inherited-from-2]

`RoomBaseInternalInterface.automaticFunctions`

***

### characters [#characters]

\> `readonly` **characters**: `CharacterInterface`\[]

Defined in: [src/interface/navigation/RoomInterface.ts:42](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L42)

Get the characters in the room.

#### Inherited from [#inherited-from-3]

`RoomBaseInternalInterface.characters`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/navigation/RoomInterface.ts:14](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L14)

The id of the room.

#### Inherited from [#inherited-from-4]

`RoomBaseInternalInterface.id`

***

### location [#location]

\> `readonly` **location**: [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)

Defined in: [src/interface/navigation/RoomInterface.ts:18](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L18)

The location where the room is.

#### Inherited from [#inherited-from-5]

`RoomBaseInternalInterface.location`

***

### routine [#routine]

\> `readonly` **routine**: [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

Defined in: [src/interface/navigation/RoomInterface.ts:38](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L38)

Get the character commitments of the room.

#### Inherited from [#inherited-from-6]

`RoomBaseInternalInterface.routine`

## Methods [#methods]

### addActivity() [#addactivity]

\> **addActivity**(`activity`, `options?`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:13](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L13)

Connects the activity to the class.

#### Parameters [#parameters]

##### activity [#activity]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to connect to the class.

##### options? [#options]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-7]

`RoomBaseInternalInterface.addActivity`

***

### addCommitment() [#addcommitment]

\> **addCommitment**(`commitment`, `options?`): `void`

Defined in: [src/interface/navigation/RoomInterface.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L25)

Connects the commitment to the class.

#### Parameters [#parameters-1]

##### commitment [#commitment]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to connect to the class.

##### options? [#options-1]

[`ActiveScheduling`](/jsdoc/nqtr/index/interfaces/ActiveScheduling)

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-8]

`RoomBaseInternalInterface.addCommitment`

***

### clearExpiredActivities() [#clearexpiredactivities]

\> **clearExpiredActivities**(): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:23](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L23)

Removes the useless activities.

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-9]

`RoomBaseInternalInterface.clearExpiredActivities`

***

### getStorageProperty() [#getstorageproperty]

\> `protected` **getStorageProperty**\<`T`>(`propertyName`, `idToUse?`): `T` | `undefined`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:56

Get a property from the storage.

#### Type Parameters [#type-parameters]

##### T [#t]

`T` = `StorageElementType`

#### Parameters [#parameters-2]

##### propertyName [#propertyname]

`string`

The name of the property to get.

##### idToUse? [#idtouse]

`string`

The id of the instance to get the property.

#### Returns [#returns-3]

`T` | `undefined`

The value of the property. If the property is not found, returns undefined.

#### Default [#default]

```ts
this.id
```

#### Inherited from [#inherited-from-10]

`RoomBaseInternalInterface.getStorageProperty`

***

### migrateOldStorage() [#migrateoldstorage]

\> `protected` **migrateOldStorage**(`oldCategoryId?`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:37

#### Parameters [#parameters-3]

##### oldCategoryId? [#oldcategoryid]

`string`

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-11]

`RoomBaseInternalInterface.migrateOldStorage`

***

### removeActivity() [#removeactivity]

\> **removeActivity**(`activity`): `void`

Defined in: [src/interface/navigation/NavigationAbstractClass.ts:19](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/NavigationAbstractClass.ts#L19)

Disconnects the activity from the class.

#### Parameters [#parameters-4]

##### activity [#activity-1]

`string` | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)

The activity to disconnect from the class.

#### Returns [#returns-5]

`void`

#### Inherited from [#inherited-from-12]

`RoomBaseInternalInterface.removeActivity`

***

### removeCommitment() [#removecommitment]

\> **removeCommitment**(`commitment`): `void`

Defined in: [src/interface/navigation/RoomInterface.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/navigation/RoomInterface.ts#L34)

Disconnects the commitment from the class.

#### Parameters [#parameters-5]

##### commitment [#commitment-1]

`string` | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)

The commitment to disconnect from the class.

#### Returns [#returns-6]

`void`

#### Inherited from [#inherited-from-13]

`RoomBaseInternalInterface.removeCommitment`

***

### setStorageProperty() [#setstorageproperty]

\> `protected` **setStorageProperty**\<`T`>(`propertyName`, `value`): `void`

Defined in: node\_modules/@drincs/pixi-vn/dist/StoredClassModel-uMifeNzV.d.ts:49

Update a property in the storage.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T`

The type of the value to set. (Deprecated, it is not necessary to specify the type of the value, it will be inferred from the value)

#### Parameters [#parameters-6]

##### propertyName [#propertyname-1]

`string`

The name of the property to set.

##### value [#value]

`StorageElementType`

The value to set. If is undefined, the property will be removed from the storage.

#### Returns [#returns-7]

`void`

#### Inherited from [#inherited-from-14]

`RoomBaseInternalInterface.setStorageProperty`


# Interface: StageInterface (/jsdoc/nqtr/index/interfaces/StageInterface)



Defined in: [src/interface/quest/StageInterface.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L5)

## Extends [#extends]

* `StageBaseInternalInterface`

## Properties [#properties]

### canStart [#canstart]

\> `readonly` **canStart**: `boolean`

Defined in: [src/interface/quest/StageInterface.ts:72](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L72)

Check if the stage can start.

#### Example [#example]

```ts
export default class Stage extends StageStoredClass {
	override get canStart(): boolean {
		if (this.flagsRequired.length > 0 && !this.flagsRequired.every((flag) => storage.getFlag(flag.flag))) {
			return false;
		}
		return super.canStart;
	}
}
```

#### Inherited from [#inherited-from]

`StageBaseInternalInterface.canStart`

***

### completed [#completed]

\> **completed**: `boolean`

Defined in: [src/interface/quest/StageInterface.ts:46](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L46)

Check if the flag and goals are completed.
You can force the completion of the stage by setting the completed property to true.

#### Example [#example-1]

```ts
export default class Stage extends StageStoredClass {
	override get completed(): boolean {
		if (super.completed) {
			return true;
		}
		if (this.flags.length > 0) {
			if (!this.flags.every((flag) => storage.getFlag(flag.flag))) {
				return false;
			}
			return true;
		}
		return false;
	}
	override set completed(value: boolean) {
		super.completed = value;
	}
}
```

#### Inherited from [#inherited-from-1]

`StageBaseInternalInterface.completed`

***

### deltaDateRequired [#deltadaterequired]

\> `readonly` **deltaDateRequired**: `number`

Defined in: [src/interface/quest/StageInterface.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L82)

The number of day/date required to start the stage.

#### Inherited from [#inherited-from-2]

`StageBaseInternalInterface.deltaDateRequired`

***

### id [#id]

\> `readonly` **id**: `string`

Defined in: [src/interface/quest/StageInterface.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L11)

The id of the stage.

#### Inherited from [#inherited-from-3]

`StageBaseInternalInterface.id`

***

### onEnd? [#onend]

\> `readonly` `optional` &#x2A;*onEnd?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`StageInterface`>

Defined in: [src/interface/quest/StageInterface.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L20)

The function that will be called when the stage ends.

#### Inherited from [#inherited-from-4]

`StageBaseInternalInterface.onEnd`

***

### onStart? [#onstart]

\> `readonly` `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<`StageInterface`>

Defined in: [src/interface/quest/StageInterface.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L15)

The function that will be called when the stage starts.

#### Inherited from [#inherited-from-5]

`StageBaseInternalInterface.onStart`

***

### questsRequired [#questsrequired]

\> `readonly` **questsRequired**: [`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

Defined in: [src/interface/quest/StageInterface.ts:87](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L87)

The list of quests required to start the stage.

#### Inherited from [#inherited-from-6]

`StageBaseInternalInterface.questsRequired`

***

### startDate? [#startdate]

\> `readonly` `optional` &#x2A;*startDate?**: `number`

Defined in: [src/interface/quest/StageInterface.ts:56](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L56)

The date when the stage starts.

#### Inherited from [#inherited-from-7]

`StageBaseInternalInterface.startDate`

***

### started [#started]

\> **started**: `boolean`

Defined in: [src/interface/quest/StageInterface.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L51)

If the stage is started.

#### Inherited from [#inherited-from-8]

`StageBaseInternalInterface.started`

## Methods [#methods]

### start() [#start]

\> **start**(`props`): `Promise`\<`void`>

Defined in: [src/interface/quest/StageInterface.ts:77](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageInterface.ts#L77)

The function that will be called when the stage starts.

#### Parameters [#parameters]

##### props [#props]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

#### Returns [#returns]

`Promise`\<`void`>

#### Inherited from [#inherited-from-9]

`StageBaseInternalInterface.start`


# Interface: StageProps (/jsdoc/nqtr/index/interfaces/StageProps)



Defined in: [src/interface/quest/StageProps.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L5)

## Properties [#properties]

### adviceDescription? [#advicedescription]

\> `optional` &#x2A;*adviceDescription?**: `string`

Defined in: [src/interface/quest/StageProps.ts:25](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L25)

The advice description of the stage.

#### Default [#default]

```ts
""
```

***

### deltaDateRequired? [#deltadaterequired]

\> `optional` &#x2A;*deltaDateRequired?**: `number`

Defined in: [src/interface/quest/StageProps.ts:34](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L34)

The number of day/date required to start the stage.

#### Example [#example]

```ts
If the value is 3, and the previous stage ends on date 1, the stage will start on date 4.
```

***

### description? [#description]

\> `optional` &#x2A;*description?**: `string`

Defined in: [src/interface/quest/StageProps.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L20)

The description of the stage.

#### Default [#default-1]

```ts
""
```

***

### flags? [#flags]

\> `optional` &#x2A;*flags?**: `StageFlags`\[]

Defined in: [src/interface/quest/StageProps.ts:10](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L10)

The flags of the stage.

#### Default [#default-2]

```ts
[]
```

***

### flagsRequired? [#flagsrequired]

\> `optional` &#x2A;*flagsRequired?**: `StageFlags`\[]

Defined in: [src/interface/quest/StageProps.ts:39](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L39)

The flags required to start the stage.

#### Default [#default-3]

```ts
[]
```

***

### image? [#image]

\> `optional` &#x2A;*image?**: `string`

Defined in: [src/interface/quest/StageProps.ts:29](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L29)

The image of the stage.

***

### name? [#name]

\> `optional` &#x2A;*name?**: `string`

Defined in: [src/interface/quest/StageProps.ts:15](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L15)

The name of the stage.

#### Default [#default-4]

```ts
""
```

***

### onEnd? [#onend]

\> `optional` &#x2A;*onEnd?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)>

Defined in: [src/interface/quest/StageProps.ts:57](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L57)

The function that will be executed when the stage ends.

***

### onStart? [#onstart]

\> `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)>

Defined in: [src/interface/quest/StageProps.ts:53](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L53)

The function that will be executed when the stage starts.

***

### questsRequired? [#questsrequired]

\> `optional` &#x2A;*questsRequired?**: [`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

Defined in: [src/interface/quest/StageProps.ts:44](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L44)

The quests required to start the stage.

#### Default [#default-5]

```ts
[]
```

***

### requestDescriptionToStart? [#requestdescriptiontostart]

\> `optional` &#x2A;*requestDescriptionToStart?**: `string`

Defined in: [src/interface/quest/StageProps.ts:49](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/quest/StageProps.ts#L49)

The description to request to start the stage.

#### Default [#default-6]

```ts
""
```


# Interface: StageStoredClassProps (/jsdoc/nqtr/index/interfaces/StageStoredClassProps)



Defined in: [src/classes/quest/StageStoredClass.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L8)

## Properties [#properties]

### deltaDateRequired? [#deltadaterequired]

\> `optional` &#x2A;*deltaDateRequired?**: `number`

Defined in: [src/classes/quest/StageStoredClass.ts:21](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L21)

The number of day/date required to start the stage.

#### Example [#example]

```ts
If the value is 3, and the previous stage ends on day 1, the stage will start on day 4.
```

***

### onEnd? [#onend]

\> `optional` &#x2A;*onEnd?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)>

Defined in: [src/classes/quest/StageStoredClass.ts:16](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L16)

The function that will be executed when the stage ends.

***

### onStart? [#onstart]

\> `optional` &#x2A;*onStart?**: [`OnRunEvent`](/jsdoc/nqtr/index/type-aliases/OnRunEvent)\<[`StageInterface`](/jsdoc/nqtr/index/interfaces/StageInterface)>

Defined in: [src/classes/quest/StageStoredClass.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L12)

The function that will be executed when the stage starts.

***

### questsRequired? [#questsrequired]

\> `optional` &#x2A;*questsRequired?**: [`QuestsRequiredType`](/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)\[]

Defined in: [src/classes/quest/StageStoredClass.ts:26](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/classes/quest/StageStoredClass.ts#L26)

The quests required to start the stage.

#### Default [#default]

```ts
[]
```


# Interface: TimeSchedulingInterface (/jsdoc/nqtr/index/interfaces/TimeSchedulingInterface)



Defined in: [src/interface/TimeSchedulingInterface.ts:1](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/TimeSchedulingInterface.ts#L1)

## Properties [#properties]

### from [#from]

\> **from**: `number`

Defined in: [src/interface/TimeSchedulingInterface.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/TimeSchedulingInterface.ts#L6)

The time when the item starts. If the item is not started yet, it will be hidden.
If you set 3, the item will be hidden into times 1 and 2, and will be shown from time 3.

***

### to? [#to]

\> `optional` &#x2A;*to?**: `number`

Defined in: [src/interface/TimeSchedulingInterface.ts:12](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/interface/TimeSchedulingInterface.ts#L12)

The time when the item ends. If the item is ended yet, it will be hidden.
If you set 3, the item will be shown into times 1 and 2 and will be hidden from time 3.

#### Default [#default]

```ts
timeTracker.dayEndTime + 1
```


# Type Alias: ActivityIdType (/jsdoc/nqtr/index/type-aliases/ActivityIdType)



\> **ActivityIdType** = \[keyof [`NqtrActivityIds`](/jsdoc/nqtr/index/interfaces/NqtrActivityIds)] *extends* \[`never`] ? `string` : keyof [`NqtrActivityIds`](/jsdoc/nqtr/index/interfaces/NqtrActivityIds)

Defined in: [src/registries/NqtrIds.ts:40](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L40)

The type used wherever an activity ID is expected.

* **Default** — resolves to `string` so that existing code compiles without changes.
* **Augmented** — when [NqtrActivityIds](/jsdoc/nqtr/index/interfaces/NqtrActivityIds) has been extended via
  `declare module "@drincs/nqtr/registries"`, resolves to the union of known activity IDs.

## Example [#example]

```ts
// nqtr.gen.d.ts (auto-generated by vitePluginNqtr)
declare module "@drincs/nqtr/registries" {
    interface NqtrActivityIds { "study": never; "cook": never; }
}
```


# Type Alias: CommitmentIdType (/jsdoc/nqtr/index/type-aliases/CommitmentIdType)



\> **CommitmentIdType** = \[keyof [`NqtrCommitmentIds`](/jsdoc/nqtr/index/interfaces/NqtrCommitmentIds)] *extends* \[`never`] ? `string` : keyof [`NqtrCommitmentIds`](/jsdoc/nqtr/index/interfaces/NqtrCommitmentIds)

Defined in: [src/registries/NqtrIds.ts:51](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L51)

The type used wherever a commitment ID is expected.

* **Default** — resolves to `string`.
* **Augmented** — resolves to the union of known commitment IDs once
  [NqtrCommitmentIds](/jsdoc/nqtr/index/interfaces/NqtrCommitmentIds) has been extended.


# Type Alias: ExecutionType (/jsdoc/nqtr/index/type-aliases/ExecutionType)



\> **ExecutionType** = `"automatic"` | `"interaction"`

Defined in: [src/types/ExecutionType.ts:1](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/ExecutionType.ts#L1)


# Type Alias: ITimeStlot (/jsdoc/nqtr/index/type-aliases/ITimeStlot)



\> **ITimeStlot** = `object`

Defined in: [src/types/TimeSettings.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L3)

## Properties [#properties]

### name [#name]

\> **name**: `string`

Defined in: [src/types/TimeSettings.ts:4](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L4)

***

### startTime [#starttime]

\> **startTime**: `number`

Defined in: [src/types/TimeSettings.ts:5](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L5)


# Type Alias: LocationIdType (/jsdoc/nqtr/index/type-aliases/LocationIdType)



\> **LocationIdType** = \[keyof [`NqtrLocationIds`](/jsdoc/nqtr/index/interfaces/NqtrLocationIds)] *extends* \[`never`] ? `string` : keyof [`NqtrLocationIds`](/jsdoc/nqtr/index/interfaces/NqtrLocationIds)

Defined in: [src/registries/NqtrIds.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L62)

The type used wherever a location ID is expected.

* **Default** — resolves to `string`.
* **Augmented** — resolves to the union of known location IDs once
  [NqtrLocationIds](/jsdoc/nqtr/index/interfaces/NqtrLocationIds) has been extended.


# Type Alias: MapIdType (/jsdoc/nqtr/index/type-aliases/MapIdType)



\> **MapIdType** = \[keyof [`NqtrMapIds`](/jsdoc/nqtr/index/interfaces/NqtrMapIds)] *extends* \[`never`] ? `string` : keyof [`NqtrMapIds`](/jsdoc/nqtr/index/interfaces/NqtrMapIds)

Defined in: [src/registries/NqtrIds.ts:73](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L73)

The type used wherever a map ID is expected.

* **Default** — resolves to `string`.
* **Augmented** — resolves to the union of known map IDs once
  [NqtrMapIds](/jsdoc/nqtr/index/interfaces/NqtrMapIds) has been extended.


# Type Alias: OnRunAsyncFunction (/jsdoc/nqtr/index/type-aliases/OnRunAsyncFunction)



\> **OnRunAsyncFunction** = (`props`) => `Promise`\<`any`>

Defined in: [src/types/OnRunEvent.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/OnRunEvent.ts#L8)

## Parameters [#parameters]

### props [#props]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

## Returns [#returns]

`Promise`\<`any`>


# Type Alias: OnRunEvent<T> (/jsdoc/nqtr/index/type-aliases/OnRunEvent)



\> **OnRunEvent**\<`T`> = (`item`, `props`) => `any` | `Promise`\<`any`>

Defined in: [src/types/OnRunEvent.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/OnRunEvent.ts#L6)

The function that is called when the class is runned.

## Type Parameters [#type-parameters]

### T [#t]

`T`

## Parameters [#parameters]

### item [#item]

`T`

### props [#props]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

## Returns [#returns]

`any` | `Promise`\<`any`>


# Type Alias: OnRunFunction (/jsdoc/nqtr/index/type-aliases/OnRunFunction)



\> **OnRunFunction** = (`props`) => `any` | `Promise`\<`any`>

Defined in: [src/types/OnRunEvent.ts:7](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/OnRunEvent.ts#L7)

## Parameters [#parameters]

### props [#props]

[`OnRunProps`](/jsdoc/nqtr/index/interfaces/OnRunProps)

## Returns [#returns]

`any` | `Promise`\<`any`>


# Type Alias: QuestIdType (/jsdoc/nqtr/index/type-aliases/QuestIdType)



\> **QuestIdType** = \[keyof [`NqtrQuestIds`](/jsdoc/nqtr/index/interfaces/NqtrQuestIds)] *extends* \[`never`] ? `string` : keyof [`NqtrQuestIds`](/jsdoc/nqtr/index/interfaces/NqtrQuestIds)

Defined in: [src/registries/NqtrIds.ts:82](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L82)

The type used wherever a quest ID is expected.

* **Default** — resolves to `string`.
* **Augmented** — resolves to the union of known quest IDs once
  [NqtrQuestIds](/jsdoc/nqtr/index/interfaces/NqtrQuestIds) has been extended.


# Type Alias: QuestsRequiredType (/jsdoc/nqtr/index/type-aliases/QuestsRequiredType)



\> **QuestsRequiredType** = `object`

Defined in: [src/types/QuestsRequired.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/QuestsRequired.ts#L3)

## Properties [#properties]

### quest [#quest]

\> **quest**: [`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)

Defined in: [src/types/QuestsRequired.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/QuestsRequired.ts#L3)

***

### stageNumber [#stagenumber]

\> **stageNumber**: `number`

Defined in: [src/types/QuestsRequired.ts:3](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/QuestsRequired.ts#L3)


# Type Alias: RoomIdType (/jsdoc/nqtr/index/type-aliases/RoomIdType)



\> **RoomIdType** = \[keyof [`NqtrRoomIds`](/jsdoc/nqtr/index/interfaces/NqtrRoomIds)] *extends* \[`never`] ? `string` : keyof [`NqtrRoomIds`](/jsdoc/nqtr/index/interfaces/NqtrRoomIds)

Defined in: [src/registries/NqtrIds.ts:99](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/NqtrIds.ts#L99)

The type used wherever a room ID is expected.

* **Default** — resolves to `string`.
* **Augmented** — resolves to the union of known room IDs once
  [NqtrRoomIds](/jsdoc/nqtr/index/interfaces/NqtrRoomIds) has been extended.

## Example [#example]

```ts
import type { RoomIdType } from "@drincs/nqtr/registries";

function navigateTo(roomId: RoomIdType) { ... }
navigateTo("bedroom"); // ✅ compile error if "bedroom" is not a known room
```


# Type Alias: TimeSettings (/jsdoc/nqtr/index/type-aliases/TimeSettings)



\> **TimeSettings** = `object`

Defined in: [src/types/TimeSettings.ts:11](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L11)

Time Settings, which can be set using timeTracker.editSettings

## Properties [#properties]

### dayEndTime? [#dayendtime]

\> `optional` &#x2A;*dayEndTime?**: `number`

Defined in: [src/types/TimeSettings.ts:21](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L21)

Maximum time of the day

#### Default [#default]

```ts
24
```

***

### dayStartTime? [#daystarttime]

\> `optional` &#x2A;*dayStartTime?**: `number`

Defined in: [src/types/TimeSettings.ts:16](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L16)

Minimum time of the day

#### Default [#default-1]

```ts
0
```

***

### defaultTimeSpent? [#defaulttimespent]

\> `optional` &#x2A;*defaultTimeSpent?**: `number`

Defined in: [src/types/TimeSettings.ts:26](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L26)

Default time spent

#### Default [#default-2]

```ts
1
```

***

### getDayName? [#getdayname]

\> `optional` &#x2A;*getDayName?**: (`weekDayNumber`) => `string`

Defined in: [src/types/TimeSettings.ts:62](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L62)

Week days name

#### Parameters [#parameters]

##### weekDayNumber [#weekdaynumber]

`number`

The current week day number (from: 0 - to: [weekLength](#weeklength) - 1).

#### Returns [#returns]

`string`

The name of the week day.

#### Example [#example]

```ts
(weekDayNumber: number) => {
    const weekDaysNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return weekDaysNames[weekDayNumber];
}
```

***

### timeSlots? [#timeslots]

\> `optional` &#x2A;*timeSlots?**: [`ITimeStlot`](/jsdoc/nqtr/index/type-aliases/ITimeStlot)\[]

Defined in: [src/types/TimeSettings.ts:39](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L39)

Time slots

#### Default [#default-3]

```ts
[]
```

#### Example [#example-1]

````ts
[
  { name: 'Morning', startTime: 5 },
  { name: 'Afternoon', startTime: 12 },
  { name: 'Evening', startTime: 18 },
  { name: 'Night', startTime: 22 }
]

***

### weekendStartDay?

> `optional` **weekendStartDay?**: `number`

Defined in: [src/types/TimeSettings.ts:49](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L49)

Weekend start day. For example, if the real life weekend starts on Saturday, then the value should be 6

#### Default

```ts
weekLength - 1
````

***

### weekLength? [#weeklength]

> `optional` &#x2A;*weekLength?**: `number`

Defined in: [src/types/TimeSettings.ts:44](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/types/TimeSettings.ts#L44)

Week length

#### Default [#default-4]

```ts
7
```


# Variable: default (/jsdoc/nqtr/index/variables/default)



\> `const` **default**: `object`

Defined in: [src/index.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/index.ts#L20)

## Type Declaration [#type-declaration]

### handlers [#handlers]

\> **handlers**: `__module`

### registries [#registries]

\> **registries**: `__module`

### ActivityBaseModel [#activitybasemodel]

Re-exports [ActivityBaseModel](/jsdoc/nqtr/index/classes/ActivityBaseModel)

### ActivityStoredClass [#activitystoredclass]

Re-exports [ActivityStoredClass](/jsdoc/nqtr/index/classes/ActivityStoredClass)

### CommitmentBaseModel [#commitmentbasemodel]

Re-exports [CommitmentBaseModel](/jsdoc/nqtr/index/classes/CommitmentBaseModel)

### CommitmentStoredClass [#commitmentstoredclass]

Re-exports [CommitmentStoredClass](/jsdoc/nqtr/index/classes/CommitmentStoredClass)

### LocationBaseModel [#locationbasemodel]

Re-exports [LocationBaseModel](/jsdoc/nqtr/index/classes/LocationBaseModel)

### LocationStoredClass [#locationstoredclass]

Re-exports [LocationStoredClass](/jsdoc/nqtr/index/classes/LocationStoredClass)

### MapBaseModel [#mapbasemodel]

Re-exports [MapBaseModel](/jsdoc/nqtr/index/classes/MapBaseModel)

### MapStoredClass [#mapstoredclass]

Re-exports [MapStoredClass](/jsdoc/nqtr/index/classes/MapStoredClass)

### QuestBaseModel [#questbasemodel]

Re-exports [QuestBaseModel](/jsdoc/nqtr/index/classes/QuestBaseModel)

### QuestStoredClass [#queststoredclass]

Re-exports [QuestStoredClass](/jsdoc/nqtr/index/classes/QuestStoredClass)

### RoomBaseModel [#roombasemodel]

Re-exports [RoomBaseModel](/jsdoc/nqtr/index/classes/RoomBaseModel)

### RoomStoredClass [#roomstoredclass]

Re-exports [RoomStoredClass](/jsdoc/nqtr/index/classes/RoomStoredClass)

### StageBaseModel [#stagebasemodel]

Re-exports [StageBaseModel](/jsdoc/nqtr/index/classes/StageBaseModel)

### StageStoredClass [#stagestoredclass]

Re-exports [StageStoredClass](/jsdoc/nqtr/index/classes/StageStoredClass)


# Variable: navigator (/jsdoc/nqtr/index/variables/navigator)



\> `const` **navigator**: `NavigatorHandler`

Defined in: [src/handlers/index.ts:7](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/handlers/index.ts#L7)


# Variable: questsNotebook (/jsdoc/nqtr/index/variables/questsNotebook)



\> `const` **questsNotebook**: `QuestHandler`

Defined in: [src/handlers/index.ts:9](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/handlers/index.ts#L9)


# Variable: routine (/jsdoc/nqtr/index/variables/routine)



\> `const` **routine**: `RoutineHandler`

Defined in: [src/handlers/index.ts:8](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/handlers/index.ts#L8)


# Variable: timeTracker (/jsdoc/nqtr/index/variables/timeTracker)



\> `const` **timeTracker**: `TimeHandler`

Defined in: [src/handlers/index.ts:6](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/handlers/index.ts#L6)


# RegisteredActivities (/jsdoc/nqtr/index/namespaces/RegisteredActivities)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/values)


# RegisteredCommitments (/jsdoc/nqtr/index/namespaces/RegisteredCommitments)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/values)


# RegisteredLocations (/jsdoc/nqtr/index/namespaces/RegisteredLocations)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/values)


# RegisteredMaps (/jsdoc/nqtr/index/namespaces/RegisteredMaps)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/values)


# RegisteredRooms (/jsdoc/nqtr/index/namespaces/RegisteredRooms)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/values)


# RegisteredQuests (/jsdoc/nqtr/index/namespaces/RegisteredQuests)



## Functions [#functions]

* [add](/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/add)
* [clear](/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/clear)
* [get](/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/get)
* [has](/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/has)
* [values](/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/values)


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/add)



\> **add**(...`commitments`): `void`

Defined in: [src/registries/RegisteredCommitments.ts:27](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredCommitments.ts#L27)

Save a commitment in the registered commitments. If the commitment already exists, it will be overwritten.

## Parameters [#parameters]

### commitments [#commitments]

...([`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface) | [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[])\[]

The commitment to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredCommitments.ts:74](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredCommitments.ts#L74)

Remove all registered commitments (both scheduled and fixed).
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/get)



\> **get**(`id`): [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface) | `undefined`

Defined in: [src/registries/RegisteredCommitments.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredCommitments.ts#L41)

Get a commitment by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the commitment.

## Returns [#returns]

[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface) | `undefined`

The commitment or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredCommitments.ts:66](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredCommitments.ts#L66)

Check if a commitment is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the commitment.

## Returns [#returns]

`boolean`

True if the commitment is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredCommitments/functions/values)



\> **values**(): [`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

Defined in: [src/registries/RegisteredCommitments.ts:58](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredCommitments.ts#L58)

Get a list of all commitments registered.

## Returns [#returns]

[`CommitmentInterface`](/jsdoc/nqtr/index/interfaces/CommitmentInterface)\[]

An array of commitments.


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/add)



\> **add**(...`locations`): `void`

Defined in: [src/registries/RegisteredLocations.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredLocations.ts#L17)

Save a location in the registered locations. If the location already exists, it will be overwritten.

## Parameters [#parameters]

### locations [#locations]

...([`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface) | [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[])\[]

The location to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredLocations.ts:67](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredLocations.ts#L67)

Remove all registered locations.
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/get)



\> **get**(`id`): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface) | `undefined`

Defined in: [src/registries/RegisteredLocations.ts:32](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredLocations.ts#L32)

Get a location by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the location.

## Returns [#returns]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface) | `undefined`

The location or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredLocations.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredLocations.ts#L59)

Check if a location is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the location.

## Returns [#returns]

`boolean`

True if the location is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredLocations/functions/values)



\> **values**(): [`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

Defined in: [src/registries/RegisteredLocations.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredLocations.ts#L50)

Get a list of all locations registered.

## Returns [#returns]

[`LocationInterface`](/jsdoc/nqtr/index/interfaces/LocationInterface)\[]

An array of locations.


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/add)



\> **add**(...`activities`): `void`

Defined in: [src/registries/RegisteredActivities.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredActivities.ts#L17)

Save an activity in the registered activities. If the activity already exists, it will be overwritten.

## Parameters [#parameters]

### activities [#activities]

...([`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface) | [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[])\[]

The activity to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredActivities.ts:67](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredActivities.ts#L67)

Remove all registered activities.
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/get)



\> **get**(`id`): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface) | `undefined`

Defined in: [src/registries/RegisteredActivities.ts:32](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredActivities.ts#L32)

Get an activity by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the activity.

## Returns [#returns]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface) | `undefined`

The activity or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredActivities.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredActivities.ts#L59)

Check if an activity is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the activity.

## Returns [#returns]

`boolean`

True if the activity is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredActivities/functions/values)



\> **values**(): [`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

Defined in: [src/registries/RegisteredActivities.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredActivities.ts#L50)

Get a list of all activities registered.

## Returns [#returns]

[`ActivityInterface`](/jsdoc/nqtr/index/interfaces/ActivityInterface)\[]

An array of activities.


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/add)



\> **add**(...`rooms`): `void`

Defined in: [src/registries/RegisteredRooms.ts:20](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredRooms.ts#L20)

Save a room in the registered rooms, and their location and map if they are not already registered.
If the room already exists, it will be overwritten.

## Parameters [#parameters]

### rooms [#rooms]

...([`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface) | [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[])\[]

The room to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredRooms.ts:76](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredRooms.ts#L76)

Remove all registered rooms.
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/get)



\> **get**(`id`): [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface) | `undefined`

Defined in: [src/registries/RegisteredRooms.ts:41](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredRooms.ts#L41)

Get a room by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the room.

## Returns [#returns]

[`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface) | `undefined`

The room or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredRooms.ts:68](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredRooms.ts#L68)

Check if a room is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the room.

## Returns [#returns]

`boolean`

True if the room is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredRooms/functions/values)



\> **values**(): [`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

Defined in: [src/registries/RegisteredRooms.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredRooms.ts#L59)

Get a list of all rooms registered.

## Returns [#returns]

[`RoomInterface`](/jsdoc/nqtr/index/interfaces/RoomInterface)\[]

An array of rooms.


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/add)



\> **add**(...`quests`): `void`

Defined in: [src/registries/RegisteredQuests.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredQuests.ts#L17)

Save a quest in the registered quests. If the quest already exists, it will be overwritten.

## Parameters [#parameters]

### quests [#quests]

...([`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface) | [`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)\[])\[]

The quest to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredQuests.ts:64](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredQuests.ts#L64)

Remove all registered quests.
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/get)



\> **get**(`id`): [`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface) | `undefined`

Defined in: [src/registries/RegisteredQuests.ts:31](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredQuests.ts#L31)

Get a quest by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the quest.

## Returns [#returns]

[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface) | `undefined`

The quest or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredQuests.ts:56](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredQuests.ts#L56)

Check if a quest is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the quest.

## Returns [#returns]

`boolean`

True if the quest is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredQuests/functions/values)



\> **values**(): [`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)\[]

Defined in: [src/registries/RegisteredQuests.ts:48](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredQuests.ts#L48)

Get a list of all quests registered.

## Returns [#returns]

[`QuestInterface`](/jsdoc/nqtr/index/interfaces/QuestInterface)\[]

An array of quests.


# Function: add() (/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/add)



\> **add**(...`maps`): `void`

Defined in: [src/registries/RegisteredMaps.ts:17](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredMaps.ts#L17)

Save a map in the registered maps. If the map already exists, it will be overwritten.

## Parameters [#parameters]

### maps [#maps]

...([`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface) | [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)\[])\[]

The map to save.

## Returns [#returns]

`void`


# Function: clear() (/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/clear)



\> **clear**(): `void`

Defined in: [src/registries/RegisteredMaps.ts:67](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredMaps.ts#L67)

Remove all registered maps.
Primarily used by the Vite plugin to reset state between hot-module reloads.

## Returns [#returns]

`void`


# Function: get() (/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/get)



\> **get**(`id`): [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface) | `undefined`

Defined in: [src/registries/RegisteredMaps.ts:32](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredMaps.ts#L32)

Get a map by its id.

## Parameters [#parameters]

### id [#id]

`string`

The id of the map.

## Returns [#returns]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface) | `undefined`

The map or undefined if not found.


# Function: has() (/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/has)



\> **has**(`id`): `boolean`

Defined in: [src/registries/RegisteredMaps.ts:59](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredMaps.ts#L59)

Check if a map is registered.

## Parameters [#parameters]

### id [#id]

`string`

The id of the map.

## Returns [#returns]

`boolean`

True if the map is registered, false otherwise.


# Function: values() (/jsdoc/nqtr/index/namespaces/RegisteredMaps/functions/values)



\> **values**(): [`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)\[]

Defined in: [src/registries/RegisteredMaps.ts:50](https://github.com/DRincs-Productions/nqtr/blob/db22fe9e7612d547ff25befcc444cf095348917d/src/registries/RegisteredMaps.ts#L50)

Get a list of all maps registered.

## Returns [#returns]

[`MapInterface`](/jsdoc/nqtr/index/interfaces/MapInterface)\[]

An array of maps.


# Spine 2D integration for Pixi’VN (/jsdoc/pixi-vn-spine)



![pixi-vn-cover](https://github.com/user-attachments/assets/6d0edd5e-4ff6-414b-9c27-348e70f866b1)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-spine" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn-spine?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-spine" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn-spine" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn-spine" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn-spine?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-spine" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn-spine" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

`@drincs/pixi-vn-spine` is a lightweight wrapper around `@esotericsoftware/spine-pixi-v8`, designed specifically to integrate **Spine 2D** components into **Pixi’VN** projects.

The library provides Pixi’VN-friendly abstractions for using Spine animations inside visual novels, making it easier to load, manage, and display Spine content within the Pixi’VN ecosystem.

## Example [#example]

```ts
import { Assets, canvas } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";

await Assets.load([
    {
        alias: "spineSkeleton",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pro.skel",
    },
    {
        alias: "spineAtlas",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pma.atlas",
    },
]);

const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton" });
spine.x = canvas.width / 2;
spine.y = canvas.height;

spine.setAnimation(0, "idle", true);

canvas.add("spine", spine);
```

## Important: register the component in your main file [#important-register-the-component-in-your-main-file]

When this package is imported, it registers `Spine` with Pixi’VN's `RegisteredCanvasComponents`, which is what allows the canvas to restore a `Spine` instance from a serialized save (e.g. `currentSkin`, animation tracks, etc.). This registration is a side effect that runs the first time the module is evaluated, not when `Spine` is actually used.

In simple setups this isn't noticeable, because importing `Spine` to create an instance also triggers the registration. But in more complex projects with asynchronous/lazy loading (code-split routes, dynamically imported labels, a save loaded before any scene that uses `Spine` has been imported, etc.), the registration might not have happened yet when Pixi’VN needs to deserialize a save containing a `Spine` component — restoring it will then fail because `"Spine"` isn't registered.

To avoid this, import the package once, for its side effect only, directly in your app's main/entry file, before anything else runs:

```ts
import "@drincs/pixi-vn-spine";
```

This guarantees the registration always happens as early as possible, regardless of when/where `Spine` is later imported and used.


# @drincs/pixi-vn-spine (/jsdoc/pixi-vn-spine/modules)



## Modules [#modules]

* [index](/jsdoc/pixi-vn-spine/index)
* [ink](/jsdoc/pixi-vn-spine/ink)


# index (/jsdoc/pixi-vn-spine/index)



## Classes [#classes]

* [Spine](/jsdoc/pixi-vn-spine/index/classes/Spine)

## Interfaces [#interfaces]

* [SpineMemory](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)
* [SpineOptions](/jsdoc/pixi-vn-spine/index/interfaces/SpineOptions)
* [TrackMemory](/jsdoc/pixi-vn-spine/index/interfaces/TrackMemory)

## Type Aliases [#type-aliases]

* [SpineSequenceOptions](/jsdoc/pixi-vn-spine/index/type-aliases/SpineSequenceOptions)


# ink (/jsdoc/pixi-vn-spine/ink)



## Functions [#functions]

* [createSpineHandler](/jsdoc/pixi-vn-spine/ink/functions/createSpineHandler)
* [parseShowSpineTail](/jsdoc/pixi-vn-spine/ink/functions/parseShowSpineTail)


# Class: Spine (/jsdoc/pixi-vn-spine/index/classes/Spine)



Defined in: [src/components/Spine.ts:57](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L57)

Spine component for Pixi.js, used to display Spine components.

## Example [#example]

```ts
import { Assets, canvas } from "@drincs/pixi-vn";
import { Spine } from "@drincs/pixi-vn-spine";

await Assets.load([
    {
        alias: "spineSkeleton",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pro.skel",
    },
    {
        alias: "spineAtlas",
        src: "https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pma.atlas",
    },
]);

const spine = new Spine({ atlas: "spineAtlas", skeleton: "spineSkeleton" });
spine.x = canvas.width / 2;
spine.y = canvas.height;

canvas.add("spine", spine);
```

## Extends [#extends]

* `Spine`

## Implements [#implements]

* `CanvasBaseItem`\<[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)>
* `AnchorExtension`
* `ListenerExtension`
* `AdditionalPositionsExtension`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Spine**(`options`): `Spine`

Defined in: [src/components/Spine.ts:69](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L69)

#### Parameters [#parameters]

##### options [#options]

[`SpineOptions`](/jsdoc/pixi-vn-spine/index/interfaces/SpineOptions)

Options used to configure the Spine skeleton (skeleton/atlas aliases, scale, dark tint, auto update, initial skin, initial animation)
plus the standard CanvasBaseItem container options (anchor, align, percentagePosition, etc.).

#### Returns [#returns]

`Spine`

#### Overrides [#overrides]

`CoreSpine.constructor`

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

`CoreSpine.__devtoolIgnore`

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

`CoreSpine.__devtoolIgnoreChildren`

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

`CoreSpine.__devtoolLocked`

***

### \_bounds [#_bounds]

\> `protected&#x60; **\_bounds**: `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:59

#### Inherited from [#inherited-from-3]

`CoreSpine._bounds`

***

### \_boundsDirty [#_boundsdirty]

\> `protected&#x60; **\_boundsDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:60

#### Inherited from [#inherited-from-4]

`CoreSpine._boundsDirty`

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-5]

`CoreSpine._cx`

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-6]

`CoreSpine._cy`

***

### \_didSpineUpdate [#_didspineupdate]

\> **\_didSpineUpdate**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:174

#### Inherited from [#inherited-from-7]

`CoreSpine._didSpineUpdate`

***

### \_gcData? [#_gcdata]

\> `optional&#x60; &#x2A;*\_gcData?**: `GCData`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:54

**`Internal`**

#### Inherited from [#inherited-from-8]

`CoreSpine._gcData`

***

### \_gcLastUsed [#_gclastused]

\> **\_gcLastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:58

**`Internal`**

#### Inherited from [#inherited-from-9]

`CoreSpine._gcLastUsed`

***

### \_gpuData [#_gpudata]

\> **\_gpuData**: `Record`\<`number`, `GPU_DATA`>

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:52

**`Internal`**

#### Inherited from [#inherited-from-10]

`CoreSpine._gpuData`

***

### \_lastUsed [#_lastused]

\> **\_lastUsed**: `number`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:50

**`Internal`**

#### Inherited from [#inherited-from-11]

`CoreSpine._lastUsed`

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-12]

`CoreSpine._pivot`

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-13]

`CoreSpine._position`

***

### \_roundPixels [#_roundpixels]

\> **\_roundPixels**: `0` | `1`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:48

**`Internal`**

#### Inherited from [#inherited-from-14]

`CoreSpine._roundPixels`

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-15]

`CoreSpine._scale`

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-16]

`CoreSpine._skew`

***

### \_slotsObject [#_slotsobject]

\> `readonly&#x60; **\_slotsObject**: `Record`\<`string`, `SpineSlotObject` | `null`>

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:184

#### Inherited from [#inherited-from-17]

`CoreSpine._slotsObject`

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-18]

`CoreSpine._sx`

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-19]

`CoreSpine._sy`

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-20]

`CoreSpine._zIndex`

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-21]

`CoreSpine.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-22]

`CoreSpine.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-23]

`CoreSpine.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-24]

`CoreSpine.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-25]

`CoreSpine.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-26]

`CoreSpine.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-27]

`CoreSpine.accessibleType`

***

### afterUpdateWorldTransforms [#afterupdateworldtransforms]

\> **afterUpdateWorldTransforms**: (`object`) => `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:176

#### Parameters [#parameters-1]

##### object [#object]

`Spine`

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-28]

`CoreSpine.afterUpdateWorldTransforms`

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:46

**`Internal`**

#### Inherited from [#inherited-from-29]

`CoreSpine.allowChildren`

***

### atlasAlias [#atlasalias]

\> `readonly` **atlasAlias**: `string`

Defined in: [src/components/Spine.ts:118](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L118)

The asset alias of the atlas this component was created with.

***

### autoGarbageCollect [#autogarbagecollect]

\> **autoGarbageCollect**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:56

If set to true, the resource will be garbage collected automatically when it is not used.

#### Inherited from [#inherited-from-30]

`CoreSpine.autoGarbageCollect`

***

### beforeUpdateWorldTransforms [#beforeupdateworldtransforms]

\> **beforeUpdateWorldTransforms**: (`object`) => `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:175

#### Parameters [#parameters-2]

##### object [#object-1]

`Spine`

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-31]

`CoreSpine.beforeUpdateWorldTransforms`

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-32]

`CoreSpine.boundsArea`

***

### buildId [#buildid]

\> **buildId**: `number`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:172

#### Inherited from [#inherited-from-33]

`CoreSpine.buildId`

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-34]

`CoreSpine.cacheAsBitmap`

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-3]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-3]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* Container#updateCacheTexture For updating cached content
* [Container#isCachedAsTexture](#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-35]

`CoreSpine.cacheAsTexture`

***

### canBundle [#canbundle]

\> `readonly` **canBundle**: `true` = `true`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:44

**`Internal`**

#### Inherited from [#inherited-from-36]

`CoreSpine.canBundle`

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* Container#addChild For adding children
* Container#removeChild For removing children

#### Inherited from [#inherited-from-37]

`CoreSpine.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-38]

`CoreSpine.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-39]

`CoreSpine.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-40]

`CoreSpine.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-41]

`CoreSpine.cursor`

***

### darkTintCore [#darktintcore]

\> `readonly` **darkTintCore**: `boolean` | `undefined`

Defined in: [src/components/Spine.ts:124](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L124)

Whether the dark tint renderer is used for this skeleton. If `true`, uses the dark tint renderer; if
`false`, uses the default pixi renderer; if `undefined`, the dark tint renderer is used only when at
least one slot has tint black.

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-42]

`CoreSpine.depthOfChildModified`

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

Container#destroy For destroying objects

#### Inherited from [#inherited-from-43]

`CoreSpine.destroyed`

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-44]

`CoreSpine.effects`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-45]

`CoreSpine.eventMode`

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* Container#filters For applying filters
* Rectangle For area definition

#### Inherited from [#inherited-from-46]

`CoreSpine.filterArea`

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-47]

`CoreSpine.globalDisplayStatus`

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-48]

`CoreSpine.groupAlpha`

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-49]

`CoreSpine.groupBlendMode`

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-50]

`CoreSpine.groupColor`

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-51]

`CoreSpine.groupColorAlpha`

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-52]

`CoreSpine.groupTransform`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-53]

`CoreSpine.hitArea`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-54]

`CoreSpine.interactive`

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-55]

`CoreSpine.interactiveChildren`

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* Container#cacheAsTexture For enabling caching
* Container#updateCacheTexture For updating cache

#### Inherited from [#inherited-from-56]

`CoreSpine.isCachedAsTexture`

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-5]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

```ts
import { Sprite } from 'pixi.js';

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-57]

`CoreSpine.isInteractive`

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-58]

`CoreSpine.label`

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-59]

`CoreSpine.layerParentId`

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-60]

`CoreSpine.localAlpha`

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-61]

`CoreSpine.localBlendMode`

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-62]

`CoreSpine.localColor`

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-63]

`CoreSpine.localDisplayStatus`

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* Container#worldTransform For global transform
* Container#groupTransform For render group transform

#### Inherited from [#inherited-from-64]

`CoreSpine.localTransform`

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a Sprite object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* Sprite For texture-based masks
* [Container#setMask](#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-65]

`CoreSpine.mask`

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-66]

`CoreSpine.name`

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-67]

`CoreSpine.onclick`

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: `OnEventsHandlers` = `{}`

Defined in: [src/components/Spine.ts:459](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L459)

The registered event handlers for this component, used by [setMemory](#setmemory)/[memory](#memory) to
persist and restore listeners added via [on](#on).

#### Implementation of [#implementation-of]

`ListenerExtension.onEventsHandlers`

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-68]

`CoreSpine.onglobalmousemove`

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-69]

`CoreSpine.onglobalpointermove`

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-70]

`CoreSpine.onglobaltouchmove`

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-71]

`CoreSpine.onmousedown`

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-72]

`CoreSpine.onmouseenter`

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-73]

`CoreSpine.onmouseleave`

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-74]

`CoreSpine.onmousemove`

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-75]

`CoreSpine.onmouseout`

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-76]

`CoreSpine.onmouseover`

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-77]

`CoreSpine.onmouseup`

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-78]

`CoreSpine.onmouseupoutside`

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-79]

`CoreSpine.onpointercancel`

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-80]

`CoreSpine.onpointerdown`

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-81]

`CoreSpine.onpointerenter`

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-82]

`CoreSpine.onpointerleave`

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-83]

`CoreSpine.onpointermove`

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-84]

`CoreSpine.onpointerout`

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-85]

`CoreSpine.onpointerover`

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-86]

`CoreSpine.onpointertap`

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-87]

`CoreSpine.onpointerup`

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-88]

`CoreSpine.onpointerupoutside`

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-89]

`CoreSpine.onRender`

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-90]

`CoreSpine.onrightclick`

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) => {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) => {
    sprite.scale.set(0.9);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-91]

`CoreSpine.onrightdown`

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-92]

`CoreSpine.onrightup`

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-93]

`CoreSpine.onrightupoutside`

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-94]

`CoreSpine.ontap`

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-95]

`CoreSpine.ontouchcancel`

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-96]

`CoreSpine.ontouchend`

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-97]

`CoreSpine.ontouchendoutside`

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-98]

`CoreSpine.ontouchmove`

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-57]

```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);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-99]

`CoreSpine.ontouchstart`

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-100]

`CoreSpine.onwheel`

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* Container#addChild For adding to a parent
* Container#removeChild For removing from parent

#### Inherited from [#inherited-from-101]

`CoreSpine.parent`

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-102]

`CoreSpine.parentRenderLayer`

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_SPINE_ID`

Defined in: [src/components/Spine.ts:114](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L114)

Get the id of the canvas element. This variable is used in the system to get the canvas element by id

#### Implementation of [#implementation-of-1]

`CanvasBaseItem.pixivnId`

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-103]

`CoreSpine.relativeGroupTransform`

***

### renderPipeId [#renderpipeid]

\> `readonly` **renderPipeId**: `"spine"` = `"spine"`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:173

**`Internal`**

#### Inherited from [#inherited-from-104]

`CoreSpine.renderPipeId`

***

### skeleton [#skeleton]

\> **skeleton**: `Skeleton`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:178

The skeleton for this Spine game object.

#### Inherited from [#inherited-from-105]

`CoreSpine.skeleton`

***

### skeletonAlias [#skeletonalias]

\> `readonly` **skeletonAlias**: `string`

Defined in: [src/components/Spine.ts:116](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L116)

The asset alias of the skeleton this component was created with.

***

### skeletonBounds? [#skeletonbounds]

\> `optional` &#x2A;*skeletonBounds?**: `SkeletonBounds`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:181

#### Inherited from [#inherited-from-106]

`CoreSpine.skeletonBounds`

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-107]

`CoreSpine.sortableChildren`

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-6]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](#sortablechildren) For enabling automatic sorting
* [Container#zIndex](#zindex) For setting child order

#### Inherited from [#inherited-from-108]

`CoreSpine.sortChildren`

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-109]

`CoreSpine.sortDirty`

***

### spineAttachmentsDirty [#spineattachmentsdirty]

\> **spineAttachmentsDirty**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:187

#### Inherited from [#inherited-from-110]

`CoreSpine.spineAttachmentsDirty`

***

### spineTexturesDirty [#spinetexturesdirty]

\> **spineTexturesDirty**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:188

#### Inherited from [#inherited-from-111]

`CoreSpine.spineTexturesDirty`

***

### state [#state]

\> **state**: `AnimationState`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:180

The animation state for this Spine game object.

#### Inherited from [#inherited-from-112]

`CoreSpine.state`

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-113]

`CoreSpine.tabIndex`

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-114]

`CoreSpine.uid`

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-7]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-115]

`CoreSpine.updateCacheTexture`

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-116]

`CoreSpine.updateTick`

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-117]

`CoreSpine.zIndex`

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-118]

`CoreSpine.prefixed`

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/components/Spine.ts:527](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L527)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-8]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/components/Spine.ts:515](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L515)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-4]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-9]

`void`

#### Implementation of [#implementation-of-2]

`AdditionalPositionsExtension.align`

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* Container#visible For toggling visibility
* Container#renderable For render control

##### Returns [#returns-10]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-5]

###### value [#value-1]

`number`

##### Returns [#returns-11]

`void`

#### Inherited from [#inherited-from-119]

`CoreSpine.alpha`

***

### anchor [#anchor]

#### Get Signature [#get-signature-2]

\> **get** **anchor**(): `PointData`

Defined in: [src/components/Spine.ts:487](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L487)

The anchor sets the origin point of the imageContainer. The default value is taken from the Texture
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-66]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Returns [#returns-12]

`PointData`

#### Set Signature [#set-signature-2]

\> **set** **anchor**(`value`): `void`

Defined in: [src/components/Spine.ts:492](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L492)

The anchor sets the origin point of the imageContainer. The default value is taken from the Texture
and passed to the constructor.

The default is `(0,0)`, this means the imageContainer's origin is the top left.

Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.

Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.

If you pass only single parameter, it will set both x and y to the same value as shown in the example below.

##### Example [#example-67]

```ts
import { ImageContainer } from '@drincs/pixi-vn';

const imageContainer = new ImageContainer();
imageContainer.anchor = 0.5;
```

##### Parameters [#parameters-6]

###### value [#value-2]

`number` | `PointData`

##### Returns [#returns-13]

`void`

#### Implementation of [#implementation-of-3]

`AnchorExtension.anchor`

***

### angle [#angle]

#### Get Signature [#get-signature-3]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-68]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-14]

`number`

#### Set Signature [#set-signature-3]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-7]

###### value [#value-3]

`number`

##### Returns [#returns-15]

`void`

#### Inherited from [#inherited-from-120]

`CoreSpine.angle`

***

### autoUpdate [#autoupdate]

#### Get Signature [#get-signature-4]

\> **get** **autoUpdate**(): `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:201

##### Returns [#returns-16]

`boolean`

#### Set Signature [#set-signature-4]

\> **set** **autoUpdate**(`value`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:203

When `true`, the Spine AnimationState and the Skeleton will be automatically updated using the [ticker](#ticker).

##### Parameters [#parameters-8]

###### value [#value-4]

`boolean`

##### Returns [#returns-17]

`void`

#### Inherited from [#inherited-from-121]

`CoreSpine.autoUpdate`

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-5]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-69]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* Container#alpha For transparency
* Container#tint For color adjustments

##### Returns [#returns-18]

`BLEND_MODES`

#### Set Signature [#set-signature-5]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-9]

###### value [#value-5]

`BLEND_MODES`

##### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-122]

`CoreSpine.blendMode`

***

### bounds [#bounds]

#### Get Signature [#get-signature-6]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:255

The local bounds of the view in its own coordinate space.
Bounds are automatically updated when the view's content changes.

##### Example [#example-70]

```ts
// Get bounds dimensions
const bounds = view.bounds;
console.log(`Width: ${bounds.maxX - bounds.minX}`);
console.log(`Height: ${bounds.maxY - bounds.minY}`);
```

##### See [#see-16]

Bounds For bounds operations

##### Returns [#returns-20]

`Bounds`

The rectangular bounds of the view

#### Inherited from [#inherited-from-123]

`CoreSpine.bounds`

***

### boundsProvider [#boundsprovider]

#### Get Signature [#get-signature-7]

\> **get** **boundsProvider**(): `SpineBoundsProvider` | `undefined`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:210

The bounds provider to use. If undefined the bounds will be dynamic, calculated when requested and based on the current frame.

##### Returns [#returns-21]

`SpineBoundsProvider` | `undefined`

#### Set Signature [#set-signature-6]

\> **set** **boundsProvider**(`value`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:211

##### Parameters [#parameters-10]

###### value [#value-6]

`SpineBoundsProvider` | `undefined`

##### Returns [#returns-22]

`void`

#### Inherited from [#inherited-from-124]

`CoreSpine.boundsProvider`

***

### debug [#debug]

#### Get Signature [#get-signature-8]

\> **get** **debug**(): `ISpineDebugRenderer` | `undefined`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:194

##### Returns [#returns-23]

`ISpineDebugRenderer` | `undefined`

#### Set Signature [#set-signature-7]

\> **set** **debug**(`value`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:198

Pass a SpineDebugRenderer or create your own ISpineDebugRenderer to render bones, meshes, ...

##### Example [#example-71]

```ts
spineGO.debug = new SpineDebugRenderer();
```

##### Parameters [#parameters-11]

###### value [#value-7]

`ISpineDebugRenderer` | `undefined`

##### Returns [#returns-24]

`void`

#### Inherited from [#inherited-from-125]

`CoreSpine.debug`

***

### filters [#filters]

#### Get Signature [#get-signature-9]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-72]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-17]

Filter For filter base class

##### Returns [#returns-25]

readonly `Filter`\[]

#### Set Signature [#set-signature-8]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-73]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-18]

Filter For filter base class

##### Parameters [#parameters-12]

###### value [#value-8]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-126]

`CoreSpine.filters`

***

### height [#height]

#### Get Signature [#get-signature-10]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use Container#setSize
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-74]

```ts
// Basic height setting
container.height = 200;
// Optimized height setting
container.setSize(100, 200);
```

##### Returns [#returns-27]

`number`

#### Set Signature [#set-signature-9]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118

##### Parameters [#parameters-13]

###### value [#value-9]

`number`

##### Returns [#returns-28]

`void`

#### Inherited from [#inherited-from-127]

`CoreSpine.height`

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-11]

\> **get** **isRenderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

##### Advanced [#advanced-7]

##### Returns [#returns-29]

`boolean`

#### Inherited from [#inherited-from-128]

`CoreSpine.isRenderable`

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-12]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-8]

##### Returns [#returns-30]

`boolean`

#### Set Signature [#set-signature-10]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-14]

###### value [#value-10]

`boolean`

##### Returns [#returns-31]

`void`

#### Inherited from [#inherited-from-129]

`CoreSpine.isRenderGroup`

***

### memory [#memory]

#### Get Signature [#get-signature-13]

\> **get** **memory**(): [`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)

Defined in: [src/components/Spine.ts:136](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L136)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-32]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)

#### Implementation of [#implementation-of-4]

`CanvasBaseItem.memory`

***

### origin [#origin]

#### Get Signature [#get-signature-14]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-75]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-33]

`ObservablePoint`

#### Set Signature [#set-signature-11]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-15]

###### value [#value-11]

`number` | `PointData`

##### Returns [#returns-34]

`void`

#### Inherited from [#inherited-from-130]

`CoreSpine.origin`

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-15]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/components/Spine.ts:602](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L602)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-35]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-12]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/components/Spine.ts:590](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L590)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-16]

###### value [#value-12]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-36]

`void`

#### Implementation of [#implementation-of-5]

`AdditionalPositionsExtension.percentagePosition`

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-16]

\> **get** **percentageX**(): `number`

Defined in: [src/components/Spine.ts:616](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L616)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-37]

`number`

#### Set Signature [#set-signature-13]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/components/Spine.ts:608](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L608)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-17]

###### \_value [#_value]

`number`

##### Returns [#returns-38]

`void`

#### Implementation of [#implementation-of-6]

`AdditionalPositionsExtension.percentageX`

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-17]

\> **get** **percentageY**(): `number`

Defined in: [src/components/Spine.ts:627](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L627)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-39]

`number`

#### Set Signature [#set-signature-14]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/components/Spine.ts:619](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L619)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-18]

###### \_value [#_value-1]

`number`

##### Returns [#returns-40]

`void`

#### Implementation of [#implementation-of-7]

`AdditionalPositionsExtension.percentageY`

***

### physicsPositionInheritanceFactorX [#physicspositioninheritancefactorx]

#### Get Signature [#get-signature-18]

\> **get** **physicsPositionInheritanceFactorX**(): `number`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:223

Scales how much horizontal translation of this Pixi container is inherited by skeleton physics constraints.

##### Returns [#returns-41]

`number`

#### Inherited from [#inherited-from-131]

`CoreSpine.physicsPositionInheritanceFactorX`

***

### physicsPositionInheritanceFactorY [#physicspositioninheritancefactory]

#### Get Signature [#get-signature-19]

\> **get** **physicsPositionInheritanceFactorY**(): `number`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:225

Scales how much vertical translation of this Pixi container is inherited by skeleton physics constraints.

##### Returns [#returns-42]

`number`

#### Inherited from [#inherited-from-132]

`CoreSpine.physicsPositionInheritanceFactorY`

***

### physicsRotationInheritanceFactor [#physicsrotationinheritancefactor]

#### Get Signature [#get-signature-20]

\> **get** **physicsRotationInheritanceFactor**(): `number`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:237

Scales how much rotation of this Pixi container is inherited by skeleton physics constraints.
The default is `1`, which applies container rotation normally. Use `0` to prevent container
rotation from affecting physics constraints.

##### Returns [#returns-43]

`number`

#### Set Signature [#set-signature-15]

\> **set** **physicsRotationInheritanceFactor**(`value`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:238

##### Parameters [#parameters-19]

###### value [#value-13]

`number`

##### Returns [#returns-44]

`void`

#### Inherited from [#inherited-from-133]

`CoreSpine.physicsRotationInheritanceFactor`

***

### pivot [#pivot]

#### Get Signature [#get-signature-21]

\> **get** **pivot**(): `ObservablePoint`

Defined in: [src/components/Spine.ts:505](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L505)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-76]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-45]

`ObservablePoint`

#### Set Signature [#set-signature-16]

\> **set** **pivot**(`value`): `void`

Defined in: [src/components/Spine.ts:508](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L508)

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-77]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-3]

4.0.0

##### Parameters [#parameters-20]

###### value [#value-14]

`ObservablePoint`

##### Returns [#returns-46]

`void`

#### Overrides [#overrides-1]

`CoreSpine.pivot`

***

### position [#position]

#### Get Signature [#get-signature-22]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/components/Spine.ts:701](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L701)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-78]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Returns [#returns-47]

`ObservablePoint`

#### Set Signature [#set-signature-17]

\> **set** **position**(`value`): `void`

Defined in: [src/components/Spine.ts:704](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L704)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-79]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-5]

4.0.0

##### Parameters [#parameters-21]

###### value [#value-15]

`ObservablePoint`

##### Returns [#returns-48]

`void`

#### Overrides [#overrides-2]

`CoreSpine.position`

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-23]

\> **get** **positionInfo**(): `object`

Defined in: [src/components/Spine.ts:638](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L638)

##### Returns [#returns-49]

`object`

###### type [#type]

\> **type**: `"align"` | `"pixel"` | `"percentage"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-18]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/components/Spine.ts:650](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L650)

##### Parameters [#parameters-22]

###### value [#value-16]

###### type? [#type-1]

`"align"` | `"pixel"` | `"percentage"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-50]

`void`

#### Implementation of [#implementation-of-8]

`AdditionalPositionsExtension.positionInfo`

***

### positionType [#positiontype]

#### Get Signature [#get-signature-24]

\> **get** **positionType**(): `"align"` | `"pixel"` | `"percentage"`

Defined in: [src/components/Spine.ts:630](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L630)

##### Returns [#returns-51]

`"align"` | `"pixel"` | `"percentage"`

#### Implementation of [#implementation-of-9]

`AdditionalPositionsExtension.positionType`

***

### renderable [#renderable]

#### Get Signature [#get-signature-25]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-80]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-19]

* Container#visible For skipping transform updates
* Container#alpha For transparency

##### Returns [#returns-52]

`boolean`

#### Set Signature [#set-signature-19]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-23]

###### value [#value-17]

`boolean`

##### Returns [#returns-53]

`void`

#### Inherited from [#inherited-from-134]

`CoreSpine.renderable`

***

### rotation [#rotation]

#### Get Signature [#get-signature-26]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-81]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-54]

`number`

#### Set Signature [#set-signature-20]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-24]

###### value [#value-18]

`number`

##### Returns [#returns-55]

`void`

#### Inherited from [#inherited-from-135]

`CoreSpine.rotation`

***

### roundPixels [#roundpixels]

#### Get Signature [#get-signature-27]

\> **get** **roundPixels**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

##### Example [#example-82]

```ts
// Enable pixel rounding for crisp rendering
view.roundPixels = true;
```

##### Default [#default-55]

```ts
false
```

##### Returns [#returns-56]

`boolean`

#### Set Signature [#set-signature-21]

\> **set** **roundPixels**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

##### Parameters [#parameters-25]

###### value [#value-19]

`boolean`

##### Returns [#returns-57]

`void`

#### Inherited from [#inherited-from-136]

`CoreSpine.roundPixels`

***

### scale [#scale]

#### Get Signature [#get-signature-28]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-83]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-6]

4.0.0

##### Returns [#returns-58]

`ObservablePoint`

#### Set Signature [#set-signature-22]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-26]

###### value [#value-20]

`string` | `number` | `PointData`

##### Returns [#returns-59]

`void`

#### Inherited from [#inherited-from-137]

`CoreSpine.scale`

***

### skew [#skew]

#### Get Signature [#get-signature-29]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-84]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-7]

4.0.0

##### Default [#default-56]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-60]

`ObservablePoint`

#### Set Signature [#set-signature-23]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-27]

###### value [#value-21]

`PointData`

##### Returns [#returns-61]

`void`

#### Inherited from [#inherited-from-138]

`CoreSpine.skew`

***

### ticker [#ticker]

#### Get Signature [#get-signature-30]

\> **get** **ticker**(): `Ticker`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:205

The ticker to use when [autoUpdate](#autoupdate) is `true`. Defaults to Ticker.shared.

##### Returns [#returns-62]

`Ticker`

#### Set Signature [#set-signature-24]

\> **set** **ticker**(`value`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:207

Sets the ticker to use when [autoUpdate](#autoupdate) is `true`. If `autoUpdate` is already `true`, the update callback will be moved from the old ticker to the new one.

##### Parameters [#parameters-28]

###### value [#value-22]

`Ticker`

##### Returns [#returns-63]

`void`

#### Inherited from [#inherited-from-139]

`CoreSpine.ticker`

***

### tint [#tint]

#### Get Signature [#get-signature-31]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-85]

```ts
// Basic color tinting
container.tint = 0xff0000; // Red tint
container.tint = 'red';    // Same as above
container.tint = '#00ff00'; // Green
container.tint = 'rgb(0,0,255)'; // Blue

// Remove tint
container.tint = 0xffffff; // White = no tint
container.tint = null;     // Also removes tint
```

##### Default [#default-57]

```ts
0xFFFFFF
```

##### See [#see-20]

* Container#alpha For transparency
* Container#visible For visibility control

##### Returns [#returns-64]

`number`

#### Set Signature [#set-signature-25]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-29]

###### value [#value-23]

`ColorSource`

##### Returns [#returns-65]

`void`

#### Inherited from [#inherited-from-140]

`CoreSpine.tint`

***

### visible [#visible]

#### Get Signature [#get-signature-32]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

##### Example [#example-86]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-58]

```ts
true
```

##### See [#see-21]

* Container#renderable For render-only control
* Container#alpha For transparency

##### Returns [#returns-66]

`boolean`

#### Set Signature [#set-signature-26]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-30]

###### value [#value-24]

`boolean`

##### Returns [#returns-67]

`void`

#### Inherited from [#inherited-from-141]

`CoreSpine.visible`

***

### width [#width]

#### Get Signature [#get-signature-33]

\> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set.
\> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use Container#setSize
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-87]

```ts
// Basic width setting
container.width = 100;
// Optimized width setting
container.setSize(100, 100);
```

##### Returns [#returns-68]

`number`

#### Set Signature [#set-signature-27]

\> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103

##### Parameters [#parameters-31]

###### value [#value-25]

`number`

##### Returns [#returns-69]

`void`

#### Inherited from [#inherited-from-142]

`CoreSpine.width`

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-34]

\> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-88]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-22]

Container#localTransform For local space transform

##### Returns [#returns-70]

`Matrix`

#### Inherited from [#inherited-from-143]

`CoreSpine.worldTransform`

***

### x [#x-2]

#### Get Signature [#get-signature-35]

\> **get** **x**(): `number`

Defined in: [src/components/Spine.ts:709](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L709)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-89]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-71]

`number`

#### Set Signature [#set-signature-28]

\> **set** **x**(`value`): `void`

Defined in: [src/components/Spine.ts:712](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L712)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-90]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-32]

###### value [#value-26]

`number`

##### Returns [#returns-72]

`void`

#### Overrides [#overrides-3]

`CoreSpine.x`

***

### xAlign [#xalign]

#### Get Signature [#get-signature-36]

\> **get** **xAlign**(): `number`

Defined in: [src/components/Spine.ts:557](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L557)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-73]

`number`

#### Set Signature [#set-signature-29]

\> **set** **xAlign**(`value`): `void`

Defined in: [src/components/Spine.ts:549](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L549)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-33]

###### value [#value-27]

`number`

##### Returns [#returns-74]

`void`

#### Implementation of [#implementation-of-10]

`AdditionalPositionsExtension.xAlign`

***

### y [#y-2]

#### Get Signature [#get-signature-37]

\> **get** **y**(): `number`

Defined in: [src/components/Spine.ts:717](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L717)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-91]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-75]

`number`

#### Set Signature [#set-signature-30]

\> **set** **y**(`value`): `void`

Defined in: [src/components/Spine.ts:720](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L720)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-92]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-34]

###### value [#value-28]

`number`

##### Returns [#returns-76]

`void`

#### Overrides [#overrides-4]

`CoreSpine.y`

***

### yAlign [#yalign]

#### Get Signature [#get-signature-38]

\> **get** **yAlign**(): `number`

Defined in: [src/components/Spine.ts:577](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L577)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-77]

`number`

#### Set Signature [#set-signature-31]

\> **set** **yAlign**(`value`): `void`

Defined in: [src/components/Spine.ts:569](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L569)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-35]

###### value [#value-29]

`number`

##### Returns [#returns-78]

`void`

#### Implementation of [#implementation-of-11]

`AdditionalPositionsExtension.yAlign`

## Methods [#methods]

### \_getCachedData() [#_getcacheddata]

\> **\_getCachedData**(`slot`, `attachment`): `AttachmentCacheData`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:301

**`Internal`**

#### Parameters [#parameters-36]

##### slot [#slot]

`Slot`

##### attachment [#attachment]

`RegionAttachment` | `MeshAttachment`

#### Returns [#returns-79]

`AttachmentCacheData`

#### Inherited from [#inherited-from-144]

`CoreSpine._getCachedData`

***

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

\> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-37]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-80]

`void`

#### Inherited from [#inherited-from-145]

`CoreSpine._getGlobalBoundsRecursive`

***

### \_onTouch()? [#_ontouch]

\> `optional&#x60; **\_onTouch**(`now`): `void`

Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:31

An optional callback for when an item is touched

#### Parameters [#parameters-38]

##### now [#now]

`number`

#### Returns [#returns-81]

`void`

#### Inherited from [#inherited-from-146]

`CoreSpine._onTouch`

***

### \_validateAndTransformAttachments() [#_validateandtransformattachments]

\> **\_validateAndTransformAttachments**(): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:282

**`Internal`**

* validates the attachments - to flag if the attachments have changed this state
* transforms the attachments - to update the vertices of the attachments based on the new positions

#### Returns [#returns-82]

`void`

#### Inherited from [#inherited-from-147]

`CoreSpine._validateAndTransformAttachments`

***

### addAnimation() [#addanimation]

\> **addAnimation**(`animationName`, `options?`): `TrackEntry`

Defined in: [src/components/Spine.ts:277](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L277)

Queues an animation to play on a track after the current animation (if any) completes. Use
[setAnimation](#setanimation) instead to replace the track's current animation immediately.

#### Parameters [#parameters-39]

##### animationName [#animationname]

`string`

The name of the animation to queue.

##### options? [#options-1]

Additional options for playing the track.

###### completeOnContinue? [#completeoncontinue]

`boolean`

If true, the animation will be completed before the next step.

**Default**

```ts
true
```

###### delay? [#delay]

`number`

Delay in seconds before the animation starts. If not provided, the animation will start immediately after the previous animation on the track, or after the mix duration if there is a previous animation.
If > 0, sets TrackEntry#delay. If \<= 0, the delay set is the duration of the previous track entry
minus any mix duration (from the AnimationStateData) plus the specified `delay` (ie the mix
ends at (`delay` = 0) or before (`delay` \< 0) the previous track entry duration). If the
previous entry is looping, its next loop completion is used instead of its duration.

###### loop? [#loop]

`boolean`

Whether the animation should loop. If true, the animation will loop indefinitely until changed.

###### trackIndex? [#trackindex]

`number`

The track index to play the animation on.

#### Returns [#returns-83]

`TrackEntry`

The `TrackEntry` for the queued animation, or `null` if the animation could not be found.

***

### addBounds() [#addbounds]

\> **addBounds**(`bounds`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:338

**`Internal`**

#### Parameters [#parameters-40]

##### bounds [#bounds-2]

`Bounds`

#### Returns [#returns-84]

`void`

#### Inherited from [#inherited-from-148]

`CoreSpine.addBounds`

***

### addChild() [#addchild]

\> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-41]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-85]

`U`\[`0`]

The first child that was added

#### Example [#example-93]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-23]

* Container#removeChild For removing children
* Container#addChildAt For adding at specific index

#### Inherited from [#inherited-from-149]

`CoreSpine.addChild`

***

### addChildAt() [#addchildat]

\> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-1]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-42]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-86]

`U`

The child that was added

#### Example [#example-94]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-24]

* Container#addChild For adding to the end
* Container#setChildIndex For moving existing children

#### Inherited from [#inherited-from-150]

`CoreSpine.addChildAt`

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

\> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-2]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-43]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-2]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-87]

`void`

##### Example [#example-95]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-151]

`CoreSpine.addEventListener`

#### Call Signature [#call-signature-1]

\> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-44]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-3]

`AddListenerOptions`

##### Returns [#returns-88]

`void`

##### Inherited from [#inherited-from-152]

`CoreSpine.addEventListener`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-3]

##### T [#t]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-45]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-89]

`this`

#### Inherited from [#inherited-from-153]

`CoreSpine.addListener`

***

### addSlotObject() [#addslotobject]

\> **addSlotObject**(`slot`, `container`, `options?`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:314

Attaches a PixiJS container to a specified slot. This will map the world transform of the slots bone
to the attached container. A container can only be attached to one slot at a time.

#### Parameters [#parameters-46]

##### slot [#slot-1]

`string` | `number` | `Slot`

##### container [#container]

`Container`

The container to attach to the slot

##### options? [#options-4]

Optional settings for the attachment.

###### followAttachmentTimeline? [#followattachmenttimeline]

`boolean`

If true, the attachment will follow the slot's attachment timeline.

###### followSlotColor? [#followslotcolor]

`boolean`

If true, the container tint will follow the skeleton and slot colors.

#### Returns [#returns-90]

`void`

#### Inherited from [#inherited-from-154]

`CoreSpine.addSlotObject`

***

### clearTrack() [#cleartrack]

\> **clearTrack**(`trackIndex`): `void`

Defined in: [src/components/Spine.ts:435](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L435)

Removes all animations from a single track, stopping its running [playSequence](#playsequence) timeline (if
any), and leaving the skeleton in its current pose.

#### Parameters [#parameters-47]

##### trackIndex [#trackindex-1]

`number`

The track index to clear.

#### Returns [#returns-91]

`void`

***

### clearTracks() [#cleartracks]

\> **clearTracks**(): `void`

Defined in: [src/components/Spine.ts:423](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L423)

Removes all animations from all tracks, stopping any running [playSequence](#playsequence) timelines, and
leaving the skeleton in its current pose.

#### Returns [#returns-92]

`void`

***

### collectRenderables() [#collectrenderables]

\> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

**`Internal`**

Collects all renderables from the container and its children, adding them to the instruction set.
This method decides whether to use a simple or advanced collection method based on the container's properties.

#### Parameters [#parameters-48]

##### instructionSet [#instructionset]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-1]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-93]

`void`

#### Inherited from [#inherited-from-155]

`CoreSpine.collectRenderables`

***

### collectRenderablesSimple() [#collectrenderablessimple]

\> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

**`Internal`**

Collects renderables for the view container.

#### Parameters [#parameters-49]

##### instructionSet [#instructionset-1]

`InstructionSet`

The instruction set to collect renderables for.

##### renderer [#renderer-1]

`Renderer`

The renderer to collect renderables for.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer.

#### Returns [#returns-94]

`void`

#### Inherited from [#inherited-from-156]

`CoreSpine.collectRenderablesSimple`

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

\> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-50]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-95]

`void`

#### Inherited from [#inherited-from-157]

`CoreSpine.collectRenderablesWithEffects`

***

### containsPoint() [#containspoint]

\> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:104

Checks if the object contains the given point in local coordinates.
Uses the view's bounds for hit testing.

#### Parameters [#parameters-51]

##### point [#point]

`PointData`

The point to check in local coordinates

#### Returns [#returns-96]

`boolean`

True if the point is within the view's bounds

#### Example [#example-96]

```ts
// Basic point check
const localPoint = { x: 50, y: 25 };
const contains = view.containsPoint(localPoint);
console.log('Point is inside:', contains);
```

#### See [#see-25]

* ViewContainer#bounds For the bounds used in hit testing
* [Container#toLocal](#tolocal) For converting global coordinates to local

#### Inherited from [#inherited-from-158]

`CoreSpine.containsPoint`

***

### destroy() [#destroy]

\> **destroy**(`options?`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:346

Destroys this sprite renderable and optionally its texture.

#### Parameters [#parameters-52]

##### options? [#options-5]

`DestroyOptions`

Options parameter. A boolean will act as if all options
have been set to that value

#### Returns [#returns-97]

`void`

#### Inherited from [#inherited-from-159]

`CoreSpine.destroy`

***

### disableRenderGroup() [#disablerendergroup]

\> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-98]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-160]

`CoreSpine.disableRenderGroup`

***

### dispatchEvent() [#dispatchevent]

\> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this Container using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-53]

##### e [#e]

`FederatedEvent`

The event to dispatch.

#### Returns [#returns-99]

`boolean`

Whether the FederatedEvent.preventDefault preventDefault() method was not invoked.

#### Example [#example-97]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-161]

`CoreSpine.dispatchEvent`

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-1]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-54]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-100]

`boolean`

#### Inherited from [#inherited-from-162]

`CoreSpine.emit`

***

### enableRenderGroup() [#enablerendergroup]

\> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-101]

`void`

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-163]

`CoreSpine.enableRenderGroup`

***

### eventNames() [#eventnames]

\> **eventNames**(): (keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-102]

(keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-164]

`CoreSpine.eventNames`

***

### getBonePosition() [#getboneposition]

\> **getBonePosition**(`bone`, `outPos?`): `PointData` | `undefined`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:269

Return the position of the bone given in input into an IPointData.

#### Parameters [#parameters-55]

##### bone [#bone]

`string` | `Bone`

##### outPos? [#outpos]

`PointData`

#### Returns [#returns-103]

`PointData` | `undefined`

: the position of the bone, or undefined if no matching bone is found in the skeleton

#### Inherited from [#inherited-from-165]

`CoreSpine.getBonePosition`

***

### getBounds() [#getbounds]

\> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-56]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-3]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-104]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-98]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-26]

* [Container#getLocalBounds](#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-166]

`CoreSpine.getBounds`

***

### getChildAt() [#getchildat]

\> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-5]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-57]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-105]

`U`

The child at the given index

#### Example [#example-99]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-27]

* Container#children For direct array access
* Container#getChildByLabel For name-based lookup

#### Inherited from [#inherited-from-167]

`CoreSpine.getChildAt`

***

### getChildByLabel() [#getchildbylabel]

\> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-58]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-106]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-100]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-28]

* Container#getChildrenByLabel For finding all matches
* [Container#label](#label) For setting labels

#### Inherited from [#inherited-from-168]

`CoreSpine.getChildByLabel`

***

### ~~getChildByName()~~ [#getchildbyname]

\> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-59]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-107]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-29]

Container#getChildByLabel

#### Inherited from [#inherited-from-169]

`CoreSpine.getChildByName`

***

### getChildIndex() [#getchildindex]

\> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-60]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-108]

`number`

The index position of the child container

#### Example [#example-101]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-30]

* Container#setChildIndex For changing index
* Container#children For direct array access

#### Inherited from [#inherited-from-170]

`CoreSpine.getChildIndex`

***

### getChildrenByLabel() [#getchildrenbylabel]

\> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-61]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-109]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-102]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-31]

* Container#getChildByLabel For finding first match
* [Container#label](#label) For setting labels

#### Inherited from [#inherited-from-171]

`CoreSpine.getChildrenByLabel`

***

### getFastGlobalBounds() [#getfastglobalbounds]

\> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-62]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-4]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-110]

`Bounds`

The computed bounds.

#### Advanced [#advanced-11]

#### Inherited from [#inherited-from-172]

`CoreSpine.getFastGlobalBounds`

***

### getGlobalAlpha() [#getglobalalpha]

\> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-63]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-111]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-103]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-173]

`CoreSpine.getGlobalAlpha`

***

### getGlobalPosition() [#getglobalposition]

\> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-64]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-112]

`Point`

The updated point

#### Example [#example-104]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-32]

* [Container#toGlobal](#toglobal) For converting specific points
* [Container#toLocal](#tolocal) For converting to local space

#### Inherited from [#inherited-from-174]

`CoreSpine.getGlobalPosition`

***

### getGlobalTint() [#getglobaltint]

\> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-65]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-113]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-105]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-175]

`CoreSpine.getGlobalTint`

***

### getGlobalTransform() [#getglobaltransform]

\> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-66]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-114]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-106]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-176]

`CoreSpine.getGlobalTransform`

***

### getLocalBounds() [#getlocalbounds]

\> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-115]

`Bounds`

The bounding area

#### Example [#example-107]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-33]

* [Container#getBounds](#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-177]

`CoreSpine.getLocalBounds`

***

### getSize() [#getsize]

\> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a \[Size]Size object.

This is faster than get the width and height separately.

#### Parameters [#parameters-67]

##### out? [#out-1]

`Size`

Optional object to store the size in.

#### Returns [#returns-116]

`Size`

The size of the container.

#### Example [#example-108]

```ts
// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);
```

#### Inherited from [#inherited-from-178]

`CoreSpine.getSize`

***

### getSlotObject() [#getslotobject]

\> **getSlotObject**(`slot`): `Container`\<`ContainerChild`> | `undefined`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:335

Returns a container attached to a slot, or undefined if no container is attached.

#### Parameters [#parameters-68]

##### slot [#slot-2]

`string` | `number` | `Slot`

#### Returns [#returns-117]

`Container`\<`ContainerChild`> | `undefined`

* The container attached to the slot

#### Inherited from [#inherited-from-179]

`CoreSpine.getSlotObject`

***

### internalUpdate() [#internalupdate]

\> `protected` **internalUpdate**(`ticker?`, `deltaSeconds?`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:242

#### Parameters [#parameters-69]

##### ticker? [#ticker-1]

`Ticker`

##### deltaSeconds? [#deltaseconds]

`number`

#### Returns [#returns-118]

`void`

#### Inherited from [#inherited-from-180]

`CoreSpine.internalUpdate`

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-70]

##### event [#event-2]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-119]

`number`

#### Inherited from [#inherited-from-181]

`CoreSpine.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-2]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-71]

##### event [#event-3]

`T`

#### Returns [#returns-120]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-182]

`CoreSpine.listeners`

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-7]

##### T [#t-3]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-72]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-121]

`this`

#### Inherited from [#inherited-from-183]

`CoreSpine.off`

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/components/Spine.ts:460](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L460)

Add a listener for a given event.

#### Type Parameters [#type-parameters-8]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents<ContainerChild>

#### Parameters [#parameters-73]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-122]

`this`

#### Implementation of [#implementation-of-12]

`ListenerExtension.on`

#### Overrides [#overrides-5]

`CoreSpine.on`

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-5]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-74]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-123]

`this`

#### Inherited from [#inherited-from-184]

`CoreSpine.once`

***

### pixiWorldCoordinatesToBone() [#pixiworldcoordinatestobone]

\> **pixiWorldCoordinatesToBone**(`point`, `bone`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:366

Converts a point from the Pixi world coordinate system to the bone's local coordinate system.

#### Parameters [#parameters-75]

##### point [#point-2]

###### x [#x-3]

`number`

###### y [#y-3]

`number`

##### bone [#bone-1]

`Bone`

#### Returns [#returns-124]

`void`

#### Inherited from [#inherited-from-185]

`CoreSpine.pixiWorldCoordinatesToBone`

***

### pixiWorldCoordinatesToSkeleton() [#pixiworldcoordinatestoskeleton]

\> **pixiWorldCoordinatesToSkeleton**(`point`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:361

Converts a point from the Pixi world coordinate system to the skeleton coordinate system.

#### Parameters [#parameters-76]

##### point [#point-3]

###### x [#x-4]

`number`

###### y [#y-4]

`number`

#### Returns [#returns-125]

`void`

#### Inherited from [#inherited-from-186]

`CoreSpine.pixiWorldCoordinatesToSkeleton`

***

### playSequence() [#playsequence]

\> **playSequence**(`sequence`, `options?`): `Omit`\<`AnimationPlaybackControlsWithThen`, `"pause"`>

Defined in: [src/components/Spine.ts:333](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L333)

Plays a sequence of animations on a track, one after another, driven by a `motion` timeline. Any
animation currently playing on the track is cleared first. The sequence is tracked in
sequenceTimelines (and thus included in [memory](#memory)) until it completes, at which point
the track is cleared automatically.

#### Parameters [#parameters-77]

##### sequence [#sequence]

(`string` | \[`string`, [`SpineSequenceOptions`](/jsdoc/pixi-vn-spine/index/type-aliases/SpineSequenceOptions)])\[]

The sequence of animations to play, with their respective options. Corresponds to the motion sequence settings: [https://motion.dev/docs/animate#timeline-sequences](https://motion.dev/docs/animate#timeline-sequences)

##### options? [#options-6]

`SequenceOptions` & `object` = `{}`

Additional options for playing the track.

#### Returns [#returns-126]

`Omit`\<`AnimationPlaybackControlsWithThen`, `"pause"`>

The `motion` timeline controls for the sequence (without `pause`, since pausing is not supported).

#### Example [#example-109]

```ts
spine.playSequence([
    ["walk", { loop: true, duration: 2 }],
    ["jump", { delay: 0.5 }],
], { loop: true, completeOnContinue: true });
```

***

### reloadAnchor() [#reloadanchor]

\> `protected` **reloadAnchor**(): `void`

Defined in: [src/components/Spine.ts:500](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L500)

#### Returns [#returns-127]

`void`

***

### reloadPosition() [#reloadposition]

\> `protected` **reloadPosition**(): `void`

Defined in: [src/components/Spine.ts:664](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L664)

Re-applies whichever positioning mode is active ([align](#align) or [percentagePosition](#percentageposition)) onto
the underlying pixel [x](#x)/[y](#y), e.g. after the skeleton's size, scale or angle changes.
No-op when neither mode is set (plain pixel positioning).

#### Returns [#returns-128]

`void`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-78]

##### event? [#event-7]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-129]

`this`

#### Inherited from [#inherited-from-187]

`CoreSpine.removeAllListeners`

***

### removeChild() [#removechild]

\> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-10]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-79]

##### children [#children-2]

...`U`

The Container(s) to remove

#### Returns [#returns-130]

`U`\[`0`]

The first child that was removed

#### Example [#example-110]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-34]

* Container#addChild For adding children
* Container#removeChildren For removing multiple children

#### Inherited from [#inherited-from-188]

`CoreSpine.removeChild`

***

### removeChildAt() [#removechildat]

\> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-11]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-80]

##### index [#index-2]

`number`

The index to remove the child from

#### Returns [#returns-131]

`U`

The child that was removed

#### Example [#example-111]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-35]

* Container#removeChild For removing specific children
* Container#removeChildren For removing multiple children

#### Inherited from [#inherited-from-189]

`CoreSpine.removeChildAt`

***

### removeChildren() [#removechildren]

\> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-81]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-132]

`ContainerChild`\[]

List of removed children

#### Example [#example-112]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-36]

* Container#addChild For adding children
* Container#removeChild For removing specific children

#### Inherited from [#inherited-from-190]

`CoreSpine.removeChildren`

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

\> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-12]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-82]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-7]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-133]

`void`

##### Inherited from [#inherited-from-191]

`CoreSpine.removeEventListener`

#### Call Signature [#call-signature-3]

\> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-83]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-8]

`RemoveListenerOptions`

##### Returns [#returns-134]

`void`

##### Inherited from [#inherited-from-192]

`CoreSpine.removeEventListener`

***

### removeFromParent() [#removefromparent]

\> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-135]

`void`

#### Example [#example-113]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-37]

* Container#addChild For adding to a new parent
* Container#removeChild For parent removing children

#### Inherited from [#inherited-from-193]

`CoreSpine.removeFromParent`

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-13]

##### T [#t-6]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-84]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-136]

`this`

#### Inherited from [#inherited-from-194]

`CoreSpine.removeListener`

***

### removeSlotObject() [#removeslotobject]

\> **removeSlotObject**(`slotOrContainer`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:324

Removes a PixiJS container from the slot it is attached to.

#### Parameters [#parameters-85]

##### slotOrContainer [#slotorcontainer]

`string` | `number` | `Container`\<`ContainerChild`> | `Slot`

The container, slot id or slot to detach from

#### Returns [#returns-137]

`void`

#### Inherited from [#inherited-from-195]

`CoreSpine.removeSlotObject`

***

### removeSlotObjects() [#removeslotobjects]

\> **removeSlotObjects**(): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:328

Removes all PixiJS containers attached to any slot.

#### Returns [#returns-138]

`void`

#### Inherited from [#inherited-from-196]

`CoreSpine.removeSlotObjects`

***

### reparentChild() [#reparentchild]

\> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-14]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-86]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-139]

`U`\[`0`]

The first child that was reparented

#### Example [#example-114]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-38]

* Container#reparentChildAt For index-specific reparenting
* Container#addChild For simple parenting

#### Inherited from [#inherited-from-197]

`CoreSpine.reparentChild`

***

### reparentChildAt() [#reparentchildat]

\> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-87]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-3]

`number`

The index to reparent the child to

#### Returns [#returns-140]

`U`

The reparented child

#### Example [#example-115]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-39]

* Container#reparentChild For appending reparented children
* Container#addChildAt For simple indexed parenting

#### Inherited from [#inherited-from-198]

`CoreSpine.reparentChildAt`

***

### replaceChild() [#replacechild]

\> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-16]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-88]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-141]

`void`

#### Inherited from [#inherited-from-199]

`CoreSpine.replaceChild`

***

### resetPhysicsPosition() [#resetphysicsposition]

\> **resetPhysicsPosition**(): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:244

Resets the position used for calculating inherited physics translation.

#### Returns [#returns-142]

`void`

#### Inherited from [#inherited-from-200]

`CoreSpine.resetPhysicsPosition`

***

### resetPhysicsRotation() [#resetphysicsrotation]

\> **resetPhysicsRotation**(): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:246

Resets the rotation used for calculating inherited physics rotation.

#### Returns [#returns-143]

`void`

#### Inherited from [#inherited-from-201]

`CoreSpine.resetPhysicsRotation`

***

### resetPhysicsTransform() [#resetphysicstransform]

\> **resetPhysicsTransform**(): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:248

Resets the transform used for calculating inherited physics translation and rotation.

#### Returns [#returns-144]

`void`

#### Inherited from [#inherited-from-202]

`CoreSpine.resetPhysicsTransform`

***

### setAnimation() [#setanimation]

\> **setAnimation**(`animationName`, `options`): `TrackEntry`

Defined in: [src/components/Spine.ts:239](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L239)

Sets the current animation on a track, replacing whatever is currently playing on it. Use
[addAnimation](#addanimation) instead to queue an animation after the current one.

#### Parameters [#parameters-89]

##### animationName [#animationname-1]

`string`

The name of the animation to set.

##### options [#options-9]

Additional options for setting the animation.

###### completeOnContinue? [#completeoncontinue-1]

`boolean`

If true, the animation will be completed before the next step.

**Default**

```ts
true
```

###### loop? [#loop-1]

`boolean`

Whether the animation should loop. If true, the animation will loop indefinitely until changed.

###### trackIndex [#trackindex-2]

`number`

The track index to play the animation on.

#### Returns [#returns-145]

`TrackEntry`

The `TrackEntry` for the animation, or `null` if the animation could not be found.

***

### setBonePosition() [#setboneposition]

\> **setBonePosition**(`bone`, `position`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:262

Set the position of the bone given in input through a IPointData.

#### Parameters [#parameters-90]

##### bone [#bone-2]

`string` | `Bone`

##### position [#position-1]

`PointData`

#### Returns [#returns-146]

`void`

#### Throws [#throws-7]

: if the given bone is not found in the skeleton, an error is thrown

#### Inherited from [#inherited-from-203]

`CoreSpine.setBonePosition`

***

### setChildIndex() [#setchildindex]

\> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-91]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-4]

`number`

The resulting index number for the child

#### Returns [#returns-147]

`void`

#### Example [#example-116]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-8]

If index is out of bounds

#### Throws [#throws-9]

If child is not in container

#### See [#see-40]

* Container#getChildIndex For getting current index
* Container#swapChildren For swapping positions

#### Inherited from [#inherited-from-204]

`CoreSpine.setChildIndex`

***

### setFromMatrix() [#setfrommatrix]

\> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-92]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-148]

`void`

#### Example [#example-117]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-41]

* Container#updateTransform For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-205]

`CoreSpine.setFromMatrix`

***

### setMask() [#setmask]

\> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-93]

##### options [#options-10]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-149]

`void`

#### Example [#example-118]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-42]

* [Container#mask](#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-206]

`CoreSpine.setMask`

***

### setMemory() [#setmemory]

\> **setMemory**(`memory`): `Promise`\<`void`>

Defined in: [src/components/Spine.ts:227](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L227)

This method set the memory of the canvas element.

#### Parameters [#parameters-94]

##### memory [#memory-1]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)

#### Returns [#returns-150]

`Promise`\<`void`>

#### Throws [#throws-10]

when the method is not overridden in the subclass.

#### Implementation of [#implementation-of-13]

`CanvasBaseItem.setMemory`

***

### setPhysicsPositionInheritanceFactor() [#setphysicspositioninheritancefactor]

\> **setPhysicsPositionInheritanceFactor**(`x`, `y`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:231

Sets how much translation of this Pixi container is inherited by skeleton physics constraints.
The default is (1, 1), which applies container translation normally. Use (0, 0)
to prevent container translation from affecting physics constraints.

#### Parameters [#parameters-95]

##### x [#x-5]

`number`

##### y [#y-5]

`number`

#### Returns [#returns-151]

`void`

#### Inherited from [#inherited-from-207]

`CoreSpine.setPhysicsPositionInheritanceFactor`

***

### setSize() [#setsize]

\> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height.
This is more efficient than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-96]

##### value [#value-30]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a \[Size]Size object.

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided.

#### Returns [#returns-152]

`void`

#### Example [#example-119]

```ts
// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100
```

#### Inherited from [#inherited-from-208]

`CoreSpine.setSize`

***

### setSkin() [#setskin]

\> **setSkin**(`skinName`): `void`

Defined in: [src/components/Spine.ts:445](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/components/Spine.ts#L445)

Sets the active skin on the skeleton and refreshes its pose slots accordingly. Failures (e.g. an
unknown skin name) are logged via logger.error rather than thrown.

#### Parameters [#parameters-97]

##### skinName [#skinname]

`string`

The name of the skin to set.

#### Returns [#returns-153]

`void`

***

### skeletonToPixiWorldCoordinates() [#skeletontopixiworldcoordinates]

\> **skeletonToPixiWorldCoordinates**(`point`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:356

Converts a point from the skeleton coordinate system to the Pixi world coordinate system.

#### Parameters [#parameters-98]

##### point [#point-4]

###### x [#x-6]

`number`

###### y [#y-6]

`number`

#### Returns [#returns-154]

`void`

#### Inherited from [#inherited-from-209]

`CoreSpine.skeletonToPixiWorldCoordinates`

***

### swapChildren() [#swapchildren]

\> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-17]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-99]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-155]

`void`

#### Example [#example-120]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-11]

If either child is not in container

#### See [#see-43]

* Container#setChildIndex For direct index placement
* Container#getChildIndex For getting current positions

#### Inherited from [#inherited-from-210]

`CoreSpine.swapChildren`

***

### toGlobal() [#toglobal]

\> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-18]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-100]

##### position [#position-2]

`PointData`

The local point to convert

##### point? [#point-5]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-156]

`P`

The global position

#### Example [#example-121]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-44]

* [Container#toLocal](#tolocal) For reverse conversion
* [Container#getGlobalPosition](#getglobalposition) For container position

#### Inherited from [#inherited-from-211]

`CoreSpine.toGlobal`

***

### toLocal() [#tolocal]

\> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-19]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-101]

##### position [#position-3]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-6]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-157]

`P`

A point object representing the position in local space

#### Example [#example-122]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-45]

* [Container#toGlobal](#toglobal) For reverse conversion
* [Container#getGlobalPosition](#getglobalposition) For container position

#### Inherited from [#inherited-from-212]

`CoreSpine.toLocal`

***

### unload() [#unload]

\> **unload**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:110

Unloads the GPU data from the view.

#### Returns [#returns-158]

`void`

#### Inherited from [#inherited-from-213]

`CoreSpine.unload`

***

### unloadFromCache() [#unloadfromcache]

\> **unloadFromCache**(): `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:354

Unloads this Spine object's cached SkeletonData.

Existing Spine objects that use this SkeletonData continue to work. Future Spine objects created with the same
skeleton, atlas, and scale will parse a new SkeletonData.

#### Returns [#returns-159]

`boolean`

`true` if the cached SkeletonData was removed, otherwise `false`.

#### Inherited from [#inherited-from-214]

`CoreSpine.unloadFromCache`

***

### update() [#update]

\> **update**(`dt`): `void`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:241

If [Spine.autoUpdate](#autoupdate) is `false`, this method allows to update the AnimationState and the Skeleton with the given delta.

#### Parameters [#parameters-102]

##### dt [#dt]

`number`

#### Returns [#returns-160]

`void`

#### Inherited from [#inherited-from-215]

`CoreSpine.update`

***

### updateLocalTransform() [#updatelocaltransform]

\> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-161]

`void`

#### Inherited from [#inherited-from-216]

`CoreSpine.updateLocalTransform`

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-103]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-162]

`this`

This container, for chaining

#### Example [#example-123]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-46]

* Container#setFromMatrix For matrix-based transforms
* Container#position For direct position access

#### Inherited from [#inherited-from-217]

`CoreSpine.updateTransform`

***

### createOptions() [#createoptions]

\> `static` **createOptions**(`options`): `SpineOptions`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:384

Get a convenient initialization configuration for your Spine game object.
Before instantiating a Spine game object, the skeleton (`.skel` or `.json`) and the atlas text files must be loaded into the Assets. For example:

```
PIXI.Assets.add("sackData", "/assets/sack-pro.skel");
PIXI.Assets.add("sackAtlas", "/assets/sack-pma.atlas");
await PIXI.Assets.load(["sackData", "sackAtlas"]);
```

Once a Spine game object is created, its skeleton data is cached into Cache using the key:
`${skeletonAssetName}-${atlasAssetName}-${options?.scale ?? 1}`

#### Parameters [#parameters-104]

##### options [#options-11]

`SpineFromOptions`

Options to configure the Spine game object. See SpineFromOptions

#### Returns [#returns-163]

`SpineOptions`

The configuration ready to be passed to the Spine constructor

#### Inherited from [#inherited-from-218]

`CoreSpine.createOptions`

***

### ~~from()~~ [#from-1]

\> `static` **from**(`options`): `Spine`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:402

#### Parameters [#parameters-105]

##### options [#options-12]

`SpineFromOptions`

Options to configure the Spine game object. See SpineFromOptions

#### Returns [#returns-164]

`Spine`

The Spine game object instantiated

#### Deprecated [#deprecated-3]

Use directly the Spine constructor or [createOptions](#createoptions) to make options and customize it to pass to the constructor
Use this method to instantiate a Spine game object.
Before instantiating a Spine game object, the skeleton (`.skel` or `.json`) and the atlas text files must be loaded into the Assets. For example:

```
PIXI.Assets.add("sackData", "/assets/sack-pro.skel");
PIXI.Assets.add("sackAtlas", "/assets/sack-pma.atlas");
await PIXI.Assets.load(["sackData", "sackAtlas"]);
```

Once a Spine game object is created, its skeleton data is cached into Cache using the key:
`${skeletonAssetName}-${atlasAssetName}-${options?.scale ?? 1}`

#### Inherited from [#inherited-from-219]

`CoreSpine.from`

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-106]

##### source [#source]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-165]

`void`

#### Deprecated [#deprecated-4]

since 8.8.0

#### Inherited from [#inherited-from-220]

`CoreSpine.mixin`


# Interface: SpineMemory (/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory)



Defined in: [src/interfaces/SpineMemory.ts:64](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineMemory.ts#L64)

## Extends [#extends]

* `MemoryCore`.`CanvasBaseItemMemory`.`ListenerExtensionMemory`.`AdditionalPositionsExtensionProps`.`AnchorExtensionProps`.`Omit`\<[`SpineOptions`](/jsdoc/pixi-vn-spine/index/interfaces/SpineOptions), `"scale"` | `"skin"` | `"animation"`>

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`MemoryCore.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`MemoryCore.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`MemoryCore.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`MemoryCore.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`MemoryCore.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`MemoryCore.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`MemoryCore.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:232

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-7]

`AdditionalPositionsExtensionProps.align`

***

### allowMissingRegions? [#allowmissingregions]

\> `optional` &#x2A;*allowMissingRegions?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:53

Set AtlasAttachmentLoader.allowMissingRegions property on the AtlasAttachmentLoader.

#### Inherited from [#inherited-from-8]

`Omit.allowMissingRegions`

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* Container#visible For toggling visibility
* Container#renderable For render control

#### Inherited from [#inherited-from-9]

`MemoryCore.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/@drincs/pixi-vn/dist/canvas.d.ts:670

#### Inherited from [#inherited-from-10]

`AnchorExtensionProps.anchor`

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-11]

`MemoryCore.angle`

***

### atlas [#atlas]

\> **atlas**: `string`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:39

the asset name for the atlas file previously loaded into the Assets

#### Inherited from [#inherited-from-12]

`Omit.atlas`

***

### autoUpdate? [#autoupdate]

\> `optional` &#x2A;*autoUpdate?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:119

See SpineFromOptions.autoUpdate.

#### Inherited from [#inherited-from-13]

`MemoryCore.autoUpdate`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* Container#alpha For transparency
* Container#tint For color adjustments

#### Inherited from [#inherited-from-14]

`MemoryCore.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-15]

`Omit.boundsArea`

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-16]

`Omit.cacheAsTexture`

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* Container#addChild For adding children
* Container#removeChild For removing children

#### Inherited from [#inherited-from-17]

`Omit.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-18]

`MemoryCore.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-19]

`MemoryCore.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-20]

`Omit.cullArea`

***

### currentSkin? [#currentskin]

\> `optional` &#x2A;*currentSkin?**: `string`

Defined in: [src/interfaces/SpineMemory.ts:72](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineMemory.ts#L72)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-21]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`cursor`](/jsdoc/pixi-vn-spine/index/classes/Spine#cursor)

***

### darkTint? [#darktint]

\> `optional` &#x2A;*darkTint?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:49

If `true`, use the dark tint renderer to render the skeleton
If `false`, use the default pixi renderer to render the skeleton
If `undefined`, use the dark tint renderer if at least one slot has tint black

#### Inherited from [#inherited-from-22]

`Omit.darkTint`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-23]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`eventMode`](/jsdoc/pixi-vn-spine/index/classes/Spine#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-24]

`Omit.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-25]

`MemoryCore.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-26]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`hitArea`](/jsdoc/pixi-vn-spine/index/classes/Spine#hitarea)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:182

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-27]

`CanvasBaseItemMemory.index`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn-spine/index/classes/Spine#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-28]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`interactive`](/jsdoc/pixi-vn-spine/index/classes/Spine#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-29]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`interactiveChildren`](/jsdoc/pixi-vn-spine/index/classes/Spine#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-30]

`MemoryCore.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-31]

`MemoryCore.label`

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`Omit.mask`

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-32]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onclick`](/jsdoc/pixi-vn-spine/index/classes/Spine#onclick)

***

### onEvents? [#onevents]

> `optional` &#x2A;*onEvents?**: `OnEventsHandlers`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:357

#### Inherited from [#inherited-from-33]

`ListenerExtensionMemory.onEvents`

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-34]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobalmousemove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-35]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobalpointermove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-36]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobaltouchmove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmousedown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseenter`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseleave`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmousemove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseout`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseover`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointercancel`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerdown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerenter`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerleave`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointermove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerout`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerover`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointertap`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-55]

`Omit.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightclick`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightdown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontap`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchcancel`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchend`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchendoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchmove`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchstart`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-66]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onwheel`](/jsdoc/pixi-vn-spine/index/classes/Spine#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

```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)
```

#### Inherited from [#inherited-from-67]

`MemoryCore.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* Container#addChild For adding to a parent
* Container#removeChild For removing from parent

#### Inherited from [#inherited-from-68]

`Omit.parent`

***

### parentLabel? [#parentlabel]

> `optional` &#x2A;*parentLabel?**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:186

The label of the parent container, if it has one

#### Inherited from [#inherited-from-69]

`CanvasBaseItemMemory.parentLabel`

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:262

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-70]

`AdditionalPositionsExtensionProps.percentagePosition`

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:272

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-71]

`AdditionalPositionsExtensionProps.percentageX`

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:282

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-72]

`AdditionalPositionsExtensionProps.percentageY`

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-73]

`MemoryCore.pivot`

***

### pixivnId [#pixivnid]

> **pixivnId**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:178

#### Inherited from [#inherited-from-74]

`CanvasBaseItemMemory.pixivnId`

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-75]

`MemoryCore.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* Container#visible For skipping transform updates
* Container#alpha For transparency

#### Inherited from [#inherited-from-76]

`MemoryCore.renderable`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-77]

`MemoryCore.rotation`

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

```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
```

#### Inherited from [#inherited-from-78]

`MemoryCore.scale`

***

### sequenceTimelines [#sequencetimelines]

> **sequenceTimelines**: `object`

Defined in: [src/interfaces/SpineMemory.ts:73](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineMemory.ts#L73)

#### Index Signature [#index-signature]

\[`track`: `number`]: `object`

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-79]

`Omit.setMask`

***

### skeleton [#skeleton]

> **skeleton**: `string`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:37

the asset name for the skeleton `.skel` or `.json` file previously loaded into the Assets

#### Inherited from [#inherited-from-80]

`Omit.skeleton`

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-81]

`MemoryCore.skew`

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-82]

`MemoryCore.sortableChildren`

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-83]

`MemoryCore.sortDirty`

***

### state [#state]

> **state**: `object`

Defined in: [src/interfaces/SpineMemory.ts:71](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineMemory.ts#L71)

#### tracks [#tracks]

> **tracks**: ([`TrackMemory`](/jsdoc/pixi-vn-spine/index/interfaces/TrackMemory) | `null`)\[]

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-84]

`MemoryCore.tabIndex`

***

### ticker? [#ticker]

> `optional` &#x2A;*ticker?**: `Ticker`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:125

See SpineFromOptions.ticker.

#### Inherited from [#inherited-from-85]

`MemoryCore.ticker`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* Container#alpha For transparency
* Container#visible For visibility control

#### Inherited from [#inherited-from-86]

`MemoryCore.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* Container#renderable For render-only control
* Container#alpha For transparency

#### Inherited from [#inherited-from-87]

`MemoryCore.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-88]

`MemoryCore.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-89]

`MemoryCore.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:242

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-90]

`AdditionalPositionsExtensionProps.xAlign`

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-91]

`MemoryCore.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:252

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-92]

`AdditionalPositionsExtensionProps.yAlign`

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn-spine/index/classes/Spine#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-93]

`MemoryCore.zIndex`


# Interface: SpineOptions (/jsdoc/pixi-vn-spine/index/interfaces/SpineOptions)



Defined in: [src/interfaces/SpineOptions.ts:4](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineOptions.ts#L4)

## Extends [#extends]

* `Omit`\<`SpineFromOptions`, `"boundsProvider"` | `"parent"`>.`Omit`\<`ContainerOptions`, `"scale"`>

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`Omit.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`Omit.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`Omit.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`Omit.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`Omit.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`Omit.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`Omit.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:232

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`align`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#align)

***

### allowMissingRegions? [#allowmissingregions]

\> `optional` &#x2A;*allowMissingRegions?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:53

Set AtlasAttachmentLoader.allowMissingRegions property on the AtlasAttachmentLoader.

#### Inherited from [#inherited-from-8]

`Omit.allowMissingRegions`

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* Container#visible For toggling visibility
* Container#renderable For render control

#### Inherited from [#inherited-from-9]

`Omit.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/@drincs/pixi-vn/dist/canvas.d.ts:670

#### Inherited from [#inherited-from-10]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`anchor`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#anchor)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-11]

`Omit.angle`

***

### animation? [#animation]

\> `optional` &#x2A;*animation?**: `string`

Defined in: [src/interfaces/SpineOptions.ts:17](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineOptions.ts#L17)

The name of the animation to play in loop
on track 0 as soon as the skeleton is created, equivalent
to calling [Spine.addAnimation](/jsdoc/pixi-vn-spine/index/classes/Spine#addanimation) right after construction.

***

### atlas [#atlas]

\> **atlas**: `string`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:39

the asset name for the atlas file previously loaded into the Assets

#### Inherited from [#inherited-from-12]

`Omit.atlas`

***

### autoUpdate? [#autoupdate]

\> `optional` &#x2A;*autoUpdate?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:43

Set the [Spine.autoUpdate](/jsdoc/pixi-vn-spine/index/classes/Spine#autoupdate) value. If omitted, it is set to `true`.

#### Inherited from [#inherited-from-13]

`Omit.autoUpdate`

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-8]

```ts
'normal'
```

#### See [#see-1]

* Container#alpha For transparency
* Container#tint For color adjustments

#### Inherited from [#inherited-from-14]

`Omit.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-15]

`Omit.boundsArea`

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-16]

`Omit.cacheAsTexture`

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* Container#addChild For adding children
* Container#removeChild For removing children

#### Inherited from [#inherited-from-17]

`Omit.children`

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-9]

```ts
false
```

#### Inherited from [#inherited-from-18]

`Omit.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-19]

`Omit.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-11]

```ts
null
```

#### Inherited from [#inherited-from-20]

`Omit.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-12]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-21]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`cursor`](/jsdoc/pixi-vn-spine/index/classes/Spine#cursor)

***

### darkTint? [#darktint]

\> `optional` &#x2A;*darkTint?**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:49

If `true`, use the dark tint renderer to render the skeleton
If `false`, use the default pixi renderer to render the skeleton
If `undefined`, use the dark tint renderer if at least one slot has tint black

#### Inherited from [#inherited-from-22]

`Omit.darkTint`

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-23]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`eventMode`](/jsdoc/pixi-vn-spine/index/classes/Spine#eventmode)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-24]

`Omit.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-13]

```ts
0
```

#### Inherited from [#inherited-from-25]

`Omit.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-26]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`hitArea`](/jsdoc/pixi-vn-spine/index/classes/Spine#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn-spine/index/classes/Spine#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-27]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`interactive`](/jsdoc/pixi-vn-spine/index/classes/Spine#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-14]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-28]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`interactiveChildren`](/jsdoc/pixi-vn-spine/index/classes/Spine#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-29]

`Omit.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-30]

`Omit.label`

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`Omit.mask`

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-16]

```ts
null
```

#### Inherited from [#inherited-from-31]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onclick`](/jsdoc/pixi-vn-spine/index/classes/Spine#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-32]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobalmousemove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-33]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobalpointermove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-19]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-34]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onglobaltouchmove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-35]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmousedown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-36]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseenter`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-37]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseleave`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-38]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmousemove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-39]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseout`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseover`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-41]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-42]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onmouseupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-43]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointercancel`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerdown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerenter`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerleave`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointermove`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerout`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerover`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointertap`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onpointerupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-53]

`Omit.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightclick`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightdown`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightup`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onrightupoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontap`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchcancel`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchend`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchendoutside`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-62]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchmove`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`ontouchstart`](/jsdoc/pixi-vn-spine/index/classes/Spine#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`Spine`](/jsdoc/pixi-vn-spine/index/classes/Spine).[`onwheel`](/jsdoc/pixi-vn-spine/index/classes/Spine#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

```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)
```

#### Inherited from [#inherited-from-65]

`Omit.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* Container#addChild For adding to a parent
* Container#removeChild For removing from parent

#### Inherited from [#inherited-from-66]

`Omit.parent`

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:262

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-67]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`percentagePosition`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#percentageposition)

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:272

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-68]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`percentageX`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#percentagex)

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:282

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-69]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`percentageY`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#percentagey)

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-70]

`Omit.pivot`

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-71]

`Omit.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-49]

```ts
true
```

#### See [#see-9]

* Container#visible For skipping transform updates
* Container#alpha For transparency

#### Inherited from [#inherited-from-72]

`Omit.renderable`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-73]

`Omit.rotation`

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:41

The value passed to the skeleton reader. If omitted, 1 is passed. See SkeletonBinary.scale for details.

#### Inherited from [#inherited-from-74]

`Omit.scale`

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-75]

`Omit.setMask`

***

### skeleton [#skeleton]

> **skeleton**: `string`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:37

the asset name for the skeleton `.skel` or `.json` file previously loaded into the Assets

#### Inherited from [#inherited-from-76]

`Omit.skeleton`

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-61]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-50]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-77]

`Omit.skew`

***

### skin? [#skin]

> `optional` &#x2A;*skin?**: `string`

Defined in: [src/interfaces/SpineOptions.ts:11](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineOptions.ts#L11)

The name of the skin to set on the skeleton as soon as it is created, equivalent to calling
[Spine.setSkin](/jsdoc/pixi-vn-spine/index/classes/Spine#setskin) right after construction.

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-62]

```ts
container.sortableChildren = true;
```

#### Default [#default-51]

```ts
false
```

#### Inherited from [#inherited-from-78]

`Omit.sortableChildren`

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-52]

```ts
false
@internal
```

#### Inherited from [#inherited-from-79]

`Omit.sortDirty`

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-53]

```ts
0
```

#### Example [#example-63]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-80]

`Omit.tabIndex`

***

### ticker? [#ticker]

> `optional` &#x2A;*ticker?**: `Ticker`

Defined in: node\_modules/@esotericsoftware/spine-pixi-v8/dist/Spine.d.ts:55

The ticker to use when [autoUpdate](#autoupdate) is `true`. Defaults to Ticker.shared.

#### Inherited from [#inherited-from-81]

`Omit.ticker`

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-64]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-54]

```ts
0xFFFFFF
```

#### See [#see-10]

* Container#alpha For transparency
* Container#visible For visibility control

#### Inherited from [#inherited-from-82]

`Omit.tint`

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-65]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-55]

```ts
true
```

#### See [#see-11]

* Container#renderable For render-only control
* Container#alpha For transparency

#### Inherited from [#inherited-from-83]

`Omit.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-66]

```ts
new Container({ width: 100});
```

#### Default [#default-56]

```ts
0
```

#### Inherited from [#inherited-from-84]

`Omit.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-67]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-85]

`Omit.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:242

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-86]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`xAlign`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#xalign)

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-68]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-87]

`Omit.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:252

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-88]

[`SpineMemory`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory).[`yAlign`](/jsdoc/pixi-vn-spine/index/interfaces/SpineMemory#yalign)

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-69]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn-spine/index/classes/Spine#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-57]

```ts
0
```

#### Inherited from [#inherited-from-89]

`Omit.zIndex`


# Interface: TrackMemory (/jsdoc/pixi-vn-spine/index/interfaces/TrackMemory)



Defined in: [src/interfaces/TrackMemory.ts:3](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/TrackMemory.ts#L3)

## Extends [#extends]

* `Omit`\<`Pick`\<`TrackEntry`, `"loop"` | `"trackIndex"` | `"delay"`>, `"animation"`>

## Properties [#properties]

### animationName [#animationname]

\> **animationName**: `string`

Defined in: [src/interfaces/TrackMemory.ts:5](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/TrackMemory.ts#L5)

***

### delay [#delay]

\> **delay**: `number`

Defined in: node\_modules/@esotericsoftware/spine-core/dist/AnimationState.d.ts:264

Seconds to postpone playing the animation. Must be >= 0. When this track entry is the current track entry,
`delay` postpones incrementing the trackTime. When this track entry is queued, `delay` is
the time from the start of the previous animation to when this track entry will become the current track entry (ie when
the previous track entry trackTime >= this track entry's `delay`).

timeScale affects the delay.

When passing `delay` \<= 0 to AnimationState.addAnimation this
`delay` is set using a mix duration from AnimationStateData. To change the mixDuration
afterward, use setMixDuration so this `delay` is adjusted.

#### Inherited from [#inherited-from]

`Omit.delay`

***

### loop [#loop]

\> **loop**: `boolean`

Defined in: node\_modules/@esotericsoftware/spine-core/dist/AnimationState.d.ts:208

If true, the animation will repeat. If false it will not, instead its last frame is applied if played beyond its
duration.

#### Inherited from [#inherited-from-1]

`Omit.loop`

***

### trackIndex [#trackindex]

\> **trackIndex**: `number`

Defined in: node\_modules/@esotericsoftware/spine-core/dist/AnimationState.d.ts:205

The index of the track where this track entry is either current or queued.

See AnimationState.getTrack.

#### Inherited from [#inherited-from-2]

`Omit.trackIndex`


# Type Alias: SpineSequenceOptions (/jsdoc/pixi-vn-spine/index/type-aliases/SpineSequenceOptions)



\> **SpineSequenceOptions** = `Pick`\<`AnimationOptionsCommon`, `"duration"`> & `object`

Defined in: [src/interfaces/SpineSequenceOptions.ts:3](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/interfaces/SpineSequenceOptions.ts#L3)

## Type Declaration [#type-declaration]

### delay? [#delay]

\> `optional` &#x2A;*delay?**: `number`

Delay in seconds before the animation starts. If not provided, the animation will start immediately after the previous animation on the track, or after the mix duration if there is a previous animation.
If > 0, sets TrackEntry#delay. If \<= 0, the delay set is the duration of the previous track entry
minus any mix duration (from the AnimationStateData) plus the specified `delay` (ie the mix
ends at (`delay` = 0) or before (`delay` \< 0) the previous track entry duration). If the
previous entry is looping, its next loop completion is used instead of its duration.

### loop? [#loop]

\> `optional` &#x2A;*loop?**: `boolean`

Whether the animation should loop. If true, the animation will loop indefinitely until changed.


# Function: createSpineHandler() (/jsdoc/pixi-vn-spine/ink/functions/createSpineHandler)



\> **createSpineHandler**(): `void`

Defined in: [src/ink/spineHandler.ts:109](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/ink/spineHandler.ts#L109)

Registers the `# show spine` Ink hashtag command, letting Ink scripts show a [Spine](/jsdoc/pixi-vn-spine/index/classes/Spine)
canvas element the same way `@drincs/pixi-vn-ink`'s built-in `# show image` shows an
`ImageSprite`: `<alias>` is just the canvas key (like every other `# show ...` command), and
`skeleton`/`atlas` are required among the free-form `<key> <value>` construction props
(forwarded to [SpineOptions](/jsdoc/pixi-vn-spine/index/interfaces/SpineOptions)). An optional entrance transition can run the element in.

Call this once, near the start of your app (alongside e.g. `addBaseHashtagCommands`), before any
Ink content is parsed.

## Returns [#returns]

`void`

## Example [#example]

```ink
# show spine hero skeleton heroSkeleton atlas heroAtlas xAlign 0.5 yAlign 1 with dissolve duration 1
```


# Function: parseShowSpineTail() (/jsdoc/pixi-vn-spine/ink/functions/parseShowSpineTail)



\> **parseShowSpineTail**(`tail`): `object`

Defined in: [src/ink/spineHandler.ts:73](https://github.com/DRincs-Productions/pixi-vn-spine/blob/af3e1a792a130a16ec15e0361177d08e0fa2beaa/src/ink/spineHandler.ts#L73)

Splits the tail (everything after `<alias>`) of a `# show spine` command into its free-form
construction props and an optional entrance transition.

## Parameters [#parameters]

### tail [#tail]

`string`\[]

## Returns [#returns]

`object`

### propsList [#propslist]

\> **propsList**: `string`\[]

### transitionPropsList [#transitionpropslist]

\> **transitionPropsList**: `string`\[]

### transitionType? [#transitiontype]

\> `optional` &#x2A;*transitionType?**: `"dissolve"` | `"fade"` | `"movein"` | `"zoomin"` | `"pushin"`


# Live2D integration for Pixi’VN (/jsdoc/pixi-vn-live2d)



![pixi-vn-cover](https://github.com/user-attachments/assets/5ff318a6-51ac-47a4-a5d2-fac53edc9614)

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-live2d" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn-live2d?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-live2d" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn-live2d" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn-live2d" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn-live2d?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-live2d" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn-live2d" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

`@drincs/pixi-vn-live2d` is a lightweight wrapper around [`untitled-pixi-live2d-engine`](https://github.com/Untitled-Story/untitled-pixi-live2d-engine), designed specifically to integrate **Live2D** models into **Pixi’VN** projects.

The library provides Pixi’VN-friendly abstractions for using Live2D models inside visual novels, making it easier to load, manage, and display Live2D content within the Pixi’VN ecosystem.

## Example [#example]

```ts
import { canvas } from "@drincs/pixi-vn";
import { extensions } from "pixi.js";
import { Live2DPlugin } from "@drincs/pixi-vn-live2d/core";
import { Live2D } from "@drincs/pixi-vn-live2d";

// Register the Live2D render pipe before creating the Pixi'VN canvas application
extensions.add(Live2DPlugin);
Assets.add({ alias: "haru", src: "https://example.com/model/model3.json" });

const live2d = new Live2D({ source: "haru" });
await live2d.ready;
live2d.anchor.set(0.5);
live2d.x = canvas.width / 2;
live2d.y = canvas.height;

live2d.motion("Idle");

canvas.add("live2d", live2d);
```

## Build [#build]

To build the library, run the following command:

```bash
npm run build
```


# @drincs/pixi-vn-live2d (/jsdoc/pixi-vn-live2d/modules)



## Modules [#modules]

* [core](/jsdoc/pixi-vn-live2d/core)
* [index](/jsdoc/pixi-vn-live2d/index)
* [ink](/jsdoc/pixi-vn-live2d/ink)


# index (/jsdoc/pixi-vn-live2d/index)



## Classes [#classes]

* [Live2D](/jsdoc/pixi-vn-live2d/index/classes/Live2D)

## Interfaces [#interfaces]

* [Live2DMemory](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)
* [Live2DOptions](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions)
* [MotionMemory](/jsdoc/pixi-vn-live2d/index/interfaces/MotionMemory)


# ink (/jsdoc/pixi-vn-live2d/ink)



## Functions [#functions]

* [createLive2DHandler](/jsdoc/pixi-vn-live2d/ink/functions/createLive2DHandler)
* [parseShowLive2DTail](/jsdoc/pixi-vn-live2d/ink/functions/parseShowLive2DTail)


# core (/jsdoc/pixi-vn-live2d/core)



## Namespaces [#namespaces]

* [Cubism2Spec](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec)
* [Live2DCubismCore](/jsdoc/pixi-vn-live2d/core/namespaces/Live2DCubismCore)
* [Live2DObfuscated](/jsdoc/pixi-vn-live2d/core/namespaces/Live2DObfuscated)

## Enumerations [#enumerations]

* [EyeState](/jsdoc/pixi-vn-live2d/core/enumerations/EyeState)
* [MotionPreloadStrategy](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPreloadStrategy)
* [MotionPriority](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

## Classes [#classes]

* [CubismExpressionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismExpressionManager)
* [CubismInternalModel](/jsdoc/pixi-vn-live2d/core/classes/CubismInternalModel)
* [CubismLegacyExpressionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyExpressionManager)
* [CubismLegacyInternalModel](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyInternalModel)
* [CubismLegacyModelSettings](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)
* [CubismLegacyMotionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyMotionManager)
* [CubismLegacyParallelMotionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyParallelMotionManager)
* [CubismModelSettings](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)
* [CubismMotionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismMotionManager)
* [CubismParallelMotionManager](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager)
* [ExpressionManager](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager)
* [FileLoader](/jsdoc/pixi-vn-live2d/core/classes/FileLoader)
* [FocusController](/jsdoc/pixi-vn-live2d/core/classes/FocusController)
* [InternalModel](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)
* [Live2DExpression](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)
* [Live2DEyeBlink](/jsdoc/pixi-vn-live2d/core/classes/Live2DEyeBlink)
* [Live2DFactory](/jsdoc/pixi-vn-live2d/core/classes/Live2DFactory)
* [Live2DLoader](/jsdoc/pixi-vn-live2d/core/classes/Live2DLoader)
* [Live2DModel](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel)
* [Live2DPhysics](/jsdoc/pixi-vn-live2d/core/classes/Live2DPhysics)
* [Live2DPose](/jsdoc/pixi-vn-live2d/core/classes/Live2DPose)
* [Live2DTransform](/jsdoc/pixi-vn-live2d/core/classes/Live2DTransform)
* [ModelSettings](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)
* [MotionManager](/jsdoc/pixi-vn-live2d/core/classes/MotionManager)
* [MotionState](/jsdoc/pixi-vn-live2d/core/classes/MotionState)
* [SoundManager](/jsdoc/pixi-vn-live2d/core/classes/SoundManager)
* [XHRLoader](/jsdoc/pixi-vn-live2d/core/classes/XHRLoader)

## Interfaces [#interfaces]

* [AutomatorOptions](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions)
* [Bounds](/jsdoc/pixi-vn-live2d/core/interfaces/Bounds)
* [CommonHitArea](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)
* [CommonLayout](/jsdoc/pixi-vn-live2d/core/interfaces/CommonLayout)
* [CreateTextureOptions](/jsdoc/pixi-vn-live2d/core/interfaces/CreateTextureOptions)
* [csmMotionSegmentEvaluationFunction](/jsdoc/pixi-vn-live2d/core/interfaces/csmMotionSegmentEvaluationFunction)
* [CubismConfig](/jsdoc/pixi-vn-live2d/core/interfaces/CubismConfig)
* [CubismMotionEventFunction](/jsdoc/pixi-vn-live2d/core/interfaces/CubismMotionEventFunction)
* [Expression](/jsdoc/pixi-vn-live2d/core/interfaces/Expression)
* [ExpressionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)
* [FileReferences](/jsdoc/pixi-vn-live2d/core/interfaces/FileReferences)
* [Group](/jsdoc/pixi-vn-live2d/core/interfaces/Group)
* [HitArea](/jsdoc/pixi-vn-live2d/core/interfaces/HitArea)
* [ICubismClippingManager](/jsdoc/pixi-vn-live2d/core/interfaces/ICubismClippingManager)
* [InternalModelEvents](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelEvents)
* [InternalModelOptions](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions)
* [Live2DFactoryContext](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryContext)
* [Live2DFactoryOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions)
* [Live2DLoaderContext](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DLoaderContext)
* [Live2DModelEvents](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelEvents)
* [Live2DModelOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelOptions)
* [Live2DMotion](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DMotion)
* [Live2DRuntime](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DRuntime)
* [Live2DTextureLODOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureLODOptions)
* [Live2DTextureSourceOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureSourceOptions)
* [ModelJSON](/jsdoc/pixi-vn-live2d/core/interfaces/ModelJSON)
* [Motion](/jsdoc/pixi-vn-live2d/core/interfaces/Motion)
* [MotionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents)
* [MotionManagerOptions](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)
* [MotionStartOptions](/jsdoc/pixi-vn-live2d/core/interfaces/MotionStartOptions)
* [normalizedPhysicsParameterValueGetter](/jsdoc/pixi-vn-live2d/core/interfaces/normalizedPhysicsParameterValueGetter)
* [ParallelMotionStartOptions](/jsdoc/pixi-vn-live2d/core/interfaces/ParallelMotionStartOptions)
* [parseJsonObject](/jsdoc/pixi-vn-live2d/core/interfaces/parseJsonObject)
* [physicsScaleGetter](/jsdoc/pixi-vn-live2d/core/interfaces/physicsScaleGetter)
* [physicsValueGetter](/jsdoc/pixi-vn-live2d/core/interfaces/physicsValueGetter)
* [TextureLODPlan](/jsdoc/pixi-vn-live2d/core/interfaces/TextureLODPlan)
* [TextureLODPlanInput](/jsdoc/pixi-vn-live2d/core/interfaces/TextureLODPlanInput)

## Type Aliases [#type-aliases]

* [BeganMotionCallback](/jsdoc/pixi-vn-live2d/core/type-aliases/BeganMotionCallback)
* [ClippingContextConstructor](/jsdoc/pixi-vn-live2d/core/type-aliases/ClippingContextConstructor)
* [CubismIdHandle](/jsdoc/pixi-vn-live2d/core/type-aliases/CubismIdHandle)
* [CubismModelSettingJsonMixin](/jsdoc/pixi-vn-live2d/core/type-aliases/CubismModelSettingJsonMixin)
* [CubismMotionQueueEntryHandle](/jsdoc/pixi-vn-live2d/core/type-aliases/CubismMotionQueueEntryHandle)
* [ExtendedFileList](/jsdoc/pixi-vn-live2d/core/type-aliases/ExtendedFileList)
* [FinishedMotionCallback](/jsdoc/pixi-vn-live2d/core/type-aliases/FinishedMotionCallback)
* [JSONObject](/jsdoc/pixi-vn-live2d/core/type-aliases/JSONObject)
* [Live2DConstructor](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DConstructor)
* [Live2DInstruction](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DInstruction)
* [Live2DLoaderTarget](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DLoaderTarget)
* [Live2DPrepareInstruction](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DPrepareInstruction)
* [Live2DTextureLODFilter](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DTextureLODFilter)
* [Live2DTextureLODMode](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DTextureLODMode)
* [Middleware](/jsdoc/pixi-vn-live2d/core/type-aliases/Middleware)
* [MotionStartRandomOptions](/jsdoc/pixi-vn-live2d/core/type-aliases/MotionStartRandomOptions)
* [Mutable](/jsdoc/pixi-vn-live2d/core/type-aliases/Mutable)
* [ParallelMotionStartRandomOptions](/jsdoc/pixi-vn-live2d/core/type-aliases/ParallelMotionStartRandomOptions)

## Variables [#variables]

* [config](/jsdoc/pixi-vn-live2d/core/variables/config)
* [Live2DPlugin](/jsdoc/pixi-vn-live2d/core/variables/Live2DPlugin)
* [logger](/jsdoc/pixi-vn-live2d/core/variables/logger)
* [LOGICAL\_HEIGHT](/jsdoc/pixi-vn-live2d/core/variables/LOGICAL_HEIGHT)
* [LOGICAL\_WIDTH](/jsdoc/pixi-vn-live2d/core/variables/LOGICAL_WIDTH)
* [VERSION](/jsdoc/pixi-vn-live2d/core/variables/VERSION)
* [VOLUME](/jsdoc/pixi-vn-live2d/core/variables/VOLUME)

## Functions [#functions]

* [applyMixins](/jsdoc/pixi-vn-live2d/core/functions/applyMixins)
* [clamp](/jsdoc/pixi-vn-live2d/core/functions/clamp)
* [configureCubismSDK](/jsdoc/pixi-vn-live2d/core/functions/configureCubismSDK)
* [copyArray](/jsdoc/pixi-vn-live2d/core/functions/copyArray)
* [copyProperty](/jsdoc/pixi-vn-live2d/core/functions/copyProperty)
* [cubismReady](/jsdoc/pixi-vn-live2d/core/functions/cubismReady)
* [folderName](/jsdoc/pixi-vn-live2d/core/functions/folderName)
* [MBToByte](/jsdoc/pixi-vn-live2d/core/functions/MBToByte)
* [normalizeHitAreaDefs](/jsdoc/pixi-vn-live2d/core/functions/normalizeHitAreaDefs)
* [rand](/jsdoc/pixi-vn-live2d/core/functions/rand)
* [reconfigureCubismSDK](/jsdoc/pixi-vn-live2d/core/functions/reconfigureCubismSDK)
* [remove](/jsdoc/pixi-vn-live2d/core/functions/remove)
* [resolveURL](/jsdoc/pixi-vn-live2d/core/functions/resolveURL)
* [startUpCubism](/jsdoc/pixi-vn-live2d/core/functions/startUpCubism)


# Class: Live2D (/jsdoc/pixi-vn-live2d/index/classes/Live2D)



Defined in: [src/components/Live2D.ts:63](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L63)

Live2D component for Pixi.js, used to display Live2D components.

## Example [#example]

```ts
import { Assets, canvas } from "@drincs/pixi-vn";
import { Live2D } from "@drincs/pixi-vn-live2d";

// Register an alias so the source can be swapped from a single place
// (and so it can be reloaded from memory even if the URL changes later).
Assets.add({ alias: "haru", src: "https://example.com/model/model3.json" });

const live2d = new Live2D({ source: "haru", align: { x: 0.5, y: 1 } });
await live2d.ready;

live2d.motion("Idle");

canvas.add("live2d", live2d);
```

## Extends [#extends]

* [`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel)

## Implements [#implements]

* `CanvasBaseItem`\<[`Live2DMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)>
* `ListenerExtension`
* `AdditionalPositionsExtension`

## Constructors [#constructors]

### Constructor [#constructor]

\> **new Live2D**(`options`): `Live2D`

Defined in: [src/components/Live2D.ts:67](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L67)

#### Parameters [#parameters]

##### options [#options]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions)

#### Returns [#returns]

`Live2D`

#### Overrides [#overrides]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#constructor)

## Properties [#properties]

### \_\_devtoolIgnore? [#__devtoolignore]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnore?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:35

#### Inherited from [#inherited-from]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`__devtoolIgnore`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#__devtoolignore)

***

### \_\_devtoolIgnoreChildren? [#__devtoolignorechildren]

\> `optional&#x60; &#x2A;*\_\_devtoolIgnoreChildren?**: `string`

Defined in: node\_modules/@pixi/devtools/global.d.ts:36

#### Inherited from [#inherited-from-1]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`__devtoolIgnoreChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#__devtoolignorechildren)

***

### \_\_devtoolLocked? [#__devtoollocked]

\> `optional&#x60; &#x2A;*\_\_devtoolLocked?**: `boolean`

Defined in: node\_modules/@pixi/devtools/global.d.ts:37

#### Inherited from [#inherited-from-2]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`__devtoolLocked`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#__devtoollocked)

***

### \_cx [#_cx]

\> **\_cx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:751

**`Internal`**

The X-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-3]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_cx`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_cx)

***

### \_cy [#_cy]

\> **\_cy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:763

**`Internal`**

The X-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-4]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_cy`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_cy)

***

### \_pivot [#_pivot]

\> **\_pivot**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:734

**`Internal`**

The pivot point of the container that it rotates around.

#### Inherited from [#inherited-from-5]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_pivot`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_pivot)

***

### \_position [#_position]

\> **\_position**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:724

**`Internal`**

The coordinate of the object relative to the local coordinates of the parent.

#### Inherited from [#inherited-from-6]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_position`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_position)

***

### \_scale [#_scale]

\> **\_scale**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:729

**`Internal`**

The scale factor of the object.

#### Inherited from [#inherited-from-7]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_scale`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_scale)

***

### \_skew [#_skew]

\> **\_skew**: `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:745

**`Internal`**

The skew amount, on the x and y axis.

#### Inherited from [#inherited-from-8]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_skew`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_skew)

***

### \_sx [#_sx]

\> **\_sx**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:757

**`Internal`**

The Y-coordinate value of the normalized local X axis,
the first column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-9]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_sx`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_sx)

***

### \_sy [#_sy]

\> **\_sy**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:769

**`Internal`**

The Y-coordinate value of the normalized local Y axis,
the second column of the local transformation matrix without a scale.

#### Inherited from [#inherited-from-10]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_sy`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_sy)

***

### \_zIndex [#_zindex]

\> **\_zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:60

**`Internal`**

#### Inherited from [#inherited-from-11]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_zIndex`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_zindex)

***

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from-12]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessible`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessible)

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-13]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessibleChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessiblechildren)

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-14]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessibleHint`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessiblehint)

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-15]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessiblePointerEvents`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessiblepointerevents)

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-16]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessibleText`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessibletext)

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-17]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessibleTitle`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessibletitle)

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-7]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-18]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`accessibleType`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#accessibletype)

***

### allowChildren [#allowchildren]

\> **allowChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:10

**`Internal`**

#### Inherited from [#inherited-from-19]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`allowChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#allowchildren)

***

### anchor [#anchor]

\> **anchor**: `ObservablePoint`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4423

The anchor behaves like the one in `PIXI.Sprite`, where `(0, 0)` means the top left
and `(1, 1)` means the bottom right.

#### Inherited from [#inherited-from-20]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`anchor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#anchor)

***

### anchorMode [#anchormode]

\> `readonly` **anchorMode**: `NonNullable`\<`"canvas"` | `"drawable"` | `undefined`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4411

#### Inherited from [#inherited-from-21]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`anchorMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#anchormode)

***

### automator [#automator]

\> **automator**: `Automator`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4459

The Automator instance that controls model automation.

#### Inherited from [#inherited-from-22]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`automator`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#automator)

***

### boundsArea [#boundsarea]

\> **boundsArea**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:815

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-8]

```ts
const container = new Container();
container.boundsArea = new Rectangle(0, 0, 500, 500);
```

#### Inherited from [#inherited-from-23]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`boundsArea`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#boundsarea)

***

### ~~cacheAsBitmap~~ [#cacheasbitmap]

\> **cacheAsBitmap**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:61

Legacy property for backwards compatibility with PixiJS v7 and below.
Use `cacheAsTexture` instead.

#### Deprecated [#deprecated]

since 8.0.0

#### Inherited from [#inherited-from-24]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cacheAsBitmap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cacheasbitmap)

***

### cacheAsTexture [#cacheastexture]

\> **cacheAsTexture**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:45

Caches this container as a texture. This allows the container to be rendered as a single texture,
which can improve performance for complex static containers.

#### Parameters [#parameters-1]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

If true, enables caching with default options.
If false, disables caching.
Can also pass options object to configure caching behavior.

#### Returns [#returns-1]

`void`

#### Example [#example-9]

```ts
// Basic caching
container.cacheAsTexture(true);

// With custom options
container.cacheAsTexture({
    resolution: 2,
    antialias: true,
});

// Disable caching
container.cacheAsTexture(false);

// Cache a complex UI
const ui = new Container();
// Add multiple children...
ui.cacheAsTexture(true);
ui.updateCacheTexture(); // Update if contents change
```

#### See [#see]

* Container#updateCacheTexture For updating cached content
* [Container#isCachedAsTexture](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#iscachedastexture) For checking cache state

#### Inherited from [#inherited-from-25]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cacheAsTexture`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cacheastexture)

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:639

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-10]

```ts
// Access children
const firstChild = container.children[0];
const lastChild = container.children[container.children.length - 1];
```

#### See [#see-1]

* Container#addChild For adding children
* Container#removeChild For removing children

#### Inherited from [#inherited-from-26]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`children`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#children)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-11]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-7]

```ts
false
```

#### Inherited from [#inherited-from-27]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cullable`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cullable)

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-12]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-8]

```ts
true
```

#### Inherited from [#inherited-from-28]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cullableChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cullablechildren)

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-13]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-9]

```ts
null
```

#### Inherited from [#inherited-from-29]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cullArea`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cullarea)

***

### currentGlId [#currentglid]

\> **currentGlId**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4460

#### Inherited from [#inherited-from-30]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`currentGlId`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#currentglid)

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-14]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-10]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-31]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cursor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cursor)

***

### deltaTime [#deltatime]

\> **deltaTime**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4454

Elapsed time in milliseconds from last frame to this frame.

#### Inherited from [#inherited-from-32]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`deltaTime`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#deltatime)

***

### depthOfChildModified [#depthofchildmodified]

\> **depthOfChildModified**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:74

**`Internal`**

#### Returns [#returns-2]

`void`

#### Inherited from [#inherited-from-33]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`depthOfChildModified`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#depthofchildmodified)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:719

Whether this object has been destroyed. If true, the object should no longer be used.
After an object is destroyed, all of its functionality is disabled and references are removed.

#### Example [#example-15]

```ts
// Cleanup with destroy
sprite.destroy();
console.log(sprite.destroyed); // true
```

#### Default [#default-11]

```ts
false
```

#### See [#see-3]

Container#destroy For destroying objects

#### Inherited from [#inherited-from-34]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#destroyed)

***

### effects? [#effects]

\> `optional` &#x2A;*effects?**: `Effect`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:183

todo Needs docs

#### Advanced [#advanced-3]

#### Inherited from [#inherited-from-35]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`effects`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#effects)

***

### elapsedTime [#elapsedtime]

\> **elapsedTime**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4449

Elapsed time in milliseconds since created.

#### Inherited from [#inherited-from-36]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`elapsedTime`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#elapsedtime)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-37]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`eventMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

***

### filterArea? [#filterarea]

\> `optional` &#x2A;*filterArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:178

The area the filter is applied to. This is used as an optimization to define a specific region
for filter effects instead of calculating the display object bounds each frame.

\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for filter effects,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-17]

```ts
// Set specific filter area
container.filterArea = new Rectangle(0, 0, 100, 100);

// Optimize filter region
const screen = app.screen;
container.filterArea = new Rectangle(
    screen.x,
    screen.y,
    screen.width,
    screen.height
);
```

#### See [#see-4]

* Container#filters For applying filters
* Rectangle For area definition

#### Inherited from [#inherited-from-38]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`filterArea`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#filterarea)

***

### gl [#gl]

\> `protected` **gl**: `WebGL2RenderingContext` | `null`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4444

An ID of Gl context that syncs with `renderer.CONTEXT_UID`. Used to check if the GL context has changed.

#### Inherited from [#inherited-from-39]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`gl`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#gl)

***

### globalDisplayStatus [#globaldisplaystatus]

\> **globalDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:798

**`Internal`**

#### Inherited from [#inherited-from-40]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`globalDisplayStatus`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#globaldisplaystatus)

***

### groupAlpha [#groupalpha]

\> **groupAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:780

**`Internal`**

#### Inherited from [#inherited-from-41]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`groupAlpha`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#groupalpha)

***

### groupBlendMode [#groupblendmode]

\> **groupBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:788

**`Internal`**

#### Inherited from [#inherited-from-42]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`groupBlendMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#groupblendmode)

***

### groupColor [#groupcolor]

\> **groupColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:782

**`Internal`**

#### Inherited from [#inherited-from-43]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`groupColor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#groupcolor)

***

### groupColorAlpha [#groupcoloralpha]

\> **groupColorAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:784

**`Internal`**

#### Inherited from [#inherited-from-44]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`groupColorAlpha`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#groupcoloralpha)

***

### groupTransform [#grouptransform]

\> `readonly` **groupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:705

The group transform is a transform relative to the render group it belongs too.
If this container is render group then this will be an identity matrix. other wise it
will be the same as the relativeGroupTransform.
Use this value when actually rendering things to the screen

#### Advanced [#advanced-4]

#### Inherited from [#inherited-from-45]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`groupTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#grouptransform)

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-18]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-46]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`hitArea`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#hitarea)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

#### Example [#example-19]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-47]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactive`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-12]

```ts
true
```

#### Example [#example-20]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-48]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactiveChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactivechildren)

***

### internalModel [#internalmodel]

\> **internalModel**: [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4404

The internal model. Though typed as non-nullable, it'll be undefined until the "ready" event is emitted.

#### Inherited from [#inherited-from-49]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`internalModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#internalmodel)

***

### isCachedAsTexture [#iscachedastexture]

\> `readonly` **isCachedAsTexture**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:75

Whether this container is currently cached as a texture.

#### Example [#example-21]

```ts
// Check cache state
if (container.isCachedAsTexture) {
    console.log('Container is cached');
}
```

#### See [#see-6]

* Container#cacheAsTexture For enabling caching
* Container#updateCacheTexture For updating cache

#### Inherited from [#inherited-from-50]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`isCachedAsTexture`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#iscachedastexture)

***

### isInteractive [#isinteractive]

\> **isInteractive**: () => `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1040

Determines if the container is interactive or not

#### Returns [#returns-3]

`boolean`

Whether the container is interactive or not

#### Since [#since-1]

7.2.0

#### Example [#example-22]

```ts
import { Sprite } from 'pixi.js';

const sprite = new Sprite(texture);
sprite.eventMode = 'static';
sprite.isInteractive(); // true

sprite.eventMode = 'dynamic';
sprite.isInteractive(); // true

sprite.eventMode = 'none';
sprite.isInteractive(); // false

sprite.eventMode = 'passive';
sprite.isInteractive(); // false

sprite.eventMode = 'auto';
sprite.isInteractive(); // false
```

#### Inherited from [#inherited-from-51]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`isInteractive`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#isinteractive)

***

### label [#label]

\> **label**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-13]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`label`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#label)

***

### layerParentId [#layerparentid]

\> **layerParentId**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:829

**`Internal`**

#### Inherited from [#inherited-from-53]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`layerParentId`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#layerparentid)

***

### localAlpha [#localalpha]

\> **localAlpha**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:778

**`Internal`**

#### Inherited from [#inherited-from-54]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`localAlpha`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localalpha)

***

### localBlendMode [#localblendmode]

\> **localBlendMode**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:786

**`Internal`**

#### Inherited from [#inherited-from-55]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`localBlendMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localblendmode)

***

### localColor [#localcolor]

\> **localColor**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:776

**`Internal`**

#### Inherited from [#inherited-from-56]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`localColor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localcolor)

***

### localDisplayStatus [#localdisplaystatus]

\> **localDisplayStatus**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:796

**`Internal`**

This property holds three bits: culled, visible, renderable
the third bit represents culling (0 = culled, 1 = not culled) 0b100
the second bit represents visibility (0 = not visible, 1 = visible) 0b010
the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001

#### Inherited from [#inherited-from-57]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`localDisplayStatus`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localdisplaystatus)

***

### localTransform [#localtransform]

\> `readonly` **localTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:688

Current transform of the object based on local factors: position, scale, other stuff.
This matrix represents the local transformation without any parent influence.

#### Example [#example-23]

```ts
// Basic transform access
const localMatrix = sprite.localTransform;
console.log(localMatrix.toString());
```

#### See [#see-7]

* [Container#worldTransform](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#worldtransform) For global transform
* [Container#groupTransform](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#grouptransform) For render group transform

#### Inherited from [#inherited-from-58]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`localTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localtransform)

***

### mask [#mask]

\> **mask**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:254

Sets a mask for the displayObject. A mask is an object that limits the visibility of an
object to the shape of the mask applied to it.

\> \[!IMPORTANT] In PixiJS a regular mask must be a Graphics or a Sprite object.
\> This allows for much faster masking in canvas as it uses shape clipping.
\> A mask of an object must be in the subtree of its parent.
\> Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.

Sprite masks read the red channel by default. Use [Container#setMask](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setmask) with `channel: 'alpha'`
to read the alpha channel instead. See MaskOptions#channel for details.

#### Example [#example-24]

```ts
// Apply mask to sprite
const sprite = new Sprite(texture);
sprite.mask = graphics;

// Remove mask
sprite.mask = null;
```

#### See [#see-8]

* Graphics For creating mask shapes
* Sprite For texture-based masks
* [Container#setMask](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setmask) For advanced mask options including channel selection

#### Inherited from [#inherited-from-59]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`mask`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#mask)

***

### ~~name~~ [#name]

\> **name**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:24

The instance name of the object.

#### Deprecated [#deprecated-1]

since 8.0.0

#### See [#see-9]

Container#label

#### Default [#default-14]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`name`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#name)

***

### onclick? [#onclick]

\> `optional` &#x2A;*onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) => {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) => {
    console.log('Clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-15]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onclick`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onclick)

***

### onEventsHandlers [#oneventshandlers]

\> `readonly` **onEventsHandlers**: `OnEventsHandlers` = `{}`

Defined in: [src/components/Live2D.ts:315](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L315)

ListenerExtension

#### Implementation of [#implementation-of]

`ListenerExtension.onEventsHandlers`

***

### onglobalmousemove? [#onglobalmousemove]

\> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) => {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-16]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-62]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobalmousemove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

\> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-17]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-63]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobalpointermove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

\> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-18]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-64]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobaltouchmove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

\> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) => {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) => {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-19]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmousedown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmousedown)

***

### onmouseenter? [#onmouseenter]

\> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) => {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-66]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseenter`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseenter)

***

### onmouseleave? [#onmouseleave]

\> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-21]

```ts
null
```

#### Inherited from [#inherited-from-67]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseleave`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseleave)

***

### onmousemove? [#onmousemove]

\> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) => {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) => {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-22]

```ts
null
```

#### Inherited from [#inherited-from-68]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmousemove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmousemove)

***

### onmouseout? [#onmouseout]

\> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-23]

```ts
null
```

#### Inherited from [#inherited-from-69]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseout`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseout)

***

### onmouseover? [#onmouseover]

\> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) => {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) => {
    sprite.scale.set(1.1);
};
```

#### Default [#default-24]

```ts
null
```

#### Inherited from [#inherited-from-70]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseover`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseover)

***

### onmouseup? [#onmouseup]

\> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) => {
     sprite.scale.set(1.0);
};
```

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-71]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

\> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-72]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

\> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-27]

```ts
null
```

#### Inherited from [#inherited-from-73]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointercancel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointercancel)

***

### onpointerdown? [#onpointerdown]

\> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-28]

```ts
null
```

#### Inherited from [#inherited-from-74]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerdown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerdown)

***

### onpointerenter? [#onpointerenter]

\> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-75]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerenter`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerenter)

***

### onpointerleave? [#onpointerleave]

\> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-30]

```ts
null
```

#### Inherited from [#inherited-from-76]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerleave`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerleave)

***

### onpointermove? [#onpointermove]

\> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Inherited from [#inherited-from-77]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointermove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointermove)

***

### onpointerout? [#onpointerout]

\> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) => {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-32]

```ts
null
```

#### Inherited from [#inherited-from-78]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerout`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerout)

***

### onpointerover? [#onpointerover]

\> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) => {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) => {
    sprite.scale.set(1.2);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-79]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerover`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerover)

***

### onpointertap? [#onpointertap]

\> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-44]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-80]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointertap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointertap)

***

### onpointerup? [#onpointerup]

\> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-45]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-81]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

\> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-82]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerupoutside)

***

### onRender [#onrender]

\> **onRender**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

\> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
\> and "updateTransform" is no longer called every frame

#### Example [#example-47]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () => {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-10]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-83]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onRender`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrender)

***

### onrightclick? [#onrightclick]

\> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) => {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-84]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightclick`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightclick)

***

### onrightdown? [#onrightdown]

\> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) => {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) => {
    sprite.scale.set(0.9);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-85]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightdown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightdown)

***

### onrightup? [#onrightup]

\> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-86]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightup)

***

### onrightupoutside? [#onrightupoutside]

\> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-87]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightupoutside)

***

### ontap? [#ontap]

\> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) => {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-88]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontap)

***

### ontouchcancel? [#ontouchcancel]

\> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) => {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-89]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchcancel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchcancel)

***

### ontouchend? [#ontouchend]

\> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) => {
   sprite.scale.set(1.0);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-90]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchend`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

\> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) => {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) => {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-91]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchendoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

\> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-56]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) => {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) => {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-92]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchmove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchmove)

***

### ontouchstart? [#ontouchstart]

\> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-57]

```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);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-93]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchstart`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchstart)

***

### onwheel? [#onwheel]

\> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-58]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) => {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-94]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onwheel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onwheel)

***

### parent [#parent]

\> `readonly` **parent**: `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:659

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### Example [#example-59]

```ts
// Basic parent access
const parent = sprite.parent;

// Walk up the tree
let current = sprite;
while (current.parent) {
    console.log('Level up:', current.parent.constructor.name);
    current = current.parent;
}
```

#### See [#see-11]

* Container#addChild For adding to a parent
* Container#removeChild For removing from parent

#### Inherited from [#inherited-from-95]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`parent`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#parent)

***

### parentRenderLayer [#parentrenderlayer]

\> `readonly` **parentRenderLayer**: `RenderLayer` | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:672

The RenderLayer this container belongs to, if any.
If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

#### Advanced [#advanced-5]

#### Inherited from [#inherited-from-96]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`parentRenderLayer`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#parentrenderlayer)

***

### pixivnId [#pixivnid]

\> `readonly` **pixivnId**: `string` = `CANVAS_LIVE2D_ID`

Defined in: [src/components/Live2D.ts:144](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L144)

Get the id of the canvas element. This variable is used in the system to get the canvas element by id

#### Implementation of [#implementation-of-1]

`CanvasBaseItem.pixivnId`

***

### relativeGroupTransform [#relativegrouptransform]

\> `readonly` **relativeGroupTransform**: `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:696

The relative group transform is a transform relative to the render group it belongs too. It will include all parent
transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
If this container is is self a render group matrix will be relative to its parent render group

#### Advanced [#advanced-6]

#### Inherited from [#inherited-from-97]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`relativeGroupTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#relativegrouptransform)

***

### renderLive2D [#renderlive2d]

\> **renderLive2D**: (`renderer`) => `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4633

Renders the Live2DModel to the renderer.

#### Parameters [#parameters-2]

##### renderer [#renderer]

`Renderer`

The PixiJS Renderer instance.

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-98]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`renderLive2D`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#renderlive2d)

***

### renderPipeId [#renderpipeid]

\> **renderPipeId**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4354

**`Internal`**

#### Inherited from [#inherited-from-99]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`renderPipeId`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#renderpipeid)

***

### sortableChildren [#sortablechildren]

\> **sortableChildren**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-60]

```ts
container.sortableChildren = true;
```

#### Default [#default-48]

```ts
false
```

#### Inherited from [#inherited-from-100]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`sortableChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortablechildren)

***

### sortChildren [#sortchildren]

\> **sortChildren**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:72

Sorts children by zIndex value. Only sorts if container is marked as dirty.

#### Returns [#returns-5]

`void`

#### Example [#example-61]

```ts
// Basic sorting
particles.zIndex = 2;     // Will mark as dirty
container.sortChildren();
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortablechildren) For enabling automatic sorting
* [Container#zIndex](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#zindex) For setting child order

#### Inherited from [#inherited-from-101]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`sortChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortchildren)

***

### sortDirty [#sortdirty]

\> **sortDirty**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-49]

```ts
false
@internal
```

#### Inherited from [#inherited-from-102]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`sortDirty`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortdirty)

***

### sourceAlias [#sourcealias]

\> `readonly` **sourceAlias**: `string`

Defined in: [src/components/Live2D.ts:148](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L148)

The model source used to load this instance.

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-50]

```ts
0
```

#### Example [#example-62]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-103]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`tabIndex`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tabindex)

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4400

Tag for logging.

#### Inherited from [#inherited-from-104]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tag)

***

### textures [#textures]

\> **textures**: `Texture`\<`TextureSource`\<`any`>>\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4409

Pixi textures.

#### Inherited from [#inherited-from-105]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`textures`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#textures)

***

### transform [#transform]

\> **transform**: [`Live2DTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DTransform)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4417

The Live2DTransform instance for this model.

#### Inherited from [#inherited-from-106]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`transform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#transform)

***

### uid [#uid]

\> `readonly` **uid**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:610

**`Internal`**

unique id for this container

#### Inherited from [#inherited-from-107]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`uid`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#uid)

***

### updateCacheTexture [#updatecachetexture]

\> **updateCacheTexture**: () => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:55

Updates the cached texture of this container. This will flag the container's cached texture
to be redrawn on the next render.

#### Returns [#returns-6]

`void`

#### Example [#example-63]

```ts
// Basic update after changes
container.updateCacheTexture();
```

#### Inherited from [#inherited-from-108]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`updateCacheTexture`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#updatecachetexture)

***

### updateTick [#updatetick]

\> **updateTick**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:674

**`Internal`**

#### Inherited from [#inherited-from-109]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`updateTick`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#updatetick)

***

### zIndex [#zindex]

\> **zIndex**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-64]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-13]

* [Container#sortableChildren](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-51]

```ts
0
```

#### Inherited from [#inherited-from-110]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`zIndex`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#zindex)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-111]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#prefixed)

## Accessors [#accessors]

### align [#align]

#### Get Signature [#get-signature]

\> **get** **align**(): `number` | `Partial`\<`PointData`>

Defined in: [src/components/Live2D.ts:355](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L355)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-7]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature]

\> **set** **align**(`value`): `void`

Defined in: [src/components/Live2D.ts:343](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L343)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-3]

###### value [#value]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-8]

`void`

#### Implementation of [#implementation-of-2]

`AdditionalPositionsExtension.align`

***

### alpha [#alpha]

#### Get Signature [#get-signature-1]

\> **get** **alpha**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1246

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

##### Example [#example-65]

```ts
// Basic transparency
sprite.alpha = 0.5; // 50% opacity

// Inherited opacity
container.alpha = 0.5;
const child = new Sprite(texture);
child.alpha = 0.5;
container.addChild(child);
// child's effective opacity is 0.25 (0.5 * 0.5)
```

##### Default [#default-52]

```ts
1
```

##### See [#see-14]

* Container#visible For toggling visibility
* Container#renderable For render control

##### Returns [#returns-9]

`number`

#### Set Signature [#set-signature-1]

\> **set** **alpha**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1226

##### Parameters [#parameters-4]

###### value [#value-1]

`number`

##### Returns [#returns-10]

`void`

#### Inherited from [#inherited-from-112]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`alpha`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#alpha)

***

### angle [#angle]

#### Get Signature [#get-signature-2]

\> **get** **angle**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1008

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-66]

```ts
// Basic angle rotation
sprite.angle = 45; // 45 degrees

// Rotate around center
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Rotate around center with origin
sprite.origin.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 180; // Half rotation

// Reset rotation
sprite.angle = 0;
```

##### Returns [#returns-11]

`number`

#### Set Signature [#set-signature-2]

\> **set** **angle**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1009

##### Parameters [#parameters-5]

###### value [#value-2]

`number`

##### Returns [#returns-12]

`void`

#### Inherited from [#inherited-from-113]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`angle`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#angle)

***

### blendMode [#blendmode]

#### Get Signature [#get-signature-3]

\> **get** **blendMode**(): `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1289

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

##### Example [#example-67]

```ts
// Basic blend modes
sprite.blendMode = 'add';        // Additive blending
sprite.blendMode = 'multiply';   // Multiply colors
sprite.blendMode = 'screen';     // Screen blend

// Reset blend mode
sprite.blendMode = 'normal';     // Normal blending
```

##### Default [#default-53]

```ts
'normal'
```

##### See [#see-15]

* Container#alpha For transparency
* Container#tint For color adjustments

##### Returns [#returns-13]

`BLEND_MODES`

#### Set Signature [#set-signature-3]

\> **set** **blendMode**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1269

##### Parameters [#parameters-6]

###### value [#value-3]

`BLEND_MODES`

##### Returns [#returns-14]

`void`

#### Inherited from [#inherited-from-114]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`blendMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#blendmode)

***

### bounds [#bounds]

#### Get Signature [#get-signature-4]

\> **get** **bounds**(): `Bounds`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4431

**`Internal`**

##### Returns [#returns-15]

`Bounds`

#### Inherited from [#inherited-from-115]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`bounds`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#bounds)

***

### canBundle [#canbundle]

#### Get Signature [#get-signature-5]

\> **get** **canBundle**(): `false`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4358

**`Internal`**

##### Returns [#returns-16]

`false`

#### Inherited from [#inherited-from-116]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`canBundle`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#canbundle)

***

### filters [#filters]

#### Get Signature [#get-signature-6]

\> **get** **filters**(): readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-68]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

##### See [#see-16]

Filter For filter base class

##### Returns [#returns-17]

readonly `Filter`\[]

#### Set Signature [#set-signature-4]

\> **set** **filters**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

##### Example [#example-69]

```ts
// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;
```

##### See [#see-17]

Filter For filter base class

##### Parameters [#parameters-7]

###### value [#value-4]

`Filter` | `Filter`\[] | `null` | `undefined`

##### Returns [#returns-18]

`void`

#### Inherited from [#inherited-from-117]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`filters`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#filters)

***

### height [#height]

#### Get Signature [#get-signature-7]

\> **get** **height**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container,
\> \[!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use Container#setSize
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-70]

```ts
// Basic height setting
container.height = 200;
// Optimized height setting
container.setSize(100, 200);
```

##### Returns [#returns-19]

`number`

#### Set Signature [#set-signature-5]

\> **set** **height**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1118

##### Parameters [#parameters-8]

###### value [#value-5]

`number`

##### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-118]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`height`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#height)

***

### isRenderable [#isrenderable]

#### Get Signature [#get-signature-8]

\> **get** **isRenderable**(): `true`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4356

**`Internal`**

##### Returns [#returns-21]

`true`

#### Inherited from [#inherited-from-119]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`isRenderable`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#isrenderable)

***

### isRenderGroup [#isrendergroup]

#### Get Signature [#get-signature-9]

\> **get** **isRenderGroup**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group.
This means that it will be rendered as a separate pass, with its own set of instructions

##### Advanced [#advanced-7]

##### Returns [#returns-22]

`boolean`

#### Set Signature [#set-signature-6]

\> **set** **isRenderGroup**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:888

##### Parameters [#parameters-9]

###### value [#value-6]

`boolean`

##### Returns [#returns-23]

`void`

#### Inherited from [#inherited-from-120]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`isRenderGroup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#isrendergroup)

***

### memory [#memory]

#### Get Signature [#get-signature-10]

\> **get** **memory**(): [`Live2DMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)

Defined in: [src/components/Live2D.ts:174](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L174)

This method return the memory of the canvas element.

##### Throws [#throws]

when the method is not overridden in the subclass.

##### Returns [#returns-24]

[`Live2DMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)

#### Implementation of [#implementation-of-3]

`CanvasBaseItem.memory`

***

### origin [#origin]

#### Get Signature [#get-signature-11]

\> **get** **origin**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1087

**`Experimental`**

The origin point around which the container rotates and scales without affecting its position.
Unlike pivot, changing the origin will not move the container's position.

##### Example [#example-71]

```ts
// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);
```

##### Returns [#returns-25]

`ObservablePoint`

#### Set Signature [#set-signature-7]

\> **set** **origin**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1088

##### Parameters [#parameters-10]

###### value [#value-7]

`number` | `PointData`

##### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-121]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`origin`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#origin)

***

### percentagePosition [#percentageposition]

#### Get Signature [#get-signature-12]

\> **get** **percentagePosition**(): `number` | `Partial`\<`PointData`>

Defined in: [src/components/Live2D.ts:430](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L430)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-27]

`number` | `Partial`\<`PointData`>

#### Set Signature [#set-signature-8]

\> **set** **percentagePosition**(`value`): `void`

Defined in: [src/components/Live2D.ts:418](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L418)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-11]

###### value [#value-8]

`number` | `Partial`\<`PointData`>

##### Returns [#returns-28]

`void`

#### Implementation of [#implementation-of-4]

`AdditionalPositionsExtension.percentagePosition`

***

### percentageX [#percentagex]

#### Get Signature [#get-signature-13]

\> **get** **percentageX**(): `number`

Defined in: [src/components/Live2D.ts:444](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L444)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-29]

`number`

#### Set Signature [#set-signature-9]

\> **set** **percentageX**(`_value`): `void`

Defined in: [src/components/Live2D.ts:436](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L436)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-12]

###### \_value [#_value]

`number`

##### Returns [#returns-30]

`void`

#### Implementation of [#implementation-of-5]

`AdditionalPositionsExtension.percentageX`

***

### percentageY [#percentagey]

#### Get Signature [#get-signature-14]

\> **get** **percentageY**(): `number`

Defined in: [src/components/Live2D.ts:455](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L455)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Returns [#returns-31]

`number`

#### Set Signature [#set-signature-10]

\> **set** **percentageY**(`_value`): `void`

Defined in: [src/components/Live2D.ts:447](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L447)

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

##### Parameters [#parameters-13]

###### \_value [#_value-1]

`number`

##### Returns [#returns-32]

`void`

#### Implementation of [#implementation-of-6]

`AdditionalPositionsExtension.percentageY`

***

### pivot [#pivot]

#### Get Signature [#get-signature-15]

\> **get** **pivot**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

##### Example [#example-72]

```ts
// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center
```

##### Since [#since-2]

4.0.0

##### Returns [#returns-33]

`ObservablePoint`

#### Set Signature [#set-signature-11]

\> **set** **pivot**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1024

##### Parameters [#parameters-14]

###### value [#value-9]

`number` | `PointData`

##### Returns [#returns-34]

`void`

#### Inherited from [#inherited-from-122]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`pivot`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#pivot)

***

### position [#position]

#### Get Signature [#get-signature-16]

\> **get** **position**(): `ObservablePoint`

Defined in: [src/components/Live2D.ts:526](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L526)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-73]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-3]

4.0.0

##### Returns [#returns-35]

`ObservablePoint`

#### Set Signature [#set-signature-12]

\> **set** **position**(`value`): `void`

Defined in: [src/components/Live2D.ts:529](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L529)

The coordinate of the object relative to the local coordinates of the parent.

##### Example [#example-74]

```ts
// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };
```

##### Since [#since-4]

4.0.0

##### Parameters [#parameters-15]

###### value [#value-10]

`ObservablePoint`

##### Returns [#returns-36]

`void`

#### Overrides [#overrides-1]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`position`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#position)

***

### positionInfo [#positioninfo]

#### Get Signature [#get-signature-17]

\> **get** **positionInfo**(): `object`

Defined in: [src/components/Live2D.ts:466](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L466)

##### Returns [#returns-37]

`object`

###### type [#type]

\> **type**: `"align"` | `"pixel"` | `"percentage"`

###### x [#x]

\> **x**: `number`

###### y [#y]

\> **y**: `number`

#### Set Signature [#set-signature-13]

\> **set** **positionInfo**(`value`): `void`

Defined in: [src/components/Live2D.ts:478](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L478)

##### Parameters [#parameters-16]

###### value [#value-11]

###### type? [#type-1]

`"align"` | `"pixel"` | `"percentage"`

###### x [#x-1]

`number`

###### y [#y-1]

`number`

##### Returns [#returns-38]

`void`

#### Implementation of [#implementation-of-7]

`AdditionalPositionsExtension.positionInfo`

***

### positionType [#positiontype]

#### Get Signature [#get-signature-18]

\> **get** **positionType**(): `"align"` | `"pixel"` | `"percentage"`

Defined in: [src/components/Live2D.ts:458](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L458)

##### Returns [#returns-39]

`"align"` | `"pixel"` | `"percentage"`

#### Implementation of [#implementation-of-8]

`AdditionalPositionsExtension.positionType`

***

### ready [#ready]

#### Get Signature [#get-signature-19]

\> **get** **ready**(): `Promise`\<`void`>

Defined in: [src/components/Live2D.ts:154](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L154)

Promise that resolves once the model resources have been loaded and it's safe to be manipulated/rendered.

##### Returns [#returns-40]

`Promise`\<`void`>

***

### renderable [#renderable]

#### Get Signature [#get-signature-20]

\> **get** **renderable**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

##### Example [#example-75]

```ts
// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering
```

##### Default [#default-54]

```ts
true
```

##### See [#see-18]

* Container#visible For skipping transform updates
* Container#alpha For transparency

##### Returns [#returns-41]

`boolean`

#### Set Signature [#set-signature-14]

\> **set** **renderable**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1324

##### Parameters [#parameters-17]

###### value [#value-12]

`boolean`

##### Returns [#returns-42]

`void`

#### Inherited from [#inherited-from-123]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`renderable`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#renderable)

***

### rotation [#rotation]

#### Get Signature [#get-signature-21]

\> **get** **rotation**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

##### Example [#example-76]

```ts
// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees
```

##### Returns [#returns-43]

`number`

#### Set Signature [#set-signature-15]

\> **set** **rotation**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:985

##### Parameters [#parameters-18]

###### value [#value-13]

`number`

##### Returns [#returns-44]

`void`

#### Inherited from [#inherited-from-124]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`rotation`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#rotation)

***

### scale [#scale]

#### Get Signature [#get-signature-22]

\> **get** **scale**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

##### Example [#example-77]

```ts
// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100
```

##### Since [#since-5]

4.0.0

##### Returns [#returns-45]

`ObservablePoint`

#### Set Signature [#set-signature-16]

\> **set** **scale**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1072

##### Parameters [#parameters-19]

###### value [#value-14]

`string` | `number` | `PointData`

##### Returns [#returns-46]

`void`

#### Inherited from [#inherited-from-125]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`scale`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#scale)

***

### skew [#skew]

#### Get Signature [#get-signature-23]

\> **get** **skew**(): `ObservablePoint`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

##### Example [#example-78]

```ts
// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object
```

##### Since [#since-6]

4.0.0

##### Default [#default-55]

```ts
{x: 0, y: 0}
```

##### Returns [#returns-47]

`ObservablePoint`

#### Set Signature [#set-signature-17]

\> **set** **skew**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1055

##### Parameters [#parameters-20]

###### value [#value-15]

`PointData`

##### Returns [#returns-48]

`void`

#### Inherited from [#inherited-from-126]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`skew`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#skew)

***

### tint [#tint]

#### Get Signature [#get-signature-24]

\> **get** **tint**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

##### Example [#example-79]

```ts
// Basic color tinting
container.tint = 0xff0000; // Red tint
container.tint = 'red';    // Same as above
container.tint = '#00ff00'; // Green
container.tint = 'rgb(0,0,255)'; // Blue

// Remove tint
container.tint = 0xffffff; // White = no tint
container.tint = null;     // Also removes tint
```

##### Default [#default-56]

```ts
0xFFFFFF
```

##### See [#see-19]

* Container#alpha For transparency
* Container#visible For visibility control

##### Returns [#returns-49]

`number`

#### Set Signature [#set-signature-18]

\> **set** **tint**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1247

##### Parameters [#parameters-21]

###### value [#value-16]

`ColorSource`

##### Returns [#returns-50]

`void`

#### Inherited from [#inherited-from-127]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`tint`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tint)

***

### visible [#visible]

#### Get Signature [#get-signature-25]

\> **get** **visible**(): `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1303

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

##### Example [#example-80]

```ts
// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite
```

##### Default [#default-57]

```ts
true
```

##### See [#see-20]

* Container#renderable For render-only control
* Container#alpha For transparency

##### Returns [#returns-51]

`boolean`

#### Set Signature [#set-signature-19]

\> **set** **visible**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1304

##### Parameters [#parameters-22]

###### value [#value-17]

`boolean`

##### Returns [#returns-52]

`void`

#### Inherited from [#inherited-from-128]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`visible`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#visible)

***

### width [#width]

#### Get Signature [#get-signature-26]

\> **get** **width**(): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set.
\> \[!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio.
\> \[!NOTE] If you want to set both width and height at the same time, use Container#setSize
as it is more optimized by not recalculating the local bounds twice.

##### Example [#example-81]

```ts
// Basic width setting
container.width = 100;
// Optimized width setting
container.setSize(100, 100);
```

##### Returns [#returns-53]

`number`

#### Set Signature [#set-signature-20]

\> **set** **width**(`value`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1103

##### Parameters [#parameters-23]

###### value [#value-18]

`number`

##### Returns [#returns-54]

`void`

#### Inherited from [#inherited-from-129]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`width`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#width)

***

### worldTransform [#worldtransform]

#### Get Signature [#get-signature-27]

\> **get** **worldTransform**(): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

##### Example [#example-82]

```ts
// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);
```

##### See [#see-21]

[Container#localTransform](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#localtransform) For local space transform

##### Returns [#returns-55]

`Matrix`

#### Inherited from [#inherited-from-130]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`worldTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#worldtransform)

***

### x [#x-2]

#### Get Signature [#get-signature-28]

\> **get** **x**(): `number`

Defined in: [src/components/Live2D.ts:534](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L534)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-83]

```ts
// Basic position
container.x = 100;
```

##### Returns [#returns-56]

`number`

#### Set Signature [#set-signature-21]

\> **set** **x**(`value`): `void`

Defined in: [src/components/Live2D.ts:537](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L537)

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

##### Example [#example-84]

```ts
// Basic position
container.x = 100;
```

##### Parameters [#parameters-24]

###### value [#value-19]

`number`

##### Returns [#returns-57]

`void`

#### Overrides [#overrides-2]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`x`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#x)

***

### xAlign [#xalign]

#### Get Signature [#get-signature-29]

\> **get** **xAlign**(): `number`

Defined in: [src/components/Live2D.ts:385](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L385)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-58]

`number`

#### Set Signature [#set-signature-22]

\> **set** **xAlign**(`value`): `void`

Defined in: [src/components/Live2D.ts:377](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L377)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-25]

###### value [#value-20]

`number`

##### Returns [#returns-59]

`void`

#### Implementation of [#implementation-of-9]

`AdditionalPositionsExtension.xAlign`

***

### y [#y-2]

#### Get Signature [#get-signature-30]

\> **get** **y**(): `number`

Defined in: [src/components/Live2D.ts:542](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L542)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-85]

```ts
// Basic position
container.y = 200;
```

##### Returns [#returns-60]

`number`

#### Set Signature [#set-signature-23]

\> **set** **y**(`value`): `void`

Defined in: [src/components/Live2D.ts:545](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L545)

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

##### Example [#example-86]

```ts
// Basic position
container.y = 200;
```

##### Parameters [#parameters-26]

###### value [#value-21]

`number`

##### Returns [#returns-61]

`void`

#### Overrides [#overrides-3]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`y`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#y)

***

### yAlign [#yalign]

#### Get Signature [#get-signature-31]

\> **get** **yAlign**(): `number`

Defined in: [src/components/Live2D.ts:405](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L405)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Returns [#returns-62]

`number`

#### Set Signature [#set-signature-24]

\> **set** **yAlign**(`value`): `void`

Defined in: [src/components/Live2D.ts:397](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L397)

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

##### Parameters [#parameters-27]

###### value [#value-22]

`number`

##### Returns [#returns-63]

`void`

#### Implementation of [#implementation-of-10]

`AdditionalPositionsExtension.yAlign`

## Methods [#methods]

### \_calculateBounds() [#_calculatebounds]

\> `protected&#x60; **\_calculateBounds**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4617

Calculates the bounds of the Live2DModel for rendering and interaction purposes.

#### Returns [#returns-64]

`void`

#### Inherited from [#inherited-from-131]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_calculateBounds`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_calculatebounds)

***

### \_getGlobalBoundsRecursive() [#_getglobalboundsrecursive]

\> **\_getGlobalBoundsRecursive**(`factorRenderLayers`, `bounds`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

**`Internal`**

Recursively calculates the global bounds for the container and its children.
This method is used internally by getFastGlobalBounds to traverse the scene graph.

#### Parameters [#parameters-28]

##### factorRenderLayers [#factorrenderlayers]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds [#bounds-1]

`Bounds`

The bounds object to update with the calculated values.

##### currentLayer [#currentlayer]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-65]

`void`

#### Inherited from [#inherited-from-132]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`_getGlobalBoundsRecursive`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#_getglobalboundsrecursive)

***

### addChild() [#addchild]

\> **addChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container.
The children will be rendered as part of this container's display list.

#### Type Parameters [#type-parameters]

##### U [#u]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-29]

##### children [#children-1]

...`U`

The Container(s) to add to the container

#### Returns [#returns-66]

`U`\[`0`]

The first child that was added

#### Example [#example-87]

```ts
// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';
```

#### See [#see-22]

* Container#removeChild For removing children
* Container#addChildAt For adding at specific index

#### Inherited from [#inherited-from-133]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`addChild`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#addchild)

***

### addChildAt() [#addchildat]

\> **addChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
If the child is already in this container, it will be moved to the specified index.

When moving a child within the **same** container, `childAdded` and `added` events are
**not** emitted because the parent-child relationship hasn't changed. Events only fire when
a child is added from a different parent (or from no parent).

#### Type Parameters [#type-parameters-1]

##### U [#u-1]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-30]

##### child [#child]

`U`

The child to add

##### index [#index]

`number`

The index where the child will be placed

#### Returns [#returns-67]

`U`

The child that was added

#### Example [#example-88]

```ts
// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-1]

If index is out of bounds

#### See [#see-23]

* Container#addChild For adding to the end
* Container#setChildIndex For moving existing children

#### Inherited from [#inherited-from-134]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`addChildAt`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#addchildat)

***

### addEventListener() [#addeventlistener]

#### Call Signature [#call-signature]

\> **addEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
seeks to be compatible with the DOM's `addEventListener` with support for options.

##### Type Parameters [#type-parameters-2]

###### K [#k]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-31]

###### type [#type-2]

`K`

The type of event to listen to.

###### listener [#listener]

(`e`) => `any`

The listener callback or object.

###### options? [#options-1]

`AddListenerOptions`

Listener options, used for capture phase.

##### Returns [#returns-68]

`void`

##### Example [#example-89]

```ts
// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});
```

##### Inherited from [#inherited-from-135]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`addEventListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#addeventlistener)

#### Call Signature [#call-signature-1]

\> **addEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

##### Parameters [#parameters-32]

###### type [#type-3]

`string`

###### listener [#listener-1]

`EventListenerOrEventListenerObject`

###### options? [#options-2]

`AddListenerOptions`

##### Returns [#returns-69]

`void`

##### Inherited from [#inherited-from-136]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`addEventListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#addeventlistener)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-3]

##### T [#t]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-33]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-70]

`this`

#### Inherited from [#inherited-from-137]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#addlistener)

***

### collectRenderables() [#collectrenderables]

\> **collectRenderables**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4470

Insert this model into Pixi's instruction set so zIndex ordering works with other objects.

#### Parameters [#parameters-34]

##### instructionSet [#instructionset]

`InstructionSet`

##### renderer [#renderer-1]

`Renderer`

##### currentLayer [#currentlayer-1]

`RenderLayer`

#### Returns [#returns-71]

`void`

#### Inherited from [#inherited-from-138]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`collectRenderables`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#collectrenderables)

***

### collectRenderablesSimple() [#collectrenderablessimple]

\> **collectRenderablesSimple**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:30

**`Internal`**

Collects renderables using a simple method, suitable for containers marked as simple.
This method iterates over the container's children and adds their renderables to the instruction set.

#### Parameters [#parameters-35]

##### instructionSet [#instructionset-1]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-2]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-2]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-72]

`void`

#### Inherited from [#inherited-from-139]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`collectRenderablesSimple`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#collectrenderablessimple)

***

### collectRenderablesWithEffects() [#collectrenderableswitheffects]

\> **collectRenderablesWithEffects**(`instructionSet`, `renderer`, `currentLayer`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

**`Internal`**

Collects renderables using an advanced method, suitable for containers with complex processing needs.
This method handles additional effects and transformations that may be applied to the renderables.

#### Parameters [#parameters-36]

##### instructionSet [#instructionset-2]

`InstructionSet`

The set of instructions to which the renderables will be added.

##### renderer [#renderer-3]

`Renderer`

The renderer responsible for rendering the scene.

##### currentLayer [#currentlayer-3]

`RenderLayer`

The current render layer being processed.

#### Returns [#returns-73]

`void`

#### Inherited from [#inherited-from-140]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`collectRenderablesWithEffects`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#collectrenderableswitheffects)

***

### containsPoint() [#containspoint]

\> **containsPoint**(`point`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4613

A method required by `PIXI.InteractionManager` to perform hit-testing.

#### Parameters [#parameters-37]

##### point [#point]

`Point`

A Point in local space.

#### Returns [#returns-74]

`boolean`

True if the point is inside this model.

#### Inherited from [#inherited-from-141]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`containsPoint`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#containspoint)

***

### destroy() [#destroy]

\> **destroy**(`options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4646

Destroys the model and all related resources. This takes the same options and also
behaves the same as `PIXI.Container#destroy`.

#### Parameters [#parameters-38]

##### options? [#options-3]

Options parameter. A boolean will act as if all options
have been set to that value

###### baseTexture? [#basetexture]

`boolean`

Only used for child Sprites if `options.children` is set to true
Should it destroy the base texture of the child sprite

###### children? [#children-2]

`boolean`

if set to true, all the children will have their destroy
method called as well. `options` will be passed on to those calls.

###### texture? [#texture]

`boolean`

Only used for child Sprites if `options.children` is set to true
Should it destroy the texture of the child sprite

#### Returns [#returns-75]

`void`

#### Inherited from [#inherited-from-142]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#destroy)

***

### disableRenderGroup() [#disablerendergroup]

\> **disableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

#### Returns [#returns-76]

`void`

#### Advanced [#advanced-8]

#### Inherited from [#inherited-from-143]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`disableRenderGroup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#disablerendergroup)

***

### dispatchEvent() [#dispatchevent]

\> **dispatchEvent**(`e`): `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this Container using the event's EventBoundary.

The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.

#### Parameters [#parameters-39]

##### e [#e]

`FederatedEvent`

The event to dispatch.

#### Returns [#returns-77]

`boolean`

Whether the FederatedEvent.preventDefault preventDefault() method was not invoked.

#### Example [#example-90]

```ts
// Reuse a click event!
button.dispatchEvent(clickEvent);
```

#### Inherited from [#inherited-from-144]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`dispatchEvent`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#dispatchevent)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-1]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-40]

##### event [#event-1]

`T`

##### args [#args]

...`ArgumentMap`\<`ContainerEvents`\<`ContainerChild`> & `AnyEvent`>\[`Extract`\<`T`, keyof ContainerEvents<ContainerChild> | keyof AnyEvent>]

#### Returns [#returns-78]

`boolean`

#### Inherited from [#inherited-from-145]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#emit)

***

### enableRenderGroup() [#enablerendergroup]

\> **enableRenderGroup**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container.
This means it will be rendered as a separate set of instructions.
The transform of the container will also be handled on the GPU rather than the CPU.

#### Returns [#returns-79]

`void`

#### Advanced [#advanced-9]

#### Inherited from [#inherited-from-146]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`enableRenderGroup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#enablerendergroup)

***

### eventNames() [#eventnames]

\> **eventNames**(): (keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-80]

(keyof ContainerEvents<ContainerChild> | keyof AnyEvent)\[]

#### Inherited from [#inherited-from-147]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventnames)

***

### expression() [#expression]

\> **expression**(`id?`): `Promise`\<`boolean`>

Defined in: [src/components/Live2D.ts:167](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L167)

Shorthand to set an expression.

#### Parameters [#parameters-41]

##### id? [#id]

`string` | `number`

Either the index, or the name of the expression. If not presented, a random expression will be set.

#### Returns [#returns-81]

`Promise`\<`boolean`>

Promise that resolves with true if succeeded, with false otherwise.

#### Overrides [#overrides-4]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`expression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#expression)

***

### focus() [#focus]

\> **focus**(`x`, `y`, `instant?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4584

Updates the focus position. This will not cause the model to immediately look at the position,
instead the movement will be interpolated.

#### Parameters [#parameters-42]

##### x [#x-3]

`number`

Position in world space.

##### y [#y-3]

`number`

Position in world space.

##### instant? [#instant]

`boolean`

Should the focus position be instantly applied.

#### Returns [#returns-82]

`void`

#### Inherited from [#inherited-from-148]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`focus`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#focus)

***

### getBounds() [#getbounds]

\> **getBounds**(`skipUpdate?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle.
Takes into account transforms and child bounds.

#### Parameters [#parameters-43]

##### skipUpdate? [#skipupdate]

`boolean`

Setting to `true` will stop the transforms of the scene graph from
being updated. This means the calculation returned MAY be out of date BUT will give you a
nice performance boost.

##### bounds? [#bounds-2]

`Bounds`

Optional bounds to store the result of the bounds calculation

#### Returns [#returns-83]

`Bounds`

The minimum axis-aligned rectangle in world space that fits around this object

#### Example [#example-91]

```ts
// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);
```

#### Remarks [#remarks-7]

* Includes transform calculations
* Updates scene graph by default
* Can reuse bounds objects
* Common in hit testing

#### See [#see-24]

* [Container#getLocalBounds](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getlocalbounds) For untransformed bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-149]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getBounds`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getbounds)

***

### getChildAt() [#getchildat]

\> **getChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

#### Type Parameters [#type-parameters-5]

##### U [#u-2]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-44]

##### index [#index-1]

`number`

The index to get the child from

#### Returns [#returns-84]

`U`

The child at the given index

#### Example [#example-92]

```ts
// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-2]

If index is out of bounds

#### See [#see-25]

* Container#children For direct array access
* Container#getChildByLabel For name-based lookup

#### Inherited from [#inherited-from-150]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getChildAt`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getchildat)

***

### getChildByLabel() [#getchildbylabel]

\> **getChildByLabel**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-45]

##### label [#label-1]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep]

`boolean`

Whether to search recursively through children

#### Returns [#returns-85]

`Container`\<`ContainerChild`> | `null`

The first child with the specified label, or null if none found

#### Example [#example-93]

```ts
// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);
```

#### See [#see-26]

* Container#getChildrenByLabel For finding all matches
* [Container#label](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#label) For setting labels

#### Inherited from [#inherited-from-151]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getChildByLabel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getchildbylabel)

***

### ~~getChildByName()~~ [#getchildbyname]

\> **getChildByName**(`label`, `deep?`): `Container`\<`ContainerChild`> | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

#### Parameters [#parameters-46]

##### label [#label-2]

`string` | `RegExp`

Instance name.

##### deep? [#deep-1]

`boolean`

Whether to search recursively

#### Returns [#returns-86]

`Container`\<`ContainerChild`> | `null`

The child with the specified name.

#### Deprecated [#deprecated-2]

since 8.0.0

#### See [#see-27]

Container#getChildByLabel

#### Inherited from [#inherited-from-152]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getChildByName`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getchildbyname)

***

### getChildIndex() [#getchildindex]

\> **getChildIndex**(`child`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

#### Parameters [#parameters-47]

##### child [#child-1]

`ContainerChild`

The Container instance to identify

#### Returns [#returns-87]

`number`

The index position of the child container

#### Example [#example-94]

```ts
// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}
```

#### Throws [#throws-3]

If child is not in this container

#### See [#see-28]

* Container#setChildIndex For changing index
* Container#children For direct array access

#### Inherited from [#inherited-from-153]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getChildIndex`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getchildindex)

***

### getChildrenByLabel() [#getchildrenbylabel]

\> **getChildrenByLabel**(`label`, `deep?`, `out?`): `Container`\<`ContainerChild`>\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label.
Recursive searches are done in a pre-order traversal.

#### Parameters [#parameters-48]

##### label [#label-3]

`string` | `RegExp`

Instance label to search for

##### deep? [#deep-2]

`boolean`

Whether to search recursively through children

##### out? [#out]

`Container`\<`ContainerChild`>\[]

Optional array to store matching children in

#### Returns [#returns-88]

`Container`\<`ContainerChild`>\[]

An array of children with the specified label

#### Example [#example-95]

```ts
// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);
```

#### See [#see-29]

* Container#getChildByLabel For finding first match
* [Container#label](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#label) For setting labels

#### Inherited from [#inherited-from-154]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getChildrenByLabel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getchildrenbylabel)

***

### getFastGlobalBounds() [#getfastglobalbounds]

\> **getFastGlobalBounds**(`factorRenderLayers?`, `bounds?`): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children.
This method is optimized for speed by using axis-aligned bounding boxes (AABBs),
and uses the last render results from when it updated the transforms. This function does not update them.
which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use `container.getGlobalBounds`

#### Parameters [#parameters-49]

##### factorRenderLayers? [#factorrenderlayers-1]

`boolean`

A flag indicating whether to consider render layers in the calculation.

##### bounds? [#bounds-3]

`Bounds`

The output bounds object to store the result. If not provided, a new one is created.

#### Returns [#returns-89]

`Bounds`

The computed bounds.

#### Advanced [#advanced-10]

#### Inherited from [#inherited-from-155]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getFastGlobalBounds`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getfastglobalbounds)

***

### getGlobalAlpha() [#getglobalalpha]

\> **getGlobalAlpha**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

#### Parameters [#parameters-50]

##### skipUpdate? [#skipupdate-1]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire alpha chain through parents for accuracy
* If true: Uses cached worldAlpha from the last render pass for better performance

#### Returns [#returns-90]

`number`

The resulting alpha value (between 0 and 1)

#### Example [#example-96]

```ts
// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);
```

#### Inherited from [#inherited-from-156]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getGlobalAlpha`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobalalpha)

***

### getGlobalPosition() [#getglobalposition]

\> **getGlobalPosition**(`point?`, `skipUpdate?`): `Point`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

#### Parameters [#parameters-51]

##### point? [#point-1]

`Point`

The optional point to write the global value to

##### skipUpdate? [#skipupdate-2]

`boolean`

Should we skip the update transform

#### Returns [#returns-91]

`Point`

The updated point

#### Example [#example-97]

```ts
// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);
```

#### See [#see-30]

* [Container#toGlobal](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#toglobal) For converting specific points
* [Container#toLocal](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tolocal) For converting to local space

#### Inherited from [#inherited-from-157]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getGlobalPosition`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobalposition)

***

### getGlobalTint() [#getglobaltint]

\> **getGlobalTint**(`skipUpdate?`): `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

#### Parameters [#parameters-52]

##### skipUpdate? [#skipupdate-3]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire tint chain through parents for accuracy
* If true: Uses cached worldColor from the last render pass for better performance

#### Returns [#returns-92]

`number`

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

#### Example [#example-98]

```ts
// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);
```

#### Inherited from [#inherited-from-158]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getGlobalTint`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobaltint)

***

### getGlobalTransform() [#getglobaltransform]

\> **getGlobalTransform**(`matrix?`, `skipUpdate?`): `Matrix`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

#### Parameters [#parameters-53]

##### matrix? [#matrix]

`Matrix`

Optional matrix to store the result. If not provided, a new Matrix will be created.

##### skipUpdate? [#skipupdate-4]

`boolean`

Performance optimization flag:

* If false (default): Recalculates the entire transform chain for accuracy
* If true: Uses cached worldTransform from the last render pass for better performance

#### Returns [#returns-93]

`Matrix`

The resulting transformation matrix (either the input matrix or a new one)

#### Example [#example-99]

```ts
// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);
```

#### Inherited from [#inherited-from-159]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getGlobalTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobaltransform)

***

### getLocalBounds() [#getlocalbounds]

\> **getLocalBounds**(): `Bounds`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object.
Uses cached values when possible for better performance.

#### Returns [#returns-94]

`Bounds`

The bounding area

#### Example [#example-100]

```ts
// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true
```

#### See [#see-31]

* [Container#getBounds](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getbounds) For world space bounds
* Bounds For bounds properties

#### Inherited from [#inherited-from-160]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getLocalBounds`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getlocalbounds)

***

### getSize() [#getsize]

\> **getSize**(`out?`): `Size`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a \[Size]Size object.

This is faster than get the width and height separately.

#### Parameters [#parameters-54]

##### out? [#out-1]

`Size`

Optional object to store the size in.

#### Returns [#returns-95]

`Size`

The size of the container.

#### Example [#example-101]

```ts
// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);
```

#### Inherited from [#inherited-from-161]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`getSize`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getsize)

***

### hitTest() [#hittest]

\> **hitTest**(`x`, `y`): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4599

Hit-test on the model.

#### Parameters [#parameters-55]

##### x [#x-4]

`number`

Position in world space.

##### y [#y-4]

`number`

Position in world space.

#### Returns [#returns-96]

`string`\[]

The names of the *hit* hit areas. Can be empty if none is hit.

#### Inherited from [#inherited-from-162]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`hitTest`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#hittest)

***

### initializeOnModelLoad() [#initializeonmodelload]

\> `protected` **initializeOnModelLoad**(`_options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4476

A handler of the "modelLoaded" event, invoked when the internal model has been loaded.

#### Parameters [#parameters-56]

##### \_options? [#_options]

[`Live2DModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelOptions)

The options used for initialization.

#### Returns [#returns-97]

`void`

#### Inherited from [#inherited-from-163]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`initializeOnModelLoad`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#initializeonmodelload)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-57]

##### event [#event-2]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-98]

`number`

#### Inherited from [#inherited-from-164]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-2]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-58]

##### event [#event-3]

`T`

#### Returns [#returns-99]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-165]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#listeners)

***

### motion() [#motion]

\> **motion**(`group`, `index?`, `priority?`, `options?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4497

Shorthand to start a motion.

#### Parameters [#parameters-59]

##### group [#group]

`string`

The motion group.

##### index? [#index-2]

`number`

Index in the motion group.

##### priority? [#priority]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. (0: No priority, 1: IDLE, 2:NORMAL, 3:FORCE)

##### options? [#options-4]

Additional options for motion.

###### expression? [#expression-1]

`string` | `number`

In case you want to mix up an expression while playing sound (bind with Model.expression()).

###### loop? [#loop]

`boolean`

Whether the motion should loop. Overrides Cubism 3/4/5 motion JSON loop metadata when specified.

###### onError? [#onerror]

(`e`) => `void`

Callback function when an error occurs.

###### onFinish? [#onfinish]

() => `void`

Callback function when speaking completes.

###### resetExpression? [#resetexpression]

`boolean`

Reset the expression to default after the motion is finished.

###### sound? [#sound]

`string`

The audio url to file or base64 content.

###### volume? [#volume]

`number`

Volume of the sound (0-1).

#### Returns [#returns-100]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-166]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`motion`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#motion)

***

### motionLastFrame() [#motionlastframe]

\> **motionLastFrame**(`group`, `id`, `__namedParameters?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4506

#### Parameters [#parameters-60]

##### group [#group-1]

`string`

##### id [#id-1]

`number`

##### \_\_namedParameters? [#__namedparameters]

###### expression? [#expression-2]

`string` | `number`

#### Returns [#returns-101]

`Promise`\<`boolean`>

#### Inherited from [#inherited-from-167]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`motionLastFrame`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#motionlastframe)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-7]

##### T [#t-3]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-61]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-102]

`this`

#### Inherited from [#inherited-from-168]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`off`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: [src/components/Live2D.ts:316](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L316)

Add a listener for a given event.

#### Type Parameters [#type-parameters-8]

##### T [#t-4]

`T` *extends* `symbol` | `object` & `string` | keyof ContainerEvents<ContainerChild>

#### Parameters [#parameters-62]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-103]

`this`

#### Implementation of [#implementation-of-11]

`ListenerExtension.on`

#### Overrides [#overrides-5]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`on`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#on)

***

### onAnchorChange() [#onanchorchange]

\> `protected` **onAnchorChange**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4481

A callback that observes [anchor](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#anchor), invoked when the anchor's values have been changed.

#### Returns [#returns-104]

`void`

#### Inherited from [#inherited-from-169]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onAnchorChange`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onanchorchange)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-9]

##### T [#t-5]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-63]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-105]

`this`

#### Inherited from [#inherited-from-170]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`once`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#once)

***

### parallelLastFrame() [#parallellastframe]

\> **parallelLastFrame**(`motionList`): `Promise`\<`boolean`\[]>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4541

Shorthand to play the last frame of multiple motions in parallel and await their completion.

This method initiates the final frame of each specified motion concurrently,
leveraging the internal parallel motion manager. Each motion's completion is awaited
sequentially, and the results are returned as an array of success flags.

#### Parameters [#parameters-64]

##### motionList [#motionlist]

`object`\[]

Array of motions to execute.

#### Returns [#returns-106]

`Promise`\<`boolean`\[]>

Resolves with an array where each boolean indicates
whether the corresponding motion completed successfully.

#### Async [#async]

#### Inherited from [#inherited-from-171]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`parallelLastFrame`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#parallellastframe)

***

### parallelMotion() [#parallelmotion]

\> **parallelMotion**(`motionList`): `Promise`\<`boolean`\[]>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4519

Shorthand to start multiple motions in parallel.

#### Parameters [#parameters-65]

##### motionList [#motionlist-1]

`object`\[]

The motion list, each item includes:
group: The motion group,
index: Index in the motion group,
priority: The priority to be applied. (0: No priority, 1: IDLE, 2:NORMAL, 3:FORCE) (default: 2)
ignoreParamIds: The ids to be ignored,
loop: Whether the motion should loop.

#### Returns [#returns-107]

`Promise`\<`boolean`\[]>

Promise that resolves with a list, indicates the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-172]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`parallelMotion`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#parallelmotion)

***

### reloadPosition() [#reloadposition]

\> `protected` **reloadPosition**(): `void`

Defined in: [src/components/Live2D.ts:487](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L487)

#### Returns [#returns-108]

`void`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-66]

##### event? [#event-7]

keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Returns [#returns-109]

`this`

#### Inherited from [#inherited-from-173]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removealllisteners)

***

### removeChild() [#removechild]

\> **removeChild**\<`U`>(...`children`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container.
When removing multiple children, events will be triggered for each child in sequence.

#### Type Parameters [#type-parameters-10]

##### U [#u-3]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-67]

##### children [#children-3]

...`U`

The Container(s) to remove

#### Returns [#returns-110]

`U`\[`0`]

The first child that was removed

#### Example [#example-102]

```ts
// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;
```

#### See [#see-32]

* Container#addChild For adding children
* Container#removeChildren For removing multiple children

#### Inherited from [#inherited-from-174]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeChild`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removechild)

***

### removeChildAt() [#removechildat]

\> **removeChildAt**\<`U`>(`index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

#### Type Parameters [#type-parameters-11]

##### U [#u-4]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-68]

##### index [#index-3]

`number`

The index to remove the child from

#### Returns [#returns-111]

`U`

The child that was removed

#### Example [#example-103]

```ts
// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}
```

#### Throws [#throws-4]

If index is out of bounds

#### See [#see-33]

* Container#removeChild For removing specific children
* Container#removeChildren For removing multiple children

#### Inherited from [#inherited-from-175]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeChildAt`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removechildat)

***

### removeChildren() [#removechildren]

\> **removeChildren**(`beginIndex?`, `endIndex?`): `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

#### Parameters [#parameters-69]

##### beginIndex? [#beginindex]

`number`

The beginning position

##### endIndex? [#endindex]

`number`

The ending position. Default is container size

#### Returns [#returns-112]

`ContainerChild`\[]

List of removed children

#### Example [#example-104]

```ts
// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);
```

#### Throws [#throws-5]

If begin/end indexes are invalid

#### See [#see-34]

* Container#addChild For adding children
* Container#removeChild For removing specific children

#### Inherited from [#inherited-from-176]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removechildren)

***

### removeEventListener() [#removeeventlistener]

#### Call Signature [#call-signature-2]

\> **removeEventListener**\<`K`>(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
seeks to be compatible with the DOM's `removeEventListener` with support for options.

##### Type Parameters [#type-parameters-12]

###### K [#k-1]

`K` *extends* keyof FederatedEventMap | keyof GlobalFederatedEventMap

##### Parameters [#parameters-70]

###### type [#type-4]

`K`

The type of event the listener is bound to.

###### listener [#listener-2]

(`e`) => `any`

The listener callback or object.

###### options? [#options-5]

`RemoveListenerOptions`

The original listener options.
This is required to deregister a capture phase listener.

##### Returns [#returns-113]

`void`

##### Inherited from [#inherited-from-177]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeEventListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removeeventlistener)

#### Call Signature [#call-signature-3]

\> **removeEventListener**(`type`, `listener`, `options?`): `void`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

##### Parameters [#parameters-71]

###### type [#type-5]

`string`

###### listener [#listener-3]

`EventListenerOrEventListenerObject`

###### options? [#options-6]

`RemoveListenerOptions`

##### Returns [#returns-114]

`void`

##### Inherited from [#inherited-from-178]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeEventListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removeeventlistener)

***

### removeFromParent() [#removefromparent]

\> **removeFromParent**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

#### Returns [#returns-115]

`void`

#### Example [#example-105]

```ts
// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}
```

#### See [#see-35]

* Container#addChild For adding to a new parent
* Container#removeChild For parent removing children

#### Inherited from [#inherited-from-179]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeFromParent`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removefromparent)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-13]

##### T [#t-6]

`T` *extends* keyof ContainerEvents<ContainerChild> | keyof AnyEvent

#### Parameters [#parameters-72]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-116]

`this`

#### Inherited from [#inherited-from-180]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#removelistener)

***

### reparentChild() [#reparentchild]

\> **reparentChild**\<`U`>(...`child`): `U`\[`0`]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform.
This ensures that the visual position and rotation of the children remain the same even when changing parents.

#### Type Parameters [#type-parameters-14]

##### U [#u-5]

`U` *extends* `ContainerChild`\[]

#### Parameters [#parameters-73]

##### child [#child-2]

...`U`

The child or children to reparent

#### Returns [#returns-117]

`U`\[`0`]

The first child that was reparented

#### Example [#example-106]

```ts
// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);
```

#### See [#see-36]

* Container#reparentChildAt For index-specific reparenting
* Container#addChild For simple parenting

#### Inherited from [#inherited-from-181]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`reparentChild`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#reparentchild)

***

### reparentChildAt() [#reparentchildat]

\> **reparentChildAt**\<`U`>(`child`, `index`): `U`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform.
This ensures that the visual position and rotation of the child remain the same even when changing parents.

#### Type Parameters [#type-parameters-15]

##### U [#u-6]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-74]

##### child [#child-3]

`U`

The child to reparent

##### index [#index-4]

`number`

The index to reparent the child to

#### Returns [#returns-118]

`U`

The reparented child

#### Example [#example-107]

```ts
// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);
```

#### Throws [#throws-6]

If index is out of bounds

#### See [#see-37]

* Container#reparentChild For appending reparented children
* Container#addChildAt For simple indexed parenting

#### Inherited from [#inherited-from-182]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`reparentChildAt`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#reparentchildat)

***

### replaceChild() [#replacechild]

\> **replaceChild**\<`U`, `T`>(`oldChild`, `newChild`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

#### Type Parameters [#type-parameters-16]

##### U [#u-7]

`U` *extends* `ContainerChild`

##### T [#t-7]

`T` *extends* `ContainerChild`

#### Parameters [#parameters-75]

##### oldChild [#oldchild]

`U`

The child to replace.

##### newChild [#newchild]

`T`

The new child to add.

#### Returns [#returns-119]

`void`

#### Inherited from [#inherited-from-183]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`replaceChild`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#replacechild)

***

### setChildIndex() [#setchildindex]

\> **setChildIndex**(`child`, `index`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

#### Parameters [#parameters-76]

##### child [#child-4]

`ContainerChild`

The child Container instance to reposition

##### index [#index-5]

`number`

The resulting index number for the child

#### Returns [#returns-120]

`void`

#### Example [#example-108]

```ts
// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}
```

#### Throws [#throws-7]

If index is out of bounds

#### Throws [#throws-8]

If child is not in container

#### See [#see-38]

* Container#getChildIndex For getting current index
* Container#swapChildren For swapping positions

#### Inherited from [#inherited-from-184]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`setChildIndex`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setchildindex)

***

### setFromMatrix() [#setfrommatrix]

\> **setFromMatrix**(`matrix`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix.
Extracts position, scale, rotation, and skew from a transformation matrix.

#### Parameters [#parameters-77]

##### matrix [#matrix-1]

`Matrix`

The matrix to use for updating the transform

#### Returns [#returns-121]

`void`

#### Example [#example-109]

```ts
// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);
```

#### See [#see-39]

* Container#updateTransform For property-based updates
* Matrix#decompose For matrix decomposition details

#### Inherited from [#inherited-from-185]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`setFromMatrix`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setfrommatrix)

***

### setMask() [#setmask]

\> **setMask**(`options`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object.
Allows for more detailed control over masking behavior compared to the mask property.

#### Parameters [#parameters-78]

##### options [#options-7]

`Partial`\<`MaskOptionsAndMask`>

Configuration options for the mask

#### Returns [#returns-122]

`void`

#### Example [#example-110]

```ts
import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });
```

#### See [#see-40]

* [Container#mask](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#mask) For simple masking
* MaskOptionsAndMask For full options API
* MaskOptions#channel For channel selection

#### Inherited from [#inherited-from-186]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`setMask`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setmask)

***

### setMemory() [#setmemory]

\> **setMemory**(`memory`): `Promise`\<`void`>

Defined in: [src/components/Live2D.ts:263](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L263)

This method set the memory of the canvas element.

#### Parameters [#parameters-79]

##### memory [#memory-1]

[`Live2DMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)

#### Returns [#returns-123]

`Promise`\<`void`>

#### Throws [#throws-9]

when the method is not overridden in the subclass.

#### Implementation of [#implementation-of-12]

`CanvasBaseItem.setMemory`

***

### setSize() [#setsize]

\> **setSize**(`value`, `height?`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height.
This is more efficient than setting width and height separately as it only recalculates bounds once.

#### Parameters [#parameters-80]

##### value [#value-23]

`number` | `Optional`\<`Size`, `"height"`>

This can be either a number or a \[Size]Size object.

##### height? [#height-1]

`number`

The height to set. Defaults to the value of `width` if not provided.

#### Returns [#returns-124]

`void`

#### Example [#example-111]

```ts
// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100
```

#### Inherited from [#inherited-from-187]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`setSize`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#setsize)

***

### speak() [#speak]

\> **speak**(`sound`, `options?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4560

Shorthand to start speaking a sound with an expression.

#### Parameters [#parameters-81]

##### sound [#sound-1]

`string`

The audio url to file or base64 content.

##### options? [#options-8]

Additional options for speaking.

###### expression? [#expression-3]

`string` | `number`

In case you want to mix up an expression while playing sound (bind with Model.expression()).

###### onError? [#onerror-1]

(`e`) => `void`

Callback function when an error occurs.

###### onFinish? [#onfinish-1]

() => `void`

Callback function when speaking completes.

###### resetExpression? [#resetexpression-1]

`boolean`

Reset the expression to default after the motion is finished.

###### volume? [#volume-1]

`number`

Volume of the sound (0-1).

#### Returns [#returns-125]

`Promise`\<`boolean`>

Promise that resolves with true if the sound is playing, false if it's not.

#### Inherited from [#inherited-from-188]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`speak`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#speak)

***

### stopMotions() [#stopmotions]

\> **stopMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4548

Stops all playing motions as well as the sound.

#### Returns [#returns-126]

`void`

#### Inherited from [#inherited-from-189]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`stopMotions`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#stopmotions)

***

### stopSpeaking() [#stopspeaking]

\> **stopSpeaking**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4570

Stop current audio playback and lipsync.

#### Returns [#returns-127]

`void`

#### Inherited from [#inherited-from-190]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`stopSpeaking`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#stopspeaking)

***

### swapChildren() [#swapchildren]

\> **swapChildren**\<`U`>(`child`, `child2`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

#### Type Parameters [#type-parameters-17]

##### U [#u-8]

`U` *extends* `ContainerChild`

#### Parameters [#parameters-82]

##### child [#child-5]

`U`

First container to swap

##### child2 [#child2]

`U`

Second container to swap

#### Returns [#returns-128]

`void`

#### Example [#example-112]

```ts
// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}
```

#### Remarks [#remarks-8]

* Updates render groups
* No effect if same child
* Triggers container changes
* Common in z-ordering

#### Throws [#throws-10]

If either child is not in container

#### See [#see-41]

* Container#setChildIndex For direct index placement
* Container#getChildIndex For getting current positions

#### Inherited from [#inherited-from-191]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`swapChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#swapchildren)

***

### tap() [#tap]

\> **tap**(`x`, `y`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4592

Tap on the model. This will perform a hit-testing, and emit a "hit" event
if at least one of the hit areas is hit.

#### Parameters [#parameters-83]

##### x [#x-5]

`number`

Position in world space.

##### y [#y-5]

`number`

Position in world space.

#### Returns [#returns-129]

`void`

#### Emits [#emits]

[Live2DModelEvents.hit](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelEvents#hit)

#### Inherited from [#inherited-from-192]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`tap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tap)

***

### toGlobal() [#toglobal]

\> **toGlobal**\<`P`>(`position`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container.
Takes into account the container hierarchy and transforms.

#### Type Parameters [#type-parameters-18]

##### P [#p]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-84]

##### position [#position-1]

`PointData`

The local point to convert

##### point? [#point-2]

`P`

Optional point to store the result

##### skipUpdate? [#skipupdate-5]

`boolean`

Whether to skip transform updates

#### Returns [#returns-130]

`P`

The global position

#### Example [#example-113]

```ts
// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);
```

#### See [#see-42]

* [Container#toLocal](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tolocal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobalposition) For container position

#### Inherited from [#inherited-from-193]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`toGlobal`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#toglobal)

***

### toLocal() [#tolocal]

\> **toLocal**\<`P`>(`position`, `from?`, `point?`, `skipUpdate?`): `P`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point.
Converts coordinates from any coordinate space to this container's local coordinate space.

#### Type Parameters [#type-parameters-19]

##### P [#p-1]

`P` *extends* `PointData` = `Point`

#### Parameters [#parameters-85]

##### position [#position-2]

`PointData`

The world origin to calculate from

##### from? [#from]

`Container`\<`ContainerChild`>

The Container to calculate the global position from

##### point? [#point-3]

`P`

A Point object in which to store the value

##### skipUpdate? [#skipupdate-6]

`boolean`

Should we skip the update transform

#### Returns [#returns-131]

`P`

A point object representing the position in local space

#### Example [#example-114]

```ts
// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);
```

#### See [#see-43]

* [Container#toGlobal](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#toglobal) For reverse conversion
* [Container#getGlobalPosition](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#getglobalposition) For container position

#### Inherited from [#inherited-from-194]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`toLocal`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tolocal)

***

### toModelPosition() [#tomodelposition]

\> **toModelPosition**(`position`, `result?`, `skipUpdate?`): `Point`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4607

Calculates the position in the canvas of original, unscaled Live2D model.

#### Parameters [#parameters-86]

##### position [#position-3]

`Point`

A Point in world space.

##### result? [#result]

`Point`

A Point to store the new value. Defaults to a new Point.

##### skipUpdate? [#skipupdate-7]

`boolean`

True to skip the update transform.

#### Returns [#returns-132]

`Point`

The Point in model canvas space.

#### Inherited from [#inherited-from-195]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`toModelPosition`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#tomodelposition)

***

### update() [#update]

\> **update**(`dt`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4623

Updates the model. Note this method just updates the timer,
and the actual update will be done right before rendering the model.

#### Parameters [#parameters-87]

##### dt [#dt]

`number`

The elapsed time in milliseconds since last frame.

#### Returns [#returns-133]

`void`

#### Inherited from [#inherited-from-196]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`update`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#update)

***

### updateLocalTransform() [#updatelocaltransform]

\> **updateLocalTransform**(): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1225

Updates the local transform.

#### Returns [#returns-134]

`void`

#### Inherited from [#inherited-from-197]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`updateLocalTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#updatelocaltransform)

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`opts`): `this`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:1195

Updates the transform properties of the container.
Allows partial updates of transform properties for optimized manipulation.

#### Parameters [#parameters-88]

##### opts [#opts]

`Partial`\<`UpdateTransformOptions`>

Transform options to update

#### Returns [#returns-135]

`this`

This container, for chaining

#### Example [#example-115]

```ts
// Basic transform update
container.updateTransform({
    x: 100,
    y: 200,
    rotation: Math.PI / 4
});

// Scale and rotate around center
sprite.updateTransform({
    pivotX: sprite.width / 2,
    pivotY: sprite.height / 2,
    scaleX: 2,
    scaleY: 2,
    rotation: Math.PI
});

// Update position only
button.updateTransform({
    x: button.x + 10, // Move right
    y: button.y      // Keep same y
});
```

#### See [#see-44]

* Container#setFromMatrix For matrix-based transforms
* [Container#position](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#position) For direct position access

#### Inherited from [#inherited-from-198]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`updateTransform`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#updatetransform)

***

### create() [#create]

\> `static` **create**(`options`): `Promise`\<`Live2D`>

Defined in: [src/components/Live2D.ts:162](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/components/Live2D.ts#L162)

Creates a Live2D instance and waits until its resources have been loaded.

#### Parameters [#parameters-89]

##### options [#options-9]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions)

The options for the component.

#### Returns [#returns-136]

`Promise`\<`Live2D`>

***

### from() [#from-1]

\> `static` **from**\<`M`>(`this`, `source`, `options?`): `Promise`\<`InstanceType`\<`M`>>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4365

Creates a Live2DModel from given source.

#### Type Parameters [#type-parameters-20]

##### M [#m]

`M` *extends* [`Live2DConstructor`](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DConstructor) = *typeof* [`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel)

#### Parameters [#parameters-90]

##### this [#this]

`M`

##### source [#source]

`string` | `object` | [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

Can be one of: settings file URL, settings JSON object, ModelSettings instance.

##### options? [#options-10]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions)

Options for the creation.

#### Returns [#returns-137]

`Promise`\<`InstanceType`\<`M`>>

Promise that resolves with the Live2DModel.

#### Inherited from [#inherited-from-199]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`from`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#from)

***

### fromSync() [#fromsync]

\> `static` **fromSync**\<`M`>(`this`, `source`, `options?`): `InstanceType`\<`M`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4389

Synchronous version of `Live2DModel.from()`. This method immediately returns a Live2DModel instance,
whose resources have not been loaded. Therefore, this model can't be manipulated or rendered
until the "load" event has been emitted.

```js
// no `await` here as it's not a Promise
const model = Live2DModel.fromSync('shizuku.model.json');

// these will cause errors!
// app.stage.addChild(model);
// model.motion('tap_body');

model.once('load', () => {
    // now it's safe
    app.stage.addChild(model);
    model.motion('tap_body');
});
```

#### Type Parameters [#type-parameters-21]

##### M [#m-1]

`M` *extends* [`Live2DConstructor`](/jsdoc/pixi-vn-live2d/core/type-aliases/Live2DConstructor) = *typeof* [`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel)

#### Parameters [#parameters-91]

##### this [#this-1]

`M`

##### source [#source-1]

`string` | `object` | [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

Model source, can be a file path, JSON object, or ModelSettings instance.

##### options? [#options-11]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions)

Options for the model creation.

#### Returns [#returns-138]

`InstanceType`\<`M`>

The created Live2DModel instance.

#### Inherited from [#inherited-from-200]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`fromSync`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#fromsync)

***

### ~~mixin()~~ [#mixin]

\> `static` **mixin**(`source`): `void`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:605

Mixes all enumerable properties and methods from a source object to Container.

#### Parameters [#parameters-92]

##### source [#source-2]

`Dict`\<`any`>

The source of properties and methods to mix in.

#### Returns [#returns-139]

`void`

#### Deprecated [#deprecated-3]

since 8.8.0

#### Inherited from [#inherited-from-201]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`mixin`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#mixin)

***

### ~~registerTicker()~~ [#registerticker]

\> `static` **registerTicker**(`tickerClass`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4395

Registers the class of `PIXI.Ticker` for auto updating.

#### Parameters [#parameters-93]

##### tickerClass [#tickerclass]

*typeof* `Ticker`

The Ticker class to be registered.

#### Returns [#returns-140]

`void`

#### Deprecated [#deprecated-4]

Use [Live2DModelOptions.ticker](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions#ticker) instead.

#### Inherited from [#inherited-from-202]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`registerTicker`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#registerticker)


# Interface: Live2DMemory (/jsdoc/pixi-vn-live2d/index/interfaces/Live2DMemory)



Defined in: [src/interfaces/Live2DMemory.ts:59](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L59)

## Extends [#extends]

* `MemoryCore`.`CanvasBaseItemMemory`.`ListenerExtensionMemory`.`AdditionalPositionsExtensionProps`

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`MemoryCore.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`MemoryCore.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`MemoryCore.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`MemoryCore.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`MemoryCore.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`MemoryCore.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`MemoryCore.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:232

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-7]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`align`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#align)

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* Container#visible For toggling visibility
* Container#renderable For render control

#### Inherited from [#inherited-from-8]

`MemoryCore.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `object`

Defined in: [src/interfaces/Live2DMemory.ts:68](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L68)

#### x [#x]

\> **x**: `number`

#### y [#y]

\> **y**: `number`

#### Overrides [#overrides]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`anchor`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#anchor)

***

### anchorMode? [#anchormode]

\> `optional` &#x2A;*anchorMode?**: `"canvas"` | `"drawable"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4293

Defines which bounds are used to resolve the normalized [Live2DModel.anchor](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#anchor).
`'canvas'` preserves the historical model-canvas behavior, while `'drawable'`
resolves the anchor against the visible drawable bounds.

#### Default [#default-8]

```ts
'canvas'
```

#### Inherited from [#inherited-from-9]

[`Live2DModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelOptions).[`anchorMode`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DModelOptions#anchormode)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-10]

`MemoryCore.angle`

***

### autoFocus? [#autofocus]

\> `optional` &#x2A;*autoFocus?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4238

Automatically update the focus position when `globalpointermove` event is triggered.

#### Default [#default-9]

```ts
true
```

#### Inherited from [#inherited-from-11]

[`AutomatorOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions).[`autoFocus`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions#autofocus)

***

### autoHitTest? [#autohittest]

\> `optional` &#x2A;*autoHitTest?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4233

Automatically hit-test the model when `pointertap` event is triggered.

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-12]

[`AutomatorOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions).[`autoHitTest`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions#autohittest)

***

### ~~autoInteract?~~ [#autointeract]

\> `optional` &#x2A;*autoInteract?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4228

Should the internal model automatically reacts to interactions by listening for pointer events.

#### Default [#default-11]

```ts
true
```

#### Deprecated [#deprecated]

since v0.5.0, reading/writing this property is equivalent to reading/writing `autoHitTest && autoFocus`.

#### Inherited from [#inherited-from-13]

[`AutomatorOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions).[`autoInteract`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions#autointeract)

***

### autoUpdate? [#autoupdate]

\> `optional` &#x2A;*autoUpdate?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4222

Should the internal model be automatically updated by `PIXI.Ticker.shared`.

#### Default [#default-12]

```ts
ture
```

#### Inherited from [#inherited-from-14]

[`AutomatorOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions).[`autoUpdate`](/jsdoc/pixi-vn-live2d/core/interfaces/AutomatorOptions#autoupdate)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-13]

```ts
'normal'
```

#### See [#see-1]

* Container#alpha For transparency
* Container#tint For color adjustments

#### Inherited from [#inherited-from-15]

`MemoryCore.blendMode`

***

### breathDepth? [#breathdepth]

\> `optional` &#x2A;*breathDepth?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3118

Define natural movements depth (0.0-1.0).

#### Default [#default-14]

```ts
1.0
```

#### Inherited from [#inherited-from-16]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions).[`breathDepth`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions#breathdepth)

***

### checkMocConsistency? [#checkmocconsistency]

\> `optional` &#x2A;*checkMocConsistency?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4051

Whether to check the consistency of the moc file. It's an internal
function of Cubism core and only available since Cubism 4 R7.

#### Default [#default-15]

```ts
false
```

#### Inherited from [#inherited-from-17]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`checkMocConsistency`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#checkmocconsistency)

***

### checkMotionConsistency? [#checkmotionconsistency]

\> `optional` &#x2A;*checkMotionConsistency?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4071

Whether to validate motion3.json consistency when loading motions.

#### Default [#default-16]

```ts
false
```

#### Inherited from [#inherited-from-18]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`checkMotionConsistency`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#checkmotionconsistency)

***

### crossOrigin? [#crossorigin]

\> `optional` &#x2A;*crossOrigin?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4056

String to use for crossOrigin properties on `<img>` elements when loading textures.

#### Default [#default-17]

```ts
undefined
```

#### Inherited from [#inherited-from-19]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`crossOrigin`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#crossorigin)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-10]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-18]

```ts
false
```

#### Inherited from [#inherited-from-20]

`MemoryCore.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-11]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-19]

```ts
true
```

#### Inherited from [#inherited-from-21]

`MemoryCore.cullableChildren`

***

### currentExpressionId? [#currentexpressionid]

\> `optional` &#x2A;*currentExpressionId?**: `string` | `number`

Defined in: [src/interfaces/Live2DMemory.ts:84](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L84)

The id (index or name) of the expression currently applied to the model.

***

### currentMotion? [#currentmotion]

\> `optional` &#x2A;*currentMotion?**: [`MotionMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/MotionMemory)

Defined in: [src/interfaces/Live2DMemory.ts:76](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L76)

The motion currently playing on the main motion manager.

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-12]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-20]

```ts
undefined
```

#### See [#see-2]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-22]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cursor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-13]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-23]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`eventMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

***

### eyeBlink? [#eyeblink]

\> `optional` &#x2A;*eyeBlink?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3133

Whether to enable automatic eye blinking between motions.

#### Default [#default-21]

```ts
true
```

#### Inherited from [#inherited-from-24]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions).[`eyeBlink`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions#eyeblink)

***

### focus? [#focus]

\> `optional` &#x2A;*focus?**: `object`

Defined in: [src/interfaces/Live2DMemory.ts:72](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L72)

The focus position of the model, in world space.

#### x [#x-1]

\> **x**: `number`

#### y [#y-1]

\> **y**: `number`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-14]

```ts
new Container({ height: 100});
```

#### Default [#default-22]

```ts
0
```

#### Inherited from [#inherited-from-25]

`MemoryCore.height`

***

### idleMotionGroup? [#idlemotiongroup]

\> `optional` &#x2A;*idleMotionGroup?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3336

Specifies the idle motion group.

#### Default [#default-23]

```ts
"idle" in Cubism 2 and "Idle" in Cubism 4.
```

#### Inherited from [#inherited-from-26]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions).[`idleMotionGroup`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions#idlemotiongroup)

***

### index? [#index]

\> `optional` &#x2A;*index?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:182

The index of the container in its parent, if it has one

#### Inherited from [#inherited-from-27]

`CanvasBaseItemMemory.index`

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-3]

[Container.eventMode](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

#### Example [#example-15]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-28]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactive`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-24]

```ts
true
```

#### Example [#example-16]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-29]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactiveChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-4]

Container#isRenderGroup

#### Inherited from [#inherited-from-30]

`MemoryCore.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-25]

```ts
null
```

#### Inherited from [#inherited-from-31]

`MemoryCore.label`

***

### lipSyncGain? [#lipsyncgain]

\> `optional` &#x2A;*lipSyncGain?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3123

Gain multiplier applied to the analyzed mouth-sync input value.

#### Default [#default-26]

```ts
1.5
```

#### Inherited from [#inherited-from-32]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions).[`lipSyncGain`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions#lipsyncgain)

***

### lipSyncWeight? [#lipsyncweight]

\> `optional` &#x2A;*lipSyncWeight?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3128

Blend weight used when adding lip-sync values to mouth parameters.

#### Default [#default-27]

```ts
0.4
```

#### Inherited from [#inherited-from-33]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions).[`lipSyncWeight`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions#lipsyncweight)

***

### motionPreload? [#motionpreload]

\> `optional` &#x2A;*motionPreload?**: [`MotionPreloadStrategy`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPreloadStrategy)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3331

How to preload the motions.

#### Default [#default-28]

[MotionPreloadStrategy.NONE](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPreloadStrategy#none)

#### Inherited from [#inherited-from-34]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions).[`motionPreload`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions#motionpreload)

***

### onEvents? [#onevents]

\> `optional` &#x2A;*onEvents?**: `OnEventsHandlers`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:357

#### Inherited from [#inherited-from-35]

`ListenerExtensionMemory.onEvents`

***

### origin? [#origin]

\> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-17]

```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)
```

#### Inherited from [#inherited-from-36]

`MemoryCore.origin`

***

### parallelMotions [#parallelmotions]

\> **parallelMotions**: ([`MotionMemory`](/jsdoc/pixi-vn-live2d/index/interfaces/MotionMemory) | `null`)\[]

Defined in: [src/interfaces/Live2DMemory.ts:80](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L80)

The motions currently playing on each parallel motion manager.

***

### parentLabel? [#parentlabel]

\> `optional` &#x2A;*parentLabel?**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:186

The label of the parent container, if it has one

#### Inherited from [#inherited-from-37]

`CanvasBaseItemMemory.parentLabel`

***

### percentagePosition? [#percentageposition]

\> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:262

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-38]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`percentagePosition`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#percentageposition)

***

### percentageX? [#percentagex]

\> `optional` &#x2A;*percentageX?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:272

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-39]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`percentageX`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#percentagex)

***

### percentageY? [#percentagey]

\> `optional` &#x2A;*percentageY?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:282

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-40]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`percentageY`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#percentagey)

***

### pivot? [#pivot]

\> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-18]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-41]

`MemoryCore.pivot`

***

### pixivnId [#pixivnid]

\> **pixivnId**: `string`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:178

#### Inherited from [#inherited-from-42]

`CanvasBaseItemMemory.pixivnId`

***

### position? [#position]

\> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-19]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-43]

`MemoryCore.position`

***

### renderable? [#renderable]

\> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-20]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-29]

```ts
true
```

#### See [#see-5]

* Container#visible For skipping transform updates
* Container#alpha For transparency

#### Inherited from [#inherited-from-44]

`MemoryCore.renderable`

***

### rotation? [#rotation]

\> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-21]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-45]

`MemoryCore.rotation`

***

### scale? [#scale]

\> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-22]

```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
```

#### Inherited from [#inherited-from-46]

`MemoryCore.scale`

***

### setMask? [#setmask]

\> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-47]

`MemoryCore.setMask`

***

### skew? [#skew]

\> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-23]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-30]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-48]

`MemoryCore.skew`

***

### sortableChildren? [#sortablechildren]

\> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

\> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
\> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-24]

```ts
container.sortableChildren = true;
```

#### Default [#default-31]

```ts
false
```

#### Inherited from [#inherited-from-49]

`MemoryCore.sortableChildren`

***

### sortDirty? [#sortdirty]

\> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-32]

```ts
false
@internal
```

#### Inherited from [#inherited-from-50]

`MemoryCore.sortDirty`

***

### source [#source]

\> **source**: `string`

Defined in: [src/interfaces/Live2DMemory.ts:67](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DMemory.ts#L67)

The model source. Must be a URL/alias string so it can be reloaded when the memory is restored.

***

### tabIndex? [#tabindex]

\> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-33]

```ts
0
```

#### Example [#example-25]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-51]

`MemoryCore.tabIndex`

***

### textureOptions? [#textureoptions]

\> `optional` &#x2A;*textureOptions?**: [`Live2DTextureSourceOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureSourceOptions)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4079

Texture loading and atlas LOD options.

See [Live2DTextureLODOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureLODOptions) for the available `lod` strategies.

#### Default [#default-34]

```ts
{ lod: 'full' }
```

#### Inherited from [#inherited-from-52]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`textureOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#textureoptions)

***

### tint? [#tint]

\> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-26]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-35]

```ts
0xFFFFFF
```

#### See [#see-6]

* Container#alpha For transparency
* Container#visible For visibility control

#### Inherited from [#inherited-from-53]

`MemoryCore.tint`

***

### useHighPrecisionMask? [#usehighprecisionmask]

\> `optional` &#x2A;*useHighPrecisionMask?**: `boolean` | `"auto"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3139

Whether to use Cubism's high precision clipping mask rendering.
Only supported by Cubism 3/4/5 models.

#### Default [#default-36]

```ts
'auto'
```

#### Inherited from [#inherited-from-54]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions).[`useHighPrecisionMask`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions#usehighprecisionmask)

***

### visible? [#visible]

\> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-27]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-37]

```ts
true
```

#### See [#see-7]

* Container#renderable For render-only control
* Container#alpha For transparency

#### Inherited from [#inherited-from-55]

`MemoryCore.visible`

***

### width? [#width]

\> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-28]

```ts
new Container({ width: 100});
```

#### Default [#default-38]

```ts
0
```

#### Inherited from [#inherited-from-56]

`MemoryCore.width`

***

### x? [#x-2]

\> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-29]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-57]

`MemoryCore.x`

***

### xAlign? [#xalign]

\> `optional` &#x2A;*xAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:242

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-58]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`xAlign`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#xalign)

***

### y? [#y-2]

\> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-30]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-59]

`MemoryCore.y`

***

### yAlign? [#yalign]

\> `optional` &#x2A;*yAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:252

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-60]

[`Live2DOptions`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions).[`yAlign`](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions#yalign)

***

### zIndex? [#zindex]

\> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-31]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-8]

* [Container#sortableChildren](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-39]

```ts
0
```

#### Inherited from [#inherited-from-61]

`MemoryCore.zIndex`


# Interface: Live2DOptions (/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions)



Defined in: [src/interfaces/Live2DOptions.ts:4](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DOptions.ts#L4)

## Extends [#extends]

* [`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).`ContainerOptions`

## Properties [#properties]

### accessible? [#accessible]

\> `optional` &#x2A;*accessible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

Flag for if the object is accessible. If true AccessibilityManager will overlay a
shadow div with attributes set

#### Default [#default]

```ts
false
```

#### Example [#example]

```js
const container = new Container();
container.accessible = true;
```

#### Inherited from [#inherited-from]

`ContainerOptions.accessible`

***

### accessibleChildren? [#accessiblechildren]

\> `optional` &#x2A;*accessibleChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to
be accessible. Defaults to true.

#### Default [#default-1]

```ts
true
```

#### Example [#example-1]

```js
const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false
```

#### Inherited from [#inherited-from-1]

`ContainerOptions.accessibleChildren`

***

### accessibleHint? [#accessiblehint]

\> `optional` &#x2A;*accessibleHint?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

#### Default [#default-2]

```ts
null
```

#### Advanced [#advanced]

#### Example [#example-2]

```js
const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';
```

#### Inherited from [#inherited-from-2]

`ContainerOptions.accessibleHint`

***

### accessiblePointerEvents? [#accessiblepointerevents]

\> `optional` &#x2A;*accessiblePointerEvents?**: `PointerEvents`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use
Defaults to auto.

#### Default [#default-3]

```ts
'auto'
```

#### Advanced [#advanced-1]

#### Example [#example-3]

```js
const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.
```

#### Inherited from [#inherited-from-3]

`ContainerOptions.accessiblePointerEvents`

***

### accessibleText? [#accessibletext]

\> `optional` &#x2A;*accessibleText?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

#### Default [#default-4]

```ts
null
```

#### Example [#example-4]

```js
const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';
```

#### Inherited from [#inherited-from-4]

`ContainerOptions.accessibleText`

***

### accessibleTitle? [#accessibletitle]

\> `optional` &#x2A;*accessibleTitle?**: `string` | `null`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

Sets the title attribute of the shadow div
If accessibleTitle AND accessibleHint has not been this will default to 'container \[tabIndex]'

#### Default [#default-5]

```ts
null
```

#### Example [#example-5]

```js
const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
```

#### Inherited from [#inherited-from-5]

`ContainerOptions.accessibleTitle`

***

### accessibleType? [#accessibletype]

\> `optional` &#x2A;*accessibleType?**: keyof HTMLElementTagNameMap

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

Specify the type of div the accessible layer is. Screen readers treat the element differently
depending on this type. Defaults to button.

#### Default [#default-6]

```ts
'button'
```

#### Advanced [#advanced-2]

#### Example [#example-6]

```js
const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.
```

#### Inherited from [#inherited-from-6]

`ContainerOptions.accessibleType`

***

### align? [#align]

\> `optional` &#x2A;*align?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:232

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-7]

`ContainerOptions.align`

***

### alpha? [#alpha]

\> `optional` &#x2A;*alpha?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:235

The opacity of the object relative to its parent's opacity.
Value ranges from 0 (fully transparent) to 1 (fully opaque).

#### Example [#example-7]

```ts
new Container({ alpha: 0.5 }); // 50% opacity
new Container({ alpha: 1 }); // Fully opaque
```

#### Default [#default-7]

```ts
1
```

#### See [#see]

* Container#visible For toggling visibility
* Container#renderable For render control

#### Inherited from [#inherited-from-8]

`ContainerOptions.alpha`

***

### anchor? [#anchor]

\> `optional` &#x2A;*anchor?**: `number` | `PointData`

Defined in: node\_modules/@drincs/pixi-vn/dist/canvas.d.ts:670

#### Inherited from [#inherited-from-9]

`ContainerOptions.anchor`

***

### anchorMode? [#anchormode]

\> `optional` &#x2A;*anchorMode?**: `"canvas"` | `"drawable"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4293

Defines which bounds are used to resolve the normalized [Live2DModel.anchor](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#anchor).
`'canvas'` preserves the historical model-canvas behavior, while `'drawable'`
resolves the anchor against the visible drawable bounds.

#### Default [#default-8]

```ts
'canvas'
```

#### Inherited from [#inherited-from-10]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`anchorMode`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#anchormode)

***

### angle? [#angle]

\> `optional` &#x2A;*angle?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:247

The angle of the object in degrees.

\> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
\> rotation is in radians, angle is in degrees.

#### Example [#example-8]

```ts
new Container({ angle: 45 }); // Rotate 45 degrees
new Container({ angle: 90 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-11]

`ContainerOptions.angle`

***

### autoFocus? [#autofocus]

\> `optional` &#x2A;*autoFocus?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4238

Automatically update the focus position when `globalpointermove` event is triggered.

#### Default [#default-9]

```ts
true
```

#### Inherited from [#inherited-from-12]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`autoFocus`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#autofocus)

***

### autoHitTest? [#autohittest]

\> `optional` &#x2A;*autoHitTest?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4233

Automatically hit-test the model when `pointertap` event is triggered.

#### Default [#default-10]

```ts
true
```

#### Inherited from [#inherited-from-13]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`autoHitTest`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#autohittest)

***

### ~~autoInteract?~~ [#autointeract]

\> `optional` &#x2A;*autoInteract?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4228

Should the internal model automatically reacts to interactions by listening for pointer events.

#### Default [#default-11]

```ts
true
```

#### Deprecated [#deprecated]

since v0.5.0, reading/writing this property is equivalent to reading/writing `autoHitTest && autoFocus`.

#### Inherited from [#inherited-from-14]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`autoInteract`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#autointeract)

***

### autoUpdate? [#autoupdate]

\> `optional` &#x2A;*autoUpdate?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4222

Should the internal model be automatically updated by `PIXI.Ticker.shared`.

#### Default [#default-12]

```ts
ture
```

#### Inherited from [#inherited-from-15]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`autoUpdate`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#autoupdate)

***

### blendMode? [#blendmode]

\> `optional` &#x2A;*blendMode?**: `BLEND_MODES`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:206

The blend mode to be applied to the sprite. Controls how pixels are blended when rendering.

Setting to 'normal' will reset to default blending.
\> \[!NOTE] More blend modes are available after importing the `pixi.js/advanced-blend-modes` sub-export.

#### Example [#example-9]

```ts
// Basic blend modes
new Container({ blendMode: 'normal' }); // Default blending
new Container({ blendMode: 'add' });    // Additive blending
new Container({ blendMode: 'multiply' }); // Multiply colors
new Container({ blendMode: 'screen' }); // Screen blend
```

#### Default [#default-13]

```ts
'normal'
```

#### See [#see-1]

* Container#alpha For transparency
* Container#tint For color adjustments

#### Inherited from [#inherited-from-16]

`ContainerOptions.blendMode`

***

### boundsArea? [#boundsarea]

\> `optional` &#x2A;*boundsArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:403

An optional bounds area for this container. Setting this rectangle will stop the renderer
from recursively measuring the bounds of each children and instead use this single boundArea.

\> \[!IMPORTANT] This is great for optimisation! If for example you have a
\> 1000 spinning particles and you know they all sit within a specific bounds,
\> then setting it will mean the renderer will not need to measure the
\> 1000 children to find the bounds. Instead it will just use the bounds you set.

#### Example [#example-10]

```ts
const container = new Container({
   boundsArea: new Rectangle(0, 0, 500, 500) // Set a fixed bounds area
});
```

#### Inherited from [#inherited-from-17]

`ContainerOptions.boundsArea`

***

### breathDepth? [#breathdepth]

\> `optional` &#x2A;*breathDepth?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3118

Define natural movements depth (0.0-1.0).

#### Default [#default-14]

```ts
1.0
```

#### Inherited from [#inherited-from-18]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`breathDepth`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#breathdepth)

***

### cacheAsTexture? [#cacheastexture]

\> `optional` &#x2A;*cacheAsTexture?**: (`val`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/cacheAsTextureMixin.d.ts:5

#### Parameters [#parameters]

##### val [#val]

`boolean` | `CacheAsTextureOptions`

#### Returns [#returns]

`void`

#### Inherited from [#inherited-from-19]

`ContainerOptions.cacheAsTexture`

***

### checkMocConsistency? [#checkmocconsistency]

\> `optional` &#x2A;*checkMocConsistency?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4051

Whether to check the consistency of the moc file. It's an internal
function of Cubism core and only available since Cubism 4 R7.

#### Default [#default-15]

```ts
false
```

#### Inherited from [#inherited-from-20]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`checkMocConsistency`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#checkmocconsistency)

***

### checkMotionConsistency? [#checkmotionconsistency]

\> `optional` &#x2A;*checkMotionConsistency?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4071

Whether to validate motion3.json consistency when loading motions.

#### Default [#default-16]

```ts
false
```

#### Inherited from [#inherited-from-21]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`checkMotionConsistency`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#checkmotionconsistency)

***

### children? [#children]

\> `readonly` `optional` &#x2A;*children?**: `ContainerChild`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:265

The array of children of this container. Each child must be a Container or extend from it.

The array is read-only, but its contents can be modified using Container methods.

#### Example [#example-11]

```ts
new Container({
   children: [
       new Container(), // First child
       new Container(), // Second child
   ],
});
```

#### See [#see-2]

* Container#addChild For adding children
* Container#removeChild For removing children

#### Inherited from [#inherited-from-22]

`ContainerOptions.children`

***

### crossOrigin? [#crossorigin]

\> `optional` &#x2A;*crossOrigin?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4056

String to use for crossOrigin properties on `<img>` elements when loading textures.

#### Default [#default-17]

```ts
undefined
```

#### Inherited from [#inherited-from-23]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`crossOrigin`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#crossorigin)

***

### cullable? [#cullable]

\> `optional` &#x2A;*cullable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:69

Controls whether this object should be culled when out of view.
When true, the object will not be rendered if its bounds are outside the visible area.

#### Example [#example-12]

```ts
const sprite = new Sprite(texture);

// Enable culling
sprite.cullable = true;

// Force object to always render
sprite.cullable = false;
```

#### Remarks [#remarks]

* Does not affect transform updates
* Applies to this object only
* Children follow their own cullable setting

#### Default [#default-18]

```ts
false
```

#### Inherited from [#inherited-from-24]

`ContainerOptions.cullable`

***

### cullableChildren? [#cullablechildren]

\> `optional` &#x2A;*cullableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:92

Controls whether children of this container can be culled.
When false, skips recursive culling checks for better performance.

#### Example [#example-13]

```ts
const container = new Container();

// Enable container culling
container.cullable = true;

// Disable child culling for performance
container.cullableChildren = false;

// Children will always render if container is visible
container.addChild(sprite1, sprite2, sprite3);
```

#### Remarks [#remarks-1]

* Improves performance for static scenes
* Useful when children are always within container bounds
* Parent culling still applies

#### Default [#default-19]

```ts
true
```

#### Inherited from [#inherited-from-25]

`ContainerOptions.cullableChildren`

***

### cullArea? [#cullarea]

\> `optional` &#x2A;*cullArea?**: `Rectangle`

Defined in: node\_modules/pixi.js/lib/culling/cullingMixin.d.ts:49

Custom shape used for culling calculations instead of object bounds.
Defined in local space coordinates relative to the object.
\> \[!NOTE]
\> Setting this to a custom Rectangle allows you to define a specific area for culling,
\> which can improve performance by avoiding expensive bounds calculations.

#### Example [#example-14]

```ts
const container = new Container();

// Define custom culling boundary
container.cullArea = new Rectangle(0, 0, 800, 600);

// Reset to use object bounds
container.cullArea = null;
```

#### Remarks [#remarks-2]

* Improves performance by avoiding bounds calculations
* Useful for containers with many children
* Set to null to use object bounds

#### Default [#default-20]

```ts
null
```

#### Inherited from [#inherited-from-26]

`ContainerOptions.cullArea`

***

### cursor? [#cursor]

\> `optional` &#x2A;*cursor?**: `Cursor` | `string` & `object`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:187

The cursor style to display when the mouse pointer is hovering over the object.
Accepts any valid CSS cursor value or custom cursor URL.

#### Example [#example-15]

```ts
// Common cursor types
sprite.cursor = 'pointer';     // Hand cursor for clickable elements
sprite.cursor = 'grab';        // Grab cursor for draggable elements
sprite.cursor = 'crosshair';   // Precise cursor for selection
sprite.cursor = 'not-allowed'; // Indicate disabled state

// Direction cursors
sprite.cursor = 'n-resize';    // North resize
sprite.cursor = 'ew-resize';   // East-west resize
sprite.cursor = 'nesw-resize'; // Northeast-southwest resize

// Custom cursor with fallback
sprite.cursor = 'url("custom.png"), auto';
sprite.cursor = 'url("cursor.cur") 2 2, pointer'; // With hotspot offset
```

#### Default [#default-21]

```ts
undefined
```

#### See [#see-3]

* EventSystem.cursorStyles For setting global cursor styles
* [https://developer.mozilla.org/en-US/docs/Web/CSS/cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) MDN Cursor Documentation

#### Inherited from [#inherited-from-27]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`cursor`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#cursor)

***

### eventMode? [#eventmode]

\> `optional` &#x2A;*eventMode?**: `EventMode`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:225

Enable interaction events for the Container. Touch, pointer and mouse events are supported.

#### Example [#example-16]

```ts
const sprite = new Sprite(texture);

// Enable standard interaction (like buttons)
sprite.eventMode = 'static';
sprite.on('pointerdown', () => console.log('clicked!'));

// Enable for moving objects
sprite.eventMode = 'dynamic';
sprite.on('pointermove', () => updatePosition());

// Disable all interaction
sprite.eventMode = 'none';

// Only allow child interactions
sprite.eventMode = 'passive';
```

Available modes:

* `'none'`: Ignores all interaction events, even on its children. Best for pure visuals.
* `'passive'&#x60;: &#x2A;*(default)** Does not emit events and ignores hit testing on itself and non-interactive
  children. Interactive children will still emit events.
* `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7.
* `'static'`: Emit events and is hit tested. Same as `interactive = true` in v7. Best for buttons/UI.
* `'dynamic'`: Like static but also receives synthetic events when pointer is idle. Best for moving objects.

Performance tips:

* Use `'none'` for pure visual elements
* Use `'passive'` for containers with some interactive children
* Use `'static'` for standard UI elements
* Use `'dynamic'` only when needed for moving/animated elements

#### Since [#since]

7.2.0

#### Inherited from [#inherited-from-28]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`eventMode`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

***

### eyeBlink? [#eyeblink]

\> `optional` &#x2A;*eyeBlink?**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3133

Whether to enable automatic eye blinking between motions.

#### Default [#default-22]

```ts
true
```

#### Inherited from [#inherited-from-29]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`eyeBlink`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#eyeblink)

***

### filters? [#filters]

\> `optional` &#x2A;*filters?**: `Filter` | readonly `Filter`\[]

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:37

Sets the filters for the displayObject.
Filters are visual effects that can be applied to any display object and its children.

\> \[!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

#### Example [#example-17]

```ts
new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});
```

#### See [#see-4]

Filter For filter base class

#### Inherited from [#inherited-from-30]

`ContainerOptions.filters`

***

### height? [#height]

\> `optional` &#x2A;*height?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:29

The height of the display object, in pixels.

#### Example [#example-18]

```ts
new Container({ height: 100});
```

#### Default [#default-23]

```ts
0
```

#### Inherited from [#inherited-from-31]

`ContainerOptions.height`

***

### hitArea? [#hitarea]

\> `optional` &#x2A;*hitArea?**: `IHitArea` | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:297

Defines a custom hit area for pointer interaction testing. When set, this shape will be used
for hit testing instead of the container's standard bounds.

#### Example [#example-19]

```ts
import { Rectangle, Circle, Sprite } from 'pixi.js';

// Rectangular hit area
const button = new Sprite(texture);
button.eventMode = 'static';
button.hitArea = new Rectangle(0, 0, 100, 50);

// Circular hit area
const icon = new Sprite(texture);
icon.eventMode = 'static';
icon.hitArea = new Circle(32, 32, 32);

// Custom hit area with polygon
const custom = new Sprite(texture);
custom.eventMode = 'static';
custom.hitArea = new Polygon([0,0, 100,0, 100,100, 0,100]);

// Custom hit testing logic
sprite.hitArea = {
    contains(x: number, y: number) {
        // Custom collision detection
        return x >= 0 && x <= width && y >= 0 && y <= height;
    }
};
```

#### Remarks [#remarks-3]

* Takes precedence over the container's bounds for hit testing
* Can improve performance by simplifying collision checks
* Useful for irregular shapes or precise click areas

#### Inherited from [#inherited-from-32]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`hitArea`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#hitarea)

***

### idleMotionGroup? [#idlemotiongroup]

\> `optional` &#x2A;*idleMotionGroup?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3336

Specifies the idle motion group.

#### Default [#default-24]

```ts
"idle" in Cubism 2 and "Idle" in Cubism 4.
```

#### Inherited from [#inherited-from-33]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`idleMotionGroup`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#idlemotiongroup)

***

### interactive? [#interactive]

\> `optional` &#x2A;*interactive?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:238

Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`.
Setting this to true will enable interaction events like `pointerdown`, `click`, etc.
Setting it to false will disable all interaction events on this object.

#### See [#see-5]

[Container.eventMode](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#eventmode)

#### Example [#example-20]

```ts
// Enable interaction events
sprite.interactive = true;  // Sets eventMode = 'static'
sprite.interactive = false; // Sets eventMode = 'passive'
```

#### Inherited from [#inherited-from-34]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactive`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactive)

***

### interactiveChildren? [#interactivechildren]

\> `optional` &#x2A;*interactiveChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:261

Controls whether children of this container can receive pointer events.

Setting this to false allows PixiJS to skip hit testing on all children,
improving performance for containers with many non-interactive children.

#### Default [#default-25]

```ts
true
```

#### Example [#example-21]

```ts
// Container with many visual-only children
const container = new Container();
container.interactiveChildren = false; // Skip hit testing children

// Menu with interactive buttons
const menu = new Container();
menu.interactiveChildren = true; // Test all children
menu.addChild(button1, button2, button3);

// Performance optimization
background.interactiveChildren = false;
foreground.interactiveChildren = true;
```

#### Inherited from [#inherited-from-35]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`interactiveChildren`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#interactivechildren)

***

### isRenderGroup? [#isrendergroup]

\> `optional` &#x2A;*isRenderGroup?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:188

#### See [#see-6]

Container#isRenderGroup

#### Inherited from [#inherited-from-36]

`ContainerOptions.isRenderGroup`

***

### label? [#label]

\> `optional` &#x2A;*label?**: `string`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:8

The instance label of the object.

#### Default [#default-26]

```ts
null
```

#### Inherited from [#inherited-from-37]

`ContainerOptions.label`

***

### lipSyncGain? [#lipsyncgain]

\> `optional` &#x2A;*lipSyncGain?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3123

Gain multiplier applied to the analyzed mouth-sync input value.

#### Default [#default-27]

```ts
1.5
```

#### Inherited from [#inherited-from-38]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`lipSyncGain`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#lipsyncgain)

***

### lipSyncWeight? [#lipsyncweight]

\> `optional` &#x2A;*lipSyncWeight?**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3128

Blend weight used when adding lip-sync values to mouth parameters.

#### Default [#default-28]

```ts
0.4
```

#### Inherited from [#inherited-from-39]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`lipSyncWeight`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#lipsyncweight)

***

### mask? [#mask]

\> `optional` &#x2A;*mask?**: `Mask`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:22

The mask to apply, which can be a Container or null.

If null, it clears the existing mask.

#### Example [#example-22]

````ts
// Set a mask
sprite.setMask({
    mask: graphics,
    inverse: false,
});

#### Inherited from

`ContainerOptions.mask`

***

### motionPreload?

> `optional` **motionPreload?**: [`MotionPreloadStrategy`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPreloadStrategy)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3331

How to preload the motions.

#### Default

[MotionPreloadStrategy.NONE](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPreloadStrategy#none)

#### Inherited from

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`motionPreload`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#motionpreload)

***

### onclick?

> `optional` **onclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`\> \| `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:317

Property-based event handler for the `click` event.
Fired when a pointer device (mouse, touch, etc.) completes a click action.

#### Example

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('click', (event) =&gt; {
   console.log('Sprite clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onclick = (event) =&gt; {
    console.log('Clicked at:', event.global.x, event.global.y);
};
````

#### Default [#default-29]

```ts
null
```

#### Inherited from [#inherited-from-40]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onclick`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onclick)

***

### onglobalmousemove? [#onglobalmousemove]

> `optional` &#x2A;*onglobalmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:430

Property-based event handler for the `globalmousemove` event.

Fired when the mouse moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-23]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalmousemove', (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
});
// Using property-based handler
sprite.onglobalmousemove = (event) =&gt; {
    // Move sprite to mouse position
    sprite.position.copyFrom(event.global);
};
```

#### Default [#default-30]

```ts
null
```

#### Remarks [#remarks-4]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-41]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobalmousemove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobalmousemove)

***

### onglobalpointermove? [#onglobalpointermove]

> `optional` &#x2A;*onglobalpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:637

Property-based event handler for the `globalpointermove` event.

Fired when the pointer moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-24]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globalpointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobalpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-31]

```ts
null
```

#### Remarks [#remarks-5]

* Fires even when the mouse is outside the object's bounds
* Useful for drag operations or global mouse tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globaltouchmove`

#### Inherited from [#inherited-from-42]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobalpointermove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobalpointermove)

***

### onglobaltouchmove? [#onglobaltouchmove]

> `optional` &#x2A;*onglobaltouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:947

Property-based event handler for the `globaltouchmove` event.

Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object.
The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.

#### Example [#example-25]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('globaltouchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onglobaltouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-32]

```ts
null
```

#### Remarks [#remarks-6]

* Fires even when the touch is outside the object's bounds
* Useful for drag operations or global touch tracking
* Must have `eventMode` set appropriately to receive events
* Part of the global move events family along with `globalpointermove` and `globalmousemove`

#### Inherited from [#inherited-from-43]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onglobaltouchmove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onglobaltouchmove)

***

### onmousedown? [#onmousedown]

> `optional` &#x2A;*onmousedown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:339

Property-based event handler for the `mousedown` event.
Fired when a mouse button is pressed while the pointer is over the object.

#### Example [#example-26]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousedown', (event) =&gt; {
   sprite.alpha = 0.5; // Visual feedback
   console.log('Mouse button:', event.button);
});
// Using property-based handler
sprite.onmousedown = (event) =&gt; {
    sprite.alpha = 0.5; // Visual feedback
    console.log('Mouse button:', event.button);
};
```

#### Default [#default-33]

```ts
null
```

#### Inherited from [#inherited-from-44]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmousedown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmousedown)

***

### onmouseenter? [#onmouseenter]

> `optional` &#x2A;*onmouseenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:359

Property-based event handler for the `mouseenter` event.
Fired when the mouse pointer enters the bounds of the object. Does not bubble.

#### Example [#example-27]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseenter', (event) =&gt; {
    sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseenter = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-34]

```ts
null
```

#### Inherited from [#inherited-from-45]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseenter`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseenter)

***

### onmouseleave? [#onmouseleave]

> `optional` &#x2A;*onmouseleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:379

Property-based event handler for the `mouseleave` event.
Fired when the pointer leaves the bounds of the display object. Does not bubble.

#### Example [#example-28]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseleave', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-35]

```ts
null
```

#### Inherited from [#inherited-from-46]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseleave`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseleave)

***

### onmousemove? [#onmousemove]

> `optional` &#x2A;*onmousemove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:401

Property-based event handler for the `mousemove` event.
Fired when the pointer moves while over the display object.

#### Example [#example-29]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mousemove', (event) =&gt; {
   // Get coordinates relative to the sprite
  console.log('Local:', event.getLocalPosition(sprite));
});
// Using property-based handler
sprite.onmousemove = (event) =&gt; {
    // Get coordinates relative to the sprite
    console.log('Local:', event.getLocalPosition(sprite));
};
```

#### Default [#default-36]

```ts
null
```

#### Inherited from [#inherited-from-47]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmousemove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmousemove)

***

### onmouseout? [#onmouseout]

> `optional` &#x2A;*onmouseout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:450

Property-based event handler for the `mouseout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-30]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseout = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-37]

```ts
null
```

#### Inherited from [#inherited-from-48]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseout`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseout)

***

### onmouseover? [#onmouseover]

> `optional` &#x2A;*onmouseover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:470

Property-based event handler for the `mouseover` event.
Fired when the pointer moves onto the bounds of the display object.

#### Example [#example-31]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseover', (event) =&gt; {
     sprite.scale.set(1.1);
});
// Using property-based handler
sprite.onmouseover = (event) =&gt; {
    sprite.scale.set(1.1);
};
```

#### Default [#default-38]

```ts
null
```

#### Inherited from [#inherited-from-49]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseover`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseover)

***

### onmouseup? [#onmouseup]

> `optional` &#x2A;*onmouseup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:490

Property-based event handler for the `mouseup` event.
Fired when a mouse button is released over the display object.

#### Example [#example-32]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseup = (event) =&gt; {
     sprite.scale.set(1.0);
};
```

#### Default [#default-39]

```ts
null
```

#### Inherited from [#inherited-from-50]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseup)

***

### onmouseupoutside? [#onmouseupoutside]

> `optional` &#x2A;*onmouseupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:511

Property-based event handler for the `mouseupoutside` event.
Fired when a mouse button is released outside the display object that initially
registered a mousedown.

#### Example [#example-33]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('mouseupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onmouseupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-40]

```ts
null
```

#### Inherited from [#inherited-from-51]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onmouseupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onmouseupoutside)

***

### onpointercancel? [#onpointercancel]

> `optional` &#x2A;*onpointercancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:531

Property-based event handler for the `pointercancel` event.
Fired when a pointer device interaction is canceled or lost.

#### Example [#example-34]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointercancel', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointercancel = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-41]

```ts
null
```

#### Inherited from [#inherited-from-52]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointercancel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointercancel)

***

### onpointerdown? [#onpointerdown]

> `optional` &#x2A;*onpointerdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:551

Property-based event handler for the `pointerdown` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.

#### Example [#example-35]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerdown', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointerdown = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-42]

```ts
null
```

#### Inherited from [#inherited-from-53]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerdown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerdown)

***

### onpointerenter? [#onpointerenter]

> `optional` &#x2A;*onpointerenter?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:571

Property-based event handler for the `pointerenter` event.
Fired when a pointer device enters the bounds of the display object. Does not bubble.

#### Example [#example-36]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerenter', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerenter = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-43]

```ts
null
```

#### Inherited from [#inherited-from-54]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerenter`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerenter)

***

### onpointerleave? [#onpointerleave]

> `optional` &#x2A;*onpointerleave?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:590

Property-based event handler for the `pointerleave` event.
Fired when a pointer device leaves the bounds of the display object. Does not bubble.

#### Example [#example-37]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';
// Using emitter handler
sprite.on('pointerleave', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerleave = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-44]

```ts
null
```

#### Inherited from [#inherited-from-55]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerleave`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerleave)

***

### onpointermove? [#onpointermove]

> `optional` &#x2A;*onpointermove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:610

Property-based event handler for the `pointermove` event.
Fired when a pointer device moves while over the display object.

#### Example [#example-38]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointermove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointermove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-45]

```ts
null
```

#### Inherited from [#inherited-from-56]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointermove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointermove)

***

### onpointerout? [#onpointerout]

> `optional` &#x2A;*onpointerout?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:657

Property-based event handler for the `pointerout` event.
Fired when the pointer moves out of the bounds of the display object.

#### Example [#example-39]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerout', (event) =&gt; {
   sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerout = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-46]

```ts
null
```

#### Inherited from [#inherited-from-57]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerout`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerout)

***

### onpointerover? [#onpointerover]

> `optional` &#x2A;*onpointerover?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:677

Property-based event handler for the `pointerover` event.
Fired when the pointer moves over the bounds of the display object.

#### Example [#example-40]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerover', (event) =&gt; {
    sprite.scale.set(1.2);
});
// Using property-based handler
sprite.onpointerover = (event) =&gt; {
    sprite.scale.set(1.2);
};
```

#### Default [#default-47]

```ts
null
```

#### Inherited from [#inherited-from-58]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerover`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerover)

***

### onpointertap? [#onpointertap]

> `optional` &#x2A;*onpointertap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:697

Property-based event handler for the `pointertap` event.
Fired when a pointer device completes a tap action (e.g., touch or mouse click).

#### Example [#example-41]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointertap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onpointertap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-48]

```ts
null
```

#### Inherited from [#inherited-from-59]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointertap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointertap)

***

### onpointerup? [#onpointerup]

> `optional` &#x2A;*onpointerup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:717

Property-based event handler for the `pointerup` event.
Fired when a pointer device button (mouse, touch, pen, etc.) is released.

#### Example [#example-42]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-49]

```ts
null
```

#### Inherited from [#inherited-from-60]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerup)

***

### onpointerupoutside? [#onpointerupoutside]

> `optional` &#x2A;*onpointerupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:738

Property-based event handler for the `pointerupoutside` event.
Fired when a pointer device button is released outside the bounds of the display object
that initially registered a pointerdown.

#### Example [#example-43]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('pointerupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onpointerupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-50]

```ts
null
```

#### Inherited from [#inherited-from-61]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onpointerupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onpointerupoutside)

***

### onRender? [#onrender]

> `optional` &#x2A;*onRender?**: ((`renderer`) => `void`) | `null`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/onRenderMixin.d.ts:25

This callback is used when the container is rendered. It runs every frame during the render process,
making it ideal for per-frame updates and animations.

> \[!NOTE] In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
> and "updateTransform" is no longer called every frame

#### Example [#example-44]

```ts
// Basic rotation animation
const container = new Container();
container.onRender = () =&gt; {
    container.rotation += 0.01;
};

// Cleanup when done
container.onRender = null; // Removes callback
```

#### Param [#param]

**renderer**

The renderer instance

#### See [#see-7]

Renderer For renderer capabilities

#### Inherited from [#inherited-from-62]

`ContainerOptions.onRender`

***

### onrightclick? [#onrightclick]

> `optional` &#x2A;*onrightclick?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:758

Property-based event handler for the `rightclick` event.
Fired when a right-click (context menu) action is performed on the object.

#### Example [#example-45]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightclick', (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.onrightclick = (event) =&gt; {
    console.log('Right-clicked at:', event.global.x, event.global.y);
};
```

#### Default [#default-51]

```ts
null
```

#### Inherited from [#inherited-from-63]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightclick`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightclick)

***

### onrightdown? [#onrightdown]

> `optional` &#x2A;*onrightdown?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:778

Property-based event handler for the `rightdown` event.
Fired when a right mouse button is pressed down over the display object.

#### Example [#example-46]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightdown', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.onrightdown = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-52]

```ts
null
```

#### Inherited from [#inherited-from-64]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightdown`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightdown)

***

### onrightup? [#onrightup]

> `optional` &#x2A;*onrightup?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:798

Property-based event handler for the `rightup` event.
Fired when a right mouse button is released over the display object.

#### Example [#example-47]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightup', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightup = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-53]

```ts
null
```

#### Inherited from [#inherited-from-65]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightup`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightup)

***

### onrightupoutside? [#onrightupoutside]

> `optional` &#x2A;*onrightupoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:819

Property-based event handler for the `rightupoutside` event.
Fired when a right mouse button is released outside the bounds of the display object
that initially registered a rightdown.

#### Example [#example-48]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('rightupoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.onrightupoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-54]

```ts
null
```

#### Inherited from [#inherited-from-66]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onrightupoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onrightupoutside)

***

### ontap? [#ontap]

> `optional` &#x2A;*ontap?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:839

Property-based event handler for the `tap` event.
Fired when a tap action (touch) is completed on the object.

#### Example [#example-49]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('tap', (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontap = (event) =&gt; {
    console.log('Sprite tapped at:', event.global.x, event.global.y);
};
```

#### Default [#default-55]

```ts
null
```

#### Inherited from [#inherited-from-67]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontap`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontap)

***

### ontouchcancel? [#ontouchcancel]

> `optional` &#x2A;*ontouchcancel?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:859

Property-based event handler for the `touchcancel` event.
Fired when a touch interaction is canceled, such as when the touch is interrupted.

#### Example [#example-50]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchcancel', (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchcancel = (event) =&gt; {
    console.log('Touch canceled at:', event.global.x, event.global.y);
};
```

#### Default [#default-56]

```ts
null
```

#### Inherited from [#inherited-from-68]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchcancel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchcancel)

***

### ontouchend? [#ontouchend]

> `optional` &#x2A;*ontouchend?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:879

Property-based event handler for the `touchend` event.
Fired when a touch interaction ends, such as when the finger is lifted from the screen.

#### Example [#example-51]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchend', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchend = (event) =&gt; {
   sprite.scale.set(1.0);
};
```

#### Default [#default-57]

```ts
null
```

#### Inherited from [#inherited-from-69]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchend`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchend)

***

### ontouchendoutside? [#ontouchendoutside]

> `optional` &#x2A;*ontouchendoutside?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:900

Property-based event handler for the `touchendoutside` event.
Fired when a touch interaction ends outside the bounds of the display object
that initially registered a touchstart.

#### Example [#example-52]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchendoutside', (event) =&gt; {
    sprite.scale.set(1.0);
});
// Using property-based handler
sprite.ontouchendoutside = (event) =&gt; {
    sprite.scale.set(1.0);
};
```

#### Default [#default-58]

```ts
null
```

#### Inherited from [#inherited-from-70]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchendoutside`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchendoutside)

***

### ontouchmove? [#ontouchmove]

> `optional` &#x2A;*ontouchmove?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:920

Property-based event handler for the `touchmove` event.
Fired when a touch interaction moves while over the display object.

#### Example [#example-53]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchmove', (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
});
// Using property-based handler
sprite.ontouchmove = (event) =&gt; {
    sprite.position.set(event.global.x, event.global.y);
};
```

#### Default [#default-59]

```ts
null
```

#### Inherited from [#inherited-from-71]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchmove`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchmove)

***

### ontouchstart? [#ontouchstart]

> `optional` &#x2A;*ontouchstart?**: `FederatedEventHandler`\<`FederatedPointerEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:967

Property-based event handler for the `touchstart` event.
Fired when a touch interaction starts, such as when a finger touches the screen.

#### Example [#example-54]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('touchstart', (event) =&gt; {
    sprite.scale.set(0.9);
});
// Using property-based handler
sprite.ontouchstart = (event) =&gt; {
    sprite.scale.set(0.9);
};
```

#### Default [#default-60]

```ts
null
```

#### Inherited from [#inherited-from-72]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`ontouchstart`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#ontouchstart)

***

### onwheel? [#onwheel]

> `optional` &#x2A;*onwheel?**: `FederatedEventHandler`\<`FederatedWheelEvent`> | `null`

Defined in: node\_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:989

Property-based event handler for the `wheel` event.
Fired when the mouse wheel is scrolled while over the display object.

#### Example [#example-55]

```ts
const sprite = new Sprite(texture);
sprite.eventMode = 'static';

// Using emitter handler
sprite.on('wheel', (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
});
// Using property-based handler
sprite.onwheel = (event) =&gt; {
    sprite.scale.x += event.deltaY * 0.01; // Zoom in/out
    sprite.scale.y += event.deltaY * 0.01; // Zoom in/out
};
```

#### Default [#default-61]

```ts
null
```

#### Inherited from [#inherited-from-73]

[`Live2DModel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel).[`onwheel`](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#onwheel)

***

### origin? [#origin]

> `optional` &#x2A;*origin?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:334

The origin point around which the container rotates and scales.
Unlike pivot, changing origin will not move the container's position.

#### Example [#example-56]

```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)
```

#### Inherited from [#inherited-from-74]

`ContainerOptions.origin`

***

### parent? [#parent]

> `readonly` `optional` &#x2A;*parent?**: `Container`\<`ContainerChild`>

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:273

The display object container that contains this display object.
This represents the parent-child relationship in the display tree.

#### See [#see-8]

* Container#addChild For adding to a parent
* Container#removeChild For removing from parent

#### Inherited from [#inherited-from-75]

`ContainerOptions.parent`

***

### percentagePosition? [#percentageposition]

> `optional` &#x2A;*percentagePosition?**: `number` | `Partial`\<`PointData`>

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:262

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-76]

`ContainerOptions.percentagePosition`

***

### percentageX? [#percentagex]

> `optional` &#x2A;*percentageX?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:272

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-77]

`ContainerOptions.percentageX`

***

### percentageY? [#percentagey]

> `optional` &#x2A;*percentageY?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:282

is a way to set the position of the element in the canvas calculated in percentage.
For example, if you set the PixiContainer.pivot to 0.5, and:

* if you set percentagePosition to 0.5, the element will be in the center of the canvas.
* If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
* If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does affect the percentagePosition.

#### Inherited from [#inherited-from-78]

`ContainerOptions.percentageY`

***

### pivot? [#pivot]

> `optional` &#x2A;*pivot?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:323

The center of rotation, scaling, and skewing for this display object in its local space.
The `position` is the projection of `pivot` in the parent's local space.

By default, the pivot is the origin (0, 0).

#### Example [#example-57]

```ts
new Container({ pivot: new Point(100, 200) }); // Set pivot to (100, 200)
new Container({ pivot: 50 }); // Set pivot to (50, 50)
new Container({ pivot: { x: 150, y: 150 } }); // Set pivot to (150, 150)
```

#### Inherited from [#inherited-from-79]

`ContainerOptions.pivot`

***

### position? [#position]

> `optional` &#x2A;*position?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:343

The coordinate of the object relative to the local coordinates of the parent.

#### Example [#example-58]

```ts
new Container({ position: new Point(100, 200) }); // Set position to (100, 200)
new Container({ position: { x: 150, y: 150 } }); // Set position to (150, 150)
```

#### Inherited from [#inherited-from-80]

`ContainerOptions.position`

***

### renderable? [#renderable]

> `optional` &#x2A;*renderable?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:286

Controls whether this object can be rendered. If false the object will not be drawn,
but the transform will still be updated. This is different from visible, which skips
transform updates.

#### Example [#example-59]

```ts
new Container({ renderable: false }); // Will not be drawn, but transforms will update
```

#### Default [#default-62]

```ts
true
```

#### See [#see-9]

* Container#visible For skipping transform updates
* Container#alpha For transparency

#### Inherited from [#inherited-from-81]

`ContainerOptions.renderable`

***

### rotation? [#rotation]

> `optional` &#x2A;*rotation?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:298

The rotation of the object in radians.

> \[!NOTE] 'rotation' and 'angle' have the same effect on a display object;
> rotation is in radians, angle is in degrees.

#### Example [#example-60]

```ts
new Container({ rotation: Math.PI / 4 }); // Rotate 45 degrees
new Container({ rotation: Math.PI / 2 }); // Rotate 90 degrees
```

#### Inherited from [#inherited-from-82]

`ContainerOptions.rotation`

***

### scale? [#scale]

> `optional` &#x2A;*scale?**: `number` | `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:310

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

#### Example [#example-61]

```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
```

#### Inherited from [#inherited-from-83]

`ContainerOptions.scale`

***

### setMask? [#setmask]

> `optional` &#x2A;*setMask?**: (`options`) => `void`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:23

#### Parameters [#parameters-1]

##### options [#options]

`Partial`\<`MaskOptionsAndMask`>

#### Returns [#returns-1]

`void`

#### Inherited from [#inherited-from-84]

`ContainerOptions.setMask`

***

### skew? [#skew]

> `optional` &#x2A;*skew?**: `PointData`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:354

The skew factor for the object in radians. Skewing is a transformation that distorts
the object by rotating it differently at each point, creating a non-uniform shape.

#### Example [#example-62]

```ts
new Container({ skew: new Point(0.1, 0.2) }); // Skew by 0.1 radians on x and 0.2 radians on y
new Container({ skew: { x: 0.1, y: 0.2 } }); // Skew by 0.1 radians on x and 0.2 radians on y
```

#### Default [#default-63]

```ts
{ x: 0, y: 0 }
```

#### Inherited from [#inherited-from-85]

`ContainerOptions.skew`

***

### sortableChildren? [#sortablechildren]

> `optional` &#x2A;*sortableChildren?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:48

If set to true, the container will sort its children by `zIndex` value
when the next render is called, or manually if `sortChildren()` is called.

This actually changes the order of elements in the array of children,
so it will affect the rendering order.

> \[!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function,
> as the `zIndex` sorting may cause the child to automatically sorted to another position.

#### Example [#example-63]

```ts
container.sortableChildren = true;
```

#### Default [#default-64]

```ts
false
```

#### Inherited from [#inherited-from-86]

`ContainerOptions.sortableChildren`

***

### sortDirty? [#sortdirty]

> `optional` &#x2A;*sortDirty?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:32

**`Internal`**

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

#### Default [#default-65]

```ts
false
@internal
```

#### Inherited from [#inherited-from-87]

`ContainerOptions.sortDirty`

***

### source [#source]

> **source**: `string`

Defined in: [src/interfaces/Live2DOptions.ts:11](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/Live2DOptions.ts#L11)

The model settings file URL (e.g. `model.model3.json` or `model.model.json`), or an
alias registered with Pixi's `Assets` (e.g. via `Assets.add({ alias, src })`). If
`source` matches a registered alias, it is resolved through `Assets`; otherwise it's
treated as a direct URL.

***

### tabIndex? [#tabindex]

> `optional` &#x2A;*tabIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the
elements when using the tab key to navigate.

#### Default [#default-66]

```ts
0
```

#### Example [#example-64]

```js
const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;
```

#### Inherited from [#inherited-from-88]

`ContainerOptions.tabIndex`

***

### textureOptions? [#textureoptions]

> `optional` &#x2A;*textureOptions?**: [`Live2DTextureSourceOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureSourceOptions)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4079

Texture loading and atlas LOD options.

See [Live2DTextureLODOptions](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DTextureLODOptions) for the available `lod` strategies.

#### Default [#default-67]

```ts
{ lod: 'full' }
```

#### Inherited from [#inherited-from-89]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`textureOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#textureoptions)

***

### ticker? [#ticker]

> `optional` &#x2A;*ticker?**: `Ticker`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4243

The ticker to be used for automatic updates.

#### Default [#default-68]

`PIXI.Ticker.shared` from the global PIXI namespace.

#### Inherited from [#inherited-from-90]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`ticker`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#ticker)

***

### tint? [#tint]

> `optional` &#x2A;*tint?**: `ColorSource`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:222

The tint applied to the sprite.

This can be any valid ColorSource.

#### Example [#example-65]

```ts
new Container({ tint: 0xff0000 }); // Red tint
new Container({ tint: 'blue' }); // Blue tint
new Container({ tint: '#00ff00' }); // Green tint
new Container({ tint: 'rgb(0,0,255)' }); // Blue tint
```

#### Default [#default-69]

```ts
0xFFFFFF
```

#### See [#see-10]

* Container#alpha For transparency
* Container#visible For visibility control

#### Inherited from [#inherited-from-91]

`ContainerOptions.tint`

***

### useHighPrecisionMask? [#usehighprecisionmask]

> `optional` &#x2A;*useHighPrecisionMask?**: `boolean` | `"auto"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3139

Whether to use Cubism's high precision clipping mask rendering.
Only supported by Cubism 3/4/5 models.

#### Default [#default-70]

```ts
'auto'
```

#### Inherited from [#inherited-from-92]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`useHighPrecisionMask`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#usehighprecisionmask)

***

### visible? [#visible]

> `optional` &#x2A;*visible?**: `boolean`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:367

The visibility of the object. If false the object will not be drawn,
and the transform will not be updated.

#### Example [#example-66]

```ts
new Container({ visible: false }); // Will not be drawn and transforms will not update
new Container({ visible: true }); // Will be drawn and transforms will update
```

#### Default [#default-71]

```ts
true
```

#### See [#see-11]

* Container#renderable For render-only control
* Container#alpha For transparency

#### Inherited from [#inherited-from-93]

`ContainerOptions.visible`

***

### width? [#width]

> `optional` &#x2A;*width?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:20

The width of the display object, in pixels.

#### Example [#example-67]

```ts
new Container({ width: 100});
```

#### Default [#default-72]

```ts
0
```

#### Inherited from [#inherited-from-94]

`ContainerOptions.width`

***

### x? [#x]

> `optional` &#x2A;*x?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:377

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

#### Example [#example-68]

```ts
new Container({ x: 100 }); // Set x position to 100
```

#### Inherited from [#inherited-from-95]

`ContainerOptions.x`

***

### xAlign? [#xalign]

> `optional` &#x2A;*xAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:242

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-96]

`ContainerOptions.xAlign`

***

### y? [#y]

> `optional` &#x2A;*y?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/Container.d.ts:387

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

#### Example [#example-69]

```ts
new Container({ y: 200 }); // Set y position to 200
```

#### Inherited from [#inherited-from-97]

`ContainerOptions.y`

***

### yAlign? [#yalign]

> `optional` &#x2A;*yAlign?**: `number`

Defined in: node\_modules/@drincs/pixi-vn/dist/ContainerMemory-D2HtgX7w\.d.ts:252

is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
For example:

* if you set align to 0.5, the element will be in the center of the canvas.
* if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
* if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.

**Important:** The PixiContainer.pivot field does not affect the alignment.

#### Inherited from [#inherited-from-98]

`ContainerOptions.yAlign`

***

### zIndex? [#zindex]

> `optional` &#x2A;*zIndex?**: `number`

Defined in: node\_modules/pixi.js/lib/scene/container/container-mixins/sortMixin.d.ts:24

The zIndex of the container.

Controls the rendering order of children within their parent container.

A higher value will mean it will be moved towards the front of the rendering order.

#### Example [#example-70]

```ts
// Add in any order
container.addChild(character, background, foreground);

// Adjust rendering order
background.zIndex = 0;
character.zIndex = 1;
foreground.zIndex = 2;
```

#### See [#see-12]

* [Container#sortableChildren](/jsdoc/pixi-vn-live2d/core/classes/Live2DModel#sortablechildren) For enabling sorting
* Container#sortChildren For manual sorting

#### Default [#default-73]

```ts
0
```

#### Inherited from [#inherited-from-99]

`ContainerOptions.zIndex`

## Methods [#methods]

### onError()? [#onerror]

> `optional` **onError**(`e`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4066

Callback invoked when error occurs while loading the model.

#### Parameters [#parameters-2]

##### e [#e]

`Error`

#### Returns [#returns-2]

`void`

#### Default [#default-74]

```ts
undefined
```

#### Inherited from [#inherited-from-100]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`onError`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#onerror)

***

### onLoad()? [#onload]

> `optional` **onLoad**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4061

Callback invoked when the model has been loaded.

#### Returns [#returns-3]

`void`

#### Default [#default-75]

```ts
undefined
```

#### Inherited from [#inherited-from-101]

[`Live2DFactoryOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions).[`onLoad`](/jsdoc/pixi-vn-live2d/core/interfaces/Live2DFactoryOptions#onload)


# Interface: MotionMemory (/jsdoc/pixi-vn-live2d/index/interfaces/MotionMemory)



Defined in: [src/interfaces/MotionMemory.ts:3](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/MotionMemory.ts#L3)

## Properties [#properties]

### group [#group]

\> **group**: `string`

Defined in: [src/interfaces/MotionMemory.ts:7](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/MotionMemory.ts#L7)

The motion group.

***

### index [#index]

\> **index**: `number`

Defined in: [src/interfaces/MotionMemory.ts:11](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/MotionMemory.ts#L11)

The index of the motion in its group.

***

### priority [#priority]

\> **priority**: [`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

Defined in: [src/interfaces/MotionMemory.ts:15](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/interfaces/MotionMemory.ts#L15)

The priority the motion was started with.


# Function: createLive2DHandler() (/jsdoc/pixi-vn-live2d/ink/functions/createLive2DHandler)



\> **createLive2DHandler**(): `void`

Defined in: [src/ink/live2dHandler.ts:196](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/ink/live2dHandler.ts#L196)

Registers the `# show live2d` Ink hashtag command, letting Ink scripts show a [Live2D](/jsdoc/pixi-vn-live2d/index/classes/Live2D)
canvas element the same way `@drincs/pixi-vn-ink`'s built-in `# show image` shows an
`ImageSprite`: `<alias>` is just the canvas key (like every other `# show ...` command).
`<source>` (the model settings URL, or an asset alias) is an optional second positional token —
when omitted, `<alias>` itself is used as the source. Key/value construction props (forwarded to
[Live2DOptions](/jsdoc/pixi-vn-live2d/index/interfaces/Live2DOptions)) and an optional entrance transition follow.

Registered as two handlers (one per position of the free-form props, since `keySchemas` keys
refer to a fixed token index) that together behave as a single command with an optional
`<source>`.

Call this once, near the start of your app (alongside e.g. `addBaseHashtagCommands`), before any
Ink content is parsed.

## Returns [#returns]

`void`

## Example [#example]

```ink
# show live2d hero xAlign 0.5 yAlign 1 with dissolve duration 1
# show live2d hero hero-alt xAlign 0.5 yAlign 1 with dissolve duration 1
```


# Function: parseShowLive2DTail() (/jsdoc/pixi-vn-live2d/ink/functions/parseShowLive2DTail)



\> **parseShowLive2DTail**(`tail`): `object`

Defined in: [src/ink/live2dHandler.ts:105](https://github.com/DRincs-Productions/pixi-vn-live2d/blob/ef894d31ac89dba8b0c33f91dc01598713a3b0da/src/ink/live2dHandler.ts#L105)

Splits the tail (everything after `<alias>`) of a `# show live2d` command into its free-form
construction props and an optional entrance transition.

## Parameters [#parameters]

### tail [#tail]

`string`\[]

## Returns [#returns]

`object`

### propsList [#propslist]

\> **propsList**: `string`\[]

### transitionPropsList [#transitionpropslist]

\> **transitionPropsList**: `string`\[]

### transitionType? [#transitiontype]

\> `optional` &#x2A;*transitionType?**: `"dissolve"` | `"fade"` | `"movein"` | `"zoomin"` | `"pushin"`


# Class: CubismExpressionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismExpressionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6138

Abstract expression manager.

## Emits [#emits]

[ExpressionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)

## Extends [#extends]

* [`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager)\<`CubismExpressionMotion`, `CubismSpec.Expression`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismExpressionManager**(`settings`, `options?`): `CubismExpressionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6142

#### Parameters [#parameters]

##### settings [#settings]

[`CubismModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)

##### options? [#options]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

#### Returns [#returns]

`CubismExpressionManager`

#### Overrides [#overrides]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#constructor)

## Properties [#properties]

### currentExpression [#currentexpression]

\> **currentExpression**: `CubismExpressionMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3812

Current Expression. This will not be overwritten by [ExpressionManager#defaultExpression](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression).

#### Inherited from [#inherited-from]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`currentExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#currentexpression)

***

### defaultExpression [#defaultexpression]

\> **defaultExpression**: `CubismExpressionMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3808

An empty Expression to reset all the expression parameters.

#### Inherited from [#inherited-from-1]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`defaultExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression)

***

### definitions [#definitions]

\> `readonly` **definitions**: `Expression`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6141

Expression definitions copied from ModelSettings.

#### Overrides [#overrides-1]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`definitions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#definitions)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3820

Flags the instance has been destroyed.

#### Inherited from [#inherited-from-2]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#destroyed)

***

### expressionDataType [#expressiondatatype]

\> `readonly` **expressionDataType**: `"arraybuffer"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6139

Indicates the content type used when loading expressions.

#### Default [#default]

```ts
"json"
```

#### Overrides [#overrides-2]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`expressionDataType`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#expressiondatatype)

***

### expressions [#expressions]

\> **expressions**: (`CubismExpressionMotion` | `null` | `undefined`)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3804

The Expressions. The structure is the same as [definitions](#definitions), initially there's only
an empty array, which means all expressions will be `undefined`. When an Expression has
been loaded, it'll fill the place in which it should be; when it fails to load,
the place will be filled with `null`.

#### Inherited from [#inherited-from-3]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`expressions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#expressions)

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `CubismMotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6140

***

### reserveExpressionIndex [#reserveexpressionindex]

\> **reserveExpressionIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3816

The pending Expression.

#### Inherited from [#inherited-from-4]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`reserveExpressionIndex`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#reserveexpressionindex)

***

### settings [#settings-1]

\> `readonly` **settings**: [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3797

The ModelSettings reference.

#### Inherited from [#inherited-from-5]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#settings)

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3789

Tag for logging.

#### Inherited from [#inherited-from-6]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#tag)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-7]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#prefixed)

## Methods [#methods]

### \_setExpression() [#_setexpression]

\> `protected&#x60; **\_setExpression**(`motion`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6147

Applies the Expression to the model.

#### Parameters [#parameters-1]

##### motion [#motion]

`CubismExpressionMotion`

#### Returns [#returns-1]

`number`

#### Overrides [#overrides-3]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`_setExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#_setexpression)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-2]

`this`

#### Inherited from [#inherited-from-8]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#addlistener)

***

### createDefaultExpression() [#createdefaultexpression]

\> `protected` **createDefaultExpression**(): `CubismExpressionMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6150

Creates the default expression instance used for resets.

#### Returns [#returns-3]

`CubismExpressionMotion`

#### Overrides [#overrides-4]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`createDefaultExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#createdefaultexpression)

***

### createExpression() [#createexpression]

\> **createExpression**(`data`, `_definition`): `CubismExpressionMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6146

Creates an Expression from the data.

#### Parameters [#parameters-3]

##### data [#data]

`ArrayBuffer`

Content of the expression file.

##### \_definition [#_definition]

`any`

#### Returns [#returns-4]

`CubismExpressionMotion`

The created Expression.

#### Overrides [#overrides-5]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`createExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#createexpression)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3872

Destroys the instance.

#### Returns [#returns-5]

`void`

#### Emits [#emits-1]

[ExpressionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#destroy)

#### Inherited from [#inherited-from-9]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#destroy)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-10]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-7]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

#### Inherited from [#inherited-from-11]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#eventnames)

***

### getExpressionFile() [#getexpressionfile]

\> **getExpressionFile**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6145

Retrieves the expression's file path by its definition.

#### Parameters [#parameters-5]

##### definition [#definition]

`Expression`

#### Returns [#returns-8]

`string`

The file path extracted from given definition. Not resolved.

#### Overrides [#overrides-6]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`getExpressionFile`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#getexpressionfile)

***

### getExpressionIndex() [#getexpressionindex]

\> **getExpressionIndex**(`name`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6144

Retrieves the expression's index by its name.

#### Parameters [#parameters-6]

##### name [#name]

`string`

#### Returns [#returns-9]

`number`

The index. `-1` if not found.

#### Overrides [#overrides-7]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`getExpressionIndex`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#getexpressionindex)

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3825

Should be called in the constructor of derived class.

#### Returns [#returns-10]

`void`

#### Inherited from [#inherited-from-12]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`init`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#init)

***

### isFinished() [#isfinished]

\> **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6143

Checks if the expression playback has finished.

#### Returns [#returns-11]

`boolean`

#### Overrides [#overrides-8]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`isFinished`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#isfinished)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-7]

##### event [#event-2]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Returns [#returns-12]

`number`

#### Inherited from [#inherited-from-13]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-8]

##### event [#event-3]

`T`

#### Returns [#returns-13]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-14]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#listeners)

***

### loadExpression() [#loadexpression]

\> `protected` **loadExpression**(`index`): `Promise`\<`CubismExpressionMotion` | `undefined`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3838

Loads an Expression. Errors in this method will not be thrown,
but be emitted with an "expressionLoadError" event.

#### Parameters [#parameters-9]

##### index [#index]

`number`

Index of the expression in definitions.

#### Returns [#returns-14]

`Promise`\<`CubismExpressionMotion` | `undefined`>

Promise that resolves with the Expression, or with undefined if it can't be loaded.

#### Emits [#emits-2]

[ExpressionManagerEvents.expressionLoaded](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#expressionloaded)

#### Emits [#emits-3]

[ExpressionManagerEvents.expressionLoadError](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#expressionloaderror)

#### Inherited from [#inherited-from-15]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`loadExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#loadexpression)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-10]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-15]

`this`

#### Inherited from [#inherited-from-16]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`off`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-11]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-16]

`this`

#### Inherited from [#inherited-from-17]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`on`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-12]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-17]

`this`

#### Inherited from [#inherited-from-18]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`once`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-13]

##### event? [#event-7]

keyof ExpressionManagerEvents\<never>

#### Returns [#returns-18]

`this`

#### Inherited from [#inherited-from-19]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-14]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-19]

`this`

#### Inherited from [#inherited-from-20]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#removelistener)

***

### resetExpression() [#resetexpression]

\> **resetExpression**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3852

Resets model's expression using [ExpressionManager#defaultExpression](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression).

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-21]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`resetExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#resetexpression)

***

### restoreExpression() [#restoreexpression]

\> **restoreExpression**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3856

Restores model's expression to [currentExpression](#currentexpression).

#### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-22]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`restoreExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#restoreexpression)

***

### setExpression() [#setexpression]

\> **setExpression**(`index`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3862

Sets an Expression.

#### Parameters [#parameters-15]

##### index [#index-1]

`string` | `number`

Either the index, or the name of the expression.

#### Returns [#returns-22]

`Promise`\<`boolean`>

Promise that resolves with true if succeeded, with false otherwise.

#### Inherited from [#inherited-from-23]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`setExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#setexpression)

***

### setRandomExpression() [#setrandomexpression]

\> **setRandomExpression**(): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3848

Sets a random Expression that differs from current one.

#### Returns [#returns-23]

`Promise`\<`boolean`>

Promise that resolves with true if succeeded, with false otherwise.

#### Inherited from [#inherited-from-24]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`setRandomExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#setrandomexpression)

***

### stopAllExpressions() [#stopallexpressions]

\> `protected` **stopAllExpressions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6148

Cancels expression playback.

#### Returns [#returns-24]

`void`

#### Overrides [#overrides-9]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`stopAllExpressions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#stopallexpressions)

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3867

Updates parameters of the core model.

#### Parameters [#parameters-16]

##### model [#model]

`object`

##### now [#now]

`number`

#### Returns [#returns-25]

`boolean`

True if the parameters are actually updated.

#### Inherited from [#inherited-from-25]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`update`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#update)

***

### updateParameters() [#updateparameters]

\> `protected` **updateParameters**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6149

Updates parameters of the core model.

#### Parameters [#parameters-17]

##### model [#model-1]

`CubismModel`

##### now [#now-1]

`number`

#### Returns [#returns-26]

`boolean`

True if the parameters are actually updated.

#### Overrides [#overrides-10]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`updateParameters`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#updateparameters)


# Class: CubismInternalModel (/jsdoc/pixi-vn-live2d/core/classes/CubismInternalModel)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6902

A wrapper that manages the states of a Live2D core model, and delegates all operations to it.

## Emits [#emits]

[InternalModelEvents](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelEvents)

## Extends [#extends]

* [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismInternalModel**(`coreModel`, `settings`, `options?`): `CubismInternalModel`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6931

#### Parameters [#parameters]

##### coreModel [#coremodel]

`CubismModel`

##### settings [#settings]

[`CubismModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)

##### options? [#options]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions)

#### Returns [#returns]

`CubismInternalModel`

#### Overrides [#overrides]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#constructor)

## Properties [#properties]

### breath [#breath]

\> **breath**: `CubismBreath`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6909

***

### coreModel [#coremodel-1]

\> **coreModel**: `CubismModel`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6905

The managed Live2D core model.

#### Overrides [#overrides-1]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`coreModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#coremodel)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3203

Flags this instance has been destroyed.

#### Inherited from [#inherited-from]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#destroyed)

***

### drawingMatrix [#drawingmatrix]

\> **drawingMatrix**: `Matrix`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3182

The final matrix to draw the model.

#### Inherited from [#inherited-from-1]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`drawingMatrix`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#drawingmatrix)

***

### eyeBlink? [#eyeblink]

\> `optional` &#x2A;*eyeBlink?**: `CubismEyeBlink`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6910

***

### focusController [#focuscontroller]

\> **focusController**: [`FocusController`](/jsdoc/pixi-vn-live2d/core/classes/FocusController)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3152

#### Inherited from [#inherited-from-2]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`focusController`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#focuscontroller)

***

### height [#height]

\> `readonly` **height**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3174

Canvas height of the model, scaled by the `height` of the model's layout.

#### Inherited from [#inherited-from-3]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`height`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#height)

***

### hitAreas [#hitareas]

\> **hitAreas**: `Record`\<`string`, [`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3186

The hit area definitions, keyed by their names.

#### Inherited from [#inherited-from-4]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`hitAreas`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#hitareas)

***

### idParamAngleX [#idparamanglex]

\> **idParamAngleX**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6915

***

### idParamAngleY [#idparamangley]

\> **idParamAngleY**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6916

***

### idParamAngleZ [#idparamanglez]

\> **idParamAngleZ**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6917

***

### idParamBodyAngleX [#idparambodyanglex]

\> **idParamBodyAngleX**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6920

***

### idParamBreath [#idparambreath]

\> **idParamBreath**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6921

***

### idParamEyeBallX [#idparameyeballx]

\> **idParamEyeBallX**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6918

***

### idParamEyeBallY [#idparameyebally]

\> **idParamEyeBallY**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6919

***

### idParamMouthForm [#idparammouthform]

\> **idParamMouthForm**: `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6922

***

### lipSync [#lipsync]

\> **lipSync**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6908

***

### localTransform [#localtransform]

\> **localTransform**: `Matrix`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3178

Local transformation, calculated from the model's layout.

#### Inherited from [#inherited-from-5]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`localTransform`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#localtransform)

***

### modelTransform [#modeltransform]

\> `protected` **modelTransform**: `Matrix`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6930

Matrix that scales by [pixelsPerUnit](#pixelsperunit), and moves the origin from top-left to center.

***

### motionManager [#motionmanager]

\> **motionManager**: [`CubismMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismMotionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6906

#### Overrides [#overrides-2]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`motionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#motionmanager)

***

### options [#options-1]

\> **options**: [`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6904

#### Overrides [#overrides-3]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`options`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#options)

***

### originalHeight [#originalheight]

\> `readonly` **originalHeight**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3166

Original canvas height of the model. Note this doesn't represent the model's real size,
as the model can overflow from its canvas.

#### Inherited from [#inherited-from-6]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`originalHeight`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#originalheight)

***

### originalWidth [#originalwidth]

\> `readonly` **originalWidth**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3161

Original canvas width of the model. Note this doesn't represent the model's real size,
as the model can overflow from its canvas.

#### Inherited from [#inherited-from-7]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`originalWidth`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#originalwidth)

***

### parallelMotionManager [#parallelmotionmanager]

\> **parallelMotionManager**: [`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6907

#### Overrides [#overrides-4]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`parallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#parallelmotionmanager)

***

### physics? [#physics]

\> `optional` &#x2A;*physics?**: `CubismPhysics`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6912

#### Overrides [#overrides-5]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`physics`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#physics)

***

### pixelsPerUnit [#pixelsperunit]

\> `readonly` **pixelsPerUnit**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6926

The model's internal scale, defined in the moc3 file.

***

### pose? [#pose]

\> `optional` &#x2A;*pose?**: `CubismPose`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6911

#### Overrides [#overrides-6]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`pose`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#pose)

***

### renderer [#renderer]

\> **renderer**: `CubismRenderer_WebGL`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6913

***

### settings [#settings-1]

\> **settings**: [`CubismModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6903

#### Overrides [#overrides-7]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#settings)

***

### textureFlipY [#textureflipy]

\> **textureFlipY**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3190

Flags whether `gl.UNPACK_FLIP_Y_WEBGL` should be enabled when binding the textures.

#### Inherited from [#inherited-from-8]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`textureFlipY`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#textureflipy)

***

### viewport [#viewport]

\> **viewport**: \[`number`, `number`, `number`, `number`]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3194

WebGL viewport when drawing the model. The format is `[x, y, width, height]`.

#### Inherited from [#inherited-from-9]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`viewport`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#viewport)

***

### width [#width]

\> `readonly` **width**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3170

Canvas width of the model, scaled by the `width` of the model's layout.

#### Inherited from [#inherited-from-10]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`width`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#width)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-11]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#prefixed)

## Methods [#methods]

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-1]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-1]

`this`

#### Inherited from [#inherited-from-12]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#addlistener)

***

### bindTexture() [#bindtexture]

\> **bindTexture**(`index`, `texture`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6941

Binds a texture to the model. The index must be the same as that of this texture
in the [ModelSettings.textures](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#textures) array.

#### Parameters [#parameters-2]

##### index [#index]

`number`

##### texture [#texture]

`WebGLTexture`

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-8]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`bindTexture`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#bindtexture)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6953

Destroys the model and all related resources.

#### Returns [#returns-3]

`void`

#### Emits [#emits-1]

\`InternalModelEvents.destroy\` | destroy

#### Overrides [#overrides-9]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#destroy)

***

### draw() [#draw]

\> **draw**(`gl`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6951

Draws the model.

#### Parameters [#parameters-3]

##### gl [#gl]

`WebGLRenderingContext`

#### Returns [#returns-4]

`void`

#### Overrides [#overrides-10]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`draw`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#draw)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-5]

`boolean`

#### Inherited from [#inherited-from-13]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-6]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-14]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#eventnames)

***

### extendParallelMotionManager() [#extendparallelmotionmanager]

\> **extendParallelMotionManager**(`managerCount`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6952

Add parallel motion manager.

#### Parameters [#parameters-5]

##### managerCount [#managercount]

`number`

Count of parallel motion managers.

#### Returns [#returns-7]

`void`

#### Overrides [#overrides-11]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`extendParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#extendparallelmotionmanager)

***

### getDrawableBounds() [#getdrawablebounds]

\> **getDrawableBounds**(`index`, `bounds?`): `Bounds`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3237

Gets a drawable's bounds.

#### Parameters [#parameters-6]

##### index [#index-1]

`number`

Index of the drawable.

##### bounds? [#bounds]

`Bounds`

Object to store the output values.

#### Returns [#returns-8]

`Bounds`

The bounds in model canvas space.

#### Inherited from [#inherited-from-15]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableBounds`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawablebounds)

***

### getDrawableIDs() [#getdrawableids]

\> **getDrawableIDs**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6943

Gets all the drawables' IDs.

#### Returns [#returns-9]

`string`\[]

IDs.

#### Overrides [#overrides-12]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableIDs`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawableids)

***

### getDrawableIndex() [#getdrawableindex]

\> **getDrawableIndex**(`id`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6944

Finds the index of a drawable by its ID.

#### Parameters [#parameters-7]

##### id [#id]

`string`

#### Returns [#returns-10]

`number`

The index.

#### Overrides [#overrides-13]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableIndex`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawableindex)

***

### getDrawableVertices() [#getdrawablevertices]

\> **getDrawableVertices**(`drawIndex`): `Float32Array`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6945

Gets a drawable's vertices.

#### Parameters [#parameters-8]

##### drawIndex [#drawindex]

`string` | `number`

#### Returns [#returns-11]

`Float32Array`

#### Throws [#throws]

Error when the drawable cannot be found.

#### Overrides [#overrides-14]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableVertices`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawablevertices)

***

### getHitAreaDefs() [#gethitareadefs]

\> `protected` **getHitAreaDefs**(): [`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6942

Gets all the hit area definitions.

#### Returns [#returns-12]

[`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)\[]

Normalized definitions.

#### Overrides [#overrides-15]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getHitAreaDefs`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#gethitareadefs)

***

### getIdSafe() [#getidsafe]

\> `protected` **getIdSafe**(`id`): `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6933

#### Parameters [#parameters-9]

##### id [#id-1]

`string` | `undefined`

#### Returns [#returns-13]

`CubismId`

***

### getLayout() [#getlayout]

\> `protected` **getLayout**(): [`CommonLayout`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonLayout)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6938

Gets the layout definition.

#### Returns [#returns-14]

[`CommonLayout`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonLayout)

Normalized definition.

#### Overrides [#overrides-16]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getLayout`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getlayout)

***

### getSize() [#getsize]

\> `protected` **getSize**(): \[`number`, `number`]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6934

Gets the model's original canvas size.

#### Returns [#returns-15]

\[`number`, `number`]

`[width, height]`

#### Overrides [#overrides-17]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getSize`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getsize)

***

### hitTest() [#hittest]

\> **hitTest**(`x`, `y`): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3222

Hit-test on the model.

#### Parameters [#parameters-10]

##### x [#x]

`number`

Position in model canvas.

##### y [#y]

`number`

Position in model canvas.

#### Returns [#returns-16]

`string`\[]

The names of the *hit* hit areas. Can be empty if none is hit.

#### Inherited from [#inherited-from-16]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`hitTest`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#hittest)

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6932

Should be called in the constructor of derived class.

#### Returns [#returns-17]

`void`

#### Overrides [#overrides-18]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`init`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#init)

***

### isHit() [#ishit]

\> **isHit**(`hitAreaName`, `x`, `y`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3230

Hit-test for a single hit area.

#### Parameters [#parameters-11]

##### hitAreaName [#hitareaname]

`string`

The hit area's name.

##### x [#x-1]

`number`

Position in model canvas.

##### y [#y-1]

`number`

Position in model canvas.

#### Returns [#returns-18]

`boolean`

True if hit.

#### Inherited from [#inherited-from-17]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`isHit`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#ishit)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-12]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-19]

`number`

#### Inherited from [#inherited-from-18]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-13]

##### event [#event-3]

`T`

#### Returns [#returns-20]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-19]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#listeners)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-14]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-21]

`this`

#### Inherited from [#inherited-from-20]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`off`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-15]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-22]

`this`

#### Inherited from [#inherited-from-21]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`on`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-16]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-23]

`this`

#### Inherited from [#inherited-from-22]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`once`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-17]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-24]

`this`

#### Inherited from [#inherited-from-23]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-18]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-25]

`this`

#### Inherited from [#inherited-from-24]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#removelistener)

***

### setupHitAreas() [#setuphitareas]

\> `protected` **setupHitAreas**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3215

Sets up the hit areas by their definitions in settings.

#### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-25]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`setupHitAreas`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#setuphitareas)

***

### setupLayout() [#setuplayout]

\> `protected` **setupLayout**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6939

Sets up the model's size and local transform by the model's layout.

#### Returns [#returns-27]

`void`

#### Overrides [#overrides-19]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`setupLayout`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#setuplayout)

***

### update() [#update]

\> **update**(`dt`, `now`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6947

Updates the model's parameters.

#### Parameters [#parameters-19]

##### dt [#dt]

`number`

Elapsed time in milliseconds from last frame.

##### now [#now]

`number`

#### Returns [#returns-28]

`void`

#### Overrides [#overrides-20]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`update`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#update)

***

### updateFacialEmotion() [#updatefacialemotion]

\> **updateFacialEmotion**(`mouthForm`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6949

#### Parameters [#parameters-20]

##### mouthForm [#mouthform]

`number`

#### Returns [#returns-29]

`void`

***

### updateFocus() [#updatefocus]

\> **updateFocus**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6948

#### Returns [#returns-30]

`void`

***

### updateMotions() [#updatemotions]

\> `protected` **updateMotions**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3270

Updates all active motions for the model and emits lifecycle events.

This method coordinates the update cycle for both primary and parallel motion managers,
ensuring all animations are synchronized with the current timestamp. It emits events
before and after the update process, allowing external listeners to hook into the motion
lifecycle. The return value indicates whether any motion was actively updated during this cycle.

#### Parameters [#parameters-21]

##### model [#model]

`object`

The model instance to apply motion updates to.

##### now [#now-1]

`number`

The current timestamp (in milliseconds) used to calculate motion progress.

#### Returns [#returns-31]

`boolean`

Returns `true` if any motion (primary or parallel) was updated; `false` otherwise.

#### Emits [#emits-2]

beforeMotionUpdate - Triggered before any motion updates are processed.

#### Emits [#emits-3]

afterMotionUpdate - Triggered after all motion updates are completed.

#### Inherited from [#inherited-from-26]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateMotions`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatemotions)

***

### updateNaturalMovements() [#updatenaturalmovements]

\> **updateNaturalMovements**(`dt`, `_now`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6950

#### Parameters [#parameters-22]

##### dt [#dt-1]

`number`

##### \_now [#_now]

`number`

#### Returns [#returns-32]

`void`

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`transform`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6946

Updates the model's transform.

#### Parameters [#parameters-23]

##### transform [#transform]

`Matrix`

The world transform.

#### Returns [#returns-33]

`void`

#### Overrides [#overrides-21]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateTransform`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatetransform)

***

### updateWebGLContext() [#updatewebglcontext]

\> **updateWebGLContext**(`gl`, `glContextID`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6940

Updates WebGL context bound to this model.

#### Parameters [#parameters-24]

##### gl [#gl-1]

`WebGLRenderingContext`

WebGL context.

##### glContextID [#glcontextid]

`number`

Unique ID for given WebGL context.

#### Returns [#returns-34]

`void`

#### Overrides [#overrides-22]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateWebGLContext`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatewebglcontext)


# Class: CubismLegacyExpressionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyExpressionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5017

Abstract expression manager.

## Emits [#emits]

[ExpressionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)

## Extends [#extends]

* [`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager)\<[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismLegacyExpressionManager**(`settings`, `options?`): `CubismLegacyExpressionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5021

#### Parameters [#parameters]

##### settings [#settings]

[`CubismLegacyModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)

##### options? [#options]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

#### Returns [#returns]

`CubismLegacyExpressionManager`

#### Overrides [#overrides]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#constructor)

## Properties [#properties]

### currentExpression [#currentexpression]

\> **currentExpression**: [`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3812

Current Expression. This will not be overwritten by [ExpressionManager#defaultExpression](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression).

#### Inherited from [#inherited-from]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`currentExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#currentexpression)

***

### defaultExpression [#defaultexpression]

\> **defaultExpression**: [`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3808

An empty Expression to reset all the expression parameters.

#### Inherited from [#inherited-from-1]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`defaultExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression)

***

### definitions [#definitions]

\> `readonly` **definitions**: [`Expression`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Expression)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5019

Expression definitions copied from ModelSettings.

#### Overrides [#overrides-1]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`definitions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#definitions)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3820

Flags the instance has been destroyed.

#### Inherited from [#inherited-from-2]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#destroyed)

***

### expressionDataType [#expressiondatatype]

\> `readonly` **expressionDataType**: `XMLHttpRequestResponseType`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3785

Indicates the content type used when loading expressions.

#### Default [#default]

```ts
"json"
```

#### Inherited from [#inherited-from-3]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`expressionDataType`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#expressiondatatype)

***

### expressions [#expressions]

\> **expressions**: ([`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression) | `null` | `undefined`)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3804

The Expressions. The structure is the same as [definitions](#definitions), initially there's only
an empty array, which means all expressions will be `undefined`. When an Expression has
been loaded, it'll fill the place in which it should be; when it fails to load,
the place will be filled with `null`.

#### Inherited from [#inherited-from-4]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`expressions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#expressions)

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `MotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5018

***

### reserveExpressionIndex [#reserveexpressionindex]

\> **reserveExpressionIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3816

The pending Expression.

#### Inherited from [#inherited-from-5]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`reserveExpressionIndex`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#reserveexpressionindex)

***

### settings [#settings-1]

\> `readonly` **settings**: [`CubismLegacyModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5020

The ModelSettings reference.

#### Overrides [#overrides-2]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#settings)

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3789

Tag for logging.

#### Inherited from [#inherited-from-6]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#tag)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-7]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#prefixed)

## Methods [#methods]

### \_setExpression() [#_setexpression]

\> `protected&#x60; **\_setExpression**(`motion`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5026

Applies the Expression to the model.

#### Parameters [#parameters-1]

##### motion [#motion]

[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

#### Returns [#returns-1]

`number`

#### Overrides [#overrides-3]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`_setExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#_setexpression)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-2]

`this`

#### Inherited from [#inherited-from-8]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#addlistener)

***

### createDefaultExpression() [#createdefaultexpression]

\> `protected` **createDefaultExpression**(): [`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3829

Creates the default expression instance used for resets.

#### Returns [#returns-3]

[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

#### Inherited from [#inherited-from-9]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`createDefaultExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#createdefaultexpression)

***

### createExpression() [#createexpression]

\> **createExpression**(`data`, `_definition`): [`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5025

Creates an Expression from the data.

#### Parameters [#parameters-3]

##### data [#data]

`object`

Content of the expression file.

##### \_definition [#_definition]

[`Expression`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Expression) | `undefined`

#### Returns [#returns-4]

[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression)

The created Expression.

#### Overrides [#overrides-4]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`createExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#createexpression)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3872

Destroys the instance.

#### Returns [#returns-5]

`void`

#### Emits [#emits-1]

[ExpressionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#destroy)

#### Inherited from [#inherited-from-10]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#destroy)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-11]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-7]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

#### Inherited from [#inherited-from-12]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#eventnames)

***

### getExpressionFile() [#getexpressionfile]

\> **getExpressionFile**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5024

Retrieves the expression's file path by its definition.

#### Parameters [#parameters-5]

##### definition [#definition]

[`Expression`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Expression)

#### Returns [#returns-8]

`string`

The file path extracted from given definition. Not resolved.

#### Overrides [#overrides-5]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`getExpressionFile`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#getexpressionfile)

***

### getExpressionIndex() [#getexpressionindex]

\> **getExpressionIndex**(`name`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5023

Retrieves the expression's index by its name.

#### Parameters [#parameters-6]

##### name [#name]

`string`

#### Returns [#returns-9]

`number`

The index. `-1` if not found.

#### Overrides [#overrides-6]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`getExpressionIndex`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#getexpressionindex)

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3825

Should be called in the constructor of derived class.

#### Returns [#returns-10]

`void`

#### Inherited from [#inherited-from-13]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`init`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#init)

***

### isFinished() [#isfinished]

\> **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5022

Checks if the expression playback has finished.

#### Returns [#returns-11]

`boolean`

#### Overrides [#overrides-7]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`isFinished`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#isfinished)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-7]

##### event [#event-2]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Returns [#returns-12]

`number`

#### Inherited from [#inherited-from-14]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-8]

##### event [#event-3]

`T`

#### Returns [#returns-13]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-15]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#listeners)

***

### loadExpression() [#loadexpression]

\> `protected` **loadExpression**(`index`): `Promise`\<[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression) | `undefined`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3838

Loads an Expression. Errors in this method will not be thrown,
but be emitted with an "expressionLoadError" event.

#### Parameters [#parameters-9]

##### index [#index]

`number`

Index of the expression in definitions.

#### Returns [#returns-14]

`Promise`\<[`Live2DExpression`](/jsdoc/pixi-vn-live2d/core/classes/Live2DExpression) | `undefined`>

Promise that resolves with the Expression, or with undefined if it can't be loaded.

#### Emits [#emits-2]

[ExpressionManagerEvents.expressionLoaded](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#expressionloaded)

#### Emits [#emits-3]

[ExpressionManagerEvents.expressionLoadError](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#expressionloaderror)

#### Inherited from [#inherited-from-16]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`loadExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#loadexpression)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-10]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-15]

`this`

#### Inherited from [#inherited-from-17]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`off`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-11]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-16]

`this`

#### Inherited from [#inherited-from-18]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`on`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-12]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-17]

`this`

#### Inherited from [#inherited-from-19]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`once`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-13]

##### event? [#event-7]

keyof ExpressionManagerEvents\<never>

#### Returns [#returns-18]

`this`

#### Inherited from [#inherited-from-20]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-14]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-19]

`this`

#### Inherited from [#inherited-from-21]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#removelistener)

***

### resetExpression() [#resetexpression]

\> **resetExpression**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3852

Resets model's expression using [ExpressionManager#defaultExpression](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#defaultexpression).

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-22]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`resetExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#resetexpression)

***

### restoreExpression() [#restoreexpression]

\> **restoreExpression**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3856

Restores model's expression to [currentExpression](#currentexpression).

#### Returns [#returns-21]

`void`

#### Inherited from [#inherited-from-23]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`restoreExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#restoreexpression)

***

### setExpression() [#setexpression]

\> **setExpression**(`index`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3862

Sets an Expression.

#### Parameters [#parameters-15]

##### index [#index-1]

`string` | `number`

Either the index, or the name of the expression.

#### Returns [#returns-22]

`Promise`\<`boolean`>

Promise that resolves with true if succeeded, with false otherwise.

#### Inherited from [#inherited-from-24]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`setExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#setexpression)

***

### setRandomExpression() [#setrandomexpression]

\> **setRandomExpression**(): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3848

Sets a random Expression that differs from current one.

#### Returns [#returns-23]

`Promise`\<`boolean`>

Promise that resolves with true if succeeded, with false otherwise.

#### Inherited from [#inherited-from-25]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`setRandomExpression`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#setrandomexpression)

***

### stopAllExpressions() [#stopallexpressions]

\> `protected` **stopAllExpressions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5027

Cancels expression playback.

#### Returns [#returns-24]

`void`

#### Overrides [#overrides-8]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`stopAllExpressions`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#stopallexpressions)

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3867

Updates parameters of the core model.

#### Parameters [#parameters-16]

##### model [#model]

`object`

##### now [#now]

`number`

#### Returns [#returns-25]

`boolean`

True if the parameters are actually updated.

#### Inherited from [#inherited-from-26]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`update`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#update)

***

### updateParameters() [#updateparameters]

\> `protected` **updateParameters**(`model`, `_dt`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5028

Updates parameters of the core model.

#### Parameters [#parameters-17]

##### model [#model-1]

`Live2DModelWebGL`

##### \_dt [#_dt]

`number`

#### Returns [#returns-26]

`boolean`

True if the parameters are actually updated.

#### Overrides [#overrides-9]

[`ExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager).[`updateParameters`](/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager#updateparameters)


# Class: CubismLegacyInternalModel (/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyInternalModel)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5112

A wrapper that manages the states of a Live2D core model, and delegates all operations to it.

## Emits [#emits]

[InternalModelEvents](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelEvents)

## Extends [#extends]

* [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismLegacyInternalModel**(`coreModel`, `settings`, `options?`): `CubismLegacyInternalModel`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5141

#### Parameters [#parameters]

##### coreModel [#coremodel]

`Live2DModelWebGL`

##### settings [#settings]

[`CubismLegacyModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)

##### options? [#options]

[`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions)

#### Returns [#returns]

`CubismLegacyInternalModel`

#### Overrides [#overrides]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#constructor)

## Properties [#properties]

### angleXParamIndex [#anglexparamindex]

\> **angleXParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5123

***

### angleYParamIndex [#angleyparamindex]

\> **angleYParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5124

***

### angleZParamIndex [#anglezparamindex]

\> **angleZParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5125

***

### bodyAngleXParamIndex [#bodyanglexparamindex]

\> **bodyAngleXParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5126

***

### breathParamIndex [#breathparamindex]

\> **breathParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5127

***

### coreModel [#coremodel-1]

\> **coreModel**: `Live2DModelWebGL`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5115

The managed Live2D core model.

#### Overrides [#overrides-1]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`coreModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#coremodel)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3203

Flags this instance has been destroyed.

#### Inherited from [#inherited-from]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#destroyed)

***

### disableCulling [#disableculling]

\> **disableCulling**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5138

If true, the face culling will always be disabled when drawing the model,
regardless of the model's internal flags.

***

### drawDataCount [#drawdatacount]

\> **drawDataCount**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5133

Number of the drawables in this model.

***

### drawingMatrix [#drawingmatrix]

\> **drawingMatrix**: `Matrix`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3182

The final matrix to draw the model.

#### Inherited from [#inherited-from-1]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`drawingMatrix`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#drawingmatrix)

***

### eyeballXParamIndex [#eyeballxparamindex]

\> **eyeballXParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5121

***

### eyeballYParamIndex [#eyeballyparamindex]

\> **eyeballYParamIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5122

***

### eyeBlink? [#eyeblink]

\> `optional` &#x2A;*eyeBlink?**: [`Live2DEyeBlink`](/jsdoc/pixi-vn-live2d/core/classes/Live2DEyeBlink)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5118

***

### focusController [#focuscontroller]

\> **focusController**: [`FocusController`](/jsdoc/pixi-vn-live2d/core/classes/FocusController)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3152

#### Inherited from [#inherited-from-2]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`focusController`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#focuscontroller)

***

### height [#height]

\> `readonly` **height**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3174

Canvas height of the model, scaled by the `height` of the model's layout.

#### Inherited from [#inherited-from-3]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`height`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#height)

***

### hitAreas [#hitareas]

\> **hitAreas**: `Record`\<`string`, [`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3186

The hit area definitions, keyed by their names.

#### Inherited from [#inherited-from-4]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`hitAreas`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#hitareas)

***

### lipSync [#lipsync]

\> **lipSync**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5129

***

### localTransform [#localtransform]

\> **localTransform**: `Matrix`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3178

Local transformation, calculated from the model's layout.

#### Inherited from [#inherited-from-5]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`localTransform`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#localtransform)

***

### motionManager [#motionmanager]

\> **motionManager**: [`CubismLegacyMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyMotionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5116

#### Overrides [#overrides-2]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`motionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#motionmanager)

***

### options [#options-1]

\> **options**: [`InternalModelOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/InternalModelOptions)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5114

#### Overrides [#overrides-3]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`options`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#options)

***

### originalHeight [#originalheight]

\> `readonly` **originalHeight**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3166

Original canvas height of the model. Note this doesn't represent the model's real size,
as the model can overflow from its canvas.

#### Inherited from [#inherited-from-6]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`originalHeight`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#originalheight)

***

### originalWidth [#originalwidth]

\> `readonly` **originalWidth**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3161

Original canvas width of the model. Note this doesn't represent the model's real size,
as the model can overflow from its canvas.

#### Inherited from [#inherited-from-7]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`originalWidth`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#originalwidth)

***

### parallelMotionManager [#parallelmotionmanager]

\> **parallelMotionManager**: [`CubismLegacyParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyParallelMotionManager)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5117

#### Overrides [#overrides-4]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`parallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#parallelmotionmanager)

***

### physics? [#physics]

\> `optional` &#x2A;*physics?**: [`Live2DPhysics`](/jsdoc/pixi-vn-live2d/core/classes/Live2DPhysics)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5119

#### Overrides [#overrides-5]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`physics`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#physics)

***

### pose? [#pose]

\> `optional` &#x2A;*pose?**: [`Live2DPose`](/jsdoc/pixi-vn-live2d/core/classes/Live2DPose)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5120

#### Overrides [#overrides-6]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`pose`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#pose)

***

### settings [#settings-1]

\> **settings**: [`CubismLegacyModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5113

#### Overrides [#overrides-7]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#settings)

***

### textureFlipY [#textureflipy]

\> **textureFlipY**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5128

Flags whether `gl.UNPACK_FLIP_Y_WEBGL` should be enabled when binding the textures.

#### Overrides [#overrides-8]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`textureFlipY`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#textureflipy)

***

### viewport [#viewport]

\> **viewport**: \[`number`, `number`, `number`, `number`]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3194

WebGL viewport when drawing the model. The format is `[x, y, width, height]`.

#### Inherited from [#inherited-from-8]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`viewport`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#viewport)

***

### width [#width]

\> `readonly` **width**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3170

Canvas width of the model, scaled by the `width` of the model's layout.

#### Inherited from [#inherited-from-9]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`width`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#width)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-10]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#prefixed)

## Methods [#methods]

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-1]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-1]

`this`

#### Inherited from [#inherited-from-11]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#addlistener)

***

### bindTexture() [#bindtexture]

\> **bindTexture**(`index`, `texture`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5149

Binds a texture to the model. The index must be the same as that of this texture
in the [ModelSettings.textures](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#textures) array.

#### Parameters [#parameters-2]

##### index [#index]

`number`

##### texture [#texture]

`WebGLTexture`

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-9]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`bindTexture`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#bindtexture)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5160

Destroys the model and all related resources.

#### Returns [#returns-3]

`void`

#### Emits [#emits-1]

\`InternalModelEvents.destroy\` | destroy

#### Overrides [#overrides-10]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#destroy)

***

### draw() [#draw]

\> **draw**(`gl`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5158

Draws the model.

#### Parameters [#parameters-3]

##### gl [#gl]

`WebGLRenderingContext`

#### Returns [#returns-4]

`void`

#### Overrides [#overrides-11]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`draw`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#draw)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-5]

`boolean`

#### Inherited from [#inherited-from-12]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-6]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-13]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#eventnames)

***

### extendParallelMotionManager() [#extendparallelmotionmanager]

\> **extendParallelMotionManager**(`managerCount`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5159

Add parallel motion manager.

#### Parameters [#parameters-5]

##### managerCount [#managercount]

`number`

Count of parallel motion managers.

#### Returns [#returns-7]

`void`

#### Overrides [#overrides-12]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`extendParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#extendparallelmotionmanager)

***

### getDrawableBounds() [#getdrawablebounds]

\> **getDrawableBounds**(`index`, `bounds?`): `Bounds`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3237

Gets a drawable's bounds.

#### Parameters [#parameters-6]

##### index [#index-1]

`number`

Index of the drawable.

##### bounds? [#bounds]

`Bounds`

Object to store the output values.

#### Returns [#returns-8]

`Bounds`

The bounds in model canvas space.

#### Inherited from [#inherited-from-14]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableBounds`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawablebounds)

***

### getDrawableIDs() [#getdrawableids]

\> **getDrawableIDs**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5151

Gets all the drawables' IDs.

#### Returns [#returns-9]

`string`\[]

IDs.

#### Overrides [#overrides-13]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableIDs`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawableids)

***

### getDrawableIndex() [#getdrawableindex]

\> **getDrawableIndex**(`id`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5152

Finds the index of a drawable by its ID.

#### Parameters [#parameters-7]

##### id [#id]

`string`

#### Returns [#returns-10]

`number`

The index.

#### Overrides [#overrides-14]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableIndex`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawableindex)

***

### getDrawableVertices() [#getdrawablevertices]

\> **getDrawableVertices**(`drawIndex`): `Float32Array`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5153

Gets a drawable's vertices.

#### Parameters [#parameters-8]

##### drawIndex [#drawindex]

`string` | `number`

#### Returns [#returns-11]

`Float32Array`

#### Throws [#throws]

Error when the drawable cannot be found.

#### Overrides [#overrides-15]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getDrawableVertices`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getdrawablevertices)

***

### getHitAreaDefs() [#gethitareadefs]

\> `protected` **getHitAreaDefs**(): [`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5150

Gets all the hit area definitions.

#### Returns [#returns-12]

[`CommonHitArea`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonHitArea)\[]

Normalized definitions.

#### Overrides [#overrides-16]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getHitAreaDefs`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#gethitareadefs)

***

### getLayout() [#getlayout]

\> `protected` **getLayout**(): [`CommonLayout`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonLayout)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5147

Gets the layout definition.

#### Returns [#returns-13]

[`CommonLayout`](/jsdoc/pixi-vn-live2d/core/interfaces/CommonLayout)

Normalized definition.

#### Overrides [#overrides-17]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getLayout`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getlayout)

***

### getSize() [#getsize]

\> `protected` **getSize**(): \[`number`, `number`]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5143

Gets the model's original canvas size.

#### Returns [#returns-14]

\[`number`, `number`]

`[width, height]`

#### Overrides [#overrides-18]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`getSize`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#getsize)

***

### hitTest() [#hittest]

\> **hitTest**(`x`, `y`): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5154

Hit-test on the model.

#### Parameters [#parameters-9]

##### x [#x]

`number`

Position in model canvas.

##### y [#y]

`number`

Position in model canvas.

#### Returns [#returns-15]

`string`\[]

The names of the *hit* hit areas. Can be empty if none is hit.

#### Overrides [#overrides-19]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`hitTest`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#hittest)

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5142

Should be called in the constructor of derived class.

#### Returns [#returns-16]

`void`

#### Overrides [#overrides-20]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`init`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#init)

***

### isHit() [#ishit]

\> **isHit**(`hitAreaName`, `x`, `y`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3230

Hit-test for a single hit area.

#### Parameters [#parameters-10]

##### hitAreaName [#hitareaname]

`string`

The hit area's name.

##### x [#x-1]

`number`

Position in model canvas.

##### y [#y-1]

`number`

Position in model canvas.

#### Returns [#returns-17]

`boolean`

True if hit.

#### Inherited from [#inherited-from-15]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`isHit`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#ishit)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-11]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-18]

`number`

#### Inherited from [#inherited-from-16]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-12]

##### event [#event-3]

`T`

#### Returns [#returns-19]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-17]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#listeners)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-13]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-20]

`this`

#### Inherited from [#inherited-from-18]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`off`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-14]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-21]

`this`

#### Inherited from [#inherited-from-19]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`on`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-15]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-22]

`this`

#### Inherited from [#inherited-from-20]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`once`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-16]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-23]

`this`

#### Inherited from [#inherited-from-21]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-17]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-24]

`this`

#### Inherited from [#inherited-from-22]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#removelistener)

***

### setupHitAreas() [#setuphitareas]

\> `protected` **setupHitAreas**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3215

Sets up the hit areas by their definitions in settings.

#### Returns [#returns-25]

`void`

#### Inherited from [#inherited-from-23]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`setupHitAreas`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#setuphitareas)

***

### setupLayout() [#setuplayout]

\> `protected` **setupLayout**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3211

Sets up the model's size and local transform by the model's layout.

#### Returns [#returns-26]

`void`

#### Inherited from [#inherited-from-24]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`setupLayout`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#setuplayout)

***

### update() [#update]

\> **update**(`dt`, `now`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5155

Updates the model's parameters.

#### Parameters [#parameters-18]

##### dt [#dt]

`number`

Elapsed time in milliseconds from last frame.

##### now [#now]

`number`

#### Returns [#returns-27]

`void`

#### Overrides [#overrides-21]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`update`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#update)

***

### updateFocus() [#updatefocus]

\> **updateFocus**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5156

#### Returns [#returns-28]

`void`

***

### updateMotions() [#updatemotions]

\> `protected` **updateMotions**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3270

Updates all active motions for the model and emits lifecycle events.

This method coordinates the update cycle for both primary and parallel motion managers,
ensuring all animations are synchronized with the current timestamp. It emits events
before and after the update process, allowing external listeners to hook into the motion
lifecycle. The return value indicates whether any motion was actively updated during this cycle.

#### Parameters [#parameters-19]

##### model [#model]

`object`

The model instance to apply motion updates to.

##### now [#now-1]

`number`

The current timestamp (in milliseconds) used to calculate motion progress.

#### Returns [#returns-29]

`boolean`

Returns `true` if any motion (primary or parallel) was updated; `false` otherwise.

#### Emits [#emits-2]

beforeMotionUpdate - Triggered before any motion updates are processed.

#### Emits [#emits-3]

afterMotionUpdate - Triggered after all motion updates are completed.

#### Inherited from [#inherited-from-25]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateMotions`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatemotions)

***

### updateNaturalMovements() [#updatenaturalmovements]

\> **updateNaturalMovements**(`_dt`, `now`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5157

#### Parameters [#parameters-20]

##### \_dt [#_dt]

`number`

##### now [#now-2]

`number`

#### Returns [#returns-30]

`void`

***

### updateTransform() [#updatetransform]

\> **updateTransform**(`transform`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3242

Updates the model's transform.

#### Parameters [#parameters-21]

##### transform [#transform]

`Matrix`

The world transform.

#### Returns [#returns-31]

`void`

#### Inherited from [#inherited-from-26]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateTransform`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatetransform)

***

### updateWebGLContext() [#updatewebglcontext]

\> **updateWebGLContext**(`gl`, `glContextID`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5148

Updates WebGL context bound to this model.

#### Parameters [#parameters-22]

##### gl [#gl-1]

`WebGLRenderingContext`

WebGL context.

##### glContextID [#glcontextid]

`number`

Unique ID for given WebGL context.

#### Returns [#returns-32]

`void`

#### Overrides [#overrides-22]

[`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel).[`updateWebGLContext`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel#updatewebglcontext)


# Class: CubismLegacyModelSettings (/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4985

Parses, and provides access to the settings JSON.

## Extends [#extends]

* [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismLegacyModelSettings**(`json`): `CubismLegacyModelSettings`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5002

#### Parameters [#parameters]

##### json [#json]

[`ModelJSON`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/ModelJSON) & `object`

#### Returns [#returns]

`CubismLegacyModelSettings`

#### Overrides [#overrides]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#constructor)

## Properties [#properties]

### expressions? [#expressions]

\> `optional` &#x2A;*expressions?**: [`Expression`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Expression)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4995

***

### hitAreas? [#hitareas]

\> `optional` &#x2A;*hitAreas?**: [`HitArea`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/HitArea)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4992

***

### initOpacities? [#initopacities]

\> `optional` &#x2A;*initOpacities?**: [`InitOpacity`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/InitOpacity)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4994

***

### initParams? [#initparams]

\> `optional` &#x2A;*initParams?**: [`InitParam`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/InitParam)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4993

***

### json [#json-1]

\> **json**: [`ModelJSON`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/ModelJSON)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4986

#### Overrides [#overrides-1]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`json`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#json)

***

### layout? [#layout]

\> `optional` &#x2A;*layout?**: [`Layout`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Layout)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4991

***

### moc [#moc]

\> **moc**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4987

Relative path of he moc file, typically ends with `.moc` in Cubism 2 and `.moc3` in Cubism 4.

#### Overrides [#overrides-2]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`moc`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#moc)

***

### motions [#motions]

\> **motions**: `Record`\<`string`, [`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)\[]>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4996

***

### name [#name]

\> **name**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:519

The model's name, typically used for displaying or logging. By default it's inferred from
the URL by taking the folder name (the second to last component). In Cubism 2 it'll be overwritten
by the `name` field of settings JSON.

#### Inherited from [#inherited-from]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`name`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#name)

***

### physics? [#physics]

\> `optional` &#x2A;*physics?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4990

Relative path of the physics file.

#### Overrides [#overrides-3]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`physics`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#physics)

***

### pose? [#pose]

\> `optional` &#x2A;*pose?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4989

Relative path of the pose file.

#### Overrides [#overrides-4]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`pose`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#pose)

***

### textures [#textures]

\> **textures**: `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:4988

Relative paths of the texture images.

#### Overrides [#overrides-5]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`textures`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#textures)

***

### url [#url]

\> **url**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:524

URL of the model settings file, used to resolve paths of the resource files defined in settings.
This typically ends with `.model.json` in Cubism 2 and `.model3.json` in Cubism 4.

#### Inherited from [#inherited-from-1]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`url`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#url)

## Methods [#methods]

### copy() [#copy]

\> `protected` **copy**(`json`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5008

Validates and copies *optional* properties from raw JSON.

#### Parameters [#parameters-1]

##### json [#json-2]

[`ModelJSON`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/ModelJSON)

#### Returns [#returns-1]

`void`

***

### getDefinedFiles() [#getdefinedfiles]

\> **getDefinedFiles**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:594

Retrieves all resource files defined in the settings.

#### Returns [#returns-2]

`string`\[]

A flat array of the paths of all resource files.

```js
modelSettings.getDefinedFiles();
// returns: ["foo.moc", "foo.png", ...]
```

#### Inherited from [#inherited-from-2]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`getDefinedFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#getdefinedfiles)

***

### getFileStem() [#getfilestem]

\> `protected` **getFileStem**(`path?`): `string` | `undefined`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:560

Returns the file name without extension from a path.

#### Parameters [#parameters-2]

##### path? [#path]

`string`

#### Returns [#returns-3]

`string` | `undefined`

#### Inherited from [#inherited-from-3]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`getFileStem`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#getfilestem)

***

### normalizeName() [#normalizename]

\> `protected` **normalizeName**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:551

Ensures the model name is meaningful; falls back to the folder name when missing or placeholder.

#### Returns [#returns-4]

`void`

#### Inherited from [#inherited-from-4]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`normalizeName`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#normalizename)

***

### replaceFiles() [#replacefiles]

\> **replaceFiles**(`replace`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5009

Replaces the resource files by running each file through the `replacer`.

#### Parameters [#parameters-3]

##### replace [#replace]

(`file`, `path`) => `string`

#### Returns [#returns-5]

`void`

#### Overrides [#overrides-6]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`replaceFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#replacefiles)

***

### resolveURL() [#resolveurl]

\> **resolveURL**(`path`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:567

Resolves a relative path using the [url](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#url). This is used to resolve the resource files
defined in the settings.

#### Parameters [#parameters-4]

##### path [#path-1]

`string`

Relative path.

#### Returns [#returns-6]

`string`

Resolved path.

#### Inherited from [#inherited-from-5]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`resolveURL`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#resolveurl)

***

### setModelName() [#setmodelname]

\> `protected` **setModelName**(...`candidates`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:556

Picks the first non-empty, non-placeholder name from candidates and applies it.
Falls back to [normalizeName](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#normalizename) when no candidate is usable.

#### Parameters [#parameters-5]

##### candidates [#candidates]

...(`string` | `undefined`)\[]

#### Returns [#returns-7]

`void`

#### Inherited from [#inherited-from-6]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`setModelName`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#setmodelname)

***

### validateFiles() [#validatefiles]

\> **validateFiles**(`files`): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:603

Validates that the files defined in the settings exist in given files. Each file will be
resolved by [resolveURL](/jsdoc/pixi-vn-live2d/core/functions/resolveURL) before comparison.

#### Parameters [#parameters-6]

##### files [#files]

`string`\[]

A flat array of file paths.

#### Returns [#returns-8]

`string`\[]

All the files which are defined in the settings and also exist in given files,
*including the optional files*.

#### Throws [#throws]

Error if any *essential* file is defined in settings but not included in given files.

#### Inherited from [#inherited-from-7]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`validateFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#validatefiles)

***

### isValidJSON() [#isvalidjson]

\> `static` **isValidJSON**(`json`): `json is ModelJSON`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5001

Checks if a JSON object is valid model settings.

#### Parameters [#parameters-7]

##### json [#json-3]

`unknown`

#### Returns [#returns-9]

`json is ModelJSON`


# Class: CubismLegacyMotionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyMotionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5030

Handles the motion playback for Live2D models.
Responsible for loading, playing, and managing motion states and audio.

## Emits [#emits]

[MotionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents)

## Extends [#extends]

* [`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager)\<`Live2DMotion`, [`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismLegacyMotionManager**(`parent`): `CubismLegacyMotionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5040

#### Parameters [#parameters]

##### parent [#parent]

[`CubismLegacyInternalModel`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyInternalModel)

#### Returns [#returns]

`CubismLegacyMotionManager`

#### Overrides [#overrides]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#constructor)

## Properties [#properties]

### currentAnalyzer? [#currentanalyzer]

\> `optional` &#x2A;*currentAnalyzer?**: `AnalyserNode`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3434

Analyzer element for the current sound being played.

#### Inherited from [#inherited-from]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentAnalyzer`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentanalyzer)

***

### currentAudio? [#currentaudio]

\> `optional` &#x2A;*currentAudio?**: `Sound`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3429

Audio element of the current motion if a sound file is defined with it.

#### Inherited from [#inherited-from-1]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentAudio`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentaudio)

***

### currentContext? [#currentcontext]

\> `optional` &#x2A;*currentContext?**: `AudioContext`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3439

Context element for the current sound being played.

#### Inherited from [#inherited-from-2]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentContext`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentcontext)

***

### definitions [#definitions]

\> `abstract` `readonly` **definitions**: `Partial`\<`Record`\<`string`, [`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)\[]>>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5031

Motion definitions copied from ModelSettings.

#### Overrides [#overrides-1]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`definitions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#definitions)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3449

Flags whether the instance has been destroyed.

#### Inherited from [#inherited-from-3]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#destroyed)

***

### expressionManager? [#expressionmanager]

\> `abstract` `optional` &#x2A;*expressionManager?**: [`CubismLegacyExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyExpressionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5039

Expression manager for handling model expressions.
Can be undefined if the settings define no expression.

#### Overrides [#overrides-2]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`expressionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#expressionmanager)

***

### groups [#groups]

\> `abstract` `readonly` **groups**: `object`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5032

Motion groups with specific internal usages. Includes at least the 'idle' field.

#### idle [#idle]

\> `readonly` **idle**: `"idle"`

#### Overrides [#overrides-3]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`groups`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#groups)

***

### lipSyncIds [#lipsyncids]

\> `readonly` **lipSyncIds**: `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5037

***

### motionDataType [#motiondatatype]

\> `abstract` `readonly` **motionDataType**: `"arraybuffer"` = `"arraybuffer"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5035

Indicates the content type of the motion files, varies in different Cubism versions.
Used as `xhr.responseType`.

#### Overrides [#overrides-4]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionDataType`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiondatatype)

***

### motionGroups [#motiongroups]

\> **motionGroups**: `Partial`\<`Record`\<`string`, (`Motion` | `undefined` | `null`)\[]>>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3419

The Motions. The structure is the same as [definitions](#definitions), initially each group contains
an empty array, which means all motions will be `undefined`. When a Motion has been loaded,
it'll fill the place in which it should be; when it fails to load, the place will be filled
with `null`.

#### Inherited from [#inherited-from-4]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionGroups`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiongroups)

***

### parent [#parent-1]

\> **parent**: [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3454

Reference to the parent InternalModel.

#### Inherited from [#inherited-from-5]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`parent`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#parent)

***

### playing [#playing]

\> **playing**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3444

Flags whether there is a motion currently playing.

#### Inherited from [#inherited-from-6]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`playing`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#playing)

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `MotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5036

***

### settings [#settings]

\> `readonly` **settings**: [`CubismLegacyModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5038

The ModelSettings reference.

#### Overrides [#overrides-5]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#settings)

***

### state [#state]

\> **state**: [`MotionState`](/jsdoc/pixi-vn-live2d/core/classes/MotionState)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3424

Maintains the state of this MotionManager.

#### Inherited from [#inherited-from-7]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`state`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#state)

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3378

Tag for logging.

#### Inherited from [#inherited-from-8]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#tag)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-9]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#prefixed)

## Methods [#methods]

### \_startMotion() [#_startmotion]

\> `abstract` `protected&#x60; **\_startMotion**(`motion`, `onFinish?`, `ignoreParamIds?`, `_loop?`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5047

Starts the Motion.

#### Parameters [#parameters-1]

##### motion [#motion]

`Live2DMotion`

The Motion to start.

##### onFinish? [#onfinish]

(`motion`) => `void`

Optional callback when finished.

##### ignoreParamIds? [#ignoreparamids]

`string`\[]

The ids to be ignored.

##### \_loop? [#_loop]

`boolean`

#### Returns [#returns-1]

`number`

An ID or token for the motion.

#### Overrides [#overrides-6]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`_startMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#_startmotion)

***

### \_stopAllMotions() [#_stopallmotions]

\> `abstract` `protected&#x60; **\_stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5048

Stops all playing motions.

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-7]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`_stopAllMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#_stopallmotions)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-3]

`this`

#### Inherited from [#inherited-from-10]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#addlistener)

***

### createMotion() [#createmotion]

\> `abstract` **createMotion**(`data`, `group`, `definition`): `Live2DMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5043

Creates a Motion from the data.

#### Parameters [#parameters-3]

##### data [#data]

`ArrayBuffer`

Content of the motion file. The format must be consistent with [MotionManager#motionDataType](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiondatatype).

##### group [#group]

`string`

The motion group.

##### definition [#definition]

[`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)

The motion definition.

#### Returns [#returns-4]

`Live2DMotion`

The created Motion.

#### Overrides [#overrides-8]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`createMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#createmotion)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5050

Destroys the instance and releases all resources.

#### Returns [#returns-5]

`void`

#### Emits [#emits-1]

[MotionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#destroy)

#### Overrides [#overrides-9]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#destroy)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-11]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-7]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-12]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#eventnames)

***

### getMotionAndApplyExpression() [#getmotionandapplyexpression]

\> `protected` **getMotionAndApplyExpression**(`group`, `index`, `expression?`): `Promise`\<`unknown`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3637

Loads a motion and applies the given expression with FORCE priority.

#### Parameters [#parameters-5]

##### group [#group-1]

`string`

The motion group.

##### index [#index]

`number`

The motion index.

##### expression? [#expression]

`string` | `number`

Expression to apply (optional).

#### Returns [#returns-8]

`Promise`\<`unknown`>

The loaded motion, or null if not started.

#### Inherited from [#inherited-from-13]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionAndApplyExpression`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionandapplyexpression)

***

### getMotionFile() [#getmotionfile]

\> `abstract` **getMotionFile**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5044

Retrieves the motion's file path by its definition.

#### Parameters [#parameters-6]

##### definition [#definition-1]

[`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)

Motion definition.

#### Returns [#returns-9]

`string`

The file path extracted from the given definition. Not resolved.

#### Overrides [#overrides-10]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionFile`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionfile)

***

### getMotionName() [#getmotionname]

\> `abstract` `protected` **getMotionName**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5045

Retrieves the motion's name by its definition.

#### Parameters [#parameters-7]

##### definition [#definition-2]

[`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)

Motion definition.

#### Returns [#returns-10]

`string`

The motion's name.

#### Overrides [#overrides-11]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionName`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionname)

***

### getSoundFile() [#getsoundfile]

\> `abstract` `protected` **getSoundFile**(`definition`): `string` | `undefined`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5046

Retrieves the motion's sound file by its definition.

#### Parameters [#parameters-8]

##### definition [#definition-3]

[`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)

Motion definition.

#### Returns [#returns-11]

`string` | `undefined`

The motion's sound file, or undefined.

#### Overrides [#overrides-12]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getSoundFile`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getsoundfile)

***

### init() [#init]

\> `protected` **init**(`options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5041

Should be called in the constructor of derived class to initialize options and setup motions.

#### Parameters [#parameters-9]

##### options? [#options]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

Initialization options for the manager.

#### Returns [#returns-12]

`void`

#### Overrides [#overrides-13]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`init`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#init)

***

### initializeAudio() [#initializeaudio]

\> `protected` **initializeAudio**(`audio`, `volume`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3490

Initializes audio playback and sets up audio analysis for lipsync.

#### Parameters [#parameters-10]

##### audio [#audio]

`Sound`

The Sound to initialize.

##### volume [#volume]

`number`

The playback volume (0-1).

#### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-14]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`initializeAudio`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#initializeaudio)

***

### isFinished() [#isfinished]

\> `abstract` **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5042

Checks if the motion playback has finished.

#### Returns [#returns-14]

`boolean`

#### Overrides [#overrides-14]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`isFinished`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#isfinished)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-11]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-15]

`number`

#### Inherited from [#inherited-from-15]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-12]

##### event [#event-3]

`T`

#### Returns [#returns-16]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-16]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#listeners)

***

### loadMotion() [#loadmotion]

\> **loadMotion**(`group`, `index`): `Promise`\<`Live2DMotion` | `undefined`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3479

Loads a Motion in a motion group. Errors in this method will not be thrown,
but be emitted with a "motionLoadError" event.

#### Parameters [#parameters-13]

##### group [#group-2]

`string`

The motion group.

##### index [#index-1]

`number`

Index in the motion group.

#### Returns [#returns-17]

`Promise`\<`Live2DMotion` | `undefined`>

Promise that resolves with the Motion, or with undefined if it can't be loaded.

#### Emits [#emits-2]

[MotionManagerEvents.motionLoaded](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#motionloaded)

#### Emits [#emits-3]

[MotionManagerEvents.motionLoadError](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#motionloaderror)

#### Inherited from [#inherited-from-17]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`loadMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#loadmotion)

***

### motionLastFrame() [#motionlastframe]

\> `abstract` **motionLastFrame**(`group`, `index`, `expression?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5051

Play the last frame of the given motion, optionally applying an expression.

#### Parameters [#parameters-14]

##### group [#group-3]

`string`

Motion group.

##### index [#index-2]

`number`

Motion index.

##### expression? [#expression-1]

Expression to apply (optional).

###### expression? [#expression-2]

`string` | `number`

#### Returns [#returns-18]

`Promise`\<`boolean`>

Promise resolving to true if successful.

#### Overrides [#overrides-15]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionLastFrame`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motionlastframe)

***

### mouthSync() [#mouthsync]

\> **mouthSync**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3560

Move the mouth for lipsync.

#### Returns [#returns-19]

`number`

The current lipsync value.

#### Inherited from [#inherited-from-18]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`mouthSync`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#mouthsync)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-15]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-20]

`this`

#### Inherited from [#inherited-from-19]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`off`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-16]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-21]

`this`

#### Inherited from [#inherited-from-20]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`on`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-17]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-22]

`this`

#### Inherited from [#inherited-from-21]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`once`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-18]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-23]

`this`

#### Inherited from [#inherited-from-22]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-19]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-24]

`this`

#### Inherited from [#inherited-from-23]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#removelistener)

***

### setupMotions() [#setupmotions]

\> `protected` **setupMotions**(`options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3469

Sets up motions from the definitions, and preloads them according to the preload strategy.

#### Parameters [#parameters-20]

##### options? [#options-1]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

Options controlling which motions to preload.

#### Returns [#returns-25]

`void`

#### Inherited from [#inherited-from-24]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`setupMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#setupmotions)

***

### speak() [#speak]

\> **speak**(`sound`, `volume?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3502

Only play sound with lip sync.

#### Parameters [#parameters-21]

##### sound [#sound]

`string`

The audio url or base64 content.

##### volume? [#volume-1]

Volume of the sound (0-1).

###### expression? [#expression-3]

`string` | `number`

###### onError? [#onerror]

(`e`) => `void`

###### onFinish? [#onfinish-1]

() => `void`

###### resetExpression? [#resetexpression]

`boolean`

###### volume? [#volume-2]

`number`

#### Returns [#returns-26]

`Promise`\<`boolean`>

Promise that resolves with true if the sound is playing, false otherwise.

#### Inherited from [#inherited-from-25]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`speak`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#speak)

***

### startMotion() [#startmotion]

\> **startMotion**(`group`, `index`, `priority?`, `sound?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3525

Starts a motion with the given priority.

#### Parameters [#parameters-22]

##### group [#group-4]

`string`

The motion group.

##### index [#index-3]

`number`

Index in the motion group.

##### priority? [#priority]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. Default: NORMAL (2).

##### sound? [#sound-1]

[`MotionStartOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionStartOptions)

The audio url or base64 content.

#### Returns [#returns-27]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, false otherwise.

#### Inherited from [#inherited-from-26]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`startMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#startmotion)

***

### startRandomMotion() [#startrandommotion]

\> **startRandomMotion**(`group`, `priority?`, `sound?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3540

Starts a random Motion as given priority.

#### Parameters [#parameters-23]

##### group [#group-5]

`string`

The motion group.

##### priority? [#priority-1]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. Default: IDLE (1).

##### sound? [#sound-2]

[`MotionStartRandomOptions`](/jsdoc/pixi-vn-live2d/core/type-aliases/MotionStartRandomOptions)

The audio url or base64 content.

#### Returns [#returns-28]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, false otherwise.

#### Inherited from [#inherited-from-27]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`startRandomMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#startrandommotion)

***

### stopAllMotions() [#stopallmotions]

\> **stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3548

Stops all playing motions as well as the sound.

#### Returns [#returns-29]

`void`

#### Inherited from [#inherited-from-28]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`stopAllMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#stopallmotions)

***

### stopSpeaking() [#stopspeaking]

\> **stopSpeaking**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3544

Stops current audio playback and lipsync.

#### Returns [#returns-30]

`void`

#### Inherited from [#inherited-from-29]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`stopSpeaking`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#stopspeaking)

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3555

Updates parameters of the core model.

#### Parameters [#parameters-24]

##### model [#model]

`object`

The core model.

##### now [#now]

`number`

Current time in milliseconds.

#### Returns [#returns-31]

`boolean`

True if the parameters have been actually updated.

#### Inherited from [#inherited-from-30]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`update`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#update)

***

### updateParameters() [#updateparameters]

\> `abstract` `protected` **updateParameters**(`model`, `_now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5049

Updates parameters of the core model.

#### Parameters [#parameters-25]

##### model [#model-1]

`Live2DModelWebGL`

The core model.

##### \_now [#_now]

`number`

#### Returns [#returns-32]

`boolean`

True if the parameters have been actually updated.

#### Overrides [#overrides-16]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`updateParameters`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#updateparameters)


# Class: CubismLegacyParallelMotionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyParallelMotionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5055

## Extends [#extends]

* `ParallelMotionManager`\<`Live2DMotion`, [`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismLegacyParallelMotionManager**(`parent`): `CubismLegacyParallelMotionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5057

#### Parameters [#parameters]

##### parent [#parent]

[`CubismLegacyInternalModel`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyInternalModel)

#### Returns [#returns]

`CubismLegacyParallelMotionManager`

#### Overrides [#overrides]

`ParallelMotionManager<Live2DMotion, Cubism2Spec.Motion>.constructor`

## Properties [#properties]

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:776

Flags the instances has been destroyed.

#### Inherited from [#inherited-from]

[`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager#destroyed)

***

### manager [#manager]

\> **manager**: [`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:760

#### Inherited from [#inherited-from-1]

[`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager).[`manager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager#manager)

***

### parent [#parent-1]

\> `readonly` **parent**: [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:777

#### Inherited from [#inherited-from-2]

[`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager).[`parent`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager#parent)

***

### playing [#playing]

\> **playing**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:772

Flags there's a motion playing.

#### Inherited from [#inherited-from-3]

[`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager).[`playing`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager#playing)

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `MotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5056

***

### settings [#settings]

\> `readonly` **settings**: [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:764

The ModelSettings reference.

#### Inherited from [#inherited-from-4]

`ParallelMotionManager.settings`

***

### state [#state]

\> **state**: [`MotionState`](/jsdoc/pixi-vn-live2d/core/classes/MotionState)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:768

Maintains the state of this MotionManager.

#### Inherited from [#inherited-from-5]

`ParallelMotionManager.state`

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:759

Tag for logging.

#### Inherited from [#inherited-from-6]

[`CubismParallelMotionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager#tag)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-7]

`ParallelMotionManager.prefixed`

## Methods [#methods]

### \_startMotion() [#_startmotion]

\> `protected&#x60; **\_startMotion**(`motion`, `onFinish?`, `ignoreParamIds?`, `_loop?`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5060

Starts the Motion.

#### Parameters [#parameters-1]

##### motion [#motion]

`Live2DMotion`

##### onFinish? [#onfinish]

(`motion`) => `void`

##### ignoreParamIds? [#ignoreparamids]

`string`\[]

##### \_loop? [#_loop]

`boolean`

#### Returns [#returns-1]

`number`

#### Overrides [#overrides-1]

`ParallelMotionManager._startMotion`

***

### \_stopAllMotions() [#_stopallmotions]

\> `protected&#x60; **\_stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5061

Stops all playing motions.

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-2]

`ParallelMotionManager._stopAllMotions`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-3]

`this`

#### Inherited from [#inherited-from-8]

`ParallelMotionManager.addListener`

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5063

Destroys the instance.

#### Returns [#returns-4]

`void`

#### Emits [#emits]

[MotionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#destroy)

#### Overrides [#overrides-3]

`ParallelMotionManager.destroy`

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-3]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-5]

`boolean`

#### Inherited from [#inherited-from-9]

`ParallelMotionManager.emit`

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-6]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-10]

`ParallelMotionManager.eventNames`

***

### getMotionName() [#getmotionname]

\> `protected` **getMotionName**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5059

Retrieves the motion's name by its definition.

#### Parameters [#parameters-4]

##### definition [#definition]

[`Motion`](/jsdoc/pixi-vn-live2d/core/namespaces/Cubism2Spec/interfaces/Motion)

#### Returns [#returns-7]

`string`

The motion's name.

#### Overrides [#overrides-4]

`ParallelMotionManager.getMotionName`

***

### isFinished() [#isfinished]

\> **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5058

Checks if the motion playback has finished.

#### Returns [#returns-8]

`boolean`

#### Overrides [#overrides-5]

`ParallelMotionManager.isFinished`

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-5]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-9]

`number`

#### Inherited from [#inherited-from-11]

`ParallelMotionManager.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-6]

##### event [#event-3]

`T`

#### Returns [#returns-10]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-12]

`ParallelMotionManager.listeners`

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-7]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-11]

`this`

#### Inherited from [#inherited-from-13]

`ParallelMotionManager.off`

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-8]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-12]

`this`

#### Inherited from [#inherited-from-14]

`ParallelMotionManager.on`

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-9]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-13]

`this`

#### Inherited from [#inherited-from-15]

`ParallelMotionManager.once`

***

### playMotionLastFrame() [#playmotionlastframe]

\> **playMotionLastFrame**(`group`, `index`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5064

#### Parameters [#parameters-10]

##### group [#group]

`string`

##### index [#index]

`number`

#### Returns [#returns-14]

`Promise`\<`boolean`>

#### Overrides [#overrides-6]

`ParallelMotionManager.playMotionLastFrame`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-11]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-15]

`this`

#### Inherited from [#inherited-from-16]

`ParallelMotionManager.removeAllListeners`

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-12]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-16]

`this`

#### Inherited from [#inherited-from-17]

`ParallelMotionManager.removeListener`

***

### startMotion() [#startmotion]

\> **startMotion**(`group`, `index`, `priority?`, `options?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:788

Starts a motion as given priority.

#### Parameters [#parameters-13]

##### group [#group-1]

`string`

The motion group.

##### index [#index-1]

`number`

Index in the motion group.

##### priority? [#priority]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. default: 2 (NORMAL)

##### options? [#options]

`string`\[] | [`ParallelMotionStartOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/ParallelMotionStartOptions)

#### Returns [#returns-17]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-18]

`ParallelMotionManager.startMotion`

***

### startRandomMotion() [#startrandommotion]

\> **startRandomMotion**(`group`, `priority?`, `loop?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:796

Starts a random Motion as given priority.

#### Parameters [#parameters-14]

##### group [#group-2]

`string`

The motion group.

##### priority? [#priority-1]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. (default: 1 `IDLE`)

##### loop? [#loop]

[`ParallelMotionStartRandomOptions`](/jsdoc/pixi-vn-live2d/core/type-aliases/ParallelMotionStartRandomOptions)

Whether the motion should loop. Overrides Cubism 3/4/5 motion JSON loop metadata when specified.

#### Returns [#returns-18]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-19]

`ParallelMotionManager.startRandomMotion`

***

### stopAllMotions() [#stopallmotions]

\> **stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:800

Stops all playing motions as well as the sound.

#### Returns [#returns-19]

`void`

#### Inherited from [#inherited-from-20]

`ParallelMotionManager.stopAllMotions`

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:807

Updates parameters of the core model.

#### Parameters [#parameters-15]

##### model [#model]

`object`

The core model.

##### now [#now]

`number`

Current time in milliseconds.

#### Returns [#returns-20]

`boolean`

True if the parameters have been actually updated.

#### Inherited from [#inherited-from-21]

`ParallelMotionManager.update`

***

### updateParameters() [#updateparameters]

\> `protected` **updateParameters**(`model`, `_now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5062

Updates parameters of the core model.

#### Parameters [#parameters-16]

##### model [#model-1]

`Live2DModelWebGL`

The core model.

##### \_now [#_now]

`number`

#### Returns [#returns-21]

`boolean`

True if the parameters have been actually updated.

#### Overrides [#overrides-7]

`ParallelMotionManager.updateParameters`


# Class: CubismModelSettings (/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6022

Parses, and provides access to the settings JSON.

## Extends [#extends]

* [`CubismModelSettingJsonMixin`](/jsdoc/pixi-vn-live2d/core/type-aliases/CubismModelSettingJsonMixin).[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismModelSettings**(`json`): `CubismModelSettings`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6040

#### Parameters [#parameters]

##### json [#json]

`any`

#### Returns [#returns]

`CubismModelSettings`

#### Inherited from [#inherited-from]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#constructor)

## Properties [#properties]

### expressions? [#expressions]

\> `optional` &#x2A;*expressions?**: `Expression`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6033

***

### getEyeBlinkParameterCount [#geteyeblinkparametercount]

\> **getEyeBlinkParameterCount**: () => `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6035

#### Returns [#returns-1]

`number`

#### Inherited from [#inherited-from-1]

`CubismModelSettingJsonMixin.getEyeBlinkParameterCount`

***

### getEyeBlinkParameterId [#geteyeblinkparameterid]

\> **getEyeBlinkParameterId**: (`index`) => `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6036

#### Parameters [#parameters-1]

##### index [#index]

`number`

#### Returns [#returns-2]

`CubismId`

#### Inherited from [#inherited-from-2]

`CubismModelSettingJsonMixin.getEyeBlinkParameterId`

***

### getLipSyncParameterCount [#getlipsyncparametercount]

\> **getLipSyncParameterCount**: () => `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6037

#### Returns [#returns-3]

`number`

#### Inherited from [#inherited-from-3]

`CubismModelSettingJsonMixin.getLipSyncParameterCount`

***

### getLipSyncParameterId [#getlipsyncparameterid]

\> **getLipSyncParameterId**: (`index`) => `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6038

#### Parameters [#parameters-2]

##### index [#index-1]

`number`

#### Returns [#returns-4]

`CubismId`

#### Inherited from [#inherited-from-4]

`CubismModelSettingJsonMixin.getLipSyncParameterId`

***

### hitAreas? [#hitareas]

\> `optional` &#x2A;*hitAreas?**: `object`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6029

#### Id [#id]

\> **Id**: `string`

#### Name [#name]

\> **Name**: `string`

***

### json [#json-1]

\> **json**: `ModelJSON`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6025

#### Inherited from [#inherited-from-5]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`json`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#json)

***

### layout? [#layout]

\> `optional` &#x2A;*layout?**: `Record`\<`string`, `number`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6028

***

### moc [#moc]

\> **moc**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6026

Relative path of he moc file, typically ends with `.moc` in Cubism 2 and `.moc3` in Cubism 4.

#### Inherited from [#inherited-from-6]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`moc`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#moc)

***

### motions? [#motions]

\> `optional` &#x2A;*motions?**: `Record`\<`string`, `Motion`\[]>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6034

***

### name [#name-1]

\> **name**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:519

The model's name, typically used for displaying or logging. By default it's inferred from
the URL by taking the folder name (the second to last component). In Cubism 2 it'll be overwritten
by the `name` field of settings JSON.

#### Inherited from [#inherited-from-7]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`name`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#name)

***

### physics? [#physics]

\> `optional` &#x2A;*physics?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:540

Relative path of the physics file.

#### Inherited from [#inherited-from-8]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`physics`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#physics)

***

### pose? [#pose]

\> `optional` &#x2A;*pose?**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:536

Relative path of the pose file.

#### Inherited from [#inherited-from-9]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`pose`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#pose)

***

### textures [#textures]

\> **textures**: `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6027

Relative paths of the texture images.

#### Inherited from [#inherited-from-10]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`textures`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#textures)

***

### url [#url]

\> **url**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:524

URL of the model settings file, used to resolve paths of the resource files defined in settings.
This typically ends with `.model.json` in Cubism 2 and `.model3.json` in Cubism 4.

#### Inherited from [#inherited-from-11]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`url`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#url)

## Methods [#methods]

### getDefinedFiles() [#getdefinedfiles]

\> **getDefinedFiles**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:594

Retrieves all resource files defined in the settings.

#### Returns [#returns-5]

`string`\[]

A flat array of the paths of all resource files.

```js
modelSettings.getDefinedFiles();
// returns: ["foo.moc", "foo.png", ...]
```

#### Inherited from [#inherited-from-12]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`getDefinedFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#getdefinedfiles)

***

### getExpressionCount() [#getexpressioncount]

\> **getExpressionCount**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5794

表情設定ファイルの数を取得する

#### Returns [#returns-6]

`number`

表情設定ファイルの数

#### Inherited from [#inherited-from-13]

`CubismModelSettingJsonMixin.getExpressionCount`

***

### getExpressionFileName() [#getexpressionfilename]

\> **getExpressionFileName**(`index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5806

表情設定ファイルの名前を取得する

#### Parameters [#parameters-3]

##### index [#index-2]

`number`

配列のインデックス値

#### Returns [#returns-7]

`string`

表情設定ファイルの名前

#### Inherited from [#inherited-from-14]

`CubismModelSettingJsonMixin.getExpressionFileName`

***

### getExpressionName() [#getexpressionname]

\> **getExpressionName**(`index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5800

表情設定ファイルを識別する名前（別名）を取得する

#### Parameters [#parameters-4]

##### index [#index-3]

`number`

配列のインデックス値

#### Returns [#returns-8]

`string`

表情の名前

#### Inherited from [#inherited-from-15]

`CubismModelSettingJsonMixin.getExpressionName`

***

### getEyeBlinkParameters() [#geteyeblinkparameters]

\> **getEyeBlinkParameters**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6044

#### Returns [#returns-9]

`string`\[]

***

### getFileStem() [#getfilestem]

\> `protected` **getFileStem**(`path?`): `string` | `undefined`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:560

Returns the file name without extension from a path.

#### Parameters [#parameters-5]

##### path? [#path]

`string`

#### Returns [#returns-10]

`string` | `undefined`

#### Inherited from [#inherited-from-16]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`getFileStem`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#getfilestem)

***

### getHitAreaId() [#gethitareaid]

\> **getHitAreaId**(`index`): `CubismId`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5773

当たり判定に設定されたIDを取得する

#### Parameters [#parameters-6]

##### index [#index-4]

`number`

配列のindex

#### Returns [#returns-11]

`CubismId`

当たり判定に設定されたID

#### Inherited from [#inherited-from-17]

`CubismModelSettingJsonMixin.getHitAreaId`

***

### getHitAreaName() [#gethitareaname]

\> **getHitAreaName**(`index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5779

当たり判定に設定された名前を取得する

#### Parameters [#parameters-7]

##### index [#index-5]

`number`

配列のインデックス値

#### Returns [#returns-12]

`string`

当たり判定に設定された名前

#### Inherited from [#inherited-from-18]

`CubismModelSettingJsonMixin.getHitAreaName`

***

### getHitAreasCount() [#gethitareascount]

\> **getHitAreasCount**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5766

モデルに設定された当たり判定の数を取得する

#### Returns [#returns-13]

`number`

モデルに設定された当たり判定の数

#### Inherited from [#inherited-from-19]

`CubismModelSettingJsonMixin.getHitAreasCount`

***

### getJson() [#getjson]

\> **getJson**(): `CubismJson`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5740

CubismJsonオブジェクトを取得する

#### Returns [#returns-14]

`CubismJson`

CubismJson

#### Inherited from [#inherited-from-20]

`CubismModelSettingJsonMixin.getJson`

***

### getLayoutMap() [#getlayoutmap]

\> **getLayoutMap**(`outLayoutMap`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5863

レイアウト情報を取得する

#### Parameters [#parameters-8]

##### outLayoutMap [#outlayoutmap]

`csmMap`\<`string`, `number`>

csmMapクラスのインスタンス

#### Returns [#returns-15]

`boolean`

true レイアウト情報が存在する

#### Inherited from [#inherited-from-21]

`CubismModelSettingJsonMixin.getLayoutMap`

***

### getLipSyncParameters() [#getlipsyncparameters]

\> **getLipSyncParameters**(): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6045

#### Returns [#returns-16]

`string`\[]

***

### getModelFileName() [#getmodelfilename]

\> **getModelFileName**(): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5745

Mocファイルの名前を取得する

#### Returns [#returns-17]

`string`

Mocファイルの名前

#### Inherited from [#inherited-from-22]

`CubismModelSettingJsonMixin.getModelFileName`

***

### getMotionCount() [#getmotioncount]

\> **getMotionCount**(`groupName`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5823

モーショングループに含まれるモーションの数を取得する

#### Parameters [#parameters-9]

##### groupName [#groupname]

`string`

モーショングループの名前

#### Returns [#returns-18]

`number`

モーショングループの数

#### Inherited from [#inherited-from-23]

`CubismModelSettingJsonMixin.getMotionCount`

***

### getMotionFadeInTimeValue() [#getmotionfadeintimevalue]

\> **getMotionFadeInTimeValue**(`groupName`, `index`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5844

モーション開始時のフェードイン処理時間を取得する

#### Parameters [#parameters-10]

##### groupName [#groupname-1]

`string`

モーショングループの名前

##### index [#index-6]

`number`

配列のインデックス値

#### Returns [#returns-19]

`number`

フェードイン処理時間\[秒]

#### Inherited from [#inherited-from-24]

`CubismModelSettingJsonMixin.getMotionFadeInTimeValue`

***

### getMotionFadeOutTimeValue() [#getmotionfadeouttimevalue]

\> **getMotionFadeOutTimeValue**(`groupName`, `index`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5851

モーション終了時のフェードアウト処理時間を取得する

#### Parameters [#parameters-11]

##### groupName [#groupname-2]

`string`

モーショングループの名前

##### index [#index-7]

`number`

配列のインデックス値

#### Returns [#returns-20]

`number`

フェードアウト処理時間\[秒]

#### Inherited from [#inherited-from-25]

`CubismModelSettingJsonMixin.getMotionFadeOutTimeValue`

***

### getMotionFileName() [#getmotionfilename]

\> **getMotionFileName**(`groupName`, `index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5830

グループ名とインデックス値からモーションファイル名を取得する

#### Parameters [#parameters-12]

##### groupName [#groupname-3]

`string`

モーショングループの名前

##### index [#index-8]

`number`

配列のインデックス値

#### Returns [#returns-21]

`string`

モーションファイルの名前

#### Inherited from [#inherited-from-26]

`CubismModelSettingJsonMixin.getMotionFileName`

***

### getMotionGroupCount() [#getmotiongroupcount]

\> **getMotionGroupCount**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5811

モーショングループの数を取得する

#### Returns [#returns-22]

`number`

モーショングループの数

#### Inherited from [#inherited-from-27]

`CubismModelSettingJsonMixin.getMotionGroupCount`

***

### getMotionGroupName() [#getmotiongroupname]

\> **getMotionGroupName**(`index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5817

モーショングループの名前を取得する

#### Parameters [#parameters-13]

##### index [#index-9]

`number`

配列のインデックス値

#### Returns [#returns-23]

`string`

モーショングループの名前

#### Inherited from [#inherited-from-28]

`CubismModelSettingJsonMixin.getMotionGroupName`

***

### getMotionSoundFileName() [#getmotionsoundfilename]

\> **getMotionSoundFileName**(`groupName`, `index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5837

モーションに対応するサウンドファイルの名前を取得する

#### Parameters [#parameters-14]

##### groupName [#groupname-4]

`string`

モーショングループの名前

##### index [#index-10]

`number`

配列のインデックス値

#### Returns [#returns-24]

`string`

サウンドファイルの名前

#### Inherited from [#inherited-from-29]

`CubismModelSettingJsonMixin.getMotionSoundFileName`

***

### getPhysicsFileName() [#getphysicsfilename]

\> **getPhysicsFileName**(): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5784

物理演算設定ファイルの名前を取得する

#### Returns [#returns-25]

`string`

物理演算設定ファイルの名前

#### Inherited from [#inherited-from-30]

`CubismModelSettingJsonMixin.getPhysicsFileName`

***

### getPoseFileName() [#getposefilename]

\> **getPoseFileName**(): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5789

パーツ切り替え設定ファイルの名前を取得する

#### Returns [#returns-26]

`string`

パーツ切り替え設定ファイルの名前

#### Inherited from [#inherited-from-31]

`CubismModelSettingJsonMixin.getPoseFileName`

***

### getTextureCount() [#gettexturecount]

\> **getTextureCount**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5750

モデルが使用するテクスチャの数を取得する
テクスチャの数

#### Returns [#returns-27]

`number`

#### Inherited from [#inherited-from-32]

`CubismModelSettingJsonMixin.getTextureCount`

***

### getTextureDirectory() [#gettexturedirectory]

\> **getTextureDirectory**(): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5755

テクスチャが配置されたディレクトリの名前を取得する

#### Returns [#returns-28]

`string`

テクスチャが配置されたディレクトリの名前

#### Inherited from [#inherited-from-33]

`CubismModelSettingJsonMixin.getTextureDirectory`

***

### getTextureFileName() [#gettexturefilename]

\> **getTextureFileName**(`index`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5761

モデルが使用するテクスチャの名前を取得する

#### Parameters [#parameters-15]

##### index [#index-11]

`number`

配列のインデックス値

#### Returns [#returns-29]

`string`

テクスチャの名前

#### Inherited from [#inherited-from-34]

`CubismModelSettingJsonMixin.getTextureFileName`

***

### getUserDataFile() [#getuserdatafile]

\> **getUserDataFile**(): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5856

ユーザーデータのファイル名を取得する

#### Returns [#returns-30]

`string`

ユーザーデータのファイル名

#### Inherited from [#inherited-from-35]

`CubismModelSettingJsonMixin.getUserDataFile`

***

### normalizeName() [#normalizename]

\> `protected` **normalizeName**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:551

Ensures the model name is meaningful; falls back to the folder name when missing or placeholder.

#### Returns [#returns-31]

`void`

#### Inherited from [#inherited-from-36]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`normalizeName`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#normalizename)

***

### release() [#release]

\> **release**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:5734

デストラクタ相当の処理

#### Returns [#returns-32]

`void`

#### Inherited from [#inherited-from-37]

`CubismModelSettingJsonMixin.release`

***

### replaceFiles() [#replacefiles]

\> **replaceFiles**(`replace`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6043

Replaces the resource files by running each file through the `replacer`.

#### Parameters [#parameters-16]

##### replace [#replace]

(`file`, `path`) => `string`

#### Returns [#returns-33]

`void`

#### Inherited from [#inherited-from-38]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`replaceFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#replacefiles)

***

### resolveURL() [#resolveurl]

\> **resolveURL**(`path`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:567

Resolves a relative path using the [url](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#url). This is used to resolve the resource files
defined in the settings.

#### Parameters [#parameters-17]

##### path [#path-1]

`string`

Relative path.

#### Returns [#returns-34]

`string`

Resolved path.

#### Inherited from [#inherited-from-39]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`resolveURL`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#resolveurl)

***

### setModelName() [#setmodelname]

\> `protected` **setModelName**(...`candidates`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:556

Picks the first non-empty, non-placeholder name from candidates and applies it.
Falls back to [normalizeName](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#normalizename) when no candidate is usable.

#### Parameters [#parameters-18]

##### candidates [#candidates]

...(`string` | `undefined`)\[]

#### Returns [#returns-35]

`void`

#### Inherited from [#inherited-from-40]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`setModelName`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#setmodelname)

***

### validateFiles() [#validatefiles]

\> **validateFiles**(`files`): `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:603

Validates that the files defined in the settings exist in given files. Each file will be
resolved by [resolveURL](/jsdoc/pixi-vn-live2d/core/functions/resolveURL) before comparison.

#### Parameters [#parameters-19]

##### files [#files]

`string`\[]

A flat array of file paths.

#### Returns [#returns-36]

`string`\[]

All the files which are defined in the settings and also exist in given files,
*including the optional files*.

#### Throws [#throws]

Error if any *essential* file is defined in settings but not included in given files.

#### Inherited from [#inherited-from-41]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings).[`validateFiles`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings#validatefiles)

***

### isValidJSON() [#isvalidjson]

\> `static` **isValidJSON**(`json`): `json is ModelJSON`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6039

#### Parameters [#parameters-20]

##### json [#json-2]

`unknown`

#### Returns [#returns-37]

`json is ModelJSON`


# Class: CubismMotionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismMotionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6152

Handles the motion playback for Live2D models.
Responsible for loading, playing, and managing motion states and audio.

## Emits [#emits]

[MotionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents)

## Extends [#extends]

* [`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager)\<`CubismMotion`, `CubismSpec.Motion`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismMotionManager**(`parent`): `CubismMotionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6163

#### Parameters [#parameters]

##### parent [#parent]

[`CubismInternalModel`](/jsdoc/pixi-vn-live2d/core/classes/CubismInternalModel)

#### Returns [#returns]

`CubismMotionManager`

#### Overrides [#overrides]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`constructor`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#constructor)

## Properties [#properties]

### currentAnalyzer? [#currentanalyzer]

\> `optional` &#x2A;*currentAnalyzer?**: `AnalyserNode`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3434

Analyzer element for the current sound being played.

#### Inherited from [#inherited-from]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentAnalyzer`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentanalyzer)

***

### currentAudio? [#currentaudio]

\> `optional` &#x2A;*currentAudio?**: `Sound`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3429

Audio element of the current motion if a sound file is defined with it.

#### Inherited from [#inherited-from-1]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentAudio`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentaudio)

***

### currentContext? [#currentcontext]

\> `optional` &#x2A;*currentContext?**: `AudioContext`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3439

Context element for the current sound being played.

#### Inherited from [#inherited-from-2]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`currentContext`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#currentcontext)

***

### definitions [#definitions]

\> `abstract` `readonly` **definitions**: `Partial`\<`Record`\<`string`, `CubismSpec.Motion`\[]>>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6153

Motion definitions copied from ModelSettings.

#### Overrides [#overrides-1]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`definitions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#definitions)

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3449

Flags whether the instance has been destroyed.

#### Inherited from [#inherited-from-3]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`destroyed`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#destroyed)

***

### expressionManager? [#expressionmanager]

\> `abstract` `optional` &#x2A;*expressionManager?**: [`CubismExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismExpressionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6160

Expression manager for handling model expressions.
Can be undefined if the settings define no expression.

#### Overrides [#overrides-2]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`expressionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#expressionmanager)

***

### eyeBlinkIds [#eyeblinkids]

\> **eyeBlinkIds**: `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6161

***

### groups [#groups]

\> `abstract` `readonly` **groups**: `object`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6154

Motion groups with specific internal usages. Includes at least the 'idle' field.

#### idle [#idle]

\> `readonly` **idle**: `"Idle"`

#### Overrides [#overrides-3]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`groups`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#groups)

***

### lipSyncIds [#lipsyncids]

\> **lipSyncIds**: `string`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6162

***

### motionDataType [#motiondatatype]

\> `abstract` `readonly` **motionDataType**: `"arraybuffer"` = `"arraybuffer"`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6157

Indicates the content type of the motion files, varies in different Cubism versions.
Used as `xhr.responseType`.

#### Overrides [#overrides-4]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionDataType`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiondatatype)

***

### motionGroups [#motiongroups]

\> **motionGroups**: `Partial`\<`Record`\<`string`, (`Motion` | `undefined` | `null`)\[]>>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3419

The Motions. The structure is the same as [definitions](#definitions), initially each group contains
an empty array, which means all motions will be `undefined`. When a Motion has been loaded,
it'll fill the place in which it should be; when it fails to load, the place will be filled
with `null`.

#### Inherited from [#inherited-from-4]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionGroups`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiongroups)

***

### parent [#parent-1]

\> **parent**: [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3454

Reference to the parent InternalModel.

#### Inherited from [#inherited-from-5]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`parent`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#parent)

***

### playing [#playing]

\> **playing**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3444

Flags whether there is a motion currently playing.

#### Inherited from [#inherited-from-6]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`playing`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#playing)

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `CubismMotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6158

***

### settings [#settings]

\> `readonly` **settings**: [`CubismModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6159

The ModelSettings reference.

#### Overrides [#overrides-5]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`settings`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#settings)

***

### state [#state]

\> **state**: [`MotionState`](/jsdoc/pixi-vn-live2d/core/classes/MotionState)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3424

Maintains the state of this MotionManager.

#### Inherited from [#inherited-from-7]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`state`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#state)

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3378

Tag for logging.

#### Inherited from [#inherited-from-8]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`tag`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#tag)

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-9]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`prefixed`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#prefixed)

## Methods [#methods]

### \_startMotion() [#_startmotion]

\> `abstract` `protected&#x60; **\_startMotion**(`motion`, `onFinish?`, `ignoreParamIds?`, `loop?`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6166

Starts the Motion.

#### Parameters [#parameters-1]

##### motion [#motion]

`CubismMotion`

The Motion to start.

##### onFinish? [#onfinish]

(`motion`) => `void`

Optional callback when finished.

##### ignoreParamIds? [#ignoreparamids]

`string`\[]

The ids to be ignored.

##### loop? [#loop]

`boolean`

Whether the motion should loop.

#### Returns [#returns-1]

`number`

An ID or token for the motion.

#### Overrides [#overrides-6]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`_startMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#_startmotion)

***

### \_stopAllMotions() [#_stopallmotions]

\> `abstract` `protected&#x60; **\_stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6167

Stops all playing motions.

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-7]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`_stopAllMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#_stopallmotions)

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-3]

`this`

#### Inherited from [#inherited-from-10]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`addListener`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#addlistener)

***

### createMotion() [#createmotion]

\> `abstract` **createMotion**(`data`, `group`, `definition`): `CubismMotion`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6168

Creates a Motion from the data.

#### Parameters [#parameters-3]

##### data [#data]

`ArrayBuffer`

Content of the motion file. The format must be consistent with [MotionManager#motionDataType](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motiondatatype).

##### group [#group]

`string`

The motion group.

##### definition [#definition]

`Motion`

The motion definition.

#### Returns [#returns-4]

`CubismMotion`

The created Motion.

#### Overrides [#overrides-8]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`createMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#createmotion)

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6173

Destroys the instance and releases all resources.

#### Returns [#returns-5]

`void`

#### Emits [#emits-1]

[MotionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#destroy)

#### Overrides [#overrides-9]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`destroy`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#destroy)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-11]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`emit`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#emit)

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-7]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-12]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`eventNames`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#eventnames)

***

### getMotionAndApplyExpression() [#getmotionandapplyexpression]

\> `protected` **getMotionAndApplyExpression**(`group`, `index`, `expression?`): `Promise`\<`unknown`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3637

Loads a motion and applies the given expression with FORCE priority.

#### Parameters [#parameters-5]

##### group [#group-1]

`string`

The motion group.

##### index [#index]

`number`

The motion index.

##### expression? [#expression]

`string` | `number`

Expression to apply (optional).

#### Returns [#returns-8]

`Promise`\<`unknown`>

The loaded motion, or null if not started.

#### Inherited from [#inherited-from-13]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionAndApplyExpression`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionandapplyexpression)

***

### getMotionFile() [#getmotionfile]

\> `abstract` **getMotionFile**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6169

Retrieves the motion's file path by its definition.

#### Parameters [#parameters-6]

##### definition [#definition-1]

`Motion`

Motion definition.

#### Returns [#returns-9]

`string`

The file path extracted from the given definition. Not resolved.

#### Overrides [#overrides-10]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionFile`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionfile)

***

### getMotionName() [#getmotionname]

\> `abstract` `protected` **getMotionName**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6170

Retrieves the motion's name by its definition.

#### Parameters [#parameters-7]

##### definition [#definition-2]

`Motion`

Motion definition.

#### Returns [#returns-10]

`string`

The motion's name.

#### Overrides [#overrides-11]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getMotionName`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getmotionname)

***

### getSoundFile() [#getsoundfile]

\> `abstract` `protected` **getSoundFile**(`definition`): `string` | `undefined`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6171

Retrieves the motion's sound file by its definition.

#### Parameters [#parameters-8]

##### definition [#definition-3]

`Motion`

Motion definition.

#### Returns [#returns-11]

`string` | `undefined`

The motion's sound file, or undefined.

#### Overrides [#overrides-12]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`getSoundFile`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#getsoundfile)

***

### init() [#init]

\> `protected` **init**(`options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6164

Should be called in the constructor of derived class to initialize options and setup motions.

#### Parameters [#parameters-9]

##### options? [#options]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

Initialization options for the manager.

#### Returns [#returns-12]

`void`

#### Overrides [#overrides-13]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`init`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#init)

***

### initializeAudio() [#initializeaudio]

\> `protected` **initializeAudio**(`audio`, `volume`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3490

Initializes audio playback and sets up audio analysis for lipsync.

#### Parameters [#parameters-10]

##### audio [#audio]

`Sound`

The Sound to initialize.

##### volume [#volume]

`number`

The playback volume (0-1).

#### Returns [#returns-13]

`void`

#### Inherited from [#inherited-from-14]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`initializeAudio`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#initializeaudio)

***

### isFinished() [#isfinished]

\> `abstract` **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6165

Checks if the motion playback has finished.

#### Returns [#returns-14]

`boolean`

#### Overrides [#overrides-14]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`isFinished`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#isfinished)

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-11]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-15]

`number`

#### Inherited from [#inherited-from-15]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`listenerCount`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#listenercount)

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-12]

##### event [#event-3]

`T`

#### Returns [#returns-16]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-16]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`listeners`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#listeners)

***

### loadMotion() [#loadmotion]

\> **loadMotion**(`group`, `index`): `Promise`\<`CubismMotion` | `undefined`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3479

Loads a Motion in a motion group. Errors in this method will not be thrown,
but be emitted with a "motionLoadError" event.

#### Parameters [#parameters-13]

##### group [#group-2]

`string`

The motion group.

##### index [#index-1]

`number`

Index in the motion group.

#### Returns [#returns-17]

`Promise`\<`CubismMotion` | `undefined`>

Promise that resolves with the Motion, or with undefined if it can't be loaded.

#### Emits [#emits-2]

[MotionManagerEvents.motionLoaded](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#motionloaded)

#### Emits [#emits-3]

[MotionManagerEvents.motionLoadError](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#motionloaderror)

#### Inherited from [#inherited-from-17]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`loadMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#loadmotion)

***

### motionLastFrame() [#motionlastframe]

\> `abstract` **motionLastFrame**(`group`, `index`, `expression?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6174

Play the last frame of the given motion, optionally applying an expression.

#### Parameters [#parameters-14]

##### group [#group-3]

`string`

Motion group.

##### index [#index-2]

`number`

Motion index.

##### expression? [#expression-1]

Expression to apply (optional).

###### expression? [#expression-2]

`string` | `number`

#### Returns [#returns-18]

`Promise`\<`boolean`>

Promise resolving to true if successful.

#### Overrides [#overrides-15]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`motionLastFrame`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#motionlastframe)

***

### mouthSync() [#mouthsync]

\> **mouthSync**(): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3560

Move the mouth for lipsync.

#### Returns [#returns-19]

`number`

The current lipsync value.

#### Inherited from [#inherited-from-18]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`mouthSync`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#mouthsync)

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-15]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-20]

`this`

#### Inherited from [#inherited-from-19]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`off`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#off)

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-16]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-21]

`this`

#### Inherited from [#inherited-from-20]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`on`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#on)

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-17]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-22]

`this`

#### Inherited from [#inherited-from-21]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`once`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#once)

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-18]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-23]

`this`

#### Inherited from [#inherited-from-22]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`removeAllListeners`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#removealllisteners)

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-19]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-24]

`this`

#### Inherited from [#inherited-from-23]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`removeListener`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#removelistener)

***

### setupMotions() [#setupmotions]

\> `protected` **setupMotions**(`options?`): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3469

Sets up motions from the definitions, and preloads them according to the preload strategy.

#### Parameters [#parameters-20]

##### options? [#options-1]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

Options controlling which motions to preload.

#### Returns [#returns-25]

`void`

#### Inherited from [#inherited-from-24]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`setupMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#setupmotions)

***

### speak() [#speak]

\> **speak**(`sound`, `volume?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3502

Only play sound with lip sync.

#### Parameters [#parameters-21]

##### sound [#sound]

`string`

The audio url or base64 content.

##### volume? [#volume-1]

Volume of the sound (0-1).

###### expression? [#expression-3]

`string` | `number`

###### onError? [#onerror]

(`e`) => `void`

###### onFinish? [#onfinish-1]

() => `void`

###### resetExpression? [#resetexpression]

`boolean`

###### volume? [#volume-2]

`number`

#### Returns [#returns-26]

`Promise`\<`boolean`>

Promise that resolves with true if the sound is playing, false otherwise.

#### Inherited from [#inherited-from-25]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`speak`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#speak)

***

### startMotion() [#startmotion]

\> **startMotion**(`group`, `index`, `priority?`, `sound?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3525

Starts a motion with the given priority.

#### Parameters [#parameters-22]

##### group [#group-4]

`string`

The motion group.

##### index [#index-3]

`number`

Index in the motion group.

##### priority? [#priority]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. Default: NORMAL (2).

##### sound? [#sound-1]

[`MotionStartOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionStartOptions)

The audio url or base64 content.

#### Returns [#returns-27]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, false otherwise.

#### Inherited from [#inherited-from-26]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`startMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#startmotion)

***

### startRandomMotion() [#startrandommotion]

\> **startRandomMotion**(`group`, `priority?`, `sound?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3540

Starts a random Motion as given priority.

#### Parameters [#parameters-23]

##### group [#group-5]

`string`

The motion group.

##### priority? [#priority-1]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. Default: IDLE (1).

##### sound? [#sound-2]

[`MotionStartRandomOptions`](/jsdoc/pixi-vn-live2d/core/type-aliases/MotionStartRandomOptions)

The audio url or base64 content.

#### Returns [#returns-28]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, false otherwise.

#### Inherited from [#inherited-from-27]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`startRandomMotion`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#startrandommotion)

***

### stopAllMotions() [#stopallmotions]

\> **stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3548

Stops all playing motions as well as the sound.

#### Returns [#returns-29]

`void`

#### Inherited from [#inherited-from-28]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`stopAllMotions`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#stopallmotions)

***

### stopSpeaking() [#stopspeaking]

\> **stopSpeaking**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3544

Stops current audio playback and lipsync.

#### Returns [#returns-30]

`void`

#### Inherited from [#inherited-from-29]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`stopSpeaking`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#stopspeaking)

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3555

Updates parameters of the core model.

#### Parameters [#parameters-24]

##### model [#model]

`object`

The core model.

##### now [#now]

`number`

Current time in milliseconds.

#### Returns [#returns-31]

`boolean`

True if the parameters have been actually updated.

#### Inherited from [#inherited-from-30]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`update`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#update)

***

### updateParameters() [#updateparameters]

\> `abstract` `protected` **updateParameters**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6172

Updates parameters of the core model.

#### Parameters [#parameters-25]

##### model [#model-1]

`CubismModel`

The core model.

##### now [#now-1]

`number`

Current time in milliseconds.

#### Returns [#returns-32]

`boolean`

True if the parameters have been actually updated.

#### Overrides [#overrides-16]

[`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager).[`updateParameters`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager#updateparameters)


# Class: CubismParallelMotionManager (/jsdoc/pixi-vn-live2d/core/classes/CubismParallelMotionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6179

## Extends [#extends]

* `ParallelMotionManager`\<`CubismMotion`, `CubismSpec.Motion`>

## Constructors [#constructors]

### Constructor [#constructor]

\> **new CubismParallelMotionManager**(`parent`): `CubismParallelMotionManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6182

#### Parameters [#parameters]

##### parent [#parent]

[`CubismInternalModel`](/jsdoc/pixi-vn-live2d/core/classes/CubismInternalModel)

#### Returns [#returns]

`CubismParallelMotionManager`

#### Overrides [#overrides]

`ParallelMotionManager<CubismMotion, CubismSpec.Motion>.constructor`

## Properties [#properties]

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:776

Flags the instances has been destroyed.

#### Inherited from [#inherited-from]

`ParallelMotionManager.destroyed`

***

### manager [#manager]

\> **manager**: [`MotionManager`](/jsdoc/pixi-vn-live2d/core/classes/MotionManager)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:760

#### Inherited from [#inherited-from-1]

`ParallelMotionManager.manager`

***

### parent [#parent-1]

\> `readonly` **parent**: [`InternalModel`](/jsdoc/pixi-vn-live2d/core/classes/InternalModel)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:777

#### Inherited from [#inherited-from-2]

`ParallelMotionManager.parent`

***

### playing [#playing]

\> **playing**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:772

Flags there's a motion playing.

#### Inherited from [#inherited-from-3]

`ParallelMotionManager.playing`

***

### queueManager [#queuemanager]

\> `readonly` **queueManager**: `CubismMotionQueueManager`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6180

***

### settings [#settings]

\> `readonly` **settings**: [`CubismModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/CubismModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6181

The ModelSettings reference.

#### Overrides [#overrides-1]

`ParallelMotionManager.settings`

***

### state [#state]

\> **state**: [`MotionState`](/jsdoc/pixi-vn-live2d/core/classes/MotionState)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:768

Maintains the state of this MotionManager.

#### Inherited from [#inherited-from-4]

`ParallelMotionManager.state`

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:759

Tag for logging.

#### Inherited from [#inherited-from-5]

`ParallelMotionManager.tag`

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from-6]

`ParallelMotionManager.prefixed`

## Methods [#methods]

### \_startMotion() [#_startmotion]

\> `protected&#x60; **\_startMotion**(`motion`, `onFinish?`, `ignoreParamIds?`, `loop?`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6185

Starts the Motion.

#### Parameters [#parameters-1]

##### motion [#motion]

`CubismMotion`

##### onFinish? [#onfinish]

(`motion`) => `void`

##### ignoreParamIds? [#ignoreparamids]

`string`\[]

##### loop? [#loop]

`boolean`

#### Returns [#returns-1]

`number`

#### Overrides [#overrides-2]

`ParallelMotionManager._startMotion`

***

### \_stopAllMotions() [#_stopallmotions]

\> `protected&#x60; **\_stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6186

Stops all playing motions.

#### Returns [#returns-2]

`void`

#### Overrides [#overrides-3]

`ParallelMotionManager._stopAllMotions`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters]

##### T [#t]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-3]

`this`

#### Inherited from [#inherited-from-7]

`ParallelMotionManager.addListener`

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6189

Destroys the instance.

#### Returns [#returns-4]

`void`

#### Emits [#emits]

[MotionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerEvents#destroy)

#### Overrides [#overrides-4]

`ParallelMotionManager.destroy`

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-1]

##### T [#t-1]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-3]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-5]

`boolean`

#### Inherited from [#inherited-from-8]

`ParallelMotionManager.emit`

***

### eventNames() [#eventnames]

\> **eventNames**(): (`string` | `symbol`)\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-6]

(`string` | `symbol`)\[]

#### Inherited from [#inherited-from-9]

`ParallelMotionManager.eventNames`

***

### getMotionName() [#getmotionname]

\> `protected` **getMotionName**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6188

Retrieves the motion's name by its definition.

#### Parameters [#parameters-4]

##### definition [#definition]

`Motion`

#### Returns [#returns-7]

`string`

The motion's name.

#### Overrides [#overrides-5]

`ParallelMotionManager.getMotionName`

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6183

#### Returns [#returns-8]

`void`

***

### isFinished() [#isfinished]

\> **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6184

Checks if the motion playback has finished.

#### Returns [#returns-9]

`boolean`

#### Overrides [#overrides-6]

`ParallelMotionManager.isFinished`

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-5]

##### event [#event-2]

`string` | `symbol`

#### Returns [#returns-10]

`number`

#### Inherited from [#inherited-from-10]

`ParallelMotionManager.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-2]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-6]

##### event [#event-3]

`T`

#### Returns [#returns-11]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-11]

`ParallelMotionManager.listeners`

***

### off() [#off]

\> **off**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:69

#### Type Parameters [#type-parameters-3]

##### T [#t-3]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-7]

##### event [#event-4]

`T`

##### fn? [#fn-1]

(...`args`) => `void`

##### context? [#context-1]

`any`

##### once? [#once]

`boolean`

#### Returns [#returns-12]

`this`

#### Inherited from [#inherited-from-12]

`ParallelMotionManager.off`

***

### on() [#on]

\> **on**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

#### Type Parameters [#type-parameters-4]

##### T [#t-4]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-8]

##### event [#event-5]

`T`

##### fn [#fn-2]

(...`args`) => `void`

##### context? [#context-2]

`any`

#### Returns [#returns-13]

`this`

#### Inherited from [#inherited-from-13]

`ParallelMotionManager.on`

***

### once() [#once-1]

\> **once**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

#### Type Parameters [#type-parameters-5]

##### T [#t-5]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-9]

##### event [#event-6]

`T`

##### fn [#fn-3]

(...`args`) => `void`

##### context? [#context-3]

`any`

#### Returns [#returns-14]

`this`

#### Inherited from [#inherited-from-14]

`ParallelMotionManager.once`

***

### playMotionLastFrame() [#playmotionlastframe]

\> **playMotionLastFrame**(`group`, `index`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6190

#### Parameters [#parameters-10]

##### group [#group]

`string`

##### index [#index]

`number`

#### Returns [#returns-15]

`Promise`\<`boolean`>

#### Overrides [#overrides-7]

`ParallelMotionManager.playMotionLastFrame`

***

### removeAllListeners() [#removealllisteners]

\> **removeAllListeners**(`event?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

#### Parameters [#parameters-11]

##### event? [#event-7]

`string` | `symbol`

#### Returns [#returns-16]

`this`

#### Inherited from [#inherited-from-15]

`ParallelMotionManager.removeAllListeners`

***

### removeListener() [#removelistener]

\> **removeListener**\<`T`>(`event`, `fn?`, `context?`, `once?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

#### Type Parameters [#type-parameters-6]

##### T [#t-6]

`T` *extends* `string` | `symbol`

#### Parameters [#parameters-12]

##### event [#event-8]

`T`

##### fn? [#fn-4]

(...`args`) => `void`

##### context? [#context-4]

`any`

##### once? [#once-2]

`boolean`

#### Returns [#returns-17]

`this`

#### Inherited from [#inherited-from-16]

`ParallelMotionManager.removeListener`

***

### startMotion() [#startmotion]

\> **startMotion**(`group`, `index`, `priority?`, `options?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:788

Starts a motion as given priority.

#### Parameters [#parameters-13]

##### group [#group-1]

`string`

The motion group.

##### index [#index-1]

`number`

Index in the motion group.

##### priority? [#priority]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. default: 2 (NORMAL)

##### options? [#options]

`string`\[] | [`ParallelMotionStartOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/ParallelMotionStartOptions)

#### Returns [#returns-18]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-17]

`ParallelMotionManager.startMotion`

***

### startRandomMotion() [#startrandommotion]

\> **startRandomMotion**(`group`, `priority?`, `loop?`): `Promise`\<`boolean`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:796

Starts a random Motion as given priority.

#### Parameters [#parameters-14]

##### group [#group-2]

`string`

The motion group.

##### priority? [#priority-1]

[`MotionPriority`](/jsdoc/pixi-vn-live2d/core/enumerations/MotionPriority)

The priority to be applied. (default: 1 `IDLE`)

##### loop? [#loop-1]

[`ParallelMotionStartRandomOptions`](/jsdoc/pixi-vn-live2d/core/type-aliases/ParallelMotionStartRandomOptions)

Whether the motion should loop. Overrides Cubism 3/4/5 motion JSON loop metadata when specified.

#### Returns [#returns-19]

`Promise`\<`boolean`>

Promise that resolves with true if the motion is successfully started, with false otherwise.

#### Inherited from [#inherited-from-18]

`ParallelMotionManager.startRandomMotion`

***

### stopAllMotions() [#stopallmotions]

\> **stopAllMotions**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:800

Stops all playing motions as well as the sound.

#### Returns [#returns-20]

`void`

#### Inherited from [#inherited-from-19]

`ParallelMotionManager.stopAllMotions`

***

### update() [#update]

\> **update**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:807

Updates parameters of the core model.

#### Parameters [#parameters-15]

##### model [#model]

`object`

The core model.

##### now [#now]

`number`

Current time in milliseconds.

#### Returns [#returns-21]

`boolean`

True if the parameters have been actually updated.

#### Inherited from [#inherited-from-20]

`ParallelMotionManager.update`

***

### updateParameters() [#updateparameters]

\> `protected` **updateParameters**(`model`, `now`): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:6187

Updates parameters of the core model.

#### Parameters [#parameters-16]

##### model [#model-1]

`CubismModel`

The core model.

##### now [#now-1]

`number`

Current time in milliseconds.

#### Returns [#returns-22]

`boolean`

True if the parameters have been actually updated.

#### Overrides [#overrides-8]

`ParallelMotionManager.updateParameters`


# Abstract Class: ExpressionManager<Expression, ExpressionSpec> (/jsdoc/pixi-vn-live2d/core/classes/ExpressionManager)



Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3780

Abstract expression manager.

## Emits [#emits]

[ExpressionManagerEvents](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)

## Extends [#extends]

* `EventEmitter`\<keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)>

## Extended by [#extended-by]

* [`CubismLegacyExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismLegacyExpressionManager)
* [`CubismExpressionManager`](/jsdoc/pixi-vn-live2d/core/classes/CubismExpressionManager)

## Type Parameters [#type-parameters]

### Expression [#expression]

`Expression` = `unknown`

### ExpressionSpec [#expressionspec]

`ExpressionSpec` = `unknown`

## Constructors [#constructors]

### Constructor [#constructor]

\> `protected` **new ExpressionManager**\<`Expression`, `ExpressionSpec`>(`settings`, `_options?`): `ExpressionManager`\<`Expression`, `ExpressionSpec`>

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3821

#### Parameters [#parameters]

##### settings [#settings]

[`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

##### \_options? [#_options]

[`MotionManagerOptions`](/jsdoc/pixi-vn-live2d/core/interfaces/MotionManagerOptions)

#### Returns [#returns]

`ExpressionManager`\<`Expression`, `ExpressionSpec`>

#### Overrides [#overrides]

`EventEmitter<keyof ExpressionManagerEvents>.constructor`

## Properties [#properties]

### currentExpression [#currentexpression]

\> **currentExpression**: `Expression`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3812

Current Expression. This will not be overwritten by [ExpressionManager#defaultExpression](#defaultexpression).

***

### defaultExpression [#defaultexpression]

\> **defaultExpression**: `Expression`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3808

An empty Expression to reset all the expression parameters.

***

### definitions [#definitions]

\> `abstract` `readonly` **definitions**: `ExpressionSpec`\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3793

Expression definitions copied from ModelSettings.

***

### destroyed [#destroyed]

\> **destroyed**: `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3820

Flags the instance has been destroyed.

***

### expressionDataType [#expressiondatatype]

\> `readonly` **expressionDataType**: `XMLHttpRequestResponseType`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3785

Indicates the content type used when loading expressions.

#### Default [#default]

```ts
"json"
```

***

### expressions [#expressions]

\> **expressions**: (`Expression` | `null` | `undefined`)\[]

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3804

The Expressions. The structure is the same as [definitions](#definitions), initially there's only
an empty array, which means all expressions will be `undefined`. When an Expression has
been loaded, it'll fill the place in which it should be; when it fails to load,
the place will be filled with `null`.

***

### reserveExpressionIndex [#reserveexpressionindex]

\> **reserveExpressionIndex**: `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3816

The pending Expression.

***

### settings [#settings-1]

\> `readonly` **settings**: [`ModelSettings`](/jsdoc/pixi-vn-live2d/core/classes/ModelSettings)

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3797

The ModelSettings reference.

***

### tag [#tag]

\> **tag**: `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3789

Tag for logging.

***

### prefixed [#prefixed]

\> `static` **prefixed**: `string` | `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:9

#### Inherited from [#inherited-from]

`EventEmitter.prefixed`

## Methods [#methods]

### \_setExpression() [#_setexpression]

\> `abstract` `protected&#x60; **\_setExpression**(`motion`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3897

Applies the Expression to the model.

#### Parameters [#parameters-1]

##### motion [#motion]

`Expression`

#### Returns [#returns-1]

`number`

***

### addListener() [#addlistener]

\> **addListener**\<`T`>(`event`, `fn`, `context?`): `this`

Defined in: node\_modules/eventemitter3/index.d.ts:45

#### Type Parameters [#type-parameters-1]

##### T [#t]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-2]

##### event [#event]

`T`

##### fn [#fn]

(...`args`) => `void`

##### context? [#context]

`any`

#### Returns [#returns-2]

`this`

#### Inherited from [#inherited-from-1]

`EventEmitter.addListener`

***

### createDefaultExpression() [#createdefaultexpression]

\> `protected` **createDefaultExpression**(): `Expression`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3829

Creates the default expression instance used for resets.

#### Returns [#returns-3]

`Expression`

***

### createExpression() [#createexpression]

\> `abstract` **createExpression**(`data`, `definition`): `Expression`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3893

Creates an Expression from the data.

#### Parameters [#parameters-3]

##### data [#data]

`object`

Content of the expression file.

##### definition [#definition]

`ExpressionSpec` | `undefined`

The expression definition. Can be undefined in order to create [ExpressionManager#defaultExpression](#defaultexpression).

#### Returns [#returns-4]

`Expression`

The created Expression.

***

### destroy() [#destroy]

\> **destroy**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3872

Destroys the instance.

#### Returns [#returns-5]

`void`

#### Emits [#emits-1]

[ExpressionManagerEvents.destroy](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents#destroy)

***

### emit() [#emit]

\> **emit**\<`T`>(`event`, ...`args`): `boolean`

Defined in: node\_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

#### Type Parameters [#type-parameters-2]

##### T [#t-1]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-4]

##### event [#event-1]

`T`

##### args [#args]

...`any`\[]

#### Returns [#returns-6]

`boolean`

#### Inherited from [#inherited-from-2]

`EventEmitter.emit`

***

### eventNames() [#eventnames]

\> **eventNames**(): keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

Defined in: node\_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered
listeners.

#### Returns [#returns-7]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>\[]

#### Inherited from [#inherited-from-3]

`EventEmitter.eventNames`

***

### getExpressionFile() [#getexpressionfile]

\> `abstract` **getExpressionFile**(`definition`): `string`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3886

Retrieves the expression's file path by its definition.

#### Parameters [#parameters-5]

##### definition [#definition-1]

`ExpressionSpec`

#### Returns [#returns-8]

`string`

The file path extracted from given definition. Not resolved.

***

### getExpressionIndex() [#getexpressionindex]

\> `abstract` **getExpressionIndex**(`name`): `number`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3881

Retrieves the expression's index by its name.

#### Parameters [#parameters-6]

##### name [#name]

`string`

#### Returns [#returns-9]

`number`

The index. `-1` if not found.

***

### init() [#init]

\> `protected` **init**(): `void`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3825

Should be called in the constructor of derived class.

#### Returns [#returns-10]

`void`

***

### isFinished() [#isfinished]

\> `abstract` **isFinished**(): `boolean`

Defined in: node\_modules/untitled-pixi-live2d-engine/types/index.d.ts:3876

Checks if the expression playback has finished.

#### Returns [#returns-11]

`boolean`

***

### listenerCount() [#listenercount]

\> **listenerCount**(`event`): `number`

Defined in: node\_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

#### Parameters [#parameters-7]

##### event [#event-2]

keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Returns [#returns-12]

`number`

#### Inherited from [#inherited-from-4]

`EventEmitter.listenerCount`

***

### listeners() [#listeners]

\> **listeners**\<`T`>(`event`): (...`args`) => `void`\[]

Defined in: node\_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

#### Type Parameters [#type-parameters-3]

##### T [#t-2]

`T` *extends* keyof [`ExpressionManagerEvents`](/jsdoc/pixi-vn-live2d/core/interfaces/ExpressionManagerEvents)\<`never`>

#### Parameters [#parameters-8]

##### event [#event-3]

`T`

#### Returns [#returns-13]

(...`args`) => `void`\[]

#### Inherited from [#inherited-from-5]

`EventEmitter.listeners`

***

### loadExpression() [#loadexpression]

\> `protected` **loadExpression**(`index`): `Promise`\<`Expression` | `undefined