npm - @drincs/pixi-vn - Versions diffs - 0.3.5 → 0.4.0 - Mend

@drincs/pixi-vn 0.3.5 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# Pixi'VN - Pixi Visual Novel Engine
+# Pixi'VN - PixiJS Visual Novel Engine
 Pixi'VN is a npm package that provides various features for creating visual novels.
@@ -9,85 +9,6 @@ Pixi'VN is based on [Pixi.js](https://pixijs.com/), a modern 2D rendering engine
 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.
-## Get Started
-### Installation
-```bash
-npm install @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
-// main.tsx
-import { GameWindowManager } from '@drincs/pixi-vn'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
-// Canvas setup with PIXI
-const body = document.body
-if (!body) {
-    throw new Error('body element not found')
-}
-GameWindowManager.initialize(body, 1920, 1080, {
-    backgroundColor: "#303030"
-}).then(() => {
-    // React setup with ReactDOM
-    const root = document.getElementById('root')
-    if (!root) {
-        throw new Error('root element not found')
-    }
-    GameWindowManager.initializeHTMLLayout(root)
-    const reactRoot = createRoot(GameWindowManager.htmlLayout)
-    reactRoot.render(
-        <App />
-    )
-})
-```
-This is the HTML file that will be used to load the application.
-```html
-<!-- index.html -->
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/pixiVN.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pixi'VN</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-```
-```css
-/* index.css */
-:root {
-  background-color: #242424;
-}
-body {
-  margin: 0;
-  display: flex;
-}
-```
 ## Wiki
