@drincs/pixi-vn 0.6.3 → 0.6.5

package/dist/labels/StartLabel.js

@@ -83,14 +83,15 @@ var Label = class {
   /**
    * @param id is the id of the label
    * @param steps is the list of steps that the label will perform
-   * @param onStepRun is a function that will be executed before any step is executed, is useful for example to make sure all images used have been cached
-   * @param choiseIndex is the index of the choice that the label will perform
+   * @param props is the properties of the label
    */
-  constructor(id, steps, onStepRun, choiseIndex) {
+  constructor(id, steps, props) {
     this._id = id;
     this._steps = steps;
-    this._onStepRun = onStepRun;
-    this._choiseIndex = choiseIndex;
+    this._onStepStart = props == null ? void 0 : props.onStepStart;
+    this._onLoadStep = props == null ? void 0 : props.onLoadStep;
+    this._onStepEnd = props == null ? void 0 : props.onStepEnd;
+    this._choiseIndex = props == null ? void 0 : props.choiseIndex;
   }
   /**
    * Get the id of the label. This variable is used in the system to get the label by id, {@link getLabelById}
@@ -127,18 +128,32 @@ var Label = class {
     return res;
   }
   /**
-   * Get the function that will be executed before any step is executed, is useful for example to make sure all images used have been cached
+   * Is a function that will be executed in {@link Label#onStepStart} and when the user goes back to it or when the user laods a save file.
+   * @returns Promise<void> or void
+   */
+  get onStepStart() {
+    return (stepIndex, label) => __async(this, null, function* () {
+      if (this._onLoadStep) {
+        yield this._onLoadStep(stepIndex, label);
+      }
+      if (this._onStepStart) {
+        return yield this._onStepStart(stepIndex, label);
+      }
+    });
+  }
+  /**
+   * Get the function that will be executed a old step is reloaded. A step is reloaded when the user goes back to it or when the user laods a save file.
+   * @returns Promise<void> or void
+   */
+  get onLoadStep() {
+    return this._onLoadStep;
+  }
+  /**
+   * Is a function that will be executed when the step ends.
    * @returns Promise<void> or void
-   * @example
-   * ```typescript
-   * newLabel("id", [], () => {
-   *     Assets.load('path/to/image1.png')
-   *     Assets.load('path/to/image2.png')
-   * })
-   * ```
    */
-  get onStepRun() {
-    return this._onStepRun;
+  get onStepEnd() {
+    return this._onStepEnd;
   }
   get choiseIndex() {
     return this._choiseIndex;
@@ -148,16 +163,18 @@ var Label = class {
 // src/classes/CloseLabel.ts
 var CLOSE_LABEL_ID = "__close-label-id__";
 function newCloseLabel(choiseIndex) {
-  return new Label(CLOSE_LABEL_ID, [], void 0, choiseIndex);
+  return new Label(CLOSE_LABEL_ID, [], {
+    choiseIndex
+  });
 }
 
 // src/decorators/LabelDecorator.ts
 var registeredLabels = {};
-function newLabel(id, steps, onStepRun) {
+function newLabel(id, steps, props) {
   if (registeredLabels[id]) {
     console.info(`[Pixi'VN] Label ${id} already exists, it will be overwritten`);
   }
-  let label = new Label(id, steps, onStepRun);
+  let label = new Label(id, steps, props);
   registeredLabels[id] = label;
   return label;
 }
@@ -246,8 +263,6 @@ function getMemoryContainer(element) {
   };
 }
 function setMemoryContainer(element, memory) {
-  memory.width && (element.width = memory.width);
-  memory.height && (element.height = memory.height);
   memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
   memory.blendMode && (element.blendMode = memory.blendMode);
   memory.tint && (element.tint = memory.tint);
@@ -280,6 +295,8 @@ function setMemoryContainer(element, memory) {
   memory.interactive && (element.interactive = memory.interactive);
   memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
   memory.hitArea && (element.hitArea = memory.hitArea);
+  memory.width && (element.width = memory.width);
+  memory.height && (element.height = memory.height);
 }
 function getTexture(imageUrl) {
   return __async(this, null, function* () {
@@ -722,12 +739,32 @@ var ChoiceMenuOption = class {
   /**
    * @param text Text to be displayed in the menu
    * @param label Label to be opened when the option is selected or the id of the label
+   * @param props Properties to be passed to the label and olther parameters that you can use when get all the choice menu options. It be converted to a JSON string, so it cannot contain functions or classes.
    * @param type Type of the label to be opened. @default "call"
-   * @param props Properties to be passed to the label, when the label is called. it cannot contain functions or classes. @default {}
    */
-  constructor(text, label, type = "call", props) {
+  constructor(text, label, props, type = "call") {
     /**
-     * Properties to be passed to the label
+     * Properties to be passed to the label and olther parameters that you can use when get all the choice menu options.
+     * @example
+     * ```tsx
+     * setChoiceMenuOptions([
+     *     new ChoiceMenuOption("Hello", helloLabel, { disabled: true }),
+     * ])
+     * return <List>
+     *     {getChoiceMenuOptions()?.map((item, index) => {
+     *         return (
+     *             <ChoiceButton
+     *                 disabled={item.props.disabled}
+     *                 onClick={() => {
+     *                     afterSelectChoice(item)
+     *                 }}
+     *             >
+     *                 {item.text}
+     *             </ChoiceButton>
+     *         )
+     *     })}
+     * </List>
+     * ```
      */
     this.props = {};
     if (typeof label === "string") {
@@ -761,7 +798,27 @@ var ChoiceMenuOptionClose = class {
      */
     this.type = Close;
     /**
-     * Properties to be passed to the label
+     * Properties to be passed to the label and olther parameters that you can use when get all the choice menu options.
+     * @example
+     * ```tsx
+     * setChoiceMenuOptions([
+     *     new ChoiceMenuOption("Hello", helloLabel, { disabled: true }),
+     * ])
+     * return <List>
+     *     {getChoiceMenuOptions()?.map((item, index) => {
+     *         return (
+     *             <ChoiceButton
+     *                 disabled={item.props.disabled}
+     *                 onClick={() => {
+     *                     afterSelectChoice(item)
+     *                 }}
+     *             >
+     *                 {item.text}
+     *             </ChoiceButton>
+     *         )
+     *     })}
+     * </List>
+     * ```
      */
     this.props = {};
     this.text = text;
@@ -830,7 +887,10 @@ function getChoiceMenuOptions() {
       }
       let label = getLabelById(option.label);
       if (label) {
-        let itemLabel = new Label(label.id, label.steps, label.onStepRun, index);
+        let itemLabel = new Label(label.id, label.steps, {
+          onStepStart: label.onStepStart,
+          choiseIndex: index
+        });
         options.push(__spreadProps(__spreadValues({}, option), {
           label: itemLabel
         }));
@@ -921,8 +981,9 @@ FadeAlphaTicker = __decorateClass([
 ], FadeAlphaTicker);
 
 // src/functions/TickerUtility.ts
-function updateTickerProgression(args, propertyName, progression) {
-  if (args[propertyName] === void 0 || !progression || args[propertyName] === progression.limit) {
+function updateTickerProgression(args, propertyName, progression, valueConvert) {
+  let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit;
+  if (args[propertyName] === void 0 || !progression || args[propertyName] === limit) {
     return;
   }
   if (typeof args[propertyName] === "number") {
@@ -941,22 +1002,25 @@ function updateTickerProgression(args, propertyName, 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;
+function getLinearProgression(number, progression, valueConvert) {
+  let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit;
+  let amt = valueConvert ? valueConvert(progression.amt) : progression.amt;
+  if (limit !== void 0) {
+    if (number > limit && amt > 0) {
+      return limit;
+    } else if (number < limit && amt < 0) {
+      return limit;
     }
   }
-  return number + progression.amt / 60;
+  return number + amt;
 }
-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;
+function getExponentialProgression(number, progression, valueConvert) {
+  let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit;
+  if (limit !== void 0) {
+    if (number > limit && progression.percentage > 0) {
+      return limit;
+    } else if (number < limit && progression.percentage < 0) {
+      return limit;
     }
   }
   return number + number * progression.percentage;
@@ -969,15 +1033,13 @@ var MoveTicker = class extends TickerBase {
     let ySpeed = 1;
     if (args.speed) {
       if (typeof args.speed === "number") {
-        xSpeed = args.speed;
-        ySpeed = args.speed;
+        xSpeed = this.speedConvert(args.speed);
+        ySpeed = this.speedConvert(args.speed);
       } else {
-        xSpeed = args.speed.x;
-        ySpeed = args.speed.y;
+        xSpeed = this.speedConvert(args.speed.x);
+        ySpeed = this.speedConvert(args.speed.y);
       }
     }
-    xSpeed /= 60;
-    ySpeed /= 60;
     let destination = args.destination;
     let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
     if (typeof tagToRemoveAfter2 === "string") {
@@ -1017,7 +1079,10 @@ var MoveTicker = class extends TickerBase {
       }
     });
     if (args.speedProgression)
-      updateTickerProgression(args, "speed", args.speedProgression);
+      updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert);
+  }
+  speedConvert(speed) {
+    return speed / 6;
   }
 };
 MoveTicker = __decorateClass([
@@ -1025,7 +1090,7 @@ MoveTicker = __decorateClass([
 ], MoveTicker);
 var RotateTicker = class extends TickerBase {
   fn(ticker, args, tags, tickerId) {
-    let speed = (args.speed === void 0 ? 1 : args.speed) / 60;
+    let speed = this.speedConvert(args.speed === void 0 ? 1 : args.speed);
     let clockwise = args.clockwise === void 0 ? true : args.clockwise;
     let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
     if (typeof tagToRemoveAfter2 === "string") {
@@ -1053,7 +1118,10 @@ var RotateTicker = class extends TickerBase {
       }
     });
     if (args.speedProgression)
-      updateTickerProgression(args, "speed", args.speedProgression);
+      updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert);
+  }
+  speedConvert(speed) {
+    return speed / 60;
   }
 };
 RotateTicker = __decorateClass([
@@ -1065,15 +1133,13 @@ var ZoomTicker = class extends TickerBase {
     let ySpeed = 0.1;
     if (args.speed) {
       if (typeof args.speed === "number") {
-        xSpeed = args.speed;
-        ySpeed = args.speed;
+        xSpeed = this.speedConvert(args.speed);
+        ySpeed = this.speedConvert(args.speed);
       } else {
-        xSpeed = args.speed.x;
-        ySpeed = args.speed.y;
+        xSpeed = this.speedConvert(args.speed.x);
+        ySpeed = this.speedConvert(args.speed.y);
       }
     }
-    xSpeed /= 60;
-    ySpeed /= 60;
     let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
     if (typeof tagToRemoveAfter2 === "string") {
       tagToRemoveAfter2 = [tagToRemoveAfter2];
@@ -1140,7 +1206,10 @@ var ZoomTicker = class extends TickerBase {
       }
     });
     if (args.speedProgression)
-      updateTickerProgression(args, "speed", args.speedProgression);
+      updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert);
+  }
+  speedConvert(speed) {
+    return speed / 60;
   }
   onEndOfTicker(tag, tickerId, _element, tagToRemoveAfter2) {
     GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
@@ -1163,6 +1232,7 @@ var ZoomInOutTicker = class extends ZoomTicker {
 };
 
 // src/constants.ts
+var PIXIVN_VERSION = "0.6.5";
 var Repeat = "repeat";
 function Pause(duration) {
   return {
@@ -1340,14 +1410,14 @@ function zoomIn(_0, _1) {
     } 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 (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") {
+      yield canvasElement.load();
+    }
     if (props.direction == "up") {
       container.pivot.y = GameWindowManager.canvasHeight;
       container.pivot.x = GameWindowManager.canvasWidth / 2;
@@ -2369,6 +2439,16 @@ var _GameStepManager = class _GameStepManager {
   static set originalStepData(value) {
     _GameStepManager._originalStepData = createExportableElement(value);
   }
+  static get currentStepData() {
+    let currentStepData = {
+      path: window.location.pathname,
+      storage: GameStorageManager.export(),
+      canvas: GameWindowManager.export(),
+      labelIndex: _GameStepManager.currentLabelStepIndex || 0,
+      openedLabels: createExportableElement(_GameStepManager._openedLabels)
+    };
+    return currentStepData;
+  }
   /* Edit History Methods */
   /**
    * Add a label to the history.
@@ -2376,19 +2456,13 @@ var _GameStepManager = class _GameStepManager {
    */
   static addStepHistory(step, choiseMade) {
     let stepHistory = getStepSha1(step);
-    let historyStep = {
-      path: window.location.pathname,
-      storage: GameStorageManager.export(),
-      canvas: GameWindowManager.export(),
-      labelIndex: _GameStepManager.currentLabelStepIndex || 0,
-      openedLabels: createExportableElement(_GameStepManager._openedLabels)
-    };
+    let currentStepData = _GameStepManager.currentStepData;
     if (_GameStepManager.originalStepData) {
-      if (_GameStepManager.originalStepData.openedLabels.length === historyStep.openedLabels.length) {
+      if (_GameStepManager.originalStepData.openedLabels.length === currentStepData.openedLabels.length) {
         try {
           let lastStepDataOpenedLabelsString = JSON.stringify(_GameStepManager.originalStepData.openedLabels);
-          let historyStepOpenedLabelsString = JSON.stringify(historyStep.openedLabels);
-          if (lastStepDataOpenedLabelsString === historyStepOpenedLabelsString && _GameStepManager.originalStepData.path === historyStep.path && _GameStepManager.originalStepData.labelIndex === historyStep.labelIndex) {
+          let historyStepOpenedLabelsString = JSON.stringify(currentStepData.openedLabels);
+          if (lastStepDataOpenedLabelsString === historyStepOpenedLabelsString && _GameStepManager.originalStepData.path === currentStepData.path && _GameStepManager.originalStepData.labelIndex === currentStepData.labelIndex) {
             return;
           }
         } catch (e) {
@@ -2396,7 +2470,7 @@ var _GameStepManager = class _GameStepManager {
         }
       }
     }
-    let data = deepDiff.diff(_GameStepManager.originalStepData, historyStep);
+    let data = deepDiff.diff(_GameStepManager.originalStepData, currentStepData);
     if (data) {
       let dialoge = void 0;
       let requiredChoices = void 0;
@@ -2415,7 +2489,7 @@ var _GameStepManager = class _GameStepManager {
         index: _GameStepManager.lastStepIndex,
         choiceIndexMade: choiseMade
       });
-      _GameStepManager.originalStepData = historyStep;
+      _GameStepManager.originalStepData = currentStepData;
     }
     _GameStepManager.increaseLastStepIndex();
   }
@@ -2506,6 +2580,9 @@ var _GameStepManager = class _GameStepManager {
         console.warn("[Pixi'VN] The player must make a choice");
         return;
       }
+      if (_GameStepManager.currentLabel && _GameStepManager.currentLabel.onStepEnd) {
+        yield _GameStepManager.currentLabel.onStepEnd(_GameStepManager.currentLabelStepIndex || 0, _GameStepManager.currentLabel);
+      }
       _GameStepManager.increaseCurrentStepIndex();
       return yield _GameStepManager.runCurrentStep(props, choiseMade);
     });
@@ -2530,6 +2607,10 @@ var _GameStepManager = class _GameStepManager {
           return;
         }
         if (currentLabel.steps.length > currentLabelStepIndex) {
+          let onStepRun = currentLabel.onStepStart;
+          if (onStepRun) {
+            yield onStepRun(currentLabelStepIndex, currentLabel);
+          }
           let step = currentLabel.steps[currentLabelStepIndex];
           let result = yield step(props);
           _GameStepManager.addStepHistory(step, choiseMade);
@@ -2594,6 +2675,9 @@ var _GameStepManager = class _GameStepManager {
         if (!tempLabel) {
           throw new Error(`[Pixi'VN] Label ${labelId} not found`);
         }
+        if (_GameStepManager.currentLabel && _GameStepManager.currentLabel.onStepEnd) {
+          yield _GameStepManager.currentLabel.onStepEnd(_GameStepManager.currentLabelStepIndex || 0, _GameStepManager.currentLabel);
+        }
         _GameStepManager.pushNewLabel(tempLabel.id);
       } catch (e) {
         console.error("[Pixi'VN] Error calling label", e);
@@ -2652,6 +2736,9 @@ var _GameStepManager = class _GameStepManager {
         if (!tempLabel) {
           throw new Error(`[Pixi'VN] Label ${labelId} not found`);
         }
+        if (_GameStepManager.currentLabel && _GameStepManager.currentLabel.onStepEnd) {
+          yield _GameStepManager.currentLabel.onStepEnd(_GameStepManager.currentLabelStepIndex || 0, _GameStepManager.currentLabel);
+        }
         _GameStepManager.pushNewLabel(tempLabel.id);
       } catch (e) {
         console.error("[Pixi'VN] Error jumping label", e);
@@ -2757,24 +2844,29 @@ var _GameStepManager = class _GameStepManager {
    * ```
    */
   static goBack(navigate, steps = 1) {
-    if (steps <= 0) {
-      console.warn("[Pixi'VN] Steps must be greater than 0");
-      return;
-    }
-    if (_GameStepManager._stepsHistory.length <= 1) {
-      console.warn("[Pixi'VN] No steps to go back");
-      return;
-    }
-    let restoredStep = _GameStepManager.goBackInternal(steps, _GameStepManager.originalStepData);
-    if (restoredStep) {
-      _GameStepManager._originalStepData = restoredStep;
-      _GameStepManager._openedLabels = createExportableElement(restoredStep.openedLabels);
-      GameStorageManager.import(createExportableElement(restoredStep.storage));
-      GameWindowManager.import(createExportableElement(restoredStep.canvas));
-      navigate(restoredStep.path);
-    } else {
-      console.error("[Pixi'VN] Error going back");
-    }
+    return __async(this, null, function* () {
+      if (steps <= 0) {
+        console.warn("[Pixi'VN] Steps must be greater than 0");
+        return;
+      }
+      if (_GameStepManager._stepsHistory.length <= 1) {
+        console.warn("[Pixi'VN] No steps to go back");
+        return;
+      }
+      let restoredStep = _GameStepManager.goBackInternal(steps, _GameStepManager.originalStepData);
+      if (restoredStep) {
+        _GameStepManager._originalStepData = restoredStep;
+        _GameStepManager._openedLabels = createExportableElement(restoredStep.openedLabels);
+        if (_GameStepManager.currentLabel && _GameStepManager.currentLabel.onLoadStep) {
+          yield _GameStepManager.currentLabel.onLoadStep(_GameStepManager.currentLabelStepIndex || 0, _GameStepManager.currentLabel);
+        }
+        GameStorageManager.import(createExportableElement(restoredStep.storage));
+        GameWindowManager.import(createExportableElement(restoredStep.canvas));
+        navigate(restoredStep.path);
+      } else {
+        console.error("[Pixi'VN] Error going back");
+      }
+    });
   }
   static goBackInternal(steps, restoredStep) {
     if (steps <= 0) {
@@ -2836,38 +2928,45 @@ var _GameStepManager = class _GameStepManager {
    * @param dataString The history in a JSON string.
    */
   static importJson(dataString) {
-    _GameStepManager.import(JSON.parse(dataString));
+    return __async(this, null, function* () {
+      yield _GameStepManager.import(JSON.parse(dataString));
+    });
   }
   /**
    * Import the history from an object.
    * @param data The history in an object.
    */
   static import(data) {
-    _GameStepManager.clear();
-    try {
-      if (data.hasOwnProperty("stepsHistory")) {
-        _GameStepManager._stepsHistory = data["stepsHistory"];
-      } else {
-        console.warn("[Pixi'VN] Could not import stepsHistory data, so will be ignored");
-      }
-      if (data.hasOwnProperty("openedLabels")) {
-        _GameStepManager._openedLabels = data["openedLabels"];
-      } else {
-        console.warn("[Pixi'VN] Could not import openedLabels data, so will be ignored");
-      }
-      if (data.hasOwnProperty("lastStepIndex")) {
-        _GameStepManager._lastStepIndex = data["lastStepIndex"];
-      } else {
-        console.warn("[Pixi'VN] Could not import lastStepIndex data, so will be ignored");
-      }
-      if (data.hasOwnProperty("originalStepData")) {
-        _GameStepManager._originalStepData = data["originalStepData"];
-      } else {
-        console.warn("[Pixi'VN] Could not import originalStepData data, so will be ignored");
+    return __async(this, null, function* () {
+      _GameStepManager.clear();
+      try {
+        if (data.hasOwnProperty("stepsHistory")) {
+          _GameStepManager._stepsHistory = data["stepsHistory"];
+        } else {
+          console.warn("[Pixi'VN] Could not import stepsHistory data, so will be ignored");
+        }
+        if (data.hasOwnProperty("openedLabels")) {
+          _GameStepManager._openedLabels = data["openedLabels"];
+        } else {
+          console.warn("[Pixi'VN] Could not import openedLabels data, so will be ignored");
+        }
+        if (data.hasOwnProperty("lastStepIndex")) {
+          _GameStepManager._lastStepIndex = data["lastStepIndex"];
+        } else {
+          console.warn("[Pixi'VN] Could not import lastStepIndex data, so will be ignored");
+        }
+        if (data.hasOwnProperty("originalStepData")) {
+          _GameStepManager._originalStepData = data["originalStepData"];
+        } else {
+          console.warn("[Pixi'VN] Could not import originalStepData data, so will be ignored");
+        }
+        if (_GameStepManager.currentLabel && _GameStepManager.currentLabel.onLoadStep) {
+          yield _GameStepManager.currentLabel.onLoadStep(_GameStepManager.currentLabelStepIndex || 0, _GameStepManager.currentLabel);
+        }
+      } catch (e) {
+        console.error("[Pixi'VN] Error importing data", e);
       }
-    } catch (e) {
-      console.error("[Pixi'VN] Error importing data", e);
-    }
+    });
   }
 };
 /**
@@ -3043,7 +3142,7 @@ var DialogueBaseModel = class {
 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",
+  icon: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-square.webp?alt=media",
   color: "#ac0086"
 });
 saveCharacter(juliette);
@@ -3088,10 +3187,16 @@ var baseCanvasElementTestLabel = newLabel(
       removeCanvasElement("container");
       setDialogue({
         character: juliette,
-        text: `Here's what's going to happen: I'm going to create some text elements with different styles and put them on the stage.
+        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 basicText = new CanvasText({ text: "Basic text in pixi" });
+      const basicStyle = new pixi_js.TextStyle({
+        fill: "#ffffff"
+      });
+      const basicText = new CanvasText({
+        text: "Basic text in pixi",
+        style: basicStyle
+      });
       basicText.x = 50;
       basicText.y = 100;
       GameWindowManager.addCanvasElement("basicText", basicText);
@@ -3109,7 +3214,7 @@ But it will generate a warn message, because the FillGradient or FillPattern has
         fill: { fill },
         stroke: { color: "#4a1850", width: 5, join: "round" },
         dropShadow: {
-          color: "#000000",
+          color: "#ff5f74",
           blur: 4,
           angle: Math.PI / 6,
           distance: 6
@@ -3162,36 +3267,30 @@ 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.texture = pixi_js.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 = this.textureButtonOver;
+        sprite.texture = pixi_js.Texture.from("https://pixijs.com/assets/button_over.png");
       } else {
-        sprite.texture = this.textureButton;
+        sprite.texture = pixi_js.Texture.from("https://pixijs.com/assets/button.png");
       }
     } else if (event === "pointerover") {
       sprite.isOver = true;
       if (sprite.isdown) {
         return;
       }
-      sprite.texture = this.textureButtonOver;
+      sprite.texture = pixi_js.Texture.from("https://pixijs.com/assets/button_over.png");
     } else if (event === "pointerout") {
       sprite.isOver = false;
       if (sprite.isdown) {
         return;
       }
-      sprite.texture = this.textureButton;
+      sprite.texture = pixi_js.Texture.from("https://pixijs.com/assets/button.png");
     }
   }
 };
@@ -3213,6 +3312,7 @@ var canvasEventsTestLabel = newLabel(
       });
       const texture = yield pixi_js.Assets.load(bunnyImage);
       const sprite = CanvasSprite.from(texture);
+      sprite.scale.set(3);
       sprite.anchor.set(0.5);
       sprite.x = GameWindowManager.screen.width / 2;
       sprite.y = GameWindowManager.screen.height / 2;
@@ -3227,17 +3327,12 @@ var canvasEventsTestLabel = newLabel(
         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");
+      const backgroundT = yield pixi_js.Assets.load("https://pixijs.com/assets/bg_button.jpg");
+      const background = new CanvasSprite(backgroundT);
       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 textureButton = yield pixi_js.Assets.load("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++) {
@@ -3257,7 +3352,17 @@ var canvasEventsTestLabel = newLabel(
       buttons[4].scale.set(0.8, 1.2);
       buttons[4].rotation = Math.PI;
     })
-  ]
+  ],
+  {
+    onLoadStep: () => __async(void 0, null, function* () {
+      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"
+      ]);
+    })
+  }
 );
 var AlienTintingTest = class extends CanvasSprite {
   constructor() {
@@ -3377,13 +3482,13 @@ var imagesAnimationsTest = newLabel(IMAGE_ANIMAIONS_TEST_LABEL, [
   () => __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 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)
     ]);
   }),
@@ -3493,8 +3598,8 @@ var imagesRotateTest = newLabel("___pixi_vn_images_rotate_test___", [
       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.`
+- ${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 = GameWindowManager.getCanvasElement("eggHead");
     if (eggHead)
@@ -3547,10 +3652,10 @@ 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.`
+- ${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.`
     });
     GameWindowManager.addTicker("eggHead", new MoveTicker({
       destination: { x: 500, y: 100 },
@@ -3563,25 +3668,25 @@ var imagesMoveTest = newLabel("___pixi_vn_images_move_test___", [
     GameWindowManager.addTickersSteps("helmlok", [
       new MoveTicker({
         destination: { x: 100, y: 500 },
-        speed: 1200,
-        speedProgression: { type: "linear", amt: -12, limit: 60 }
+        speed: 150,
+        speedProgression: { type: "linear", amt: -2, limit: 10 }
       }),
       new MoveTicker({
         destination: { x: 1700, y: 500 },
-        speed: 6,
-        speedProgression: { type: "linear", amt: 3 }
+        speed: 10,
+        speedProgression: { type: "linear", amt: 2, limit: 150 }
       }),
       Repeat
     ]);
     GameWindowManager.addTickersSteps("skully", [
       new MoveTicker({
         destination: { x: 500, y: 500 },
-        speed: 60
+        speed: 40
       }),
       Pause(0.5),
       new MoveTicker({
         destination: { x: 100, y: 100 },
-        speed: 60
+        speed: 40
       })
     ]);
   }
@@ -3643,37 +3748,45 @@ var imagesMoveInOutTest = newLabel("___pixi_vn_images_move_in_out_test___", [
     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.`
+- ${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: 800, direction: "down" });
+    moveIn("eggHead", eggHead, { speed: 80, direction: "down" });
     moveIn("flowerTop", flowerTop, {
-      speed: 800,
+      speed: 80,
       direction: "left",
       speedProgression: { type: "exponential", percentage: 0.02 }
     });
-    moveIn("helmlok", helmlok, { speed: 800, direction: "right" });
+    moveIn("helmlok", helmlok, { speed: 80, direction: "right" });
     moveIn("skully", skully, {
-      speed: 800,
+      speed: 80,
       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" });
+    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(void 0, null, function* () {
+    setDialogue({
+      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.`
+    });
     GameWindowManager.removeCanvasElements();
     let eggHead = new CanvasImage({ x: 100, y: 100 }, eggHeadImage);
     let flowerTop = new CanvasImage({ x: 300, y: 100 }, flowerTopImage);
@@ -3699,7 +3812,7 @@ var imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [
       speedProgression: { type: "exponential", percentage: 0.02 }
     });
     zoomOut("flowerTop", { speed: 3, direction: "left" });
-    zoomOut("helmlok", { speed: 3, direction: "right" });
+    zoomOut("helmlok", { speed: 1, direction: "right" });
     zoomOut("skully", {
       speed: 3,
       direction: "up",
@@ -3781,6 +3894,23 @@ Footer
   })
 ]);
 
+// src/labels/StepLabelTest.ts
+var STEP_LABEL_TEST_LABEL = "___pixi_vn_step_label_test___";
+var stepLabelTestLAbel = newLabel(STEP_LABEL_TEST_LABEL, [
+  () => __async(void 0, null, function* () {
+    setDialogue({ character: juliette, text: `Pixi'VN manages the succession of "screens" with steps. Each step is a function that can be asynchronous.` });
+  }),
+  () => __async(void 0, null, function* () {
+    setDialogue({ 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(void 0, null, function* () {
+    setDialogue({ character: juliette, text: "It is also possible to ask the player to make a choice." });
+  }),
+  () => __async(void 0, null, function* () {
+    setDialogue({ character: juliette, text: "Browsing through available tests is one way to test the steps/labels system." });
+  })
+]);
+
 // src/labels/StartLabel.ts
 var pixivnTestStartLabel = newLabel(
   "___pixi_vn_example_start_label___",
@@ -3789,25 +3919,25 @@ var pixivnTestStartLabel = newLabel(
       let currentTimeName = "";
       const hour = (/* @__PURE__ */ new Date()).getHours();
       if (hour >= 5 && hour < 12) {
-        currentTimeName = "morning";
+        currentTimeName = "morning\u{1F505}";
       } else if (hour >= 12 && hour < 18) {
-        currentTimeName = "afternoon";
+        currentTimeName = "afternoon\u{1F506}";
       } else if (hour >= 18 && hour < 22) {
-        currentTimeName = "evening";
+        currentTimeName = "evening\u26C5";
       } else {
-        currentTimeName = "night";
+        currentTimeName = "night\u{1F319}";
       }
       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.` }),
+    () => setDialogue({ character: juliette, text: `You are running the Pixi\u2019VN v${PIXIVN_VERSION} test. This test will guide you through the different features of the library.` }),
     (props) => GameStepManager.jumpLabel(pixivnTestStartLabel2, props)
   ]
 );
-var openWiki = newLabel(
-  "___pixi_vn_open_wiki___",
+var openLink = newLabel(
+  "___pixi_vn_open_link___",
   [
     (props) => {
-      window.open("https://pixi-vn.web.app/");
+      window.open(props.link);
       GameStepManager.goNext(props);
     }
   ]
@@ -3820,12 +3950,14 @@ var pixivnTestStartLabel2 = newLabel(
       GameWindowManager.clear();
       setDialogue({ character: juliette, text: "Which test would you like to start with?" });
       setChoiceMenuOptions([
-        new ChoiceMenuOption("Open Pixi\u2019VN Wiki", openWiki),
-        new ChoiceMenuOption("Images, Transitions and Animations Test", imagesAnimationsTest),
-        new ChoiceMenuOption("Canvas Events Test Label", canvasEventsTestLabel),
-        new ChoiceMenuOption("Base Canvas Element Test", baseCanvasElementTestLabel),
-        new ChoiceMenuOption("Custom Ticker Canvas Element Test", customTickerCanvasElementTestLabel),
-        new ChoiceMenuOption("Markdown Test", markdownTest)
+        new ChoiceMenuOption("Open Pixi\u2019VN Wiki", openLink, { link: "https://pixi-vn.web.app/" }),
+        new ChoiceMenuOption("Images, Transitions and Animations Test", imagesAnimationsTest, {}),
+        new ChoiceMenuOption("Canvas Events Test", canvasEventsTestLabel, {}),
+        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("Open Pixi\u2019VN Github Issues", openLink, { link: "https://github.com/DRincs-Productions/pixi-vn/issues" })
       ]);
     },
     (props) => GameStepManager.jumpLabel(RESTART_TEST_LABEL, props)