littlejsengine 1.15.8 → 1.16.1

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 (53) hide show
  1. package/dist/littlejs.d.ts +87 -85
  2. package/dist/littlejs.esm.js +578 -532
  3. package/dist/littlejs.esm.min.js +1 -1
  4. package/dist/littlejs.js +562 -521
  5. package/dist/littlejs.min.js +1 -1
  6. package/dist/littlejs.release.js +485 -444
  7. package/examples/box2d/game.js +2 -2
  8. package/examples/breakout/game.js +3 -3
  9. package/examples/electron/game.js +1 -2
  10. package/examples/electron/index.html +2 -2
  11. package/examples/htmlMenu/game.js +0 -1
  12. package/examples/index.html +1 -1
  13. package/examples/module/game.js +1 -2
  14. package/examples/particles/index.html +1 -1
  15. package/examples/platformer/game.js +11 -4
  16. package/examples/puzzle/game.js +2 -2
  17. package/examples/shorts/base.html +3 -4
  18. package/examples/shorts/box2dPool.js +2 -2
  19. package/examples/shorts/empty.js +1 -1
  20. package/examples/shorts/{systemFont.js → fontImage.js} +3 -3
  21. package/examples/shorts/fps.js +1 -1
  22. package/examples/shorts/helloWorld.js +2 -2
  23. package/examples/shorts/nineSlice.js +2 -2
  24. package/examples/shorts/slidingPuzzle.js +1 -1
  25. package/examples/shorts/uiSystem.js +1 -1
  26. package/examples/starter/game.js +1 -2
  27. package/examples/starter/index.html +2 -3
  28. package/examples/stress/index.html +1 -1
  29. package/examples/typescript/game.js +1 -2
  30. package/examples/typescript/game.ts +1 -2
  31. package/examples/uiSystem/game.js +4 -7
  32. package/package.json +1 -1
  33. package/plugins/box2d.js +8 -8
  34. package/plugins/drawUtilities.js +6 -6
  35. package/plugins/postProcess.js +13 -20
  36. package/plugins/uiSystem.js +15 -3
  37. package/reference.md +4 -6
  38. package/src/engine.js +240 -53
  39. package/src/engineAudio.js +3 -3
  40. package/src/engineBuild.js +0 -1
  41. package/src/engineDebug.js +78 -78
  42. package/src/engineDraw.js +107 -109
  43. package/src/engineExport.js +16 -11
  44. package/src/engineInput.js +14 -2
  45. package/src/engineMedals.js +3 -3
  46. package/src/engineObject.js +4 -2
  47. package/src/engineParticles.js +8 -6
  48. package/src/engineRelease.js +1 -1
  49. package/src/engineSettings.js +44 -30
  50. package/src/engineTileLayer.js +6 -6
  51. package/src/engineUtilities.js +2 -10
  52. package/src/engineWebGL.js +6 -5
  53. package/src/engineSplash.js +0 -173
package/examples/box2d/game.js CHANGED
@@ -104,7 +104,7 @@ function gameUpdate()
104
104
  }
105
105
 
106
106
  // controls
