littlejsengine 1.9.11 → 1.10.2

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 (53) hide show
  1. package/README.md +4 -0
  2. package/dist/littlejs.d.ts +80 -9
  3. package/dist/littlejs.esm.js +193 -71
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +175 -69
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +174 -68
  8. package/examples/box2d/game.js +1 -1
  9. package/examples/box2d/index.html +7 -6
  10. package/examples/breakout/game.js +1 -1
  11. package/examples/breakout/index.html +5 -4
  12. package/examples/breakoutTutorial/index.html +4 -3
  13. package/examples/electron/game.js +1 -1
  14. package/examples/electron/index.html +4 -3
  15. package/examples/empty/game.js +1 -1
  16. package/examples/empty/index.html +2 -1
  17. package/examples/htmlMenu/game.js +67 -0
  18. package/examples/htmlMenu/index.html +56 -0
  19. package/examples/htmlMenu/tiles.png +0 -0
  20. package/examples/index.html +33 -0
  21. package/examples/js13k/game.js +1 -1
  22. package/examples/js13k/index.html +17 -14
  23. package/examples/module/game.js +1 -1
  24. package/examples/module/index.html +3 -2
  25. package/examples/particles/index.html +4 -3
  26. package/examples/platformer/game.js +1 -1
  27. package/examples/platformer/gameLevel.js +2 -2
  28. package/examples/platformer/gameObjects.js +0 -1
  29. package/examples/platformer/index.html +10 -9
  30. package/examples/puzzle/game.js +1 -1
  31. package/examples/puzzle/index.html +4 -3
  32. package/examples/starter/game.js +4 -4
  33. package/examples/starter/index.html +15 -14
  34. package/examples/stress/index.html +3 -2
  35. package/examples/typescript/game.js +1 -1
  36. package/examples/typescript/index.html +3 -2
  37. package/examples/uiSystem/game.js +134 -0
  38. package/examples/uiSystem/index.html +25 -0
  39. package/examples/uiSystem/tiles.png +0 -0
  40. package/jsconfig.json +11 -0
  41. package/package.json +1 -1
  42. package/plugins/box2d.js +2 -1
  43. package/plugins/postProcess.js +6 -7
  44. package/plugins/uiSystem.js +243 -0
  45. package/src/engine.js +48 -20
  46. package/src/engineAudio.js +10 -13
  47. package/src/engineDebug.js +1 -1
  48. package/src/engineDraw.js +101 -27
  49. package/src/engineExport.js +18 -2
  50. package/src/engineInput.js +2 -2
  51. package/src/engineSettings.js +1 -1
  52. package/src/engineUtilities.js +1 -1
  53. package/src/engineWebGL.js +11 -4
