littlejsengine 1.10.4 → 1.10.7

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 (63) hide show
  1. package/README.md +8 -78
  2. package/dist/littlejs.d.ts +31 -17
  3. package/dist/littlejs.esm.js +121 -55
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +121 -55
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +121 -55
  8. package/examples/box2d/game.js +15 -4
  9. package/examples/box2d/gameObjects.js +10 -9
  10. package/examples/box2d/index.html +5 -5
  11. package/examples/box2d/scenes.js +4 -4
  12. package/examples/box2d/tiles.png +0 -0
  13. package/examples/breakout/index.html +3 -3
  14. package/examples/breakoutTutorial/index.html +2 -2
  15. package/examples/electron/game.js +3 -0
  16. package/examples/electron/index.html +2 -2
  17. package/examples/htmlMenu/index.html +3 -3
  18. package/examples/js13k/game.js +3 -0
  19. package/examples/js13k/index.html +13 -13
  20. package/examples/module/game.js +3 -0
  21. package/examples/module/index.html +1 -1
  22. package/examples/particles/index.html +4 -1
  23. package/examples/platformer/game.js +19 -15
  24. package/examples/platformer/gameCharacter.js +3 -3
  25. package/examples/platformer/gameLevel.js +1 -0
  26. package/examples/platformer/index.html +8 -8
  27. package/examples/platformer/tiles.png +0 -0
  28. package/examples/puzzle/index.html +2 -2
  29. package/examples/starter/game.js +3 -0
  30. package/examples/starter/index.html +13 -13
  31. package/examples/stress/index.html +1 -1
  32. package/examples/typescript/game.js +2 -0
  33. package/examples/typescript/game.ts +3 -0
  34. package/examples/typescript/index.html +1 -1
  35. package/examples/uiSystem/game.js +23 -16
  36. package/examples/uiSystem/index.html +3 -14
  37. package/package.json +1 -1
  38. package/plugins/postProcess.js +2 -9
  39. package/plugins/uiSystem.js +84 -24
  40. package/src/engine.js +11 -11
  41. package/src/engineAudio.js +7 -13
  42. package/src/engineDraw.js +1 -1
  43. package/src/engineInput.js +7 -3
  44. package/src/engineMedals.js +19 -5
  45. package/src/engineObject.js +8 -5
  46. package/src/engineTileLayer.js +8 -7
  47. package/src/engineUtilities.js +59 -10
  48. package/examples/js13k/build/index.html +0 -1
  49. package/examples/js13k/build/index.js +0 -1
  50. package/examples/js13k/build/tiles.png +0 -0
  51. package/examples/js13k/game - Copy.zip +0 -0
  52. package/examples/js13k/game.zip +0 -0
  53. package/examples/starter/build/index.html +0 -2
  54. package/examples/starter/build/index.js +0 -1
  55. package/examples/starter/build/tiles.png +0 -0
  56. package/examples/starter/game.zip +0 -0
  57. package/examples/typescript/build/build/littlejs.esm.js +0 -4327
  58. package/examples/typescript/build/dist/littlejs.esm.js +0 -4425
  59. package/examples/typescript/build/examples/typescript/build.js +0 -24
  60. package/examples/typescript/build/examples/typescript/game.js +0 -100
  61. package/examples/typescript/build/examples/typescript/test/build/littlejs.esm.js +0 -3934
  62. package/examples/typescript/build/examples/typescript/test/examples/typescript/build.js +0 -86
  63. package/examples/typescript/build/examples/typescript/test/examples/typescript/game.js +0 -92
@@ -32,7 +32,7 @@
32
32
  <!-- setup html menu system -->
33
33
  <div class="topDiv">
34
34
  <div id="menu" class="menuDiv">
35
- <h1><i style="font-size:30px">Test Menu</i></h1>
35
+ <b style="font-size:50px">Test Menu</b>
36
36
  This is an example menu using html elements.
37
37
  <input value="Test Input" onchange="alert('New text: ' + this.value)">
38
38
  <input type="range" onchange="alert('New value: ' + this.value)">
