melonjs 15.2.1 → 15.4.0

package/src/renderable/light2d.js

@@ -49,8 +49,8 @@ function createGradient(light) {
  * (multiple lights are not supported, alpha component of the ambient light is ignored)
  * @see stage.lights
  */
- export default class Light2d extends Renderable {
-   /**
+export default class Light2d extends Renderable {
+    /**
     * @param {number} x - The horizontal position of the light.
     * @param {number} y - The vertical position of the light.
     * @param {number} radiusX - The horizontal radius of the light.

package/src/renderable/nineslicesprite.js

@@ -8,7 +8,7 @@ import Sprite from "./sprite.js";
  * @see https://en.wikipedia.org/wiki/9-slice_scaling
  * @augments Sprite
  */
- export default class NineSliceSprite extends Sprite {
+export default class NineSliceSprite extends Sprite {
     /**
      * @param {number} x - the x coordinates of the sprite object
      * @param {number} y - the y coordinates of the sprite object

package/src/renderable/renderable.js

@@ -4,14 +4,13 @@ import Rect from "./../geometries/rectangle.js";
 import pool from "./../system/pooling.js";
 import { releaseAllPointerEvents } from "./../input/input.js";
 import { clamp } from "./../math/math.js";
-import Color from "./../math/color.js";
 
 /**
  * @classdesc
  * A base class for renderable objects.
  * @augments Rect
  */
- export default class Renderable extends Rect {
+export default class Renderable extends Rect {
     /**
      * @param {number} x - position of the renderable object (accessible through inherited pos.x property)
      * @param {number} y - position of the renderable object (accessible through inherited pos.y property)
@@ -97,7 +96,7 @@ import Color from "./../math/color.js";
          */
         this.body = undefined;
 
-       /**
+        /**
         * (G)ame (U)nique (Id)entifier" <br>
         * a GUID will be allocated for any renderable object added <br>
         * to an object container (including the `me.game.world` container)
@@ -258,6 +257,9 @@ import Color from "./../math/color.js";
         // viewport flag
         this._inViewport = false;
 
+        // renderable cache tint value used by the getter/setter
+        this._tint = pool.pull("Color", 255, 255, 255, 1.0);
+
         // ensure it's fully opaque by default
         this.setOpacity(1.0);
     }
@@ -282,21 +284,11 @@ import Color from "./../math/color.js";
      * this.tint.setColor(255, 255, 255);
      */
     get tint() {
-        if (typeof this._tint === "undefined") {
-            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
-        }
         return this._tint;
     }
     set tint(value) {
-        if (typeof this._tint === "undefined") {
-            this._tint = pool.pull("Color", 255, 255, 255, 1.0);
-        }
-        if (value instanceof Color) {
-            this._tint.copy(value);
-        } else {
-            // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-            this._tint.parseCSS(value);
-        }
+        this._tint.copy(value);
+        this.isDirty = true;
     }
 
     /**
@@ -577,7 +569,7 @@ import Color from "./../math/color.js";
             }
 
             if (absolute === true) {
-                var absPos = this.getAbsolutePosition();
+                let absPos = this.getAbsolutePosition();
                 bounds.centerOn(absPos.x + bounds.x + bounds.width / 2,  absPos.y + bounds.y + bounds.height / 2);
             }
             return bounds;
@@ -593,25 +585,25 @@ import Color from "./../math/color.js";
      * update the renderable's bounding rect (private)
      * @ignore
      */
-     updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
+    updateBoundsPos(newX = this.pos.x, newY = this.pos.y) {
         this.getBounds().translate(newX - this.pos.x, newY - this.pos.y);
-     }
+    }
 
-     /**
+    /**
       * return the renderable absolute position in the game world
       * @returns {Vector2d}
       */
-      getAbsolutePosition() {
-          if (typeof this._absPos === "undefined") {
-              this._absPos = pool.pull("Vector2d");
-          }
-          // XXX Cache me or something
-          this._absPos.set(this.pos.x, this.pos.y);
-          if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
-              this._absPos.add(this.ancestor.getAbsolutePosition());
-          }
-          return this._absPos;
-      }
+    getAbsolutePosition() {
+        if (typeof this._absPos === "undefined") {
+            this._absPos = pool.pull("Vector2d");
+        }
+        // XXX Cache me or something
+        this._absPos.set(this.pos.x, this.pos.y);
+        if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
+            this._absPos.add(this.ancestor.getAbsolutePosition());
+        }
+        return this._absPos;
+    }
 
     /**
      * called when the anchor point value is changed
@@ -619,14 +611,14 @@ import Color from "./../math/color.js";
      * @param {number} x - the new X value to be set for the anchor
      * @param {number} y - the new Y value to be set for the anchor
      */
-     onAnchorUpdate(x, y) {
-         // since the callback is called before setting the new value
-         // manually update the anchor point (required for updateBoundsPos)
-         this.anchorPoint.setMuted(x, y);
-         // then call updateBounds
-         this.updateBounds();
-         this.isDirty = true;
-     }
+    onAnchorUpdate(x, y) {
+        // since the callback is called before setting the new value
+        // manually update the anchor point (required for updateBoundsPos)
+        this.anchorPoint.setMuted(x, y);
+        // then call updateBounds
+        this.updateBounds();
+        this.isDirty = true;
+    }
 
     /**
      * Prepare the rendering context before drawing (automatically called by melonJS).

package/src/renderable/sprite.js

@@ -10,7 +10,7 @@ import Color from "../math/color.js";
  * An object to display a fixed or animated sprite on screen.
  * @augments Renderable
  */
- export default class Sprite extends Renderable {
+export default class Sprite extends Renderable {
     /**
      * @param {number} x - the x coordinates of the sprite object
      * @param {number} y - the y coordinates of the sprite object
@@ -307,7 +307,7 @@ import Color from "../math/color.js";
                 };
             }
             else {
-              frameObject = frame;
+                frameObject = frame;
             }
             let frameObjectName = frameObject.name;
             if (typeof(frameObjectName) === "number") {

package/src/{text → renderable/text}/bitmaptext.js

@@ -1,7 +1,7 @@
-import Color from "./../math/color.js";
-import pool from "./../system/pooling.js";
-import { getImage, getBinary } from "./../loader/loader.js";
-import Renderable from "./../renderable/renderable.js";
+import Color from "../../math/color.js";
+import pool from "../../system/pooling.js";
+import { getImage, getBinary } from "../../loader/loader.js";
+import Renderable from "../renderable.js";
 import TextMetrics from "./textmetrics.js";
 
 /**
@@ -9,7 +9,7 @@ import TextMetrics from "./textmetrics.js";
  * a bitmap font object
  * @augments Renderable
  */
- export default class BitmapText extends Renderable {
+export default class BitmapText extends Renderable {
     /**
      * @param {number} x - position of the text object
      * @param {number} y - position of the text object
@@ -210,8 +210,8 @@ import TextMetrics from "./textmetrics.js";
                     break;
             }
 
-             // adjust y pos based on alignment value
-             switch (this.textBaseline) {
+            // adjust y pos based on alignment value
+            switch (this.textBaseline) {
                 case "middle":
                     ay = this.metrics.height * 0.5;
                     break;
@@ -233,7 +233,7 @@ import TextMetrics from "./textmetrics.js";
 
         if (absolute === true) {
             if (typeof this.ancestor !== "undefined" && typeof this.ancestor.getAbsolutePosition === "function" && this.floating !== true) {
-                 bounds.translate(this.ancestor.getAbsolutePosition());
+                bounds.translate(this.ancestor.getAbsolutePosition());
             }
         }
 

package/src/{text → renderable/text}/bitmaptextdata.js

@@ -56,9 +56,9 @@ function createSpaceGlyph(glyphs) {
  * Class for storing relevant data from the font file.
  * @ignore
  */
- export default class BitmapTextData {
+export default class BitmapTextData {
 
-   /**
+    /**
     * @param {string} data - The bitmap font data pulled from the resource loader using me.loader.getBinary()
     */
     constructor(data) {
@@ -116,14 +116,11 @@ function createSpaceGlyph(glyphs) {
         this.lineHeight = parseFloat(getValueFromPair(lines[1], /lineHeight\=\d+/g));
 
         let baseLine = parseFloat(getValueFromPair(lines[1], /base\=\d+/g));
-
         let padY = this.padTop + this.padBottom;
-
         let glyph = null;
 
-        let i;
 
-        for (i = 4; i < lines.length; i++) {
+        for (let i = 4; i < lines.length; i++) {
             let line = lines[i];
             let characterValues = line.split(/=|\s+/);
             if (!line || /^kernings/.test(line)) {
@@ -164,7 +161,7 @@ function createSpaceGlyph(glyphs) {
         createSpaceGlyph(this.glyphs);
 
         let capGlyph = null;
-        for (i = 0; i < capChars.length; i++) {
+        for (let i = 0; i < capChars.length; i++) {
             let capChar = capChars[i];
             capGlyph = this.glyphs[capChar.charCodeAt(0)];
             if (capGlyph) {

package/src/{text → renderable/text}/glyph.js

@@ -7,7 +7,7 @@ const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
  * a glyph representing a single character in a font
  * @ignore
  */
- export default class Glyph {
+export default class Glyph {
     /**
      * @ignore
      */

package/src/{text → renderable/text}/text.js

@@ -1,8 +1,8 @@
-import Color from "./../math/color.js";
-import { renderer as globalRenderer } from "./../video/video.js";
-import pool from "./../system/pooling.js";
-import Renderable from "./../renderable/renderable.js";
-import { nextPowerOfTwo } from "./../math/math.js";
+import Color from "../../math/color.js";
+import { renderer as globalRenderer } from "../../video/video.js";
+import pool from "../../system/pooling.js";
+import Renderable from "../renderable.js";
+import { nextPowerOfTwo } from "../../math/math.js";
 import setContextStyle from "./textstyle.js";
 import TextMetrics from "./textmetrics.js";
 
@@ -14,7 +14,6 @@ import TextMetrics from "./textmetrics.js";
 * -> first char " " 32d (0x20);
 */
 
-
 const runits = ["ex", "em", "pt", "px"];
 const toPX = [12, 24, 0.75, 1];
 
@@ -23,7 +22,7 @@ const toPX = [12, 24, 0.75, 1];
  * a generic system font object.
  * @augments Renderable
  */
- export default class Text extends Renderable {
+export default class Text extends Renderable {
     /**
      * @param {number} x - position of the text object
      * @param {number} y - position of the text object
@@ -76,16 +75,16 @@ const toPX = [12, 24, 0.75, 1];
          * @name strokeStyle
          * @default black
          */
-         if (typeof settings.strokeStyle !== "undefined") {
-             if (settings.strokeStyle instanceof Color) {
-                 this.strokeStyle = settings.strokeStyle;
-             } else {
-                 // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
-                 this.strokeStyle = pool.pull("Color").parseCSS(settings.strokeStyle);
-             }
-         } else {
-             this.strokeStyle = pool.pull("Color", 0, 0, 0);
-         }
+        if (typeof settings.strokeStyle !== "undefined") {
+            if (settings.strokeStyle instanceof Color) {
+                this.strokeStyle = settings.strokeStyle;
+            } else {
+                // string (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
+                this.strokeStyle = pool.pull("Color").parseCSS(settings.strokeStyle);
+            }
+        } else {
+            this.strokeStyle = pool.pull("Color", 0, 0, 0);
+        }
 
         /**
          * sets the current line width, in pixels, when drawing stroke

package/src/{text → renderable/text}/textmetrics.js

@@ -1,4 +1,4 @@
-import Bounds from "./../physics/bounds.js";
+import Bounds from "../../physics/bounds.js";
 import Text from "./text.js";
 import setContextStyle from "./textstyle.js";
 
@@ -7,7 +7,7 @@ import setContextStyle from "./textstyle.js";
  * a Text Metrics object that contains helper for text manipulation
  * @augments Bounds
  */
- export default class TextMetrics extends Bounds {
+export default class TextMetrics extends Bounds {
 
     /**
      * @param {Text|BitmapText} ancestor - the parent object that contains this TextMetrics object

package/src/renderable/trigger.js

@@ -9,7 +9,7 @@ import pool from "./../system/pooling.js";
  * trigger an event when colliding with another object
  * @augments Renderable
  */
- export default class Trigger extends Renderable {
+export default class Trigger extends Renderable {
     /**
      * @param {number} x - the x coordinates of the trigger area
      * @param {number} y - the y coordinates of the trigger area
@@ -85,14 +85,14 @@ import pool from "./../system/pooling.js";
     /**
      * @ignore
      */
-     getTriggerSettings() {
+    getTriggerSettings() {
         let world = this.ancestor.getRootAncestor();
-         // Lookup for the container instance
-         if (typeof(this.triggerSettings.container) === "string") {
-             this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
-         }
-         return this.triggerSettings;
-     }
+        // Lookup for the container instance
+        if (typeof(this.triggerSettings.container) === "string") {
+            this.triggerSettings.container = world.getChildByName(this.triggerSettings.container)[0];
+        }
+        return this.triggerSettings;
+    }
 
     /**
      * @ignore
@@ -121,7 +121,7 @@ import pool from "./../system/pooling.js";
                 if (!this.fading) {
                     this.fading = true;
                     world.app.viewport.fadeIn(this.fade, this.duration,
-                            () => this.onFadeComplete());
+                        () => this.onFadeComplete());
                 }
             } else {
                 level.load(this.gotolevel, triggerSettings);

package/src/renderable/ui/uibaseelement.js

@@ -10,7 +10,7 @@ import pool from "../../system/pooling.js";
  * 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 {
+export default class UIBaseElement extends Container {
     /**
      *
      * @param {number} x - The x position of the container
@@ -88,7 +88,7 @@ import pool from "../../system/pooling.js";
     clicked(event) {
         // Check if left mouse button is pressed
         if (event.button === 0 && this.isClickable) {
-            this.dirty = true;
+            this.isDirty = true;
             this.released = false;
             if (this.isHoldable) {
                 timer.clearTimeout(this.holdTimeout);
@@ -122,7 +122,7 @@ import pool from "../../system/pooling.js";
      */
     enter(event) {
         this.hover = true;
-        this.dirty = true;
+        this.isDirty = true;
         if (this.isDraggable === true) {
             on(POINTERMOVE, this.pointerMove, this);
             // to memorize where we grab the object
@@ -168,7 +168,7 @@ import pool from "../../system/pooling.js";
      */
     leave(event) {
         this.hover = false;
-        this.dirty = true;
+        this.isDirty = true;
         if (this.isDraggable === true) {
             // unregister on the global pointermove event
             off(POINTERMOVE, this.pointerMove);
@@ -194,7 +194,7 @@ import pool from "../../system/pooling.js";
     release(event) {
         if (this.released === false) {
             this.released = true;
-            this.dirty = true;
+            this.isDirty = true;
             timer.clearTimeout(this.holdTimeout);
             this.holdTimeout = -1;
             return this.onRelease(event);
@@ -216,7 +216,7 @@ import pool from "../../system/pooling.js";
     hold() {
         timer.clearTimeout(this.holdTimeout);
         this.holdTimeout = -1;
-        this.dirty = true;
+        this.isDirty = true;
         if (!this.released) {
             this.onHold();
         }

package/src/renderable/ui/uispriteelement.js

@@ -7,7 +7,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
  * This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
- export default class UISpriteElement extends Sprite {
+export default class UISpriteElement extends Sprite {
     /**
      * @param {number} x - the x coordinate of the UISpriteElement Object
      * @param {number} y - the y coordinate of the UISpriteElement Object
@@ -93,7 +93,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     clicked(event) {
         // Check if left mouse button is pressed
         if (event.button === 0 && this.isClickable) {
-            this.dirty = true;
+            this.isDirty = true;
             this.released = false;
             if (this.isHoldable) {
                 timer.clearTimeout(this.holdTimeout);
@@ -119,7 +119,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     enter(event) {
         this.hover = true;
-        this.dirty = true;
+        this.isDirty = true;
         return this.onOver(event);
     }
 
@@ -137,7 +137,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
      */
     leave(event) {
         this.hover = false;
-        this.dirty = true;
+        this.isDirty = true;
         this.release(event);
         return this.onOut(event);
     }
@@ -157,7 +157,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     release(event) {
         if (this.released === false) {
             this.released = true;
-            this.dirty = true;
+            this.isDirty = true;
             timer.clearTimeout(this.holdTimeout);
             this.holdTimeout = -1;
             return this.onRelease(event);
@@ -179,7 +179,7 @@ import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js
     hold() {
         timer.clearTimeout(this.holdTimeout);
         this.holdTimeout = -1;
-        this.dirty = true;
+        this.isDirty = true;
         if (!this.released) {
             this.onHold();
         }

package/src/renderable/ui/uitextbutton.js

@@ -1,4 +1,4 @@
-import BitmapText from "../../text/bitmaptext.js";
+import BitmapText from "../text/bitmaptext.js";
 import RoundRect from "../../geometries/roundrect.js";
 import UIBaseElement from "./uibaseelement.js";
 
@@ -8,7 +8,7 @@ import UIBaseElement from "./uibaseelement.js";
  * This is a basic base text button which you can use in your Game UI.
  * @augments UIBaseElement
  */
- export default class UITextButton extends UIBaseElement {
+export default class UITextButton extends UIBaseElement {
     /**
      * A Bitmap Text Button with an outlined background border, filled with background color.
      * It uses a RoundRect as background and changes the background color on hovering over.

package/src/state/stage.js

@@ -1,5 +1,5 @@
 import { renderer } from "./../video/video.js";
-import { game } from "../index.js";
+import * as event from "./../system/event.js";
 import Camera2d from "./../camera/camera2d.js";
 import Color from "./../math/color.js";
 
@@ -18,7 +18,7 @@ let default_settings = {
  * through the state manager must inherit from this base class.
  * @see state
  */
- export default class Stage {
+export default class Stage {
 
     /**
      * @param {object} [settings] - The stage` parameters
@@ -87,7 +87,6 @@ let default_settings = {
      * @ignore
      */
     reset() {
-
         // add all defined cameras
         this.settings.cameras.forEach((camera) => {
             this.cameras.set(camera.name, camera);
@@ -105,7 +104,7 @@ let default_settings = {
         }
 
         // reset the game
-        game.reset();
+        event.emit(event.STAGE_RESET, this);
 
         // call the onReset Function
         this.onResetEvent.apply(this, arguments);
@@ -120,8 +119,7 @@ let default_settings = {
      * @returns {boolean}
      */
     update(dt) {
-        // update all objects (and pass the elapsed time since last frame)
-        let isDirty = game.world.update(dt);
+        let isDirty = false;
 
         // update the camera/viewport
         // iterate through all cameras
@@ -146,13 +144,15 @@ let default_settings = {
      * @name draw
      * @memberof Stage
      * @ignore
-     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
+     * @param {Renderer} renderer - the renderer object to draw with
+     * @param {World} world - the world object to draw
      */
-    draw(renderer) {
+    draw(renderer, world) {
+
         // iterate through all cameras
         this.cameras.forEach((camera) => {
             // render the root container
-            camera.draw(renderer, game.world);
+            camera.draw(renderer, world);
 
             // render the ambient light
             if (this.ambientLight.alpha !== 0) {
@@ -172,9 +172,9 @@ let default_settings = {
 
             // render all lights
             this.lights.forEach((light) => {
-                light.preDraw(renderer, game.world);
-                light.draw(renderer, game.world);
-                light.postDraw(renderer, game.world);
+                light.preDraw(renderer, world);
+                light.draw(renderer, world);
+                light.postDraw(renderer, world);
             });
         });
     }
@@ -209,7 +209,6 @@ let default_settings = {
         if (typeof this.settings.onResetEvent === "function") {
             this.settings.onResetEvent.apply(this, arguments);
         }
-
     }
 
     /**