Upgrading to melonJS 2

[Work in Progress]

melonJS 2 is a modern version of the melonJS game engine and has been rebuilt almost entirely using ES6 class, inheritance and semantic. Moving straight away from the legacy version (using ES5 and Jay Inheritance) will definitely break your game and the below guide provide step by step instruction on how to experience a smooth transition to melonJS 2.

1. Upgrade to the latest version of the legacy version of melonJS by following the upgrade guide : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#80x-to-91x-stable

2. track down the console.log for warning message about deprecated APIs, for example, here below there is a warning about the levelLoad method (again refer to the the upgrade Guide on how to remove the deprecation warnings)

[Log] melonJS v9.1.2 | http://melonjs.org (melonjs.js, line 31686)
[Log] CANVAS renderer | Web Audio | pixel ratio 2 | desktop | landscape | en-SG (melonjs.js, line 31812)
[Log] resolution: requested 1024x786, got 1024x539 (melonjs.js, line 31820)
[Log] melonJS: me.levelDirector.loadLevel() is deprecated since version 9.0.0, please use me.level.load() (melonjs.js, line 1339)

3. update to the ESM bundle melonjs.module.js of the legacy version of melonJS (9.x). To ease the change, we recommend to import everything (you can later refine import based on your class usage/needs)

import * as me from "https://cdn.jsdelivr.net/npm/melonjs@9/dist/melonjs-module.js";

4. replace Jay inheritance by standard ES6 Class definition/inheritance

var Smilie = me.Sprite.extend({
    init : function (x, y, image) {
        this._super(me.Sprite, "init", [x, y, image]);
        ....
    },
    update( dt ) {
        ....
        this._super(me.Sprite, "update", [dt]);    
    }
});

now should become :

class Smilie extends me.Sprite {
    constructor(x, y, image) {
        super(x, y, image);
        ....
    }
    update(dt) {
        ....
        super.update();
    }
};

5. update to the latest version of melonJS and you should be good to go with your game fully working !

import * as me from "https://cdn.jsdelivr.net/npm/melonjs/dist/melonjs-module.js";

Additionally you might want to check on the new boilerplate that is now based on webpack and offers built-in feature such as tree-shaking and transpiring to allow deployment (compatibility) with es5 only browsers : https://github.com/melonjs/es6-boilerplate