package/examples/htmlMenu/index.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html><head>
2
+ <title>LittleJS HTML Menu Example</title>
3
+ <meta charset=utf-8>
4
+ <meta name=apple-mobile-web-app-capable content=yes>
5
+ <meta name=mobile-web-app-capable content=yes>
6
+ <link rel=icon type=image/png href=../favicon.png>
7
+ <style>
8
+ .topDiv
9
+ {
10
+ position: absolute;
11
+ z-index: 1;
12
+ width: 100%;
13
+ height: 100%;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ }
18
+ .menuDiv
19
+ {
20
+ gap: 20px;
21
+ padding: 30px;
22
+ display: flex;
23
+ align-items: center;
24
+ flex-direction: column;
25
+ border: 3px solid black;
26
+ background-color: white;
27
+ }
28
+ </style>
29
+
30
+ </head><body>
31
+
32
+ <!-- setup html menu system -->
33
+ <div class="topDiv">
34
+ <div id="menu" class="menuDiv">
35
+ <h1><i style="font-size:30px">Test Menu</i></h1>
36
+ This is an example menu using html elements.
37
+ <input value="Test Input" onchange="alert('New text: ' + this.value)">
38
+ <input type="range" onchange="alert('New value: ' + this.value)">
39
+ <button onclick="alert('Button was clicked!')">Test Button</button>
40
+ <button onclick="setMenuVisible(false)">Exit Menu</button>
41
+ </div>
42
+ </div>
43
+ <script>
44
+
45
+ // html menu system
46
+ const getMenuVisible =()=> menu.style.visibility != 'hidden';
47
+ const setMenuVisible =(visible)=> menu.style.visibility = visible ? '' : 'hidden';
48
+
49
+ // hide menu at start
50
+ setMenuVisible(false);
51
+
52
+ </script>
53
+
54
+ <!-- Add your game scripts here -->
55
+ <script src=../../dist/littlejs.js?1100></script>
56
+ <script src=game.js?1100></script>
package/examples/htmlMenu/tiles.png ADDED
Binary file
package/examples/index.html ADDED
@@ -0,0 +1,33 @@
1
+ <head>
2
+ <title>LittleJS Examples</title>
3
+ <link rel=icon type=image/png href=../favicon.png>
4
+ <body>
5
+ <h1>All LittleJS Engine Examples</h1>
6
+ <p>
7
+ <img src=screenshot.jpg width=500>
8
+ </p>
9
+ <h2>Main Demos</h2>
10
+ <p>
11
+ <a href="starter">Starter</a> - Clean example with only a few things to get you started<br>
12
+ <a href="stress">Stress</a> - Max sprite/object test and music system demo<br>
13
+ <a href="platformer">Platformer</a> - Platformer/shooter with level data from Tiled Editor<br>
14
+ <a href="breakout">Breakout</a> - Block breaking game with post-processing effects<br>
15
+ <a href="breakoutTutorial">Breakout Tutorial</a> - Tutorial Breakout example<br>
16
+ <a href="puzzle">Puzzle</a> - Match 3 puzzle game with HD rendering and high score tracking<br>
17
+ <a href="particles">Particle Designer</a> - Particle system editor and visualizer<br>
18
+ <a href="js13k">JS13K Starter</a> - Special small size demo for JS13K Games<br>
19
+ <a href="empty">Empty</a> - A blank hello world project for LittleJS<br>
20
+ </p>
21
+ <h2>Plugin Demos</h2>
22
+ <p>
23
+ <a href="box2d">Box2D</a> - Box2D plugin demonstration and testbed<br>
24
+ <a href="uiSystem">UI System</a> - A simple hierarchical UI system using LittleJS rendering<br>
25
+ <a href="htmlMenu">HTML UI Menu</a> - Example using html to create an overlay menu<br>
26
+ </p>
27
+ <h2>Environment Demos</h2>
28
+ <p>
29
+ <a href="module">LittleJS using modules</a> - Loads LittleJS as a module<br>
30
+ <a href="typescript">LittleJS using TypeScript</a> - Uses LittleJS type definitions<br>
31
+ <a href="electron">LittleJS building with Electron</a> - Builds to an executable<br>
32
+ </p>
33
+ </body>
package/examples/js13k/game.js CHANGED
@@ -112,4 +112,4 @@ function gameRenderPost()
112
112
 
113
113
  ///////////////////////////////////////////////////////////////////////////////
114
114
  // Startup LittleJS Engine
115
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
115
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/js13k/index.html CHANGED
@@ -1,18 +1,21 @@
1
- <head><title>LittleJS JS13K Project</title></head><body>
1
+ <head>
2
+ <title>LittleJS JS13K Project</title>
3
+ <meta charset=utf-8>
4
+ </head><body>
2
5
 
3
6
  <!-- LittleJS Engine -->
