melonjs 14.1.2 → 14.3.0

package/dist/types/video/texture/atlas.d.ts

@@ -0,0 +1,201 @@
+/**
+ * create a simple 1 frame texture atlas based on the given parameters
+ * @ignore
+ */
+export function createAtlas(width: any, height: any, name?: string, repeat?: string): {
+    meta: {
+        app: string;
+        size: {
+            w: any;
+            h: any;
+        };
+        repeat: string;
+        image: string;
+    };
+    frames: {
+        filename: string;
+        frame: {
+            x: number;
+            y: number;
+            w: any;
+            h: any;
+        };
+    }[];
+};
+/**
+ * @classdesc
+ * 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
+ * );
+ */
+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: object | object[], src?: string | string[] | HTMLCanvasElement | HTMLImageElement | HTMLImageElement[] | HTMLCanvasElement[] | undefined, cache?: boolean | undefined);
+    /**
+     * to identify the atlas format (e.g. texture packer)
+     * @ignore
+     */
+    format: string | null;
+    /**
+     * the texture source(s) itself
+     * @type {Map}
+     * @ignore
+     */
+    sources: Map<any, any>;
+    /**
+     * the atlas dictionnaries
+     * @type {Map}
+     * @ignore
+     */
+    atlases: Map<any, any>;
+    repeat: any;
+    /**
+     * build an atlas from the given data
+     * @ignore
+     */
+    parse(data: any): {};
+    /**
+     * build an atlas from the given spritesheet
+     * @ignore
+     */
+    parseFromSpriteSheet(data: any): {};
+    /**
+     * return the default or specified atlas dictionnary
+     * @param {string} [name] - atlas name in case of multipack textures
+     * @returns {object}
+     */
+    getAtlas(name?: string | undefined): object;
+    /**
+     * return the format of the atlas dictionnary
+     * @returns {string} will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"
+     */
+    getFormat(): string;
+    /**
+     * return the source texture for the given region (or default one if none specified)
+     * @param {object} [region] - region name in case of multipack textures
+     * @returns {HTMLImageElement|HTMLCanvasElement}
+     */
+    getTexture(region?: object | undefined): HTMLImageElement | HTMLCanvasElement;
+    /**
+     * 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: string, x: number, y: number, w: number, h: number): object;
+    /**
+     * return a normalized region (or frame) information for the specified sprite name
+     * @param {string} name - name of the sprite
+     * @param {string} [atlas] - name of a specific atlas where to search for the region
+     * @returns {object}
+     */
+    getRegion(name: string, atlas?: string | undefined): object;
+    /**
+     * return the uvs mapping for the given region
+     * @param {object} name - region (or frame) name
+     * @returns {Float32Array} region Uvs
+     */
+    getUVs(name: object): Float32Array;
+    /**
+     * 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
+     * @param {number} w - the width of the region
+     * @param {number} h - the height of the region
+     * @returns {Float32Array} the created region UVs
+     */
+    addUVs(atlas: object, name: object, w: number, h: number): Float32Array;
+    /**
+     * Create a sprite object using the first region found using the specified name
+     * @param {string} name - name of the sprite
+     * @param {object} [settings] - Additional settings passed to the {@link Sprite} contructor
+     * @param {boolean} [nineSlice=false] - if true returns a 9-slice sprite
+     * @returns {Sprite|NineSliceSprite}
+     * @example
+     * // create a new texture object under the `game` namespace
+     * game.texture = new me.TextureAtlas(
+     *    me.loader.getJSON("texture"),
+     *    me.loader.getImage("texture")
+     * );
+     * ...
+     * ...
+     * // create a new "coin" sprite
+     * var sprite = game.texture.createSpriteFromName("coin.png");
+     * // set the renderable position to bottom center
+     * sprite.anchorPoint.set(0.5, 1.0);
+     * ...
+     * ...
+     * // create a 9-slice sprite
+     * var dialogPanel = game.texture.createSpriteFromName(
+     *    "rpg_dialo.png",
+     *    // width & height are mandatory for 9-slice sprites
+     *    { width: this.width, height: this.height },
+     *    true
+     * );
+     */
+    createSpriteFromName(name: string, settings?: object | undefined, nineSlice?: boolean | undefined): Sprite | NineSliceSprite;
+    /**
+     * Create an animation object using the first region found using all specified names
+     * @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 Sprite} contructor
+     * @returns {Sprite}
+     * @example
+     * // create a new texture object under the `game` namespace
+     * game.texture = new me.TextureAtlas(
+     *     me.loader.getJSON("texture"),
+     *     me.loader.getImage("texture")
+     * );
+     *
+     * // create a new Animated Sprite
+     * var sprite = game.texture.createAnimationFromName([
+     *     "walk0001.png", "walk0002.png", "walk0003.png",
+     *     "walk0004.png", "walk0005.png", "walk0006.png",
+     *     "walk0007.png", "walk0008.png", "walk0009.png",
+     *     "walk0010.png", "walk0011.png"
+     * ]);
+     *
+     * // define an additional basic walking animation
+     * sprite.addAnimation ("simple_walk", [0,2,1]);
+     * // you can also use frame name to define your animation
+     * sprite.addAnimation ("speed_walk", ["walk0007.png", "walk0008.png", "walk0009.png", "walk0010.png"]);
+     * // set the default animation
+     * sprite.setCurrentAnimation("simple_walk");
+     * // set the renderable position to bottom center
+     * sprite.anchorPoint.set(0.5, 1.0);
+     */
+    createAnimationFromName(names: string[] | number[], settings?: object | undefined): Sprite;
+}
+import Sprite from "./../../renderable/sprite.js";

