littlejsengine 1.15.9 → 1.16.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.
Files changed (54) hide show
  1. package/dist/littlejs.d.ts +154 -158
  2. package/dist/littlejs.esm.js +573 -570
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +553 -553
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +392 -396
  7. package/examples/box2d/game.js +1 -1
  8. package/examples/box2d/gameObjects.js +5 -5
  9. package/examples/breakout/game.js +3 -3
  10. package/examples/electron/game.js +1 -2
  11. package/examples/electron/index.html +2 -2
  12. package/examples/htmlMenu/game.js +0 -1
  13. package/examples/index.html +1 -1
  14. package/examples/logo.png +0 -0
  15. package/examples/logo2.png +0 -0
  16. package/examples/module/game.js +1 -2
  17. package/examples/particles/index.html +1 -1
  18. package/examples/platformer/game.js +4 -4
  19. package/examples/platformer/gameEffects.js +1 -1
  20. package/examples/puzzle/game.js +2 -2
  21. package/examples/shorts/base.html +4 -3
  22. package/examples/shorts/box2dPool.js +2 -2
  23. package/examples/shorts/empty.js +1 -1
  24. package/examples/shorts/{systemFont.js → fontImage.js} +3 -3
  25. package/examples/shorts/fps.js +1 -1
  26. package/examples/shorts/helloWorld.js +2 -2
  27. package/examples/shorts/nineSlice.js +2 -2
  28. package/examples/shorts/slidingPuzzle.js +1 -1
  29. package/examples/starter/game.js +1 -2
  30. package/examples/starter/index.html +3 -2
  31. package/examples/stress/index.html +1 -1
  32. package/examples/typescript/game.js +1 -2
  33. package/examples/typescript/game.ts +1 -2
  34. package/package.json +1 -1
  35. package/plugins/box2d.js +8 -8
  36. package/plugins/drawUtilities.js +6 -6
  37. package/plugins/postProcess.js +13 -20
  38. package/plugins/uiSystem.js +16 -4
  39. package/reference.md +9 -11
  40. package/src/engine.js +40 -54
  41. package/src/engineAudio.js +5 -7
  42. package/src/engineBuild.js +1 -0
  43. package/src/engineDebug.js +163 -161
  44. package/src/engineDraw.js +108 -130
  45. package/src/engineExport.js +20 -17
  46. package/src/engineInput.js +4 -7
  47. package/src/engineMath.js +1201 -0
  48. package/src/engineMedals.js +7 -7
  49. package/src/engineObject.js +5 -4
  50. package/src/engineRelease.js +2 -4
  51. package/src/engineSettings.js +22 -32
  52. package/src/engineTileLayer.js +9 -10
  53. package/src/engineUtilities.js +34 -1187
  54. package/src/engineWebGL.js +13 -15
package/examples/box2d/game.js CHANGED
@@ -165,7 +165,7 @@ function gameRenderPost()
165
165
  LJS.drawLine(LJS.mousePos, ab, .1, LJS.BLACK);
166
166
  }
167
167
 
168
- // draw to overlay canvas for hud rendering
168
+ // draw demo info
169
169
  const pos = vec2(LJS.mainCanvasSize.x/2, 50);
170
170
  drawText('LittleJS Box2D Demo', 65, 70);
171
171
  drawText(Scenes.sceneName, 50, 100);
package/examples/box2d/gameObjects.js CHANGED
@@ -478,11 +478,11 @@ export function explosion(pos, radius=3, strength=300)
478
478
 
479
479
  // fire
