melonjs 14.4.0 → 15.0.0

package/dist/melonjs.mjs/video/canvas/canvas_renderer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -12,7 +12,7 @@ import Ellipse from '../../geometries/ellipse.js';
 import RoundRect from '../../geometries/roundrect.js';
 import Rect from '../../geometries/rectangle.js';
 import Bounds from '../../physics/bounds.js';
-import { emit, ONCONTEXT_LOST, ONCONTEXT_RESTORED } from '../../system/event.js';
+import { emit, on, ONCONTEXT_LOST, ONCONTEXT_RESTORED, GAME_RESET } from '../../system/event.js';
 
 /**
  * @classdesc
@@ -66,6 +66,11 @@ import { emit, ONCONTEXT_LOST, ONCONTEXT_RESTORED } from '../../system/event.js'
             this.isContextValid = true;
             emit(ONCONTEXT_RESTORED, this);
         }, false );
+
+        // reset the renderer on game reset
+        on(GAME_RESET, () => {
+            this.reset();
+        });
     }
 
     /**
@@ -541,15 +546,6 @@ import { emit, ONCONTEXT_LOST, ONCONTEXT_RESTORED } from '../../system/event.js'
         this.strokePoint(x, y);
     }
 
-    /**
-     * return a reference to the font 2d Context
-     * @ignore
-     */
-    getFontContext() {
-        // in canvas mode we can directly use the 2d context
-        return this.getContext();
-    }
-
     /**
      * save the canvas context
      * @name save

package/dist/melonjs.mjs/video/renderer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -8,7 +8,7 @@
 import Color from '../math/color.js';
 import Matrix3d from '../math/matrix3.js';
 import { createCanvas } from './video.js';
-import { on, emit, GAME_RESET, CANVAS_ONRESIZE } from '../system/event.js';
+import { emit, CANVAS_ONRESIZE } from '../system/event.js';
 import { platform } from '../system/device.js';
 import { setPrefixed } from '../utils/agent.js';
 import Rect from '../geometries/rectangle.js';
@@ -122,11 +122,6 @@ import Point from '../geometries/point.js';
 
         // default uvOffset
         this.uvOffset = 0;
-
-        // reset the renderer on game reset
-        on(GAME_RESET, () => {
-            this.reset();
-        });
     }
 
     /**
@@ -419,12 +414,6 @@ import Point from '../geometries/point.js';
         // reset to default
         this.currentTint.setColor(255, 255, 255, 1.0);
     }
-
-    /**
-     * @ignore
-     */
-    drawFont(/*bounds*/) {}
-
 }
 
 export { Renderer as default };

package/dist/melonjs.mjs/video/texture/atlas.js

@@ -1,17 +1,15 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import Vector2d from '../../math/vector2.js';
-import WebGLRenderer from '../webgl/webgl_renderer.js';
-import TextureCache from './cache.js';
 import Sprite from '../../renderable/sprite.js';
 import { renderer } from '../video.js';
 import pool from '../../system/pooling.js';