4
- <script src=../../src/engineDebug.js?198></script>
5
- <script src=../../src/engineUtilities.js?198></script>
6
- <script src=../../src/engineSettings.js?198></script>
7
- <script src=../../src/engineObject.js?198></script>
8
- <script src=../../src/engineDraw.js?198></script>
9
- <script src=../../src/engineInput.js?198></script>
10
- <script src=../../src/engineAudio.js?198></script>
11
- <script src=../../src/engineTileLayer.js?198></script>
12
- <script src=../../src/engineParticles.js?198></script>
13
- <script src=../../src/engineMedals.js?198></script>
14
- <script src=../../src/engineWebGL.js?198></script>
15
- <script src=../../src/engine.js?198></script>
7
+ <script src=../../src/engineDebug.js?1100></script>
8
+ <script src=../../src/engineUtilities.js?1100></script>
9
+ <script src=../../src/engineSettings.js?1100></script>
10
+ <script src=../../src/engineObject.js?1100></script>
11
+ <script src=../../src/engineDraw.js?1100></script>
12
+ <script src=../../src/engineInput.js?1100></script>
13
+ <script src=../../src/engineAudio.js?1100></script>
14
+ <script src=../../src/engineTileLayer.js?1100></script>
15
+ <script src=../../src/engineParticles.js?1100></script>
16
+ <script src=../../src/engineMedals.js?1100></script>
17
+ <script src=../../src/engineWebGL.js?1100></script>
18
+ <script src=../../src/engine.js?1100></script>
16
19
 
17
20
  <!-- Add your game scripts here -->
18
- <script src=game.js?198></script>
21
+ <script src=game.js?1100></script>
package/examples/module/game.js CHANGED
@@ -128,4 +128,4 @@ function gameRenderPost()
128
128
 
129
129
  ///////////////////////////////////////////////////////////////////////////////
130
130
  // Startup LittleJS Engine
131
- LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
131
+ LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/module/index.html CHANGED
@@ -1,9 +1,10 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little JS Module Demo</title>
2
+ <title>LittleJS Module Demo</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
6
7
  </head><body>
7
8
 
8
9
  <!-- Add your game scripts here -->
9
- <script src=game.js?198 type=module></script>
10
+ <script src=game.js?1100 type=module></script>
package/examples/particles/index.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little JS Particle System Designer</title>
2
+ <title>LittleJS Particle System Designer</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
@@ -9,7 +10,7 @@ button { margin:1px; }
9
10
  </style>
10
11
  </head><body>
11
12
 
12
- <script src=../../dist/littlejs.js?198></script>
13
+ <script src=../../dist/littlejs.js?1100></script>
13
14
  <script>
14
15
 
15
16
  'use strict';
@@ -390,6 +391,6 @@ function gameRenderPost()
390
391
 
391
392
  ///////////////////////////////////////////////////////////////////////////////
392
393
  // Startup LittleJS Engine
393
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
394
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
394
395
 
395
396
  </script>
package/examples/platformer/game.js CHANGED
@@ -81,7 +81,7 @@ function gameUpdate()
81
81
  function getCameraTarget()
82
82
  {
83
83
  // camera is above player
84
- const offset = 3*percent(mainCanvasSize.y, 300, 600);
84
+ const offset = 200/cameraScale*percent(mainCanvasSize.y, 300, 600);
85
85
  return player.pos.add(vec2(0, offset));
86
86
  }
87
87
 
package/examples/platformer/gameLevel.js CHANGED
@@ -53,10 +53,10 @@ function buildLevel()
53
53
  player = new Player(playerStartPos);
54
54
  }
55
55
 
