littlejsengine 1.11.5 → 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 (66) hide show
  1. package/README.md +11 -16
  2. package/dist/littlejs.d.ts +14 -1
  3. package/dist/littlejs.esm.js +40 -26
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +37 -26
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +33 -25
  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/gameObjects.js +1 -1
  12. package/examples/breakout/index.html +4 -4
  13. package/examples/breakoutTutorial/README.md +1 -1
  14. package/examples/breakoutTutorial/game.js +1 -1
  15. package/examples/breakoutTutorial/index.html +2 -2
  16. package/examples/htmlMenu/index.html +2 -2
  17. package/examples/index.html +300 -32
  18. package/examples/module/index.html +1 -1
  19. package/examples/particles/index.html +1 -1
  20. package/examples/platformer/gamePlayer.js +2 -7
  21. package/examples/platformer/index.html +8 -8
  22. package/examples/puzzle/index.html +2 -2
  23. package/examples/shorts/animation.js +18 -0
  24. package/examples/shorts/base.html +26 -0
  25. package/examples/shorts/blending.js +16 -0
  26. package/examples/shorts/clock.js +21 -0
  27. package/examples/shorts/colors.js +25 -0
  28. package/examples/shorts/helloWorld.js +8 -0
  29. package/examples/shorts/platformer.js +42 -0
  30. package/{shortExamples/code → examples/shorts}/playSound.js +4 -3
  31. package/{shortExamples/code → examples/shorts}/pong.js +3 -3
  32. package/{shortExamples/code → examples/shorts}/shapes.js +1 -1
  33. package/examples/shorts/spriteAtlas.js +34 -0
  34. package/examples/shorts/systemFont.js +16 -0
  35. package/{shortExamples/code → examples/shorts}/tileLayer.js +1 -1
  36. package/examples/shorts/tiles.png +0 -0
  37. package/examples/shorts/tiltedView.js +44 -0
  38. package/examples/shorts/timers.js +40 -0
  39. package/examples/shorts/topDown.js +44 -0
  40. package/examples/starter/game.js +3 -3
  41. package/examples/starter/index.html +13 -13
  42. package/examples/stress/index.html +2 -2
  43. package/examples/uiSystem/game.js +6 -1
  44. package/examples/uiSystem/index.html +3 -3
  45. package/package.json +1 -1
  46. package/plugins/Box2D_License.txt +17 -0
  47. package/plugins/uiSystem.js +2 -1
  48. package/reference.md +2 -1
  49. package/src/engine.js +1 -1
  50. package/src/engineDebug.js +5 -1
  51. package/src/engineDraw.js +4 -1
  52. package/src/engineExport.js +3 -0
  53. package/src/engineInput.js +19 -15
  54. package/src/engineObject.js +4 -4
  55. package/src/engineRelease.js +1 -0
  56. package/src/engineTileLayer.js +2 -2
  57. package/src/engineUtilities.js +2 -2
  58. package/shortExamples/base.html +0 -36
  59. package/shortExamples/code/blending.js +0 -12
  60. package/shortExamples/code/helloWorld.js +0 -7
  61. package/shortExamples/code/spriteAtlas.js +0 -27
  62. package/shortExamples/code/systemFont.js +0 -14
  63. package/shortExamples/index.html +0 -242
  64. package/shortExamples/tiles.png +0 -0
  65. /package/{shortExamples/code → examples/shorts}/particles.js +0 -0
  66. /package/{shortExamples/code → examples/shorts}/texture.js +0 -0
