melonjs 13.4.0 → 14.0.1

package/src/physics/detector.js

@@ -2,6 +2,8 @@ import * as SAT from "./sat.js";
 import ResponseObject from "./response.js";
 import Vector2d from "./../math/vector2.js";
 import game from "./../game.js";
+import Bounds from "./bounds.js";
+
 
 // a dummy object when using Line for raycasting
 let dummyObj = {
@@ -14,6 +16,9 @@ let dummyObj = {
     }
 };
 
+let boundsA = new Bounds();
+let boundsB = new Bounds();
+
 // the global response object used for collisions
 let globalResponse = new ResponseObject();
 
@@ -28,14 +33,18 @@ let globalResponse = new ResponseObject();
  * @returns {boolean} true if they should collide, false otherwise
  */
 function shouldCollide(a, b) {
+    var bodyA = a.body,
+        bodyB = b.body;
     return (
+        a !== b &&
         a.isKinematic !== true && b.isKinematic !== true &&
-        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
+        typeof bodyA === "object" && typeof bodyB === "object" &&
+        bodyA.shapes.length > 0 && bodyB.shapes.length > 0 &&
+        !(bodyA.isStatic === true && bodyB.isStatic === true) &&
+        (bodyA.collisionMask & bodyB.collisionType) !== 0 &&
+        (bodyA.collisionType & bodyB.collisionMask) !== 0
     );
-};
+}
 
 
 