56
- function loadLevel()
56
+ function loadLevel(level=0)
57
57
  {
58
58
  // load level data from an exported Tiled js file
59
- const dataName = Object.keys(TileMaps)[0];
59
+ const dataName = Object.keys(TileMaps)[level];
60
60
  const tileMapData = TileMaps[dataName];
61
61
  levelSize = vec2(tileMapData.width, tileMapData.height);
62
62
  initTileCollision(levelSize);
package/examples/platformer/gameObjects.js CHANGED
@@ -147,7 +147,6 @@ class Enemy extends GameObject
147
147
  if (this.groundObject && rand() < .01 && this.pos.distance(player.pos) < 20)
148
148
  {
149
149
  this.velocity = vec2(rand(.1,-.1), rand(.4,.2));
150
- sound_jump.play(this.pos, .4, 2);
151
150
  }
152
151
 
153
152
  // damage player if touching
package/examples/platformer/index.html CHANGED
@@ -1,16 +1,17 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little JS Platforming Game</title>
2
+ <title>LittleJS Platforming Game</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
4
5
  <meta name=apple-mobile-web-app-capable content=yes>
5
6
  <meta name=mobile-web-app-capable content=yes>
6
7
  <link rel=icon type=image/png href=../favicon.png>
7
8
  </head><body>
8
9
 
9
- <script src=../../dist/littlejs.js?198></script>
10
- <script src=gameObjects.js?198></script>
11
- <script src=gameCharacter.js?198></script>
12
- <script src=gamePlayer.js?198></script>
13
- <script src=gameEffects.js?198></script>
14
- <script src=gameLevel.js?198></script>
15
- <script src=gameLevelData.js?198></script>
16
- <script src=game.js?198></script>
10
+ <script src=../../dist/littlejs.js?1100></script>
11
+ <script src=gameObjects.js?1100></script>
12
+ <script src=gameCharacter.js?1100></script>
13
+ <script src=gamePlayer.js?1100></script>
14
+ <script src=gameEffects.js?1100></script>
15
+ <script src=gameLevel.js?1100></script>
16
+ <script src=gameLevelData.js?1100></script>
17
+ <script src=game.js?1100></script>
package/examples/puzzle/game.js CHANGED
@@ -229,7 +229,7 @@ function gameRenderPost()
229
229
 
230
230
  ///////////////////////////////////////////////////////////////////////////////
231
231
  // Startup LittleJS Engine
232
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
232
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
233
233
 
234
234
  ///////////////////////////////////////////////////////////////////////////////
235
235
  // find and remove all runs of 3 or higher
package/examples/puzzle/index.html CHANGED
@@ -1,9 +1,10 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little Puzzle Game</title>
2
+ <title>LittleJS Puzzle Game</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
6
7
  </head><body>
7
8
 
8
- <script src=../../dist/littlejs.js?198></script>
9
- <script src=game.js?198></script>
9
+ <script src=../../dist/littlejs.js?1100></script>
10
+ <script src=game.js?1100></script>
package/examples/starter/game.js CHANGED
@@ -43,7 +43,7 @@ function gameInit()
43
43
  // set tile data
44
44
  const tileIndex = 1;
45
45
  const direction = randInt(4)
46
- const mirror = randInt(2);
46
+ const mirror = !randInt(2);
47
47
  const color = randColor();
48
48
  const data = new TileLayerData(tileIndex, direction, mirror, color);
49
49
  tileLayer.setData(pos, data);
@@ -69,7 +69,7 @@ function gameInit()
69
69
  hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
70
70
  2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
71
71
  .99, 1, 1, PI, // damping, angleDamping, gravityScale, cone
72
- .05, .5, 1, 1 // fadeRate, randomness, collide, additive
72
+ .05, .5, true, true // fadeRate, randomness, collide, additive
73
73
  );
74
74
  particleEmitter.elasticity = .3; // bounce when it collides
75
75
  particleEmitter.trailScale = 2; // stretch in direction of motion
@@ -108,7 +108,7 @@ function gameUpdatePost()
108
108
  function gameRender()
109
109
  {
110
110
  // draw a grey square in the background without using webgl
111
- drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, 0);
111
+ drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
112
112
 
113
113
  // draw the logo as a tile
114
114
  drawTile(vec2(21,5), vec2(4.5), tile(3,128));
@@ -125,4 +125,4 @@ function gameRenderPost()
125
125
 
126
126
  ///////////////////////////////////////////////////////////////////////////////
127
127
  // Startup LittleJS Engine
