melonjs 15.0.0 → 15.1.1

package/dist/types/application/application.d.ts

@@ -14,13 +14,14 @@ export default class Application {
      * @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 {boolean} [options.depthTest="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
      * @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
      * @throws Will throw an exception if it fails to instantiate a renderer
      * @example
-     * var my game = new Application(640, 480, {renderer: me.video.AUTO}) {
+     * let my game = new Application(640, 480, {renderer: me.video.AUTO}) {
      *     ....
      * }
      */
@@ -30,6 +31,7 @@ export default class Application {
         scale?: string | number | undefined;
         scaleMethod?: string | undefined;
         preferWebGL1?: boolean | undefined;
+        depthTest?: boolean | undefined;
         powerPreference?: string | undefined;
         transparent?: boolean | undefined;
         antiAlias?: boolean | undefined;
@@ -63,13 +65,6 @@ export default class Application {
      * @default true
      */
     mergeGroup: boolean;
-    /**
-     * Specify the property to be used when sorting renderables.
-     * Accepted values : "x", "y", "z"
-     * @type {string}
-     * @default "z"
-     */
-    sortOn: string;
     /**
      * Last time the game update loop was executed. <br>
      * Use this value to implement frame prediction in drawing events,
@@ -109,6 +104,14 @@ export default class Application {
      * destroy all current objects
      */
     reset(): void;
+    set sortOn(arg: string);
+    /**
+     * Specify the property to be used when sorting renderables for this application game world.
+     * Accepted values : "x", "y", "z", "depth"
+     * @type {string}
+     * @see World.sortOn
+     */
+    get sortOn(): string;
     /**
      * Fired when a level is fully loaded and all renderable instantiated. <br>
      * Additionnaly the level id will also be passed to the called function.

package/dist/types/audio/audio.d.ts

@@ -90,7 +90,7 @@ export function fade(sound_name: string, from: number, to: number, duration: num
  * @returns {number} return the current seek position (if no extra parameters were given)
  * @example
  * // return the current position of the background music
- * var current_pos = me.audio.seek("dst-gameforest");
+ * let current_pos = me.audio.seek("dst-gameforest");
  * // set back the position of the background music to the beginning
  * me.audio.seek("dst-gameforest", 0);
  */
@@ -104,7 +104,7 @@ export function seek(sound_name: string, ...args: any[]): number;
  * @returns {number} return the current playback rate (if no extra parameters were given)
  * @example
  * // get the playback rate of the background music
- * var rate = me.audio.rate("dst-gameforest");
+ * let rate = me.audio.rate("dst-gameforest");
  * // speed up the playback of the background music
  * me.audio.rate("dst-gameforest", 2.0);
  */
@@ -135,7 +135,7 @@ export function pause(sound_name: string, id?: number | undefined): void;
  * @param {number} [id] - the sound instance ID. If none is passed, all sounds in group will resume.
  * @example
  * // play a audio clip
- * var id = me.audio.play("myClip");
+ * let id = me.audio.play("myClip");
  * ...
  * // pause it
  * me.audio.pause("myClip", id);

package/dist/types/index.d.ts

@@ -23,14 +23,14 @@ export * from "./const.js";
  * @default false
  * @readonly
  */
-export const initialized: boolean;
+export let initialized: boolean;
 /**
  * disable melonJS auto-initialization
  * @type {boolean}
  * @default false
  * @see boot
  */
-export const skipAutoInit: boolean;
+export let skipAutoInit: boolean;
 export const game: Application;
 import * as audio from "./audio/audio.js";
 import collision from "./physics/collision.js";
@@ -70,6 +70,7 @@ import QuadCompositor from "./video/webgl/compositors/quad_compositor.js";
 import Renderer from "./video/renderer.js";
 import WebGLRenderer from "./video/webgl/webgl_renderer.js";
 import CanvasRenderer from "./video/canvas/canvas_renderer.js";
+import CanvasTexture from "./video/texture/canvas_texture.js";
 import { TextureAtlas } from "./video/texture/atlas.js";
 import Renderable from "./renderable/renderable.js";
 import Body from "./physics/body.js";
@@ -109,4 +110,4 @@ import ParticleEmitterSettings from "./particles/settings.js";
 import Particle from "./particles/particle.js";
 import Entity from "./entity/entity.js";
 import Application from "./application/application.js";
-export { audio, collision, device, event, loader, level, input, Math, plugin, plugins, utils, save, timer, pool, state, video, Color, Vector2d, Vector3d, ObservableVector2d, ObservableVector3d, Matrix2d, Matrix3d, Polygon, Line, Ellipse, Point, Rect, RoundRect, Tween, QuadTree, GLShader, Compositor, PrimitiveCompositor, QuadCompositor, Renderer, WebGLRenderer, CanvasRenderer, TextureAtlas, Renderable, Body, Bounds, Text, BitmapText, BitmapTextData, ColorLayer, ImageLayer, Sprite, NineSliceSprite, UIBaseElement, UITextButton, UISpriteElement, Collectable, Trigger, Light2d, Draggable, DropTarget, TMXRenderer, TMXOrthogonalRenderer, TMXIsometricRenderer, TMXHexagonalRenderer, TMXStaggeredRenderer, Tile, TMXTileset, TMXTilesetGroup, TMXTileMap, TMXLayer, Pointer, Stage, Camera2d, Container, World, ParticleEmitter, ParticleEmitterSettings, Particle, Entity, Application };
+export { audio, collision, device, event, loader, level, input, Math, plugin, plugins, utils, save, timer, pool, state, video, Color, Vector2d, Vector3d, ObservableVector2d, ObservableVector3d, Matrix2d, Matrix3d, Polygon, Line, Ellipse, Point, Rect, RoundRect, Tween, QuadTree, GLShader, Compositor, PrimitiveCompositor, QuadCompositor, Renderer, WebGLRenderer, CanvasRenderer, CanvasTexture, TextureAtlas, Renderable, Body, Bounds, Text, BitmapText, BitmapTextData, ColorLayer, ImageLayer, Sprite, NineSliceSprite, UIBaseElement, UITextButton, UISpriteElement, Collectable, Trigger, Light2d, Draggable, DropTarget, TMXRenderer, TMXOrthogonalRenderer, TMXIsometricRenderer, TMXHexagonalRenderer, TMXStaggeredRenderer, Tile, TMXTileset, TMXTilesetGroup, TMXTileMap, TMXLayer, Pointer, Stage, Camera2d, Container, World, ParticleEmitter, ParticleEmitterSettings, Particle, Entity, Application };

package/dist/types/input/input.d.ts

@@ -9,7 +9,7 @@
  * @name preventDefault
  * @memberof input
  */
-export const preventDefault: boolean;
+export let preventDefault: boolean;
 export * from "./pointerevent.js";
 export * from "./keyboard.js";
 export * from "./gamepad.js";

package/dist/types/input/keyboard.d.ts

@@ -97,7 +97,7 @@ export function unbindKey(keycode: number): void;
  * @name keyBoardEventTarget
  * @memberof input
  */
-export const keyBoardEventTarget: EventTarget;
+export let keyBoardEventTarget: EventTarget;
 /**
  * *
  */

package/dist/types/input/pointerevent.d.ts

@@ -11,7 +11,7 @@
  * @example
  * onMouseEvent : function (pointer) {
  *    // convert the given into local (viewport) relative coordinates
- *    var pos = me.input.globalToLocal(pointer.clientX, pointer.clientY);
+ *    let pos = me.input.globalToLocal(pointer.clientX, pointer.clientY);
  *    // do something with pos !
  * };
  */
@@ -83,7 +83,7 @@ export function unbindPointer(button?: number | undefined): void;
  *  // onActivate function
  *  onActivateEvent: function () {
  *     // register on the 'pointerdown' event
- *     me.input.registerPointerEvent('pointerdown', this, this.pointerDown.bind(this));
+ *     me.input.registerPointerEvent('pointerdown', this, (e) => this.pointerDown(e));
  *  },
  *
  *  // pointerDown event callback
@@ -151,7 +151,7 @@ export function exitPointerLock(): boolean;
  * @name pointerEventTarget
  * @memberof input
  */
-export const pointerEventTarget: EventTarget;
+export let pointerEventTarget: EventTarget;
 /**
  * Pointer information (current position and size)
  * @public
@@ -159,7 +159,7 @@ export const pointerEventTarget: EventTarget;
  * @name pointer
  * @memberof input
  */
-export const pointer: Rect;
+export let pointer: Rect;
 /**
  * indicates if the pointer is currently locked
  * @public
@@ -167,7 +167,7 @@ export const pointer: Rect;
  * @name locked
  * @memberof input
  */
-export const locked: boolean;
+export let locked: boolean;
 /**
  * time interval for event throttling in milliseconds<br>
  * default value : "1000/me.timer.maxfps" ms<br>
@@ -177,5 +177,5 @@ export const locked: boolean;
  * @name throttlingInterval
  * @memberof input
  */
-export const throttlingInterval: number;
+export let throttlingInterval: number;
 import Rect from "./../geometries/rectangle.js";

package/dist/types/level/level.d.ts

@@ -27,7 +27,7 @@ declare namespace level {
      * @example
      * // the game assets to be be preloaded
      * // TMX maps
-     * var resources = [
+     * let resources = [
      *     {name: "a4_level1",   type: "tmx",   src: "data/level/a4_level1.tmx"},
      *     {name: "a4_level2",   type: "tmx",   src: "data/level/a4_level2.tmx"},
      *     {name: "a4_level3",   type: "tmx",   src: "data/level/a4_level3.tmx"},
@@ -41,7 +41,7 @@ declare namespace level {
      * ...
      * ...
      * // load a level into a specific container
-     * var levelContainer = new me.Container();
+     * let levelContainer = new me.Container();
      * me.level.load("a4_level2", {container:levelContainer});
      * // add a simple transformation
      * levelContainer.currentTransform.translate(levelContainer.width / 2, levelContainer.height / 2 );

package/dist/types/level/tiled/TMXLayer.d.ts

@@ -75,7 +75,7 @@ export default class TMXLayer extends Renderable {
      * @param {TMXRenderer} renderer
      * @example
      * // use the parent map default renderer
-     * var layer = new me.TMXLayer(...);
+     * let layer = new me.TMXLayer(...);
      * layer.setRenderer(map.getRenderer());
      */
     setRenderer(renderer: TMXRenderer): void;
@@ -99,9 +99,9 @@ export default class TMXLayer extends Renderable {
      * @returns {Tile} corresponding tile or null if there is no defined tile at the coordinate or if outside of the layer bounds
      * @example
      * // get the TMX Map Layer called "Front layer"
-     * var layer = me.game.world.getChildByName("Front Layer")[0];
+     * let layer = me.game.world.getChildByName("Front Layer")[0];
      * // get the tile object corresponding to the latest pointer position
-     * var tile = layer.getTile(me.input.pointer.x, me.input.pointer.y);
+     * let tile = layer.getTile(me.input.pointer.x, me.input.pointer.y);
      */
     getTile(x: number, y: number): Tile;
     /**
@@ -128,7 +128,7 @@ export default class TMXLayer extends Renderable {
      * @returns {Tile} corresponding tile or null if there is no defined tile at the position or if outside of the layer bounds
      * @example
      * // return the first tile at offset 0, 0
-     * var tile = layer.cellAt(0, 0);
+     * let tile = layer.cellAt(0, 0);
      */
     cellAt(x: number, y: number, boundsCheck?: number | undefined): Tile;
     /**

package/dist/types/level/tiled/TMXTileMap.d.ts

@@ -9,7 +9,7 @@ export default class TMXTileMap {
      * @param {object} data - TMX map in JSON format
      * @example
      * // create a new level object based on the TMX JSON object
-     * var level = new me.TMXTileMap(levelId, me.loader.getTMX(levelId));
+     * let level = new me.TMXTileMap(levelId, me.loader.getTMX(levelId));
      * // add the level to the game world container
      * level.addTo(me.game.world, true);
      */
@@ -115,7 +115,7 @@ export default class TMXTileMap {
      * @param {boolean} [setViewportBounds=false] - if true, set the viewport bounds to the map size, this should be set to true especially if adding a level to the game world container.
      * @example
      * // create a new level object based on the TMX JSON object
-     * var level = new me.TMXTileMap(levelId, me.loader.getTMX(levelId));
+     * let level = new me.TMXTileMap(levelId, me.loader.getTMX(levelId));
      * // add the level to the game world container
      * level.addTo(me.game.world, true, true);
      */

package/dist/types/level/tiled/TMXUtils.d.ts

@@ -1,11 +1,12 @@
 /**
- * decompress zlib/gzip data (NOT IMPLEMENTED)
+ * decompress and decode zlib/gzip data
  * @ignore
  * @name decompress
- * @param  {number[]} data- -  Array of bytes
- * @param  {string} format- -  compressed data format ("gzip","zlib")
+ * @param {string} input - Base64 encoded and compressed data
+ * @param {string} format - compressed data format ("gzip","zlib", "zstd")
+ * @returns {Uint32Array} Decoded and decompress data
  */
-export function decompress(): void;
+export function decompress(data: any, format: string): Uint32Array;
 /**
  * Decode a CSV encoded array into a binary array
  * @ignore

package/dist/types/loader/loader.d.ts

@@ -41,7 +41,7 @@
  * ];
  * ...
  * // set all resources to be loaded
- * me.loader.preload(game.resources, this.loaded.bind(this));
+ * me.loader.preload(game.resources, () => this.loaded());
  */
 export function preload(res: {
     name: string;
@@ -64,7 +64,7 @@ export function preload(res: {
  * @returns {number} the amount of corresponding resource to be preloaded
  * @example
  * // load an image asset
- * me.loader.load({name: "avatar",  type:"image",  src: "data/avatar.png"}, this.onload.bind(this), this.onerror.bind(this));
+ * me.loader.load({name: "avatar",  type:"image",  src: "data/avatar.png"}, () => this.onload(), () => this.onerror());
  * // load a base64 image asset
  *  me.loader.load({name: "avatar", type:"image", src: "data:image/png;base64,iVBORw0KAAAQAAAAEACA..."};
  * // start loading music

package/dist/types/loader/settings.d.ts

@@ -35,7 +35,7 @@ export let baseURL: {};
  * me.loader.crossOrigin = "anonymous";
  *
  * // set all ressources to be loaded
- * me.loader.preload(game.resources, this.loaded.bind(this));
+ * me.loader.preload(game.resources, () => this.loaded());
  */
 export let crossOrigin: string;
 /**
@@ -52,6 +52,6 @@ export let crossOrigin: string;
  * me.loader.withCredentials = true;
  *
  * // set all ressources to be loaded
- * me.loader.preload(game.resources, this.loaded.bind(this));
+ * me.loader.preload(game.resources, () => this.loaded());
  */
 export let withCredentials: boolean;

package/dist/types/particles/emitter.d.ts

@@ -10,7 +10,7 @@ export default class ParticleEmitter extends Container {
      * @param {ParticleEmitterSettings} [settings=ParticleEmitterSettings] - the settings for the particle emitter.
      * @example
      * // Create a particle emitter at position 100, 100
-     * var emitter = new ParticleEmitter(100, 100, {
+     * let emitter = new ParticleEmitter(100, 100, {
      *     width: 16,
      *     height : 16,
      *     tint: "#f00",

package/dist/types/physics/collision.d.ts

@@ -24,7 +24,7 @@ declare namespace collision {
      * @returns {Array.<Renderable>} an array of intersecting physic objects
      * @example
      *    // define a line accross the viewport
-     *    var ray = new me.Line(
+     *    let ray = new me.Line(
      *        // absolute position of the line
      *        0, 0, [
      *        // starting point relative to the initial position

package/dist/types/physics/detector.d.ts

@@ -43,7 +43,7 @@ export default class Detector {
      * @returns {Array.<Renderable>} an array of intersecting physic objects
      * @example
      *    // define a line accross the viewport
-     *    var ray = new me.Line(
+     *    let ray = new me.Line(
      *        // absolute position of the line
      *        0, 0, [
      *        // starting point relative to the initial position

package/dist/types/plugin/plugin.d.ts

@@ -3,8 +3,8 @@
  * @see plugin.register
  * @namespace plugins
  */
-export const plugins: {};
+export let plugins: {};
 /**
  * @namespace plugin
  */
-export const plugin: any;
+export let plugin: any;

package/dist/types/renderable/container.d.ts

@@ -28,10 +28,10 @@ export default class Container extends Renderable {
      */
     children: any[] | undefined;
     /**
-     * The property of the child object that should be used to sort on <br>
+     * The property of the child object that should be used to sort on this container
      * value : "x", "y", "z"
      * @type {string}
-     * @default me.game.sortOn
+     * @default "z"
      */
     sortOn: string;
     /**
@@ -87,9 +87,9 @@ export default class Container extends Renderable {
      * Add a child to the container <br>
      * if auto-sort is disable, the object will be appended at the bottom of the list.
      * Adding a child to the container will automatically remove it from its other container.
-     * Meaning a child can only have one parent.  This is important if you add a renderable
-     * to a container then add it to the me.game.world container it will move it out of the
-     * orginal container. Then when the me.game.world.reset() is called the renderable
+     * Meaning a child can only have one parent. This is important if you add a renderable
+     * to a container then add it to the World container it will move it out of the
+     * orginal container. Then when the World container reset() method is called the renderable
      * will not be in any container. <br>
      * if the given child implements a onActivateEvent method, that method will be called
      * once the child is added to this container.
@@ -115,14 +115,14 @@ export default class Container extends Renderable {
      * @param {Function} callback - fnction to execute on each element
      * @param {object} [thisArg] - value to use as this(i.e reference Object) when executing callback.
      * @example
-     * // iterate through all children of the root container
-     * me.game.world.forEach((child) => {
+     * // iterate through all children of this container
+     * container.forEach((child) => {
      *    // do something with the child
      *    child.doSomething();
      * });
-     * me.game.world.forEach((child, index) => { ... });
-     * me.game.world.forEach((child, index, array) => { ... });
-     * me.game.world.forEach((child, index, array) => { ... }, thisArg);
+     * container.forEach((child, index) => { ... });
+     * container.forEach((child, index, array) => { ... });
+     * container.forEach((child, index, array) => { ... }, thisArg);
      */
     forEach(callback: Function, thisArg?: object | undefined, ...args: any[]): void;
     /**
@@ -164,18 +164,18 @@ export default class Container extends Renderable {
      * @returns {Renderable[]} Array of childs
      * @example
      * // get the first child object called "mainPlayer" in a specific container :
-     * var ent = myContainer.getChildByProp("name", "mainPlayer");
+     * let ent = myContainer.getChildByProp("name", "mainPlayer");
      *
      * // or query the whole world :
-     * var ent = me.game.world.getChildByProp("name", "mainPlayer");
+     * let ent = container.getChildByProp("name", "mainPlayer");
      *
      * // partial property matches are also allowed by using a RegExp.
      * // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
-     * var allCoins = me.game.world.getChildByProp("name", /coin/i);
+     * let allCoins = container.getChildByProp("name", /coin/i);
      *
      * // searching for numbers or other data types :
-     * var zIndex10 = me.game.world.getChildByProp("z", 10);
-     * var inViewport = me.game.world.getChildByProp("inViewport", true);
+     * let zIndex10 = container.getChildByProp("z", 10);
+     * let inViewport = container.getChildByProp("inViewport", true);
      */
     getChildByProp(prop: string, value: string | RegExp | number | boolean): Renderable[];
     /**
@@ -208,10 +208,14 @@ export default class Container extends Renderable {
     getChildren(): Renderable[];
     /**
      * Checks if this container is root or if it's attached to the root container.
-     * @private
      * @returns {boolean}
      */
-    private isAttachedToRoot;
+    isAttachedToRoot(): boolean;
+    /**
+     * Returns the instance of the root container (i.e. the current application World container).
+     * @returns {Container}
+     */
+    getRootAncestor(): Container;
     /**
      * @ignore
      */

package/dist/types/renderable/sprite.d.ts

@@ -19,7 +19,7 @@ export default class Sprite extends Renderable {
      * @param {Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] - Anchor point to draw the frame at (defaults to the center of the frame).
      * @example
      * // create a single sprite from a standalone image, with anchor in the center
-     * var sprite = new me.Sprite(0, 0, {
+     * let sprite = new me.Sprite(0, 0, {
      *     image : "PlayerTexture",
      *     framewidth : 64,
      *     frameheight : 64,
@@ -27,12 +27,12 @@ export default class Sprite extends Renderable {
      * });
      *
      * // create a single sprite from a packed texture
-     * game.texture = new me.TextureAtlas(
+     * mytexture = new me.TextureAtlas(
      *     me.loader.getJSON("texture"),
      *     me.loader.getImage("texture")
      * );
-     * var sprite = new me.Sprite(0, 0, {
-     *     image : game.texture,
+     * let sprite = new me.Sprite(0, 0, {
+     *     image : mytexture,
      *     region : "npc2.png",
      * });
      */
@@ -119,7 +119,7 @@ export default class Sprite extends Renderable {
      * // make the object flicker for 1 second
      * // and then remove it
      * this.flicker(1000, function () {
-     *     me.game.world.removeChild(this);
+     *     world.removeChild(this);
      * });
      */
     flicker(duration: number, callback: Function): Sprite;
@@ -179,13 +179,13 @@ export default class Sprite extends Renderable {
      * this.setCurrentAnimation("eat", "walk");
      *
      * // set "die" animation, and remove the object when finished
-     * this.setCurrentAnimation("die", (function () {
-     *    me.game.world.removeChild(this);
+     * this.setCurrentAnimation("die", () => {
+     *    world.removeChild(this);
      *    return false; // do not reset to first frame
-     * }).bind(this));
+     * });
      *
      * // set "attack" animation, and pause for a short duration
-     * this.setCurrentAnimation("die", (function () {
+     * this.setCurrentAnimation("die", () => {
      *    this.animationpause = true;
      *
      *    // back to "standing" animation after 1 second
@@ -194,7 +194,7 @@ export default class Sprite extends Renderable {
      *    }, 1000);
      *
      *    return false; // do not reset to first frame
-     * }).bind(this));
+     * });
      */
     setCurrentAnimation(name: string, resetAnim?: string | Function | undefined, preserve_dt?: boolean | undefined): Sprite;
     /**
@@ -227,7 +227,7 @@ export default class Sprite extends Renderable {
      * @returns {Sprite} Reference to this object for method chaining
      * @example
      * // change the sprite to "shadedDark13.png";
-     * mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));
+     * mySprite.setRegion(mytexture.getRegion("shadedDark13.png"));
      */
     setRegion(region: object): Sprite;
     /**

package/dist/types/renderable/trigger.d.ts

@@ -19,7 +19,7 @@ export default class Trigger extends Renderable {
      * @param {boolean} [settings.flatten] - Flatten all objects into the target container. See {@link level.load}
      * @param {boolean} [settings.setViewportBounds] - Resize the viewport to match the level. See {@link level.load}
      * @example
-     * me.game.world.addChild(new me.Trigger(
+     * world.addChild(new me.Trigger(
      *     x, y, {
      *         shapes: [new me.Rect(0, 0, 100, 100)],
      *         "duration" : 250,

package/dist/types/renderable/ui/uibaseelement.d.ts

@@ -1,8 +1,7 @@
 /**
  * @classdesc
- * This is a basic clickable container which you can use in your game UI.
- * Use this for example if you want to display a button which contains
- * text and images.
+ * This is a basic clickable and draggable container which you can use in your game UI.
+ * Use this for example if you want to display a panel that contains text, images or other UI elements.
  * @augments Container
  */
 export default class UIBaseElement extends Container {
@@ -10,15 +9,22 @@ export default class UIBaseElement extends Container {
      *
      * @param {number} x - The x position of the container
      * @param {number} y - The y position of the container
-     * @param {number} w - width of the container (default: viewport width)
-     * @param {number} h - height of the container (default: viewport height)
+     * @param {number} w - width of the container
+     * @param {number} h - height of the container
      */
     constructor(x: number, y: number, w: number, h: number);
     /**
      * object can be clicked or not
      * @type {boolean}
+     * @default true
      */
     isClickable: boolean;
+    /**
+     * object can be clicked or not
+     * @type {boolean}
+     * @default false
+     */
+    isDraggable: boolean;
     /**
      * Tap and hold threshold timeout in ms
      * @type {number}
@@ -37,8 +43,13 @@ export default class UIBaseElement extends Container {
      * @default false
      */
     hover: boolean;
-    holdTimeout: number | null;
+    /**
+     * false if the pointer is down, or true when the pointer status is up
+     * @type {boolean}
+     * @default false
+     */
     released: boolean;
+    holdTimeout: number;
     /**
      * function callback for the pointerdown event
      * @ignore
@@ -56,6 +67,17 @@ export default class UIBaseElement extends Container {
      * @ignore
      */
     enter(event: any): void;
+    grabOffset: object | undefined;
+    /**
+     * pointermove function
+     * @ignore
+     */
+    pointerMove(event: any): void;
+    /**
+     * function called when the pointer is moved over the object
+     * @param {Pointer} event - the event object
+     */
+    onMove(event: Pointer): void;
     /**
      * function called when the pointer is over the object
      * @param {Pointer} event - the event object

package/dist/types/renderable/ui/uispriteelement.d.ts

@@ -1,30 +1,28 @@
 /**
  * @classdesc
- *  This is a basic sprite based button which you can use in your Game UI.
+ * This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
 export default class UISpriteElement extends Sprite {
     /**
-     * @param {number} x - the x coordinate of the GUI Object
-     * @param {number} y - the y coordinate of the GUI Object
+     * @param {number} x - the x coordinate of the UISpriteElement Object
+     * @param {number} y - the y coordinate of the UISpriteElement Object
      * @param {object} settings - See {@link Sprite}
      * @example
      * // create a basic GUI Object
      * class myButton extends UISpriteElement {
      *    constructor(x, y) {
-     *       var settings = {}
-     *       settings.image = "button";
-     *       settings.framewidth = 100;
-     *       settings.frameheight = 50;
-     *       // super constructor
-     *       super(x, y, settings);
-     *       // define the object z order
-     *       this.pos.z = 4;
+     *       // call the UISpriteElement parent constructor
+     *       super(x, y, {
+     *          image: "button",
+     *          framewidth: 100,
+     *          frameheight: 50
+     *       });
      *    }
      *
      *    // output something in the console
      *    // when the object is clicked
-     *    onClick:function (event) {
+     *    onClick(event) {
      *       console.log("clicked!");
      *       // don't propagate the event
      *       return false;
@@ -32,7 +30,7 @@ export default class UISpriteElement extends Sprite {
      * });
      *
      * // add the object at pos (10,10)
-     * me.game.world.addChild(new myButton(10,10));
+     * world.addChild(new myButton(10,10));
      */
     constructor(x: number, y: number, settings: object);
     /**
@@ -59,7 +57,7 @@ export default class UISpriteElement extends Sprite {
      * @default false
      */
     hover: boolean;
-    holdTimeout: number | null;
+    holdTimeout: number;
     released: boolean;
     /**
      * function callback for the pointerdown event