littlejsengine 1.11.17 → 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 (62) hide show
  1. package/dist/littlejs.d.ts +112 -43
  2. package/dist/littlejs.esm.js +586 -500
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +2993 -122
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +2992 -119
  7. package/examples/box2d/game.js +70 -39
  8. package/examples/box2d/gameObjects.js +81 -77
  9. package/examples/box2d/index.html +2 -7
  10. package/examples/box2d/scenes.js +80 -90
  11. package/examples/breakout/game.js +63 -28
  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 +24 -15
  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 -45
  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 +59 -40
  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/game.js +9 -12
  40. package/examples/starter/index.html +13 -13
  41. package/examples/stress/index.html +44 -44
  42. package/examples/typescript/build.js +17 -18
  43. package/examples/typescript/game.js +32 -34
  44. package/examples/typescript/game.ts +32 -34
  45. package/examples/typescript/index.html +1 -1
  46. package/examples/uiSystem/game.js +34 -31
  47. package/examples/uiSystem/index.html +1 -5
  48. package/package.json +1 -1
  49. package/plugins/box2d.js +6 -2
  50. package/plugins/pluginExport.js +1 -2
  51. package/reference.md +29 -27
  52. package/src/engine.js +1 -1
  53. package/src/engineBuild.js +13 -6
  54. package/src/engineDebug.js +1 -3
  55. package/src/engineExport.js +2 -6
  56. package/src/engineInput.js +3 -1
  57. package/src/engineObject.js +18 -14
  58. package/src/engineSettings.js +6 -6
  59. package/src/engineTileLayer.js +179 -96
  60. package/examples/typescript/build/dist/littlejs.esm.js +0 -4834
  61. package/examples/typescript/build/examples/typescript/build.js +0 -24
  62. package/examples/typescript/build/examples/typescript/game.js +0 -102
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/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?11115></script>
11
- <script src=../../src/engineUtilities.js?11115></script>
12
- <script src=../../src/engineSettings.js?11115></script>
13
- <script src=../../src/engineObject.js?11115></script>
14
- <script src=../../src/engineDraw.js?11115></script>
15
- <script src=../../src/engineInput.js?11115></script>
16
- <script src=../../src/engineAudio.js?11115></script>
17
- <script src=../../src/engineTileLayer.js?11115></script>
18
- <script src=../../src/engineParticles.js?11115></script>
19
- <script src=../../src/engineMedals.js?11115></script>
20
- <script src=../../src/engineWebGL.js?11115></script>
21
- <script src=../../src/engine.js?11115></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?11115></script>
24
+ <script src=game.js?1120></script>
package/examples/stress/index.html CHANGED
@@ -5,11 +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?11115></script>
11
- <script src=../../plugins/zzfxm.js?11115></script>
12
- <script>
8
+ <script type=module>
13
9
 
