littlejsengine 1.15.3 → 1.15.8

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,7 +7,7 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.15.3></script>
10
+ <script src=../../dist/littlejs.js?1.15.8></script>
11
11
 
12
12
  <!-- Add your game scripts here -->
13
- <script src=game.js?1.15.3></script>
13
+ <script src=game.js?1.15.8></script>
@@ -47,8 +47,8 @@ Theme:
47
47
  <div>
48
48
  <input id=inputSearch placeholder='Search examples...' oninput=filterExamples() onkeydown='if(event.key===`Escape`)filterExamples(1)'>
49
49
  <button id=buttonRestart onclick=restartCode()>Restart</button>
50
- <button id=buttonPause>Pause</button>
51
50
  <span id=container4>
51
+ <button id=buttonPause>Pause</button>
52
52
  <button id=buttonFullscreen>Fullscreen</button>
53
53
  <button id=buttonScreenshot>Screenshot</button>
54
54
  <span class=nowrap><input type=checkbox id=checkboxWebGL checked>WebGL</span>
@@ -130,7 +130,7 @@ const exampleList =
130
130
  new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics', false, 'objects, vehicle, suspension, wheels'),
131
131
  new ExampleInfo('Box2d Pool', 'box2dPool.js', 'Billiard table pool game with physics', false, 'objects, game'),
132
132
  new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters', false, 'webgl, visual, effect'),
133
- new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes', false, 'objects, widgets, interactive'),
133
+ new ExampleInfo('UI System', 'uiSystem.js', 'Buttons, sliders, and checkboxes', false, 'objects, widgets, interactive'),
134
134
  new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels', false, 'three slice, stretch, corners, text, tiles'),
135
135
  new ExampleInfo('--- FULL EXAMPLES ---'),
136
136
  new ExampleInfo('Starter', 'starter', 'Clean project template', true, 'base, empty, particles'),
@@ -141,7 +141,7 @@ const exampleList =
141
141
  new ExampleInfo('Stress Test', 'stress', 'Performance and music test', true, 'optimization, tiles, sprites'),
142
142
  new ExampleInfo('Box2D Plugin', 'box2d', 'Full Box2D physics demo', true, 'objects, bodies, joints'),
143
143
  new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML UI integration', true, 'web, browser, overlay, button, slider, textbox'),
144
- new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo', true, 'menu, overlay, button, slider, checkbox'),
144
+ new ExampleInfo('UI System Plugin Demo', 'uiSystem', 'Complete UI system demo', true, 'menu, overlay, button, slider, checkbox'),
145
145
  ];
146
146
 
147
147
  ///////////////////////////////////////////////////////////////////////////////
@@ -340,6 +340,7 @@ function filterExamples(reset=0)
340
340
 
341
341
  // Check if search term matches name, description, or tags
342
342
  if (example.name.toLowerCase().includes(searchTerm) ||
343
+ example.filename.toLowerCase().includes(searchTerm) ||
343
344
  example.description.toLowerCase().includes(searchTerm) ||
344
345
  example.tags.toLowerCase().includes(searchTerm))
345
346
  matchingIndices.push(i);
@@ -7,8 +7,21 @@
7
7
  <style>
8
8
  input { width:99px; }
9
9
  button { margin:1px; }
