littlejsengine 1.11.6 → 1.11.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 (54) hide show
  1. package/README.md +11 -16
  2. package/dist/littlejs.d.ts +14 -1
  3. package/dist/littlejs.esm.js +30 -19
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +27 -19
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +23 -18
  8. package/examples/box2d/game.js +2 -2
  9. package/examples/box2d/index.html +5 -5
  10. package/examples/breakout/game.js +6 -5
  11. package/examples/breakout/index.html +4 -4
  12. package/examples/breakoutTutorial/index.html +2 -2
  13. package/examples/htmlMenu/index.html +2 -2
  14. package/examples/index.html +300 -32
  15. package/examples/module/index.html +1 -1
  16. package/examples/particles/index.html +1 -1
  17. package/examples/platformer/gamePlayer.js +2 -7
  18. package/examples/platformer/index.html +8 -8
  19. package/examples/puzzle/index.html +2 -2
  20. package/examples/shorts/base.html +26 -0
  21. package/{shortExamples/code → examples/shorts}/blending.js +1 -1
  22. package/examples/shorts/platformer.js +42 -0
  23. package/{shortExamples/code → examples/shorts}/playSound.js +3 -0
  24. package/{shortExamples/code → examples/shorts}/pong.js +3 -3
  25. package/examples/shorts/tiltedView.js +44 -0
  26. package/{shortExamples/code → examples/shorts}/timers.js +7 -3
  27. package/examples/shorts/topDown.js +44 -0
  28. package/examples/starter/index.html +13 -13
  29. package/examples/stress/index.html +2 -2
  30. package/examples/uiSystem/game.js +6 -1
  31. package/examples/uiSystem/index.html +3 -3
  32. package/package.json +1 -1
  33. package/plugins/Box2D_License.txt +17 -0
  34. package/plugins/uiSystem.js +2 -1
  35. package/reference.md +2 -1
  36. package/src/engine.js +1 -1
  37. package/src/engineDebug.js +5 -1
  38. package/src/engineExport.js +3 -0
  39. package/src/engineInput.js +19 -15
  40. package/src/engineRelease.js +1 -0
  41. package/src/engineTileLayer.js +2 -2
  42. package/shortExamples/base.html +0 -39
  43. package/shortExamples/index.html +0 -246
  44. /package/{shortExamples/code → examples/shorts}/animation.js +0 -0
  45. /package/{shortExamples/code → examples/shorts}/clock.js +0 -0
  46. /package/{shortExamples/code → examples/shorts}/colors.js +0 -0
  47. /package/{shortExamples/code → examples/shorts}/helloWorld.js +0 -0
  48. /package/{shortExamples/code → examples/shorts}/particles.js +0 -0
  49. /package/{shortExamples/code → examples/shorts}/shapes.js +0 -0
  50. /package/{shortExamples/code → examples/shorts}/spriteAtlas.js +0 -0
  51. /package/{shortExamples/code → examples/shorts}/systemFont.js +0 -0
  52. /package/{shortExamples/code → examples/shorts}/texture.js +0 -0
  53. /package/{shortExamples/code → examples/shorts}/tileLayer.js +0 -0
  54. /package/{shortExamples → examples/shorts}/tiles.png +0 -0
@@ -7,7 +7,7 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.min.js?1116></script>
10
+ <script src=../../dist/littlejs.min.js?1117></script>
11
11
  <script>
12
12
 