480
480
  new LJS.ParticleEmitter(
481
- pos, 0, // pos, angle
482
- radius, .1, 100*radius, 3.14, // emitSize, emitTime, rate, cone
483
- Game.spriteAtlas.dot, // tileInfo
484
- hsl(0,1,.5), hsl(.15,1,.5), // colorStartA, colorStartB
485
- hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB
481
+ pos, 0, // pos, angle
482
+ radius, .1, 100*radius, 3.14, // emitSize, emitTime, rate, cone
483
+ Game.spriteAtlas.dot, // tileInfo
484
+ hsl(0,.8,.5), hsl(.15,.8,.5), // colorStartA, colorStartB
485
+ hsl(0,1,.5,0), hsl(.1, 1,.5,0),// colorEndA, colorEndB
486
486
  .7, 1, .5, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
487
487
  .9, 1, 0, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
488
488
  1, 0, 1, 0, 1e9 // randomness, collide, additive, colorLinear, renderOrder
package/examples/breakout/game.js CHANGED
@@ -105,11 +105,11 @@ function gameRenderPost()
105
105
  // use built in image font for text
106
106
  const font = new LJS.FontImage;
107
107
 
108
- font.drawTextOverlay('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
108
+ font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
109
109
  if (!brickCount)
110
- font.drawTextOverlay('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
110
+ font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
111
111
  else if (!ball)
112
- font.drawTextOverlay('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
112
+ font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
113
113
  }
114
114
 
115
115
  ///////////////////////////////////////////////////////////////////////////////
package/examples/electron/game.js CHANGED
@@ -11,7 +11,7 @@
11
11
  setShowSplashScreen(true);
12
12
 
13
13
  // fix texture bleeding by shrinking tile slightly
14
- setTileFixBleedScale(.5);
14
+ setTileDefaultBleed(.5);
15
15
 
16
16
  // sound effects
17
17
  const sound_click = new Sound([1,.5]);
@@ -89,7 +89,6 @@ function gameRender()
89
89
  ///////////////////////////////////////////////////////////////////////////////
90
90
  function gameRenderPost()
91
91
  {
92
- // draw to overlay canvas for hud rendering
93
92
  drawTextScreen('LittleJS Electron Demo',
94
93
  vec2(mainCanvasSize.x/2, 70), 80, // position, size
95
94
  hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
package/examples/electron/index.html CHANGED
@@ -7,7 +7,7 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.15.9></script>
10
+ <script src=../../dist/littlejs.js?1.16.2></script>
11
11
 
12
12
  <!-- Add your game scripts here -->
13
- <script src=game.js?1.15.9></script>
13
+ <script src=game.js?1.16.2></script>
package/examples/htmlMenu/game.js CHANGED
@@ -72,7 +72,6 @@ function gameRender()
72
72
  ///////////////////////////////////////////////////////////////////////////////
73
73
  function gameRenderPost()
74
74
  {
75
- // draw to overlay canvas for hud rendering
76
75
  LJS.drawTextScreen('LittleJS HTML Menu Example\nM = Open menu',
77
76
  vec2(LJS.mainCanvasSize.x/2, 70), 60, // position, size
78
77
  hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
package/examples/index.html CHANGED
@@ -100,7 +100,7 @@ const exampleList =
100
100
  new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
101
101
  new ExampleInfo('Music', 'music.js', 'Basic load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
102
102
  new ExampleInfo('Video', 'videoPlayer.js', 'Basic video play, pause, and stop', false, 'movie, sound, audio, streaming, volume, ui'),
103
- new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
103
+ new ExampleInfo('Font Image', 'fontImage.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
104
104
  new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
105
105
  new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),
106
106
  new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mose', false, 'ui, input, control'),
package/examples/logo.png CHANGED
Binary file
package/examples/logo2.png ADDED
Binary file
package/examples/module/game.js CHANGED
@@ -14,7 +14,7 @@ const {tile, vec2, hsl} = LJS;
14
14
  LJS.setShowSplashScreen(true);
15
15
 
16
16
  // fix texture bleeding by shrinking tile slightly
17
- LJS.setTileFixBleedScale(.5);
17
+ LJS.setTileDefaultBleed(.5);
18
18
 
19
19
  // sound effects
20
20
  const sound_click = new LJS.Sound([1,.5]);
@@ -124,7 +124,6 @@ function gameRender()
124
124
  ///////////////////////////////////////////////////////////////////////////////
125
125
  function gameRenderPost()
126
126
  {
127
- // draw to overlay canvas for hud rendering
128
127
  LJS.drawTextScreen('LittleJS with Modules', vec2(LJS.mainCanvasSize.x/2, 80), 80);
129
128
  }
130
129
 
package/examples/particles/index.html CHANGED
@@ -31,7 +31,7 @@ const {vec2} = LJS;
31
31
  'use strict';
32
32
 
33
33
  // fix texture bleeding by shrinking tiles slightly
34
- LJS.setTileFixBleedScale(.5);
34
+ LJS.setTileDefaultBleed(.5);
35
35
 
36
36
  // allow html input controls
37
37
  LJS.setInputPreventDefault(false);
package/examples/platformer/game.js CHANGED
@@ -126,10 +126,10 @@ function gameRender()
126
126
  ///////////////////////////////////////////////////////////////////////////////
127
127
  function gameRenderPost()
128
128
  {
129
- // draw to overlay canvas for hud rendering
129
+ // draw to main canvas for hud rendering
130
130
  const drawText = (text, x, y, size=40) =>
131
131
  {
132
- const context = LJS.overlayContext;
132
+ const context = LJS.mainContext;
133
133
  context.textAlign = 'center';
134
134
  context.textBaseline = 'top';
135
135
  context.font = size + 'px arial';
@@ -138,8 +138,8 @@ function gameRenderPost()
138
138
  context.strokeText(text, x, y);
139
139
  context.fillText(text, x, y);
140
140
  }
141
- drawText('Score: ' + score, LJS.overlayCanvas.width*1/4, 20);
142
- drawText('Deaths: ' + deaths, LJS.overlayCanvas.width*3/4, 20);
141
+ drawText('Score: ' + score, LJS.mainCanvas.width*1/4, 20);
142
+ drawText('Deaths: ' + deaths, LJS.mainCanvas.width*3/4, 20);
143
143
  }
144
144
 
145
145
  ///////////////////////////////////////////////////////////////////////////////
package/examples/platformer/gameEffects.js CHANGED
@@ -128,7 +128,7 @@ export function explosion(pos, radius=3)
128
128
  pos, 0, // pos, angle
129
129
  radius/2, .1, 100*radius, 3.14, // emitSize, emitTime, rate, cone
130
130
  0, // tileInfo
131
- rgb(1,.5,.1), rgb(1,.1,.1), // colorStartA, colorStartB
131
+ rgb(1,.5,.1), rgb(1,.1,.1), // colorStartA, colorStartB
132
132
  rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
133
133
  .7, .8, .2, .2, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
134
134
  .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
package/examples/puzzle/game.js CHANGED
@@ -239,8 +239,8 @@ function gameRender()
239
239
  function gameRenderPost()
240
240
  {
241
241
  // draw text on top of everything
242
- LJS.drawTextOverlay('Score: ' + score, LJS.cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
243
- LJS.drawTextOverlay('Best: ' + bestScore, LJS.cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
242
+ LJS.drawText('Score: ' + score, LJS.cameraPos.add(vec2(-3,-3.1)), .9, hsl(), .1);
243
+ LJS.drawText('Best: ' + bestScore, LJS.cameraPos.add(vec2( 3,-3.1)), .9, hsl(), .1);
244
244
  }
245
245
 
246
246
  ///////////////////////////////////////////////////////////////////////////////
package/examples/shorts/base.html CHANGED
@@ -1,10 +1,11 @@
1
1
  <!DOCTYPE html><meta charset=utf-8><body>
2
- <script src=../../dist/littlejs.js?1.15.9></script>
2
+ <script src=../../dist/littlejs.js?1.16.2></script>
3
3
  <script src=../../dist/box2d.wasm.js></script>
4
4
 
5
5
  <!-- LittleJS Engine Source
6
6
  <script src=../../src/engine.js></script>
7
7
  <script src=../../src/engineDebug.js></script>
8
+ <script src=../../src/engineMath.js></script>
8
9
  <script src=../../src/engineUtilities.js></script>
9
10
  <script src=../../src/engineSettings.js></script>
10
11
  <script src=../../src/engineObject.js></script>
@@ -29,13 +30,13 @@
29
30
  canvasFixedSize = vec2(960, 540);
30
31
 
31
32
  // fix bleeding from neighboring pixels
32
- tileFixBleedScale = .5;
33
+ tileDefaultBleed = .5;
33
34
 
34
35
  // allow improved canvas scaling for smoother graphics
35
36
  canvasPixelated = false;
36
37
 
37
38
  // disable watermark
38
- showWatermark = false;
39
+ debugWatermark = false;
39
40
 
40
41
  // these functions can be overridden for each example
41
42
  function gameInit() {}
package/examples/shorts/box2dPool.js CHANGED
@@ -49,14 +49,14 @@ class Ball extends Box2dObject
49
49
  drawCircle(this.pos, .6, WHITE);
50
50
  const textPos = this.pos.add(vec2(0,-.06));
51
51
  if (this.number)
52
- drawTextOverlay(this.number, textPos, .5, BLACK);
52
+ drawText(this.number, textPos, .5, BLACK);
53
53
  if (this.canHit())
54
54
  {
55
55
  // draw the aim line
56
56
  const endPos = this.pos.add(this.getHitOffset());
57
57
  const width = this.getHitStrength();
58
58
  drawLine(this.pos, endPos, width, hsl(0,1,.5,.5),
59
- vec2(), 0, false, false, overlayContext);
59
+ vec2(), 0, false);
60
60
  }
61
61
  }
62
62
  }
package/examples/shorts/empty.js CHANGED
@@ -26,5 +26,5 @@ function gameRenderPost()
26
26
  {
27
27
  // called after objects are rendered
28
28
  // draw effects or hud that appear above all objects
29
- drawTextOverlay('LittleJS Engine', vec2(0,6), 3);
29
+ drawText('LittleJS Engine', vec2(0,6), 3);
30
30
  }
package/examples/shorts/{systemFont.js → fontImage.js} RENAMED
@@ -1,10 +1,10 @@
1
1
  function gameRender()
2
2
  {
3
- // draw text with built in font image system font
3
+ // draw text with built in engine font image
4
4
  const font = new FontImage;
5
- font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2);
5
+ font.drawText('Engine Font Test', cameraPos.add(vec2(0,3)), .2);
6
6
 
7
- // show every character in the system font
7
+ // show every character in the font
8
8
  let s = '';
9
9
  for (let i=32; i<128; ++i)
10
10
  {
package/examples/shorts/fps.js CHANGED
@@ -1,5 +1,5 @@
1
1
  let playerPos = vec2(), playerAngle = 0;
2
- setTileFixBleedScale(0);
2
+ setTileDefaultBleed(0);
3
3
 
4
4
  // a simple function to create the level
5
5
  const levelTest = (p)=> (floor(p.x)**3&floor(p.y)**2)%30>5;
package/examples/shorts/helloWorld.js CHANGED
@@ -3,8 +3,8 @@ function gameRender()
3
3
  // draw background gradient
4
4
  drawRectGradient(cameraPos, getCameraSize(), BLACK, WHITE);
5
5
 
6
- // draw text to the overlay canvas
7
- drawTextOverlay('LittleJS Engine', vec2(0,3), 3);
6
+ // draw text
7
+ drawText('LittleJS Engine', vec2(0,3), 3);
8
8
 
9
9
  // draw a tile
10
10
  drawTile(vec2(sin(time)*3,-2), vec2(7), tile(3,128));
package/examples/shorts/nineSlice.js CHANGED
@@ -10,7 +10,7 @@ function gameRender()
10
10
  const color = hsl(.1,.5,.9);
11
11
  const border = .5;
12
12
  drawNineSlice(pos, size, nineSliceTile, color, border);
13
- drawTextOverlay('Nine Slice\nThin Border', pos, 1, BLACK);
13
+ drawText('Nine Slice\nThin Border', pos, 1, BLACK);
14
14
  }
15
15
  {
16
16
  // draw nine slice in screen space with thick border and rotation
@@ -28,7 +28,7 @@ function gameRender()
28
28
  const border = 2 + wave(.2)*2;
29
29
  const additive = hsl(time/30,.5,.5);
30
30
  drawThreeSlice(pos, size, threeSliceTile, WHITE, border, additive);
31
- drawTextOverlay('Three Slice\nVariable\nBorder', pos, 1, BLACK);
31
+ drawText('Three Slice\nVariable\nBorder', pos, 1, BLACK);
32
32
  }
33
33
  {
34
34
  // draw three slice in screen space with changing size
package/examples/shorts/slidingPuzzle.js CHANGED
@@ -36,7 +36,7 @@ class PuzzlePiece extends EngineObject
36
36
  const movePercent = this.moveTimer.getPercent();
37
37
  const pos = this.lastPos.lerp(this.pos, movePercent);
38
38
  drawRect(pos, this.size, this.color);
39
- drawTextOverlay(this.text, pos, 2.5, BLACK);
39
+ drawText(this.text, pos, 2.5, BLACK);
40
40
  }
41
41
  }
42
42
 
package/examples/starter/game.js CHANGED
@@ -11,7 +11,7 @@
11
11
  setShowSplashScreen(true);
12
12
 
13
13
  // fix texture bleeding by shrinking tile slightly
14
- setTileFixBleedScale(.5);
14
+ setTileDefaultBleed(.5);
15
15
 
16
16
  // sound effects
17
17
  const sound_click = new Sound([1,.5]);
@@ -127,7 +127,6 @@ function gameRender()
127
127
  ///////////////////////////////////////////////////////////////////////////////
128
128
  function gameRenderPost()
129
129
  {
130
- // draw to overlay canvas for hud rendering
131
130
  drawTextScreen('LittleJS Demo',
132
131
  vec2(mainCanvasSize.x/2, 70), 80, // position, size
133
132
  hsl(0,0,1), 6, hsl(0,0,0)); // color, outline size and color
package/examples/starter/index.html CHANGED
@@ -7,11 +7,12 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.15.9></script>
10
+ <script src=../../dist/littlejs.js?1.16.2></script>
11
11
 
12
12
  <!-- LittleJS Engine Source
13
13
  <script src=../../src/engine.js></script>
14
14
  <script src=../../src/engineDebug.js></script>
15
+ <script src=../../src/engineMath.js></script>
15
16
  <script src=../../src/engineUtilities.js></script>
16
17
  <script src=../../src/engineSettings.js></script>
17
18
  <script src=../../src/engineObject.js></script>
@@ -31,4 +32,4 @@
31
32
  -->
32
33
 
33
34
  <!-- Add your game scripts here -->
34
- <script src=game.js?1.15.9></script>
35
+ <script src=game.js?1.16.2></script>
package/examples/stress/index.html CHANGED
@@ -51,7 +51,7 @@ function gameInit()
51
51
  LJS.setGravity(vec2(0,-.005));
52
52
  sprites = [];
53
53
 
54
- // display stats using a div so when using glOverlay it still appears on top
54
+ // display stats using a div so it doesn't use canvas rendering
55
55
  document.body.appendChild(statsDisplay = document.createElement('div'));
56
56
  statsDisplay.style = 'position:absolute;width:100%;font-size:3em;text-align:center;font-family:arial;user-select:none;';
57
57
  }
package/examples/typescript/game.js CHANGED
@@ -10,7 +10,7 @@ const { tile, vec2, hsl } = LJS;
10
10
  // show the LittleJS splash screen
11
11
  LJS.setShowSplashScreen(true);
12
12
  // fix texture bleeding by shrinking tile slightly
13
- LJS.setTileFixBleedScale(.5);
13
+ LJS.setTileDefaultBleed(.5);
14
14
  // sound effects
15
15
  const sound_click = new LJS.Sound([1, .5]);
16
16
  // medals
@@ -93,7 +93,6 @@ function gameRender() {
93
93
  }
94
94
  ///////////////////////////////////////////////////////////////////////////////
95
95
  function gameRenderPost() {
96
- // draw to overlay canvas for hud rendering
97
96
  LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x / 2, 80), 80);
98
97
  }
99
98
  ///////////////////////////////////////////////////////////////////////////////
package/examples/typescript/game.ts CHANGED
@@ -14,7 +14,7 @@ const {tile, vec2, hsl} = LJS;
14
14
  LJS.setShowSplashScreen(true);
15
15
 
16
16
  // fix texture bleeding by shrinking tile slightly
17
- LJS.setTileFixBleedScale(.5);
17
+ LJS.setTileDefaultBleed(.5);
18
18
 
19
19
  // sound effects
20
20
  const sound_click = new LJS.Sound([1,.5]);
@@ -124,7 +124,6 @@ function gameRender()
124
124
  ///////////////////////////////////////////////////////////////////////////////
125
125
  function gameRenderPost()
126
126
  {
127
- // draw to overlay canvas for hud rendering
128
127
  LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x/2, 80), 80);
129
128
  }
130
129
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.15.9",
3
+ "version": "1.16.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",
package/plugins/box2d.js CHANGED
@@ -1876,33 +1876,33 @@ async function box2dInit()
1876
1876
  color = getDebugColor(color);
1877
1877
  point1 = box2d.vec2FromPointer(point1);
1878
1878
  point2 = box2d.vec2FromPointer(point2);
1879
- drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
1879
+ drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false);
1880
1880
  };