10
+ body { color:#fff; }
11
+ #div_emitterSettings
12
+ {
13
+ position:absolute;
14
+ z-index: 1;
15
+ height: 100vh;
16
+ overflow:auto;
17
+ padding:5px;
18
+ font-family:sans-serif;
19
+ column-count: 2;
20
+ column-fill: auto;
21
+ }
10
22
  </style>
11
23
  </head><body>
24
+ <div id=div_emitterSettings></div>
12
25
  <script type=module>
13
26
 
14
27
  // import LittleJS module
@@ -20,6 +33,9 @@ const {vec2} = LJS;
20
33
  // fix texture bleeding by shrinking tiles slightly
21
34
  LJS.setTileFixBleedScale(.5);
22
35
 
36
+ // allow html input controls
37
+ LJS.setInputPreventDefault(false);
38
+
23
39
  let particleEditor = 0, particleSystem, particleSystemDiv, particleSystemCode;
24
40
  let inputExpand;
25
41
  let restartTimer = new LJS.Timer();
@@ -56,7 +72,6 @@ addSetting('gravityScale', '', -1e9, 1e9, .1, 'How much does gravity effect
56
72
  addSetting('particleConeAngle','', 0, 1e9, .1, 'Cone for start particle angle');
57
73
  addSetting('fadeRate', '', 0, 1, .01,'How quickly particles fade in percent of life');
58
74
  addSetting('randomness', '', 0, 1, .01,'Apply extra randomness percent');
59
- addSetting('collideTiles', 'checkbox',0,0,0, 'Do particles collide against tiles?');
60
75
  addSetting('additive', 'checkbox',0,0,0, 'Should particles use addtive blend?');
61
76
  addSetting('randomColorLinear','checkbox',0,0,0, 'Should color be randomized linearly?');
62
77
 
@@ -77,10 +92,11 @@ function gameInit()
77
92
  LJS.setGravity(vec2(0,-.01));
78
93
  LJS.setCameraScale(64);
79
94
 
80
- const div = particleSystemDiv = document.createElement('div');
81
- div.innerHTML = '<big><b>LittleJS Particle Tool';
82
- div.style = 'position:absolute;top:10px;left:10px;color:#fff';
83
- document.body.appendChild(div);
95
+ const div = div_emitterSettings;
96
+ const title = document.createElement('span')
97
+ title.innerText = 'LittleJS Particle Tool';
98
+ title.style = 'font-size:20px;font-weight:bold;';
99
+ div.appendChild(title);
84
100
 
85
101
  for (const setting of particleSettings)
86
102
  {
@@ -181,7 +197,7 @@ function gameInit()
181
197
  //div.appendChild(document.createTextNode('JavaScript Code... '));
182
198
  div.appendChild(document.createElement('br'));
183
199
  div.appendChild(particleSystemCode = document.createElement('textarea'));
184
- particleSystemCode.style.width = '500px';
200
+ particleSystemCode.style.width = '300px';
185
201
  particleSystemCode.style.height = '100px';
186
202
  particleSystemCode.disabled = true;
187
203
 
@@ -1,9 +1,10 @@
1
1
  <!DOCTYPE html><meta charset=utf-8><body>
2
- <script src=../../dist/littlejs.js?1.15.3></script>
2
+ <script src=../../dist/littlejs.js?1.15.8></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>
7
8
  <script src=../../src/engineDebug.js></script>
8
9
  <script src=../../src/engineUtilities.js></script>
9
10
  <script src=../../src/engineSettings.js></script>
@@ -1,4 +1,4 @@
1
- const hitSound = new Sound([,,2e3,,,.01]);
1
+ const hitSound = new Sound([,.1,2e3,,,.01,,,,,,,,1]);
2
2
  const maxHitDistance = 6;
3
3
 
4
4
  class Ball extends Box2dObject
@@ -17,11 +17,11 @@ class Ball extends Box2dObject
17
17
  this.setFixedRotation(true);
18
18
  }
19
19
  beginContact()
20
- {
21
- const volume = clamp(this.getSpeed()/20);
22
- hitSound.play(this.pos, clamp(this.getSpeed()/20));
23
- }
24
- canHit() { return this == cueBall && this.getSpeed() < 1; }
20
+ { hitSound.play(this.pos, clamp(this.getSpeed()/20)); }
21
+ canHit()
22
+ { return this == cueBall && this.getSpeed() < 1; }
23
+ getHitStrength()
24
+ { return this.getHitOffset().length()/maxHitDistance; }
25
25
  getHitOffset()
26
26
  {
27
27
  // hit from cue ball to mouse position
@@ -36,7 +36,7 @@ class Ball extends Box2dObject
36
36
  // hit the cue ball
37
37
  const accel = this.getHitOffset().scale(8);
38
38
  this.applyAcceleration(accel);
39
- hitSound.play(cueBall.pos);
39
+ hitSound.play(cueBall.pos, this.getHitStrength(), .5);
40
40
  }
41
41
  if (this.pocketed)
42
42
  this.destroy();
@@ -53,9 +53,8 @@ class Ball extends Box2dObject
53
53
  if (this.canHit())
54
54
  {
55
55
  // draw the aim line
56
- const offset = this.getHitOffset();
57
- const endPos = this.pos.add(offset);
58
- const width = offset.length()/maxHitDistance;
56
+ const endPos = this.pos.add(this.getHitOffset());
57
+ const width = this.getHitStrength();
59
58
  drawLine(this.pos, endPos, width, hsl(0,1,.5,.5),
60
59
  vec2(), 0, false, false, overlayContext);
61
60
  }
@@ -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
- drawTextScreen('LittleJS Engine', mainCanvasSize.scale(.5), 80);
29
+ drawTextOverlay('LittleJS Engine', vec2(0,6), 3);
30
30
  }
@@ -1,59 +1,64 @@
1
1
  function gameUpdate()
2
2
  {
3
- if (isUsingGamepad)
3
+ touchGamepadEnable = 1;
4
+ if (isTouchDevice || isUsingGamepad)
4
5
  {
5
- debugText('Gamepad Mode', vec2(0,4));
6
+ if (isTouchDevice)
7
+ {
8
+ debugText('Touch Gamepad Mode', vec2(0,5));
9
+
10
+ // touch input is routed to mouse
11
+ debugPoint(mousePos, mouseIsDown(0) ? RED : YELLOW, 1);
12
+ }
13
+ else
14
+ {
15
+ debugText('Gamepad Mode', vec2(0,5));
16
+ debugText('Primary Gamepad: ' + gamepadPrimary, vec2(0,4));
17
+ }
6
18
 
7
19
  // analog sticks
8
20
  for (let i=2; i--;)
9
21
  {
10
22
  const stick = gamepadStick(i);
11
- const pos = vec2(i?2:-2, 1);
12
- debugCircle(pos, 2, WHITE);
13
- debugLine(pos, pos.add(stick), GREEN);
23
+ const pos = vec2(i?3:-3, 1);
24
+ debugCircle(pos, 4, WHITE);
25
+ debugLine(pos, pos.add(stick.scale(2)), GREEN);
14
26
  }
15
27
 
16
28
  // buttons
17
29
  for (let i=16; i--;)
18
30
  {
19
- const pos = vec2(-1.5 + i%4, -2 - (i/4|0));
31
+ const pos = vec2(-7 + i%8*2, -3 - (i/8|0)*2);
20
32
  if (gamepadIsDown(i))
21
- debugCircle(pos, 1, RED, 0, 1);
22
- debugCircle(pos, 1, WHITE);
33
+ debugCircle(pos, 2, RED, 0, 1);
34
+ debugCircle(pos, 2, WHITE);
35
+ debugText(i, pos);
23
36
  }
24
37
  }
25
- else if (isTouchDevice)
26
- {
27
- debugText('Touch Mode', vec2(0,4));
28
-
29
- // touch input routed to mouse
30
- if (mouseIsDown(0))
31
- debugCircle(mousePos, 4, RED, 0, 1);
32
- debugCircle(mousePos, 4, WHITE);
33
- }
34
38
  else
35
39
  {
36
- debugText('Mouse and Keyboard Mode', vec2(0,4));
40
+ debugText('Mouse and Keyboard Mode', vec2(0,5));
37
41
 
38
42
  // keyboard key (space bar)
39
- debugRect(vec2(), vec2(2), WHITE);
43
+ debugRect(vec2(), vec2(4), WHITE);
40
44
  if (keyIsDown('Space'))
41
- debugRect(vec2(), vec2(2), RED, 0, 0, 1);
45
+ debugRect(vec2(), vec2(4), RED, 0, 0, 1);
42
46
 
43
47
  // keyboard direction (arrow keys or WASD)
44
48
  const inputDirection = keyDirection();
45
- debugLine(vec2(), inputDirection, GREEN);
49
+ debugLine(vec2(), inputDirection.scale(2), GREEN);
46
50
 
47
51
  // mouse pos
48
- debugPoint(mousePos, mouseIsDown(0) ? RED : YELLOW);
52
+ debugPoint(mousePos, mouseIsDown(0) ? RED : YELLOW, 1);
49
53
 
50
54
  // mouse buttons
51
55
  for (let i=3; i--;)
52
56
  {
53
- const pos = vec2(-1 + i, -3);
57
+ const pos = vec2(-2 + i*2, -5);
54
58
  if (mouseIsDown(i))
55
- debugCircle(pos, 1, RED, 0, 1);
56
- debugCircle(pos, 1, WHITE);
59
+ debugCircle(pos, 2, RED, 0, 1);
60
+ debugCircle(pos, 2, WHITE);
61
+ debugText(i, pos);
57
62
  }
58
63
  }
59
64
  }
@@ -11,11 +11,11 @@ function gameInit()
11
11
  for (pos.y = tileLayer.size.y; pos.y--;)
12
12
  {
13
13
  // check if tile should be solid
14
- if (rand() < .7)
14
+ if (randBool(.7))
15
15
  continue;
16
16
 
17
17
  // set tile data
18
- const tileIndex = 1;
18
+ const tileIndex = 11;
19
19
  const direction = randInt(4)
20
20
  const mirror = randBool();
21
21
  const color = randColor(WHITE, hsl(0,0,.2));
Binary file
@@ -7,13 +7,8 @@ function gameInit()
7
7
  uiSystem.defaultCornerRadius = 8;
8
8
  uiSystem.defaultShadowColor = BLACK;
9
9
 
10
- // example button that returns to menu
11
- const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),
12
- 'Back\nto\nMenu');
13
- buttonBack.textHeight = 60;
14
- buttonBack.onClick = ()=> uiMenu.visible = true;
15
-
16
10
  // setup example menu
