melonjs 10.0.2 → 10.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.0.2",
+  "version": "10.2.1",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -64,22 +64,22 @@
     "@rollup/plugin-replace": "^3.0.0",
     "cheerio": "^1.0.0-rc.10",
     "del-cli": "^4.0.1",
-    "eslint": "^8.1.0",
+    "eslint": "^8.3.0",
     "ghpages": "0.0.10",
     "jasmine-core": "^3.10.1",
     "jsdoc": "^3.6.7",
-    "karma": "^6.3.6",
+    "karma": "^6.3.9",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-html-detailed-reporter": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-nyan-reporter": "0.2.5",
     "qs": "^6.10.1",
-    "rollup": "^2.58.3",
+    "rollup": "^2.60.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.8.0",
-    "typescript": "^4.4.4"
+    "terser": "^5.10.0",
+    "typescript": "^4.5.2"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",

package/src/camera/camera2d.js

@@ -221,10 +221,10 @@ class Camera2d extends Renderable {
      * @param {Number} [x=0]
      * @param {Number} [y=0]
      */
-    reset(x, y) {
+    reset(x = 0, y = 0) {
         // reset the initial camera position to 0,0
-        this.pos.x = x || 0;
-        this.pos.y = y || 0;
+        this.pos.x = x;
+        this.pos.y = y;
 
         // reset the target
         this.unfollow();

package/src/game.js

@@ -130,7 +130,7 @@ export function reset () {
  * Update the renderer framerate using the system config variables.
  * @function me.game.updateFrameRate
  * @see me.timer.maxfps
- * @see me.game.world.fps
+ * @see me.World.fps
  */
 export function updateFrameRate() {
     // reset the frame counter

package/src/index.js

@@ -48,6 +48,7 @@ import BitmapTextData from "./text/bitmaptextdata.js";
 import ColorLayer from "./renderable/colorlayer.js";
 import ImageLayer from "./renderable/imagelayer.js";
 import Sprite from "./renderable/sprite.js";
+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";
@@ -145,6 +146,7 @@ export {
     ColorLayer,
     ImageLayer,
     Sprite,
+    NineSliceSprite,
     GUI_Object,
     Collectable,
     Trigger,
@@ -220,6 +222,7 @@ export function boot() {
     pool.register("me.Color", Color, true);
     pool.register("me.Particle", Particle, true);
     pool.register("me.Sprite", Sprite);
+    pool.register("me.NineSliceSprite", NineSliceSprite);
     pool.register("me.Renderable", Renderable);
     pool.register("me.Text", Text, true);
     pool.register("me.BitmapText", BitmapText);
@@ -246,6 +249,7 @@ export function boot() {
     pool.register("Color", Color, true);
     pool.register("Particle", Particle, true);
     pool.register("Sprite", Sprite);
+    pool.register("NineSliceSprite", NineSliceSprite);
     pool.register("Renderable", Renderable);
     pool.register("Text", Text, true);
     pool.register("BitmapText", BitmapText);

package/src/input/pointer.js

@@ -1,25 +1,25 @@
 import Vector2d from "./../math/vector2.js";
 import device from "./../system/device.js";
-import Rect from "./../shapes/rectangle.js";
+import Bounds from "./../physics/bounds.js";
 import { viewport } from "./../game.js";
 import { globalToLocal } from "./input.js";
 
 
 /**
- * cache value for the offset of the canvas position within the page
+ * a temporary vector object
  * @ignore
  */
-var viewportOffset = new Vector2d();
+var tmpVec = new Vector2d();
 
 /**
  * @classdesc
  * a pointer object, representing a single finger on a touch enabled device.
  * @class
- * @extends me.Rect
+ * @extends me.Bounds
  * @memberOf me
  * @constructor
  */
-class Pointer extends Rect {
+class Pointer extends Bounds {
 
     /**
      * @ignore
@@ -27,7 +27,10 @@ class Pointer extends Rect {
     constructor(x = 0, y = 0, w = 1, h = 1) {
 
         // parent constructor
-        super(x, y, w, h);
+        super();
+
+        // initial coordinates/size
+        this.setMinMax(x, y, x + w, y + h);
 
         /**
          * constant for left button
@@ -280,9 +283,6 @@ class Pointer extends Rect {
      * @param {Number} [pointedId=1] the Pointer, Touch or Mouse event Id (1)
      */
     setEvent(event, pageX = 0, pageY = 0, clientX = 0, clientY = 0, pointerId = 1) {
-        var width = 1;
-        var height = 1;
-
         // the original event object
         this.event = event;
 
@@ -292,7 +292,9 @@ class Pointer extends Rect {
         this.clientY = clientY;
 
         // translate to local coordinates
-        globalToLocal(this.pageX, this.pageY, this.pos);
+        globalToLocal(this.pageX, this.pageY, tmpVec);
+        this.gameScreenX = this.x = tmpVec.x;
+        this.gameScreenY = this.y = tmpVec.y;
 
         // true if not originally a pointer event
         this.isNormalized = !device.PointerEvent || (device.PointerEvent && !(event instanceof window.PointerEvent));
@@ -318,30 +320,29 @@ class Pointer extends Rect {
 
         this.type = event.type;
 
-        this.gameScreenX = this.pos.x;
-        this.gameScreenY = this.pos.y;
+
 
         // get the current screen to game world offset
         if (typeof viewport !== "undefined") {
-            viewport.localToWorld(this.gameScreenX, this.gameScreenY, viewportOffset);
+            viewport.localToWorld(this.gameScreenX, this.gameScreenY, tmpVec);
         }
 
         /* Initialize the two coordinate space properties. */
-        this.gameWorldX = viewportOffset.x;
-        this.gameWorldY = viewportOffset.y;
+        this.gameWorldX = tmpVec.x;
+        this.gameWorldY = tmpVec.y;
 
         // get the pointer size
         if (this.isNormalized === false) {
             // native PointerEvent
-            width = event.width || 1;
-            height = event.height || 1;
+            this.width = event.width || 1;
+            this.height = event.height || 1;
         } else if (typeof(event.radiusX) === "number") {
             // TouchEvent
-            width = (event.radiusX * 2) || 1;
-            height = (event.radiusY * 2) || 1;
+            this.width = (event.radiusX * 2) || 1;
+            this.height = (event.radiusY * 2) || 1;
+        } else {
+            this.width = this.height = 1;
         }
-        // resize the pointer object accordingly
-        this.resize(width, height);
     }
 };
 

package/src/input/pointerevent.js

@@ -121,8 +121,6 @@ function enablePointerEvent() {
         // the current pointer area
         currentPointer = new Rect(0, 0, 1, 1);
 
-        pointer = new Pointer(0, 0, 1, 1);
-
         // instantiate a pool of pointer catched
         for (var v = 0; v < device.maxTouchPoints; v++) {
             T_POINTERS.push(new Pointer());
@@ -412,15 +410,15 @@ function dispatchEvent(normalizedEvents) {
  * @ignore
  */
 function normalizeEvent(originalEvent) {
-    var pointer;
+    var _pointer;
 
     // PointerEvent or standard Mouse event
     if (device.TouchEvent && originalEvent.changedTouches) {
         // iOS/Android Touch event
         for (var i = 0, l = originalEvent.changedTouches.length; i < l; i++) {
             var touchEvent = originalEvent.changedTouches[i];
-            pointer = T_POINTERS.pop();
-            pointer.setEvent(
+            _pointer = T_POINTERS.pop();
+            _pointer.setEvent(
                 originalEvent,
                 touchEvent.pageX,
                 touchEvent.pageY,
@@ -428,12 +426,12 @@ function normalizeEvent(originalEvent) {
                 touchEvent.clientY,
                 touchEvent.identifier
             );
-            normalizedEvents.push(pointer);
+            normalizedEvents.push(_pointer);
         }
     } else {
         // Mouse or PointerEvent
-        pointer = T_POINTERS.pop();
-        pointer.setEvent(
+        _pointer = T_POINTERS.pop();
+        _pointer.setEvent(
             originalEvent,
             originalEvent.pageX,
             originalEvent.pageY,
@@ -441,7 +439,7 @@ function normalizeEvent(originalEvent) {
             originalEvent.clientY,
             originalEvent.pointerId
         );
-        normalizedEvents.push(pointer);
+        normalizedEvents.push(_pointer);
     }
 
     // if event.isPrimary is defined and false, return
@@ -513,7 +511,7 @@ function onPointerEvent(e) {
  * @name pointer
  * @memberOf me.input
  */
-export var pointer;
+export var pointer = new Pointer(0, 0, 1, 1);
 
 /**
  * time interval for event throttling in milliseconds<br>
@@ -535,8 +533,8 @@ export var throttlingInterval;
  * @function
  * @param {Number} x the global x coordinate to be translated.
  * @param {Number} y the global y coordinate to be translated.
- * @param {Number} [v] an optional vector object where to set the
- * @return {me.Vector2d} A vector object with the corresponding translated coordinates.
+ * @param {me.Vector2d} [v] an optional vector object where to set the translated coordinates
+ * @return {me.Vector2d} A vector object with the corresponding translated coordinates
  * @example
  * onMouseEvent : function (pointer) {
  *    // convert the given into local (viewport) relative coordinates

package/src/level/tiled/TMXLayer.js

@@ -297,7 +297,7 @@ class TMXLayer extends Renderable {
      * // get the TMX Map Layer called "Front layer"
      * var layer = me.game.world.getChildByName("Front Layer")[0];
      * // get the tile object corresponding to the latest pointer position
-     * var tile = layer.getTile(me.input.pointer.pos.x, me.input.pointer.pos.y);
+     * var tile = layer.getTile(me.input.pointer.x, me.input.pointer.y);
      */
     getTile(x, y) {
         var tile = null;

package/src/loader/loader.js

@@ -478,7 +478,7 @@ var loader = {
      * // set all resources to be loaded
      * me.loader.preload(game.resources, this.loaded.bind(this));
      */
-    preload(res, onload, switchToLoadState) {
+    preload(res, onload, switchToLoadState = true) {
         // parse the resources
         for (var i = 0; i < res.length; i++) {
             resourceCount += this.load(
@@ -492,7 +492,7 @@ var loader = {
             this.onload = onload;
         }
 
-        if (switchToLoadState !== false) {
+        if (switchToLoadState === true) {
             // swith to the loading screen
             state.change(state.LOADING);
         }

package/src/loader/loadingscreen.js

@@ -114,70 +114,6 @@ class IconLogo extends Renderable {
     }
 };
 
-// the melonJS Text Logo
-class TextLogo extends Renderable {
-    /**
-     * @ignore
-     */
-    constructor(w, h) {
-        super(0, 0, w, h);
-
-        this.textWidth = 0;
-
-        // offscreen cache canvas
-        this.fontCanvas = createCanvas(256, 64, true);
-        this.drawFont(renderer.getContext2d(this.fontCanvas));
-
-        this.anchorPoint.set(0, 0.5);
-    }
-
-    drawFont(context) {
-        var logo1 = pool.pull("Text", 0, 0, {
-            font: "century gothic",
-            size: 32,
-            fillStyle: "white",
-            textAlign: "middle",
-            textBaseline : "top",
-            text: "melon"
-        });
-        var logo2 = pool.pull("Text", 0, 0, {
-            font: "century gothic",
-            size: 32,
-            fillStyle: "#55aa00",
-            textAlign: "middle",
-            textBaseline : "top",
-            bold: true,
-            text: "JS"
-        });
-
-
-        // compute both logo respective size
-        var logo1_width = logo1.measureText(context).width;
-        var logo2_width = logo2.measureText(context).width;
-
-        this.textWidth = logo1_width + logo2_width;
-
-        // calculate the final rendering position
-        this.pos.x = Math.round(this.width - this.textWidth / 2);
-        this.pos.y = Math.round(this.height + 16);
-
-        // use the private _drawFont method to directly draw on the canvas context
-        logo1._drawFont(context, ["melon"], 0, 0);
-        logo2._drawFont(context, ["JS"], logo1_width, 0);
-
-        // put them back into the object pool
-        pool.push(logo1);
-        pool.push(logo2);
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer) {
-        renderer.drawImage(this.fontCanvas, Math.round((renderer.getWidth() - this.textWidth) / 2), this.pos.y);
-    }
-
-};
 
 /**
  * a default loading screen
@@ -185,12 +121,12 @@ class TextLogo extends Renderable {
  * @ignore
  * @constructor
  */
-var defaultLoadingScreen = new Stage({
+class DefaultLoadingScreen extends Stage {
     /**
      * call when the loader is resetted
      * @ignore
      */
-    onResetEvent : function () {
+    onResetEvent() {
         var barHeight = 8;
 
         // clear the background
@@ -211,12 +147,44 @@ var defaultLoadingScreen = new Stage({
 
         ), 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: true
+            }
+        );
+        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: true
+            }
+        );
+        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(new TextLogo(
-            renderer.getWidth(),
-            renderer.getHeight()
-        ), 2);
+        world.addChild(logo1, 2);
+        world.addChild(logo2, 2);
     }
-});
+};
 
-export default defaultLoadingScreen;
+export default DefaultLoadingScreen;

package/src/math/color.js

@@ -202,7 +202,7 @@ class Color {
     }
 
     /**
-     * Color Red Component
+     * Color Red Component [0 .. 255]
      * @type Number
      * @name r
      * @readonly
@@ -224,7 +224,7 @@ class Color {
 
 
     /**
-     * Color Green Component
+     * Color Green Component [0 .. 255]
      * @type Number
      * @name g
      * @readonly
@@ -246,7 +246,7 @@ class Color {
 
 
     /**
-     * Color Blue Component
+     * Color Blue Component [0 .. 255]
      * @type Number
      * @name b
      * @readonly
@@ -266,7 +266,7 @@ class Color {
     }
 
     /**
-     * Color Alpha Component
+     * Color Alpha Component [0.0 .. 1.0]
      * @type Number
      * @name alpha
      * @readonly
@@ -550,6 +550,23 @@ class Color {
         );
     }
 
+    /**
+     * Pack this color into a Uint32 ARGB representation
+     * @name toUint32
+     * @memberOf me.Color
+     * @function
+     * @param {Number} [alpha=1.0] alpha value [0.0 .. 1.0]
+     * @return {Uint32}
+     */
+    toUint32(alpha = this.alpha) {
+        var ur = this.r & 0xff;
+        var ug = this.g & 0xff;
+        var ub = this.b & 0xff;
+        var ua = (alpha * 255) & 0xff;
+
+        return (ua << 24) + (ur << 16) + (ug << 8) + ub;
+    }
+
     /**
      * return an array representation of this object
      * @name toArray
@@ -561,6 +578,7 @@ class Color {
         return this.glArray;
     }
 
+
     /**
      * Get the color in "#RRGGBB" format
      * @name toHex

package/src/physics/body.js

@@ -11,13 +11,7 @@ import { world } from "./../game.js";
 
 
 /**
- * a Generic Body Object with some physic properties and behavior functionality<br>
- The body object is attached as a member of a Renderable.  The Body object can handle movements of the parent with
- the body.update call.  It is important to know that when body.update is called there are several things that happen related to
- the movement and positioning of the parent renderable object.  1) The force/gravity/friction parameters are used
- to calculate a new velocity and 2) the parent position is updated by adding this to the parent.pos (position me.Vector2d)
- value. Thus Affecting the movement of the parent.  Look at the source code for /src/physics/body.js:update (me.Body.update) for
- a better understanding.
+ * a Generic Physic Body Object with some physic properties and behavior functionality, to as a member of a Renderable.
  * @class Body
  * @memberOf me
  * @constructor

package/src/physics/bounds.js

@@ -347,8 +347,8 @@ class Bounds {
      * @return {boolean} True if the bounds overlap, otherwise false
      */
     overlaps(bounds) {
-        return (this.left <= bounds.right && this.right >= bounds.left
-            && this.bottom >= bounds.top && this.top <= bounds.bottom);
+        return !(this.right < bounds.left || this.left > bounds.right ||
+                 this.bottom < bounds.top || this.top > bounds.bottom);
     }
 
     /**

package/src/physics/detector.js

@@ -48,7 +48,6 @@ function shouldCollide(a, b) {
  * @name ResponseObject
  * @memberOf me.collision
  * @public
- * @see me.collision.check
  */
 class ResponseObject {
     constructor() {

package/src/physics/world.js

@@ -7,8 +7,9 @@ import { collisionCheck } from "./detector.js";
 import state from "./../state/state.js";
 
 /**
+* @classdesc
  * an object representing the physic world, and responsible for managing and updating all childs and physics
- * @class
+ * @class World
  * @extends me.Container
  * @memberOf me
  * @constructor

package/src/renderable/container.js

@@ -17,6 +17,7 @@ var deferredRemove = function (child, keepalive) {
 var globalFloatingCounter = 0;
 
 /**
+ * @classdesc
  * me.Container represents a collection of child objects
  * @class Container
  * @extends me.Renderable

package/src/renderable/imagelayer.js

@@ -239,6 +239,8 @@ class ImageLayer extends Sprite {
         else {
             this.pos.y = y;
         }
+
+        this.isDirty = true;
     }
 
    /*