1881
1881
  debugDraw.DrawPolygon = function(vertices, vertexCount, color)
1882
1882
  {
1883
1883
  color = getDebugColor(color);
1884
1884
  const points = getPointsList(vertices, vertexCount);
1885
- drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
1885
+ drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false);
1886
1886
  };
1887
1887
  debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color)
1888
1888
  {
1889
1889
  color = getDebugColor(color);
1890
1890
  const points = getPointsList(vertices, vertexCount);
1891
- drawPoly(points, color, 0, color, vec2(), 0, false, false, overlayContext);
1891
+ drawPoly(points, color, 0, color, vec2(), 0, false);
1892
1892
  };
1893
1893
  debugDraw.DrawCircle = function(center, radius, color)
1894
1894
  {
1895
1895
  color = getDebugColor(color);
1896
1896
  center = box2d.vec2FromPointer(center);
1897
- drawCircle(center, radius*2, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
1897
+ drawCircle(center, radius*2, CLEAR_WHITE, debugLineWidth, color, false);
1898
1898
  };
1899
1899
  debugDraw.DrawSolidCircle = function(center, radius, axis, color)
1900
1900
  {
1901
1901
  color = getDebugColor(color);
1902
1902
  center = box2d.vec2FromPointer(center);
1903
1903
  axis = box2d.vec2FromPointer(axis).scale(radius);
1904
- drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
1905
- drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
1904
+ drawCircle(center, radius*2, color, debugLineWidth, color, false);
1905
+ drawLine(vec2(), axis, debugLineWidth, color, center, 0, false);
1906
1906
  };
1907
1907
  debugDraw.DrawTransform = function(transform)
1908
1908
  {
@@ -1911,8 +1911,8 @@ async function box2dInit()
1911
1911
  const angle = -transform.get_q().GetAngle();
1912
1912
  const p1 = vec2(1,0), c1 = rgb(.75,0,0,.8);
1913
1913
  const p2 = vec2(0,1), c2 = rgb(0,.75,0,.8);
1914
- drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false, false, overlayContext);
1915
- drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false, false, overlayContext);
1914
+ drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false);
1915
+ drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false);
1916
1916
  }
