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.
- package/dist/littlejs.d.ts +159 -55
- package/dist/littlejs.esm.js +1143 -547
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +1137 -546
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +1089 -514
- package/examples/electron/index.html +2 -2
- package/examples/index.html +4 -3
- package/examples/particles/index.html +22 -6
- package/examples/shorts/base.html +2 -1
- package/examples/shorts/box2dPool.js +9 -10
- package/examples/shorts/empty.js +1 -1
- package/examples/shorts/input.js +30 -25
- package/examples/shorts/tileLayer.js +2 -2
- package/examples/shorts/tiles.png +0 -0
- package/examples/shorts/uiSystem.js +25 -14
- package/examples/starter/index.html +3 -2
- package/examples/uiSystem/game.js +27 -15
- package/package.json +1 -1
- package/plugins/box2d.js +1 -1
- package/plugins/desktop.ini +2 -0
- package/plugins/pluginExport.js +2 -0
- package/plugins/uiSystem.js +476 -91
- package/src/engine.js +2 -169
- package/src/engineBuild.js +1 -0
- package/src/engineDebug.js +48 -32
- package/src/engineDraw.js +25 -8
- package/src/engineExport.js +4 -1
- package/src/engineInput.js +526 -381
- package/src/engineObject.js +24 -22
- package/src/engineSettings.js +11 -6
- package/src/engineSplash.js +173 -0
- package/src/engineTileLayer.js +2 -2
- package/src/engineUtilities.js +17 -1
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
9
|
<!-- LittleJS Engine -->
|
|
10
|
-
<script src=../../dist/littlejs.js?1.15.
|
|
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.
|
|
13
|
+
<script src=game.js?1.15.8></script>
|
package/examples/index.html
CHANGED
|
@@ -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
|
|
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 =
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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 = '
|
|
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.
|
|
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([
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
|
57
|
-
const
|
|
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
|
}
|
package/examples/shorts/empty.js
CHANGED
package/examples/shorts/input.js
CHANGED
|
@@ -1,59 +1,64 @@
|
|
|
1
1
|
function gameUpdate()
|
|
2
2
|
{
|
|
3
|
-
|
|
3
|
+
touchGamepadEnable = 1;
|
|
4
|
+
if (isTouchDevice || isUsingGamepad)
|
|
4
5
|
{
|
|
5
|
-
|
|
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?
|
|
12
|
-
debugCircle(pos,
|
|
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(-
|
|
31
|
+
const pos = vec2(-7 + i%8*2, -3 - (i/8|0)*2);
|
|
20
32
|
if (gamepadIsDown(i))
|
|
21
|
-
debugCircle(pos,
|
|
22
|
-
debugCircle(pos,
|
|
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,
|
|
40
|
+
debugText('Mouse and Keyboard Mode', vec2(0,5));
|
|
37
41
|
|
|
38
42
|
// keyboard key (space bar)
|
|
39
|
-
debugRect(vec2(), vec2(
|
|
43
|
+
debugRect(vec2(), vec2(4), WHITE);
|
|
40
44
|
if (keyIsDown('Space'))
|
|
41
|
-
debugRect(vec2(), vec2(
|
|
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(-
|
|
57
|
+
const pos = vec2(-2 + i*2, -5);
|
|
54
58
|
if (mouseIsDown(i))
|
|
55
|
-
debugCircle(pos,
|
|
56
|
-
debugCircle(pos,
|
|
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 (
|
|
14
|
+
if (randBool(.7))
|
|
15
15
|
continue;
|
|
16
16
|
|
|
17
17
|
// set tile data
|
|
18
|
-
const tileIndex =
|
|
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),
|
|
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 = ()=>
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
50
|
-
textTitle.
|
|
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 = ()=>
|
|
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
|
-
|
|
102
|
-
|
|
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
package/plugins/box2d.js
CHANGED