@drincs/pixi-vn 0.6.0 → 0.6.2

package/dist/index.js

@@ -33,8 +33,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 var __async = (__this, __arguments, generator) => {
@@ -60,6 +59,13 @@ var __async = (__this, __arguments, generator) => {
 
 // src/classes/CanvasEvent.ts
 var CanvasEvent = class {
+  constructor() {
+    /**
+     * Get the id of the event. This variable is used in the system to get the event by id, {@link getEventInstanceById}
+     */
+    this.id = "event_id_not_set";
+    this.id = this.constructor.prototype.id;
+  }
   fn(_event, _element) {
     throw new Error("[Pixi'VN] The method CanvasEvent.fn() must be overridden");
   }
@@ -87,7 +93,7 @@ var Label = class {
     this._choiseIndex = choiseIndex;
   }
   /**
-   * Get the id of the label
+   * Get the id of the label. This variable is used in the system to get the label by id, {@link getLabelById}
    */
   get id() {
     return this._id;
@@ -149,7 +155,7 @@ function newCloseLabel(choiseIndex) {
 var registeredLabels = {};
 function newLabel(id, steps, onStepRun) {
   if (registeredLabels[id]) {
-    console.warn(`[Pixi'VN] Label ${id} already exists, it will be overwritten`);
+    console.info(`[Pixi'VN] Label ${id} already exists, it will be overwritten`);
   }
   let label = new Label(id, steps, onStepRun);
   registeredLabels[id] = label;
@@ -164,6 +170,13 @@ function getLabelById(id) {
   return label;
 }
 var CanvasBase = class extends pixi_js.Container {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the id of the canvas element. This variable is used in the system to get the canvas element by id, {@link getCanvasElementInstanceById}
+     */
+    this.pixivnId = "canvas_element_id_not_set";
+  }
   /**
    * This method return the memory of the canvas element.
    */
@@ -190,17 +203,23 @@ function exportCanvasElement(element) {
   return element.memory;
 }
 function importCanvasElement(memory) {
-  let element = getCanvasElementInstanceByClassName(memory.className);
+  let element = getCanvasElementInstanceById(memory.pixivnId);
   if (element) {
     element.memory = memory;
   } else {
-    throw new Error("[Pixi'VN] The element " + memory.className + " could not be created");
+    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 pixi_js.Container {
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_CONTAINER_ID;
+    this.pixivnId = this.constructor.prototype.pixivnId;
+  }
   get memory() {
     let memory = getMemoryContainer(this);
     this.children.forEach((child) => {
@@ -216,8 +235,12 @@ var CanvasContainer = class extends pixi_js.Container {
   }
 };
 function getMemoryContainer(element) {
+  let className = "CanvasContainer";
+  if (element.hasOwnProperty("pixivnId")) {
+    className = element.pixivnId;
+  }
   return {
-    className: "CanvasContainer",
+    pixivnId: className,
     elements: [],
     width: element.width,
     height: element.height,
@@ -339,45 +362,49 @@ function eventDecorator(name) {
       name = target.name;
     }
     if (registeredEvents[name]) {
-      console.warn(`[Pixi'VN] Event ${name} already exists, it will be overwritten`);
+      console.info(`[Pixi'VN] Event ${name} already exists, it will be overwritten`);
     }
+    target.prototype.id = name;
     registeredEvents[name] = target;
   };
 }
-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 pixi_js.Sprite {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId;
   }
   get memory() {
     return getMemorySprite(this);
@@ -418,9 +445,9 @@ var CanvasSprite = class _CanvasSprite extends pixi_js.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);
@@ -449,7 +476,7 @@ var CanvasSprite = class _CanvasSprite extends pixi_js.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,
@@ -472,8 +499,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);
     }
@@ -481,9 +508,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;
@@ -491,12 +520,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 = pixi_js.Sprite.from(source, skipCache);
@@ -524,10 +554,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
     });
   }
 };
+var CANVAS_TEXT_ID = "CanvasText";
 var CanvasText = class extends pixi_js.Text {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId;
   }
   get memory() {
     return getMemoryText(this);
@@ -568,9 +601,9 @@ var CanvasText = class extends pixi_js.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);
@@ -593,7 +626,7 @@ var CanvasText = class extends pixi_js.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,
@@ -616,8 +649,8 @@ 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);
     }
@@ -634,31 +667,32 @@ function canvasElementDecorator(name) {
     if (registeredCanvasElement[name]) {
       console.warn(`[Pixi'VN] CanvasElement ${name} already registered`);
     }
+    target.prototype.pixivnId = name;
     registeredCanvasElement[name] = target;
   };
 }
-function getCanvasElementInstanceByClassName(canvasName) {
+function getCanvasElementInstanceById(canvasId) {
   try {
-    let eventType = registeredCanvasElement[canvasName];
+    let eventType = registeredCanvasElement[canvasId];
     if (!eventType) {
-      if (canvasName === "CanvasContainer") {
+      if (canvasId === CANVAS_CONTAINER_ID) {
         eventType = CanvasContainer;
-      } else if (canvasName === "CanvasImage") {
+      } else if (canvasId === CANVAS_IMAGE_ID) {
         eventType = CanvasImage;
-      } else if (canvasName === "CanvasSprite") {
+      } else if (canvasId === CANVAS_SPRITE_ID) {
         eventType = CanvasSprite;
-      } else if (canvasName === "CanvasText") {
+      } else if (canvasId === CANVAS_TEXT_ID) {
         eventType = CanvasText;
       }
     }
     if (!eventType) {
-      console.error(`[Pixi'VN] CanvasElement ${canvasName} not found`);
+      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 ${canvasName}`, e);
+    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasId}`, e);
     return;
   }
 }
@@ -671,7 +705,7 @@ function saveCharacter(character) {
     return;
   }
   if (registeredCharacters[character.id]) {
-    console.warn(`[Pixi'VN] Character id ${character.id} already exists, it will be overwritten`);
+    console.info(`[Pixi'VN] Character id ${character.id} already exists, it will be overwritten`);
   }
   registeredCharacters[character.id] = character;
 }
@@ -700,21 +734,22 @@ function tickerDecorator(name) {
       name = target.name;
     }
     if (registeredTickers[name]) {
-      console.warn(`[Pixi'VN] Ticker ${name} already exists, it will be overwritten`);
+      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;
   }
 }
@@ -722,18 +757,6 @@ function geTickerInstanceByClassName(tickerName, args, duration, priority) {
 // src/types/CloseType.ts
 var Close = "close";
 
-// src/types/PauseType.ts
-var PauseValueType = "pause";
-function Pause(duration) {
-  return {
-    type: PauseValueType,
-    duration
-  };
-}
-
-// src/types/RepeatType.ts
-var Repeat = "repeat";
-
 // src/classes/ChoiceMenuOption.ts
 var ChoiceMenuOption = class {
   /**
@@ -766,8 +789,9 @@ var ChoiceMenuOption = class {
 var ChoiceMenuOptionClose = class {
   /**
    * @param text Text to be displayed in the menu
+   * @param closeCurrentLabel If true, the current label will be closed. @default false
    */
-  constructor(text) {
+  constructor(text, closeCurrentLabel = false) {
     /**
      * Label to be opened when the option is selected
      */
@@ -781,27 +805,28 @@ var ChoiceMenuOptionClose = class {
      */
     this.props = {};
     this.text = text;
+    this.closeCurrentLabel = closeCurrentLabel;
   }
 };
 
 // src/functions/DialogueUtility.ts
 function setDialogue(props) {
   let text = "";
-  let characterId = void 0;
+  let character = void 0;
   let dialogue;
   if (typeof props === "string") {
     text = props;
-    dialogue = new DialogueBaseModel(text, characterId);
+    dialogue = new DialogueBaseModel(text, character);
   } else if (!(props instanceof DialogueBaseModel)) {
     text = props.text;
     if (props.character) {
       if (typeof props.character === "string") {
-        characterId = props.character;
+        character = props.character;
       } else {
-        characterId = props.character.id;
+        character = props.character.id;
       }
     }
-    dialogue = new DialogueBaseModel(text, characterId);
+    dialogue = new DialogueBaseModel(text, character);
   } else {
     dialogue = props;
   }
@@ -819,7 +844,8 @@ function setChoiceMenuOptions(options) {
     if (option instanceof ChoiceMenuOptionClose) {
       return {
         text: option.text,
-        type: Close
+        type: Close,
+        closeCurrentLabel: option.closeCurrentLabel
       };
     }
     return __spreadProps(__spreadValues({}, option), {
@@ -840,6 +866,7 @@ function getChoiceMenuOptions() {
           text: option.text,
           label: itemLabel,
           type: Close,
+          closeCurrentLabel: option.closeCurrentLabel,
           props: {}
         });
         return;
@@ -926,39 +953,42 @@ function clearAllGameDatas() {
 var TickerBase = class {
   /**
    * @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.
+   * @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, 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.
    * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them.
-   * @param t The ticker that is calling this method
-   * @param args The arguments that you passed when you added the ticker
-   * @param tags The tags of the canvas elements that are connected to this ticker
+   * @param _ticker The ticker that is calling this method
+   * @param _args The arguments that you passed when you added the ticker
+   * @param _tags The tags 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 GameWindowManager.currentTickers}
    */
-  fn(_t, _args, _tags) {
+  fn(_ticker, _args, _tags, _tickerId) {
     throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden");
   }
 };
-exports.TickerFadeAlpha = class TickerFadeAlpha extends TickerBase {
-  /**
-   * The method that will be called every frame to fade the alpha of the canvas element of the canvas.
-   * @param delta The delta time
-   * @param args The arguments that are passed to the ticker
-   * @param tags The tags of the canvas element that are connected to this ticker
-   */
-  fn(t, args, tags) {
+
+// src/classes/ticker/FadeAlphaTicker.ts
+exports.FadeAlphaTicker = class FadeAlphaTicker extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
     let type = args.type === void 0 ? "hide" : args.type;
-    let speed = args.speed === void 0 ? 0.1 : args.speed;
+    let duration = args.duration === void 0 ? 1 : args.duration;
+    let speed = 1 / (duration * 60);
     let limit = args.limit === void 0 ? type === "hide" ? 0 : 1 : args.limit;
-    let removeElementAfter = args.tagToRemoveAfter || [];
-    if (typeof removeElementAfter === "string") {
-      removeElementAfter = [removeElementAfter];
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
     }
     if (type === "hide" && limit < 0) {
       limit = 0;
@@ -979,61 +1009,88 @@ exports.TickerFadeAlpha = class TickerFadeAlpha extends TickerBase {
       let element = GameWindowManager.getCanvasElement(tag);
       if (element && element instanceof pixi_js.Container) {
         if (type === "show" && element.alpha < limit) {
-          element.alpha += speed * t.deltaTime;
+          element.alpha += speed * ticker.deltaTime;
         } else if (type === "hide" && element.alpha > limit) {
-          element.alpha -= speed * t.deltaTime;
-        } else {
+          element.alpha -= speed * ticker.deltaTime;
+        }
+        if (type === "show" && element.alpha >= limit) {
+          element.alpha = limit;
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+        } else if (type === "hide" && element.alpha <= limit) {
           element.alpha = limit;
-          GameWindowManager.removeAssociationBetweenTickerCanvasElement(tag, this);
-          GameWindowManager.removeCanvasElement(removeElementAfter);
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
         }
       }
     });
   }
 };
-exports.TickerFadeAlpha = __decorateClass([
+exports.FadeAlphaTicker = __decorateClass([
   tickerDecorator()
-], exports.TickerFadeAlpha);
+], exports.FadeAlphaTicker);
 
 // src/functions/TickerUtility.ts
 function updateTickerProgression(args, propertyName, progression) {
-  if (args.hasOwnProperty(propertyName) && typeof args[propertyName] !== "number") {
+  if (args[propertyName] === void 0 || !progression || args[propertyName] === progression.limit) {
     return;
   }
-  if (args[propertyName] !== void 0 && progression && args[propertyName] !== progression.limit) {
+  if (typeof args[propertyName] === "number") {
     if (progression.type === "linear") {
-      args[propertyName] += progression.amt;
-      if (progression.limit !== void 0) {
-        if (args[propertyName] > progression.limit && progression.amt > 0) {
-          args[propertyName] = progression.limit;
-        } else if (args[propertyName] < progression.limit && progression.amt < 0) {
-          args[propertyName] = progression.limit;
-        }
-      }
+      args[propertyName] = getLinearProgression(args[propertyName], progression);
     } else if (progression.type === "exponential") {
-      args[propertyName] += args[propertyName] * progression.percentage;
-      if (progression.limit !== void 0) {
-        if (args[propertyName] > progression.limit && progression.percentage > 0) {
-          args[propertyName] = progression.limit;
-        } else if (args[propertyName] < progression.limit && progression.percentage < 0) {
-          args[propertyName] = progression.limit;
-        }
-      }
+      args[propertyName] = getExponentialProgression(args[propertyName], progression);
+    }
+  } else if (args[propertyName] !== void 0 && typeof args[propertyName] === "object" && args[propertyName].haveOwnProperty("x") && args[propertyName].haveOwnProperty("y") && typeof args[propertyName].x === "number" && typeof args[propertyName].y === "number") {
+    if (progression.type === "linear") {
+      args[propertyName].x = getLinearProgression(args[propertyName].x, progression);
+      args[propertyName].y = getLinearProgression(args[propertyName].y, progression);
+    } else if (progression.type === "exponential") {
+      args[propertyName].x = getExponentialProgression(args[propertyName].x, progression);
+      args[propertyName].y = getExponentialProgression(args[propertyName].y, progression);
+    }
+  }
+}
+function getLinearProgression(number, progression) {
+  if (progression.limit !== void 0) {
+    if (number > progression.limit && progression.amt > 0) {
+      return progression.limit;
+    } else if (number < progression.limit && progression.amt < 0) {
+      return progression.limit;
+    }
+  }
+  return number + progression.amt / 60;
+}
+function getExponentialProgression(number, progression) {
+  if (progression.limit !== void 0) {
+    if (number > progression.limit && progression.percentage > 0) {
+      return progression.limit;
+    } else if (number < progression.limit && progression.percentage < 0) {
+      return progression.limit;
     }
   }
+  return number + number * progression.percentage;
 }
 
-// src/classes/ticker/TickerMove.ts
-exports.TickerMove = class TickerMove extends TickerBase {
-  /**
-   * The method that will be called every frame to move the canvas element of the canvas.
-   * @param t The ticker that is calling this method
-   * @param args The arguments that are passed to the ticker
-   * @param tags The tags of the canvas element that are connected to this ticker
-   */
-  fn(t, args, tags) {
-    let speed = args.speed === void 0 ? 0.1 : args.speed;
+// src/classes/ticker/MoveTicker.ts
+exports.MoveTicker = class MoveTicker extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
+    let xSpeed = 1;
+    let ySpeed = 1;
+    if (args.speed) {
+      if (typeof args.speed === "number") {
+        xSpeed = args.speed;
+        ySpeed = args.speed;
+      } else {
+        xSpeed = args.speed.x;
+        ySpeed = args.speed.y;
+      }
+    }
+    xSpeed /= 60;
+    ySpeed /= 60;
     let destination = args.destination;
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
+    }
     tags.filter((tag) => {
       var _a;
       let element = GameWindowManager.getCanvasElement(tag);
@@ -1046,41 +1103,42 @@ exports.TickerMove = class TickerMove extends TickerBase {
     }).forEach((tag) => {
       let element = GameWindowManager.getCanvasElement(tag);
       if (element && element instanceof pixi_js.Container) {
-        let xDistance = destination.x - element.x;
+        let xDistance = destination.x - element.x > 0 ? 1 : -1;
         if (xDistance != 0) {
-          element.x += xDistance / speed * t.deltaTime;
+          element.x += xDistance * xSpeed * ticker.deltaTime;
           let newDistance = destination.x - element.x;
           if (xDistance < 0 && newDistance > 0 || xDistance > 0 && newDistance < 0) {
             element.x = destination.x;
           }
         }
-        let yDistance = destination.y - element.y;
+        let yDistance = destination.y - element.y > 0 ? 1 : -1;
         if (yDistance != 0) {
-          element.y += yDistance / speed * t.deltaTime;
+          element.y += yDistance * ySpeed * ticker.deltaTime;
           let newDistance = destination.y - element.y;
           if (yDistance < 0 && newDistance > 0 || yDistance > 0 && newDistance < 0) {
             element.y = destination.y;
           }
         }
+        if (element.x == destination.x && element.y == destination.y) {
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+        }
       }
     });
     if (args.speedProgression)
       updateTickerProgression(args, "speed", args.speedProgression);
   }
 };
-exports.TickerMove = __decorateClass([
+exports.MoveTicker = __decorateClass([
   tickerDecorator()
-], exports.TickerMove);
-exports.TickerRotate = class TickerRotate extends TickerBase {
-  /**
-   * The method that will be called every frame to rotate the canvas element of the canvas.
-   * @param delta The delta time
-   * @param args The arguments that are passed to the ticker
-   * @param tags The tags of the canvas element that are connected to this ticker
-   */
-  fn(t, args, tags) {
-    let speed = args.speed === void 0 ? 0.1 : args.speed;
+], exports.MoveTicker);
+exports.RotateTicker = class RotateTicker extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
+    let speed = (args.speed === void 0 ? 1 : args.speed) / 60;
     let clockwise = args.clockwise === void 0 ? true : args.clockwise;
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
+    }
     tags.filter((tag) => {
       var _a;
       let element = GameWindowManager.getCanvasElement(tag);
@@ -1094,18 +1152,133 @@ exports.TickerRotate = class TickerRotate extends TickerBase {
       let element = GameWindowManager.getCanvasElement(tag);
       if (element && element instanceof pixi_js.Container) {
         if (clockwise)
-          element.rotation += speed * t.deltaTime;
+          element.rotation += speed * ticker.deltaTime;
         else
-          element.rotation -= speed * t.deltaTime;
+          element.rotation -= speed * ticker.deltaTime;
+        if (speed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+        }
+      }
+    });
+    if (args.speedProgression)
+      updateTickerProgression(args, "speed", args.speedProgression);
+  }
+};
+exports.RotateTicker = __decorateClass([
+  tickerDecorator()
+], exports.RotateTicker);
+exports.ZoomTicker = class ZoomTicker extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
+    let xSpeed = 0.1;
+    let ySpeed = 0.1;
+    if (args.speed) {
+      if (typeof args.speed === "number") {
+        xSpeed = args.speed;
+        ySpeed = args.speed;
+      } else {
+        xSpeed = args.speed.x;
+        ySpeed = args.speed.y;
+      }
+    }
+    xSpeed /= 60;
+    ySpeed /= 60;
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
+    }
+    let type = args.type || "zoom";
+    let xLimit = type === "zoom" ? Infinity : 0;
+    let yLimit = type === "zoom" ? Infinity : 0;
+    if (args.limit) {
+      if (typeof args.limit === "number") {
+        xLimit = args.limit;
+        yLimit = args.limit;
+      } else {
+        xLimit = args.limit.x;
+        yLimit = args.limit.y;
+      }
+    }
+    tags.filter((tag) => {
+      var _a;
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (args.startOnlyIfHaveTexture) {
+        if (element && element instanceof pixi_js.Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") {
+          return false;
+        }
+      }
+      return true;
+    }).forEach((tag) => {
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (element && element instanceof pixi_js.Container) {
+        if (type === "zoom" && (element.scale.x < xLimit || element.scale.y < yLimit)) {
+          element.scale.x += xSpeed * ticker.deltaTime;
+          element.scale.y += ySpeed * ticker.deltaTime;
+        } else if (type === "unzoom" && (element.scale.x > xLimit || element.scale.y > yLimit)) {
+          element.scale.x -= xSpeed * ticker.deltaTime;
+          element.scale.y -= ySpeed * ticker.deltaTime;
+        }
+        if (type === "zoom") {
+          if (element.scale.x > xLimit) {
+            element.scale.x = xLimit;
+          }
+          if (element.scale.y > yLimit) {
+            element.scale.y = yLimit;
+          }
+          if (element.scale.x >= xLimit && element.scale.y >= yLimit) {
+            element.scale.x = xLimit;
+            element.scale.y = yLimit;
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+          }
+        } else if (type === "unzoom") {
+          if (element.scale.x < xLimit) {
+            element.scale.x = xLimit;
+          }
+          if (element.scale.y < yLimit) {
+            element.scale.y = yLimit;
+          }
+          if (element.scale.x <= xLimit && element.scale.y <= yLimit) {
+            element.scale.x = xLimit;
+            element.scale.y = yLimit;
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+          }
+        }
+        if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
+          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);
+  }
 };
-exports.TickerRotate = __decorateClass([
+exports.ZoomTicker = __decorateClass([
   tickerDecorator()
-], exports.TickerRotate);
+], exports.ZoomTicker);
+var ZoomInOutTicker = class extends exports.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/constants.ts
+var PIXIVN_VERSION = "0.6.2";
+var Repeat = "repeat";
+function Pause(duration) {
+  return {
+    type: "pause",
+    duration
+  };
+}
 
 // src/functions/ImageUtility.ts
 function addImage(tag, imageUrl) {
@@ -1114,7 +1287,7 @@ function addImage(tag, imageUrl) {
   GameWindowManager.addCanvasElement(tag, image);
   return image;
 }
-function loadImages(canvasImages) {
+function loadImage(canvasImages) {
   return __async(this, null, function* () {
     if (!Array.isArray(canvasImages)) {
       return [canvasImages];
@@ -1135,39 +1308,233 @@ function loadImages(canvasImages) {
     });
   });
 }
+function showImage(tag, imageUrl) {
+  return __async(this, null, function* () {
+    let image = addImage(tag, imageUrl);
+    yield image.load();
+    return image;
+  });
+}
 function removeCanvasElement(tag) {
   GameWindowManager.removeCanvasElement(tag);
 }
-function showWithDissolveTransition(tag, image, speed, priority) {
-  return __async(this, null, function* () {
-    let specialTag = void 0;
+function showWithDissolveTransition(_0, _1) {
+  return __async(this, arguments, function* (tag, image, props = {}, priority) {
+    var _a;
+    let oldCanvasTag = void 0;
     if (GameWindowManager.getCanvasElement(tag)) {
-      specialTag = tag + "_temp_disolve";
-      GameWindowManager.editTagCanvasElement(tag, specialTag);
+      oldCanvasTag = tag + "_temp_disolve";
+      GameWindowManager.editCanvasElementTag(tag, oldCanvasTag);
     }
     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();
     }
     canvasElement.alpha = 0;
-    let effect = new exports.TickerFadeAlpha({
-      speed,
+    let effect = new exports.FadeAlphaTicker(__spreadProps(__spreadValues({}, props), {
       type: "show",
-      tagToRemoveAfter: specialTag,
+      tagToRemoveAfter: oldCanvasTag,
       startOnlyIfHaveTexture: true
-    }, 1e4, priority);
+    }), 10, priority);
     GameWindowManager.addTicker(tag, effect);
-    if (canvasElement instanceof CanvasImage) {
-      return canvasElement.load();
+    return;
+  });
+}
+function removeWithDissolveTransition(tag, props = {}, priority) {
+  if (typeof tag === "string") {
+    tag = [tag];
+  }
+  let effect = new exports.FadeAlphaTicker(__spreadProps(__spreadValues({}, props), {
+    type: "hide",
+    tagToRemoveAfter: tag,
+    startOnlyIfHaveTexture: true
+  }), 10, priority);
+  GameWindowManager.addTicker(tag, effect);
+}
+function showWithFadeTransition(_0, _1) {
+  return __async(this, arguments, function* (tag, image, props = {}, priority) {
+    var _a;
+    if (!GameWindowManager.getCanvasElement(tag)) {
+      return showWithDissolveTransition(tag, image, props, priority);
+    }
+    let oldCanvasTag = tag + "_temp_fade";
+    GameWindowManager.editCanvasElementTag(tag, oldCanvasTag);
+    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();
+    }
+    canvasElement.alpha = 0;
+    GameWindowManager.addTickersSteps(oldCanvasTag, [
+      new exports.FadeAlphaTicker(__spreadProps(__spreadValues({}, props), {
+        type: "hide",
+        startOnlyIfHaveTexture: true
+      }))
+    ]);
+    GameWindowManager.addTickersSteps(tag, [
+      Pause(props.duration || 1),
+      new exports.FadeAlphaTicker(__spreadProps(__spreadValues({}, props), {
+        type: "show",
+        startOnlyIfHaveTexture: true
+      }))
+    ]);
+  });
+}
+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 exports.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 exports.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);
   });
 }
-
-// src/constants.ts
-var PIXIVN_VERSION = "0.6.0";
+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);
+}
 
 // src/functions/SavesUtility.ts
 function getSaveData() {
@@ -1344,6 +1711,9 @@ function asciiArtLog() {
     `);
 }
 
+// src/types/ticker/TagToRemoveAfterType.ts
+var tagToRemoveAfter = "tagToRemoveAfter";
+
 // src/managers/WindowManager.ts
 var _GameWindowManager = class _GameWindowManager {
   constructor() {
@@ -1526,25 +1896,25 @@ var _GameWindowManager = class _GameWindowManager {
   /**
    * Remove a canvas element from the canvas.
    * And remove all tickers that are not connected to any canvas element.
-   * @param tag The tag of the canvas element to be removed.
+   * @param tags The tag of the canvas element to be removed.
    * @returns 
    * @example
    * ```typescript
    * GameWindowManager.removeCanvasElement("bunny");
    * ```
    */
-  static removeCanvasElement(tag) {
-    if (typeof tag === "string") {
-      tag = [tag];
+  static removeCanvasElement(tags) {
+    if (typeof tags === "string") {
+      tags = [tags];
     }
-    tag.forEach((t) => {
-      if (_GameWindowManager._children[t]) {
-        _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[t]);
-        delete _GameWindowManager._children[t];
+    tags.forEach((tag) => {
+      if (_GameWindowManager._children[tag]) {
+        _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[tag]);
+        delete _GameWindowManager._children[tag];
+        _GameWindowManager.removeTickerByCanvasElement(tag);
       }
     });
-    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
-    _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tag.includes(t));
+    _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tags.includes(t));
   }
   /**
    * Get a canvas element by the tag.
@@ -1574,18 +1944,43 @@ var _GameWindowManager = class _GameWindowManager {
     _GameWindowManager.app.stage.removeChildren();
     _GameWindowManager._children = {};
     _GameWindowManager.childrenTagsOrder = [];
-    _GameWindowManager.removeTickers();
+    _GameWindowManager.removeAllTickers();
   }
   /**
    * Edit the tag of a canvas element.
    * @param oldTag The old tag of the canvas element.
    * @param newTag The new tag of the canvas element.
    */
-  static editTagCanvasElement(oldTag, newTag) {
+  static editCanvasElementTag(oldTag, newTag) {
     if (_GameWindowManager._children[oldTag]) {
       _GameWindowManager._children[newTag] = _GameWindowManager._children[oldTag];
       delete _GameWindowManager._children[oldTag];
     }
+    if (_GameWindowManager._currentTickersSteps[oldTag]) {
+      _GameWindowManager._currentTickersSteps[newTag] = _GameWindowManager._currentTickersSteps[oldTag];
+      delete _GameWindowManager._currentTickersSteps[oldTag];
+    }
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      if (ticker.canvasElementTags.includes(oldTag)) {
+        ticker.canvasElementTags = ticker.canvasElementTags.map((t) => t === oldTag ? newTag : t);
+        if (ticker.args.hasOwnProperty(tagToRemoveAfter)) {
+          let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter;
+          if (typeof tagToRemoveAfter2 === "string") {
+            tagToRemoveAfter2 = [tagToRemoveAfter2];
+          }
+          if (Array.isArray(tagToRemoveAfter2)) {
+            ticker.args.tagToRemoveAfter = tagToRemoveAfter2.map((t) => t === oldTag ? newTag : t);
+          }
+        }
+      }
+    }
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
+      if (TickerTimeout.tags.includes(oldTag)) {
+        TickerTimeout.tags = TickerTimeout.tags.map((t) => t === oldTag ? newTag : t);
+      }
+    }
   }
   /** Edit Tickers Methods */
   /**
@@ -1594,106 +1989,127 @@ var _GameWindowManager = class _GameWindowManager {
   static get currentTickers() {
     return _GameWindowManager._currentTickers;
   }
+  static get currentTickersList() {
+    return Object.values(_GameWindowManager._currentTickers);
+  }
+  static get currentTickersWithoutCreatedBySteps() {
+    return Object.fromEntries(Object.entries(_GameWindowManager._currentTickers).filter(([_, ticker]) => !ticker.createdByTicketStepsId));
+  }
   /**
    * The steps of the tickers
    */
   static get currentTickersSteps() {
     return _GameWindowManager._currentTickersSteps;
   }
+  static generateTickerId(tickerData) {
+    try {
+      return sha1__default.default(JSON.stringify(tickerData)).toString() + "_" + Math.random().toString(36).substring(7);
+    } catch (e) {
+      throw new Error(`[Pixi'VN] Error to generate ticker id: ${e}`);
+    }
+  }
   /**
-   * Run a ticker.
+   * Run a ticker. You can run multiple addTicker with the same tag and different tickerClasses.
+   * If you run a ticker with the same tag and tickerClass, the old ticker will be removed.
+   * If already exists a sequence of tickers with the same tag, it will be removed.
    * @param canvasEslementTag The tag of the canvas element that will use the ticker.
    * @param ticker The ticker class to be run.
    * @param args The arguments to be used in the ticker.
-   * @param duration The time to be used in the ticker. This number is in milliseconds. If it is undefined, the ticker will run forever.
+   * @param duration The time to be used in the ticker. This number is in seconds. If it is undefined, the ticker will run forever.
    * @param priority The priority to be used in the ticker.
    * @returns 
    * @example
    * ```typescript
-   * GameWindowManager.addTicker("alien", new TickerRotate({ speed: 0.2 }))
+   * GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0.2 }))
    * ```
    */
   static addTicker(canvasElementTag, ticker) {
-    let tickerName = ticker.constructor.name;
+    let tickerId = ticker.id;
     if (typeof canvasElementTag === "string") {
       canvasElementTag = [canvasElementTag];
     }
-    let t = geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority);
-    if (!t) {
-      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;
     }
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTag, ticker);
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
-      args: ticker.args,
+      id: tickerId,
+      args: createExportableElement(ticker.args),
       canvasElementTags: canvasElementTag,
       priority: ticker.priority,
       duration: ticker.duration
     };
-    _GameWindowManager.pushTicker(tickerHistory, t);
-    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
+    let id = _GameWindowManager.generateTickerId(tickerHistory);
+    _GameWindowManager.pushTicker(id, tickerHistory, ticker);
     if (ticker.duration) {
       let timeout = setTimeout(() => {
         _GameWindowManager.removeTickerTimeoutInfo(timeout);
-        _GameWindowManager.nextTickerStep(canvasElementTag);
-      }, ticker.duration);
-      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString());
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          _GameWindowManager.removeTicker(id);
+        }
+      }, ticker.duration * 1e3);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerId, timeout.toString(), true);
     }
   }
-  static pushTicker(tickerData, ticker) {
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
-    _GameWindowManager._currentTickers.push(tickerData);
+  static pushTicker(id, tickerData, ticker) {
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, ticker);
+    _GameWindowManager._currentTickers[id] = tickerData;
     tickerData.fn = (t) => {
-      ticker == null ? void 0 : ticker.fn(t, tickerData.args, tickerData.canvasElementTags);
+      let data = _GameWindowManager._currentTickers[id];
+      if (data) {
+        ticker == null ? void 0 : ticker.fn(t, data.args, data.canvasElementTags, id);
+      }
     };
     _GameWindowManager.app.ticker.add(tickerData.fn, void 0, tickerData.priority);
   }
   /**
-   * Run a sequence of tickers.
+   * Run a sequence of tickers. If exists a ticker steps with the same tag, it will be removed.
    * @param tag The tag 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
    * @example
    * ```typescript
    * GameWindowManager.addTickersSteps("alien", [
-   *     new TickerRotate({ speed: 0.1, clockwise: true }, 2000),
-   *     Pause(500),
-   *     new TickerRotate({ speed: 0.2, clockwise: false }, 2000),
+   *     new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
+   *     Pause(1), // 1 second
+   *     new RotateTicker({ speed: 0.2, clockwise: false }, 2),
    *     Repeat,
    * ])
    * ```
    */
-  static addTickersSteps(tag, steps) {
+  static addTickersSteps(tag, steps, currentStepNumber = 0) {
     if (steps.length == 0) {
       console.warn("[Pixi'VN] The steps of the tickers is empty");
       return;
     }
-    let alredyExists = _GameWindowManager._currentTickersSteps[tag] !== void 0;
+    _GameWindowManager.removeTickerStepByCanvasElement(tag);
     _GameWindowManager._currentTickersSteps[tag] = {
-      currentStepNumber: 0,
-      steps: steps.map((s) => {
-        if (s === Repeat) {
-          return s;
-        }
-        if (!s.duration) {
-          console.warn("[Pixi'VN] Duration is not defined, so it will be set to 1000");
-          s.duration = 1e3;
+      currentStepNumber,
+      steps: steps.map((step) => {
+        if (step === Repeat) {
+          return step;
         }
-        if (s.hasOwnProperty("type") && s.type === PauseValueType) {
-          return s;
+        if (step.hasOwnProperty("type") && step.type === "pause") {
+          return step;
         }
-        let tickerName = s.constructor.name;
+        let tickerId = step.id;
         return {
-          ticker: tickerName,
-          args: s.args,
-          duration: s.duration
+          ticker: tickerId,
+          args: createExportableElement(step.args),
+          duration: step.duration
         };
       })
     };
-    if (!alredyExists) {
+    _GameWindowManager.runTickersSteps(tag);
+  }
+  static restoneTickersSteps(data) {
+    for (let tag in data) {
+      let steps = data[tag];
+      _GameWindowManager._currentTickersSteps[tag] = steps;
       _GameWindowManager.runTickersSteps(tag);
     }
   }
@@ -1707,70 +2123,106 @@ var _GameWindowManager = class _GameWindowManager {
         return;
       }
     }
-    if (step.hasOwnProperty("type") && step.type === PauseValueType) {
+    if (step.hasOwnProperty("type") && step.type === "pause") {
       let timeout = setTimeout(() => {
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          tickerTimeoutInfo.tags.forEach((tag2) => {
+            _GameWindowManager.nextTickerStep(tag2);
+          });
+        }
         _GameWindowManager.removeTickerTimeoutInfo(timeout);
-        _GameWindowManager.nextTickerStep(tag);
-      }, step.duration);
-      _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString());
+      }, step.duration * 1e3);
+      _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;
     }
-    _GameWindowManager.addTicker(tag, ticker);
+    let tickerName = ticker.id;
+    let tickerHistory = {
+      fn: () => {
+      },
+      id: tickerName,
+      args: createExportableElement(ticker.args),
+      canvasElementTags: [tag],
+      priority: ticker.priority,
+      duration: ticker.duration,
+      createdByTicketStepsId: tag
+    };
+    let id = _GameWindowManager.generateTickerId(tickerHistory);
+    _GameWindowManager.pushTicker(id, tickerHistory, ticker);
+    if (ticker.duration) {
+      let timeout = setTimeout(() => {
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          _GameWindowManager.removeTicker(id);
+          tickerTimeoutInfo.tags.forEach((tag2) => {
+            _GameWindowManager.nextTickerStep(tag2);
+          });
+        }
+        _GameWindowManager.removeTickerTimeoutInfo(timeout);
+      }, ticker.duration * 1e3);
+      _GameWindowManager.addTickerTimeoutInfo(tag, tickerName, timeout.toString(), false);
+    }
   }
   static nextTickerStep(tag) {
-    if (typeof tag === "string") {
-      tag = [tag];
+    if (_GameWindowManager._currentTickersSteps[tag]) {
+      let steps = _GameWindowManager._currentTickersSteps[tag];
+      if (steps.currentStepNumber + 1 < steps.steps.length) {
+        steps.currentStepNumber++;
+        _GameWindowManager._currentTickersSteps[tag] = steps;
+        _GameWindowManager.runTickersSteps(tag);
+      } else {
+        _GameWindowManager.removeTickerStepByCanvasElement(tag);
+      }
     }
-    tag.forEach((tag2) => {
-      if (_GameWindowManager._currentTickersSteps[tag2]) {
-        let steps = _GameWindowManager._currentTickersSteps[tag2];
-        if (steps.currentStepNumber + 1 < steps.steps.length) {
-          steps.currentStepNumber++;
-          _GameWindowManager._currentTickersSteps[tag2] = steps;
-          _GameWindowManager.runTickersSteps(tag2);
-        } else {
-          delete _GameWindowManager._currentTickersSteps[tag2];
-        }
+  }
+  static onEndOfTicker(canvasElementTags, ticker, canvasElementTagsToDelete, tickerId) {
+    let tickerData = _GameWindowManager._currentTickers[tickerId];
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTags, ticker);
+    _GameWindowManager.removeCanvasElement(canvasElementTagsToDelete);
+    if (tickerData) {
+      _GameWindowManager.removeTicker(tickerId);
+      if (tickerData.duration == void 0 && tickerData.createdByTicketStepsId) {
+        _GameWindowManager.nextTickerStep(tickerData.createdByTicketStepsId);
       }
-    });
+    }
   }
   /**
    * Remove a connection between a canvas element and a ticker.
    * And remove the ticker if there is no canvas element connected to it.
-   * @param tag The tag of the canvas element that will use the ticker.
+   * @param tags The tag of the canvas element that will use the ticker.
    * @param ticker The ticker class to be removed.
    * @example
    * ```typescript
-   * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", TickerRotate)
+   * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", RotateTicker)
    * ```
    */
-  static removeAssociationBetweenTickerCanvasElement(tag, ticker) {
-    let tickerName;
-    if (ticker instanceof TickerBase) {
-      tickerName = ticker.constructor.name;
+  static removeAssociationBetweenTickerCanvasElement(tags, ticker) {
+    let tickerId;
+    if (typeof ticker === "string") {
+      tickerId = ticker;
+    } else if (ticker instanceof TickerBase) {
+      tickerId = ticker.id;
     } else {
-      tickerName = ticker.name;
+      tickerId = ticker.prototype.id;
     }
-    if (typeof tag === "string") {
-      tag = [tag];
+    if (typeof tags === "string") {
+      tags = [tags];
     }
-    _GameWindowManager._currentTickers = _GameWindowManager._currentTickers.map((t) => {
-      if (t.className === tickerName) {
-        t.canvasElementTags = t.canvasElementTags.filter((e) => !tag.includes(e));
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker2 = _GameWindowManager._currentTickers[id];
+      if (ticker2.id === tickerId) {
+        _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e));
       }
-      return t;
-    });
-    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
-      let t = _GameWindowManager.currentTickersTimeouts[timeout].tags.filter((e) => !tag.includes(e));
-      if (t.length == 0) {
-        _GameWindowManager.removeTickerTimeoutInfo(timeout);
-      } else {
-        _GameWindowManager.currentTickersTimeouts[timeout].tags = t;
+    }
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
+      if (TickerTimeout.ticker === tickerId && TickerTimeout.canBeDeletedBeforeEnd) {
+        _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t));
       }
     }
     _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
@@ -1779,49 +2231,117 @@ var _GameWindowManager = class _GameWindowManager {
    * Remove all tickers that are not connected to any existing canvas element.
    */
   static removeTickersWithoutAssociatedCanvasElement() {
-    let currentTickers = _GameWindowManager._currentTickers.map((t) => {
-      t.canvasElementTags = t.canvasElementTags.filter((e) => _GameWindowManager._children[e]);
-      return t;
-    });
-    currentTickers.filter((t) => t.canvasElementTags.length === 0).forEach((t) => {
-      _GameWindowManager.app.ticker.remove(t.fn);
-    });
-    currentTickers = currentTickers.filter((t) => t.canvasElementTags.length > 0);
-    _GameWindowManager._currentTickers = currentTickers;
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      ticker.canvasElementTags = ticker.canvasElementTags.filter((e) => _GameWindowManager._children[e]);
+      if (ticker.canvasElementTags.length === 0) {
+        _GameWindowManager.removeTicker(id);
+      }
+    }
     for (let tag in _GameWindowManager._currentTickersSteps) {
       if (_GameWindowManager._children[tag] === void 0) {
         delete _GameWindowManager._currentTickersSteps[tag];
       }
     }
+    Object.entries(_GameWindowManager._currentTickersTimeouts).forEach(([timeout, { tags }]) => {
+      if (tags.length === 0) {
+        _GameWindowManager.removeTickerTimeout(timeout);
+      }
+    });
   }
-  static addTickerTimeoutInfo(tags, ticker, timeout) {
+  static addTickerTimeoutInfo(tags, ticker, timeout, canBeDeletedBeforeEnd) {
     if (typeof tags === "string") {
       tags = [tags];
     }
-    _GameWindowManager.currentTickersTimeouts[timeout] = {
+    _GameWindowManager._currentTickersTimeouts[timeout] = {
       tags,
-      ticker
+      ticker,
+      canBeDeletedBeforeEnd
     };
   }
   static removeTickerTimeoutInfo(timeout) {
     if (typeof timeout !== "string") {
       timeout = timeout.toString();
     }
-    if (_GameWindowManager.currentTickersTimeouts[timeout]) {
-      delete _GameWindowManager.currentTickersTimeouts[timeout];
+    if (_GameWindowManager._currentTickersTimeouts[timeout]) {
+      delete _GameWindowManager._currentTickersTimeouts[timeout];
+    }
+  }
+  static removeTickerTimeout(timeout) {
+    if (typeof timeout !== "string") {
+      timeout = timeout.toString();
+    }
+    clearTimeout(Number(timeout));
+    _GameWindowManager.removeTickerTimeoutInfo(timeout);
+  }
+  static removeTickerTimeoutsByTag(tag, checkCanBeDeletedBeforeEnd) {
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let tagsWithoutTagToRemove = _GameWindowManager._currentTickersTimeouts[timeout].tags.filter((t) => t !== tag);
+      if (tagsWithoutTagToRemove.length === 0) {
+        let canBeDeletedBeforeEnd = _GameWindowManager._currentTickersTimeouts[timeout].canBeDeletedBeforeEnd;
+        if (!checkCanBeDeletedBeforeEnd || canBeDeletedBeforeEnd) {
+          _GameWindowManager.removeTickerTimeout(timeout);
+        }
+      } else {
+        _GameWindowManager._currentTickersTimeouts[timeout].tags = tagsWithoutTagToRemove;
+      }
     }
   }
   /**
    * Remove all tickers from the canvas.
    */
-  static removeTickers() {
+  static removeAllTickers() {
     _GameWindowManager._currentTickersSteps = {};
-    _GameWindowManager._currentTickers.forEach((t) => {
-      _GameWindowManager.app.ticker.remove(t.fn);
+    Object.keys(_GameWindowManager._currentTickers).forEach((id) => {
+      _GameWindowManager.removeTicker(id);
+    });
+    _GameWindowManager._currentTickers = {};
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      _GameWindowManager.removeTickerTimeout(timeout);
+    }
+  }
+  /**
+   * Remove all tickers from a canvas element.
+   * @param tag The tag of the canvas element that will use the ticker.
+   */
+  static removeTickerByCanvasElement(tag) {
+    if (typeof tag === "string") {
+      tag = [tag];
+    }
+    tag.forEach((tag2) => {
+      for (let id in _GameWindowManager._currentTickers) {
+        let ticker = _GameWindowManager._currentTickers[id];
+        if (ticker.canvasElementTags.includes(tag2)) {
+          _GameWindowManager.removeTicker(id);
+        }
+      }
+      if (_GameWindowManager._currentTickersSteps[tag2]) {
+        delete _GameWindowManager._currentTickersSteps[tag2];
+      }
+      _GameWindowManager.removeTickerTimeoutsByTag(tag2, false);
+      delete _GameWindowManager._currentTickersSteps[tag2];
     });
-    _GameWindowManager._currentTickers = [];
-    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
-      _GameWindowManager.removeTickerTimeoutInfo(timeout);
+  }
+  static removeTickerStepByCanvasElement(tag) {
+    if (_GameWindowManager._currentTickersSteps[tag]) {
+      delete _GameWindowManager._currentTickersSteps[tag];
+    }
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      if (ticker.createdByTicketStepsId === tag) {
+        _GameWindowManager.removeTicker(id);
+      }
+    }
+  }
+  static removeTicker(tickerId) {
+    let ticker = _GameWindowManager._currentTickers[tickerId];
+    if (ticker) {
+      if (ticker.args.hasOwnProperty(tagToRemoveAfter)) {
+        let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter;
+        _GameWindowManager.removeCanvasElement(tagToRemoveAfter2);
+      }
+      _GameWindowManager.app.ticker.remove(ticker.fn);
+      delete _GameWindowManager._currentTickers[tickerId];
     }
   }
   /**
@@ -1848,7 +2368,8 @@ var _GameWindowManager = class _GameWindowManager {
       currentElements[tag] = exportCanvasElement(_GameWindowManager._children[tag]);
     }
     return {
-      currentTickers: createExportableElement(_GameWindowManager._currentTickers),
+      currentTickers: createExportableElement(_GameWindowManager.currentTickersWithoutCreatedBySteps),
+      currentTickersSteps: createExportableElement(_GameWindowManager._currentTickersSteps),
       currentElements: createExportableElement(currentElements),
       childrenTagsOrder: createExportableElement(_GameWindowManager.childrenTagsOrder)
     };
@@ -1883,15 +2404,20 @@ var _GameWindowManager = class _GameWindowManager {
       }
       if (data.hasOwnProperty("currentTickers")) {
         let currentTickers = data["currentTickers"];
-        currentTickers.forEach((t) => {
+        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`);
           }
-        });
+        }
+      }
+      if (data.hasOwnProperty("currentTickersSteps")) {
+        let currentTickersSteps = data["currentTickersSteps"];
+        _GameWindowManager.restoneTickersSteps(currentTickersSteps);
       }
     } catch (e) {
       console.error("[Pixi'VN] Error importing data", e);
@@ -1905,9 +2431,9 @@ _GameWindowManager._children = {};
  * The order of the children tags.
  */
 _GameWindowManager.childrenTagsOrder = [];
-_GameWindowManager._currentTickers = [];
+_GameWindowManager._currentTickers = {};
 _GameWindowManager._currentTickersSteps = {};
-_GameWindowManager.currentTickersTimeouts = {};
+_GameWindowManager._currentTickersTimeouts = {};
 var GameWindowManager = _GameWindowManager;
 
 // src/managers/StepManager.ts
@@ -1974,7 +2500,8 @@ var _GameStepManager = class _GameStepManager {
         canvas: {
           childrenTagsOrder: [],
           currentElements: {},
-          currentTickers: []
+          currentTickers: {},
+          currentTickersSteps: {}
         },
         labelIndex: -1,
         openedLabels: []
@@ -2085,6 +2612,13 @@ var _GameStepManager = class _GameStepManager {
     _GameStepManager._openedLabels = _GameStepManager.originalStepData.openedLabels;
   }
   /* Run Methods */
+  static get canGoNext() {
+    let options = getChoiceMenuOptions();
+    if (options && options.length > 0) {
+      return false;
+    }
+    return true;
+  }
   /**
    * Execute the next step and add it to the history.
    * @param props The props to pass to the step.
@@ -2094,7 +2628,7 @@ var _GameStepManager = class _GameStepManager {
    * ```typescript
    *     function nextOnClick() {
    *     setLoading(true)
-   *     GameStepManager.runNextStep(yourParams)
+   *     GameStepManager.goNext(yourParams)
    *         .then((result) => {
    *             setUpdate((p) => p + 1)
    *             setLoading(false)
@@ -2109,8 +2643,12 @@ var _GameStepManager = class _GameStepManager {
    * }
    * ```
    */
-  static runNextStep(props, choiseMade) {
+  static goNext(props, choiseMade) {
     return __async(this, null, function* () {
+      if (!_GameStepManager.canGoNext) {
+        console.warn("[Pixi'VN] The player must make a choice");
+        return;
+      }
       _GameStepManager.increaseCurrentStepIndex();
       return yield _GameStepManager.runCurrentStep(props, choiseMade);
     });
@@ -2141,7 +2679,7 @@ var _GameStepManager = class _GameStepManager {
           return result;
         } else if (_GameStepManager.openedLabels.length > 1) {
           _GameStepManager.closeCurrentLabel();
-          return yield _GameStepManager.runNextStep(props, choiseMade);
+          return yield _GameStepManager.goNext(props, choiseMade);
         } else {
           _GameStepManager.restorLastLabelList();
           console.error("[Pixi'VN] The end of the game is not managed, so the game is blocked. Read this documentation to know how to manage the end of the game: https://pixi-vn.web.app/start/labels.html#how-manage-the-end-of-the-game");
@@ -2185,8 +2723,15 @@ var _GameStepManager = class _GameStepManager {
       }
       try {
         if (labelId === CLOSE_LABEL_ID) {
-          let closeLabel = newCloseLabel(choiseMade);
-          return _GameStepManager.closeChoiceMenu(closeLabel, props);
+          let closeCurrentLabel = newCloseLabel(choiseMade);
+          let choice = {
+            label: closeCurrentLabel,
+            text: "",
+            closeCurrentLabel: false,
+            type: "close",
+            props: {}
+          };
+          return _GameStepManager.closeChoiceMenu(choice, props);
         }
         let tempLabel = getLabelById(labelId);
         if (!tempLabel) {
@@ -2236,8 +2781,15 @@ var _GameStepManager = class _GameStepManager {
       }
       try {
         if (labelId === CLOSE_LABEL_ID) {
-          let closeLabel = newCloseLabel(choiseMade);
-          return _GameStepManager.closeChoiceMenu(closeLabel, props);
+          let closeCurrentLabel = newCloseLabel(choiseMade);
+          let choice = {
+            label: closeCurrentLabel,
+            text: "",
+            closeCurrentLabel: false,
+            type: "close",
+            props: {}
+          };
+          return _GameStepManager.closeChoiceMenu(choice, props);
         }
         let tempLabel = getLabelById(labelId);
         if (!tempLabel) {
@@ -2253,7 +2805,8 @@ var _GameStepManager = class _GameStepManager {
   }
   /**
    * When the player is in a choice menu, can use this function to exit to the choice menu.
-   * @param props The props to pass to the step.
+   * @param choice
+   * @param props
    * @returns StepLabelResultType or undefined.
    * @example
    * ```typescript
@@ -2264,13 +2817,17 @@ var _GameStepManager = class _GameStepManager {
    * })
    * ```
    */
-  static closeChoiceMenu(label, props) {
+  static closeChoiceMenu(choice, props) {
     return __async(this, null, function* () {
+      let label = choice.label;
       let choiseMade = void 0;
       if (typeof label.choiseIndex === "number") {
         choiseMade = label.choiseIndex;
       }
-      return _GameStepManager.runNextStep(props, choiseMade);
+      if (choice.closeCurrentLabel) {
+        _GameStepManager.closeCurrentLabel();
+      }
+      return _GameStepManager.goNext(props, choiseMade);
     });
   }
   /* After Update Methods */
@@ -2598,15 +3155,15 @@ var DialogueBaseModel = class {
     if (typeof text === "string") {
       this.text = text;
       if (typeof character === "string") {
-        this.characterId = character;
+        this.character = character;
       } else {
-        this.characterId = character == null ? void 0 : character.id;
+        this.character = character == null ? void 0 : character.id;
       }
       this.oltherParams = oltherParams;
     } else {
       this.text = text.text;
-      if (text.characterId) {
-        this.characterId = text.characterId;
+      if (text.character) {
+        this.character = text.character;
       }
       this.oltherParams = text.oltherParams || {};
     }
@@ -2619,12 +3176,703 @@ var DialogueBaseModel = class {
   export() {
     return {
       text: this.text,
-      characterId: this.characterId,
+      character: this.character,
       oltherParams: this.oltherParams
     };
   }
 };
 
+// src/labels/TestConstant.ts
+var juliette = new CharacterBaseModel2("___pixivn_juliette___", {
+  name: "Juliette",
+  age: 25,
+  icon: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-square.webp?alt=media&token=5856ae7b-d99e-4563-86ec-cbc48cc9c6b4",
+  color: "#ac0086"
+});
+saveCharacter(juliette);
+var eggHeadImage = "https://pixijs.com/assets/eggHead.png";
+var eggHeadName = `<span style="color:purple">Egg Head</span>`;
+var flowerTopImage = "https://pixijs.com/assets/flowerTop.png";
+var flowerTopName = `<span style="color:green">Flower Top</span>`;
+var helmlokImage = "https://pixijs.com/assets/helmlok.png";
+var helmlokName = `<span style="color:blue">Helmlok</span>`;
+var skullyImage = "https://pixijs.com/assets/skully.png";
+var skullyName = `<span style="color:red">Skully</span>`;
+var bunnyImage = "https://pixijs.com/assets/bunny.png";
+var bunnyName = `Bunny`;
+
+// src/labels/CanvasEventsTestLabel.ts
+var EventTest1 = class extends CanvasEvent {
+  fn(event, sprite) {
+    if (event === "pointerdown") {
+      sprite.scale.x *= 1.25;
+      sprite.scale.y *= 1.25;
+    }
+  }
+};
+EventTest1 = __decorateClass([
+  eventDecorator("___pixi_vn_canvas_events_test_event1___")
+], EventTest1);
+var EventTest2 = class extends CanvasEvent {
+  constructor() {
+    super(...arguments);
+    this.textureButtonDown = pixi_js.Texture.from("https://pixijs.com/assets/button_down.png");
+    this.textureButtonOver = pixi_js.Texture.from("https://pixijs.com/assets/button_over.png");
+    this.textureButton = pixi_js.Texture.from("https://pixijs.com/assets/button.png");
+  }
+  fn(event, sprite) {
+    if (event === "pointerdown") {
+      sprite.isdown = true;
+      sprite.texture = this.textureButtonDown;
+      sprite.alpha = 1;
+    } else if (event === "pointerup" || event === "pointerupoutside") {
+      sprite.isdown = false;
+      if (sprite.isOver) {
+        sprite.texture = this.textureButtonOver;
+      } else {
+        sprite.texture = this.textureButton;
+      }
+    } else if (event === "pointerover") {
+      sprite.isOver = true;
+      if (sprite.isdown) {
+        return;
+      }
+      sprite.texture = this.textureButtonOver;
+    } else if (event === "pointerout") {
+      sprite.isOver = false;
+      if (sprite.isdown) {
+        return;
+      }
+      sprite.texture = this.textureButton;
+    }
+  }
+};
+EventTest2 = __decorateClass([
+  eventDecorator("___pixi_vn_canvas_events_test_event2___")
+], EventTest2);
+var CANVAS_EVENTS_TEST_LABEL = "___pixi_vn_canvas_events_test___";
+var canvasEventsTestLabel = newLabel(
+  CANVAS_EVENTS_TEST_LABEL,
+  [
+    () => setDialogue({
+      character: juliette,
+      text: "This is the test of clickable elements in a canvas."
+    }),
+    () => __async(void 0, null, function* () {
+      setDialogue({
+        character: juliette,
+        text: `This is my friend, ${bunnyName}. It's small now, but if you try to click on it it will get bigger and bigger. (This example is from the official [PixiJS website](https://pixijs.com/8.x/examples/events/click).)`
+      });
+      const texture = yield pixi_js.Assets.load(bunnyImage);
+      const sprite = CanvasSprite.from(texture);
+      sprite.anchor.set(0.5);
+      sprite.x = GameWindowManager.screen.width / 2;
+      sprite.y = GameWindowManager.screen.height / 2;
+      sprite.eventMode = "static";
+      sprite.cursor = "pointer";
+      sprite.onEvent("pointerdown", EventTest1);
+      GameWindowManager.addCanvasElement("bunny", sprite);
+    }),
+    () => __async(void 0, null, function* () {
+      GameWindowManager.clear();
+      setDialogue({
+        character: juliette,
+        text: `This is the test of buttons in a canvas. (This example is from the official [PixiJS website](https://pixijs.com/8.x/examples/events/interactivity).)`
+      });
+      yield pixi_js.Assets.load([
+        "https://pixijs.com/assets/bg_button.jpg",
+        "https://pixijs.com/assets/button.png",
+        "https://pixijs.com/assets/button_down.png",
+        "https://pixijs.com/assets/button_over.png"
+      ]);
+      const background = CanvasSprite.from("https://pixijs.com/assets/bg_button.jpg");
+      background.width = GameWindowManager.screen.width;
+      background.height = GameWindowManager.screen.height;
+      GameWindowManager.addCanvasElement("bg", background);
+      const textureButton = pixi_js.Texture.from("https://pixijs.com/assets/button.png");
+      const buttons = [];
+      const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445];
+      for (let i = 0; i < 5; i++) {
+        const button = new CanvasSprite(textureButton);
+        button.anchor.set(0.5);
+        button.x = buttonPositions[i * 2];
+        button.y = buttonPositions[i * 2 + 1];
+        button.eventMode = "static";
+        button.cursor = "pointer";
+        button.onEvent("pointerdown", EventTest2).onEvent("pointerup", EventTest2).onEvent("pointerupoutside", EventTest2).onEvent("pointerover", EventTest2).onEvent("pointerout", EventTest2);
+        GameWindowManager.addCanvasElement("button" + i, button);
+        buttons.push(button);
+      }
+      buttons[0].scale.set(1.2);
+      buttons[2].rotation = Math.PI / 10;
+      buttons[3].scale.set(0.8);
+      buttons[4].scale.set(0.8, 1.2);
+      buttons[4].rotation = Math.PI;
+    })
+  ]
+);
+var AlienTintingTest = class extends CanvasSprite {
+  constructor() {
+    super(...arguments);
+    this.direction = 0;
+    this.turningSpeed = 0;
+    this.speed = 0;
+  }
+  get memory() {
+    return __spreadProps(__spreadValues({}, super.memory), {
+      direction: this.direction,
+      turningSpeed: this.turningSpeed,
+      speed: this.speed
+    });
+  }
+  set memory(memory) {
+    super.memory = memory;
+    this.direction = memory.direction;
+    this.turningSpeed = memory.turningSpeed;
+    this.speed = memory.speed;
+  }
+  static from(source, skipCache) {
+    let sprite = pixi_js.Sprite.from(source, skipCache);
+    let mySprite = new AlienTintingTest();
+    mySprite.texture = sprite.texture;
+    return mySprite;
+  }
+};
+AlienTintingTest = __decorateClass([
+  canvasElementDecorator("___pixi_vn_custom_canvas_element___")
+], AlienTintingTest);
+var TintingTestTicker = class extends TickerBase {
+  constructor() {
+    super({});
+  }
+  fn(_t, _args, tags) {
+    tags.forEach((tag) => {
+      const dudeBoundsPadding = 100;
+      const dudeBounds = new pixi_js.Rectangle(
+        -dudeBoundsPadding,
+        -dudeBoundsPadding,
+        GameWindowManager.screen.width + dudeBoundsPadding * 2,
+        GameWindowManager.screen.height + dudeBoundsPadding * 2
+      );
+      let dude = GameWindowManager.getCanvasElement(tag);
+      if (dude && dude instanceof AlienTintingTest) {
+        dude.direction += dude.turningSpeed * 0.01;
+        dude.x += Math.sin(dude.direction) * dude.speed;
+        dude.y += Math.cos(dude.direction) * dude.speed;
+        dude.rotation = -dude.direction - Math.PI / 2;
+        if (dude.x < dudeBounds.x) {
+          dude.x += dudeBounds.width;
+        } else if (dude.x > dudeBounds.x + dudeBounds.width) {
+          dude.x -= dudeBounds.width;
+        }
+        if (dude.y < dudeBounds.y) {
+          dude.y += dudeBounds.height;
+        } else if (dude.y > dudeBounds.y + dudeBounds.height) {
+          dude.y -= dudeBounds.height;
+        }
+      }
+    });
+  }
+};
+TintingTestTicker = __decorateClass([
+  tickerDecorator("___pixi_vn_custom_ticker___")
+], TintingTestTicker);
+var CUSTOM_TICKER_CANVAS_ELEMENT_TEST_LABEL = "___pixi_vn_custom_ticker_canvas_element_test___";
+var customTickerCanvasElementTestLabel = newLabel(
+  CUSTOM_TICKER_CANVAS_ELEMENT_TEST_LABEL,
+  [
+    () => __async(void 0, null, function* () {
+      const totalDudes = 100;
+      for (let i = 0; i < totalDudes; i++) {
+        const texture = yield pixi_js.Assets.load(eggHeadImage);
+        const dude = AlienTintingTest.from(texture);
+        dude.anchor.set(0.5);
+        dude.scale.set(0.8 + Math.random() * 0.3);
+        dude.x = Math.random() * GameWindowManager.screen.width;
+        dude.y = Math.random() * GameWindowManager.screen.height;
+        dude.tint = Math.random() * 16777215;
+        dude.direction = Math.random() * Math.PI * 2;
+        dude.turningSpeed = Math.random() - 0.8;
+        dude.speed = 2 + Math.random() * 2;
+        GameWindowManager.addCanvasElement("alien" + i, dude);
+        GameWindowManager.addTicker("alien" + i, new TintingTestTicker());
+      }
+      setDialogue({
+        character: juliette,
+        text: `This is a test of custom ticker and canvas element. In this test, we have created ${totalDudes} ${eggHeadName} with random tint, scale, position, direction, turning speed, and speed. With the custom ticker, we are moving the custom canvas element in a random direction. (This example is from the official [PixiJS website](https://pixijs.com/8.x/examples/events/interactivity).)`
+      });
+    })
+  ]
+);
+
+// src/labels/ImagesAnimationsTestLabel.ts
+var IMAGE_ANIMAIONS_TEST_LABEL = "___pixi_vn_images_animations_test___";
+var imagesAnimationsTest = newLabel(IMAGE_ANIMAIONS_TEST_LABEL, [
+  () => __async(void 0, null, function* () {
+    setDialogue({ character: juliette, text: `These are my 4 puppets: ${eggHeadName}, ${flowerTopName}, ${helmlokName} and ${skullyName}. They can appear, disappear and animate at my will.` });
+    let eggHead = addImage("eggHead", eggHeadImage);
+    yield eggHead.load();
+    eggHead.x = 100;
+    eggHead.y = 100;
+    let flowerTop = addImage("flowerTop", flowerTopImage);
+    flowerTop.x = 300;
+    flowerTop.y = 100;
+    flowerTop.load();
+    let helmlok = addImage("helmlok", helmlokImage);
+    helmlok.x = 100;
+    helmlok.y = 300;
+    let skully = addImage("skully", skullyImage);
+    skully.x = 300;
+    skully.y = 300;
+    yield loadImage([helmlok, skully]);
+  }),
+  () => __async(void 0, null, function* () {
+    setDialogue({ character: juliette, text: "Here's what they can do." });
+    setChoiceMenuOptions([
+      new ChoiceMenuOption("Dissolve effect", imagesDissolveTest),
+      new ChoiceMenuOption("Fade effect", imagesFadeTest),
+      new ChoiceMenuOption("Rotate", imagesRotateTest),
+      new ChoiceMenuOption("Move", imagesMoveTest),
+      new ChoiceMenuOption("Zoom", imagesZoomTest),
+      new ChoiceMenuOption("Move in/out", imagesMoveInOutTest),
+      new ChoiceMenuOption("Zoom in/out", imagesZoomInOutTest),
+      new ChoiceMenuOptionClose("Cancel", true)
+    ]);
+  }),
+  (props) => GameStepManager.jumpLabel(IMAGE_ANIMAIONS_TEST_LABEL, props)
+]);
+var imagesDissolveTest = newLabel("___pixi_vn_images_dissolve_test___", [
+  () => {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will disappear with a dissolve effect. If you go next, ${eggHeadName} reappears with a dissolve effect without stopping the dissolve effect
+- ${eggHeadName} will appear instead of ${flowerTopName}.
+- ${helmlokName} will disappear with a fade effect and reappear with a fade effect, and repeat.
+- ${skullyName} will disappear with a fade effect, wait for 0.5 seconds, and reappear with a fade effect.`
+    });
+    removeWithDissolveTransition(["eggHead"], { duration: 2 });
+    let eggHead = new CanvasImage({ x: 300, y: 100 }, eggHeadImage);
+    showWithDissolveTransition("flowerTop", eggHead, { duration: 1 });
+    GameWindowManager.addTickersSteps(
+      "helmlok",
+      [
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "hide"
+        }, 1),
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }, 1),
+        Repeat
+      ]
+    );
+    GameWindowManager.addTickersSteps(
+      "skully",
+      [
+        new exports.FadeAlphaTicker({
+          duration: 0.5,
+          type: "hide",
+          limit: 0.3
+        }, 1),
+        Pause(0.5),
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }, 1)
+      ]
+    );
+  },
+  () => __async(void 0, null, function* () {
+    showWithDissolveTransition("eggHead", eggHeadImage, { duration: 0.5 });
+  })
+]);
+var imagesFadeTest = newLabel("___pixi_vn_images_fade_test___", [
+  () => {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will disappear with a dissolve effect. If you go next, ${eggHeadName} reappears with a dissolve effect with stopping the dissolve effect
+- ${eggHeadName} will appear instead of ${flowerTopName}.
+- ${helmlokName} will disappear with a fade effect and reappear with a fade effect, and repeat.
+- ${skullyName} will disappear with a fade effect, wait for 0.5 seconds, and reappear with a fade effect.`
+    });
+    removeWithFadeTransition(["eggHead"], { duration: 2 });
+    let eggHead = new CanvasImage({ x: 300, y: 100 }, eggHeadImage);
+    showWithFadeTransition("flowerTop", eggHead, { duration: 1 });
+    GameWindowManager.addTickersSteps(
+      "helmlok",
+      [
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "hide"
+        }),
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }),
+        Repeat
+      ]
+    );
+    GameWindowManager.addTickersSteps(
+      "skully",
+      [
+        new exports.FadeAlphaTicker({
+          duration: 0.5,
+          type: "hide",
+          limit: 0.3
+        }),
+        Pause(0.5),
+        new exports.FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        })
+      ]
+    );
+  },
+  () => __async(void 0, null, function* () {
+    let eggHeadOld = GameWindowManager.getCanvasElement("eggHead");
+    if (eggHeadOld)
+      eggHeadOld.alpha = 0;
+    showWithFadeTransition("eggHead", eggHeadImage, { duration: 0.5 });
+  })
+]);
+var imagesRotateTest = newLabel("___pixi_vn_images_rotate_test___", [
+  () => {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will rotate with a anchor set to 0.
+- ${flowerTopName} will rotate with a anchor set to 0.5 and a exponential speed progression.
+- ${helmlokName} will rotate with a anchor set to 0.5, rotate 2 times, move to the right, rotate 5 times, and repeat.
+- ${skullyName} will rotate with a anchor set to 1, rotate 3 times, wait for 0.5 seconds, rotate 7 times.`
+    });
+    let eggHead = GameWindowManager.getCanvasElement("eggHead");
+    if (eggHead)
+      eggHead.anchor.set(0);
+    let flowerTop = GameWindowManager.getCanvasElement("flowerTop");
+    if (flowerTop)
+      flowerTop.anchor.set(0.5);
+    let helmlok = GameWindowManager.getCanvasElement("helmlok");
+    if (helmlok)
+      helmlok.anchor.set(0.5);
+    let skully = GameWindowManager.getCanvasElement("skully");
+    if (skully)
+      skully.anchor.set(1);
+    GameWindowManager.addTicker("eggHead", new exports.RotateTicker({
+      speed: 6,
+      clockwise: true
+    }));
+    GameWindowManager.addTicker("flowerTop", new exports.RotateTicker({
+      speed: 6,
+      clockwise: false,
+      speedProgression: { type: "exponential", percentage: 0.01, limit: 300 }
+    }));
+    GameWindowManager.addTickersSteps("helmlok", [
+      new exports.RotateTicker({
+        speed: 6,
+        clockwise: true
+      }, 2),
+      new exports.RotateTicker({
+        speed: 100,
+        clockwise: false,
+        speedProgression: { type: "exponential", percentage: -0.05 }
+      }),
+      Repeat
+    ]);
+    GameWindowManager.addTickersSteps("skully", [
+      new exports.RotateTicker({
+        speed: 6,
+        clockwise: true
+      }, 3),
+      Pause(0.5),
+      new exports.RotateTicker({
+        speed: 6,
+        clockwise: false
+      }, 7)
+    ]);
+  }
+]);
+var imagesMoveTest = newLabel("___pixi_vn_images_move_test___", [
+  () => {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will move to { x: 500, y: 100 } with a speed of 0.4.
+- ${flowerTopName} will move to { x: 500, y: 300 } with a speed of 0.3.
+- ${helmlokName} will move to the right with a speed of 20 and a linear speed progression of -0.2, and then move to the left with a speed of 0.1 and a linear speed progression of 0.05.
+- ${skullyName} will move to { x: 500, y: 500 } with a speed of 0.5, wait for 0.5 seconds, and move to { x: 100, y: 100 } with a speed of 0.5.`
+    });
+    GameWindowManager.addTicker("eggHead", new exports.MoveTicker({
+      destination: { x: 500, y: 100 },
+      speed: 24
+    }));
+    GameWindowManager.addTicker("flowerTop", new exports.MoveTicker({
+      destination: { x: 500, y: 300 },
+      speed: 18
+    }));
+    GameWindowManager.addTickersSteps("helmlok", [
+      new exports.MoveTicker({
+        destination: { x: 100, y: 500 },
+        speed: 1200,
+        speedProgression: { type: "linear", amt: -12, limit: 60 }
+      }),
+      new exports.MoveTicker({
+        destination: { x: 1700, y: 500 },
+        speed: 6,
+        speedProgression: { type: "linear", amt: 3 }
+      }),
+      Repeat
+    ]);
+    GameWindowManager.addTickersSteps("skully", [
+      new exports.MoveTicker({
+        destination: { x: 500, y: 500 },
+        speed: 60
+      }),
+      Pause(0.5),
+      new exports.MoveTicker({
+        destination: { x: 100, y: 100 },
+        speed: 60
+      })
+    ]);
+  }
+]);
+var imagesZoomTest = newLabel("___pixi_vn_images_zoom_test___", [
+  () => {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will zoom out with a speed of 3 and a limit of -0.5.
+- ${flowerTopName} will zoom in with a speed of 3 and a limit of 2.
+- ${helmlokName} will unzoom with a speed of 3 and a limit of -1, and zoom in with a speed of 3 and a limit of 1, and repeat.
+- ${skullyName} will zoom in with a speed of 0.1 and a limit of 5, wait for 0.5 seconds, and zoom out with a speed of 3 and a limit of 1.`
+    });
+    let eggHead = GameWindowManager.getCanvasElement("eggHead");
+    if (eggHead)
+      eggHead.scale.set(2);
+    let helmlok = GameWindowManager.getCanvasElement("helmlok");
+    if (helmlok)
+      helmlok.anchor.set(0.5);
+    GameWindowManager.addTicker("eggHead", new exports.ZoomTicker({
+      speed: 3,
+      limit: -0.5,
+      type: "unzoom"
+    }));
+    GameWindowManager.addTicker("flowerTop", new exports.ZoomTicker({
+      speed: 3,
+      limit: 2
+    }));
+    GameWindowManager.addTickersSteps("helmlok", [
+      new exports.ZoomTicker({
+        speed: 3,
+        limit: -1,
+        type: "unzoom"
+      }),
+      new exports.ZoomTicker({
+        speed: 3,
+        limit: 1
+      }),
+      Repeat
+    ]);
+    GameWindowManager.addTickersSteps("skully", [
+      new exports.ZoomTicker({
+        speed: 0.1,
+        limit: 5,
+        speedProgression: { type: "exponential", percentage: 0.02 }
+      }),
+      Pause(0.5),
+      new exports.ZoomTicker({
+        "type": "unzoom",
+        speed: 3,
+        limit: 1
+      })
+    ]);
+  }
+]);
+var imagesMoveInOutTest = newLabel("___pixi_vn_images_move_in_out_test___", [
+  () => __async(void 0, null, function* () {
+    setDialogue({
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will move in from the top with a speed of 800. If you go next, ${eggHeadName} will move out from the bottom with a speed of 800.
+- ${flowerTopName} will move in from the right with a speed of 800 and a speed progression of 0.02. If you go next, ${flowerTopName} will move out from the left with a speed of 800 and a speed progression of 0.02.
+- ${helmlokName} will move in from the left with a speed of 800. If you go next, ${helmlokName} will move out from the right with a speed of 800.
+- ${skullyName} will move in from the bottom with a speed of 800 and a speed progression of 0.02. If you go next, ${skullyName} will move out from the top with a speed of 800 and a speed progression of 0.02.`
+    });
+    let eggHead = new CanvasImage({ x: 100, y: 100 }, eggHeadImage);
+    let flowerTop = new CanvasImage({ x: 300, y: 100 }, flowerTopImage);
+    let helmlok = new CanvasImage({ x: 100, y: 300 }, helmlokImage);
+    let skully = new CanvasImage({ x: 300, y: 300 }, skullyImage);
+    moveIn("eggHead", eggHead, { speed: 800, direction: "down" });
+    moveIn("flowerTop", flowerTop, {
+      speed: 800,
+      direction: "left",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    moveIn("helmlok", helmlok, { speed: 800, direction: "right" });
+    moveIn("skully", skully, {
+      speed: 800,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  }),
+  () => {
+    moveOut("eggHead", { speed: 800, direction: "down" });
+    moveOut("flowerTop", { speed: 800, direction: "left" });
+    moveOut("helmlok", { speed: 800, direction: "right" });
+    moveOut("skully", { speed: 800, direction: "up" });
+  }
+]);
+var imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [
+  () => __async(void 0, null, function* () {
+    GameWindowManager.removeCanvasElements();
+    let eggHead = new CanvasImage({ x: 100, y: 100 }, eggHeadImage);
+    let flowerTop = new CanvasImage({ x: 300, y: 100 }, flowerTopImage);
+    let helmlok = new CanvasImage({ x: 100, y: 300 }, helmlokImage);
+    let skully = new CanvasImage({ x: 300, y: 300 }, skullyImage);
+    zoomIn("eggHead", eggHead, { speed: 3, direction: "down" });
+    zoomIn("flowerTop", flowerTop, {
+      speed: 3,
+      direction: "left",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    zoomIn("helmlok", helmlok, { speed: 3, direction: "right" });
+    zoomIn("skully", skully, {
+      speed: 3,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  }),
+  () => __async(void 0, null, function* () {
+    zoomOut("eggHead", {
+      speed: 3,
+      direction: "down",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    zoomOut("flowerTop", { speed: 3, direction: "left" });
+    zoomOut("helmlok", { speed: 3, direction: "right" });
+    zoomOut("skully", {
+      speed: 3,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  })
+]);
+
+// src/labels/MarkdownTest.ts
+var MARKDOWN_TEST_LABEL = "___pixi_vn_markdown_test___";
+var markdownTest = newLabel(MARKDOWN_TEST_LABEL, [
+  () => __async(void 0, null, function* () {
+    setDialogue({
+      character: juliette,
+      text: `
+# Markdown Test
+
+Hello, this is a test of the markdown parser. Pixi'VN does not manage markdown, but you can implement a markdown parser to display text with markdown syntax.
+
+For example in React, you can use the library [react-markdown](https://www.npmjs.com/package/react-markdown).
+
+## Colored Text
+
+<span style="color:blue">some *blue* text</span>.
+
+<span style="color:red">some *red* text</span>.
+
+<span style="color:green">some *green* text</span>.
+
+## Bold Text
+
+**This is bold text.**
+
+## Italic Text
+
+*This is italic text.*
+
+## Delete Text
+
+~~This is deleted text.~~
+
+## Link Test
+
+[Link to Google](https://www.google.com)
+
+## H2 Test
+
+### H3 Test
+
+#### H4 Test
+ 
+## Code Test
+
+\`Hello World\`
+
+\`\`\`js
+console.log("Hello World")
+\`\`\`
+
+## List Test
+
+- Item 1
+* Item 2
+- [x] Item 3
+
+## Table Test
+
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+
+## Separator Test
+
+***
+Footer
+
+`
+    });
+  })
+]);
+
+// src/labels/StartLabel.ts
+var pixivnTestStartLabel = newLabel(
+  "___pixi_vn_example_start_label___",
+  [
+    () => {
+      let currentTimeName = "";
+      const hour = (/* @__PURE__ */ new Date()).getHours();
+      if (hour >= 5 && hour < 12) {
+        currentTimeName = "morning";
+      } else if (hour >= 12 && hour < 18) {
+        currentTimeName = "afternoon";
+      } else if (hour >= 18 && hour < 22) {
+        currentTimeName = "evening";
+      } else {
+        currentTimeName = "night";
+      }
+      setDialogue({ character: juliette, text: `Good ${currentTimeName}! I'm ${juliette.name}, your virtual assistant. I'm here to help you with your tests.` });
+    },
+    () => setDialogue({ character: juliette, text: `You are running the Pixi\u2019VN test. This test will guide you through the different features of the library.` }),
+    (props) => GameStepManager.jumpLabel(pixivnTestStartLabel2, props)
+  ]
+);
+var RESTART_TEST_LABEL = "___pixi_vn_restart_test_label___";
+var pixivnTestStartLabel2 = newLabel(
+  RESTART_TEST_LABEL,
+  [
+    () => {
+      GameWindowManager.clear();
+      setDialogue({ character: juliette, text: "Which test would you like to start with?" });
+      setChoiceMenuOptions([
+        new ChoiceMenuOption("Images, Transitions and Animations Test", imagesAnimationsTest),
+        new ChoiceMenuOption("Canvas Events Test Label", canvasEventsTestLabel),
+        new ChoiceMenuOption("Custom Ticker Canvas Element Test", customTickerCanvasElementTestLabel),
+        new ChoiceMenuOption("Markdown Test", markdownTest)
+      ]);
+    },
+    (props) => GameStepManager.jumpLabel(RESTART_TEST_LABEL, props)
+  ]
+);
+
 Object.defineProperty(exports, "Assets", {
   enumerable: true,
   get: function () { return pixi_js.Assets; }
@@ -2645,7 +3893,6 @@ exports.GameStorageManager = GameStorageManager;
 exports.GameWindowManager = GameWindowManager;
 exports.Label = Label;
 exports.Pause = Pause;
-exports.PauseValueType = PauseValueType;
 exports.Repeat = Repeat;
 exports.StoredClassModel = StoredClassModel;
 exports.TickerBase = TickerBase;
@@ -2665,16 +3912,26 @@ exports.getLabelById = getLabelById;
 exports.getSaveData = getSaveData;
 exports.getSaveJson = getSaveJson;
 exports.getTexture = getTexture;
-exports.loadImages = loadImages;
+exports.juliette = juliette;
+exports.loadImage = loadImage;
 exports.loadSaveData = loadSaveData;
 exports.loadSaveJson = loadSaveJson;
+exports.moveIn = moveIn;
+exports.moveOut = moveOut;
 exports.newLabel = newLabel;
+exports.pixivnTestStartLabel = pixivnTestStartLabel;
 exports.removeCanvasElement = removeCanvasElement;
+exports.removeWithDissolveTransition = removeWithDissolveTransition;
+exports.removeWithFadeTransition = removeWithFadeTransition;
 exports.saveCharacter = saveCharacter;
 exports.setChoiceMenuOptions = setChoiceMenuOptions;
 exports.setDialogue = setDialogue;
 exports.setFlag = setFlag;
+exports.showImage = showImage;
 exports.showWithDissolveTransition = showWithDissolveTransition;
+exports.showWithFadeTransition = showWithFadeTransition;
 exports.tickerDecorator = tickerDecorator;
+exports.zoomIn = zoomIn;
+exports.zoomOut = zoomOut;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map