melonjs 10.3.0 → 10.5.1

package/src/video/texture.js

@@ -28,42 +28,41 @@ export function createAtlas(width, height, name = "default", repeat = "no-repeat
 
 /**
  * @classdesc
- * A Texture atlas object, currently supports : <br>
+ * A Texture atlas class, currently supports : <br>
  * - [TexturePacker]{@link http://www.codeandweb.com/texturepacker/} : through JSON export (standard and multipack texture atlas) <br>
  * - [ShoeBox]{@link http://renderhjs.net/shoebox/} : through JSON export using the
  * melonJS setting [file]{@link https://github.com/melonjs/melonJS/raw/master/media/shoebox_JSON_export.sbx} <br>
  * - [Free Texture Packer]{@link http://free-tex-packer.com/app/} : through JSON export (standard and multipack texture atlas) <br>
  * - Standard (fixed cell size) spritesheet : through a {framewidth:xx, frameheight:xx, anchorPoint:me.Vector2d} object
- * @class Texture
- * @memberof me.Renderer
- * @param {object|object[]} atlases atlas information. See {@link me.loader.getJSON}
- * @param {HTMLImageElement|HTMLCanvasElement|string|HTMLImageElement[]|HTMLCanvasElement[]|string[]} [src=atlas.meta.image] Image source
- * @param {boolean} [cache=false] Use true to skip caching this Texture
- * @example
- * // create a texture atlas from a JSON Object
- * game.texture = new me.video.renderer.Texture(
- *     me.loader.getJSON("texture")
- * );
- *
- * // create a texture atlas from a multipack JSON Object
- * game.texture = new me.video.renderer.Texture([
- *     me.loader.getJSON("texture-0"),
- *     me.loader.getJSON("texture-1"),
- *     me.loader.getJSON("texture-2")
- * ]);
- *
- * // create a texture atlas for a spritesheet with an anchorPoint in the center of each frame
- * game.texture = new me.video.renderer.Texture(
- *     {
- *         framewidth : 32,
- *         frameheight : 32,
- *         anchorPoint : new me.Vector2d(0.5, 0.5)
- *     },
- *     me.loader.getImage("spritesheet")
  * );
  */
-export class Texture {
-
+export class TextureAtlas {
+    /**
+     * @param {object|object[]} atlases atlas information. See {@link loader.getJSON}
+     * @param {HTMLImageElement|HTMLCanvasElement|string|HTMLImageElement[]|HTMLCanvasElement[]|string[]} [src=atlas.meta.image] Image source
+     * @param {boolean} [cache=false] Use true to skip caching this Texture
+     * @example
+     * // create a texture atlas from a JSON Object
+     * game.texture = new me.TextureAtlas(
+     *     me.loader.getJSON("texture")
+     * );
+     *
+     * // create a texture atlas from a multipack JSON Object
+     * game.texture = new me.TextureAtlas([
+     *     me.loader.getJSON("texture-0"),
+     *     me.loader.getJSON("texture-1"),
+     *     me.loader.getJSON("texture-2")
+     * ]);
+     *
+     * // create a texture atlas for a spritesheet with an anchorPoint in the center of each frame
+     * game.texture = new me.TextureAtlas(
+     *     {
+     *         framewidth : 32,
+     *         frameheight : 32,
+     *         anchorPoint : new me.Vector2d(0.5, 0.5)
+     *     },
+     *     me.loader.getImage("spritesheet")
+     */
     constructor (atlases, src, cache) {
         /**
          * to identify the atlas format (e.g. texture packer)
@@ -200,7 +199,7 @@ export class Texture {
                     height       : s.h,
                     angle        : (frame.rotated === true) ? -ETA : 0
                 };
-                this.addUvsMap(atlas, frame.filename, data.meta.size.w, data.meta.size.h);
+                this.addUVs(atlas, frame.filename, data.meta.size.w, data.meta.size.h);
             }
         });
         return atlas;
@@ -260,7 +259,7 @@ export class Texture {
                 height      : data.frameheight,
                 angle       : 0
             };
-            this.addUvsMap(atlas, name, width, height);
+            this.addUVs(atlas, name, width, height);
         }
 
         pool.push(spritecount);
@@ -268,63 +267,8 @@ export class Texture {
         return atlas;
     }
 
-    /**
-     * @ignore
-     */
-    addUvsMap(atlas, frame, w, h) {
-        // ignore if using the Canvas Renderer
-        if (renderer instanceof WebGLRenderer) {
-            // Source coordinates
-            var s = atlas[frame].offset;
-            var sw = atlas[frame].width;
-            var sh = atlas[frame].height;
-
-            atlas[frame].uvs = new Float32Array([
-                s.x / w,        // u0 (left)
-                s.y / h,        // v0 (top)
-                (s.x + sw) / w, // u1 (right)
-                (s.y + sh) / h  // v1 (bottom)
-            ]);
-            // Cache source coordinates
-            // TODO: Remove this when the Batcher only accepts a region name
-            var key = s.x + "," + s.y + "," + w + "," + h;
-            atlas[key] = atlas[frame];
-        }
-        return atlas[frame];
-    }
-
-    /**
-     * @ignore
-     */
-    addQuadRegion(name, x, y, w, h) {
-        // TODO: Require proper atlas regions instead of caching arbitrary region keys
-        if (renderer.settings.verbose === true) {
-            console.warn("Adding texture region", name, "for texture", this);
-        }
-
-        var source = this.getTexture();
-        var atlas = this.getAtlas();
-        var dw = source.width;
-        var dh = source.height;
-
-        atlas[name] = {
-            name    : name,
-            offset  : new Vector2d(x, y),
-            width   : w,
-            height  : h,
-            angle   : 0
-        };
-
-        this.addUvsMap(atlas, name, dw, dh);
-
-        return atlas[name];
-    }
-
     /**
      * return the default or specified atlas dictionnary
-     * @name getAtlas
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {string} [name] atlas name in case of multipack textures
      * @returns {object}
      */
@@ -338,9 +282,6 @@ export class Texture {
 
     /**
      * return the format of the atlas dictionnary
-     * @name getFormat
-     * @memberof me.Renderer.Texture
-     * @function
      * @returns {string} will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"
      */
     getFormat() {
@@ -349,9 +290,6 @@ export class Texture {
 
     /**
      * return the source texture for the given region (or default one if none specified)
-     * @name getTexture
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {object} [region] region name in case of multipack textures
      * @returns {HTMLImageElement|HTMLCanvasElement}
      */
@@ -363,11 +301,41 @@ export class Texture {
         }
     }
 
+    /**
+     * add a region to the atlas
+     * @param {string} name region mame
+     * @param {number} x x origin of the region
+     * @param {number} y y origin of the region
+     * @param {number} w width of the region
+     * @param {number} h height of the region
+     * @returns {object} the created region
+     */
+    addRegion(name, x, y, w, h) {
+        // TODO: Require proper atlas regions instead of caching arbitrary region keys
+        if (renderer.settings.verbose === true) {
+            console.warn("Adding texture region", name, "for texture", this);
+        }
+
+        var source = this.getTexture();
+        var atlas = this.getAtlas();
+        var dw = source.width;
+        var dh = source.height;
+
+        atlas[name] = {
+            name    : name,
+            offset  : new Vector2d(x, y),
+            width   : w,
+            height  : h,
+            angle   : 0
+        };
+
+        this.addUVs(atlas, name, dw, dh);
+
+        return atlas[name];
+    }
+
     /**
      * return a normalized region (or frame) information for the specified sprite name
-     * @name getRegion
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {string} name name of the sprite
      * @param {string} [atlas] name of a specific atlas where to search for the region
      * @returns {object}
@@ -390,9 +358,6 @@ export class Texture {
 
     /**
      * return the uvs mapping for the given region
-     * @name getUVs
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {object} name region (or frame) name
      * @returns {Float32Array} region Uvs
      */
@@ -407,23 +372,48 @@ export class Texture {
                 sy = +keys[1],
                 sw = +keys[2],
                 sh = +keys[3];
-            region = this.addQuadRegion(name, sx, sy, sw, sh);
+            region = this.addRegion(name, sx, sy, sw, sh);
         }
         return region.uvs;
     }
 
+    /**
+     * add uvs mapping for the given region
+     * @param {object} atlas the atlas dictionnary where the region is define
+     * @param {object} name region (or frame) name
+     * @returns {Float32Array} the created region UVs
+     */
+    addUVs(atlas, name, w, h) {
+        // ignore if using the Canvas Renderer
+        if (renderer instanceof WebGLRenderer) {
+            // Source coordinates
+            var s = atlas[name].offset;
+            var sw = atlas[name].width;
+            var sh = atlas[name].height;
+
+            atlas[name].uvs = new Float32Array([
+                s.x / w,        // u0 (left)
+                s.y / h,        // v0 (top)
+                (s.x + sw) / w, // u1 (right)
+                (s.y + sh) / h  // v1 (bottom)
+            ]);
+            // Cache source coordinates
+            // TODO: Remove this when the Batcher only accepts a region name
+            var key = s.x + "," + s.y + "," + w + "," + h;
+            atlas[key] = atlas[name];
+        }
+        return atlas[name].uvs;
+    }
+
     /**
      * Create a sprite object using the first region found using the specified name
-     * @name createSpriteFromName
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {string} name name of the sprite
-     * @param {object} [settings] Additional settings passed to the {@link me.Sprite} contructor
+     * @param {object} [settings] Additional settings passed to the {@link Sprite} contructor
      * @param {boolean} [nineSlice=false] if true returns a 9-slice sprite
-     * @returns {me.Sprite|me.NineSliceSprite}
+     * @returns {Sprite|NineSliceSprite}
      * @example
      * // create a new texture object under the `game` namespace
-     * game.texture = new me.video.renderer.Texture(
+     * game.texture = new me.TextureAtlas(
      *    me.loader.getJSON("texture"),
      *    me.loader.getImage("texture")
      * );
@@ -457,16 +447,13 @@ export class Texture {
 
     /**
      * Create an animation object using the first region found using all specified names
-     * @name createAnimationFromName
-     * @memberof me.Renderer.Texture
-     * @function
      * @param {string[]|number[]} names list of names for each sprite
      * (when manually creating a Texture out of a spritesheet, only numeric values are authorized)
-     * @param {object} [settings] Additional settings passed to the {@link me.Sprite} contructor
-     * @returns {me.Sprite}
+     * @param {object} [settings] Additional settings passed to the {@link Sprite} contructor
+     * @returns {Sprite}
      * @example
      * // create a new texture object under the `game` namespace
-     * game.texture = new me.video.renderer.Texture(
+     * game.texture = new me.TextureAtlas(
      *     me.loader.getJSON("texture"),
      *     me.loader.getImage("texture")
      * );

package/src/video/texture_cache.js

@@ -1,7 +1,8 @@
 import { renderer } from "./video.js";
 import * as fileUtil from "./../utils/file.js";
-import { Texture, createAtlas } from "./texture.js";
+import { TextureAtlas, createAtlas } from "./texture.js";
 import { isPowerOfTwo} from "./../math/math.js";
+import {ArrayMultimap} from "@teppeis/multimaps";
 
 
 /**
@@ -14,7 +15,8 @@ class TextureCache {
      * @ignore
      */
     constructor(max_size) {
-        this.cache = new Map();
+        // cache uses an array to allow for duplicated key
+        this.cache = new ArrayMultimap();
         this.tinted = new Map();
         this.units = new Map();
         this.max_size = max_size || Infinity;
@@ -48,13 +50,29 @@ class TextureCache {
      * @ignore
      */
     get(image, atlas) {
-        if (!this.cache.has(image)) {
+        var entry;
+
+        if (typeof atlas === "undefined") {
+            entry = this.cache.get(image)[0];
+        } else {
+            // manage cases where a specific atlas is specified
+            this.cache.forEach((value, key) => {
+                var _atlas = value.getAtlas();
+                if (key === image && _atlas[0].width === atlas.framewidth && _atlas[0].height === atlas.frameheight) {
+                    entry = value;
+                }
+            });
+        }
+
+        if (typeof entry === "undefined") {
             if (!atlas) {
                 atlas = createAtlas(image.width, image.height, image.src ? fileUtil.getBasename(image.src) : undefined);
             }
-            this.set(image, new Texture(atlas, image, false));
+            entry = new TextureAtlas(atlas, image, false);
+            this.set(image, entry);
         }
-        return this.cache.get(image);
+
+        return entry;
     }
 
     /**
@@ -99,7 +117,7 @@ class TextureCache {
                 "(" + width + "x" + height + ")"
             );
         }
-        this.cache.set(image, texture);
+        return this.cache.put(image, texture);
     }
 
     /**

package/src/video/video.js

@@ -9,8 +9,7 @@ import { initialized, version } from "./../index.js";
 
 /**
  * video functions
- * @namespace me.video
- * @memberof me
+ * @namespace video
  */
 
 var designRatio = 1;
@@ -126,7 +125,7 @@ function onresize() {
 /**
  * Select the HTML5 Canvas renderer
  * @name CANVAS
- * @memberof me.video
+ * @memberof video
  * @constant
  */
 export const CANVAS = 0;
@@ -134,7 +133,7 @@ export const CANVAS = 0;
 /**
  * Select the WebGL renderer
  * @name WEBGL
- * @memberof me.video
+ * @memberof video
  * @constant
  */
 export const WEBGL = 1;
@@ -142,7 +141,7 @@ export const WEBGL = 1;
 /**
  * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
  * @name AUTO
- * @memberof me.video
+ * @memberof video
  * @constant
  */
 export const AUTO = 2;
@@ -153,24 +152,24 @@ export const AUTO = 2;
  * @type {HTMLElement}
  * @readonly
  * @name parent
- * @memberof me.video
+ * @memberof video
  */
 export let parent = null;
 
 /**
  * the scaling ratio to be applied to the display canvas
  * @name scaleRatio
- * @type {me.Vector2d}
+ * @type {Vector2d}
  * @default <1,1>
- * @memberof me.video
+ * @memberof video
  */
 export let scaleRatio = new Vector2d(1, 1);
 
  /**
   * A reference to the active Canvas or WebGL active renderer renderer
   * @name renderer
-  * @type {me.CanvasRenderer|me.WebGLRenderer}
-  * @memberof me.video
+  * @type {CanvasRenderer|WebGLRenderer}
+  * @memberof video
   */
 export let renderer = null;
 
@@ -191,12 +190,12 @@ export let renderer = null;
  * <center><img src="images/scale-flex-height.png"/></center><br>
  *  - <i><b>`stretch`</b></i> : Canvas is resized to fit; content is scaled to screen aspect ratio
  * <center><img src="images/scale-stretch.png"/></center><br>
- * @function me.video.init
+ * @function video.init
  * @param {number} width The width of the canvas viewport
  * @param {number} height The height of the canvas viewport
  * @param {object} [options] The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
  * @param {string|HTMLElement} [options.parent=document.body] the DOM parent element to hold the canvas in the HTML file
- * @param {number} [options.renderer=me.video.AUTO] renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO)
+ * @param {number} [options.renderer=video.AUTO] renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO)
  * @param {boolean} [options.doubleBuffering=false] enable/disable double buffering
  * @param {number|string} [options.scale=1.0] enable scaling of the canvas ('auto' for automatic scaling)
  * @param {string} [options.scaleMethod="fit"] screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
@@ -274,7 +273,7 @@ export function init(width, height, options) {
 
     // default scaled size value
     settings.zoomX = width * scaleRatio.x;
-    settings.zoomY = width * scaleRatio.y;
+    settings.zoomY = height * scaleRatio.y;
 
     //add a channel for the onresize/onorientationchange event
     window.addEventListener(
@@ -380,7 +379,7 @@ export function init(width, height, options) {
 
 /**
  * Create and return a new Canvas element
- * @function me.video.createCanvas
+ * @function video.createCanvas
  * @param {number} width width
  * @param {number} height height
  * @param {boolean} [offscreen=false] will returns an OffscreenCanvas if supported
@@ -412,7 +411,7 @@ export function createCanvas(width, height, offscreen = false) {
 
 /**
  * return a reference to the parent DOM element holding the main canvas
- * @function me.video.getParent
+ * @function video.getParent
  * @returns {HTMLElement}
  */
 export function getParent() {
@@ -423,8 +422,8 @@ export function getParent() {
  * scale the "displayed" canvas by the given scalar.
  * this will modify the size of canvas element directly.
  * Only use this if you are not using the automatic scaling feature.
- * @function me.video.scale
- * @see me.video.init
+ * @function video.scale
+ * @see video.init
  * @param {number} x x scaling multiplier
  * @param {number} y y scaling multiplier
  */

package/src/video/webgl/glshader.js

@@ -197,36 +197,35 @@ function minify(src) {
 /**
  * @classdesc
  * a base GL Shader object
- * @class GLShader
- * @memberof me
- * @param {WebGLRenderingContext} gl the current WebGL rendering context
- * @param {string} vertex a string containing the GLSL source code to set
- * @param {string} fragment a string containing the GLSL source code to set
- * @param {string} [precision=auto detected] float precision ('lowp', 'mediump' or 'highp').
- * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
- * @example
- * // create a basic shader
- * var myShader = new me.GLShader(
- *    // WebGL rendering context
- *    gl,
- *    // vertex shader
- *    [
- *        "void main() {",
- *        "    gl_Position = doMathToMakeClipspaceCoordinates;",
- *        "}"
- *    ].join("\n"),
- *    // fragment shader
- *    [
- *        "void main() {",
- *        "    gl_FragColor = doMathToMakeAColor;",
- *        "}"
- *    ].join("\n")
- *  )
- * // use the shader
- * myShader.bind();
  */
 class GLShader {
-
+    /**
+     * @param {WebGLRenderingContext} gl the current WebGL rendering context
+     * @param {string} vertex a string containing the GLSL source code to set
+     * @param {string} fragment a string containing the GLSL source code to set
+     * @param {string} [precision=auto detected] float precision ('lowp', 'mediump' or 'highp').
+     * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
+     * @example
+     * // create a basic shader
+     * var myShader = new me.GLShader(
+     *    // WebGL rendering context
+     *    gl,
+     *    // vertex shader
+     *    [
+     *        "void main() {",
+     *        "    gl_Position = doMathToMakeClipspaceCoordinates;",
+     *        "}"
+     *    ].join("\n"),
+     *    // fragment shader
+     *    [
+     *        "void main() {",
+     *        "    gl_FragColor = doMathToMakeAColor;",
+     *        "}"
+     *    ].join("\n")
+     *  )
+     * // use the shader
+     * myShader.bind();
+     */
     constructor(gl, vertex, fragment, precision) {
 
         /**
@@ -234,7 +233,7 @@ class GLShader {
          * @public
          * @type {WebGLRenderingContext}
          * @name gl
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.gl = gl;
 
@@ -243,7 +242,7 @@ class GLShader {
          * @public
          * @type {string}
          * @name vertex
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.vertex = setPrecision(minify(vertex), precision || device.getMaxShaderPrecision(this.gl));
 
@@ -252,7 +251,7 @@ class GLShader {
          * @public
          * @type {string}
          * @name vertex
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.fragment = setPrecision(minify(fragment), precision || device.getMaxShaderPrecision(this.gl));
 
@@ -261,7 +260,7 @@ class GLShader {
          * @public
          * @type {GLint[]}
          * @name attributes
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.attributes = extractAttributes(this.gl, this);
 
@@ -271,7 +270,7 @@ class GLShader {
          * @public
          * @type {WebGLProgram}
          * @name program
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.program = compileProgram(this.gl, this.vertex, this.fragment, this.attributes);
 
@@ -280,7 +279,7 @@ class GLShader {
          * @public
          * @type {object}
          * @name uniforms
-         * @memberof me.GLShader
+         * @memberof GLShader
          */
         this.uniforms = extractUniforms(this.gl, this);
 
@@ -293,7 +292,7 @@ class GLShader {
     /**
      * Installs this shader program as part of current rendering state
      * @name bind
-     * @memberof me.GLShader
+     * @memberof GLShader
      * @function
      */
     bind() {
@@ -303,7 +302,7 @@ class GLShader {
     /**
      * returns the location of an attribute variable in this shader program
      * @name getAttribLocation
-     * @memberof me.GLShader
+     * @memberof GLShader
      * @function
      * @param {string} name the name of the attribute variable whose location to get.
      * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
@@ -320,7 +319,7 @@ class GLShader {
     /**
      * Set the uniform to the given value
      * @name setUniform
-     * @memberof me.GLShader
+     * @memberof GLShader
      * @function
      * @param {string} name the uniform name
      * @param {object|Float32Array} value the value to assign to that uniform
@@ -343,7 +342,7 @@ class GLShader {
     /**
      * destroy this shader objects resources (program, attributes, uniforms)
      * @name destroy
-     * @memberof me.GLShader
+     * @memberof GLShader
      * @function
      */
     destroy() {