littlejsengine 1.12.6 → 1.13.1

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 (83) hide show
  1. package/dist/littlejs.d.ts +387 -177
  2. package/dist/littlejs.esm.js +5934 -5294
  3. package/dist/littlejs.esm.min.js +4 -1
  4. package/dist/littlejs.js +5887 -5263
  5. package/dist/littlejs.min.js +4 -1
  6. package/dist/littlejs.release.js +5426 -4829
  7. package/examples/box2d/game.js +1 -1
  8. package/examples/box2d/gameObjects.js +7 -6
  9. package/examples/box2d/index.html +1 -1
  10. package/examples/box2d/scenes.js +7 -7
  11. package/examples/breakout/game.js +1 -1
  12. package/examples/breakout/gameObjects.js +2 -2
  13. package/examples/breakout/index.html +1 -1
  14. package/examples/breakoutTutorial/README.md +2 -2
  15. package/examples/breakoutTutorial/game.js +1 -1
  16. package/examples/breakoutTutorial/index.html +1 -1
  17. package/examples/empty/index.html +1 -1
  18. package/examples/htmlMenu/index.html +1 -1
  19. package/examples/index.html +396 -153
  20. package/examples/module/game.js +1 -1
  21. package/examples/module/index.html +1 -1
  22. package/examples/platformer/game.js +4 -4
  23. package/examples/platformer/gameCharacter.js +6 -6
  24. package/examples/platformer/gameEffects.js +74 -57
  25. package/examples/platformer/gameLevel.js +61 -70
  26. package/examples/platformer/gameObjects.js +4 -4
  27. package/examples/platformer/index.html +1 -1
  28. package/examples/puzzle/index.html +1 -1
  29. package/examples/shorts/base.html +23 -3
  30. package/examples/shorts/box2dCar.js +8 -12
  31. package/examples/shorts/flappyGame.js +52 -0
  32. package/examples/shorts/helloWorld.js +6 -3
  33. package/examples/shorts/hillGlideGame.js +56 -0
  34. package/examples/shorts/landerGame.js +32 -0
  35. package/examples/shorts/maze.js +47 -0
  36. package/examples/shorts/medals.js +42 -0
  37. package/examples/shorts/nineSlice.js +21 -0
  38. package/examples/shorts/piano.js +52 -0
  39. package/examples/shorts/platformer.js +24 -20
  40. package/examples/shorts/{pong.js → pongGame.js} +1 -1
  41. package/examples/shorts/raycasting.js +71 -0
  42. package/examples/shorts/slidingPuzzle.js +42 -0
  43. package/examples/shorts/spaceGame.js +56 -0
  44. package/examples/shorts/starfield.js +17 -0
  45. package/examples/shorts/tileLayer.js +3 -5
  46. package/examples/shorts/tiles.png +0 -0
  47. package/examples/shorts/tiltedView.js +8 -7
  48. package/examples/shorts/topDown.js +18 -26
  49. package/examples/shorts/uiSystem.js +4 -7
  50. package/examples/starter/build.bat +6 -1
  51. package/examples/starter/game.js +2 -2
  52. package/examples/starter/index.html +23 -13
  53. package/examples/stress/index.html +2 -3
  54. package/examples/style.css +136 -0
  55. package/examples/typescript/build.js +1 -2
  56. package/examples/typescript/game.js +2 -2
  57. package/examples/typescript/game.ts +1 -1
  58. package/examples/typescript/index.html +1 -1
  59. package/examples/uiSystem/game.js +8 -24
  60. package/examples/uiSystem/index.html +1 -1
  61. package/package.json +1 -1
  62. package/plugins/box2d.js +8 -8
  63. package/plugins/drawUtilities.js +126 -0
  64. package/plugins/newgrounds.js +1 -1
  65. package/plugins/pluginExport.js +7 -1
  66. package/plugins/postProcess.js +2 -2
  67. package/plugins/uiSystem.js +153 -65
  68. package/plugins/zzfxm.js +1 -1
  69. package/reference.md +10 -10
  70. package/src/engine.js +50 -29
  71. package/src/engineAudio.js +14 -5
  72. package/src/engineBuild.bat +6 -1
  73. package/src/engineBuild.js +20 -5
  74. package/src/engineDebug.js +53 -26
  75. package/src/engineDraw.js +108 -57
  76. package/src/engineExport.js +21 -9
  77. package/src/engineInput.js +109 -37
  78. package/src/engineObject.js +68 -67
  79. package/src/engineParticles.js +26 -9
  80. package/src/engineSettings.js +15 -16
  81. package/src/engineTileLayer.js +312 -153
  82. package/src/engineUtilities.js +182 -130
  83. package/src/engineWebGL.js +47 -36