128
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
128
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/starter/index.html CHANGED
@@ -1,23 +1,24 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little JS Starter Project</title>
2
+ <title>LittleJS Starter Project</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
6
7
  </head><body>
7
8
 
8
9
  <!-- LittleJS Engine -->
9
- <script src=../../src/engineDebug.js?198></script>
10
- <script src=../../src/engineUtilities.js?198></script>
11
- <script src=../../src/engineSettings.js?198></script>
12
- <script src=../../src/engineObject.js?198></script>
13
- <script src=../../src/engineDraw.js?198></script>
14
- <script src=../../src/engineInput.js?198></script>
15
- <script src=../../src/engineAudio.js?198></script>
16
- <script src=../../src/engineTileLayer.js?198></script>
17
- <script src=../../src/engineParticles.js?198></script>
18
- <script src=../../src/engineMedals.js?198></script>
19
- <script src=../../src/engineWebGL.js?198></script>
20
- <script src=../../src/engine.js?198></script>
10
+ <script src=../../src/engineDebug.js?1100></script>
11
+ <script src=../../src/engineUtilities.js?1100></script>
12
+ <script src=../../src/engineSettings.js?1100></script>
13
+ <script src=../../src/engineObject.js?1100></script>
14
+ <script src=../../src/engineDraw.js?1100></script>
15
+ <script src=../../src/engineInput.js?1100></script>
16
+ <script src=../../src/engineAudio.js?1100></script>
17
+ <script src=../../src/engineTileLayer.js?1100></script>
18
+ <script src=../../src/engineParticles.js?1100></script>
19
+ <script src=../../src/engineMedals.js?1100></script>
20
+ <script src=../../src/engineWebGL.js?1100></script>
21
+ <script src=../../src/engine.js?1100></script>
21
22
 
22
23
  <!-- Add your game scripts here -->
23
- <script src=game.js?198></script>
24
+ <script src=game.js?1100></script>
package/examples/stress/index.html CHANGED
@@ -1,12 +1,13 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little JS Stress Test</title>
2
+ <title>LittleJS Stress Test</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
6
7
  </head><body>
7
8
 
8
9
  <!-- LittleJS Engine -->
9
- <script src=../../dist/littlejs.min.js?198></script>
10
+ <script src=../../dist/littlejs.min.js?1100></script>
10
11
  <script>
11
12
 
