littlejsengine 1.11.13 → 1.12.4

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 (79) hide show
  1. package/dist/littlejs.d.ts +1418 -109
  2. package/dist/littlejs.esm.js +3495 -581
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +3258 -399
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +3147 -379
  7. package/examples/box2d/game.js +73 -45
  8. package/examples/box2d/gameObjects.js +96 -92
  9. package/examples/box2d/index.html +2 -7
  10. package/examples/box2d/scenes.js +82 -92
  11. package/examples/breakout/game.js +62 -30
  12. package/examples/breakout/gameObjects.js +45 -47
  13. package/examples/breakout/index.html +1 -5
  14. package/examples/breakoutTutorial/game.js +36 -29
  15. package/examples/breakoutTutorial/index.html +1 -3
  16. package/examples/empty/game.js +5 -2
  17. package/examples/empty/index.html +1 -3
  18. package/examples/htmlMenu/game.js +25 -19
  19. package/examples/htmlMenu/index.html +5 -7
  20. package/examples/index.html +2 -3
  21. package/examples/module/game.js +32 -34
  22. package/examples/module/index.html +1 -1
  23. package/examples/particles/index.html +27 -22
  24. package/examples/platformer/game.js +71 -48
  25. package/examples/platformer/gameCharacter.js +42 -34
  26. package/examples/platformer/gameEffects.js +82 -75
  27. package/examples/platformer/gameLevel.js +67 -38
  28. package/examples/platformer/{gameLevelData.js → gameLevelData.json} +1 -11
  29. package/examples/platformer/gameObjects.js +70 -64
  30. package/examples/platformer/gamePlayer.js +12 -7
  31. package/examples/platformer/index.html +1 -9
  32. package/examples/puzzle/game.js +58 -42
  33. package/examples/puzzle/index.html +1 -3
  34. package/examples/shorts/base.html +2 -2
  35. package/examples/shorts/particles.js +1 -1
  36. package/examples/shorts/platformer.js +1 -1
  37. package/examples/shorts/tileLayer.js +5 -6
  38. package/examples/shorts/tiles.png +0 -0
  39. package/examples/starter/build.js +4 -4
  40. package/examples/starter/game.js +9 -12
  41. package/examples/starter/index.html +13 -13
  42. package/examples/stress/index.html +44 -43
  43. package/examples/typescript/build.js +17 -18
  44. package/examples/typescript/game.js +32 -34
  45. package/examples/typescript/game.ts +32 -34
  46. package/examples/typescript/index.html +1 -1
  47. package/examples/uiSystem/game.js +33 -36
  48. package/examples/uiSystem/index.html +1 -5
  49. package/package.json +3 -3
  50. package/plugins/box2d.js +1556 -640
  51. package/plugins/{Box2D_v2.3.1_min.wasm.js → box2d.wasm.js} +1 -1
  52. package/plugins/newgrounds.js +7 -8
  53. package/plugins/pluginExport.js +50 -0
  54. package/plugins/postProcess.js +94 -93
  55. package/plugins/uiSystem.js +145 -161
  56. package/plugins/zzfxm.js +163 -0
  57. package/reference.md +29 -27
  58. package/src/engine.js +15 -20
  59. package/src/engineAudio.js +74 -204
  60. package/src/engineBuild.js +29 -4
  61. package/src/engineDebug.js +105 -9
  62. package/src/engineDraw.js +27 -14
  63. package/src/engineExport.js +12 -8
  64. package/src/engineInput.js +3 -1
  65. package/src/engineObject.js +18 -14
  66. package/src/engineParticles.js +6 -1
  67. package/src/engineRelease.js +6 -1
  68. package/src/engineSettings.js +8 -8
  69. package/src/engineTileLayer.js +179 -96
  70. package/src/engineUtilities.js +5 -11
  71. package/src/engineWebGL.js +19 -7
  72. package/examples/starter/build/index.html +0 -2
  73. package/examples/starter/build/index.js +0 -1
  74. package/examples/starter/build/tiles.png +0 -0
  75. package/examples/starter/game.zip +0 -0
  76. package/examples/typescript/build/dist/littlejs.esm.js +0 -4834
  77. package/examples/typescript/build/examples/typescript/build.js +0 -24
  78. package/examples/typescript/build/examples/typescript/game.js +0 -102
  79. /package/plugins/{Box2D_v2.3.1_min.wasm.wasm → box2d.wasm.wasm} +0 -0