14
10
  /*
15
11
  LittleJS Stress Test
@@ -20,16 +16,20 @@
20
16
 
21
17
  'use strict';
22
18
 
19
+ // import LittleJS module
20
+ import * as LJS from '../../dist/littlejs.esm.min.js';
21
+ const {vec2, rgb} = LJS;
22
+
23
23
  // keep our own list of simple sprites and track fps
24
- let sprites, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
24
+ let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
25
25
 
26
26
  ///////////////////////////////////////////////////////////////////////////////
27
27
 
28
- class TestObject extends EngineObject
28
+ class TestObject extends LJS.EngineObject
29
29
  {
30
30
  constructor(pos)
31
31
  {
32
- super(pos, vec2(1), tile(0), 0, spriteColor);
32
+ super(pos, vec2(1), LJS.tile(0), 0, spriteColor);
33
33
  this.additiveColor = spriteAdditiveColor;
34
34
  this.setCollision();
35
35
  }
@@ -38,21 +38,18 @@ class TestObject extends EngineObject
38
38
  ///////////////////////////////////////////////////////////////////////////////
39
39
  function gameInit()
40
40
  {
41
- // create tile collision
42
- const w = 94;
43
- initTileCollision(vec2(w,w*.5625|0));
44
- for (let x = tileCollisionSize.x; x--;)
45
- setTileCollisionData(vec2(x,0), 1), setTileCollisionData(vec2(x,tileCollisionSize.y-1), 1);
46
- for (let y = tileCollisionSize.y; y--;)
47
- 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));
48
45
 
49
46
  // set things up
50
- canvasFixedSize = vec2(1920, 1080); // 1080p
51
- cameraScale = 20;
52
- cameraPos = tileCollisionSize.scale(.5);
53
- 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));
54
52
  sprites = [];
55
- gravity = -.005;
56
53
 
57
54
  // display stats using a div so when using glOverlay it still appears on top
58
55
  document.body.appendChild(statsDisplay = document.createElement('div'));
@@ -62,34 +59,37 @@ function gameInit()
62
59
  ///////////////////////////////////////////////////////////////////////////////
63
60
  function gameUpdate()
64
61
  {
65
- if (mouseWasPressed(0) && !music.getSource())
62
+ if (LJS.mouseWasPressed(0) && !music.getSource())
66
63
  music.play();
67
64
 
68
65
  // mouse click = change color
69
- if (mouseWasPressed(0) || mouseIsDown(2))
70
- 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
+ }
71
71
 
72
72
  // right click = drop test object
73
- if (mouseIsDown(2))
74
- new TestObject(mousePos);
73
+ if (LJS.mouseIsDown(2))
74
+ new TestObject(LJS.mousePos);
75
75
 
76
76
  // mouse hold = add objects
77
- if (mouseIsDown(0))
77
+ if (LJS.mouseIsDown(0))
78
78
  {
79
79
  spriteColor = spriteColor.mutate();
80
80
  spriteAdditiveColor = spriteAdditiveColor.mutate();
81
81
  for (let i=100;i--;)
82
82
  sprites.push({
83
- pos:mousePos.add(randInCircle(2)),
84
- angle:rand(2*PI),
85
- velocity:randInCircle(.2),
83
+ pos:LJS.mousePos.add(LJS.randInCircle(2)),
84
+ angle:LJS.rand(2*LJS.PI),
85
+ velocity:LJS.randInCircle(.2),
86
86
  color:spriteColor.rgbaInt(),
87
87
  additiveColor:spriteAdditiveColor.rgbaInt()
88
88
  });
89
89
  }
90
90
 
91
91
  // mouse wheel = zoom
92
- cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
92
+ LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
93
93
  }
94
94
 
95
95
  ///////////////////////////////////////////////////////////////////////////////
@@ -102,12 +102,12 @@ function gameRender()
102
102
  {
103
103
  // track fps and update stats
104
104
  const frameTimeMS = Date.now();
105
- fpsDisplay = lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
105
+ fpsDisplay = LJS.lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
106
106
  timeMS = frameTimeMS;
107
107
 
108
108
  // show stats
109
109
  const spriteCount = sprites.length
110
- const objectCount = engineObjects.length;
110
+ const objectCount = LJS.engineObjects.length;
111
111
  statsDisplay.innerText =
112
112
  spriteCount + objectCount ?
113
113
  spriteCount + ' Sprites / '
@@ -116,7 +116,7 @@ function gameRender()
116
116
  : 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';
117
117
 
118
118
  // position stats
119
- const canvasRect = mainCanvas.getBoundingClientRect();
119
+ const canvasRect = LJS.mainCanvas.getBoundingClientRect();
120
120
  statsDisplay.style.top = canvasRect.top+'px';
121
121
  statsDisplay.style.fontSize = canvasRect.width*.04+'px';
122
122
 
@@ -124,25 +124,25 @@ function gameRender()
124
124
  for (const sprite of sprites)
125
125
  {
126
126
  // keep sprites above 0
127
- sprite.pos.y = max(sprite.pos.y, 0);
127
+ sprite.pos.y = LJS.max(sprite.pos.y, 0);
128
128
 
129
129
  // apply velocity and gravity
130
130
  sprite.pos.x += sprite.velocity.x;
131
- sprite.pos.y += sprite.velocity.y += gravity;
131
+ sprite.pos.y += sprite.velocity.y += LJS.gravity.y;
132
132
 
133
133
  // bounce
134
134
  if (sprite.pos.y < 0)
135
- sprite.velocity.y = rand(.3,.8);
135
+ sprite.velocity.y = LJS.rand(.3,.8);
136
136
  if (sprite.pos.x < 0)
137
137
  sprite.pos.x = 0, sprite.velocity.x *= -1;
138
- if (sprite.pos.x > tileCollisionSize.x)
139
- 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;
140
140
 
141
141
  // rotate sprite
142
- sprite.angle += .02*sign(sprite.velocity.x);
142
+ sprite.angle += .02*LJS.sign(sprite.velocity.x);
143
143
 
144
- // draw the sprite
145
- 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,
146
146
  sprite.color, sprite.additiveColor);
147
147
  }
148
148
  }
@@ -158,10 +158,10 @@ const tilesImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
158
158
 
159
159
  ///////////////////////////////////////////////////////////////////////////////
160
160
  // Startup LittleJS Engine
161
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
161
+ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
162
162
 
163
163
  ///////////////////////////////////////////////////////////////////////////////
164
164
  // music - Depp Loop
165
- const music = new 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
+ 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
166
 
167
- </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']);