littlejsengine 1.14.10 → 1.14.16

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 (76) hide show
  1. package/dist/littlejs.d.ts +264 -120
  2. package/dist/littlejs.esm.js +603 -288
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +600 -287
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +521 -232
  7. package/examples/box2d/gameObjects.js +2 -2
  8. package/examples/breakout/gameObjects.js +2 -2
  9. package/examples/breakoutTutorial/README.md +32 -32
  10. package/examples/breakoutTutorial/game.js +1 -1
  11. package/examples/electron/game.js +3 -3
  12. package/examples/electron/index.html +2 -2
  13. package/examples/electron/package.json +1 -8
  14. package/examples/index.html +59 -51
  15. package/examples/module/game.js +3 -3
  16. package/examples/platformer/gameCharacter.js +6 -2
  17. package/examples/platformer/gameEffects.js +4 -4
  18. package/examples/platformer/gameLevel.js +1 -1
  19. package/examples/platformer/gameObjects.js +11 -9
  20. package/examples/puzzle/game.js +1 -1
  21. package/examples/shorts/animation.js +1 -1
  22. package/examples/shorts/base.html +1 -1
  23. package/examples/shorts/blending.js +8 -14
  24. package/examples/shorts/box2d.js +7 -3
  25. package/examples/shorts/box2dCar.js +2 -1
  26. package/examples/shorts/empty.js +30 -0
  27. package/examples/shorts/helloWorld.js +1 -1
  28. package/examples/shorts/hillGlideGame.js +10 -4
  29. package/examples/shorts/landerGame.js +30 -3
  30. package/examples/shorts/medals.js +4 -4
  31. package/examples/shorts/music.js +29 -55
  32. package/examples/shorts/musicPlayer.js +134 -0
  33. package/examples/shorts/nineSlice.js +34 -15
  34. package/examples/shorts/parallax.js +4 -3
  35. package/examples/shorts/particles.js +16 -16
  36. package/examples/shorts/piano.js +15 -21
  37. package/examples/shorts/pongGame.js +6 -4
  38. package/examples/shorts/raycasting.js +13 -5
  39. package/examples/shorts/sequencer.js +122 -0
  40. package/examples/shorts/shapes.js +7 -4
  41. package/examples/shorts/slidingPuzzle.js +16 -6
  42. package/examples/shorts/sound.js +18 -9
  43. package/examples/shorts/spaceGame.js +12 -8
  44. package/examples/shorts/spriteAtlas.js +7 -7
  45. package/examples/shorts/starfield.js +1 -1
  46. package/examples/shorts/systemFont.js +2 -2
  47. package/examples/shorts/texture.js +2 -2
  48. package/examples/shorts/tileLayer.js +10 -10
  49. package/examples/shorts/tiltedView.js +14 -3
  50. package/examples/shorts/timers.js +10 -0
  51. package/examples/shorts/topDown.js +4 -1
  52. package/examples/shorts/uiSystem.js +8 -5
  53. package/examples/starter/game.js +3 -3
  54. package/examples/starter/index.html +2 -2
  55. package/examples/typescript/game.js +3 -3
  56. package/examples/typescript/game.ts +3 -3
  57. package/examples/uiSystem/game.js +6 -6
  58. package/package.json +4 -2
  59. package/plugins/box2d.js +18 -3
  60. package/plugins/newgrounds.js +11 -9
  61. package/plugins/postProcess.js +5 -2
  62. package/plugins/uiSystem.js +120 -34
  63. package/plugins/zzfxm.js +5 -1
  64. package/reference.md +1 -3
  65. package/src/engine.js +52 -21
  66. package/src/engineAudio.js +31 -14
  67. package/src/engineDebug.js +80 -55
  68. package/src/engineDraw.js +60 -31
  69. package/src/engineExport.js +3 -1
  70. package/src/engineMedals.js +10 -2
  71. package/src/engineObject.js +14 -10
  72. package/src/engineParticles.js +59 -46
  73. package/src/engineRelease.js +1 -0
  74. package/src/engineSettings.js +7 -7
  75. package/src/engineTileLayer.js +49 -18
  76. package/src/engineUtilities.js +79 -34