@@ -52,5 +52,5 @@ setMenuVisible(false);
52
52
  </script>
53
53
 
54
54
  <!-- Add your game scripts here -->
55
- <script src=../../dist/littlejs.js?1100></script>
56
- <script src=game.js?1100></script>
55
+ <script src=../../dist/littlejs.js?1105></script>
56
+ <script src=game.js?1105></script>
@@ -7,6 +7,9 @@
7
7
 
8
8
  'use strict';
9
9
 
10
+ // fix texture bleeding by shrinking tile slightly
11
+ tileFixBleedScale = .5;
12
+
10
13
  // sound effects
11
14
  const sound_click = new Sound([1,.5]);
12
15
 
@@ -4,18 +4,18 @@
4
4
  </head><body>
5
5
 
6
6
  <!-- LittleJS Engine -->
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>
7
+ <script src=../../src/engineDebug.js?1105></script>
8
+ <script src=../../src/engineUtilities.js?1105></script>
9
+ <script src=../../src/engineSettings.js?1105></script>
10
+ <script src=../../src/engineObject.js?1105></script>
11
+ <script src=../../src/engineDraw.js?1105></script>
12
+ <script src=../../src/engineInput.js?1105></script>
13
+ <script src=../../src/engineAudio.js?1105></script>
14
+ <script src=../../src/engineTileLayer.js?1105></script>
15
+ <script src=../../src/engineParticles.js?1105></script>
16
+ <script src=../../src/engineMedals.js?1105></script>
17
+ <script src=../../src/engineWebGL.js?1105></script>
18
+ <script src=../../src/engine.js?1105></script>
19
19
 
20
20
  <!-- Add your game scripts here -->
21
- <script src=game.js?1100></script>
21
+ <script src=game.js?1105></script>
@@ -13,6 +13,9 @@ const {tile, vec2, hsl} = LittleJS;
13
13
  // show the LittleJS splash screen
14
14
  LittleJS.setShowSplashScreen(true);
15
15
 
16
+ // fix texture bleeding by shrinking tile slightly
17
+ LittleJS.setTileFixBleedScale(.5);
18
+
16
19
  // sound effects
17
20
  const sound_click = new LittleJS.Sound([1,.5]);
18
21
 
@@ -7,4 +7,4 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- Add your game scripts here -->
10
- <script src=game.js?1100 type=module></script>
10
+ <script src=game.js?1105 type=module></script>
@@ -10,11 +10,14 @@ button { margin:1px; }
10
10
  </style>
11
11
  </head><body>
12
12
 
13
- <script src=../../dist/littlejs.js?1100></script>
13
+ <script src=../../dist/littlejs.js?1105></script>
14
14
  <script>
15
15
 
16
16
  'use strict';
17
17
 
18
+ // fix texture bleeding by shrinking tiles slightly
19
+ tileFixBleedScale = .5;
20
+
18
21
  let particleEditor = 0, particleSystem, particleSystemDiv, particleSystemCode;
19
22
  let inputExpand;
20
23
  let restartTimer = new Timer();
@@ -16,36 +16,36 @@ let spriteAtlas, score, deaths;
16
16
  // enable touch gamepad on touch devices
17
17
  touchGamepadEnable = true;
18
18
 
19
- // fix texture bleeding by shrinking tile slightly
20
- tileFixBleedScale = .1;
21
-
22
19
  ///////////////////////////////////////////////////////////////////////////////
23
20
  function gameInit()
