melonjs 13.1.1 → 13.2.0

package/src/video/renderer.js

@@ -11,6 +11,7 @@ import Polygon from "./../geometries/poly.js";
 import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
 import Path2D from "./../geometries/path2d.js";
+import Point from "../geometries/point.js";
 
 /**
  * @classdesc
@@ -24,7 +25,8 @@ class Renderer {
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas
+     * @param {boolean} [options.premultipliedAlpha=true] in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
      * @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
@@ -35,26 +37,20 @@ class Renderer {
         /**
          * The given constructor options
          * @public
-         * @name settings
-         * @memberof Renderer#
          * @type {object}
          */
         this.settings = options;
 
         /**
          * true if the current rendering context is valid
-         * @name isContextValid
-         * @memberof Renderer#
          * @default true
-         * type {boolean}
+         * @type {boolean}
          */
         this.isContextValid = true;
 
         /**
          * The Path2D instance used by the renderer to draw primitives
-         * @name path2D
          * @type {Path2D}
-         * @memberof Renderer#
          */
         this.path2D = new Path2D();
 
@@ -106,22 +102,16 @@ class Renderer {
 
     /**
      * prepare the framebuffer for drawing a new frame
-     * @name clear
-     * @memberof Renderer
      */
     clear() {}
 
     /**
      * render the main framebuffer on screen
-     * @name flush
-     * @memberof Renderer
      */
     flush() {}
 
     /**
      * Reset context state
-     * @name reset
-     * @memberof Renderer
      */
     reset() {
         this.resetTransform();
@@ -138,8 +128,6 @@ class Renderer {
 
     /**
      * return a reference to the canvas which this renderer draws to
-     * @name getCanvas
-     * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
@@ -149,8 +137,6 @@ class Renderer {
 
     /**
      * return a reference to this renderer canvas corresponding Context
-     * @name getContext
-     * @memberof Renderer
      * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
     getContext() {
@@ -159,8 +145,6 @@ class Renderer {
 
     /**
      * returns the current blend mode for this renderer
-     * @name getBlendMode
-     * @memberof Renderer
      * @returns {string} blend mode
      */
     getBlendMode() {
@@ -170,8 +154,6 @@ class Renderer {
     /**
      * Returns the 2D Context object of the given Canvas<br>
      * Also configures anti-aliasing and blend modes based on constructor options.
-     * @name getContext2d
-     * @memberof Renderer
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
      * @returns {CanvasRenderingContext2D}
@@ -207,8 +189,6 @@ class Renderer {
 
     /**
      * return the width of the system Canvas
-     * @name getWidth
-     * @memberof Renderer
      * @returns {number}
      */
     getWidth() {
@@ -217,8 +197,6 @@ class Renderer {
 
     /**
      * return the height of the system Canvas
-     * @name getHeight
-     * @memberof Renderer
      * @returns {number} height of the system Canvas
      */
     getHeight() {
@@ -227,8 +205,6 @@ class Renderer {
 
     /**
      * get the current fill & stroke style color.
-     * @name getColor
-     * @memberof Renderer
      * @returns {Color} current global color
      */
     getColor() {
@@ -237,8 +213,6 @@ class Renderer {
 
     /**
      * return the current global alpha
-     * @name globalAlpha
-     * @memberof Renderer
      * @returns {number}
      */
     globalAlpha() {
@@ -247,8 +221,6 @@ class Renderer {
 
     /**
      * check if the given rect or bounds overlaps with the renderer screen coordinates
-     * @name overlaps
-     * @memberof Renderer
      * @param {Rect|Bounds} bounds
      * @returns {boolean} true if overlaps
      */
@@ -262,8 +234,6 @@ class Renderer {
 
     /**
      * resizes the system canvas
-     * @name resize
-     * @memberof Renderer
      * @param {number} width new width of the canvas
      * @param {number} height new height of the canvas
      */
@@ -283,8 +253,6 @@ class Renderer {
 
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
-     * @name setAntiAlias
-     * @memberof Renderer
      * @param {CanvasRenderingContext2D} context
      * @param {boolean} [enable=false]
      */
@@ -312,8 +280,6 @@ class Renderer {
 
     /**
      * set/change the current projection matrix (WebGL only)
-     * @name setProjection
-     * @memberof Renderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -322,8 +288,6 @@ class Renderer {
 
     /**
      * stroke the given shape
-     * @name stroke
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to stroke
      * @param {boolean} [fill=false] fill the shape with the current color if true
      */
@@ -350,6 +314,10 @@ class Renderer {
             );
             return;
         }
+        if (shape instanceof Point) {
+            this.strokePoint(shape.x, shape.y);
+            return;
+        }
         throw new Error("Invalid geometry for fill/stroke");
     }
 
@@ -365,8 +333,6 @@ class Renderer {
 
     /**
      * tint the given image or canvas using the given color
-     * @name tint
-     * @memberof Renderer
      * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
      * @param {Color|string} color the color that will be used to tint the image
      * @param {string} [mode="multiply"] the composition mode used to tint the image
@@ -395,8 +361,6 @@ class Renderer {
      * A mask limits rendering elements to the shape and position of the given mask object.
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
-     * @name setMask
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
      * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
      */
@@ -405,16 +369,12 @@ class Renderer {
 
     /**
      * disable (remove) the rendering mask set through setMask.
-     * @name clearMask
      * @see Renderer#setMask
-     * @memberof Renderer
      */
     clearMask() {}
 
     /**
      * set a coloring tint for sprite based renderables
-     * @name setTint
-     * @memberof Renderer
      * @param {Color} tint the tint color
      * @param {number} [alpha] an alpha value to be applied to the tint
      */
@@ -426,9 +386,7 @@ class Renderer {
 
     /**
      * clear the rendering tint set through setTint.
-     * @name clearTint
      * @see Renderer#setTint
-     * @memberof Renderer
      */
     clearTint() {
         // reset to default

package/src/video/video.js

@@ -24,6 +24,7 @@ var settings = {
     scale : 1.0,
     scaleMethod : "manual",
     transparent : false,
+    premultipliedAlpha: true,
     blendMode : "normal",
     antiAlias : false,
     failIfMajorPerformanceCaveat : true,

package/src/video/webgl/glshader.js

@@ -42,56 +42,38 @@ class GLShader {
 
         /**
          * the active gl rendering context
-         * @public
          * @type {WebGLRenderingContext}
-         * @name gl
-         * @memberof GLShader
          */
         this.gl = gl;
 
         /**
          * the vertex shader source code
-         * @public
          * @type {string}
-         * @name vertex
-         * @memberof GLShader
          */
         this.vertex = setPrecision(minify(vertex), precision || device.getMaxShaderPrecision(this.gl));
 
         /**
          * the fragment shader source code
-         * @public
          * @type {string}
-         * @name vertex
-         * @memberof GLShader
          */
         this.fragment = setPrecision(minify(fragment), precision || device.getMaxShaderPrecision(this.gl));
 
         /**
          * the location attributes of the shader
-         * @public
          * @type {GLint[]}
-         * @name attributes
-         * @memberof GLShader
          */
         this.attributes = extractAttributes(this.gl, this);
 
 
         /**
          * a reference to the shader program (once compiled)
-         * @public
          * @type {WebGLProgram}
-         * @name program
-         * @memberof GLShader
          */
         this.program = compileProgram(this.gl, this.vertex, this.fragment, this.attributes);
 
         /**
          * the uniforms of the shader
-         * @public
          * @type {object}
-         * @name uniforms
-         * @memberof GLShader
          */
         this.uniforms = extractUniforms(this.gl, this);
 
@@ -101,8 +83,6 @@ class GLShader {
 
     /**
      * Installs this shader program as part of current rendering state
-     * @name bind
-     * @memberof GLShader
      */
     bind() {
         this.gl.useProgram(this.program);
@@ -110,8 +90,6 @@ class GLShader {
 
     /**
      * returns the location of an attribute variable in this shader program
-     * @name getAttribLocation
-     * @memberof GLShader
      * @param {string} name the name of the attribute variable whose location to get.
      * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
      */
@@ -126,8 +104,6 @@ class GLShader {
 
     /**
      * Set the uniform to the given value
-     * @name setUniform
-     * @memberof GLShader
      * @param {string} name the uniform name
      * @param {object|Float32Array} value the value to assign to that uniform
      * @example
@@ -148,8 +124,6 @@ class GLShader {
 
     /**
      * activate the given vertex attribute for this shader
-     * @name setVertexAttributes
-     * @memberof GLShader
      * @param {WebGLRenderingContext} gl the current WebGL rendering context
      * @param {object[]} attributes an array of vertex attributes
      * @param {number} vertexByteSize the size of a single vertex in bytes
@@ -171,8 +145,6 @@ class GLShader {
 
     /**
      * destroy this shader objects resources (program, attributes, uniforms)
-     * @name destroy
-     * @memberof GLShader
      */
     destroy() {
         this.uniforms = null;

package/src/video/webgl/webgl_compositor.js

@@ -56,44 +56,37 @@ class WebGLCompositor {
 
         /**
          * a reference to the active WebGL shader
-         * @name activeShader
-         * @memberof WebGLCompositor
          * @type {GLShader}
          */
         this.activeShader = null;
 
         /**
          * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
-         * @name mode
-         * @see WebGLCompositor
-         * @memberof WebGLCompositor
+         * @type {number}
          * @default gl.TRIANGLES
          */
         this.mode = gl.TRIANGLES;
 
         /**
          * an array of vertex attribute properties
-         * @name attributes
          * @see WebGLCompositor.addAttribute
-         * @memberof WebGLCompositor
+         * @type {Array}
          */
         this.attributes = [];
 
         /**
          * the size of a single vertex in bytes
          * (will automatically be calculated as attributes definitions are added)
-         * @name vertexByteSize
          * @see WebGLCompositor.addAttribute
-         * @memberof WebGLCompositor
+         * @type {number}
          */
         this.vertexByteSize = 0;
 
         /**
          * the size of a single vertex in floats
          * (will automatically be calculated as attributes definitions are added)
-         * @name vertexSize
          * @see WebGLCompositor.addAttribute
-         * @memberof WebGLCompositor
+         * @type {number}
          */
         this.vertexSize = 0;
 
@@ -154,8 +147,6 @@ class WebGLCompositor {
 
     /**
      * add vertex attribute property definition to the compositor
-     * @name addAttribute
-     * @memberof WebGLCompositor
      * @param {string} name name of the attribute in the vertex shader
      * @param {number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
      * @param {GLenum} type data type of each component in the array
@@ -201,8 +192,6 @@ class WebGLCompositor {
 
     /**
      * Sets the viewport
-     * @name setViewport
-     * @memberof WebGLCompositor
      * @param {number} x x position of viewport
      * @param {number} y y position of viewport
      * @param {number} w width of viewport
@@ -214,8 +203,6 @@ class WebGLCompositor {
 
     /**
      * Create a WebGL texture from an image
-     * @name createTexture2D
-     * @memberof WebGLCompositor
      * @param {number} unit Destination texture unit
      * @param {Image|HTMLCanvasElement|ImageData|Uint8Array[]|Float32Array[]} image Source image
      * @param {number} filter gl.LINEAR or gl.NEAREST
@@ -258,8 +245,6 @@ class WebGLCompositor {
 
     /**
      * delete the given WebGL texture
-     * @name bindTexture2D
-     * @memberof WebGLCompositor
      * @param {WebGLTexture} [texture] a WebGL texture to delete
      * @param {number} [unit] Texture unit to delete
      */
@@ -270,8 +255,6 @@ class WebGLCompositor {
 
     /**
      * returns the WebGL texture associated to the given texture unit
-     * @name bindTexture2D
-     * @memberof WebGLCompositor
      * @param {number} unit Texture unit to which a texture is bound
      * @returns {WebGLTexture} texture a WebGL texture
      */
@@ -281,8 +264,6 @@ class WebGLCompositor {
 
     /**
      * assign the given WebGL texture to the current batch
-     * @name bindTexture2D
-     * @memberof WebGLCompositor
      * @param {WebGLTexture} texture a WebGL texture
      * @param {number} unit Texture unit to which the given texture is bound
      */
@@ -308,8 +289,6 @@ class WebGLCompositor {
 
     /**
      * unbind the given WebGL texture, forcing it to be reuploaded
-     * @name unbindTexture2D
-     * @memberof WebGLCompositor
      * @param {WebGLTexture} [texture] a WebGL texture
      * @param {number} [unit] a WebGL texture
      * @returns {number} unit the unit number that was associated with the given texture
@@ -354,8 +333,6 @@ class WebGLCompositor {
 
     /**
      * set/change the current projection matrix
-     * @name setProjection
-     * @memberof WebGLCompositor
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -364,9 +341,7 @@ class WebGLCompositor {
 
     /**
      * Select the shader to use for compositing
-     * @name useShader
      * @see GLShader
-     * @memberof WebGLCompositor
      * @param {GLShader} shader a reference to a GLShader instance
      */
     useShader(shader) {
@@ -381,8 +356,6 @@ class WebGLCompositor {
 
     /**
      * Add a textured quad
-     * @name addQuad
-     * @memberof WebGLCompositor
      * @param {TextureAtlas} texture Source texture atlas
      * @param {number} x Destination x-coordinate
      * @param {number} y Destination y-coordinate
@@ -438,7 +411,6 @@ class WebGLCompositor {
     /**
      * Flush batched texture operations to the GPU
      * @param {number} [mode=gl.TRIANGLES] the GL drawing mode
-     * @memberof WebGLCompositor
      */
     flush(mode = this.mode) {
         var vertex = this.vertexBuffer;
@@ -464,8 +436,6 @@ class WebGLCompositor {
 
     /**
      * Draw an array of vertices
-     * @name drawVertices
-     * @memberof WebGLCompositor
      * @param {GLenum} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
      * @param {Vector2d[]} verts vertices
      * @param {number} [vertexCount=verts.length] amount of points defined in the points array
@@ -492,25 +462,26 @@ class WebGLCompositor {
     }
 
     /**
-     * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
-     * @name clearColor
-     * @memberof WebGLCompositor
-     * @param {number} [r=0] - the red color value used when the color buffers are cleared
-     * @param {number} [g=0] - the green color value used when the color buffers are cleared
-     * @param {number} [b=0] - the blue color value used when the color buffers are cleared
-     * @param {number} [a=0] - the alpha color value used when the color buffers are cleared
+     * Clear the frame buffer
+     * @param {number} [alpha = 0.0] - the alpha value used when clearing the framebuffer
      */
-    clearColor(r, g, b, a) {
-        this.gl.clearColor(r, g, b, a);
+    clear(alpha = 0) {
+        var gl = this.gl;
+        gl.clearColor(0, 0, 0, alpha);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
     }
 
     /**
-     * Clear the frame buffer
-     * @name clear
-     * @memberof WebGLCompositor
+     * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
+     * @param {number} [r = 0] - the red color value used when the color buffers are cleared
+     * @param {number} [g = 0] - the green color value used when the color buffers are cleared
+     * @param {number} [b = 0] - the blue color value used when the color buffers are cleared
+     * @param {number} [a = 0] - the alpha color value used when the color buffers are cleared
      */
-    clear() {
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    clearColor(r = 0, g = 0, b = 0, a = 0) {
+        var gl = this.gl;
+        gl.clearColor(r, g, b, a);
+        gl.clear(gl.COLOR_BUFFER_BIT);
     }
 };