littlejsengine 1.6.0 → 1.6.6
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/README.md +138 -34
- package/build/littlejs.d.ts +104 -92
- package/build/littlejs.esm.js +414 -342
- package/build/littlejs.esm.min.js +1 -1
- package/build/littlejs.js +365 -296
- package/build/littlejs.min.js +1 -1
- package/build/littlejs.release.js +359 -291
- package/examples/breakout/game.js +5 -0
- package/examples/breakout/gameObjects.js +41 -48
- package/examples/breakout/index.html +3 -3
- package/examples/breakoutTutorial/README.md +514 -0
- package/examples/breakoutTutorial/game.js +181 -0
- package/examples/breakoutTutorial/images/1.png +0 -0
- package/examples/breakoutTutorial/images/10.png +0 -0
- package/examples/breakoutTutorial/images/11.png +0 -0
- package/examples/breakoutTutorial/images/2.png +0 -0
- package/examples/breakoutTutorial/images/3.png +0 -0
- package/examples/breakoutTutorial/images/4.png +0 -0
- package/examples/breakoutTutorial/images/5.png +0 -0
- package/examples/breakoutTutorial/images/6.png +0 -0
- package/examples/breakoutTutorial/images/7.png +0 -0
- package/examples/breakoutTutorial/images/8.png +0 -0
- package/examples/breakoutTutorial/images/9.png +0 -0
- package/examples/breakoutTutorial/index.html +10 -0
- package/examples/empty/game.js +10 -0
- package/examples/favicon.png +0 -0
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +1 -1
- package/examples/platformer/gameLevel.js +1 -1
- package/examples/platformer/gamePlayer.js +1 -1
- package/examples/platformer/index.html +6 -6
- package/examples/puzzle/game.js +1 -1
- package/examples/puzzle/index.html +2 -2
- package/examples/starter/build.bat +3 -2
- package/examples/starter/game.js +9 -9
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +1 -1
- package/examples/typescript/game.js +89 -89
- package/examples/typescript/game.ts +10 -10
- package/examples/typescript/index.html +1 -1
- package/package.json +4 -4
- package/src/engine.js +29 -31
- package/src/engineAudio.js +53 -29
- package/src/engineBuild.bat +3 -1
- package/src/engineDebug.js +25 -24
- package/src/engineDraw.js +43 -39
- package/src/engineExport.js +49 -46
- package/src/engineInput.js +83 -74
- package/src/engineMedals.js +31 -8
- package/src/engineObject.js +25 -25
- package/src/engineParticles.js +3 -6
- package/src/engineRelease.js +19 -19
- package/src/engineSettings.js +4 -4
- package/src/engineTileLayer.js +18 -14
- package/src/engineUtilities.js +43 -34
- package/src/engineWebGL.js +8 -8
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
// import module
|
|
8
8
|
import * as LittleJS from '../../build/littlejs.esm.js';
|
|
9
|
-
const {
|
|
9
|
+
const {Color, vec2} = LittleJS;
|
|
10
10
|
|
|
11
11
|
// sound effects
|
|
12
12
|
const sound_click = new LittleJS.Sound([1,.5]);
|
|
@@ -16,7 +16,7 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
|
|
|
16
16
|
LittleJS.medalsInit('Hello World');
|
|
17
17
|
|
|
18
18
|
// game variables
|
|
19
|
-
let
|
|
19
|
+
let particleEmitter: LittleJS.ParticleEmitter;
|
|
20
20
|
|
|
21
21
|
///////////////////////////////////////////////////////////////////////////////
|
|
22
22
|
function gameInit()
|
|
@@ -55,7 +55,7 @@ function gameInit()
|
|
|
55
55
|
|
|
56
56
|
// create particle emitter
|
|
57
57
|
const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0,9));
|
|
58
|
-
|
|
58
|
+
particleEmitter = new LittleJS.ParticleEmitter(
|
|
59
59
|
center, 0, // emitPos, emitAngle
|
|
60
60
|
1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
|
|
61
61
|
0, vec2(16), // tileIndex, tileSize
|
|
@@ -65,8 +65,8 @@ function gameInit()
|
|
|
65
65
|
.99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
|
|
66
66
|
.05, .5, true, true // fadeRate, randomness, collide, additive
|
|
67
67
|
);
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
particleEmitter.elasticity = .3; // bounce when it collides
|
|
69
|
+
particleEmitter.trailScale = 2; // stretch in direction of motion
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
///////////////////////////////////////////////////////////////////////////////
|
|
@@ -78,10 +78,10 @@ function gameUpdate()
|
|
|
78
78
|
sound_click.play(LittleJS.mousePos);
|
|
79
79
|
|
|
80
80
|
// change particle color and set to fade out
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
particleEmitter.colorStartA = new Color;
|
|
82
|
+
particleEmitter.colorStartB = LittleJS.randColor();
|
|
83
|
+
particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
|
|
84
|
+
particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
|
|
85
85
|
|
|
86
86
|
// unlock medals
|
|
87
87
|
medal_example.unlock();
|
|
@@ -89,7 +89,7 @@ function gameUpdate()
|
|
|
89
89
|
|
|
90
90
|
// move particles to mouse location if on screen
|
|
91
91
|
if (LittleJS.mousePosScreen.x)
|
|
92
|
-
|
|
92
|
+
particleEmitter.pos = LittleJS.mousePos;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
///////////////////////////////////////////////////////////////////////////////
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "littlejsengine",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.6",
|
|
4
4
|
"description": "LittleJS - Tiny and Fast HTML5 Game Engine",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "build/littlejs.esm.js",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/KilledByAPixel/LittleJS.git"
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"build": "cd src && engineBuild.bat"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"ect-bin": "~1.4.1",
|
|
30
29
|
"google-closure-compiler": "~20230502.0.0",
|
|
31
30
|
"roadroller": "~2.1.0",
|
|
31
|
+
"uglify-js": "~3.17.4",
|
|
32
32
|
"typescript": "~5.1.6",
|
|
33
|
-
"
|
|
33
|
+
"ect-bin": "~1.4.1"
|
|
34
34
|
}
|
|
35
35
|
}
|
package/src/engine.js
CHANGED
|
@@ -1,24 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* LittleJS Engine Globals
|
|
1
|
+
/**
|
|
2
|
+
* LittleJS - The Tiny JavaScript Game Engine That Can!
|
|
3
|
+
* MIT License - Copyright 2021 Frank Force
|
|
4
|
+
*
|
|
5
|
+
* Engine Features
|
|
6
|
+
* - Object oriented system with base class engine object
|
|
7
|
+
* - Base class object handles update, physics, collision, rendering, etc
|
|
8
|
+
* - Engine helper classes and functions like Vector2, Color, and Timer
|
|
9
|
+
* - Super fast rendering system for tile sheets
|
|
10
|
+
* - Sound effects audio with zzfx and music with zzfxm
|
|
11
|
+
* - Input processing system with gamepad and touchscreen support
|
|
12
|
+
* - Tile layer rendering and collision system
|
|
13
|
+
* - Particle effect system
|
|
14
|
+
* - Medal system tracks and displays achievements
|
|
15
|
+
* - Debug tools and debug rendering system
|
|
16
|
+
* - Post processing effects
|
|
17
|
+
* - Call engineInit() to start it up!
|
|
22
18
|
* @namespace Engine
|
|
23
19
|
*/
|
|
24
20
|
|
|
@@ -34,7 +30,7 @@ const engineName = 'LittleJS';
|
|
|
34
30
|
* @type {String}
|
|
35
31
|
* @default
|
|
36
32
|
* @memberof Engine */
|
|
37
|
-
const engineVersion = '1.6.
|
|
33
|
+
const engineVersion = '1.6.6';
|
|
38
34
|
|
|
39
35
|
/** Frames per second to update objects
|
|
40
36
|
* @type {Number}
|
|
@@ -104,10 +100,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
|
|
|
104
100
|
debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
|
|
105
101
|
|
|
106
102
|
// setup html
|
|
107
|
-
const styleBody = 'margin:0;overflow:hidden;
|
|
108
|
-
';
|
|
109
|
-
'
|
|
110
|
-
'
|
|
103
|
+
const styleBody = 'margin:0;overflow:hidden;' + // fill the window
|
|
104
|
+
'background:#000;' + // set background color
|
|
105
|
+
'touch-action:none;' + // prevent mobile pinch to resize
|
|
106
|
+
'user-select:none;' + // prevent mobile hold to select
|
|
107
|
+
'-webkit-user-select:none'; // compatibility for ios
|
|
111
108
|
document.body.style = styleBody;
|
|
112
109
|
document.body.appendChild(mainCanvas = document.createElement('canvas'));
|
|
113
110
|
mainContext = mainCanvas.getContext('2d');
|
|
@@ -120,12 +117,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
|
|
|
120
117
|
document.body.appendChild(overlayCanvas = document.createElement('canvas'));
|
|
121
118
|
overlayContext = overlayCanvas.getContext('2d');
|
|
122
119
|
|
|
123
|
-
// set canvas style
|
|
124
|
-
const styleCanvas = 'position:absolute;
|
|
120
|
+
// set canvas style
|
|
121
|
+
const styleCanvas = 'position:absolute;' +
|
|
122
|
+
'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
|
|
123
|
+
(canvasPixelated?'image-rendering:pixelated':''); // set pixelated rendering
|
|
125
124
|
(glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
|
|
126
125
|
|
|
127
126
|
gameInit();
|
|
128
|
-
touchGamepadCreate();
|
|
129
127
|
engineUpdate();
|
|
130
128
|
};
|
|
131
129
|
|
|
@@ -255,7 +253,7 @@ function enginePreRender()
|
|
|
255
253
|
mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
|
|
256
254
|
|
|
257
255
|
// disable smoothing for pixel art
|
|
258
|
-
mainContext.imageSmoothingEnabled = !
|
|
256
|
+
mainContext.imageSmoothingEnabled = !canvasPixelated;
|
|
259
257
|
|
|
260
258
|
// setup gl rendering if enabled
|
|
261
259
|
glEnable && glPreRender();
|
|
@@ -269,7 +267,7 @@ function engineObjectsUpdate()
|
|
|
269
267
|
engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
|
|
270
268
|
|
|
271
269
|
// recursive object update
|
|
272
|
-
|
|
270
|
+
function updateObject(o)
|
|
273
271
|
{
|
|
274
272
|
if (!o.destroyed)
|
|
275
273
|
{
|
package/src/engineAudio.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* LittleJS Audio System
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
3
|
+
* - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
|
|
4
|
+
* - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - Music System
|
|
5
|
+
* - Caches sounds and music for fast playback
|
|
6
|
+
* - Can attenuate and apply stereo panning to sounds
|
|
7
|
+
* - Ability to play mp3, ogg, and wave files
|
|
8
|
+
* - Speech synthesis wrapper functions
|
|
9
|
+
* @namespace Audio
|
|
9
10
|
*/
|
|
10
11
|
|
|
11
12
|
'use strict';
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* Sound Object - Stores a zzfx sound for later use and can be played positionally
|
|
15
|
-
*
|
|
16
|
-
* <
|
|
16
|
+
*
|
|
17
|
+
* <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
|
|
17
18
|
* @example
|
|
18
19
|
* // create a sound
|
|
19
20
|
* const sound_example = new Sound([.5,.5]);
|
|
@@ -97,8 +98,8 @@ class Sound
|
|
|
97
98
|
|
|
98
99
|
/**
|
|
99
100
|
* Music Object - Stores a zzfx music track for later use
|
|
100
|
-
*
|
|
101
|
-
* <
|
|
101
|
+
*
|
|
102
|
+
* <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
|
|
102
103
|
* @example
|
|
103
104
|
* // create some music
|
|
104
105
|
* const music_example = new Music(
|
|
@@ -208,14 +209,15 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
|
|
|
208
209
|
|
|
209
210
|
/** Stop all queued speech
|
|
210
211
|
* @memberof Audio */
|
|
211
|
-
|
|
212
|
+
function speakStop() {speechSynthesis && speechSynthesis.cancel();}
|
|
212
213
|
|
|
213
214
|
/** Get frequency of a note on a musical scale
|
|
214
215
|
* @param {Number} semitoneOffset - How many semitones away from the root note
|
|
215
216
|
* @param {Number} [rootNoteFrequency=220] - Frequency at semitone offset 0
|
|
216
217
|
* @return {Number} - The frequency of the note
|
|
217
218
|
* @memberof Audio */
|
|
218
|
-
|
|
219
|
+
function getNoteFrequency(semitoneOffset, rootFrequency=220)
|
|
220
|
+
{ return rootFrequency * 2**(semitoneOffset/12); }
|
|
219
221
|
|
|
220
222
|
///////////////////////////////////////////////////////////////////////////////
|
|
221
223
|
|
|
@@ -270,15 +272,15 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
|
|
|
270
272
|
}
|
|
271
273
|
|
|
272
274
|
///////////////////////////////////////////////////////////////////////////////
|
|
273
|
-
// ZzFXMicro - Zuper Zmall Zound Zynth - v1.
|
|
275
|
+
// ZzFXMicro - Zuper Zmall Zound Zynth - v1.2.0 by Frank Force
|
|
274
276
|
|
|
275
277
|
/** Generate and play a ZzFX sound
|
|
276
|
-
*
|
|
277
|
-
* <
|
|
278
|
+
*
|
|
279
|
+
* <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
|
|
278
280
|
* @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
|
|
279
|
-
* @return {
|
|
281
|
+
* @return {AudioBufferSourceNode} - The audio node of the sound played
|
|
280
282
|
* @memberof Audio */
|
|
281
|
-
|
|
283
|
+
function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
|
|
282
284
|
|
|
283
285
|
/** Sample rate used for all ZzFX sounds
|
|
284
286
|
* @default 44100
|
|
@@ -286,7 +288,29 @@ const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
|
|
|
286
288
|
const zzfxR = 44100;
|
|
287
289
|
|
|
288
290
|
/** Generate samples for a ZzFX sound
|
|
289
|
-
* @
|
|
291
|
+
* @param {Number} [volume=1] - Volume scale (percent)
|
|
292
|
+
* @param {Number} [randomness=.05] - How much to randomize frequency (percent Hz)
|
|
293
|
+
* @param {Number} [frequency=220] - Frequency of sound (Hz)
|
|
294
|
+
* @param {Number} [attack=0] - Attack time, how fast sound starts (seconds)
|
|
295
|
+
* @param {Number} [sustain=0] - Sustain time, how long sound holds (seconds)
|
|
296
|
+
* @param {Number} [release=.1] - Release time, how fast sound fades out (seconds)
|
|
297
|
+
* @param {Number} [shape=0] - Shape of the sound wave
|
|
298
|
+
* @param {Number} [shapeCurve=1] - Squarenes of wave (0=square, 1=normal, 2=pointy)
|
|
299
|
+
* @param {Number} [slide=0] - How much to slide frequency (kHz/s)
|
|
300
|
+
* @param {Number} [deltaSlide=0] - How much to change slide (kHz/s/s)
|
|
301
|
+
* @param {Number} [pitchJump=0] - Frequency of pitch jump (Hz)
|
|
302
|
+
* @param {Number} [pitchJumpTime=0] - Time of pitch jump (seconds)
|
|
303
|
+
* @param {Number} [repeatTime=0] - Resets some parameters periodically (seconds)
|
|
304
|
+
* @param {Number} [noise=0] - How much random noise to add (percent)
|
|
305
|
+
* @param {Number} [modulation=0] - Frequency of modulation wave, negative flips phase (Hz)
|
|
306
|
+
* @param {Number} [bitCrush=0] - Resamples at a lower frequency in (samples*100)
|
|
307
|
+
* @param {Number} [delay=0] - Overlap sound with itself for reverb and flanger effects (seconds)
|
|
308
|
+
* @param {Number} [sustainVolume=1] - Volume level for sustain (percent)
|
|
309
|
+
* @param {Number} [decay=0] - Decay time, how long to reach sustain after attack (seconds)
|
|
310
|
+
* @param {Number} [tremolo=0] - Trembling effect, rate controlled by repeat time (precent)
|
|
311
|
+
* @return {Array} - Array of audio samples
|
|
312
|
+
* @memberof Audio
|
|
313
|
+
*/
|
|
290
314
|
function zzfxG
|
|
291
315
|
(
|
|
292
316
|
// parameters
|
|
@@ -296,11 +320,11 @@ function zzfxG
|
|
|
296
320
|
bitCrush = 0, delay = 0, sustainVolume = 1, decay = 0, tremolo = 0
|
|
297
321
|
)
|
|
298
322
|
{
|
|
299
|
-
//
|
|
323
|
+
// locals
|
|
300
324
|
let PI2 = PI*2, startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
|
|
301
325
|
startFrequency = frequency *= (1 + randomness*rand(-1,1)) * PI2 / zzfxR,
|
|
302
|
-
t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length
|
|
303
|
-
|
|
326
|
+
t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length
|
|
327
|
+
|
|
304
328
|
// scale by sample rate
|
|
305
329
|
attack = attack * zzfxR + 9; // minimum attack to prevent pop
|
|
306
330
|
decay *= zzfxR;
|
|
@@ -350,18 +374,18 @@ function zzfxG
|
|
|
350
374
|
Math.cos(modulation*tm++); // modulation
|
|
351
375
|
t += f - f*noise*(1 - (Math.sin(i)+1)*1e9%2); // noise
|
|
352
376
|
|
|
353
|
-
if (j && ++j > pitchJumpTime)
|
|
377
|
+
if (j && ++j > pitchJumpTime) // pitch jump
|
|
354
378
|
{
|
|
355
|
-
frequency += pitchJump;
|
|
356
|
-
startFrequency += pitchJump;
|
|
357
|
-
j = 0;
|
|
379
|
+
frequency += pitchJump; // apply pitch jump
|
|
380
|
+
startFrequency += pitchJump; // also apply to start
|
|
381
|
+
j = 0; // reset pitch jump time
|
|
358
382
|
}
|
|
359
383
|
|
|
360
384
|
if (repeatTime && !(++r % repeatTime)) // repeat
|
|
361
385
|
{
|
|
362
|
-
frequency = startFrequency;
|
|
363
|
-
slide = startSlide;
|
|
364
|
-
j
|
|
386
|
+
frequency = startFrequency; // reset frequency
|
|
387
|
+
slide = startSlide; // reset slide
|
|
388
|
+
j ||= 1; // reset pitch jump time
|
|
365
389
|
}
|
|
366
390
|
}
|
|
367
391
|
|
|
@@ -376,7 +400,7 @@ function zzfxG
|
|
|
376
400
|
* @param {Array} patterns - Array of pattern data
|
|
377
401
|
* @param {Array} sequence - Array of pattern indexes
|
|
378
402
|
* @param {Number} [BPM=125] - Playback speed of the song in BPM
|
|
379
|
-
* @
|
|
403
|
+
* @return {Array} - Left and right channel sample data
|
|
380
404
|
* @memberof Audio */
|
|
381
405
|
function zzfxM(instruments, patterns, sequence, BPM = 125)
|
|
382
406
|
{
|
package/src/engineBuild.bat
CHANGED
|
@@ -7,7 +7,8 @@ rem --- BUILD ENGINE DEBUG ---
|
|
|
7
7
|
set BUILD_FOLDER=build
|
|
8
8
|
set ENGINE_NAME=littlejs
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
pushd ..
|
|
11
|
+
|
|
11
12
|
rem remove old files
|
|
12
13
|
rmdir /s /q %BUILD_FOLDER%
|
|
13
14
|
mkdir %BUILD_FOLDER%
|
|
@@ -127,4 +128,5 @@ if %ERRORLEVEL% NEQ 0 (
|
|
|
127
128
|
exit /b %ERRORLEVEL%
|
|
128
129
|
)
|
|
129
130
|
|
|
131
|
+
popd
|
|
130
132
|
popd
|
package/src/engineDebug.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
/*
|
|
2
|
-
LittleJS - Debug Build
|
|
3
|
-
MIT License - Copyright 2021 Frank Force
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
1
|
/**
|
|
7
2
|
* LittleJS Debug System
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
3
|
+
* - Press ~ to show debug overlay with mouse pick
|
|
4
|
+
* - Number keys toggle debug functions
|
|
5
|
+
* - +/- apply time scale
|
|
6
|
+
* - Debug primitive rendering
|
|
7
|
+
* - Save a 2d canvas as an image
|
|
13
8
|
* @namespace Debug
|
|
14
9
|
*/
|
|
15
10
|
|
|
@@ -45,6 +40,12 @@ let showWatermark = 1;
|
|
|
45
40
|
* @memberof Debug */
|
|
46
41
|
let godMode = 0;
|
|
47
42
|
|
|
43
|
+
/** Key code used to toggle debug mode, Esc by default
|
|
44
|
+
* @type {Boolean}
|
|
45
|
+
* @default
|
|
46
|
+
* @memberof Debug */
|
|
47
|
+
let debugKey = 27;
|
|
48
|
+
|
|
48
49
|
// Engine internal variables not exposed to documentation
|
|
49
50
|
let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
|
|
50
51
|
debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
|
|
@@ -56,7 +57,7 @@ debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, dow
|
|
|
56
57
|
* @param {Boolean} assertion
|
|
57
58
|
* @param {Object} output
|
|
58
59
|
* @memberof Debug */
|
|
59
|
-
|
|
60
|
+
function ASSERT(...assert) { enableAsserts && console.assert(...assert); }
|
|
60
61
|
|
|
61
62
|
/** Draw a debug rectangle in world space
|
|
62
63
|
* @param {Vector2} pos
|
|
@@ -66,7 +67,7 @@ const ASSERT = enableAsserts ? (...assert)=> console.assert(...assert) : ()=>{};
|
|
|
66
67
|
* @param {Number} [angle=0]
|
|
67
68
|
* @param {Boolean} [fill=false]
|
|
68
69
|
* @memberof Debug */
|
|
69
|
-
|
|
70
|
+
function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
|
|
70
71
|
{
|
|
71
72
|
ASSERT(typeof color == 'string'); // pass in regular html strings as colors
|
|
72
73
|
debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
|
|
@@ -79,7 +80,7 @@ const debugRect = (pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)=
|
|
|
79
80
|
* @param {Number} [time=0]
|
|
80
81
|
* @param {Boolean} [fill=false]
|
|
81
82
|
* @memberof Debug */
|
|
82
|
-
|
|
83
|
+
function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
|
|
83
84
|
{
|
|
84
85
|
ASSERT(typeof color == 'string'); // pass in regular html strings as colors
|
|
85
86
|
debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
|
|
@@ -91,7 +92,7 @@ const debugCircle = (pos, radius=0, color='#fff', time=0, fill=false)=>
|
|
|
91
92
|
* @param {Number} [time=0]
|
|
92
93
|
* @param {Number} [angle=0]
|
|
93
94
|
* @memberof Debug */
|
|
94
|
-
|
|
95
|
+
function debugPoint(pos, color, time, angle) {debugRect(pos, 0, color, time, angle);}
|
|
95
96
|
|
|
96
97
|
/** Draw a debug line in world space
|
|
97
98
|
* @param {Vector2} posA
|
|
@@ -100,7 +101,7 @@ const debugPoint = (pos, color, time, angle)=> debugRect(pos, 0, color, time, an
|
|
|
100
101
|
* @param {Number} [thickness=.1]
|
|
101
102
|
* @param {Number} [time=0]
|
|
102
103
|
* @memberof Debug */
|
|
103
|
-
|
|
104
|
+
function debugLine(posA, posB, color, thickness=.1, time)
|
|
104
105
|
{
|
|
105
106
|
const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
|
|
106
107
|
const size = vec2(thickness, halfDelta.length()*2);
|
|
@@ -114,7 +115,7 @@ const debugLine = (posA, posB, color, thickness=.1, time)=>
|
|
|
114
115
|
* @param {Vector2} sizeB
|
|
115
116
|
* @param {String} [color='#fff']
|
|
116
117
|
* @memberof Debug */
|
|
117
|
-
|
|
118
|
+
function debugAABB(pA, sA, pB, sB, color)
|
|
118
119
|
{
|
|
119
120
|
const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
|
|
120
121
|
const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
|
|
@@ -130,7 +131,7 @@ const debugAABB = (pA, sA, pB, sB, color)=>
|
|
|
130
131
|
* @param {Number} [angle=0]
|
|
131
132
|
* @param {String} [font='monospace']
|
|
132
133
|
* @memberof Debug */
|
|
133
|
-
|
|
134
|
+
function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
|
|
134
135
|
{
|
|
135
136
|
ASSERT(typeof color == 'string'); // pass in regular html strings as colors
|
|
136
137
|
debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
|
|
@@ -138,13 +139,13 @@ const debugText = (text, pos, size=1, color='#fff', time=0, angle=0, font='monos
|
|
|
138
139
|
|
|
139
140
|
/** Clear all debug primitives in the list
|
|
140
141
|
* @memberof Debug */
|
|
141
|
-
|
|
142
|
+
function debugClear() { debugPrimitives = []; }
|
|
142
143
|
|
|
143
144
|
/** Save a canvas to disk
|
|
144
145
|
* @param {HTMLCanvasElement} canvas
|
|
145
146
|
* @param {String} [filename]
|
|
146
147
|
* @memberof Debug */
|
|
147
|
-
|
|
148
|
+
function debugSaveCanvas(canvas, filename = engineName + '.png')
|
|
148
149
|
{
|
|
149
150
|
downloadLink.download = 'screenshot.png';
|
|
150
151
|
downloadLink.href = canvas.toDataURL('image/png').replace('image/png','image/octet-stream');
|
|
@@ -154,19 +155,19 @@ const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
|
|
|
154
155
|
///////////////////////////////////////////////////////////////////////////////
|
|
155
156
|
// Engine debug function (called automatically)
|
|
156
157
|
|
|
157
|
-
|
|
158
|
+
function debugInit()
|
|
158
159
|
{
|
|
159
160
|
// create link for saving screenshots
|
|
160
161
|
document.body.appendChild(downloadLink = document.createElement('a'));
|
|
161
162
|
downloadLink.style.display = 'none';
|
|
162
163
|
}
|
|
163
164
|
|
|
164
|
-
|
|
165
|
+
function debugUpdate()
|
|
165
166
|
{
|
|
166
167
|
if (!debug)
|
|
167
168
|
return;
|
|
168
169
|
|
|
169
|
-
if (keyWasPressed(
|
|
170
|
+
if (keyWasPressed(debugKey)) // Esc
|
|
170
171
|
debugOverlay = !debugOverlay;
|
|
171
172
|
if (debugOverlay)
|
|
172
173
|
{
|
|
@@ -189,7 +190,7 @@ const debugUpdate = ()=>
|
|
|
189
190
|
}
|
|
190
191
|
}
|
|
191
192
|
|
|
192
|
-
|
|
193
|
+
function debugRender()
|
|
193
194
|
{
|
|
194
195
|
glCopyToContext(mainContext);
|
|
195
196
|
|
|
@@ -351,7 +352,7 @@ const debugRender = ()=>
|
|
|
351
352
|
overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
|
|
352
353
|
overlayContext.fillText('---------', x, y += h);
|
|
353
354
|
overlayContext.fillStyle = '#f00';
|
|
354
|
-
overlayContext.fillText('
|
|
355
|
+
overlayContext.fillText('ESC: Debug Overlay', x, y += h);
|
|
355
356
|
overlayContext.fillStyle = debugPhysics ? '#f00' : '#fff';
|
|
356
357
|
overlayContext.fillText('1: Debug Physics', x, y += h);
|
|
357
358
|
overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
|