@drincs/pixi-vn 0.6.1 → 0.6.3

package/dist/functions/ImageUtility.mjs

@@ -50,138 +50,6 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-
-// src/decorators/CanvasElementDecorator.ts
-var registeredCanvasElement = {};
-function getCanvasElementInstanceByClassName(canvasName) {
-  try {
-    let eventType = registeredCanvasElement[canvasName];
-    if (!eventType) {
-      if (canvasName === "CanvasContainer") {
-        eventType = CanvasContainer;
-      } else if (canvasName === "CanvasImage") {
-        eventType = CanvasImage;
-      } else if (canvasName === "CanvasSprite") {
-        eventType = CanvasSprite;
-      } else if (canvasName === "CanvasText") {
-        eventType = CanvasText;
-      }
-    }
-    if (!eventType) {
-      console.error(`[Pixi'VN] CanvasElement ${canvasName} not found`);
-      return;
-    }
-    let canvasElement = new eventType();
-    return canvasElement;
-  } catch (e) {
-    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasName}`, e);
-    return;
-  }
-}
-
-// src/functions/CanvasUtility.ts
-function getTextureMemory(texture) {
-  let sourceTexture = texture.source;
-  let textureMemory = {
-    image: sourceTexture.label
-  };
-  return textureMemory;
-}
-function exportCanvasElement(element) {
-  return element.memory;
-}
-function importCanvasElement(memory) {
-  let element = getCanvasElementInstanceByClassName(memory.className);
-  if (element) {
-    element.memory = memory;
-  } else {
-    throw new Error("[Pixi'VN] The element " + memory.className + " could not be created");
-  }
-  return element;
-}
-
-// src/classes/canvas/CanvasContainer.ts
-var CanvasContainer = class extends Container {
-  get memory() {
-    let memory = getMemoryContainer(this);
-    this.children.forEach((child) => {
-      memory.elements.push(exportCanvasElement(child));
-    });
-    return memory;
-  }
-  set memory(value) {
-    setMemoryContainer(this, value);
-    value.elements.forEach((child) => {
-      this.addChild(importCanvasElement(child));
-    });
-  }
-};
-function getMemoryContainer(element) {
-  return {
-    className: "CanvasContainer",
-    elements: [],
-    width: element.width,
-    height: element.height,
-    isRenderGroup: element.isRenderGroup,
-    blendMode: element.blendMode,
-    tint: element.tint,
-    alpha: element.alpha,
-    angle: element.angle,
-    renderable: element.renderable,
-    rotation: element.rotation,
-    scale: { x: element.scale.x, y: element.scale.y },
-    pivot: { x: element.pivot.x, y: element.pivot.y },
-    position: { x: element.position.x, y: element.position.y },
-    skew: { x: element.skew.x, y: element.skew.y },
-    visible: element.visible,
-    culled: element.culled,
-    x: element.x,
-    y: element.y,
-    boundsArea: element.boundsArea,
-    cursor: element.cursor,
-    eventMode: element.eventMode,
-    interactive: element.interactive,
-    interactiveChildren: element.interactiveChildren,
-    hitArea: element.hitArea
-  };
-}
-function setMemoryContainer(element, memory) {
-  memory.width && (element.width = memory.width);
-  memory.height && (element.height = memory.height);
-  memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
-  memory.blendMode && (element.blendMode = memory.blendMode);
-  memory.tint && (element.tint = memory.tint);
-  memory.alpha && (element.alpha = memory.alpha);
-  memory.angle && (element.angle = memory.angle);
-  memory.renderable && (element.renderable = memory.renderable);
-  memory.rotation && (element.rotation = memory.rotation);
-  if (memory.scale) {
-    if (typeof memory.scale === "number") {
-      element.scale.set(memory.scale, memory.scale);
-    } else {
-      element.scale.set(memory.scale.x, memory.scale.y);
-    }
-  }
-  if (memory.pivot) {
-    if (typeof memory.pivot === "number") {
-      element.pivot.set(memory.pivot, memory.pivot);
-    } else {
-      element.pivot.set(memory.pivot.x, memory.pivot.y);
-    }
-  }
-  memory.position && element.position.set(memory.position.x, memory.position.y);
-  memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
-  memory.visible && (element.visible = memory.visible);
-  memory.culled && (element.culled = memory.culled);
-  memory.x && (element.x = memory.x);
-  memory.y && (element.y = memory.y);
-  memory.boundsArea && (element.boundsArea = memory.boundsArea);
-  memory.cursor && (element.cursor = memory.cursor);
-  memory.eventMode && (element.eventMode = memory.eventMode);
-  memory.interactive && (element.interactive = memory.interactive);
-  memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
-  memory.hitArea && (element.hitArea = memory.hitArea);
-}
 function getTexture(imageUrl) {
   return __async(this, null, function* () {
     if (Assets.cache.has(imageUrl)) {
@@ -203,17 +71,19 @@ function getTexture(imageUrl) {
     });
   });
 }
-function getTextStyle(style) {
-  let fill = style.fill;
-  if (fill instanceof Object) {
-    console.warn("[Pixi'VN] CanvasText.style.fill is a FillGradient or FillPattern, this is not supported yet.", fill);
-    fill = "#00FF00";
+function getFillGradientFillPattern(prop, propName) {
+  if (!(prop instanceof Object)) {
+    return prop;
   }
+  console.warn(`[Pixi'VN] CanvasText.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,
+    fill: getFillGradientFillPattern(style.stroke, "fill"),
     fontFamily: style.fontFamily,
     fontSize: style.fontSize,
     fontStyle: style.fontStyle,
@@ -223,7 +93,7 @@ function getTextStyle(style) {
     letterSpacing: style.letterSpacing,
     lineHeight: style.lineHeight,
     padding: style.padding,
-    stroke: style.stroke,
+    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
     textBaseline: style.textBaseline,
     trim: style.trim,
     whiteSpace: style.whiteSpace,
@@ -234,40 +104,43 @@ function getTextStyle(style) {
 
 // src/decorators/EventDecorator.ts
 var registeredEvents = {};
-function getEventTypeByClassName(eventName) {
+function getEventTypeById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     new eventType();
     return eventType;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
-function getEventInstanceByClassName(eventName) {
+function getEventInstanceById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     let event = new eventType();
     return event;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
 
 // src/classes/canvas/CanvasSprite.ts
+var CANVAS_SPRITE_ID = "CanvasSprite";
 var CanvasSprite = class _CanvasSprite extends Sprite {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_SPRITE_ID;
   }
   get memory() {
     return getMemorySprite(this);
@@ -308,9 +181,9 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -339,7 +212,7 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
 function getMemorySprite(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasSprite",
+    pixivnId: element.pixivnId,
     textureImage: getTextureMemory(element.texture),
     anchor: { x: element.anchor.x, y: element.anchor.y },
     roundPixels: element.roundPixels,
@@ -362,8 +235,8 @@ function setMemorySprite(element, memory) {
   }
   memory.roundPixels && (element.roundPixels = memory.roundPixels);
   for (let event in memory.onEvents) {
-    let className = memory.onEvents[event];
-    let instance = getEventTypeByClassName(className);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
@@ -371,9 +244,11 @@ function setMemorySprite(element, memory) {
 }
 
 // src/classes/canvas/CanvasImage.ts
+var CANVAS_IMAGE_ID = "CanvasImage";
 var CanvasImage = class _CanvasImage extends CanvasSprite {
   constructor(options, imageLink) {
     super(options);
+    this.pixivnId = CANVAS_IMAGE_ID;
     this.imageLink = "";
     if (imageLink) {
       this.imageLink = imageLink;
@@ -381,12 +256,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
   }
   get memory() {
     return __spreadProps(__spreadValues({}, getMemorySprite(this)), {
-      className: "CanvasImage",
-      textureImage: { image: this.imageLink }
+      pixivnId: this.pixivnId,
+      imageLink: this.imageLink
     });
   }
   set memory(memory) {
     setMemorySprite(this, memory);
+    this.imageLink = memory.imageLink;
   }
   static from(source, skipCache) {
     let sprite = Sprite.from(source, skipCache);
@@ -414,10 +290,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
     });
   }
 };
+var CANVAS_TEXT_ID = "CanvasText";
 var CanvasText = class extends Text {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_TEXT_ID;
   }
   get memory() {
     return getMemoryText(this);
@@ -458,9 +337,9 @@ var CanvasText = class extends Text {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -483,7 +362,7 @@ var CanvasText = class extends Text {
 function getMemoryText(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasText",
+    pixivnId: element.pixivnId,
     anchor: { x: element.anchor.x, y: element.anchor.y },
     text: element.text,
     resolution: element.resolution,
@@ -506,14 +385,154 @@ function setMemoryText(element, memory) {
   memory.style && (element.style = memory.style);
   memory.roundPixels && (element.roundPixels = memory.roundPixels);
   for (let event in memory.onEvents) {
-    let className = memory.onEvents[event];
-    let instance = getEventTypeByClassName(className);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
   }
 }
 
+// src/decorators/CanvasElementDecorator.ts
+var registeredCanvasElement = {};
+function getCanvasElementInstanceById(canvasId) {
+  try {
+    let eventType = registeredCanvasElement[canvasId];
+    if (!eventType) {
+      if (canvasId === CANVAS_CONTAINER_ID) {
+        eventType = CanvasContainer;
+      } else if (canvasId === CANVAS_IMAGE_ID) {
+        eventType = CanvasImage;
+      } else if (canvasId === CANVAS_SPRITE_ID) {
+        eventType = CanvasSprite;
+      } else if (canvasId === CANVAS_TEXT_ID) {
+        eventType = CanvasText;
+      }
+    }
+    if (!eventType) {
+      console.error(`[Pixi'VN] CanvasElement ${canvasId} not found`);
+      return;
+    }
+    let canvasElement = new eventType();
+    return canvasElement;
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasId}`, e);
+    return;
+  }
+}
+
+// src/functions/CanvasUtility.ts
+function getTextureMemory(texture) {
+  let sourceTexture = texture.source;
+  let textureMemory = {
+    image: sourceTexture.label
+  };
+  return textureMemory;
+}
+function exportCanvasElement(element) {
+  return element.memory;
+}
+function importCanvasElement(memory) {
+  let element = getCanvasElementInstanceById(memory.pixivnId);
+  if (element) {
+    element.memory = memory;
+  } else {
+    throw new Error("[Pixi'VN] The element " + memory.pixivnId + " could not be created");
+  }
+  return element;
+}
+
+// src/classes/canvas/CanvasContainer.ts
+var CANVAS_CONTAINER_ID = "CanvasContainer";
+var CanvasContainer = class extends Container {
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_CONTAINER_ID;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID;
+  }
+  get memory() {
+    let memory = getMemoryContainer(this);
+    this.children.forEach((child) => {
+      memory.elements.push(exportCanvasElement(child));
+    });
+    return memory;
+  }
+  set memory(value) {
+    setMemoryContainer(this, value);
+    value.elements.forEach((child) => {
+      this.addChild(importCanvasElement(child));
+    });
+  }
+};
+function getMemoryContainer(element) {
+  let className = "CanvasContainer";
+  if (element.hasOwnProperty("pixivnId")) {
+    className = element.pixivnId;
+  }
+  return {
+    pixivnId: className,
+    elements: [],
+    width: element.width,
+    height: element.height,
+    isRenderGroup: element.isRenderGroup,
+    blendMode: element.blendMode,
+    tint: element.tint,
+    alpha: element.alpha,
+    angle: element.angle,
+    renderable: element.renderable,
+    rotation: element.rotation,
+    scale: { x: element.scale.x, y: element.scale.y },
+    pivot: { x: element.pivot.x, y: element.pivot.y },
+    position: { x: element.position.x, y: element.position.y },
+    skew: { x: element.skew.x, y: element.skew.y },
+    visible: element.visible,
+    x: element.x,
+    y: element.y,
+    boundsArea: element.boundsArea,
+    cursor: element.cursor,
+    eventMode: element.eventMode,
+    interactive: element.interactive,
+    interactiveChildren: element.interactiveChildren,
+    hitArea: element.hitArea
+  };
+}
+function setMemoryContainer(element, memory) {
+  memory.width && (element.width = memory.width);
+  memory.height && (element.height = memory.height);
+  memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
+  memory.blendMode && (element.blendMode = memory.blendMode);
+  memory.tint && (element.tint = memory.tint);
+  memory.alpha && (element.alpha = memory.alpha);
+  memory.angle && (element.angle = memory.angle);
+  memory.renderable && (element.renderable = memory.renderable);
+  memory.rotation && (element.rotation = memory.rotation);
+  if (memory.scale) {
+    if (typeof memory.scale === "number") {
+      element.scale.set(memory.scale, memory.scale);
+    } else {
+      element.scale.set(memory.scale.x, memory.scale.y);
+    }
+  }
+  if (memory.pivot) {
+    if (typeof memory.pivot === "number") {
+      element.pivot.set(memory.pivot, memory.pivot);
+    } else {
+      element.pivot.set(memory.pivot.x, memory.pivot.y);
+    }
+  }
+  memory.position && element.position.set(memory.position.x, memory.position.y);
+  memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
+  memory.visible && (element.visible = memory.visible);
+  memory.x && (element.x = memory.x);
+  memory.y && (element.y = memory.y);
+  memory.boundsArea && (element.boundsArea = memory.boundsArea);
+  memory.cursor && (element.cursor = memory.cursor);
+  memory.eventMode && (element.eventMode = memory.eventMode);
+  memory.interactive && (element.interactive = memory.interactive);
+  memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
+  memory.hitArea && (element.hitArea = memory.hitArea);
+}
+
 // src/constants.ts
 var Repeat = "repeat";
 function Pause(duration) {
@@ -542,9 +561,14 @@ var TickerBase = class {
    * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
    */
   constructor(args, duration, priority) {
+    /**
+     * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link geTickerInstanceById}
+     */
+    this.id = "ticker_id_not_set";
     this.args = args;
     this.duration = duration;
     this.priority = priority;
+    this.id = this.constructor.prototype.id;
   }
   /**
    * The method that will be called every frame.
@@ -569,19 +593,20 @@ function tickerDecorator(name) {
     if (registeredTickers[name]) {
       console.info(`[Pixi'VN] Ticker ${name} already exists, it will be overwritten`);
     }
+    target.prototype.id = name;
     registeredTickers[name] = target;
   };
 }
-function geTickerInstanceByClassName(tickerName, args, duration, priority) {
+function geTickerInstanceById(tickerId, args, duration, priority) {
   try {
-    let ticker = registeredTickers[tickerName];
+    let ticker = registeredTickers[tickerId];
     if (!ticker) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     return new ticker(args, duration, priority);
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Ticker ${tickerName}`, e);
+    console.error(`[Pixi'VN] Error while getting Ticker ${tickerId}`, e);
     return;
   }
 }
@@ -653,7 +678,7 @@ var _GameWindowManager = class _GameWindowManager {
         height
       }, options)).then(() => {
         _GameWindowManager._isInitialized = true;
-        this.addCanvasIntoElement(element);
+        this.addCanvasIntoHTMLElement(element);
         window.addEventListener("resize", _GameWindowManager.resize);
         _GameWindowManager.resize();
         asciiArtLog();
@@ -664,7 +689,7 @@ var _GameWindowManager = class _GameWindowManager {
    * Add the canvas into a html element.
    * @param element it is the html element where I will put the canvas. Example: document.body
    */
-  static addCanvasIntoElement(element) {
+  static addCanvasIntoHTMLElement(element) {
     if (_GameWindowManager.isInitialized) {
       element.appendChild(_GameWindowManager.app.canvas);
     } else {
@@ -910,18 +935,18 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static addTicker(canvasElementTag, ticker) {
-    let tickerName = ticker.constructor.name;
+    let tickerId = ticker.id;
     if (typeof canvasElementTag === "string") {
       canvasElementTag = [canvasElementTag];
     }
-    if (!geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority)) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+    if (!geTickerInstanceById(tickerId, ticker.args, ticker.duration, ticker.priority)) {
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerId,
       args: createExportableElement(ticker.args),
       canvasElementTags: canvasElementTag,
       priority: ticker.priority,
@@ -937,11 +962,11 @@ var _GameWindowManager = class _GameWindowManager {
           _GameWindowManager.removeTicker(id);
         }
       }, ticker.duration * 1e3);
-      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString(), true);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerId, timeout.toString(), true);
     }
   }
   static pushTicker(id, tickerData, ticker) {
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, ticker);
     _GameWindowManager._currentTickers[id] = tickerData;
     tickerData.fn = (t) => {
       let data = _GameWindowManager._currentTickers[id];
@@ -982,9 +1007,9 @@ var _GameWindowManager = class _GameWindowManager {
         if (step.hasOwnProperty("type") && step.type === "pause") {
           return step;
         }
-        let tickerName = step.constructor.name;
+        let tickerId = step.id;
         return {
-          ticker: tickerName,
+          ticker: tickerId,
           args: createExportableElement(step.args),
           duration: step.duration
         };
@@ -1022,16 +1047,16 @@ var _GameWindowManager = class _GameWindowManager {
       _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString(), false);
       return;
     }
-    let ticker = geTickerInstanceByClassName(step.ticker, step.args, step.duration, step.priority);
+    let ticker = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority);
     if (!ticker) {
       console.error(`[Pixi'VN] Ticker ${step.ticker} not found`);
       return;
     }
-    let tickerName = ticker.constructor.name;
+    let tickerName = ticker.id;
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerName,
       args: createExportableElement(ticker.args),
       canvasElementTags: [tag],
       priority: ticker.priority,
@@ -1088,26 +1113,26 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static removeAssociationBetweenTickerCanvasElement(tags, ticker) {
-    let tickerName;
+    let tickerId;
     if (typeof ticker === "string") {
-      tickerName = ticker;
+      tickerId = ticker;
     } else if (ticker instanceof TickerBase) {
-      tickerName = ticker.constructor.name;
+      tickerId = ticker.id;
     } else {
-      tickerName = ticker.name;
+      tickerId = ticker.prototype.id;
     }
     if (typeof tags === "string") {
       tags = [tags];
     }
     for (let id in _GameWindowManager._currentTickers) {
       let ticker2 = _GameWindowManager._currentTickers[id];
-      if (ticker2.className === tickerName) {
+      if (ticker2.id === tickerId) {
         _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e));
       }
     }
     for (let timeout in _GameWindowManager._currentTickersTimeouts) {
       let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
-      if (TickerTimeout.ticker === tickerName && TickerTimeout.canBeDeletedBeforeEnd) {
+      if (TickerTimeout.ticker === tickerId && TickerTimeout.canBeDeletedBeforeEnd) {
         _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t));
       }
     }
@@ -1293,11 +1318,11 @@ var _GameWindowManager = class _GameWindowManager {
         for (let id in currentTickers) {
           let t = currentTickers[id];
           let tags = t.canvasElementTags;
-          let ticker = geTickerInstanceByClassName(t.className, t.args, t.duration, t.priority);
+          let ticker = geTickerInstanceById(t.id, t.args, t.duration, t.priority);
           if (ticker) {
             _GameWindowManager.addTicker(tags, ticker);
           } else {
-            console.error(`[Pixi'VN] Ticker ${t.className} not found`);
+            console.error(`[Pixi'VN] Ticker ${t.id} not found`);
           }
         }
       }
@@ -1530,8 +1555,8 @@ var ZoomTicker = class extends TickerBase {
       tagToRemoveAfter2 = [tagToRemoveAfter2];
     }
     let type = args.type || "zoom";
-    let xLimit = Infinity;
-    let yLimit = Infinity;
+    let xLimit = type === "zoom" ? Infinity : 0;
+    let yLimit = type === "zoom" ? Infinity : 0;
     if (args.limit) {
       if (typeof args.limit === "number") {
         xLimit = args.limit;
@@ -1570,7 +1595,7 @@ var ZoomTicker = class extends TickerBase {
           if (element.scale.x >= xLimit && element.scale.y >= yLimit) {
             element.scale.x = xLimit;
             element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
           }
         } else if (type === "unzoom") {
           if (element.scale.x < xLimit) {
@@ -1582,21 +1607,36 @@ var ZoomTicker = class extends TickerBase {
           if (element.scale.x <= xLimit && element.scale.y <= yLimit) {
             element.scale.x = xLimit;
             element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
           }
         }
         if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
-          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+          this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
         }
       }
     });
     if (args.speedProgression)
       updateTickerProgression(args, "speed", args.speedProgression);
   }
+  onEndOfTicker(tag, tickerId, _element, tagToRemoveAfter2) {
+    GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+  }
 };
 ZoomTicker = __decorateClass([
   tickerDecorator()
 ], ZoomTicker);
+var ZoomInOutTicker = class extends ZoomTicker {
+  constructor(props, duration, priority) {
+    super(props, duration, priority);
+  }
+  onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2) {
+    if (element.children.length > 0) {
+      let elementChild = element.children[0];
+      GameWindowManager.addCanvasElement(tag, elementChild);
+    }
+    super.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+  }
+};
 
 // src/functions/ImageUtility.ts
 function addImage(tag, imageUrl) {
@@ -1712,7 +1752,148 @@ function showWithFadeTransition(_0, _1) {
 function removeWithFadeTransition(tag, props = {}, priority) {
   return removeWithDissolveTransition(tag, props, priority);
 }
+function moveIn(_0, _1) {
+  return __async(this, arguments, function* (tag, image, props = { direction: "right" }, priority) {
+    var _a;
+    let canvasElement;
+    if (typeof image === "string") {
+      canvasElement = addImage(tag, image);
+    } else {
+      canvasElement = image;
+      GameWindowManager.addCanvasElement(tag, canvasElement);
+    }
+    if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") {
+      yield canvasElement.load();
+    }
+    let destination = { x: canvasElement.x, y: canvasElement.y };
+    if (props.direction == "up") {
+      canvasElement.y = GameWindowManager.canvasHeight + canvasElement.height;
+    } else if (props.direction == "down") {
+      canvasElement.y = -canvasElement.height;
+    } else if (props.direction == "left") {
+      canvasElement.x = GameWindowManager.canvasWidth + canvasElement.width;
+    } else if (props.direction == "right") {
+      canvasElement.x = -canvasElement.width;
+    }
+    let effect = new MoveTicker(__spreadProps(__spreadValues({}, props), {
+      destination,
+      startOnlyIfHaveTexture: true
+    }), priority);
+    GameWindowManager.addTicker(tag, effect);
+  });
+}
+function moveOut(tag, props = { direction: "right" }, priority) {
+  let canvasElement = GameWindowManager.getCanvasElement(tag);
+  if (!canvasElement) {
+    console.warn("[Pixi'VN] The canvas element is not found.");
+    return;
+  }
+  let destination = { x: canvasElement.x, y: canvasElement.y };
+  if (props.direction == "up") {
+    destination.y = -canvasElement.height;
+  } else if (props.direction == "down") {
+    destination.y = GameWindowManager.canvasHeight + canvasElement.height;
+  } else if (props.direction == "left") {
+    destination.x = -canvasElement.width;
+  } else if (props.direction == "right") {
+    destination.x = GameWindowManager.canvasWidth + canvasElement.width;
+  }
+  let effect = new MoveTicker(__spreadProps(__spreadValues({}, props), {
+    destination,
+    startOnlyIfHaveTexture: true,
+    tagToRemoveAfter: tag
+  }), priority);
+  GameWindowManager.addTicker(tag, effect);
+}
+function zoomIn(_0, _1) {
+  return __async(this, arguments, function* (tag, image, props = { direction: "right" }, priority) {
+    var _a;
+    let canvasElement;
+    if (typeof image === "string") {
+      canvasElement = new CanvasImage({}, image);
+    } else {
+      canvasElement = image;
+    }
+    if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") {
+      yield canvasElement.load();
+    }
+    let container = new CanvasContainer();
+    container.addChild(canvasElement);
+    container.height = GameWindowManager.canvasHeight;
+    container.width = GameWindowManager.canvasWidth;
+    GameWindowManager.addCanvasElement(tag, container);
+    if (props.direction == "up") {
+      container.pivot.y = GameWindowManager.canvasHeight;
+      container.pivot.x = GameWindowManager.canvasWidth / 2;
+      container.y = GameWindowManager.canvasHeight;
+      container.x = GameWindowManager.canvasWidth / 2;
+    } else if (props.direction == "down") {
+      container.pivot.y = 0;
+      container.pivot.x = GameWindowManager.canvasWidth / 2;
+      container.y = 0;
+      container.x = GameWindowManager.canvasWidth / 2;
+    } else if (props.direction == "left") {
+      container.pivot.x = GameWindowManager.canvasWidth;
+      container.pivot.y = GameWindowManager.canvasHeight / 2;
+      container.x = GameWindowManager.canvasWidth;
+      container.y = GameWindowManager.canvasHeight / 2;
+    } else if (props.direction == "right") {
+      container.pivot.x = 0;
+      container.pivot.y = GameWindowManager.canvasHeight / 2;
+      container.x = 0;
+      container.y = GameWindowManager.canvasHeight / 2;
+    }
+    container.scale.set(0);
+    let effect = new ZoomInOutTicker(__spreadProps(__spreadValues({}, props), {
+      startOnlyIfHaveTexture: true,
+      type: "zoom",
+      limit: 1
+    }), priority);
+    GameWindowManager.addTicker(tag, effect);
+  });
+}
+function zoomOut(tag, props = { direction: "right" }, priority) {
+  let canvasElement = GameWindowManager.getCanvasElement(tag);
+  if (!canvasElement) {
+    console.warn("[Pixi'VN] The canvas element is not found.");
+    return;
+  }
+  let container = new CanvasContainer();
+  container.addChild(canvasElement);
+  container.height = GameWindowManager.canvasHeight;
+  container.width = GameWindowManager.canvasWidth;
+  GameWindowManager.addCanvasElement(tag, container);
+  if (props.direction == "up") {
+    container.pivot.y = GameWindowManager.canvasHeight;
+    container.pivot.x = GameWindowManager.canvasWidth / 2;
+    container.y = GameWindowManager.canvasHeight;
+    container.x = GameWindowManager.canvasWidth / 2;
+  } else if (props.direction == "down") {
+    container.pivot.y = 0;
+    container.pivot.x = GameWindowManager.canvasWidth / 2;
+    container.y = 0;
+    container.x = GameWindowManager.canvasWidth / 2;
+  } else if (props.direction == "left") {
+    container.pivot.x = GameWindowManager.canvasWidth;
+    container.pivot.y = GameWindowManager.canvasHeight / 2;
+    container.x = GameWindowManager.canvasWidth;
+    container.y = GameWindowManager.canvasHeight / 2;
+  } else if (props.direction == "right") {
+    container.pivot.x = 0;
+    container.pivot.y = GameWindowManager.canvasHeight / 2;
+    container.x = 0;
+    container.y = GameWindowManager.canvasHeight / 2;
+  }
+  container.scale.set(1);
+  let effect = new ZoomInOutTicker(__spreadProps(__spreadValues({}, props), {
+    startOnlyIfHaveTexture: true,
+    type: "unzoom",
+    limit: 0,
+    tagToRemoveAfter: tag
+  }), priority);
+  GameWindowManager.addTicker(tag, effect);
+}
 
-export { addImage, loadImage, removeCanvasElement, removeWithDissolveTransition, removeWithFadeTransition, showImage, showWithDissolveTransition, showWithFadeTransition };
-//# sourceMappingURL=out.js.map
+export { addImage, loadImage, moveIn, moveOut, removeCanvasElement, removeWithDissolveTransition, removeWithFadeTransition, showImage, showWithDissolveTransition, showWithFadeTransition, zoomIn, zoomOut };
+//# sourceMappingURL=ImageUtility.mjs.map
 //# sourceMappingURL=ImageUtility.mjs.map