melonjs 10.4.0 → 10.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -53,6 +53,7 @@
     "CHANGELOG"
   ],
   "dependencies": {
+    "@teppeis/multimaps": "^2.0.0",
     "earcut": "2.2.3",
     "eventemitter3": "^4.0.7",
     "howler": "2.2.3"
@@ -62,25 +63,25 @@
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
+    "@types/offscreencanvas": "^2019.6.4",
     "cheerio": "^1.0.0-rc.10",
     "del-cli": "^4.0.1",
-    "eslint": "^8.10.0",
-    "eslint-plugin-jsdoc": "^37.9.7",
+    "eslint": "^8.11.0",
+    "eslint-plugin-jsdoc": "^38.0.4",
     "jasmine-core": "^4.0.1",
     "jsdoc": "^3.6.10",
     "karma": "^6.3.17",
-    "karma-chrome-launcher": "^3.1.0",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-html-detailed-reporter": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-nyan-reporter": "0.2.5",
     "qs": "^6.10.3",
-    "rollup": "^2.70.0",
+    "rollup": "^2.70.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.12.0",
-    "typescript": "^4.6.2",
-    "@types/offscreencanvas": "^2019.6.4"
+    "terser": "^5.12.1",
+    "typescript": "^4.6.2"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",

package/src/index.js

@@ -53,6 +53,7 @@ import NineSliceSprite from "./renderable/nineslicesprite.js";
 import GUI_Object from "./renderable/GUI.js";
 import Collectable from "./renderable/collectable.js";
 import Trigger from "./renderable/trigger.js";
+import { Draggable, DropTarget } from "./renderable/dragndrop.js";
 import TMXRenderer from "./level/tiled/renderer/TMXRenderer.js";
 import TMXOrthogonalRenderer from "./level/tiled/renderer/TMXOrthogonalRenderer.js";
 import TMXIsometricRenderer from "./level/tiled/renderer/TMXIsometricRenderer.js";
@@ -71,14 +72,8 @@ import World from "./physics/world.js";
 import { ParticleEmitterSettings, ParticleEmitter } from "./particles/emitter.js";
 import Particle from "./particles/particle.js";
 import Entity from "./entity/entity.js";
-import DraggableEntity from "./entity/draggable.js";
-import DroptargetEntity from "./entity/droptarget.js";
 
 
-
-// alias and wrapper for deprecated API
-import * as deprecated from "./lang/deprecated.js";
-
 /**
  * current melonJS version
  * @static
@@ -143,6 +138,8 @@ export {
     GUI_Object,
     Collectable,
     Trigger,
+    Draggable,
+    DropTarget,
     TMXRenderer,
     TMXOrthogonalRenderer,
     TMXIsometricRenderer,
@@ -161,15 +158,11 @@ export {
     ParticleEmitter,
     ParticleEmitterSettings,
     Particle,
-    Entity,
-    DraggableEntity,
-    DroptargetEntity
+    Entity
 };
 
 // Backward compatibility for deprecated method or properties
-export {
-    deprecated
-};
+export * from "./lang/deprecated.js";
 
 
 /**

package/src/lang/deprecated.js

@@ -2,6 +2,7 @@ import device from "./../system/device.js";
 import { requestPointerLock, exitPointerLock } from "./../input/input.js";
 import { TextureAtlas } from "./../video/texture.js";
 import Renderer from "./../video/renderer.js";
+import { Draggable, DropTarget } from "./../renderable/dragndrop.js";
 
 /**
  * placeholder for all deprecated classes and corresponding alias for backward compatibility
@@ -86,3 +87,42 @@ Object.defineProperty(Renderer.prototype, "Texture", {
         return TextureAtlas;
     }
 });
+
+
+/**
+ * @classdesc
+ * Used to make a game entity draggable
+ * @augments Entity
+ * @deprecated since 10.5.0
+ * @see Draggable
+ */
+export class DraggableEntity extends Draggable {
+    /**
+     * @param {number} x the x coordinates of the draggable object
+     * @param {number} y the y coordinates of the draggable object
+     * @param {object} settings Entity properties (see {@link Entity})
+     */
+    constructor(x, y, settings) {
+        warning("DraggableEntity", "Draggable", "10.5.0");
+        super(x, y, settings.width, settings.height);
+    }
+}
+
+/**
+ * @classdesc
+ * Used to make a game entity a droptarget
+ * @augments Entity
+ * @deprecated since 10.5.0
+ * @see DropTarget
+ */
+export class DroptargetEntity extends DropTarget {
+    /**
+     * @param {number} x the x coordinates of the draggable object
+     * @param {number} y the y coordinates of the draggable object
+     * @param {object} settings Entity properties (see {@link Entity})
+     */
+    constructor(x, y, settings) {
+        warning("DroptargetEntity", "DropTarget", "10.5.0");
+        super(x, y, settings.width, settings.height);
+    }
+}

package/src/level/tiled/TMXTileMap.js

@@ -542,6 +542,8 @@ class TMXTileMap {
                 if (isCollisionGroup && !settings.name && obj.body) {
                     // configure the body accordingly
                     obj.body.collisionType = collision.types.WORLD_SHAPE;
+                    // mark collision shapes as static
+                    obj.body.isStatic = true;
                 }
 
                 //apply group opacity value to the child objects if group are merged

package/src/physics/body.js

@@ -154,7 +154,8 @@ class Body {
 
 
         /**
-         * either this body is a static body or not
+         * Either this body is a static body or not.
+         * A static body is completely fixed and can never change position or angle.
          * @readonly
          * @public
          * @type {boolean}

package/src/physics/detector.js

@@ -27,7 +27,8 @@ var dummyObj = {
 function shouldCollide(a, b) {
     return (
         a.isKinematic !== true && b.isKinematic !== true &&
-        a.body && b.body &&
+        typeof a.body === "object" && typeof b.body === "object" &&
+        !(a.body.isStatic === true && b.body.isStatic === true) &&
         (a.body.collisionMask & b.body.collisionType) !== 0 &&
         (a.body.collisionType & b.body.collisionMask) !== 0
     );
@@ -141,10 +142,10 @@ export function collisionCheck(objA, response = globalResponse) {
                         response.indexShapeB = indexB;
 
                         // execute the onCollision callback
-                        if (objA.onCollision && objA.onCollision(response, objB) !== false) {
+                        if (objA.onCollision && objA.onCollision(response, objB) !== false && objA.body.isStatic === false) {
                             objA.body.respondToCollision.call(objA.body, response);
                         }
-                        if (objB.onCollision && objB.onCollision(response, objA) !== false) {
+                        if (objB.onCollision && objB.onCollision(response, objA) !== false && objB.body.isStatic === false) {
                             objB.body.respondToCollision.call(objB.body, response);
                         }
                     }

package/src/renderable/dragndrop.js

@@ -0,0 +1,224 @@
+import Vector2d from "./../math/vector2.js";
+import * as input from "./../input/input.js";
+import * as event from "./../system/event.js";
+import Renderable from "./../renderable/renderable.js";
+
+/**
+ * @classdesc
+ * A Draggable base object
+ * @see DropTarget
+ * @augments Renderable
+ */
+export class Draggable extends Renderable {
+    /**
+     * @param {number} x the x coordinates of the draggable object
+     * @param {number} y the y coordinates of the draggable object
+     * @param {number} width draggable object width
+     * @param {number} height draggable object height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+        this.isKinematic = false;
+        this.dragging = false;
+        this.dragId = null;
+        this.grabOffset = new Vector2d(0, 0);
+        this.initEvents();
+    }
+
+    /**
+     * Initializes the events the modules needs to listen to
+     * It translates the pointer events to me.events
+     * in order to make them pass through the system and to make
+     * this module testable. Then we subscribe this module to the
+     * transformed events.
+     * @name initEvents
+     * @memberof Draggable
+     * @function
+     * @private
+     */
+    initEvents() {
+        input.registerPointerEvent("pointerdown", this, (e) => { event.emit(event.DRAGSTART, e, this); });
+        input.registerPointerEvent("pointerup", this,  (e) => { event.emit(event.DRAGEND, e, this); });
+        input.registerPointerEvent("pointercancel", this, (e) => { event.emit(event.DRAGEND, e, this); });
+        event.on(event.POINTERMOVE, this.dragMove.bind(this));
+        event.on(event.DRAGSTART, (e, draggable) => {
+            if (draggable === this) {
+                this.dragStart(e);
+            }
+        });
+        event.on(event.DRAGEND, (e, draggable) => {
+            if (draggable === this) {
+                this.dragEnd(e);
+            }
+        });
+    }
+
+    /**
+     * Gets called when the user starts dragging the entity
+     * @name dragStart
+     * @memberof Draggable
+     * @function
+     * @param {object} e the pointer event
+     * @returns {boolean} false if the object is being dragged
+     */
+    dragStart(e) {
+        if (this.dragging === false) {
+            this.dragging = true;
+            this.grabOffset.set(e.gameX, e.gameY);
+            this.grabOffset.sub(this.pos);
+            return false;
+        }
+    }
+
+    /**
+     * Gets called when the user drags this entity around
+     * @name dragMove
+     * @memberof Draggable
+     * @function
+     * @param {object} e the pointer event
+     */
+    dragMove(e) {
+        if (this.dragging === true) {
+            this.pos.set(e.gameX, e.gameY, this.pos.z); //TODO : z ?
+            this.pos.sub(this.grabOffset);
+        }
+    }
+
+    /**
+     * Gets called when the user stops dragging the entity
+     * @name dragEnd
+     * @memberof Draggable
+     * @function
+     * @returns {boolean} false if the object stopped being dragged
+     */
+    dragEnd() {
+        if (this.dragging === true) {
+            this.dragging = false;
+            return false;
+        }
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof Draggable
+     * @function
+     * @private
+     */
+    destroy() {
+        event.off(event.POINTERMOVE, this.dragMove);
+        event.off(event.DRAGSTART, this.dragStart);
+        event.off(event.DRAGEND, this.dragEnd);
+        input.releasePointerEvent("pointerdown", this);
+        input.releasePointerEvent("pointerup", this);
+        input.releasePointerEvent("pointercancel", this);
+        super.destroy();
+    }
+};
+
+/**
+ * @classdesc
+ * a base drop target object
+ * @see Draggable
+ * @augments Renderable
+ */
+export class DropTarget extends Renderable {
+    /**
+     * @param {number} x the x coordinates of the drop target
+     * @param {number} y the y coordinates of the drop target
+     * @param {number} width drop target width
+     * @param {number} height drop target height
+     */
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+
+        this.isKinematic = false;
+
+        /**
+         * constant for the overlaps method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_OVERLAP
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_OVERLAP = "overlaps";
+
+        /**
+         * constant for the contains method
+         * @public
+         * @constant
+         * @type {string}
+         * @name CHECKMETHOD_CONTAINS
+         * @memberof DropTarget
+         */
+        this.CHECKMETHOD_CONTAINS = "contains";
+
+        /**
+         * the checkmethod we want to use
+         * @public
+         * @constant
+         * @type {string}
+         * @name checkMethod
+         * @default "overlaps"
+         * @memberof DropTarget
+         */
+        this.checkMethod = this.CHECKMETHOD_OVERLAP;
+
+        event.on(event.DRAGEND, this.checkOnMe, this);
+
+    }
+
+    /**
+     * Sets the collision method which is going to be used to check a valid drop
+     * @name setCheckMethod
+     * @memberof DropTarget
+     * @function
+     * @param {string} checkMethod the checkmethod (defaults to CHECKMETHOD_OVERLAP)
+     */
+    setCheckMethod(checkMethod) {
+        //  We can improve this check,
+        //  because now you can use every method in theory
+        if (typeof(this.getBounds()[this.checkMethod]) === "function") {
+            this.checkMethod = checkMethod;
+        }
+    }
+
+    /**
+     * Checks if a dropped entity is dropped on the current entity
+     * @name checkOnMe
+     * @memberof DropTarget
+     * @function
+     * @param {object} e the triggering event
+     * @param {Draggable} draggable the draggable object that is dropped
+     */
+    checkOnMe(e, draggable) {
+        if (draggable && this.getBounds()[this.checkMethod](draggable.getBounds())) {
+            // call the drop method on the current entity
+            this.drop(draggable);
+        }
+    }
+
+    /**
+     * Gets called when a draggable entity is dropped on the current entity
+     * @name drop
+     * @memberof DropTarget
+     * @function
+     * @param {Draggable} draggable the draggable object that is dropped
+     */
+    drop() {
+
+    }
+
+    /**
+     * Destructor
+     * @name destroy
+     * @memberof DropTarget
+     * @function
+     * @private
+     */
+    destroy() {
+        event.off(event.DRAGEND, this.checkOnMe);
+        super.destroy();
+    }
+};

package/src/video/texture_cache.js

@@ -2,6 +2,7 @@ import { renderer } from "./video.js";
 import * as fileUtil from "./../utils/file.js";
 import { TextureAtlas, createAtlas } from "./texture.js";
 import { isPowerOfTwo} from "./../math/math.js";
+import {ArrayMultimap} from "@teppeis/multimaps";
 
 
 /**
@@ -14,7 +15,8 @@ class TextureCache {
      * @ignore
      */
     constructor(max_size) {
-        this.cache = new Map();
+        // cache uses an array to allow for duplicated key
+        this.cache = new ArrayMultimap();
         this.tinted = new Map();
         this.units = new Map();
         this.max_size = max_size || Infinity;
@@ -48,13 +50,29 @@ class TextureCache {
      * @ignore
      */
     get(image, atlas) {
-        if (!this.cache.has(image)) {
+        var entry;
+
+        if (typeof atlas === "undefined") {
+            entry = this.cache.get(image)[0];
+        } 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) {
+                    entry = value;
+                }
+            });
+        }
+
+        if (typeof entry === "undefined") {
             if (!atlas) {
                 atlas = createAtlas(image.width, image.height, image.src ? fileUtil.getBasename(image.src) : undefined);
             }
-            this.set(image, new TextureAtlas(atlas, image, false));
+            entry = new TextureAtlas(atlas, image, false);
+            this.set(image, entry);
         }
-        return this.cache.get(image);
+
+        return entry;
     }
 
     /**
@@ -99,7 +117,7 @@ class TextureCache {
                 "(" + width + "x" + height + ")"
             );
         }
-        this.cache.set(image, texture);
+        return this.cache.put(image, texture);
     }
 
     /**

package/src/entity/draggable.js

@@ -1,129 +0,0 @@
-import Vector2d from "./../math/vector2.js";
-import * as input from "./../input/input.js";
-import * as event from "./../system/event.js";
-import Entity from "./entity.js";
-
-/**
- * @classdesc
- * Used to make a game entity draggable
- * @augments Entity
- */
-class DraggableEntity extends Entity {
-    /**
-     * @param {number} x the x coordinates of the entity object
-     * @param {number} y the y coordinates of the entity object
-     * @param {object} settings Entity properties (see {@link Entity})
-     */
-    constructor(x, y, settings) {
-        super(x, y, settings);
-        this.dragging = false;
-        this.dragId = null;
-        this.grabOffset = new Vector2d(0, 0);
-        this.onPointerEvent = input.registerPointerEvent;
-        this.removePointerEvent = input.releasePointerEvent;
-        this.initEvents();
-    }
-
-    /**
-     * Initializes the events the modules needs to listen to
-     * It translates the pointer events to me.events
-     * in order to make them pass through the system and to make
-     * this module testable. Then we subscribe this module to the
-     * transformed events.
-     * @name initEvents
-     * @memberof DraggableEntity
-     * @function
-     */
-    initEvents() {
-        /**
-         * @ignore
-         */
-        this.mouseDown = function (e) {
-            this.translatePointerEvent(e, event.DRAGSTART);
-        };
-        /**
-         * @ignore
-         */
-        this.mouseUp = function (e) {
-            this.translatePointerEvent(e, event.DRAGEND);
-        };
-        this.onPointerEvent("pointerdown", this, this.mouseDown.bind(this));
-        this.onPointerEvent("pointerup", this, this.mouseUp.bind(this));
-        this.onPointerEvent("pointercancel", this, this.mouseUp.bind(this));
-        event.on(event.POINTERMOVE, this.dragMove, this);
-        event.on(event.DRAGSTART, this.dragStart, this);
-        event.on(event.DRAGEND, this.dragEnd, this);
-    }
-
-    /**
-     * Translates a pointer event to a me.event
-     * @name translatePointerEvent
-     * @memberof DraggableEntity
-     * @function
-     * @param {object} e the pointer event you want to translate
-     * @param {string} translation the me.event you want to translate the event to
-     */
-    translatePointerEvent(e, translation) {
-        event.emit(translation, e);
-    }
-
-    /**
-     * Gets called when the user starts dragging the entity
-     * @name dragStart
-     * @memberof DraggableEntity
-     * @function
-     * @param {object} e the pointer event
-     * @returns {boolean} false if the object is being dragged
-     */
-    dragStart(e) {
-        if (this.dragging === false) {
-            this.dragging = true;
-            this.grabOffset.set(e.gameX, e.gameY);
-            this.grabOffset.sub(this.pos);
-            return false;
-        }
-    }
-
-    /**
-     * Gets called when the user drags this entity around
-     * @name dragMove
-     * @memberof DraggableEntity
-     * @function
-     * @param {object} e the pointer event
-     */
-    dragMove(e) {
-        if (this.dragging === true) {
-            this.pos.set(e.gameX, e.gameY, this.pos.z); //TODO : z ?
-            this.pos.sub(this.grabOffset);
-        }
-    }
-
-    /**
-     * Gets called when the user stops dragging the entity
-     * @name dragEnd
-     * @memberof DraggableEntity
-     * @function
-     * @returns {boolean} false if the object stopped being dragged
-     */
-    dragEnd() {
-        if (this.dragging === true) {
-            this.dragging = false;
-            return false;
-        }
-    }
-
-    /**
-     * Destructor
-     * @name destroy
-     * @memberof DraggableEntity
-     * @function
-     */
-    destroy() {
-        event.off(event.POINTERMOVE, this.dragMove);
-        event.off(event.DRAGSTART, this.dragStart);
-        event.off(event.DRAGEND, this.dragEnd);
-        this.removePointerEvent("pointerdown", this);
-        this.removePointerEvent("pointerup", this);
-    }
-};
-export default DraggableEntity;