littlejsengine 1.14.11 → 1.14.19

package/plugins/uiSystem.js

@@ -6,6 +6,7 @@
  * - Buttons
  * - Checkboxes
  * - Images
+ * @namespace UISystem
  */
 
 'use strict';
@@ -13,12 +14,14 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Global UI system plugin object
- *  @type {UISystemPlugin} */
+ *  @type {UISystemPlugin}
+ *  @memberof UISystem */
 let uiSystem;
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * UI System Global Object
+ * @memberof UISystem
  */
 class UISystemPlugin
 {
@@ -45,6 +48,8 @@ class UISystemPlugin
         this.defaultHoverColor = hsl(0,0,.9);
         /** @property {Color} - Default color for disabled UI elements */
         this.defaultDisabledColor = hsl(0,0,.3);
+        /** @property {Color} - Uses a gradient fill combined with color */
+        this.defaultGradientColor = undefined;
         /** @property {number} - Default line width for UI elements */
         this.defaultLineWidth = 4;
         /** @property {number} - Default rounded rect corner radius for UI elements */
@@ -52,7 +57,7 @@ class UISystemPlugin
         /** @property {number} - Default scale to use for fitting text to object */
         this.defaultTextScale = .8;
         /** @property {string} - Default font for UI elements */
-        this.defaultFont = 'arial';
+        this.defaultFont = fontDefault;
         /** @property {Sound} - Default sound when interactive UI element is pressed */
         this.defaultSoundPress = undefined;
         /** @property {Sound} - Default sound when interactive UI element is released */
@@ -63,11 +68,15 @@ class UISystemPlugin
         this.uiObjects = [];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
         this.uiContext = context;
-        /** @property {UIObject} - Top most object user is over */
-        this.hoverObject = undefined;
         /** @property {UIObject} - Object user is currently interacting with */
         this.activeObject = undefined;
-            
+        /** @property {UIObject} - Top most object user is over */
+        this.hoverObject = undefined;
+        /** @property {UIObject} - Hover object at start of update */
+        this.lastHoverObject = undefined;
+        /** @property {number} - If set ui coords will be renormalized to this canvas height */
+        this.nativeHeight = 0;
+
         engineAddPlugin(uiUpdate, uiRender);
 
         // setup recursive update and render
@@ -97,6 +106,7 @@ class UISystemPlugin
                     updateInvisibleObject(o);
             }
             // reset hover object at start of update
+            uiSystem.lastHoverObject = uiSystem.hoverObject;
             uiSystem.hoverObject = undefined;
             for (let i = uiSystem.uiObjects.length; i--;)
             {
@@ -106,6 +116,17 @@ class UISystemPlugin
         }
         function uiRender()
         {
+            const context = uiSystem.uiContext;
+            context.save();
+            if (uiSystem.nativeHeight)
+            {
+                // convert to native height
+                const s = mainCanvasSize.y / uiSystem.nativeHeight;
+                context.translate(-s*mainCanvasSize.x/2,0);
+                context.scale(s,s);
+                context.translate(mainCanvasSize.x/2/s,0);
+            }
+
             function renderObject(o)
             {
                 if (!o.visible)
@@ -117,6 +138,7 @@ class UISystemPlugin
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
+            context.restore();
         }
     }
 
