melonjs 10.11.0 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.11.0",
+  "version": "12.0.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -55,33 +55,34 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^2.0.0",
-    "core-js": "^3.23.0",
+    "core-js": "^3.23.3",
     "earcut": "2.2.3",
     "eventemitter3": "^4.0.7",
     "howler": "2.2.3"
   },
   "devDependencies": {
-    "@melonjs/webdoc-theme": "^1.1.0",
+    "@melonjs/webdoc-theme": "^1.1.1",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/offscreencanvas": "^2019.7.0",
     "@webdoc/cli": "^1.6.6",
     "del-cli": "^4.0.1",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "jasmine-core": "^4.2.0",
-    "karma": "^6.3.20",
+    "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-html-detailed-reporter": "^2.1.0",
-    "karma-jasmine": "^5.0.1",
+    "karma-jasmine": "^5.1.0",
     "karma-nyan-reporter": "0.2.5",
-    "rollup": "^2.75.6",
+    "rollup": "^2.75.7",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
     "terser": "^5.14.1",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",
@@ -90,7 +91,7 @@
     "lint": "eslint src rollup.config.js",
     "test": "npm run test-node && karma start tests/karma.conf.cjs",
     "test-node": "node build/melonjs.module.js",
-    "doc": "mkdirp docs && webdoc --quiet --site-root docs -R README.md",
+    "doc": "mkdirp docs && webdoc --quiet --site-root melonJS/docs -R README.md",
     "serve": "python3 -m http.server",
     "prepublishOnly": "npm run dist && npm run test",
     "clean": "del-cli --force build/*.js dist/*.js dist/*.d.ts docs src/**/*.d.ts",

package/src/audio/audio.js

@@ -11,31 +11,31 @@ import loader from "./../loader/loader.js";
  * audio channel list
  * @ignore
  */
-var audioTracks = {};
+let audioTracks = {};
 
 /**
  * current active track
  * @ignore
  */
-var current_track_id = null;
+let current_track_id = null;
 
 /**
  * error retry counter
  * @ignore
  */
-var retry_counter = 0;
+let retry_counter = 0;
 
 /**
  * list of active audio formats
  * @ignore
  */
-var audioExts = [];
+let audioExts = [];
 
 /**
  * event listener callback on load error
  * @ignore
  */
-var soundLoadError = function (sound_name, onerror_cb) {
+let soundLoadError = function (sound_name, onerror_cb) {
     // check the retry counter
     if (retry_counter++ > 3) {
         // something went wrong

package/src/entity/entity.js

@@ -188,23 +188,21 @@ class Entity extends Renderable {
     }
 
     /**
-     * object draw<br>
-     * not to be called by the end user<br>
-     * called by the game manager on each game loop
+     * draw this entity (automatically called by melonJS)
      * @name draw
      * @memberof Entity
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
-     * @param {Rect} rect region to draw
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer, rect) {
+    draw(renderer, viewport) {
         var renderable = this.renderable;
         if (renderable instanceof Renderable) {
             // predraw (apply transforms)
             renderable.preDraw(renderer);
 
             // draw the object
-            renderable.draw(renderer, rect);
+            renderable.draw(renderer, viewport);
 
             // postdraw (clean-up);
             renderable.postDraw(renderer);

package/src/geometries/ellipse.js

@@ -154,7 +154,7 @@ class Ellipse {
      * @param {Matrix2d} matrix the transformation matrix
      * @returns {Polygon} Reference to this object for method chaining
      */
-    transform(/* m */) {
+    transform(matrix) { // eslint-disable-line no-unused-vars
         // TODO
         return this;
     }

package/src/geometries/path2d.js

@@ -164,10 +164,10 @@ class Path2D {
      * adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
      * @name arcTo
      * @memberof Path2D
-     * @param {number} x the x-axis coordinate of the first control point.
-     * @param {number} y the y-axis coordinate of the first control point.
-     * @param {number} x the x-axis coordinate of the second control point.
-     * @param {number} y the y-axis coordinate of the second control point.
+     * @param {number} x1 the x-axis coordinate of the first control point.
+     * @param {number} y1 the y-axis coordinate of the first control point.
+     * @param {number} x2 the x-axis coordinate of the second control point.
+     * @param {number} y2 the y-axis coordinate of the second control point.
      * @param {number} radius the arc's radius. Must be positive.
      */
     arcTo(x1, y1, x2, y2, radius) {

package/src/geometries/poly.js

@@ -10,10 +10,9 @@ import pool from "./../system/pooling.js";
  * (which means that all angles are less than 180 degrees), as described here below : <br>
  * <center><img src="images/convex_polygon.png"/></center><br>
  *
- * A polygon's `winding` is clockwise iff its vertices (points) are declared turning to the right. The image above shows COUNTERCLOCKWISE winding.
+ * A polygon's `winding` is clockwise if its vertices (points) are declared turning to the right. The image above shows COUNTERCLOCKWISE winding.
  */
 class Polygon {
-
     /**
      * @param {number} x origin point of the Polygon
      * @param {number} y origin point of the Polygon

package/src/geometries/rectangle.js

@@ -176,7 +176,7 @@ class Rect extends Polygon {
      * @name centerOn
      * @memberof Rect
      * @param {number} x the x coordinate around which to center this rectangle
-     * @param {number} x the y coordinate around which to center this rectangle
+     * @param {number} y the y coordinate around which to center this rectangle
      * @returns {Rect} this rectangle
      */
     centerOn(x, y) {

package/src/loader/loadingscreen.js

@@ -1,10 +1,10 @@
 import { world, viewport } from "./../game.js";
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import {nextPowerOfTwo} from "./../math/math.js";
-import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
+import Sprite from "./../renderable/sprite.js";
 import Stage from "./../state/stage.js";
+import melonjs_logo from "./melonjs_logo.png";
 
 
 // a basic progress bar object
@@ -61,70 +61,22 @@ class ProgressBar extends Renderable {
 
 };
 
-// the melonJS Logo
-class IconLogo extends Renderable {
-    /**
-     * @ignore
-     */
+/**
+ * the melonJS Logo
+ * @ignore
+ */
+class IconLogo extends Sprite {
     constructor(x, y) {
-        super(x, y, 100, 85);
-
-        this.iconTexture = pool.pull("CanvasTexture",
-            renderer.WebGLVersion > 1 ? this.width : nextPowerOfTwo(this.width),
-            renderer.WebGLVersion > 1 ? this.height : nextPowerOfTwo(this.height),
-            { offscreenCanvas: true }
-        );
-
-        var context = this.iconTexture.context;
-
-        context.beginPath();
-        context.moveTo(0.7, 48.9);
-        context.bezierCurveTo(10.8, 68.9, 38.4, 75.8, 62.2, 64.5);
-        context.bezierCurveTo(86.1, 53.1, 97.2, 27.7, 87.0, 7.7);
-        context.lineTo(87.0, 7.7);
-        context.bezierCurveTo(89.9, 15.4, 73.9, 30.2, 50.5, 41.4);
-        context.bezierCurveTo(27.1, 52.5, 5.2, 55.8, 0.7, 48.9);
-        context.lineTo(0.7, 48.9);
-        context.closePath();
-        context.fillStyle = "rgb(255, 255, 255)";
-        context.fill();
-
-        context.beginPath();
-        context.moveTo(84.0, 7.0);
-        context.bezierCurveTo(87.6, 14.7, 72.5, 30.2, 50.2, 41.6);
-        context.bezierCurveTo(27.9, 53.0, 6.9, 55.9, 3.2, 48.2);
-        context.bezierCurveTo(-0.5, 40.4, 14.6, 24.9, 36.9, 13.5);
-        context.bezierCurveTo(59.2, 2.2, 80.3, -0.8, 84.0, 7.0);
-        context.lineTo(84.0, 7.0);
-        context.closePath();
-        context.lineWidth = 5.3;
-        context.strokeStyle = "rgb(255, 255, 255)";
-        context.lineJoin = "miter";
-        context.miterLimit = 4.0;
-        context.stroke();
-
-        this.anchorPoint.set(0.5, 0.5);
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer) {
-        renderer.drawImage(this.iconTexture.canvas, renderer.getWidth() / 2, this.pos.y);
+        // TODO: create a sprite or texture from a Base64 encoded image
+        var image = new Image();
+        image.src = melonjs_logo;
+        super(x, y, {
+            image : image,
+            framewidth : 256,
+            frameheight : 256
+        });
     }
-
-    /**
-     * Destroy function
-     * @ignore
-     */
-    destroy() {
-        // call the parent destroy method
-        super.destroy(arguments);
-        pool.push(this.iconTexture);
-        this.iconTexture = undefined;
-    }
-};
-
+}
 
 /**
  * a default loading screen
@@ -152,47 +104,9 @@ class DefaultLoadingScreen extends Stage {
         // melonJS logo
         world.addChild(new IconLogo(
             renderer.getWidth() / 2,
-            (renderer.getHeight() / 2) - (barHeight * 2) - 35
+            (renderer.getHeight() / 2)
 
         ), 2);
-
-        var logo1 = pool.pull("Text",
-            renderer.getWidth() / 2,
-            (renderer.getHeight() / 2) + 16, {
-                font: "century gothic",
-                size: 32,
-                fillStyle: "white",
-                textAlign: "left",
-                textBaseline : "top",
-                text: "melon",
-                offScreenCanvas: renderer.WebGLVersion >= 1
-            }
-        );
-        logo1.anchorPoint.set(0, 0);
-
-        var logo2 = pool.pull("Text",
-            renderer.getWidth() / 2,
-            (renderer.getHeight() / 2) + 16, {
-                font: "century gothic",
-                size: 32,
-                fillStyle: "#55aa00",
-                textAlign: "left",
-                textBaseline : "top",
-                bold: true,
-                text: "JS",
-                offScreenCanvas: renderer.WebGLVersion >= 1
-            }
-        );
-        logo2.anchorPoint.set(0, 0);
-
-        // adjust position of both text
-        var text_width = logo1.getBounds().width + logo2.getBounds().width;
-        logo1.pos.x = renderer.getWidth() / 2 - text_width / 2;
-        logo2.pos.x = logo1.pos.x + logo1.getBounds().width;
-
-        // melonJS text
-        world.addChild(logo1, 2);
-        world.addChild(logo2, 2);
     }
 };
 

package/src/physics/body.js

@@ -13,6 +13,7 @@ import { world } from "./../game.js";
 /**
  * @classdesc
  * a Generic Physic Body Object with some physic properties and behavior functionality, to as a member of a Renderable.
+ * @see Renderable.body
  */
 class Body {
     /**
@@ -438,7 +439,7 @@ class Body {
 
     /**
      * the built-in function to solve the collision response
-     * @param {object} response the collision response object (see {@link collision.ResponseObject})
+     * @param {object} response the collision response object (see {@link ResponseObject})
      */
     respondToCollision(response) {
         // the overlap vector
@@ -573,7 +574,6 @@ class Body {
      * cap the body velocity (body.maxVel property) to the specified value<br>
      * @param {number} x max velocity on x axis
      * @param {number} y max velocity on y axis
-     * @protected
      */
     setMaxVelocity(x, y) {
         this.maxVel.x = x;
@@ -584,7 +584,6 @@ class Body {
      * set the body default friction
      * @param {number} x horizontal friction
      * @param {number} y vertical friction
-     * @protected
      */
     setFriction(x = 0, y = 0) {
         this.friction.x = x;
@@ -692,7 +691,7 @@ class Body {
         pool.push(this.friction);
         pool.push(this.maxVel);
         this.shapes.forEach((shape) => {
-            pool.push(shape);
+            pool.push(shape, false);
         });
 
         // set to undefined

package/src/physics/collision.js

@@ -1,4 +1,4 @@
-import { rayCast, globalResponse } from "./detector.js";
+import { rayCast } from "./detector.js";
 
 /**
  * Collision detection (and projection-based collision response) of 2D shapes.<br>
@@ -91,17 +91,6 @@ var collision = {
         ALL_OBJECT          : 0xFFFFFFFF // all objects
     },
 
-
-    /**
-     * a global instance of a response object used for collision detection <br>
-     * this object will be reused amongst collision detection call if not user-defined response is specified
-     * @name response
-     * @memberof collision
-     * @public
-     * @type {collision.ResponseObject}
-     */
-    response : globalResponse,
-
     /**
      * Checks for object colliding with the given line
      * @name rayCast

package/src/physics/detector.js

@@ -1,9 +1,10 @@
 import * as SAT from "./sat.js";
+import ResponseObject from "./response.js";
 import Vector2d from "./../math/vector2.js";
 import { world } from "./../game.js";
 
 // a dummy object when using Line for raycasting
-var dummyObj = {
+let dummyObj = {
     pos : new Vector2d(0, 0),
     ancestor : {
         _absPos : new Vector2d(0, 0),
@@ -13,6 +14,9 @@ var dummyObj = {
     }
 };
 
+// the global response object used for collisions
+let globalResponse = new ResponseObject();
+
 /**
  * a function used to determine if two objects should collide (based on both respective objects collision mask and type).<br>
  * you can redefine this function if you need any specific rules over what should collide with what.
@@ -33,64 +37,14 @@ function shouldCollide(a, b) {
     );
 };
 
-/**
- * @classdesc
- * An object representing the result of an intersection.
- * @property {Renderable} a The first object participating in the intersection
- * @property {Renderable} b The second object participating in the intersection
- * @property {number} overlap Magnitude of the overlap on the shortest colliding axis
- * @property {Vector2d} overlapV The overlap vector (i.e. `overlapN.scale(overlap, overlap)`). If this vector is subtracted from the position of a, a and b will no longer be colliding
- * @property {Vector2d} overlapN The shortest colliding axis (unit-vector)
- * @property {boolean} aInB Whether the first object is entirely inside the second
- * @property {boolean} bInA Whether the second object is entirely inside the first
- * @property {number} indexShapeA The index of the colliding shape for the object a body
- * @property {number} indexShapeB The index of the colliding shape for the object b body
- * @name ResponseObject
- * @memberof collision
- * @public
- */
-class ResponseObject {
-    constructor() {
-        this.a = null;
-        this.b = null;
-        this.overlapN = new Vector2d();
-        this.overlapV = new Vector2d();
-        this.aInB = true;
-        this.bInA = true;
-        this.indexShapeA = -1;
-        this.indexShapeB = -1;
-        this.overlap = Number.MAX_VALUE;
-    }
-
-    /**
-     * Set some values of the response back to their defaults. <br>
-     * Call this between tests if you are going to reuse a single <br>
-     * Response object for multiple intersection tests <br>
-     * (recommended as it will avoid allocating extra memory) <br>
-     * @name clear
-     * @memberof collision.ResponseObject
-     * @public
-     * @returns {object} this object for chaining
-     */
-    clear () {
-        this.aInB = true;
-        this.bInA = true;
-        this.overlap = Number.MAX_VALUE;
-        this.indexShapeA = -1;
-        this.indexShapeB = -1;
-        return this;
-    }
-}
 
-// @ignore
-export var globalResponse = new ResponseObject();
 
 /**
  * find all the collisions for the specified object
  * @name collisionCheck
  * @ignore
  * @param {Renderable} objA object to be tested for collision
- * @param {collision.ResponseObject} [response=collision.response] a user defined response object that will be populated if they intersect.
+ * @param {ResponseObject} [response] a user defined response object that will be populated if they intersect.
  * @returns {boolean} in case of collision, false otherwise
  */
 export function collisionCheck(objA, response = globalResponse) {

package/src/physics/response.js

@@ -0,0 +1,48 @@
+import Vector2d from "./../math/vector2.js";
+
+/**
+ * @classdesc
+ * An object representing the result of an intersection.
+ * @property {Renderable} a The first object participating in the intersection
+ * @property {Renderable} b The second object participating in the intersection
+ * @property {number} overlap Magnitude of the overlap on the shortest colliding axis
+ * @property {Vector2d} overlapV The overlap vector (i.e. `overlapN.scale(overlap, overlap)`). If this vector is subtracted from the position of a, a and b will no longer be colliding
+ * @property {Vector2d} overlapN The shortest colliding axis (unit-vector)
+ * @property {boolean} aInB Whether the first object is entirely inside the second
+ * @property {boolean} bInA Whether the second object is entirely inside the first
+ * @property {number} indexShapeA The index of the colliding shape for the object a body
+ * @property {number} indexShapeB The index of the colliding shape for the object b body
+ * @name ResponseObject
+ * @public
+ */
+export default class ResponseObject {
+    constructor() {
+        this.a = null;
+        this.b = null;
+        this.overlapN = new Vector2d();
+        this.overlapV = new Vector2d();
+        this.aInB = true;
+        this.bInA = true;
+        this.indexShapeA = -1;
+        this.indexShapeB = -1;
+        this.overlap = Number.MAX_VALUE;
+    }
+
+    /**
+     * Set some values of the response back to their defaults. <br>
+     * Call this between tests if you are going to reuse a single <br>
+     * Response object for multiple intersection tests <br>
+     * (recommended as it will avoid allocating extra memory) <br>
+     * @name clear
+     * @public
+     * @returns {object} this object for chaining
+     */
+    clear () {
+        this.aInB = true;
+        this.bInA = true;
+        this.overlap = Number.MAX_VALUE;
+        this.indexShapeA = -1;
+        this.indexShapeB = -1;
+        return this;
+    }
+}

package/src/physics/sat.js

@@ -458,7 +458,7 @@ export function testPolygonEllipse(a, polyA, b, ellipseB, response) {
  */
 export function testEllipsePolygon(a, ellipseA, b, polyB, response) {
     // Test the polygon against the circle.
-    var result = this.testPolygonEllipse(b, polyB, a, ellipseA, response);
+    var result = testPolygonEllipse(b, polyB, a, ellipseA, response);
     if (result && response) {
         // Swap A and B in the response.
         var resa = response.a;

package/src/polyfill/index.js

@@ -1,6 +1,10 @@
 // https://github.com/melonjs/melonJS/issues/1092
 import "core-js/proposals/global-this";
 
+// es10 string trim functions
+import "core-js/es/string/trim-left";
+import "core-js/es/string/trim-right";
+
 // "built-in" polyfills
 import "./console.js";
 import "./performance.js";

package/src/renderable/GUI.js

@@ -121,7 +121,7 @@ class GUI_Object extends Sprite {
      * @param {Pointer} event the event object
      * @returns {boolean} return false if we need to stop propagating the event
      */
-    onClick(/* event */) {
+    onClick(event) { // eslint-disable-line no-unused-vars
         return false;
     }
 
@@ -142,7 +142,9 @@ class GUI_Object extends Sprite {
      * @public
      * @param {Pointer} event the event object
      */
-    onOver(/* event */) {}
+    onOver(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
 
     /**
      * function callback for the pointerLeave event
@@ -162,8 +164,8 @@ class GUI_Object extends Sprite {
      * @public
      * @param {Pointer} event the event object
      */
-    onOut(/* event */) {
-
+    onOut(event) { // eslint-disable-line no-unused-vars
+        // to be extended
     }
 
     /**

package/src/renderable/colorlayer.js

@@ -1,5 +1,4 @@
 import pool from "./../system/pooling.js";
-import { viewport } from "./../game.js";
 import Renderable from "./renderable.js";
 
 
@@ -41,15 +40,18 @@ class ColorLayer extends Renderable {
     }
 
     /**
-     * draw the color layer
-     * @ignore
+     * draw this color layer (automatically called by melonJS)
+     * @name draw
+     * @memberof ColorLayer
+     * @protected
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer, rect) {
-        var vpos = viewport.pos;
+    draw(renderer, viewport) {
         renderer.save();
         renderer.clipRect(
-            rect.left - vpos.x, rect.top - vpos.y,
-            rect.width, rect.height
+            0, 0,
+            viewport.width, viewport.height
         );
         renderer.clearColor(this.color);
         renderer.restore();

package/src/renderable/container.js

@@ -102,7 +102,7 @@ class Container extends Renderable {
          * @memberof Container#
          * @param {number} index added or removed child index
          */
-        this.onChildChange = function (/* index */) {
+        this.onChildChange = function (index) {   // eslint-disable-line no-unused-vars
             // to be extended
         };
 
@@ -187,8 +187,10 @@ class Container extends Renderable {
      * Adding a child to the container will automatically remove it from its other container.
      * Meaning a child can only have one parent.  This is important if you add a renderable
      * to a container then add it to the me.game.world container it will move it out of the
-     * orginal container.  Then when the me.game.world.reset() is called the renderable
-     * will not be in any container.
+     * orginal container. Then when the me.game.world.reset() is called the renderable
+     * will not be in any container. <br>
+     * if the given child implements a onActivateEvent method, that method will be called
+     * once the child is added to this container.
      * @name addChild
      * @memberof Container
      * @param {Renderable} child
@@ -630,7 +632,8 @@ class Container extends Renderable {
     }
 
     /**
-     * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed
+     * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed. <br>
+     * if the given child implements a onDeactivateEvent() method, that method will be called once the child is removed from this container.
      * @name removeChild
      * @memberof Container
      * @public
@@ -933,15 +936,14 @@ class Container extends Renderable {
     }
 
     /**
-     * draw the container. <br>
-     * automatically called by the game manager {@link game}
+      * draw this renderable (automatically called by melonJS)
      * @name draw
      * @memberof Container
      * @protected
-     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
-     * @param {Rect|Bounds} [rect] the area or viewport to (re)draw
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer instance
+     * @param {Camera2d} [viewport] the viewport to (re)draw
      */
-    draw(renderer, rect) {
+    draw(renderer, viewport) {
         var isFloating = false;
         var bounds = this.getBounds();
 
@@ -983,7 +985,7 @@ class Container extends Renderable {
                     obj.preDraw(renderer);
 
                     // draw the object
-                    obj.draw(renderer, rect);
+                    obj.draw(renderer, viewport);
 
                     // postdraw (clean-up);
                     obj.postDraw(renderer);