13
13
  /*
@@ -161,6 +161,6 @@ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [ti
161
161
 
162
162
  ///////////////////////////////////////////////////////////////////////////////
163
163
  // music - Depp Loop
164
- const music = new Music([[[,0,77,,,.7,2,.41,,,,,,,,.06],[,0,43,.01,,.3,2,,,,,,,,,.02,.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]]);
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
165
 
166
166
  </script>
@@ -17,11 +17,15 @@ let uiRoot, uiMenu;
17
17
  const getMenuVisible =()=> uiMenu.visible;
18
18
  const setMenuVisible =(visible)=> uiMenu.visible = visible;
19
19
 
20
+ // use a fixed size canvas
21
+ canvasFixedSize = vec2(1920, 1080); // 1080p
22
+ canvasPixelated = false;
23
+
20
24
  function createUI()
21
25
  {
22
26
  // setup root to attach all ui elements to
23
27
  uiRoot = new UIObject();
24
- const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70),
28
+ const uiInfo = new UIText(vec2(0,90), vec2(1e3, 70),
25
29
  'LittleJS UI System Example\nM = Toggle menu');
26
30
  uiInfo.textColor = WHITE;
27
31
  uiInfo.lineWidth = 8;
@@ -31,6 +35,7 @@ function createUI()
31
35
  uiMenu = new UIObject(vec2(0,450));
32
36
  uiRoot.addChild(uiMenu);
33
37
  const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
38
+ uiBackground.lineWidth = 8;
34
39
  uiMenu.addChild(uiBackground);
35
40
 
36
41
  // example large text
@@ -7,8 +7,8 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1116></script>
10
+ <script src=../../dist/littlejs.js?1117></script>
11
11
 
12
12
  <!-- Add your game scripts here -->
13
- <script src=../../plugins/uiSystem.js?1116></script>
14
- <script src=game.js?1116></script>
13
+ <script src=../../plugins/uiSystem.js?1117></script>
14
+ <script src=game.js?1117></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.11.6",
3
+ "version": "1.11.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",
@@ -0,0 +1,17 @@
1
+ Copyright (c) 2006-2010 Erin Catto http://www.gphysics.com
2
+
3
+ This software is provided 'as-is', without any express or implied
4
+ warranty. In no event will the authors be held liable for any damages
5
+ arising from the use of this software.
6
+
7
+ Permission is granted to anyone to use this software for any purpose,
8
+ including commercial applications, and to alter it and redistribute it
9
+ freely, subject to the following restrictions:
10
+
11
+ 1. The origin of this software must not be misrepresented; you must not
12
+ claim that you wrote the original software. If you use this software
13
+ in a product, an acknowledgment in the product documentation would be
14
+ appreciated but is not required.
15
+ 2. Altered source versions must be plainly marked as such, and must not be
16
+ misrepresented as being the original software.
17
+ 3. This notice may not be removed or altered from any source distribution.
@@ -246,7 +246,8 @@ class UICheckbox extends UIObject
246
246
  }
247
247
  render()
248
248
  {
249
- drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
249
+ const color = this.mouseIsOver? this.hoverColor : this.color;
250
+ drawUIRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
250
251
  if (this.checked)
251
252
  {
252
253
  // draw an X if checked
package/reference.md CHANGED
@@ -224,6 +224,7 @@ soundDefaultTaper = .7 // Default range percent to taper off sound (0-1)
224
224
  keyIsDown(key) // Is key down?
225
225
  keyWasPressed(key) // Was key pressed this frame?
226
226
  keyWasReleased(key) // Was key released this frame?
227
+ keyDirection() // Get input vector from arrow keys or wasd
227
228
 
228
229
  // Mouse / Touch
229
230
  mousePos // World space mouse position
@@ -406,4 +407,4 @@ showWatermark // True if watermark with FPS should be show
406
407
 
407
408
  [LittleJS Engine](https://github.com/KilledByAPixel/LittleJS) Copyright 2021 Frank Force
408
409
 
409
- ![LittleJS Logo](examples/favicon.png)
410
+ ![LittleJS Logo](examples/favicon.png)
package/src/engine.js CHANGED
@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
30
30
  * @type {String}
31
31
  * @default
32
32
  * @memberof Engine */
33
- const engineVersion = '1.11.6';
33
+ const engineVersion = '1.11.7';
34
34
 
35
35
  /** Frames per second to update
36
36
  * @type {Number}
@@ -162,6 +162,10 @@ function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monos
162
162
  * @memberof Debug */
163
163
  function debugClear() { debugPrimitives = []; }
164
164
 