11
+ let navigationIndex = 0;
17
12
  const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(600,450));
18
13
  canvasClearColor = hsl(0,0,.8);
19
14
 
@@ -24,26 +19,42 @@ function gameInit()
24
19
  // example image
25
20
  uiMenu.addChild(new UITile(vec2(200,-140), vec2(128), tile(3, 128)));
26
21
 
22
+ // example checkbox
23
+ const checkbox = new UICheckbox(vec2(-80,0), vec2(50));
24
+ checkbox.navigationIndex = ++navigationIndex;
25
+ checkbox.onChange = ()=> button1.disabled = checkbox.checked;
26
+ uiMenu.addChild(checkbox);
27
+
27
28
  // example button
28
29
  const button1 = new UIButton(vec2(80,0), vec2(140, 80), 'Test');
29
30
  button1.textHeight = 60;
31
+ button1.navigationIndex = ++navigationIndex;
30
32
  uiMenu.addChild(button1);
31
33
  button1.onClick = ()=> canvasClearColor = randColor();
32
34
 
33
- // example checkbox
34
- const checkbox = new UICheckbox(vec2(-80,0), vec2(50));
35
- checkbox.onChange = ()=> button1.disabled = checkbox.checked;
36
- uiMenu.addChild(checkbox);
37
-
38
35
  // example scrollbar