package/examples/shorts/tileLayer.js CHANGED
@@ -1,16 +1,15 @@
1
1
  function gameInit()
2
2
  {
3
3
  cameraPos = vec2(16); // setup camera
4
- gravity = -.01; // enable gravity
4
+ gravity.y = -.01; // enable gravity
5
5
 
6
6
  // create tile collision and visible tile layer
7
- initTileCollision(vec2(32));
8
7
  const pos = vec2();
9
- const tileLayer = new TileLayer(pos, tileCollisionSize);
8
+ const tileLayer = new TileCollisionLayer(pos, vec2(32));
10
9
 
11
10
  // init the tile layer
12
- for (pos.x = tileCollisionSize.x; pos.x--;)
13
- for (pos.y = tileCollisionSize.y; pos.y--;)
11
+ for (pos.x = tileLayer.size.x; pos.x--;)
12
+ for (pos.y = tileLayer.size.y; pos.y--;)
14
13
  {
15
14
  // check if tile should be solid
16
15
  if (rand() < .7)
@@ -23,7 +22,7 @@ function gameInit()
23
22
  const color = randColor(WHITE, hsl(0,0,.2));
24
23
  const data = new TileLayerData(tileIndex, direction, mirror, color);
25
24
  tileLayer.setData(pos, data);
26
- setTileCollisionData(pos, 1);
25
+ tileLayer.setCollisionData(pos);
27
26
  }
28
27
  tileLayer.redraw(); // redraw tile layer with new data
29
28
  }
package/examples/shorts/tiles.png CHANGED
Binary file
package/examples/starter/build.js CHANGED
@@ -102,6 +102,7 @@ function htmlBuildStep(filename)
102
102
  let buffer = '<!DOCTYPE html>';
103
103
  buffer += '<head>';
104
104
  buffer += `<title>${PROGRAM_TITLE}</title>`;
105
+ buffer += '<meta charset=utf-8>';
105
106
  buffer += '</head>';
106
107
  buffer += '<body>';
107
108
  buffer += '<script>';
@@ -115,8 +116,7 @@ function htmlBuildStep(filename)
115
116
  function zipBuildStep(filename)
116
117
  {
117
118
  console.log(`Zipping...`);
118
-
119
- // zip the build folder using ect
120
- const args = ['-9', '-strip', '-zip', `../${PROGRAM_NAME}.zip`, 'index.html', ...dataFiles];
121
- child_process.spawnSync('ect', args, {stdio: 'inherit', cwd: BUILD_FOLDER});
119
+ const sources = ['index.html', ...dataFiles];
120
+ const sourceList = sources.join(' ');
121
+ child_process.execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
122
122
  };
package/examples/starter/game.js CHANGED
@@ -7,11 +7,9 @@
7
7
 
8
8
  'use strict';
9
9
 
10
- // show the LittleJS splash screen
11
- setShowSplashScreen(true);
12
10
 
13
11
  // fix texture bleeding by shrinking tile slightly
14
- tileFixBleedScale = .5;
12
+ setTileFixBleedScale(.5);
15
13
 
16
14
  // sound effects
17
15
  const sound_click = new Sound([1,.5]);
@@ -27,19 +25,18 @@ let particleEmitter;
27
25
  function gameInit()