1917
1917
 
1918
1918
  debugDraw.AppendFlags(box2d.instance.b2Draw.e_shapeBit);
package/plugins/drawUtilities.js CHANGED
@@ -9,8 +9,8 @@
9
9
 
10
10
  ///////////////////////////////////////////////////////////////////////////////
11
11
 
12
- /** Draw a scalable nine-slice UI element to the overlay canvas in screen space
13
- * This function can not apply color because it draws using the overlay 2d context
12
+ /** Draw a scalable nine-slice UI element to the main canvas in screen space
13
+ * This function can not apply color because it draws using the 2d context
14
14
  * @param {Vector2} pos - Screen space position
15
15
  * @param {Vector2} size - Screen space size
16
16
  * @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -20,7 +20,7 @@
20
20
  * @memberof DrawUtilities */
21
21
  function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
22
22
  {
23
- drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
23
+ drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true);
24
24
  }
25
25
 
26
26
  /** Draw a scalable nine-slice UI element in world space
@@ -69,8 +69,8 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
69
69
  }
70
70
  }
71
71
 
72
- /** Draw a scalable three-slice UI element to the overlay canvas in screen space
73
- * This function can not apply color because it draws using the overlay 2d context
72
+ /** Draw a scalable three-slice UI element to the main canvas in screen space
73
+ * This function can not apply color because it draws using the 2d context
74
74
  * @param {Vector2} pos - Screen space position
75
75
  * @param {Vector2} size - Screen space size
76
76
  * @param {TileInfo} startTile - Starting tile for the three-slice pattern
@@ -80,7 +80,7 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
80
80
  * @memberof DrawUtilities */