24
21
  {
22
+ // engine settings
23
+ gravity = -.01;
24
+ objectDefaultDamping = .99;
25
+ objectDefaultAngleDamping = .99;
26
+ cameraScale = 4*16;
27
+
25
28
  // create a table of all sprites
29
+ const gameTile = (i, size=16)=> tile(i, size, 0, 1);
26
30
  spriteAtlas =
27
31
  {
28
32
  // large tiles
29
- circle: tile(0),
30
- crate: tile(2),
31
- player: tile(3),
32
- enemy: tile(5),
33
- coin: tile(6),
33
+ circle: gameTile(0),
34
+ crate: gameTile(1),
35
+ player: gameTile(2),
36
+ enemy: gameTile(4),
37
+ coin: gameTile(5),
34
38
 
35
39
  // small tiles
36
- gun: tile(2,8),
37
- grenade: tile(3,8),
40
+ gun: gameTile(vec2(0,2),8),
41
+ grenade: gameTile(vec2(1,2),8),
38
42
  };
43
+
39
44
  // setup level
40
45
  buildLevel();
41
46
 
42
47
  // init game
43
48
  score = deaths = 0;
44
- gravity = -.01;
45
- objectDefaultDamping = .99;
46
- objectDefaultAngleDamping = .99;
47
- cameraScale = 4*16;
48
- cameraPos = getCameraTarget();
49
49
  }
50
50
 
51
51
  ///////////////////////////////////////////////////////////////////////////////
@@ -77,6 +77,10 @@ function gameUpdate()
77
77
  // M = move player to mouse
78
78
  if (keyWasPressed('KeyM'))
79
79
  player.pos = mousePos;
80
+
81
+ // R = restart level
82
+ if (keyWasPressed('KeyR'))
83
+ buildLevel();
80
84
  }
81
85
 
82
86
  ///////////////////////////////////////////////////////////////////////////////