165
+ /** Trigger debug system to take a screenshot
166
+ * @memberof Debug */
167
+ function debugScreenshot() { debugTakeScreenshot = 1; }
168
+
165
169
  /** Save a canvas to disk
166
170
  * @param {HTMLCanvasElement} canvas
167
171
  * @param {String} [filename]
@@ -235,7 +239,7 @@ function debugUpdate()
235
239
  if (keyWasPressed('Digit4'))
236
240
  debugRaycast = !debugRaycast;
237
241
  if (keyWasPressed('Digit5'))
238
- debugTakeScreenshot = 1;
242
+ debugScreenshot();
239
243
  }
240
244
  }
241
245
 
@@ -19,6 +19,7 @@ export {
19
19
  engineInit,
20
20
  engineObjectsUpdate,
21
21
  engineObjectsDestroy,
22
+ engineObjectsCollect,
22
23
  engineObjectsCallback,
23
24
  engineObjectsRaycast,
24
25
  engineAddPlugin,
@@ -38,6 +39,7 @@ export {
38
39
  debugOverlap,
39
40
  debugText,
40
41
  debugClear,
42
+ debugScreenshot,
41
43
  debugSaveCanvas,
42
44
  debugSaveText,
43
45
  debugSaveDataURL,
@@ -236,6 +238,7 @@ export {
236
238
  keyIsDown,
237
239
  keyWasPressed,
238
240
  keyWasReleased,
241
+ keyDirection,
239
242
  clearInput,
240
243
  mouseIsDown,
241
244
  mouseWasPressed,
@@ -43,6 +43,15 @@ function keyWasReleased(key, device=0)
43
43
  return inputData[device] && !!(inputData[device][key] & 4);
44
44
  }
45
45
 
46
+ /** Returns input vector from arrow keys or WASD if enabled
47
+ * @return {Vector2}
48
+ * @memberof Input */
49
+ function keyDirection(up='ArrowUp', down='ArrowDown', left='ArrowLeft', right='ArrowRight')
50
+ {
51
+ const k = (key)=> keyIsDown(key) ? 1 : 0;
52
+ return vec2(k(right) - k(left), k(up) - k(down));
53
+ }
54
+
46
55
  /** Clears all input
47
56
  * @memberof Input */
48
57
  function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
@@ -126,9 +135,9 @@ function gamepadStick(stick, gamepad=0)
126
135
  { return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
127
136
 
128
137
  ///////////////////////////////////////////////////////////////////////////////
129
- // Input update called by engine
138
+ // Input system functions called automatically by engine
130
139
 
131
- // store input as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
140
+ // input is stored as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
132
141
  // mouse and keyboard are stored together in device 0, gamepads are in devices > 0
133
142
  let inputData = [[]];
134
143
 
@@ -158,9 +167,6 @@ function inputUpdatePost()
158
167
  mouseWheel = 0;
159
168
  }
160
169
 
161
- ///////////////////////////////////////////////////////////////////////////////
162
- // Input event handlers
163
-
164
170
  function inputInit()
165
171
  {
166
172
  if (headlessMode) return;
@@ -203,11 +209,11 @@ function inputInit()
203
209
 
204
210
  isUsingGamepad = false;
205
211
  inputData[0][e.button] = 3;
206
- mousePosScreen = mouseToScreen(e);
212
+ mousePosScreen = mouseEventToScreen(e);
207
213
  e.button && e.preventDefault();
208
214
  }
209
215
  onmouseup = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
210
- onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
216
+ onmousemove = (e)=> mousePosScreen = mouseEventToScreen(e);
211
217
  onwheel = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
212
218
  oncontextmenu = (e)=> false; // prevent right click menu
213
219
  onblur = (e) => clearInput(); // reset input when focus is lost
@@ -218,14 +224,12 @@ function inputInit()
218
224
  }
219
225
 
220
226
  // convert a mouse or touch event position to screen space
