littlejsengine 1.15.2 → 1.15.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/littlejs.d.ts +190 -63
  2. package/dist/littlejs.esm.js +1267 -605
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +1261 -604
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +1179 -552
  7. package/examples/electron/index.html +2 -2
  8. package/examples/index.html +4 -3
  9. package/examples/particles/index.html +22 -6
  10. package/examples/shorts/base.html +2 -1
  11. package/examples/shorts/box2dCar.js +1 -1
  12. package/examples/shorts/box2dPool.js +9 -10
  13. package/examples/shorts/empty.js +1 -1
  14. package/examples/shorts/input.js +30 -25
  15. package/examples/shorts/music.js +1 -0
  16. package/examples/shorts/musicPlayer.js +1 -0
  17. package/examples/shorts/sequencer.js +2 -0
  18. package/examples/shorts/sound.js +1 -0
  19. package/examples/shorts/tileLayer.js +2 -2
  20. package/examples/shorts/tiles.png +0 -0
  21. package/examples/shorts/timers.js +1 -0
  22. package/examples/shorts/uiSystem.js +26 -14
  23. package/examples/shorts/videoPlayer.js +2 -1
  24. package/examples/starter/index.html +3 -2
  25. package/examples/uiSystem/game.js +28 -15
  26. package/package.json +1 -1
  27. package/plugins/box2d.js +1 -1
  28. package/plugins/desktop.ini +2 -0
  29. package/plugins/pluginExport.js +2 -0
  30. package/plugins/uiSystem.js +503 -91
  31. package/src/engine.js +2 -169
  32. package/src/engineAudio.js +0 -1
  33. package/src/engineBuild.js +1 -0
  34. package/src/engineDebug.js +84 -54
  35. package/src/engineDraw.js +81 -40
  36. package/src/engineExport.js +4 -1
  37. package/src/engineInput.js +526 -381
  38. package/src/engineObject.js +27 -23
  39. package/src/engineSettings.js +11 -6
  40. package/src/engineSplash.js +173 -0
  41. package/src/engineTileLayer.js +3 -3
  42. package/src/engineUtilities.js +17 -1