107
- if (LJS.mouseIsDown(1) || LJS.mouseIsDown('KeyZ'))
107
+ if (LJS.mouseIsDown(1) || LJS.keyIsDown('KeyZ'))
108
108
  {
109
109
  const isSet = repeatSpawnTimer.isSet();
110
110
  if (!isSet || repeatSpawnTimer.elapsed())
@@ -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/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.8></script>
10
+ <script src=../../dist/littlejs.js?1.16.1></script>
11
11
 
12
12
  <!-- Add your game scripts here -->
13
- <script src=game.js?1.15.8></script>
13
+ <script src=game.js?1.16.1></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/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
@@ -24,6 +24,13 @@ export function addToDeaths() { ++deaths; }
24
24
  // enable touch gamepad on touch devices
25
25
  LJS.setTouchGamepadEnable(true);
26
26
 
27
+ // limit canvas aspect ratios to support most modern HD devices
28
+ LJS.setCanvasMinAspect(.4);
29
+ LJS.setCanvasMaxAspect(2.5);
30
+
31
+ // limit size to to 4k HD
32
+ LJS.setCanvasMaxSize(vec2(3840, 2160));
33
+
27
34
  ///////////////////////////////////////////////////////////////////////////////
28
35
  function loadLevel()
29
36
  {
@@ -119,10 +126,10 @@ function gameRender()
119
126
  ///////////////////////////////////////////////////////////////////////////////
120
127
  function gameRenderPost()
121
128
  {
122
- // draw to overlay canvas for hud rendering
129
+ // draw to main canvas for hud rendering
123
130
  const drawText = (text, x, y, size=40) =>
124
131
  {
125
- const context = LJS.overlayContext;
132
+ const context = LJS.mainContext;
126
133
  context.textAlign = 'center';
127
134
  context.textBaseline = 'top';
128
135
  context.font = size + 'px arial';
@@ -131,8 +138,8 @@ function gameRenderPost()
131
138
  context.strokeText(text, x, y);
132
139
  context.fillText(text, x, y);
133
140
  }
134
- drawText('Score: ' + score, LJS.overlayCanvas.width*1/4, 20);
135
- 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);
136
143
  }
137
144
 
138
145
  ///////////////////////////////////////////////////////////////////////////////
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,9 @@
1
1
  <!DOCTYPE html><meta charset=utf-8><body>
2
- <script src=../../dist/littlejs.js?1.15.8></script>
2
+ <script src=../../dist/littlejs.js?1.16.1></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
- <script src=../../src/engineSplash.js></script>
8
7
  <script src=../../src/engineDebug.js></script>
9
8
  <script src=../../src/engineUtilities.js></script>
10
9
  <script src=../../src/engineSettings.js></script>
@@ -30,13 +29,13 @@
30
29
  canvasFixedSize = vec2(960, 540);
31
30
 
32
31
  // fix bleeding from neighboring pixels
33
- tileFixBleedScale = .5;
32
+ tileDefaultBleed = .5;
34
33
 
35
34
  // allow improved canvas scaling for smoother graphics
36
35
  canvasPixelated = false;
37
36
 
38
37
  // disable watermark
39
- showWatermark = false;
38
+ debugWatermark = false;
40
39
 
41
40
  // these functions can be overridden for each example
42
41
  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/shorts/uiSystem.js CHANGED
@@ -13,7 +13,7 @@ function gameInit()
13
13
  canvasClearColor = hsl(0,0,.8);
14
14
 
15
15
  // example text
16
- uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80),
16
+ uiMenu.addChild(new UIText(vec2(-80,-120), vec2(400, 80),
17
17
  'LittleJS UI\nSystem Demo'));
18
18
 
19
19
  // example image
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,10 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.15.8></script>
10
+ <script src=../../dist/littlejs.js?1.16.1></script>
11
11
 
12
12
  <!-- LittleJS Engine Source
13
13
  <script src=../../src/engine.js></script>
14
- <script src=../../src/engineSplash.js></script>
15
14
  <script src=../../src/engineDebug.js></script>
16
15
  <script src=../../src/engineUtilities.js></script>
17
16
  <script src=../../src/engineSettings.js></script>
@@ -32,4 +31,4 @@
32
31
  -->
33
32
 
34
33
  <!-- Add your game scripts here -->
35
- <script src=game.js?1.15.8></script>
34
+ <script src=game.js?1.16.1></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/examples/uiSystem/game.js CHANGED
@@ -43,14 +43,14 @@ function createUI()
43
43
  uiMenu.addChild(uiBackground);
44
44
 
45
45
  // example large text
46
- const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 120), 'Test Title');
46
+ const textTitle = new LJS.UIText(vec2(0,-220), vec2(400, 120), 'Test Title');
47
47
  uiMenu.addChild(textTitle);
48
48
  textTitle.textColor = LJS.RED;
49
49
  textTitle.textLineColor = LJS.BLUE;
50
50
  textTitle.textLineWidth = 4;
51
51
 
52
52
  // example multiline text
53
- const textTest = new LJS.UIText(vec2(-60,-120), vec2(350, 60), 'Test Text\nSecond text line.')
53
+ const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 60), 'Test Text\nSecond text line.')
54
54
  uiMenu.addChild(textTest);
55
55
 
56
56
  // example tile image
@@ -61,14 +61,11 @@ function createUI()
61
61
  let navigationIndex = 0;
62
62
 
63
63
  // example checkbox
64
- const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
64
+ const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(50));
65
65
  uiMenu.addChild(checkbox);
66
66
  checkbox.onChange = ()=> button1.disabled = checkbox.checked;
67
67
  checkbox.navigationIndex = ++navigationIndex;
68
-
69
- // text attached to checkbox
70
- const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 60), 'Test Checkbox');
71
- checkbox.addChild(checkboxText);
68
+ checkbox.text = 'Test Checkbox';
72
69
 
73
70
  // example scrollbar
74
71
  const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.15.8",
3
+ "version": "1.16.1",
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
@@ -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();