melonjs 17.3.0 → 17.4.0

package/dist/melonjs.mjs/video/webgl/webgl_renderer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v17.3.0
+ * melonJS Game Engine - v17.4.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -17,12 +17,23 @@ import { emit, on, ONCONTEXT_LOST, ONCONTEXT_RESTORED, GAME_RESET, CANVAS_ONRESI
 import pool from '../../system/pooling.js';
 import { isPowerOfTwo } from '../../math/math.js';
 
+/**
+ * additional import for TypeScript
+ * @import Rect from "./../../geometries/rectangle.js";
+ * @import RoundRect from "./../../geometries/roundrect.js";
+ * @import Polygon from "./../../geometries/poly.js";
+ * @import Line from "./../../geometries/line.js";
+ * @import Ellipse from "./../../geometries/ellipse.js";
+ * @import Matrix3d from "./../../math/matrix3.js";
+ * @import Compositor from "./compositors/compositor.js";
+ */
+
 // list of supported compressed texture formats
 let supportedCompressedTextureFormats;
 
 /**
  * @classdesc
- * a WebGL renderer draw
+ * a WebGL renderer object
  * @augments Renderer
  */
 class WebGLRenderer extends Renderer {
@@ -57,13 +68,23 @@ class WebGLRenderer extends Renderer {
         this.gl = this.renderTarget.context;
 
         /**
-         * sets or returns the thickness of lines for shape drawing (limited to strokeLine)
+         * sets or returns the thickness of lines for shape drawing (limited to strokeLine, strokePolygon and strokeRect)
          * @type {number}
          * @default 1
          * @see WebGLRenderer#strokeLine
+         * @see WebGLRenderer#strokePolygon
+         * @see WebGLRenderer#strokeRect
          */
         this.lineWidth = 1;
 
+        /**
+         * sets or returns the shape used to join two line segments where they meet.
+         * Out of the three possible values for this property: "round", "bevel", and "miter", only "round" is supported for now in WebGL
+         * @type {string}
+         * @default "round"
+         */
+        this.lineJoin = "round";
+
         /**
          * the vertex buffer used by this WebGL Renderer
          * @type {WebGLBuffer}
@@ -105,7 +126,7 @@ class WebGLRenderer extends Renderer {
 
         /**
          * The current compositor used by the renderer
-         * @type {WebGLCompositor}
+         * @type {Compositor}
          */
         this.currentCompositor = undefined;
 
@@ -117,7 +138,7 @@ class WebGLRenderer extends Renderer {
 
         /**
          * The list of active compositors
-         * @type {Map<WebGLCompositor>}
+         * @type {Map<Compositor>}
          */
         this.compositors = new Map();
 
@@ -196,7 +217,6 @@ class WebGLRenderer extends Renderer {
      * The WebGL version used by this renderer (1 or 2)
      * @type {number}
      * @default 1
-     * @readonly
      */
     get WebGLVersion() {
         return this.renderTarget.WebGLVersion;
@@ -766,10 +786,11 @@ class WebGLRenderer extends Renderer {
 
     /**
      * not used by this renderer?
+     * @param {boolean} [enable=false]
      * @ignore
      */
-    setAntiAlias(context, enable) {
-        super.setAntiAlias(context, enable);
+    setAntiAlias(enable = false) {
+        super.setAntiAlias(enable);
         // TODO: perhaps handle GLNEAREST or other options with texture binding
     }
 
@@ -861,7 +882,7 @@ class WebGLRenderer extends Renderer {
      * @param {number} h - vertical radius of the ellipse
      */
     fillEllipse(x, y, w, h) {
-        this.strokeEllipse(x, y, w, h, false);
+        this.strokeEllipse(x, y, w, h, true);
     }
 
     /**
@@ -916,7 +937,7 @@ class WebGLRenderer extends Renderer {
     }
 
     /**
-     * Stroke a me.Polygon on the screen with a specified color
+     * Stroke a Polygon on the screen with a specified color
      * @param {Polygon} poly - the shape to draw
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
@@ -924,24 +945,38 @@ class WebGLRenderer extends Renderer {
         const points = poly.points;
         const len = points.length;
 
-        this.setCompositor("primitive");
-
         this.translate(poly.pos.x, poly.pos.y);
 
-        this.path2D.beginPath();
-        for (let i = 0; i < len - 1; i++) {
-            const curPoint = points[i];
-            const nextPoint = points[i + 1];
-            this.path2D.moveTo(curPoint.x, curPoint.y);
-            this.path2D.lineTo(nextPoint.x, nextPoint.y);
-        }
-        this.path2D.closePath();
-
-        if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+        if (fill === false && this.lineWidth > 1) {
+            const radius = this.lineWidth / 2;
+            for (let i = 0; i < len - 1; i++) {
+                const curPoint = points[i];
+                const nextPoint = points[i + 1];
+                this.fillEllipse(nextPoint.x, nextPoint.y, radius, radius);
+                this.strokeLine(curPoint.x, curPoint.y, nextPoint.x, nextPoint.y);
+            }
+            const lastPoint = points[len - 1];
+            const firstPoint = points[0];
+            if (!lastPoint.equals(firstPoint)) {
+                this.fillEllipse(firstPoint.x, firstPoint.y, radius, radius);
+                this.strokeLine(lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y);
+            }
         } else {
-            // draw all triangles
-            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+            this.setCompositor("primitive");
+            this.path2D.beginPath();
+            for (let i = 0; i < len - 1; i++) {
+                const curPoint = points[i];
+                const nextPoint = points[i + 1];
+                this.path2D.moveTo(curPoint.x, curPoint.y);
+                this.path2D.lineTo(nextPoint.x, nextPoint.y);
+            }
+            this.path2D.closePath();
+            if (fill === false) {
+                this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+            } else {
+                // draw all triangles
+                this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+            }
         }
 
         this.translate(-poly.pos.x, -poly.pos.y);
@@ -964,13 +999,25 @@ class WebGLRenderer extends Renderer {
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
-        this.setCompositor("primitive");
-        this.path2D.beginPath();
-        this.path2D.rect(x, y, width, height);
-        if (fill === false) {
-            this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+        if (fill === false && this.lineWidth > 1) {
+            const radius = this.lineWidth / 2;
+            this.strokeLine(x, y, x + width, y);
+            this.strokeLine(x + width, y, x + width, y + height);
+            this.strokeLine(x + width, y + height, x, y + height);
+            this.strokeLine(x, y + height, x, y);
+            this.fillEllipse(x, y, radius, radius);
+            this.fillEllipse(x + width, y, radius, radius);
+            this.fillEllipse(x + width, y + height, radius, radius);
+            this.fillEllipse(x, y + height, radius, radius);
         } else {
-            this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+            this.setCompositor("primitive");
+            this.path2D.beginPath();
+            this.path2D.rect(x, y, width, height);
+            if (fill === false) {
+                this.currentCompositor.drawVertices(this.gl.LINES, this.path2D.points);
+            } else {
+                this.currentCompositor.drawVertices(this.gl.TRIANGLES, this.path2D.triangulatePath());
+            }
         }
     }