littlejsengine 1.8.1 → 1.8.3

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.
@@ -7,18 +7,18 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../src/engineDebug.js?181></script>
11
- <script src=../../src/engineUtilities.js?181></script>
12
- <script src=../../src/engineSettings.js?181></script>
13
- <script src=../../src/engineObject.js?181></script>
14
- <script src=../../src/engineDraw.js?181></script>
15
- <script src=../../src/engineInput.js?181></script>
16
- <script src=../../src/engineAudio.js?181></script>
17
- <script src=../../src/engineTileLayer.js?181></script>
18
- <script src=../../src/engineParticles.js?181></script>
19
- <script src=../../src/engineMedals.js?181></script>
20
- <script src=../../src/engineWebGL.js?181></script>
21
- <script src=../../src/engine.js?181></script>
10
+ <script src=../../src/engineDebug.js?183></script>
11
+ <script src=../../src/engineUtilities.js?183></script>
12
+ <script src=../../src/engineSettings.js?183></script>
13
+ <script src=../../src/engineObject.js?183></script>
14
+ <script src=../../src/engineDraw.js?183></script>
15
+ <script src=../../src/engineInput.js?183></script>
16
+ <script src=../../src/engineAudio.js?183></script>
17
+ <script src=../../src/engineTileLayer.js?183></script>
18
+ <script src=../../src/engineParticles.js?183></script>
19
+ <script src=../../src/engineMedals.js?183></script>
20
+ <script src=../../src/engineWebGL.js?183></script>
21
+ <script src=../../src/engine.js?183></script>
22
22
 
23
23
  <!-- Add your game scripts here -->
24
- <script src=game.js?181></script>
24
+ <script src=game.js?183></script>
@@ -6,7 +6,8 @@
6
6
  <link rel=icon type=image/png href=../favicon.png>
7
7
  </head><body>
8
8
 
9
- <script src=../../build/littlejs.min.js?181></script>
9
+ <!-- LittleJS Engine -->
10
+ <script src=../../build/littlejs.min.js?183></script>
10
11
  <script>
11
12
 
12
13
  /*
@@ -27,8 +28,7 @@ class TestObject extends EngineObject
27
28
  {
28
29
  constructor(pos)
29
30
  {
30
- super(pos, vec2(1), 0, vec2(16), 0, spriteColor);
31
-
31
+ super(pos, vec2(1), tile(0), 0, spriteColor);
32
32
  this.additiveColor = spriteAdditiveColor;
33
33
  this.setCollision();
34
34
  }
@@ -8,7 +8,7 @@
8
8
 
9
9
  // import module
10
10
  import * as LittleJS from '../../build/littlejs.esm.js';
11
- const {Vector2, Color, Timer, vec2} = LittleJS;
11
+ const {Vector2, Color, Timer, vec2, tile} = LittleJS;
12
12
 
13
13
  // sound effects
14
14
  const sound_click = new LittleJS.Sound([1,.5]);
@@ -7,4 +7,4 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- Add your game scripts here -->
10
- <script src=game.js?181 type=module></script>
10
+ <script src=game.js?183 type=module></script>
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.8.1",
3
+ "version": "1.8.3",
4
4
  "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
5
5
  "main": "build/littlejs.esm.js",
6
+ "types": "build/littlejs.esm.js",
6
7
  "repository": {
7
8
  "type": "git",
8
9
  "url": "git+https://github.com/KilledByAPixel/LittleJS.git"
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.8.1';
33
+ const engineVersion = '1.8.3';
34
34
 
35
35
  /** Frames per second to update objects
36
36
  * @type {Number}
@@ -91,7 +91,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
91
91
  * @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
92
92
  * @param {Function} gameRender - Called before objects are rendered, draw any background effects that appear behind objects
93
93
  * @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
94
- * @param {String} [imageSources='tiles.png'] - Image to load
94
+ * @param {Array} [imageSources=['tiles.png']] - Image to load
95
95
  * @memberof Engine */
