melonjs 9.1.0 → 10.0.1

package/src/loader/loadingscreen.js

@@ -1,94 +1,81 @@
-import game from "./../game.js";
-import video from "./../video/video.js";
-import event from "./../system/event.js";
+import { world, viewport } from "./../game.js";
+import { createCanvas, 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 Renderable from "./../renderable/renderable.js";
+import ColorLayer from "./../renderable/colorlayer.js";
 import Stage from "./../state/stage.js";
 
 
 // a basic progress bar object
-var ProgressBar = Renderable.extend({
+class ProgressBar extends Renderable {
     /**
      * @ignore
      */
-    init: function (x, y, w, h) {
-        var self = this;
+    constructor(x, y, w, h) {
+        super(x, y, w, h);
 
         this.barHeight = h;
-
-        this._super(Renderable, "init", [x, y, w, h]);
-
         this.anchorPoint.set(0, 0);
 
-        this.loaderHdlr = event.subscribe(
-            event.LOADER_PROGRESS,
-            self.onProgressUpdate.bind(self)
-        );
-
-        this.resizeHdlr = event.subscribe(
-            event.VIEWPORT_ONRESIZE,
-            self.resize.bind(self)
-        );
+        event.on(event.LOADER_PROGRESS, this.onProgressUpdate, this);
+        event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
 
         this.anchorPoint.set(0, 0);
 
         // store current progress
         this.progress = 0;
-    },
+    }
 
     /**
      * make sure the screen is refreshed every frame
      * @ignore
      */
-    onProgressUpdate : function (progress) {
+    onProgressUpdate(progress) {
         this.progress = ~~(progress * this.width);
         this.isDirty = true;
-    },
+    }
 
     /**
      * draw function
      * @ignore
      */
-    draw : function (renderer) {
-        // clear the background
-        renderer.clearColor("#202020");
-
+    draw (renderer) {
         // draw the progress bar
         renderer.setColor("black");
-        renderer.fillRect(this.pos.x, game.viewport.centerY, renderer.getWidth(), this.barHeight / 2);
+        renderer.fillRect(this.pos.x, viewport.centerY, renderer.getWidth(), this.barHeight / 2);
 
         renderer.setColor("#55aa00");
-        renderer.fillRect(this.pos.x, game.viewport.centerY, this.progress, this.barHeight / 2);
-    },
+        renderer.fillRect(this.pos.x, viewport.centerY, this.progress, this.barHeight / 2);
+    }
 
     /**
      * Called by engine before deleting the object
      * @ignore
      */
-    onDestroyEvent : function () {
+    onDestroyEvent() {
         // cancel the callback
-        event.unsubscribe(this.loaderHdlr);
-        event.unsubscribe(this.resizeHdlr);
-        this.loaderHdlr = this.resizeHdlr = null;
+        event.off(event.LOADER_PROGRESS, this.onProgressUpdate);
+        event.off(event.VIEWPORT_ONRESIZE, this.resize);
     }
 
-});
+};
 
 // the melonJS Logo
-var IconLogo = Renderable.extend({
+class IconLogo extends Renderable {
     /**
      * @ignore
      */
-    init : function (x, y) {
-        this._super(Renderable, "init", [x, y, 100, 85]);
+    constructor(x, y) {
+        super(x, y, 100, 85);
 
-        this.iconCanvas = video.createCanvas(
+        this.iconCanvas = createCanvas(
             nextPowerOfTwo(this.width),
             nextPowerOfTwo(this.height),
         false);
 
-        var context = video.renderer.getContext2d(this.iconCanvas);
+        var context = renderer.getContext2d(this.iconCanvas);
 
         context.beginPath();
         context.moveTo(0.7, 48.9);
@@ -117,33 +104,34 @@ var IconLogo = Renderable.extend({
         context.stroke();
 
         this.anchorPoint.set(0.5, 0.5);
-    },
+    }
+
     /**
      * @ignore
      */
-    draw : function (renderer) {
+    draw(renderer) {
         renderer.drawImage(this.iconCanvas, renderer.getWidth() / 2, this.pos.y);
     }
-});
+};
 
 // the melonJS Text Logo
-var TextLogo = Renderable.extend({
+class TextLogo extends Renderable {
     /**
      * @ignore
      */
-    init : function (w, h) {
-        this._super(Renderable, "init", [0, 0, w, h]);
+    constructor(w, h) {
+        super(0, 0, w, h);
 
         this.textWidth = 0;
 
         // offscreen cache canvas
-        this.fontCanvas = video.createCanvas(256, 64, true);
-        this.drawFont(video.renderer.getContext2d(this.fontCanvas));
+        this.fontCanvas = createCanvas(256, 64, true);
+        this.drawFont(renderer.getContext2d(this.fontCanvas));
 
         this.anchorPoint.set(0, 0.5);
-    },
+    }
 
-    drawFont : function (context) {
+    drawFont(context) {
         var logo1 = pool.pull("Text", 0, 0, {
             font: "century gothic",
             size: 32,
@@ -180,16 +168,16 @@ var TextLogo = Renderable.extend({
         // put them back into the object pool
         pool.push(logo1);
         pool.push(logo2);
-    },
+    }
 
     /**
      * @ignore
      */
-    draw : function (renderer) {
+    draw(renderer) {
         renderer.drawImage(this.fontCanvas, Math.round((renderer.getWidth() - this.textWidth) / 2), this.pos.y);
     }
 
-});
+};
 
 /**
  * a default loading screen
@@ -205,25 +193,28 @@ var defaultLoadingScreen = new Stage({
     onResetEvent : function () {
         var barHeight = 8;
 
+        // clear the background
+        world.addChild(new ColorLayer("background", "#202020"), 0);
+
         // progress bar
-        game.world.addChild(new ProgressBar(
+        world.addChild(new ProgressBar(
             0,
-            video.renderer.getHeight() / 2,
-            video.renderer.getWidth(),
+            renderer.getHeight() / 2,
+            renderer.getWidth(),
             barHeight
         ), 1);
 
         // melonJS logo
-        game.world.addChild(new IconLogo(
-            video.renderer.getWidth() / 2,
-            (video.renderer.getHeight() / 2) - (barHeight * 2) - 35
+        world.addChild(new IconLogo(
+            renderer.getWidth() / 2,
+            (renderer.getHeight() / 2) - (barHeight * 2) - 35
 
         ), 2);
 
         // melonJS text
-        game.world.addChild(new TextLogo(
-            video.renderer.getWidth(),
-            video.renderer.getHeight()
+        world.addChild(new TextLogo(
+            renderer.getWidth(),
+            renderer.getHeight()
         ), 2);
     }
 });

package/src/math/matrix3.js

@@ -569,7 +569,7 @@ class Matrix3d {
      * @param {me.Vector2d|me.Vector3d} v the vector to translate the matrix by
      * @return {me.Matrix3d} Reference to this object for method chaining
      */
-    translate(x, y, z) {
+    translate() {
         var a = this.val;
         var _x, _y, _z;
 

package/src/particles/emitter.js

@@ -1,4 +1,4 @@
-import video from "./../video/video.js";
+import { createCanvas } from "./../video/video.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import ParticleContainer from "./particlecontainer.js";
@@ -8,7 +8,7 @@ import { randomFloat } from "./../math/math.js";
 
 // generate a default image for the particles
 var pixel = (function () {
-    var canvas = video.createCanvas(1, 1);
+    var canvas = createCanvas(1, 1);
     var context = canvas.getContext("2d");
     context.fillStyle = "#fff";
     context.fillRect(0, 0, 1, 1);
@@ -326,11 +326,15 @@ var ParticleEmitterSettings = {
  * me.game.world.removeChild(emitter);
  *
  */
-var ParticleEmitter = Renderable.extend({
+class ParticleEmitter extends Renderable {
+
     /**
      * @ignore
      */
-    init: function (x, y, settings) {
+    constructor(x, y, settings) {
+        // call the super constructor
+        super(x, y, Infinity, Infinity);
+
         // Emitter is Stream, launch particles constantly
         /** @ignore */
         this._stream = false;
@@ -349,15 +353,6 @@ var ParticleEmitter = Renderable.extend({
         /** @ignore */
         this._enabled = false;
 
-        // call the super constructor
-        this._super(
-            Renderable,
-            "init",
-            [x, y,
-            Infinity,
-            Infinity]
-        );
-
         // Emitter will always update
         this.alwaysUpdate = true;
 
@@ -403,34 +398,34 @@ var ParticleEmitter = Renderable.extend({
 
         // Reset the emitter to defaults
         this.reset(settings);
-    },
+    }
 
     /**
      * @ignore
      */
-    onActivateEvent: function() {
+    onActivateEvent() {
         this.ancestor.addChild(this.container);
         this.container.pos.z = this.pos.z;
         if (!this.ancestor.autoSort) {
             this.ancestor.sort();
         }
-    },
+    }
 
     /**
      * @ignore
      */
-    onDeactivateEvent: function() {
+    onDeactivateEvent() {
         if (this.ancestor.hasChild(this.container)) {
             this.ancestor.removeChildNow(this.container);
         }
-    },
+    }
 
     /**
      * @ignore
      */
-    destroy: function () {
+    destroy() {
         this.reset();
-    },
+    }
 
     /**
      * returns a random point inside the bounds x axis of this emitter
@@ -439,9 +434,9 @@ var ParticleEmitter = Renderable.extend({
      * @function
      * @return {Number}
      */
-    getRandomPointX: function () {
+    getRandomPointX() {
         return this.pos.x + randomFloat(0, this.width);
-    },
+    }
 
     /**
      * returns a random point inside the bounds y axis of this emitter
@@ -450,9 +445,9 @@ var ParticleEmitter = Renderable.extend({
      * @function
      * @return {Number}
      */
-    getRandomPointY: function () {
+    getRandomPointY() {
         return this.pos.y + randomFloat(0, this.height);
-    },
+    }
 
     /**
      * Reset the emitter with default values.<br>
@@ -461,7 +456,7 @@ var ParticleEmitter = Renderable.extend({
      * @name reset
      * @memberOf me.ParticleEmitter
      */
-    reset: function (settings) {
+    reset(settings) {
         // check if settings exists and create a dummy object if necessary
         settings = settings || {};
         var defaults = ParticleEmitterSettings;
@@ -474,17 +469,17 @@ var ParticleEmitter = Renderable.extend({
 
         // reset particle container values
         this.container.reset();
-    },
+    }
 
     // Add count particles in the game world
     /** @ignore */
-    addParticles: function (count) {
+    addParticles(count) {
         for (var i = 0; i < ~~count; i++) {
             // Add particle to the container
             var particle = pool.pull("Particle", this);
             this.container.addChild(particle);
         }
-    },
+    }
 
     /**
      * Emitter is of type stream and is launching particles <br>
@@ -493,9 +488,9 @@ var ParticleEmitter = Renderable.extend({
      * @name isRunning
      * @memberOf me.ParticleEmitter
      */
-    isRunning: function () {
+    isRunning() {
         return this._enabled && this._stream;
-    },
+    }
 
     /**
      * Launch particles from emitter constantly <br>
@@ -505,12 +500,12 @@ var ParticleEmitter = Renderable.extend({
      * @name streamParticles
      * @memberOf me.ParticleEmitter
      */
-    streamParticles: function (duration) {
+    streamParticles(duration) {
         this._enabled = true;
         this._stream = true;
         this.frequency = Math.max(this.frequency, 1);
         this._durationTimer = (typeof duration === "number") ? duration : this.duration;
-    },
+    }
 
     /**
      * Stop the emitter from generating new particles (used only if emitter is Stream) <br>
@@ -518,9 +513,9 @@ var ParticleEmitter = Renderable.extend({
      * @name stopStream
      * @memberOf me.ParticleEmitter
      */
-    stopStream: function () {
+    stopStream() {
         this._enabled = false;
-    },
+    }
 
     /**
      * Launch all particles from emitter and stop <br>
@@ -530,17 +525,17 @@ var ParticleEmitter = Renderable.extend({
      * @name burstParticles
      * @memberOf me.ParticleEmitter
      */
-    burstParticles: function (total) {
+    burstParticles(total) {
         this._enabled = true;
         this._stream = false;
         this.addParticles((typeof total === "number") ? total : this.totalParticles);
         this._enabled = false;
-    },
+    }
 
     /**
      * @ignore
      */
-    update: function (dt) {
+    update(dt) {
         // Launch new particles, if emitter is Stream
         if ((this._enabled) && (this._stream)) {
             // Check if the emitter has duration set
@@ -571,5 +566,7 @@ var ParticleEmitter = Renderable.extend({
         }
         return true;
     }
-});
-export default ParticleEmitter;
+
+};
+
+export { ParticleEmitterSettings, ParticleEmitter };

package/src/particles/particle.js

@@ -12,18 +12,33 @@ import Renderable from "./../renderable/renderable.js";
  * @constructor
  * @param {me.ParticleEmitter} particle emitter
  */
-var Particle = Renderable.extend({
+class Particle extends Renderable {
     /**
      * @ignore
      */
-    init : function (emitter) {
+    constructor(emitter) {
         // Call the super constructor
-        this._super(Renderable, "init", [
+        super(
             emitter.getRandomPointX(),
             emitter.getRandomPointY(),
             emitter.image.width,
             emitter.image.height
-        ]);
+        );
+
+        // particle velocity
+        this.vel = new Vector2d();
+        this.onResetEvent(emitter, true);
+    }
+
+    onResetEvent(emitter, newInstance = false) {
+        if (newInstance === false) {
+            super.onResetEvent(
+                emitter.getRandomPointX(),
+                emitter.getRandomPointY(),
+                emitter.image.width,
+                emitter.image.height
+            );
+        }
 
         // Particle will always update
         this.alwaysUpdate = true;
@@ -36,7 +51,7 @@ var Particle = Renderable.extend({
         var speed = emitter.speed + ((emitter.speedVariation > 0) ? (randomFloat(0, 2) - 1) * emitter.speedVariation : 0);
 
         // Set the start particle Velocity
-        this.vel = new Vector2d(speed * Math.cos(angle), -speed * Math.sin(angle));
+        this.vel.set(speed * Math.cos(angle), -speed * Math.sin(angle));
 
         // Set the start particle Time of Life as defined in emitter
         this.life = randomFloat(emitter.minLife, emitter.maxLife);
@@ -76,7 +91,7 @@ var Particle = Renderable.extend({
         if (!emitter.followTrajectory) {
             this.angle = randomFloat(emitter.minRotation, emitter.maxRotation);
         }
-    },
+    }
 
     /**
      * Update the Particle <br>
@@ -87,7 +102,7 @@ var Particle = Renderable.extend({
      * @ignore
      * @param {Number} dt time since the last update in milliseconds
      */
-    update : function (dt) {
+    update(dt) {
         // move things forward independent of the current frame rate
         var skew = dt * this._deltaInv;
 
@@ -130,12 +145,12 @@ var Particle = Renderable.extend({
 
         // Return true if the particle is not dead yet
         return (this.inViewport || !this.onlyInViewport) && (this.life > 0);
-    },
+    }
 
     /**
      * @ignore
      */
-    preDraw : function (renderer) {
+    preDraw(renderer) {
 
         // restore is called in postDraw
         renderer.save();
@@ -145,12 +160,12 @@ var Particle = Renderable.extend({
 
         // translate to the defined anchor point and scale it
         renderer.transform(this.currentTransform);
-    },
+    }
 
     /**
      * @ignore
      */
-    draw : function (renderer) {
+    draw(renderer) {
         var w = this.width, h = this.height;
         renderer.drawImage(
             this.image,
@@ -160,6 +175,6 @@ var Particle = Renderable.extend({
             w, h
         );
     }
-});
+};
 
 export default Particle;

package/src/particles/particlecontainer.js

@@ -1,5 +1,5 @@
 import Container from "./../renderable/container.js";
-import game from "./../game.js";
+import { viewport } from "./../game.js";
 
 /**
  * Particle Container Object.
@@ -9,18 +9,20 @@ import game from "./../game.js";
  * @constructor
  * @param {me.ParticleEmitter} emitter the emitter which owns this container
  */
-var ParticleContainer = Container.extend({
+
+class ParticleContainer extends Container {
+
     /**
      * @ignore
      */
-    init: function (emitter) {
+    constructor(emitter) {
         // call the super constructor
-        this._super(Container, "init", [
-            game.viewport.pos.x,
-            game.viewport.pos.y,
-            game.viewport.width,
-            game.viewport.height
-        ]);
+        super(
+            viewport.pos.x,
+            viewport.pos.y,
+            viewport.width,
+            viewport.height
+        );
 
         // don't sort the particles by z-index
         this.autoSort = false;
@@ -39,12 +41,12 @@ var ParticleContainer = Container.extend({
         this.anchorPoint.set(0, 0);
 
         this.isKinematic = true;
-    },
+    }
 
     /**
      * @ignore
      */
-    update: function (dt) {
+    update(dt) {
         // skip frames if necessary
         if (++this._updateCount > this._emitter.framesToSkip) {
             this._updateCount = 0;
@@ -59,7 +61,6 @@ var ParticleContainer = Container.extend({
         this._dt = 0;
 
         // Update particles and remove them if they are dead
-        var viewport = game.viewport;
         for (var i = this.children.length - 1; i >= 0; --i) {
             var particle = this.children[i];
             particle.inViewport = viewport.isVisible(particle, this.floating);
@@ -68,12 +69,12 @@ var ParticleContainer = Container.extend({
             }
         }
         return true;
-    },
+    }
 
     /**
      * @ignore
      */
-    draw : function (renderer, rect) {
+    draw(renderer, rect) {
         if (this.children.length > 0) {
             var context = renderer.getContext(),
                 gco;
@@ -83,7 +84,7 @@ var ParticleContainer = Container.extend({
                 context.globalCompositeOperation = "lighter";
             }
 
-            this._super(Container, "draw", [renderer, rect]);
+            super.draw(renderer, rect);
 
             // Restore globalCompositeOperation
             if (this._emitter.textureAdditive) {
@@ -91,5 +92,5 @@ var ParticleContainer = Container.extend({
             }
         }
     }
-});
+};
 export default ParticleContainer;