littlejsengine 1.11.13 → 1.12.4

package/examples/breakoutTutorial/game.js

@@ -7,22 +7,26 @@
 
 'use strict';
 
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {vec2, rgb} = LJS;
+
 ///////////////////////////////////////////////////////////////////////////////
 
 // globals
 const levelSize = vec2(38, 20); // size of play area
 let score = 0; // start score at 0
 let ball; // keep track of ball object
-let paddle; // keep track of player's paddle
+let paddle; // keep track of player paddle
 
 // sound effects
-const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
-const sound_break = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
-const sound_start = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
+const sound_bounce = new LJS.Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
+const sound_break  = new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
+const sound_start  = new LJS.Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
 
 ///////////////////////////////////////////////////////////////////////////////
 
-class Paddle extends EngineObject
+class Paddle extends LJS.EngineObject
 {
     constructor()
     {
@@ -33,14 +37,14 @@ class Paddle extends EngineObject
 
     update()
     {
-        this.pos.x = mousePos.x; // move paddle to mouse
+        this.pos.x = LJS.mousePos.x; // move paddle to mouse
         
         // clamp paddle to level size
-        this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
+        this.pos.x = LJS.clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
     }
 }
 
-class Ball extends EngineObject 
+class Ball extends LJS.EngineObject 
 {
     constructor(pos)
     {
@@ -57,7 +61,7 @@ class Ball extends EngineObject
             return false;
 
         // speed up
-        const speed = min(1.04*this.velocity.length(), .5);
+        const speed = LJS.min(1.04*this.velocity.length(), .5);
         this.velocity = this.velocity.normalize(speed);
 
         // play bounce sound with pitch scaled by speed
@@ -70,7 +74,7 @@ class Ball extends EngineObject
             this.velocity = this.velocity.rotate(.3 * deltaX);
             
             // make sure ball is moving upwards with a minimum speed
-            this.velocity.y = max(-this.velocity.y, .2);
+            this.velocity.y = LJS.max(-this.velocity.y, .2);
             
             // prevent default collision code
             return false;
@@ -80,7 +84,7 @@ class Ball extends EngineObject
     }
 }
 
-class Wall extends EngineObject
+class Wall extends LJS.EngineObject
 {
     constructor(pos, size)
     {
@@ -88,11 +92,11 @@ class Wall extends EngineObject
 
         this.setCollision(); // make object collide
         this.mass = 0; // make object have static physics
-        this.color = new Color(0,0,0,0); // make object invisible
+        this.color = rgb(0,0,0,0); // make object invisible
     }
 }
 
-class Brick extends EngineObject
+class Brick extends LJS.EngineObject
 {
     constructor(pos, size)
     {
@@ -100,7 +104,7 @@ class Brick extends EngineObject
 
         this.setCollision(); // make object collide
         this.mass = 0; // make object have static physics
-        this.color = randColor(); // give brick a random color
+        this.color = LJS.randColor(); // give brick a random color
     }
 
     collideWithObject(o)              
@@ -111,14 +115,14 @@ class Brick extends EngineObject
 
         // create explosion effect
         const color = this.color;
-        new ParticleEmitter(
-            this.pos, 0,            // pos, angle
-            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emitCone
-            undefined,              // tileInfo
+        new LJS.ParticleEmitter(
+            this.pos, 0,             // pos, angle
+            this.size, .1, 200, 3.14,// emitSize, emitTime, emitRate, emitCone
+            undefined,               // tileInfo
             color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
             .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, .95, .4, PI,   // damp, angleDamp, gravity, cone
+            .99, .95, .4, 3.14, // damp, angleDamp, gravity, cone
             .1, .5, false, true // fade, randomness, collide, additive
         );
 
@@ -129,15 +133,17 @@ class Brick extends EngineObject
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // setup camera and canvas
+    LJS.setCameraPos(levelSize.scale(.5));   // center camera in level
+    LJS.setCanvasFixedSize(vec2(1280, 720)); // use a 720p fixed size canvas
+    
     // create bricks
     for(let x=2;  x<=levelSize.x-2; x+=2)
     for(let y=12; y<=levelSize.y-2; y+=1)
         new Brick(vec2(x,y), vec2(2,1)); // create a brick
 
-    cameraPos = levelSize.scale(.5); // center camera in level
-    canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
-
-    paddle = new Paddle; // create player's paddle
+    // create player paddle
+    paddle = new Paddle;
 
     // create walls
     new Wall(vec2(-.5,levelSize.y/2),            vec2(1,100)) // top
@@ -154,9 +160,10 @@ function gameUpdate()
         ball.destroy();
         ball = 0;
     }
-    if (!ball && mouseWasPressed(0)) // if there is no ball and left mouse is pressed
+    if (!ball && LJS.mouseWasPressed(0))
     {
-        ball = new Ball(cameraPos); // create a ball
+        // spawn new ball if there is no ball and left mouse pressed
+        ball = new Ball(LJS.cameraPos); // create a ball
         sound_start.play(); // play start sound
     }
 }
@@ -169,16 +176,16 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    drawRect(cameraPos, vec2(100), new Color(.5,.5,.5)); // draw background
-    drawRect(cameraPos, levelSize, new Color(.1,.1,.1)); // draw level boundary
+    LJS.drawRect(LJS.cameraPos, vec2(100), rgb(.5,.5,.5)); // draw background
+    LJS.drawRect(LJS.cameraPos, levelSize, rgb(.1,.1,.1)); // draw level boundary
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    drawTextScreen("Score " + score, vec2(mainCanvasSize.x/2, 70), 50); // show score
+    LJS.drawTextScreen("Score " + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/breakoutTutorial/index.html

@@ -5,6 +5,4 @@
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
-
-<script src=../../dist/littlejs.js?1117></script>
-<script src=game.js?1117></script>
+<script src=game.js type=module></script>

package/examples/empty/game.js

@@ -6,6 +6,9 @@
 
 'use strict';
 
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
@@ -39,9 +42,9 @@ function gameRenderPost()
 {
     // called after objects are rendered
     // draw effects or hud that appear above all objects
-    drawTextScreen('Hello World!', mainCanvasSize.scale(.5), 80);
+    LJS.drawTextScreen('Hello World!', LJS.mainCanvasSize.scale(.5), 80);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/empty/index.html

@@ -2,6 +2,4 @@
 <title>LittleJS Hello World Demo</title>
 <meta charset=utf-8>
 </head><body>
-
-<script src=../../dist/littlejs.js></script>
-<script src=game.js></script>
+<script src=game.js type=module></script>

package/examples/htmlMenu/game.js

@@ -1,18 +1,19 @@
 /*
     Little JS HTML Menu Example Project
     - Setup a simple html menu system
-    - Menu can be toggled
+    - Menu can be opened and closed
     - Pauses game when menu is visible
     - Shows several input types
 */
 
 'use strict';
 
-// show the LittleJS splash screen
-setShowSplashScreen(true);
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {vec2, hsl, tile} = LJS;
 
 // sound effects
-const sound_click = new Sound([1,.5]);
+const sound_click = new LJS.Sound([1,.5]);
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -21,12 +22,17 @@ const getMenuVisible = ()=> menu.style.visibility != 'hidden';
 function setMenuVisible(visible)
 {
     menu.style.visibility = visible ? 'visible' : 'hidden';
-    setInputPreventDefault(!visible); // don't prevent default when menu is visible
+    LJS.setInputPreventDefault(!visible); // don't prevent default when menu is visible
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    button_test.onclick = function() { alert('Button was clicked!'); }
+    button_exitMenu.onclick = function() { setMenuVisible(false); }
+    input_test.onchange = function() { alert('New text: ' + this.value); }
+    input_rangeTest.onchange = function() { alert('New value: ' + this.value); }
+
     // show menu for demo
     setMenuVisible(true);
 }
@@ -35,31 +41,31 @@ function gameInit()
 function gameUpdate()
 {
     // play sound when mouse is pressed
-    if (mouseWasPressed(0))
-        sound_click.play(mousePos);
+    if (LJS.mouseWasPressed(0))
+        sound_click.play(LJS.mousePos);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost()
 {
-    // pause game when menu is visible
-    const menuVisible = getMenuVisible();
-    paused = menuVisible;
-
-    // toggle menu visibility
-    if (keyWasPressed('KeyM'))
+    // open menu visibility
+    if (LJS.keyWasPressed('KeyM'))
         setMenuVisible(true);
+
+    // pause game when menu is visible
+    LJS.setPaused(getMenuVisible());
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
     // test game rendering
-    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
+    LJS.drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
     for(let i=0; i<1e3; ++i)
     {
+        const time = LJS.time;
         const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
-        drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
+        LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
     }
 }
 
@@ -67,11 +73,11 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS HTML Menu Example\nM = Toggle menu', 
-        vec2(mainCanvasSize.x/2, 70), 60,   // position, size
-        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
+    LJS.drawTextScreen('LittleJS HTML Menu Example\nM = Open menu', 
+        vec2(LJS.mainCanvasSize.x/2, 70), 60, // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));           // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/htmlMenu/index.html

@@ -27,7 +27,6 @@
     visibility: hidden;
 }
 </style>
-
 </head><body>
 
 <!-- setup html menu system -->
@@ -35,13 +34,12 @@
 <div id="menu" class="menuDiv">
 <b style="font-size:50px">Test Menu</b>
 This is an example menu using html elements.
-<input value="Test Input" onchange="alert('New text: ' + this.value)">
-<input type="range" onchange="alert('New value: ' + this.value)">
-<button onclick="alert('Button was clicked!')">Test Button</button>
-<button onclick="setMenuVisible(false)">Exit Menu</button>
+<input id="input_test" value="Test Input">
+<input id="input_rangeTest" type="range">
+<button id="button_test">Test Button</button>
+<button id="button_exitMenu">Exit Menu</button>
 </div>
 </div>
 
 <!-- Add your game scripts here -->
-<script src=../../dist/littlejs.js?1117></script>
-<script src=game.js?1117></script>
+<script src=game.js type=module></script>

package/examples/index.html

@@ -163,9 +163,8 @@ for (const example of exampleList)
     selectExample.add(o);
 }
 
-// select first option
+// set the selected example from the URL hash
 selectExample.selectedIndex = location.hash.split`#`[1] | 0
-
 setExample();
 
 onresize = () =>
@@ -305,4 +304,4 @@ function setErrorMessage(message='')
 
 </script>
 </body>
-</html>
+</html>

package/examples/module/game.js

@@ -6,22 +6,22 @@
 
 'use strict';
 
-// import module
-import * as LittleJS from '../../dist/littlejs.esm.js';
-const {tile, vec2, hsl} = LittleJS;
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {tile, vec2, hsl} = LJS;
 
 // show the LittleJS splash screen
-LittleJS.setShowSplashScreen(true);
+LJS.setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
-LittleJS.setTileFixBleedScale(.5);
+LJS.setTileFixBleedScale(.5);
 
 // sound effects
-const sound_click = new LittleJS.Sound([1,.5]);
+const sound_click = new LJS.Sound([1,.5]);
 
 // medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
+const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LJS.medalsInit('Hello World');
 
 // game variables
 let particleEmitter;
@@ -30,46 +30,44 @@ let particleEmitter;
 function gameInit()
 {
     // create tile collision and visible tile layer
-    const tileCollisionSize = vec2(32, 16);
-    LittleJS.initTileCollision(tileCollisionSize);
     const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32,16));
 
     // get level data from the tiles image
-    const mainContext = LittleJS.mainContext;
-    const tileImage = LittleJS.textureInfos[0].image;
+    const mainContext = LJS.mainContext;
+    const tileImage = LJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
     const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
-    for (pos.x = tileCollisionSize.x; pos.x--;)
-    for (pos.y = tileCollisionSize.y; pos.y--;)
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
     {
         // check if this pixel is set
-        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
         if (!imageData[4*i])
             continue;
         
         // set tile data
         const tileIndex = 1;
-        const direction = LittleJS.randInt(4)
-        const mirror = !LittleJS.randInt(2);
-        const color = LittleJS.randColor();
-        const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+        const direction = LJS.randInt(4)
+        const mirror = !LJS.randInt(2);
+        const color = LJS.randColor();
+        const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
         tileLayer.setData(pos, data);
-        LittleJS.setTileCollisionData(pos, 1);
+        tileLayer.setCollisionData(pos);
     }
 
     // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
-    LittleJS.setCameraScale(32);
+    LJS.setCameraPos(tileLayer.size.scale(.5));
+    LJS.setCameraScale(32);
 
     // enable gravity
-    LittleJS.setGravity(-.01);
+    LJS.setGravity(vec2(0,-.01));
 
     // create particle emitter
-    particleEmitter = new LittleJS.ParticleEmitter(
+    particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
         1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
         tile(0, 16),                // tileIndex, tileSize
@@ -86,14 +84,14 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (LittleJS.mouseWasPressed(0))
+    if (LJS.mouseWasPressed(0))
     {
         // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
+        sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
         particleEmitter.colorStartA = hsl();
-        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
@@ -102,8 +100,8 @@ function gameUpdate()
     }
 
     // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmitter.pos = LittleJS.mousePos;
+    if (LJS.mousePosScreen.x)
+        particleEmitter.pos = LJS.mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -116,19 +114,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
     
     // draw the logo as a tile
-    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
+    LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with Modules', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
+    LJS.drawTextScreen('LittleJS with Modules', vec2(LJS.mainCanvasSize.x/2, 80), 80);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -9,18 +9,20 @@ input { width:99px; }
 button { margin:1px; }
 </style>
 </head><body>
+<script type=module>
 
-<script src=../../dist/littlejs.js?1117></script>
-<script>
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {vec2} = LJS;
 
 'use strict';
 
 // fix texture bleeding by shrinking tiles slightly
-tileFixBleedScale = .5;
+LJS.setTileFixBleedScale(.5);
 
 let particleEditor = 0, particleSystem, particleSystemDiv, particleSystemCode;
 let inputExpand;
-let restartTimer = new Timer();
+let restartTimer = new LJS.Timer();
 const storagePrefix = 'particles_';
 
 const particleSettings = [];
@@ -62,8 +64,8 @@ function makeEmitter()
 {
     if (particleSystem)
         particleSystem.destroy();
-    particleSystem = new ParticleEmitter(cameraPos);
-    particleSystem.tileInfo = tile();
+    particleSystem = new LJS.ParticleEmitter(LJS.cameraPos);
+    particleSystem.tileInfo = LJS.tile();
     particleSystem.emitConeAngle =
     particleSystem.particleConeAngle = 3.14;
 }
@@ -72,8 +74,8 @@ function makeEmitter()
 function gameInit()
 {
     makeEmitter();
-    gravity = -.01;
-    cameraScale = 64;
+    LJS.setGravity(vec2(0,-.01));
+    LJS.setCameraScale(64);
 
     const div = particleSystemDiv = document.createElement('div');
     div.innerHTML = '<big><b>LittleJS Particle Tool';
@@ -164,7 +166,7 @@ function gameInit()
                 return;
             makeEmitter();
             updateInputs();
-            cameraScale = 50;
+            LJS.setCameraScale(50);
         }
     }
     {
@@ -214,7 +216,7 @@ function updateParticles(shouldUpdateInput)
         const inputFloat = parseFloat(input.value) || 0;
         if (type == 'color')
         {
-            const color = new Color().setHex(input.value);
+            const color = new LJS.Color().setHex(input.value);
             particleSystem[name].r = color.r;
             particleSystem[name].g = color.g;
             particleSystem[name].b = color.b;
@@ -222,28 +224,28 @@ function updateParticles(shouldUpdateInput)
         else if (type == 'alpha')
         {
             if (name == 'colorStartA_alpha')
-                particleSystem.colorStartA.a = clamp(inputFloat);
+                particleSystem.colorStartA.a = LJS.clamp(inputFloat);
             else if (name == 'colorStartB_alpha')
-                particleSystem.colorStartB.a = clamp(inputFloat);
+                particleSystem.colorStartB.a = LJS.clamp(inputFloat);
             else if (name == 'colorEndA_alpha')
-                particleSystem.colorEndA.a   = clamp(inputFloat);
+                particleSystem.colorEndA.a   = LJS.clamp(inputFloat);
             else if (name == 'colorEndB_alpha')
-                particleSystem.colorEndB.a   = clamp(inputFloat);
+                particleSystem.colorEndB.a   = LJS.clamp(inputFloat);
         }
         else if (name == 'tileIndex')
         {
             const tileIndex = parseInt(input.value);
             particleSystem.tileIndex = tileIndex
-            particleSystem.tileInfo = tile(tileIndex, particleSystem.tileInfo.size);
+            particleSystem.tileInfo = LJS.tile(tileIndex, particleSystem.tileInfo.size);
         }
         else if (name == 'tileSize')
             particleSystem.tileInfo.size = vec2(parseInt(input.value));
         else if (type == 'checkbox')
             particleSystem[name] = input.checked ? 1 : 0;
         else if (name == 'emitRate')
-            particleSystem[name] = min(inputFloat,1e3);
+            particleSystem[name] = LJS.min(inputFloat,1e4);
         else
-            particleSystem[name] = clamp(inputFloat, setting.min, setting.max);
+            particleSystem[name] = LJS.clamp(inputFloat, setting.min, setting.max);
     }
     shouldUpdateInput && updateInputs()
 }
@@ -367,11 +369,14 @@ function gameUpdate()
 
     if (document.activeElement == document.body)
     {
-        particleSystem.pos = mouseIsDown(0) ? mousePos : vec2();
-        if (mouseWheel)
+        particleSystem.pos = LJS.mouseIsDown(0) ? LJS.mousePos : vec2();
+        if (LJS.mouseWheel)
         {
-            cameraScale -= sign(mouseWheel)*cameraScale/5;
-            cameraScale = clamp(cameraScale, 10, 300);
+            // zoom camera
+            let cameraScale = LJS.cameraScale;
+            cameraScale -= LJS.sign(LJS.mouseWheel)*cameraScale/5;
+            cameraScale = LJS.clamp(cameraScale, 10, 300);
+            LJS.setCameraScale(cameraScale);
         }
     }
 }
@@ -394,6 +399,6 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
 
 </script>