littlejsengine 1.12.4 → 1.13.1

package/examples/shorts/tileLayer.js

@@ -3,11 +3,9 @@ function gameInit()
     cameraPos = vec2(16); // setup camera
     gravity.y = -.01; // enable gravity
 
-    // create tile collision and visible tile layer
+    // create tile layer
     const pos = vec2();
     const tileLayer = new TileCollisionLayer(pos, vec2(32));
-
-    // init the tile layer
     for (pos.x = tileLayer.size.x; pos.x--;)
     for (pos.y = tileLayer.size.y; pos.y--;)
     {
@@ -18,7 +16,7 @@ function gameInit()
         // set tile data
         const tileIndex = 1;
         const direction = randInt(4)
-        const mirror = !randInt(2);
+        const mirror = randBool();
         const color = randColor(WHITE, hsl(0,0,.2));
         const data = new TileLayerData(tileIndex, direction, mirror, color);
         tileLayer.setData(pos, data);
@@ -43,7 +41,7 @@ function gameUpdate()
             .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
             .05, .8, true, false        // fadeRate, randomness, collide, additive
         );
-        particleEmitter.elasticity = .5; // bounce when it collides
+        particleEmitter.restitution = .5; // bounce when it collides
         particleEmitter.trailScale = 2;  // stretch in direction of motion
     }
 }

package/examples/shorts/tiltedView.js

@@ -18,16 +18,17 @@ class Player extends GameObject
 {
     update()
     {
+        super.update();
+
         // apply movement controls
-        const moveInput = keyDirection().clampLength(1).scale(.2); // clamp and scale input
-        this.velocity = this.velocity.add(moveInput); // apply movement
+        const moveInput = keyDirection().clampLength(1).scale(.2);
+        this.velocity = this.velocity.add(moveInput);
 
-        super.update(); // call parent update function
-        cameraPos = this.pos.add(vec2(0,2)); // move camera with player
+        // move camera with player
+        cameraPos = this.pos.add(vec2(0,2));
     }
 }
 
-
 function gameInit()
 {
     // setup level
@@ -35,10 +36,10 @@ function gameInit()
     new Player(vec2(), vec2(3), tile(5), 0, RED);
 
     // create background objects
-    for (let i = 1; i < 300; ++i)
+    for (let i=1; i<300; ++i)
         new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, 0, hsl(.4,.3,rand(.1,.2),.8), -1e5);
 
     // create world objects
-    for (let i = 1; i < 1e3; ++i)
+    for (let i=1; i<1e3; ++i)
         new GameObject(randInCircle(7+i,7), vec2(rand(1,2),rand(4,9)), 0, 0, hsl(.1,.5,rand(.2,.3)));
 }

package/examples/shorts/topDown.js

@@ -1,30 +1,22 @@
-class PhysicsObject extends EngineObject
-{
-    constructor(pos, size, color)
-    {
-        super(pos, size, 0, 0, color);
-        this.setCollision(); // make object collide
-        this.mass = 0; // make object have static physics
-    }
-}
-
-class Player extends PhysicsObject
+class Player extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(2), RED);
-        this.mass = 1; // make object have dynamic physics
-        this.renderOrder = 1; // render player on top of other objects
+        super(pos, vec2(2), tile(5), 0, RED);
+        this.setCollision(); // make object collide
+        this.renderOrder = 1; // render player on top
     }
 
     update()
     {
+        super.update();
+
         // apply movement controls
-        const moveInput = keyDirection().clampLength(1).scale(.2); // clamp and scale input
-        this.velocity = this.velocity.add(moveInput); // apply movement
+        const moveInput = keyDirection().clampLength(1).scale(.2);
+        this.velocity = this.velocity.add(moveInput);
 
-        super.update(); // call parent update function
-        cameraPos = this.pos; // move camera with player
+        // move camera with player
+        cameraPos = this.pos;
     }
 }
 
@@ -32,13 +24,13 @@ function gameInit()
 {
     // setup level
     objectDefaultDamping = .7;
-    new Player();
-
-    // create background objects
-    for (let i = 1; i < 300; ++i)
-        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, rand(), hsl(.4,.5,rand(.2)));
+    new Player;
 