39
- const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume,
40
- 'Volume');
36
+ const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50),
37
+ soundVolume, 'Volume');
38
+ scrollbar.navigationIndex = ++navigationIndex;
41
39
  uiMenu.addChild(scrollbar);
42
40
  scrollbar.onChange = ()=> setSoundVolume(scrollbar.value);
43
41
 
44
42
  // exit button
45
43
  const button2 = new UIButton(vec2(0,170), vec2(300, 50), 'Exit Menu');
46
44
  button2.textHeight = 40;
45
+ button2.navigationIndex = ++navigationIndex;
46
+ button2.navigationAutoSelect = true;
47
47
  uiMenu.addChild(button2);
48
- button2.onClick = ()=> uiMenu.visible = false;
48
+ button2.onClick = ()=> uiSystem.showConfirmDialog('Exit menu?',
49
+ ()=> { uiMenu.visible=false; buttonBack.visible=true; });
50
+
51
+ // example button that returns to menu
52
+ const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),
53
+ 'Back\nto\nMenu');
54
+ buttonBack.visible = false;
55
+ buttonBack.textHeight = 60;
56
+ buttonBack.navigationIndex = ++navigationIndex;
57
+ buttonBack.navigationAutoSelect = true;
58
+ buttonBack.onClick = ()=>
59
+ { uiMenu.visible=true; buttonBack.visible=false; }
49
60
  }
@@ -7,10 +7,11 @@
7
7
  </head><body>
8
8
 
9
9
  <!-- LittleJS Engine -->
10
- <script src=../../dist/littlejs.js?1.15.3></script>
10
+ <script src=../../dist/littlejs.js?1.15.8></script>
11
11
 
12
12
  <!-- LittleJS Engine Source
13
13
  <script src=../../src/engine.js></script>
14
+ <script src=../../src/engineSplash.js></script>
14
15
  <script src=../../src/engineDebug.js></script>
15
16
  <script src=../../src/engineUtilities.js></script>
16
17
  <script src=../../src/engineSettings.js></script>
@@ -31,4 +32,4 @@
31
32
  -->
32
33
 
33
34
  <!-- Add your game scripts here -->
34
- <script src=game.js?1.15.3></script>
35
+ <script src=game.js?1.15.8></script>
@@ -32,7 +32,7 @@ function createUI()
32
32
  const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70),
33
33
  'LittleJS UI System Example\nM = Toggle menu');
