Update demo & bug fixes

soimy · Feb 28, 2018 · 1213a15 · 1213a15
1 parent 6e4b8d4
commit 1213a15
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 85 deletions.
diff --git a/demo/assets/scripts/dat.gui.min.js b/demo/assets/scripts/dat.gui.min.js
diff --git a/demo/assets/scripts/msdf-text-sample.js b/demo/assets/scripts/msdf-text-sample.js
@@ -4,38 +4,84 @@ const options = {
     width: window.innerWidth,
     height: window.innerHeight,
     resolution: window.devicePixelRatio,
-    backgroundColor: 0x000000
+    backgroundColor: 0xAAAAAA
 }
 const app = new PIXI.Application(options);
 document.body.appendChild(app.view);
 app.stop();
 
 const resourceList = [
-    "../fonts/DimboR.fnt"
+    "https://raw.githubusercontent.com/soimy/pixi-msdf-text/master/demo/assets/fonts/DimboR.fnt"
 ];
 app.loader.add(resourceList).load(onAssetsLoaded);
 
+let sampleText;
+let isDrag = false;
+let lastPointerVector, lastRot, lastScale;
+let textControl;
+
 function onAssetsLoaded() {
     const textOptions = {
         fontFace: "DimboR",
         fontSize: 150,
-        fillColor: 0x051855,
+        fillColor: 0xFFAA22,
         weight: 0.4,
-        strokeThickness: 0.4,
+        strokeThickness: 0.3,
         strokeColor: 0x051855,
         dropShadow: true,
         dropShadowColor: 0x000000,
-        dropShadowOffset: new PIXI.Point(0.006, 0.006),
+        dropShadowOffset: new PIXI.Point(0.004, 0.004),
         dropShadowAlpha: 0.4,
-        dropShadowBlur: 0.0,
+        dropShadowBlur: 0.01,
         align: "center",
         letterSpacing: 0,
         baselineOffset: 8,
         debugLevel: 3
     }
-    const sampleText = new MSDFText.MSDFText("PixiJS powered", textOptions);
+    sampleText = new MSDFText.MSDFText("PixiJS support\nMSDF BitmapFont", textOptions);
     app.stage.addChild(sampleText);
     sampleText.pivot.set(sampleText.textWidth / 2, sampleText.textHeight / 2);
-    sampleText.position.set(app.stage.width / 2, app.stage.height / 2);
+    sampleText.position.set(app.screen.width / 2, app.screen.height / 2);
+    app.start();
+
+    sampleText.interactive = true;
+    sampleText.buttonMode = true;
+
+    sampleText.on("mousedown", e => {
+        const pos = e.data.getLocalPosition(app.stage);
+        lastPointerVector = new PIXI.Point(pos.x - sampleText.x, pos.y - sampleText.y);
+        lastRot = sampleText.rotation;
+        lastScale = sampleText.scale.x;
+        isDrag = true;
+        sampleText.tint = 0xAAAAAA;
+    });
+
+    sampleText.on("mousemove", e => {
+        if (!isDrag) return;
+        const p = e.data.getLocalPosition(app.stage);
+        const pointerVector = new PIXI.Point(p.x - sampleText.x, p.y - sampleText.y);
+        sampleText.rotation = lastRot - getRadsBetween(lastPointerVector, pointerVector);
+        const scale = vectorLength(pointerVector) / vectorLength(lastPointerVector) * lastScale; 
+        sampleText.scale.set(scale, scale);
+    });
+    sampleText.on("mouseup", e => {
+        isDrag = false;
+        sampleText.tint = 0xFFFFFF;
+    });
+
+    const gui = new dat.GUI();
+    textControl = gui.add(sampleText, "text").onChange(rePosition);
+}
 
+function getRadsBetween(vec1, vec2) {
+    return Math.atan2(vec1.y, vec1.x) - Math.atan2(vec2.y, vec2.x);
 }
+
+function vectorLength(vec) {
+    return Math.sqrt(vec.x * vec.x + vec.y * vec.y);
+}
+
+function rePosition() {
+    sampleText.pivot.set(sampleText.textWidth / 2, sampleText.textHeight / 2);
+    sampleText.position.set(app.screen.width / 2, app.screen.height / 2);
+}
diff --git a/demo/index.html b/demo/index.html
@@ -4,9 +4,10 @@
 <head>
     <meta charset="UTF-8">
     <title>MSDFText Test</title>
-    <script src="https://pixijs.download/v4.7.0/pixi.min.js"></script>
-    <script src="https://github.com/soimy/eventemitter3-timer/releases/download/1.0.1/eventemitter3-timer.min.js"></script>
-    <script src="../dist/pixi-msdf-text.js"></script>
+    <script type="text/javascript" src="https://pixijs.download/v4.7.0/pixi.min.js"></script>
+    <script type="text/javascript" src="https://github.com/soimy/eventemitter3-timer/releases/download/1.0.1/eventemitter3-timer.min.js"></script>
+    <script type="text/javascript" src="assets/scripts/dat.gui.min.js"></script>
+    <script type="text/javascript" src="../dist/pixi-msdf-text.js"></script>
     <link rel="stylesheet" type="text/css" href="assets/styles/style.css" />
 </head>
 

diff --git a/dist/pixi-msdf-text.d.ts b/dist/pixi-msdf-text.d.ts
@@ -1,21 +1,17 @@
 // Generated by dts-bundle v0.7.3
-// Dependencies for this module:
-//   ../pixi.js
-
-import { Point, Texture, Rectangle } from "pixi.js";
 
 export interface MSDFTextOption {
     fontFace: string;
     fontSize: number;
     fillColor?: number;
     weight?: number;
-    texture?: Texture;
+    texture?: PIXI.Texture;
     strokeColor?: number;
     strokeThickness?: number;
     dropShadow?: boolean;
     dropShadowColor?: number;
     dropShadowAlpha?: number;
-    dropShadowOffset?: Point;
+    dropShadowOffset?: PIXI.Point;
     dropShadowBlur?: number;
     align?: "left" | "right" | "center";
     baselineOffset?: number;
@@ -35,7 +31,7 @@ export class MSDFText extends PIXI.mesh.Mesh {
     readonly textWidth: number;
     readonly textHeight: number;
     readonly maxWidth: number;
-    readonly textMetric: Rectangle;
+    readonly textMetric: PIXI.Rectangle;
 }
 
 export class MSDFRenderer extends PIXI.ObjectRenderer {

diff --git a/dist/pixi-msdf-text.js b/dist/pixi-msdf-text.js
diff --git a/dist/pixi-msdf-text.js.map b/dist/pixi-msdf-text.js.map