melonjs 9.1.0 → 10.0.1

package/src/renderable/imagelayer.js

@@ -1,12 +1,13 @@
-import video from "./../video/video.js";
-import event from "./../system/event.js";
+import { renderer } from "./../video/video.js";
+import * as event from "./../system/event.js";
 import pool from "./../system/pooling.js";
-import game from "./../game.js";
+import { viewport } from "./../game.js";
 import Sprite from "./sprite.js";
-import utils from "./../utils/utils.js";
+import * as stringUtil from "./../utils/string.js";
 
 
 /**
+ * @classdesc
  * a generic Image Layer Object
  * @class
  * @extends me.Renderable
@@ -29,13 +30,15 @@ import utils from "./../utils/utils.js";
  *     repeat :"repeat-x"
  * }), 1);
  */
-var ImageLayer = Sprite.extend({
+
+class ImageLayer extends Sprite {
+
     /**
      * @ignore
      */
-    init: function (x, y, settings) {
+    constructor(x, y, settings) {
         // call the constructor
-        this._super(Sprite, "init", [x, y, settings]);
+        super(x, y, settings);
 
         // render in screen coordinates
         this.floating = true;
@@ -59,7 +62,7 @@ var ImageLayer = Sprite.extend({
 
         if (typeof(settings.ratio) !== "undefined") {
             // little hack for backward compatiblity
-            if (utils.string.isNumeric(settings.ratio)) {
+            if (stringUtil.isNumeric(settings.ratio)) {
                 this.ratio.set(settings.ratio, +settings.ratio);
             } else /* vector */ {
                 this.ratio.setV(settings.ratio);
@@ -94,78 +97,77 @@ var ImageLayer = Sprite.extend({
             }
         }
 
-        /**
-         * Define if and how an Image Layer should be repeated.<br>
-         * By default, an Image Layer is repeated both vertically and horizontally.<br>
-         * Acceptable values : <br>
-         * * 'repeat' - The background image will be repeated both vertically and horizontally <br>
-         * * 'repeat-x' - The background image will be repeated only horizontally.<br>
-         * * 'repeat-y' - The background image will be repeated only vertically.<br>
-         * * 'no-repeat' - The background-image will not be repeated.<br>
-         * @public
-         * @type String
-         * @default 'repeat'
-         * @name me.ImageLayer#repeat
-         */
-        Object.defineProperty(this, "repeat", {
-            /**
-             * @ignore
-             */
-            get : function get() {
-                return this._repeat;
-            },
-            /**
-             * @ignore
-             */
-            set : function set(val) {
-                this._repeat = val;
-                switch (this._repeat) {
-                    case "no-repeat" :
-                        this.repeatX = false;
-                        this.repeatY = false;
-                        break;
-                    case "repeat-x" :
-                        this.repeatX = true;
-                        this.repeatY = false;
-                        break;
-                    case "repeat-y" :
-                        this.repeatX = false;
-                        this.repeatY = true;
-                        break;
-                    default : // "repeat"
-                        this.repeatX = true;
-                        this.repeatY = true;
-                        break;
-                }
-                this.resize(game.viewport.width, game.viewport.height);
-                this.createPattern();
-            },
-            configurable: true
-        });
-
         this.repeat = settings.repeat || "repeat";
 
         // on context lost, all previous textures are destroyed
-        event.subscribe(event.WEBGL_ONCONTEXT_RESTORED, this.createPattern.bind(this));
-    },
+        event.on(event.WEBGL_ONCONTEXT_RESTORED, this.createPattern, this);
+    }
+
+    /**
+     * Define if and how an Image Layer should be repeated.<br>
+     * By default, an Image Layer is repeated both vertically and horizontally.<br>
+     * Acceptable values : <br>
+     * * 'repeat' - The background image will be repeated both vertically and horizontally <br>
+     * * 'repeat-x' - The background image will be repeated only horizontally.<br>
+     * * 'repeat-y' - The background image will be repeated only vertically.<br>
+     * * 'no-repeat' - The background-image will not be repeated.<br>
+     * @public
+     * @type String
+     * @default 'repeat'
+     * @name me.ImageLayer#repeat
+     */
+
+    /**
+     * @ignore
+     */
+    get repeat() {
+        return this._repeat;
+    }
+
+    /**
+     * @ignore
+     */
+    set repeat(value) {
+        this._repeat = value;
+        switch (this._repeat) {
+            case "no-repeat" :
+                this.repeatX = false;
+                this.repeatY = false;
+                break;
+            case "repeat-x" :
+                this.repeatX = true;
+                this.repeatY = false;
+                break;
+            case "repeat-y" :
+                this.repeatX = false;
+                this.repeatY = true;
+                break;
+            default : // "repeat"
+                this.repeatX = true;
+                this.repeatY = true;
+                break;
+        }
+        this.resize(viewport.width, viewport.height);
+        this.createPattern();
+    }
+
 
     // called when the layer is added to the game world or a container
-    onActivateEvent : function () {
-        var _updateLayerFn = this.updateLayer.bind(this);
+    onActivateEvent() {
         // register to the viewport change notification
-        this.vpChangeHdlr = event.subscribe(event.VIEWPORT_ONCHANGE, _updateLayerFn);
-        this.vpResizeHdlr = event.subscribe(event.VIEWPORT_ONRESIZE, this.resize.bind(this));
-        this.vpLoadedHdlr = event.subscribe(event.LEVEL_LOADED, function() {
-            // force a first refresh when the level is loaded
-            _updateLayerFn(game.viewport.pos);
+        event.on(event.VIEWPORT_ONCHANGE, this.updateLayer, this);
+        event.on(event.VIEWPORT_ONRESIZE, this.resize, this);
+        // force a first refresh when the level is loaded
+        event.once(event.LEVEL_LOADED, () => {
+            this.updateLayer(viewport.pos);
         });
         // in case the level is not added to the root container,
         // the onActivateEvent call happens after the LEVEL_LOADED event
         // so we need to force a first update
         if (this.ancestor.root !== true) {
-            this.updateLayer(game.viewport.pos);
+            this.updateLayer(viewport.pos);
         }
-    },
+    }
 
     /**
      * resize the Image Layer to match the given size
@@ -175,28 +177,28 @@ var ImageLayer = Sprite.extend({
      * @param {Number} w new width
      * @param {Number} h new height
     */
-    resize : function (w, h) {
-        this._super(Sprite, "resize", [
+    resize(w, h) {
+        super.resize(
             this.repeatX ? Infinity : w,
             this.repeatY ? Infinity : h
-        ]);
-    },
+        );
+    }
 
     /**
      * createPattern function
      * @ignore
      * @function
      */
-    createPattern : function () {
-        this._pattern = video.renderer.createPattern(this.image, this._repeat);
-    },
+    createPattern() {
+        this._pattern = renderer.createPattern(this.image, this._repeat);
+    }
 
     /**
      * updateLayer function
      * @ignore
      * @function
      */
-    updateLayer : function (vpos) {
+    updateLayer(vpos) {
         var rx = this.ratio.x,
             ry = this.ratio.y;
 
@@ -205,8 +207,7 @@ var ImageLayer = Sprite.extend({
             return;
         }
 
-        var viewport = game.viewport,
-            width = this.width,
+        var width = this.width,
             height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
@@ -238,14 +239,14 @@ var ImageLayer = Sprite.extend({
         else {
             this.pos.y = y;
         }
-    },
+    }
 
    /*
     * override the default predraw function
     * as repeat and anchor are managed directly in the draw method
     * @ignore
     */
-    preDraw : function (renderer) {
+    preDraw(renderer) {
         // save the context
         renderer.save();
         // apply the defined alpha value
@@ -253,15 +254,14 @@ var ImageLayer = Sprite.extend({
 
         // apply the defined tint, if any
         renderer.setTint(this.tint);
-    },
+    }
 
     /**
      * draw the image layer
      * @ignore
      */
-    draw : function (renderer) {
-        var viewport = game.viewport,
-            width = this.width,
+    draw(renderer) {
+        var width = this.width,
             height = this.height,
             bw = viewport.bounds.width,
             bh = viewport.bounds.height,
@@ -284,25 +284,26 @@ var ImageLayer = Sprite.extend({
             viewport.width * 2,
             viewport.height * 2
         );
-    },
+    }
 
     // called when the layer is removed from the game world or a container
-    onDeactivateEvent : function () {
+    onDeactivateEvent() {
         // cancel all event subscriptions
-        event.unsubscribe(this.vpChangeHdlr);
-        event.unsubscribe(this.vpResizeHdlr);
-        event.unsubscribe(this.vpLoadedHdlr);
-    },
+        event.off(event.VIEWPORT_ONCHANGE, this.updateLayer);
+        event.off(event.VIEWPORT_ONRESIZE, this.resize);
+    }
 
     /**
      * Destroy function<br>
      * @ignore
      */
-    destroy : function () {
+    destroy() {
         pool.push(this.ratio);
         this.ratio = undefined;
-        this._super(Sprite, "destroy");
+        event.off(event.WEBGL_ONCONTEXT_RESTORED, this.createPattern);
+        super.destroy();
     }
-});
+
+};
 
 export default ImageLayer;