34
34
  uiInfo.textColor = LJS.WHITE;
35
- uiInfo.lineWidth = 8;
35
+ uiInfo.textLineWidth = 8;
36
36
  uiRoot.addChild(uiInfo);
37
37
 
38
38
  // setup example menu
@@ -46,8 +46,8 @@ function createUI()
46
46
  const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 120), 'Test Title');
47
47
  uiMenu.addChild(textTitle);
48
48
  textTitle.textColor = LJS.RED;
49
- textTitle.lineWidth = 4;
50
- textTitle.lineColor = LJS.BLUE;
49
+ textTitle.textLineColor = LJS.BLUE;
50
+ textTitle.textLineWidth = 4;
51
51
 
52
52
  // example multiline text
53
53
  const textTest = new LJS.UIText(vec2(-60,-120), vec2(350, 60), 'Test Text\nSecond text line.')
@@ -56,30 +56,40 @@ function createUI()
56
56
  // example tile image
57
57
  const tileTest = new LJS.UITile(vec2(150,-130), vec2(110), tile(3,128))
58
58
  uiMenu.addChild(tileTest);
59
+
60
+ // setup navigation index for gamepad and keyboard navigation
61
+ let navigationIndex = 0;
62
+
63
+ // example checkbox
64
+ const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
65
+ uiMenu.addChild(checkbox);
66
+ checkbox.onChange = ()=> button1.disabled = checkbox.checked;
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);
72
+
59
73
  // example scrollbar
60
74
  const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
61
75
  uiMenu.addChild(scrollbar);
62
76
  scrollbar.onChange = ()=> scrollbar.text = scrollbar.value.toFixed(2)
63
77
  scrollbar.onChange();
78
+ scrollbar.navigationIndex = ++navigationIndex;
64
79
 
65
80
  // example button
66
81
  const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
67
82
  uiMenu.addChild(button1);
68
83
  button1.onClick = ()=> uiBackground.color = hsl(LJS.rand(),1,.7);
69
-
70
- // example checkbox
71
- const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
72
- uiMenu.addChild(checkbox);
73
- checkbox.onChange = ()=> button1.disabled = checkbox.checked;
74
-
75
- // text attached to checkbox
76
- const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 60), 'Test Checkbox');
77
- checkbox.addChild(checkboxText);
84
+ button1.navigationIndex = ++navigationIndex;
78
85
 
79
86
  // exit button
80
87
  const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
81
88
  uiMenu.addChild(button2);
82
- button2.onClick = ()=> setMenuVisible(false);
89
+ button2.onClick = ()=> LJS.uiSystem.showConfirmDialog('Exit menu?',
90
+ ()=> setMenuVisible(false));
91
+ button2.navigationIndex = ++navigationIndex;
92
+ button2.navigationAutoSelect = true;
83
93
  }
84
94
 
85
95
  ///////////////////////////////////////////////////////////////////////////////
@@ -98,9 +108,11 @@ function gameUpdate()
98
108
  ///////////////////////////////////////////////////////////////////////////////
99
109
  function gameUpdatePost()
100
110
  {
101
- // toggle menu visibility
102
- if (LJS.keyWasPressed('KeyM'))
111
+ if (LJS.keyWasPressed('KeyM') && !LJS.uiSystem.confirmDialog)
112
+ {
113
+ // toggle menu visibility
103
114
  setMenuVisible(!getMenuVisible());
115
+ }
104
116
 
105
117
  // center ui
106
118
  uiRoot.pos.x = LJS.mainCanvasSize.x/2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "littlejsengine",
3
- "version": "1.15.3",
3
+ "version": "1.15.8",
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
@@ -1763,7 +1763,7 @@ class Box2dPlugin
1763
1763
  * @param {Vector2} v */
1764
1764
  vec2dTo(v)
1765
1765
  {
1766
- ASSERT(v instanceof Vector2);
1766
+ ASSERT(isVector2(v));
1767
1767
  return new box2d.instance.b2Vec2(v.x, v.y);
1768
1768
  }
1769
1769
 
@@ -0,0 +1,2 @@
1
+ [LocalizedFileNames]
2
+ tweens (1).js=@tweens (1).js,0
@@ -18,6 +18,8 @@ export
18
18
 
19
19
  // UI System
20
20
  uiSystem,
21
+ uiDebug,
22
+ uiSetDebug,
21
23
  UISystemPlugin,
22
24
  UIObject,
23
25
  UIText,