Add custom hitAreaCallback

examples/lineshape/line-type.js

@@ -15,10 +15,10 @@ class Demo extends Phaser.Scene {
     create() {
         var graphics = this.add.graphics().setDepth(1);
 
-        CreateLine(this, 0, 350, undefined, graphics);
-        CreateLine(this, 200, 350, 'spline', graphics);
-        CreateLine(this, 400, 350, 'poly', graphics);
-        CreateLine(this, 600, 350, 'straight', graphics);
+        CreateLine(this, 100, 200, undefined, graphics);
+        CreateLine(this, 500, 200, 'spline', graphics);
+        CreateLine(this, 100, 500, 'poly', graphics);
+        CreateLine(this, 500, 500, 'straight', graphics);
     }
 }
 

plugins/gameobjects/shape/line/Creator.d.ts

@@ -0,0 +1,12 @@
+import Line from './Line';
+
+export default Creator;
+
+declare namespace Creator {
+    interface IConfig extends Phaser.Types.GameObjects.GameObjectConfig { }
+}
+
+declare function Creator(
+    config?: Creator.IConfig,
+    addToScene?: boolean,
+): Line;

plugins/gameobjects/shape/line/Factory.d.ts

@@ -0,0 +1,13 @@
+import Line from './Line';
+
+export default function (
+    config?: Line.IConfig
+): Line;
+
+export default function (
+    points?: Line.PointType[],
+    lineWidth?: number,
+    color?: number,
+    alpha?: number,
+    lineType?: Line.LineType
+): Line;

plugins/gameobjects/shape/line/Line.d.ts

@@ -0,0 +1,42 @@
+import BaseShapes from '../shapes/BaseShapes';
+
+// import * as Phaser from 'phaser';
+export default Line;
+
+declare namespace Line {
+    type PointType = { x: number, y: number };
+    type LineType = 0 | 'bezier' | 1 | 'spline' | 2 | 'polyline' | 'poly' | 3 | 'straightline' | 'straight';
+
+    interface IConfig {
+        points?: PointType[],
+        lineWidth?: number,
+        color?: number,
+        alpha?: number,
+        lineType?: LineType,
+        pointRadius?: number,
+    }
+}
+
+declare class Line extends BaseShapes {
+    constructor(
+        scene: Phaser.Scene,
+        config?: Line.IConfig
+    );
+
+    constructor(
+        scene: Phaser.Scene,
+        points?: Line.PointType[],
+        lineWidth?: number,
+        color?: number,
+        alpha?: number,
+        lineType?: Line.LineType
+    );
+
+    setLine(
+        points: Line.PointType[],
+        lineType?: Line.LineType
+    ): this;
+
+    setLineType(lineType: Line.LineType): this;
+
+}

plugins/gameobjects/shape/line/Line.js

@@ -1,9 +1,10 @@
 import BaseShapes from '../shapes/BaseShapes.js';