-import loader from '../../loader/loader.js';
+import { getImage } from '../../loader/loader.js';
 import { ETA } from '../../math/math.js';
 
 /**
@@ -105,7 +103,7 @@ class TextureAtlas {
                         // set the texture
                         if (typeof(src) === "undefined") {
                             // get the texture name from the atlas meta data
-                            var image = loader.getImage(atlas.meta.image);
+                            var image = getImage(atlas.meta.image);
                             if (!image) {
                                 throw new Error(
                                     "Atlas texture '" + image + "' not found"
@@ -113,7 +111,7 @@ class TextureAtlas {
                             }
                             this.sources.set(atlas.meta.image, image);
                         } else {
-                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? loader.getImage(src) : src);
+                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? getImage(src) : src);
                         }
                         this.repeat = "no-repeat";
                     }
@@ -127,13 +125,13 @@ class TextureAtlas {
                         }
                         this.format = "ShoeBox";
                         this.repeat = "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // Internal texture atlas
                     else if (atlas.meta.app.includes("melonJS")) {
                         this.format = "melonJS";
                         this.repeat = atlas.meta.repeat || "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // initialize the atlas
                     this.atlases.set(atlas.meta.image || "default", this.parse(atlas));
@@ -147,7 +145,7 @@ class TextureAtlas {
 
                         if (typeof(src) !== "undefined") {
                             // overwrite if specified
-                            atlas.image = typeof src === "string" ? loader.getImage(src) : src;
+                            atlas.image = typeof src === "string" ? getImage(src) : src;
                         }
                         // initialize the atlas
                         this.atlases.set("default", this.parseFromSpriteSheet(atlas));
@@ -166,11 +164,7 @@ class TextureAtlas {
         // Add self to TextureCache if cache !== false
         if (cache !== false) {
             this.sources.forEach((source) => {
-                if (cache instanceof TextureCache) {
-                    cache.set(source, this);
-                } else {
-                    renderer.cache.set(source, this);
-                }
+                renderer.cache.set(source, this);
             });
         }
     }
@@ -353,12 +347,13 @@ class TextureAtlas {
             region = this.getAtlas(atlas)[name];
         } else {
             // look for the given region in each existing atlas
-            this.atlases.forEach((atlas) => {
+            for (let atlas of this.atlases.values()) {
                 if (typeof atlas[name] !== "undefined") {
                     // there should be only one
                     region = atlas[name];
+                    break;
                 }
-            });
+            }
         }
         return region;
     }
@@ -394,7 +389,7 @@ class TextureAtlas {
      */
     addUVs(atlas, name, w, h) {
         // ignore if using the Canvas Renderer
-        if (renderer instanceof WebGLRenderer) {
+        if (typeof renderer.gl !== "undefined") {
             // Source coordinates
             var s = atlas[name].offset;
             var sw = atlas[name].width;

package/dist/melonjs.mjs/video/texture/cache.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -64,8 +64,8 @@ class TextureCache {
         } else {
             // manage cases where a specific atlas is specified
             this.cache.forEach((value, key) => {
-                var _atlas = value.getAtlas();
-                if (key === image && _atlas[0].width === atlas.framewidth && _atlas[0].height === atlas.frameheight) {
+                var _atlas = value.getAtlas()[0];
+                if (key === image && _atlas.width === atlas.framewidth && _atlas.height === atlas.frameheight) {
                     entry = value;
                 }
             });

package/dist/melonjs.mjs/video/texture/canvas_texture.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license

package/dist/melonjs.mjs/video/utils/autodetect.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license

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

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -94,7 +94,7 @@ function init(width, height, options) {
          // initialize the default game Application with the given options
         game.init(width, height, options);
     } catch (e) {
-        console(e.message);
+        console.log(e.message);
         // me.video.init() historically returns false if failing at creating/using a HTML5 canvas
         return false;
     }

package/dist/melonjs.mjs/video/webgl/buffer/vertex.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.4.0
+ * melonJS Game Engine - v15.0.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -14,18 +14,18 @@
 
  class VertexArrayBuffer {
 
-    constructor(vertex_size, vertex_per_quad) {
+    constructor(vertex_size, vertex_per_obj) {
         // the size of one vertex in float
         this.vertexSize = vertex_size;
-        // size of a quad in vertex
-        this.quadSize = vertex_per_quad;
+        // size of an object in vertex
+        this.objSize = vertex_per_obj;
         // the maximum number of vertices the vertex array buffer can hold
-        this.maxVertex = 256;
+        this.maxVertex = 256; // (note: this seems to be the sweet spot performance-wise when using batching)
         // the current number of vertices added to the vertex array buffer
         this.vertexCount = 0;
 
         // the actual vertex data buffer
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         // Float32 and Uint32 view of the vertex data array buffer
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
@@ -44,7 +44,7 @@
      * return true if full
      * @ignore
      */
-    isFull(vertex = this.quadSize) {
+    isFull(vertex = this.objSize) {
          return (this.vertexCount + vertex >= this.maxVertex);
     }
 
@@ -52,14 +52,18 @@
      * resize the vertex buffer, retaining its original contents
      * @ignore
      */
-    resize() {
-        // double the vertex size
-        this.maxVertex <<= 1;
+    resize(vertexCount) {
+
+        while (vertexCount > this.maxVertex) {
+            // double the vertex size
+            this.maxVertex <<= 1;
+        }
+
         // save a reference to the previous data
         var data = this.bufferF32;
 
         // recreate ArrayBuffer and views
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
 
@@ -77,19 +81,19 @@
         var offset = this.vertexCount * this.vertexSize;
 
         if (this.vertexCount >= this.maxVertex) {
-            this.resize();
+            this.resize(this.vertexCount);
         }
 
-        this.bufferF32[offset + 0] = x;
-        this.bufferF32[offset + 1] = y;
+        this.bufferF32[offset] = x;
+        this.bufferF32[++offset] = y;
 
         if (typeof u !== "undefined") {
-            this.bufferF32[offset + 2] = u;
-            this.bufferF32[offset + 3] = v;
+            this.bufferF32[++offset] = u;
+            this.bufferF32[++offset] = v;
         }
 
         if (typeof tint !== "undefined") {
-            this.bufferU32[offset + 4] = tint;
+            this.bufferU32[++offset] = tint;
         }
 
         this.vertexCount++;

package/dist/melonjs.mjs/video/webgl/compositors/compositor.js

@@ -0,0 +1,235 @@
+/*!
+ * melonJS Game Engine - v15.0.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
+ */
+import VertexArrayBuffer from '../buffer/vertex.js';
+import GLShader from '../glshader.js';
+
+/**
+ * @classdesc
+ * A base Compositor object.
+ */
+ class Compositor {
+    /**
+     * @param {WebGLRenderer} renderer - the current WebGL renderer session
+     * @param {Object} settings - additional settings to initialize this compositors
+     * @param {object[]} attribute - an array of attributes definition
+     * @param {string} attribute.name - name of the attribute in the vertex shader
+     * @param {number} attribute.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
+     * @param {GLenum} attribute.type - data type of each component in the array
+     * @param {boolean} attribute.normalized - whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} attribute.offset - offset in bytes of the first component in the vertex attribute array
+     * @param {object} shader - an array of attributes definition
+     * @param {string} shader.vertex - a string containing the GLSL source code to set
+     * @param {string} shader.fragment - a string containing the GLSL source code to set
+     */
+    constructor (renderer, settings) {
+        this.init(renderer, settings);
+    }
+
+    /**
+     * Initialize the compositor
+     * @ignore
+     */
+    init (renderer, settings) {
+        // the associated renderer
+        this.renderer = renderer;
+
+        // WebGL context
+        this.gl = renderer.gl;
+
+        // Global fill color
+        this.color = renderer.currentColor;
+
+        // Global transformation matrix
+        this.viewMatrix = renderer.currentTransform;
+
+        /**
+         * the default shader created by this compositor
+         * @type {GLShader}
+         */
+        this.defaultShader = undefined;
+
+        /**
+         * the shader currently used by this compositor
+         * @type {GLShader}
+         */
+        this.currentShader = undefined;
+
+        /**
+         * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
+         * @type {number}
+         * @default gl.TRIANGLES
+         */
+        this.mode = this.gl.TRIANGLES;
+
+        /**
+         * an array of vertex attribute properties
+         * @see WebGLCompositor.addAttribute
+         * @type {Array}
+         */
+        this.attributes = [];
+
+        /**
+         * the size of a single vertex in bytes
+         * (will automatically be calculated as attributes definitions are added)
+         * @see WebGLCompositor.addAttribute
+         * @type {number}
+         */
+        this.vertexByteSize = 0;
+
+        /**
+         * the size of a single vertex in floats
+         * (will automatically be calculated as attributes definitions are added)
+         * @see WebGLCompositor.addAttribute
+         * @type {number}
+         */
+        this.vertexSize = 0;
+
+        /**
+         * the vertex data buffer used by this compositor
+         * @type {VertexArrayBuffer}
+         */
+        this.vertexData = null;
+
+        // parse given attibrutes
+        if (typeof settings !== "undefined" && Array.isArray(settings.attributes)) {
+            settings.attributes.forEach((attr) => {
+                this.addAttribute(attr.name, attr.size, attr.type, attr.normalized, attr.offset);
+                this.vertexData = new VertexArrayBuffer(this.vertexSize, 6);
+            });
+        } else {
+            throw new Error("attributes definition missing");
+        }
+
+        // parse and instantiate the default shader
+        if (typeof settings !== "undefined" && typeof settings.shader !== "undefined") {
+            this.defaultShader = new GLShader(this.gl, settings.shader.vertex, settings.shader.fragment);
+        } else {
+            throw new Error("shader definition missing");
+        }
+    }
+
+    /**
+     * Reset compositor internal state
+     * @ignore
+     */
+    reset() {
+        // WebGL context
+        this.gl = this.renderer.gl;
+
+        // clear the vertex data buffer
+        this.vertexData.clear();
+    }
+
+    /**
+     * @ignore
+     * called by the WebGL renderer when a compositor become the current one
+     */
+    bind() {
+        if (this.renderer.currentProgram !== this.defaultShader.program) {
+            this.useShader(this.defaultShader);
+        }
+    }
+
+    /**
+     * Select the shader to use for compositing
+     * @see GLShader
+     * @param {GLShader} shader - a reference to a GLShader instance
+     */
+    useShader(shader) {
+        if (this.renderer.currentProgram !== shader.program) {
+            this.flush();
+            shader.bind();
+            shader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
+            shader.setVertexAttributes(this.gl, this.attributes, this.vertexByteSize);
+
+            this.currentShader = shader;
+            this.renderer.currentProgram = this.currentShader.program;
+        }
+    }
+
+    /**
+     * add vertex attribute property definition to the compositor
+     * @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
+     * @param {boolean} normalized - whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} offset - offset in bytes of the first component in the vertex attribute array
+     */
+    addAttribute(name, size, type, normalized, offset) {
+        this.attributes.push({
+            name: name,
+            size: size,
+            type: type,
+            normalized: normalized,
+            offset: offset
+        });
+
+        switch (type) {
+            case this.gl.BYTE:
+                this.vertexByteSize += size * Int8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_BYTE:
+                this.vertexByteSize += size * Uint8Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.SHORT:
+                this.vertexByteSize += size * Int16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_SHORT:
+                this.vertexByteSize += size * Uint16Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.INT:
+                this.vertexByteSize += size * Int32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.UNSIGNED_INT:
+                this.vertexByteSize += size * Uint32Array.BYTES_PER_ELEMENT;
+                break;
+            case this.gl.FLOAT:
+                this.vertexByteSize += size * Float32Array.BYTES_PER_ELEMENT;
+                break;
+            default:
+                throw new Error("Invalid GL Attribute type");
+        }
+        this.vertexSize = this.vertexByteSize / Float32Array.BYTES_PER_ELEMENT;
+    }
+
+    /**
+     * set/change the current projection matrix
+     * @param {Matrix3d} matrix
+     */
+    setProjection(matrix) {
+        this.currentShader.setUniform("uProjectionMatrix", matrix);
+    }
+
+    /**
+     * Flush batched vertex data to the GPU
+     * @param {number} [mode=gl.TRIANGLES] - the GL drawing mode
+     */
+    flush(mode = this.mode) {
+        var vertex = this.vertexData;
+        var vertexCount = vertex.vertexCount;
+
+        if (vertexCount > 0) {
+            var gl = this.gl;
+            var vertexSize = vertex.vertexSize;
+
+            // Copy data into stream buffer
+            if (this.renderer.WebGLVersion > 1) {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(), gl.STREAM_DRAW, 0, vertexCount * vertexSize);
+            } else {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(0, vertexCount * vertexSize), gl.STREAM_DRAW);
+            }
+
+            gl.drawArrays(mode, 0, vertexCount);
+
+            // clear the vertex buffer
+            vertex.clear();
+        }
+    }
+}
+
+export { Compositor as default };

package/dist/melonjs.mjs/video/webgl/compositors/primitive_compositor.js

@@ -0,0 +1,77 @@
+/*!
+ * melonJS Game Engine - v15.0.0
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
+ */
+import primitiveVertex from '../shaders/primitive.vert.js';
+import primitiveFragment from '../shaders/primitive.frag.js';
+import Compositor from './compositor.js';
+
+/**
+ * @classdesc
+ * A WebGL Compositor object. This class handles all of the WebGL state<br>
+ * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU
+ * @augments Compositor
+ */
+ class PrimitiveCompositor extends Compositor {
+
+    /**
+     * Initialize the compositor
+     * @ignore
+     */
+    init(renderer) {
+        super.init(renderer, {
+            attributes: [
+                {name: "aVertex", size: 2, type: renderer.gl.FLOAT, normalized: false, offset: 0 * Float32Array.BYTES_PER_ELEMENT},
+                {name: "aColor",  size: 4, type: renderer.gl.UNSIGNED_BYTE, normalized: true, offset: 2 * Float32Array.BYTES_PER_ELEMENT}
+            ],
+            shader: {
+                vertex: primitiveVertex, fragment: primitiveFragment
+            }
+        });
+    }
+
+    /**
+     * Draw an array of vertices
+     * @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 {Point[]} verts - an array of vertices
+     * @param {number} [vertexCount=verts.length] - amount of points defined in the points array
+     */
+    drawVertices(mode, verts, vertexCount = verts.length) {
+        var viewMatrix = this.viewMatrix;
+        var vertexData = this.vertexData;
+        var color = this.renderer.currentColor;
+        var alpha = this.renderer.getGlobalAlpha();
+
+        if (vertexData.isFull(vertexCount)) {
+            // is the vertex buffer full if we add more vertices
+            this.flush();
+        }
+
+        // flush if drawing vertices with a different drawing mode
+        if (mode !== this.mode) {
+            this.flush(this.mode);
+            this.mode = mode;
+        }
+
+        if (!viewMatrix.isIdentity()) {
+            verts.forEach((vert) => {
+                viewMatrix.apply(vert);
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+            });
+        } else {
+            verts.forEach((vert) => {
+                vertexData.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha));
+            });
+        }
+
+        // force flush for primitive using LINE_STRIP or LINE_LOOP
+        if (this.mode === this.gl.LINE_STRIP || this.mode === this.gl.LINE_LOOP) {
+            this.flush(this.mode);
+        }
+    }
+}
+
+export { PrimitiveCompositor as default };