@@ -6,6 +6,7 @@
6
6
  * - Buttons
7
7
  * - Checkboxes
8
8
  * - Images
9
+ * @namespace UISystem
9
10
  */
10
11
 
11
12
  'use strict';
@@ -13,12 +14,14 @@
13
14
  ///////////////////////////////////////////////////////////////////////////////
14
15
 
15
16
  /** Global UI system plugin object
16
- * @type {UISystemPlugin} */
17
+ * @type {UISystemPlugin}
18
+ * @memberof UISystem */
17
19
  let uiSystem;
18
20
 
19
21
  ///////////////////////////////////////////////////////////////////////////////
20
22
  /**
21
23
  * UI System Global Object
24
+ * @memberof UISystem
22
25
  */
23
26
  class UISystemPlugin
24
27
  {
@@ -63,10 +66,12 @@ class UISystemPlugin
63
66
  this.uiObjects = [];
64
67
  /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
65
68
  this.uiContext = context;
66
- /** @property {UIObject} - Top most object user is over */
67
- this.hoverObject = undefined;
68
69
  /** @property {UIObject} - Object user is currently interacting with */
69
70
  this.activeObject = undefined;
71
+ /** @property {UIObject} - Top most object user is over */
72
+ this.hoverObject = undefined;
73
+ /** @property {UIObject} - Hover object at start of update */
74
+ this.lastHoverObject = undefined;
70
75
 
71
76
  engineAddPlugin(uiUpdate, uiRender);
72
77
 
@@ -97,6 +102,7 @@ class UISystemPlugin
97
102
  updateInvisibleObject(o);
98
103
  }
99
104
  // reset hover object at start of update
105
+ uiSystem.lastHoverObject = uiSystem.hoverObject;
100
106
  uiSystem.hoverObject = undefined;
101
107
  for (let i = uiSystem.uiObjects.length; i--;)