-import ShapesUpdateMethods from './methods/ShapesUpdateMethods.js';
+import Methods from './methods/Methods.js';
 import { BEZIER, SPLINE, POLYLINE, STRAIGHTLINE } from './Const.js';
 
 class Line extends BaseShapes {
     constructor(scene, points, lineWidth, color, alpha, lineType) {
+        var pointRadius;
         if (points !== undefined) {
             if (typeof (points) === 'number') {
                 lineType = alpha
@@ -18,6 +19,7 @@ class Line extends BaseShapes {
                 color = config.color;
                 alpha = config.alpha;
                 lineType = config.lineType;
+                pointRadius = config.pointRadius;
             }
         }
 
@@ -26,10 +28,14 @@ class Line extends BaseShapes {
         if (color === undefined) { color = 0xffffff; }
         if (alpha === undefined) { alpha = 1; }
         if (lineType === undefined) { lineType = 0; }
+        if (pointRadius === undefined) { pointRadius = 10; }
 
         super(scene);
         this.type = 'rexPath';
+        this.padding = {};
+        this.bounds = undefined;
 
+        this.setPointRadius(pointRadius);
         this.setLine(points, lineType);
         this.setStrokeStyle(lineWidth, color, alpha);
 
@@ -91,7 +97,7 @@ const CURVETYPE_MAP = {
 
 Object.assign(
     Line.prototype,
-    ShapesUpdateMethods,
+    Methods
 )
 
 export default Line;

plugins/gameobjects/shape/line/methods/Methods.js

@@ -0,0 +1,12 @@
+import ShapesUpdateMethods from './ShapesUpdateMethods.js';
+import SetInteractiveMethods from './SetInteractiveMethods.js';
+
+var Methods = {};
+
+Object.assign(
+    Methods,
+    ShapesUpdateMethods,
+    SetInteractiveMethods
+)
+
+export default Methods;

plugins/gameobjects/shape/line/methods/SetInteractiveMethods.js

@@ -0,0 +1,40 @@
+import LinesToCircle from '../../../../utils/geom/intersects/LinesToCircle.js';
+
+const Rectangle = Phaser.Geom.Rectangle;
+const RectangleContains = Phaser.Geom.Rectangle.Contains;
+const SetInteractiveBase = Phaser.GameObjects.GameObject.prototype.setInteractive;
+
+const GlobPoint = new Phaser.Geom.Circle();
+
+var HitAreaCallback = function (shape, x, y, gameObject) {
+    if (!RectangleContains(shape, x, y)) {
+        return false;
+    }
+
+    GlobPoint.setTo(x, y, gameObject.pointRadius);
+
+    var line = gameObject.getShapes()[0];
+    var points = line.pathData;
+
+    return LinesToCircle(points, GlobPoint);
+}
+
+export default {
+    setPointRadius(radius) {
+        this.pointRadius = radius;
+        return this;
+    },
+
+    setInteractive(config) {
+        if (config === undefined) {
+            config = {};
+        }
+
+        config.hitArea = new Rectangle(0, 0, this.width, this.height);
+        config.hitAreaCallback = HitAreaCallback;
+
+        SetInteractiveBase.call(this, config);
+
+        return this;
+    }
+}

plugins/gameobjects/shape/line/methods/SetTransform.js

@@ -1,17 +1,18 @@
-import GetBounds from './GetBounds.js';
-
-var SetTransform = function (line) {
-    // Size
-    var bounds = GetBounds.call(this, line.pathData, true);
-    var width = Math.max(bounds.width, this.lineWidth);
-    var height = Math.max(bounds.height, this.lineWidth);
+var SetTransform = function (line, bounds) {
+    // Size    
+    var bounds = this.bounds;
+    var radius = this.pointRadius;
+    var x = bounds.x - radius;
+    var y = bounds.y - radius;
+    var width = bounds.width + (radius * 2);
+    var height = bounds.height + (radius * 2);
     this.setSize(width, height);
     // Origin
-    this.setOrigin(-bounds.x / width, -bounds.y / height);
+    this.setOrigin(-x / width, -y / height);
     // Position
     var point = this.points[0];
     this.setPosition(point.x, point.y);
-    line.offset(-bounds.x, -bounds.y);
+    line.offset(-x, -y);
 }
 
 export default SetTransform;

plugins/gameobjects/shape/line/methods/ShapesUpdateMethods.js

@@ -5,6 +5,7 @@ import DrawCubicBezierCurve from './DrawCubicBezierCurve.js';
 import DrawSpinleCurve from './DrawSpinleCurve.js';
 import DrawStraightLine from './DrawStraightLine.js';
 import DrawPolyLine from './DrawPolyLine.js';
+import GetBounds from './GetBounds.js';
 import SetTransform from './SetTransform.js';
 
 export default {
@@ -39,6 +40,7 @@ export default {
             DrawSpinleCurve.call(this, line);
         }
 
+        this.bounds = GetBounds.call(this, line.pathData, true);
         SetTransform.call(this, line);
     }
 }

plugins/lineshape-plugin.d.ts

@@ -0,0 +1,16 @@
+import Factory from './gameobjects/shape/line/Factory';
+import Creator from './gameobjects/shape/line/Creator';
+
+export default class extends Phaser.Plugins.BasePlugin { }
+
+declare module 'phaser' {
+    namespace GameObjects {
+        interface GameObjectFactory {
+            rexLineShape: typeof Factory,
+        }
+
+        interface GameObjectCreator {
+            rexLineShape: typeof Creator,
+        }
+    }
+}

plugins/lineshape.d.ts

@@ -0,0 +1,2 @@
+import Line from './gameobjects/shape/line/Line';
+export default Line;

plugins/utils/geom/intersects/LinesToCircle.js

@@ -0,0 +1,23 @@
+const LineToCircle = Phaser.Geom.Intersects.LineToCircle;
+
+const tmpLine = new Phaser.Geom.Line();
+
+var LinesToCircle = function (points, circle) {
+    tmpLine.x1 = points[0];
+    tmpLine.y1 = points[1];
+    for (var i = 2, cnt = points.length; i < cnt; i += 2) {
+        tmpLine.x2 = points[i];
+        tmpLine.y2 = points[i + 1];
+
+        if (LineToCircle(tmpLine, circle)) {
+            return true;
+        }
+
+        tmpLine.x1 = tmpLine.x2;
+        tmpLine.y1 = tmpLine.y2;
+    }
+
+    return false;
+}
+
+export default LinesToCircle;