@@ -126,11 +148,30 @@ class UISystemPlugin
     *  @param {Color}   [color=uiSystem.defaultColor]
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
-    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
+    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius]
+    *  @param {Color}   [gradientColor=uiSystem.defaultGradientColor] */
+    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius, gradientColor=uiSystem.defaultGradientColor)
     {
+        ASSERT(isVector2(pos), 'pos must be a vec2');
+        ASSERT(isVector2(size), 'size must be a vec2');
+        ASSERT(isColor(color), 'color must be a color');
+        ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
+        ASSERT(isColor(lineColor), 'lineColor must be a color');
+        ASSERT(isNumber(cornerRadius), 'cornerRadius must be a number');
+        
         const context = uiSystem.uiContext;
-        context.fillStyle = color.toString();
+        if (gradientColor)
+        {
+            const g = context.createLinearGradient(
+                pos.x, pos.y-size.y/2, pos.x, pos.y+size.y/2);
+            const c = color.toString();
+            g.addColorStop(0, c);
+            g.addColorStop(.5, gradientColor.toString());
+            g.addColorStop(1, c);
+            context.fillStyle = g;
+        }
+        else
+            context.fillStyle = color.toString();
         context.beginPath();
         if (cornerRadius && context['roundRect'])
             context['roundRect'](pos.x-size.x/2, pos.y-size.y/2, size.x, size.y, cornerRadius);
@@ -152,6 +193,11 @@ class UISystemPlugin
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
     drawLine(posA, posB, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
     {
+        ASSERT(isVector2(posA), 'posA must be a vec2');
+        ASSERT(isVector2(posB), 'posB must be a vec2');
+        ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
+        ASSERT(isColor(lineColor), 'lineColor must be a color');
+
         const context = uiSystem.uiContext;
         context.strokeStyle = lineColor.toString();
         context.lineWidth = lineWidth;
@@ -182,17 +228,43 @@ class UISystemPlugin
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
     *  @param {string}  [align]
     *  @param {string}  [font=uiSystem.defaultFont]
+    *  @param {string}  [fontStyle]
     *  @param {boolean} [applyMaxWidth=true] */
-    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, applyMaxWidth=true)
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true)
+    {
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
+    }
+
+    /**
+     * @callback DragAndDropCallback - Callback for drag and drop events
+     * @param {DragEvent} event - The drag event
+     * @memberof UISystem
+     */
+
+    /** Setup drag and drop event handlers
+    *  Automatically prevents defaults and calls the given functions
+    *  @param {DragAndDropCallback} [onDrop] - when a file is dropped
+    *  @param {DragAndDropCallback} [onDragEnter] - when a file is dragged onto the window
+    *  @param {DragAndDropCallback} [onDragLeave] - when a file is dragged off the window
+    *  @param {DragAndDropCallback} [onDragOver] - continously when dragging over */
+    setupDragAndDrop(onDrop, onDragEnter, onDragLeave, onDragOver)
     {
-        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
+        function setCallback(callback, listenerType)
+        {
+            function listener(e) { e.preventDefault(); callback && callback(e); }
+            document.addEventListener(listenerType, listener);
+        }
+        setCallback(onDrop,      'drop');
+        setCallback(onDragEnter, 'dragenter');
+        setCallback(onDragLeave, 'dragleave');
+        setCallback(onDragOver,  'dragover');
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * UI Object - Base level object for all UI elements
- */
+ * @memberof UISystem */
 class UIObject
 {
     /** Create a UIObject
@@ -201,6 +273,9 @@ class UIObject
      */
     constructor(pos=vec2(), size=vec2())
     {
+        ASSERT(isVector2(pos), 'ui object pos must be a vec2');
+        ASSERT(isVector2(size), 'ui object size must be a vec2');
+
         /** @property {Vector2} - Local position of the object */
         this.localPos = pos.copy();
         /** @property {Vector2} - Screen space position of the object */
@@ -208,27 +283,31 @@ class UIObject
         /** @property {Vector2} - Screen space size of the object */
         this.size = size.copy();
         /** @property {Color} - Color of the object */
-        this.color = uiSystem.defaultColor;
+        this.color = uiSystem.defaultColor.copy();
         /** @property {Color} - Color of the object when active, uses color if undefined */
         this.activeColor = undefined;
         /** @property {string} - Text for this ui object */
         this.text = undefined;
         /** @property {Color} - Color when disabled */
-        this.disabledColor = uiSystem.defaultDisabledColor;
+        this.disabledColor = uiSystem.defaultDisabledColor.copy();
         /** @property {boolean} - Is this object disabled? */
         this.disabled = false;
         /** @property {Color} - Color for text */
-        this.textColor = uiSystem.defaultTextColor;
+        this.textColor = uiSystem.defaultTextColor.copy();
         /** @property {Color} - Color used when hovering over the object */
-        this.hoverColor = uiSystem.defaultHoverColor;
+        this.hoverColor = uiSystem.defaultHoverColor.copy();
         /** @property {Color} - Color for line drawing */
-        this.lineColor = uiSystem.defaultLineColor;
+        this.lineColor = uiSystem.defaultLineColor.copy();
+        /** @property {Color} - Uses a gradient fill combined with color */
+        this.gradientColor = uiSystem.defaultGradientColor ? uiSystem.defaultGradientColor.copy() : undefined;
         /** @property {number} - Width for line drawing */
         this.lineWidth = uiSystem.defaultLineWidth;
         /** @property {number} - Corner radius for rounded rects */
         this.cornerRadius = uiSystem.defaultCornerRadius;
         /** @property {string} - Font for this objecct */
         this.font = uiSystem.defaultFont;
+        /** @property {string} - Font style for this object or undefined */
+        this.fontStyle = undefined;
         /** @property {number} - Override for text width */
         this.textWidth = undefined;
         /** @property {number} - Override for text height */
@@ -253,6 +332,8 @@ class UIObject
         this.interactive = false;
         /** @property {boolean} - Activate when dragged over with mouse held down */
         this.dragActivate = false;
+        /** @property {boolean} - True if this can be a hover object */
+        this.canBeHover = true;
         uiSystem.uiObjects.push(this);
     }
 
@@ -276,31 +357,47 @@ class UIObject
         child.parent = undefined;
     }
 
+    /** Check if the mouse is overlapping a box in screen space
+     *  @return {boolean} - True if overlapping
+     */
+    isMouseOverlapping()
+    {
+        const size = !isTouchDevice ? this.size :
+                this.size.add(vec2(this.extraTouchSize || 0));
+        if (!uiSystem.nativeHeight)
+            return isOverlapping(this.pos, size, mousePosScreen);
+
+        const s = mainCanvasSize.y / uiSystem.nativeHeight;
+        const sInv = 1/s;
+        let pos = mousePosScreen.copy();
+        pos.x += s*mainCanvasSize.x/2;
+        pos.x *= sInv;
+        pos.y *= sInv;
+        pos.x -= sInv*mainCanvasSize.x/2;
+        return isOverlapping(this.pos, size, pos);
+    }
+
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
-        const wasHover = this.isHoverObject();
+        const wasHover = uiSystem.lastHoverObject === this;
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
-        if (!uiSystem.hoverObject)
+        if (this.canBeHover)
         if (mousePress || isActive || (!mouseDown && !isTouchDevice))
-        {
-            const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
-            if (isOverlapping(this.pos, size, mousePosScreen))
-                uiSystem.hoverObject = this;
-        }
+        if (!uiSystem.hoverObject && this.isMouseOverlapping())
+            uiSystem.hoverObject = this;
         if (this.isHoverObject())
         {
-            if (mousePress)
-                inputClearKey(0,0,0,1,0); // clear mouse was pressed state
             if (!this.disabled)
             {
                 if (mousePress)
                 {
                     if (this.interactive)
                     {
-                        this.onPress();
+                        if (!this.dragActivate || (!wasHover || mouseWasPressed(0)))
+                            this.onPress();
                         if (this.soundPress)
                             this.soundPress.play();
                         if (uiSystem.activeObject && !isActive)
@@ -308,13 +405,15 @@ class UIObject
                         uiSystem.activeObject = this;
                     }
                 }
-                if (!mouseDown && uiSystem.activeObject === this && this.interactive)
+                if (!mouseDown && this.isActiveObject() && this.interactive)
                 {
                     this.onClick();
                     if (this.soundClick)
                         this.soundClick.play();
                 }
             }
+            // clear mouse was pressed state even when disabled
+            mousePress && inputClearKey(0,0,0,1,0);
         }
         if (isActive)
         if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
@@ -325,6 +424,7 @@ class UIObject
             uiSystem.activeObject = undefined;
         }
 
+        // call enter/leave events
         if (this.isHoverObject() !== wasHover)
             this.isHoverObject() ? this.onEnter() : this.onLeave();
     }
