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.
- package/dist/littlejs.d.ts +264 -120
- package/dist/littlejs.esm.js +603 -288
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +600 -287
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +521 -232
- package/examples/box2d/gameObjects.js +2 -2
- package/examples/breakout/gameObjects.js +2 -2
- package/examples/breakoutTutorial/README.md +32 -32
- package/examples/breakoutTutorial/game.js +1 -1
- package/examples/electron/game.js +3 -3
- package/examples/electron/index.html +2 -2
- package/examples/electron/package.json +1 -8
- package/examples/index.html +59 -51
- package/examples/module/game.js +3 -3
- package/examples/platformer/gameCharacter.js +6 -2
- package/examples/platformer/gameEffects.js +4 -4
- package/examples/platformer/gameLevel.js +1 -1
- package/examples/platformer/gameObjects.js +11 -9
- package/examples/puzzle/game.js +1 -1
- package/examples/shorts/animation.js +1 -1
- package/examples/shorts/base.html +1 -1
- package/examples/shorts/blending.js +8 -14
- package/examples/shorts/box2d.js +7 -3
- package/examples/shorts/box2dCar.js +2 -1
- package/examples/shorts/empty.js +30 -0
- package/examples/shorts/helloWorld.js +1 -1
- package/examples/shorts/hillGlideGame.js +10 -4
- package/examples/shorts/landerGame.js +30 -3
- package/examples/shorts/medals.js +4 -4
- package/examples/shorts/music.js +29 -55
- package/examples/shorts/musicPlayer.js +134 -0
- package/examples/shorts/nineSlice.js +34 -15
- package/examples/shorts/parallax.js +4 -3
- package/examples/shorts/particles.js +16 -16
- package/examples/shorts/piano.js +15 -21
- package/examples/shorts/pongGame.js +6 -4
- package/examples/shorts/raycasting.js +13 -5
- package/examples/shorts/sequencer.js +122 -0
- package/examples/shorts/shapes.js +7 -4
- package/examples/shorts/slidingPuzzle.js +16 -6
- package/examples/shorts/sound.js +18 -9
- package/examples/shorts/spaceGame.js +12 -8
- package/examples/shorts/spriteAtlas.js +7 -7
- package/examples/shorts/starfield.js +1 -1
- package/examples/shorts/systemFont.js +2 -2
- package/examples/shorts/texture.js +2 -2
- package/examples/shorts/tileLayer.js +10 -10
- package/examples/shorts/tiltedView.js +14 -3
- package/examples/shorts/timers.js +10 -0
- package/examples/shorts/topDown.js +4 -1
- package/examples/shorts/uiSystem.js +8 -5
- package/examples/starter/game.js +3 -3
- package/examples/starter/index.html +2 -2
- package/examples/typescript/game.js +3 -3
- package/examples/typescript/game.ts +3 -3
- package/examples/uiSystem/game.js +6 -6
- package/package.json +4 -2
- package/plugins/box2d.js +18 -3
- package/plugins/newgrounds.js +11 -9
- package/plugins/postProcess.js +5 -2
- package/plugins/uiSystem.js +120 -34
- package/plugins/zzfxm.js +5 -1
- package/reference.md +1 -3
- package/src/engine.js +52 -21
- package/src/engineAudio.js +31 -14
- package/src/engineDebug.js +80 -55
- package/src/engineDraw.js +60 -31
- package/src/engineExport.js +3 -1
- package/src/engineMedals.js +10 -2
- package/src/engineObject.js +14 -10
- package/src/engineParticles.js +59 -46
- package/src/engineRelease.js +1 -0
- package/src/engineSettings.js +7 -7
- package/src/engineTileLayer.js +49 -18
- package/src/engineUtilities.js +79 -34
package/plugins/uiSystem.js
CHANGED
|
@@ -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
|
|
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.
|
|
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 &&
|
|
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.
|
|
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
|
|
571
|
-
const
|
|
572
|
-
const
|
|
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 =
|
|
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
|
|
585
|
-
const
|
|
586
|
-
const
|
|
587
|
-
const
|
|
588
|
-
|
|
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
|
-
|
|
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.
|
|
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 {
|
|
98
|
-
* @param {
|
|
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 {
|
|
113
|
-
* @param {
|
|
114
|
-
* @param {
|
|
115
|
-
* @param {
|
|
116
|
-
* @param {
|
|
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
|
-
* () => {
|
|
123
|
-
* () => { updateGameLogic(); },
|
|
124
|
-
* () => { updateUI(); },
|
|
125
|
-
* () => { drawBackground(); },
|
|
126
|
-
* () => { drawHUD(); },
|
|
127
|
-
* ['tiles.png', 'tilesLevel.png']
|
|
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
|
-
|
|
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]
|
|
477
|
-
* @param {Vector2|number} [size]
|
|
478
|
-
* @param {
|
|
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)
|