@drincs/pixi-vn 0.6.4 → 0.6.6

package/README.md

@@ -1,13 +1,16 @@
 # Pixi'VN - PixiJS Visual Novel Engine
 
-Pixi'VN is a npm package that provides various features for creating visual novels.
+Pixi’VN is a npm package that provides various features for creating visual novels, has functions to manage story steps, saving and loading, variable storage, dialogues, character,canvas management, and much more.
 
-Pixi'VN has functions to manage story steps, saving and loading, variable storage, dialogues, and character creation.
+Pixi’VN + [Templates](#project-initialization) provides a complete solution and is in effect a visual novel engine.
 
-Pixi'VN is based on [Pixi.js](https://pixijs.com/), a modern 2D rendering engine, expanding the features by adding a save and load system, and functions to simplify the addition of images and animations.
+It is designed for web developers, with basic experience in JavaScript/TypeScript, who want to create a visual novel with a modern 2D rendering engine and their favorite JavaScript framework.
 
-In addition to managing the Pixi.js "Canvas", Pixi'VN offers the possibility of adding an HTML Element with the same dimensions as the "Canvas" to add interactions with the user.
-This allows the use of systems such as React, Vue, Angular, etc. to create much more complex interfaces with excellent performance.
+It is based on [Pixi.js](https://pixijs.com/), a rendering engine that allows you to create fast 2D graphics. It is based on WebGL and is very fast and efficient. It is used by many developers to create games, websites, and applications.
+
+In addition to managing the Pixi.js "Canvas", Pixi’VN offers the possibility of adding an HTML Element with the same dimensions as the "Canvas" to add interactions with the user.
+
+This allows the use of systems such as React, Vue, Angular, etc. to create much more complex **interface screens** with excellent performance.
 
 ## Wiki
 
@@ -36,17 +39,63 @@ For more information, visit the [Web Page](https://pixi-vn.web.app/)
 * [Stored Classes](https://pixi-vn.web.app/advanced/stored-classes.html)
 * [Intecept Events](https://pixi-vn.web.app/advanced/intercept-events.html)
 
-## Installation
+## Prerequisites
+
+* [Node.js](https://nodejs.org/) version 18 or higher.
+* Text Editor with TypeScript support.
+  * [Visual Studio Code](https://code.visualstudio.com/) is recommended.
+
+## Project Initialization
+
+To initialize a new project, you can use the following command:
 
 ```bash
+# npm
+npm create pixi-vn@latest
+
+# yarn
+yarn create pixi-vn@latest
+
+# pnpm
+pnpm create pixi-vn@latest
+
+# bun
+bun create pixi-vn@latest
+```
+
+The supported template presets are:
+
+**[Basic Visual Novel - Web page (Vite + React + MUI joy)](https://github.com/DRincs-Productions/pixi-vn-react-template)**
+
+( More templates will be added in the future, see this [issue](https://github.com/DRincs-Productions/pixi-vn/issues/162) for more information )
+
+After the project is initialized, you can open the project directory with your text editor (VSCode is recommended) and start developing your visual novel.
+
+Into all templates there is a `README.md` file with more information about the project.
+
+## Package Installation
+
+For installing the Pixi’VN package, you can use the following command:
+
+```bash
+# npm
 npm install @drincs/pixi-vn
+
+# yarn
+yarn add @drincs/pixi-vn
+
+# pnpm
+pnpm add @drincs/pixi-vn
+
+# bun
+bun add @drincs/pixi-vn
 ```
 
 ## Usage
 
 For the following example, we will use React to create the interface and Pixi'VN to manage the visual novel.
 
-```typescript
+```tsx
 // main.tsx
 
 import { GameWindowManager } from '@drincs/pixi-vn'

package/dist/classes/CharacterBaseModel.js

@@ -133,8 +133,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);
@@ -167,6 +165,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* () {
@@ -567,61 +567,6 @@ function geTickerInstanceById(tickerId, args, duration, priority) {
   }
 }
 
-// src/classes/StoredClassModel.ts
-var StoredClassModel = class {
-  /**
-   * @param categoryId The id of the category. For example if you are storing a character class, you can use "characters" as categoryId. so all instances of the character class will be stored in the "characters" category.
-   * @param id The id of instance of the class. This id must be unique for the category.
-   */
-  constructor(categoryId, id) {
-    this.categoryId = categoryId;
-    this._id = id;
-  }
-  /**
-   * Is id of the stored class. is unique for this class.
-   */
-  get id() {
-    return this._id;
-  }
-  /**
-   * Update a property in the storage.
-   * @param propertyName The name of the property to set.
-   * @param value The value to set. If is undefined, the property will be removed from the storage.
-   */
-  setStorageProperty(propertyName, value) {
-    let storage = GameStorageManager.getVariable(this.categoryId);
-    if (!storage) {
-      storage = {};
-    }
-    if (!storage.hasOwnProperty(this.id)) {
-      storage[this.id] = {};
-    }
-    if (value === void 0 || value === null) {
-      if (storage[this.id].hasOwnProperty(propertyName)) {
-        delete storage[this.id][propertyName];
-      }
-    } else {
-      storage[this.id] = __spreadProps(__spreadValues({}, storage[this.id]), { [propertyName]: value });
-    }
-    if (Object.keys(storage[this.id]).length === 0) {
-      delete storage[this.id];
-    }
-    GameStorageManager.setVariable(this.categoryId, storage);
-  }
-  /**
-   * Get a property from the storage.
-   * @param propertyName The name of the property to get.
-   * @returns The value of the property. If the property is not found, returns undefined.
-   */
-  getStorageProperty(propertyName) {
-    let storage = GameStorageManager.getVariable(this.categoryId);
-    if (storage && storage.hasOwnProperty(this.id) && storage[this.id].hasOwnProperty(propertyName)) {
-      return storage[this.id][propertyName];
-    }
-    return void 0;
-  }
-};
-
 // src/classes/ticker/TickerBase.ts
 var TickerBase = class {
   /**
@@ -702,8 +647,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") {
@@ -722,22 +668,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;
@@ -750,15 +699,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") {
@@ -798,7 +745,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([
@@ -806,7 +756,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") {
@@ -834,7 +784,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([
@@ -846,15 +799,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];
@@ -921,7 +872,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);
@@ -934,6 +888,61 @@ ZoomTicker = __decorateClass([
 // src/constants.ts
 var Repeat = "repeat";
 
+// src/classes/StoredClassModel.ts
+var StoredClassModel = class {
+  /**
+   * @param categoryId The id of the category. For example if you are storing a character class, you can use "characters" as categoryId. so all instances of the character class will be stored in the "characters" category.
+   * @param id The id of instance of the class. This id must be unique for the category.
+   */
+  constructor(categoryId, id) {
+    this.categoryId = categoryId;
+    this._id = id;
+  }
+  /**
+   * Is id of the stored class. is unique for this class.
+   */
+  get id() {
+    return this._id;
+  }
+  /**
+   * Update a property in the storage.
+   * @param propertyName The name of the property to set.
+   * @param value The value to set. If is undefined, the property will be removed from the storage.
+   */
+  setStorageProperty(propertyName, value) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (!storage) {
+      storage = {};
+    }
+    if (!storage.hasOwnProperty(this.id)) {
+      storage[this.id] = {};
+    }
+    if (value === void 0 || value === null) {
+      if (storage[this.id].hasOwnProperty(propertyName)) {
+        delete storage[this.id][propertyName];
+      }
+    } else {
+      storage[this.id] = __spreadProps(__spreadValues({}, storage[this.id]), { [propertyName]: value });
+    }
+    if (Object.keys(storage[this.id]).length === 0) {
+      delete storage[this.id];
+    }
+    GameStorageManager.setVariable(this.categoryId, storage);
+  }
+  /**
+   * Get a property from the storage.
+   * @param propertyName The name of the property to get.
+   * @returns The value of the property. If the property is not found, returns undefined.
+   */
+  getStorageProperty(propertyName) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (storage && storage.hasOwnProperty(this.id) && storage[this.id].hasOwnProperty(propertyName)) {
+      return storage[this.id][propertyName];
+    }
+    return void 0;
+  }
+};
+
 // src/functions/ExportUtility.ts
 function createExportableElement(element) {
   try {
@@ -1767,7 +1776,7 @@ _GameWindowManager._currentTickersTimeouts = {};
 var GameWindowManager = _GameWindowManager;
 
 // src/classes/CharacterBaseModel.ts
-var CharacterBaseModel = class extends StoredClassModel {
+var CharacterBaseModel2 = class extends StoredClassModel {
   /**
    * @param id The id of the character.
    * @param props The properties of the character.
@@ -1825,6 +1834,6 @@ var CharacterBaseModel = class extends StoredClassModel {
   }
 };
 
-module.exports = CharacterBaseModel;
+module.exports = CharacterBaseModel2;
 //# sourceMappingURL=CharacterBaseModel.js.map
 //# sourceMappingURL=CharacterBaseModel.js.map