melonjs 10.12.0 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.12.0",
+  "version": "13.0.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -31,13 +31,10 @@
     "url": "https://github.com/melonjs/melonJS/issues"
   },
   "license": "MIT",
-  "author": {
-    "name": "Olivier Biot",
-    "email": "contact@melonjs.org"
-  },
+  "author": "Olivier Biot (AltByte Pte Ltd)",
   "funding": "https://github.com/sponsors/melonjs",
   "engines": {
-    "node": ">= 12"
+    "node": ">= 16"
   },
   "main": "dist/melonjs.module.js",
   "type": "module",
@@ -55,21 +52,22 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^2.0.0",
-    "core-js": "^3.23.1",
-    "earcut": "2.2.3",
+    "core-js": "^3.23.5",
+    "earcut": "2.2.4",
     "eventemitter3": "^4.0.7",
     "howler": "2.2.3"
   },
   "devDependencies": {
     "@melonjs/webdoc-theme": "^1.1.1",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/offscreencanvas": "^2019.7.0",
-    "@webdoc/cli": "^1.6.6",
+    "@webdoc/cli": "^2.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.18.0",
+    "eslint": "^8.20.0",
     "jasmine-core": "^4.2.0",
     "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.1",
@@ -77,10 +75,10 @@
     "karma-html-detailed-reporter": "^2.1.0",
     "karma-jasmine": "^5.1.0",
     "karma-nyan-reporter": "0.2.5",
-    "rollup": "^2.75.6",
+    "rollup": "^2.77.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.14.1",
+    "terser": "^5.14.2",
     "typescript": "^4.7.4"
   },
   "scripts": {
@@ -90,7 +88,9 @@
     "lint": "eslint src rollup.config.js",
     "test": "npm run test-node && karma start tests/karma.conf.cjs",
     "test-node": "node build/melonjs.module.js",
-    "doc": "mkdirp docs && webdoc --quiet --site-root docs -R README.md",
+    "doc-prod": "mkdirp docs && webdoc --quiet --site-root melonJS/docs -R README.md",
+    "doc-local": "mkdirp docs && webdoc --quiet --site-root /docs -R README.md",
+    "doc": "npm run doc-prod",
     "serve": "python3 -m http.server",
     "prepublishOnly": "npm run dist && npm run test",
     "clean": "del-cli --force build/*.js dist/*.js dist/*.d.ts docs src/**/*.d.ts",

package/src/application/application.js

@@ -0,0 +1,231 @@
+import { renderer } from "./../video/video.js";
+import * as event from "./../system/event.js";
+import timer from "./../system/timer.js";
+import state from "./../state/state.js";
+import World from "./../physics/world.js";
+
+/**
+ * @classdesc
+ * An Application represents a single melonJS game.
+ * An Application is responsible for updating (each frame) all the related object status and draw them.
+ * @see game
+ */
+class Application {
+    constructor() {
+        /**
+         * a reference to the current active stage "default" camera
+         * @public
+         * @type {Camera2d}
+         */
+        this.viewport = null;
+
+        /**
+         * a reference to the game world, <br>
+         * a world is a virtual environment containing all the game objects
+         * @public
+         * @type {World}
+         */
+        this.world = null;
+
+        /**
+         * when true, all objects will be added under the root world container.<br>
+         * When false, a `me.Container` object will be created for each corresponding groups
+         * @public
+         * @type {boolean}
+         * @default true
+         */
+        this.mergeGroup = true;
+
+        /**
+         * Specify the property to be used when sorting renderables.
+         * Accepted values : "x", "y", "z"
+         * @public
+         * @type {string}
+         * @default "z"
+         */
+        this.sortOn = "z";
+
+        /**
+         * Last time the game update loop was executed. <br>
+         * Use this value to implement frame prediction in drawing events,
+         * for creating smooth motion while running game update logic at
+         * a lower fps.
+         * @public
+         * @type {DOMHighResTimeStamp}
+         * @name lastUpdate
+         * @memberof Application
+         */
+        this.lastUpdate = 0;
+
+        // to know when we have to refresh the display
+        this.isDirty = true;
+
+        // always refresh the display when updatesPerSecond are lower than fps
+        this.isAlwaysDirty = false;
+
+        // frame counter for frameSkipping
+        // reset the frame counter
+        this.frameCounter = 0;
+        this.frameRate = 1;
+
+        // time accumulation for multiple update calls
+        this.accumulator = 0.0;
+        this.accumulatorMax = 0.0;
+        this.accumulatorUpdateDelta = 0;
+
+        // min update step size
+        this.stepSize = 1000 / 60;
+        this.updateDelta = 0;
+        this.lastUpdateStart = null;
+        this.updateAverageDelta = 0;
+    }
+
+    /**
+     * init the game instance (create a physic world, update starting time, etc..)
+     */
+    init() {
+        // create a new physic world
+        this.world = new World();
+        // set the reference to this application instance
+        this.world.app = this;
+        this.lastUpdate = globalThis.performance.now();
+        event.emit(event.GAME_INIT, this);
+    }
+
+    /**
+     * reset the game Object manager
+     * destroy all current objects
+     */
+    reset() {
+        // point to the current active stage "default" camera
+        var current = state.get();
+        if (typeof current !== "undefined") {
+            this.viewport = current.cameras.get("default");
+        }
+
+        // publish reset notification
+        event.emit(event.GAME_RESET);
+
+        // Refresh internal variables for framerate  limiting
+        this.updateFrameRate();
+    }
+
+    /**
+     * Fired when a level is fully loaded and all renderable instantiated. <br>
+     * Additionnaly the level id will also be passed to the called function.
+     * @example
+     * // call myFunction () everytime a level is loaded
+     * me.game.onLevelLoaded = this.myFunction.bind(this);
+     */
+    onLevelLoaded() {};
+
+    /**
+     * Update the renderer framerate using the system config variables.
+     * @see timer.maxfps
+     * @see World.fps
+     */
+    updateFrameRate() {
+        // reset the frame counter
+        this.frameCounter = 0;
+        this.frameRate = ~~(0.5 + 60 / timer.maxfps);
+
+        // set step size based on the updatesPerSecond
+        this.stepSize = (1000 / this.world.fps);
+        this.accumulator = 0.0;
+        this.accumulatorMax = this.stepSize * 10;
+
+        // display should always re-draw when update speed doesn't match fps
+        // this means the user intends to write position prediction drawing logic
+        this.isAlwaysDirty = (timer.maxfps > this.world.fps);
+    }
+
+    /**
+     * Returns the parent container of the specified Child in the game world
+     * @param {Renderable} child
+     * @returns {Container}
+     */
+    getParentContainer(child) {
+        return child.ancestor;
+    }
+
+    /**
+     * force the redraw (not update) of all objects
+     */
+    repaint() {
+        this.isDirty = true;
+    }
+
+    /**
+     * update all objects related to this game active scene/stage
+     * @param {number} time current timestamp as provided by the RAF callback
+     * @param {Stage} stage the current stage
+     */
+    update(time, stage) {
+        // handle frame skipping if required
+        if ((++this.frameCounter % this.frameRate) === 0) {
+            // reset the frame counter
+            this.frameCounter = 0;
+
+            // publish notification
+            event.emit(event.GAME_BEFORE_UPDATE, time);
+
+            this.accumulator += timer.getDelta();
+            this.accumulator = Math.min(this.accumulator, this.accumulatorMax);
+
+            this.updateDelta = (timer.interpolation) ? timer.getDelta() : this.stepSize;
+            this.accumulatorUpdateDelta = (timer.interpolation) ? this.updateDelta : Math.max(this.updateDelta, this.updateAverageDelta);
+
+            while (this.accumulator >= this.accumulatorUpdateDelta || timer.interpolation) {
+                this.lastUpdateStart = globalThis.performance.now();
+
+                // game update event
+                if (state.isPaused() !== true) {
+                    event.emit(event.GAME_UPDATE, time);
+                }
+
+                // update all objects (and pass the elapsed time since last frame)
+                this.isDirty = stage.update(this.updateDelta) || this.isDirty;
+
+                this.lastUpdate = globalThis.performance.now();
+                this.updateAverageDelta = this.lastUpdate - this.lastUpdateStart;
+
+                this.accumulator -= this.accumulatorUpdateDelta;
+                if (timer.interpolation) {
+                    this.accumulator = 0;
+                    break;
+                }
+            }
+
+            // publish notification
+            event.emit(event.GAME_AFTER_UPDATE, this.lastUpdate);
+        }
+    }
+
+    /**
+     * draw the active scene/stage associated to this game
+     * @param {Stage} stage the current stage
+     */
+    draw(stage) {
+        if (renderer.isContextValid === true && (this.isDirty || this.isAlwaysDirty)) {
+            // publish notification
+            event.emit(event.GAME_BEFORE_DRAW, globalThis.performance.now());
+
+            // prepare renderer to draw a new frame
+            renderer.clear();
+
+            // render the stage
+            stage.draw(renderer);
+
+            // set back to flag
+            this.isDirty = false;
+
+            // flush/render our frame
+            renderer.flush();
+
+            // publish notification
+            event.emit(event.GAME_AFTER_DRAW, globalThis.performance.now());
+        }
+    }
+}
+
+export default Application;

package/src/audio/audio.js

@@ -2,6 +2,7 @@
 import {Howl, Howler} from "howler";
 import {clamp} from "./../math/math.js";
 import loader from "./../loader/loader.js";
+import { isDataUrl } from "./../utils/string.js";
 
 /**
  * @namespace audio
@@ -11,31 +12,31 @@ import loader from "./../loader/loader.js";
  * audio channel list
  * @ignore
  */
-var audioTracks = {};
+let audioTracks = {};
 
 /**
  * current active track
  * @ignore
  */
-var current_track_id = null;
+let current_track_id = null;
 
 /**
  * error retry counter
  * @ignore
  */
-var retry_counter = 0;
+let retry_counter = 0;
 
 /**
  * list of active audio formats
  * @ignore
  */
-var audioExts = [];
+let audioExts = [];
 
 /**
  * event listener callback on load error
  * @ignore
  */
-var soundLoadError = function (sound_name, onerror_cb) {
+let soundLoadError = function (sound_name, onerror_cb) {
     // check the retry counter
     if (retry_counter++ > 3) {
         // something went wrong
@@ -149,9 +150,14 @@ export function load(sound, html5, onload_cb, onerror_cb) {
     if (audioExts.length === 0) {
         throw new Error("target audio extension(s) should be set through me.audio.init() before calling the preloader.");
     }
-    for (var i = 0; i < audioExts.length; i++) {
-        urls.push(sound.src + sound.name + "." + audioExts[i] + loader.nocache);
+    if (isDataUrl(sound.src) === true) {
+        urls.push(sound.src);
+    } else {
+        for (var i = 0; i < audioExts.length; i++) {
+            urls.push(sound.src + sound.name + "." + audioExts[i] + loader.nocache);
+        }
     }
+
     audioTracks[sound.name] = new Howl({
         src : urls,
         volume : Howler.volume(),

package/src/camera/camera2d.js

@@ -10,7 +10,7 @@ import * as event from "./../system/event.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import {clamp, toBeCloseTo} from "./../math/math.js";
-import { world } from "./../game.js";
+import game from "./../game.js";
 
 
 // some ref shortcut
@@ -285,7 +285,7 @@ class Camera2d extends Renderable {
         this._updateProjectionMatrix();
 
         // publish the viewport resize event
-        event.emit(event.VIEWPORT_ONRESIZE, this.width, this.height);
+        event.emit(event.VIEWPORT_ONRESIZE, this.width, this.height, this);
 
         return this;
     }
@@ -615,7 +615,7 @@ class Camera2d extends Renderable {
     localToWorld(x, y, v) {
         // TODO memoization for one set of coords (multitouch)
         v = v || pool.pull("Vector2d");
-        v.set(x, y).add(this.pos).sub(world.pos);
+        v.set(x, y).add(this.pos).sub(game.world.pos);
         if (!this.currentTransform.isIdentity()) {
             this.invCurrentTransform.apply(v);
         }
@@ -639,7 +639,7 @@ class Camera2d extends Renderable {
         if (!this.currentTransform.isIdentity()) {
             this.currentTransform.apply(v);
         }
-        return v.sub(this.pos).add(world.pos);
+        return v.sub(this.pos).add(game.world.pos);
     }
 
     /**
@@ -706,7 +706,7 @@ class Camera2d extends Renderable {
 
         this.preDraw(renderer);
 
-        container.preDraw(renderer);
+        container.preDraw(renderer, this);
 
         // draw all objects,
         // specifying the viewport as the rectangle area to redraw
@@ -715,7 +715,7 @@ class Camera2d extends Renderable {
         // draw the viewport/camera effects
         this.drawFX(renderer);
 
-        container.postDraw(renderer);
+        container.postDraw(renderer, this);
 
         this.postDraw(renderer);
 

package/src/game.js

@@ -1,243 +1,20 @@
-import { renderer } from "./video/video.js";
 import * as event from "./system/event.js";
-import timer from "./system/timer.js";
-import state from "./state/state.js";
-import World from "./physics/world.js";
+import Application from "./application/application.js";
 
 /**
- * game represents your current game, it contains all the objects,
- * tilemap layers, current viewport, collision map, etc...<br>
- * game is also responsible for updating (each frame) the object status and draw them.
+ * game is a default instance of a melonJS Application and represents your current game,
+ * it contains all the objects, tilemap layers, current viewport, collision map, etc...<br>
  * @namespace game
+ * @see Application
  */
 
-// to know when we have to refresh the display
-var isDirty = true;
-
-// always refresh the display when updatesPerSecond are lower than fps
-var isAlwaysDirty = false;
-
-// frame counter for frameSkipping
-// reset the frame counter
-var frameCounter = 0;
-var frameRate = 1;
-
-// time accumulation for multiple update calls
-var accumulator = 0.0;
-var accumulatorMax = 0.0;
-var accumulatorUpdateDelta = 0;
-
-// min update step size
-var stepSize = 1000 / 60;
-var updateDelta = 0;
-var lastUpdateStart = null;
-var updateAverageDelta = 0;
-
+// create a default melonJS application instance
+let game = new Application();
 
  // initialize the game manager on system boot
 event.on(event.BOOT, () => {
-    // the root object of our world is an entity container
-    world = new World();
-    // publish init notification
-    event.emit(event.GAME_INIT);
+    // initialize the default game instance
+    game.init();
 });
 
-
-/**
- * a reference to the current active stage "default" camera
- * @public
- * @type {Camera2d}
- * @name viewport
- * @memberof game
- */
-export let viewport;
-
-/**
- * a reference to the game world, <br>
- * a world is a virtual environment containing all the game objects
- * @public
- * @type {World}
- * @name world
- * @memberof game
- */
-export let world;
-
-/**
- * when true, all objects will be added under the root world container.<br>
- * When false, a `me.Container` object will be created for each corresponding groups
- * @public
- * @type {boolean}
- * @default true
- * @name mergeGroup
- * @memberof game
- */
-export let mergeGroup = true;
-
-/**
- * Specify the property to be used when sorting entities.
- * Accepted values : "x", "y", "z"
- * @public
- * @type {string}
- * @default "z"
- * @name sortOn
- * @memberof game
- */
-export let sortOn = "z";
-
-/**
- * Last time the game update loop was executed. <br>
- * Use this value to implement frame prediction in drawing events,
- * for creating smooth motion while running game update logic at
- * a lower fps.
- * @public
- * @type {DOMHighResTimeStamp}
- * @name lastUpdate
- * @memberof game
- */
-export let lastUpdate = globalThis.performance.now();
-
-/**
- * Fired when a level is fully loaded and all entities instantiated. <br>
- * Additionnaly the level id will also be passed to the called function.
- * @function game.onLevelLoaded
- * @example
- * // call myFunction () everytime a level is loaded
- * me.game.onLevelLoaded = this.myFunction.bind(this);
- */
-export function onLevelLoaded() {};
-
-/**
- * reset the game Object manager<br>
- * destroy all current objects
- * @function game.reset
- */
-export function reset () {
-    // point to the current active stage "default" camera
-    var current = state.current();
-    if (typeof current !== "undefined") {
-        viewport = current.cameras.get("default");
-    }
-
-    // publish reset notification
-    event.emit(event.GAME_RESET);
-
-    // Refresh internal variables for framerate  limiting
-    updateFrameRate();
-}
-
-/**
- * Update the renderer framerate using the system config variables.
- * @function game.updateFrameRate
- * @see timer.maxfps
- * @see World.fps
- */
-export function updateFrameRate() {
-    // reset the frame counter
-    frameCounter = 0;
-    frameRate = ~~(0.5 + 60 / timer.maxfps);
-
-    // set step size based on the updatesPerSecond
-    stepSize = (1000 / world.fps);
-    accumulator = 0.0;
-    accumulatorMax = stepSize * 10;
-
-    // display should always re-draw when update speed doesn't match fps
-    // this means the user intends to write position prediction drawing logic
-    isAlwaysDirty = (timer.maxfps > world.fps);
-};
-
-/**
- * Returns the parent container of the specified Child in the game world
- * @function game.getParentContainer
- * @param {Renderable} child
- * @returns {Container}
- */
-export function getParentContainer(child) {
-    return child.ancestor;
-};
-
-/**
- * force the redraw (not update) of all objects
- * @function game.repaint
- */
-export function repaint() {
-    isDirty = true;
-};
-
-
-/**
- * update all objects of the game manager
- * @ignore
- * @function game.update
- * @param {number} time current timestamp as provided by the RAF callback
- * @param {Stage} stage the current stage
- */
-export function update(time, stage) {
-    // handle frame skipping if required
-    if ((++frameCounter % frameRate) === 0) {
-        // reset the frame counter
-        frameCounter = 0;
-
-        // publish notification
-        event.emit(event.GAME_BEFORE_UPDATE, time);
-
-        accumulator += timer.getDelta();
-        accumulator = Math.min(accumulator, accumulatorMax);
-
-        updateDelta = (timer.interpolation) ? timer.getDelta() : stepSize;
-        accumulatorUpdateDelta = (timer.interpolation) ? updateDelta : Math.max(updateDelta, updateAverageDelta);
-
-        while (accumulator >= accumulatorUpdateDelta || timer.interpolation) {
-            lastUpdateStart = globalThis.performance.now();
-
-            // game update event
-            if (state.isPaused() !== true) {
-                event.emit(event.GAME_UPDATE, time);
-            }
-
-            // update all objects (and pass the elapsed time since last frame)
-            isDirty = stage.update(updateDelta) || isDirty;
-
-            lastUpdate = globalThis.performance.now();
-            updateAverageDelta = lastUpdate - lastUpdateStart;
-
-            accumulator -= accumulatorUpdateDelta;
-            if (timer.interpolation) {
-                accumulator = 0;
-                break;
-            }
-        }
-
-        // publish notification
-        event.emit(event.GAME_AFTER_UPDATE, lastUpdate);
-    }
-};
-
-/**
- * draw the current scene/stage
- * @function game.draw
- * @ignore
- * @param {Stage} stage the current stage
- */
-export function draw(stage) {
-
-    if (renderer.isContextValid === true && (isDirty || isAlwaysDirty)) {
-        // publish notification
-        event.emit(event.GAME_BEFORE_DRAW, globalThis.performance.now());
-
-        // prepare renderer to draw a new frame
-        renderer.clear();
-
-        // render the stage
-        stage.draw(renderer);
-
-        // set back to flag
-        isDirty = false;
-
-        // flush/render our frame
-        renderer.flush();
-
-        // publish notification
-        event.emit(event.GAME_AFTER_DRAW, globalThis.performance.now());
-    }
-};
+export default game;

package/src/index.js

@@ -4,9 +4,9 @@ import "./polyfill/index.js";
 // utility classes
 import * as audio from "./audio/audio.js";
 import collision from "./physics/collision.js";
-import device from "./system/device.js";
 import * as event from "./system/event.js";
-import * as game from "./game.js";
+import * as device from "./system/device.js";
+import game from "./game.js";
 import loader from "./loader/loader.js";
 import * as Math from "./math/math.js";
 import utils from "./utils/utils.js";
@@ -273,7 +273,7 @@ export function boot() {
 
     /// if auto init is disable and this function was called manually
     if (skipAutoInit === true) {
-        device._domReady();
+        event.emit(event.DOM_READY);
     }
 };