@drincs/pixi-vn 0.8.4 → 0.8.9

package/dist/labels/CustomTickerCanvasElementTestLabel.cjs

@@ -1607,14 +1607,14 @@ var init_uid = __esm({
 });
 
 // node_modules/pixi.js/lib/utils/logging/deprecation.mjs
-function deprecation(version, message, ignoreDepth = 3) {
+function deprecation(version2, message, ignoreDepth = 3) {
   if (warnings[message]) {
     return;
   }
   let stack = new Error().stack;
   if (typeof stack === "undefined") {
     console.warn("PixiJS Deprecation Warning: ", `${message}
-Deprecated since v${version}`);
+Deprecated since v${version2}`);
   } else {
     stack = stack.split("\n").splice(ignoreDepth).join("\n");
     if (console.groupCollapsed) {
@@ -1623,13 +1623,13 @@ Deprecated since v${version}`);
         "color:#614108;background:#fffbe6",
         "font-weight:normal;color:#614108;background:#fffbe6",
         `${message}
-Deprecated since v${version}`
+Deprecated since v${version2}`
       );
       console.warn(stack);
       console.groupEnd();
     } else {
       console.warn("PixiJS Deprecation Warning: ", `${message}
-Deprecated since v${version}`);
+Deprecated since v${version2}`);
       console.warn(stack);
     }
   }