@@ -335,7 +435,7 @@ class UIObject
         if (!this.size.x || !this.size.y) return;
 
         const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
-        const color = this.interactive ? this.disabled ? this.disabledColor : this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
+        const color = this.disabled ? this.disabledColor : this.interactive ? this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
     }
 
@@ -386,6 +486,7 @@ class UIObject
 /** 
  * UIText - A UI object that displays text
  * @extends UIObject
+ * @memberof UISystem
  */
 class UIText extends UIObject
 {
@@ -400,6 +501,10 @@ class UIText extends UIObject
     {
         super(pos, size);
 
+        ASSERT(isString(text), 'ui text must be a string');
+        ASSERT(['left','center','right'].includes(align), 'ui text align must be left, center, or right');
+        ASSERT(isString(font), 'ui text font must be a string');
+
         // set properties
         this.text = text;
         this.align = align;
@@ -407,11 +512,13 @@ class UIText extends UIObject
 
         // make text not outlined by default
         this.lineWidth = 0;
+        // text can not be a hover object by default
+        this.canBeHover = false;
     }
     render()
     {
         const textSize = this.getTextSize();
-        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle);
     }
 }
 
@@ -419,6 +526,7 @@ class UIText extends UIObject
 /** 
  * UITile - A UI object that displays a tile image
  * @extends UIObject
+ * @memberof UISystem
  */
 class UITile extends UIObject
 {
@@ -433,15 +541,19 @@ class UITile extends UIObject
     constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false)
     {
         super(pos, size);
+
+        ASSERT(tileInfo instanceof TileInfo, 'ui tile tileInfo must be a TileInfo');
+        ASSERT(isColor(color), 'ui tile color must be a color');
+        ASSERT(isNumber(angle), 'ui tile angle must be a number');
+
         /** @property {TileInfo} - Tile image to use */
         this.tileInfo = tileInfo;
         /** @property {number} - Angle to rotate in radians */
         this.angle = angle;
         /** @property {boolean} - Should it be mirrored? */
         this.mirror = mirror;
-        
         // set properties
-        this.color = color;
+        this.color = color.copy();
     }
     render()
     {
@@ -453,6 +565,7 @@ class UITile extends UIObject
 /** 
  * UIButton - A UI object that acts as a button
  * @extends UIObject
+ * @memberof UISystem
  */
 class UIButton extends UIObject
 {
@@ -466,9 +579,12 @@ class UIButton extends UIObject
     {
         super(pos, size);
 
+        ASSERT(isString(text), 'ui button must be a string');
+        ASSERT(isColor(color), 'ui button color must be a color');
+
         // set properties
         this.text = text;
-        this.color = color;
+        this.color = color.copy();
         this.interactive = true;
     }
     render()
@@ -478,7 +594,7 @@ class UIButton extends UIObject
         // draw the text scaled to fit
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
     }
 }
 