81
81
  function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
82
82
  {
83
- drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
83
+ drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true);
84
84
  }
85
85
 
86
86
  /** Draw a scalable three-slice UI element in world space
package/plugins/postProcess.js CHANGED
@@ -24,13 +24,12 @@ class PostProcessPlugin
24
24
  {
25
25
  /** Create global post processing shader
26
26
  * @param {string} shaderCode
27
- * @param {boolean} [includeOverlay]
28
27
  * @param {boolean} [includeMainCanvas]
29
28
  * @example
30
29
  * // create the post process plugin object
31
30
  * new PostProcessPlugin(shaderCode);
32
31
  */
33
- constructor(shaderCode, includeOverlay=false, includeMainCanvas=true)
32
+ constructor(shaderCode, includeMainCanvas=true)
34
33
  {
35
34
  ASSERT(!postProcess, 'Post process already initialized');
36
35
  postProcess = this;
@@ -102,17 +101,19 @@ class PostProcessPlugin
102
101
  // clear out the buffer
103
102
  glFlush();
104
103
 
105
- if (includeMainCanvas || includeOverlay)
104
+ // setup texture
105
+ glContext.activeTexture(glContext.TEXTURE0);
106
+ glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
107
+ if (includeMainCanvas)
106
108
  {
107
- // copy WebGL to the main canvas
108
- mainContext.drawImage(glCanvas, 0, 0);
109
-
110
- if (includeOverlay)
111
- {
112
- // copy overlay canvas so it will be included in post processing
113
- mainContext.drawImage(overlayCanvas, 0, 0);
114
- overlayCanvas.width |= 0; // clear overlay canvas
115
- }
109
+ // copy main canvas to work canvas
110
+ workCanvas.width = mainCanvasSize.x;
111
+ workCanvas.height = mainCanvasSize.y;
112
+ glCopyToContext(workContext);
113
+ workContext.drawImage(mainCanvas, 0, 0);
114
+
115
+ // copy work canvas to texture
116
+ glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, workCanvas);
116
117
  }