@@ -42998,7 +42998,7 @@ var require_dom = __commonJS({
        * @see https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-5CED94D7 DOM Level 1 Core
        * @see https://dom.spec.whatwg.org/#dom-domimplementation-hasfeature DOM Living Standard
        */
-      hasFeature: function(feature, version) {
+      hasFeature: function(feature, version2) {
         return true;
       },
       /**
@@ -43119,8 +43119,8 @@ var require_dom = __commonJS({
         }
       },
       // Introduced in DOM Level 2:
-      isSupported: function(feature, version) {
-        return this.ownerDocument.implementation.hasFeature(feature, version);
+      isSupported: function(feature, version2) {
+        return this.ownerDocument.implementation.hasFeature(feature, version2);
       },
       // Introduced in DOM Level 2:
       hasAttributes: function() {
@@ -54704,6 +54704,9 @@ __export(CustomTickerCanvasElementTestLabel_exports, {
 module.exports = __toCommonJS(CustomTickerCanvasElementTestLabel_exports);
 init_lib();
 
+// src/index.ts
+init_lib();
+
 // src/classes/canvas/CanvasAVideo.ts
 init_lib();
 
@@ -54767,6 +54770,18 @@ init_lib();
 
 // src/decorators/event-decorator.ts
 var registeredEvents = {};
+function eventDecorator(name) {
+  return function(target) {
+    if (!name) {
+      name = target.name;
+    }
+    if (registeredEvents[name]) {
+      console.info(`[Pixi\u2019VN] Event ${name} already exists, it will be overwritten`);
+    }
+    target.prototype.id = name;
+    registeredEvents[name] = target;
+  };
+}
 function getEventTypeById(eventId) {
   try {
     let eventType = registeredEvents[eventId];
@@ -57394,8 +57409,17 @@ extensions.add(soundAsset);
 // node_modules/@pixi/sound/lib/index.mjs
 var sound = setInstance(new SoundLibrary());
 
+// package.json
+var version = "0.8.9";
+
 // src/constants.ts
 var Repeat = "repeat";
+function Pause(duration) {
+  return {
+    type: "pause",
+    duration
+  };
+}
 var filters = {
   DistortionFilter: filters_exports.DistortionFilter,
   EqualizerFilter: filters_exports.EqualizerFilter,
@@ -57405,6 +57429,109 @@ var filters = {
   StreamFilter: filters_exports.StreamFilter,
   TelephoneFilter: filters_exports.TelephoneFilter
 };
+var videoFormats = [
+  "webm",
+  "mp4",
+  "ogv",
+  "mov",
+  "avi",
+  "wmv",
+  "flv",
+  "mkv",
+  "3gp",
+  "mpg",
+  "mpeg",
+  "m4v",
+  "f4v",
+  "m2v",
+  "asf",
+  "vob",
+  "ts",
+  "m2ts",
+  "mts",
+  "divx",
+  "xvid",
+  "rm",
+  "rmvb",
+  "dat",
+  "swf",
+  "mpv",
+  "mxf",
+  "vcd",
+  "svcd",
+  "dvd",
+  "dv",
+  "3g2",
+  "m2p",
+  "m2ts",
+  "m2v",
+  "m4v",
+  "mpe",
+  "mpg",
+  "mpv2",
+  "ogm",
+  "qt",
+  "rm",
+  "ts",
+  "vob",
+  "wmv",
+  "xvid",
+  "flv",
+  "mkv",
+  "mov",
+  "mp4",
+  "webm",
+  "avi",
+  "ogv",
+  "m4v",
+  "f4v",
+  "m2v",
+  "asf",
+  "vob",
+  "ts",
+  "m2ts",
+  "mts",
+  "divx",
+  "xvid",
+  "rm",
+  "rmvb",
+  "dat",
+  "swf",
+  "mpv",
+  "mxf",
+  "vcd",
+  "svcd",
+  "dvd",
+  "dv",
+  "3g2",
+  "m2p",
+  "m2ts",
+  "m2v",
+  "m4v",
+  "mpe",
+  "mpg",
+  "mpv2",
+  "ogm",
+  "qt",
+  "rm",
+  "ts",
+  "vob",
+  "wmv",
+  "xvid",
+  "flv",
+  "mkv",
+  "mov",
+  "mp4",
+  "webm",
+  "avi",
+  "ogv",
+  "m4v",
+  "f4v",
+  "m2v",
+  "asf",
+  "vob"
+];
+var CANVAS_APP_STAGE_ALIAS = "_stage_";
 
 // src/managers/CanvasManager.ts
 init_lib();
@@ -57757,7 +57884,7 @@ function createExportableElement(element) {
     let elementString = JSON.stringify(element);
     return JSON.parse(elementString);
   } catch (e2) {
-    console.error("[Pixi\u2019VN] Error creating exportable element", e2);
+    console.error("[Pixi\u2019VN] Error creating exportable element", element, e2);
     throw new Error("[Pixi\u2019VN] Error creating exportable element");
   }
 }
@@ -58190,6 +58317,10 @@ var CanvasManager = class {
    * ```
    */
   add(alias, canvasElement, options = {}) {
+    if (alias === CANVAS_APP_STAGE_ALIAS) {
+      console.error(`[Pixi\u2019VN] The alias ${CANVAS_APP_STAGE_ALIAS} is reserved`);
+      return;
+    }
     let ignoreOldStyle = options?.ignoreOldStyle;
     let oldCanvasElement = this.find(alias);
     if (oldCanvasElement) {
@@ -58220,6 +58351,10 @@ var CanvasManager = class {
    * ```
    */
   remove(alias, options = {}) {
+    if (alias === CANVAS_APP_STAGE_ALIAS) {
+      console.error(`[Pixi\u2019VN] The alias ${CANVAS_APP_STAGE_ALIAS} is reserved`);
+      return;
+    }
     let ignoreTickers = options.ignoreTickers;
     if (typeof alias === "string") {
       alias = [alias];
@@ -58248,6 +58383,9 @@ var CanvasManager = class {
    * ```
    */
   find(alias) {
+    if (alias === CANVAS_APP_STAGE_ALIAS) {
+      return this.app.stage;
+    }
     return CanvasManagerStatic._children[alias];
   }
   /**
@@ -58274,16 +58412,17 @@ var CanvasManager = class {
     this.removeAllTickers();
   }
   /**
-   * Edit the alias of a canvas element.
+   * Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.
    * @param oldAlias The old alias of the canvas element.
    * @param newAlias The new alias of the canvas element.
+   * @param options The options of the canvas element.
    */
-  editAlias(oldAlias, newAlias) {
+  editAlias(oldAlias, newAlias, options = {}) {
     if (CanvasManagerStatic._children[oldAlias]) {
       CanvasManagerStatic._children[newAlias] = CanvasManagerStatic._children[oldAlias];
       delete CanvasManagerStatic._children[oldAlias];
     }
-    this.transferTickers(oldAlias, newAlias, "move");
+    !options.ignoreTickers && this.transferTickers(oldAlias, newAlias, "move");
   }
   /** Edit Tickers Methods */
   /**
@@ -58358,12 +58497,16 @@ var CanvasManager = class {
   pushTicker(id3, tickerData, ticker) {
     CanvasManagerStatic._currentTickers[id3] = tickerData;
     tickerData.fn = (t2) => {
-      if (tickerData.createdByTicketSteps && this.isTickerPaused(tickerData.createdByTicketSteps.canvasElementAlias, tickerData.createdByTicketSteps.id)) {
-        return;
-      }
       let data = CanvasManagerStatic._currentTickers[id3];
       if (data) {
-        let canvasElementAliases = data.canvasElementAliases.filter((alias) => !this.isTickerPaused(alias, id3));
+        let canvasElementAliases = data.canvasElementAliases;
+        if (tickerData.createdByTicketSteps) {
+          if (this.isTickerPaused(tickerData.createdByTicketSteps.canvasElementAlias, tickerData.createdByTicketSteps.id)) {
+            return;
+          }
+        } else {
+          canvasElementAliases = canvasElementAliases.filter((alias) => !this.isTickerPaused(alias, id3));
+        }
         ticker?.fn(t2, data.args, canvasElementAliases, id3);
       }
     };
@@ -58710,15 +58853,19 @@ var CanvasManager = class {
     });
     CanvasManagerStatic._tickersMustBeCompletedBeforeNextStep.stepAlias.forEach(({ alias, id: id3 }) => {
       let ticker = CanvasManagerStatic._currentTickersSteps[alias];
-      if (ticker && ticker[id3] && !ticker[id3].steps.includes(Repeat)) {
-        ticker[id3].steps.forEach((step) => {
-          if (typeof step === "object" && "ticker" in step) {
-            let ticker2 = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority);
-            if (ticker2) {
-              ticker2.onEndOfTicker([alias], id3, step.args);
+      if (ticker && ticker[id3]) {
+        if (ticker[id3].steps.includes(Repeat)) {
+          console.error(`[Pixi\u2019VN] The ticker alias: ${alias} id: ${id3} contains a RepeatType, so it can't be forced to complete`, ticker[id3]);
+        } else {
+          ticker[id3].steps.forEach((step) => {
+            if (typeof step === "object" && "ticker" in step) {
+              let ticker2 = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority);
+              if (ticker2) {
+                ticker2.onEndOfTicker([alias], id3, step.args);
+              }
             }
-          }
-        });
+          });
+        }
       }
     });
     CanvasManagerStatic._tickersMustBeCompletedBeforeNextStep = { tikersIds: [], stepAlias: [] };
@@ -58759,6 +58906,7 @@ var CanvasManager = class {
       tickers: createExportableElement(CanvasManagerStatic.currentTickersWithoutCreatedBySteps),
       tickersSteps: createExportableElement(CanvasManagerStatic._currentTickersSteps),
       elements: createExportableElement(currentElements),
+      stage: createExportableElement(getMemoryContainer(this.app.stage)),
       elementAliasesOrder: createExportableElement(CanvasManagerStatic.childrenAliasesOrder),
       tickersOnPause: createExportableElement(CanvasManagerStatic._tickersOnPause)
     };
@@ -58792,6 +58940,11 @@ var CanvasManager = class {
         console.error("[Pixi\u2019VN] The data does not have the properties elementAliasesOrder and elements");
         return;
       }
+      if (data.hasOwnProperty("stage") && data.hasOwnProperty("stage")) {
+        setMemoryContainer(this.app.stage, data["stage"]);
+      } else {
+        console.error("[Pixi\u2019VN] The data does not have the properties stage");
+      }
       if (data.hasOwnProperty("tickers")) {
         let tickers = data["tickers"];
         Object.entries(tickers).forEach(([oldId, t2]) => {
@@ -59240,8 +59393,8 @@ function getExponentialProgression(number, progression, valueConvert) {
 // src/classes/ticker/MoveTicker.ts
 var MoveTicker = class extends TickerBase {
   fn(ticker, args, aliases, tickerId) {
-    let xSpeed = 1;
-    let ySpeed = 1;
+    let xSpeed = 10;
+    let ySpeed = 10;
     if (args.speed) {
       if (typeof args.speed === "number") {
         xSpeed = this.speedConvert(args.speed);
@@ -59305,6 +59458,10 @@ var MoveTicker = class extends TickerBase {
         let destination = args.destination;
         element.x = destination.x;
         element.y = destination.y;
+        if (args.isPushInOut && element.children.length > 0) {
+          let elementChild = element.children[0];
+          canvas.add(alias2, elementChild, { ignoreOldStyle: true });
+        }
       }
     });
     super.onEndOfTicker(alias, tickerId, args);
@@ -59495,6 +59652,534 @@ ZoomTicker = __decorateClass([
   tickerDecorator()
 ], ZoomTicker);
 
+// src/functions/canvas/canvas-effect.ts
+async function shakeEffect(alias, props = {}, priority) {
+  let elemet = canvas.find(alias);
+  if (!elemet) {
+    console.error(`[Pixi\u2019VN] The element with the alias ${alias} does not exist. So the shake effect can't be applied.`);
+    return;
+  }
+  let position = { x: elemet.position.x, y: elemet.position.y };
+  let speed = props.speed || 20;
+  let speedProgression = props.speedProgression || void 0;
+  let startOnlyIfHaveTexture = props.startOnlyIfHaveTexture || false;
+  let type = props.type || "horizontal";
+  let maximumShockSize = props.maximumShockSize || 10;
+  let shocksNumber = (props.shocksNumber || 10) - 1;
+  if (shocksNumber < 2) {
+    console.error("[Pixi\u2019VN] The number of shocks must be at least 3.");
+    return;
+  }
+  let upshocksNumber = Math.floor(shocksNumber / 2);
+  let downshocksNumber = Math.ceil(shocksNumber / 2);
+  let moveTickers = [];
+  for (let i3 = 0; i3 < upshocksNumber; i3++) {
+    let destination = { x: position.x, y: position.y };
+    let shockSize = maximumShockSize * (i3 + 1) / upshocksNumber;
+    if (type === "horizontal") {
+      if (i3 % 2 !== 0) {
+        destination.x = position.x + shockSize;
+      } else {
+        destination.x = position.x - shockSize;
+      }
+    } else {
+      if (i3 % 2 !== 0) {
+        destination.y = position.y + shockSize;
+      } else {
+        destination.y = position.y - shockSize;
+      }
+    }
+    moveTickers.push(new MoveTicker({
+      destination,
+      speed,
+      speedProgression,
+      startOnlyIfHaveTexture
+    }, void 0, priority));
+  }
+  let lastItemIsLeft = upshocksNumber % 2 === 0;
+  for (let i3 = downshocksNumber; i3 > 0; i3--) {
+    let destination = { x: position.x, y: position.y };
+    let shockSize = maximumShockSize * (i3 + 1) / (downshocksNumber - 1);
+    if (type === "horizontal") {
+      if (i3 % 2 === 0 && !lastItemIsLeft || i3 % 2 !== 0 && lastItemIsLeft) {
+        destination.x = position.x - shockSize;
+      } else {
+        destination.x = position.x + shockSize;
+      }
+    } else {
+      if (i3 % 2 === 0 && !lastItemIsLeft || i3 % 2 !== 0 && lastItemIsLeft) {
+        destination.y = position.y - shockSize;
+      } else {
+        destination.y = position.y + shockSize;
+      }
+    }
+    moveTickers.push(new MoveTicker({
+      destination,
+      speed,
+      speedProgression,
+      startOnlyIfHaveTexture
+    }, void 0, priority));
+  }
+  moveTickers.push(new MoveTicker({
+    destination: position,
+    speed,
+    speedProgression,
+    startOnlyIfHaveTexture,
+    tickerAliasToResume: alias
+  }, void 0, priority));
+  let id3 = canvas.addTickersSteps(alias, moveTickers);
+  if (id3) {
+    canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3, alias });
+    canvas.putOnPauseTicker(alias, id3);
+  }
+}
+
+// src/functions/canvas/image-utility.ts
+function addImage(alias, imageUrl) {
+  let image = new CanvasImage();
+  image.imageLink = imageUrl;
+  canvas.add(alias, image);
+  return image;
+}
+async function loadImage(canvasImages) {
+  if (!Array.isArray(canvasImages)) {
+    return [canvasImages];
+  }
+  let promises = Array(canvasImages.length);
+  for (let i3 = 0; i3 < canvasImages.length; i3++) {
+    promises[i3] = getTexture(canvasImages[i3].imageLink);
+  }
+  return Promise.all(promises).then((textures) => {
+    return textures.map((texture, index) => {
+      if (texture) {
+        canvasImages[index].texture = texture;
+        return canvasImages[index];
+      }
+      canvasImages[index].load();
+      return canvasImages[index];
+    });
+  });
+}
+async function showImage(alias, imageUrl) {
+  let image = addImage(alias, imageUrl);
+  await image.load();
+  return image;
+}
+
+// src/functions/canvas/video-utility.ts
+function addVideo(alias, videoUrl) {
+  let video = new CanvasVideo();
+  video.videoLink = videoUrl;
+  canvas.add(alias, video);
+  return video;
+}
+
+// src/functions/canvas/canvas-transition.ts
+async function showWithDissolveTransition(alias, image, props = {}, priority) {
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let oldCanvasAlias = void 0;
+  if (canvas.find(alias)) {
+    oldCanvasAlias = alias + "_temp_disolve";
+    canvas.editAlias(alias, oldCanvasAlias);
+  }
+  let canvasElement;
+  if (typeof image === "string") {
+    if (checkIfVideo(image)) {
+      canvasElement = addVideo(alias, image);
+    } else {
+      canvasElement = addImage(alias, image);
+    }
+  } else {
+    canvasElement = image;
+    canvas.add(alias, canvasElement);
+  }
+  if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+    await canvasElement.load();
+  }
+  oldCanvasAlias && canvas.copyCanvasElementProperty(oldCanvasAlias, alias);
+  oldCanvasAlias && canvas.transferTickers(oldCanvasAlias, alias, "duplicate");
+  canvasElement.alpha = 0;
+  let effect = new FadeAlphaTicker({
+    ...props,
+    type: "show",
+    aliasToRemoveAfter: oldCanvasAlias,
+    startOnlyIfHaveTexture: true
+  }, 10, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+function removeWithDissolveTransition(alias, props = {}, priority) {
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  if (typeof alias === "string") {
+    alias = [alias];
+  }
+  let effect = new FadeAlphaTicker({
+    ...props,
+    type: "hide",
+    aliasToRemoveAfter: alias,
+    startOnlyIfHaveTexture: true
+  }, 10, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+async function showWithFadeTransition(alias, image, props = {}, priority) {
+  if (!canvas.find(alias)) {
+    return showWithDissolveTransition(alias, image, props, priority);
+  }
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let oldCanvasAlias = alias + "_temp_fade";
+  canvas.editAlias(alias, oldCanvasAlias);
+  let canvasElement;
+  if (typeof image === "string") {
+    if (checkIfVideo(image)) {
+      canvasElement = addVideo(alias, image);
+    } else {
+      canvasElement = addImage(alias, image);
+    }
+  } else {
+    canvasElement = image;
+    canvas.add(alias, canvasElement);
+  }
+  if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+    await canvasElement.load();
+  }
+  oldCanvasAlias && canvas.copyCanvasElementProperty(oldCanvasAlias, alias);
+  oldCanvasAlias && canvas.transferTickers(oldCanvasAlias, alias, "duplicate");
+  canvasElement.alpha = 0;
+  let id1 = canvas.addTickersSteps(oldCanvasAlias, [
+    new FadeAlphaTicker({
+      ...props,
+      type: "hide",
+      startOnlyIfHaveTexture: true
+    }, void 0, priority)
+  ]);
+  let id22 = canvas.addTickersSteps(alias, [
+    Pause(props.duration || 1),
+    new FadeAlphaTicker({
+      ...props,
+      type: "show",
+      startOnlyIfHaveTexture: true,
+      aliasToRemoveAfter: oldCanvasAlias
+    }, void 0, priority)
+  ]);
+  let res = void 0;
+  if (id1) {
+    res = [id1];
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id1, alias });
+  }
+  if (id22) {
+    res ? res.push(id22) : res = [id22];
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id22, alias });
+  }
+  return res;
+}
+function removeWithFadeTransition(alias, props = {}, priority) {
+  return removeWithDissolveTransition(alias, props, priority);
+}
+async function moveIn(alias, image, props = {}, priority) {
+  let direction = props.direction || "right";
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement;
+  if (typeof image === "string") {
+    if (checkIfVideo(image)) {
+      canvasElement = addVideo(alias, image);
+    } else {
+      canvasElement = addImage(alias, image);
+    }
+  } else {
+    canvasElement = image;
+    canvas.add(alias, canvasElement);
+  }
+  if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+    await canvasElement.load();
+  }
+  let destination = { x: canvasElement.x, y: canvasElement.y };
+  switch (direction) {
+    case "up":
+      canvasElement.y = canvas.canvasHeight + canvasElement.height;
+      break;
+    case "down":
+      canvasElement.y = -canvasElement.height;
+      break;
+    case "left":
+      canvasElement.x = canvas.canvasWidth + canvasElement.width;
+      break;
+    case "right":
+      canvasElement.x = -canvasElement.width;
+      break;
+  }
+  let effect = new MoveTicker({
+    ...props,
+    tickerAliasToResume,
+    destination,
+    startOnlyIfHaveTexture: true
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+function moveOut(alias, props = {}, priority) {
+  let direction = props.direction || "right";
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement = canvas.find(alias);
+  if (!canvasElement) {
+    console.warn("[Pixi\u2019VN] The canvas element is not found.");
+    return;
+  }
+  let destination = { x: canvasElement.x, y: canvasElement.y };
+  switch (direction) {
+    case "up":
+      destination.y = -canvasElement.height;
+      break;
+    case "down":
+      destination.y = canvas.canvasHeight + canvasElement.height;
+      break;
+    case "left":
+      destination.x = -canvasElement.width;
+      break;
+    case "right":
+      destination.x = canvas.canvasWidth + canvasElement.width;
+      break;
+  }
+  let effect = new MoveTicker({
+    ...props,
+    tickerAliasToResume,
+    destination,
+    startOnlyIfHaveTexture: true,
+    aliasToRemoveAfter: alias
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+async function zoomIn(alias, image, props = { direction: "right" }, priority) {
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement;
+  if (typeof image === "string") {
+    if (checkIfVideo(image)) {
+      canvasElement = new CanvasVideo({}, image);
+    } else {
+      canvasElement = new CanvasImage({}, image);
+    }
+  } else {
+    canvasElement = image;
+  }
+  if (canvas.find(alias)) {
+    canvas.copyCanvasElementProperty(alias, canvasElement);
+  }
+  let container = new CanvasContainer();
+  container.addChild(canvasElement);
+  container.height = canvas.canvasHeight;
+  container.width = canvas.canvasWidth;
+  canvas.add(alias, container, { ignoreOldStyle: true });
+  if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+    await canvasElement.load();
+  }
+  if (props.direction == "up") {
+    container.pivot.y = canvas.canvasHeight;
+    container.pivot.x = canvas.canvasWidth / 2;
+    container.y = canvas.canvasHeight;
+    container.x = canvas.canvasWidth / 2;
+  } else if (props.direction == "down") {
+    container.pivot.y = 0;
+    container.pivot.x = canvas.canvasWidth / 2;
+    container.y = 0;
+    container.x = canvas.canvasWidth / 2;
+  } else if (props.direction == "left") {
+    container.pivot.x = canvas.canvasWidth;
+    container.pivot.y = canvas.canvasHeight / 2;
+    container.x = canvas.canvasWidth;
+    container.y = canvas.canvasHeight / 2;
+  } else if (props.direction == "right") {
+    container.pivot.x = 0;
+    container.pivot.y = canvas.canvasHeight / 2;
+    container.x = 0;
+    container.y = canvas.canvasHeight / 2;
+  }
+  container.scale.set(0);
+  let effect = new ZoomTicker({
+    ...props,
+    tickerAliasToResume,
+    startOnlyIfHaveTexture: true,
+    type: "zoom",
+    limit: 1,
+    isZoomInOut: true
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+function zoomOut(alias, props = { direction: "right" }, priority) {
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement = canvas.find(alias);
+  if (!canvasElement) {
+    console.warn("[Pixi\u2019VN] The canvas element is not found.");
+    return;
+  }
+  let container = new CanvasContainer();
+  container.addChild(canvasElement);
+  container.height = canvas.canvasHeight;
+  container.width = canvas.canvasWidth;
+  canvas.add(alias, container);
+  if (props.direction == "up") {
+    container.pivot.y = canvas.canvasHeight;
+    container.pivot.x = canvas.canvasWidth / 2;
+    container.y = canvas.canvasHeight;
+    container.x = canvas.canvasWidth / 2;
+  } else if (props.direction == "down") {
+    container.pivot.y = 0;
+    container.pivot.x = canvas.canvasWidth / 2;
+    container.y = 0;
+    container.x = canvas.canvasWidth / 2;
+  } else if (props.direction == "left") {
+    container.pivot.x = canvas.canvasWidth;
+    container.pivot.y = canvas.canvasHeight / 2;
+    container.x = canvas.canvasWidth;
+    container.y = canvas.canvasHeight / 2;
+  } else if (props.direction == "right") {
+    container.pivot.x = 0;
+    container.pivot.y = canvas.canvasHeight / 2;
+    container.x = 0;
+    container.y = canvas.canvasHeight / 2;
+  }
+  container.scale.set(1);
+  let effect = new ZoomTicker({
+    ...props,
+    tickerAliasToResume,
+    startOnlyIfHaveTexture: true,
+    type: "unzoom",
+    limit: 0,
+    aliasToRemoveAfter: alias,
+    isZoomInOut: true
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+async function pushIn(alias, image, props = { direction: "right" }, priority) {
+  let oldCanvasAlias = alias + "_temp_push";
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement;
+  if (typeof image === "string") {
+    if (checkIfVideo(image)) {
+      canvasElement = new CanvasVideo({}, image);
+    } else {
+      canvasElement = new CanvasImage({}, image);
+    }
+  } else {
+    canvasElement = image;
+  }
+  let oldCanvas = canvas.find(alias);
+  if (oldCanvas) {
+    canvas.copyCanvasElementProperty(oldCanvas, canvasElement);
+    canvas.editAlias(alias, oldCanvasAlias, { ignoreTickers: true });
+    pushOut(oldCanvasAlias, props, priority);
+  }
+  let container = new CanvasContainer();
+  container.height = canvas.canvasHeight;
+  container.width = canvas.canvasWidth;
+  container.addChild(canvasElement);
+  canvas.add(alias, container, { ignoreOldStyle: true });
+  if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+    await canvasElement.load();
+  }
+  if (props.direction == "up") {
+    container.x = 0;
+    container.y = -canvas.canvasHeight;
+  } else if (props.direction == "down") {
+    container.x = 0;
+    container.y = canvas.canvasHeight;
+  } else if (props.direction == "left") {
+    container.x = canvas.canvasWidth;
+    container.y = 0;
+  } else if (props.direction == "right") {
+    container.x = -canvas.canvasWidth;
+    container.y = 0;
+  }
+  let effect = new MoveTicker({
+    ...props,
+    tickerAliasToResume,
+    startOnlyIfHaveTexture: true,
+    isPushInOut: true,
+    destination: { x: 0, y: 0 }
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+function pushOut(alias, props = { direction: "right" }, priority) {
+  let mustBeCompletedBeforeNextStep = props.mustBeCompletedBeforeNextStep ?? true;
+  let tickerAliasToResume = typeof props.tickerAliasToResume === "string" ? [props.tickerAliasToResume] : props.tickerAliasToResume || [];
+  tickerAliasToResume.push(alias);
+  let canvasElement = canvas.find(alias);
+  if (!canvasElement) {
+    console.warn("[Pixi\u2019VN] The canvas element is not found.");
+    return;
+  }
+  let container = new CanvasContainer();
+  container.pivot.x = 0;
+  container.pivot.y = 0;
+  container.x = 0;
+  container.y = 0;
+  container.addChild(canvasElement);
+  canvas.add(alias, container, { ignoreOldStyle: true });
+  let destination = { x: 0, y: 0 };
+  if (props.direction == "up") {
+    destination.y = canvas.canvasHeight;
+  } else if (props.direction == "down") {
+    destination.y = -canvas.canvasHeight;
+  } else if (props.direction == "left") {
+    destination.x = -canvas.canvasWidth;
+  } else if (props.direction == "right") {
+    destination.x = canvas.canvasWidth;
+  }
+  let effect = new MoveTicker({
+    ...props,
+    tickerAliasToResume,
+    startOnlyIfHaveTexture: true,
+    destination,
+    aliasToRemoveAfter: alias,
+    isPushInOut: true
+  }, void 0, priority);
+  let id3 = canvas.addTicker(alias, effect);
+  if (id3) {
+    canvas.putOnPauseTicker(alias, id3);
+    mustBeCompletedBeforeNextStep && canvas.addTickerMustBeCompletedBeforeNextStep({ id: id3 });
+    return [id3];
+  }
+}
+
 // src/functions/flags-utility.ts
 function setFlag(name, value) {
   let flags = storage.getVariable(storage.keysSystem.FLAGS_CATEGORY_KEY) || [];
@@ -59737,6 +60422,7 @@ var NarrationManagerStatic = class _NarrationManagerStatic {
         canvas: {
           elementAliasesOrder: [],
           elements: {},
+          stage: {},
           tickers: {},
           tickersSteps: {},
           tickersOnPause: {}
@@ -60316,8 +61002,10 @@ var NarrationManager = class {
           console.warn("[Pixi\u2019VN] stepSha not found");
         }
         try {
+          if (NarrationManagerStatic.stepsRunning === 0) {
+            canvas.forceCompletionOfReportedTickers();
+          }
           NarrationManagerStatic.stepsRunning++;
-          canvas.forceCompletionOfReportedTickers();
           let result = await step(props);
           if (this.choiceMenuOptions?.length === 1 && this.choiceMenuOptions[0].autoSelect) {
             let choice = this.choiceMenuOptions[0];
@@ -61335,6 +62023,13 @@ function getTextureMemory(texture) {
   };
   return textureMemory;
 }
+function checkIfVideo(imageUrl) {
+  if (imageUrl.match(new RegExp(`(${videoFormats.join("|")})$`))) {
+    return true;
+  } else {
+    return false;
+  }
+}
 
 // src/classes/canvas/CanvasSprite.ts
 var CANVAS_SPRITE_ID = "Sprite";
@@ -61615,6 +62310,20 @@ var CanvasVideo = class _CanvasVideo extends CanvasImage {
 // src/classes/canvas/CanvasBase.ts
 init_lib();
 
+// src/classes/CanvasEvent.ts
+var CanvasEvent = class {
+  constructor() {
+    this.id = this.constructor.prototype.id;
+  }
+  fn(_event, _element) {
+    throw new Error("[Pixi\u2019VN] The method CanvasEvent.fn() must be overridden");
+  }
+  /**
+   * Get the id of the event. This variable is used in the system to get the event by id, {@link getEventInstanceById}
+   */
+  id = "event_id_not_set";
+};
+
 // src/classes/StoredClassModel.ts
 var StoredClassModel = class {
   /**
@@ -61656,7 +62365,7 @@ var StoredClassModel = class {
     if (Object.keys(storageValue[this.id]).length === 0) {
       delete storageValue[this.id];
     }
-    storageValue.setVariable(this.categoryId, storageValue);
+    storage.setVariable(this.categoryId, storageValue);
   }
   /**
    * Get a property from the storage.
@@ -61871,6 +62580,9 @@ var Sound2 = class _Sound2 extends Sound {
   }
 };
 
+// src/labels/BaseCanvasElementTestLabel.ts
+init_lib();
+
 // src/labels/TestConstant.ts
 var juliette = new CharacterBaseModel("___pixivn_juliette___", {
   name: "Juliette",
@@ -61881,6 +62593,958 @@ var juliette = new CharacterBaseModel("___pixivn_juliette___", {
 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`;
+var videoLink = "https://pixijs.com/assets/video.mp4";
+var musicalAudio = "https://pixijs.io/sound/examples/resources/musical.mp3";
+
+// src/labels/BaseCanvasElementTestLabel.ts
+var BASE_CANVAS_ELEMENT_LABEL = "___pixi_vn_base_canvas_element_label___";
+var baseCanvasElementTestLabel = newLabel(
+  BASE_CANVAS_ELEMENT_LABEL,
+  [
+    async () => {
+      let number = 25;
+      narration.dialogue = {
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create ${number} bunnies (CanvasSprites) and put them in a CanvasContainer.`
+      };
+      const container = new CanvasContainer();
+      canvas.add("container", container);
+      const texture = await Assets.load(bunnyImage);
+      for (let i3 = 0; i3 < number; i3++) {
+        const bunny = new CanvasSprite(texture);
+        bunny.x = i3 % 5 * 40;
+        bunny.y = Math.floor(i3 / 5) * 40;
+        container.addChild(bunny);
+      }
+      container.x = canvas.screen.width / 2;
+      container.y = canvas.screen.height / 2;
+      container.pivot.x = container.width / 2;
+      container.pivot.y = container.height / 2;
+      canvas.addTicker("container", new RotateTicker({ speed: 1 }));
+    },
+    async () => {
+      canvas.remove("container");
+      narration.dialogue = {
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create some CanvasText with different styles and put them on the stage.
+But it will generate a warn message, because the FillGradient or FillPattern has not yet been supported by the Pixi\u2019VN ( you can see the status of the issue here: [#76](https://github.com/DRincs-Productions/pixi-vn/issues/76)).`
+      };
+      const basicStyle = new TextStyle({
+        fill: "#ffffff"
+      });
+      const basicText = new CanvasText({
+        text: "Basic text in pixi",
+        style: basicStyle
+      });
+      basicText.x = 50;
+      basicText.y = 100;
+      canvas.add("basicText", basicText);
+      const fill = new FillGradient(0, 0, 0, 36 * 1.7 * 7);
+      const colors2 = [16777215, 65433].map((color) => Color.shared.setValue(color).toNumber());
+      colors2.forEach((number, index) => {
+        const ratio = index / colors2.length;
+        fill.addColorStop(ratio, number);
+      });
+      const style = new TextStyle({
+        fontFamily: "Arial",
+        fontSize: 36,
+        fontStyle: "italic",
+        fontWeight: "bold",
+        fill: { fill },
+        stroke: { color: "#4a1850", width: 5, join: "round" },
+        dropShadow: {
+          color: "#ff5f74",
+          blur: 4,
+          angle: Math.PI / 6,
+          distance: 6
+        },
+        wordWrap: true,
+        wordWrapWidth: 440
+      });
+      const richText = new CanvasText({
+        text: "Rich text with a lot of options and across multiple lines",
+        style
+      });
+      richText.x = 50;
+      richText.y = 220;
+      canvas.add("richText", richText);
+      const skewStyle = new TextStyle({
+        fontFamily: "Arial",
+        dropShadow: {
+          alpha: 0.8,
+          angle: 2.1,
+          blur: 4,
+          color: "0x111111",
+          distance: 10
+        },
+        fill: "#ffffff",
+        stroke: { color: "#004620", width: 12, join: "round" },
+        fontSize: 60,
+        fontWeight: "lighter"
+      });
+      const skewText = new CanvasText({
+        text: "SKEW IS COOL",
+        style: skewStyle
+      });
+      skewText.skew.set(0.65, -0.3);
+      skewText.anchor.set(0.5, 0.5);
+      skewText.x = 300;
+      skewText.y = 480;
+      canvas.add("skewText", skewText);
+    }
+  ]
+);
+
+// src/labels/CanvasEventsTestLabel.ts
+init_lib();
+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 {
+  fn(event, sprite) {
+    if (event === "pointerdown") {
+      sprite.isdown = true;
+      sprite.texture = Texture.from("https://pixijs.com/assets/button_down.png");
+      sprite.alpha = 1;
+    } else if (event === "pointerup" || event === "pointerupoutside") {
+      sprite.isdown = false;
+      if (sprite.isOver) {
+        sprite.texture = Texture.from("https://pixijs.com/assets/button_over.png");
+      } else {
+        sprite.texture = Texture.from("https://pixijs.com/assets/button.png");
+      }
+    } else if (event === "pointerover") {
+      sprite.isOver = true;
+      if (sprite.isdown) {
+        return;
+      }
+      sprite.texture = Texture.from("https://pixijs.com/assets/button_over.png");
+    } else if (event === "pointerout") {
+      sprite.isOver = false;
+      if (sprite.isdown) {
+        return;
+      }
+      sprite.texture = Texture.from("https://pixijs.com/assets/button.png");
+    }
+  }
+};
+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,
+  [
+    () => narration.dialogue = {
+      character: juliette,
+      text: "This is the test of clickable elements in a canvas."
+    },
+    async () => {
+      narration.dialogue = {
+        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 = await Assets.load(bunnyImage);
+      const sprite = CanvasSprite.from(texture);
+      sprite.scale.set(3);
+      sprite.anchor.set(0.5);
+      sprite.x = canvas.screen.width / 2;
+      sprite.y = canvas.screen.height / 2;
+      sprite.eventMode = "static";
+      sprite.cursor = "pointer";
+      sprite.onEvent("pointerdown", EventTest1);
+      canvas.add("bunny", sprite);
+    },
+    async () => {
+      canvas.clear();
+      narration.dialogue = {
+        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).)`
+      };
+      const backgroundT = await Assets.load("https://pixijs.com/assets/bg_button.jpg");
+      const background = new CanvasSprite(backgroundT);
+      background.width = canvas.screen.width;
+      background.height = canvas.screen.height;
+      canvas.add("bg", background);
+      const textureButton = await Assets.load("https://pixijs.com/assets/button.png");
+      const buttons = [];
+      const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445];
+      for (let i3 = 0; i3 < 5; i3++) {
+        const button = new CanvasSprite(textureButton);
+        button.anchor.set(0.5);
+        button.x = buttonPositions[i3 * 2];
+        button.y = buttonPositions[i3 * 2 + 1];
+        button.eventMode = "static";
+        button.cursor = "pointer";
+        button.onEvent("pointerdown", EventTest2).onEvent("pointerup", EventTest2).onEvent("pointerupoutside", EventTest2).onEvent("pointerover", EventTest2).onEvent("pointerout", EventTest2);
+        canvas.add("button" + i3, 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;
+    }
+  ],
+  {
+    onLoadStep: async () => {
+      await 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"
+      ]);
+    }
+  }
+);
+
+// src/labels/ImagesAnimationsTestLabel.ts
+var IMAGE_ANIMAIONS_TEST_LABEL = "___pixi_vn_images_animations_test___";
+var imagesAnimationsTest = newLabel(IMAGE_ANIMAIONS_TEST_LABEL, [
+  async () => {
+    canvas.removeAll();
+    narration.dialogue = { 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);
+    await 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;
+    await loadImage([helmlok, skully]);
+  },
+  async () => {
+    narration.dialogue = { character: juliette, text: "Here's what they can do." };
+    narration.choiceMenuOptions = [
+      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 ChoiceMenuOption("Push in/out", imagesPushInOutTest, {}),
+      new ChoiceMenuOption("Shake", shakeStageTest, {}),
+      new ChoiceMenuOption("Add same alias", imagesAddSameAliasTestLabel, {}),
+      new ChoiceMenuOptionClose("Cancel", { closeCurrentLabel: true })
+    ];
+  },
+  (props) => narration.jumpLabel(IMAGE_ANIMAIONS_TEST_LABEL, props)
+]);
+var imagesDissolveTest = newLabel("___pixi_vn_images_dissolve_test___", [
+  () => {
+    narration.dialogue = {
+      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 });
+    canvas.addTickersSteps(
+      "helmlok",
+      [
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "hide"
+        }, 1),
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }, 1),
+        Repeat
+      ]
+    );
+    canvas.addTickersSteps(
+      "skully",
+      [
+        new FadeAlphaTicker({
+          duration: 0.5,
+          type: "hide",
+          limit: 0.3
+        }, 1),
+        Pause(0.5),
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }, 1)
+      ]
+    );
+  },
+  async () => {
+    showWithDissolveTransition("eggHead", eggHeadImage, { duration: 0.5 });
+  }
+]);
+var imagesFadeTest = newLabel("___pixi_vn_images_fade_test___", [
+  () => {
+    narration.dialogue = {
+      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 });
+    canvas.addTickersSteps(
+      "helmlok",
+      [
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "hide"
+        }),
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        }),
+        Repeat
+      ]
+    );
+    canvas.addTickersSteps(
+      "skully",
+      [
+        new FadeAlphaTicker({
+          duration: 0.5,
+          type: "hide",
+          limit: 0.3
+        }),
+        Pause(0.5),
+        new FadeAlphaTicker({
+          duration: 1,
+          type: "show"
+        })
+      ]
+    );
+  },
+  async () => {
+    let eggHeadOld = canvas.find("eggHead");
+    if (eggHeadOld)
+      eggHeadOld.alpha = 0;
+    showWithFadeTransition("eggHead", eggHeadImage, { duration: 0.5 });
+  }
+]);
+var imagesRotateTest = newLabel("___pixi_vn_images_rotate_test___", [
+  () => {
+    narration.dialogue = {
+      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 clockwise for 2 seconds, rotate counterclockwise with a exponential (-0.05) speed progression, and when it reaches 0, it will repeat.
+- ${skullyName} will rotate with a anchor set to 1, rotate 3 seconds clockwise, wait for 0.5 seconds, and rotate 7 seconds counterclockwise.`
+    };
+    let eggHead = canvas.find("eggHead");
+    if (eggHead)
+      eggHead.anchor.set(0);
+    let flowerTop = canvas.find("flowerTop");
+    if (flowerTop)
+      flowerTop.anchor.set(0.5);
+    let helmlok = canvas.find("helmlok");
+    if (helmlok)
+      helmlok.anchor.set(0.5);
+    let skully = canvas.find("skully");
+    if (skully)
+      skully.anchor.set(1);
+    canvas.addTicker("eggHead", new RotateTicker({
+      speed: 6,
+      clockwise: true
+    }));
+    canvas.addTicker("flowerTop", new RotateTicker({
+      speed: 6,
+      clockwise: false,
+      speedProgression: { type: "exponential", percentage: 0.01, limit: 300 }
+    }));
+    canvas.addTickersSteps("helmlok", [
+      new RotateTicker({
+        speed: 6,
+        clockwise: true
+      }, 2),
+      new RotateTicker({
+        speed: 100,
+        clockwise: false,
+        speedProgression: { type: "exponential", percentage: -0.05 }
+      }),
+      Repeat
+    ]);
+    canvas.addTickersSteps("skully", [
+      new RotateTicker({
+        speed: 6,
+        clockwise: true
+      }, 3),
+      Pause(0.5),
+      new RotateTicker({
+        speed: 6,
+        clockwise: false
+      }, 7)
+    ]);
+  }
+]);
+var imagesMoveTest = newLabel("___pixi_vn_images_move_test___", [
+  () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will move to { x: 500, y: 100 } with a speed of 24.
+- ${flowerTopName} will move to { x: 500, y: 300 } with a speed of 18.
+- ${helmlokName} will move to { x: 100, y: 500 } with a speed of 150 and a linear speed progression of -2 ( limit 10 ), and then move to { x: 1700, y: 500 } with a speed of 10 and a linear speed progression of 2 ( limit 150 ), and repeat.
+- ${skullyName} will move to { x: 500, y: 500 } with a speed of 40, wait for 0.5 seconds, and move to { x: 100, y: 100 } with a speed of 40.`
+    };
+    canvas.addTicker("eggHead", new MoveTicker({
+      destination: { x: 500, y: 100 },
+      speed: 24
+    }));
+    canvas.addTicker("flowerTop", new MoveTicker({
+      destination: { x: 500, y: 300 },
+      speed: 18
+    }));
+    canvas.addTickersSteps("helmlok", [
+      new MoveTicker({
+        destination: { x: 100, y: 500 },
+        speed: 150,
+        speedProgression: { type: "linear", amt: -2, limit: 10 }
+      }),
+      new MoveTicker({
+        destination: { x: 1700, y: 500 },
+        speed: 10,
+        speedProgression: { type: "linear", amt: 2, limit: 150 }
+      }),
+      Repeat
+    ]);
+    canvas.addTickersSteps("skully", [
+      new MoveTicker({
+        destination: { x: 500, y: 500 },
+        speed: 40
+      }),
+      Pause(0.5),
+      new MoveTicker({
+        destination: { x: 100, y: 100 },
+        speed: 40
+      })
+    ]);
+  }
+]);
+var imagesZoomTest = newLabel("___pixi_vn_images_zoom_test___", [
+  () => {
+    narration.dialogue = {
+      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 = canvas.find("eggHead");
+    if (eggHead)
+      eggHead.scale.set(2);
+    let helmlok = canvas.find("helmlok");
+    if (helmlok)
+      helmlok.anchor.set(0.5);
+    canvas.addTicker("eggHead", new ZoomTicker({
+      speed: 3,
+      limit: -0.5,
+      type: "unzoom"
+    }));
+    canvas.addTicker("flowerTop", new ZoomTicker({
+      speed: 3,
+      limit: 2
+    }));
+    canvas.addTickersSteps("helmlok", [
+      new ZoomTicker({
+        speed: 3,
+        limit: -1,
+        type: "unzoom"
+      }),
+      new ZoomTicker({
+        speed: 3,
+        limit: 1
+      }),
+      Repeat
+    ]);
+    canvas.addTickersSteps("skully", [
+      new ZoomTicker({
+        speed: 0.1,
+        limit: 5,
+        speedProgression: { type: "exponential", percentage: 0.02 }
+      }),
+      Pause(0.5),
+      new ZoomTicker({
+        "type": "unzoom",
+        speed: 3,
+        limit: 1
+      })
+    ]);
+  }
+]);
+var imagesMoveInOutTest = newLabel("___pixi_vn_images_move_in_out_test___", [
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will move in from the top with a speed of 80. If you go next, ${eggHeadName} will move out from the bottom with a speed of 80.
+- ${flowerTopName} will move in from the right with a speed of 80 and a speed progression of 0.02. If you go next, ${flowerTopName} will move out from the left with a speed of 80 and a speed progression of 0.02.
+- ${helmlokName} will move in from the left with a speed of 80. If you go next, ${helmlokName} will move out from the right with a speed of 80.
+- ${skullyName} will move in from the bottom with a speed of 80 and a speed progression of 0.02. If you go next, ${skullyName} will move out from the top with a speed of 80 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: 80, direction: "down" });
+    moveIn("flowerTop", flowerTop, {
+      speed: 80,
+      direction: "left",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    moveIn("helmlok", helmlok, { speed: 80, direction: "right" });
+    moveIn("skully", skully, {
+      speed: 80,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  },
+  () => {
+    moveOut("eggHead", { speed: 80, direction: "down" });
+    moveOut("flowerTop", { speed: 80, direction: "left" });
+    moveOut("helmlok", { speed: 80, direction: "right" });
+    moveOut("skully", { speed: 80, direction: "up" });
+  }
+]);
+var imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Here's what's going to happen:
+- ${eggHeadName} will zoom in with a speed of 3. If you go next, ${eggHeadName} will zoom out with a speed of 3.
+- ${flowerTopName} will zoom in with a speed of 3 and a speed progression of 0.02. If you go next, ${flowerTopName} will zoom out with a speed of 3.
+- ${helmlokName} will zoom in with a speed of 3. If you go next, ${helmlokName} will zoom out with a speed of 1.
+- ${skullyName} will zoom in with a speed of 3 and a speed progression of 0.02. If you go next, ${skullyName} will zoom out with a speed of 3 and a speed progression of 0.02.`
+    };
+    canvas.removeAll();
+    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 () => {
+    zoomOut("eggHead", {
+      speed: 3,
+      direction: "down",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    zoomOut("flowerTop", { speed: 3, direction: "left" });
+    zoomOut("helmlok", { speed: 1, direction: "right" });
+    zoomOut("skully", {
+      speed: 3,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  }
+]);
+var imagesPushInOutTest = newLabel("___pixi_vn_images_push_in_out_test___", [
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Here's what's going to happen:`
+    };
+    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);
+    pushIn("eggHead", eggHead, { speed: 20, direction: "down" });
+    pushIn("flowerTop", flowerTop, {
+      speed: 3,
+      direction: "left",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    pushIn("helmlok", helmlok, { speed: 30, direction: "right" });
+    pushIn("skully", skully, {
+      speed: 3,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  },
+  async () => {
+    pushOut("eggHead", {
+      speed: 3,
+      direction: "down",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+    pushOut("flowerTop", { speed: 30, direction: "left" });
+    pushOut("helmlok", { speed: 10, direction: "right" });
+    pushOut("skully", {
+      speed: 3,
+      direction: "up",
+      speedProgression: { type: "exponential", percentage: 0.02 }
+    });
+  }
+]);
+var imagesAddSameAliasTestLabel = newLabel("___pixi_vn_images_add_same_tag_test___", [
+  () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Now they will be added at each step with the same alias. Here's what's going to happen, All styles and tickers will be transferred to the new image.`
+    };
+    canvas.remove("flowerTop");
+    canvas.remove("helmlok");
+    canvas.remove("skully");
+    let skully = canvas.find("eggHead");
+    if (skully) {
+      skully.anchor.set(0.5);
+      skully.alpha = 0.5;
+    }
+    canvas.addTicker("eggHead", new RotateTicker({
+      speed: 6
+    }));
+    canvas.addTickersSteps("eggHead", [
+      new MoveTicker({
+        destination: { x: 100, y: 100 },
+        speed: 200
+      }),
+      new MoveTicker({
+        destination: { x: 100, y: 500 },
+        speed: 200
+      }),
+      new MoveTicker({
+        destination: { x: 1700, y: 500 },
+        speed: 200
+      }),
+      new MoveTicker({
+        destination: { x: 1700, y: 100 },
+        speed: 200
+      }),
+      Repeat
+    ]);
+  },
+  async () => await showImage("eggHead", flowerTopImage),
+  async () => await showWithDissolveTransition("eggHead", helmlokImage),
+  async () => await showWithFadeTransition("eggHead", skullyImage),
+  async () => await moveIn("eggHead", eggHeadImage, { speed: 100 }),
+  async () => await zoomIn("eggHead", eggHeadImage),
+  async () => await pushIn("eggHead", eggHeadImage)
+]);
+var shakeStageTest = newLabel("___pixi_vn_images_shake_stage_test___", [
+  () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Ok this is a test for the shake effect. The ${eggHeadName} will shake.`
+    };
+    shakeEffect("eggHead");
+  },
+  () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `Now the whole stage will shake.`
+    };
+    shakeEffect(CANVAS_APP_STAGE_ALIAS);
+  }
+]);
+
+// src/labels/InputTestLabel.ts
+var INPUT_TEST_LABEL = "___pixi_vn_input_test___";
+var inputTestLabel = newLabel(
+  INPUT_TEST_LABEL,
+  [
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "What is your name?"
+      };
+      narration.requestInput({ type: "string" });
+    },
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: `Nice to meet you, ${narration.inputValue}!`
+      };
+    }
+  ]
+);
+
+// src/labels/MarkdownTest.ts
+var MARKDOWN_TEST_LABEL = "___pixi_vn_markdown_test___";
+var markdownTest = newLabel(MARKDOWN_TEST_LABEL, [
+  async () => {
+    narration.dialogue = {
+      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/SoundTestLabel.ts
+var SOUND_TEST_LABEL = "___pixi_vn_sound_test___";
+var soundTestLabel = newLabel(
+  SOUND_TEST_LABEL,
+  [
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "This is a sound test label. You should be hearing a loop1Audio sound."
+      };
+      sound2.add("audio", musicalAudio);
+      sound2.play("audio");
+    },
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "Now the sound should be stopped."
+      };
+      sound2.stop("audio");
+    },
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "Now the sound should be playing again, with loop"
+      };
+      let s2 = sound2.find("audio");
+      s2.loop = true;
+      s2.play();
+    },
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "Now the sound should be stopped."
+      };
+      sound2.stop("audio");
+    },
+    () => {
+      narration.dialogue = {
+        character: juliette,
+        text: "Now the sound should be playing again, with loop and ReverbFilter"
+      };
+      let s2 = sound2.add("audio", {
+        loop: true,
+        url: musicalAudio
+      });
+      s2.filters = [new filters.ReverbFilter()];
+      sound2.play("audio");
+    },
+    async (props) => {
+      sound2.stop("audio");
+      await narration.goNext(props);
+    }
+  ]
+);
+
+// src/labels/StepLabelTest.ts
+var STEP_LABEL_TEST_LABEL = "___pixi_vn_step_label_test___";
+var stepLabelTestLAbel = newLabel(STEP_LABEL_TEST_LABEL, [
+  async () => {
+    narration.dialogue = { character: juliette, text: `Pixi'VN manages the succession of "screens" with steps. Each step is a function that can be asynchronous.` };
+  },
+  async () => {
+    narration.dialogue = { character: juliette, text: "The labels are containers of steps, they are used to organize the steps in a more readable way. For start a steps sequence, you must call or jump to a label." };
+  },
+  async () => {
+    narration.dialogue = { character: juliette, text: "It is also possible to ask the player to make a choice." };
+  },
+  async () => {
+    narration.dialogue = { character: juliette, text: "Browsing through available tests is one way to test the steps/labels system." };
+  }
+]);
+
+// src/labels/VideoTestLabel.ts
+var VIDEO_TEST_LABEL = "___pixi_vn_video_test___";
+var videoTest = newLabel(VIDEO_TEST_LABEL, [
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `This is the test of video elements in a canvas. I have added a video element to the canvas with dissolve transition.`
+    };
+    showWithDissolveTransition("video", videoLink, { duration: 1 });
+  },
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `The video is now paused.`
+    };
+    let video = canvas.find("video");
+    if (video) {
+      video.pause();
+    }
+  },
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `The video is now playing.`
+    };
+    let video = canvas.find("video");
+    if (video) {
+      video.play();
+      video.loop = true;
+    }
+  },
+  async () => {
+    narration.dialogue = {
+      character: juliette,
+      text: `The video is now restarted.`
+    };
+    let video = canvas.find("video");
+    if (video) {
+      video.restart();
+    }
+  }
+]);
+
+// 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\u{1F505}";
+      } else if (hour >= 12 && hour < 18) {
+        currentTimeName = "afternoon\u{1F506}";
+      } else if (hour >= 18 && hour < 22) {
+        currentTimeName = "evening\u26C5";
+      } else {
+        currentTimeName = "night\u{1F319}";
+      }
+      narration.dialogue = { character: juliette, text: `Good ${currentTimeName}! I'm ${juliette.name}, your virtual assistant. I'm here to help you with your tests.` };
+    },
+    () => narration.dialogue = { character: juliette, text: `You are running the Pixi\u2019VN v${version} test. This test will guide you through the different features of the library.` },
+    (props) => narration.jumpLabel(pixivnTestStartLabel2, props)
+  ]
+);
+var openLink = newLabel(
+  "___pixi_vn_open_link___",
+  [
+    async (props) => {
+      window.open(props.link);
+      await narration.goNext(props);
+    }
+  ]
+);
+var RESTART_TEST_LABEL = "___pixi_vn_restart_test_label___";
+var pixivnTestStartLabel2 = newLabel(
+  RESTART_TEST_LABEL,
+  [
+    () => {
+      canvas.clear();
+      narration.dialogue = { character: juliette, text: "Which test would you like to start with?" };
+      narration.choiceMenuOptions = [
+        new ChoiceMenuOption("Open Pixi\u2019VN Wiki", openLink, { link: "https://pixi-vn.web.app/" }),
+        new ChoiceMenuOption("Open Pixi\u2019VN Discord", openLink, { link: "https://discord.gg/E95FZWakzp" }),
+        new ChoiceMenuOption("Open Pixi\u2019VN Github Issues", openLink, { link: "https://github.com/DRincs-Productions/pixi-vn/issues" }),
+        new ChoiceMenuOption("Images, Transitions and Animations Test", imagesAnimationsTest, {}),
+        new ChoiceMenuOption("Video Test", videoTest, {}),
+        new ChoiceMenuOption("Canvas Events Test", canvasEventsTestLabel, {}),
+        new ChoiceMenuOption("Sound Test", soundTestLabel, {}),
+        new ChoiceMenuOption("Base Canvas Element Test", baseCanvasElementTestLabel, {}),
+        new ChoiceMenuOption("Custom Ticker Canvas Element Test", customTickerCanvasElementTestLabel, {}),
+        new ChoiceMenuOption("Steps and Labels Test", stepLabelTestLAbel, {}),
+        new ChoiceMenuOption("Markdown Test", markdownTest, {}),
+        new ChoiceMenuOption("Input Test", inputTestLabel, {})
+      ];
+    },
+    (props) => narration.jumpLabel(RESTART_TEST_LABEL, props)
+  ]
+);
 
 // src/labels/CustomTickerCanvasElementTestLabel.ts
 var AlienTintingTest = class extends CanvasSprite {
@@ -61902,7 +63566,7 @@ var AlienTintingTest = class extends CanvasSprite {
   turningSpeed = 0;
   speed = 0;
   static from(source7, skipCache) {
-    let sprite = Sprite.from(source7, skipCache);
+    let sprite = CanvasSprite.from(source7, skipCache);
     let mySprite = new AlienTintingTest();
     mySprite.texture = sprite.texture;
     return mySprite;