package/examples/shorts/uiSystem.js CHANGED
@@ -6,6 +6,8 @@ function gameInit()
6
6
  {
7
7
  // load ui system plugin
8
8
  new UISystemPlugin;
9
+ uiSystem.defaultSoundPress = new Sound([1,0,220]);
10
+ uiSystem.defaultSoundClick = new Sound([1,0,440]);
9
11
 
10
12
  // setup example menu
11
13
  uiMenu = new UIObject(mainCanvasSize.scale(.5));
@@ -20,20 +22,15 @@ function gameInit()
20
22
  const button1 = new UIButton(vec2(70,40), vec2(100), 'Test');
21
23
  button1.textHeight = 40;
22
24
  uiMenu.addChild(button1);
23
- button1.onPress = ()=> sound_ui.play();
25
+ button1.onClick = ()=> uiBackground.color = randColor();
24
26
 
25
27
  // example checkbox
26
28
  const checkbox = new UICheckbox(vec2(-70,40), vec2(50));
27
29
  uiMenu.addChild(checkbox);
28
- checkbox.onChange = ()=> sound_ui.play(0,1,checkbox.checked?4:1);
29
30
 
30
31
  // exit button
31
32
  const button2 = new UIButton(vec2(0,140), vec2(300, 50), 'Exit Menu');
32
33
  button2.textHeight = 40;
33
34
  uiMenu.addChild(button2);
34
- button2.onPress = ()=>
35
- {
36
- uiMenu.visible = false;
37
- sound_ui.play(0,1,2);
38
- }
35
+ button2.onClick = ()=> uiMenu.visible = false;
39
36
  }
package/examples/starter/build.bat CHANGED
@@ -1,2 +1,7 @@
1
1
  rem LittleJS Build Script
2
- call node build.js
2
+ call node build.js
3
+ if %errorlevel% neq 0 (
4
+ echo Build failed with error level %errorlevel%
5
+ pause
6
+ exit /b %errorlevel%
7
+ )
package/examples/starter/game.js CHANGED
@@ -45,7 +45,7 @@ function gameInit()
45
45
  // set tile data
46
46
  const tileIndex = 1;
47
47
  const direction = randInt(4)
48
- const mirror = !randInt(2);
48
+ const mirror = randBool();
49
49
  const color = randColor();
50
50
  const data = new TileLayerData(tileIndex, direction, mirror, color);
51
51
  tileLayer.setData(pos, data);
@@ -73,7 +73,7 @@ function gameInit()
73
73
  .99, 1, 1, PI, // damping, angleDamping, gravityScale, cone
74
74
  .05, .5, true, true // fadeRate, randomness, collide, additive
75
75
  );
76
- particleEmitter.elasticity = .3; // bounce when it collides
76
+ particleEmitter.restitution = .3; // bounce when it collides
77
77
  particleEmitter.trailScale = 2; // stretch in direction of motion
78
78
  }
79
79
 
package/examples/starter/index.html CHANGED
@@ -7,18 +7,28 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../src/engineDebug.js?1120></script>
11
- <script src=../../src/engineUtilities.js?1120></script>
12
- <script src=../../src/engineSettings.js?1120></script>
13
- <script src=../../src/engineObject.js?1120></script>
14
- <script src=../../src/engineDraw.js?1120></script>
15
- <script src=../../src/engineInput.js?1120></script>
16
- <script src=../../src/engineAudio.js?1120></script>
17
- <script src=../../src/engineTileLayer.js?1120></script>
18
- <script src=../../src/engineParticles.js?1120></script>
19
- <script src=../../src/engineMedals.js?1120></script>
20
- <script src=../../src/engineWebGL.js?1120></script>
21
- <script src=../../src/engine.js?1120></script>
10
+ <script src=../../dist/littlejs.js?11212></script>
11
+
12
+ <!-- LittleJS Engine Source
13
+ <script src=../../src/engineDebug.js></script>
14
+ <script src=../../src/engineUtilities.js></script>
15
+ <script src=../../src/engineSettings.js></script>
16
+ <script src=../../src/engineObject.js></script>
17
+ <script src=../../src/engineDraw.js></script>
18
+ <script src=../../src/engineInput.js></script>
19
+ <script src=../../src/engineAudio.js></script>
20
+ <script src=../../src/engineTileLayer.js></script>
21
+ <script src=../../src/engineParticles.js></script>
22
+ <script src=../../src/engineMedals.js></script>
23
+ <script src=../../src/engineWebGL.js></script>
24
+ <script src=../../src/engine.js></script>
25
+ <script src=../../plugins/box2d.js></script>
26
+ <script src=../../plugins/box2d.wasm.js></script>
27
+ <script src=../../plugins/drawUtilities.js></script>
28
+ <script src=../../plugins/postProcess.js></script>
29
+ <script src=../../plugins/uiSystem.js></script>
30
+ <script src=../../plugins/zzfxm.js></script>
31
+ -->
22
32
 