96
96
  function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
97
97
  {
@@ -45,7 +45,8 @@ class Sound
45
45
  if (zzfxSound)
46
46
  {
47
47
  // generate zzfx sound now for fast playback
48
- this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
48
+ this.randomness = zzfxSound[1];
49
+ zzfxSound[1] = 0; // generate without randomness
49
50
  this.sampleChannels = [zzfxG(...zzfxSound)];
50
51
  this.sampleRate = zzfxR;
51
52
  }
package/src/engineDraw.js CHANGED
@@ -188,16 +188,18 @@ function worldToScreen(worldPos)
188
188
  * @param {Color} [additiveColor=Color(0,0,0,0)] - Additive color to be applied
189
189
  * @param {Boolean} [useWebGL=glEnable] - Use accelerated WebGL rendering
190
190
  * @param {Boolean} [screenSpace=0] - If true the pos and size are in screen space
191
+ * @param {CanvasRenderingContext2D} [context] - Canvas 2D context to draw to
191
192
  * @memberof Draw */
192
193
  function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
193
- angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
194
+ angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
194
195
  {
196
+ ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
195
197
  ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
196
198
  // to fix old calls, replace with tile(tileIndex, tileSize)
197
199
 
198
200
  showWatermark && ++drawCount;
199
201
  const textureInfo = tileInfo && tileInfo.getTextureInfo();
200
- if (glEnable && useWebGL)
202
+ if (useWebGL)
201
203
  {
202
204
  if (screenSpace)
203
205
  {
@@ -248,7 +250,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
248
250
  context.fillStyle = color;
249
251
  context.fillRect(-.5, -.5, 1, 1);
250
252
  }
251
- }, undefined, screenSpace);
253
+ }, screenSpace, context);
252
254
  }
253
255
  }
254
256
 
@@ -259,28 +261,36 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
259
261
  * @param {Number} [angle=0]
260
262
  * @param {Boolean} [useWebGL=glEnable]
261
263
  * @param {Boolean} [screenSpace=0]
264
+ * @param {CanvasRenderingContext2D} [context]
262
265
  * @memberof Draw */
263
- function drawRect(pos, size, color, angle, useWebGL, screenSpace)
264
- { drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace); }
266
+ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
267
+ {
268
+ drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context);
269
+ }
265
270
 
266
271
  /** Draw colored polygon using passed in points
267
272
  * @param {Array} points - Array of Vector2 points
268
273
  * @param {Color} [color=Color()]
269
274
  * @param {Boolean} [useWebGL=glEnable]
270
275
  * @param {Boolean} [screenSpace=0]
276
+ * @param {CanvasRenderingContext2D} [context]
271
277
  * @memberof Draw */
272
- function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
278
+ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
273
279
  {
280
+ ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
281
+
274
282
  if (useWebGL)
275
283
  glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
276
284
  else
277
285
  {
278
286
  // draw using canvas
279
- mainContext.fillStyle = color;
280
- mainContext.beginPath();
287
+ if (!context)
288
+ context = mainContext;
289
+ context.fillStyle = color;
290
+ context.beginPath();
281
291
  for (const point of screenSpace ? points : points.map(worldToScreen))
282
- mainContext.lineTo(point.x, point.y);
283
- mainContext.fill();
292
+ context.lineTo(point.x, point.y);
293
+ context.fill();
284
294
  }
285
295
  }
286
296
 
@@ -291,12 +301,13 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
291
301
  * @param {Color} [color=Color()]
292
302
  * @param {Boolean} [useWebGL=glEnable]
293
303
  * @param {Boolean} [screenSpace=0]
304
+ * @param {CanvasRenderingContext2D} [context]
294
305
  * @memberof Draw */
295
- function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
306
+ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
296
307
  {
297
308
  const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
298
309
  const size = vec2(thickness, halfDelta.length()*2);
299
- drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
310
+ drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
300
311
  }
301
312
 