12
13
  /*
package/examples/typescript/game.js CHANGED
@@ -97,4 +97,4 @@ function gameRenderPost() {
97
97
  }
98
98
  ///////////////////////////////////////////////////////////////////////////////
99
99
  // Startup LittleJS Engine
100
- LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
100
+ LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/typescript/index.html CHANGED
@@ -1,9 +1,10 @@
1
1
  <!DOCTYPE html><head>
2
- <title>Little TypeScript Demo</title>
2
+ <title>LittleJS TypeScript Demo</title>
3
+ <meta charset=utf-8>
3
4
  <meta name=apple-mobile-web-app-capable content=yes>
4
5
  <meta name=mobile-web-app-capable content=yes>
5
6
  <link rel=icon type=image/png href=../favicon.png>
6
7
  </head><body>
7
8
 
8
9
  <!-- Add your game scripts here -->
9
- <script src=game.js?198 type=module></script>
10
+ <script src=game.js?1100 type=module></script>
package/examples/uiSystem/game.js ADDED
@@ -0,0 +1,134 @@
1
+ /*
2
+ Little JS UI System Example
3
+ - Shows how to use the LittleJS UI plugin
4
+ - Modal windows, buttons, text, checkboxes, and more
5
+ */
6
+
7
+ 'use strict';
8
+
9
+ // show the LittleJS splash screen
10
+ setShowSplashScreen(true);
11
+
12
+ // sound effects
13
+ const sound_click = new Sound([1,0]);
14
+
15
+ // UI system
16
+ let uiRoot, uiMenu;
17
+ const getMenuVisible =()=> uiMenu.visible;
18
+ const setMenuVisible =(visible)=> uiMenu.visible = visible;
19
+
20
+ function createUI()
21
+ {
22
+ // setup root to attach all ui elements to
23
+ uiRoot = new UIObject(vec2(mainCanvasSize.x/2,0));
24
+ const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70),
25
+ 'LittleJS UI System Example\nM = Toggle menu');
26
+ uiInfo.textColor = WHITE;
27
+ uiInfo.lineWidth = 8;
28
+ uiRoot.addChild(uiInfo);
29
+
30
+ // setup example menu
31
+ uiMenu = new UIObject(vec2(0,450));
32
+ uiRoot.addChild(uiMenu);
33
+ const uiBackground = new UIObject(vec2(0,0), vec2(450,550));
34
+ uiMenu.addChild(uiBackground);
35
+
36
+ // example large text
37
+ const textTitle = new UIText(vec2(0,-200), vec2(500, 90), 'Test Title');
38
+ uiMenu.addChild(textTitle);
39
+ textTitle.textColor = RED;
40
+ textTitle.lineWidth = 4;
41
+ textTitle.lineColor = BLUE;
42
+
43
+ // example multiline text
44
+ const textTest = new UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
45
+ uiMenu.addChild(textTest);
46
+
47
+ // example tile image
48
+ const tileTest = new UITile(vec2(150,-110), vec2(110), tile(3,128))
49
+ uiMenu.addChild(tileTest);
50
+
51
+ // example checkbox
52
+ const checkbox = new UICheckbox(vec2(-160,0), vec2(50));
53
+ uiMenu.addChild(checkbox);
54
+ checkbox.onClick = ()=>
55
+ {
56
+ checkbox.checked = !checkbox.checked;
57
+ console.log('Checkbox clicked');
58
+ sound_click.play(0,.5,checkbox.checked?4:1);
59
+ }
60
+
61
+ // text attached to checkbox
62
+ const checkboxText = new UIText(vec2(200,0), vec2(300, 50), 'Test Checkbox');
63
+ checkbox.addChild(checkboxText);
64
+
65
+ // example button
66
+ const button1 = new UIButton(vec2(0,90), vec2(350, 70), 'Test Button', RED, 6, CYAN);
67
+ uiMenu.addChild(button1);
68
+ button1.onClick = ()=>
69
+ {
70
+ console.log('Button 1 clicked');
71
+ sound_click.play();
72
+ }
73
+
74
+ // exit button
75
+ const button2 = new UIButton(vec2(0,190), vec2(350, 70), 'Exit Menu', RED, 6, CYAN);
76
+ uiMenu.addChild(button2);
77
+ button2.onClick = ()=>
78
+ {
79
+ console.log('Button 2 clicked');
80
+ sound_click.play(0,.5,2);
81
+ setMenuVisible(false);
82
+ }
83
+ }
84
+
85
+ ///////////////////////////////////////////////////////////////////////////////
86
+ function gameInit()
87
+ {
88
+ initUISystem();
89
+ createUI();
90
+ }
91
+
92
+ ///////////////////////////////////////////////////////////////////////////////
93
+ function gameUpdate()
94
+ {
95
+ }
96
+
97
+ ///////////////////////////////////////////////////////////////////////////////
98
+ function gameUpdatePost()
99
+ {
100
+ // center ui
101
+ uiRoot.pos.x = mainCanvasSize.x/2;
102
+
103
+ // menu system
104
+ const menuVisible = getMenuVisible();
105
+ paused = menuVisible;
106
+
107
+ // toggle menu visibility
108
+ if (keyWasPressed('KeyM'))
109
+ setMenuVisible(!menuVisible);
110
+ }
111
+
112
+ ///////////////////////////////////////////////////////////////////////////////
113
+ function gameRender()
114
+ {
115
+ // test game rendering
116
+ drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
117
+
118
+ // test game rendering
119
+ drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
120
+ for(let i=0; i<1e3; ++i)
121
+ {
122
+ const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
123
+ drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
124
+ }
125
+ }
126
+
127
+ ///////////////////////////////////////////////////////////////////////////////
128
+ function gameRenderPost()
129
+ {
130
+ }
131
+
132
+ ///////////////////////////////////////////////////////////////////////////////
133
+ // Startup LittleJS Engine
134
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
package/examples/uiSystem/index.html ADDED
@@ -0,0 +1,25 @@
1
+ <!DOCTYPE html><head>
2
+ <title>LittleJS Starter Project</title>
3
+ <meta charset=utf-8>
4
+ <meta name=apple-mobile-web-app-capable content=yes>
5
+ <meta name=mobile-web-app-capable content=yes>
6
+ <link rel=icon type=image/png href=../favicon.png>
7
+ </head><body>
8
+
9
+ <!-- LittleJS Engine -->
10
+ <script src=../../src/engineDebug.js?1100></script>
11
+ <script src=../../src/engineUtilities.js?1100></script>
12
+ <script src=../../src/engineSettings.js?1100></script>
13
+ <script src=../../src/engineObject.js?1100></script>
14
+ <script src=../../src/engineDraw.js?1100></script>
15
+ <script src=../../src/engineInput.js?1100></script>
16
+ <script src=../../src/engineAudio.js?1100></script>
17
+ <script src=../../src/engineTileLayer.js?1100></script>
18
+ <script src=../../src/engineParticles.js?1100></script>
19
+ <script src=../../src/engineMedals.js?1100></script>
20
+ <script src=../../src/engineWebGL.js?1100></script>
21
+ <script src=../../src/engine.js?1100></script>
22
+
23
+ <!-- Add your game scripts here -->
24
+ <script src=../../plugins/uiSystem.js?1100></script>
25
+ <script src=game.js?1100></script>
package/examples/uiSystem/tiles.png ADDED
Binary file
package/jsconfig.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "compilerOptions": {
3
+ },
4
+ "include": [
5
+ "./src/*.js",
6
+ "./plugins/*.js",
7
+ "./examples/**/*.js",
8
+ ],
9
+ "exclude": [
10
+ ]
11
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.9.11",
3
+ "version": "1.10.2",
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
@@ -875,7 +875,8 @@ function box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameR
875
875
  engineAddPlugin(box2dUpdate, box2dRender);