117
118
 
118
119
  // setup shader program to draw a quad
@@ -121,14 +122,6 @@ class PostProcessPlugin
121
122
  glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
122
123
  glContext.disable(glContext.BLEND);
123
124
 
124
- // set textures, pass in the 2d canvas and gl canvas in separate texture channels
125
- glContext.activeTexture(glContext.TEXTURE0);
126
- glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
127
- if (includeMainCanvas || includeOverlay)
128
- {
129
- glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
130
- }
131
-
132
125
  // set vertex position attribute
133
126
  const vertexByteStride = 8;
134
127
  const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
package/plugins/uiSystem.js CHANGED
@@ -48,12 +48,14 @@ class UISystemPlugin
48
48
  * // create the ui plugin object
49
49
  * new UISystemPlugin;
50
50
  */
51
- constructor(context=overlayContext)
51
+ constructor(context=mainContext)
52
52
  {
53
53
  ASSERT(!uiSystem, 'UI system already initialized');
54
54
  uiSystem = this;
55
55
 
56
56
  // default settings
57
+ /** @property {boolean} - Activate when mouse is pressed down instead of clicked */
58
+ this.activateOnPress = false;
57
59
  /** @property {Color} - Default fill color for UI elements */
58
60
  this.defaultColor = WHITE;
59
61
  /** @property {Color} - Default outline color for UI elements */
@@ -705,13 +707,15 @@ class UIObject
705
707
  uiSystem.uiObjects.push(this);
706
708
  }