@@ -52,63 +61,55 @@ export function collisionCheck(objA, response = globalResponse) {
     // retreive a list of potential colliding objects from the game world
     var candidates = game.world.broadphase.retrieve(objA);
 
-    for (var i = candidates.length, objB; i--, (objB = candidates[i]);) {
+    boundsA.addBounds(objA.getBounds(), true);
+    boundsA.addBounds(objA.body.getBounds());
 
+    candidates.forEach((objB) => {
         // check if both objects "should" collide
-        if ((objB !== objA) && shouldCollide(objA, objB) &&
-            // fast AABB check if both bounding boxes are overlaping
-            objA.body.getBounds().overlaps(objB.body.getBounds())) {
+        if (shouldCollide(objA, objB)) {
 
-            // go trough all defined shapes in A
-            var aLen = objA.body.shapes.length;
-            var bLen = objB.body.shapes.length;
-            if (aLen === 0 || bLen === 0) {
-                continue;
-            }
+            boundsB.addBounds(objB.getBounds(), true);
+            boundsB.addBounds(objB.body.getBounds());
 
-            var indexA = 0;
-            do {
-                var shapeA = objA.body.getShape(indexA);
-                // go through all defined shapes in B
-                var indexB = 0;
-                do {
-                    var shapeB = objB.body.getShape(indexB);
-
-                    // full SAT collision check
-                    if (SAT["test" + shapeA.shapeType + shapeB.shapeType]
-                        .call(
-                            this,
-                            objA, // a reference to the object A
-                            shapeA,
-                            objB,  // a reference to the object B
-                            shapeB,
-                             // clear response object before reusing
-                            response.clear()) === true
-                    ) {
-                        // we touched something !
-                        collisionCounter++;
-
-                        // set the shape index
-                        response.indexShapeA = indexA;
-                        response.indexShapeB = indexB;
-
-                        // execute the onCollision callback
-                        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 && objB.body.isStatic === false) {
-                            objB.body.respondToCollision.call(objB.body, response);
+            // fast AABB check if both bounding boxes are overlaping
+            if (boundsA.overlaps(boundsB)) {
+                // for each shape in body A
+                objA.body.shapes.forEach((shapeA, indexA) => {
+                    // for each shape in body B
+                    objB.body.shapes.forEach((shapeB, indexB) => {
+                        // full SAT collision check
+                        if (SAT["test" + shapeA.shapeType + shapeB.shapeType].call(
+                                this,
+                                objA, // a reference to the object A
+                                shapeA,
+                                objB,  // a reference to the object B
+                                shapeB,
+                                // clear response object before reusing
+                                response.clear()) === true
+                        ) {
+                            // we touched something !
+                            collisionCounter++;
+
+                            // set the shape index
+                            response.indexShapeA = indexA;
+                            response.indexShapeB = indexB;
+
+                            // execute the onCollision callback
+                            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 && objB.body.isStatic === false) {
+                                objB.body.respondToCollision.call(objB.body, response);
+                            }
                         }
-                    }
-                    indexB++;
-                } while (indexB < bLen);
-                indexA++;
-            } while (indexA < aLen);
+                    });
+                });
+            }
         }
-    }
+    });
     // we could return the amount of objects we collided with ?
     return collisionCounter > 0;
-};
+}
 
 /**
  * Checks for object colliding with the given line
@@ -182,4 +183,4 @@ export function rayCast(line, result = []) {
 
     // return the list of colliding objects
     return result;
-};
+}

package/src/physics/quadtree.js

@@ -32,7 +32,7 @@ function QT_ARRAY_POP(world, bounds, max_objects = 4, max_levels = 4, level = 0)
     } else {
         return new QuadTree(world, bounds, max_objects, max_levels, level);
     }
-};
+}
 
 /**
  * Push back a quadtree back into the array
@@ -40,7 +40,7 @@ function QT_ARRAY_POP(world, bounds, max_objects = 4, max_levels = 4, level = 0)
  */
 function QT_ARRAY_PUSH(qt) {
     QT_ARRAY.push(qt);
-};
+}
 
 /**
  * a temporary vector object to be reused
@@ -156,7 +156,7 @@ class QuadTree {
         if (item.isFloating === true) {
             pos = this.world.app.viewport.localToWorld(bounds.left, bounds.top, QT_VECTOR);
         } else {
-            pos = QT_VECTOR.set(item.left, item.top);
+            pos = QT_VECTOR.set(bounds.left, bounds.top);
         }
 
         var index = -1,

package/src/physics/world.js

@@ -194,7 +194,7 @@ class World extends Container {
                     if (body.update(dt) === true) {
                         // mark ancestor as dirty
                         ancestor.isDirty = true;
-                    };
+                    }
                     // handle collisions against other objects
                     collisionCheck(ancestor);
                     // clear body force
@@ -207,6 +207,6 @@ class World extends Container {
         return super.update(dt);
     }
 
-};
+}
 
 export default World;

package/src/polyfill/performance.js

@@ -8,7 +8,7 @@ Date.now = (Date.now || function () {  // thanks IE8
 
 if ("now" in globalThis.performance === false) {
 
-    var nowOffset = Date.now();
+    let nowOffset = Date.now();
 
     if (performance.timing && performance.timing.navigationStart) {
       nowOffset = performance.timing.navigationStart;

package/src/polyfill/requestAnimationFrame.js

@@ -22,7 +22,7 @@ if (!requestAnimationFrame || !cancelAnimationFrame) {
     requestAnimationFrame = function (callback) {
         var currTime = globalThis.performance.now();
         var timeToCall = Math.max(0, (1000 / timer.maxfps) - (currTime - lastTime));
-        var id = globalThis.setTimeout(function () {
+        var id = globalThis.setTimeout(() => {
             callback(currTime + timeToCall);
         }, timeToCall);
         lastTime = currTime + timeToCall;

package/src/renderable/collectable.js

@@ -48,6 +48,6 @@ class Collectable extends Sprite {
 
     }
 
-};
+}
 
 export default Collectable;

package/src/renderable/colorlayer.js

@@ -67,6 +67,6 @@ class ColorLayer extends Renderable {
         super.destroy();
     }
 
-};
+}
 
 export default ColorLayer;

package/src/renderable/container.js

@@ -28,10 +28,14 @@ class Container extends Renderable {
      * @param {number} [width=game.viewport.width] width of the container
      * @param {number} [height=game.viewport.height] height of the container
      */