-    // create foreground objects
-    for (let i = 1; i < 300; ++i)
-        new PhysicsObject(randInCircle(7+i,7), vec2(rand(4,9),rand(4,9)), hsl(0,0,rand(.8,1)));
+    // create collision objects
+    for (let i=300; i--;)
+    {
+        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.8,1)));
+        o.setCollision(); // make object collide
+        o.mass = 0; // make object have static physics
+    }
 }

package/examples/shorts/uiSystem.js

@@ -0,0 +1,36 @@
+// globals objects
+const sound_ui = new Sound([1,0]);
+let uiMenu;
+
+function gameInit()
+{
+    // load ui system plugin
+    new UISystemPlugin;
+    uiSystem.defaultSoundPress = new Sound([1,0,220]);
+    uiSystem.defaultSoundClick = new Sound([1,0,440]);
+
+    // setup example menu
+    uiMenu = new UIObject(mainCanvasSize.scale(.5));
+    const uiBackground = new UIObject(vec2(), vec2(400));
+    uiMenu.addChild(uiBackground);
+
+    // example text
+    const textTitle = new UIText(vec2(0,-100), vec2(400, 60), 'LittleJS UI\nSystem Demo');
+    uiMenu.addChild(textTitle);
+
+    // example button
+    const button1 = new UIButton(vec2(70,40), vec2(100), 'Test');
+    button1.textHeight = 40;
+    uiMenu.addChild(button1);
+    button1.onClick = ()=> uiBackground.color = randColor();
+
+    // example checkbox
+    const checkbox = new UICheckbox(vec2(-70,40), vec2(50));
+    uiMenu.addChild(checkbox);
+
+    // exit button
+    const button2 = new UIButton(vec2(0,140), vec2(300, 50), 'Exit Menu');
+    button2.textHeight = 40;
+    uiMenu.addChild(button2);
+    button2.onClick = ()=> uiMenu.visible = false;
+}

package/examples/starter/build.bat

@@ -1,2 +1,7 @@
 rem LittleJS Build Script
-call node build.js
+call node build.js
+if %errorlevel% neq 0 (
+    echo Build failed with error level %errorlevel%
+    pause
+    exit /b %errorlevel%
+)

package/examples/starter/game.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+// show the LittleJS splash screen
+setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
 setTileFixBleedScale(.5);
@@ -43,7 +45,7 @@ function gameInit()
         // set tile data
         const tileIndex = 1;
         const direction = randInt(4)
-        const mirror = !randInt(2);
+        const mirror = randBool();
         const color = randColor();
         const data = new TileLayerData(tileIndex, direction, mirror, color);
         tileLayer.setData(pos, data);
@@ -71,7 +73,7 @@ function gameInit()
         .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
         .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
-    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.restitution = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 

package/examples/starter/index.html

@@ -7,18 +7,28 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1120></script>
-<script src=../../src/engineUtilities.js?1120></script>
-<script src=../../src/engineSettings.js?1120></script>
-<script src=../../src/engineObject.js?1120></script>
-<script src=../../src/engineDraw.js?1120></script>
-<script src=../../src/engineInput.js?1120></script>
-<script src=../../src/engineAudio.js?1120></script>
-<script src=../../src/engineTileLayer.js?1120></script>
-<script src=../../src/engineParticles.js?1120></script>
-<script src=../../src/engineMedals.js?1120></script>
-<script src=../../src/engineWebGL.js?1120></script>
-<script src=../../src/engine.js?1120></script>
+<script src=../../dist/littlejs.js?11212></script>
+
+<!-- LittleJS Engine Source
+<script src=../../src/engineDebug.js></script>
+<script src=../../src/engineUtilities.js></script>
+<script src=../../src/engineSettings.js></script>
+<script src=../../src/engineObject.js></script>
+<script src=../../src/engineDraw.js></script>
+<script src=../../src/engineInput.js></script>
+<script src=../../src/engineAudio.js></script>
+<script src=../../src/engineTileLayer.js></script>
+<script src=../../src/engineParticles.js></script>
+<script src=../../src/engineMedals.js></script>
+<script src=../../src/engineWebGL.js></script>
+<script src=../../src/engine.js></script>
+<script src=../../plugins/box2d.js></script>
+<script src=../../plugins/box2d.wasm.js></script>
+<script src=../../plugins/drawUtilities.js></script>
+<script src=../../plugins/postProcess.js></script>
+<script src=../../plugins/uiSystem.js></script>
+<script src=../../plugins/zzfxm.js></script>
+-->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1120></script>
+<script src=game.js?11212></script>

