littlejsengine 1.11.17 → 1.12.6

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?11115></script>
-<script src=game.js?11115></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

@@ -8,8 +8,12 @@
 
 'use strict';
 
+// 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]);
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -18,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);
 }
@@ -32,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;
-
     // open menu visibility
-    if (keyWasPressed('KeyM'))
+    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));
     }
 }
 
@@ -64,11 +73,11 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS HTML Menu Example\nM = Open 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?11115></script>
-<script src=game.js?11115></script>
+<script src=game.js type=module></script>

package/examples/index.html

@@ -122,7 +122,7 @@ const exampleList =
     new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
     new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
     new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
-    new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
+    new ExampleInfo('Blending', 'blending.js', 'How to use blending modes'),
     new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
     new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
     new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
@@ -130,12 +130,16 @@ const exampleList =
     new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
     new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
-    new ExampleInfo('Clock', 'clock.js', 'A simple clock showing the time'),
+    new ExampleInfo('Clock', 'clock.js', 'Simple clock showing the time'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use the tile layer object'),
-    new ExampleInfo('Platformer Game', 'platformer.js', 'A platformer jumping game'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'A top down adventure game'),
+    new ExampleInfo('Platformer Game', 'platformer.js', 'Platformer jumping game'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Rop down adventure game'),
     new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D view with tilted camera'),
-    new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game'),
+    new ExampleInfo('Pong Game', 'pong.js', 'Simple pong game'),
+    new ExampleInfo('Box2d Demo', 'box2d.js', 'Demo of the Box2D physics plugin'),
+    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Controllable vehicle using the Box2D physics plugin'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Example of the post processing plugin'),
+    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Simple example of LittleJS UI plugin'),
 
     new ExampleInfo('--- FULL EXAMPLES ---'),
     new ExampleInfo('Starter', 'starter', 'Clean starter project', true),
@@ -163,9 +167,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 = () =>
@@ -206,7 +209,7 @@ function codeInput()
     inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
 }
 
-function loadFile(filename, fullExample)
+async function loadFile(filename, fullExample)
 {
     textareaCode.disabled = fullExample;
     if (fullExample)
@@ -228,14 +231,18 @@ function loadFile(filename, fullExample)
         return;
     }
 
-    fetch(filename)
-        .then(response => {
-            if (!response.ok)
-                throw new Error('Could not load file: '+ filename);
-            return response.text();
-        })
-        .then(text => setCode(textareaCode.value = text, fullExample))
-        .catch(error => setErrorMessage(error.message));
+    try
+    {
+        const response = await fetch(filename);
+        if (!response.ok)
+            throw new Error('Could not load file: ' + filename);
+        const text = await response.text();
+        setCode(textareaCode.value = text, fullExample);
+    }
+    catch (error)
+    {
+        setErrorMessage(error.message);
+    }
 }
 
 function setCode(code, largeExample)
@@ -305,4 +312,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?11115 type=module></script>
+<script src=game.js type=module></script>