-    constructor(x = 0, y = 0, width = game.viewport.width, height = game.viewport.height, root = false) {
+    constructor(x = 0, y = 0, width, height, root = false) {
 
         // call the super constructor
-        super(x, y, width, height);
+        super(
+            x, y,
+            typeof width === "undefined" ? (typeof game.viewport !== "undefined" ? game.viewport.width : Infinity) : width,
+            typeof height === "undefined" ? (typeof game.viewport !== "undefined" ? game.viewport.height : Infinity) : height
+        );
 
         /**
          * keep track of pending sort
@@ -171,7 +175,7 @@ class Container extends Renderable {
             if (child && child.isPersistent !== true) {
                 this.removeChildNow(child);
             }
-        };
+        }
 
         if (typeof this.currentTransform !== "undefined") {
             // just reset some variables
@@ -912,10 +916,10 @@ class Container extends Renderable {
                 // check if object is in any active cameras
                 obj.inViewport = false;
                 // iterate through all cameras
-                state.current().cameras.forEach(function(camera) {
+                state.current().cameras.forEach((camera) => {
                     if (camera.isVisible(obj, isFloating)) {
                         obj.inViewport = true;
-                    };
+                    }
                 });
 
                 // update our object
@@ -1000,6 +1004,6 @@ class Container extends Renderable {
             }
         }
     }
-};
+}
 
 export default Container;

package/src/renderable/dragndrop.js

@@ -109,7 +109,7 @@ export class Draggable extends Renderable {
         input.releasePointerEvent("pointercancel", this);
         super.destroy();
     }
-};
+}
 
 /**
  * @classdesc
@@ -212,4 +212,4 @@ export class DropTarget extends Renderable {
         event.off(event.DRAGEND, this.checkOnMe);
         super.destroy();
     }
-};
+}

package/src/renderable/imagelayer.js

@@ -294,6 +294,5 @@ class ImageLayer extends Sprite {
         super.destroy();
     }
 
-};
-
+}
 export default ImageLayer;

package/src/renderable/light2d.js

@@ -143,5 +143,5 @@ class Light2d extends Renderable {
         this.visibleArea = undefined;
         super.destroy();
     }
-};
+}
 export default Light2d;

package/src/renderable/nineslicesprite.js

@@ -234,6 +234,5 @@ class NineSliceSprite extends Sprite {
             target_center_height  // dh
         );
     }
-};
-
+}
 export default NineSliceSprite;

package/src/renderable/renderable.js

@@ -770,7 +770,5 @@ class Renderable extends Rect {
         // to be extended !
     }
 
-};
-
-
+}
 export default Renderable;

package/src/renderable/sprite.js

@@ -200,7 +200,7 @@ class Sprite extends Renderable {
         // displaying order
         if (typeof settings.z !== "undefined") {
             this.pos.z = settings.z;
-        };
+        }
 
         // for sprite, addAnimation will return !=0
         if (this.addAnimation("default", null) !== 0) {
@@ -301,7 +301,7 @@ class Sprite extends Renderable {
         if (index == null) {
             index = [];
             // create a default animation with all frame
-            Object.keys(this.textureAtlas).forEach(function (v, i) {
+            Object.keys(this.textureAtlas).forEach((v, i) => {
                 index[i] = i;
             });
         }
@@ -641,6 +641,5 @@ class Sprite extends Renderable {
             w, h                         // dw,dh
         );
     }
-};
-
+}
 export default Sprite;

package/src/renderable/trigger.js

@@ -60,11 +60,11 @@ class Trigger extends Renderable {
             event: "level"
         };
 
-        [ "type", "container", "onLoaded", "flatten", "setViewportBounds", "to" ].forEach(function(property) {
+        [ "type", "container", "onLoaded", "flatten", "setViewportBounds", "to" ].forEach((property) => {
             if (typeof settings[property] !== "undefined") {
                 this.triggerSettings[property] = settings[property];
             }
-        }.bind(this));
+        });
 
         // add and configure the physic body
         var shape = settings.shapes;
@@ -144,6 +144,5 @@ class Trigger extends Renderable {
         return false;
     }
 
-};
-
+}
 export default Trigger;

package/src/renderable/ui/uibaseelement.js

@@ -0,0 +1,204 @@
+import Container from "./../container.js";
+import timer from "../../system/timer.js";
+import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
+
+/**
+ * @classdesc
+ * This is a basic clickable container which you can use in your game UI.
+ * Use this for example if you want to display a button which contains
+ * text and images.
+ * @augments Container
+ */
+class UIBaseElement extends Container {
+    /**
+     *
+     * @param {number} x The x position of the container
+     * @param {number} y The y position of the container
+     * @param {number} w width of the container (default: viewport width)
+     * @param {number} h height of the container (default: viewport height)
+     */
+    constructor(x, y, w, h) {
+        super(x, y, w, h);
+        /**
+         * object can be clicked or not
+         * @type {boolean}
+         */
+        this.isClickable = true;
+
+        /**
+         * Tap and hold threshold timeout in ms
+         * @type {number}
+         * @default 250
+         */
+        this.holdThreshold = 250;
+
+        /**
+         * object can be tap and hold
+         * @type {boolean}
+         * @default false
+         */
+        this.isHoldable = false;
+
+        /**
+         * true if the pointer is over the object
+         * @type {boolean}
+         * @default false
+         */
+        this.hover = false;
+
+        // object has been updated (clicked,etc..)
+        this.holdTimeout = null;
+        this.released = true;
+
+        // GUI items use screen coordinates
+        this.floating = true;
+
+        // enable event detection
+        this.isKinematic = false;
+    }
+
+    /**
+     * function callback for the pointerdown event
+     * @ignore
+     */
+    clicked(event) {
+        // Check if left mouse button is pressed
+        if (event.button === 0 && this.isClickable) {
+            this.dirty = true;
+            this.released = false;
+            if (this.isHoldable) {
+                if (this.holdTimeout !== null) {
+                    timer.clearTimeout(this.holdTimeout);
+                }
+                this.holdTimeout = timer.setTimeout(
+                    this.hold.bind(this),
+                    this.holdThreshold,
+                    false
+                );
+                this.released = false;
+            }
+            return this.onClick(event);
+        }
+    }
+
+    /**
+     * function called when the object is pressed (to be extended)
+     * @param {Pointer} event the event object
+     * @returns {boolean} return false if we need to stop propagating the event
+     */
+    onClick(event) { // eslint-disable-line no-unused-vars
+        return false;
+    }
+
+    /**
+     * function callback for the pointerEnter event
+     * @ignore
+     */
+    enter(event) {
+        this.hover = true;
+        this.dirty = true;
+        return this.onOver(event);
+    }
+
+    /**
+     * function called when the pointer is over the object
+     * @param {Pointer} event the event object
+     */
+    onOver(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
+
+    /**
+     * function callback for the pointerLeave event
+     * @ignore
+     */
+    leave(event) {
+        this.hover = false;
+        this.dirty = true;
+        this.release(event);
+        return this.onOut(event);
+    }
+
+    /**
+     * function called when the pointer is leaving the object area
+     * @param {Pointer} event the event object
+     */
+    onOut(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
+
+    /**
+     * function callback for the pointerup event
+     * @ignore
+     */
+    release(event) {
+        if (this.released === false) {
+            this.released = true;
+            this.dirty = true;
+            timer.clearTimeout(this.holdTimeout);
+            return this.onRelease(event);
+        }
+    }
+
+    /**
+     * function called when the object is pressed and released (to be extended)
+     * @returns {boolean} return false if we need to stop propagating the event
+     */
+    onRelease() {
+        return false;
+    }
+
+    /**
+     * function callback for the tap and hold timer event
+     * @ignore
+     */
+    hold() {
+        timer.clearTimeout(this.holdTimeout);
+        this.dirty = true;
+        if (!this.released) {
+            this.onHold();
+        }
+    }
+
+    /**
+     * function called when the object is pressed and held<br>
+     * to be extended <br>
+     */
+    onHold() {}
+
+    /**
+     * function called when added to the game world or a container
+     * @ignore
+     */
+    onActivateEvent() {
+        // register pointer events
+        registerPointerEvent(
+            "pointerdown",
+            this,
+            this.clicked.bind(this)
+        );
+        registerPointerEvent("pointerup", this, this.release.bind(this));
+        registerPointerEvent(
+            "pointercancel",
+            this,
+            this.release.bind(this)
+        );
+        registerPointerEvent("pointerenter", this, this.enter.bind(this));
+        registerPointerEvent("pointerleave", this, this.leave.bind(this));
+    }
+
+    /**
+     * function called when removed from the game world or a container
+     * @ignore
+     */
+    onDeactivateEvent() {
+        // release pointer events
+        releasePointerEvent("pointerdown", this.hitbox);
+        releasePointerEvent("pointerup", this);
+        releasePointerEvent("pointercancel", this);
+        releasePointerEvent("pointerenter", this);
+        releasePointerEvent("pointerleave", this);
+        timer.clearTimeout(this.holdTimeout);
+    }
+}
+export default UIBaseElement;