@@ -15,7 +15,7 @@ class Character extends GameObject
15
15
  {
16
16
  constructor(pos)
17
17
  {
18
- super(pos, vec2(.6,.95), tile());
18
+ super(pos, vec2(.6,.95));
19
19
 
20
20
  this.weapon = new Weapon(pos, this);
21
21
  this.lastPos = pos;
@@ -178,7 +178,7 @@ class Character extends GameObject
178
178
 
179
179
  // apply movement acceleration and clamp
180
180
  const maxCharacterSpeed = .2;
181
- this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, -maxCharacterSpeed, maxCharacterSpeed);
181
+ this.velocity.x = clamp(this.velocity.x + moveInput.x * .04, -maxCharacterSpeed, maxCharacterSpeed);
182
182
 
183
183
  // track last pos for ladder collision code
184
184
  this.lastPos = this.pos.copy();
@@ -226,7 +226,7 @@ class Character extends GameObject
226
226
  if (!this.isDead())
227
227
  {
228
228
  // bounce pos with walk cycle
229
- bodyPos = bodyPos.add(vec2(0,.05*Math.sin(this.walkCyclePercent*PI)));
229
+ bodyPos = bodyPos.add(vec2(0,.01+.05*Math.sin(this.walkCyclePercent*PI)));
230
230
 
231
231
  // make bottom flush
232
232
  bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
@@ -35,6 +35,7 @@ function buildLevel()
35
35
 
36
36
  // spawn player
37
37
  player = new Player(playerStartPos);
38
+ cameraPos = getCameraTarget();
38
39
  }
39
40
 
40
41
  function loadLevel(level=0)
@@ -7,11 +7,11 @@
7
7
  <link rel=icon type=image/png href=../favicon.png>
8
8
  </head><body>
9
9
 
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>
10
+ <script src=../../dist/littlejs.js?1105></script>
11
+ <script src=gameObjects.js?1105></script>
12
+ <script src=gameCharacter.js?1105></script>
13
+ <script src=gamePlayer.js?1105></script>
14
+ <script src=gameEffects.js?1105></script>
15
+ <script src=gameLevel.js?1105></script>
16
+ <script src=gameLevelData.js?1105></script>
17
+ <script src=game.js?1105></script>
Binary file
@@ -6,5 +6,5 @@
6
6
  <link rel=icon type=image/png href=../favicon.png>
7
7
  </head><body>
8
8
 
9
- <script src=../../dist/littlejs.js?1100></script>
10
- <script src=game.js?1100></script>
9
+ <script src=../../dist/littlejs.js?1105></script>
10
+ <script src=game.js?1105></script>
@@ -10,6 +10,9 @@
10
10
  // show the LittleJS splash screen
11
11
  setShowSplashScreen(true);
12
12
 
13
+ // fix texture bleeding by shrinking tile slightly
14
+ tileFixBleedScale = .5;
15
+
13
16
  // sound effects
14
17
  const sound_click = new Sound([1,.5]);
15
18
 
@@ -7,18 +7,18 @@
7
7
  </head><body>
8
8
 
9
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>
10
+ <script src=../../src/engineDebug.js?1105></script>
11
+ <script src=../../src/engineUtilities.js?1105></script>
12
+ <script src=../../src/engineSettings.js?1105></script>
13
+ <script src=../../src/engineObject.js?1105></script>
14
+ <script src=../../src/engineDraw.js?1105></script>
15
+ <script src=../../src/engineInput.js?1105></script>
16
+ <script src=../../src/engineAudio.js?1105></script>
17
+ <script src=../../src/engineTileLayer.js?1105></script>
18
+ <script src=../../src/engineParticles.js?1105></script>
19
+ <script src=../../src/engineMedals.js?1105></script>
20
+ <script src=../../src/engineWebGL.js?1105></script>
21
+ <script src=../../src/engine.js?1105></script>
22
22
 
23
23
  <!-- Add your game scripts here -->
24
- <script src=game.js?1100></script>
24
+ <script src=game.js?1105></script>
@@ -7,7 +7,7 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.min.js?1100></script>
10
+ <script src=../../dist/littlejs.min.js?1105></script>
11
11
  <script>
12
12
 
13
13
  /*
@@ -9,6 +9,8 @@ import * as LittleJS from '../../dist/littlejs.esm.js';
9
9
  const { tile, vec2, hsl } = LittleJS;
10
10
  // show the LittleJS splash screen
11
11
  LittleJS.setShowSplashScreen(true);
12
+ // fix texture bleeding by shrinking tile slightly
13
+ LittleJS.setTileFixBleedScale(.5);
12
14
  // sound effects
13
15
  const sound_click = new LittleJS.Sound([1, .5]);
14
16
  // medals
@@ -13,6 +13,9 @@ const {tile, vec2, hsl} = LittleJS;
13
13
  // show the LittleJS splash screen
14
14
  LittleJS.setShowSplashScreen(true);
15
15
 
16
+ // fix texture bleeding by shrinking tile slightly
17
+ LittleJS.setTileFixBleedScale(.5);
18
+
16
19
  // sound effects
17
20
  const sound_click = new LittleJS.Sound([1,.5]);
18
21
 
@@ -7,4 +7,4 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- Add your game scripts here -->
10
- <script src=game.js?1100 type=module></script>
10
+ <script src=game.js?1105 type=module></script>
@@ -10,7 +10,7 @@
10
10
  setShowSplashScreen(true);
11
11
 
12
12
  // sound effects
13
- const sound_click = new Sound([1,0]);
13
+ const sound_ui = new Sound([1,0]);
14
14
 
15
15
  // UI system
16
16
  let uiRoot, uiMenu;
@@ -20,7 +20,7 @@ const setMenuVisible =(visible)=> uiMenu.visible = visible;
20
20
  function createUI()
21
21
  {
22
22
  // setup root to attach all ui elements to
23
- uiRoot = new UIObject(vec2(mainCanvasSize.x/2,0));
23
+ uiRoot = new UIObject();
24
24
  const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70),
25
25
  'LittleJS UI System Example\nM = Toggle menu');
26
26
  uiInfo.textColor = WHITE;
@@ -30,54 +30,61 @@ function createUI()
30
30
  // setup example menu
31
31
  uiMenu = new UIObject(vec2(0,450));
32
32
  uiRoot.addChild(uiMenu);
33
- const uiBackground = new UIObject(vec2(0,0), vec2(450,550));
33
+ const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
34
34
  uiMenu.addChild(uiBackground);
35
35
 
36
36
  // example large text
37
- const textTitle = new UIText(vec2(0,-200), vec2(500, 90), 'Test Title');
37
+ const textTitle = new UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
38
38
  uiMenu.addChild(textTitle);
39
39
  textTitle.textColor = RED;
40
40
  textTitle.lineWidth = 4;
41
41
  textTitle.lineColor = BLUE;
42
42
 
43
43
  // example multiline text
44
- const textTest = new UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
44
+ const textTest = new UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
45
45
  uiMenu.addChild(textTest);
46
46
 
47
47
  // example tile image
48
- const tileTest = new UITile(vec2(150,-110), vec2(110), tile(3,128))
48
+ const tileTest = new UITile(vec2(150,-130), vec2(110), tile(3,128))
49
49
  uiMenu.addChild(tileTest);
50
50
 
51
51
  // example checkbox
52
- const checkbox = new UICheckbox(vec2(-160,0), vec2(50));
52
+ const checkbox = new UICheckbox(vec2(-140,-20), vec2(40));
53
53
  uiMenu.addChild(checkbox);
54
- checkbox.onClick = ()=>
54
+ checkbox.onPress = ()=>
55
55
  {
56
56
  checkbox.checked = !checkbox.checked;
57
57
  console.log('Checkbox clicked');
58
- sound_click.play(0,.5,checkbox.checked?4:1);
58
+ sound_ui.play(0,.5,checkbox.checked?4:1);
59
59
  }
60
60
 
61
61
  // text attached to checkbox
62
- const checkboxText = new UIText(vec2(200,0), vec2(300, 50), 'Test Checkbox');
62
+ const checkboxText = new UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
63
63
  checkbox.addChild(checkboxText);
64
64
 
65
+ // example scrollbar
66
+ const scrollbar = new UIScrollbar(vec2(0,60), vec2(350, 50));
67
+ uiMenu.addChild(scrollbar);
68
+ scrollbar.onChange = ()=> console.log('New scrollbar value:', scrollbar.value);
69
+ scrollbar.onPress = ()=> sound_ui.play(0,.3,2);
70
+ scrollbar.onRelease = ()=> sound_ui.play(0,.3,4);
71
+
65
72
  // example button
66
- const button1 = new UIButton(vec2(0,90), vec2(350, 70), 'Test Button', RED, 6, CYAN);
73
+ const button1 = new UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
67
74
  uiMenu.addChild(button1);
68
- button1.onClick = ()=>
75
+ button1.onPress = ()=>
69
76
  {
70
77
  console.log('Button 1 clicked');
71
- sound_click.play();
78
+ sound_ui.play();
72
79
  }
73
80
 
74
81
  // exit button
75
- const button2 = new UIButton(vec2(0,190), vec2(350, 70), 'Exit Menu', RED, 6, CYAN);
82
+ const button2 = new UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
76
83
  uiMenu.addChild(button2);
77
- button2.onClick = ()=>
84
+ button2.onPress = ()=>
78
85
  {
79
86
  console.log('Button 2 clicked');
80
- sound_click.play(0,.5,2);
87
+ sound_ui.play(0,.5,2);
81
88
  setMenuVisible(false);
82
89
  }
83
90
  }
@@ -7,19 +7,8 @@
7
7
  </head><body>
8
8
 
9
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>
10
+ <script src=../../dist/littlejs.js?1105></script>
22
11
 
23
12
  <!-- Add your game scripts here -->
24
- <script src=../../plugins/uiSystem.js?1100></script>
25
- <script src=game.js?1100></script>
13
+ <script src=../../plugins/uiSystem.js?1105></script>
14
+ <script src=game.js?1105></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.10.4",
3
+ "version": "1.10.7",
4
4
  "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
5
5
  "main": "dist/littlejs.esm.js",
6
6
  "types": "dist/littlejs.d.ts",
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * LittleJS Post Processing Plugin
3
3
  * - Supports shadertoy style post processing shaders
4
- * - call glInitPostProcess
4
+ * - call initPostProcess to set it up
5
5
  */
6
6
 
7
7
  'use strict';
@@ -98,11 +98,4 @@ function initPostProcess(shaderCode, includeOverlay=false)
98
98
  glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
99
99
  glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
100
100
  }
101
- }
102
-
103
- export {
104
- initPostProcess,
105
- glPostShader,
106
- glPostTexture,
107
- glPostIncludeOverlay
108
- };
101
+ }