@drincs/pixi-vn 0.6.2 → 0.6.4

package/dist/index.js

@@ -218,7 +218,7 @@ var CanvasContainer = class extends pixi_js.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);
@@ -256,7 +256,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,
@@ -294,7 +293,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);
@@ -325,17 +323,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,
@@ -345,7 +345,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,
@@ -404,7 +404,7 @@ var CanvasSprite = class _CanvasSprite extends pixi_js.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);
@@ -560,7 +560,7 @@ var CanvasText = class extends pixi_js.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);
@@ -1271,7 +1271,7 @@ var ZoomInOutTicker = class extends exports.ZoomTicker {
 };
 
 // src/constants.ts
-var PIXIVN_VERSION = "0.6.2";
+var PIXIVN_VERSION = "0.6.4";
 var Repeat = "repeat";
 function Pause(duration) {
   return {
@@ -1767,7 +1767,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();
@@ -1778,7 +1778,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 {
@@ -3201,7 +3201,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 pixi_js.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 exports.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 pixi_js.FillGradient(0, 0, 0, 36 * 1.7 * 7);
+      const colors = [16777215, 65433].map((color) => pixi_js.Color.shared.setValue(color).toNumber());
+      colors.forEach((number, index) => {
+        const ratio = index / colors.length;
+        fill.addColorStop(ratio, number);
+      });
+      const style = new pixi_js.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 pixi_js.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") {
@@ -3279,17 +3370,13 @@ 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 = CanvasSprite.from(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 textureButtonT = yield pixi_js.Assets.load("https://pixijs.com/assets/button.png");
+      const textureButton = CanvasSprite.from(textureButtonT);
       const buttons = [];
       const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445];
       for (let i = 0; i < 5; i++) {
@@ -3855,6 +3942,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,
@@ -3863,8 +3959,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)
       ]);
@@ -3933,5 +4031,5 @@ exports.showWithFadeTransition = showWithFadeTransition;
 exports.tickerDecorator = tickerDecorator;
 exports.zoomIn = zoomIn;
 exports.zoomOut = zoomOut;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map