package/dist/types/video/texture/cache.d.ts

@@ -0,0 +1,45 @@
+export default TextureCache;
+/**
+ * a basic texture cache object
+ * @ignore
+ */
+declare class TextureCache {
+    /**
+     * @ignore
+     */
+    constructor(max_size: any);
+    cache: ArrayMultimap<any, any>;
+    tinted: Map<any, any>;
+    units: Map<any, any>;
+    max_size: any;
+    /**
+     * @ignore
+     */
+    clear(): void;
+    length: number | undefined;
+    /**
+     * @ignore
+     */
+    validate(): void;
+    /**
+     * @ignore
+     */
+    get(image: any, atlas: any): any;
+    /**
+     * @ignore
+     */
+    delete(image: any): void;
+    /**
+     * @ignore
+     */
+    tint(src: any, color: any): any;
+    /**
+     * @ignore
+     */
+    set(image: any, texture: any): boolean;
+    /**
+     * @ignore
+     */
+    getUnit(texture: any): any;
+}
+import { ArrayMultimap } from "@teppeis/multimaps";

package/dist/types/video/texture/canvas_texture.d.ts

@@ -0,0 +1,78 @@
+export default CanvasTexture;
+/**
+ * Creates a Canvas Texture of the given size
+ */
+declare class CanvasTexture {
+    /**
+     * @param {number} width - the desired width of the canvas
+     * @param {number} height - the desired height of the canvas
+     * @param {object} attributes - The attributes to create both the canvas and context
+     * @param {boolean} [attributes.context="2d"] - the context type to be created ("2d", "webgl", "webgl2")
+     * @param {boolean} [attributes.offscreenCanvas=false] - will create an offscreenCanvas if true instead of a standard canvas
+     * @param {boolean} [attributes.willReadFrequently=false] - Indicates whether or not a lot of read-back operations are planned
+     * @param {boolean} [attributes.antiAlias=false] - Whether to enable anti-aliasing, use false (default) for a pixelated effect.
+     */
+    constructor(width: number, height: number, attributes?: {
+        context?: boolean | undefined;
+        offscreenCanvas?: boolean | undefined;
+        willReadFrequently?: boolean | undefined;
+        antiAlias?: boolean | undefined;
+    });
+    /**
+     * the canvas created for this CanvasTexture
+     * @type {HTMLCanvasElement|OffscreenCanvas}
+     */
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+    /**
+     * the rendering context of this CanvasTexture
+     * @type {CanvasRenderingContext2D}
+     */
+    context: CanvasRenderingContext2D;
+    /**
+     * @ignore
+     */
+    onResetEvent(width: any, height: any): void;
+    /**
+     * Clears the content of the canvas texture
+     */
+    clear(): void;
+    /**
+     * enable/disable image smoothing (scaling interpolation)
+     * @param {boolean} [enable=false]
+     */
+    setAntiAlias(enable?: boolean | undefined): void;
+    /**
+     * Resizes the canvas texture to the given width and height.
+     * @param {number} width - the desired width
+     * @param {number} height - the desired height
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Returns an ImageData object representing the underlying pixel data for a specified portion of this canvas texture.
+     * (Note: when using getImageData(), it is highly recommended to use the `willReadFrequently` attribute when creatimg the corresponding canvas texture)
+     * @param {number} x - The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} y - The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} width - The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left
+     * @param {number} height - The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up
+     * @return {ImageData} The ImageData extracted from this CanvasTexture.
+     */
+    getImageData(x: number, y: number, width: number, height: number): ImageData;
+    /**
+     * @ignore
+     */
+    destroy(): void;
+    public set width(arg: number);
+    /**
+     * The width of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    public get width(): number;
+    public set height(arg: number);
+    /**
+     * The height of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    public get height(): number;
+}

package/dist/types/video/utils/autodetect.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Auto-detect the best renderer to use
+ * @ignore
+ */
+export function autoDetectRenderer(options: any): CanvasRenderer | WebGLRenderer;
+import CanvasRenderer from "../canvas/canvas_renderer";
+import WebGLRenderer from "../webgl/webgl_renderer";

package/dist/types/video/utils/resize.d.ts

@@ -0,0 +1,4 @@
+/**
+ * callback for window resize event
+ */
+export function onresize(renderer: any): void;

package/dist/types/video/video.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Initialize the "video" system (create a canvas based on the given arguments, and the related renderer). <br>
+ * melonJS support various scaling mode, that can be enabled <u>once the scale option is set to <b>`auto`</b></u> : <br>
+ *  - <i><b>`fit`</b></i> : Letterboxed; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fit.png"/></center><br>
+ *  - <i><b>`fill-min`</b></i> : Canvas is resized to fit minimum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-min.png"/></center><br>
+ *  - <i><b>`fill-max`</b></i> : Canvas is resized to fit maximum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-max.png"/></center><br>
+ *  - <i><b>`flex`</b><</i> : Canvas width & height is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex.png"/></center><br>
+ *  - <i><b>`flex-width`</b></i> : Canvas width is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex-width.png"/></center><br>
+ *  - <i><b>`flex-height`</b></i> : Canvas height is resized to fit; content is scaled to design aspect ratio <br>
+ * <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>
+ * @memberof video
+ * @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|Renderer} [options.renderer=video.AUTO] - renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO), or a custom renderer class
+ * @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')
+ * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
+ * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
+ * @param {boolean} [options.transparent=false] - whether to allow transparent pixels in the front buffer (screen).
+ * @param {boolean} [options.antiAlias=false] - whether to enable or not video scaling interpolation
+ * @param {boolean} [options.consoleHeader=true] - whether to display melonJS version and basic device information in the console
+ * @returns {boolean} false if initialization failed (canvas not supported)
+ * @example
+ * // init the video with a 640x480 canvas
+ * me.video.init(640, 480, {
+ *     parent : "screen",
+ *     renderer : me.video.AUTO,
+ *     scale : "auto",
+ *     scaleMethod : "fit"
+ * });
+ */
+export function init(width: number, height: number, options?: {
+    parent?: string | HTMLElement | undefined;
+    renderer?: number | Renderer;
+    scale?: string | number | undefined;
+    scaleMethod?: string | undefined;
+    preferWebGL1?: boolean | undefined;
+    powerPreference?: string | undefined;
+    transparent?: boolean | undefined;
+    antiAlias?: boolean | undefined;
+    consoleHeader?: boolean | undefined;
+} | undefined): boolean;
+/**
+ * Create and return a new Canvas element
+ * @memberof video
+ * @param {number} width - width
+ * @param {number} height - height
+ * @param {boolean} [returnOffscreenCanvas=false] - will return an OffscreenCanvas if supported
+ * @returns {HTMLCanvasElement|OffscreenCanvas}
+ */
+export function createCanvas(width: number, height: number, returnOffscreenCanvas?: boolean | undefined): HTMLCanvasElement | OffscreenCanvas;
+/**
+ * return a reference to the parent DOM element holding the main canvas
+ * @returns {HTMLElement}
+ */
+export function getParent(): HTMLElement;
+/**
+ * @namespace video
+ */
+/**
+ * Select the HTML5 Canvas renderer
+ * @memberof video
+ * @constant
+ */
+export const CANVAS: 0;
+/**
+ * Select the WebGL renderer
+ * @memberof video
+ * @constant
+ */
+export const WEBGL: 1;
+/**
+ * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
+ * @memberof video
+ * @constant
+ */
+export const AUTO: 2;
+/**
+ * A reference to the active Canvas or WebGL active renderer renderer
+ * @memberof video
+ * @type {CanvasRenderer|WebGLRenderer}
+ */
+export let renderer: CanvasRenderer | WebGLRenderer;