102
108
  {
@@ -129,6 +135,13 @@ class UISystemPlugin
129
135
  * @param {number} [cornerRadius=uiSystem.defaultCornerRadius] */
130
136
  drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
131
137
  {
138
+ ASSERT(isVector2(pos), 'pos must be a vec2');
139
+ ASSERT(isVector2(size), 'size must be a vec2');
140
+ ASSERT(isColor(color), 'color must be a color');
141
+ ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
142
+ ASSERT(isColor(lineColor), 'lineColor must be a color');
143
+ ASSERT(isNumber(cornerRadius), 'cornerRadius must be a number');
144
+
132
145
  const context = uiSystem.uiContext;
133
146
  context.fillStyle = color.toString();
134
147
  context.beginPath();
@@ -152,6 +165,11 @@ class UISystemPlugin
152
165
  * @param {Color} [lineColor=uiSystem.defaultLineColor] */
153
166
  drawLine(posA, posB, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
154
167
  {
168
+ ASSERT(isVector2(posA), 'posA must be a vec2');
169
+ ASSERT(isVector2(posB), 'posB must be a vec2');
170
+ ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
171
+ ASSERT(isColor(lineColor), 'lineColor must be a color');
172
+
155
173
  const context = uiSystem.uiContext;
156
174
  context.strokeStyle = lineColor.toString();
157
175
  context.lineWidth = lineWidth;
@@ -187,12 +205,37 @@ class UISystemPlugin
187
205
  {
188
206
  drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
189
207
  }
208
+
209
+ /**
210
+ * @callback DragAndDropCallback - Callback for drag and drop events
211
+ * @param {DragEvent} event - The drag event
212
+ * @memberof UISystem
213
+ */
214
+
215
+ /** Setup drag and drop event handlers
216
+ * Automatically prevents defaults and calls the given functions
217
+ * @param {DragAndDropCallback} [onDrop] - when a file is dropped
218
+ * @param {DragAndDropCallback} [onDragEnter] - when a file is dragged onto the window
219
+ * @param {DragAndDropCallback} [onDragLeave] - when a file is dragged off the window
220
+ * @param {DragAndDropCallback} [onDragOver] - continously when dragging over */
221
+ setupDragAndDrop(onDrop, onDragEnter, onDragLeave, onDragOver)
222
+ {
223
+ function setCallback(callback, listenerType)
224
+ {
225
+ function listener(e) { e.preventDefault(); callback && callback(e); }
226
+ document.addEventListener(listenerType, listener);
227
+ }
228
+ setCallback(onDrop, 'drop');
229
+ setCallback(onDragEnter, 'dragenter');
230
+ setCallback(onDragLeave, 'dragleave');
231
+ setCallback(onDragOver, 'dragover');
232
+ }
190
233
  }
191
234
 
192
235
  ///////////////////////////////////////////////////////////////////////////////
193
236
  /**
194
237
  * UI Object - Base level object for all UI elements
195
- */
238
+ * @memberof UISystem */
196
239
  class UIObject
197
240
  {
198
241
  /** Create a UIObject
@@ -201,6 +244,9 @@ class UIObject
201
244
  */
202
245
  constructor(pos=vec2(), size=vec2())
203
246
  {
247
+ ASSERT(isVector2(pos), 'ui object pos must be a vec2');
248
+ ASSERT(isVector2(size), 'ui object size must be a vec2');
249
+
204
250
  /** @property {Vector2} - Local position of the object */
205
251
  this.localPos = pos.copy();
206
252
  /** @property {Vector2} - Screen space position of the object */
@@ -208,21 +254,21 @@ class UIObject
208
254
  /** @property {Vector2} - Screen space size of the object */
209
255
  this.size = size.copy();
210
256
  /** @property {Color} - Color of the object */
211
- this.color = uiSystem.defaultColor;
257
+ this.color = uiSystem.defaultColor.copy();
212
258
  /** @property {Color} - Color of the object when active, uses color if undefined */
213
259
  this.activeColor = undefined;
214
260
  /** @property {string} - Text for this ui object */
215
261
  this.text = undefined;
216
262
  /** @property {Color} - Color when disabled */
217
- this.disabledColor = uiSystem.defaultDisabledColor;
263
+ this.disabledColor = uiSystem.defaultDisabledColor.copy();
218
264
  /** @property {boolean} - Is this object disabled? */
219
265
  this.disabled = false;
220
266
  /** @property {Color} - Color for text */
221
- this.textColor = uiSystem.defaultTextColor;
267
+ this.textColor = uiSystem.defaultTextColor.copy()
222
268
  /** @property {Color} - Color used when hovering over the object */
223
- this.hoverColor = uiSystem.defaultHoverColor;
269
+ this.hoverColor = uiSystem.defaultHoverColor.copy()
224
270
  /** @property {Color} - Color for line drawing */
225
- this.lineColor = uiSystem.defaultLineColor;
271
+ this.lineColor = uiSystem.defaultLineColor.copy()
226
272
  /** @property {number} - Width for line drawing */
227
273
  this.lineWidth = uiSystem.defaultLineWidth;
228
274
  /** @property {number} - Corner radius for rounded rects */
@@ -279,7 +325,7 @@ class UIObject
279
325
  /** Update the object, called automatically by plugin once each frame */
280
326
  update()
281
327
  {
282
- const wasHover = this.isHoverObject();
328
+ const wasHover = uiSystem.lastHoverObject === this;
283
329
  const isActive = this.isActiveObject();
284
330
  const mouseDown = mouseIsDown(0);
285
331
  const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
@@ -292,15 +338,14 @@ class UIObject
292
338
  }
293
339
  if (this.isHoverObject())
294
340
  {
295
- if (mousePress)
296
- inputClearKey(0,0,0,1,0); // clear mouse was pressed state
297
341
  if (!this.disabled)
298
342
  {
299
343
  if (mousePress)
300
344
  {
301
345
  if (this.interactive)
302
346
  {
303
- this.onPress();
347
+ if (!this.dragActivate || (!wasHover || mouseWasPressed(0)))
348
+ this.onPress();
304
349
  if (this.soundPress)
305
350
  this.soundPress.play();
306
351
  if (uiSystem.activeObject && !isActive)
@@ -308,13 +353,15 @@ class UIObject
308
353
  uiSystem.activeObject = this;
309
354
  }
310
355
  }
311
- if (!mouseDown && uiSystem.activeObject === this && this.interactive)
356
+ if (!mouseDown && this.isActiveObject() && this.interactive)
312
357
  {
313
358
  this.onClick();
314
359
  if (this.soundClick)
315
360
  this.soundClick.play();
316
361
  }
317
362
  }
363
+ // clear mouse was pressed state even when disabled
364
+ mousePress && inputClearKey(0,0,0,1,0);
318
365
  }
319
366
  if (isActive)
320
367
  if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
@@ -325,6 +372,7 @@ class UIObject
325
372
  uiSystem.activeObject = undefined;
326
373
  }
327
374
 
375
+ // call enter/leave events
328
376
  if (this.isHoverObject() !== wasHover)
329
377
  this.isHoverObject() ? this.onEnter() : this.onLeave();
330
378
  }
@@ -335,7 +383,7 @@ class UIObject
335
383
  if (!this.size.x || !this.size.y) return;
336
384
 
337
385
  const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
338
- const color = this.interactive ? this.disabled ? this.disabledColor : this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
386
+ const color = this.disabled ? this.disabledColor : this.interactive ? this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
339
387
  uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
340
388
  }
341
389
 
@@ -386,6 +434,7 @@ class UIObject
386
434
  /**
387
435
  * UIText - A UI object that displays text
388
436
  * @extends UIObject
437
+ * @memberof UISystem
389
438
  */
390
439
  class UIText extends UIObject
391
440
  {
@@ -400,6 +449,10 @@ class UIText extends UIObject
400
449
  {
401
450
  super(pos, size);
402
451
 
452
+ ASSERT(isString(text), 'ui text must be a string');
453
+ ASSERT(['left','center','right'].includes(align), 'ui text align must be left, center, or right');
454
+ ASSERT(isString(font), 'ui text font must be a string');
455
+
403
456
  // set properties
404
457
  this.text = text;
405
458
  this.align = align;
@@ -419,6 +472,7 @@ class UIText extends UIObject
419
472
  /**
420
473
  * UITile - A UI object that displays a tile image
421
474
  * @extends UIObject
475
+ * @memberof UISystem
422
476
  */
423
477
  class UITile extends UIObject
424
478
  {
@@ -433,15 +487,19 @@ class UITile extends UIObject
433
487
  constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false)
434
488
  {
435
489
  super(pos, size);
490
+
491
+ ASSERT(tileInfo instanceof TileInfo, 'ui tile tileInfo must be a TileInfo');
492
+ ASSERT(isColor(color), 'ui tile color must be a color');
493
+ ASSERT(isNumber(angle), 'ui tile angle must be a number');
494
+
436
495
  /** @property {TileInfo} - Tile image to use */
437
496
  this.tileInfo = tileInfo;
438
497
  /** @property {number} - Angle to rotate in radians */
439
498
  this.angle = angle;
440
499
  /** @property {boolean} - Should it be mirrored? */
441
500
  this.mirror = mirror;
442
-
443
501
  // set properties
444
- this.color = color;
502
+ this.color = color.copy();
445
503
  }
446
504
  render()
447
505
  {
@@ -453,6 +511,7 @@ class UITile extends UIObject
453
511
  /**
454
512
  * UIButton - A UI object that acts as a button
455
513
  * @extends UIObject
514
+ * @memberof UISystem
456
515
  */
457
516
  class UIButton extends UIObject
458
517
  {
@@ -466,9 +525,12 @@ class UIButton extends UIObject
466
525
  {
467
526
  super(pos, size);
468
527
 
528
+ ASSERT(isString(text), 'ui button must be a string');
529
+ ASSERT(isColor(color), 'ui button color must be a color');
530
+
469
531
  // set properties
470
532
  this.text = text;
471
- this.color = color;
533
+ this.color = color.copy()
472
534
  this.interactive = true;
473
535
  }
474
536
  render()
@@ -486,6 +548,7 @@ class UIButton extends UIObject
486
548
  /**
487
549
  * UICheckbox - A UI object that acts as a checkbox
488
550
  * @extends UIObject
551
+ * @memberof UISystem
489
552
  */
490
553
  class UICheckbox extends UIObject
491
554
  {
@@ -499,12 +562,15 @@ class UICheckbox extends UIObject
499
562
  constructor(pos, size, checked=false, text='', color=uiSystem.defaultButtonColor)
500
563
  {
501
564
  super(pos, size);
565
+
566
+ ASSERT(isString(text), 'ui checkbox must be a string');
567
+ ASSERT(isColor(color), 'ui checkbox color must be a color');
568
+
502
569
  /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
503
570
  this.checked = checked;
504
-
505
571
  // set properties
506
572
  this.text = text;
507
- this.color = color;
573
+ this.color = color.copy();
508
574
  this.interactive = true;
509
575
  }
510
576
  onClick()
@@ -536,6 +602,7 @@ class UICheckbox extends UIObject
536
602
  /**
537
603
  * UIScrollbar - A UI object that acts as a scrollbar
538
604
  * @extends UIObject
605
+ * @memberof UISystem
539
606
  */
540
607
  class UIScrollbar extends UIObject
541
608
  {
@@ -551,14 +618,19 @@ class UIScrollbar extends UIObject
551
618
  {
552
619
  super(pos, size);
553
620
 
621
+ ASSERT(isNumber(value), 'ui scrollbar value must be a number');
622
+ ASSERT(isString(text), 'ui scrollbar must be a string');
623
+ ASSERT(isColor(color), 'ui scrollbar color must be a color');
624
+ ASSERT(isColor(handleColor), 'ui scrollbar handleColor must be a color');
625
+
554
626
  /** @property {number} - Current percentage value of this scrollbar 0-1 */
555
627
  this.value = value;
556
628
  /** @property {Color} - Color for the handle part of the scrollbar */
557
- this.handleColor = handleColor;
629
+ this.handleColor = handleColor.copy();
558
630
 
559
631
  // set properties
560
632
  this.text = text;
561
- this.color = color;
633
+ this.color = color.copy();
562
634
  this.interactive = true;
563
635
  }
564
636
  update()
@@ -566,29 +638,43 @@ class UIScrollbar extends UIObject
566
638
  super.update();
567
639
  if (this.isActiveObject() && this.interactive)
568
640
  {
641
+ // handle horizontal or vertical scrollbar
642
+ const isHorizontal = this.size.x > this.size.y;
643
+ const handleSize = isHorizontal ? this.size.y : this.size.x;
644
+ const barSize = isHorizontal ? this.size.x : this.size.y;
645
+ const centerPos = isHorizontal ? this.pos.x : this.pos.y;
646
+
569
647
  // check if value changed
570
- const handleSize = vec2(this.size.y);
571
- const handleWidth = this.size.x - handleSize.x;
572
- const p1 = this.pos.x - handleWidth/2;
573
- const p2 = this.pos.x + handleWidth/2;
648
+ const handleWidth = barSize - handleSize;
649
+ const p1 = centerPos - handleWidth/2;
650
+ const p2 = centerPos + handleWidth/2;
574
651
  const oldValue = this.value;
575
- this.value = percent(mousePosScreen.x, p1, p2);
652
+ this.value = isHorizontal ?
653
+ percent(mousePosScreen.x, p1, p2) :
654
+ percent(mousePosScreen.y, p2, p1);
576
655
  this.value === oldValue || this.onChange();
577
656
  }
578
657
  }
579
658
  render()
580
659
  {
581
660
  super.render();
582
-
661
+
662
+ // handle horizontal or vertical scrollbar
663
+ const isHorizontal = this.size.x > this.size.y;
664
+ const handleSize = isHorizontal ? this.size.y : this.size.x;
665
+ const barSize = isHorizontal ? this.size.x : this.size.y;
666
+ const centerPos = isHorizontal ? this.pos.x : this.pos.y;
667
+
583
668
  // draw the scrollbar handle
584
- const handleSize = vec2(this.size.y);
585
- const handleWidth = this.size.x - handleSize.x;
586
- const p1 = this.pos.x - handleWidth/2;
587
- const p2 = this.pos.x + handleWidth/2;
588
- const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
669
+ const handleWidth = barSize - handleSize;
670
+ const p1 = centerPos - handleWidth/2;
671
+ const p2 = centerPos + handleWidth/2;
672
+ const handlePos = isHorizontal ?
673
+ vec2(lerp(p1, p2, this.value), this.pos.y) :
674
+ vec2(this.pos.x, lerp(p2, p1, this.value))
589
675
  const handleColor = this.disabled ? this.disabledColor :
590
676
  this.interactive && this.isActiveObject() ? this.color : this.handleColor;
591
- uiSystem.drawRect(handlePos, handleSize, handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
677
+ uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
592
678
 
593
679
  // draw the text scaled to fit on the scrollbar
594
680
  const textSize = this.getTextSize();
package/plugins/zzfxm.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /**
2
2
  * LittleJS ZzFXM Plugin
3
+ * @namespace ZzFXM
3
4
  */
4
5
 
5
6
  'use strict';
@@ -8,6 +9,8 @@
8
9
  * Music Object - Stores a zzfx music track for later use
9
10
  *
10
11
  * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
12
+ * @extends Sound
13
+ * @memberof ZzFXM
11
14
  * @example
12
15
  * // create some music
13
16
  * const music_example = new Music(
@@ -66,7 +69,8 @@ class ZzFXMusic extends Sound
66
69
  * @param {Array} patterns - Array of pattern data
67
70
  * @param {Array} sequence - Array of pattern indexes
68
71
  * @param {number} [BPM] - Playback speed of the song in BPM
69
- * @return {Array} - Left and right channel sample data */
72
+ * @return {Array} - Left and right channel sample data
73
+ * @memberof ZzFXM */
70
74
  function zzfxM(instruments, patterns, sequence, BPM = 125)
71
75
  {
72
76
  let i, j, k;
package/reference.md CHANGED
@@ -77,7 +77,6 @@ Vector2.normalize(length=1) // Normalize this vector to length
77
77
  Vector2.clampLength(length=1) // Clamp this vector to length
78
78
  Vector2.dot(v) // Dot product with vector
79
79
  Vector2.cross(v) // Cross product with vector
80
- Vector2.invert() // Invert this vector
81
80
  Vector2.floor() // Floor this vector
82
81
  Vector2.area() // Get area covered by this vector as a rectangle
83
82
  Vector2.lerp(v, percent) // Interpolate between vectors
@@ -400,7 +399,7 @@ TileCollisionLayer.setCollisionData(pos, data=1) // Set tile collision data a
400
399
  tileCollisionGetData(pos) // Get tile collision data at pos
401
400
  tileCollisionTest(pos, size=(0,0), object) // Check if collision should occur
402
401
  tileCollisionRaycast(posStart, posEnd, object) // Return the center of tile if hit
403
- tileCollisionLoad(tileMapData, tileInfo) // Load tile layers from exported data
402
+ tileLayersLoad(tileMapData, tileInfo) // Load tile layers from exported data
404
403
 
405
404
  ```
406
405
 
@@ -442,7 +441,6 @@ debug // Is debug enabled?
442
441
  debugPointSize = .5 // Size to render debug points by default
443
442
  debugKey = 'Escape' // Key code used to toggle debug mode
444
443
  debugOverlay // True if the debug overlay is active
445
- enableAsserts // True if asserts are enabled
446
444
  showWatermark // True if watermark with FPS should be show
447
445
  ```
448
446
 
package/src/engine.js CHANGED
@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
30
30
  * @type {string}
31
31
  * @default
32
32
  * @memberof Engine */
33
- const engineVersion = '1.14.10';
33
+ const engineVersion = '1.14.16';
34
34
 
35
35
  /** Frames per second to update
36
36
  * @type {number}
@@ -93,9 +93,14 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
93
93
 
94
94
  const pluginUpdateList = [], pluginRenderList = [];
95
95
 
96
+ /**
97
+ * @callback PluginCallback - Update or render function for a plugin
98
+ * @memberof Engine
99
+ */
100
+
96
101
  /** Add a new update function for a plugin
97
- * @param {Function} [updateFunction]
98
- * @param {Function} [renderFunction]
102
+ * @param {PluginCallback} [updateFunction]
103
+ * @param {PluginCallback} [renderFunction]
99
104
  * @memberof Engine */
100
105
  function engineAddPlugin(updateFunction, renderFunction)
101
106
  {
@@ -108,23 +113,33 @@ function engineAddPlugin(updateFunction, renderFunction)
108
113
  ///////////////////////////////////////////////////////////////////////////////
109
114
  // Main Engine Functions
110
115
 
116
+ /**
117
+ * @callback GameInitCallback - Called after the engine starts, can be async
118
+ * @returns {void|Promise<void>}
119
+ * @memberof Engine
120
+ */
121
+ /**
122
+ * @callback GameCallback - Update or render function for the game
123
+ * @memberof Engine
124
+ */
125
+
111
126
  /** Startup LittleJS engine with your callback functions
112
- * @param {Function|function():Promise} gameInit - Called once after the engine starts up, can be async for loading
113
- * @param {Function} gameUpdate - Called every frame before objects are updated (60fps), use for game logic
114
- * @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused, use for UI updates
115
- * @param {Function} gameRender - Called before objects are rendered, use for drawing backgrounds/world elements
116
- * @param {Function} gameRenderPost - Called after objects are rendered, use for drawing UI/overlays
127
+ * @param {GameInitCallback} gameInit - Called once after the engine starts up, can be async for loading
128
+ * @param {GameCallback} gameUpdate - Called every frame before objects are updated (60fps), use for game logic
129
+ * @param {GameCallback} gameUpdatePost - Called after physics and objects are updated, even when paused, use for UI updates
130
+ * @param {GameCallback} gameRender - Called before objects are rendered, use for drawing backgrounds/world elements
131
+ * @param {GameCallback} gameRenderPost - Called after objects are rendered, use for drawing UI/overlays
117
132
  * @param {Array<string>} [imageSources=[]] - List of image file paths to preload (e.g., ['player.png', 'tiles.png'])
118
133
  * @param {HTMLElement} [rootElement] - Root DOM element to attach canvas to, defaults to document.body
119
134
  * @example
120
135
  * // Basic engine startup
121
136
  * engineInit(
122
- * () => { console.log('Game initialized!'); }, // gameInit
123
- * () => { updateGameLogic(); }, // gameUpdate
124
- * () => { updateUI(); }, // gameUpdatePost
125
- * () => { drawBackground(); }, // gameRender
126
- * () => { drawHUD(); }, // gameRenderPost
127
- * ['tiles.png', 'tilesLevel.png'] // images to load
137
+ * () => { LOG('Game initialized!'); }, // gameInit
138
+ * () => { updateGameLogic(); }, // gameUpdate
139
+ * () => { updateUI(); }, // gameUpdatePost
140
+ * () => { drawBackground(); }, // gameRender
141
+ * () => { drawHUD(); }, // gameRenderPost
142
+ * ['tiles.png', 'tilesLevel.png'] // images to load
128
143
  * );
129
144
  * @memberof Engine */
130
145
  async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
@@ -170,16 +185,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
170
185
  if (!debugSpeedUp)
171
186
  frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp min framerate
172
187
 
188
+ let wasUpdated = false;
173
189
  if (paused)
174
190
  {
191
+ // update everything except the game and objects
192
+ wasUpdated = true;
175
193
  updateCanvas();
194
+ inputUpdate();
195
+ pluginUpdateList.forEach(f=>f());
176
196
 
177
197
  // update object transforms even when paused
178
198
  for (const o of engineObjects)
179
199
  o.parent || o.updateTransforms();
180
200
 
181
- inputUpdate();
182
- pluginUpdateList.forEach(f=>f());
201
+ // do post update
183
202
  debugUpdate();
184
203
  gameUpdatePost();
185
204
  inputUpdatePost();
@@ -196,12 +215,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
196
215
  }
197
216
 
198
217
  // update multiple frames if necessary in case of slow framerate
199
- for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
218
+ for (; frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
200
219
  {
201
220
  // increment frame and update time
202
221
  time = frame++ / frameRate;
203
222
 
204
223
  // update game and objects
224
+ wasUpdated = true;
205
225
  updateCanvas();
206
226
  inputUpdate();
207
227
  gameUpdate();
@@ -212,7 +232,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
212
232
  debugUpdate();
213
233
  gameUpdatePost();
214
234
  inputUpdatePost();
215
-
216
235
  if (debugVideoCaptureIsActive())
217
236
  renderFrame();
218
237
  }
@@ -229,6 +248,10 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
229
248
  {
230
249
  if (headlessMode) return;
231
250
 
251
+ // canvas must be updated before rendering
252
+ if (!wasUpdated)
253
+ updateCanvas();
254
+
232
255
  // render sort then render while removing destroyed objects
233
256
  enginePreRender();
234
257
  gameRender();
@@ -357,6 +380,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
357
380
  const promises = imageSources.map((src, textureIndex)=>
358
381
  new Promise(resolve =>
359
382
  {
383
+ ASSERT(isString(src), 'imageSources must be an array of strings');
384
+
360
385
  const image = new Image;
361
386
  image.onerror = image.onload = ()=>
362
387
  {
@@ -472,10 +497,16 @@ function engineObjectsCollect(pos, size, objects=engineObjects)
472
497
  return collectedObjects;
473
498
  }
474
499
 
500
+ /**
501
+ * @callback ObjectCallbackFunction - Function that processes an object
502
+ * @param {EngineObject} uiObjects
503
+ * @memberof Engine
504
+ */
505
+
475
506
  /** Triggers a callback for each object within a given area
476
- * @param {Vector2} [pos] - Center of test area, or undefined for all objects
477
- * @param {Vector2|number} [size] - Radius of circle if float, rectangle size if Vector2
478
- * @param {Function} [callbackFunction] - Calls this function on every object that passes the test
507
+ * @param {Vector2} [pos] - Center of test area, or undefined for all objects
508
+ * @param {Vector2|number} [size] - Radius of circle if float, rectangle size if Vector2
509
+ * @param {ObjectCallbackFunction} [callbackFunction] - Calls this function on every object that passes the test
479
510
  * @param {Array<EngineObject>} [objects=engineObjects] - List of objects to check
480
511
  * @memberof Engine */
481
512
  function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)