melonjs 15.0.0 → 15.1.0

package/src/renderable/sprite.js

@@ -26,7 +26,7 @@ import Color from "../math/color.js";
      * @param {Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] - Anchor point to draw the frame at (defaults to the center of the frame).
      * @example
      * // create a single sprite from a standalone image, with anchor in the center
-     * var sprite = new me.Sprite(0, 0, {
+     * let sprite = new me.Sprite(0, 0, {
      *     image : "PlayerTexture",
      *     framewidth : 64,
      *     frameheight : 64,
@@ -34,12 +34,12 @@ import Color from "../math/color.js";
      * });
      *
      * // create a single sprite from a packed texture
-     * game.texture = new me.TextureAtlas(
+     * mytexture = new me.TextureAtlas(
      *     me.loader.getJSON("texture"),
      *     me.loader.getImage("texture")
      * );
-     * var sprite = new me.Sprite(0, 0, {
-     *     image : game.texture,
+     * let sprite = new me.Sprite(0, 0, {
+     *     image : mytexture,
      *     region : "npc2.png",
      * });
      */
@@ -128,7 +128,7 @@ import Color from "../math/color.js";
             // check for defined region
             if (typeof (settings.region) !== "undefined") {
                 // use a texture atlas
-                var region = this.source.getRegion(settings.region);
+                let region = this.source.getRegion(settings.region);
                 if (region) {
                     // set the sprite region within the texture
                     this.setRegion(region);
@@ -223,7 +223,7 @@ import Color from "../math/color.js";
      * // make the object flicker for 1 second
      * // and then remove it
      * this.flicker(1000, function () {
-     *     me.game.world.removeChild(this);
+     *     world.removeChild(this);
      * });
      */
     flicker(duration, callback) {
@@ -281,7 +281,7 @@ import Color from "../math/color.js";
         };
 
         // # of frames
-        var counter = 0;
+        let counter = 0;
 
         if (typeof (this.textureAtlas) !== "object") {
             return 0;
@@ -297,9 +297,9 @@ import Color from "../math/color.js";
         }
 
         // set each frame configuration (offset, size, etc..)
-        for (var i = 0, len = index.length; i < len; i++) {
-            var frame = index[i];
-            var frameObject;
+        for (let i = 0, len = index.length; i < len; i++) {
+            let frame = index[i];
+            let frameObject;
             if (typeof(frame) === "number" || typeof(frame) === "string") {
                 frameObject = {
                     name: frame,
@@ -309,7 +309,7 @@ import Color from "../math/color.js";
             else {
               frameObject = frame;
             }
-            var frameObjectName = frameObject.name;
+            let frameObjectName = frameObject.name;
             if (typeof(frameObjectName) === "number") {
                 if (typeof (this.textureAtlas[frameObjectName]) !== "undefined") {
                     // TODO: adding the cache source coordinates add undefined entries in webGL mode
@@ -362,13 +362,13 @@ import Color from "../math/color.js";
      * this.setCurrentAnimation("eat", "walk");
      *
      * // set "die" animation, and remove the object when finished
-     * this.setCurrentAnimation("die", (function () {
-     *    me.game.world.removeChild(this);
+     * this.setCurrentAnimation("die", () => {
+     *    world.removeChild(this);
      *    return false; // do not reset to first frame
-     * }).bind(this));
+     * });
      *
      * // set "attack" animation, and pause for a short duration
-     * this.setCurrentAnimation("die", (function () {
+     * this.setCurrentAnimation("die", () => {
      *    this.animationpause = true;
      *
      *    // back to "standing" animation after 1 second
@@ -377,7 +377,7 @@ import Color from "../math/color.js";
      *    }, 1000);
      *
      *    return false; // do not reset to first frame
-     * }).bind(this));
+     * });
      */
     setCurrentAnimation(name, resetAnim, preserve_dt = false) {
         if (typeof this.anim[name] !== "undefined") {
@@ -445,7 +445,7 @@ import Color from "../math/color.js";
      * @returns {Sprite} Reference to this object for method chaining
      * @example
      * // change the sprite to "shadedDark13.png";
-     * mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));
+     * mySprite.setRegion(mytexture.getRegion("shadedDark13.png"));
      */
     setRegion(region) {
         // set the source texture for the given region
@@ -519,13 +519,13 @@ import Color from "../math/color.js";
     update(dt) {
         // Update animation if necessary
         if (!this.animationpause && this.current.length > 1) {
-            var duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
+            let duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
             this.dt += dt;
             while (this.dt >= duration) {
                 this.isDirty = true;
                 this.dt -= duration;
 
-                var nextFrame = (this.current.length > 1 ? this.current.idx + 1 : this.current.idx);
+                let nextFrame = (this.current.length > 1 ? this.current.idx + 1 : this.current.idx);
                 this.setAnimationFrame(nextFrame);
 
                 // Switch animation if we reach the end of the strip and a callback is defined
@@ -588,18 +588,18 @@ import Color from "../math/color.js";
         }
 
         // the frame to draw
-        var frame = this.current;
+        let frame = this.current;
 
         // cache the current position and size
-        var xpos = this.pos.x,
+        let xpos = this.pos.x,
             ypos = this.pos.y;
 
-        var w = frame.width,
+        let w = frame.width,
             h = frame.height;
 
         // frame offset in the texture/atlas
-        var frame_offset = frame.offset;
-        var g_offset = this.offset;
+        let frame_offset = frame.offset;
+        let g_offset = this.offset;
 
 
         // remove image's TexturePacker/ShoeBox rotation

package/src/renderable/trigger.js

@@ -2,7 +2,6 @@ import Renderable from "./renderable.js";
 import collision from "./../physics/collision.js";
 import Body from "./../physics/body.js";
 import level from "./../level/level.js";
-import { game } from "../index.js";
 import pool from "./../system/pooling.js";
 
 /**
@@ -26,7 +25,7 @@ import pool from "./../system/pooling.js";
      * @param {boolean} [settings.flatten] - Flatten all objects into the target container. See {@link level.load}
      * @param {boolean} [settings.setViewportBounds] - Resize the viewport to match the level. See {@link level.load}
      * @example
-     * me.game.world.addChild(new me.Trigger(
+     * world.addChild(new me.Trigger(
      *     x, y, {
      *         shapes: [new me.Rect(0, 0, 100, 100)],
      *         "duration" : 250,
@@ -67,7 +66,7 @@ import pool from "./../system/pooling.js";
         });
 
         // add and configure the physic body
-        var shape = settings.shapes;
+        let shape = settings.shapes;
         if (typeof shape === "undefined") {
             shape = pool.pull("Polygon", 0, 0, [
                 pool.pull("Vector2d", 0,          0),
@@ -87,9 +86,10 @@ import pool from "./../system/pooling.js";
      * @ignore
      */
      getTriggerSettings() {
+        let world = this.ancestor.getRootAncestor();
          // Lookup for the container instance
          if (typeof(this.triggerSettings.container) === "string") {
-             this.triggerSettings.container = game.world.getChildByName(this.triggerSettings.container)[0];
+             this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
          }
          return this.triggerSettings;
      }
@@ -98,8 +98,9 @@ import pool from "./../system/pooling.js";
      * @ignore
      */
     onFadeComplete() {
+        let world = this.ancestor.getRootAncestor();
         level.load(this.gotolevel, this.getTriggerSettings());
-        game.viewport.fadeOut(this.fade, this.duration);
+        world.app.viewport.fadeOut(this.fade, this.duration);
     }
 
     /**
@@ -109,7 +110,8 @@ import pool from "./../system/pooling.js";
      * @protected
      */
     triggerEvent() {
-        var triggerSettings = this.getTriggerSettings();
+        let triggerSettings = this.getTriggerSettings();
+        let world = this.ancestor.getRootAncestor();
 
         if (triggerSettings.event === "level") {
             this.gotolevel = triggerSettings.to;
@@ -118,8 +120,8 @@ import pool from "./../system/pooling.js";
             if (this.fade && this.duration) {
                 if (!this.fading) {
                     this.fading = true;
-                    game.viewport.fadeIn(this.fade, this.duration,
-                            this.onFadeComplete.bind(this));
+                    world.app.viewport.fadeIn(this.fade, this.duration,
+                            () => this.onFadeComplete());
                 }
             } else {
                 level.load(this.gotolevel, triggerSettings);

package/src/renderable/ui/uibaseelement.js

@@ -1,12 +1,13 @@
 import Container from "../container.js";
 import timer from "../../system/timer.js";
+import { on, off, POINTERMOVE } from "../../system/event.js";
 import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
+import pool from "../../system/pooling.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.
+ * This is a basic clickable and draggable container which you can use in your game UI.
+ * Use this for example if you want to display a panel that contains text, images or other UI elements.
  * @augments Container
  */
  export default class UIBaseElement extends Container {
@@ -14,17 +15,25 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      *
      * @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)
+     * @param {number} w - width of the container
+     * @param {number} h - height of the container
      */
     constructor(x, y, w, h) {
         super(x, y, w, h);
         /**
          * object can be clicked or not
          * @type {boolean}
+         * @default true
          */
         this.isClickable = true;
 
+        /**
+         * object can be clicked or not
+         * @type {boolean}
+         * @default false
+         */
+        this.isDraggable = false;
+
         /**
          * Tap and hold threshold timeout in ms
          * @type {number}
@@ -46,13 +55,25 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
          */
         this.hover = false;
 
-        // object has been updated (clicked,etc..)
-        this.holdTimeout = null;
+        /**
+         * false if the pointer is down, or true when the pointer status is up
+         * @type {boolean}
+         * @default false
+         */
         this.released = true;
 
-        // GUI items use screen coordinates
+        /**
+         * UI base elements use screen coordinates by default
+         * (Note: any child elements added to a UIBaseElement should set their floating property to false)
+         * @see Renderable.floating
+         * @type {boolean}
+         * @default true
+         */
         this.floating = true;
 
+        // object has been updated (clicked,etc..)
+        this.holdTimeout = -1;
+
         // enable event detection
         this.isKinematic = false;
     }
@@ -67,16 +88,18 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
             this.dirty = true;
             this.released = false;
             if (this.isHoldable) {
-                if (this.holdTimeout !== null) {
-                    timer.clearTimeout(this.holdTimeout);
-                }
+                timer.clearTimeout(this.holdTimeout);
                 this.holdTimeout = timer.setTimeout(
-                    this.hold.bind(this),
+                    () => this.hold(),
                     this.holdThreshold,
                     false
                 );
                 this.released = false;
             }
+            if (this.isDraggable) {
+                this.grabOffset.set(event.gameX, event.gameY);
+                this.grabOffset.sub(this.pos);
+            }
             return this.onClick(event);
         }
     }
@@ -97,9 +120,37 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     enter(event) {
         this.hover = true;
         this.dirty = true;
+        if (this.isDraggable === true) {
+            on(POINTERMOVE, this.pointerMove, this);
+            // to memorize where we grab the object
+            this.grabOffset = pool.pull("Vector2d", 0, 0);
+        }
         return this.onOver(event);
     }
 
+    /**
+     * pointermove function
+     * @ignore
+     */
+    pointerMove(event) {
+        if (this.hover === true && this.released === false) {
+            // follow the pointer
+            this.pos.set(event.gameX, event.gameY, this.pos.z);
+            this.pos.sub(this.grabOffset);
+            // mark the container for redraw
+            this.isDirty = true;
+            return this.onMove(event);
+        }
+    }
+
+    /**
+     * function called when the pointer is moved over the object
+     * @param {Pointer} event - the event object
+     */
+    onMove(event) { // eslint-disable-line no-unused-vars
+        // to be extended
+    }
+
     /**
      * function called when the pointer is over the object
      * @param {Pointer} event - the event object
@@ -115,6 +166,12 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     leave(event) {
         this.hover = false;
         this.dirty = true;
+        if (this.isDraggable === true) {
+            // unregister on the global pointermove event
+            off(POINTERMOVE, this.pointerMove);
+            pool.push(this.grabOffset);
+            this.grabOffset = undefined;
+        }
         this.release(event);
         return this.onOut(event);
     }
@@ -136,6 +193,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
             this.released = true;
             this.dirty = true;
             timer.clearTimeout(this.holdTimeout);
+            this.holdTimeout = -1;
             return this.onRelease(event);
         }
     }
@@ -154,6 +212,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     hold() {
         timer.clearTimeout(this.holdTimeout);
+        this.holdTimeout = -1;
         this.dirty = true;
         if (!this.released) {
             this.onHold();
@@ -172,19 +231,14 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     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));
+        registerPointerEvent("pointerdown", this, (e) => this.clicked(e));
+        registerPointerEvent("pointerup", this, (e) => this.release(e));
+        registerPointerEvent("pointercancel", this, (e) => this.release(e));
+        registerPointerEvent("pointerenter", this, (e) => this.enter(e));
+        registerPointerEvent("pointerleave", this, (e) => this.leave(e));
+
+        // call the parent function
+        super.onActivateEvent();
     }
 
     /**
@@ -193,11 +247,27 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     onDeactivateEvent() {
         // release pointer events
-        releasePointerEvent("pointerdown", this.hitbox);
+        releasePointerEvent("pointerdown", this);
         releasePointerEvent("pointerup", this);
         releasePointerEvent("pointercancel", this);
         releasePointerEvent("pointerenter", this);
         releasePointerEvent("pointerleave", this);
         timer.clearTimeout(this.holdTimeout);
+        this.holdTimeout = -1;
+
+        // unregister on the global pointermove event
+        // note: this is just a precaution, in case
+        // the object is being remove from his parent
+        // container before the leave function is called
+        if (this.isDraggable === true) {
+            off(POINTERMOVE, this.pointerMove);
+            if (typeof this.grabOffset !== "undefined") {
+                pool.push(this.grabOffset);
+                this.grabOffset = undefined;
+            }
+        }
+
+        // call the parent function
+        super.onDeactivateEvent();
     }
 }

package/src/renderable/ui/uispriteelement.js

@@ -4,31 +4,29 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
 
 /**
  * @classdesc
- *  This is a basic sprite based button which you can use in your Game UI.
+ * This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
  export default class UISpriteElement extends Sprite {
     /**
-     * @param {number} x - the x coordinate of the GUI Object
-     * @param {number} y - the y coordinate of the GUI Object
+     * @param {number} x - the x coordinate of the UISpriteElement Object
+     * @param {number} y - the y coordinate of the UISpriteElement Object
      * @param {object} settings - See {@link Sprite}
      * @example
      * // create a basic GUI Object
      * class myButton extends UISpriteElement {
      *    constructor(x, y) {
-     *       var settings = {}
-     *       settings.image = "button";
-     *       settings.framewidth = 100;
-     *       settings.frameheight = 50;
-     *       // super constructor
-     *       super(x, y, settings);
-     *       // define the object z order
-     *       this.pos.z = 4;
+     *       // call the UISpriteElement parent constructor
+     *       super(x, y, {
+     *          image: "button",
+     *          framewidth: 100,
+     *          frameheight: 50
+     *       });
      *    }
      *
      *    // output something in the console
      *    // when the object is clicked
-     *    onClick:function (event) {
+     *    onClick(event) {
      *       console.log("clicked!");
      *       // don't propagate the event
      *       return false;
@@ -36,7 +34,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      * });
      *
      * // add the object at pos (10,10)
-     * me.game.world.addChild(new myButton(10,10));
+     * world.addChild(new myButton(10,10));
      */
     constructor(x, y, settings) {
 
@@ -72,7 +70,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
         this.hover = false;
 
         // object has been updated (clicked,etc..)
-        this.holdTimeout = null;
+        this.holdTimeout = -1;
         this.released = true;
 
         // GUI items use screen coordinates
@@ -92,10 +90,8 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
             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);
+                timer.clearTimeout(this.holdTimeout);
+                this.holdTimeout = timer.setTimeout(() => this.hold(), this.holdThreshold, false);
                 this.released = false;
             }
             return this.onClick(event);
@@ -157,6 +153,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
             this.released = true;
             this.dirty = true;
             timer.clearTimeout(this.holdTimeout);
+            this.holdTimeout = -1;
             return this.onRelease(event);
         }
     }
@@ -175,6 +172,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     hold() {
         timer.clearTimeout(this.holdTimeout);
+        this.holdTimeout = -1;
         this.dirty = true;
         if (!this.released) {
             this.onHold();
@@ -185,7 +183,8 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      * function called when the object is pressed and held<br>
      * to be extended <br>
      */
-    onHold() {}
+    onHold() {
+    }
 
     /**
      * function called when added to the game world or a container
@@ -193,11 +192,11 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     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));
+        registerPointerEvent("pointerdown", this, (e) => this.clicked(e));
+        registerPointerEvent("pointerup", this, (e) => this.release(e));
+        registerPointerEvent("pointercancel", this, (e) => this.release(e));
+        registerPointerEvent("pointerenter", this, (e) => this.enter(e));
+        registerPointerEvent("pointerleave", this, (e) => this.leave(e));
     }
 
     /**
@@ -212,6 +211,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
         releasePointerEvent("pointerenter", this);
         releasePointerEvent("pointerleave", this);
         timer.clearTimeout(this.holdTimeout);
+        this.holdTimeout = -1;
     }
 }