@drincs/pixi-vn 0.6.2 → 0.6.3

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Container, Sprite, Text, Assets, Texture, Application, Rectangle } from 'pixi.js';
+import { Container, Sprite, Text, Assets, Texture, Application, FillGradient, Color, TextStyle, Rectangle } from 'pixi.js';
 export { Assets } from 'pixi.js';
 import { diff } from 'deep-diff';
 import sha1 from 'crypto-js/sha1';
@@ -213,7 +213,7 @@ var CanvasContainer = class extends Container {
   constructor(options) {
     super(options);
     this.pixivnId = CANVAS_CONTAINER_ID;
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID;
   }
   get memory() {
     let memory = getMemoryContainer(this);
@@ -251,7 +251,6 @@ function getMemoryContainer(element) {
     position: { x: element.position.x, y: element.position.y },
     skew: { x: element.skew.x, y: element.skew.y },
     visible: element.visible,
-    culled: element.culled,
     x: element.x,
     y: element.y,
     boundsArea: element.boundsArea,
@@ -289,7 +288,6 @@ function setMemoryContainer(element, memory) {
   memory.position && element.position.set(memory.position.x, memory.position.y);
   memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
   memory.visible && (element.visible = memory.visible);
-  memory.culled && (element.culled = memory.culled);
   memory.x && (element.x = memory.x);
   memory.y && (element.y = memory.y);
   memory.boundsArea && (element.boundsArea = memory.boundsArea);
@@ -320,17 +318,19 @@ function getTexture(imageUrl) {
     });
   });
 }