23
33
  <!-- Add your game scripts here -->
24
- <script src=game.js?1120></script>
34
+ <script src=game.js?11212></script>
package/examples/stress/index.html CHANGED
@@ -102,7 +102,7 @@ function gameRender()
102
102
  {
103
103
  // track fps and update stats
104
104
  const frameTimeMS = Date.now();
105
- fpsDisplay = LJS.lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
105
+ fpsDisplay = LJS.lerp(fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1), .05);
106
106
  timeMS = frameTimeMS;
107
107
 
108
108
  // show stats
@@ -163,5 +163,4 @@ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost,
163
163
  ///////////////////////////////////////////////////////////////////////////////
164
164
  // music - Depp Loop
165
165
  const music = new LJS.ZzFXMusic([[[.6,0,76,,,1,1,.5,,,,,.1,,,.06,,.5,.2,,-700],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
166
-
167
- </script>
166
+ </script>
package/examples/style.css ADDED
@@ -0,0 +1,136 @@
1
+ html, body
2
+ {
3
+ height: 100%;
4
+ display: flex;
5
+ flex-direction: column;
6
+ }
7
+ #container1
8
+ {
9
+ height: 100%;
10
+ display: flex;
11
+ gap: 4px;
12
+ }
13
+ #container2
14
+ {
15
+ display: flex;
16
+ flex-direction: column;
17
+ gap: 4px;
18
+ }
19
+ #iframeContainer
20
+ {
21
+ border: 2px solid;
22
+ background: #000;
23
+ }
24
+ iframe
25
+ {
26
+ width: 100%;
27
+ height: 100%;
28
+ border: none;
29
+ }
30
+ #selectExample
31
+ {
32
+ flex-grow: 1;
33
+ }
34
+ .CodeMirror,
35
+ #textareaCode
36
+ {
37
+ flex-grow: 1;
38
+ padding: 5px;
39
+ resize: none;
40
+ color: #fff;
41
+ background: #000;
42
+ font-size: 20px;
43
+ }
44
+ #textareaConsole,
45
+ #textareaError
46
+ {
47
+ flex-grow: .3;
48
+ padding: 5px;
49
+ resize: none;
50
+ display: none;
51
+ color:#f22;
52
+ background: #111;
53
+ }
54
+ #textareaConsole
55
+ {
56
+ color: #ff0;
57
+ }
58
+ #container3
59
+ {
60
+ width: 100%;
61
+ height: 100%;
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 2px;
65
+ }
66
+ #titleInfo
67
+ {
68
+ margin: 5px;
69
+ text-align: center;
70
+ font-size: 40px;
71
+ }
72
+ #exampleInfo
73
+ {
74
+ margin: 0px;
75
+ text-align: center;
76
+ font-size: 20px;
77
+ }
78
+ #exampleLink
79
+ {
80
+ margin: 0px;
81
+ text-align: center;
82
+ font-size: 20px;
83
+ display: inline-block;
84
+ align-self: center;
85
+ }
86
+ select
87
+ {
88
+ color:#fff;
89
+ background-color: #111;
90
+ width:100%;
91
+ }
92
+ hr
93
+ {
94
+ border: 1px solid #555;
95
+ margin:9px;
96
+ }
97
+ button
98
+ {
99
+ color:#fff;
100
+ background-color: #111;
101
+ border: 1px solid #555;
102
+ margin:0px 4px;
103
+ padding: 2px 8px;
104
+ cursor: pointer;
105
+ }
106
+ button:disabled
107
+ {
108
+ color: #aaa;
109
+ background-color: #666;
110
+ border-color: #666;
111
+ }
112
+ .error-line
113
+ {
114
+ background-color: rgba(255, 0, 0, 0.15) !important;
115
+ border-left: 3px solid #ff0000 !important;
116
+ }
117
+
118
+ /* LittleJS CodeMirror Theme */
119
+ .cm-s-littlejs.CodeMirror { background: #080808; color: #aef; }
120
+ .cm-s-littlejs div.CodeMirror-selected { background: #068; }
121
+ .cm-s-littlejs .CodeMirror-gutters {background: #222; border-right: 0px;}
122
+ .cm-s-littlejs .CodeMirror-linenumber { color: #aaa; }
123
+ .cm-s-littlejs .CodeMirror-cursor { border-left: 2px solid #fff; }
124
+ .cm-s-littlejs .cm-keyword { color: #6e1; }
125
+ .cm-s-littlejs .cm-def { color: #fab; }
126
+ .cm-s-littlejs .cm-operator { color: #1be; }
127
+ .cm-s-littlejs .cm-property,
128
+ .cm-s-littlejs span.cm-variable,
129
+ .cm-s-littlejs span.cm-variable-2,
130
+ .cm-s-littlejs span.cm-variable-3 { color: #ddd; }
131
+ .cm-s-littlejs .cm-builtin,
132
+ .cm-s-littlejs .cm-number { color: #e15; }
133
+ .cm-s-littlejs .cm-comment { color:#888; font-style:italic; }
134
+ .cm-s-littlejs .cm-string,
135
+ .cm-s-littlejs .cm-string-2 { color:#fda; }
136
+ .cm-s-littlejs .CodeMirror-matchingbracket { background-color: #381 !important; }
package/examples/typescript/build.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  const PROGRAM_NAME = 'game';
4
4
  const BUILD_FOLDER = 'build';
5
- const ROOT_FOLDER = 'examples/typescript';
6
5
 
7
6
  // Define TypeScript source files
8
7
  const tsSourceFiles = [
@@ -29,4 +28,4 @@ console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} se
29
28
 
30
29
  console.log(`Moving js files back to root...`);
31
30
  for(const file of jsSourceFiles)
32
- fs.copyFileSync(`${BUILD_FOLDER}/${file}`, file);
31
+ fs.copyFileSync(`${BUILD_FOLDER}/${file}`, file);
package/examples/typescript/game.js CHANGED
@@ -60,7 +60,7 @@ function gameInit() {
60
60
  .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
61
61
  .05, .5, true, true // fadeRate, randomness, collide, additive
62
62
  );
63
- particleEmitter.elasticity = .3; // bounce when it collides
63
+ particleEmitter.restitution = .3; // bounce when it collides
64
64
  particleEmitter.trailScale = 2; // stretch in direction of motion
65
65
  }
66
66
  ///////////////////////////////////////////////////////////////////////////////
@@ -97,4 +97,4 @@ function gameRenderPost() {
97
97
  }
98
98
  ///////////////////////////////////////////////////////////////////////////////
99
99
  // Startup LittleJS Engine
100
- LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
100
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/typescript/game.ts CHANGED
@@ -77,7 +77,7 @@ function gameInit()
77
77
  .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
78
78
  .05, .5, true, true // fadeRate, randomness, collide, additive
79
79
  );
80
- particleEmitter.elasticity = .3; // bounce when it collides
80
+ particleEmitter.restitution = .3; // bounce when it collides
81
81
  particleEmitter.trailScale = 2; // stretch in direction of motion
82
82
  }
83
83
 
package/examples/typescript/index.html CHANGED
@@ -7,4 +7,4 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- Add your game scripts here -->
10
- <script src=game.js type=module></script>
10
+ <script src=game.js type=module></script>
package/examples/uiSystem/game.js CHANGED
@@ -10,9 +10,6 @@
10
10
  import * as LJS from '../../dist/littlejs.esm.js';
11
11
  const {vec2, hsl, tile} = LJS;
12
12
 
13
- // sound effects
14
- const sound_ui = new LJS.Sound([1,0]);
15
-
16
13
  // UI system
17
14
  let uiRoot, uiMenu;
18
15
  const getMenuVisible =()=> uiMenu.visible;
@@ -24,6 +21,9 @@ LJS.setCanvasPixelated(false);
24
21
 
25
22
  function createUI()
26
23
  {
24
+ LJS.uiSystem.defaultSoundPress = new LJS.Sound([1,0,220]);
25
+ LJS.uiSystem.defaultSoundClick = new LJS.Sound([1,0,440]);
26
+
27
27
  // setup root to attach all ui elements to
28
28
  uiRoot = new LJS.UIObject;
29
29
  const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70),
@@ -33,7 +33,7 @@ function createUI()
33
33
  uiRoot.addChild(uiInfo);
34
34
 
35
35
  // setup example menu
36
- uiMenu = new LJS.UIObject(vec2(0,450));
36
+ uiMenu = new LJS.UIObject(vec2(0,500));
37
37
  uiRoot.addChild(uiMenu);
38
38
  const uiBackground = new LJS.UIObject(vec2(0,0), vec2(450,580));
39
39
  uiBackground.lineWidth = 8;
@@ -47,7 +47,7 @@ function createUI()
47
47
  textTitle.lineColor = LJS.BLUE;
48
48
 
49
49
  // example multiline text
50
- const textTest = new LJS.UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
50
+ const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
51
51
  uiMenu.addChild(textTest);
52
52
 
53
53
  // example tile image
@@ -57,12 +57,7 @@ function createUI()
57
57
  // example checkbox
58
58
  const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
59
59
  uiMenu.addChild(checkbox);
60
- checkbox.onPress = ()=>
61
- {
62
- checkbox.checked = !checkbox.checked;
63
- console.log('Checkbox clicked');
64
- sound_ui.play(0,.5,checkbox.checked?4:1);
65
- }
60
+ checkbox.onChange = ()=> console.log('Checkbox clicked');
66
61
 
67
62
  // text attached to checkbox
68
63
  const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
@@ -72,27 +67,16 @@ function createUI()
72
67
  const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
73
68
  uiMenu.addChild(scrollbar);
74
69
  scrollbar.onChange = ()=> console.log('New scrollbar value:', scrollbar.value);
75
- scrollbar.onPress = ()=> sound_ui.play(0,.3,2);
76
- scrollbar.onRelease = ()=> sound_ui.play(0,.3,4);
77
70
 
78
71
  // example button
79
72
  const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
80
73
  uiMenu.addChild(button1);
81
- button1.onPress = ()=>
82
- {
83
- console.log('Button 1 clicked');
84
- sound_ui.play();
85
- }
74
+ button1.onClick = ()=> console.log('Button 1 clicked');
86
75
 
87
76
  // exit button
88
77
  const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
89
78
  uiMenu.addChild(button2);
90
- button2.onPress = ()=>
91
- {
92
- console.log('Button 2 clicked');
93
- sound_ui.play(0,.5,2);
94
- setMenuVisible(false);
95
- }
79
+ button2.onClick = ()=> setMenuVisible(false);
96
80
  }
97
81
 
98
82
  ///////////////////////////////////////////////////////////////////////////////
package/examples/uiSystem/index.html CHANGED
@@ -7,4 +7,4 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- Add your game scripts here -->
10
- <script src=game.js type=module></script>
10
+ <script src=game.js type=module></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.12.6",
3
+ "version": "1.13.1",
4
4
  "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
5
5
  "main": "dist/littlejs.esm.js",
6
6
  "types": "dist/littlejs.d.ts",
package/plugins/box2d.js CHANGED
@@ -76,7 +76,7 @@ class Box2dObject extends EngineObject
76
76
  /** Copy box2d update sim data */
77
77
  update()
78
78
  {
79
- // use box2d physics update
79
+ // use box2d physics update instead of normal engine update
80
80
  this.pos = box2d.vec2From(this.body.GetPosition());
81
81
  this.angle = -this.body.GetAngle();
82
82
  }
@@ -131,7 +131,7 @@ class Box2dObject extends EngineObject
131
131
  * @param {number} [friction]
132
132
  * @param {number} [restitution]
133
133
  * @param {boolean} [isSensor] */
134
- addShape(shape, density=1, friction=1, restitution=0, isSensor=false)
134
+ addShape(shape, density=1, friction=.2, restitution=0, isSensor=false)
135
135
  {
136
136
  const fd = new box2d.instance.b2FixtureDef();
137
137
  fd.set_shape(shape);
@@ -1592,7 +1592,7 @@ class Box2dPlugin
1592
1592
  * @param {Color} [outlineColor]
1593
1593
  * @param {number} [lineWidth]
1594
1594
  * @param {CanvasRenderingContext2D} [context] */
1595
- drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
1595
+ drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
1596
1596
  {
1597
1597
  const shape = box2d.castObjectType(fixture.GetShape());
1598
1598
  switch (shape.GetType())
@@ -1628,7 +1628,7 @@ class Box2dPlugin
1628
1628
  * @param {Color} [outlineColor]
1629
1629
  * @param {number} [lineWidth]
1630
1630
  * @param {CanvasRenderingContext2D} [context] */
1631
- drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
1631
+ drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
1632
1632
  {
1633
1633
  drawCanvas2D(pos, vec2(1), 0, 0, context=>
1634
1634
  {
@@ -1646,7 +1646,7 @@ class Box2dPlugin
1646
1646
  * @param {Color} [outlineColor]
1647
1647
  * @param {number} [lineWidth]
1648
1648
  * @param {CanvasRenderingContext2D} [context] */
1649
- drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
1649
+ drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
1650
1650
  {
1651
1651
  drawCanvas2D(pos, vec2(1), angle, 0, context=>
1652
1652
  {
@@ -1665,7 +1665,7 @@ class Box2dPlugin
1665
1665
  * @param {Color} [color]
1666
1666
  * @param {number} [lineWidth]
1667
1667
  * @param {CanvasRenderingContext2D} [context] */
1668
- drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=mainContext)
1668
+ drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=drawContext)
1669
1669
  {
1670
1670
  drawCanvas2D(pos, vec2(1), angle, 0, context=>
1671
1671
  {
@@ -1681,7 +1681,7 @@ class Box2dPlugin
1681
1681
  * @param {Color} [outlineColor]
1682
1682
  * @param {number} [lineWidth]
1683
1683
  * @param {CanvasRenderingContext2D} [context] */
1684
- drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=mainContext)
1684
+ drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
1685
1685
  {
1686
1686
  if (color)
1687
1687
  {
@@ -1860,4 +1860,4 @@ async function box2dInit()
1860
1860
  //debugDraw.AppendFlags(box2d.instance.b2Draw.e_centerOfMassBit);
1861
1861
  box2d.world.SetDebugDraw(debugDraw);
1862
1862
  }
1863
- }
1863
+ }
package/plugins/drawUtilities.js ADDED
@@ -0,0 +1,126 @@
1
+ /**
2
+ * LittleJS Drawing Utilities Plugin
3
+ * - Extra drawing functions for LittleJS
4
+ * - Nine slice and three slice drawing
5
+ * @namespace DrawUtilities
6
+ */
7
+
8
+ 'use strict';
9
+
10
+ ///////////////////////////////////////////////////////////////////////////////
11
+
12
+ /** Draw a scalable nine-slice UI element to the overlay canvas in screen space
13
+ * This function can not apply color because it draws using the overlay 2d context
14
+ * @param {Vector2} pos - Screen space position
15
+ * @param {Vector2} size - Screen space size
16
+ * @param {TileInfo} startTile - Starting tile for the nine-slice pattern
17
+ * @param {number} [borderSize] - Width of the border sections
18
+ * @param {number} [extraSpace] - Extra spacing adjustment
19
+ * @memberof DrawUtilities */
20
+ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
21
+ {
22
+ drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
23
+ }
24
+
25
+ /** Draw a scalable nine-slice UI element in world space
26
+ * This function can apply color and additive color if webgl is enabled
27
+ * @param {Vector2} pos - World space position
28
+ * @param {Vector2} size - World space size
29
+ * @param {TileInfo} startTile - Starting tile for the nine-slice pattern
30
+ * @param {Color} [color] - Color to modulate with
31
+ * @param {number} [borderSize] - Width of the border sections
32
+ * @param {Color} [additiveColor] - Additive color
33
+ * @param {number} [extraSpace] - Extra spacing adjustment
34
+ * @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
35
+ * @param {boolean} [screenSpace] - Use screen space coordinates
36
+ * @param {CanvasRenderingContext2D} [context] - Canvas context to use
37
+ * @memberof DrawUtilities */
38
+ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
39
+ {
40
+ // setup nine slice tiles
41
+ const centerTile = startTile.offset(startTile.size);
42
+ const centerSize = size.add(vec2(extraSpace-borderSize*2));
43
+ const cornerSize = vec2(borderSize);
44
+ const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
45
+ const flip = screenSpace ? -1 : 1;
46
+
47
+ // center
48
+ drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
49
+ for(let i=4; i--;)
50
+ {
51
+ // sides
52
+ const horizontal = i%2;
53
+ const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
54
+ const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
55
+ const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
56
+ drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
57
+ }
58
+ for(let i=4; i--;)
59
+ {
60
+ // corners
61
+ const flipX = i>1;
62
+ const flipY = i && i<3;
63
+ const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
64
+ const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
65
+ drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
66
+ }
67
+ }
68
+
69
+ /** Draw a scalable three-slice UI element to the overlay canvas in screen space
70
+ * This function can not apply color because it draws using the overlay 2d context
71
+ * @param {Vector2} pos - Screen space position
72
+ * @param {Vector2} size - Screen space size
73
+ * @param {TileInfo} startTile - Starting tile for the three-slice pattern
74
+ * @param {number} [borderSize] - Width of the border sections
75
+ * @param {number} [extraSpace] - Extra spacing adjustment
76
+ * @memberof DrawUtilities */
77
+ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
78
+ {
79
+ drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
80
+ }
81
+
82
+ /** Draw a scalable three-slice UI element in world space
83
+ * This function can apply color and additive color if webgl is enabled
84
+ * @param {Vector2} pos - World space position
85
+ * @param {Vector2} size - World space size
86
+ * @param {TileInfo} startTile - Starting tile for the three-slice pattern
87
+ * @param {Color} [color] - Color to modulate with
88
+ * @param {number} [borderSize] - Width of the border sections
89
+ * @param {Color} [additiveColor] - Additive color
90
+ * @param {number} [extraSpace] - Extra spacing adjustment
91
+ * @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
92
+ * @param {boolean} [screenSpace] - Use screen space coordinates
93
+ * @param {CanvasRenderingContext2D} [context] - Canvas context to use
94
+ * @memberof DrawUtilities */
95
+ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
96
+ {
97
+ // setup three slice tiles
98
+ const cornerTile = startTile.frame(0);
99
+ const sideTile = startTile.frame(1);
100
+ const centerTile = startTile.frame(2);
101
+ const centerSize = size.add(vec2(extraSpace-borderSize*2));
102
+ const cornerSize = vec2(borderSize);
103
+ const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
104
+ const flip = screenSpace ? -1 : 1;
105
+
106
+ // center
107
+ drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
108
+ for(let i=4; i--;)
109
+ {
110
+ // sides
111
+ const angle = i*PI/2;
112
+ const horizontal = i%2;
113
+ const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
114
+ const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
115
+ drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
116
+ }
117
+ for(let i=4; i--;)
118
+ {
119
+ // corners
120
+ const angle = i*PI/2;
121
+ const flipX = !i || i>2;
122
+ const flipY = i>1;
123
+ const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
124
+ drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
125
+ }
126
+ }
package/plugins/newgrounds.js CHANGED
@@ -174,4 +174,4 @@ class NewgroundsPlugin
174
174
  debugMedals && console.log(xmlHttp.responseText);
175
175
  return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
176
176
  }
177
- }
177
+ }
package/plugins/pluginExport.js CHANGED
@@ -47,4 +47,10 @@ export
47
47
  Box2dFrictionJoint,
48
48
  Box2dPulleyJoint,
49
49
  Box2dMotorJoint,
50
- };
50
+
51
+ // Drawing Utilities
52
+ drawNineSlice,
53
+ drawNineSliceScreen,
54
+ drawThreeSlice,
55
+ drawThreeSliceScreen,
56
+ };
package/plugins/postProcess.js CHANGED
@@ -78,7 +78,7 @@ class PostProcessPlugin
78
78
  else
79
79
  {
80
80
  // set the viewport
81
- glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
81
+ glContext.viewport(0, 0, glCanvas.width = drawCanvas.width, glCanvas.height = drawCanvas.height);
82
82
  }
83
83
 
84
84
  if (postProcess.includeOverlay)
@@ -113,4 +113,4 @@ class PostProcessPlugin
113
113
  glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
114
114
  }
115
115
  }
116
- }
116
+ }