melonjs 10.12.0 → 13.0.0

package/src/input/keyboard.js

@@ -1,6 +1,6 @@
 import {preventDefault as preventDefaultAction} from "./input.js";
 import * as event from "./../system/event.js";
-import device from "./../system/device.js";
+import { isMobile } from "./../system/platform.js";
 
 // corresponding actions
 var _keyStatus = {};
@@ -317,7 +317,7 @@ export const KEY = {
  */
 export function initKeyboardEvent() {
     // make sure the keyboard is enable
-    if (keyBoardEventTarget === null && device.isMobile === false) {
+    if (keyBoardEventTarget === null && isMobile === false) {
         keyBoardEventTarget = globalThis;
         if (typeof keyBoardEventTarget.addEventListener === "function") {
             keyBoardEventTarget.addEventListener("keydown", keyDownEvent, false);

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.
@@ -128,14 +128,14 @@ function enablePointerEvent() {
             pointerEventTarget = renderer.getScreenCanvas();
         }
 
-        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];
@@ -557,7 +557,7 @@ 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 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

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/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
@@ -173,7 +173,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/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";
@@ -396,7 +396,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 +413,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);
         }

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 {nextPowerOfTwo} from "./../math/math.js";
-import pool from "./../system/pooling.js";
+import Sprite from "./../renderable/sprite.js";
 import Renderable from "./../renderable/renderable.js";
 import Stage from "./../state/stage.js";
+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,71 +62,6 @@ class ProgressBar extends Renderable {
 
 };
 
-// the melonJS Logo
-class IconLogo extends Renderable {
-    /**
-     * @ignore
-     */
-    constructor(x, y) {
-        super(x, y, 100, 85);
-
-        this.iconTexture = pool.pull("CanvasTexture",
-            renderer.WebGLVersion > 1 ? this.width : nextPowerOfTwo(this.width),
-            renderer.WebGLVersion > 1 ? this.height : nextPowerOfTwo(this.height),
-            { offscreenCanvas: true }
-        );
-
-        var context = this.iconTexture.context;
-
-        context.beginPath();
-        context.moveTo(0.7, 48.9);
-        context.bezierCurveTo(10.8, 68.9, 38.4, 75.8, 62.2, 64.5);
-        context.bezierCurveTo(86.1, 53.1, 97.2, 27.7, 87.0, 7.7);
-        context.lineTo(87.0, 7.7);
-        context.bezierCurveTo(89.9, 15.4, 73.9, 30.2, 50.5, 41.4);
-        context.bezierCurveTo(27.1, 52.5, 5.2, 55.8, 0.7, 48.9);
-        context.lineTo(0.7, 48.9);
-        context.closePath();
-        context.fillStyle = "rgb(255, 255, 255)";
-        context.fill();
-
-        context.beginPath();
-        context.moveTo(84.0, 7.0);
-        context.bezierCurveTo(87.6, 14.7, 72.5, 30.2, 50.2, 41.6);
-        context.bezierCurveTo(27.9, 53.0, 6.9, 55.9, 3.2, 48.2);
-        context.bezierCurveTo(-0.5, 40.4, 14.6, 24.9, 36.9, 13.5);
-        context.bezierCurveTo(59.2, 2.2, 80.3, -0.8, 84.0, 7.0);
-        context.lineTo(84.0, 7.0);
-        context.closePath();
-        context.lineWidth = 5.3;
-        context.strokeStyle = "rgb(255, 255, 255)";
-        context.lineJoin = "miter";
-        context.miterLimit = 4.0;
-        context.stroke();
-
-        this.anchorPoint.set(0.5, 0.5);
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer) {
-        renderer.drawImage(this.iconTexture.canvas, renderer.getWidth() / 2, this.pos.y);
-    }
-
-    /**
-     * Destroy function
-     * @ignore
-     */
-    destroy() {
-        // call the parent destroy method
-        super.destroy(arguments);
-        pool.push(this.iconTexture);
-        this.iconTexture = undefined;
-    }
-};
-
-
 /**
  * a default loading screen
  * @ignore
@@ -139,60 +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) - (barHeight * 2) - 35
-
-        ), 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: renderer.WebGLVersion >= 1
-            }
-        );
-        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: renderer.WebGLVersion >= 1
-            }
-        );
-        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(logo1, 2);
-        world.addChild(logo2, 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
+            );
+        });
+    }
+
+    /**
+     * Called by engine before deleting the object
+     * @ignore
+     */
+    onDestroyEvent() {
+        // cancel the callback
+        loader.unload({name: "melonjs_logo", type:"image"});
     }
 };