-function getTextStyle(style) {
-  let fill = style.fill;
-  if (fill instanceof Object) {
-    console.warn("[Pixi'VN] CanvasText.style.fill is a FillGradient or FillPattern, this is not supported yet.", fill);
-    fill = "#00FF00";
+function getFillGradientFillPattern(prop, propName) {
+  if (!(prop instanceof Object)) {
+    return prop;
   }
+  console.warn(`[Pixi'VN] CanvasText.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop);
+  return void 0;
+}
+function getTextStyle(style) {
   return {
     align: style.align,
     breakWords: style.breakWords,
     dropShadow: style.dropShadow,
-    fill,
+    fill: getFillGradientFillPattern(style.stroke, "fill"),
     fontFamily: style.fontFamily,
     fontSize: style.fontSize,
     fontStyle: style.fontStyle,
@@ -340,7 +340,7 @@ function getTextStyle(style) {
     letterSpacing: style.letterSpacing,
     lineHeight: style.lineHeight,
     padding: style.padding,
-    stroke: style.stroke,
+    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
     textBaseline: style.textBaseline,
     trim: style.trim,
     whiteSpace: style.whiteSpace,
@@ -399,7 +399,7 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
     super(options);
     this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_SPRITE_ID;
   }
   get memory() {
     return getMemorySprite(this);
@@ -555,7 +555,7 @@ var CanvasText = class extends Text {
     super(options);
     this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_TEXT_ID;
   }
   get memory() {
     return getMemoryText(this);
@@ -1266,7 +1266,7 @@ var ZoomInOutTicker = class extends ZoomTicker {
 };
 
 // src/constants.ts
-var PIXIVN_VERSION = "0.6.2";
+var PIXIVN_VERSION = "0.6.3";
 var Repeat = "repeat";
 function Pause(duration) {
   return {
@@ -1762,7 +1762,7 @@ var _GameWindowManager = class _GameWindowManager {
         height
       }, options)).then(() => {
         _GameWindowManager._isInitialized = true;
-        this.addCanvasIntoElement(element);
+        this.addCanvasIntoHTMLElement(element);
         window.addEventListener("resize", _GameWindowManager.resize);
         _GameWindowManager.resize();
         asciiArtLog();
@@ -1773,7 +1773,7 @@ var _GameWindowManager = class _GameWindowManager {
    * Add the canvas into a html element.
    * @param element it is the html element where I will put the canvas. Example: document.body
    */
-  static addCanvasIntoElement(element) {
+  static addCanvasIntoHTMLElement(element) {
     if (_GameWindowManager.isInitialized) {
       element.appendChild(_GameWindowManager.app.canvas);
     } else {
@@ -3196,7 +3196,98 @@ var skullyName = `<span style="color:red">Skully</span>`;
 var bunnyImage = "https://pixijs.com/assets/bunny.png";
 var bunnyName = `Bunny`;
 
-// src/labels/CanvasEventsTestLabel.ts
+// src/labels/BaseCanvasElementTestLabel.ts
+var BASE_CANVAS_ELEMENT_LABEL = "___pixi_vn_base_canvas_element_label___";
+var baseCanvasElementTestLabel = newLabel(
+  BASE_CANVAS_ELEMENT_LABEL,
+  [
+    () => __async(void 0, null, function* () {
+      let number = 25;
+      setDialogue({
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create ${number} bunnies (CanvasSprites) and put them in a CanvasContainer.`
+      });
+      const container = new CanvasContainer();
+      GameWindowManager.addCanvasElement("container", container);
+      const texture = yield Assets.load(bunnyImage);
+      for (let i = 0; i < number; i++) {
+        const bunny = new CanvasSprite(texture);
+        bunny.x = i % 5 * 40;
+        bunny.y = Math.floor(i / 5) * 40;
+        container.addChild(bunny);
+      }
+      container.x = GameWindowManager.screen.width / 2;
+      container.y = GameWindowManager.screen.height / 2;
+      container.pivot.x = container.width / 2;
+      container.pivot.y = container.height / 2;
+      GameWindowManager.addTicker("container", new RotateTicker({ speed: 1 }));
+    }),
+    () => __async(void 0, null, function* () {
+      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.
+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" });
+      basicText.x = 50;
+      basicText.y = 100;
+      GameWindowManager.addCanvasElement("basicText", basicText);
+      const fill = new FillGradient(0, 0, 0, 36 * 1.7 * 7);
+      const colors = [16777215, 65433].map((color) => Color.shared.setValue(color).toNumber());
+      colors.forEach((number, index) => {
+        const ratio = index / colors.length;
+        fill.addColorStop(ratio, number);
+      });
+      const style = new TextStyle({
+        fontFamily: "Arial",
+        fontSize: 36,
+        fontStyle: "italic",
+        fontWeight: "bold",
+        fill: { fill },
+        stroke: { color: "#4a1850", width: 5, join: "round" },
+        dropShadow: {
+          color: "#000000",
+          blur: 4,
+          angle: Math.PI / 6,
+          distance: 6
+        },
+        wordWrap: true,
+        wordWrapWidth: 440
+      });
+      const richText = new CanvasText({
+        text: "Rich text with a lot of options and across multiple lines",
+        style
+      });
+      richText.x = 50;
+      richText.y = 220;
+      GameWindowManager.addCanvasElement("richText", richText);
+      const skewStyle = new TextStyle({
+        fontFamily: "Arial",
+        dropShadow: {
+          alpha: 0.8,
+          angle: 2.1,
+          blur: 4,
+          color: "0x111111",
+          distance: 10
+        },
+        fill: "#ffffff",
+        stroke: { color: "#004620", width: 12, join: "round" },
+        fontSize: 60,
+        fontWeight: "lighter"
+      });
+      const skewText = new CanvasText({
+        text: "SKEW IS COOL",
+        style: skewStyle
+      });
+      skewText.skew.set(0.65, -0.3);
+      skewText.anchor.set(0.5, 0.5);
+      skewText.x = 300;
+      skewText.y = 480;
+      GameWindowManager.addCanvasElement("skewText", skewText);
+    })
+  ]
+);
 var EventTest1 = class extends CanvasEvent {
   fn(event, sprite) {
     if (event === "pointerdown") {
@@ -3850,6 +3941,15 @@ var pixivnTestStartLabel = newLabel(
     (props) => GameStepManager.jumpLabel(pixivnTestStartLabel2, props)
   ]
 );
+var openWiki = newLabel(
+  "___pixi_vn_open_wiki___",
+  [
+    (props) => {
+      window.open("https://pixi-vn.web.app/");
+      GameStepManager.goNext(props);
+    }
+  ]
+);
 var RESTART_TEST_LABEL = "___pixi_vn_restart_test_label___";
 var pixivnTestStartLabel2 = newLabel(
   RESTART_TEST_LABEL,
@@ -3858,8 +3958,10 @@ 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)
       ]);
@@ -3869,5 +3971,5 @@ var pixivnTestStartLabel2 = newLabel(
 );
 
 export { CanvasBase, CanvasContainer, CanvasEvent, CanvasImage, CanvasSprite, CanvasText, CharacterBaseModel2 as CharacterBaseModel, ChoiceMenuOption, ChoiceMenuOptionClose, Close, DialogueBaseModel, FadeAlphaTicker, GameStepManager, GameStorageManager, GameWindowManager, Label, MoveTicker, Pause, Repeat, RotateTicker, StoredClassModel, TickerBase, ZoomTicker, addImage, canvasElementDecorator, clearAllGameDatas, clearChoiceMenuOptions, clearDialogue, eventDecorator, getAllCharacters, getCharacterById, getChoiceMenuOptions, getDialogue, getDialogueHistory, getFlag, getLabelById, getSaveData, getSaveJson, getTexture, juliette, loadImage, loadSaveData, loadSaveJson, moveIn, moveOut, newLabel, pixivnTestStartLabel, removeCanvasElement, removeWithDissolveTransition, removeWithFadeTransition, saveCharacter, setChoiceMenuOptions, setDialogue, setFlag, showImage, showWithDissolveTransition, showWithFadeTransition, tickerDecorator, zoomIn, zoomOut };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map