876
876
  function box2dUpdate()
877
877
  {
878
- box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
878
+ if (!paused)
879
+ box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
879
880
  }
880
881
  function box2dRender()
881
882
  {
package/plugins/postProcess.js CHANGED
@@ -49,11 +49,6 @@ function initPostProcess(shaderCode, includeOverlay=false)
49
49
  glPostTexture = glCreateTexture(undefined);
50
50
  glPostIncludeOverlay = includeOverlay;
51
51
 
52
- // hide the original 2d canvas
53
- mainCanvas.style.visibility = 'hidden';
54
- if (glPostIncludeOverlay)
55
- overlayCanvas.style.visibility = 'hidden';
56
-
57
52
  // Render the post processing shader, called automatically by the engine
58
53
  engineAddPlugin(undefined, postProcessRender);
59
54
  function postProcessRender()
@@ -72,8 +67,12 @@ function initPostProcess(shaderCode, includeOverlay=false)
72
67
  glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
73
68
  }
74
69
 
75
- // copy overlay canvas so it will be included in post processing
76
- glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
70
+ if (glPostIncludeOverlay)
71
+ {
72
+ // copy overlay canvas so it will be included in post processing
73
+ mainContext.drawImage(overlayCanvas, 0, 0);
74
+ overlayCanvas.width |= 0;
75
+ }
77
76
 
78
77
  // setup shader program to draw one triangle
79
78
  glContext.useProgram(glPostShader);