melonjs 10.3.0 → 10.4.0

package/src/renderable/container.js

@@ -19,19 +19,14 @@ var globalFloatingCounter = 0;
 /**
  * @classdesc
  * me.Container represents a collection of child objects
- * @class Container
- * @augments me.Renderable
- * @memberof me
- * @param {number} [x=0] position of the container (accessible via the inherited pos.x property)
- * @param {number} [y=0] position of the container (accessible via the inherited pos.y property)
- * @param {number} [w=me.game.viewport.width] width of the container
- * @param {number} [h=me.game.viewport.height] height of the container
+ * @augments Renderable
  */
-
 class Container extends Renderable {
-
     /**
-     * @ignore
+     * @param {number} [x=0] position of the container (accessible via the inherited pos.x property)
+     * @param {number} [y=0] position of the container (accessible via the inherited pos.y property)
+     * @param {number} [width=game.viewport.width] width of the container
+     * @param {number} [height=game.viewport.height] height of the container
      */
     constructor(x = 0, y = 0, width = game.viewport.width, height = game.viewport.height, root = false) {
 
@@ -50,7 +45,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name root
-         * @memberof me.Container
+         * @memberof Container
          */
         this.root = root;
 
@@ -67,7 +62,7 @@ class Container extends Renderable {
          * @type {string}
          * @default me.game.sortOn
          * @name sortOn
-         * @memberof me.Container
+         * @memberof Container
          */
         this.sortOn = game.sortOn;
 
@@ -77,7 +72,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default true
          * @name autoSort
-         * @memberof me.Container
+         * @memberof Container
          */
         this.autoSort = true;
 
@@ -87,7 +82,7 @@ class Container extends Renderable {
          * @type {boolean}
          * @default true
          * @name autoDepth
-         * @memberof me.Container
+         * @memberof Container
          */
         this.autoDepth = true;
 
@@ -97,14 +92,14 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name clipping
-         * @memberof me.Container
+         * @memberof Container
          */
         this.clipping = false;
 
         /**
          * a callback to be extended, triggered after a child has been added or removed
          * @name onChildChange
-         * @memberof me.Container#
+         * @memberof Container#
          * @function
          * @param {number} index added or removed child index
          */
@@ -120,10 +115,23 @@ class Container extends Renderable {
          * @type {boolean}
          * @default false
          * @name enableChildBoundsUpdate
-         * @memberof me.Container
+         * @memberof Container
          */
         this.enableChildBoundsUpdate = false;
 
+        /**
+         * define a background color for this container
+         * @public
+         * @type {Color}
+         * @name backgroundColor
+         * @default (0, 0, 0, 0.0)
+         * @memberof Container
+         * @example
+         * // add a red background color to this container
+         * this.backgroundColor.setColor(255, 0, 0);
+         */
+        this.backgroundColor = pool.pull("Color", 0, 0, 0, 0.0);
+
         /**
          * Used by the debug panel plugin
          * @ignore
@@ -148,7 +156,7 @@ class Container extends Renderable {
     /**
      * reset the container, removing all childrens, and reseting transforms.
      * @name reset
-     * @memberof me.Container
+     * @memberof Container
      * @function
      */
     reset() {
@@ -171,6 +179,8 @@ class Container extends Renderable {
             // just reset some variables
             this.currentTransform.identity();
         }
+
+        this.backgroundColor.setColor(0, 0, 0, 0.0);
     }
 
     /**
@@ -182,11 +192,11 @@ class Container extends Renderable {
      * orginal container.  Then when the me.game.world.reset() is called the renderable
      * will not be in any container.
      * @name addChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {number} [z] forces the z index of the child to the specified value
-     * @returns {me.Renderable} the added child
+     * @returns {Renderable} the added child
      */
     addChild(child, z) {
         if (child.ancestor instanceof Container) {
@@ -246,11 +256,11 @@ class Container extends Renderable {
      * Add a child to the container at the specified index<br>
      * (the list won't be sorted after insertion)
      * @name addChildAt
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {number} index
-     * @returns {me.Renderable} the added child
+     * @returns {Renderable} the added child
      */
     addChildAt(child, index) {
         if (index >= 0 && index < this.getChildren().length) {
@@ -305,7 +315,7 @@ class Container extends Renderable {
      *    - The index of element in the array. <br>
      *    - The array forEach() was called upon. <br>
      * @name forEach
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {Function} callback fnction to execute on each element
      * @param {object} [thisArg] value to use as this(i.e reference Object) when executing callback.
@@ -342,10 +352,10 @@ class Container extends Renderable {
     /**
      * Swaps the position (z-index) of 2 children
      * @name swapChildren
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
-     * @param {me.Renderable} child2
+     * @param {Renderable} child
+     * @param {Renderable} child2
      */
     swapChildren(child, child2) {
         var index = this.getChildIndex(child);
@@ -368,10 +378,10 @@ class Container extends Renderable {
     /**
      * Returns the Child at the specified index
      * @name getChildAt
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {number} index
-     * @returns {me.Renderable} the child at the specified index
+     * @returns {Renderable} the child at the specified index
      */
     getChildAt(index) {
         if (index >= 0 && index < this.getChildren().length) {
@@ -385,9 +395,9 @@ class Container extends Renderable {
     /**
      * Returns the index of the given Child
      * @name getChildIndex
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @returns {number} index
      */
     getChildIndex(child) {
@@ -397,10 +407,10 @@ class Container extends Renderable {
     /**
      * Returns the next child within the container or undefined if none
      * @name getNextChild
-     * @memberof me.Container
+     * @memberof Container
      * @function
-     * @param {me.Renderable} child
-     * @returns {me.Renderable} child
+     * @param {Renderable} child
+     * @returns {Renderable} child
      */
     getNextChild(child) {
         var index = this.getChildren().indexOf(child) - 1;
@@ -413,9 +423,9 @@ class Container extends Renderable {
     /**
      * Returns true if contains the specified Child
      * @name hasChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @returns {boolean}
      */
     hasChild(child) {
@@ -427,12 +437,12 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object tree each time
      * @name getChildByProp
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string} prop Property name
      * @param {string|RegExp|number|boolean} value Value of the property
-     * @returns {me.Renderable[]} Array of childs
+     * @returns {Renderable[]} Array of childs
      * @example
      * // get the first child object called "mainPlayer" in a specific container :
      * var ent = myContainer.getChildByProp("name", "mainPlayer");
@@ -479,11 +489,11 @@ class Container extends Renderable {
     /**
      * returns the list of childs with the specified class type
      * @name getChildByType
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {object} classType
-     * @returns {me.Renderable[]} Array of children
+     * @returns {Renderable[]} Array of children
      */
     getChildByType(classType) {
         var objList = [];
@@ -506,11 +516,11 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
      * @name getChildByName
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string|RegExp|number|boolean} name child name
-     * @returns {me.Renderable[]} Array of children
+     * @returns {Renderable[]} Array of children
      */
     getChildByName(name) {
         return this.getChildByProp("name", name);
@@ -521,11 +531,11 @@ class Container extends Renderable {
      * note : avoid calling this function every frame since
      * it parses the whole object list each time
      * @name getChildByGUID
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {string|RegExp|number|boolean} guid child GUID
-     * @returns {me.Renderable} corresponding child or null
+     * @returns {Renderable} corresponding child or null
      */
     getChildByGUID(guid) {
         var obj = this.getChildByProp("GUID", guid);
@@ -535,10 +545,10 @@ class Container extends Renderable {
     /**
      * return all child in this container
      * @name getChildren
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
-     * @returns {me.Renderable[]} an array of renderable object
+     * @returns {Renderable[]} an array of renderable object
      */
     getChildren() {
         if (typeof this.children === "undefined") {
@@ -551,9 +561,9 @@ class Container extends Renderable {
      * update the bounding box for this shape.
      * @ignore
      * @name updateBounds
-     * @memberof me.Renderable.prototype
+     * @memberof Renderable.prototype
      * @function
-     * @returns {me.Bounds} this shape bounding box Rectangle object
+     * @returns {Bounds} this shape bounding box Rectangle object
      */
     updateBounds(forceUpdateChildBounds = false) {
 
@@ -580,7 +590,7 @@ class Container extends Renderable {
      * Checks if this container is root or if it's attached to the root container.
      * @private
      * @name isAttachedToRoot
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @returns {boolean}
      */
@@ -603,7 +613,7 @@ class Container extends Renderable {
      * update the cointainer's bounding rect (private)
      * @ignore
      * @name updateBoundsPos
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      */
     updateBoundsPos(newX, newY) {
@@ -638,10 +648,10 @@ class Container extends Renderable {
     /**
      * Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed
      * @name removeChild
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {boolean} [keepalive=False] True to prevent calling child.destroy()
      */
     removeChild(child, keepalive) {
@@ -656,11 +666,11 @@ class Container extends Renderable {
     /**
      * Removes (and optionally destroys) a child from the container.<br>
      * (removal is immediate and unconditional)<br>
-     * Never use keepalive=true with objects from {@link me.pool}. Doing so will create a memory leak.
+     * Never use keepalive=true with objects from {@link pool}. Doing so will create a memory leak.
      * @name removeChildNow
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      * @param {boolean} [keepalive=False] True to prevent calling child.destroy()
      */
     removeChildNow(child, keepalive) {
@@ -711,7 +721,7 @@ class Container extends Renderable {
     /**
      * Automatically set the specified property of all childs to the given value
      * @name setChildsProperty
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @param {string} prop property name
      * @param {object} value property value
@@ -729,9 +739,9 @@ class Container extends Renderable {
     /**
      * Move the child in the group one step forward (z depth).
      * @name moveUp
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveUp(child) {
         var childIndex = this.getChildIndex(child);
@@ -744,9 +754,9 @@ class Container extends Renderable {
     /**
      * Move the child in the group one step backward (z depth).
      * @name moveDown
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveDown(child) {
         var childIndex = this.getChildIndex(child);
@@ -759,9 +769,9 @@ class Container extends Renderable {
     /**
      * Move the specified child to the top(z depth).
      * @name moveToTop
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveToTop(child) {
         var childIndex = this.getChildIndex(child);
@@ -777,9 +787,9 @@ class Container extends Renderable {
     /**
      * Move the specified child the bottom (z depth).
      * @name moveToBottom
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
-     * @param {me.Renderable} child
+     * @param {Renderable} child
      */
     moveToBottom(child) {
         var childIndex = this.getChildIndex(child);
@@ -795,7 +805,7 @@ class Container extends Renderable {
     /**
      * Manually trigger the sort of all the childs in the container</p>
      * @name sort
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @public
      * @function
      * @param {boolean} [recursive=false] recursively sort all containers if true
@@ -888,9 +898,9 @@ class Container extends Renderable {
 
     /**
      * container update function. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name update
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @protected
      * @param {number} dt time since the last update in milliseconds.
@@ -941,13 +951,13 @@ class Container extends Renderable {
 
     /**
      * draw the container. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof me.Container.prototype
+     * @memberof Container.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
-     * @param {me.Rect|me.Bounds} [rect] the area or viewport to (re)draw
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
+     * @param {Rect|Bounds} [rect] the area or viewport to (re)draw
      */
     draw(renderer, rect) {
         var isFloating = false;
@@ -968,6 +978,11 @@ class Container extends Renderable {
         // adjust position if required (e.g. canvas/window centering)
         renderer.translate(this.pos.x, this.pos.y);
 
+        // color background if defined
+        if (this.backgroundColor.alpha > 1 / 255) {
+            renderer.clearColor(this.backgroundColor);
+        }
+
         var children = this.getChildren();
         for (var i = children.length, obj; i--, (obj = children[i]);) {
             if (obj.isRenderable) {

package/src/renderable/imagelayer.js

@@ -9,31 +9,25 @@ import * as stringUtil from "./../utils/string.js";
 /**
  * @classdesc
  * a generic Image Layer Object
- * @class ImageLayer
- * @augments me.Renderable
- * @memberof me
- * @param {number} x x coordinate
- * @param {number} y y coordinate
- * @param {object} settings ImageLayer properties
- * @param {HTMLImageElement|HTMLCanvasElement|string} settings.image Image reference. See {@link me.loader.getImage}
- * @param {string} [settings.name="me.ImageLayer"] layer name
- * @param {number} [settings.z=0] z-index position
- * @param {number|me.Vector2d} [settings.ratio=1.0] Scrolling ratio to be applied. See {@link me.ImageLayer#ratio}
- * @param {string} [settings.repeat='repeat'] define if and how an Image Layer should be repeated (accepted values are 'repeat',
-'repeat-x', 'repeat-y', 'no-repeat'). See {@link me.ImageLayer#repeat}
- * @param {number|me.Vector2d} [settings.anchorPoint=0.0] Image origin. See {@link me.ImageLayer#anchorPoint}
- * @example
- * // create a repetitive background pattern on the X axis using the citycloud image asset
- * me.game.world.addChild(new me.ImageLayer(0, 0, {
- *     image:"citycloud",
- *     repeat :"repeat-x"
- * }), 1);
+ * @augments Renderable
  */
-
 class ImageLayer extends Sprite {
-
     /**
-     * @ignore
+     * @param {number} x x coordinate
+     * @param {number} y y coordinate
+     * @param {object} settings ImageLayer properties
+     * @param {HTMLImageElement|HTMLCanvasElement|string} settings.image Image reference. See {@link loader.getImage}
+     * @param {string} [settings.name="me.ImageLayer"] layer name
+     * @param {number} [settings.z=0] z-index position
+     * @param {number|Vector2d} [settings.ratio=1.0] Scrolling ratio to be applied. See {@link ImageLayer#ratio}
+     * @param {string} [settings.repeat='repeat'] define if and how an Image Layer should be repeated (accepted values are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'). See {@link ImageLayer#repeat}
+     * @param {number|Vector2d} [settings.anchorPoint=0.0] Image origin. See {@link ImageLayer#anchorPoint}
+     * @example
+     * // create a repetitive background pattern on the X axis using the citycloud image asset
+     * me.game.world.addChild(new me.ImageLayer(0, 0, {
+     *     image:"citycloud",
+     *     repeat :"repeat-x"
+     * }), 1);
      */
     constructor(x, y, settings) {
         // call the constructor
@@ -53,9 +47,9 @@ class ImageLayer extends Sprite {
          * - a number, to change the value for both axis <br>
          * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
          * @public
-         * @type {me.Vector2d}
+         * @type {Vector2d}
          * @default <1.0,1.0>
-         * @name me.ImageLayer#ratio
+         * @name ImageLayer#ratio
          */
         this.ratio = pool.pull("Vector2d", 1.0, 1.0);
 
@@ -81,9 +75,9 @@ class ImageLayer extends Sprite {
              * - a number, to change the value for both axis <br>
              * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
              * @public
-             * @type {me.Vector2d}
+             * @type {Vector2d}
              * @default <0.0,0.0>
-             * @name me.ImageLayer#anchorPoint
+             * @name ImageLayer#anchorPoint
              */
             this.anchorPoint.set(0, 0);
         }
@@ -113,7 +107,7 @@ class ImageLayer extends Sprite {
      * @public
      * @type {string}
      * @default 'repeat'
-     * @name me.ImageLayer#repeat
+     * @name ImageLayer#repeat
      */
 
     get repeat() {
@@ -165,7 +159,7 @@ class ImageLayer extends Sprite {
     /**
      * resize the Image Layer to match the given size
      * @name resize
-     * @memberof me.ImageLayer.prototype
+     * @memberof ImageLayer.prototype
      * @function
      * @param {number} w new width
      * @param {number} h new height
@@ -253,12 +247,12 @@ class ImageLayer extends Sprite {
 
     /**
      * draw the ImageLayer. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name draw
-     * @memberof me.ImageLayer.prototype
+     * @memberof ImageLayer.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     draw(renderer) {
         var width = this.width,