302
313
  /** Draw directly to a 2d canvas context in world space
@@ -305,10 +316,10 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
305
316
  * @param {Number} angle
306
317
  * @param {Boolean} mirror
307
318
  * @param {Function} drawFunction
308
- * @param {CanvasRenderingContext2D} [context=mainContext]
309
319
  * @param {Boolean} [screenSpace=0]
320
+ * @param {CanvasRenderingContext2D} [context=mainContext]
310
321
  * @memberof Draw */
311
- function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
322
+ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
312
323
  {
313
324
  if (!screenSpace)
314
325
  {
@@ -327,13 +338,19 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
327
338
  /** Enable normal or additive blend mode
328
339
  * @param {Boolean} [additive=0]
329
340
  * @param {Boolean} [useWebGL=glEnable]
341
+ * @param {CanvasRenderingContext2D} [context=mainContext]
330
342
  * @memberof Draw */
331
- function setBlendMode(additive, useWebGL=glEnable)
343
+ function setBlendMode(additive, useWebGL=glEnable, context)
332
344
  {
333
- if (glEnable && useWebGL)
334
- glSetBlendMode(additive);
345
+ ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
346
+ if (useWebGL)
347
+ glAdditive = additive;
335
348
  else
336
- mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
349
+ {
350
+ if (!context)
351
+ context = mainContext;
352
+ context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
353
+ }
337
354
  }
338
355
 
339
356
  /** Draw text on overlay canvas in world space
@@ -1,10 +1,79 @@
1
1
  /**
2
2
  * LittleJS Module Export
3
- * - Export engine as a module with functions where necessary
3
+ * - Export engine as a module
4
4
  */
5
5
 
6
6
  export {
7
- // Setters for global variables
7
+
8
+ // Engine
9
+ engineName,
10
+ engineVersion,
11
+ frameRate,
12
+ timeDelta,
13
+ engineObjects,
14
+ frame,
15
+ time,
16
+ timeReal,
17
+ paused,
18
+ setPaused,
19
+ engineInit,
20
+ engineObjectsUpdate,
21
+ engineObjectsDestroy,
22
+ engineObjectsCallback,
23
+
24
+ // Globals
25
+ debug,
26
+ showWatermark,
27
+
28
+ // Debug
29
+ ASSERT,
30
+ debugRect,
31
+ debugCircle,
32
+ debugPoint,
33
+ debugLine,
34
+ debugAABB,
35
+ debugText,
36
+ debugClear,
37
+ debugSaveCanvas,
38
+
39
+ // Settings
40
+ cameraPos,
41
+ cameraScale,
42
+ canvasMaxSize,
43
+ canvasFixedSize,
44
+ canvasPixelated,
45
+ fontDefault,
46
+ tileSizeDefault,
47
+ tileFixBleedScale,
48
+ enablePhysicsSolver,
49
+ objectDefaultMass,
50
+ objectDefaultDamping,
51
+ objectDefaultAngleDamping,
52
+ objectDefaultElasticity,
53
+ objectDefaultFriction,
54
+ objectMaxSpeed,
55
+ gravity,
56
+ particleEmitRateScale,
57
+ glEnable,
58
+ glOverlay,
59
+ gamepadsEnable,
60
+ gamepadDirectionEmulateStick,
61
+ inputWASDEmulateDirection,
62
+ touchGamepadEnable,
63
+ touchGamepadAnalog,
64
+ touchGamepadSize,
65
+ touchGamepadAlpha,
66
+ vibrateEnable,
67
+ soundEnable,
68
+ soundVolume,
69
+ soundDefaultRange,
70
+ soundDefaultTaper,
71
+ medalDisplayTime,
72
+ medalDisplaySlideTime,
73
+ medalDisplaySize,
74
+ medalDisplayIconSize,
75
+
76
+ // Setters for globals
8
77
  setCameraPos,
9
78
  setCameraScale,
10
79
  setCanvasMaxSize,
@@ -44,58 +113,6 @@ export {
44
113
  setShowWatermark,
45
114
  setDebugKey,
46
115
 
47
- // Settings
48
- canvasMaxSize,
49
- canvasFixedSize,
50
- canvasPixelated,
51
- fontDefault,
52
- tileSizeDefault,
53
- tileFixBleedScale,
54
- enablePhysicsSolver,
55
- objectDefaultMass,
56
- objectDefaultDamping,
57
- objectDefaultAngleDamping,
58
- objectDefaultElasticity,
59
- objectDefaultFriction,
60
- objectMaxSpeed,
61
- gravity,
62
- particleEmitRateScale,
63
- cameraPos,
64
- cameraScale,
65
- glEnable,
66
- glOverlay,
67
- gamepadsEnable,
68
- gamepadDirectionEmulateStick,
69
- inputWASDEmulateDirection,
70
- touchGamepadEnable,
71
- touchGamepadAnalog,
72
- touchGamepadSize,
73
- touchGamepadAlpha,
74
- vibrateEnable,
75
- soundEnable,
76
- soundVolume,
77
- soundDefaultRange,
78
- soundDefaultTaper,
79
- medalDisplayTime,
80
- medalDisplaySlideTime,
81
- medalDisplaySize,
82
- medalDisplayIconSize,
83
-
84
- // Globals
85
- debug,
86
- showWatermark,
87
-
88
- // Debug
89
- ASSERT,
90
- debugRect,
91
- debugCircle,
92
- debugPoint,
93
- debugLine,
94
- debugAABB,
95
- debugText,
96
- debugClear,
97
- debugSaveCanvas,
98
-
99
116
  // Utilities
100
117
  PI,
101
118
  abs,
@@ -133,9 +150,6 @@ export {
133
150
  rgb,
134
151
  hsl,
135
152
 
136
- // Base
137
- EngineObject,
138
-
139
153
  // Draw
140
154
  textureInfos,
141
155
  tile,
@@ -160,6 +174,15 @@ export {
160
174
  isFullscreen,
161
175
  toggleFullscreen,
162
176
 
177
+ // WebGL
178
+ glCanvas,
179
+ glContext,
180
+ glSetTexture,
181
+ glCompileShader,
182
+ glCreateProgram,
183
+ glCreateTexture,
184
+ glInitPostProcess,
185
+
163
186
  // Input
164
187
  keyIsDown,
165
188
  keyWasPressed,
@@ -194,6 +217,9 @@ export {
194
217
  playSamples,
195
218
  zzfx,
196
219
 
220
+ // Base Object
221
+ EngineObject,
222
+
197
223
  // Tiles
198
224
  tileCollision,
199
225
  tileCollisionSize,
@@ -216,30 +242,4 @@ export {
216
242
  newgroundsInit,
217
243
  Medal,
218
244
  Newgrounds,
219
-
220
- // WebGL
221
- glCanvas,
222
- glContext,
223
- glSetBlendMode,
224
- glSetTexture,
225
- glCompileShader,
226
- glCreateProgram,
227
- glCreateTexture,
228
- glInitPostProcess,
229
-
230
- // Engine
231
- engineName,
232
- engineVersion,
233
- frameRate,
234
- timeDelta,
235
- engineObjects,
236
- frame,
237
- time,
238
- timeReal,
239
- paused,
240
- setPaused,
241
- engineInit,
242
- engineObjectsUpdate,
243
- engineObjectsDestroy,
244
- engineObjectsCallback,
245
245
  };
@@ -44,6 +44,7 @@ class EngineObject
44
44
  // set passed in params
45
45
  ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
46
46
  ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
47
+ ASSERT(!(renderOrder instanceof Color)); // prevent old style calls
47
48
  // to fix old calls, replace with tile(tileIndex, tileSize)
48
49
 
49
50
  /** @property {Vector2} - World space position of the object */
@@ -42,21 +42,20 @@ function glInit()
42
42
  '#version 300 es\n' + // specify GLSL ES version
43
43
  'precision highp float;'+ // use highp for better accuracy
44
44
  'uniform mat4 m;'+ // transform matrix
45
- 'in vec2 p,t;'+ // position, uv
46
- 'in vec4 c,a;'+ // color, additiveColor
45
+ 'in vec4 p,c,a;'+ // position, uv, color, additiveColor
47
46
  'out vec4 v,d,e;'+ // return uv, color, additiveColor
48
47
  'void main(){'+ // shader entry point
49
- 'gl_Position=m*vec4(p,1,1);'+ // transform position
50
- 'v=vec4(t,p);d=c;e=a;'+ // pass stuff to fragment shader
48
+ 'gl_Position=m*vec4(p.xy,1,1);'+ // transform position
49
+ 'v=p;d=c;e=a;'+ // pass stuff to fragment shader
51
50
  '}' // end of shader
52
51
  ,
53
52
  '#version 300 es\n' + // specify GLSL ES version
54
53
  'precision highp float;'+ // use highp for better accuracy
55
- 'in vec4 v,d,e;'+ // uv, color, additiveColor
54
+ 'in vec4 v,d,e;'+ // position, uv, color, additiveColor
56
55
  'uniform sampler2D s;'+ // texture
57
56
  'out vec4 c;'+ // out color
58
57
  'void main(){'+ // shader entry point
59
- 'c=texture(s,v.xy)*d+e;'+ // modulate texture by color plus additive
58
+ 'c=texture(s,v.zw)*d+e;'+ // modulate texture by color plus additive
60
59
  '}' // end of shader
61
60
  );
62
61
 
@@ -81,7 +80,7 @@ function glPreRender()
81
80
  glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
82
81
  glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
83
82
  glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
84
- glSetBlendMode();
83
+ glAdditive = 0;
85
84
 
86
85
  // set vertex attributes
87
86
  let offset = 0;
@@ -92,33 +91,25 @@ function glPreRender()
92
91
  glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
93
92
  offset += size*typeSize;
94
93
  }
95
- initVertexAttribArray('p', gl_FLOAT, 4, 2); // position
96
- initVertexAttribArray('t', gl_FLOAT, 4, 2); // texture coords
94
+ initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & texture coords
97
95
  initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
98
96
  initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
99
97
 
100
98
  // build the transform matrix
101
99
  const sx = 2 * cameraScale / mainCanvas.width;
102
100
  const sy = 2 * cameraScale / mainCanvas.height;
101
+ const cx = -1 - sx*cameraPos.x;
102
+ const cy = -1 - sy*cameraPos.y;
103
103
  glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
104
104
  new Float32Array([
105
- sx, 0, 0, 0,
106
- 0, sy, 0, 0,
107
- 1, 1, -1, 1,
108
- -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
105
+ sx, 0, 0, 0,
106
+ 0, sy, 0, 0,
107
+ 1, 1, -1, 1,
108
+ cx, cy, 0, 0
109
109
  ])
110
110
  );
111
111
  }
112
112
 
113
- /** Set the WebGl blend mode, normally you should call setBlendMode instead
114
- * @param {Boolean} [additive=0]
115
- * @memberof WebGL */
116
- function glSetBlendMode(additive=0)
117
- {
118
- // setup blending
119
- glAdditive = additive;
120
- }
121
-
122
113
  /** Set the WebGl texture, called automatically if using multiple textures
123
114
  * - This may also flush the gl buffer resulting in more draw calls and worse performance
124
115
  * @param {WebGLTexture} texture
@@ -354,8 +345,11 @@ function glRenderPostProcess()
354
345
  glFlush(); // clear out the buffer
355
346
  mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
356
347
  }
357
- else // set viewport
348
+ else
349
+ {
350
+ // set the viewport
358
351
  glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
352
+ }
359
353
 
360
354
  if (glPostIncludeOverlay)
361
355
  {