littlejsengine 1.9.1 → 1.9.2

package/examples/electron/game.js

@@ -1,11 +1,15 @@
 /*
-    Little JS Electron Demo
-    - A simple starter project
-    - Builds to an executable with Electron
+    Little JS Electron Starter Project
+    - A simple starter project for LittleJS
+    - Demos all the main engine features
+    - Builds to an Electron app
 */
 
 'use strict';
 
+// show the LittleJS splash screen
+setShowSplashScreen(true);
+
 // sound effects
 const sound_click = new Sound([1,.5]);
 
@@ -14,59 +18,61 @@ const medal_example = new Medal(0, 'Example Medal', 'Welcome to LittleJS!');
 medalsInit('Hello World');
 
 // game variables
-let particleEmiter;
-
-// show the LittleJS splash screen
-setShowSplashScreen(true);
+let particleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
     // create tile collision and visible tile layer
-    initTileCollision(vec2(32, 16));
+    initTileCollision(vec2(32,16));
     const pos = vec2();
     const tileLayer = new TileLayer(pos, tileCollisionSize);
 
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const tileImage = textureInfos[0].image;
-    mainContext.drawImage(tileImage, 0, 0);
+    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--;)
     {
-        const imageData = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
-        if (imageData[0])
-        {
-            const tileIndex = 1;
-            const direction = randInt(4)
-            const mirror = randInt(2);
-            const color = randColor();
-            const data = new TileLayerData(tileIndex, direction, mirror, color);
-            tileLayer.setData(pos, data);
-            setTileCollisionData(pos, 1);
-        }
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        if (!imageData[4*i])
+            continue;
+        
+        // set tile data
+        const tileIndex = 1;
+        const direction = randInt(4)
+        const mirror = randInt(2);
+        const color = randColor();
+        const data = new TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        setTileCollisionData(pos, 1);
     }
+
+    // draw tile layer with new data
     tileLayer.redraw();
 
-    // move camera to center of collision
-    cameraPos = tileCollisionSize.scale(.5);
+    // setup camera
+    cameraPos = vec2(16,8);
+    cameraScale = 48;
 
     // enable gravity
     gravity = -.01;
 
     // create particle emitter
