littlejsengine 1.10.7 → 1.11.2

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.
@@ -1,11 +1,12 @@
1
1
  <head>
2
2
  <title>LittleJS Examples</title>
3
+ <style>
4
+ iframe {width:480px; height:270px;}
5
+ </style>
3
6
  <link rel=icon type=image/png href=../favicon.png>
4
7
  <body>
5
8
  <h1>All LittleJS Engine Examples</h1>
6
- <p>
7
- <img src=screenshot.jpg width=500>
8
- </p>
9
+ <img src=screenshot.jpg width=480>
9
10
  <h2>Main Demos</h2>
10
11
  <p>
11
12
  <a href="starter">Starter</a> - Clean example with only a few things to get you started<br>
@@ -30,4 +31,10 @@
30
31
  <a href="typescript">LittleJS using TypeScript</a> - Uses LittleJS type definitions<br>
31
32
  <a href="electron">LittleJS building with Electron</a> - Builds to an executable<br>
32
33
  </p>
34
+ <h2>Live Demos</h2>
35
+ <p>
36
+ <iframe id=iframe src="breakout"></iframe>
37
+ <iframe id=iframe src="platformer"></iframe>
38
+ <iframe id=iframe src="puzzle"></iframe>
39
+ </p>
33
40
  </body>
@@ -126,7 +126,7 @@ function gameRender()
126
126
  function gameRenderPost()
