melonjs 11.0.0 → 13.1.0

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"});
     }
 };
 

package/src/math/color.js

@@ -2,10 +2,19 @@ import { clamp, random } from "./math.js";
 import pool from "./../system/pooling.js";
 
 // convert a give color component to it hexadecimal value
-var toHex = function (component) {
+function toHex(component) {
     return "0123456789ABCDEF".charAt((component - (component % 16)) >> 4) + "0123456789ABCDEF".charAt(component % 16);
 };
 
+function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1/6) return p + (q - p) * 6 * t;
+    if (t < 1/2) return q;
+    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+    return p;
+}
+
 const rgbaRx = /^rgba?\((\d+), ?(\d+), ?(\d+)(, ?([\d\.]+))?\)$/;
 const hex3Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
 const hex4Rx = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])([\da-fA-F])$/;
@@ -199,7 +208,6 @@ class Color {
     /**
      * Color Red Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get r() {
         return ~~(this.glArray[0] * 255);
@@ -213,7 +221,6 @@ class Color {
     /**
      * Color Green Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get g() {
         return ~~(this.glArray[1] * 255);
@@ -227,7 +234,6 @@ class Color {
     /**
      * Color Blue Component [0 .. 255]
      * @type {number}
-     * @memberof Color
      */
     get b() {
         return ~~(this.glArray[2] * 255);
@@ -239,7 +245,6 @@ class Color {
     /**
      * Color Alpha Component [0.0 .. 1.0]
      * @type {number}
-     * @memberof Color
      */
     get alpha() {
         return this.glArray[3];
@@ -252,8 +257,6 @@ class Color {
 
     /**
      * Set this color to the specified value.
-     * @name setColor
-     * @memberof Color
      * @param {number} r red component [0 .. 255]
      * @param {number} g green component [0 .. 255]
      * @param {number} b blue component [0 .. 255]
@@ -268,10 +271,59 @@ class Color {
         return this;
     }
 
+    /**
+     * set this color to the specified HSV value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} v value (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSV(h, s, v) {
+        var r, g, b;
+
+        var i = Math.floor(h * 6);
+        var f = h * 6 - i;
+        var p = v * (1 - s);
+        var q = v * (1 - f * s);
+        var t = v * (1 - (1 - f) * s);
+
+        switch (i % 6) {
+            case 0: r = v, g = t, b = p; break;
+            case 1: r = q, g = v, b = p; break;
+            case 2: r = p, g = v, b = t; break;
+            case 3: r = p, g = q, b = v; break;
+            case 4: r = t, g = p, b = v; break;
+            case 5: r = v, g = p, b = q; break;
+        }
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
+    /**
+     * set this color to the specified HSL value
+     * @param {number} h hue (a value from 0 to 1)
+     * @param {number} s saturation (a value from 0 to 1)
+     * @param {number} l lightness (a value from 0 to 1)
+     * @returns {Color} Reference to this object for method chaining
+     */
+    setHSL(h, s, l) {
+        var r, g, b;
+
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        } else {
+            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            var p = 2 * l - q;
+
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+
+        return this.setColor(r * 255, g * 255, b * 255);
+    }
+
     /**
      * Create a new copy of this color object.
-     * @name clone
-     * @memberof Color
      * @returns {Color} Reference to the newly cloned object
      */
     clone() {
@@ -280,8 +332,6 @@ class Color {
 
     /**
      * Copy a color object or CSS color into this one.
-     * @name copy
-     * @memberof Color
      * @param {Color|string} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -296,8 +346,6 @@ class Color {
 
     /**
      * Blend this color with the given one using addition.
-     * @name add
-     * @memberof Color
      * @param {Color} color
      * @returns {Color} Reference to this object for method chaining
      */
@@ -312,8 +360,6 @@ class Color {
 
     /**
      * Darken this color value by 0..1
-     * @name darken
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -328,8 +374,6 @@ class Color {
 
     /**
      * Linearly interpolate between this color and the given one.
-     * @name lerp
-     * @memberof Color
      * @param {Color} color
      * @param {number} alpha with alpha = 0 being this color, and alpha = 1 being the given one.
      * @returns {Color} Reference to this object for method chaining
@@ -345,8 +389,6 @@ class Color {
 
     /**
      * Lighten this color value by 0..1
-     * @name lighten
-     * @memberof Color
      * @param {number} scale
      * @returns {Color} Reference to this object for method chaining
      */
@@ -361,8 +403,6 @@ class Color {
 
     /**
      * Generate random r,g,b values for this color object
-     * @name random
-     * @memberof Color
      * @param {number} [min=0] minimum value for the random range
      * @param {number} [max=255] maxmium value for the random range
      * @returns {Color} Reference to this object for method chaining
@@ -386,8 +426,6 @@ class Color {
     /**
      * Return true if the r,g,b,a values of this color are equal with the
      * given one.
-     * @name equals
-     * @memberof Color
      * @param {Color} color
      * @returns {boolean}
      */
@@ -403,8 +441,6 @@ class Color {
     /**
      * Parse a CSS color string and set this color to the corresponding
      * r,g,b values
-     * @name parseCSS
-     * @memberof Color
      * @param {string} cssColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -420,8 +456,6 @@ class Color {
 
     /**
      * Parse an RGB or RGBA CSS color string
-     * @name parseRGB
-     * @memberof Color
      * @param {string} rgbColor
      * @returns {Color} Reference to this object for method chaining
      */
@@ -439,8 +473,6 @@ class Color {
     /**
      * Parse a Hex color ("#RGB", "#RGBA" or "#RRGGBB", "#RRGGBBAA" format) and set this color to
      * the corresponding r,g,b,a values
-     * @name parseHex
-     * @memberof Color
      * @param {string} hexColor
      * @param {boolean} [argb = false] true if format is #ARGB, or #AARRGGBB (as opposed to #RGBA or #RGGBBAA)
      * @returns {Color} Reference to this object for method chaining
@@ -498,8 +530,6 @@ class Color {
 
     /**
      * Pack this color into a Uint32 ARGB representation
-     * @name toUint32
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {number}
      */
@@ -514,8 +544,6 @@ class Color {
 
     /**
      * return an array representation of this object
-     * @name toArray
-     * @memberof Color
      * @returns {Float32Array}
      */
     toArray() {
@@ -524,9 +552,7 @@ class Color {
 
 
     /**
-     * Get the color in "#RRGGBB" format
-     * @name toHex
-     * @memberof Color
+     * return the color in "#RRGGBB" format
      * @returns {string}
      */
     toHex() {
@@ -538,8 +564,6 @@ class Color {
 
     /**
      * Get the color in "#RRGGBBAA" format
-     * @name toHex8
-     * @memberof Color
      * @returns {string}
      */
     toHex8(alpha = this.alpha) {
@@ -551,8 +575,6 @@ class Color {
 
     /**
      * Get the color in "rgb(R,G,B)" format
-     * @name toRGB
-     * @memberof Color
      * @returns {string}
      */
     toRGB() {
@@ -568,8 +590,6 @@ class Color {
 
     /**
      * Get the color in "rgba(R,G,B,A)" format
-     * @name toRGBA
-     * @memberof Color
      * @param {number} [alpha=1.0] alpha value [0.0 .. 1.0]
      * @returns {string}
      */

package/src/math/observable_vector2.js

@@ -388,8 +388,32 @@ class ObservableVector2d extends Vector2d {
      * @returns {ObservableVector2d} Reference to this object for method chaining
      */
     lerp(v, alpha) {
-        this._x += ( v.x - this._x ) * alpha;
-        this._y += ( v.y - this._y ) * alpha;
+        return this._set(
+            this._x + ( v.x - this._x ) * alpha,
+            this._y + ( v.y - this._y ) * alpha
+        );
+    }
+
+    /**
+     * interpolate the position of this vector towards the given one while nsure that the distance never exceeds the given step.
+     * @name moveTowards
+     * @memberof ObservableVector2d
+     * @param {Vector2d|ObservableVector2d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {ObservableVector2d} Reference to this object for method chaining
+     */
+     moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this._y, target.x - this._x);
+
+        var distance = this.distance(target);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this._x += Math.cos(angle) * step;
+        this._y += Math.sin(angle) * step;
+
         return this;
     }
 

package/src/math/observable_vector3.js

@@ -465,10 +465,38 @@ class ObservableVector3d extends Vector3d {
      * @returns {ObservableVector3d} Reference to this object for method chaining
      */
     lerp(v, alpha) {
-        this._x += ( v.x - this._x ) * alpha;
-        this._y += ( v.y - this._y ) * alpha;
-        this._z += ( v.z - this._z ) * alpha;
-        return this;
+        return this._set(
+            this._x + ( v.x - this._x ) * alpha,
+            this._y + ( v.y - this._y ) * alpha,
+            this._z + ( v.z - this._z ) * alpha
+        );
+    }
+
+    /**
+     * interpolate the position of this vector on the x and y axis towards the given one while ensure that the distance never exceeds the given step.
+     * @name moveTowards
+     * @memberof ObservableVector3d
+     * @param {Vector2d|ObservableVector2d|Vector3d|ObservableVector3d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {ObservableVector3d} Reference to this object for method chaining
+     */
+    moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this._y, target.x - this._x);
+
+        var dx = this._x - target.x;
+        var dy = this._y - target.y;
+
+        var distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        return this._set(
+            this._x + Math.cos(angle) * step,
+            this._y + Math.sin(angle) * step,
+            this._z
+        );
     }
 
     /**

package/src/math/vector2.js

@@ -426,6 +426,29 @@ class Vector2d {
         return this;
     }
 
+    /**
+     * interpolate the position of this vector towards the given one by the given maximum step.
+     * @name moveTowards
+     * @memberof Vector2d
+     * @param {Vector2d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {Vector2d} Reference to this object for method chaining
+     */
+     moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this.y, target.x - this.x);
+
+        var distance = this.distance(target);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this.x += Math.cos(angle) * step;
+        this.y += Math.sin(angle) * step;
+
+        return this;
+    }
+
     /**
      * return the distance between this vector and the passed one
      * @name distance

package/src/math/vector3.js

@@ -460,6 +460,32 @@ class Vector3d {
         return this;
     }
 
+    /**
+     * interpolate the position of this vector on the x and y axis towards the given one by the given maximum step.
+     * @name moveTowards
+     * @memberof Vector3d
+     * @param {Vector2d|Vector3d} target
+     * @param {number} step the maximum step per iteration (Negative values will push the vector away from the target)
+     * @returns {Vector3d} Reference to this object for method chaining
+     */
+    moveTowards(target, step) {
+        var angle = Math.atan2(target.y - this.y, target.x - this.x);
+
+        var dx = this.x - target.x;
+        var dy = this.y - target.y;
+
+        var distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance === 0 || (step >= 0 && distance <= step * step)) {
+            return target;
+        }
+
+        this.x += Math.cos(angle) * step;
+        this.y += Math.sin(angle) * step;
+
+        return this;
+    }
+
     /**
      * return the distance between this vector and the passed one
      * @name distance