221
- function mouseToScreen(mousePos)
227
+ function mouseEventToScreen(mousePos)
222
228
  {
223
- if (!mainCanvas || headlessMode)
224
- return vec2(); // fix bug that can occur if user clicks before page loads
225
-
226
229
  const rect = mainCanvas.getBoundingClientRect();
227
- return vec2(mainCanvas.width, mainCanvas.height).multiply(
228
- vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
230
+ const px = percent(mousePos.x, rect.left, rect.right);
231
+ const py = percent(mousePos.y, rect.top, rect.bottom);
232
+ return vec2(px*mainCanvas.width, py*mainCanvas.height);
229
233
  }
230
234
 
231
235
  ///////////////////////////////////////////////////////////////////////////////
@@ -380,7 +384,7 @@ function touchInputInit()
380
384
  {
381
385
  // set event pos and pass it along
382
386
  const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
383
- mousePosScreen = mouseToScreen(p);
387
+ mousePosScreen = mouseEventToScreen(p);
384
388
  wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
385
389
  }
386
390
  else if (wasTouching)
@@ -428,7 +432,7 @@ function touchInputInit()
428
432
  // check each touch point
429
433
  for (const touch of e.touches)
430
434
  {
431
- const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
435
+ const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
432
436
  if (touchPos.distance(stickCenter) < touchGamepadSize)
433
437
  {
434
438
  // virtual analog stick
@@ -29,6 +29,7 @@ function debugLine (){}
29
29
  function debugOverlap (){}
30
30
  function debugText (){}
31
31
  function debugClear (){}
32
+ function debugScreenshot (){}
32
33
  function debugSaveCanvas (){}
33
34
  function debugSaveText (){}
34
35
  function debugSaveDataURL(){}
@@ -238,10 +238,10 @@ class TileLayer extends EngineObject
238
238
  !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
239
239
 
240
240
  // draw the entire cached level onto the canvas
241
- const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
241
+ let pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
242
242
 
243
243
  // fix canvas jitter in some browsers if position is not an integer
244
- pos.x |= 0; pos.y |= 0;
244
+ pos = pos.floor();
245
245
 
246
246
  (this.isOverlay ? overlayContext : mainContext).drawImage
247
247
  (
@@ -1,39 +0,0 @@
1
- <!DOCTYPE html><head><meta charset=utf-8></head><body>
2
-
3
- <!-- LittleJS Engine -->
4
- <script src=../src/engineDebug.js?1116></script>
5
- <script src=../src/engineUtilities.js?1116></script>
6
- <script src=../src/engineSettings.js?1116></script>
7
- <script src=../src/engineObject.js?1116></script>
8
- <script src=../src/engineDraw.js?1116></script>
9
- <script src=../src/engineInput.js?1116></script>
10
- <script src=../src/engineAudio.js?1116></script>
11
- <script src=../src/engineTileLayer.js?1116></script>
12
- <script src=../src/engineParticles.js?1116></script>
13
- <script src=../src/engineMedals.js?1116></script>
14
- <script src=../src/engineWebGL.js?1116></script>
15
- <script src=../src/engine.js?1116></script>
16
- <script>
17
-
18
- 'use strict';
19
-
20
- // use fixed size canvas for examples
21
- canvasFixedSize = vec2(960, 540);
22
-
23
- // fix bleeding from neighboring pixels
24
- tileFixBleedScale = .5;
25
-
26
- // allow improved scaling
27
- canvasPixelated = false;
28
-
29
- // disable watermark
30
- showWatermark = false;
31
-
32
- // these functions can be overridden for each example
33
- function gameInit() {}
34
- function gameUpdate() {}
35
- function gameUpdatePost() {}
36
- function gameRender() {}
37
- function gameRenderPost() {}
38
-
39
- </script>
@@ -1,246 +0,0 @@
1
- <!DOCTYPE html><head>
2
- <title>LittleJS Short Examples</title>
3
- <link rel=icon href=../examples/favicon.png>
4
- <meta charset=utf-8>
5
- <style>
6
- html, body
7
- {
8
- height: 100%;
9
- display: flex;
10
- flex-direction: column;
11
- }
12
- #container1
13
- {
14
- height: 100%;
15
- display: flex;
16
- }
17
- #container2
18
- {
19
- display: flex;
20
- flex-direction: column;
21
- }
22
- #iframeContainer
23
- {
24
- border: 2px solid;
25
- background: #000;
26
- }
27
- iframe
28
- {
29
- width: 100%;
30
- height: 100%;
31
- border: none;
32
- }
33
- #selectExample
34
- {
35
- flex-grow: 1;
36
- }
37
- #textareaCode
38
- {
39
- flex-grow: 1;
40
- padding: 5px;
41
- resize: none;
42
- color: #fff;
43
- background: #000;
44
- }
45
- #textareaError
46
- {
47
- flex-grow: .3;
48
- padding: 5px;
49
- resize: none;
50
- display: none;
51
- color:#f22;
52
- background: #111;
53
- }
54
- #container3
55
- {
56
- width: 100%;
57
- height: 100%;
58
- display: flex;
59
- flex-direction: column;
60
- }
61
- #titleInfo
62
- {
63
- margin: 5px;
64
- text-align: center;
65
- font-size: 50px;
66
- }
67
- #exampleName
68
- {
69
- margin: 0px;
70
- text-align: center;
71
- font-size: 30px;
72
- }
73
- select
74
- {
75
- color:#fff;
76
- background-color: #111;
77
- width:100%;
78
- }
79
- </style>
80
- </head><body>
81
- <div id=container1>
82
- <div id=container3>
83
- <p id=titleInfo>LittleJS Short Examples</p>
84
- <p id=exampleName></p>
85
- <textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
86
- <textarea id=textareaError readonly spellcheck=false></textarea>
87
- <div><input type=checkbox id=checkboxLiveEdit checked>Live Edit</div>
88
- </div>
89
- <div id=container2>
90
- <div id=iframeContainer></div>
91
- <select id=selectExample autofocus onchange=setExample() size=2></select>
92
- </div>
93
- </div>
94
- <script>
95
- 'use strict';
96
-
97
- class ExampleInfo
98
- {
99
- constructor(name, filename, description)
100
- {
101
- this.name = name;
102
- this.filename = filename;
103
- this.description = description;
104
- }
105
- }
106
-
107
- const exampleList =
108
- [
109
- new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
110
- new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
111
- new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
112
- new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
113
- new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
114
- new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
115
- new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
116
- new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
117
- new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
118
- new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
119
- new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
120
- new ExampleInfo('Clock', 'clock.js', 'A simple clock showing the time'),
121
- new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use a tile layer for collision and rendering'),
122
- new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game using LittleJS physics'),
123
-
124
- // add more examples here!
125
- ];
126
-
127
- ///////////////////////////////////////////////////////////////////////////////
128
-
129
- let iframeExample, inputTimeout;
130
-
131
- // load the examples into the list
132
- for (const example of exampleList)
133
- {
134
- const text = example.name + (example.description?' - ' + example.description : '');
135
- selectExample.add(new Option(text));
136
- }
137
-
138
- // select first option
139
- selectExample.selectedIndex = 0;
140
- setExample();
141
-
142
- onresize = () =>
143
- {
144
- // resize iframe to fit half the window
145
- const aspect = 1920 / 1080;
146
- let w = innerWidth / 2 | 0;
147
- let h = w / aspect | 0;
148
- iframeContainer.style.width = w + 'px';
149
- iframeContainer.style.height = h + 'px';
150
- }
151
- onresize();
152
-
153
- ///////////////////////////////////////////////////////////////////////////////
154
-
155
- function setExample()
156
- {
157
- const example = exampleList[selectExample.selectedIndex];
158
- exampleName.innerText = example.name + ' - ' + example.filename +
159
- (example.description ? '\n' + example.description : '');
160
- loadFile(example.filename);
161
- }
162
-
163
- function codeInput()
164
- {
165
- if (!checkboxLiveEdit.checked)
166
- return;
167
-
168
- // debounce input
169
- clearTimeout(inputTimeout);
170
- inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
171
- }
172
-
173
- function loadFile(filename)
174
- {
175
- fetch('code/' + filename)
176
- .then(response => {
177
- if (!response.ok)
178
- throw new Error('Could not load file: '+filename);
179
- return response.text();
180
- })
181
- .then(text => setCode(textareaCode.value = text))
182
- .catch(error => setErrorMessage(error.message));
183
- }
184
-
185
- function setCode(code)
186
- {
187
- clearTimeout(inputTimeout);
188
- if (iframeExample)
189
- iframeContainer.removeChild(iframeExample);
190
-
191
- setErrorMessage('');
192
- iframeExample = document.createElement('iframe');
193
- iframeContainer.appendChild(iframeExample);
194
- iframeExample.onload = () =>
195
- {
196
- const iframeContent = iframeExample.contentWindow;
197
- const iframeDocument = iframeContent.document;
198
-
199
- // create error event listeners
200
- iframeContent.onerror = (message, source, lineno, colno, error) =>
201
- {
202
- let text = message;
203
- if (lineno)
204
- text += ` (Line:${lineno}, Column:${colno})`
205
- if (error && error.stack)
206
- text += `\n\n` + error.stack;
207
- setErrorMessage(text);
208
- }
209
- iframeContent.onunhandledrejection = (event) =>
210
- {
211
- let text = event.reason;
212
- if (event.reason.stack)
213
- text += `\n\n` + event.reason.stack;
214
- setErrorMessage(text);
215
- };
216
- const originalAssert = iframeContent.console.assert;
217
- iframeContent.console.assert = function (condition, output)
218
- {
219
- if (!condition)
220
- setErrorMessage('Assertion failed: ' + (output || ''));
221
- originalAssert.apply(this, arguments);
222
- };
223
-
224
- // create a script element that overrides the default functions
225
- const overrideScript = iframeDocument.createElement('script');
226
- iframeDocument.body.appendChild(overrideScript);
227
- overrideScript.text = code;
228
-
229
- if (textareaError.style.display == 'block')
230
- return; // stop if script error
231
-
232
- // start LittleJS engine
233
- iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?1']);
234
- }
235
- iframeExample.src = 'base.html';
236
- }
237
-
238
- function setErrorMessage(message)
239
- {
240
- textareaError.value = message
241
- textareaError.style.display = message ? 'block' : 'none';
242
- }
243
-
244
- </script>
245
- </body>
246
- </html>
File without changes