127
127
  {
128
128
  // draw to overlay canvas for hud rendering
129
- LittleJS.drawTextScreen('LittleJS with Modules', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
129
+ LittleJS.drawTextOverlay('LittleJS with Modules', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
130
130
  }
131
131
 
132
132
  ///////////////////////////////////////////////////////////////////////////////
@@ -13,6 +13,7 @@ setShowSplashScreen(true);
13
13
 
14
14
  // do not use pixelated rendering
15
15
  setCanvasPixelated(false);
16
+ setTilesPixelated(false);
16
17
 
17
18
  const fallTime = .2;
18
19
  const cameraOffset = vec2(0,-.5);
@@ -223,8 +224,8 @@ function gameRender()
223
224
  function gameRenderPost()
224
225
  {
225
226
  // draw text on top of everything
226
- drawText('Score: ' + score, cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
227
- drawText('Best: ' + bestScore, cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
227
+ drawTextOverlay('Score: ' + score, cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
228
+ drawTextOverlay('Best: ' + bestScore, cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
228
229
  }
229
230
 
230
231
  ///////////////////////////////////////////////////////////////////////////////
@@ -7,8 +7,6 @@
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
12
  tileFixBleedScale = .5;
@@ -66,7 +64,7 @@ function gameInit()
66
64
  // create particle emitter
67
65
  particleEmitter = new ParticleEmitter(
68
66
  vec2(16,9), 0, // emitPos, emitAngle
69
- 0, 0, 500, PI, // emitSize, emitTime, emitRate, emiteCone
67
+ 0, 0, 0, PI, // emitSize, emitTime, emitRate, emiteCone
70
68
  tile(0, 16), // tileIndex, tileSize
71
69
  hsl(1,1,1), hsl(0,0,0), // colorStartA, colorStartB
72
70
  hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -111,19 +109,55 @@ function gameUpdatePost()
111
109
  function gameRender()
112
110
  {
113
111
  // draw a grey square in the background without using webgl
114
- drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
112
+ drawRect(vec2(16,8), vec2(202,214), hsl(0,0,.6), 0, false);
115
113
 
116
- // draw the logo as a tile
117
- drawTile(vec2(21,5), vec2(4.5), tile(3,128));
118
114
  }
119
115
 
120
116
  ///////////////////////////////////////////////////////////////////////////////
121
117
  function gameRenderPost()
122
118
  {
123
- // draw to overlay canvas for hud rendering
124
- drawTextScreen('LittleJS Engine Demo',
125
- vec2(mainCanvasSize.x/2, 70), 80, // position, size
126
- hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
119
+ drawNineSlice(vec2(10,10), vec2(4,4), tile(1))
120
+ }
121
+
122
+ function drawNineSlice(pos, size, tileInfo, context=overlayContext)
123
+ {
124
+ // calculate the size of a slice
125
+ const s = tileInfo.size.x / 3;
126
+
127
+ // define the 9 parts as [x, y, width, height]
128
+ const part1 = [0, 0, s, s];
129
+ const part2 = [s, 0, s, s];
130
+ const part3 = [s * 2, 0, s, s];
131
+ const part4 = [0, s, s, s];
132
+ const part5 = [s, s, s, s];
133
+ const part6 = [s * 2, s, s, s];
134
+ const part7 = [0, s * 2, s, s];
135
+ const part8 = [s, s * 2, s, s];
136
+ const part9 = [s * 2, s * 2, s, s];
137
+
138
+ // target width/height (try different values!)
139
+ const width = 16 * size.x;
140
+ const height = 16 * size.y;
141
+
142
+ const img = tileInfo.getTextureInfo().image;
143
+
144
+ const originPos = pos.subtract(size.divide(vec2(2))).add(vec2( - 0.5));
145
+
146
+ // draw the corners
147
+ //context.imageSmoothingEnabled = false
148
+ context.drawImage(img, ...part1, originPos.x + 0, originPos.y + 0, s + 1, s + 1); // top left
149
+ context.drawImage(img, ...part3, originPos.x + width - s, originPos.y + 0, s + 1, s + 1); // top right
150
+ context.drawImage(img, ...part7, originPos.x + 0, originPos.y + height - s, s + 1, s + 1); // bottom left
151
+ context.drawImage(img, ...part9, originPos.x + width - s, originPos.y + height - s, s + 1, s + 1); // bottom right
152
+
153
+ // draw the edges
154
+ context.drawImage(img, ...part2, originPos.x + s, originPos.y + 0, width - 2 * s + 1, s + 1); // top
155
+ context.drawImage(img, ...part8, originPos.x + s, originPos.y + height - s, width - 2 * s + 1, s + 1); // bottom
156
+ context.drawImage(img, ...part4, originPos.x + 0, originPos.y + s, s + 1, height - 2 * s + 1); // left
157
+ context.drawImage(img, ...part6, originPos.x + width - s, originPos.y + s, s + 1, height - 2 * s + 1); // right
158
+
159
+ // draw the center
160
+ context.drawImage(img, ...part5, originPos.x + s, originPos.y + s, width - 2 * s + 1, height - 2 * s + 1);
127
161
  }
128
162
 
129
163
  ///////////////////////////////////////////////////////////////////////////////
Binary file
package/package.json CHANGED
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.10.7",
3
+ "version": "1.11.2",
4
4
  "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
5
5
  "main": "dist/littlejs.esm.js",
6
6
  "types": "dist/littlejs.d.ts",
7
+ "exports": {
8
+ "types": "./dist/littlejs.d.ts",
9
+ "production": "./dist/littlejs.esm.min.js",
10
+ "default": "./dist/littlejs.esm.js"
11
+ },
7
12
  "repository": {
8
13
  "type": "git",
9
14
  "url": "git+https://github.com/KilledByAPixel/LittleJS.git"
@@ -91,7 +91,7 @@ function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=f
91
91
 
92
92
  function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor, align='center', font=uiDefaultFont)
93
93
  {
94
- drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, uiContext, size.x);
94
+ drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, size.x, uiContext);
95
95
  }
96
96
 
97
97
  ///////////////////////////////////////////////////////////////////////////////
package/reference.md CHANGED
@@ -3,7 +3,7 @@
3
3
  ## This cheat sheet contains all LittleJS essentials.
4
4
  - [LittleJS on GitHub](https://github.com/KilledByAPixel/LittleJS) - Official LittleJS website with more info
5
5
  - [LittleJS Documentation](https://killedbyapixel.github.io/LittleJS/docs) - LittleJS documentation browser
6
- - [Particle Deigner](https://killedbyapixel.github.io/LittleJS/examples/particles) - Editor for LittleJS Particle Systems
6
+ - [Particle System Designer](https://killedbyapixel.github.io/LittleJS/examples/particles) - Editor for LittleJS Particle Systems
7
7
  - [Sound Effect Designer](https://killedbyapixel.github.io/ZzFX) - Tool for creating ZzFX sound effects
8
8
  - [Starter Project](https://killedbyapixel.github.io/LittleJS/examples/starter) - Simple LittleJS demo to start with
9
9
 
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.10.7';
33
+ const engineVersion = '1.11.2';
34
34
 
35
35
  /** Frames per second to update
36
36
  * @type {Number}
@@ -122,7 +122,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
122
122
  mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
123
123
 
124
124
  // disable smoothing for pixel art
125
- mainContext.imageSmoothingEnabled = !canvasPixelated;
125
+ overlayContext.imageSmoothingEnabled =
126
+ mainContext.imageSmoothingEnabled = !tilesPixelated;
126
127
 
127
128
  // setup gl rendering if enabled
128
129
  glPreRender();
@@ -275,6 +276,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
275
276
  'align-items:center;' + // horizontal center
276
277
  'justify-content:center;' + // vertical center
277
278
  'background:#000;' + // set background color
279
+ (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
278
280
  'user-select:none;' + // prevent hold to select
279
281
  '-webkit-user-select:none;' + // compatibility for ios
280
282
  (!touchInputEnable ? '' : // no touch css setttings
@@ -63,9 +63,6 @@ class Sound
63
63
 
64
64
  /** @property {Number} - How much to randomize frequency each time sound plays */
65
65
  this.randomness = 0;
66
-
67
- /** @property {GainNode} - Gain node for this sound */
68
- this.gainNode = audioContext.createGain();
69
66
 
70
67
  if (zzfxSound)
71
68
  {
@@ -112,13 +109,19 @@ class Sound
112
109
 
113
110
  // play the sound
114
111
  const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
115
- return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
112
+ this.gainNode = audioContext.createGain();
113
+ this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
114
+ return this.source;
116
115
  }
117
116
 
118
- /** Set the sound volume
117
+ /** Set the sound volume of the most recently played instance of this sound
119
118
  * @param {Number} [volume] - How much to scale volume by
120
119
  */
121
- setVolume(volume=1) { this.gainNode.gain.value = volume; }
120
+ setVolume(volume=1)
121
+ {
122
+ if (this.gainNode)
123
+ this.gainNode.gain.value = volume;
124
+ }
122
125
 
123
126
  /** Stop the last instance of this sound that was played */
124
127
  stop()
package/src/engineDraw.js CHANGED
@@ -415,6 +415,24 @@ function setBlendMode(additive, useWebGL=glEnable, context)
415
415
  }
416
416
  }
417
417
 
418
+ /** Draw text on main canvas in world space
419
+ * Automatically splits new lines into rows
420
+ * @param {String} text
421
+ * @param {Vector2} pos
422
+ * @param {Number} [size]
423
+ * @param {Color} [color=(1,1,1,1)]
424
+ * @param {Number} [lineWidth]
425
+ * @param {Color} [lineColor=(0,0,0,1)]
426
+ * @param {CanvasTextAlign} [textAlign='center']
427
+ * @param {String} [font=fontDefault]
428
+ * @param {Number} [maxWidth]
429
+ * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
430
+ * @memberof Draw */
431
+ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=mainContext)
432
+ {
433
+ drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, maxWidth, context);
434
+ }
435
+
418
436
  /** Draw text on overlay canvas in world space
419
437
  * Automatically splits new lines into rows
420
438
  * @param {String} text
@@ -425,12 +443,11 @@ function setBlendMode(additive, useWebGL=glEnable, context)
425
443
  * @param {Color} [lineColor=(0,0,0,1)]
426
444
  * @param {CanvasTextAlign} [textAlign='center']
427
445
  * @param {String} [font=fontDefault]
428
- * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
429
446
  * @param {Number} [maxWidth]
430
447
  * @memberof Draw */
431
- function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context, maxWidth)
448
+ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth)
432
449
  {
433
- drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context, maxWidth);
450
+ drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, maxWidth, overlayContext);
434
451
  }
435
452
 
436
453
  /** Draw text on overlay canvas in screen space
@@ -443,10 +460,10 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
443
460
  * @param {Color} [lineColor=(0,0,0,1)]
444
461
  * @param {CanvasTextAlign} [textAlign]
445
462
  * @param {String} [font=fontDefault]
446
- * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
447
463
  * @param {Number} [maxWidth]
464
+ * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
448
465
  * @memberof Draw */
449
- function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext, maxWidth=undefined)
466
+ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
450
467
  {
451
468
  context.fillStyle = color.toString();
452
469
  context.lineWidth = lineWidth;
@@ -522,7 +539,6 @@ class FontImage
522
539
  {
523
540
  const context = this.context;
524
541
  context.save();
525
- context.imageSmoothingEnabled = !canvasPixelated;
526
542
 
527
543
  const size = this.tileSize;
528
544
  const drawSize = size.add(this.paddingSize).scale(scale);
@@ -48,6 +48,7 @@ export {
48
48
  canvasMaxSize,
49
49
  canvasFixedSize,
50
50
  canvasPixelated,
51
+ tilesPixelated,
51
52
  fontDefault,
52
53
  showSplashScreen,
53
54
  headlessMode,
@@ -87,6 +88,7 @@ export {
87
88
  setCanvasMaxSize,
88
89
  setCanvasFixedSize,
89
90
  setCanvasPixelated,
91
+ setTilesPixelated,
90
92
  setFontDefault,
91
93
  setShowSplashScreen,
92
94
  setHeadlessMode,
@@ -196,8 +198,9 @@ export {
196
198
  drawCircle,
197
199
  drawCanvas2D,
198
200
  setBlendMode,
199
- drawTextScreen,
200
201
  drawText,
202
+ drawTextOverlay,
203
+ drawTextScreen,
201
204
  engineFontImage,
202
205
  FontImage,
203
206
  isFullscreen,
@@ -37,12 +37,18 @@ let canvasMaxSize = vec2(1920, 1080);
37
37
  * @memberof Settings */
38
38
  let canvasFixedSize = vec2();
39
39
 
40
- /** Disables filtering for crisper pixel art if true
40
+ /** Use nearest neighbor scaling algorithm for canvas for more pixelated look
41
41
  * @type {Boolean}
42
42
  * @default
43
43
  * @memberof Settings */
44
44
  let canvasPixelated = true;
45
45
 
46
+ /** Disables texture filtering for crisper pixel art
47
+ * @type {Boolean}
48
+ * @default
49
+ * @memberof Settings */
50
+ let tilesPixelated = true;
51
+
46
52
  /** Default font used for text rendering
47
53
  * @type {String}
48
54
  * @default
@@ -291,11 +297,16 @@ function setCanvasMaxSize(size) { canvasMaxSize = size; }
291
297
  * @memberof Settings */
292
298
  function setCanvasFixedSize(size) { canvasFixedSize = size; }
293
299
 
294
- /** Disables anti aliasing for pixel art if true
300
+ /** Use nearest neighbor scaling algorithm for canvas for more pixelated look
295
301
  * @param {Boolean} pixelated
296
302
  * @memberof Settings */
297
303
  function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
298
304
 
305
+ /** Disables texture filtering for crisper pixel art
306
+ * @param {Boolean} pixelated
307
+ * @memberof Settings */
308
+ function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
309
+
299
310
  /** Set default font used for text rendering
300
311
  * @param {String} font
301
312
  * @memberof Settings */
@@ -282,7 +282,7 @@ class TileLayer extends EngineObject
282
282
  }
283
283
 
284
284
  // disable smoothing for pixel art
285
- this.context.imageSmoothingEnabled = !canvasPixelated;
285
+ this.context.imageSmoothingEnabled = !tilesPixelated;
286
286
 
287
287
  // setup gl rendering if enabled
288
288
  glPreRender();
@@ -207,7 +207,7 @@ function glCreateTexture(image)
207
207
  }
208
208
 
209
209
  // use point filtering for pixelated rendering
210
- const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
210
+ const filter = tilesPixelated ? gl_NEAREST : gl_LINEAR;
211
211
  glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
212
212
  glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
213
213
  return texture;