@@ -486,6 +602,7 @@ class UIButton extends UIObject
 /** 
  * UICheckbox - A UI object that acts as a checkbox
  * @extends UIObject
+ * @memberof UISystem
  */
 class UICheckbox extends UIObject
 {
@@ -499,12 +616,15 @@ class UICheckbox extends UIObject
     constructor(pos, size, checked=false, text='', color=uiSystem.defaultButtonColor)
     {
         super(pos, size);
+
+        ASSERT(isString(text), 'ui checkbox must be a string');
+        ASSERT(isColor(color), 'ui checkbox color must be a color');
+
         /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
         this.checked = checked;
-
         // set properties
         this.text = text;
-        this.color = color;
+        this.color = color.copy();
         this.interactive = true;
     }
     onClick()
@@ -528,7 +648,7 @@ class UICheckbox extends UIObject
         const textSize = this.getTextSize();
         const pos = this.pos.add(vec2(this.size.x,0));
         uiSystem.drawText(this.text, pos, textSize, 
-            this.textColor, 0, undefined, 'left', this.font, false);
+            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false);
     }
 }
 
@@ -536,6 +656,7 @@ class UICheckbox extends UIObject
 /** 
  * UIScrollbar - A UI object that acts as a scrollbar
  * @extends UIObject
+ * @memberof UISystem
  */
 class UIScrollbar extends UIObject
 {
@@ -551,14 +672,19 @@ class UIScrollbar extends UIObject
     {
         super(pos, size);
 
+        ASSERT(isNumber(value), 'ui scrollbar value must be a number');
+        ASSERT(isString(text), 'ui scrollbar must be a string');
+        ASSERT(isColor(color), 'ui scrollbar color must be a color');
+        ASSERT(isColor(handleColor), 'ui scrollbar handleColor must be a color');
+
         /** @property {number} - Current percentage value of this scrollbar 0-1 */
         this.value = value;
         /** @property {Color} - Color for the handle part of the scrollbar */
-        this.handleColor = handleColor;
+        this.handleColor = handleColor.copy();
 
         // set properties
         this.text = text;
-        this.color = color;
+        this.color = color.copy();
         this.interactive = true;
     }
     update()
@@ -566,33 +692,46 @@ class UIScrollbar extends UIObject
         super.update();
         if (this.isActiveObject() && this.interactive)
         {
+            // handle horizontal or vertical scrollbar
+            const isHorizontal = this.size.x > this.size.y;
+            const handleSize = isHorizontal ? this.size.y : this.size.x;
+            const barSize = isHorizontal ? this.size.x : this.size.y;
+            const centerPos = isHorizontal ? this.pos.x : this.pos.y;
+
             // check if value changed
-            const handleSize = vec2(this.size.y);
-            const handleWidth = this.size.x - handleSize.x;
-            const p1 = this.pos.x - handleWidth/2;
-            const p2 = this.pos.x + handleWidth/2;
+            const handleWidth = barSize - handleSize;
+            const p1 = centerPos - handleWidth/2;
+            const p2 = centerPos + handleWidth/2;
             const oldValue = this.value;
-            this.value = percent(mousePosScreen.x, p1, p2);
+            this.value = isHorizontal ? 
+                percent(mousePosScreen.x, p1, p2) :
+                percent(mousePosScreen.y, p2, p1);
             this.value === oldValue || this.onChange();
         }
     }
     render()
     {
         super.render();
-    
+
+        // handle horizontal or vertical scrollbar
+        const isHorizontal = this.size.x > this.size.y;
+        const handleSize = isHorizontal ? this.size.y : this.size.x;
+        const barSize = isHorizontal ? this.size.x : this.size.y;
+        const centerPos = isHorizontal ? this.pos.x : this.pos.y;
+        
         // draw the scrollbar handle
-        const handleSize = vec2(this.size.y);
-        const handleWidth = this.size.x - handleSize.x;
-        const p1 = this.pos.x - handleWidth/2;
-        const p2 = this.pos.x + handleWidth/2;
-        const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
-        const handleColor = this.disabled ? this.disabledColor : 
-            this.interactive && this.isActiveObject() ? this.color : this.handleColor;
-        uiSystem.drawRect(handlePos, handleSize, handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
+        const handleWidth = barSize - handleSize;
+        const p1 = centerPos - handleWidth/2;
+        const p2 = centerPos + handleWidth/2;
+        const handlePos = isHorizontal ? 
+            vec2(lerp(p1, p2, this.value), this.pos.y) :
+            vec2(this.pos.x, lerp(p2, p1, this.value))
+        const handleColor = this.disabled ? this.disabledColor : this.handleColor;
+        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
     }
 }

