@drincs/pixi-vn 1.3.13 → 1.3.15

package/dist/index.d.ts

@@ -1,47 +1,2947 @@
 import * as _pixi_sound_lib_filters from '@pixi/sound/lib/filters';
-import { S as SoundManager, s as soundUtils } from './index-Czfdktw9.js';
-export { b as Sound, c as SoundManagerStatic, a as sound } from './index-Czfdktw9.js';
+import { Options, PlayOptions, Sound as Sound$1, IMediaInstance, SoundLibrary, IMediaContext, Filter, SoundMap, filters as filters$1 } from '@pixi/sound';
+import * as historyUtils from '@drincs/pixi-vn/history';
+import { StoredChoiceInterface, StorageElementType as StorageElementType$1, OpenedLabel as OpenedLabel$1 } from '@drincs/pixi-vn/history';
+export * from '@drincs/pixi-vn/history';
+import * as narrationUtils from '@drincs/pixi-vn/narration';
+import { NarrationGameState } from '@drincs/pixi-vn/narration';
+export * from '@drincs/pixi-vn/narration';
+import * as storageUtils from '@drincs/pixi-vn/storage';
+export * from '@drincs/pixi-vn/storage';
+import { GameUnifier } from '@drincs/pixi-vn/unifier';
+export * from '@drincs/pixi-vn/unifier';
+import { ObjectTarget, AnimationOptions as AnimationOptions$1, AnimationPlaybackControlsWithThen, ObjectSegment as ObjectSegment$1, At, SequenceOptions as SequenceOptions$1 } from 'motion';
 export { AnimationOptions as MotionAnimationOptions } from 'motion';
 import * as pixi_js from 'pixi.js';
-import { ApplicationOptions, Rectangle } from 'pixi.js';
+import { Container as Container$1, ContainerChild as ContainerChild$1, Ticker as Ticker$1, UPDATE_PRIORITY, Application, Rectangle, ApplicationOptions, PointData, SpriteOptions as SpriteOptions$1, EventEmitter, ContainerOptions, TextOptions as TextOptions$1, AllFederatedEventMap, Sprite as Sprite$1, Texture, ContainerEvents, TextureSourceLike, TextureSource, ObservablePoint, Text as Text$1 } from 'pixi.js';
 export { pixi_js as PIXI };
 export { Assets, ContainerOptions, Rectangle, Texture, TextureSourceLike, Ticker as TickerValue, UPDATE_PRIORITY } from 'pixi.js';
 export { AssetSrc, AssetsBundle, AssetsManifest, LoadParserName, ResolvedAsset, ResolvedSrc, UnresolvedAsset } from 'pixi.js/lib/assets/types';
-import { C as CanvasManagerInterface, c as canvasUtils } from './index-DvpfJ2VQ.js';
-export { $ as AnimationOptions, a0 as AnimationSequenceOptions, H as CanvasBaseInterface, b as CanvasEvent, a5 as CanvasEventNamesType, d as CanvasManagerStatic, e as Container, I as ImageContainer, K as ImageContainerMemory, B as ImageContainerOptions, f as ImageSprite, M as ImageSpriteMemory, D as ImageSpriteOptions, a1 as KeyframesType, L as Layer, W as MoveInOutProps, a2 as ObjectSegment, a3 as ObjectSegmentWithTransition, X as PushInOutProps, R as RegisteredCanvasComponents, i as RegisteredEvents, a4 as SequenceOptions, J as ShakeEffectProps, Y as ShowWithDissolveTransitionProps, Z as ShowWithFadeTransitionProps, S as Sprite, N as SpriteBaseMemory, O as SpriteMemory, E as SpriteOptions, T as Text, P as TextMemory, F as TextOptions, U as TextureMemory, V as VideoSprite, Q as VideoSpriteMemory, G as VideoSpriteOptions, _ as ZoomInOutProps, v as addImage, t as addImageCointainer, y as addVideo, a as canvas, g as canvasComponentDecorator, h as eventDecorator, x as getTexture, m as moveIn, j as moveOut, p as pushIn, k as pushOut, r as removeWithDissolve, l as removeWithFade, s as shakeEffect, w as showImage, u as showImageContainer, A as showVideo, n as showWithDissolve, o as showWithFade, z as zoomIn, q as zoomOut } from './index-DvpfJ2VQ.js';
-import { c as characterUtils } from './index-Cvdua0o-.js';
-export { C as CharacterBaseModel, b as CharacterInterface, a as CharacterStoredClass, R as RegisteredCharacters } from './index-Cvdua0o-.js';
-export { CachedMap } from './classes/index.js';
-import { filters as filters$1 } from '@pixi/sound';
-import { P as PauseType, R as RepeatType } from './TickersSequence-Cf1Vcu22.js';
-export { T as Ticker, a as TickerArgs, b as TickerHistory, c as TickerInfo, d as TickersSequence } from './TickersSequence-Cf1Vcu22.js';
-import { HistoryManagerInterface } from './history/index.js';
-export { HistoryManagerStatic, stepHistory } from './history/index.js';
-import { GameState } from './interfaces/index.js';
-export { GameStepStateData } from './interfaces/index.js';
-import { S as StepLabelType, a as StepLabelPropsType, N as NarrationManagerInterface, L as LabelAbstract, n as narrationUtils } from './index-_rD16ks5.js';
-export { C as ChoiceInterface, I as InputInfo, e as Label, g as LabelProps, k as LabelSteps, j as NarrationManagerStatic, R as RegisteredLabels, h as StepLabelProps, i as StepLabelResult, l as StepLabelResultType, b as narration, c as newChoiceOption, d as newCloseChoiceOption, f as newLabel } from './index-_rD16ks5.js';
-import { StorageManagerInterface } from './storage/index.js';
-export { StorageManagerStatic, storage } from './storage/index.js';
-import { GameStepState, HistoryInfo, CharacterInterface } from '@drincs/pixi-vn';
-import { S as StorageElementType } from './StorageElementType-DTGcnkzF.js';
-export { a as StorageObjectType } from './StorageElementType-DTGcnkzF.js';
-import { createExportableElement } from './utils/index.js';
 import { Devtools } from '@pixi/devtools';