-    particleEmiter = new ParticleEmitter(
-        vec2(16), 0,                            // emitPos, emitAngle
-        1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
-        tile(0, 16),                            // tileIndex, tileSize
-        new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
-        new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+    particleEmitter = new ParticleEmitter(
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, PI,              // emitSize, emitTime, emitRate, emiteCone
+        tile(0, 16),                // tileIndex, tileSize
+        hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, PI,        // damping, angleDamping, gravityScale, cone
         .05, .5, 1, 1         // fadeRate, randomness, collide, additive
     );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -78,10 +84,10 @@ function gameUpdate()
         sound_click.play(mousePos);
 
         // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1,0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1,0);
+        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartB = randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
         // unlock medals
         medal_example.unlock();
@@ -89,7 +95,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (mousePosScreen.x)
-        particleEmiter.pos = mousePos;
+        particleEmitter.pos = mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -102,14 +108,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    drawRect(cameraPos, tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+    drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, 0);
+    
+    // draw the logo as a tile
+    drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS Electron Demo', vec2(mainCanvasSize.x/2, 80), 80);
+    drawTextScreen('LittleJS Electron Demo', 
+        vec2(mainCanvasSize.x/2, 70), 80,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/electron/index.html

@@ -6,7 +6,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../build/littlejs.js?1812></script>
+<script src=../../dist/littlejs.js?192></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1812></script>
+<script src=game.js?192></script>

package/examples/empty/index.html

@@ -2,5 +2,5 @@
 <title>Little JS Hello World Demo</title>
 </head><body>
 
-<script src=../../build/littlejs.js></script>
+<script src=../../dist/littlejs.js></script>
 <script src=game.js></script>

package/examples/js13k/build.js

@@ -10,7 +10,7 @@ const PROGRAM_NAME = 'game';
 const BUILD_FOLDER = 'build';
 const sourceFiles =
 [
-    '../../build/littlejs.release.js',
+    '../../dist/littlejs.release.js',
     'game.js',
     // add your game's files here
 ];

package/examples/js13k/game.js

@@ -1,6 +1,7 @@
 /*
     LittleJS JS13K Starter Game
     - For size limited projects
+    - Includes all core engine features
     - Builds to 7kb zip file
 */
 
@@ -19,7 +20,7 @@ let particleEmitter;
 function gameInit()
 {
     // create tile collision and visible tile layer
-    initTileCollision(vec2(32, 16));
+    initTileCollision(vec2(32,16));
     const pos = vec2();
     const tileLayer = new TileLayer(pos, tileCollisionSize);
 
@@ -48,19 +49,19 @@ function gameInit()
     // draw tile layer with new data
     tileLayer.redraw();
 
-    // move camera to center of collision
-    cameraPos = tileCollisionSize.scale(.5);
+    // setup camera
+    cameraPos = vec2(16,8);
 
     // enable gravity
     gravity = -.01;
 
     // create particle emitter
     particleEmitter = new ParticleEmitter(
-        vec2(16), 0,                            // emitPos, emitAngle
-        1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
-        tile(0, 16),                            // tileIndex, tileSize
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, PI,              // emitSize, emitTime, emitRate, emiteCone
+        tile(0, 16),                // tileIndex, tileSize
         new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
-        new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+        new Color(0,0,0,0), new Color(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, PI,        // damping, angleDamping, gravityScale, cone
         .05, .5, 1, 1         // fadeRate, randomness, collide, additive
@@ -99,14 +100,14 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    drawRect(cameraPos, tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+    drawRect(vec2(16,8), vec2(20,14), new Color(.6,.6,.6), 0, 0);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS JS13K Project', vec2(mainCanvasSize.x/2, 80), 80);
+    drawTextScreen('LittleJS JS13K Demo', vec2(mainCanvasSize.x/2, 70), 80);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/js13k/index.html

@@ -1,18 +1,18 @@
 <head><title>LittleJS JS13K Project</title></head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1812></script>
-<script src=../../src/engineUtilities.js?1812></script>
-<script src=../../src/engineSettings.js?1812></script>
-<script src=../../src/engineObject.js?1812></script>
-<script src=../../src/engineDraw.js?1812></script>
-<script src=../../src/engineInput.js?1812></script>
-<script src=../../src/engineAudio.js?1812></script>
-<script src=../../src/engineTileLayer.js?1812></script>
-<script src=../../src/engineParticles.js?1812></script>
-<script src=../../src/engineMedals.js?1812></script>
-<script src=../../src/engineWebGL.js?1812></script>
-<script src=../../src/engine.js?1812></script>
+<script src=../../src/engineDebug.js?192></script>
+<script src=../../src/engineUtilities.js?192></script>
+<script src=../../src/engineSettings.js?192></script>
+<script src=../../src/engineObject.js?192></script>
+<script src=../../src/engineDraw.js?192></script>
+<script src=../../src/engineInput.js?192></script>
+<script src=../../src/engineAudio.js?192></script>
+<script src=../../src/engineTileLayer.js?192></script>
+<script src=../../src/engineParticles.js?192></script>
+<script src=../../src/engineMedals.js?192></script>
+<script src=../../src/engineWebGL.js?192></script>
+<script src=../../src/engine.js?192></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1812></script>
+<script src=game.js?192></script>

package/examples/module/game.js

@@ -7,8 +7,8 @@
 'use strict';
 
 // import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2, tile} = LittleJS;
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const {Vector2, Color, Timer, tile, vec2, hsl, rgb} = LittleJS;
 
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
@@ -21,62 +21,63 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 LittleJS.medalsInit('Hello World');
 
 // game variables
-let particleEmiter, gameTimer;
+let particleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
     // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = new Vector2;
-    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
 
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
     const tileImage = LittleJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
-    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
-    for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
+    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--;)
     {
-        const imageData = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
-        if (imageData[0])
-        {
-            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);
-            tileLayer.setData(pos, data);
-            LittleJS.setTileCollisionData(pos, 1);
-        }
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.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);
+        tileLayer.setData(pos, data);
+        LittleJS.setTileCollisionData(pos, 1);
     }
+
+    // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(48);
 
     // enable gravity
     LittleJS.setGravity(-.01);
 
     // create particle emitter
-    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0,9));
-    particleEmiter = new LittleJS.ParticleEmitter(
-        center, 0,                              // emitPos, emitAngle
-        1, 0, 500, Math.PI,                     // emitSize, emitTime, emitRate, emiteCone
-        LittleJS.tile(0, 16),                   // tileIndex, tileSize
-        new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
-        new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+    particleEmitter = new LittleJS.ParticleEmitter(
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emiteCone
+        tile(0, 16),                // tileIndex, tileSize
+        hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
-        .05, .5, 1, 1         // fadeRate, randomness, collide, additive
+        .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2;  // stretch in direction of motion
-
-    // start the game timer
-    gameTimer = new Timer;
-    gameTimer.set();
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -88,10 +89,10 @@ function gameUpdate()
         sound_click.play(LittleJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = LittleJS.randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1,0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1,0);
+        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
         // unlock medals
         medal_example.unlock();
@@ -99,7 +100,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (LittleJS.mousePosScreen.x)
-        particleEmiter.pos = LittleJS.mousePos;
+        particleEmitter.pos = LittleJS.mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -112,7 +113,10 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+    LittleJS.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));
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -9,7 +9,7 @@ button { margin:1px; }
 </style>
 </head><body>
 
-<script src=../../build/littlejs.js?1812></script>
+<script src=../../dist/littlejs.js?192></script>
 <script>
 
 'use strict';