-For more information, visit the [Wiki](https://pixivn.readthedocs.io/)
-## Why Pixi'VN?
-The reason why Pixi'VN was born is that current systems for creating a visual novel are based on dated systems and have many shortcomings.
+For more information, visit the [Web Page](https://pixi-vn.web.app/)

package/dist/index.d.mts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as pixi_js from 'pixi.js';
 import { ContainerOptions, SpriteOptions, TextOptions, Container, Sprite, ContainerEvents, EventEmitter, Texture, TextureSourceLike, Text, UPDATE_PRIORITY, Ticker, TickerCallback, Application, ApplicationOptions } from 'pixi.js';
+export { Assets } from 'pixi.js';
 import deepDiff from 'deep-diff';
 /**
@@ -273,11 +274,11 @@ declare class ChoiceMenuOptionLabel {
      */
     constructor(text: string, label: typeof Label, type?: LabelRunModeEnum);
 }
-interface IStoratedChoiceMenuOptionLabel {
+type IStoratedChoiceMenuOptionLabel = {
     text: string;
     label: LabelIdType;
     type: LabelRunModeEnum;
-}
+};
 /**
  * Munu is a type that contains a list of Label that a player can choose from.
@@ -295,11 +296,29 @@ declare function Pause(duration: number): PauseType;
 type RepeatType = "Repeat";
 declare const Repeat: RepeatType;
+type StorageElementPrimaryType = string | number | boolean | undefined | null | StorageElementPrimaryType[];
+type StorageElementInternalType = StorageElementPrimaryType | Record<string | number | symbol, StorageElementPrimaryType> | StorageElementInternalType[];
 /**
  * StorageElementType are all the types that can be stored in the storage
  */
-type StorageElementType = string | number | boolean | object | undefined | null;
+type StorageElementType = StorageElementInternalType | Record<string | number | symbol, StorageElementInternalType> | {
+    [key: string | number | symbol]: StorageElementType;
+};
+type DialogueData = {
+    /**
+     * The text of the dialogue.
+     */
+    text: string;
+    /**
+     * The id of the character that is speaking.
+     */
+    characterId?: string;
+    /**
+     * Other parameters that can be stored in the dialogue.
+     */
+    oltherParams?: Record<string | number | symbol, StorageElementType>;
+};
 /**
  * Base class for all dialogue models.
  * You can extend this class, but it is not reccomended. You can use the oltherParams property to store any other data you need.
@@ -308,13 +327,13 @@ type StorageElementType = string | number | boolean | object | undefined | null;
  * setDialogue(new DialogueBaseModel("Hello World", character))
  * ```
  */
-declare class DialogueBaseModel<TCharacter extends CharacterBaseModel = CharacterBaseModel> {
+declare class DialogueBaseModel<TCharacter extends CharacterBaseModel = CharacterBaseModel> implements DialogueData {
     /**
      * @param text The text of the dialogue.
      * @param character The id of the character that is speaking.
      * @param oltherParams Other parameters that can be stored in the dialogue.
      */
-    constructor(text: string, character: string | TCharacter | undefined, oltherParams?: {
+    constructor(text: string | DialogueData, character?: string | TCharacter, oltherParams?: {
         [key: string]: StorageElementType;
     });
     /**
@@ -331,6 +350,12 @@ declare class DialogueBaseModel<TCharacter extends CharacterBaseModel = Characte
     oltherParams: {
         [key: string]: StorageElementType;
     };
+    /**
+     * Export the dialogue to a DialogueBaseData object.
+     *
+     * @returns The data of the dialogue.
+     */
+    export(): DialogueData;
 }
 /**
@@ -519,11 +544,26 @@ declare class CanvasSprite<Memory extends SpriteOptions & ICanvasBaseMemory = IC
     static from(source: Texture | TextureSourceLike, skipCache?: boolean): CanvasSprite<any>;
 }
+interface CanvasImageOptions extends SpriteOptions {
+    /**
+     * The image link to load in the canvas.
+     */
+    textureImage?: string;
+}
 /**
  * This class is a extension of the CanvasSprite class, it has the same properties and methods,
  * but it has some features that make texture management easier.
  * You need to use CanvasImage.load() to show the image in the canvas.
- * This class is used for functions like addImage, showCanvasImages and showImageWithDissolveTransition.
+ * This class is used for functions like addImage, loadImages and showImageWithDissolveTransition.
+ * @example
+ * ```typescript
+ * let alien = new CanvasImage({ textureImage: 'https://pixijs.com/assets/eggHead.png' })
+ * alien.anchor.set(0.5);
+ * alien.x = 100
+ * alien.y = 100
+ * await alien.load()
+ * GameWindowManager.addCanvasElement("alien", alien)
+ * ```
  * @example
  * ```typescript
  * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
@@ -534,6 +574,7 @@ declare class CanvasSprite<Memory extends SpriteOptions & ICanvasBaseMemory = IC
  * ```
  */
 declare class CanvasImage extends CanvasSprite<ICanvasImageMemory> {
+    constructor(options?: CanvasImageOptions | Texture | undefined);
     get memory(): ICanvasImageMemory;
     set memory(memory: ICanvasImageMemory);
     imageLink: string;
@@ -682,16 +723,33 @@ declare class TickerBase<TArgs extends TickerArgsType> implements ITicker<TArgs>
     fn(_t: Ticker, _args: TArgs, _tags: string | string[]): void;
 }
+type TickerFadeAlphaProps = {
+    /**
+     * The speed of the fade
+     */
+    speed?: number;
+    /**
+     * The type of the fade
+     * @default "hide"
+     */
+    type?: "hide" | "show";
+    /**
+     * The limit of the fade
+     * @default type === "hide" ? 0 : 1
+     */
+    limit?: number;
+    /**
+     * The tag to remove after the fade is done
+     */
+    tagToRemoveAfter?: string[] | string;
+    /**
+     * If true, the fade only starts if the canvas element have a texture
+     */
+    startOnlyIfHaveTexture?: boolean;
+};
 /**
  * A ticker that fades the alpha of the canvas element of the canvas.
- * @param args The arguments that are passed to the ticker
- * - speed: The speed of the fade
- * - type: The type of the fade, default is "hide"
- * - limit: The limit of the fade, default is 0 for hide and 1 for show
- * - tagToRemoveAfter?: The tag to remove after the fade is done
- * - startOnlyIfHaveTexture?: If true, the fade only starts if the canvas element have a texture
- * @param duration The duration of the ticker
- * @param priority The priority of the ticker
  * @example
  * ```typescript
  * let bunny = addImage("bunny1", "https://pixijs.com/assets/eggHead.png")
@@ -705,153 +763,22 @@ declare class TickerBase<TArgs extends TickerArgsType> implements ITicker<TArgs>
  * GameWindowManager.addTicker("bunny", ticker)
  * ```
  */
-declare class TickerFadeAlpha extends TickerBase<{
-    speed: number;
-    type?: "hide" | "show";
-    limit?: number;
-    tagToRemoveAfter?: string[] | string;
-    startOnlyIfHaveTexture?: boolean;
-}> {
+declare class TickerFadeAlpha extends TickerBase<TickerFadeAlphaProps> {
     /**
      * The method that will be called every frame to fade the alpha of the canvas element of the canvas.
      * @param delta The delta time
      * @param args The arguments that are passed to the ticker
      * @param tags The tags of the canvas element that are connected to this ticker
      */
-    fn(t: Ticker, args: {
-        speed?: number;
-        type?: "hide" | "show";
-        limit?: number;
-        tagToRemoveAfter?: string[] | string;
-        startOnlyIfHaveTexture?: boolean;
-    }, tags: string[]): void;
-}
-type TickerProgrationType = ITickerProgrationLinear | ITickerProgrationExponential;
-interface ITickerProgrationLinear {
-    amt: number;
-    limit?: number;
-    type: "linear";
-}
-interface ITickerProgrationExponential {
-    percentage: number;
-    limit?: number;
-    type: "exponential";
+    fn(t: Ticker, args: TickerFadeAlphaProps, tags: string[]): void;
 }
-/**
- * A ticker that rotates the canvas element of the canvas.
- * @param args The arguments that are passed to the ticker
- * - speed: The speed of the rotation, default is 0.1
- * - clockwise: The direction of the rotation, default is true
- * - speedProgression: The progression of the speed
- * - startOnlyIfHaveTexture?: If true, the rotation only starts if the canvas element have a texture
- * @param duration The duration of the ticker
- * @param priority The priority of the ticker
- * @example
- * ```typescript
- * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
- * GameWindowManager.addCanvasElement("alien", alien);
- * const ticker = new TickerRotate({
- *    speed: 0.1,
- *    clockwise: true,
- * }),
- * GameWindowManager.addTicker("alien", ticker)
- */
-declare class TickerRotate extends TickerBase<{
-    speed?: number;
-    clockwise?: boolean;
-    speedProgression?: TickerProgrationType;
-    startOnlyIfHaveTexture?: boolean;
-}> {
-    /**
-     * The method that will be called every frame to rotate the canvas element of the canvas.
-     * @param delta The delta time
-     * @param args The arguments that are passed to the ticker
-     * @param tags The tags of the canvas element that are connected to this ticker
-     */
-    fn(t: Ticker, args: {
-        speed?: number;
-        clockwise?: boolean;
-        speedProgression?: TickerProgrationType;
-        startOnlyIfHaveTexture?: boolean;
-    }, tags: string[]): void;
-}
-type CanvasElementTagType = string;
-/**
- * Is a decorator that register a canvas element in the game.
- * @param name Name of the canvas element, by default it will use the class name. If the name is already registered, it will show a warning
- * @returns
- */
-declare function canvasElementDecorator(name?: CanvasElementTagType): (target: typeof CanvasBase<any>) => void;
-/**
- * Is a function that saves the character. If the character already exists, it will be overwritten.
- * @param character is the character to save
- * @returns
- * @example
- * ```typescript
- * export const liam = new CharacterBaseModel('liam', { name: 'Liam'});
- * export const alice = new CharacterBaseModel('alice', { name: 'Alice'});
- * saveCharacter([liam, alice]);
- * ```
- */
-declare function saveCharacter<T extends CharacterBaseModel = CharacterBaseModel>(character: T | T[]): void;
-/**
- * is a function that returns the character by the id
- * @param id is the id of the character
- * @returns the character
- * @example
- * ```typescript
- * const liam = getCharacterById('liam');
- * ```
- */
-declare function getCharacterById<T extends CharacterBaseModel>(id: string): T | undefined;
-/**
- * is a function that returns all characters
- * @returns all characters
- * @example
- * ```typescript
- * const allCharacters = getAllCharacters();
- * ```
- */
-declare function getAllCharacters<T extends CharacterBaseModel>(): T[];
-/**
- * Is a decorator that register a event in the game.
- * Is a required decorator for use the event in the game.
- * Thanks to this decoration the game has the possibility of updating the events to the latest modification and saving the game.
- * @param name is th identifier of the event, by default is the name of the class
- * @returns
- */
-declare function eventDecorator(name?: EventIdType): (target: typeof CanvasEvent<any>) => void;
-/**
- * Is a decorator that register a label in the game.
- * Is a required decorator for use the label in the game.
- * Thanks to this decoration the game has the possibility of updating the labels to the latest modification and saving the game.
- * @param name is th identifier of the label, by default is the name of the class
- * @returns
- */
-declare function labelDecorator(name?: LabelIdType): (target: typeof Label) => void;
 /**
  * is a string that represents a ticker id.
  * It is used to GameWindowManager.tickers to get the ticker class.
  */
 type TickerIdType = string;
-/**
- * Is a decorator that register a ticker in the game.
- * Is a required decorator for use the ticker in the game.
- * Thanks to this decoration the game has the possibility of updating the tickers to the latest modification and saving the game.
- * @param name is th identifier of the label, by default is the name of the class
- * @returns
- */
-declare function tickerDecorator(name?: TickerIdType): (target: typeof TickerBase<any>) => void;
 /**
  * IClassWithArgsHistory is a class that contains the name of a class and the arguments that were used to create it.
  */
@@ -1007,6 +934,175 @@ interface ITickersSteps {
     steps: (ITickersStep<any> | RepeatType | PauseType)[];
 }
+type TickerProgrationType = ITickerProgrationLinear | ITickerProgrationExponential;
+type ITickerProgrationLinear = {
+    amt: number;
+    limit?: number;
+    type: "linear";
+};
+type ITickerProgrationExponential = {
+    percentage: number;
+    limit?: number;
+    type: "exponential";
+};
+type TickerMoveProps = {
+    /**
+     * The speed of the movement
+     * @default 0.1
+     */
+    speed?: number;
+    /**
+     * The destination of the movement
+     */
+    destination: {
+        y: number;
+        x: number;
+    };
+    /**
+     * The progression of the speed
+     */
+    speedProgression?: TickerProgrationType;
+    /**
+     * If true, the rotation only starts if the canvas element have a texture
+     */
+    startOnlyIfHaveTexture?: boolean;
+};
+/**
+ * A ticker that moves the canvas element of the canvas.
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * GameWindowManager.addCanvasElement("alien", alien);
+ * const ticker = new TickerMove({
+ *    speed: 0.1,
+ *    destination: { x: 100, y: 100 },
+ * }),
+ * ```
+ */
+declare class TickerMove extends TickerBase<TickerMoveProps> {
+    /**
+     * The method that will be called every frame to move the canvas element of the canvas.
+     * @param t The ticker that is calling this method
+     * @param args The arguments that are passed to the ticker
+     * @param tags The tags of the canvas element that are connected to this ticker
+     */
+    fn(t: Ticker, args: TickerMoveProps, tags: string[]): void;
+}
+type TickerRotateProps = {
+    /**
+     * The speed of the rotation
+     * @default 0.1
+     */
+    speed?: number;
+    /**
+     * The direction of the rotation
+     * @default true
+     */
+    clockwise?: boolean;
+    /**
+     * The progression of the speed
+     */
+    speedProgression?: TickerProgrationType;
+    /**
+     * If true, the rotation only starts if the canvas element have a texture
+     */
+    startOnlyIfHaveTexture?: boolean;
+};
+/**
+ * A ticker that rotates the canvas element of the canvas.
+ * @example
+ * ```typescript
+ * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+ * GameWindowManager.addCanvasElement("alien", alien);
+ * const ticker = new TickerRotate({
+ *    speed: 0.1,
+ *    clockwise: true,
+ * }),
+ * GameWindowManager.addTicker("alien", ticker)
+ * ```
+ */
+declare class TickerRotate extends TickerBase<TickerRotateProps> {
+    /**
+     * The method that will be called every frame to rotate the canvas element of the canvas.
+     * @param delta The delta time
+     * @param args The arguments that are passed to the ticker
+     * @param tags The tags of the canvas element that are connected to this ticker
+     */
+    fn(t: Ticker, args: TickerRotateProps, tags: string[]): void;
+}
+type CanvasElementTagType = string;
+/**
+ * Is a decorator that register a canvas element in the game.
+ * @param name Name of the canvas element, by default it will use the class name. If the name is already registered, it will show a warning
+ * @returns
+ */
+declare function canvasElementDecorator(name?: CanvasElementTagType): (target: typeof CanvasBase<any>) => void;
+/**
+ * Is a function that saves the character. If the character already exists, it will be overwritten.
+ * @param character is the character to save
+ * @returns
+ * @example
+ * ```typescript
+ * export const liam = new CharacterBaseModel('liam', { name: 'Liam'});
+ * export const alice = new CharacterBaseModel('alice', { name: 'Alice'});
+ * saveCharacter([liam, alice]);
+ * ```
+ */
+declare function saveCharacter<T extends CharacterBaseModel = CharacterBaseModel>(character: T | T[]): void;
+/**
+ * is a function that returns the character by the id
+ * @param id is the id of the character
+ * @returns the character
+ * @example
+ * ```typescript
+ * const liam = getCharacterById('liam');
+ * ```
+ */
+declare function getCharacterById<T extends CharacterBaseModel>(id: string): T | undefined;
+/**
+ * is a function that returns all characters
+ * @returns all characters
+ * @example
+ * ```typescript
+ * const allCharacters = getAllCharacters();
+ * ```
+ */
+declare function getAllCharacters<T extends CharacterBaseModel>(): T[];
+/**
+ * Is a decorator that register a event in the game.
+ * Is a required decorator for use the event in the game.
+ * Thanks to this decoration the game has the possibility of updating the events to the latest modification and saving the game.
+ * @param name is th identifier of the event, by default is the name of the class
+ * @returns
+ */
+declare function eventDecorator(name?: EventIdType): (target: typeof CanvasEvent<any>) => void;
+/**
+ * Is a decorator that register a label in the game.
+ * Is a required decorator for use the label in the game.
+ * Thanks to this decoration the game has the possibility of updating the labels to the latest modification and saving the game.
+ * @param name is th identifier of the label, by default is the name of the class
+ * @returns
+ */
+declare function labelDecorator(name?: LabelIdType): (target: typeof Label) => void;
+/**
+ * Is a decorator that register a ticker in the game.
+ * Is a required decorator for use the ticker in the game.
+ * Thanks to this decoration the game has the possibility of updating the tickers to the latest modification and saving the game.
+ * @param name is th identifier of the label, by default is the name of the class
+ * @returns
+ */
+declare function tickerDecorator(name?: TickerIdType): (target: typeof TickerBase<any>) => void;
 /**
  * Set the dialogue to be shown in the game
  * @param text Text of the dialogue
@@ -1100,7 +1196,7 @@ declare function addImage(tag: string, imageUrl: string): CanvasImage;
  * @param canvasImages is a list of images to show.
  * @returns the list of images.
  */
-declare function showCanvasImages(canvasImages: CanvasImage[] | CanvasImage): Promise<CanvasImage[]>;
+declare function loadImages(canvasImages: CanvasImage[] | CanvasImage): Promise<CanvasImage[]>;
 /**
  * Remove a image from the canvas.
  * @param tag is the unique tag of the image. You can use this tag to refer to this image
@@ -1657,4 +1753,4 @@ declare class GameWindowManager {
     static import(data: object): void;
 }
-export { CanvasBase, CanvasContainer, CanvasEvent, type CanvasEventNamesType, CanvasImage, CanvasSprite, CanvasText, CharacterBaseModel, type CharacterBaseModelProps, ChoiceMenuOptionLabel, type ChoiceMenuOptionsType, DialogueBaseModel, type ExportedCanvas, type ExportedStep, type ExportedStorage, GameStepManager, GameStorageManager, GameWindowManager, type ICanvasBaseMemory, type ICanvasContainerMemory, type ICanvasImageMemory, type ICanvasSpriteBaseMemory, type ICanvasSpriteMemory, type ICanvasTextMemory as ICanvasTextTextMemory, type IClassWithArgsHistory, type IClassWithArgsHistoryForExport, type IDialogueHistory, type IHistoryStep, type IHistoryStepData, type IOpenedLabel, type ISaveData, type ITextureMemory, type ITicker, type ITickersSteps, Label, LabelRunModeEnum, Pause, type PauseType, PauseValueType, Repeat, type RepeatType, type StepLabelResultType, type StepLabelType, type StorageElementType, StoredClassModel, TickerBase, TickerFadeAlpha, type TickerProgrationType, TickerRotate, addImage, canvasElementDecorator, clearAllGameDatas, clearChoiceMenuOptions, clearDialogue, eventDecorator, getAllCharacters, getCharacterById, getChoiceMenuOptions, getDialogue, getDialogueHistory, getFlag, getSaveData, getSaveJson, getTexture, labelDecorator, loadSaveData, loadSaveJson, removeCanvasElement, saveCharacter, setChoiceMenuOptions, setDialogue, setFlag, showCanvasImages, showImageWithDissolveTransition, tickerDecorator };
+export { CanvasBase, CanvasContainer, CanvasEvent, type CanvasEventNamesType, CanvasImage, CanvasSprite, CanvasText, CharacterBaseModel, type CharacterBaseModelProps, ChoiceMenuOptionLabel, type ChoiceMenuOptionsType, DialogueBaseModel, type ExportedCanvas, type ExportedStep, type ExportedStorage, GameStepManager, GameStorageManager, GameWindowManager, type ICanvasBaseMemory, type ICanvasContainerMemory, type ICanvasImageMemory, type ICanvasSpriteBaseMemory, type ICanvasSpriteMemory, type ICanvasTextMemory as ICanvasTextTextMemory, type IClassWithArgsHistory, type IClassWithArgsHistoryForExport, type IDialogueHistory, type IHistoryStep, type IHistoryStepData, type IOpenedLabel, type ISaveData, type ITextureMemory, type ITicker, type ITickersSteps, Label, LabelRunModeEnum, Pause, type PauseType, PauseValueType, Repeat, type RepeatType, type StepLabelResultType, type StepLabelType, type StorageElementType, StoredClassModel, TickerBase, TickerFadeAlpha, type TickerFadeAlphaProps, TickerMove, type TickerProgrationType, TickerRotate, type TickerRotateProps, addImage, canvasElementDecorator, clearAllGameDatas, clearChoiceMenuOptions, clearDialogue, eventDecorator, getAllCharacters, getCharacterById, getChoiceMenuOptions, getDialogue, getDialogueHistory, getFlag, getSaveData, getSaveJson, getTexture, labelDecorator, loadImages, loadSaveData, loadSaveJson, removeCanvasElement, saveCharacter, setChoiceMenuOptions, setDialogue, setFlag, showImageWithDissolveTransition, tickerDecorator };