package/dist/types/video/webgl/buffer/vertex.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @classdesc
+ * a Vertex Buffer object
+ * @class VertexArrayBuffer
+ * @ignore
+ */
+export default class VertexArrayBuffer {
+    constructor(vertex_size: any, vertex_per_quad: any);
+    vertexSize: any;
+    quadSize: any;
+    maxVertex: number;
+    vertexCount: number;
+    buffer: ArrayBuffer;
+    bufferF32: Float32Array;
+    bufferU32: Uint32Array;
+    /**
+     * clear the vertex array buffer
+     * @ignore
+     */
+    clear(): void;
+    /**
+     * return true if full
+     * @ignore
+     */
+    isFull(vertex?: any): boolean;
+    /**
+     * resize the vertex buffer, retaining its original contents
+     * @ignore
+     */
+    resize(): VertexArrayBuffer;
+    /**
+     * push a new vertex to the buffer
+     * @ignore
+     */
+    push(x: any, y: any, u: any, v: any, tint: any): VertexArrayBuffer;
+    /**
+     * return a reference to the data in Float32 format
+     * @ignore
+     */
+    toFloat32(begin: any, end: any): Float32Array;
+    /**
+     * return a reference to the data in Uint32 format
+     * @ignore
+     */
+    toUint32(begin: any, end: any): Uint32Array;
+    /**
+     * return the size of the vertex in vertex
+     * @ignore
+     */
+    length(): number;
+    /**
+     * return true if empty
+     * @ignore
+     */
+    isEmpty(): boolean;
+}

