littlejsengine 1.9.9 → 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 (59) hide show
  1. package/README.md +6 -0
  2. package/dist/littlejs.d.ts +107 -14
  3. package/dist/littlejs.esm.js +250 -102
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +226 -98
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +208 -95
  8. package/examples/box2d/game.js +29 -10
  9. package/examples/box2d/gameObjects.js +485 -0
  10. package/examples/box2d/index.html +7 -5
  11. package/examples/box2d/scenes.js +28 -247
  12. package/examples/box2d/tiles.png +0 -0
  13. package/examples/breakout/game.js +1 -1
  14. package/examples/breakout/index.html +5 -4
  15. package/examples/breakoutTutorial/index.html +4 -3
  16. package/examples/electron/game.js +1 -1
  17. package/examples/electron/index.html +4 -3
  18. package/examples/empty/game.js +1 -1
  19. package/examples/empty/index.html +2 -1
  20. package/examples/htmlMenu/game.js +67 -0
  21. package/examples/htmlMenu/index.html +56 -0
  22. package/examples/htmlMenu/tiles.png +0 -0
  23. package/examples/index.html +33 -0
  24. package/examples/js13k/game.js +1 -1
  25. package/examples/js13k/index.html +17 -14
  26. package/examples/module/game.js +1 -1
  27. package/examples/module/index.html +3 -2
  28. package/examples/particles/index.html +4 -3
  29. package/examples/platformer/game.js +1 -1
  30. package/examples/platformer/gameCharacter.js +1 -0
  31. package/examples/platformer/gameEffects.js +0 -2
  32. package/examples/platformer/gameLevel.js +2 -2
  33. package/examples/platformer/gameObjects.js +1 -2
  34. package/examples/platformer/index.html +10 -9
  35. package/examples/puzzle/game.js +1 -1
  36. package/examples/puzzle/index.html +4 -3
  37. package/examples/starter/game.js +5 -5
  38. package/examples/starter/index.html +15 -14
  39. package/examples/stress/index.html +3 -2
  40. package/examples/typescript/game.js +1 -1
  41. package/examples/typescript/index.html +3 -2
  42. package/examples/uiSystem/game.js +134 -0
  43. package/examples/uiSystem/index.html +25 -0
  44. package/examples/uiSystem/tiles.png +0 -0
  45. package/jsconfig.json +11 -0
  46. package/package.json +1 -1
  47. package/plugins/box2d.js +116 -42
  48. package/plugins/postProcess.js +6 -7
  49. package/plugins/uiSystem.js +243 -0
  50. package/src/engine.js +48 -20
  51. package/src/engineAudio.js +22 -25
  52. package/src/engineDebug.js +18 -3
  53. package/src/engineDraw.js +101 -27
  54. package/src/engineExport.js +23 -4
  55. package/src/engineInput.js +9 -5
  56. package/src/engineObject.js +15 -12
  57. package/src/engineSettings.js +1 -1
  58. package/src/engineUtilities.js +1 -1
  59. package/src/engineWebGL.js +11 -4
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?197></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/gameCharacter.js CHANGED
@@ -41,6 +41,7 @@ class Character extends GameObject
41
41
  if (this.isDead())
42
42
  return super.update();
43
43
 
44
+ // get move input
44
45
  const moveInput = this.moveInput.copy();
45
46
 
46
47
  // jump
package/examples/platformer/gameEffects.js CHANGED
@@ -92,8 +92,6 @@ function explosion(pos, radius=3)
92
92
  const p = percent(d, 2*radius, radius);
93
93
  const force = o.pos.subtract(pos).normalize(p*radius*.2);
94
94
  o.applyForce(force);
95
- if (o.isDead && o.isDead())
96
- o.angleVelocity += randSign()*rand(p*radius/4,.3);
97
95
  });
98
96
 
99
97
  // smoke
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
@@ -66,7 +66,7 @@ class Crate extends GameObject
66
66
  {
67
67
  constructor(pos)
68
68
  {
69
- super(pos, vec2(1), spriteAtlas.crate, (randInt(4))*PI/2);
69
+ super(pos, vec2(.999), spriteAtlas.crate, (randInt(4))*PI/2);
70
70
 
71
71
  this.color = hsl(rand(),1,.8);
72
72
  this.health = 5;
@@ -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?197></script>
10
- <script src=gameObjects.js?197></script>
11
- <script src=gameCharacter.js?197></script>
12
- <script src=gamePlayer.js?197></script>
13
- <script src=gameEffects.js?197></script>
14
- <script src=gameLevel.js?197></script>
15
- <script src=gameLevelData.js?197></script>
16
- <script src=game.js?197></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?197></script>
9
- <script src=game.js?197></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);
@@ -63,13 +63,13 @@ function gameInit()
63
63
  // create particle emitter
64
64
  particleEmitter = new ParticleEmitter(
65
65
  vec2(16,9), 0, // emitPos, emitAngle
66
- 1, 0, 500, PI, // emitSize, emitTime, emitRate, emiteCone
66
+ 0, 0, 500, PI, // emitSize, emitTime, emitRate, emiteCone
67
67
  tile(0, 16), // tileIndex, tileSize
68
68
  hsl(1,1,1), hsl(0,0,0), // colorStartA, colorStartB
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?197></script>
10
- <script src=../../src/engineUtilities.js?197></script>
11
- <script src=../../src/engineSettings.js?197></script>
12
- <script src=../../src/engineObject.js?197></script>
13
- <script src=../../src/engineDraw.js?197></script>
14
- <script src=../../src/engineInput.js?197></script>
15
- <script src=../../src/engineAudio.js?197></script>
16
- <script src=../../src/engineTileLayer.js?197></script>
17
- <script src=../../src/engineParticles.js?197></script>
18
- <script src=../../src/engineMedals.js?197></script>
19
- <script src=../../src/engineWebGL.js?197></script>
20
- <script src=../../src/engine.js?197></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?197></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?197></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?197 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.9",
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",