@@ -216,8 +216,9 @@ declare module "littlejsengine" {
216
216
  * @param {number} [time]
217
217
  * @param {number} [angle]
218
218
  * @param {boolean} [fill]
219
+ * @param {boolean} [screenSpace]
219
220
  * @memberof Debug */
220
- export function debugRect(pos: Vector2, size?: Vector2, color?: Color | string, time?: number, angle?: number, fill?: boolean): void;
221
+ export function debugRect(pos: Vector2, size?: Vector2, color?: Color | string, time?: number, angle?: number, fill?: boolean, screenSpace?: boolean): void;
221
222
  /** Draw a debug poly in world space
222
223
  * @param {Vector2} pos
223
224
  * @param {Array<Vector2>} points
@@ -225,49 +226,56 @@ declare module "littlejsengine" {
225
226
  * @param {number} [time]
226
227
  * @param {number} [angle]
227
228
  * @param {boolean} [fill]
229
+ * @param {boolean} [screenSpace]
228
230
  * @memberof Debug */
229
- export function debugPoly(pos: Vector2, points: Array<Vector2>, color?: Color | string, time?: number, angle?: number, fill?: boolean): void;
231
+ export function debugPoly(pos: Vector2, points: Array<Vector2>, color?: Color | string, time?: number, angle?: number, fill?: boolean, screenSpace?: boolean): void;
230
232
  /** Draw a debug circle in world space
231
233
  * @param {Vector2} pos
232
234
  * @param {number} [size] - diameter
233
235
  * @param {Color|string} [color]
234
236
  * @param {number} [time]
235
237
  * @param {boolean} [fill]
238
+ * @param {boolean} [screenSpace]
236
239
  * @memberof Debug */
237
- export function debugCircle(pos: Vector2, size?: number, color?: Color | string, time?: number, fill?: boolean): void;
240
+ export function debugCircle(pos: Vector2, size?: number, color?: Color | string, time?: number, fill?: boolean, screenSpace?: boolean): void;
238
241
  /** Draw a debug point in world space
239
242
  * @param {Vector2} pos
240
243
  * @param {Color|string} [color]
241
244
  * @param {number} [time]
242
245
  * @param {number} [angle]
246
+ * @param {boolean} [screenSpace]
243
247
  * @memberof Debug */
244
- export function debugPoint(pos: Vector2, color?: Color | string, time?: number, angle?: number): void;
248
+ export function debugPoint(pos: Vector2, color?: Color | string, time?: number, angle?: number, screenSpace?: boolean): void;
245
249
  /** Draw a debug line in world space
246
250
  * @param {Vector2} posA
247
251
  * @param {Vector2} posB
248
252
  * @param {Color|string} [color]
249
253
  * @param {number} [width]
250
254
  * @param {number} [time]
255
+ * @param {boolean} [screenSpace]
251
256
  * @memberof Debug */
252
- export function debugLine(posA: Vector2, posB: Vector2, color?: Color | string, width?: number, time?: number): void;
257
+ export function debugLine(posA: Vector2, posB: Vector2, color?: Color | string, width?: number, time?: number, screenSpace?: boolean): void;
253
258
  /** Draw a debug combined axis aligned bounding box in world space
254
259
  * @param {Vector2} posA
255
260
  * @param {Vector2} sizeA
256
261
  * @param {Vector2} posB
257
262
  * @param {Vector2} sizeB
258
263
  * @param {Color|string} [color]
264
+ * @param {number} [time]
265
+ * @param {boolean} [screenSpace]
259
266
  * @memberof Debug */
260
- export function debugOverlap(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB: Vector2, color?: Color | string): void;
267
+ export function debugOverlap(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB: Vector2, color?: Color | string, time?: number, screenSpace?: boolean): void;
261
268
  /** Draw a debug axis aligned bounding box in world space
262
- * @param {string} text
269
+ * @param {string|number} text
263
270
  * @param {Vector2} pos
264
271
  * @param {number} [size]
265
272
  * @param {Color|string} [color]
266
273
  * @param {number} [time]
267
274
  * @param {number} [angle]
268
275
  * @param {string} [font]
276
+ * @param {boolean} [screenSpace]
269
277
  * @memberof Debug */
270
- export function debugText(text: string, pos: Vector2, size?: number, color?: Color | string, time?: number, angle?: number, font?: string): void;
278
+ export function debugText(text: string | number, pos: Vector2, size?: number, color?: Color | string, time?: number, angle?: number, font?: string, screenSpace?: boolean): void;
271
279
  /** Clear all debug primitives in the list
272
280
  * @memberof Debug */
273
281
  export function debugClear(): void;
@@ -653,6 +661,10 @@ declare module "littlejsengine" {
653
661
  * @param {boolean} enable
654
662
  * @memberof Settings */
655
663
  export function setTouchGamepadCenterButton(enable: boolean): void;
664
+ /** Set number of buttons on touch gamepad (0-4), if 1 also acts as right analog stick
665
+ * @param {number} count
666
+ * @memberof Settings */
667
+ export function setTouchGamepadButtonCount(count: number): void;
656
668
  /** Set if touch gamepad should be analog stick or 8 way dpad
657
669
  * @param {boolean} analog
658
670
  * @memberof Settings */
@@ -1015,6 +1027,10 @@ declare module "littlejsengine" {
1015
1027
  * @param {number} [y] - Y axis location
1016
1028
  * @return {Vector2} */
1017
1029
  set(x?: number, y?: number): Vector2;
1030
+ /** Sets this vector from another vector and returns self
1031
+ * @param {Vector2} v - other vector
1032
+ * @return {Vector2} */
1033
+ setFrom(v: Vector2): Vector2;
1018
1034
  /** Returns a new vector that is a copy of this
1019
1035
  * @return {Vector2} */
1020
1036
  copy(): Vector2;
@@ -1106,6 +1122,9 @@ declare module "littlejsengine" {
1106
1122
  /** Returns the area this vector covers as a rectangle
1107
1123
  * @return {number} */
1108
1124
  area(): number;
1125
+ /** Returns true if this vector is (0,0)
1126
+ * @return {boolean} */
1127
+ isZero(): boolean;
1109
1128
  /** Returns a new vector that is p percent between this and the vector passed in
1110
1129
  * @param {Vector2} v - other vector
1111
1130
  * @param {number} percent
@@ -1155,6 +1174,10 @@ declare module "littlejsengine" {
1155
1174
  * @param {number} [a] - alpha
1156
1175
  * @return {Color} */
1157
1176
  set(r?: number, g?: number, b?: number, a?: number): Color;
1177
+ /** Sets this color from another color and returns self
1178
+ * @param {Color} c - other color
1179
+ * @return {Color} */
1180
+ setFrom(c: Color): Color;
1158
1181
  /** Returns a new color that is a copy of this
1159
1182
  * @return {Color} */
1160
1183
  copy(): Color;
@@ -1422,7 +1445,7 @@ declare module "littlejsengine" {
1422
1445
  padding: number;
1423
1446
  /** @property {TextureInfo} - The texture info for this tile */
1424
1447
  textureInfo: TextureInfo;
1425
- /** @property {float} - Shrinks tile by this many pixels to prevent neighbors bleeding */
1448
+ /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
1426
1449
  bleedScale: number;
1427
1450
  /** Returns a copy of this tile offset by a vector
1428
1451
  * @param {Vector2} offset - Offset to apply in pixels
@@ -1655,7 +1678,7 @@ declare module "littlejsengine" {
1655
1678
  export function drawCanvas2D(pos: Vector2, size: Vector2, angle?: number, mirror?: boolean, drawFunction?: Canvas2DDrawFunction, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1656
1679
  /** Draw text on main canvas in world space
1657
1680
  * Automatically splits new lines into rows
1658
- * @param {string} text
1681
+ * @param {string|number} text
1659
1682
  * @param {Vector2} pos
1660
1683
  * @param {number} [size]
1661
1684
  * @param {Color} [color=(1,1,1,1)]
@@ -1668,10 +1691,10 @@ declare module "littlejsengine" {
1668
1691
  * @param {number} [angle]
1669
1692
  * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
1670
1693
  * @memberof Draw */
1671
- export function drawText(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1694
+ export function drawText(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1672
1695
  /** Draw text on overlay canvas in world space
1673
1696
  * Automatically splits new lines into rows
1674
- * @param {string} text
1697
+ * @param {string|number} text
1675
1698
  * @param {Vector2} pos
1676
1699
  * @param {number} [size]
1677
1700
  * @param {Color} [color=(1,1,1,1)]
@@ -1683,10 +1706,10 @@ declare module "littlejsengine" {
1683
1706
  * @param {number} [maxWidth]
1684
1707
  * @param {number} [angle]
1685
1708
  * @memberof Draw */
1686
- export function drawTextOverlay(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number): void;
1709
+ export function drawTextOverlay(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number): void;
1687
1710
  /** Draw text on overlay canvas in screen space
1688
1711
  * Automatically splits new lines into rows
1689
- * @param {string} text
1712
+ * @param {string|number} text
1690
1713
  * @param {Vector2} pos
1691
1714
  * @param {number} [size]
1692
1715
  * @param {Color} [color=(1,1,1,1)]
@@ -1699,7 +1722,7 @@ declare module "littlejsengine" {
1699
1722
  * @param {number} [angle]
1700
1723
  * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
1701
1724
  * @memberof Draw */
1702
- export function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1725
+ export function drawTextScreen(text: string | number, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, fontStyle?: string, maxWidth?: number, angle?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1703
1726
  /** Enable normal or additive blend mode
1704
1727
  * @param {boolean} [additive]
1705
1728
  * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -1734,28 +1757,28 @@ declare module "littlejsengine" {
1734
1757
  tileSize: Vector2;
1735
1758
  paddingSize: Vector2;
1736
1759
  /** Draw text in world space using the image font
1737
- * @param {string} text
1760
+ * @param {string|number} text
1738
1761
  * @param {Vector2} pos
1739
1762
  * @param {number} [scale=.25]
1740
1763
  * @param {boolean} [center]
1741
1764
  * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
1742
1765
  */
1743
- drawText(text: string, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1766
+ drawText(text: string | number, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1744
1767
  /** Draw text on overlay canvas in world space using the image font
1745
- * @param {string} text
1768
+ * @param {string|number} text
1746
1769
  * @param {Vector2} pos
1747
1770
  * @param {number} [scale]
1748
1771
  * @param {boolean} [center]
1749
1772
  */
1750
- drawTextOverlay(text: string, pos: Vector2, scale?: number, center?: boolean): void;
1773
+ drawTextOverlay(text: string | number, pos: Vector2, scale?: number, center?: boolean): void;
1751
1774
  /** Draw text on overlay canvas in screen space using the image font
1752
- * @param {string} text
1775
+ * @param {string|number} text
1753
1776
  * @param {Vector2} pos
1754
1777
  * @param {number} [scale]
1755
1778
  * @param {boolean} [center]
1756
1779
  * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
1757
1780
  */
1758
- drawTextScreen(text: string, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1781
+ drawTextScreen(text: string | number, pos: Vector2, scale?: number, center?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
1759
1782
  }
1760
1783
  /** Returns true if fullscreen mode is active
1761
1784
  * @return {boolean}
@@ -1768,7 +1791,7 @@ declare module "littlejsengine" {
1768
1791
  * @param {string} [cursorStyle] - CSS cursor style (auto, none, crosshair, etc)
1769
1792
  * @memberof Draw */
1770
1793
  export function setCursor(cursorStyle?: string): void;
1771
- /** Get the camera's visible area in world space
1794
+ /** Get the size of the camera window in world space
1772
1795
  * @return {Vector2}
1773
1796
  * @memberof Draw */
1774
1797
  export function getCameraSize(): Vector2;
@@ -1902,15 +1925,6 @@ declare module "littlejsengine" {
1902
1925
  export let glPositionData: any;
1903
1926
  export let glColorData: any;
1904
1927
  export let glBatchCount: any;
1905
- /**
1906
- * LittleJS Input System
1907
- * - Tracks keyboard down, pressed, and released
1908
- * - Tracks mouse buttons, position, and wheel
1909
- * - Tracks multiple analog gamepads
1910
- * - Touch input is handled as mouse input
1911
- * - Virtual gamepad for touch devices
1912
- * @namespace Input
1913
- */
1914
1928
  /** Returns true if device key is down
1915
1929
  * @param {string|number} key
1916
1930
  * @param {number} [device]
@@ -1930,6 +1944,10 @@ declare module "littlejsengine" {
1930
1944
  * @memberof Input */
1931
1945
  export function keyWasReleased(key: string | number, device?: number): boolean;
1932
1946
  /** Returns input vector from arrow keys or WASD if enabled
1947
+ * @param {string} [up]
1948
+ * @param {string} [down]
1949
+ * @param {string} [left]
1950
+ * @param {string} [right]
1933
1951
  * @return {Vector2}
1934
1952
  * @memberof Input */
1935
1953
  export function keyDirection(up?: string, down?: string, left?: string, right?: string): Vector2;
@@ -1962,6 +1980,15 @@ declare module "littlejsengine" {
1962
1980
  * @return {boolean}
1963
1981
  * @memberof Input */
1964
1982
  export function mouseWasReleased(button: number): boolean;
1983
+ /**
1984
+ * LittleJS Input System
1985
+ * - Tracks keyboard down, pressed, and released
1986
+ * - Tracks mouse buttons, position, and wheel
1987
+ * - Tracks multiple analog gamepads
1988
+ * - Touch input is handled as mouse input
1989
+ * - Virtual gamepad for touch devices
1990
+ * @namespace Input
1991
+ */
1965
1992
  /** Mouse pos in world space
1966
1993
  * @type {Vector2}
1967
1994
  * @memberof Input */
@@ -1994,6 +2021,10 @@ declare module "littlejsengine" {
1994
2021
  * @type {boolean}
1995
2022
  * @memberof Input */
1996
2023
  export let inputPreventDefault: boolean;
2024
+ /** Primary gamepad index, automatically set to first gamepad with input
2025
+ * @type {number}
2026
+ * @memberof Input */
2027
+ export let gamepadPrimary: number;
1997
2028
  /** Prevents input continuing to the default browser handling
1998
2029
  * This is useful to disable for html menus so the browser can handle input normally
1999
2030
  * @param {boolean} preventDefault
@@ -2023,7 +2054,16 @@ declare module "littlejsengine" {
2023
2054
  * @return {Vector2}
2024
2055
  * @memberof Input */
2025
2056
  export function gamepadStick(stick: number, gamepad?: number): Vector2;
2026
- export function gamepadsUpdate(): void;
2057
+ /** Returns gamepad dpad value
2058
+ * @param {number} [gamepad]
2059
+ * @return {Vector2}
2060
+ * @memberof Input */
2061
+ export function gamepadDpad(gamepad?: number): Vector2;
2062
+ /** Returns true if passed in gamepad is connected
2063
+ * @param {number} [gamepad]
2064
+ * @return {boolean}
2065
+ * @memberof Input */
2066
+ export function gamepadConnected(gamepad?: number): boolean;
2027
2067
  /** Pulse the vibration hardware if it exists
2028
2068
  * @param {number|Array} [pattern] - single value in ms or vibration interval array
2029
2069
  * @memberof Input */
@@ -2406,7 +2446,7 @@ declare module "littlejsengine" {
2406
2446
  collideRaycast: boolean;
2407
2447
  /** Update the object transform, called automatically by engine even when paused */
2408
2448
  updateTransforms(): void;
2409
- /** Update the object physics, called automatically by engine once each frame */
2449
+ /** Update the object physics, called automatically by engine once each frame. Can be overridden to stop or change how physics works for an object. */
2410
2450
  updatePhysics(): void;
2411
2451
  /** Update the object, called automatically by engine once each frame. Does nothing by default. */
2412
2452
  update(): void;
@@ -2518,7 +2558,7 @@ declare module "littlejsengine" {
2518
2558
  * @return {TileCollisionLayer}
2519
2559
  * @memberof TileLayers */
2520
2560
  export function tileCollisionTest(pos: Vector2, size?: Vector2, object?: EngineObject, solidOnly?: boolean): TileCollisionLayer;
2521
- /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
2561
+ /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
2522
2562
  * The point will be inside the colliding tile if it hits (may have a tiny shift)
2523
2563
  * @param {Vector2} posStart
2524
2564
  * @param {Vector2} posEnd
@@ -2712,7 +2752,7 @@ declare module "littlejsengine" {
2712
2752
  * @param {EngineObject} [object]
2713
2753
  * @return {boolean} */
2714
2754
  collisionTest(pos: Vector2, size?: Vector2, object?: EngineObject): boolean;
2715
- /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
2755
+ /** Return the exact position of the boundary of first tile hit, undefined if nothing was hit.
2716
2756
  * The point will be inside the colliding tile if it hits (may have a tiny shift)
2717
2757
  * @param {Vector2} posStart
2718
2758
  * @param {Vector2} posEnd
@@ -3095,17 +3135,31 @@ declare module "littlejsengine" {
3095
3135
  /**
3096
3136
  * LittleJS User Interface Plugin
3097
3137
  * - call new UISystemPlugin() to setup the UI system
3138
+ * - Gamepad and keyboard navigation support
3098
3139
  * - Nested Menus
3099
3140
  * - Text
3100
3141
  * - Buttons
3101
3142
  * - Checkboxes
3102
3143
  * - Images
3144
+ * - Scrollbars
3145
+ * - Video
3103
3146
  * @namespace UISystem
3104
3147
  */
3105
3148
  /** Global UI system plugin object
3106
3149
  * @type {UISystemPlugin}
3107
3150
  * @memberof UISystem */
3108
3151
  export let uiSystem: UISystemPlugin;
3152
+ /** Enable UI system debug drawing
3153
+ * 0=off, 1=normal, 2=show invisible
3154
+ * @type {number}
3155
+ * @default
3156
+ * @memberof UISystem */
3157
+ export let uiDebug: number;
3158
+ /** Enable UI system debug drawing
3159
+ * 0=off, 1=normal, 2=show invisible
3160
+ * @param {number|boolean} enable
3161
+ * @memberof UISystem */
3162
+ export function uiSetDebug(debugMode: any): void;
3109
3163
  /**
3110
3164
  * UI System Global Object
3111
3165
  * @memberof UISystem
@@ -3137,7 +3191,7 @@ declare module "littlejsengine" {
3137
3191
  /** @property {number} - Default rounded rect corner radius for UI elements */
3138
3192
  defaultCornerRadius: number;
3139
3193
  /** @property {number} - Default scale to use for fitting text to object */
3140
- defaultTextScale: number;
3194
+ defaultTextFitScale: number;
3141
3195
  /** @property {string} - Default font for UI elements */
3142
3196
  defaultFont: string;
3143
3197
  /** @property {Sound} - Default sound when interactive UI element is pressed */
@@ -3146,6 +3200,26 @@ declare module "littlejsengine" {
3146
3200
  defaultSoundRelease: any;
3147
3201
  /** @property {Sound} - Default sound when interactive UI element is clicked */
3148
3202
  defaultSoundClick: any;
3203
+ /** @property {Color} - Color for shadow */
3204
+ defaultShadowColor: Color;
3205
+ /** @property {number} - Size of shadow blur */
3206
+ defaultShadowBlur: number;
3207
+ /** @property {Vector2} - Offset of shadow blur */
3208
+ defaultShadowOffset: Vector2;
3209
+ /** @property {number} - If set ui coords will be renormalized to this canvas height */
3210
+ nativeHeight: number;
3211
+ /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
3212
+ navigationObject: any;
3213
+ /** @property {number} - Gamepad index to use for UI navigation */
3214
+ navigationGamepadIndex: number;
3215
+ /** @property {Timer} - Cooldown timer for navigation inputs */
3216
+ navigationTimer: Timer;
3217
+ /** @property {number} - Time between navigation inputs in seconds */
3218
+ navigationDelay: number;
3219
+ /** @property {boolean} - should the navigation be horizontal, vertical, or both? */
3220
+ navigationDirection: number;
3221
+ /** @property {boolean} - True if user last used navigation instead of mouse */
3222
+ navigationMode: boolean;
3149
3223
  /** @property {Array<UIObject>} - List of all UI elements */
3150
3224
  uiObjects: any[];
3151
3225
  /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -3156,8 +3230,8 @@ declare module "littlejsengine" {
3156
3230
  hoverObject: any;
3157
3231
  /** @property {UIObject} - Hover object at start of update */
3158
3232
  lastHoverObject: any;
3159
- /** @property {number} - If set ui coords will be renormalized to this canvas height */
3160
- nativeHeight: number;
3233
+ /** @property {UIObject} - Current confirm menu being shown */
3234
+ confirmDialog: any;
3161
3235
  /** Draw a rectangle to the UI context
3162
3236
  * @param {Vector2} pos
3163
3237
  * @param {Vector2} size
@@ -3165,8 +3239,11 @@ declare module "littlejsengine" {
3165
3239
  * @param {number} [lineWidth]
3166
3240
  * @param {Color} [lineColor]
3167
3241
  * @param {number} [cornerRadius]
3168
- * @param {Color} [gradientColor] */
3169
- drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number, gradientColor?: Color): void;
3242
+ * @param {Color} [gradientColor]
3243
+ * @param {Color} [shadowColor]
3244
+ * @param {number} [shadowBlur]
3245
+ * @param {Color} [shadowOffset] */
3246
+ drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number, gradientColor?: Color, shadowColor?: Color, shadowBlur?: number, shadowOffset?: Color): void;
3170
3247
  /** Draw a line to the UI context
3171
3248
  * @param {Vector2} posA
3172
3249
  * @param {Vector2} posB
@@ -3179,8 +3256,11 @@ declare module "littlejsengine" {
3179
3256
  * @param {TileInfo} tileInfo
3180
3257
  * @param {Color} [color=uiSystem.defaultColor]
3181
3258
  * @param {number} [angle]
3182
- * @param {boolean} [mirror] */
3183
- drawTile(pos: Vector2, size: Vector2, tileInfo: TileInfo, color?: Color, angle?: number, mirror?: boolean): void;
3259
+ * @param {boolean} [mirror]
3260
+ * @param {Color} [shadowColor]
3261
+ * @param {number} [shadowBlur]
3262
+ * @param {Color} [shadowOffset] */
3263
+ drawTile(pos: Vector2, size: Vector2, tileInfo: TileInfo, color?: Color, angle?: number, mirror?: boolean, shadowColor?: Color, shadowBlur?: number, shadowOffset?: Color): void;
3184
3264
  /** Draw text to the UI context
3185
3265
  * @param {string} text
3186
3266
  * @param {Vector2} pos
@@ -3193,8 +3273,10 @@ declare module "littlejsengine" {
3193
3273
  * @param {string} [fontStyle]
3194
3274
  * @param {boolean} [applyMaxWidth=true]
3195
3275
  * @param {Vector2} [textShadow]
3196
- */
3197
- drawText(text: string, pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, align?: string, font?: string, fontStyle?: string, applyMaxWidth?: boolean, textShadow?: Vector2): void;
3276
+ * @param {Color} [shadowColor]
3277
+ * @param {number} [shadowBlur]
3278
+ * @param {Color} [shadowOffset] */
3279
+ drawText(text: string, pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, align?: string, font?: string, fontStyle?: string, applyMaxWidth?: boolean, textShadow?: Vector2, shadowColor?: Color, shadowBlur?: number, shadowOffset?: Color): void;
3198
3280
  /**
3199
3281
  * @callback DragAndDropCallback - Callback for drag and drop events
3200
3282
  * @param {DragEvent} event - The drag event
@@ -3205,16 +3287,37 @@ declare module "littlejsengine" {
3205
3287
  * @param {DragAndDropCallback} [onDrop] - when a file is dropped
3206
3288
  * @param {DragAndDropCallback} [onDragEnter] - when a file is dragged onto the window
3207
3289
  * @param {DragAndDropCallback} [onDragLeave] - when a file is dragged off the window
3208
- * @param {DragAndDropCallback} [onDragOver] - continously when dragging over */
3290
+ * @param {DragAndDropCallback} [onDragOver] - continuously when dragging over */
3209
3291
  setupDragAndDrop(onDrop?: (event: DragEvent) => any, onDragEnter?: (event: DragEvent) => any, onDragLeave?: (event: DragEvent) => any, onDragOver?: (event: DragEvent) => any): void;
3210
3292
  /** Convert a screen space position to native UI position
3211
3293
  * @param {Vector2} pos
3212
- * @return {Vector2}
3213
- */
3294
+ * @return {Vector2} */
3214
3295
  screenToNative(pos: Vector2): Vector2;
3215
3296
  /** Destroy and remove all objects
3216
3297
  * @memberof Engine */
3217
3298
  destroyObjects(): void;
3299
+ /** Get all navigable UI objects sorted by navigationIndex
3300
+ * @return {Array<UIObject>} */
3301
+ getNavigableObjects(): Array<UIObject>;
3302
+ /** Get navigation direction from gamepad or keyboard
3303
+ * @return {number} */
3304
+ getNavigationDirection(): number;
3305
+ /** Get other axis navigation direction from gamepad or keyboard
3306
+ * @return {Vector2} */
3307
+ getNavigationOtherDirection(): Vector2;
3308
+ /** Get if navigation button was pressed from gamepad or keyboard
3309
+ * @return {boolean} */
3310
+ getNavigationWasPressed(): boolean;
3311
+ /** Show a confirmation dialog with Yes/No buttons
3312
+ * Centers the dialog on the screen with darkened background
3313
+ * @param {string} [text] - The message to display
3314
+ * @param {Function} [yesCallback] - Called when Yes is clicked
3315
+ * @param {Function} [noCallback] - Called when No is clicked
3316
+ * @param {Vector2} [size] - Size of the confirmation dialog
3317
+ * @param {string} [exitKey] - Key that can exit the menu
3318
+ * @return {UIObject} The confirmation menu object
3319
+ */
3320
+ showConfirmDialog(text?: string, yesCallback?: Function, noCallback?: Function, size?: Vector2, exitKey?: string): UIObject;
3218
3321
  }
3219
3322
  /**
3220
3323
  * UI Object - Base level object for all UI elements
@@ -3262,7 +3365,13 @@ declare module "littlejsengine" {
3262
3365
  /** @property {number} - Override for text height */
3263
3366
  textHeight: any;
3264
3367
  /** @property {number} - Scale text to fit in the object */
3265
- textScale: number;
3368
+ textFitScale: number;
3369
+ /** @property {Vector2} - How much to offset the text shadow or undefined */
3370
+ textShadow: any;
3371
+ /** @property {number} - Color for text line drawing */
3372
+ textLineColor: Color;
3373
+ /** @property {number} - Width for text line drawing */
3374
+ textLineWidth: number;
3266
3375
  /** @property {boolean} - Should this object be drawn */
3267
3376
  visible: boolean;
3268
3377
  /** @property {Array<UIObject>} - A list of this object's children */
@@ -3283,39 +3392,55 @@ declare module "littlejsengine" {
3283
3392
  dragActivate: boolean;
3284
3393
  /** @property {boolean} - True if this can be a hover object */
3285
3394
  canBeHover: boolean;
3286
- /** @property {Vector2} - How much to offset the text shadow or undefined */
3287
- textShadow: any;
3395
+ /** @property {Color} - Color for shadow, undefined if no shadow */
3396
+ shadowColor: Color;
3397
+ /** @property {number} - Size of shadow blur */
3398
+ shadowBlur: number;
3399
+ /** @property {Vector2} - Offset of shadow blur */
3400
+ shadowOffset: Vector2;
3401
+ /** @property {number} - Optional navigation order index, lower values are selected first */
3402
+ navigationIndex: any;
3403
+ /** @property {boolean} - Should this be auto selected by navigation? Must also have valid navigation index. */
3404
+ navigationAutoSelect: boolean;
3288
3405
  /** Add a child UIObject to this object
3289
- * @param {UIObject} child
3290
- */
3406
+ * @param {UIObject} child */
3291
3407
  addChild(child: UIObject): void;
3292
3408
  /** Remove a child UIObject from this object
3293
- * @param {UIObject} child
3294
- */
3409
+ * @param {UIObject} child */
3295
3410
  removeChild(child: UIObject): void;
3296
3411
  /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
3297
3412
  destroy(): void;
3298
3413
  destroyed: number;
3299
3414
  /** Check if the mouse is overlapping a box in screen space
3300
- * @return {boolean} - True if overlapping
3301
- */
3415
+ * @return {boolean} - True if overlapping */
3302
3416
  isMouseOverlapping(): boolean;
3303
3417
  /** Update the object, called automatically by plugin once each frame */
3304
3418
  update(): void;
3305
3419
  /** Render the object, called automatically by plugin once each frame */
3306
3420
  render(): void;
3307
- /** Special update when object is not visible */
3308
- updateInvisible(): void;
3309
3421
  /** Get the size for text with overrides and scale
3310
- * @return {Vector2}
3311
- */
3422
+ * @return {Vector2} */
3312
3423
  getTextSize(): Vector2;
3424
+ /** Called when the navigation button is pressed on this object */
3425
+ navigatePressed(): void;
3313
3426
  /** @return {boolean} - Is the mouse hovering over this element */
3314
3427
  isHoverObject(): boolean;
3315
3428
  /** @return {boolean} - Is the mouse held onto this element */
3316
3429
  isActiveObject(): boolean;
3317
- /** Called each frame when object updates */
3430
+ /** @return {boolean} - Is the gamepad or keyboard navigation object */
3431
+ isNavigationObject(): boolean;
3432
+ /** @return {boolean} - Can it be interacted with */
3433
+ isInteractive(): boolean;
3434
+ /** Returns string containing info about this object for debugging
3435
+ * @return {string} */
3436
+ toString(): string;
3437
+ /** Called if uiDebug is enabled
3438
+ * @param {boolean} visible */
3439
+ renderDebug(visible?: boolean): void;
3440
+ /** Called each frame before object updates */
3318
3441
  onUpdate(): void;
3442
+ /** Called each frame before object renders */
3443
+ onRender(): void;
3319
3444
  /** Called when the mouse enters the object */
3320
3445
  onEnter(): void;
3321
3446
  /** Called when the mouse leaves the object */
@@ -3381,6 +3506,8 @@ declare module "littlejsengine" {
3381
3506
  * @param {Color} [color=uiSystem.defaultButtonColor]
3382
3507
  */
3383
3508
  constructor(pos?: Vector2, size?: Vector2, text?: string, color?: Color);
3509
+ /** @property {Vector2} - Text offset for the button */
3510
+ textOffset: Vector2;
3384
3511
  text: string;
3385
3512
  }
3386
3513
  /**
@@ -3441,7 +3568,7 @@ declare module "littlejsengine" {
3441
3568
  * @param {number} [volume=1] - Volume percent scaled by global volume (0-1)
3442
3569
  */
3443
3570
  constructor(pos?: Vector2, size?: Vector2, src: string, autoplay?: boolean, loop?: boolean, volume?: number);
3444
- /** @property {float} - The video volume */
3571
+ /** @property {number} - The video volume */
3445
3572
  volume: number;
3446
3573
  /** @property {HTMLVideoElement} - The video player */
3447
3574
  video: HTMLVideoElement;
@@ -3454,7 +3581,7 @@ declare module "littlejsengine" {
3454
3581
  stop(): void;
3455
3582
  /** Check if video is currently loading
3456
3583
  * @return {boolean} */
3457
- isLoadng(): boolean;
3584
+ isLoading(): boolean;
3458
3585
  /** Check if video is currently paused
3459
3586
  * @return {boolean} */
3460
3587
  isPaused(): boolean;