package/dist/types/video/webgl/glshader.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @classdesc
+ * a base GL Shader object
+ */
+export default 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: WebGLRenderingContext, vertex: string, fragment: string, precision?: string | undefined);
+    /**
+     * the active gl rendering context
+     * @type {WebGLRenderingContext}
+     */
+    gl: WebGLRenderingContext;
+    /**
+     * the vertex shader source code
+     * @type {string}
+     */
+    vertex: string;
+    /**
+     * the fragment shader source code
+     * @type {string}
+     */
+    fragment: string;
+    /**
+     * the location attributes of the shader
+     * @type {GLint[]}
+     */
+    attributes: GLint[];
+    /**
+     * a reference to the shader program (once compiled)
+     * @type {WebGLProgram}
+     */
+    program: WebGLProgram;
+    /**
+     * the uniforms of the shader
+     * @type {object}
+     */
+    uniforms: object;
+    /**
+     * Installs this shader program as part of current rendering state
+     */
+    bind(): void;
+    /**
+     * returns the location of an attribute variable in this shader program
+     * @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
+     */
+    getAttribLocation(name: string): GLint;
+    /**
+     * Set the uniform to the given value
+     * @param {string} name - the uniform name
+     * @param {object|Float32Array} value - the value to assign to that uniform
+     * @example
+     * myShader.setUniform("uProjectionMatrix", this.projectionMatrix);
+     */
+    setUniform(name: string, value: object | Float32Array): void;
+    /**
+     * activate the given vertex attribute for this shader
+     * @param {WebGLRenderingContext} gl - the current WebGL rendering context
+     * @param {object[]} attributes - an array of vertex attributes
+     * @param {number} vertexByteSize - the size of a single vertex in bytes
+     */
+    setVertexAttributes(gl: WebGLRenderingContext, attributes: object[], vertexByteSize: number): void;
+    /**
+     * destroy this shader objects resources (program, attributes, uniforms)
+     */
+    destroy(): void;
+}

package/dist/types/video/webgl/utils/attributes.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @ignore
+ */
+export function extractAttributes(gl: any, shader: any): {};

package/dist/types/video/webgl/utils/precision.d.ts

@@ -0,0 +1,13 @@
+/**
+ * set precision for the fiven shader source
+ * won't do anything if the precision is already specified
+ * @ignore
+ */
+export function setPrecision(src: any, precision: any): any;
+/**
+ * return the highest precision format supported by this device for GL Shaders
+ * @ignore
+ * @param {WebGLRenderingContext} gl
+ * @returns {boolean} "lowp", "mediump", or "highp"
+ */
+export function getMaxShaderPrecision(gl: WebGLRenderingContext): boolean;

package/dist/types/video/webgl/utils/program.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Compile GLSL into a shader object
+ * @ignore
+ */
+export function compileProgram(gl: any, vertex: any, fragment: any, attributes: any): any;

package/dist/types/video/webgl/utils/string.d.ts

@@ -0,0 +1,5 @@
+/**
+ * clean the given source from space, comments, etc...
+ * @ignore
+ */
+export function minify(src: any): any;

package/dist/types/video/webgl/utils/uniforms.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @ignore
+ */
+export function extractUniforms(gl: any, shader: any): {};