package/examples/stress/index.html

@@ -102,7 +102,7 @@ function gameRender()
 {
     // track fps and update stats
     const frameTimeMS = Date.now();
-    fpsDisplay = LJS.lerp(.05, fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1));
+    fpsDisplay = LJS.lerp(fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1), .05);
     timeMS = frameTimeMS;
 
     // show stats 
@@ -163,5 +163,4 @@ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost,
 ///////////////////////////////////////////////////////////////////////////////
 // music - Depp Loop
 const music = new LJS.ZzFXMusic([[[.6,0,76,,,1,1,.5,,,,,.1,,,.06,,.5,.2,,-700],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
-
-</script>
+</script>

package/examples/style.css

@@ -0,0 +1,136 @@
+html, body
+{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+#container1
+{
+    height: 100%;
+    display: flex;
+    gap: 4px;
+}
+#container2
+{
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+#iframeContainer
+{
+    border: 2px solid;
+    background: #000;
+}
+iframe
+{
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+#selectExample
+{
+    flex-grow: 1;
+}
+.CodeMirror,
+#textareaCode
+{
+    flex-grow: 1;
+    padding: 5px;
+    resize: none;
+    color: #fff;
+    background: #000;
+    font-size: 20px;
+}
+#textareaConsole,
+#textareaError
+{
+    flex-grow: .3;
+    padding: 5px;
+    resize: none;
+    display: none;
+    color:#f22;
+    background: #111;
+}
+#textareaConsole
+{
+    color: #ff0;
+}
+#container3
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+#titleInfo
+{
+    margin: 5px;
+    text-align: center;
+    font-size: 40px;
+}
+#exampleInfo
+{
+    margin: 0px;
+    text-align: center;
+    font-size: 20px;
+}
+#exampleLink
+{
+    margin: 0px;
+    text-align: center;
+    font-size: 20px;
+    display: inline-block;
+    align-self: center;
+}
+select
+{
+    color:#fff;
+    background-color: #111;
+    width:100%;
+}
+hr
+{
+    border: 1px solid #555;
+    margin:9px;
+}
+button
+{
+    color:#fff;
+    background-color: #111;
+    border: 1px solid #555;
+    margin:0px 4px;
+    padding: 2px 8px;
+    cursor: pointer;
+}
+button:disabled
+{
+    color: #aaa;
+    background-color: #666;
+    border-color: #666;
+}
+.error-line
+{
+    background-color: rgba(255, 0, 0, 0.15) !important;
+    border-left: 3px solid #ff0000 !important;
+}
+
+/*  LittleJS CodeMirror Theme */
+.cm-s-littlejs.CodeMirror { background: #080808; color: #aef; }
+.cm-s-littlejs div.CodeMirror-selected { background: #068; }
+.cm-s-littlejs .CodeMirror-gutters {background: #222; border-right: 0px;}
+.cm-s-littlejs .CodeMirror-linenumber { color: #aaa; }
+.cm-s-littlejs .CodeMirror-cursor { border-left: 2px solid #fff; }
+.cm-s-littlejs .cm-keyword { color: #6e1; }
+.cm-s-littlejs .cm-def { color: #fab; }
+.cm-s-littlejs .cm-operator { color: #1be; }
+.cm-s-littlejs .cm-property,
+.cm-s-littlejs span.cm-variable,
+.cm-s-littlejs span.cm-variable-2,
+.cm-s-littlejs span.cm-variable-3 { color: #ddd; }
+.cm-s-littlejs .cm-builtin,
+.cm-s-littlejs .cm-number { color: #e15; }
+.cm-s-littlejs .cm-comment { color:#888; font-style:italic; }
+.cm-s-littlejs .cm-string,
+.cm-s-littlejs .cm-string-2 { color:#fda; } 
+.cm-s-littlejs .CodeMirror-matchingbracket { background-color: #381 !important; }

package/examples/typescript/build.js

@@ -2,7 +2,6 @@
 
 const PROGRAM_NAME = 'game';
 const BUILD_FOLDER = 'build';
-const ROOT_FOLDER = 'examples/typescript';
 
 // Define TypeScript source files
 const tsSourceFiles = [
@@ -29,4 +28,4 @@ console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} se
 
 console.log(`Moving js files back to root...`);
 for(const file of jsSourceFiles)
-    fs.copyFileSync(`${BUILD_FOLDER}/${file}`, file);
+    fs.copyFileSync(`${BUILD_FOLDER}/${file}`, file);

package/examples/typescript/game.js

@@ -60,7 +60,7 @@ function gameInit() {
     .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
     .05, .5, true, true // fadeRate, randomness, collide, additive
     );
-    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.restitution = .3; // bounce when it collides
     particleEmitter.trailScale = 2; // stretch in direction of motion
 }
 ///////////////////////////////////////////////////////////////////////////////
@@ -97,4 +97,4 @@ function gameRenderPost() {
 }
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/game.ts

@@ -77,7 +77,7 @@ function gameInit()
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
         .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
-    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.restitution = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 

package/examples/typescript/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/uiSystem/game.js

@@ -10,9 +10,6 @@
 import * as LJS from '../../dist/littlejs.esm.js';
 const {vec2, hsl, tile} = LJS;
 
-// sound effects
-const sound_ui = new LJS.Sound([1,0]);
-
 // UI system
 let uiRoot, uiMenu;
 const getMenuVisible =()=> uiMenu.visible;
@@ -24,8 +21,11 @@ LJS.setCanvasPixelated(false);
 
 function createUI()
 {
+    LJS.uiSystem.defaultSoundPress = new LJS.Sound([1,0,220]);
+    LJS.uiSystem.defaultSoundClick = new LJS.Sound([1,0,440]);
+
     // setup root to attach all ui elements to
-    uiRoot = new LJS.UIObject();
+    uiRoot = new LJS.UIObject;
     const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
     uiInfo.textColor = LJS.WHITE;
@@ -33,7 +33,7 @@ function createUI()
     uiRoot.addChild(uiInfo);
 
     // setup example menu
-    uiMenu = new LJS.UIObject(vec2(0,450));
+    uiMenu = new LJS.UIObject(vec2(0,500));
     uiRoot.addChild(uiMenu);
     const uiBackground = new LJS.UIObject(vec2(0,0), vec2(450,580));
     uiBackground.lineWidth = 8;
@@ -47,7 +47,7 @@ function createUI()
     textTitle.lineColor = LJS.BLUE;
 
     // example multiline text
-    const textTest = new LJS.UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
@@ -57,12 +57,7 @@ function createUI()
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
     uiMenu.addChild(checkbox);
-    checkbox.onPress = ()=>
-    {
-        checkbox.checked = !checkbox.checked;
-        console.log('Checkbox clicked');
-        sound_ui.play(0,.5,checkbox.checked?4:1);
-    }
+    checkbox.onChange = ()=> console.log('Checkbox clicked');
 
     // text attached to checkbox
     const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
@@ -72,27 +67,16 @@ function createUI()
     const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
     uiMenu.addChild(scrollbar);
     scrollbar.onChange  = ()=> console.log('New scrollbar value:', scrollbar.value);
-    scrollbar.onPress   = ()=> sound_ui.play(0,.3,2);
-    scrollbar.onRelease = ()=> sound_ui.play(0,.3,4);
 
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onPress = ()=>
-    {
-        console.log('Button 1 clicked');
-        sound_ui.play();
-    }
+    button1.onClick = ()=> console.log('Button 1 clicked');
 
     // exit button
     const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
     uiMenu.addChild(button2);
-    button2.onPress = ()=>
-    {
-        console.log('Button 2 clicked');
-        sound_ui.play(0,.5,2);
-        setMenuVisible(false);
-    }
+    button2.onClick = ()=> setMenuVisible(false);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/uiSystem/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.12.4",
+  "version": "1.13.1",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",