28
26
  {
29
27
  // create tile collision and visible tile layer
30
- initTileCollision(vec2(32,16));
31
28
  const pos = vec2();
32
- const tileLayer = new TileLayer(pos, tileCollisionSize);
29
+ const tileLayer = new TileCollisionLayer(pos, vec2(32,16));
33
30
 
34
31
  // get level data from the tiles image
35
32
  const tileImage = textureInfos[0].image;
36
33
  mainContext.drawImage(tileImage,0,0);
37
34
  const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
38
- for (pos.x = tileCollisionSize.x; pos.x--;)
39
- for (pos.y = tileCollisionSize.y; pos.y--;)
35
+ for (pos.x = tileLayer.size.x; pos.x--;)
36
+ for (pos.y = tileLayer.size.y; pos.y--;)
40
37
  {
41
38
  // check if this pixel is set
42
- const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
39
+ const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
43
40
  if (!imageData[4*i])
44
41
  continue;
45
42
 
@@ -50,18 +47,18 @@ function gameInit()
50
47
  const color = randColor();
51
48
  const data = new TileLayerData(tileIndex, direction, mirror, color);
52
49
  tileLayer.setData(pos, data);
53
- setTileCollisionData(pos, 1);
50
+ tileLayer.setCollisionData(pos);
54
51
  }
55
52
 
56
53
  // draw tile layer with new data
57
54
  tileLayer.redraw();
58
55
 
59
56
  // setup camera
60
- cameraPos = vec2(16,8);
61
- cameraScale = 32;
57
+ setCameraPos(vec2(16,8));
58
+ setCameraScale(32);
62
59
 
63
60
  // enable gravity
64
- gravity = -.01;
61
+ setGravity(vec2(0,-.01));
65
62
 
66
63
  // create particle emitter
67
64
  particleEmitter = new ParticleEmitter(
package/examples/starter/index.html CHANGED
@@ -7,18 +7,18 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../src/engineDebug.js?1117></script>
11
- <script src=../../src/engineUtilities.js?1117></script>
12
- <script src=../../src/engineSettings.js?1117></script>
13
- <script src=../../src/engineObject.js?1117></script>
14
- <script src=../../src/engineDraw.js?1117></script>
15
- <script src=../../src/engineInput.js?1117></script>
16
- <script src=../../src/engineAudio.js?1117></script>
17
- <script src=../../src/engineTileLayer.js?1117></script>
18
- <script src=../../src/engineParticles.js?1117></script>
19
- <script src=../../src/engineMedals.js?1117></script>
20
- <script src=../../src/engineWebGL.js?1117></script>
21
- <script src=../../src/engine.js?1117></script>
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>
22
22
 
23
23
  <!-- Add your game scripts here -->
24
- <script src=game.js?1117></script>
24
+ <script src=game.js?1120></script>
package/examples/stress/index.html CHANGED
@@ -5,10 +5,7 @@
5
5
  <meta name=mobile-web-app-capable content=yes>
6
6
  <link rel=icon type=image/png href=../favicon.png>
7
7
  </head><body>
8
-
9
- <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.min.js?1117></script>
11
- <script>
8
+ <script type=module>
12
9
 
13
10
  /*
14
11
  LittleJS Stress Test
@@ -19,16 +16,20 @@
19
16
 
20
17
  'use strict';
21
18
 
19
+ // import LittleJS module
20
+ import * as LJS from '../../dist/littlejs.esm.min.js';
21
+ const {vec2, rgb} = LJS;
22
+
22
23
  // keep our own list of simple sprites and track fps
23
- let sprites, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
24
+ let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
24
25
 
25
26
  ///////////////////////////////////////////////////////////////////////////////
26
27
 
27
- class TestObject extends EngineObject
28
+ class TestObject extends LJS.EngineObject
28
29
  {
29
30
  constructor(pos)
30
31
  {
31
- super(pos, vec2(1), tile(0), 0, spriteColor);
32
+ super(pos, vec2(1), LJS.tile(0), 0, spriteColor);
32
33
  this.additiveColor = spriteAdditiveColor;
33
34
  this.setCollision();
34
35
  }
@@ -37,21 +38,18 @@ class TestObject extends EngineObject
37
38
  ///////////////////////////////////////////////////////////////////////////////
38
39
  function gameInit()
39
40
  {
40
- // create tile collision
41
- const w = 94;
42
- initTileCollision(vec2(w,w*.5625|0));
43
- for (let x = tileCollisionSize.x; x--;)
44
- setTileCollisionData(vec2(x,0), 1), setTileCollisionData(vec2(x,tileCollisionSize.y-1), 1);
45
- for (let y = tileCollisionSize.y; y--;)
46
- setTileCollisionData(vec2(0,y), 1), setTileCollisionData(vec2(tileCollisionSize.x-1,y), 1);
41
+ // create tile collision ground for objects to collide with
42
+ tileLayer = new LJS.TileCollisionLayer(vec2(), vec2(99,55));
43
+ for (let x = tileLayer.size.x; x--;)
44
+ tileLayer.setCollisionData(vec2(x,0));
47
45
 
48
46
  // set things up
49
- canvasFixedSize = vec2(1920, 1080); // 1080p
50
- cameraScale = 20;
51
- cameraPos = tileCollisionSize.scale(.5);
52
- mainCanvas.style.background = '#555';
47
+ LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
48
+ LJS.setCameraScale(20);
49
+ LJS.setCameraPos(tileLayer.size.scale(.5));
50
+ LJS.mainCanvas.style.background = '#555';
51
+ LJS.setGravity(vec2(0,-.005));
53
52
  sprites = [];
54
- gravity = -.005;
55
53
 
56
54
  // display stats using a div so when using glOverlay it still appears on top
57
55
  document.body.appendChild(statsDisplay = document.createElement('div'));
@@ -61,34 +59,37 @@ function gameInit()
61
59
  ///////////////////////////////////////////////////////////////////////////////
62
60
  function gameUpdate()
63
61
  {
64
- if (mouseWasPressed(0) && !music.getSource())
62
+ if (LJS.mouseWasPressed(0) && !music.getSource())
65
63
  music.play();
66
64
 
67
65
  // mouse click = change color
68
- if (mouseWasPressed(0) || mouseIsDown(2))
69
- spriteColor = randColor(), spriteAdditiveColor = randColor(new Color(.5,.5,.5, 0), new Color(0,0,0,0));
66
+ if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))
67
+ {
68
+ spriteColor = LJS.randColor();
69
+ spriteAdditiveColor = LJS.randColor(rgb(.5,.5,.5, 0), rgb(0,0,0,0));
70
+ }
70
71
 
71
72
  // right click = drop test object
72
- if (mouseIsDown(2))
73
- new TestObject(mousePos);
73
+ if (LJS.mouseIsDown(2))
74
+ new TestObject(LJS.mousePos);
74
75
 
75
76
  // mouse hold = add objects
76
- if (mouseIsDown(0))
77
+ if (LJS.mouseIsDown(0))
77
78
  {
78
79
  spriteColor = spriteColor.mutate();
79
80
  spriteAdditiveColor = spriteAdditiveColor.mutate();
80
81
  for (let i=100;i--;)
81
82
  sprites.push({
82
- pos:mousePos.add(randInCircle(2)),
83
- angle:rand(2*PI),
84
- velocity:randInCircle(.2),
83
+ pos:LJS.mousePos.add(LJS.randInCircle(2)),
84
+ angle:LJS.rand(2*LJS.PI),
85
+ velocity:LJS.randInCircle(.2),
85
86
  color:spriteColor.rgbaInt(),
86
87
  additiveColor:spriteAdditiveColor.rgbaInt()
87
88
  });
88
89
  }
89
90
 
90
91
  // mouse wheel = zoom
91
- cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
92
+ LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
92
93
  }
93
94
 
94
95
  ///////////////////////////////////////////////////////////////////////////////
@@ -101,12 +102,12 @@ function gameRender()
101
102
  {
102
103
  // track fps and update stats
103
104
  const frameTimeMS = Date.now();
104
- fpsDisplay = lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
105
+ fpsDisplay = LJS.lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
105
106
  timeMS = frameTimeMS;
106
107
 
107
108
  // show stats
108
109
  const spriteCount = sprites.length
109
- const objectCount = engineObjects.length;
110
+ const objectCount = LJS.engineObjects.length;
110
111
  statsDisplay.innerText =
111
112
  spriteCount + objectCount ?
112
113
  spriteCount + ' Sprites / '
@@ -115,7 +116,7 @@ function gameRender()
115
116
  : 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';
116
117
 
117
118
  // position stats
118
- const canvasRect = mainCanvas.getBoundingClientRect();
119
+ const canvasRect = LJS.mainCanvas.getBoundingClientRect();
119
120
  statsDisplay.style.top = canvasRect.top+'px';
120
121
  statsDisplay.style.fontSize = canvasRect.width*.04+'px';
121
122
 
@@ -123,25 +124,25 @@ function gameRender()
123
124
  for (const sprite of sprites)
124
125
  {
125
126
  // keep sprites above 0
126
- sprite.pos.y = max(sprite.pos.y, 0);
127
+ sprite.pos.y = LJS.max(sprite.pos.y, 0);
127
128
 
128
129
  // apply velocity and gravity
129
130
  sprite.pos.x += sprite.velocity.x;
130
- sprite.pos.y += sprite.velocity.y += gravity;
131
+ sprite.pos.y += sprite.velocity.y += LJS.gravity.y;
131
132
 
132
133
  // bounce
133
134
  if (sprite.pos.y < 0)
134
- sprite.velocity.y = rand(.3,.8);
135
+ sprite.velocity.y = LJS.rand(.3,.8);
135
136
  if (sprite.pos.x < 0)
136
137
  sprite.pos.x = 0, sprite.velocity.x *= -1;
137
- if (sprite.pos.x > tileCollisionSize.x)
138
- sprite.pos.x = tileCollisionSize.x, sprite.velocity.x *= -1;
138
+ if (sprite.pos.x > tileLayer.size.x)
139
+ sprite.pos.x = tileLayer.size.x, sprite.velocity.x *= -1;
139
140
 
140
141
  // rotate sprite
141
- sprite.angle += .02*sign(sprite.velocity.x);
142
+ sprite.angle += .02*LJS.sign(sprite.velocity.x);
142
143
 
143
- // draw the sprite
144
- glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
144
+ // draw the sprite directly using glDraw for extra speed
145
+ LJS.glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
145
146
  sprite.color, sprite.additiveColor);
146
147
  }
147
148
  }
@@ -157,10 +158,10 @@ const tilesImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
157
158
 
158
159
  ///////////////////////////////////////////////////////////////////////////////
159
160
  // Startup LittleJS Engine
160
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
161
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
161
162
 
162
163
  ///////////////////////////////////////////////////////////////////////////////
163
164
  // music - Depp Loop
164
- const music = new Music([[[.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]]);
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]]);
165
166
 
166
- </script>
167
+ </script>
package/examples/typescript/build.js CHANGED
@@ -1,33 +1,32 @@
1
1
  #!/usr/bin/env node
2
2
 
3
- /**
4
- * LittleJS Build System
5
- */
6
-
7
- 'use strict';
8
-
9
3
  const PROGRAM_NAME = 'game';
10
4
  const BUILD_FOLDER = 'build';
11
5
  const ROOT_FOLDER = 'examples/typescript';
12
- const sourceFiles =
13
- [
14
- 'game.js',
15
- // add your game's scripts here
6
+
7
+ // Define TypeScript source files
8
+ const tsSourceFiles = [
9
+ 'game.ts',
10
+ // add your TypeScript files here
16
11
  ];
17
12
 
13
+ // Corresponding JS output files
14
+ const jsSourceFiles = tsSourceFiles.map(file => file.replace('.ts', '.js'));
15
+
18
16
  console.log(`Building TypeScript for ${PROGRAM_NAME}...`);
19
17
  const startTime = Date.now();
20
18
  const fs = require('node:fs');
21
19
  const child_process = require('node:child_process');
22
20
 
23
- console.log(`Removing old build filder...`);
21
+ console.log(`Removing old build folder...`);
24
22
  fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
25
23
 
26
24
  console.log(`Compiling TypeScript...`);
27
- child_process.execSync(`npx tsc --outDir "./${BUILD_FOLDER}"`, {stdio: 'inherit'});
28
-
29
- console.log(`Moving js files to root...`);
30
- for(const file of sourceFiles)
31
- fs.copyFileSync(`${BUILD_FOLDER}/${ROOT_FOLDER}/${file}`, `${file}`);
32
-
33
- console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
25
+ // Compile all TypeScript files at once
26
+ const tsFiles = tsSourceFiles.join(' ');
27
+ child_process.execSync(`npx tsc ${tsFiles} --outDir "./${BUILD_FOLDER}" --target es2020 --module es2020`, {stdio: 'inherit'});
28
+ console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
29
+
30
+ console.log(`Moving js files back to root...`);
31
+ for(const file of jsSourceFiles)
32
+ fs.copyFileSync(`${BUILD_FOLDER}/${file}`, file);
package/examples/typescript/game.js CHANGED
@@ -4,56 +4,54 @@
4
4
  - Shows how to use LittleJS with modules
5
5
  */
6
6
  'use strict';
7
- // import module
8
- import * as LittleJS from '../../dist/littlejs.esm.js';
9
- const { tile, vec2, hsl } = LittleJS;
7
+ // import LittleJS module
8
+ import * as LJS from '../../dist/littlejs.esm.js';
9
+ const { tile, vec2, hsl } = LJS;
10
10
  // show the LittleJS splash screen
11
- LittleJS.setShowSplashScreen(true);
11
+ LJS.setShowSplashScreen(true);
12
12
  // fix texture bleeding by shrinking tile slightly
13
- LittleJS.setTileFixBleedScale(.5);
13
+ LJS.setTileFixBleedScale(.5);
14
14
  // sound effects
15
- const sound_click = new LittleJS.Sound([1, .5]);
15
+ const sound_click = new LJS.Sound([1, .5]);
16
16
  // medals
17
- const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
18
- LittleJS.medalsInit('Hello World');
17
+ const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
18
+ LJS.medalsInit('Hello World');
19
19
  // game variables
20
20
  let particleEmitter;
21
21
  ///////////////////////////////////////////////////////////////////////////////
22
22
  function gameInit() {
23
23
  // create tile collision and visible tile layer
24
- const tileCollisionSize = vec2(32, 16);
25
- LittleJS.initTileCollision(tileCollisionSize);
26
24
  const pos = vec2();
27
- const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
25
+ const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32, 16));
28
26
  // get level data from the tiles image
29
- const mainContext = LittleJS.mainContext;
30
- const tileImage = LittleJS.textureInfos[0].image;
27
+ const mainContext = LJS.mainContext;
28
+ const tileImage = LJS.textureInfos[0].image;
31
29
  mainContext.drawImage(tileImage, 0, 0);
32
30
  const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
33
- for (pos.x = tileCollisionSize.x; pos.x--;)
34
- for (pos.y = tileCollisionSize.y; pos.y--;) {
31
+ for (pos.x = tileLayer.size.x; pos.x--;)
32
+ for (pos.y = tileLayer.size.y; pos.y--;) {
35
33
  // check if this pixel is set
36
- const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
34
+ const i = pos.x + tileImage.width * (15 + tileLayer.size.y - pos.y);
37
35
  if (!imageData[4 * i])
38
36
  continue;
39
37
  // set tile data
40
38
  const tileIndex = 1;
41
- const direction = LittleJS.randInt(4);
42
- const mirror = !LittleJS.randInt(2);
43
- const color = LittleJS.randColor();
44
- const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
39
+ const direction = LJS.randInt(4);
40
+ const mirror = !LJS.randInt(2);
41
+ const color = LJS.randColor();
42
+ const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
45
43
  tileLayer.setData(pos, data);
46
- LittleJS.setTileCollisionData(pos, 1);
44
+ tileLayer.setCollisionData(pos);
47
45
  }
48
46
  // draw tile layer with new data
49
47
  tileLayer.redraw();
50
48
  // move camera to center of collision
51
- LittleJS.setCameraPos(tileCollisionSize.scale(.5));
52
- LittleJS.setCameraScale(32);
49
+ LJS.setCameraPos(tileLayer.size.scale(.5));
50
+ LJS.setCameraScale(32);
53
51
  // enable gravity
54
- LittleJS.setGravity(-.01);
52
+ LJS.setGravity(vec2(0, -.01));
55
53
  // create particle emitter
56
- particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
54
+ particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
57
55
  1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
58
56
  tile(0, 16), // tileIndex, tileSize
59
57
  hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
@@ -67,20 +65,20 @@ function gameInit() {
67
65
  }
68
66
  ///////////////////////////////////////////////////////////////////////////////
69
67
  function gameUpdate() {
70
- if (LittleJS.mouseWasPressed(0)) {
68
+ if (LJS.mouseWasPressed(0)) {
71
69
  // play sound when mouse is pressed
72
- sound_click.play(LittleJS.mousePos);
70
+ sound_click.play(LJS.mousePos);
73
71
  // change particle color and set to fade out
74
72
  particleEmitter.colorStartA = hsl();
75
- particleEmitter.colorStartB = LittleJS.randColor();
73
+ particleEmitter.colorStartB = LJS.randColor();
76
74
  particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
77
75
  particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
78
76
  // unlock medals
79
77
  medal_example.unlock();
80
78
  }
81
79
  // move particles to mouse location if on screen
82
- if (LittleJS.mousePosScreen.x)
83
- particleEmitter.pos = LittleJS.mousePos;
80
+ if (LJS.mousePosScreen.x)
81
+ particleEmitter.pos = LJS.mousePos;
84
82
  }
85
83
  ///////////////////////////////////////////////////////////////////////////////
86
84
  function gameUpdatePost() {
@@ -88,15 +86,15 @@ function gameUpdatePost() {
88
86
  ///////////////////////////////////////////////////////////////////////////////
89
87
  function gameRender() {
90
88
  // draw a grey square in the background without using webgl
91
- LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
89
+ LJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
92
90
  // draw the logo as a tile
93
- LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
91
+ LJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
94
92
  }
95
93
  ///////////////////////////////////////////////////////////////////////////////
96
94
  function gameRenderPost() {
97
95
  // draw to overlay canvas for hud rendering
98
- LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
96
+ LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x / 2, 80), 80);
99
97
  }
100
98
  ///////////////////////////////////////////////////////////////////////////////
101
99
  // Startup LittleJS Engine
102
- LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
100
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);