@drincs/pixi-vn 0.9.7 → 0.9.9

package/dist/functions/canvas/canvas-transition.cjs

@@ -2504,22 +2504,25 @@ var init_Rectangle = __esm({
        * @param x - The X coordinate of the point to test
        * @param y - The Y coordinate of the point to test
        * @param strokeWidth - The width of the line to check
+       * @param alignment - The alignment of the stroke, 0.5 by default
        * @returns Whether the x/y coordinates are within this rectangle
        */
-      strokeContains(x2, y2, strokeWidth) {
+      strokeContains(x2, y2, strokeWidth, alignment = 0.5) {
         const { width, height } = this;
         if (width <= 0 || height <= 0)
           return false;
         const _x = this.x;
         const _y = this.y;
-        const outerLeft = _x - strokeWidth / 2;
-        const outerRight = _x + width + strokeWidth / 2;
-        const outerTop = _y - strokeWidth / 2;
-        const outerBottom = _y + height + strokeWidth / 2;
-        const innerLeft = _x + strokeWidth / 2;
-        const innerRight = _x + width - strokeWidth / 2;
-        const innerTop = _y + strokeWidth / 2;
-        const innerBottom = _y + height - strokeWidth / 2;
+        const strokeWidthOuter = strokeWidth * (1 - alignment);
+        const strokeWidthInner = strokeWidth - strokeWidthOuter;
+        const outerLeft = _x - strokeWidthOuter;
+        const outerRight = _x + width + strokeWidthOuter;
+        const outerTop = _y - strokeWidthOuter;
+        const outerBottom = _y + height + strokeWidthOuter;
+        const innerLeft = _x + strokeWidthInner;
+        const innerRight = _x + width - strokeWidthInner;
+        const innerTop = _y + strokeWidthInner;
+        const innerBottom = _y + height - strokeWidthInner;
         return x2 >= outerLeft && x2 <= outerRight && y2 >= outerTop && y2 <= outerBottom && !(x2 > innerLeft && x2 < innerRight && y2 > innerTop && y2 < innerBottom);
       }
       /**
@@ -3653,24 +3656,22 @@ var init_toLocalGlobalMixin = __esm({
 });
 
 // node_modules/pixi.js/lib/rendering/renderers/shared/instructions/InstructionSet.mjs
-var _tick, InstructionSet;
+var InstructionSet;
 var init_InstructionSet = __esm({
   "node_modules/pixi.js/lib/rendering/renderers/shared/instructions/InstructionSet.mjs"() {
     "use strict";
     init_uid();
-    _tick = 0;
     InstructionSet = class {
       constructor() {
         this.uid = uid("instructionSet");
         this.instructions = [];
         this.instructionSize = 0;
         this.renderables = [];
-        this.tick = 0;
+        this.gcTick = 0;
       }
       /** reset the instruction set so it can be reused set size back to 0 */
       reset() {
         this.instructionSize = 0;
-        this.tick = _tick++;
       }
       /**
        * Add an instruction to the set
@@ -4843,6 +4844,7 @@ var init_RenderGroup = __esm({
         this.worldAlpha = 1;
         this.childrenToUpdate = /* @__PURE__ */ Object.create(null);
         this.updateTick = 0;
+        this.gcTick = 0;
         this.childrenRenderablesToUpdate = { list: [], index: 0 };
         this.structureDidChange = true;
         this.instructionSet = new InstructionSet();
@@ -4858,7 +4860,9 @@ var init_RenderGroup = __esm({
         root.didChange = true;
         const children = root.children;
         for (let i3 = 0; i3 < children.length; i3++) {
-          this.addChild(children[i3]);
+          const child = children[i3];
+          child._updateFlags = 15;
+          this.addChild(child);
         }
       }
       enableCacheAsTexture(options = {}) {
@@ -10793,8 +10797,7 @@ var init_ViewContainer = __esm({
         this.canBundle = true;
         this.allowChildren = false;
         this._roundPixels = 0;
-        this._lastUsed = 0;
-        this._lastInstructionTick = -1;
+        this._lastUsed = -1;
         this._bounds = new Bounds(0, 1, 0, 0);
         this._boundsDirty = true;
       }
@@ -18125,17 +18128,18 @@ var init_Circle = __esm({
        * @param x - The X coordinate of the point to test
        * @param y - The Y coordinate of the point to test
        * @param width - The width of the line to check
+       * @param alignment - The alignment of the stroke, 0.5 by default
        * @returns Whether the x/y coordinates are within this Circle
        */
-      strokeContains(x2, y2, width) {
+      strokeContains(x2, y2, width, alignment = 0.5) {
         if (this.radius === 0)
           return false;
         const dx = this.x - x2;
         const dy = this.y - y2;
-        const r2 = this.radius;
-        const w2 = width / 2;
+        const radius = this.radius;
+        const outerWidth = (1 - alignment) * width;
         const distance = Math.sqrt(dx * dx + dy * dy);
-        return distance < r2 + w2 && distance > r2 - w2;
+        return distance <= radius + outerWidth && distance > radius - (width - outerWidth);
       }
       /**
        * Returns the framing rectangle of the circle as a Rectangle object
@@ -18224,23 +18228,25 @@ var init_Ellipse = __esm({
        * Checks whether the x and y coordinates given are contained within this ellipse including stroke
        * @param x - The X coordinate of the point to test
        * @param y - The Y coordinate of the point to test
-       * @param width
+       * @param strokeWidth - The width of the line to check
+       * @param alignment - The alignment of the stroke
        * @returns Whether the x/y coords are within this ellipse
        */
-      strokeContains(x2, y2, width) {
+      strokeContains(x2, y2, strokeWidth, alignment = 0.5) {
         const { halfWidth, halfHeight } = this;
         if (halfWidth <= 0 || halfHeight <= 0) {
           return false;
         }
-        const halfStrokeWidth = width / 2;
-        const innerA = halfWidth - halfStrokeWidth;
-        const innerB = halfHeight - halfStrokeWidth;
-        const outerA = halfWidth + halfStrokeWidth;
-        const outerB = halfHeight + halfStrokeWidth;
+        const strokeOuterWidth = strokeWidth * (1 - alignment);
+        const strokeInnerWidth = strokeWidth - strokeOuterWidth;
+        const innerHorizontal = halfWidth - strokeInnerWidth;
+        const innerVertical = halfHeight - strokeInnerWidth;
+        const outerHorizontal = halfWidth + strokeOuterWidth;
+        const outerVertical = halfHeight + strokeOuterWidth;
         const normalizedX = x2 - this.x;
         const normalizedY = y2 - this.y;
-        const innerEllipse = normalizedX * normalizedX / (innerA * innerA) + normalizedY * normalizedY / (innerB * innerB);
-        const outerEllipse = normalizedX * normalizedX / (outerA * outerA) + normalizedY * normalizedY / (outerB * outerB);
+        const innerEllipse = normalizedX * normalizedX / (innerHorizontal * innerHorizontal) + normalizedY * normalizedY / (innerVertical * innerVertical);
+        const outerEllipse = normalizedX * normalizedX / (outerHorizontal * outerHorizontal) + normalizedY * normalizedY / (outerVertical * outerVertical);
         return innerEllipse > 1 && outerEllipse <= 1;
       }
       /**
@@ -18382,11 +18388,13 @@ var init_Polygon = __esm({
        * @param x - The X coordinate of the point to test
        * @param y - The Y coordinate of the point to test
        * @param strokeWidth - The width of the line to check
+       * @param alignment - The alignment of the stroke, 0.5 by default
        * @returns Whether the x/y coordinates are within this polygon
        */
-      strokeContains(x2, y2, strokeWidth) {
-        const halfStrokeWidth = strokeWidth / 2;
-        const halfStrokeWidthSqrd = halfStrokeWidth * halfStrokeWidth;
+      strokeContains(x2, y2, strokeWidth, alignment = 0.5) {
+        const strokeWidthSquared = strokeWidth * strokeWidth;
+        const rightWidthSquared = strokeWidthSquared * (1 - alignment);
+        const leftWidthSquared = strokeWidthSquared - rightWidthSquared;
         const { points } = this;
         const iterationLength = points.length - (this.closePath ? 0 : 2);
         for (let i3 = 0; i3 < iterationLength; i3 += 2) {
@@ -18394,8 +18402,9 @@ var init_Polygon = __esm({
           const y1 = points[i3 + 1];
           const x22 = points[(i3 + 2) % points.length];
           const y22 = points[(i3 + 3) % points.length];
-          const distanceSqrd = squaredDistanceToLineSegment(x2, y2, x1, y1, x22, y22);
-          if (distanceSqrd <= halfStrokeWidthSqrd) {
+          const distanceSquared = squaredDistanceToLineSegment(x2, y2, x1, y1, x22, y22);
+          const sign = Math.sign((x22 - x1) * (y2 - y1) - (y22 - y1) * (x2 - x1));
+          if (distanceSquared <= (sign < 0 ? leftWidthSquared : rightWidthSquared)) {
             return true;
           }
         }
@@ -18487,11 +18496,11 @@ var init_RoundedRectangle = __esm({
   "node_modules/pixi.js/lib/maths/shapes/RoundedRectangle.mjs"() {
     "use strict";
     init_Rectangle();
-    isCornerWithinStroke = (pX, pY, cornerX, cornerY, radius, halfStrokeWidth) => {
+    isCornerWithinStroke = (pX, pY, cornerX, cornerY, radius, strokeWidthInner, strokeWidthOuter) => {
       const dx = pX - cornerX;
       const dy = pY - cornerY;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      return distance >= radius - halfStrokeWidth && distance <= radius + halfStrokeWidth;
+      return distance >= radius - strokeWidthInner && distance <= radius + strokeWidthOuter;
     };
     RoundedRectangle = class _RoundedRectangle {
       /**
@@ -18593,26 +18602,60 @@ var init_RoundedRectangle = __esm({
        * @param pX - The X coordinate of the point to test
        * @param pY - The Y coordinate of the point to test
        * @param strokeWidth - The width of the line to check
+       * @param alignment - The alignment of the stroke, 0.5 by default
        * @returns Whether the x/y coordinates are within this rectangle
        */
-      strokeContains(pX, pY, strokeWidth) {
+      strokeContains(pX, pY, strokeWidth, alignment = 0.5) {
         const { x: x2, y: y2, width, height, radius } = this;
-        const halfStrokeWidth = strokeWidth / 2;
+        const strokeWidthOuter = strokeWidth * (1 - alignment);
+        const strokeWidthInner = strokeWidth - strokeWidthOuter;
         const innerX = x2 + radius;
         const innerY = y2 + radius;
         const innerWidth = width - radius * 2;
         const innerHeight = height - radius * 2;
         const rightBound = x2 + width;
         const bottomBound = y2 + height;
-        if ((pX >= x2 - halfStrokeWidth && pX <= x2 + halfStrokeWidth || pX >= rightBound - halfStrokeWidth && pX <= rightBound + halfStrokeWidth) && pY >= innerY && pY <= innerY + innerHeight) {
+        if ((pX >= x2 - strokeWidthOuter && pX <= x2 + strokeWidthInner || pX >= rightBound - strokeWidthInner && pX <= rightBound + strokeWidthOuter) && pY >= innerY && pY <= innerY + innerHeight) {
           return true;
         }
-        if ((pY >= y2 - halfStrokeWidth && pY <= y2 + halfStrokeWidth || pY >= bottomBound - halfStrokeWidth && pY <= bottomBound + halfStrokeWidth) && pX >= innerX && pX <= innerX + innerWidth) {
+        if ((pY >= y2 - strokeWidthOuter && pY <= y2 + strokeWidthInner || pY >= bottomBound - strokeWidthInner && pY <= bottomBound + strokeWidthOuter) && pX >= innerX && pX <= innerX + innerWidth) {
           return true;
         }
         return (
           // Top-left
-          pX < innerX && pY < innerY && isCornerWithinStroke(pX, pY, innerX, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY < innerY && isCornerWithinStroke(pX, pY, rightBound - radius, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, rightBound - radius, bottomBound - radius, radius, halfStrokeWidth) || pX < innerX && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, innerX, bottomBound - radius, radius, halfStrokeWidth)
+          pX < innerX && pY < innerY && isCornerWithinStroke(
+            pX,
+            pY,
+            innerX,
+            innerY,
+            radius,
+            strokeWidthInner,
+            strokeWidthOuter
+          ) || pX > rightBound - radius && pY < innerY && isCornerWithinStroke(
+            pX,
+            pY,
+            rightBound - radius,
+            innerY,
+            radius,
+            strokeWidthInner,
+            strokeWidthOuter
+          ) || pX > rightBound - radius && pY > bottomBound - radius && isCornerWithinStroke(
+            pX,
+            pY,
+            rightBound - radius,
+            bottomBound - radius,
+            radius,
+            strokeWidthInner,
+            strokeWidthOuter
+          ) || pX < innerX && pY > bottomBound - radius && isCornerWithinStroke(
+            pX,
+            pY,
+            innerX,
+            bottomBound - radius,
+            radius,
+            strokeWidthInner,
+            strokeWidthOuter
+          )
         );
       }
       toString() {
@@ -19446,7 +19489,7 @@ var init_ShapePath = __esm({
         const delta = Math.PI * 2 / sides;
         const polygon = [];
         for (let i3 = 0; i3 < sides; i3++) {
-          const angle = i3 * delta + startAngle;
+          const angle = startAngle - i3 * delta;
           polygon.push(
             x2 + radius * Math.cos(angle),
             y2 + radius * Math.sin(angle)
@@ -21146,13 +21189,13 @@ var init_GraphicsContext = __esm({
           if (action === "stroke") {
             const data = instruction.data;
             const alignment = data.style.alignment;
-            const padding = data.style.width * (1 - alignment);
+            const outerPadding = data.style.width * (1 - alignment);
             const _bounds = data.path.bounds;
             bounds.addFrame(
-              _bounds.minX - padding,
-              _bounds.minY - padding,
-              _bounds.maxX + padding,
-              _bounds.maxY + padding
+              _bounds.minX - outerPadding,
+              _bounds.minY - outerPadding,
+              _bounds.maxX + outerPadding,
+              _bounds.maxY + outerPadding
             );
           }
         }
@@ -21185,7 +21228,8 @@ var init_GraphicsContext = __esm({
             if (instruction.action === "fill") {
               hasHit = shape.contains(transformedPoint.x, transformedPoint.y);
             } else {
-              hasHit = shape.strokeContains(transformedPoint.x, transformedPoint.y, style.width);
+              const strokeStyle = style;
+              hasHit = shape.strokeContains(transformedPoint.x, transformedPoint.y, strokeStyle.width, strokeStyle.alignment);
             }
             const holes = data.hole;
             if (holes) {
@@ -29041,7 +29085,7 @@ function collectAllRenderablesSimple(container, instructionSet, renderer) {
     renderPipes3.blendMode.setBlendMode(renderable, container.groupBlendMode, instructionSet);
     const rp = renderPipes3;
     rp[renderable.renderPipeId].addRenderable(renderable, instructionSet);
-    renderableGC.addRenderable(renderable, instructionSet);
+    renderableGC.addRenderable(renderable);
     renderable.didViewUpdate = false;
   }
   if (!container.renderGroup) {
@@ -29068,7 +29112,7 @@ function collectAllRenderablesAdvanced(container, instructionSet, renderer, isRo
       renderPipes3.blendMode.setBlendMode(renderable, renderable.groupBlendMode, instructionSet);
       const pipe = renderPipes3[renderPipeId];
       pipe.addRenderable(renderable, instructionSet);
-      renderableGC.addRenderable(renderable, instructionSet);
+      renderableGC.addRenderable(renderable);
       renderable.didViewUpdate = false;
     }
     const children = container.children;
@@ -29467,7 +29511,7 @@ var init_const8 = __esm({
     "use strict";
     init_eventemitter3();
     DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;charset=([\w-]+))?(?:;(base64))?,(.*)/i;
-    VERSION = "8.6.4";
+    VERSION = "8.6.6";
   }
 });
 
@@ -30900,29 +30944,46 @@ var init_clean = __esm({
 });
 
 // node_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.mjs
-var _RenderableGCSystem, RenderableGCSystem;
+var renderableGCTick, _RenderableGCSystem, RenderableGCSystem;
 var init_RenderableGCSystem = __esm({
   "node_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.mjs"() {
     "use strict";
     init_Extensions();
     init_clean();
+    renderableGCTick = 0;
     _RenderableGCSystem = class _RenderableGCSystem2 {
-      /** @param renderer - The renderer this System works for. */
+      /**
+       * Creates a new RenderableGCSystem instance.
+       * @param renderer - The renderer this garbage collection system works for
+       */
       constructor(renderer) {
         this._managedRenderables = [];
         this._managedHashes = [];
         this._managedArrays = [];
         this._renderer = renderer;
       }
+      /**
+       * Initializes the garbage collection system with the provided options.
+       * @param options - Configuration options for the renderer
+       */
       init(options) {
         options = { ..._RenderableGCSystem2.defaultOptions, ...options };
         this.maxUnusedTime = options.renderableGCMaxUnusedTime;
         this._frequency = options.renderableGCFrequency;
         this.enabled = options.renderableGCActive;
       }
+      /**
+       * Gets whether the garbage collection system is currently enabled.
+       * @returns True if GC is enabled, false otherwise
+       */
       get enabled() {
         return !!this._handler;
       }
+      /**
+       * Enables or disables the garbage collection system.
+       * When enabled, schedules periodic cleanup of resources.
+       * When disabled, cancels all scheduled cleanups.
+       */
       set enabled(value) {
         if (this.enabled === value)
           return;
@@ -30954,28 +31015,53 @@ var init_RenderableGCSystem = __esm({
           this._renderer.scheduler.cancel(this._arrayHandler);
         }
       }
+      /**
+       * Adds a hash table to be managed by the garbage collector.
+       * @param context - The object containing the hash table
+       * @param hash - The property name of the hash table
+       */
       addManagedHash(context2, hash) {
         this._managedHashes.push({ context: context2, hash });
       }
+      /**
+       * Adds an array to be managed by the garbage collector.
+       * @param context - The object containing the array
+       * @param hash - The property name of the array
+       */
       addManagedArray(context2, hash) {
         this._managedArrays.push({ context: context2, hash });
       }
-      prerender() {
+      /**
+       * Updates the GC timestamp and tracking before rendering.
+       * @param options - The render options
+       * @param options.container - The container to render
+       */
+      prerender({
+        container
+      }) {
         this._now = performance.now();
+        container.renderGroup.gcTick = renderableGCTick++;
+        this._updateInstructionGCTick(container.renderGroup, container.renderGroup.gcTick);
       }
-      addRenderable(renderable, instructionSet) {
+      /**
+       * Starts tracking a renderable for garbage collection.
+       * @param renderable - The renderable to track
+       */
+      addRenderable(renderable) {
         if (!this.enabled)
           return;
-        renderable._lastUsed = this._now;
-        if (renderable._lastInstructionTick === -1) {
+        if (renderable._lastUsed === -1) {
           this._managedRenderables.push(renderable);
           renderable.once("destroyed", this._removeRenderable, this);
         }
-        renderable._lastInstructionTick = instructionSet.tick;
+        renderable._lastUsed = this._now;
       }
-      /** Runs the scheduled garbage collection */
+      /**
+       * Performs garbage collection by cleaning up unused renderables.
+       * Removes renderables that haven't been used for longer than maxUnusedTime.
+       */
       run() {
-        const now = performance.now();
+        const now = this._now;
         const managedRenderables = this._managedRenderables;
         const renderPipes3 = this._renderer.renderPipes;
         let offset = 0;
@@ -30986,13 +31072,18 @@ var init_RenderableGCSystem = __esm({
             continue;
           }
           const renderGroup = renderable.renderGroup ?? renderable.parentRenderGroup;
-          const currentIndex = renderGroup?.instructionSet?.tick ?? -1;
-          if (renderable._lastInstructionTick !== currentIndex && now - renderable._lastUsed > this.maxUnusedTime) {
+          const currentTick = renderGroup?.instructionSet?.gcTick ?? -1;
+          if ((renderGroup?.gcTick ?? 0) === currentTick) {
+            renderable._lastUsed = now;
+          }
+          if (now - renderable._lastUsed > this.maxUnusedTime) {
             if (!renderable.destroyed) {
               const rp = renderPipes3;
+              if (renderGroup)
+                renderGroup.structureDidChange = true;
               rp[renderable.renderPipeId].destroyRenderable(renderable);
             }
-            renderable._lastInstructionTick = -1;
+            renderable._lastUsed = -1;
             offset++;
             renderable.off("destroyed", this._removeRenderable, this);
           } else {
@@ -31001,6 +31092,7 @@ var init_RenderableGCSystem = __esm({
         }
         managedRenderables.length -= offset;
       }
+      /** Cleans up the garbage collection system. Disables GC and removes all tracked resources. */
       destroy() {
         this.enabled = false;
         this._renderer = null;
@@ -31008,6 +31100,10 @@ var init_RenderableGCSystem = __esm({
         this._managedHashes.length = 0;
         this._managedArrays.length = 0;
       }
+      /**
+       * Removes a renderable from being tracked when it's destroyed.
+       * @param renderable - The renderable to stop tracking
+       */
       _removeRenderable(renderable) {
         const index = this._managedRenderables.indexOf(renderable);
         if (index >= 0) {
@@ -31015,6 +31111,17 @@ var init_RenderableGCSystem = __esm({
           this._managedRenderables[index] = null;
         }
       }
+      /**
+       * Updates the GC tick counter for a render group and its children.
+       * @param renderGroup - The render group to update
+       * @param gcTick - The new tick value
+       */
+      _updateInstructionGCTick(renderGroup, gcTick) {
+        renderGroup.instructionSet.gcTick = gcTick;
+        for (const child of renderGroup.renderGroupChildren) {
+          this._updateInstructionGCTick(child, gcTick);
+        }
+      }
     };
     _RenderableGCSystem.extension = {
       type: [
@@ -31025,20 +31132,11 @@ var init_RenderableGCSystem = __esm({
       priority: 0
     };
     _RenderableGCSystem.defaultOptions = {
-      /**
-       * If set to true, this will enable the garbage collector on the GPU.
-       * @default true
-       */
+      /** Enable/disable the garbage collector */
       renderableGCActive: true,
-      /**
-       * The maximum idle frames before a texture is destroyed by garbage collection.
-       * @default 60 * 60
-       */
+      /** Time in ms before an unused resource is collected (default 1 minute) */
       renderableGCMaxUnusedTime: 6e4,
-      /**
-       * Frames between two garbage collections.
-       * @default 600
-       */
+      /** How often to run garbage collection in ms (default 30 seconds) */
       renderableGCFrequency: 3e4
     };
     RenderableGCSystem = _RenderableGCSystem;
@@ -39533,7 +39631,7 @@ var init_loadWebFont = __esm({
       },
       unload(font) {
         (Array.isArray(font) ? font : [font]).forEach((t2) => {
-          Cache.remove(t2.family);
+          Cache.remove(`${t2.family}-and-url`);
           DOMAdapter.get().getFontFaceSet().delete(t2);
         });
       }
@@ -49240,9 +49338,10 @@ var init_Triangle = __esm({
        * @param pointX - The X coordinate of the point to test
        * @param pointY - The Y coordinate of the point to test
        * @param strokeWidth - The width of the line to check
+       * @param _alignment - The alignment of the stroke
        * @returns Whether the x/y coordinates are within this triangle
        */
-      strokeContains(pointX, pointY, strokeWidth) {
+      strokeContains(pointX, pointY, strokeWidth, _alignment = 0.5) {
         const halfStrokeWidth = strokeWidth / 2;
         const halfStrokeWidthSquared = halfStrokeWidth * halfStrokeWidth;
         const { x: x2, x2: x22, x3, y: y2, y2: y22, y3 } = this;
@@ -57729,7 +57828,7 @@ extensions.add(soundAsset);
 var sound = setInstance(new SoundLibrary());
 
 // package.json
-var version = "0.9.7";
+var version = "0.9.9";
 
 // src/constants.ts
 var Repeat = "repeat";
@@ -57861,6 +57960,79 @@ var CANVAS_VIDEO_ID = "Video";
 // src/classes/canvas/ImageSprite.ts
 init_lib();
 
+// src/functions/texture-utility.ts
+init_lib();
+async function getTexture(textureAlias) {
+  if (textureAlias === "EMPTY") {
+    return;
+  }
+  if (!textureAlias) {
+    console.error("[Pixi\u2019VN] Texture not found", textureAlias);
+    return;
+  }
+  if (Assets.cache.has(textureAlias)) {
+    let texture = Assets.get(textureAlias);
+    if (texture) {
+      return texture;
+    }
+  }
+  return Assets.load(textureAlias).then((texture) => {
+    if (!texture) {
+      console.error("[Pixi\u2019VN] Texture not found", textureAlias);
+      return;
+    }
+    if (!(texture instanceof Texture)) {
+      console.error("[Pixi\u2019VN] File not is a file", textureAlias);
+      return;
+    }
+    return texture;
+  }).catch((e2) => {
+    console.error("[Pixi\u2019VN] Error loading file", e2);
+    return;
+  });
+}
+function getFillGradientFillPattern(prop, propName) {
+  if (!(prop instanceof Object)) {
+    return prop;
+  }
+  console.warn(`[Pixi\u2019VN] Text.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop);
+  return void 0;
+}
+function getTextStyle(style) {
+  return {
+    align: style.align,
+    breakWords: style.breakWords,
+    dropShadow: style.dropShadow,
+    fill: getFillGradientFillPattern(style.stroke, "fill"),
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSize,
+    fontStyle: style.fontStyle,
+    fontVariant: style.fontVariant,
+    fontWeight: style.fontWeight,
+    leading: style.leading,
+    letterSpacing: style.letterSpacing,
+    lineHeight: style.lineHeight,
+    padding: style.padding,
+    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
+    textBaseline: style.textBaseline,
+    trim: style.trim,
+    whiteSpace: style.whiteSpace,
+    wordWrap: style.wordWrap,
+    wordWrapWidth: style.wordWrapWidth
+  };
+}
+function checkIfTextureNotIsEmpty(element) {
+  if ((element instanceof ImageSprite || element instanceof ImageContainer) && element.haveEmptyTexture) {
+    return false;
+  } else if (element instanceof Sprite && element.texture?.label == "EMPTY") {
+    return false;
+  }
+  return true;
+}
+
+// src/classes/canvas/AdditionalPositions.ts
+init_lib();
+
 // src/index.ts
 init_lib();
 
@@ -57886,7 +58058,7 @@ function getCanvasElementInstanceById(canvasId) {
     let eventType = registeredCanvasElement[canvasId];
     if (!eventType) {
       if (canvasId === CANVAS_CONTAINER_ID) {
-        eventType = Container2;
+        eventType = Container3;
       } else if (canvasId === CANVAS_VIDEO_ID) {
         eventType = VideoSprite;
       } else if (canvasId === CANVAS_IMAGE_ID) {
@@ -58025,76 +58197,6 @@ function geTickerInstanceById(tickerId, args, duration, priority) {
   }
 }
 
-// src/functions/texture-utility.ts
-init_lib();
-async function getTexture(textureAlias) {
-  if (textureAlias === "EMPTY") {
-    return;
-  }
-  if (!textureAlias) {
-    console.error("[Pixi\u2019VN] Texture not found", textureAlias);
-    return;
-  }
-  if (Assets.cache.has(textureAlias)) {
-    let texture = Assets.get(textureAlias);
-    if (texture) {
-      return texture;
-    }
-  }
-  return Assets.load(textureAlias).then((texture) => {
-    if (!texture) {
-      console.error("[Pixi\u2019VN] Texture not found", textureAlias);
-      return;
-    }
-    if (!(texture instanceof Texture)) {
-      console.error("[Pixi\u2019VN] File not is a file", textureAlias);
-      return;
-    }
-    return texture;
-  }).catch((e2) => {
-    console.error("[Pixi\u2019VN] Error loading file", e2);
-    return;
-  });
-}
-function getFillGradientFillPattern(prop, propName) {
-  if (!(prop instanceof Object)) {
-    return prop;
-  }
-  console.warn(`[Pixi\u2019VN] Text.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop);
-  return void 0;
-}
-function getTextStyle(style) {
-  return {
-    align: style.align,
-    breakWords: style.breakWords,
-    dropShadow: style.dropShadow,
-    fill: getFillGradientFillPattern(style.stroke, "fill"),
-    fontFamily: style.fontFamily,
-    fontSize: style.fontSize,
-    fontStyle: style.fontStyle,
-    fontVariant: style.fontVariant,
-    fontWeight: style.fontWeight,
-    leading: style.leading,
-    letterSpacing: style.letterSpacing,
-    lineHeight: style.lineHeight,
-    padding: style.padding,
-    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
-    textBaseline: style.textBaseline,
-    trim: style.trim,
-    whiteSpace: style.whiteSpace,
-    wordWrap: style.wordWrap,
-    wordWrapWidth: style.wordWrapWidth
-  };
-}
-function checkIfTextureNotIsEmpty(element) {
-  if ((element instanceof ImageSprite || element instanceof ImageContainer) && element.haveEmptyTexture) {
-    return false;
-  } else if (element instanceof Sprite && element.texture?.label == "EMPTY") {
-    return false;
-  }
-  return true;
-}
-
 // src/managers/CanvasManager.ts
 init_lib();
 
@@ -58116,7 +58218,7 @@ async function importCanvasElement(memory) {
 }
 
 // src/classes/canvas/Container.ts
-var Container2 = class extends Container {
+var Container3 = class extends Container {
   constructor(options) {
     super(options);
     this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID;
@@ -58222,58 +58324,7 @@ async function setMemoryContainer(element, memory, opstions) {
 
 // src/classes/canvas/ImageContainer.ts
 init_lib();
-
-// src/classes/canvas/AdditionalPositions.ts
-init_lib();
-function analizePositionsExtensionProps(props) {
-  if (!props) {
-    return props;
-  }
-  if (typeof props.align !== "number") {
-    if (props.xAlign != void 0) {
-      if (props.align === void 0) {
-        props.align = { x: props.xAlign };
-        delete props.xAlign;
-      } else {
-        props.align.x = props.xAlign;
-        delete props.xAlign;
-      }
-    }
-    if (props.yAlign != void 0) {
-      if (props.align === void 0) {
-        props.align = { y: props.yAlign };
-        delete props.yAlign;
-      } else {
-        props.align.y = props.yAlign;
-        delete props.yAlign;
-      }
-    }
-  }
-  if (typeof props.percentagePosition !== "number") {
-    if (props.xPercentagePosition != void 0) {
-      if (props.percentagePosition === void 0) {
-        props.percentagePosition = { x: props.xPercentagePosition };
-        delete props.xPercentagePosition;
-      } else {
-        props.percentagePosition.x = props.xPercentagePosition;
-        delete props.xPercentagePosition;
-      }
-    }
-    if (props.yPercentagePosition != void 0) {
-      if (props.percentagePosition === void 0) {
-        props.percentagePosition = { y: props.yPercentagePosition };
-        delete props.yPercentagePosition;
-      } else {
-        props.percentagePosition.y = props.yPercentagePosition;
-        delete props.yPercentagePosition;
-      }
-    }
-  }
-  return props;
-}
-
-// src/classes/canvas/ImageContainer.ts
-var ImageContainer = class extends Container2 {
+var ImageContainer = class extends Container3 {
   constructor(options, textureAliases = []) {
     super(options);
     options = analizePositionsExtensionProps(options);
@@ -58441,17 +58492,17 @@ var ImageContainer = class extends Container2 {
   reloadPosition() {
     if (this._align) {
       if (this._align.x !== void 0) {
-        super.x = this._align.x * (canvas.screen.width - this.width) + this.pivot.x;
+        super.x = calculateAlign("width", this._align.x, this.width, this.pivot.x);
       }
       if (this._align.y !== void 0) {
-        super.y = this._align.y * (canvas.screen.height - this.height) + this.pivot.y;
+        super.y = calculateAlign("height", this._align.y, this.height, this.pivot.y);
       }
     } else if (this._percentagePosition) {
       if (this._percentagePosition.x !== void 0) {
-        super.x = this._percentagePosition.x * canvas.screen.width;
+        super.x = calculatePercentagePosition("width", this._percentagePosition.x);
       }
       if (this._percentagePosition.y !== void 0) {
-        super.y = this._percentagePosition.y * canvas.screen.height;
+        super.y = calculatePercentagePosition("height", this._percentagePosition.y);
       }
     }
   }
@@ -58598,15 +58649,15 @@ function checkIfVideo(imageUrl) {
 }
 
 // src/functions/canvas/image-container-utility.ts
-function addImageCointainer(alias, imageUrls) {
-  let container = new ImageContainer(void 0, imageUrls);
+function addImageCointainer(alias, imageUrls, options) {
+  let container = new ImageContainer(options, imageUrls);
   canvas.add(alias, container);
   return container;
 }
 
 // src/functions/canvas/image-utility.ts
 init_lib();
-function addImage(alias, imageUrl) {
+function addImage(alias, imageUrl, options) {
   if (!imageUrl) {
     if (Assets.resolver.hasKey(alias)) {
       imageUrl = alias;
@@ -58614,8 +58665,7 @@ function addImage(alias, imageUrl) {
       throw new Error(`The image ${alias} does not exist in the cache.`);
     }
   }
-  let image = new ImageSprite();
-  image.textureAlias = imageUrl;
+  let image = new ImageSprite(options, imageUrl);
   canvas.add(alias, image);
   return image;
 }
@@ -58638,15 +58688,23 @@ async function loadImage(canvasImages) {
     });
   });
 }
-async function showImage(alias, imageUrl) {
-  let image = addImage(alias, imageUrl);
+async function showImage(alias, imageUrl, options) {
+  if (!imageUrl) {
+    if (Assets.resolver.hasKey(alias)) {
+      imageUrl = alias;
+    } else {
+      throw new Error(`The image ${alias} does not exist in the cache.`);
+    }
+  }
+  let image = new ImageSprite(options, imageUrl);
   await image.load();
+  canvas.add(alias, image);
   return image;
 }
 
 // src/functions/canvas/video-utility.ts
 init_lib();
-function addVideo(alias, videoUrl) {
+function addVideo(alias, videoUrl, options) {
   if (!videoUrl) {
     if (Assets.resolver.hasKey(alias)) {
       videoUrl = alias;
@@ -58654,8 +58712,7 @@ function addVideo(alias, videoUrl) {
       throw new Error(`The video ${alias} does not exist in the cache.`);
     }
   }
-  let video = new VideoSprite();
-  video.textureAlias = videoUrl;
+  let video = new VideoSprite(options, videoUrl);
   canvas.add(alias, video);
   return video;
 }
@@ -58803,27 +58860,30 @@ function getMemorySprite(element) {
   };
 }
 async function setMemorySprite(element, memory, options) {
+  let ignoreTexture = options?.ignoreTexture || false;
   await setMemoryContainer(element, memory);
-  if ("textureImage" in memory && memory.textureImage && memory.textureImage.image) {
-    let texture = await getTexture(memory.textureImage.image);
-    if (texture) {
-      element.texture = texture;
-    }
-  }
-  if ("textureData" in memory) {
-    if (memory.textureData.alias) {
-      element.textureAlias = memory.textureData.alias;
-    }
-    if (memory.textureData.url !== "EMPTY") {
-      let textureUrl = memory.textureData.url;
-      if (memory.textureData.alias && Assets.resolver.hasKey(memory.textureData.alias)) {
-        textureUrl = memory.textureData.alias;
-      }
-      let texture = await getTexture(textureUrl);
+  if (!ignoreTexture) {
+    if ("textureImage" in memory && memory.textureImage && memory.textureImage.image) {
+      let texture = await getTexture(memory.textureImage.image);
       if (texture) {
         element.texture = texture;
       }
     }
+    if ("textureData" in memory) {
+      if (memory.textureData.alias) {
+        element.textureAlias = memory.textureData.alias;
+      }
+      if (memory.textureData.url !== "EMPTY") {
+        let textureUrl = memory.textureData.url;
+        if (memory.textureData.alias && Assets.resolver.hasKey(memory.textureData.alias)) {
+          textureUrl = memory.textureData.alias;
+        }
+        let texture = await getTexture(textureUrl);
+        if (texture) {
+          element.texture = texture;
+        }
+      }
+    }
   }
   let half = options?.half;
   if (half) {
@@ -59351,11 +59411,11 @@ var CanvasManager = class {
     "height" in oldAlias && delete oldAlias.height;
     "width" in oldAlias && delete oldAlias.width;
     if (newAlias instanceof VideoSprite) {
-      await setMemoryVideoSprite(newAlias, oldAlias);
+      await setMemoryVideoSprite(newAlias, oldAlias, { ignoreTexture: true });
     } else if (newAlias instanceof ImageSprite) {
-      await setMemoryImageSprite(newAlias, oldAlias);
+      await setMemoryImageSprite(newAlias, oldAlias, { ignoreTexture: true });
     } else if (newAlias instanceof Sprite2) {
-      await setMemorySprite(newAlias, oldAlias);
+      await setMemorySprite(newAlias, oldAlias, { ignoreTexture: true });
     } else if (newAlias instanceof Text2) {
       await setMemoryText(newAlias, oldAlias);
     } else if (newAlias instanceof ImageContainer) {
@@ -61090,16 +61150,25 @@ var NarrationManager = class {
     return this.alreadyCurrentStepMadeChoicesObj?.find((choice) => choice.choiceIndex === index)?.madeTimes || 0;
   }
   /* Run Methods */
+  getCanGoNext(options) {
+    let showWarn = options?.showWarn || false;
+    let choiceMenuOptions = this.choiceMenuOptions;
+    if (choiceMenuOptions && choiceMenuOptions.length > 0) {
+      showWarn && console.warn("[Pixi\u2019VN] The player must make a choice");
+      return false;
+    }
+    if (this.isRequiredInput) {
+      showWarn && console.warn("[Pixi\u2019VN] The player must enter a value");
+      return false;
+    }
+    return true;
+  }
   /**
    * Return if can go to the next step.
    * @returns True if can go to the next step.
    */
   get canGoNext() {
-    let options = this.choiceMenuOptions;
-    if (options && options.length > 0) {
-      return false;
-    }
-    return true;
+    return this.getCanGoNext();
   }
   /**
    * Execute the next step and add it to the history.
@@ -61126,8 +61195,7 @@ var NarrationManager = class {
    * ```
    */
   async goNext(props, choiseMade) {
-    if (!this.canGoNext) {
-      console.warn("[Pixi\u2019VN] The player must make a choice");
+    if (!this.getCanGoNext({ showWarn: true })) {
       return;
     }
     if (this.currentLabel && this.currentLabel.onStepEnd) {
@@ -61497,6 +61565,7 @@ var NarrationManager = class {
       let glueDialogue = storage.getVariable(storage.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY);
       if (glueDialogue) {
         dialogue.text = `${glueDialogue.text}${dialogue.text}`;
+        dialogue.character = dialogue.character || glueDialogue.character;
       }
       this.dialogGlue = false;
     }
@@ -62374,6 +62443,24 @@ function getExponentialProgression(number, progression, valueConvert) {
 }
 
 // src/classes/ticker/MoveTicker.ts
+function calculateDestination(args, element) {
+  let destination = createExportableElement(args.destination);
+  if (destination.type === "align") {
+    let anchorx = void 0;
+    let anchory = void 0;
+    if (element instanceof Sprite) {
+      anchorx = element.anchor.x;
+      anchory = element.anchor.y;
+    }
+    destination.x = calculateAlign("width", destination.x, element.width, element.pivot.x, anchorx);
+    destination.y = calculateAlign("height", destination.y, element.height, element.pivot.y, anchory);
+  }
+  if (destination.type === "percentage") {
+    destination.x = calculatePercentagePosition("width", destination.x);
+    destination.y = calculatePercentagePosition("height", destination.y);
+  }
+  return destination;
+}
 var MoveTicker = class extends TickerBase {
   fn(ticker, args, aliases, tickerId) {
     let xSpeed = 10;
@@ -62387,7 +62474,6 @@ var MoveTicker = class extends TickerBase {
         ySpeed = this.speedConvert(args.speed.y);
       }
     }
-    let destination = args.destination;
     let aliasToRemoveAfter2 = args.aliasToRemoveAfter || [];
     if (typeof aliasToRemoveAfter2 === "string") {
       aliasToRemoveAfter2 = [aliasToRemoveAfter2];
@@ -62410,6 +62496,7 @@ var MoveTicker = class extends TickerBase {
     }).forEach((alias) => {
       let element = canvas.find(alias);
       if (element && element instanceof Container) {
+        let destination = calculateDestination(args, element);
         let xDistance = destination.x - element.x > 0 ? 1 : -1;
         if (xDistance != 0) {
           element.x += xDistance * xSpeed * ticker.deltaTime;
@@ -62441,7 +62528,7 @@ var MoveTicker = class extends TickerBase {
     alias.forEach((alias2) => {
       let element = canvas.find(alias2);
       if (element) {
-        let destination = args.destination;
+        let destination = calculateDestination(args, element);
         element.x = destination.x;
         element.y = destination.y;
         if (args.isPushInOut && element.children.length > 0) {
@@ -62673,7 +62760,7 @@ var baseCanvasElementTestLabel = newLabel(
         character: juliette,
         text: `Here's what's going to happen: I'm going to create ${number} bunnies (CanvasSprites) and put them in a Container.`
       };
-      const container = new Container2();
+      const container = new Container3();
       canvas.add("container", container);
       const texture = await Assets.load(bunnyImage);
       for (let i3 = 0; i3 < number; i3++) {
@@ -63166,7 +63253,7 @@ var imagesMoveTest = newLabel("___pixi_vn_images_move_test___", [
       character: juliette,
       text: `Here's what's going to happen:
 - ${eggHeadName} will move to { x: 500, y: 100 } with a speed of 24.
-- ${flowerTopName} will move to { x: 500, y: 300 } with a speed of 18.
+- ${flowerTopName} will move to { x: 0.5, y: 0.5, type: "align" } with a speed of 18.
 - ${helmlokName} will move to { x: 100, y: 500 } with a speed of 150 and a linear speed progression of -2 ( limit 10 ), and then move to { x: 1700, y: 500 } with a speed of 10 and a linear speed progression of 2 ( limit 150 ), and repeat.
 - ${skullyName} will move to { x: 500, y: 500 } with a speed of 40, wait for 0.5 seconds, and move to { x: 100, y: 100 } with a speed of 40.`
     };
@@ -63175,7 +63262,7 @@ var imagesMoveTest = newLabel("___pixi_vn_images_move_test___", [
       speed: 24
     }));
     canvas.addTicker("flowerTop", new MoveTicker({
-      destination: { x: 500, y: 300 },
+      destination: { x: 0.5, y: 0.5, type: "align" },
       speed: 18
     }));
     canvas.addTickersSteps("helmlok", [
@@ -63769,6 +63856,68 @@ var pixivnTestStartLabel2 = newLabel(
   ]
 );
 
+// src/classes/canvas/AdditionalPositions.ts
+function analizePositionsExtensionProps(props) {
+  if (!props) {
+    return props;
+  }
+  if (typeof props.align !== "number") {
+    if (props.xAlign != void 0) {
+      if (props.align === void 0) {
+        props.align = { x: props.xAlign };
+        delete props.xAlign;
+      } else {
+        props.align.x = props.xAlign;
+        delete props.xAlign;
+      }
+    }
+    if (props.yAlign != void 0) {
+      if (props.align === void 0) {
+        props.align = { y: props.yAlign };
+        delete props.yAlign;
+      } else {
+        props.align.y = props.yAlign;
+        delete props.yAlign;
+      }
+    }
+  }
+  if (typeof props.percentagePosition !== "number") {
+    if (props.xPercentagePosition != void 0) {
+      if (props.percentagePosition === void 0) {
+        props.percentagePosition = { x: props.xPercentagePosition };
+        delete props.xPercentagePosition;
+      } else {
+        props.percentagePosition.x = props.xPercentagePosition;
+        delete props.xPercentagePosition;
+      }
+    }
+    if (props.yPercentagePosition != void 0) {
+      if (props.percentagePosition === void 0) {
+        props.percentagePosition = { y: props.yPercentagePosition };
+        delete props.yPercentagePosition;
+      } else {
+        props.percentagePosition.y = props.yPercentagePosition;
+        delete props.yPercentagePosition;
+      }
+    }
+  }
+  return props;
+}
+function calculateAlign(type, align, width, pivot, anchor = 0) {
+  if (type === "width") {
+    return align * (canvas.screen.width - width) + pivot + anchor * width;
+  } else {
+    return align * (canvas.screen.height - width) + pivot + anchor * width;
+  }
+}
+function calculatePercentagePosition(type, percentage) {
+  if (type === "width") {
+    return percentage * canvas.screen.width;
+  } else {
+    return percentage * canvas.screen.height;
+  }
+}
+
 // src/classes/canvas/ImageSprite.ts
 var ImageSprite = class _ImageSprite extends Sprite2 {
   pixivnId = CANVAS_IMAGE_ID;
@@ -63895,17 +64044,17 @@ var ImageSprite = class _ImageSprite extends Sprite2 {
   reloadPosition() {
     if (this._align) {
       if (this._align.x !== void 0) {
-        super.x = this._align.x * (canvas.screen.width - this.width) + this.pivot.x + this.anchor.x * this.width;
+        super.x = calculateAlign("width", this._align.x, this.width, this.pivot.x, this.anchor.x);
       }
       if (this._align.y !== void 0) {
-        super.y = this._align.y * (canvas.screen.height - this.height) + this.pivot.y + this.anchor.y * this.height;
+        super.y = calculateAlign("height", this._align.y, this.height, this.pivot.y, this.anchor.y);
       }
     } else if (this._percentagePosition) {
       if (this._percentagePosition.x !== void 0) {
-        super.x = this._percentagePosition.x * canvas.screen.width;
+        super.x = calculatePercentagePosition("width", this._percentagePosition.x);
       }
       if (this._percentagePosition.y !== void 0) {
-        super.y = this._percentagePosition.y * canvas.screen.height;
+        super.y = calculatePercentagePosition("height", this._percentagePosition.y);
       }
     }
   }
@@ -63934,17 +64083,21 @@ var ImageSprite = class _ImageSprite extends Sprite2 {
     super.y = value;
   }
 };
-async function setMemoryImageSprite(element, memory) {
+async function setMemoryImageSprite(element, memory, options) {
+  let ignoreTexture = options?.ignoreTexture || false;
   memory = analizePositionsExtensionProps(memory);
   return await setMemorySprite(element, memory, {
     half: async () => {
       "align" in memory && memory.align !== void 0 && (element.align = memory.align);
       "percentagePosition" in memory && memory.percentagePosition !== void 0 && (element.percentagePosition = memory.percentagePosition);
-      "imageLink" in memory && memory.imageLink !== void 0 && (element.textureAlias = memory.imageLink);
+      if (!ignoreTexture) {
+        "imageLink" in memory && memory.imageLink !== void 0 && (element.textureAlias = memory.imageLink);
+      }
       if ("loadIsStarted" in memory && memory.loadIsStarted) {
         await element.load();
       }
-    }
+    },
+    ignoreTexture: options?.ignoreTexture
   });
 }
 
@@ -64055,8 +64208,8 @@ var VideoSprite = class _VideoSprite extends ImageSprite {
     }
   }
 };
-async function setMemoryVideoSprite(element, memory) {
-  await setMemoryImageSprite(element, memory);
+async function setMemoryVideoSprite(element, memory, options) {
+  await setMemoryImageSprite(element, memory, { ignoreTexture: options?.ignoreTexture });
   "loop" in memory && memory.loop !== void 0 && (element.loop = memory.loop);
   "currentTime" in memory && memory.currentTime !== void 0 && (element.currentTime = memory.currentTime);
   "paused" in memory && memory.paused !== void 0 && (element.paused = memory.paused);
@@ -64412,7 +64565,7 @@ async function zoomIn(alias, image, props = { direction: "right" }, priority) {
   if (canvas.find(alias)) {
     canvas.copyCanvasElementProperty(alias, canvasElement);
   }
-  let container = new Container2();
+  let container = new Container3();
   container.addChild(canvasElement);
   container.height = canvas.canvasHeight;
   container.width = canvas.canvasWidth;
@@ -64469,7 +64622,7 @@ function zoomOut(alias, props = { direction: "right" }, priority) {
     return;
   }
   let zIndex = canvas.app.stage.getChildIndex(canvasElement);
-  let container = new Container2();
+  let container = new Container3();
   container.addChild(canvasElement);
   container.height = canvas.canvasHeight;
   container.width = canvas.canvasWidth;
@@ -64533,7 +64686,7 @@ async function pushIn(alias, image, props = { direction: "right" }, priority) {
     canvas.editAlias(alias, oldCanvasAlias, { ignoreTickers: true });
     pushOut(oldCanvasAlias, props, priority);
   }
-  let container = new Container2();
+  let container = new Container3();
   container.height = canvas.canvasHeight;
   container.width = canvas.canvasWidth;
   container.addChild(canvasElement);
@@ -64579,7 +64732,7 @@ function pushOut(alias, props = { direction: "right" }, priority) {
     console.warn("[Pixi\u2019VN] The canvas element is not found.");
     return;
   }
-  let container = new Container2();
+  let container = new Container3();
   container.pivot.x = 0;
   container.pivot.y = 0;
   container.x = 0;