package/src/engineRelease.js CHANGED
@@ -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(){}
package/src/engineTileLayer.js CHANGED
@@ -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
  (
package/src/engineUtilities.js CHANGED
@@ -482,7 +482,7 @@ class Vector2
482
482
  rotate(angle)
483
483
  {
484
484
  const c = Math.cos(angle), s = Math.sin(angle);
485
- return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
485
+ return new Vector2(this.x*c + this.y*s, this.x*s + this.y*c);
486
486
  }
487
487
 
488
488
  /** Set the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
@@ -914,7 +914,7 @@ class Timer
914
914
 
915
915
  /** Get percentage elapsed based on time it was set to, returns 0 if not set
916
916
  * @return {Number} */
917
- getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
917
+ getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
918
918
 
919
919
  /** Returns this timer expressed as a string
920
920
  * @return {String} */
package/shortExamples/base.html DELETED
@@ -1,36 +0,0 @@
1
- <!DOCTYPE html><head><meta charset=utf-8></head><body>
2
-
3
- <!-- LittleJS Engine -->
4
- <script src=../src/engineDebug.js?1105></script>
5
- <script src=../src/engineUtilities.js?1105></script>
6
- <script src=../src/engineSettings.js?1105></script>
7
- <script src=../src/engineObject.js?1105></script>
8
- <script src=../src/engineDraw.js?1105></script>
9
- <script src=../src/engineInput.js?1105></script>
10
- <script src=../src/engineAudio.js?1105></script>
11
- <script src=../src/engineTileLayer.js?1105></script>
12
- <script src=../src/engineParticles.js?1105></script>
13
- <script src=../src/engineMedals.js?1105></script>
14
- <script src=../src/engineWebGL.js?1105></script>
15
- <script src=../src/engine.js?1105></script>\
16
- <script>
17
-
18
- 'use strict';
19
-
20
- // use fixed size canvas for examples
21
- canvasFixedSize = vec2(960, 540);
22
-
23
- // allow improved scaling
24
- canvasPixelated = false;
25
-
26
- // disable watermark
27
- showWatermark = false;
28
-
29
- // these functions can be overridden for each example
30
- function gameInit() {}
31
- function gameUpdate() {}
32
- function gameUpdatePost() {}
33
- function gameRender() {}
34
- function gameRenderPost() {}
35
-
36
- </script>
package/shortExamples/code/blending.js DELETED
@@ -1,12 +0,0 @@
1
- function gameRender()
2
- {
3
- // additive blend
4
- setBlendMode(1);
5
- drawTile(vec2(1, 3), vec2(6), tile(0), rgb(1,0,0));
6
- drawTile(vec2(-1,3), vec2(6), tile(0), rgb(0,0,1));
7
-
8
- // alpha blend
9
- setBlendMode(0);
10
- drawTile(vec2(1, -3), vec2(6), tile(0), rgb(1,0,0,.5));
11
- drawTile(vec2(-1,-3), vec2(6), tile(0), rgb(0,0,1,.5));
12
- }
package/shortExamples/code/helloWorld.js DELETED
@@ -1,7 +0,0 @@
1
- function gameRender()
2
- {
3
- // draw to overlay canvas
4
- drawTextScreen('Hello World',
5
- mainCanvasSize.scale(.5), 80, // position, size
6
- hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
7
- }
package/shortExamples/code/spriteAtlas.js DELETED
@@ -1,27 +0,0 @@
1
- let spriteAtlas;
2
-
3
- function gameInit()
4
- {
5
- // create a table of all sprites
6
- const gameTile = (i, size=16)=> tile(i, size);
7
- spriteAtlas =
8
- {
9
- circle: gameTile(0),
10
- crate: gameTile(1),
11
- icon: gameTile(2),
12
- largeIcon: gameTile(vec2(1,1),128),
13
- };
14
- }
15
-
16
- function gameRender()
17
- {
18
- drawRect(vec2(0,0), vec2(100), GRAY); // draw background
19
-
20
- // draw a sprite from the atlas
21
- let pos = vec2(0,0); // world position to draw
22
- let angle = 0; // world space angle to draw the tile
23
- let size = vec2(15); // world size of the tile
24
- let mirror = 0; // should tile be mirrored?
25
- let color = hsl(0,0,1); // color to multiply the tile by
26
- drawTile(pos, size, spriteAtlas.largeIcon, color, angle, mirror);
27
- }
package/shortExamples/code/systemFont.js DELETED
@@ -1,14 +0,0 @@
1
- function gameRender()
2
- {
3
- const font = new FontImage;
4
- font.drawText('System Font Test ', cameraPos.add(vec2(0,3)), .2, true);
5
-
6
- for(let j=1; j<4; j++)
7
- {
8
- let s = '';
9
- for(let i=0; i<32; ++i)
10
- s += String.fromCharCode(32*j + i);
11
- font.drawText(s, cameraPos.add(vec2(0,1-j)), .1, true);
12
- }
13
- }
14
-
package/shortExamples/index.html DELETED
@@ -1,242 +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: 1;
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('Blending', 'blending.js', 'Shows different blending modes'),
112
- new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
113
- new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
114
- new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
115
- new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
116
- new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
117
- new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use a tile layer for collision and rendering'),
118
- new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game using LittleJS physics'),
119
-
120
- // add more examples here!
121
- ];
122
-
123
- ///////////////////////////////////////////////////////////////////////////////
124
-
125
- let iframeExample, inputTimeout;
126
-
127
- // load the examples into the list
128
- for (const example of exampleList)
129
- {
130
- const text = example.name + (example.description?' - ' + example.description : '');
131
- selectExample.add(new Option(text));
132
- }
133
-
134
- // select first option
135
- selectExample.selectedIndex = 0;
136
- setExample();
137
-
138
- onresize = () =>
139
- {
140
- // resize iframe to fit half the window
141
- const aspect = 1920 / 1080;
142
- let w = innerWidth / 2 | 0;
143
- let h = w / aspect | 0;
144
- iframeContainer.style.width = w + 'px';
145
- iframeContainer.style.height = h + 'px';
146
- }
147
- onresize();
148
-
149
- ///////////////////////////////////////////////////////////////////////////////
150
-
151
- function setExample()
152
- {
153
- const example = exampleList[selectExample.selectedIndex];
154
- exampleName.innerText = example.name + ' - ' + example.filename +
155
- (example.description ? '\n' + example.description : '');
156
- loadFile(example.filename);
157
- }
158
-
159
- function codeInput()
160
- {
161
- if (!checkboxLiveEdit.checked)
162
- return;
163
-
164
- // debounce input
165
- clearTimeout(inputTimeout);
166
- inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
167
- }
168
-
169
- function loadFile(filename)
170
- {
171
- fetch('code/' + filename)
172
- .then(response => {
173
- if (!response.ok)
174
- throw new Error('Could not load file: '+filename);
175
- return response.text();
176
- })
177
- .then(text => setCode(textareaCode.value = text))
178
- .catch(error => setErrorMessage(error.message));
179
- }
180
-
181
- function setCode(code)
182
- {
183
- clearTimeout(inputTimeout);
184
- if (iframeExample)
185
- iframeContainer.removeChild(iframeExample);
186
-
187
- setErrorMessage('');
188
- iframeExample = document.createElement('iframe');
189
- iframeContainer.appendChild(iframeExample);
190
- iframeExample.onload = () =>
191
- {
192
- const iframeContent = iframeExample.contentWindow;
193
- const iframeDocument = iframeContent.document;
194
-
195
- // create error event listeners
196
- iframeContent.onerror = (message, source, lineno, colno, error) =>
197
- {
198
- let text = message;
199
- if (lineno)
200
- text += ` (Line:${lineno}, Column:${colno})`
201
- if (error && error.stack)
202
- text += `\n\n` + error.stack;
203
- setErrorMessage(text);
204
- }
205
- iframeContent.onunhandledrejection = (event) =>
206
- {
207
- let text = event.reason;
208
- if (event.reason.stack)
209
- text += `\n\n` + event.reason.stack;
210
- setErrorMessage(text);
211
- };
212
- const originalAssert = iframeContent.console.assert;
213
- iframeContent.console.assert = function (condition, output)
214
- {
215
- if (!condition)
216
- setErrorMessage('Assertion failed: ' + (output || ''));
217
- originalAssert.apply(this, arguments);
218
- };
219
-
220
- // create a script element that overrides the default functions
221
- const overrideScript = iframeDocument.createElement('script');
222
- iframeDocument.body.appendChild(overrideScript);
223
- overrideScript.text = code;
224
-
225
- if (textareaError.style.display == 'block')
226
- return; // stop if script error
227
-
228
- // start LittleJS engine
229
- iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png']);
230
- }
231
- iframeExample.src = 'base.html';
232
- }
233
-
234
- function setErrorMessage(message)
235
- {
236
- textareaError.value = message
237
- textareaError.style.display = message ? 'block' : 'none';
238
- }
239
-
240
- </script>
241
- </body>
242
- </html>
package/shortExamples/tiles.png DELETED
Binary file