[#999] add support for line thickness when using strokeLine() in WebGL

melonjs · May 17, 2024 · dd7297d · dd7297d
1 parent f91af57
commit dd7297d
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## [17.3.0] (melonJS 2) - _2024-05-xx_
 
+### Added
+- Renderer: add support for line thickness when using `strokeLine()` in WebGL
+
+### Changed
+- Renderer: the `setLineWidth()` method is now deprecated and replaced by a `lineWidth` class property
+
 ### Fixed
 - Renderer: fix animation when using multi-texture atlas in WebGL mode
 - TMX: fix tsx file type import when using a React / Vue build step (thanks @customautosys)

diff --git a/src/lang/deprecated.js b/src/lang/deprecated.js
@@ -5,6 +5,8 @@ import { DropTarget } from "./../renderable/dragndrop.js";
 import UISpriteElement from "./../renderable/ui/uispriteelement.js";
 import { warning } from "./console.js";
 import CanvasRenderTarget from "../video/rendertarget/canvasrendertarget.js";
+import CanvasRenderer from "../video/canvas/canvas_renderer.js";
+import WebGLRenderer from "../video/webgl/webgl_renderer.js";
 
 /*
  * placeholder for all deprecated classes and corresponding alias for backward compatibility
@@ -132,7 +134,6 @@ Renderer.prototype.getWidth = function()  {
  * return the height of the system Canvas
  * @public
  * @name getHeight
- * @class
  * @memberof Renderer#
  * @deprecated since 15.12.0
  * @see height
@@ -163,3 +164,29 @@ export class CanvasTexture extends CanvasRenderTarget {
     }
 }
 
+/**
+ * return the height of the system Canvas
+ * @public
+ * @name setLineWidth
+ * @memberof CanvasRenderer#
+ * @deprecated since 17.3.0
+ * @see lineWidth
+ */
+CanvasRenderer.prototype.setLineWidth = function(width)  {
+    warning("setLineWidth", "lineWidth", "17.3.0");
+    this.lineWidth = width;
+};
+
+/**
+ * return the height of the system Canvas
+ * @public
+ * @name setLineWidth
+ * @memberof WebGLRenderer#
+ * @deprecated since 17.3.0
+ * @see lineWidth
+ */
+WebGLRenderer.prototype.setLineWidth = function(width)  {
+    warning("setLineWidth", "lineWidth", "17.3.0");
+    this.lineWidth = width;
+};
+
diff --git a/src/video/canvas/canvas_renderer.js b/src/video/canvas/canvas_renderer.js
@@ -670,11 +670,18 @@ export default class CanvasRenderer extends Renderer {
     }
 
     /**
-     * Set the line width on the context
-     * @param {number} width - Line width
+     * sets or returns the thickness of lines for shape drawing
      */
-    setLineWidth(width) {
-        this.getContext().lineWidth = width;
+    get lineWidth() {
+        return this.getContext().lineWidth;
+    }
+
+    /**
+     * @ignore
+     */
+    set lineWidth(value) {
+        this.getContext().lineWidth = value;
+        return value;
     }
 
     /**

diff --git a/src/video/webgl/webgl_renderer.js b/src/video/webgl/webgl_renderer.js
@@ -49,6 +49,14 @@ export default class WebGLRenderer extends Renderer {
          */
         this.gl = this.renderTarget.context;
 
+        /**
+         * sets or returns the thickness of lines for shape drawing (limited to strokeLine)
+         * @type {number}
+         * @default 1
+         * @see WebGLRenderer#strokeLine
+         */
+        this.lineWidth = 1;
+
         /**
          * the vertex buffer used by this WebGL Renderer
          * @type {WebGLBuffer}
@@ -395,6 +403,7 @@ export default class WebGLRenderer extends Renderer {
     clear() {
         let gl = this.gl;
         gl.clearColor(0, 0, 0, this.settings.transparent ? 0.0 : 1.0);
+        this.lineWidth = 1;
         if (this.depthTest === "z-buffer") {
             gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
         } else {
@@ -784,14 +793,6 @@ export default class WebGLRenderer extends Renderer {
         this.currentColor.alpha *= alpha;
     }
 
-    /**
-     * Set the line width
-     * @param {number} width - Line width
-     */
-    setLineWidth(width) {
-        this.getContext().lineWidth(width);
-    }
-
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @param {number} x - arc center point x-axis
@@ -865,10 +866,34 @@ export default class WebGLRenderer extends Renderer {
      */
     strokeLine(startX, startY, endX, endY) {
         this.setCompositor("primitive");
-        this.path2D.beginPath();
-        this.path2D.moveTo(startX, startY);
-        this.path2D.lineTo(endX, endY);
-        this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+        if (this.lineWidth === 1) {
+            this.path2D.beginPath();
+            this.path2D.moveTo(startX, startY);
+            this.path2D.lineTo(endX, endY);
+            this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+        } else {
+            const halfWidth = this.lineWidth / 2;
+            const angle = Math.atan2(endY - startY, endX - startX);
+            const dx = Math.sin(angle) * halfWidth;
+            const dy = Math.cos(angle) * halfWidth;
+            const x1 = startX - dx;
+            const y1 = startY + dy;
+            const x2 = startX + dx;
+            const y2 = startY - dy;
+            const x3 = endX + dx;
+            const y3 = endY - dy;
+            const x4 = endX - dx;
+            const y4 = endY + dy;
+
+            this.path2D.beginPath();
+            this.path2D.moveTo(x1, y1);
+            this.path2D.lineTo(x2, y2);
+            this.path2D.lineTo(x3, y3);
+            this.path2D.lineTo(x4, y4);
+            this.path2D.closePath();
+            // draw all triangles
+            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+        }
     }