package/plugins/zzfxm.js

@@ -1,5 +1,6 @@
 /**
  * LittleJS ZzFXM Plugin
+ * @namespace ZzFXM
  */
 
 'use strict';
@@ -8,6 +9,8 @@
  * Music Object - Stores a zzfx music track for later use
  * 
  * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
+ * @extends Sound
+ * @memberof ZzFXM
  * @example
  * // create some music
  * const music_example = new Music(
@@ -66,7 +69,8 @@ class ZzFXMusic extends Sound
  *  @param {Array} patterns - Array of pattern data
  *  @param {Array} sequence - Array of pattern indexes
  *  @param {number} [BPM] - Playback speed of the song in BPM
- *  @return {Array} - Left and right channel sample data */
+ *  @return {Array} - Left and right channel sample data
+ *  @memberof ZzFXM */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
 {
   let i, j, k;

package/reference.md

@@ -399,7 +399,7 @@ TileCollisionLayer.setCollisionData(pos, data=1)    // Set tile collision data a
 tileCollisionGetData(pos)                           // Get tile collision data at pos
 tileCollisionTest(pos, size=(0,0), object)          // Check if collision should occur
 tileCollisionRaycast(posStart, posEnd, object)      // Return the center of tile if hit
-tileCollisionLoad(tileMapData, tileInfo)            // Load tile layers from exported data
+tileLayersLoad(tileMapData, tileInfo)            // Load tile layers from exported data
 
 ```