melonjs 12.0.0 → 13.1.1

package/src/input/pointer.js

@@ -1,7 +1,6 @@
 import Vector2d from "./../math/vector2.js";
-import device from "./../system/device.js";
 import Bounds from "./../physics/bounds.js";
-import { viewport } from "./../game.js";
+import game from "./../game.js";
 import { globalToLocal } from "./input.js";
 import { locked } from "./pointerevent.js";
 
@@ -333,7 +332,7 @@ class Pointer extends Bounds {
         this.gameScreenY = this.y = tmpVec.y;
 
         // true if not originally a pointer event
-        this.isNormalized = !device.PointerEvent || (device.PointerEvent && !(event instanceof globalThis.PointerEvent));
+        this.isNormalized = (typeof globalThis.PointerEvent !== "undefined" && !(event instanceof globalThis.PointerEvent));
 
         this.locked = locked;
         this.movementX = event.movementX || 0;
@@ -361,8 +360,8 @@ class Pointer extends Bounds {
         this.type = event.type;
 
         // get the current screen to game world offset
-        if (typeof viewport !== "undefined") {
-            viewport.localToWorld(this.gameScreenX, this.gameScreenY, tmpVec);
+        if (typeof game.viewport !== "undefined") {
+            game.viewport.localToWorld(this.gameScreenX, this.gameScreenY, tmpVec);
         }
 
         /* Initialize the two coordinate space properties. */

package/src/input/pointerevent.js

@@ -6,11 +6,11 @@ import { remove } from "./../utils/array.js";
 import * as event from "./../system/event.js";
 import timer from "./../system/timer.js";
 import pool from "./../system/pooling.js";
-import device from "./../system/device.js";
+import * as device from "./../system/device.js";
 import Pointer from "./pointer.js";
 import Rect from "./../geometries/rectangle.js";
 import Container from "./../renderable/container.js";
-import { world, viewport } from "./../game.js";
+import game from "./../game.js";
 
 /**
  * A pool of `Pointer` objects to cache pointer/touch event coordinates.
@@ -125,17 +125,17 @@ function enablePointerEvent() {
 
         if (pointerEventTarget === null) {
             // default pointer event target
-            pointerEventTarget = renderer.getScreenCanvas();
+            pointerEventTarget = renderer.getCanvas();
         }
 
-        if (device.PointerEvent) {
+        if (device.pointerEvent) {
             // standard Pointer Events
             activeEventList = pointerEventList;
         } else {
             // Regular Mouse events
             activeEventList = mouseEventList;
         }
-        if (device.touch && !device.PointerEvent) {
+        if (device.touch && !device.pointerEvent) {
             // touch event on mobile devices
             activeEventList = activeEventList.concat(touchEventList);
         }
@@ -287,10 +287,10 @@ function dispatchEvent(normalizedEvents) {
         }
 
         // fetch valid candiates from the game world container
-        var candidates = world.broadphase.retrieve(currentPointer, Container.prototype._sortReverseZ);
+        var candidates = game.world.broadphase.retrieve(currentPointer, Container.prototype._sortReverseZ);
 
         // add the main game viewport to the list of candidates
-        candidates = candidates.concat([ viewport ]);
+        candidates = candidates.concat([ game.viewport ]);
 
         for (var c = candidates.length, candidate; c--, (candidate = candidates[c]);) {
             if (eventHandlers.has(candidate) && (candidate.isKinematic !== true)) {
@@ -416,7 +416,7 @@ function normalizeEvent(originalEvent) {
     var _pointer;
 
     // PointerEvent or standard Mouse event
-    if (device.TouchEvent && originalEvent.changedTouches) {
+    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];
@@ -556,8 +556,8 @@ export var throttlingInterval;
  */
 export function globalToLocal(x, y, v) {
     v = v || pool.pull("Vector2d");
-    var rect = device.getElementBounds(renderer.getScreenCanvas());
-    var pixelRatio = device.devicePixelRatio;
+    var rect = device.getElementBounds(renderer.getCanvas());
+    var pixelRatio = globalThis.devicePixelRatio || 1;
     x -= rect.left + (globalThis.pageXOffset || 0);
     y -= rect.top + (globalThis.pageYOffset || 0);
     var scale = scaleRatio;

package/src/lang/deprecated.js

@@ -1,5 +1,3 @@
-import device from "./../system/device.js";
-import { requestPointerLock, exitPointerLock } from "./../input/input.js";
 import { TextureAtlas } from "./../video/texture/atlas.js";
 import Renderer from "./../video/renderer.js";
 import { Draggable, DropTarget } from "./../renderable/dragndrop.js";
@@ -45,35 +43,8 @@ export function warning(deprecated, replacement, version) {
     }
 };
 
-/**
- * @public
- * @name turnOnPointerLock
- * @returns {boolean} return true if the request was successfully submitted
- * @memberof device#
- * @deprecated since 10.3.0
- * @see input.requestPointerLock
- */
-device.turnOnPointerLock = function () {
-    warning("device.turnOnPointerLock()", "input.requestPointerLock()", "10.3.0");
-    return requestPointerLock();
-};
-
-/**
- * @public
- * @name turnOffPointerLock
- * @returns {boolean} return true if the request was successfully submitted
- * @memberof device#
- * @deprecated since 10.3.0
- * @see input.exitPointerLock
- */
-device.turnOffPointerLock = function () {
-    warning("device.turnOffPointerLock()", "input.exitPointerLock()", "10.3.0");
-    return exitPointerLock();
-};
-
 /**
  * Alias of {@link TextureAtlas}
- *
  * @public
  * @name Texture
  * @class
@@ -91,7 +62,6 @@ Object.defineProperty(Renderer.prototype, "Texture", {
     }
 });
 
-
 /**
  * @classdesc
  * Used to make a game entity draggable
@@ -129,3 +99,30 @@ export class DroptargetEntity extends DropTarget {
         super(x, y, settings.width, settings.height);
     }
 }
+
+/**
+ * return a reference to the screen canvas
+ * @name getScreenCanvas
+ * @memberof Renderer
+ * @returns {HTMLCanvasElement}
+ * @deprecated since 13.1.0
+ * @see getCanvas();
+ */
+Renderer.prototype.getScreenCanvas = function() {
+    warning("getScreenCanvas", "getCanvas", "13.1.0");
+    return this.getCanvas();
+};
+
+/**
+ * return a reference to the screen canvas corresponding 2d Context<br>
+ * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
+ * @name getScreenContext
+ * @memberof Renderer
+ * @returns {CanvasRenderingContext2D}
+ * @deprecated since 13.1.0
+ * @see getContext();
+ */
+Renderer.prototype.getScreenContext = function()  {
+    warning("getScreenContext", "getContext", "13.1.0");
+    return this.getContext();
+};

package/src/level/level.js

@@ -2,7 +2,7 @@ import utils from "./../utils/utils.js";
 import * as event from "./../system/event.js";
 import state from "./../state/state.js";
 import loader from "./../loader/loader.js";
-import * as game from "./../game.js";
+import game from "./../game.js";
 import TMXTileMap from "./tiled/TMXTileMap.js";
 
 
@@ -125,7 +125,7 @@ var level = {
      * @param {string} levelId level id
      * @param {object} [options] additional optional parameters
      * @param {Container} [options.container=game.world] container in which to load the specified level
-     * @param {Function} [options.onLoaded=ame.onLevelLoaded] callback for when the level is fully loaded
+     * @param {Function} [options.onLoaded=game.onLevelLoaded] callback for when the level is fully loaded
      * @param {boolean} [options.flatten=game.mergeGroup] if true, flatten all objects into the given container
      * @param {boolean} [options.setViewportBounds=true] if true, set the viewport bounds to the map size
      * @returns {boolean} true if the level was successfully loaded

package/src/level/tiled/TMXGroup.js

@@ -49,6 +49,16 @@ export default class TMXGroup {
          */
         this.tintcolor = data.tintcolor;
 
+
+        /**
+         * the group class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXGroup
+         */
+        this.class = data.class;
+
         /**
          * group z order
          * @public

package/src/level/tiled/TMXLayer.js

@@ -4,7 +4,7 @@ import * as TMXUtils from "./TMXUtils.js";
 import Tile from "./TMXTile.js";
 import Renderable from "./../../renderable/renderable.js";
 import CanvasRenderer from "./../../video/canvas/canvas_renderer";
-import { world } from "./../../game.js";
+import game from "./../../game.js";
 
 /**
  * Create required arrays for the given layer object
@@ -138,6 +138,15 @@ class TMXLayer extends Renderable {
          */
         this.renderorder = data.renderorder || "right-down";
 
+        /**
+         * the layer class
+         * @public
+         * @type {string}
+         * @name class
+         * @name TMXLayer#class
+         */
+        this.class = data.class;
+
         // for displaying order
         this.pos.z = z;
 
@@ -173,7 +182,7 @@ class TMXLayer extends Renderable {
 
         // check for the correct rendering method
         if (typeof (this.preRender) === "undefined") {
-            this.preRender = world.preRender;
+            this.preRender = game.world.preRender;
         }
 
         // set a renderer

package/src/level/tiled/TMXObject.js

@@ -99,20 +99,31 @@ export default class TMXObject {
          * object type
          * @public
          * @type {string}
+         * @deprecated since Tiled 1.9
+         * @see https://docs.mapeditor.org/en/stable/reference/tmx-changelog/#tiled-1-9
          * @name type
          * @memberof TMXObject
          */
         this.type = settings.type;
 
+        /**
+         * the åobject class
+         * @public
+         * @type {string}
+         * @name class
+         * @memberof TMXObject
+         */
+        this.class = typeof settings.class !== "undefined" ? settings.class : settings.type;
+
         /**
          * object text
          * @public
          * @type {object}
          * @see http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#text
-         * @name type
+         * @name text
          * @memberof TMXObject
          */
-        this.type = settings.type;
+        this.text = undefined;
 
         /**
          * The rotation of the object in radians clockwise (defaults to 0)

package/src/level/tiled/TMXTileMap.js

@@ -1,6 +1,6 @@
 import pool from "./../../system/pooling.js";
 import * as event from "./../../system/event.js";
-import { viewport } from "./../../game.js";
+import game from "./../../game.js";
 import collision from "./../../physics/collision.js";
 import Body from "./../../physics/body.js";
 import TMXOrthogonalRenderer from "./renderer/TMXOrthogonalRenderer.js";
@@ -204,6 +204,16 @@ class TMXTileMap {
          */
         this.tiledversion = data.tiledversion;
 
+
+        /**
+         * The map class.
+         * @public
+         * @type {string}
+         * @name TMXTileMap#class
+         */
+         this.class = data.class;
+
+
         // tilesets for this map
         this.tilesets = null;
 
@@ -396,7 +406,7 @@ class TMXTileMap {
          */
         function _setBounds(width, height) {
             // adjust the viewport bounds if level is smaller
-            viewport.setBounds(
+            game.viewport.setBounds(
                 0, 0,
                 Math.max(levelBounds.width, width),
                 Math.max(levelBounds.height, height)
@@ -413,7 +423,7 @@ class TMXTileMap {
         if (setViewportBounds === true) {
             event.off(event.VIEWPORT_ONRESIZE, _setBounds);
             // force viewport bounds update
-            _setBounds(viewport.width, viewport.height);
+            _setBounds(game.viewport.width, game.viewport.height);
             // Replace the resize handler
             event.on(event.VIEWPORT_ONRESIZE, _setBounds, this);
         }
@@ -545,6 +555,8 @@ class TMXTileMap {
                         obj.anchorPoint.set(0, 0);
                         obj.name = settings.name;
                         obj.type = settings.type;
+                        // for backward compatibility
+                        obj.class = settings.class || settings.type;
                         obj.id = settings.id;
                         obj.body = new Body(obj, shape);
                         obj.body.setStatic(true);

package/src/level/tiled/TMXTileset.js

@@ -62,6 +62,14 @@ class TMXTileset {
          */
         this.isCollection = false;
 
+        /**
+         * the tileset class
+         * @public
+         * @type {boolean}
+         * @name TMXTileset#class
+         */
+        this.class = tileset.class;
+
         /**
          * Tileset animations
          * @private

package/src/loader/loader.js

@@ -1,10 +1,11 @@
 import * as fileUtil from "./../utils/file.js";
 import * as event from "./../system/event.js";
-import device from "./../system/device.js";
+import { ua } from "./../system/platform.js";
 import * as audio from "./../audio/audio.js";
 import state from "./../state/state.js";
 import level from "./../level/level.js";
 import * as TMXUtils from "./../level/tiled/TMXUtils.js";
+import { isDataUrl } from "./../utils/string.js";
 
 
 // contains all the images loaded
@@ -30,7 +31,7 @@ var timerId = 0;
 function checkLoadStatus(onload) {
     if (loadCount === resourceCount) {
         // wait 1/2s and execute callback (cheap workaround to ensure everything is loaded)
-        if (onload || loader.onload) {
+        if (typeof onload === "function" || loader.onload) {
             // make sure we clear the timer
             clearTimeout(timerId);
             // trigger the onload callback
@@ -66,8 +67,12 @@ function checkLoadStatus(onload) {
 function preloadImage(img, onload, onerror) {
     // create new Image object and add to list
     imgList[img.name] = new Image();
-    imgList[img.name].onload = onload;
-    imgList[img.name].onerror = onerror;
+    if (typeof onload === "function") {
+        imgList[img.name].onload = onload;
+    }
+    if (typeof onerror === "function") {
+        imgList[img.name].onerror = onerror;
+    }
     if (typeof (loader.crossOrigin) === "string") {
         imgList[img.name].crossOrigin = loader.crossOrigin;
     }
@@ -83,17 +88,30 @@ function preloadImage(img, onload, onerror) {
  * @ignore
  */
 function preloadFontFace(data, onload, onerror) {
+
+    if (isDataUrl(data.src) === true) {
+        // make sure it in the `url(data:[<mediatype>][;base64],<data>)` format as expected by FontFace
+        if (!data.src.startsWith("url(")) {
+            data.src = "url(" + data.src + ")";
+        }
+    }
+
     var font = new FontFace(data.name, data.src);
+
     // loading promise
     font.load().then(() => {
         // apply the font after the font has finished downloading
         document.fonts.add(font);
         document.body.style.fontFamily = data.name;
-        // onloaded callback
-        onload();
+        if (typeof onload === "function") {
+            // onloaded callback
+            onload();
+        }
     }, function () {
-        // rejected
-        onerror(data.name);
+        if (typeof onerror === "function") {
+            // rejected
+            onerror(data.name);
+        }
     });
 };
 
@@ -119,7 +137,9 @@ function preloadTMX(tmxData, onload, onerror) {
     //if the data is in the tmxData object, don't get it via a XMLHTTPRequest
     if (tmxData.data) {
         addToTMXList(tmxData.data);
-        onload();
+        if (typeof onload === "function") {
+            onload();
+        }
         return;
     }
 
@@ -153,7 +173,7 @@ function preloadTMX(tmxData, onload, onerror) {
                     case "tmx":
                     case "tsx":
                         // ie9 does not fully implement the responseXML
-                        if (device.ua.match(/msie/i) || !xmlhttp.responseXML) {
+                        if (ua.match(/msie/i) || !xmlhttp.responseXML) {
                             if (globalThis.DOMParser) {
                                 // manually create the XML DOM
                                 result = (new DOMParser()).parseFromString(xmlhttp.responseText, "text/xml");
@@ -190,9 +210,11 @@ function preloadTMX(tmxData, onload, onerror) {
                 addToTMXList(result);
 
                 // fire the callback
-                onload();
+                if (typeof onload === "function") {
+                    onload();
+                }
             }
-            else {
+            else if (typeof onerror === "function") {
                 onerror(tmxData.name);
             }
         }
@@ -224,10 +246,12 @@ function preloadJSON(data, onload, onerror) {
             if ((xmlhttp.status === 200) || ((xmlhttp.status === 0) && xmlhttp.responseText)) {
                 // get the Texture Packer Atlas content
                 jsonList[data.name] = JSON.parse(xmlhttp.responseText);
-                // fire the callback
-                onload();
+                if (typeof onload === "function") {
+                    // fire the callback
+                    onload();
+                }
             }
-            else {
+            else if (typeof onerror === "function") {
                 onerror(data.name);
             }
         }
@@ -257,8 +281,11 @@ function preloadBinary(data, onload, onerror) {
                 buffer[i] = String.fromCharCode(byteArray[i]);
             }
             binList[data.name] = buffer.join("");
-            // callback
-            onload();
+            if (typeof onload === "function") {
+                // callback
+                onload();
+            }
+
         }
     };
     httpReq.send();
@@ -278,15 +305,19 @@ function preloadJavascript(data, onload, onerror) {
     }
     script.defer = true;
 
-    script.onload = () => {
-        // callback
-        onload();
-    };
+    if (typeof onload === "function") {
+        script.onload = () => {
+            // callback
+            onload();
+        };
+    }
 
-    script.onerror = () => {
-        // callback
-        onerror(data.name);
-    };
+    if (typeof onerror === "function") {
+        script.onerror = () => {
+            // callback
+            onerror(data.name);
+        };
+    }
 
     document.getElementsByTagName("body")[0].appendChild(script);
 };
@@ -453,6 +484,8 @@ var loader = {
      *   {name: "tileset-platformer", type: "image",  src: "data/map/tileset.png"},
      *   // PNG packed texture
      *   {name: "texture", type:"image", src: "data/gfx/texture.png"}
+     *   // PNG base64 encoded image
+     *   {name: "texture", type:"image", src: "data:image/png;base64,iVBORw0KAAAQAAAAEACA..."}
      *   // TSX file
      *   {name: "meta_tiles", type: "tsx", src: "data/map/meta_tiles.tsx"},
      *   // TMX level (XML & JSON)
@@ -463,6 +496,8 @@ var loader = {
      *   // audio resources
      *   {name: "bgmusic", type: "audio",  src: "data/audio/"},
      *   {name: "cling",   type: "audio",  src: "data/audio/"},
+     *   // base64 encoded audio resources
+     *   {name: "band",   type: "audio",  src: "data:audio/wav;base64,..."},
      *   // binary file
      *   {name: "ymTrack", type: "binary", src: "data/audio/main.ym"},
      *   // JSON file (used for texturePacker)
@@ -509,13 +544,14 @@ var loader = {
      * @param {string} res.type  "audio", binary", "image", "json", "tmx", "tsx"
      * @param {string} res.src  path and/or file name of the resource (for audio assets only the path is required)
      * @param {boolean} [res.stream] Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
-     * @param {Function} onload function to be called when the resource is loaded
-     * @param {Function} onerror function to be called in case of error
+     * @param {Function} [onload] function to be called when the resource is loaded
+     * @param {Function} [onerror] function to be called in case of error
      * @returns {number} the amount of corresponding resource to be preloaded
      * @example
      * // load an image asset
      * me.loader.load({name: "avatar",  type:"image",  src: "data/avatar.png"}, this.onload.bind(this), this.onerror.bind(this));
-     *
+     * // load a base64 image asset
+     *  me.loader.load({name: "avatar", type:"image", src: "data:image/png;base64,iVBORw0KAAAQAAAAEACA..."};
      * // start loading music
      * me.loader.load({
      *     name   : "bgmusic",

package/src/loader/loadingscreen.js

@@ -1,10 +1,11 @@
-import { world, viewport } from "./../game.js";
+import game from "./../game.js";
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import Renderable from "./../renderable/renderable.js";
 import Sprite from "./../renderable/sprite.js";
+import Renderable from "./../renderable/renderable.js";
 import Stage from "./../state/stage.js";
-import melonjs_logo from "./melonjs_logo.png";
+import loader from "./loader.js";
+import logo_url from "./melonjs_logo.png";
 
 
 // a basic progress bar object
@@ -40,7 +41,7 @@ class ProgressBar extends Renderable {
      * draw function
      * @ignore
      */
-    draw (renderer) {
+    draw(renderer, viewport) {
         // draw the progress bar
         renderer.setColor("black");
         renderer.fillRect(this.pos.x, viewport.centerY, renderer.getWidth(), this.barHeight / 2);
@@ -61,23 +62,6 @@ class ProgressBar extends Renderable {
 
 };
 
-/**
- * the melonJS Logo
- * @ignore
- */
-class IconLogo extends Sprite {
-    constructor(x, y) {
-        // TODO: create a sprite or texture from a Base64 encoded image
-        var image = new Image();
-        image.src = melonjs_logo;
-        super(x, y, {
-            image : image,
-            framewidth : 256,
-            frameheight : 256
-        });
-    }
-}
-
 /**
  * a default loading screen
  * @ignore
@@ -91,22 +75,37 @@ class DefaultLoadingScreen extends Stage {
         var barHeight = 8;
 
         // set a background color
-        world.backgroundColor.parseCSS("#202020");
+        game.world.backgroundColor.parseCSS("#202020");
 
         // progress bar
-        world.addChild(new ProgressBar(
+        game.world.addChild(new ProgressBar(
             0,
             renderer.getHeight() / 2,
             renderer.getWidth(),
             barHeight
         ), 1);
 
-        // melonJS logo
-        world.addChild(new IconLogo(
-            renderer.getWidth() / 2,
-            (renderer.getHeight() / 2)
+        // load the melonJS logo
+        loader.load({name: "melonjs_logo", type: "image", src: logo_url}, () => {
+            // melonJS logo
+            game.world.addChild(new Sprite(
+                renderer.getWidth() / 2,
+                renderer.getHeight() / 2, {
+                    image : "melonjs_logo",
+                    framewidth : 256,
+                    frameheight : 256
+                }), 2
+            );
+        });
+    }
 
-        ), 2);
+    /**
+     * Called by engine before deleting the object
+     * @ignore
+     */
+    onDestroyEvent() {
+        // cancel the callback
+        loader.unload({name: "melonjs_logo", type:"image"});
     }
 };