-export { C as CanvasBaseItem, b as CanvasBaseItemMemory, a as CanvasGameState, d as ContainerChild, c as ContainerMemory } from './ContainerMemory-DrijxCcD.js';
-export { CommonTickerProps, FadeAlphaTicker, FadeAlphaTickerProps, MoveTicker, MoveTickerProps, RegisteredTickers, RotateTicker, RotateTickerProps, TickerBase, TickerProgrationExponential, TickerProgrationLinear, TickerProgrationType, TickerTimeoutHistory, ZoomTicker, ZoomTickerProps, animate, tickerDecorator } from './canvas/tickers/index.js';
-export { H as HistoryGameState } from './HistoryGameState-i_gx3rGM.js';
-export { a as ChoiceOptionInterface, d as Close, b as CloseChoiceOptionInterface, C as CloseType, D as DialogueInterface, H as HistoryStep, L as LabelRunModeType, O as OpenedLabel, S as StoredChoiceInterface, c as StoredIndexedChoiceInterface } from './OpenedLabel-DxlOwJKw.js';
-export { N as NarrationGameState } from './NarrationGameState-CqDh48n_.js';
-export { H as HistoryChoiceMenuOption, N as NarrationHistory } from './HistoryChoiceMenuOption-Kj_P28ke.js';
-export { E as ExportedSound, c as SoundFilterMemory, S as SoundGameState, a as SoundOptions, b as SoundPlayOptions } from './SoundGameState-BG_iPwjt.js';
-export { S as StoredClassModel } from './StoredClassModel-CjdhvNgB.js';
-export { S as StorageGameState } from './StorageGameState-Cnfj75sk.js';
-import 'lru-cache';
-import 'deep-diff';
-import 'microdiff';
-
-var version = "1.3.13";
+import { CharacterInterface as CharacterInterface$1, GameStepState } from '@drincs/pixi-vn';
+import { LRUCache } from 'lru-cache';
+import deepDiff from 'deep-diff';
+import { Difference } from 'microdiff';
+
+interface SoundOptions extends Omit<Options, "complete" | "loaded" | "sprites" | "source"> {
+}
+interface SoundPlayOptions extends Omit<PlayOptions, "complete" | "loaded"> {
+}
+
+declare class Sound extends Sound$1 {
+    alias?: string;
+    pause(): this;
+    resume(): this;
+    destroy(): void;
+    stop(): this;
+    play(options?: string | SoundPlayOptions): IMediaInstance | Promise<IMediaInstance>;
+    /**
+     * https://github.com/pixijs/sound/blob/main/src/Sound.ts#L235
+     */
+    static from(source: string | string[] | SoundOptions | ArrayBuffer | HTMLAudioElement | AudioBuffer): Sound;
+}
+
+type DistortionFilter = {
+    type: "DistortionFilter";
+    amount?: number;
+};
+type EqualizerFilter = {
+    type: "EqualizerFilter";
+    f32?: number;
+    f64?: number;
+    f125?: number;
+    f250?: number;
+    f500?: number;
+    f1k?: number;
+    f2k?: number;
+    f4k?: number;
+    f8k?: number;
+    f16k?: number;
+};
+type MonoFilter = {
+    type: "MonoFilter";
+};
+type ReverbFilter = {
+    type: "ReverbFilter";
+    seconds?: number;
+    decay?: number;
+    reverse?: boolean;
+};
+type StereoFilter = {
+    type: "StereoFilter";
+    pan?: number;
+};
+type StreamFilter = {
+    type: "StreamFilter";
+};
+type TelephoneFilter = {
+    type: "TelephoneFilter";
+};
+type SoundFilterMemory = DistortionFilter | EqualizerFilter | MonoFilter | ReverbFilter | StereoFilter | StreamFilter | TelephoneFilter;
+
+interface ExportedSound {
+    options: SoundOptions;
+    filters?: SoundFilterMemory[];
+}
+interface SoundPlay {
+    stepIndex: number;
+    paused: boolean;
+    options?: SoundPlayOptions | string;
+}
+interface ExportedSoundPlay extends SoundPlay {
+    sound: ExportedSound;
+}
+/**
+ * Interface exported sounds
+ */
+interface SoundGameState {
+    soundAliasesOrder: string[];
+    filters?: SoundFilterMemory[];
+    soundsPlaying: {
+        [key: string]: ExportedSoundPlay;
+    };
+    /**
+     * @deprecated
+     */
+    playInStepIndex?: {
+        [key: string]: SoundPlay;
+    };
+    /**
+     * @deprecated
+     */
+    sounds?: ExportedSoundOld;
+}
+interface ExportedSoundOld {
+    [key: string]: {
+        options: SoundOptions;
+        filters?: SoundFilterMemory[];
+    };
+}
+
+declare class SoundManager extends SoundLibrary {
+    constructor();
+    get context(): IMediaContext;
+    get filtersAll(): Filter[];
+    set filtersAll(filtersAll: Filter[]);
+    get supported(): boolean;
+    /**
+     * https://github.com/pixijs/sound/blob/main/src/SoundLibrary.ts#L187
+     */
+    private getOptions;
+    add(alias: string, options: SoundOptions | string): Sound;
+    /**
+     * @deprecated: Use `add(alias: string, options: Options | string | ArrayBuffer | AudioBuffer | HTMLAudioElement | Sound): Sound;` instead.
+     */
+    add(map: any, globalOptions?: SoundOptions): SoundMap;
+    get useLegacy(): boolean;
+    set useLegacy(legacy: boolean);
+    get disableAutoPause(): boolean;
+    set disableAutoPause(autoPause: boolean);
+    remove(alias: string): this;
+    get volumeAll(): number;
+    set volumeAll(volume: number);
+    get speedAll(): number;
+    set speedAll(speed: number);
+    togglePauseAll(): boolean;
+    pauseAll(): this;
+    resumeAll(): this;
+    toggleMuteAll(): boolean;
+    muteAll(): this;
+    unmuteAll(): this;
+    removeAll(): this;
+    stopAll(): this;
+    exists(alias: string, assert?: boolean): boolean;
+    isPlaying(): boolean;
+    find(alias: string): Sound;
+    play(alias: string, options?: SoundPlayOptions | string): IMediaInstance | Promise<IMediaInstance>;
+    stop(alias: string): Sound;
+    pause(alias: string): Sound;
+    resume(alias: string): Sound;
+    volume(alias: string, volume?: number): number;
+    speed(alias: string, speed?: number): number;
+    duration(alias: string): number;
+    close(): this;
+    clear(): void;
+    export(): SoundGameState;
+    removeOldSoundAndExport(): SoundGameState;
+    restore(data: object): void;
+}
+
+type Layer = Container$1<ContainerChild$1>;
+
+/**
+ * is a string that represents a ticker id.
+ * It is used to {@link canvas.tickers} to get the ticker class.
+ */
+type TickerIdType = string;
+
+interface TickerArgs {
+}
+
+type TickerValue = Ticker$1;
+
+/**
+ * A class is used to create a ticker element to add into a Pixi Application.
+ * You can use {@link canvas.addTicker()} to add this element into the application.
+ * This class should be extended and the fn method should be overridden.
+ * You must use the {@link tickerDecorator} to register the ticker in the game.
+ * In Ren'Py is a transform.
+ * @template TArgs The type of the arguments that you want to pass to the ticker.
+ * @example
+ * ```typescript
+ * \@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
+ *                 }
+ *             })
+ *     }
+ * }
+ * ```
+ */
+declare abstract class TickerBase<TArgs extends TickerArgs> implements Ticker<TArgs> {
+    /**
+     * @param args The arguments that you want to pass to the ticker.
+     * @param duration 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 undefined
+     * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
+     */
+    constructor(args: TArgs, duration?: number, priority?: UPDATE_PRIORITY);
+    /**
+     * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link RegisteredTickers.getInstance}
+     */
+    id: TickerIdType;
+    args: TArgs;
+    duration?: number;
+    priority?: UPDATE_PRIORITY;
+    protected ticker: Ticker$1;
+    protected tickerId?: string;
+    canvasElementAliases: string[];
+    /**
+     * The method that will be called every frame.
+     * This method should be overridden and you can use {@link canvas.add()} to get the canvas element of the canvas, and edit them.
+     * @param _ticker The ticker that is calling this method
+     * @param _args The arguments that you passed when you added the ticker
+     * @param _alias The alias of the canvas elements that are connected to this ticker
+     * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link canvas.currentTickers}
+     */
+    abstract fn(_ticker: TickerValue, _args: TArgs, _alias: string | string[], _tickerId: string): void;
+    protected fnValue?: () => void;
+    complete(_options?: {
+        ignoreTickerSteps?: boolean;
+    }): void;
+    stop(): void;
+    start(id: string): void;
+    pause(): void;
+    play(): void;
+    get paused(): boolean;
+}
+
+type TickerProgrationType = TickerProgrationLinear | TickerProgrationExponential;
+
+interface TickerProgrationLinear {
+    /**
+     * The amount of the speed to increase every frame.
+     */
+    amt: number;
+    /**
+     * The limit of the effect
+     */
+    limit?: number;
+    type: "linear";
+}
+interface TickerProgrationExponential {
+    /**
+     * The percentage of the speed to increase every frame. if the percentage is 0.1, the speed will increase by 10% every frame.
+     */
+    percentage: number;
+    /**
+     * The limit of the effect
+     */
+    limit?: number;
+    type: "exponential";
+}
+
+type CommonTickerProps = {
+    /**
+     * The alias to remove after the effect is done
+     * @default []
+     */
+    aliasToRemoveAfter?: string[] | string;
+    /**
+     * If true, the effect only starts if the canvas element have a texture
+     * @default false
+     */
+    startOnlyIfHaveTexture?: boolean;
+    /**
+     * The alias to resume after the effect is done
+     * @default []
+     */
+    tickerAliasToResume?: string[] | string;
+    /**
+     * The id of the ticker to resume after the effect is done
+     * @default []
+     */
+    tickerIdToResume?: string[] | string;
+    /**
+     * If set to `true`, the game will force the animation to complete before moving to the next step.
+     * @default false
+     */
+    forceCompleteBeforeNext?: boolean;
+};
+
+/**
+ * @deprecated
+ */
+type FadeAlphaTickerProps = {
+    /**
+     * @deprecated use speed instead
+     * @default 1
+     */
+    duration?: number;
+    /**
+     * The speed of the effect (1 alpha per 10 second)
+     * @default 5
+     */
+    speed?: number;
+    /**
+     * The type of the fade
+     * @default "hide"
+     */
+    type?: "hide" | "show";
+    /**
+     * The limit of the fade
+     * @default type === "hide" ? 0 : 1
+     */
+    limit?: number;
+    /**
+     * The progression of the speed
+     */
+    speedProgression?: TickerProgrationType;
+} & CommonTickerProps;
+
+/**
+ * A ticker that fades the alpha of the canvas element of the canvas.
+ * This ticker can be used on all canvas elements that extend the {@link PixiContainer} class.
+ * @deprecated Use {@link canvas.animate}
+ * @example
+ * ```typescript
+ * let bunny = addImage("bunny1", "https://pixijs.com/assets/eggHead.png")
+ * await bunny.load()
+ * canvas.add("bunny", bunny);
+ * // ...
+ * const ticker = new FadeAlphaTicker({
+ *     duration: 4, // 4 seconds
+ *     type: "hide",
+ * }),
+ * canvas.addTicker("bunny", ticker)
+ * ```
+ */
+declare class FadeAlphaTicker extends TickerBase<FadeAlphaTickerProps> {
+    constructor(args?: FadeAlphaTickerProps, duration?: number, priority?: UPDATE_PRIORITY);
+    fn(ticker: TickerValue, args: FadeAlphaTickerProps, aliases: string[], _tickerId: string): void;
+    onComplete(alias: string | string[], _tickerId: string, args: FadeAlphaTickerProps): void;
+    private getLimit;
+    private speedConvert;
+    complete(options?: {
+        ignoreTickerSteps?: boolean;
+    }): void;
+}
+
+/**
+ * @deprecated
+ */
+type MoveTickerProps = {
+    /**
+     * The speed of the movement (1 pixels per 0.1 second)
+     * @default 10
+     */
+    speed?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * The destination of the movement
+     */
+    destination: {
+        /**
+         * The type of the destination. Possible values are "pixel", "percentage" and "align":
+         * - "pixel": The destination is in pixel
+         * - "percentage": The destination is in percentage
+         * - "align": The destination is in align
+         * @default "pixel"
+         */
+        type?: "pixel" | "percentage" | "align";
+        y: number;
+        x: number;
+    };
+    /**
+     * The progression of the speed
+     */
+    speedProgression?: TickerProgrationType;
+} & CommonTickerProps;
+
+/**
+ * A ticker that moves the canvas element of the canvas.
+ * This ticker can be used on all canvas elements that extend the {@link PixiContainer} class.
+ * @deprecated Use {@link canvas.animate}
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * canvas.add("alien", alien);
+ * const ticker = new MoveTicker({
+ *    speed: 0.1,
+ *    destination: { x: 100, y: 100 },
+ * }),
+ * ```
+ */
+declare class MoveTicker extends TickerBase<MoveTickerProps> {
+    fn(ticker: TickerValue, args: MoveTickerProps, aliases: string[], _tickerId: string): void;
+    onComplete(alias: string | string[], _tickerId: string, args: MoveTickerProps): void;
+    private speedConvert;
+    complete(options?: {
+        ignoreTickerSteps?: boolean;
+    }): void;
+}
+
+/**
+ * A ticker that rotates the canvas element of the canvas. For centre rotation, set the anchor of the canvas element to 0.5.
+ * This ticker can be used on all canvas elements that extend the {@link PixiContainer} class.
+ * @deprecated Use {@link canvas.animate}
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * alien.anchor.set(0.5);
+ * canvas.add("alien", alien);
+ * const ticker = new RotateTicker({
+ *    speed: 0.1,
+ *    clockwise: true,
+ * }),
+ * canvas.addTicker("alien", ticker)
+ * ```
+ */
+declare class RotateTicker extends TickerBase<RotateTickerProps> {
+    constructor(args?: RotateTickerProps, duration?: number, priority?: UPDATE_PRIORITY);
+    fn(ticker: TickerValue, args: RotateTickerProps, aliases: string[], _tickerId: string): void;
+    onComplete(alias: string | string[], _tickerId: string, args: RotateTickerProps): void;
+    private speedConvert;
+    complete(options?: {
+        ignoreTickerSteps?: boolean;
+    }): void;
+}
+
+/**
+ * A ticker that zooms the canvas element of the canvas.
+ * This ticker can be used on all canvas elements that extend the {@link PixiContainer} class.
+ * @deprecated Use {@link canvas.animate}
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * alien.anchor.set(0.5);
+ * canvas.add("alien", alien);
+ * const ticker = new ZoomTicker({
+ *    speed: 0.1,
+ * }),
+ * canvas.addTicker("alien", ticker)
+ * ```
+ */
+declare class ZoomTicker extends TickerBase<ZoomTickerProps> {
+    constructor(args?: ZoomTickerProps, duration?: number, priority?: UPDATE_PRIORITY);
+    fn(ticker: TickerValue, args: ZoomTickerProps, alias: string[], _tickerId: string): void;
+    private speedConvert;
+    onComplete(alias: string | string[], _tickerId: string, args: ZoomTickerProps): void;
+    private getLimit;
+    complete(options?: {
+        ignoreTickerSteps?: boolean;
+    }): void;
+}
+
+interface Ticker<TArgs extends TickerArgs> {
+    /**
+     * Arguments to pass to the ticker
+     */
+    args: TArgs;
+    /**
+     * Duration in seconds to run the ticker
+     */
+    duration?: number;
+    /**
+     * Priority of the ticker
+     */
+    priority?: UPDATE_PRIORITY;
+    /**
+     * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link RegisteredTickers.getInstance}
+     */
+    id: TickerIdType;
+    /**
+     * The aliases of the canvas elements that are connected to this ticker
+     */
+    canvasElementAliases: string[];
+    /**
+     * Completes the animation and applies the final state.
+     */
+    complete: (options?: {
+        ignoreTickerSteps?: boolean;
+    }) => Promise<void> | void;
+    /**
+     * Stops the animation at its current state, and prevents it from resuming when the animation is played again.
+     */
+    stop: () => void;
+    /**
+     * Starts the ticker. This will start the ticker and begin the animation.
+     * @param id The id of the ticker.
+     */
+    start: (id: string) => void;
+    /**
+     * Pauses the animation.
+     */
+    pause: () => void;
+    /**
+     * Plays the animation.
+     */
+    play: () => void;
+    /**
+     * Checks if the ticker is paused.
+     * @returns true if the ticker is paused, false otherwise.
+     */
+    readonly paused: boolean;
+}
+
+/**
+ * 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.
+ * @param name is th identifier of the label, by default is the name of the class
+ * @returns
+ */
+declare function tickerDecorator(name?: TickerIdType): (target: {
+    new (args: any, duration?: number, priority?: UPDATE_PRIORITY): Ticker<any>;
+}) => void;
+declare namespace RegisteredTickers {
+    /**
+     * Register a ticker in the game.
+     * @param target The class of the ticker.
+     * @param name Name of the ticker, by default it will use the class name. If the name is already registered, it will show a warning
+     */
+    function add(target: {
+        new (args: any, duration?: number, priority?: UPDATE_PRIORITY): Ticker<any>;
+    }, name?: TickerIdType): void;
+    /**
+     * Get a ticker by the id.
+     * @param canvasId The id of the ticker.
+     * @returns The ticker type.
+     */
+    function get<T = Ticker<any>>(tickerId: TickerIdType): T | undefined;
+    /**
+     * Get a ticker instance by the id.
+     * @param tickerId The id of the ticker.
+     * @param args The arguments that you want to pass to the ticker.
+     * @param duration The duration of the ticker. If is undefined, the ticker will be called every frame.
+     * @param priority The priority of the ticker. If is undefined, the priority will be UPDATE_PRIORITY.NORMAL.
+     * @returns The instance of the ticker
+     */
+    function getInstance<TArgs extends TickerArgs>(tickerId: TickerIdType, args: TArgs, duration?: number, priority?: UPDATE_PRIORITY): Ticker<TArgs> | undefined;
+    /**
+     * Get a list of all tickers registered.
+     * @returns An array of tickers.
+     */
+    function values(): {
+        new (args: any, duration?: number, priority?: UPDATE_PRIORITY): Ticker<any>;
+    }[];
+    /**
+     * Check if a ticker is registered.
+     * @param id The id of the ticker.
+     * @returns True if the ticker is registered, false otherwise.
+     */
+    function has(id: string): boolean;
+}
+
+type ObjectSegmentWithTransition$1<O extends {} = {}> = [
+    O,
+    ObjectTarget<O>,
+    AnimationOptions$1 & At & {
+        ticker?: Ticker$1;
+    }
+];
+/**
+ * Animate a PixiJS 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 **not** keep track of the animation state of this function (This feature is intended for animating PixiJS components used for UI.).
+ * If you want Pixi'VN to save the animation state in saves, use the {@link canvas.animate} function instead.
+ * @param components - The PixiJS component(s) to animate.
+ * @param keyframes - The keyframes to animate the component(s) with.
+ * @param options - Additional options for the animation, including duration, easing, and ticker.
+ * @returns An animation playback control object that can be used to start, stop, or control the animation.
+ * @template T - The type of PixiJS component(s) being animated.
+ */
+declare function animate<T extends {}>(components: T | T[], keyframes: ObjectTarget<T>, options?: AnimationOptions$1 & {
+    ticker?: Ticker$1;
+}): AnimationPlaybackControlsWithThen;
+/**
+ * Animate a sequence of PixiJS components with transitions using [motion's animate](https://motion.dev/docs/animate) function.
+ * This function allows for complex animations involving multiple components and transitions.
+ * It integrates with the PixiJS ticker to ensure smooth animations.
+ * This function is intended for animating PixiJS components used for UI.
+ *
+ * Pixi’VN will **not** keep track of the animation state of this function (This feature is intended for animating PixiJS components used for UI.).
+ * If you want Pixi'VN to save the animation state in saves, use the {@link canvas.animate} function instead
+ *
+ * @param sequence An array of segments to animate, where each segment is an array containing:
+ * - The PixiJS component to animate.
+ * - The keyframes to animate the component with.
+ * - An options object that can include animation options and a ticker.
+ * @param options Additional options for the sequence, such as duration and repeat count.
+ * @returns An animation playback control object that can be used to start, stop, or control the animation.
+ * @template T - The type of PixiJS component(s) being animated.
+ */
+declare function animate<T extends {}>(sequence: (ObjectSegment$1<T> | ObjectSegmentWithTransition$1<T>)[], options?: SequenceOptions$1): AnimationPlaybackControlsWithThen;
+
+/**
+ * TickerHistory is a class that contains the name of a class and the arguments that were used to create it.
+ */
+interface TickerInfo<TArgs extends TickerArgs> {
+    /**
+     * If this ticker was created by steps
+     */
+    createdByTicketSteps?: {
+        canvasElementAlias: string;
+        id: string;
+    };
+    ticker: Ticker<TArgs>;
+}
+interface TickerHistory<TArgs extends TickerArgs> {
+    id: TickerIdType;
+    args: TArgs;
+    /**
+     * The aliases of the canvas elements that are connected to this ticker
+     */
+    canvasElementAliases: string[];
+    priority?: UPDATE_PRIORITY;
+    duration?: number;
+    paused?: boolean;
+}
+
+type PauseType = {
+    /**
+     * The type of the value
+     */
+    type: "pause";
+    /**
+     * Duration in seconds
+     */
+    duration: number;
+};
+
+type RepeatType = "repeat";
+
+interface TickersStep<TArgs extends TickerArgs> {
+    /**
+     * Ticker class name
+     */
+    ticker: string;
+    /**
+     * Duration in seconds. If is undefined, the step will end only when the animation is finished.
+     */
+    duration?: number;
+    /**
+     * Arguments to pass to the ticker
+     */
+    args: TArgs;
+    /**
+     * Priority of the ticker
+     */
+    priority?: UPDATE_PRIORITY;
+}
+/**
+ * The steps of the tickers
+ */
+interface TickersSequence {
+    /**
+     * The step number
+     */
+    currentStepNumber: number;
+    /**
+     * The steps of the tickers
+     */
+    steps: (TickersStep<any> | RepeatType | PauseType)[];
+}
+
+interface TickerTimeoutHistory {
+    aliases: string[];
+    ticker: string;
+    canBeDeletedBeforeEnd: boolean;
+}
+
+/**
+ * @deprecated
+ */
+type RotateTickerProps = {
+    /**
+     * The speed of the rotation (360 degree per 10 second)
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * The direction of the rotation
+     * @default true
+     */
+    clockwise?: boolean;
+    /**
+     * The limit of the rotation, is specified in degree
+     * @default undefined
+     */
+    limit?: number;
+    /**
+     * The progression of the speed
+     */
+    speedProgression?: TickerProgrationType;
+} & CommonTickerProps;
+
+/**
+ * @deprecated
+ */
+type ZoomTickerProps = {
+    /**
+     * The speed of the zoom effect (100% zoom per 10 second)
+     * @default 10
+     */
+    speed?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * The type of the zoom effect
+     * @default "zoom"
+     */
+    type?: "zoom" | "unzoom";
+    /**
+     * The limit of the effect
+     * @default type === "zoom" ? Infinity : 0
+     */
+    limit?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * The progression of the speed.
+     * There are two types of progression: linear and exponential.
+     * - Linear: The speed will increase by the amount of `amt` every frame.
+     * - Exponential: The speed will increase by the percentage of the current speed every frame.
+     * @default undefined
+     */
+    speedProgression?: TickerProgrationType;
+    /**
+     * Is a special prop used in the zoom in/out transition.
+     * @default false
+     */
+    isZoomInOut?: {
+        pivot: {
+            x: number;
+            y: number;
+        };
+        position: {
+            x: number;
+            y: number;
+        };
+    };
+} & CommonTickerProps;
+
+/**
+ * This class is used to create a canvas element to add into a Pixi Application.
+ * You can use {@link canvas.add()} to add this element into the application.
+ * This class should be implemented and the memory method should be overridden.
+ * You must use the {@link canvasComponentDecorator} to register the canvas in the game.
+ * In Ren'Py is a displayable.
+ * @example
+ * ```typescript
+ * \@canvasComponentDecorator() // this is equivalent to canvasComponentDecorator("CanvasExample")
+ * export class CanvasExample extends Container implements CanvasBaseItem<ICanvasExampleMemory> {
+ *     get memory(): ICanvasExampleMemory {
+ *         return {
+ *             pixivnId: "CanvasExample",
+ *             // ... other properties
+ *         }
+ *     }
+ *     set memory(value: ICanvasExampleMemory) {
+ *         // ... set other properties
+ *     }
+ * }
+ * ```
+ */
+declare class CanvasBaseItem<T2 extends CanvasBaseItemMemory> {
+    /**
+     * This method return the memory of the canvas element.
+     */
+    get memory(): T2;
+    /**
+     * This method set the memory of the canvas element.
+     */
+    set memory(_value: T2);
+    /**
+     * This method set the memory of the canvas element. Is equivalent to the {@link CanvasBaseItem.memory} method, but this method is async.
+     */
+    setMemory(_value: T2): Promise<void> | void;
+    /**
+     * Get the id of the canvas element. This variable is used in the system to get the canvas element by id, {@link getCanvasElementInstanceById}
+     */
+    pixivnId: string;
+}
+
+/**
+ * Interface for the canvas base memory
+ */
+interface CanvasBaseItemMemory {
+    pixivnId: string;
+}
+
+interface CanvasBaseInterface<T2 extends CanvasBaseItemMemory> extends CanvasBaseItem<T2>, Container$1 {
+}
+
+interface MotionComponentExtension {
+    pivot?: number;
+    pivotX?: number;
+    pivotY?: number;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+}
+
+type AnimationOptions = Omit<AnimationOptions$1, "onComplete" | "onPlay" | "onStop" | "onUpdate" | "onRepeat"> & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;
+
+type KeyframesType<T> = ObjectTarget<T> & MotionComponentExtension;
+type AnimationSequenceOptions = Omit<AnimationOptions$1, "onComplete" | "onPlay" | "onStop" | "onUpdate" | "onRepeat">;
+type SequenceOptions = SequenceOptions$1 & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;
+type ObjectSegment<O extends CanvasBaseInterface<any>> = [ObjectTarget<O>];
+type ObjectSegmentWithTransition<O extends CanvasBaseInterface<any>> = [ObjectTarget<O>, AnimationOptions & At];
+
+type PauseTickerType = {
+    /**
+     * Ticker ids excluded
+     */
+    tickerIdsExcluded?: string[];
+    /**
+     * Ticker ids included
+     */
+    tickerIdsIncluded?: string[];
+};
+
+/**
+ * Interface exported canvas
+ */
+interface CanvasGameState {
+    tickers: {
+        [id: string]: TickerHistory<any>;
+    };
+    tickersSteps: {
+        [alias: string]: {
+            [tickerId: string]: TickersSequence;
+        };
+    };
+    elements: {
+        [alias: string]: CanvasBaseItemMemory;
+    };
+    stage: Partial<ContainerMemory>;
+    elementAliasesOrder: string[];
+    /**
+     * @deprecated
+     */
+    tickersOnPause: {
+        [alias: string]: PauseTickerType;
+    };
+    tickersToCompleteOnStepEnd: {
+        tikersIds: {
+            id: string;
+        }[];
+        stepAlias: {
+            id: string;
+            alias: string;
+        }[];
+    };
+}
+
+interface CanvasManagerInterface {
+    /**
+     * The PIXI Application instance.
+     * It not recommended to use this property directly.
+     */
+    readonly app: Application;
+    /**
+     * The PIXI Container that contains all the canvas elements.
+     *
+     */
+    readonly gameLayer: Container$1;
+    /**
+     * If the manager is initialized.
+     */
+    readonly isInitialized: boolean;
+    /**
+     * @deprecated Use {@link width} instead.
+     */
+    canvasWidth: number;
+    /**
+     * The width of the canvas.
+     */
+    width: number;
+    /**
+     * @deprecated Use {@link height} instead.
+     */
+    canvasHeight: number;
+    /**
+     * The height of the canvas.
+     */
+    height: number;
+    /**
+     * The screen of the canvas ({@link Application.screen}).
+     */
+    readonly screen: Rectangle;
+    /**
+     * Initialize the PixiJS Application and the interface div.
+     * This method should be called before any other method.
+     * @param element The html element where I will put the canvas. Example: document.body
+     * @param width The width of the canvas
+     * @param height The height of the canvas
+     * @param options The options of PixiJS Application
+     * @param devtoolsOptions The options of the devtools. You can read more about it in the [PixiJS Devtools documentation](https://pixijs.io/devtools/docs/plugin/)
+     * @example
+     * ```typescript
+     * const body = document.body
+     * if (!body) {
+     *     throw new Error('body element not found')
+     * }
+     * await canvas.init(body, {
+     *     width: 1920,
+     *     height: 1080,
+     *     backgroundColor: "#303030"
+     * })
+     * ```
+     */
+    init(element: HTMLElement, options: Partial<ApplicationOptions> & {
+        width: number;
+        height: number;
+    }, devtoolsOptions?: Devtools): Promise<void>;
+    /**
+     * The children of the canvas.
+     */
+    readonly children: ContainerChild$1[];
+    /**
+     * Copy the properties of an old canvas element to a new canvas element.
+     * @param oldAlias Old alias
+     * @param newAlias New alias
+     * @returns
+     */
+    copyCanvasElementProperty<T extends CanvasBaseItemMemory>(oldAlias: T | CanvasBaseInterface<T> | string, newAlias: CanvasBaseInterface<T> | string): Promise<void>;
+    /**
+     * Transfer the tickers from an old alias to a new alias.
+     * @param oldAlias Old alias
+     * @param newAlias New alias
+     * @param mode If "move", the old alias will be removed from the ticker. If "duplicate", the old alias will be kept in the ticker.
+     */
+    transferTickers(oldAlias: string, newAlias: string, mode?: "move" | "duplicate"): void;
+    /**
+     * Add a canvas element to the canvas.
+     * If there is a canvas element with the same alias, all "style", zIndex, and {@link TickerBase} will be transferred to the new canvas element,
+     * and the old canvas element will be removed.
+     * @param alias The alias of the canvas element.
+     * @param canvasComponent The canvas elements to be added.
+     * @param options The options of the canvas element.
+     * @example
+     * ```typescript
+     * const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
+     * const sprite = Sprite.from(texture);
+     * canvas.add("bunny", sprite);
+     * ```
+     */
+    add(alias: string, canvasComponent: CanvasBaseInterface<any>, options?: {
+        /**
+         * 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 false
+         */
+        ignoreOldStyle?: boolean;
+        /**
+         * The zIndex of the canvas element.
+         * @default undefined
+         */
+        zIndex?: number;
+    }): void;
+    /**
+     * Remove a canvas element from the canvas.
+     * And remove all tickers that are not connected to any canvas element.
+     * @param alias The alias of the canvas element to be removed.
+     * @param options The options of the canvas element.
+     * @returns
+     * @example
+     * ```typescript
+     * canvas.remove("bunny");
+     * ```
+     */
+    remove(alias: string | string[], options?: {
+        /**
+         * If true, the tickers that are connected to the canvas element will not be removed.
+         * @default false
+         */
+        ignoreTickers?: boolean;
+    }): void;
+    /**
+     * Get a canvas element by the alias.
+     * @param alias The alias of the canvas element.
+     * @returns The canvas element.
+     * @example
+     * ```typescript
+     * const sprite = canvas.find<Sprite>("bunny");
+     * ```
+     */
+    find<T extends CanvasBaseInterface<any>>(alias: string): T | undefined;
+    /**
+     * Check if a DisplayObject is on the canvas.
+     * @param pixiElement The DisplayObject to be checked.
+     * @returns If the DisplayObject is on the canvas.
+     */
+    canvasElementIsOnCanvas<T extends Container$1>(pixiElement: T): boolean;
+    /**
+     * Remove all canvas elements from the canvas.
+     */
+    removeAll(): void;
+    /**
+     * Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.
+     * @param oldAlias The old alias of the canvas element.
+     * @param newAlias The new alias of the canvas element.
+     * @param options The options of the canvas element.
+     */
+    editAlias(oldAlias: string, newAlias: string, options?: {
+        /**
+         * If true, the tickers that are connected to the canvas element will not be transferred.
+         * @default false
+         */
+        ignoreTickers?: boolean;
+    }): void;
+    /** Edit Tickers Methods */
+    /**
+     * Currently tickers that are running.
+     */
+    readonly currentTickers: {
+        [id: string]: TickerInfo<any>;
+    };
+    /**
+     * The steps of the tickers
+     */
+    readonly currentTickersSteps: {
+        [alias: string]: {
+            [tickerId: string]: TickersSequence;
+        };
+    };
+    /**
+     * Find a ticker by its id.
+     * @param tickerId The id of the ticker.
+     * @param args The args of the ticker.
+     * @returns The ticker if found, undefined otherwise.
+     */
+    findTicker<TArgs extends TickerArgs>(tickerId: string, args?: TArgs): Ticker<TArgs> | undefined;
+    /**
+     * 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.
+     * @param canvasElementAlias The alias of the canvas element that will use the ticker.
+     * @param ticker The ticker class to be run.
+     * @returns The id of the ticker.
+     * @example
+     * ```typescript
+     * canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))
+     * ```
+     */
+    addTicker<TArgs extends TickerArgs>(canvasElementAlias: string | string[], ticker: Ticker<TArgs>): string | undefined;
+    /**
+     * Run a sequence of tickers.
+     * @param alias The alias of canvas element that will use the tickers.
+     * @param steps The steps of the tickers.
+     * @param currentStepNumber The current step number. It is used to continue the sequence of tickers.
+     * @returns The id of tickers.
+     * @example
+     * ```typescript
+     * 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,
+     * ])
+     * ```
+     */
+    addTickersSequence(alias: string, steps: (Ticker<any> | RepeatType | PauseType)[], currentStepNumber?: number): string | undefined;
+    /**
+     * Remove a connection between a canvas element and a ticker.
+     * And remove the ticker if there is no canvas element connected to it.
+     * @param alias The alias of the canvas element that will use the ticker.
+     * @param ticker The ticker class to be removed.
+     * @example
+     * ```typescript
+     * canvas.unlinkComponentFromTicker("alien", RotateTicker)
+     * ```
+     * @deprecated
+     */
+    unlinkComponentFromTicker(alias: string | string[], ticker?: {
+        new (): Ticker<any>;
+    } | string): void;
+    /**
+     * Remove all tickers from the canvas.
+     */
+    removeAllTickers(): void;
+    /**
+     * Remove a ticker by the id.
+     * @param tickerId The id of the ticker.
+     */
+    removeTicker(tickerId: string | string[]): void;
+    /**
+     * Pause a ticker. If a paused ticker have a time to be removed, it will be removed after the time.
+     * @param filters The filters to pause the ticker.
+     * @returns The ids of the paused tickers.
+     */
+    pauseTicker(filters: {
+        /**
+         * The alias of the canvas element that will use the ticker.
+         * Will pause all tickers that are connected to this canvas element.
+         */
+        canvasAlias: string;
+        /**
+         * Ticker ids excluded from the pause. If not provided, all tickers will be paused.
+         */
+        tickerIdsExcluded?: string[];
+    } | {
+        /**
+         * The id of the ticker to be paused. If provided, only this ticker will be paused.
+         */
+        id: string | string[];
+    }): string[];
+    /**
+     * Resume a ticker.
+     * @param filters The filters to resume the ticker.
+     */
+    resumeTicker(filters: {
+        /**
+         * The alias of the canvas element that will use the ticker.
+         * Will resume all tickers that are connected to this canvas element.
+         */
+        canvasAlias: string;
+    } | {
+        /**
+         * The id of the ticker to be resumed. If provided, only this ticker will be resumed.
+         */
+        id: string | string[];
+    }): void;
+    /**
+     * Check if a ticker is paused.
+     * @param alias The alias of the canvas element that will use the ticker.
+     * @param tickerId The ticker that will be checked.
+     * @returns If the ticker is paused.
+     */
+    isTickerPaused(alias: string, tickerId?: string): boolean;
+    /**
+     * Add a ticker that must be completed before the next step.
+     * This method is used for example into a transition between scenes.
+     * @param step The step that the ticker must be completed before the next step.
+     */
+    completeTickerOnStepEnd(step: {
+        /**
+         * The id of the step.
+         */
+        id: string;
+        /**
+         * If is a sequence of tickers, the alias of the sequence of tickers.
+         */
+        alias?: string;
+    }): void;
+    /**
+     * This method force the completion of the tickers that are running.
+     * This funcions is called in the next step.
+     * @param id The id of the ticker. If the alias provided, the id is the id of the sequence of tickers.
+     * @param alias The alias of the sequence of tickers.
+     */
+    forceCompletionOfTicker(id: string, alias?: string): Promise<void>;
+    /**
+     * 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.
+     * @param components - The PixiJS component(s) to animate.
+     * @param keyframes - The keyframes to animate the component(s) with.
+     * @param options - Additional options for the animation, including duration, easing, and ticker.
+     * @param priority - The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
+     * @returns The id of tickers.
+     * @template T - The type of Pixi’VN component(s) being animated.
+     */
+    animate<T extends CanvasBaseInterface<any>>(components: T | string | (string | T)[], keyframes: KeyframesType<T>, options?: AnimationOptions, priority?: UPDATE_PRIORITY): string | undefined;
+    /**
+     * 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.
+     * @param components - The PixiJS component(s) to animate.
+     * @param sequence - The sequence of keyframes to animate the component(s) with.
+     * @param options - Additional options for the animation, including duration, easing, and ticker.
+     * @param priority - The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
+     * @returns The id of tickers.
+     * @template T - The type of Pixi’VN component(s) being animated.
+     */
+    animate<T extends CanvasBaseInterface<any>>(components: T | string, sequence: (ObjectSegment<T> | ObjectSegmentWithTransition<T>)[], options?: SequenceOptions, priority?: UPDATE_PRIORITY): string | undefined;
+    /**
+     * Add a layer to the canvas.
+     * @param label The label of the layer.
+     * @param layer The layer to be added.
+     * @returns The layer.
+     * @example
+     * ```typescript
+     * const uiLayer = new Container();
+     * canvas.addLayer("ui", uiLayer);
+     * ```
+     */
+    addLayer(label: string, layer: Container$1): Layer | undefined;
+    /**
+     * Get a layer from the canvas.
+     * @param label The label of the layer.
+     * @returns The layer.
+     * @example
+     * ```typescript
+     * const uiLayer = canvas.getLayer("ui");
+     * ```
+     */
+    getLayer(label: string): Layer | null;
+    /**
+     * Remove a layer from the canvas.
+     * @param label The label of the layer to be removed.
+     * @example
+     * ```typescript
+     * canvas.removeLayer("ui");
+     * ```
+     */
+    removeLayer(label: string): void;
+    /**
+     * Add a HTML layer to the canvas.
+     * @param id The id of the layer.
+     * @param element The html element to be added.
+     * @param style The style of the layer. @default { position: "absolute", pointerEvents: "none" }.
+     * @example
+     * ```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 />
+     * )
+     * ```
+     */
+    addHtmlLayer(id: string, element: HTMLElement, style?: Pick<CSSStyleDeclaration, "position" | "pointerEvents">): HTMLDivElement;
+    /**
+     * Get a HTML layer from the canvas.
+     * @param id The id of the layer to be removed.
+     */
+    removeHtmlLayer(id: string): void;
+    /**
+     * Get a HTML layer from the canvas.
+     * @param id The id of the layer.
+     */
+    getHtmlLayer(id: string): HTMLElement | undefined;
+    /**
+     * Extract the canvas as an image.
+     * @returns The image as a base64 string.
+     */
+    extractImage(): Promise<string>;
+    /**
+     * Clear the canvas and the tickers.
+     */
+    clear(): void;
+    /**
+     * Export the canvas and the tickers to an object.
+     * @returns The object.
+     */
+    export(): CanvasGameState;
+    /**
+     * Restore the canvas and the tickers from an object.
+     * @param data The object.
+     */
+    restore(data: object): Promise<void>;
+    /**
+     * @deprecated Use {@link onTickerComplete}
+     */
+    onEndOfTicker(tickerId: string, options: {
+        aliasToRemoveAfter: string[];
+        tickerAliasToResume: string[];
+        tickerIdToResume: string[];
+        ignoreTickerSteps?: boolean;
+    }): void;
+    onTickerComplete(tickerId: string, options: {
+        aliasToRemoveAfter: string[];
+        tickerAliasToResume: string[];
+        tickerIdToResume: string[];
+        ignoreTickerSteps?: boolean;
+        stopTicker?: boolean;
+    }): void;
+}
+
+interface AdditionalPositionsExtensionProps {
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    align?: Partial<PointData> | number;
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    xAlign?: number;
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    yAlign?: number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    percentagePosition?: Partial<PointData> | number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    percentageX?: number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    percentageY?: number;
+    /**
+     * @deprecated Use {@link align} instead.
+     */
+    xPercentagePosition?: number;
+    /**
+     * @deprecated Use {@link align} instead.
+     */
+    yPercentagePosition?: number;
+}
+declare class AdditionalPositionsExtension {
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    set align(_value: Partial<PointData> | number);
+    get align(): Partial<PointData> | number;
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    set xAlign(_value: number);
+    get xAlign(): number;
+    /**
+     * 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 {@link PixiContainer.pivot} field does not affect the alignment.
+     */
+    set yAlign(_value: number);
+    get yAlign(): number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    set percentagePosition(_value: Partial<PointData> | number);
+    get percentagePosition(): Partial<PointData> | number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    set percentageX(_value: number);
+    get percentageX(): number;
+    /**
+     * @deprecated Use {@link align} instead.
+     */
+    set xPercentagePosition(_value: number);
+    get xPercentagePosition(): number;
+    /**
+     * is a way to set the position of the element in the canvas calculated in percentage.
+     * For example, if you set the {@link 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 {@link PixiContainer.pivot} field does affect the percentagePosition.
+     */
+    set percentageY(_value: number);
+    get percentageY(): number;
+    /**
+     * @deprecated Use {@link align} instead.
+     */
+    set yPercentagePosition(_value: number);
+    get yPercentagePosition(): number;
+    get positionType(): "pixel" | "percentage" | "align";
+    get positionInfo(): {
+        x: number;
+        y: number;
+        type: "pixel" | "percentage" | "align";
+    };
+}
+
+interface AnchorExtensionProps {
+    anchor?: PointData | number;
+}
+declare class AnchorExtension extends Container$1 {
+    /**
+     * The anchor sets the origin point of the imageContainer. The default value is taken from the {@link 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
+     * import { ImageContainer } from '@drincs/pixi-vn';
+     *
+     * const imageContainer = new ImageContainer();
+     * imageContainer.anchor = 0.5;
+     */
+    get anchor(): PointData;
+    set anchor(_value: PointData | number);
+}
+
+type ContainerChild = Container$1 & CanvasBaseItem<any>;
+
+interface SpriteOptions extends Omit<SpriteOptions$1, "on"> {
+    /**
+     * Add a listener for a given event.
+     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
+     */
+    on?: <T extends EventEmitter.EventNames<string | symbol>>(event: T, fn: EventEmitter.EventListener<string | symbol, T>, context?: any) => this;
+}
+interface TextOptions extends Omit<TextOptions$1, "on"> {
+    /**
+     * Add a listener for a given event.
+     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
+     */
+    on?: <T extends EventEmitter.EventNames<string | symbol>>(event: T, fn: EventEmitter.EventListener<string | symbol, T>, context?: any) => this;
+}
+interface ImageContainerOptions<C extends ContainerChild = ContainerChild> extends ContainerOptions<C>, AnchorExtensionProps, AdditionalPositionsExtensionProps {
+}
+interface ImageSpriteOptions extends SpriteOptions, AdditionalPositionsExtensionProps {
+}
+interface VideoSpriteOptions extends ImageSpriteOptions {
+    loop?: boolean;
+    paused?: boolean;
+    currentTime?: number;
+}
+
+type EventIdType = string;
+
+/**
+ * Interface for texture memory
+ */
+interface TextureMemory {
+    /**
+     * @deprecated
+     */
+    image?: string;
+    alias?: string;
+    url: string;
+}
+
+interface SpriteBaseMemory extends SpriteOptions$1, CanvasBaseItemMemory {
+    /**
+     * @deprecated
+     */
+    textureImage?: TextureMemory;
+    textureData: TextureMemory;
+    onEvents: {
+        [name: string]: EventIdType;
+    };
+}
+/**
+ * Interface for the canvas sprite memory
+ */
+interface SpriteMemory extends SpriteBaseMemory {
+}
+
+/**
+ * The memory of the image. It uses for save the state of the image.
+ */
+interface ImageSpriteMemory extends SpriteBaseMemory, AdditionalPositionsExtensionProps {
+    /**
+     * @deprecated use SpriteBaseMemory.textureAlias
+     */
+    imageLink?: string;
+    loadIsStarted: boolean;
+}
+
+/**
+ * The memory of the video. It uses for save the state of the video.
+ */
+interface VideoSpriteMemory extends ImageSpriteMemory {
+    loop: boolean;
+    paused: boolean;
+    currentTime: number;
+}
+
+/**
+ * CanvasEventNamesType is a type that is used to define the event names for the canvas.
+ */
+type CanvasEventNamesType = keyof AllFederatedEventMap;
+
+/**
+ * CanvasEvent is a class that is used to create a pixi event, and connect it to a canvas element, with on().
+ * This class should be extended and the fn method should be overridden.
+ * You must use the {@link eventDecorator} to register the event in the game.
+ * @example
+ * ```typescript
+ * \@eventDecorator() // this is equivalent to eventDecorator("EventTest")
+ * export class EventTest extends CanvasEvent<Sprite> {
+ *     override fn(event: CanvasEventNamesType, sprite: Sprite): void {
+ *         if (event === 'pointerdown') {
+ *             sprite.scale.x *= 1.25;
+ *             sprite.scale.y *= 1.25;
+ *         }
+ *     }
+ * }
+ * ```
+ */
+declare class CanvasEvent<C> {
+    constructor();
+    fn(_event: CanvasEventNamesType, _element: C): void;
+    /**
+     * Get the id of the event. This variable is used in the system to get the event by id, {@link RegisteredEvents.getInstance}.
+     */
+    id: EventIdType;
+}
+
+/**
+ * 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
+ * ```typescript
+ * 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);
+ * ```
+ */
+declare class Sprite<Memory extends SpriteOptions$1 & CanvasBaseItemMemory = SpriteMemory> extends Sprite$1 implements CanvasBaseItem<Memory | SpriteMemory> {
+    constructor(options?: SpriteOptions | Omit<Texture, "on">);
+    pixivnId: string;
+    private _textureAlias?;
+    get textureAlias(): string;
+    set textureAlias(value: string);
+    get memory(): Memory | SpriteMemory;
+    set memory(_value: Memory | SpriteMemory);
+    setMemory(value: Memory | SpriteMemory): Promise<void>;
+    private _onEvents;
+    get onEvents(): {
+        [name: string]: string;
+    };
+    /**
+     * is same function as on(), but it keeps in memory the children.
+     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
+     * @param eventClass The class that extends CanvasEvent.
+     * @returns
+     * @example
+     * ```typescript
+     * \@eventDecorator()
+     * export class EventTest extends CanvasEvent<Sprite> {
+     *     override fn(event: CanvasEventNamesType, sprite: Sprite): void {
+     *         if (event === 'pointerdown') {
+     *             sprite.scale.x *= 1.25;
+     *             sprite.scale.y *= 1.25;
+     *         }
+     *     }
+     * }
+     * ```
+     *
+     * ```typescript
+     * let sprite = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+     * await sprite.load()
+     *
+     * sprite.eventMode = 'static';
+     * sprite.cursor = 'pointer';
+     * sprite.onEvent('pointerdown', EventTest);
+     *
+     * canvas.add("bunny", sprite);
+     * ```
+     */
+    onEvent<T extends typeof CanvasEvent<typeof this>>(event: CanvasEventNamesType, eventClass: T): this;
+    /**
+     * Add a listener for a given event.
+     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
+     */
+    on<T extends keyof ContainerEvents<ContainerChild$1> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>(event: T, fn: (...args: EventEmitter.ArgumentMap<ContainerEvents<ContainerChild$1> & {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>[Extract<T, keyof ContainerEvents<ContainerChild$1> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>]) => void, context?: any): this;
+    static from(source: Texture | TextureSourceLike, skipCache?: boolean): Sprite<any>;
+}
+
+/**
+ * This class is a extension of the {@link Sprite} class, it has the same properties and methods,
+ * but it has some features that make texture management easier.
+ * You need to use {@link ImageSprite.load()} to show the image in the canvas.
+ * This class is used for functions like {@link addImage} and {@link showWithDissolve}.
+ * @example
+ * ```typescript
+ * 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)
+ * ```
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * alien.anchor.set(0.5);
+ * alien.x = 100
+ * alien.y = 100
+ * await alien.load()
+ * ```
+ */
+declare class ImageSprite<Memory extends ImageSpriteMemory = ImageSpriteMemory> extends Sprite<Memory> implements AdditionalPositionsExtension {
+    pixivnId: string;
+    constructor(options?: ImageSpriteOptions | Omit<Texture, "on"> | undefined, textureAlias?: string);
+    get memory(): ImageSpriteMemory;
+    set memory(_value: ImageSpriteMemory);
+    setMemory(value: ImageSpriteMemory): Promise<void>;
+    static from(source: Texture | TextureSourceLike, skipCache?: boolean): ImageSprite<ImageSpriteMemory>;
+    private _loadIsStarted;
+    get loadIsStarted(): boolean;
+    /**
+     * Load the image from the link and set the texture of the sprite.
+     * @returns A promise that resolves when the image is loaded.
+     */
+    load(): Promise<void>;
+    set texture(value: Texture<TextureSource<any>>);
+    get texture(): Texture<TextureSource<any>>;
+    /**
+     * Check if the texture is empty.
+     * @returns A boolean that is true if the texture is empty.
+     */
+    get haveEmptyTexture(): boolean;
+    /** AdditionalPositions */
+    private _align;
+    set align(value: Partial<PointData> | number);
+    get align(): Partial<PointData> | number;
+    set xAlign(value: number);
+    get xAlign(): number;
+    set yAlign(value: number);
+    get yAlign(): number;
+    private _percentagePosition;
+    set percentagePosition(value: Partial<PointData> | number);
+    get percentagePosition(): Partial<PointData> | number;
+    get percentageX(): number;
+    set percentageX(_value: number);
+    get percentageY(): number;
+    set percentageY(_value: number);
+    set xPercentagePosition(_value: number);
+    get xPercentagePosition(): number;
+    set yPercentagePosition(_value: number);
+    get yPercentagePosition(): number;
+    get positionType(): "pixel" | "percentage" | "align";
+    get positionInfo(): {
+        x: number;
+        y: number;
+        type: "pixel" | "percentage" | "align";
+    };
+    set positionInfo(value: {
+        x: number;
+        y: number;
+        type?: "pixel" | "percentage" | "align";
+    });
+    private reloadPosition;
+    get position(): ObservablePoint;
+    set position(value: ObservablePoint);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+}
+
+/**
+ * This class is a extension of the {@link ImageSprite} class, it has the same properties and methods,
+ * but it has some features that make video management easier.
+ * You need to use {@link VideoSprite.load()} to show the video in the canvas.
+ * This class is used for functions like {@link addVideo} and {@link showWithDissolve}.
+ * @example
+ * ```typescript
+ * let film = new VideoSprite({
+ *     x: 100,
+ *     y: 100,
+ * }, 'https://pixijs.com/assets/video.mp4')
+ * await film.load()
+ * canvas.add("film", film)
+ * ```
+ * @example
+ * ```typescript
+ * let film = addVideo("film", 'https://pixijs.com/assets/video.mp4')
+ * film.currentTime = 2
+ * await film.load()
+ * ```
+ */
+declare class VideoSprite extends ImageSprite<VideoSpriteMemory> {
+    constructor(options?: VideoSpriteOptions | Texture | undefined, textureAlias?: string);
+    pixivnId: string;
+    get memory(): VideoSpriteMemory;
+    set memory(_value: VideoSpriteMemory);
+    setMemory(value: VideoSpriteMemory): Promise<void>;
+    static from(source: Texture | TextureSourceLike, skipCache?: boolean): VideoSprite;
+    load(): Promise<void>;
+    private _looop;
+    /**
+     * Set to true if you want the video to loop.
+     */
+    get loop(): boolean;
+    set loop(value: boolean);
+    private _paused;
+    /**
+     * Set to true if you want the video to be paused.
+     */
+    get paused(): boolean;
+    set paused(value: boolean);
+    /**
+     * Pause the video.
+     */
+    pause(): void;
+    /**
+     * Play the video.
+     */
+    play(): void;
+    private _currentTime;
+    /**
+     * The current time of the video.
+     */
+    get currentTime(): number;
+    set currentTime(value: number);
+    /**
+     * Restart the video.
+     */
+    restart(): void;
+    /**
+     * The duration of the video.
+     */
+    get duration(): number | undefined;
+}
+
+/**
+ * Interface for the canvas container memory
+ */
+interface ContainerMemory<C extends ContainerChild = ContainerChild> extends ContainerOptions<C>, CanvasBaseItemMemory {
+    elements: CanvasBaseItemMemory[];
+}
+
+/**
+ * Interface for the canvas container memory
+ */
+interface ImageContainerMemory extends ContainerMemory<ImageSprite>, AdditionalPositionsExtensionProps {
+    elements: ImageSpriteMemory[];
+    anchor?: PointData;
+    loadIsStarted: boolean;
+}
+
+/**
+ * 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
+ * ```typescript
+ *  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);
+ *  }
+ * ```
+ */
+declare class Container<C extends ContainerChild = ContainerChild, Memory extends ContainerMemory = ContainerMemory> extends Container$1<C> implements CanvasBaseItem<Memory> {
+    constructor(options?: ContainerOptions<C>);
+    pixivnId: string;
+    get memory(): Memory;
+    set memory(_value: Memory);
+    setMemory(value: Memory): Promise<void>;
+    protected importChildren(value: Memory): Promise<void>;
+    private _onEvents;
+    get onEvents(): {
+        [name: string]: string;
+    };
+    /**
+     * is same function as on(), but it keeps in memory the children.
+     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
+     * @param eventClass The class that extends CanvasEvent.
+     * @returns
+     * @example
+     * ```typescript
+     * \@eventDecorator()
+     * export class EventTest extends CanvasEvent<Container> {
+     *     override fn(event: CanvasEventNamesType, container: Container): void {
+     *         if (event === 'pointerdown') {
+     *             container.scale.x *= 1.25;
+     *             container.scale.y *= 1.25;
+     *         }
+     *     }
+     * }
+     * ```
+     *
+     * ```typescript
+     * const container = new Container();
+     *
+     * container.eventMode = 'static';
+     * container.cursor = 'pointer';
+     * container.onEvent('pointerdown', EventTest);
+     *
+     * canvas.add("container", container);
+     * ```
+     */
+    onEvent<T extends CanvasEventNamesType, T2 extends typeof CanvasEvent<typeof this>>(event: T, eventClass: T2): this;
+    /**
+     * Add a listener for a given event.
+     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
+     */
+    on<T extends keyof ContainerEvents<ContainerChild> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>(event: T, fn: (...args: EventEmitter.ArgumentMap<ContainerEvents<ContainerChild> & {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>[Extract<T, keyof ContainerEvents<ContainerChild> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>]) => void, context?: any): this;
+}
+
+/**
+ * This class is a extension of the {@link Container}, it has the same properties and methods,
+ * but this container is composed only of {@link ImageSprite} and introduces the {@link ImageContainer.load} functionality
+ * @example
+ * ```typescript
+ *  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);
+ * ```
+ */
+declare class ImageContainer extends Container<ImageSprite, ImageContainerMemory> implements AnchorExtension, AdditionalPositionsExtension {
+    constructor(options?: ImageContainerOptions<ImageSprite>, textureAliases?: string[]);
+    get memory(): ImageContainerMemory;
+    set memory(_value: ImageContainerMemory);
+    setMemory(value: ImageContainerMemory): Promise<void>;
+    pixivnId: string;
+    private _loadIsStarted;
+    get loadIsStarted(): boolean;
+    /**
+     * Load the children images.
+     * @returns A promise that resolves when the images are loaded.
+     */
+    load(): Promise<void>;
+    /**
+     * The texture of the first child.
+     * If there is no child, it returns a new {@link Texture}.
+     */
+    get texture(): Texture<pixi_js.TextureSource<any>>;
+    /**
+     * Check if there is a child with the empty texture.
+     * @returns A boolean that is true if there is a child with the empty texture.
+     */
+    get haveEmptyTexture(): boolean;
+    /** Anchor */
+    private _anchor?;
+    get anchor(): PointData;
+    set anchor(value: PointData | number);
+    private reloadAnchor;
+    get pivot(): ObservablePoint;
+    set pivot(value: ObservablePoint);
+    /** AdditionalPositions */
+    private _align;
+    set align(value: Partial<PointData> | number);
+    get align(): Partial<PointData> | number;
+    set xAlign(value: number);
+    get xAlign(): number;
+    set yAlign(value: number);
+    get yAlign(): number;
+    private _percentagePosition;
+    set percentagePosition(value: Partial<PointData> | number);
+    get percentagePosition(): Partial<PointData> | number;
+    set percentageX(_value: number);
+    get percentageX(): number;
+    set xPercentagePosition(_value: number);
+    get xPercentagePosition(): number;
+    set yPercentagePosition(_value: number);
+    get yPercentagePosition(): number;
+    set percentageY(_value: number);
+    get percentageY(): number;
+    get positionType(): "pixel" | "percentage" | "align";
+    get positionInfo(): {
+        x: number;
+        y: number;
+        type: "pixel" | "percentage" | "align";
+    };
+    set positionInfo(value: {
+        x: number;
+        y: number;
+        type?: "pixel" | "percentage" | "align";
+    });
+    private reloadPosition;
+    get position(): ObservablePoint;
+    set position(value: ObservablePoint);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+}
+
+/**
+ * This class is responsible for managing the canvas, the tickers, the events, and the window size and the children of the window.
+ */
+declare class CanvasManagerStatic {
+    private constructor();
+    private static _app;
+    static get app(): Application<pixi_js.Renderer>;
+    static get gameLayer(): Container$1<pixi_js.ContainerChild>;
+    /**
+     * 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.
+     */
+    static htmlLayers: HTMLElement[];
+    static canvasWidth: number;
+    static canvasHeight: number;
+    static _isInitialized: boolean;
+    static init(element: HTMLElement, width: number, height: number, options?: Partial<ApplicationOptions>, devtoolsOptions?: Devtools): Promise<void>;
+    /**
+     * Add the canvas into a html element.
+     * @param element it is the html element where I will put the canvas. Example: document.body
+     */
+    private static addCanvasIntoHTMLElement;
+    static addHtmlLayer(id: string, element: HTMLElement, style?: Pick<CSSStyleDeclaration, "position" | "pointerEvents">): HTMLDivElement;
+    static removeHtmlLayer(id: string): void;
+    static getHtmlLayer(id: string): HTMLElement | undefined;
+    /**
+     * This method returns the scale of the screen.
+     */
+    private static get screenScale();
+    /**
+     * This method returns the width of the screen enlarged by the scale.
+     */
+    private static get screenWidth();
+    /**
+     * This method returns the height of the screen enlarged by the scale.
+     */
+    private static get screenHeight();
+    /**
+     * This method returns the horizontal margin of the screen.
+     */
+    private static get horizontalMargin();
+    /**
+     * This method returns the vertical margin of the screen.
+     */
+    private static get verticalMargin();
+    /**
+     * This method is called when the screen is resized.
+     */
+    private static resize;
+    /**
+     * The order of the elements in the canvas, is determined by the zIndex.
+     */
+    static get childrenAliasesOrder(): string[];
+    /** Edit Tickers Methods */
+    static get currentTickersWithoutCreatedBySteps(): {
+        [k: string]: TickerHistory<any>;
+    };
+    static _currentTickers: {
+        [id: string]: TickerInfo<any>;
+    };
+    static _currentTickersSequence: {
+        [alias: string]: {
+            [tickerId: string]: TickersSequence;
+        };
+    };
+    static _currentTickersTimeouts: {
+        [timeout: string]: TickerTimeoutHistory;
+    };
+    static _tickersToCompleteOnStepEnd: {
+        tikersIds: {
+            id: string;
+        }[];
+        stepAlias: {
+            id: string;
+            alias: string;
+        }[];
+    };
+    /**
+     * @deprecated
+     */
+    static _tickersOnPause: {
+        [aliasOrId: string]: PauseTickerType;
+    };
+    static generateTickerId(tickerData: TickerInfo<any> | TickersSequence): string;
+    static addTickerTimeoutInfo(aliases: string | string[], ticker: string, timeout: string, canBeDeletedBeforeEnd: boolean): void;
+    static removeTickerTimeoutInfo(timeout: NodeJS.Timeout | string): void;
+    static removeTickerTimeout(timeout: NodeJS.Timeout | string): void;
+    static removeTickerTimeoutsByAlias(alias: string, checkCanBeDeletedBeforeEnd: boolean): void;
+}
+
+/**
+ * Interface for the canvas text memory
+ */
+interface TextMemory extends TextOptions$1, CanvasBaseItemMemory {
+    onEvents: {
+        [name: string]: EventIdType;
+    };
+}
+
+/**
+ * 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
+ * ```typescript
+ * const text = new Text();
+ * text.text = "Hello World"
+ * canvas.add("text", text);
+ * ```
+ */
+declare class Text extends Text$1 implements CanvasBaseItem<TextMemory> {
+    constructor(options?: TextOptions);
+    pixivnId: string;
+    get memory(): TextMemory;
+    set memory(_value: TextMemory);
+    setMemory(value: TextMemory): Promise<void>;
+    private _onEvents;
+    get onEvents(): {
+        [name: string]: string;
+    };
+    /**
+     * is same function as on(), but it keeps in memory the children.
+     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
+     * @param eventClass The class that extends CanvasEvent.
+     * @returns
+     * @example
+     * ```typescript
+     * \@eventDecorator()
+     * export class EventTest extends CanvasEvent<Text> {
+     *     override fn(event: CanvasEventNamesType, text: Text): void {
+     *         if (event === 'pointerdown') {
+     *             text.scale.x *= 1.25;
+     *             text.scale.y *= 1.25;
+     *         }
+     *     }
+     * }
+     * ```
+     *
+     * ```typescript
+     * const text = new Text();
+     * text.text = "Hello World"
+     *
+     * text.eventMode = 'static';
+     * text.cursor = 'pointer';
+     * text.onEvent('pointerdown', EventTest);
+     *
+     * canvas.add("text", text);
+     * ```
+     */
+    onEvent<T extends typeof CanvasEvent<typeof this>>(event: CanvasEventNamesType, eventClass: T): this;
+    /**
+     * Add a listener for a given event.
+     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
+     */
+    on<T extends keyof ContainerEvents<ContainerChild$1> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>(event: T, fn: (...args: EventEmitter.ArgumentMap<ContainerEvents<ContainerChild$1> & {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>[Extract<T, keyof ContainerEvents<ContainerChild$1> | keyof {
+        [K: symbol]: any;
+        [K: {} & string]: any;
+    }>]) => void, context?: any): this;
+}
+
+type CanvasElementAliasType = string;
+
+/**
+ * Is a decorator that register a canvas component in the game.
+ * @param name Name of the canvas component, by default it will use the class name. If the name is already registered, it will show a warning
+ * @returns
+ */
+declare function canvasComponentDecorator(name?: CanvasElementAliasType): (target: typeof CanvasBaseItem<any>) => void;
+declare namespace RegisteredCanvasComponents {
+    /**
+     * Register a canvas component in the game.
+     * @param target The class of the canvas component.
+     * @param name Name of the canvas component, by default it will use the class name. If the name is already registered, it will show a warning
+     */
+    function add(target: typeof CanvasBaseItem<any>, name?: CanvasElementAliasType): void;
+    /**
+     * Get a canvas component by the id.
+     * @param canvasId The id of the canvas component.
+     * @returns The canvas component type.
+     */
+    function get<T extends typeof CanvasBaseItem<any>>(canvasId: CanvasElementAliasType): T | undefined;
+    /**
+     * Get a list of all canvas components registered.
+     * @returns An array of canvas components.
+     */
+    function values(): (typeof CanvasBaseItem<any>)[];
+    /**
+     * Check if a canvas component is registered.
+     * @param id The id of the canvas component.
+     * @returns True if the canvas component is registered, false otherwise.
+     */
+    function has(id: string): boolean;
+}
+
+/**
+ * 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.
+ * @param name is th identifier of the event, by default is the name of the class
+ * @returns
+ */
+declare function eventDecorator(name?: EventIdType): (target: typeof CanvasEvent<any>) => void;
+declare namespace RegisteredEvents {
+    /**
+     * Register a event in the game.
+     * @param target The class of the event.
+     * @param name Name of the event, by default it will use the class name. If the name is already registered, it will show a warning
+     */
+    function add(target: typeof CanvasEvent<CanvasEventNamesType>, name?: EventIdType): void;
+    /**
+     * Get a event by the id.
+     * @param canvasId The id of the event.
+     * @returns The event type.
+     */
+    function get<T = typeof CanvasEvent<CanvasBaseInterface<any>>>(eventId: EventIdType): T | undefined;
+    /**
+     * Get a event instance by the id.
+     * @param eventId The id of the event.
+     * @returns The event instance.
+     */
+    function getInstance<T = CanvasEvent<CanvasBaseInterface<any>>>(eventId: EventIdType): T | undefined;
+    /**
+     * Get a list of all events registered.
+     * @returns An array of events.
+     */
+    function values(): (typeof CanvasEvent<CanvasEventNamesType>)[];
+    /**
+     * Check if a event is registered.
+     * @param id The id of the event.
+     * @returns True if the event is registered, false otherwise
+     */
+    function has(id: string): boolean;
+}
+
+/**
+ * Shake the canvas element.
+ * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
+ * @param alias
+ * @param options
+ * @param priority
+ * @returns
+ */
+declare function shakeEffect(alias: string, options?: ShakeEffectProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+
+interface BaseTransitionProps {
+    /**
+     * 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 true
+     */
+    forceCompleteBeforeNext?: boolean;
+}
+interface ShowWithDissolveTransitionProps extends BaseTransitionProps, AnimationOptions {
+}
+interface ShowWithFadeTransitionProps extends BaseTransitionProps, AnimationOptions {
+}
+interface MoveInOutProps extends BaseTransitionProps, AnimationOptions {
+    /**
+     * The direction of the movement.
+     * @default "right"
+     */
+    direction?: "up" | "down" | "left" | "right";
+}
+interface ZoomInOutProps extends BaseTransitionProps, AnimationOptions {
+    /**
+     * The direction of the zoom effect.
+     * @default "right"
+     */
+    direction?: "up" | "down" | "left" | "right";
+}
+interface PushInOutProps extends BaseTransitionProps, AnimationOptions {
+    /**
+     * The direction of the push effect.
+     * @default "right"
+     */
+    direction?: "up" | "down" | "left" | "right";
+}
+
+type TComponent = CanvasBaseInterface<any> | string | string[] | {
+    value: string;
+    options: ImageSpriteOptions;
+} | {
+    value: string[];
+    options: ImageContainerOptions;
+};
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
+ * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
+ * If you don't provide the component, then the alias is used as the url.
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
+ */
+declare function showWithDissolve(alias: string, component?: TComponent, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+/**
+ * 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 {@link removeWithFade}.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns The ids of the tickers that are used in the effect.
+ */
+declare function removeWithDissolve(alias: string, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY): string[] | undefined;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
+ * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
+ * If you don't provide the component, then the alias is used as the url.
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
+ */
+declare function showWithFade(alias: string, component?: TComponent, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+/**
+ * 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 {@link removeWithDissolve}.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns The ids of the tickers that are used in the effect.
+ */
+declare function removeWithFade(alias: string, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY): string[] | undefined;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
+ * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
+ * If you don't provide the component, then the alias is used as the url.
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
+ */
+declare function moveIn(alias: string, component?: TComponent, props?: MoveInOutProps & {
+    /**
+     * If true, then the old component is removed with a move out, after the new image is moved in.
+     * @default false
+     */
+    removeOldComponentWithMoveOut?: boolean;
+}, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns The ids of the tickers that are used in the effect.
+ */
+declare function moveOut(alias: string, props?: MoveInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
+ * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
+ * If you don't provide the component, then the alias is used as the url.
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
+ */
+declare function zoomIn(alias: string, component?: TComponent, props?: ZoomInOutProps & {
+    /**
+     * If true, then the old component is removed with a zoom out, after the new image is zoomed in.
+     * @default false
+     */
+    removeOldComponentWithZoomOut?: boolean;
+}, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns The ids of the tickers that are used in the effect.
+ */
+declare function zoomOut(alias: string, props?: ZoomInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
+ * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
+ * If you don't provide the component, then the alias is used as the url.
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
+ */
+declare function pushIn(alias: string, component?: TComponent, props?: PushInOutProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
+/**
+ * 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.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param props The properties of the effect
+ * @param priority The priority of the effect
+ * @returns The ids of the tickers that are used in the effect.
+ */
+declare function pushOut(alias: string, props?: PushInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;
+
+/**
+ * Add a list of images in the container, after that, the images are added to the canvas.
+ * Is the same that {@link showImageContainer}, but the image is not shown.
+ * If you want to show the image, then you need to use the function {@link ImageSprite.load()}.
+ * @param alias is the unique alias of the image. You can use this alias to refer to this image
+ * @param imageUrls is the url of the image. If you don't provide the url, then the alias is used as the url.
+ * @param options The options of the image.
+ * @returns the container of the image.
+ * @example
+ * ```typescript
+ * let bunny = addImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"])
+ * await bunny.load()
+ * ```
+ */
+declare function addImageCointainer(alias: string, imageUrls: string[], options?: ImageContainerOptions<ImageSprite>): ImageContainer;
+/**
+ * Add a list of images in the container, after that, the images are added and shown in the canvas.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param imageUrls The url of the image.
+ * @param options The options of the image.
+ * @returns A promise that is resolved when the image is loaded.
+ * @example
+ * ```typescript
+ * let bunny = showImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"])
+ * ```
+ */
+declare function showImageContainer(alias: string, imageUrls: string[], options?: ImageContainerOptions<ImageSprite>): Promise<ImageContainer>;
+
+/**
+ * Add a image in the canvas.
+ * Is the same that {@link showImage}, but the image is not shown.
+ * If you want to show the image, then you need to use the function {@link ImageSprite.load()}.
+ * @param alias is the unique alias of the image. You can use this alias to refer to this image
+ * @param imageUrl is the url of the image. If you don't provide the url, then the alias is used as the url.
+ * @param options The options of the image.
+ * @returns the container of the image.
+ * @example
+ * ```typescript
+ * 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()
+ * ```
+ */
+declare function addImage(alias: string, imageUrl?: string, options?: ImageSpriteOptions): ImageSprite;
+/**
+ * Add and show a image in the canvas. This function is a combination of {@link addImage} and {@link loadImage}.
+ * @param alias The unique alias of the image. You can use this alias to refer to this image
+ * @param imageUrl The url of the image.
+ * @param options The options of the image.
+ * @returns A promise that is resolved when the image is loaded.
+ * @example
+ * ```typescript
+ * 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")
+ * ```
+ */
+declare function showImage(alias: string, imageUrl?: string, options?: ImageSpriteOptions): Promise<ImageSprite>;
+
+/**
+ * Get a texture from a url.
+ * @param textureAlias is the url of the file.
+ * @returns the texture of the image or video, or a text with the error.
+ */
+declare function getTexture(textureAlias?: string): Promise<Texture | void>;
+
+/**
+ * Add a video in the canvas.
+ * Is the same that {@link showVideo}, but the video is not shown.
+ * If you want to show the video, then you need to use the function {@link VideoSprite.load()}.
+ * @param alias is the unique alias of the video. You can use this alias to refer to this video
+ * @param videoUrl is the url of the video. If you don't provide the url, then the alias is used as the url.
+ * @param options The options of the video.
+ * @returns the container of the video.
+ * @example
+ * ```typescript
+ * 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()
+ * ```
+ */
+declare function addVideo(alias: string, videoUrl?: string, options?: VideoSpriteOptions): VideoSprite;
+/**
+ * Add and show a video in the canvas. This function is a combination of {@link addVideo} and {@link loadVideo}.
+ * @param alias The unique alias of the video. You can use this alias to refer to this video
+ * @param videoUrl The url of the video.
+ * @param options The options of the video.
+ * @returns A promise that is resolved when the video is loaded.
+ * @example
+ * ```typescript
+ * 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")
+ * ```
+ */
+declare function showVideo(alias: string, videoUrl?: string, options?: VideoSpriteOptions): Promise<VideoSprite>;
+
+interface ShakeEffectProps extends BaseTransitionProps, AnimationOptions {
+    /**
+     * The number of shocks. **Must be at least 3**.
+     * @default 10
+     */
+    shocksNumber?: number;
+    /**
+     * The type of the shake effect
+     * @default "horizontal"
+     */
+    shakeType?: "horizontal" | "vertical";
+    /**
+     * 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 10
+     */
+    maxShockSize?: number;
+}
+
+declare const canvas: CanvasManagerInterface;
+
+type canvasUtils_AnimationOptions = AnimationOptions;
+type canvasUtils_AnimationSequenceOptions = AnimationSequenceOptions;
+type canvasUtils_CanvasBaseInterface<T2 extends CanvasBaseItemMemory> = CanvasBaseInterface<T2>;
+type canvasUtils_CanvasBaseItem<T2 extends CanvasBaseItemMemory> = CanvasBaseItem<T2>;
+declare const canvasUtils_CanvasBaseItem: typeof CanvasBaseItem;
+type canvasUtils_CanvasBaseItemMemory = CanvasBaseItemMemory;
+type canvasUtils_CanvasEvent<C> = CanvasEvent<C>;
+declare const canvasUtils_CanvasEvent: typeof CanvasEvent;
+type canvasUtils_CanvasEventNamesType = CanvasEventNamesType;
+type canvasUtils_CanvasGameState = CanvasGameState;
+type canvasUtils_CanvasManagerInterface = CanvasManagerInterface;
+type canvasUtils_CanvasManagerStatic = CanvasManagerStatic;
+declare const canvasUtils_CanvasManagerStatic: typeof CanvasManagerStatic;
+type canvasUtils_CommonTickerProps = CommonTickerProps;
+type canvasUtils_Container<C extends ContainerChild = ContainerChild, Memory extends ContainerMemory = ContainerMemory> = Container<C, Memory>;
+declare const canvasUtils_Container: typeof Container;
+type canvasUtils_ContainerChild = ContainerChild;
+type canvasUtils_ContainerMemory<C extends ContainerChild = ContainerChild> = ContainerMemory<C>;
+type canvasUtils_FadeAlphaTicker = FadeAlphaTicker;
+declare const canvasUtils_FadeAlphaTicker: typeof FadeAlphaTicker;
+type canvasUtils_FadeAlphaTickerProps = FadeAlphaTickerProps;
+type canvasUtils_ImageContainer = ImageContainer;
+declare const canvasUtils_ImageContainer: typeof ImageContainer;
+type canvasUtils_ImageContainerMemory = ImageContainerMemory;
+type canvasUtils_ImageContainerOptions<C extends ContainerChild = ContainerChild> = ImageContainerOptions<C>;
+type canvasUtils_ImageSprite<Memory extends ImageSpriteMemory = ImageSpriteMemory> = ImageSprite<Memory>;
+declare const canvasUtils_ImageSprite: typeof ImageSprite;
+type canvasUtils_ImageSpriteMemory = ImageSpriteMemory;
+type canvasUtils_ImageSpriteOptions = ImageSpriteOptions;
+type canvasUtils_KeyframesType<T> = KeyframesType<T>;
+type canvasUtils_Layer = Layer;
+type canvasUtils_MoveInOutProps = MoveInOutProps;
+type canvasUtils_MoveTicker = MoveTicker;
+declare const canvasUtils_MoveTicker: typeof MoveTicker;
+type canvasUtils_MoveTickerProps = MoveTickerProps;
+type canvasUtils_ObjectSegment<O extends CanvasBaseInterface<any>> = ObjectSegment<O>;
+type canvasUtils_ObjectSegmentWithTransition<O extends CanvasBaseInterface<any>> = ObjectSegmentWithTransition<O>;
+type canvasUtils_PauseType = PauseType;
+type canvasUtils_PushInOutProps = PushInOutProps;
+declare const canvasUtils_RegisteredCanvasComponents: typeof RegisteredCanvasComponents;
+declare const canvasUtils_RegisteredEvents: typeof RegisteredEvents;
+declare const canvasUtils_RegisteredTickers: typeof RegisteredTickers;
+type canvasUtils_RepeatType = RepeatType;
+type canvasUtils_RotateTicker = RotateTicker;
+declare const canvasUtils_RotateTicker: typeof RotateTicker;
+type canvasUtils_RotateTickerProps = RotateTickerProps;
+type canvasUtils_SequenceOptions = SequenceOptions;
+type canvasUtils_ShakeEffectProps = ShakeEffectProps;
+type canvasUtils_ShowWithDissolveTransitionProps = ShowWithDissolveTransitionProps;
+type canvasUtils_ShowWithFadeTransitionProps = ShowWithFadeTransitionProps;
+type canvasUtils_Sprite<Memory extends SpriteOptions$1 & CanvasBaseItemMemory = SpriteMemory> = Sprite<Memory>;
+declare const canvasUtils_Sprite: typeof Sprite;
+type canvasUtils_SpriteBaseMemory = SpriteBaseMemory;
+type canvasUtils_SpriteMemory = SpriteMemory;
+type canvasUtils_SpriteOptions = SpriteOptions;
+type canvasUtils_Text = Text;
+declare const canvasUtils_Text: typeof Text;
+type canvasUtils_TextMemory = TextMemory;
+type canvasUtils_TextOptions = TextOptions;
+type canvasUtils_TextureMemory = TextureMemory;
+type canvasUtils_Ticker<TArgs extends TickerArgs> = Ticker<TArgs>;
+type canvasUtils_TickerArgs = TickerArgs;
+type canvasUtils_TickerBase<TArgs extends TickerArgs> = TickerBase<TArgs>;
+declare const canvasUtils_TickerBase: typeof TickerBase;
+type canvasUtils_TickerHistory<TArgs extends TickerArgs> = TickerHistory<TArgs>;
+type canvasUtils_TickerInfo<TArgs extends TickerArgs> = TickerInfo<TArgs>;
+type canvasUtils_TickerProgrationExponential = TickerProgrationExponential;
+type canvasUtils_TickerProgrationLinear = TickerProgrationLinear;
+type canvasUtils_TickerProgrationType = TickerProgrationType;
+type canvasUtils_TickerTimeoutHistory = TickerTimeoutHistory;
+type canvasUtils_TickerValue = TickerValue;
+type canvasUtils_TickersSequence = TickersSequence;
+type canvasUtils_VideoSprite = VideoSprite;
+declare const canvasUtils_VideoSprite: typeof VideoSprite;
+type canvasUtils_VideoSpriteMemory = VideoSpriteMemory;
+type canvasUtils_VideoSpriteOptions = VideoSpriteOptions;
+type canvasUtils_ZoomInOutProps = ZoomInOutProps;
+type canvasUtils_ZoomTicker = ZoomTicker;
+declare const canvasUtils_ZoomTicker: typeof ZoomTicker;
+type canvasUtils_ZoomTickerProps = ZoomTickerProps;
+declare const canvasUtils_addImage: typeof addImage;
+declare const canvasUtils_addImageCointainer: typeof addImageCointainer;
+declare const canvasUtils_addVideo: typeof addVideo;
+declare const canvasUtils_animate: typeof animate;
+declare const canvasUtils_canvas: typeof canvas;
+declare const canvasUtils_canvasComponentDecorator: typeof canvasComponentDecorator;
+declare const canvasUtils_eventDecorator: typeof eventDecorator;
+declare const canvasUtils_getTexture: typeof getTexture;
+declare const canvasUtils_moveIn: typeof moveIn;
+declare const canvasUtils_moveOut: typeof moveOut;
+declare const canvasUtils_pushIn: typeof pushIn;
+declare const canvasUtils_pushOut: typeof pushOut;
+declare const canvasUtils_removeWithDissolve: typeof removeWithDissolve;
+declare const canvasUtils_removeWithFade: typeof removeWithFade;
+declare const canvasUtils_shakeEffect: typeof shakeEffect;
+declare const canvasUtils_showImage: typeof showImage;
+declare const canvasUtils_showImageContainer: typeof showImageContainer;
+declare const canvasUtils_showVideo: typeof showVideo;
+declare const canvasUtils_showWithDissolve: typeof showWithDissolve;
+declare const canvasUtils_showWithFade: typeof showWithFade;
+declare const canvasUtils_tickerDecorator: typeof tickerDecorator;
+declare const canvasUtils_zoomIn: typeof zoomIn;
+declare const canvasUtils_zoomOut: typeof zoomOut;
+declare namespace canvasUtils {
+  export { type canvasUtils_AnimationOptions as AnimationOptions, type canvasUtils_AnimationSequenceOptions as AnimationSequenceOptions, type canvasUtils_CanvasBaseInterface as CanvasBaseInterface, canvasUtils_CanvasBaseItem as CanvasBaseItem, type canvasUtils_CanvasBaseItemMemory as CanvasBaseItemMemory, canvasUtils_CanvasEvent as CanvasEvent, type canvasUtils_CanvasEventNamesType as CanvasEventNamesType, type canvasUtils_CanvasGameState as CanvasGameState, type canvasUtils_CanvasManagerInterface as CanvasManagerInterface, canvasUtils_CanvasManagerStatic as CanvasManagerStatic, type canvasUtils_CommonTickerProps as CommonTickerProps, canvasUtils_Container as Container, type canvasUtils_ContainerChild as ContainerChild, type canvasUtils_ContainerMemory as ContainerMemory, canvasUtils_FadeAlphaTicker as FadeAlphaTicker, type canvasUtils_FadeAlphaTickerProps as FadeAlphaTickerProps, canvasUtils_ImageContainer as ImageContainer, type canvasUtils_ImageContainerMemory as ImageContainerMemory, type canvasUtils_ImageContainerOptions as ImageContainerOptions, canvasUtils_ImageSprite as ImageSprite, type canvasUtils_ImageSpriteMemory as ImageSpriteMemory, type canvasUtils_ImageSpriteOptions as ImageSpriteOptions, type canvasUtils_KeyframesType as KeyframesType, type canvasUtils_Layer as Layer, type canvasUtils_MoveInOutProps as MoveInOutProps, canvasUtils_MoveTicker as MoveTicker, type canvasUtils_MoveTickerProps as MoveTickerProps, type canvasUtils_ObjectSegment as ObjectSegment, type canvasUtils_ObjectSegmentWithTransition as ObjectSegmentWithTransition, pixi_js as PIXI, type canvasUtils_PauseType as PauseType, type canvasUtils_PushInOutProps as PushInOutProps, canvasUtils_RegisteredCanvasComponents as RegisteredCanvasComponents, canvasUtils_RegisteredEvents as RegisteredEvents, canvasUtils_RegisteredTickers as RegisteredTickers, type canvasUtils_RepeatType as RepeatType, canvasUtils_RotateTicker as RotateTicker, type canvasUtils_RotateTickerProps as RotateTickerProps, type canvasUtils_SequenceOptions as SequenceOptions, type canvasUtils_ShakeEffectProps as ShakeEffectProps, type canvasUtils_ShowWithDissolveTransitionProps as ShowWithDissolveTransitionProps, type canvasUtils_ShowWithFadeTransitionProps as ShowWithFadeTransitionProps, canvasUtils_Sprite as Sprite, type canvasUtils_SpriteBaseMemory as SpriteBaseMemory, type canvasUtils_SpriteMemory as SpriteMemory, type canvasUtils_SpriteOptions as SpriteOptions, canvasUtils_Text as Text, type canvasUtils_TextMemory as TextMemory, type canvasUtils_TextOptions as TextOptions, type canvasUtils_TextureMemory as TextureMemory, type canvasUtils_Ticker as Ticker, type canvasUtils_TickerArgs as TickerArgs, canvasUtils_TickerBase as TickerBase, type canvasUtils_TickerHistory as TickerHistory, type canvasUtils_TickerInfo as TickerInfo, type canvasUtils_TickerProgrationExponential as TickerProgrationExponential, type canvasUtils_TickerProgrationLinear as TickerProgrationLinear, type canvasUtils_TickerProgrationType as TickerProgrationType, type canvasUtils_TickerTimeoutHistory as TickerTimeoutHistory, type canvasUtils_TickerValue as TickerValue, type canvasUtils_TickersSequence as TickersSequence, canvasUtils_VideoSprite as VideoSprite, type canvasUtils_VideoSpriteMemory as VideoSpriteMemory, type canvasUtils_VideoSpriteOptions as VideoSpriteOptions, type canvasUtils_ZoomInOutProps as ZoomInOutProps, canvasUtils_ZoomTicker as ZoomTicker, type canvasUtils_ZoomTickerProps as ZoomTickerProps, canvasUtils_addImage as addImage, canvasUtils_addImageCointainer as addImageCointainer, canvasUtils_addVideo as addVideo, canvasUtils_animate as animate, canvasUtils_canvas as canvas, canvasUtils_canvasComponentDecorator as canvasComponentDecorator, canvasUtils_eventDecorator as eventDecorator, canvasUtils_getTexture as getTexture, canvasUtils_moveIn as moveIn, canvasUtils_moveOut as moveOut, canvasUtils_pushIn as pushIn, canvasUtils_pushOut as pushOut, canvasUtils_removeWithDissolve as removeWithDissolve, canvasUtils_removeWithFade as removeWithFade, canvasUtils_shakeEffect as shakeEffect, canvasUtils_showImage as showImage, canvasUtils_showImageContainer as showImageContainer, canvasUtils_showVideo as showVideo, canvasUtils_showWithDissolve as showWithDissolve, canvasUtils_showWithFade as showWithFade, canvasUtils_tickerDecorator as tickerDecorator, canvasUtils_zoomIn as zoomIn, canvasUtils_zoomOut as zoomOut };
+}
+
+/**
+ * CharacterBaseModelProps is an interface that is used to create a character model.
+ */
+interface CharacterBaseModelProps {
+    /**
+     * 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;
+}
+
+type StorageElementPrimaryType = string | number | boolean | undefined | null | StorageElementPrimaryType[];
+type StorageElementInternalType = StorageElementPrimaryType | Record<string | number | symbol, StorageElementPrimaryType> | StorageElementInternalType[];
+/**
+ * StorageElementType are all the types that can be stored in the storage
+ */
+type StorageElementType = StorageElementInternalType | Record<string | number | symbol, StorageElementInternalType> | {
+    [key: string | number | symbol]: StorageElementType;
+} | StorageObjectType[] | (StorageElementPrimaryType | StorageElementInternalType | StorageElementType)[];
+/**
+ * StorageObjectType are all the types that can be stored in the storage
+ */
+type StorageObjectType = Record<string | number | symbol, StorageElementType>;
+
+interface StorageGameStateItem<T = StorageElementType> {
+    key: string;
+    value: T;
+}
+/**
+ * Interface exported storage data
+ */
+type StorageGameState = {
+    base: StorageGameStateItem[];
+    temp: StorageGameStateItem[];
+    tempDeadlines: StorageGameStateItem<number>[];
+    flags: string[];
+} | StorageGameStateItem[] | {
+    [key: string]: StorageElementType;
+};
+
+/**
+ * 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
+ * ```typescript
+ * export class CharacterBaseModel extends StoredClassModel implements CharacterBaseModelProps {
+ *     constructor(id: string, props: CharacterBaseModelProps) {
+ *         super("___character___", id)
+ *         this.defaultName = props.name
+ *         this.defaultSurname = props.surname
+ *     }
+ *     private defaultName: string = ""
+ *     get name(): string {
+ *         return this.getStorageProperty<string>("name") || this.defaultName
+ *     }
+ *     set name(value: string) {
+ *         this.setStorageProperty<string>("name", value)
+ *     }
+ *     private defaultSurname?: string
+ *     get surname(): string | undefined {
+ *         return this.getStorageProperty<string>("surname") || this.defaultSurname
+ *     }
+ *     set surname(value: string | undefined) {
+ *         this.setStorageProperty<string>("surname", value)
+ *     }
+ * }
+ * ```
+ */
+declare class StoredClassModel {
+    /**
+     * @param categoryId 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.
+     * @param id The id of instance of the class. This id must be unique for the category.
+     */
+    constructor(categoryId: string, id: string);
+    private _id;
+    /**
+     * Is id of the stored class. is unique for this class.
+     */
+    get id(): string;
+    private categoryId;
+    /**
+     * Update a property in the storage.
+     * @param propertyName The name of the property to set.
+     * @param value The value to set. If is undefined, the property will be removed from the storage.
+     */
+    protected setStorageProperty<T>(propertyName: string, value: T | undefined): void;
+    /**
+     * Get a property from the storage.
+     * @param propertyName The name of the property to get.
+     * @param idToUse The id of the instance to get the property. @default this.id
+     * @returns The value of the property. If the property is not found, returns undefined.
+     */
+    protected getStorageProperty<T>(propertyName: string, idToUse?: string): T | undefined;
+}
+
+declare class CachedMap<K extends {}, V extends {}> implements Map<K, V> {
+    readonly cache: LRUCache<K, V>;
+    readonly map: Map<K, V>;
+    constructor(options: {
+        cacheSize: number;
+    });
+    get [Symbol.iterator](): () => MapIterator<[K, V]>;
+    get [Symbol.toStringTag](): string;
+    clear(): void;
+    delete(key: K): boolean;
+    get forEach(): (callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any) => void;
+    get(key: K): V | undefined;
+    has(key: K): boolean;
+    set(key: K, value: V): this;
+    get size(): number;
+    entries(): MapIterator<[K, V]>;
+    keys(): MapIterator<K>;
+    values(): MapIterator<V>;
+}
+
+declare class CharacterStoredClass extends StoredClassModel {
+    private sourceId;
+    constructor(id: string, emotion?: string);
+    getStorageProperty<T>(propertyName: string): T | undefined;
+}
+
+/**
+ * CharacterBaseModel is a class that is used to create a character model.
+ * You must use the {@link RegisteredCharacters.add} function to save the character in the game.
+ * It is raccomended to create your own class Character, read more here: https://pixi-vn.web.app/start/character.html#custom-character
+ * @example
+ * ```typescript
+ * export const liam = new CharacterBaseModel('liam', {
+ *     name: 'Liam',
+ *     surname: 'Smith',
+ *     age: 25,
+ *     icon: "https://pixijs.com/assets/eggHead.png",
+ *     color: "#9e2e12"
+ * });
+ * export const alice = new CharacterBaseModel('alice', {
+ *     name: 'Alice',
+ *     surname: 'Smith',
+ *     age: 25,
+ *     icon: "https://pixijs.com/assets/eggHead.png",
+ *     color: "#9e2e12"
+ * });
+ * RegisteredCharacters.add([liam, alice]);
+ * ```
+ */
+declare class CharacterBaseModel extends CharacterStoredClass {
+    /**
+     * @param id The id of the character.
+     * @param props The properties of the character.
+     */
+    constructor(id: string | {
+        id: string;
+        emotion: string;
+    }, props: CharacterBaseModelProps);
+    private defaultName?;
+    /***
+     * The name of the character.
+     * If you set undefined, it will return the default name.
+     */
+    get name(): string;
+    set name(value: string | undefined);
+    private defaultSurname?;
+    /**
+     * The surname of the character.
+     * If you set undefined, it will return the default surname.
+     */
+    get surname(): string | undefined;
+    set surname(value: string | undefined);
+    private defaultAge?;
+    /**
+     * The age of the character.
+     * If you set undefined, it will return the default age.
+     */
+    get age(): number | undefined;
+    set age(value: number | undefined);
+    private _icon?;
+    /**
+     * The icon of the character.
+     */
+    get icon(): string | undefined;
+    private _color?;
+    /**
+     * The color of the character.
+     */
+    get color(): string | undefined;
+}
+
+declare namespace RegisteredCharacters {
+    /**
+     * is a function that returns the character by the id
+     * @param id is the id of the character
+     * @returns the character
+     * @example
+     * ```typescript
+     * const liam = RegisteredCharacters.get('liam');
+     * ```
+     */
+    function get<T = CharacterInterface$1>(id: string): T | undefined;
+    /**
+     * Is a function that saves the character. If the character already exists, it will be overwritten.
+     * @param character is the character to save
+     * @returns
+     * @example
+     * ```typescript
+     * export const liam = new CharacterBaseModel('liam', { name: 'Liam'});
+     * export const alice = new CharacterBaseModel('alice', { name: 'Alice'});
+     * RegisteredCharacters.add([liam, alice]);
+     * ```
+     */
+    function add(character: CharacterInterface$1 | CharacterInterface$1[]): void;
+    /**
+     * is a function that returns all characters
+     * @returns all characters
+     * @example
+     * ```typescript
+     * const allCharacters = RegisteredCharacters.values();
+     * ```
+     */
+    function values<T extends CharacterInterface$1>(): T[];
+    /**
+     * Check if a character is registered.
+     * @param id is the id of the character
+     * @returns true if the character exists, false otherwise
+     */
+    function has(id: string): boolean;
+}
+
+/**
+ * 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 {@link CharacterStoredClass} class.
+ * You can override this interface to add your own props.
+ * @example
+ * ```typescript
+ * // 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
+ *     }
+ *     private defaultName: string = ""
+ *     get name(): string {
+ *         return this.getStorageProperty<string>("name") || this.defaultName
+ *     }
+ *     set name(value: string | undefined) {
+ *         this.setStorageProperty<string>("name", value)
+ *     }
+ *     private defaultSurname?: string
+ *     get surname(): string | undefined {
+ *         return this.getStorageProperty<string>("surname") || this.defaultSurname
+ *     }
+ *     set surname(value: string | undefined) {
+ *         this.setStorageProperty<string>("surname", value)
+ *     }
+ *     private defaultAge?: number | undefined
+ *     get age(): number | undefined {
+ *         return this.getStorageProperty<number>("age") || this.defaultAge
+ *     }
+ *     set age(value: number | undefined) {
+ *         this.setStorageProperty<number>("age", value)
+ *     }
+ *     private _icon?: string
+ *     get icon(): string | undefined {
+ *         return this._icon
+ *     }
+ *     private _color?: string | undefined
+ *     get color(): string | undefined {
+ *         return this._color
+ *     }
+ * }
+ * ```
+ */
+interface CharacterInterface {
+    /**
+     * The id of the character. It must be unique.
+     */
+    id: string;
+}
+
+type characterUtils_CharacterBaseModel = CharacterBaseModel;
+declare const characterUtils_CharacterBaseModel: typeof CharacterBaseModel;
+type characterUtils_CharacterInterface = CharacterInterface;
+type characterUtils_CharacterStoredClass = CharacterStoredClass;
+declare const characterUtils_CharacterStoredClass: typeof CharacterStoredClass;
+declare const characterUtils_RegisteredCharacters: typeof RegisteredCharacters;
+declare namespace characterUtils {
+  export { characterUtils_CharacterBaseModel as CharacterBaseModel, type characterUtils_CharacterInterface as CharacterInterface, characterUtils_CharacterStoredClass as CharacterStoredClass, characterUtils_RegisteredCharacters as RegisteredCharacters };
+}
+
+var version = "1.3.15";
 
 declare const Repeat: RepeatType;
 /**
@@ -120,208 +3020,168 @@ declare const SYSTEM_RESERVED_STORAGE_KEYS: {
     LAST_STEP_GLUED: string;
 };
 
-declare class GameUnifier {
-    static init(options: {
-        /**
-         * 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.
-         */
-        getStepCounter: () => number;
-        /**
-         * 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.
-         */
-        setStepCounter: (value: number) => void;
-        /**
-         * 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.
-         */
-        getCurrentGameStepState: () => GameStepState;
-        /**
-         * This function restores the game step state.
-         *
-         * If your game engine does not have a history of steps, you can return a resolved promise.
-         *
-         * @param state The state to restore.
-         * @param navigate The function to navigate to the restored path.
-         */
-        restoreGameStepState: (state: GameStepState, navigate: (path: string) => void | Promise<void>) => Promise<void>;
-        /**
-         * This function returns the number of opened labels.
-         *
-         * If your game engine does not have a narration system, you can return 0.
-         */
-        getOpenedLabels: () => number;
-        /**
-         * This function is called after the narration.goNext() method is executed.
-         * It can be used to force the completion of the ticker in the game engine.
-         */
-        onGoNextEnd?: () => Promise<void>;
-        /**
-         * This function returns the value of a variable.
-         * @param key The key of the variable.
-         * @returns The value of the variable.
-         */
-        getVariable: <T extends StorageElementType>(key: string) => T | undefined;
-        /**
-         * This function sets the value of a variable.
-         * @param key The key of the variable.
-         * @param value The value of the variable.
-         */
-        setVariable: (key: string, value: StorageElementType) => void;
-        /**
-         * This function removes a variable.
-         * @param key The key of the variable.
-         */
-        removeVariable: (key: string) => void;
-        /**
-         * This function returns the value of a flag.
-         * @param name The name of the flag.
-         */
-        getFlag: (name: string) => boolean;
-        /**
-         * This function sets the value of a flag.
-         * @param name The name of the flag.
-         * @param value The value of the flag.
-         */
-        setFlag: (name: string, value: boolean) => void;
-        /**
-         * This function is called after the narration.goNext() method is executed.
-         *
-         * It can be used to clear old temporary variables.
-         *
-         * @param openedLabelsNumber The number of opened labels.
-         */
-        onLabelClosing?: (openedLabelsNumber: number) => void;
-        /**
-         * Add a history step to the history.
-         *
-         * If your game engine does not have a history of steps, you can return a resolved promise.
-         *
-         * @param historyInfo The history information.
-         * @param opstions Options to add the step.
-         */
-        addHistoryItem(historyInfo?: HistoryInfo, opstions?: {
-            /**
-             * If true, the step will not be added to the history if the current step is the same as the last step.
-             */
-            ignoreSameStep?: boolean;
-        }): void;
-        /**
-         * This function returns the number of steps that are currently running.
-         */
-        getCurrentStepsRunningNumber: () => number;
-        /**
-         * This function returns the character by its id.
-         * @param id The id of the character.
-         * @returns The character or undefined if it does not exist.
-         */
-        getCharacter: (id: string) => CharacterInterface | undefined;
-    }): void;
-    private static _getStepCounter;
-    private static _setStepCounter;
+/**
+ * is a string containing the name of the label.
+ * It is used to {@link narration.registeredLabels} to get the label class.
+ */
+type LabelIdType = string;
+
+interface DialogueInterface {
     /**
-     * Returns the current step counter. This counter corresponds to the total number of steps that have been executed so far.
+     * The text of the dialogue.
      */
-    static get stepCounter(): number;
+    text: string | string[];
     /**
-     * Returns the current state of the game step.
+     * The id of the character that is speaking.
      */
-    static set stepCounter(value: number);
-    private static _getCurrentGameStepState;
+    character?: CharacterInterface$1 | string;
+}
+type StoredDialogue = Omit<DialogueInterface, "character"> & {
+    character: string | undefined;
+};
+
+interface HistoryStep {
     /**
-     * Returns the current state of the game step.
+     * The difference between the previous step and the current step.
      */
-    static get currentGameStepState(): GameStepState;
-    private static _restoreGameStepState;
+    diff?: deepDiff.Diff<GameStepState, GameStepState>[] | Difference[];
     /**
-     * Restores the game step state.
-     * @param state The state to restore.
-     * @param navigate The function to navigate to the restored path.
+     * The label id of the current step.
      */
-    static get restoreGameStepState(): (state: GameStepState, navigate: (path: string) => void | Promise<void>) => Promise<void>;
-    private static _getOpenedLabels;
+    currentLabel?: LabelIdType;
     /**
-     * Returns the number of opened labels.
+     * The sha1 of the step function.
      */
-    static get openedLabels(): number;
-    private static _onGoNextEnd;
+    stepSha1: string;
     /**
-     * This function is called after the narration.goNext() method is executed.
-     * It can be used to force the completion of the ticker in the game engine.
+     * Equivalent to the narration.stepCounter
      */
-    static get onGoNextEnd(): () => Promise<void>;
-    private static _getVariable;
+    index: number;
     /**
-     * This function returns the value of a variable.
-     * @param key The key of the variable.
-     * @returns The value of the variable.
+     * The data of the step of the label.
      */
-    static get getVariable(): <T extends StorageElementType>(key: string) => T | undefined;
-    private static _setVariable;
+    labelStepIndex: number | null;
     /**
-     * This function sets the value of a variable.
-     * @param key The key of the variable.
-     * @param value The value of the variable.
+     * @deprecated
      */
-    static get setVariable(): (key: string, value: StorageElementType) => void;
-    private static _removeVariable;
+    dialoge?: StoredDialogue;
     /**
-     * This function removes a variable.
-     * @param key The key of the variable.
+     * Dialogue to be shown in the game
      */
-    static get removeVariable(): (key: string) => void;
-    private static _getFlag;
+    dialogue?: StoredDialogue;
     /**
-     * This function returns the value of a flag.
-     * @param name The name of the flag.
+     * List of choices asked of the player
      */
-    static get getFlag(): (name: string) => boolean;
-    private static _setFlag;
+    choices?: StoredChoiceInterface[];
     /**
-     * This function sets the value of a flag.
-     * @param name The name of the flag.
-     * @param value The value of the flag.
+     * List of choices already made by the player
      */
-    static get setFlag(): (name: string, value: boolean) => void;
-    private static _onLabelClosing;
+    alreadyMadeChoices?: number[];
     /**
-     * This function is called after the narration.goNext() method is executed
-     * It can be used to clear old temporary variables.
-     * @param openedLabelsNumber The number of opened labels.
+     * The input value of the player
      */
-    static get onLabelClosing(): (openedLabelsNumber: number) => void;
-    private static _addHistoryItem;
+    inputValue?: StorageElementType$1;
     /**
-     * Add a history step to the history.
-     * @param historyInfo The history information.
-     * @param opstions Options to add the step.
+     * The choice made by the player
      */
-    static get addHistoryItem(): (historyInfo?: HistoryInfo, opstions?: {
-        /**
-         * If true, the step will not be added to the history if the current step is the same as the last step.
-         */
-        ignoreSameStep?: boolean;
-    }) => void;
-    private static _getCurrentStepsRunningNumber;
+    choiceIndexMade?: number;
     /**
-     * Returns the number of steps that are currently running.
+     * If true, the current dialogue will be glued to the previous one.
      */
-    static get currentStepsRunningNumber(): number;
-    private static _getCharacter;
+    isGlued?: boolean;
     /**
-     * This function returns the character by its id.
-     * @param id The id of the character.
-     * @returns The character or undefined if it does not exist.
+     * Opened Labels in the current step.
+     */
+    openedLabels?: OpenedLabel$1[];
+}
+
+interface OpenedLabel {
+    label: LabelIdType;
+    currentStepIndex: number;
+}
+
+/**
+ * Interface exported step data
+ */
+interface HistoryGameState {
+    stepsHistory: HistoryStep[];
+    originalStepData: GameStepState | undefined;
+}
+
+interface GameState {
+    pixivn_version: string;
+    stepData: NarrationGameState;
+    storageData: StorageGameState;
+    canvasData: CanvasGameState;
+    soundData: SoundGameState;
+    historyData: HistoryGameState;
+    path: string;
+}
+
+declare class SoundManagerStatic {
+    private constructor();
+    static soundAliasesOrder: string[];
+    static soundsPlaying: {
+        [key: string]: SoundPlay;
+    };
+    static sounds: {
+        [key: string]: Sound;
+    };
+}
+
+declare const sound: SoundManager;
+
+type soundUtils_ExportedSound = ExportedSound;
+type soundUtils_Sound = Sound;
+declare const soundUtils_Sound: typeof Sound;
+type soundUtils_SoundFilterMemory = SoundFilterMemory;
+type soundUtils_SoundGameState = SoundGameState;
+type soundUtils_SoundManagerStatic = SoundManagerStatic;
+declare const soundUtils_SoundManagerStatic: typeof SoundManagerStatic;
+type soundUtils_SoundOptions = SoundOptions;
+type soundUtils_SoundPlayOptions = SoundPlayOptions;
+declare const soundUtils_sound: typeof sound;
+declare namespace soundUtils {
+  export { type soundUtils_ExportedSound as ExportedSound, soundUtils_Sound as Sound, type soundUtils_SoundFilterMemory as SoundFilterMemory, type soundUtils_SoundGameState as SoundGameState, soundUtils_SoundManagerStatic as SoundManagerStatic, type soundUtils_SoundOptions as SoundOptions, type soundUtils_SoundPlayOptions as SoundPlayOptions, soundUtils_sound as sound };
+}
+
+/**
+ * It is a interface that contains the information of a step.
+ */
+interface GameStepStateData {
+    /**
+     * The browser path that occurred during the progression of the steps.
+     */
+    path: string;
+    /**
+     * The storage that occurred during the progression of the steps.
+     */
+    storage: StorageGameState;
+    /**
+     * The index of the label that occurred during the progression of the steps.
+     */
+    labelIndex: number;
+    /**
+     * The canvas that occurred during the progression of the steps.
+     */
+    canvas: CanvasGameState;
+    /**
+     * The opened labels that occurred during the progression of the steps.
+     */
+    openedLabels: OpenedLabel[];
+    /**
+     * The sound data that occurred during the progression of the steps.
      */
-    static get getCharacter(): (id: string) => CharacterInterface | undefined;
-    static onEnd?: StepLabelType;
-    static onError?: (type: "step", error: any, props: StepLabelPropsType) => void;
+    sound: SoundGameState;
 }
 
+/**
+ * This function is used to create a deep copy of the element
+ * @param element The element to be copied
+ * @returns The copied element
+ */
+declare function createExportableElement<T>(element: T): T;
+
 declare namespace Game {
     /**
      * Initialize the Game and PixiJS Application and the interface div.
@@ -378,7 +3238,7 @@ declare namespace Game {
      * })
      * ```
      */
-    function onEnd(value: StepLabelType): void;
+    function onEnd(value: narrationUtils.StepLabelType): void;
     /**
      * Function to be executed when an error occurs in the step.
      * @example
@@ -389,14 +3249,14 @@ declare namespace Game {
      * })
      * ```
      */
-    function onError(value: (type: "step", error: any, props: StepLabelPropsType) => void): void;
+    function onError(value: (type: "step", error: any, props: narrationUtils.StepLabelPropsType) => void): void;
     /**
      * Is a function that will be executed before any step is executed.
      * @param stepId Step id
      * @param label Label
      * @returns
      */
-    function onStepStart(value: (stepId: number, label: LabelAbstract<any>) => void | Promise<void>): void;
+    function onStepStart(value: (stepId: number, label: narrationUtils.LabelAbstract<any>) => void | Promise<void>): void;
     /**
      * Is a function that will be executed in {@link Game.onStepStart} if the id of the step is 0
      * and when the user laods a save file.
@@ -413,21 +3273,21 @@ declare namespace Game {
      * })
      * ```
      */
-    function onLoadingLabel(value: (stepId: number, label: LabelAbstract<any>) => void | Promise<void>): void;
+    function onLoadingLabel(value: (stepId: number, label: narrationUtils.LabelAbstract<any>) => void | Promise<void>): void;
     /**
      * Is a function that will be executed when the step ends.
      * @param stepId Step id
      * @param label Label
      * @returns
      */
-    function onStepEnd(value: (stepId: number, label: LabelAbstract<any>) => void | Promise<void>): void;
+    function onStepEnd(value: (stepId: number, label: narrationUtils.LabelAbstract<any>) => void | Promise<void>): void;
 }
 declare const _default: {
     canvas: CanvasManagerInterface;
-    narration: NarrationManagerInterface;
+    narration: narrationUtils.NarrationManagerInterface;
     sound: SoundManager;
-    storage: StorageManagerInterface;
-    history: HistoryManagerInterface;
+    storage: storageUtils.StorageManagerInterface;
+    history: historyUtils.HistoryManagerInterface;
     Game: typeof Game;
     GameUnifier: typeof GameUnifier;
     createExportableElement: typeof createExportableElement;
@@ -467,4 +3327,4 @@ declare const _default: {
     PIXIVN_VERSION: string;
 };
 
-export { CANVAS_APP_GAME_LAYER_ALIAS, CanvasManagerInterface, Game, GameState, GameUnifier, HistoryManagerInterface, LabelAbstract, NarrationManagerInterface, version as PIXIVN_VERSION, Pause, PauseType, Repeat, RepeatType, SYSTEM_RESERVED_STORAGE_KEYS, StepLabelPropsType, StepLabelType, StorageElementType, StorageManagerInterface, createExportableElement, _default as default, filters };
+export { type AnimationOptions, type AnimationSequenceOptions, CANVAS_APP_GAME_LAYER_ALIAS, CachedMap, type CanvasBaseInterface, CanvasBaseItem, type CanvasBaseItemMemory, CanvasEvent, type CanvasEventNamesType, type CanvasGameState, type CanvasManagerInterface, CanvasManagerStatic, CharacterBaseModel, type CharacterInterface, CharacterStoredClass, type CommonTickerProps, Container, type ContainerChild, type ContainerMemory, type ExportedSound, FadeAlphaTicker, type FadeAlphaTickerProps, Game, type GameState, type GameStepStateData, ImageContainer, type ImageContainerMemory, type ImageContainerOptions, ImageSprite, type ImageSpriteMemory, type ImageSpriteOptions, type KeyframesType, type Layer, type MoveInOutProps, MoveTicker, type MoveTickerProps, type ObjectSegment, type ObjectSegmentWithTransition, version as PIXIVN_VERSION, Pause, type PauseType, type PushInOutProps, RegisteredCanvasComponents, RegisteredCharacters, RegisteredEvents, RegisteredTickers, Repeat, type RepeatType, RotateTicker, type RotateTickerProps, SYSTEM_RESERVED_STORAGE_KEYS, type SequenceOptions, type ShakeEffectProps, type ShowWithDissolveTransitionProps, type ShowWithFadeTransitionProps, Sound, type SoundFilterMemory, type SoundGameState, SoundManagerStatic, type SoundOptions, type SoundPlayOptions, Sprite, type SpriteBaseMemory, type SpriteMemory, type SpriteOptions, Text, type TextMemory, type TextOptions, type TextureMemory, type Ticker, type TickerArgs, TickerBase, type TickerHistory, type TickerInfo, type TickerProgrationExponential, type TickerProgrationLinear, type TickerProgrationType, type TickerTimeoutHistory, type TickersSequence, VideoSprite, type VideoSpriteMemory, type VideoSpriteOptions, type ZoomInOutProps, ZoomTicker, type ZoomTickerProps, addImage, addImageCointainer, addVideo, animate, canvas, canvasComponentDecorator, createExportableElement, _default as default, eventDecorator, filters, getTexture, moveIn, moveOut, pushIn, pushOut, removeWithDissolve, removeWithFade, shakeEffect, showImage, showImageContainer, showVideo, showWithDissolve, showWithFade, sound, tickerDecorator, zoomIn, zoomOut };