@drincs/pixi-vn 0.6.0 → 0.6.1

package/dist/managers/WindowManager.js

@@ -1,7 +1,12 @@
 'use strict';
 
+var sha1 = require('crypto-js/sha1');
 var pixi_js = require('pixi.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var sha1__default = /*#__PURE__*/_interopDefault(sha1);
+
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -46,8 +51,8 @@ var __async = (__this, __arguments, generator) => {
 var TickerBase = class {
   /**
    * @param args The arguments that you want to pass to the ticker.
-   * @param duration The duration of the ticker. If is undefined, the ticker will be called every frame.
-   * @param priority The priority of the ticker. If is undefined, the priority will be UPDATE_PRIORITY.NORMAL.
+   * @param duration The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish). @default undefined
+   * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
    */
   constructor(args, duration, priority) {
     this.args = args;
@@ -57,15 +62,19 @@ var TickerBase = class {
   /**
    * The method that will be called every frame.
    * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them.
-   * @param t The ticker that is calling this method
-   * @param args The arguments that you passed when you added the ticker
-   * @param tags The tags of the canvas elements that are connected to this ticker
+   * @param _ticker The ticker that is calling this method
+   * @param _args The arguments that you passed when you added the ticker
+   * @param _tags The tags of the canvas elements that are connected to this ticker
+   * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link GameWindowManager.currentTickers}
    */
-  fn(_t, _args, _tags) {
+  fn(_ticker, _args, _tags, _tickerId) {
     throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden");
   }
 };
 
+// src/constants.ts
+var Repeat = "repeat";
+
 // src/decorators/TickerDecorator.ts
 var registeredTickers = {};
 function geTickerInstanceByClassName(tickerName, args, duration, priority) {
@@ -565,11 +574,8 @@ function createExportableElement(element) {
   }
 }
 
-// src/types/PauseType.ts
-var PauseValueType = "pause";
-
-// src/types/RepeatType.ts
-var Repeat = "repeat";
+// src/types/ticker/TagToRemoveAfterType.ts
+var tagToRemoveAfter = "tagToRemoveAfter";
 
 // src/managers/WindowManager.ts
 var _GameWindowManager = class _GameWindowManager {
@@ -753,25 +759,25 @@ var _GameWindowManager = class _GameWindowManager {
   /**
    * Remove a canvas element from the canvas.
    * And remove all tickers that are not connected to any canvas element.
-   * @param tag The tag of the canvas element to be removed.
+   * @param tags The tag of the canvas element to be removed.
    * @returns 
    * @example
    * ```typescript
    * GameWindowManager.removeCanvasElement("bunny");
    * ```
    */
-  static removeCanvasElement(tag) {
-    if (typeof tag === "string") {
-      tag = [tag];
+  static removeCanvasElement(tags) {
+    if (typeof tags === "string") {
+      tags = [tags];
     }
-    tag.forEach((t) => {
-      if (_GameWindowManager._children[t]) {
-        _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[t]);
-        delete _GameWindowManager._children[t];
+    tags.forEach((tag) => {
+      if (_GameWindowManager._children[tag]) {
+        _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[tag]);
+        delete _GameWindowManager._children[tag];
+        _GameWindowManager.removeTickerByCanvasElement(tag);
       }
     });
-    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
-    _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tag.includes(t));
+    _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tags.includes(t));
   }
   /**
    * Get a canvas element by the tag.
@@ -801,18 +807,43 @@ var _GameWindowManager = class _GameWindowManager {
     _GameWindowManager.app.stage.removeChildren();
     _GameWindowManager._children = {};
     _GameWindowManager.childrenTagsOrder = [];
-    _GameWindowManager.removeTickers();
+    _GameWindowManager.removeAllTickers();
   }
   /**
    * Edit the tag of a canvas element.
    * @param oldTag The old tag of the canvas element.
    * @param newTag The new tag of the canvas element.
    */
-  static editTagCanvasElement(oldTag, newTag) {
+  static editCanvasElementTag(oldTag, newTag) {
     if (_GameWindowManager._children[oldTag]) {
       _GameWindowManager._children[newTag] = _GameWindowManager._children[oldTag];
       delete _GameWindowManager._children[oldTag];
     }
+    if (_GameWindowManager._currentTickersSteps[oldTag]) {
+      _GameWindowManager._currentTickersSteps[newTag] = _GameWindowManager._currentTickersSteps[oldTag];
+      delete _GameWindowManager._currentTickersSteps[oldTag];
+    }
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      if (ticker.canvasElementTags.includes(oldTag)) {
+        ticker.canvasElementTags = ticker.canvasElementTags.map((t) => t === oldTag ? newTag : t);
+        if (ticker.args.hasOwnProperty(tagToRemoveAfter)) {
+          let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter;
+          if (typeof tagToRemoveAfter2 === "string") {
+            tagToRemoveAfter2 = [tagToRemoveAfter2];
+          }
+          if (Array.isArray(tagToRemoveAfter2)) {
+            ticker.args.tagToRemoveAfter = tagToRemoveAfter2.map((t) => t === oldTag ? newTag : t);
+          }
+        }
+      }
+    }
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
+      if (TickerTimeout.tags.includes(oldTag)) {
+        TickerTimeout.tags = TickerTimeout.tags.map((t) => t === oldTag ? newTag : t);
+      }
+    }
   }
   /** Edit Tickers Methods */
   /**
@@ -821,23 +852,38 @@ var _GameWindowManager = class _GameWindowManager {
   static get currentTickers() {
     return _GameWindowManager._currentTickers;
   }
+  static get currentTickersList() {
+    return Object.values(_GameWindowManager._currentTickers);
+  }
+  static get currentTickersWithoutCreatedBySteps() {
+    return Object.fromEntries(Object.entries(_GameWindowManager._currentTickers).filter(([_, ticker]) => !ticker.createdByTicketStepsId));
+  }
   /**
    * The steps of the tickers
    */
   static get currentTickersSteps() {
     return _GameWindowManager._currentTickersSteps;
   }
+  static generateTickerId(tickerData) {
+    try {
+      return sha1__default.default(JSON.stringify(tickerData)).toString() + "_" + Math.random().toString(36).substring(7);
+    } catch (e) {
+      throw new Error(`[Pixi'VN] Error to generate ticker id: ${e}`);
+    }
+  }
   /**
-   * Run a ticker.
+   * Run a ticker. You can run multiple addTicker with the same tag and different tickerClasses.
+   * If you run a ticker with the same tag and tickerClass, the old ticker will be removed.
+   * If already exists a sequence of tickers with the same tag, it will be removed.
    * @param canvasEslementTag The tag of the canvas element that will use the ticker.
    * @param ticker The ticker class to be run.
    * @param args The arguments to be used in the ticker.
-   * @param duration The time to be used in the ticker. This number is in milliseconds. If it is undefined, the ticker will run forever.
+   * @param duration The time to be used in the ticker. This number is in seconds. If it is undefined, the ticker will run forever.
    * @param priority The priority to be used in the ticker.
    * @returns 
    * @example
    * ```typescript
-   * GameWindowManager.addTicker("alien", new TickerRotate({ speed: 0.2 }))
+   * GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0.2 }))
    * ```
    */
   static addTicker(canvasElementTag, ticker) {
@@ -845,82 +891,88 @@ var _GameWindowManager = class _GameWindowManager {
     if (typeof canvasElementTag === "string") {
       canvasElementTag = [canvasElementTag];
     }
-    let t = geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority);
-    if (!t) {
+    if (!geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority)) {
       console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
       return;
     }
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTag, ticker);
     let tickerHistory = {
       fn: () => {
       },
       className: tickerName,
-      args: ticker.args,
+      args: createExportableElement(ticker.args),
       canvasElementTags: canvasElementTag,
       priority: ticker.priority,
       duration: ticker.duration
     };
-    _GameWindowManager.pushTicker(tickerHistory, t);
-    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
+    let id = _GameWindowManager.generateTickerId(tickerHistory);
+    _GameWindowManager.pushTicker(id, tickerHistory, ticker);
     if (ticker.duration) {
       let timeout = setTimeout(() => {
         _GameWindowManager.removeTickerTimeoutInfo(timeout);
-        _GameWindowManager.nextTickerStep(canvasElementTag);
-      }, ticker.duration);
-      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString());
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          _GameWindowManager.removeTicker(id);
+        }
+      }, ticker.duration * 1e3);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString(), true);
     }
   }
-  static pushTicker(tickerData, ticker) {
+  static pushTicker(id, tickerData, ticker) {
     _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
-    _GameWindowManager._currentTickers.push(tickerData);
+    _GameWindowManager._currentTickers[id] = tickerData;
     tickerData.fn = (t) => {
-      ticker == null ? void 0 : ticker.fn(t, tickerData.args, tickerData.canvasElementTags);
+      let data = _GameWindowManager._currentTickers[id];
+      if (data) {
+        ticker == null ? void 0 : ticker.fn(t, data.args, data.canvasElementTags, id);
+      }
     };
     _GameWindowManager.app.ticker.add(tickerData.fn, void 0, tickerData.priority);
   }
   /**
-   * Run a sequence of tickers.
+   * Run a sequence of tickers. If exists a ticker steps with the same tag, it will be removed.
    * @param tag The tag of canvas element that will use the tickers.
    * @param steps The steps of the tickers.
+   * @param currentStepNumber The current step number. It is used to continue the sequence of tickers.
    * @returns
    * @example
    * ```typescript
    * GameWindowManager.addTickersSteps("alien", [
-   *     new TickerRotate({ speed: 0.1, clockwise: true }, 2000),
-   *     Pause(500),
-   *     new TickerRotate({ speed: 0.2, clockwise: false }, 2000),
+   *     new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
+   *     Pause(1), // 1 second
+   *     new RotateTicker({ speed: 0.2, clockwise: false }, 2),
    *     Repeat,
    * ])
    * ```
    */
-  static addTickersSteps(tag, steps) {
+  static addTickersSteps(tag, steps, currentStepNumber = 0) {
     if (steps.length == 0) {
       console.warn("[Pixi'VN] The steps of the tickers is empty");
       return;
     }
-    let alredyExists = _GameWindowManager._currentTickersSteps[tag] !== void 0;
+    _GameWindowManager.removeTickerStepByCanvasElement(tag);
     _GameWindowManager._currentTickersSteps[tag] = {
-      currentStepNumber: 0,
-      steps: steps.map((s) => {
-        if (s === Repeat) {
-          return s;
-        }
-        if (!s.duration) {
-          console.warn("[Pixi'VN] Duration is not defined, so it will be set to 1000");
-          s.duration = 1e3;
+      currentStepNumber,
+      steps: steps.map((step) => {
+        if (step === Repeat) {
+          return step;
         }
-        if (s.hasOwnProperty("type") && s.type === PauseValueType) {
-          return s;
+        if (step.hasOwnProperty("type") && step.type === "pause") {
+          return step;
         }
-        let tickerName = s.constructor.name;
+        let tickerName = step.constructor.name;
         return {
           ticker: tickerName,
-          args: s.args,
-          duration: s.duration
+          args: createExportableElement(step.args),
+          duration: step.duration
         };
       })
     };
-    if (!alredyExists) {
+    _GameWindowManager.runTickersSteps(tag);
+  }
+  static restoneTickersSteps(data) {
+    for (let tag in data) {
+      let steps = data[tag];
+      _GameWindowManager._currentTickersSteps[tag] = steps;
       _GameWindowManager.runTickersSteps(tag);
     }
   }
@@ -934,12 +986,17 @@ var _GameWindowManager = class _GameWindowManager {
         return;
       }
     }
-    if (step.hasOwnProperty("type") && step.type === PauseValueType) {
+    if (step.hasOwnProperty("type") && step.type === "pause") {
       let timeout = setTimeout(() => {
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          tickerTimeoutInfo.tags.forEach((tag2) => {
+            _GameWindowManager.nextTickerStep(tag2);
+          });
+        }
         _GameWindowManager.removeTickerTimeoutInfo(timeout);
-        _GameWindowManager.nextTickerStep(tag);
-      }, step.duration);
-      _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString());
+      }, step.duration * 1e3);
+      _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString(), false);
       return;
     }
     let ticker = geTickerInstanceByClassName(step.ticker, step.args, step.duration, step.priority);
@@ -947,57 +1004,88 @@ var _GameWindowManager = class _GameWindowManager {
       console.error(`[Pixi'VN] Ticker ${step.ticker} not found`);
       return;
     }
-    _GameWindowManager.addTicker(tag, ticker);
+    let tickerName = ticker.constructor.name;
+    let tickerHistory = {
+      fn: () => {
+      },
+      className: tickerName,
+      args: createExportableElement(ticker.args),
+      canvasElementTags: [tag],
+      priority: ticker.priority,
+      duration: ticker.duration,
+      createdByTicketStepsId: tag
+    };
+    let id = _GameWindowManager.generateTickerId(tickerHistory);
+    _GameWindowManager.pushTicker(id, tickerHistory, ticker);
+    if (ticker.duration) {
+      let timeout = setTimeout(() => {
+        let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()];
+        if (tickerTimeoutInfo) {
+          _GameWindowManager.removeTicker(id);
+          tickerTimeoutInfo.tags.forEach((tag2) => {
+            _GameWindowManager.nextTickerStep(tag2);
+          });
+        }
+        _GameWindowManager.removeTickerTimeoutInfo(timeout);
+      }, ticker.duration * 1e3);
+      _GameWindowManager.addTickerTimeoutInfo(tag, tickerName, timeout.toString(), false);
+    }
   }
   static nextTickerStep(tag) {
-    if (typeof tag === "string") {
-      tag = [tag];
+    if (_GameWindowManager._currentTickersSteps[tag]) {
+      let steps = _GameWindowManager._currentTickersSteps[tag];
+      if (steps.currentStepNumber + 1 < steps.steps.length) {
+        steps.currentStepNumber++;
+        _GameWindowManager._currentTickersSteps[tag] = steps;
+        _GameWindowManager.runTickersSteps(tag);
+      } else {
+        _GameWindowManager.removeTickerStepByCanvasElement(tag);
+      }
     }
-    tag.forEach((tag2) => {
-      if (_GameWindowManager._currentTickersSteps[tag2]) {
-        let steps = _GameWindowManager._currentTickersSteps[tag2];
-        if (steps.currentStepNumber + 1 < steps.steps.length) {
-          steps.currentStepNumber++;
-          _GameWindowManager._currentTickersSteps[tag2] = steps;
-          _GameWindowManager.runTickersSteps(tag2);
-        } else {
-          delete _GameWindowManager._currentTickersSteps[tag2];
-        }
+  }
+  static onEndOfTicker(canvasElementTags, ticker, canvasElementTagsToDelete, tickerId) {
+    let tickerData = _GameWindowManager._currentTickers[tickerId];
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTags, ticker);
+    _GameWindowManager.removeCanvasElement(canvasElementTagsToDelete);
+    if (tickerData) {
+      _GameWindowManager.removeTicker(tickerId);
+      if (tickerData.duration == void 0 && tickerData.createdByTicketStepsId) {
+        _GameWindowManager.nextTickerStep(tickerData.createdByTicketStepsId);
       }
-    });
+    }
   }
   /**
    * Remove a connection between a canvas element and a ticker.
    * And remove the ticker if there is no canvas element connected to it.
-   * @param tag The tag of the canvas element that will use the ticker.
+   * @param tags The tag of the canvas element that will use the ticker.
    * @param ticker The ticker class to be removed.
    * @example
    * ```typescript
-   * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", TickerRotate)
+   * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", RotateTicker)
    * ```
    */
-  static removeAssociationBetweenTickerCanvasElement(tag, ticker) {
+  static removeAssociationBetweenTickerCanvasElement(tags, ticker) {
     let tickerName;
-    if (ticker instanceof TickerBase) {
+    if (typeof ticker === "string") {
+      tickerName = ticker;
+    } else if (ticker instanceof TickerBase) {
       tickerName = ticker.constructor.name;
     } else {
       tickerName = ticker.name;
     }
-    if (typeof tag === "string") {
-      tag = [tag];
+    if (typeof tags === "string") {
+      tags = [tags];
     }
-    _GameWindowManager._currentTickers = _GameWindowManager._currentTickers.map((t) => {
-      if (t.className === tickerName) {
-        t.canvasElementTags = t.canvasElementTags.filter((e) => !tag.includes(e));
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker2 = _GameWindowManager._currentTickers[id];
+      if (ticker2.className === tickerName) {
+        _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e));
       }
-      return t;
-    });
-    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
-      let t = _GameWindowManager.currentTickersTimeouts[timeout].tags.filter((e) => !tag.includes(e));
-      if (t.length == 0) {
-        _GameWindowManager.removeTickerTimeoutInfo(timeout);
-      } else {
-        _GameWindowManager.currentTickersTimeouts[timeout].tags = t;
+    }
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
+      if (TickerTimeout.ticker === tickerName && TickerTimeout.canBeDeletedBeforeEnd) {
+        _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t));
       }
     }
     _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
@@ -1006,49 +1094,117 @@ var _GameWindowManager = class _GameWindowManager {
    * Remove all tickers that are not connected to any existing canvas element.
    */
   static removeTickersWithoutAssociatedCanvasElement() {
-    let currentTickers = _GameWindowManager._currentTickers.map((t) => {
-      t.canvasElementTags = t.canvasElementTags.filter((e) => _GameWindowManager._children[e]);
-      return t;
-    });
-    currentTickers.filter((t) => t.canvasElementTags.length === 0).forEach((t) => {
-      _GameWindowManager.app.ticker.remove(t.fn);
-    });
-    currentTickers = currentTickers.filter((t) => t.canvasElementTags.length > 0);
-    _GameWindowManager._currentTickers = currentTickers;
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      ticker.canvasElementTags = ticker.canvasElementTags.filter((e) => _GameWindowManager._children[e]);
+      if (ticker.canvasElementTags.length === 0) {
+        _GameWindowManager.removeTicker(id);
+      }
+    }
     for (let tag in _GameWindowManager._currentTickersSteps) {
       if (_GameWindowManager._children[tag] === void 0) {
         delete _GameWindowManager._currentTickersSteps[tag];
       }
     }
+    Object.entries(_GameWindowManager._currentTickersTimeouts).forEach(([timeout, { tags }]) => {
+      if (tags.length === 0) {
+        _GameWindowManager.removeTickerTimeout(timeout);
+      }
+    });
   }
-  static addTickerTimeoutInfo(tags, ticker, timeout) {
+  static addTickerTimeoutInfo(tags, ticker, timeout, canBeDeletedBeforeEnd) {
     if (typeof tags === "string") {
       tags = [tags];
     }
-    _GameWindowManager.currentTickersTimeouts[timeout] = {
+    _GameWindowManager._currentTickersTimeouts[timeout] = {
       tags,
-      ticker
+      ticker,
+      canBeDeletedBeforeEnd
     };
   }
   static removeTickerTimeoutInfo(timeout) {
     if (typeof timeout !== "string") {
       timeout = timeout.toString();
     }
-    if (_GameWindowManager.currentTickersTimeouts[timeout]) {
-      delete _GameWindowManager.currentTickersTimeouts[timeout];
+    if (_GameWindowManager._currentTickersTimeouts[timeout]) {
+      delete _GameWindowManager._currentTickersTimeouts[timeout];
+    }
+  }
+  static removeTickerTimeout(timeout) {
+    if (typeof timeout !== "string") {
+      timeout = timeout.toString();
+    }
+    clearTimeout(Number(timeout));
+    _GameWindowManager.removeTickerTimeoutInfo(timeout);
+  }
+  static removeTickerTimeoutsByTag(tag, checkCanBeDeletedBeforeEnd) {
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      let tagsWithoutTagToRemove = _GameWindowManager._currentTickersTimeouts[timeout].tags.filter((t) => t !== tag);
+      if (tagsWithoutTagToRemove.length === 0) {
+        let canBeDeletedBeforeEnd = _GameWindowManager._currentTickersTimeouts[timeout].canBeDeletedBeforeEnd;
+        if (!checkCanBeDeletedBeforeEnd || canBeDeletedBeforeEnd) {
+          _GameWindowManager.removeTickerTimeout(timeout);
+        }
+      } else {
+        _GameWindowManager._currentTickersTimeouts[timeout].tags = tagsWithoutTagToRemove;
+      }
     }
   }
   /**
    * Remove all tickers from the canvas.
    */
-  static removeTickers() {
+  static removeAllTickers() {
     _GameWindowManager._currentTickersSteps = {};
-    _GameWindowManager._currentTickers.forEach((t) => {
-      _GameWindowManager.app.ticker.remove(t.fn);
+    Object.keys(_GameWindowManager._currentTickers).forEach((id) => {
+      _GameWindowManager.removeTicker(id);
+    });
+    _GameWindowManager._currentTickers = {};
+    for (let timeout in _GameWindowManager._currentTickersTimeouts) {
+      _GameWindowManager.removeTickerTimeout(timeout);
+    }
+  }
+  /**
+   * Remove all tickers from a canvas element.
+   * @param tag The tag of the canvas element that will use the ticker.
+   */
+  static removeTickerByCanvasElement(tag) {
+    if (typeof tag === "string") {
+      tag = [tag];
+    }
+    tag.forEach((tag2) => {
+      for (let id in _GameWindowManager._currentTickers) {
+        let ticker = _GameWindowManager._currentTickers[id];
+        if (ticker.canvasElementTags.includes(tag2)) {
+          _GameWindowManager.removeTicker(id);
+        }
+      }
+      if (_GameWindowManager._currentTickersSteps[tag2]) {
+        delete _GameWindowManager._currentTickersSteps[tag2];
+      }
+      _GameWindowManager.removeTickerTimeoutsByTag(tag2, false);
+      delete _GameWindowManager._currentTickersSteps[tag2];
     });
-    _GameWindowManager._currentTickers = [];
-    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
-      _GameWindowManager.removeTickerTimeoutInfo(timeout);
+  }
+  static removeTickerStepByCanvasElement(tag) {
+    if (_GameWindowManager._currentTickersSteps[tag]) {
+      delete _GameWindowManager._currentTickersSteps[tag];
+    }
+    for (let id in _GameWindowManager._currentTickers) {
+      let ticker = _GameWindowManager._currentTickers[id];
+      if (ticker.createdByTicketStepsId === tag) {
+        _GameWindowManager.removeTicker(id);
+      }
+    }
+  }
+  static removeTicker(tickerId) {
+    let ticker = _GameWindowManager._currentTickers[tickerId];
+    if (ticker) {
+      if (ticker.args.hasOwnProperty(tagToRemoveAfter)) {
+        let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter;
+        _GameWindowManager.removeCanvasElement(tagToRemoveAfter2);
+      }
+      _GameWindowManager.app.ticker.remove(ticker.fn);
+      delete _GameWindowManager._currentTickers[tickerId];
     }
   }
   /**
@@ -1075,7 +1231,8 @@ var _GameWindowManager = class _GameWindowManager {
       currentElements[tag] = exportCanvasElement(_GameWindowManager._children[tag]);
     }
     return {
-      currentTickers: createExportableElement(_GameWindowManager._currentTickers),
+      currentTickers: createExportableElement(_GameWindowManager.currentTickersWithoutCreatedBySteps),
+      currentTickersSteps: createExportableElement(_GameWindowManager._currentTickersSteps),
       currentElements: createExportableElement(currentElements),
       childrenTagsOrder: createExportableElement(_GameWindowManager.childrenTagsOrder)
     };
@@ -1110,7 +1267,8 @@ var _GameWindowManager = class _GameWindowManager {
       }
       if (data.hasOwnProperty("currentTickers")) {
         let currentTickers = data["currentTickers"];
-        currentTickers.forEach((t) => {
+        for (let id in currentTickers) {
+          let t = currentTickers[id];
           let tags = t.canvasElementTags;
           let ticker = geTickerInstanceByClassName(t.className, t.args, t.duration, t.priority);
           if (ticker) {
@@ -1118,7 +1276,11 @@ var _GameWindowManager = class _GameWindowManager {
           } else {
             console.error(`[Pixi'VN] Ticker ${t.className} not found`);
           }
-        });
+        }
+      }
+      if (data.hasOwnProperty("currentTickersSteps")) {
+        let currentTickersSteps = data["currentTickersSteps"];
+        _GameWindowManager.restoneTickersSteps(currentTickersSteps);
       }
     } catch (e) {
       console.error("[Pixi'VN] Error importing data", e);
@@ -1132,9 +1294,9 @@ _GameWindowManager._children = {};
  * The order of the children tags.
  */
 _GameWindowManager.childrenTagsOrder = [];
-_GameWindowManager._currentTickers = [];
+_GameWindowManager._currentTickers = {};
 _GameWindowManager._currentTickersSteps = {};
-_GameWindowManager.currentTickersTimeouts = {};
+_GameWindowManager._currentTickersTimeouts = {};
 var GameWindowManager = _GameWindowManager;
 
 module.exports = GameWindowManager;