707
709
 
708
- /** Add a child UIObject to this object
709
- * @param {UIObject} child */
710
+ /** Add a child UIObject to this object, returns child for chaining
711
+ * @param {UIObject} child
712
+ * @return {UIObject} The child object added */
710
713
  addChild(child)
711
714
  {
712
715
  ASSERT(!child.parent && !this.children.includes(child));
713
716
  this.children.push(child);
714
717
  child.parent = this;
718
+ return child;
715
719
  }
716
720
 
717
721
  /** Remove a child UIObject from this object
@@ -758,7 +762,7 @@ class UIObject
758
762
  this.onUpdate();
759
763
 
760
764
  // unset active if disabled
761
- if (this.disabled && this == uiSystem.activeObject)
765
+ if (this.disabled && this === uiSystem.activeObject)
762
766
  uiSystem.activeObject = undefined;
763
767
 
764
768
  const wasHover = uiSystem.lastHoverObject === this;
@@ -784,8 +788,16 @@ class UIObject
784
788
  if (uiSystem.activeObject && !isActive)
785
789
  uiSystem.activeObject.onRelease();
786
790
  uiSystem.activeObject = this;
791
+
792
+ if (uiSystem.activateOnPress)
793
+ {
794
+ this.onClick();
795
+ if (!this.soundPress && this.soundClick)
796
+ this.soundClick.play();
797
+ }
787
798
  }
788
799
  }
800
+ if (!uiSystem.activateOnPress)
789
801
  if (!mouseDown && this.isActiveObject() && this.interactive)
790
802
  {
791
803
  this.onClick();