littlejsengine 1.8.6 → 1.8.8

package/README.md

@@ -1,4 +1,8 @@
-# ![LittleJS Logo](examples/favicon.png) LittleJS - The Tiny JavaScript Game Engine That Can
+# ![LittleJS Logo](examples/favicon.png) LittleJS - The Tiny Fast JavaScript Game Engine
+
+<div align="center">
+    
+![LittleJS Screenshot](examples/logo.png)
 
 [![NPM Package][npm]][npm-url]
 [![Build Size][build-size]][build-size-url]
@@ -6,9 +10,11 @@
 [![DeepScan][deepscan]][deepscan-url]
 [![Discord][discord]][discord-url]
 
+</div>
+
 ## 🚂 All aboard!
 
-LittleJS is a lightweight open source HTML5 game engine for modern web development.
+LittleJS is a fast lightweight open source HTML5 game engine for modern web development.
 It's small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling.
 The code is very clean and well documented with some fun examples to get you started. Choo-Choo! 🚂
 
@@ -31,7 +37,7 @@ LittleJS is a small but powerful game engine with many features and no dependenc
 ### ✨ Graphics
 
 - Super fast sprite and tile map rendering engine with WebGL
-- Update and render over 10,000 objects at a solid 60fps
+- Update and render well over 10,000 sprites at a solid 60fps
 - Apply [Shadertoy](https://www.shadertoy.com) compatible shaders for post-processing effects
 - Robust particle effect system and [effect design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
 

package/build/littlejs.d.ts

@@ -204,6 +204,11 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Settings */
     export let fontDefault: string;
+    /** Enable to show the LittleJS splash screen be shown on startup
+     *  @type {Boolean}
+     *  @default
+     *  @memberof Settings */
+    export let showSplashScreen: boolean;
     /** Default size of tiles in pixels
      *  @type {Vector2}
      *  @default Vector2(16,16)
@@ -375,6 +380,10 @@ declare module "littlejs.esm" {
      *  @param {String} font
      *  @memberof Settings */
     export function setFontDefault(font: string): void;
+    /** Set if the LittleJS splash screen be shown on startup
+     *  @param {Boolean} show
+     *  @memberof Settings */
+    export function setShowSplashScreen(show: boolean): void;
     /** Set if webgl rendering is enabled
      *  @param {Boolean} enable
      *  @memberof Settings */

package/build/littlejs.esm.js

@@ -1008,11 +1008,10 @@ class Color
      * @return {Number} */
     rgbaInt()  
     {
-        const toByte = (c)=> clamp(c)*255|0;
-        const r = toByte(this.r);
-        const g = toByte(this.g)<<8;
-        const b = toByte(this.b)<<16;
-        const a = toByte(this.a)<<24;
+        const r = clamp(this.r)*255|0;
+        const g = clamp(this.g)*255<<8;
+        const b = clamp(this.b)*255<<16;
+        const a = clamp(this.a)*255<<24;
         return r + g + b + a;
     }
 }
@@ -1120,6 +1119,12 @@ let canvasPixelated = 1;
  *  @memberof Settings */
 let fontDefault = 'arial';
 
+/** Enable to show the LittleJS splash screen be shown on startup
+ *  @type {Boolean}
+ *  @default
+ *  @memberof Settings */
+let showSplashScreen = 0;
+
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
@@ -1353,6 +1358,11 @@ function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
  *  @memberof Settings */
 function setFontDefault(font) { fontDefault = font; }
 
+/** Set if the LittleJS splash screen be shown on startup
+ *  @param {Boolean} show
+ *  @memberof Settings */
+function setShowSplashScreen(show) { showSplashScreen = show; }
+
 /** Set if webgl rendering is enabled
  *  @param {Boolean} enable
  *  @memberof Settings */
@@ -1944,7 +1954,7 @@ let mainCanvasSize = vec2();
  *  @memberof Draw */
 let textureInfos = [];
 
-// Engine internal variables not exposed to documentation
+// Keep track of how many draw calls there were each frame for debugging
 let drawCount;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4392,7 +4402,7 @@ let glCanvas;
 let glContext;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -4429,10 +4439,10 @@ function glInit()
     );
 
     // init buffers
-    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
+    glVertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
+    glPositionData = new Float32Array(glVertexData);
+    glColorData = new Uint32Array(glVertexData);
     glArrayBuffer = glContext.createBuffer();
-    glPositionData = new Float32Array(vertexData);
-    glColorData = new Uint32Array(vertexData);
     glBatchCount = 0;
 }
 
@@ -4460,7 +4470,7 @@ function glPreRender()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture coords
+    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture
     initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
     initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
@@ -4548,6 +4558,7 @@ function glCreateTexture(image)
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
+
     return texture;
 }
 
@@ -4562,8 +4573,7 @@ function glFlush()
     glContext.enable(gl_BLEND);
 
     // draw all the sprites in the batch and reset the buffer
-    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, 
-        glPositionData.subarray(0, glBatchCount * gl_INDICIES_PER_VERT));
+    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glVertexData);
     glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
     glBatchCount = 0;
     glBatchAdditive = glAdditive;
@@ -4618,11 +4628,11 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
     // setup 2 triangle strip quad
     for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
     {
-        let j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
+        const j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
+        glPositionData[offset++] = positionData[j+0];
+        glPositionData[offset++] = positionData[j+1];
+        glPositionData[offset++] = positionData[j+2];
+        glPositionData[offset++] = positionData[j+3];
         glColorData[offset++] = rgba; 
         glColorData[offset++] = rgbaAdditive;
     }
@@ -4823,7 +4833,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.6';
+const engineVersion = '1.8.8';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -5006,7 +5016,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     }
 
     // setup html
-    const styleBody = 
+     const styleBody = 
         'margin:0;overflow:hidden;' + // fill the window
         'background:#000;' +          // set background color
         'touch-action:none;' +        // prevent mobile pinch to resize
@@ -5027,14 +5037,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
     // set canvas style
     const styleCanvas = 
-        'position:absolute;' +                               // position
-        'top:50%;left:50%;transform:translate(-50%,-50%);' + // center
-        (canvasPixelated?'image-rendering:pixelated':'');    // pixelated rendering
+        'position:absolute;' +                             // position
+        'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
     (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
     
-    // load all of the images
-    Promise.all(imageSources.map((src, textureIndex)=>
-        new Promise((resolve, reject)=> 
+    // create promises for loading images
+    const promises = imageSources.map((src, textureIndex)=>
+        new Promise(resolve => 
         {
             const image = new Image;
             image.onerror = image.onload = ()=> 
@@ -5044,7 +5053,24 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             }
             image.src = src;
         })
-    )).then(()=> 
+    )
+
+    // draw splash screen
+    showSplashScreen && promises.push(new Promise(resolve => 
+    {
+        let t = 0;
+        console.log(`LittleJS Engine v${engineVersion}`);
+        updateSplash();
+        function updateSplash()
+        {
+            clearInput();
+            drawEngineSplashScreen(t+=.01);
+            t>1 ? resolve() : setTimeout(updateSplash,16);
+        }
+    }));
+
+    // load all of the images
+    Promise.all(promises).then(()=> 
     {
         // start the engine
         gameInit();
@@ -5122,6 +5148,167 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
     }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// LittleJS splash screen and logo
+
+function drawEngineSplashScreen(t)
+{
+    // background
+    const grayscale = 0;
+    const x = mainContext;
+    const w = mainCanvas.width = innerWidth;
+    const h = mainCanvas.height = innerHeight;
+    const p3 = percent(t, 1, .8);
+    const p4 = percent(t, 0, .5);
+    const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
+    g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3));
+    g.addColorStop(1,hsl(0,0,0,p3));
+    x.save();
+    x.fillStyle = g;
+    x.fillRect(0,0,w,h);
+
+    // logo - fade in and out
+    const rect = (X, Y, W, H, C)=>
+    {
+        x.beginPath();
+        x.rect(X,Y,W,C?H*p:H);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const line = (X, Y, Z, W)=>
+    {
+        x.beginPath();
+        x.lineTo(X,Y);
+        x.lineTo(Z,W);
+        x.stroke();
+    };
+    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+    {
+        const D = (A+B)/2, E = p*(B-A)/2;
+        x.beginPath();
+        F && x.lineTo(X,Y);
+        x.arc(X,Y,R,D-E,D+E);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const color = (c=0, l=0) =>
+        hsl([.98,.3,.57,.14][c%4]-10,grayscale?0:.8,[0,.3,.5,.8,.9][l]);
+    const alpha = wave(1,1,t);
+    const p = percent(alpha, .1, .5);
+
+    // setup
+    x.translate(w/2,h/2);
+    const size = min(6, min(w,h)/99); // fit to screen
+    x.scale(size,size);
+    x.translate(-40,-35);
+    x.lineJoin = x.lineCap = 'round';
+    x.lineWidth = 1+p;
+
+    // drawing effect
+    const p2 = percent(alpha,.1,1);
+    x.setLineDash([99*p2,99]);
+
+    // cab top
+    rect(7,17,18,-8,color(2,2));
+    rect(7,9,18,4,color(2,3));
+    rect(25,9,8,8,color(2,1));
+    rect(25,9,-18,8);
+    rect(25,9,8,8);
+
+    // cab
+    rect(25,17,7,22,color());
+    rect(11,40,14,-23,color(1,1));
+    rect(11,17,14,17,color(1,2));
+    rect(11,17,14,9,color(1,3));
+    rect(15,31,6,-9,color(2,2));
+    circle(15,23,5,0,PI/2,color(2,4),1);
+    rect(25,17,-14,23);
+    rect(21,22,-6,9);
+
+    // little stack
+    rect(37,14,9,6,color(3,2));
+    rect(37,14,4,6,color(3,3));
+    rect(37,14,9,6);
+
+    // big stack
+    rect(50,20,10,-10,color(0,1));
+    rect(50,20,6,-10,color(0,2));
+    rect(50,20,3,-10,color(0,3));
+    rect(50,10,10,10);
+    circle(55,2,11,.5,PI-.5,color(3,3));
+    circle(55,2,11,.5,PI/2,color(3,2),1);
+    circle(55,2,11,.5,PI-.5);
+    rect(45,7,20,-7,color(0,2));
+    rect(45,0,20,3,color(0,3));
+    rect(45,0,20,7);
+
+    // engine
+    for (let i=5; i--;)
+    {
+        // stagger radius to fix slight seam
+        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+    }
+
+    // engine outline
+    circle(36,30,10,PI/2,PI*3/2);
+    circle(47,30,10,PI/2,PI*3/2);
+    circle(60,30,10);
+    line(36,20,60,20);
+
+    // engine front light
+    circle(60,30,4,PI,3*PI,color(3,2)); 
+    circle(60,30,4,PI,2*PI,color(3,3));
+    circle(60,30,4,PI,3*PI);
+
+    // front brush
+    for (let i=6; i--;)
+    {
+        x.beginPath();
+        x.lineTo(53,54);
+        x.lineTo(53,40);
+        x.lineTo(53+(1+i*2.9)*p,40);
+        x.lineTo(53+(4+i*3.5)*p,54);
+        x.fillStyle = color(0,i%2+2);
+        x.fill() || i%2 && x.stroke();
+    }
+
+    // wheels
+    rect(5,40,9,6,color());
+    rect(15,54,38,-14,color())
+    for (let i=3; i--;)
+    for (let j=2; j--;)
+    {
+        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+        x.stroke();
+        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+        x.stroke();
+    }
+    line(6,40,68,40) // center
+    line(77,54,4,54) // bottom
+
+    // text
+    const s = engineName;
+    x.font = '900 16px arial';
+    x.textAlign = 'center';
+    x.textBaseline = 'top';
+    x.lineWidth = 1+p*3
+    let w2 = 0;
+    for (let i=0; i<s.length; ++i)
+        w2 += x.measureText(s[i]).width;
+    for (let j=2; j--;)
+    for (let i=0, X=41-w2/2; i<s.length; ++i)
+    {
+        x.fillStyle = color(i,grayscale?3:2);
+        const w = x.measureText(s[i]).width;
+        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+        X += w;
+    }
+
+    x.restore();
 }
 
 /** 
@@ -5169,6 +5356,7 @@ export {
 	canvasFixedSize,
 	canvasPixelated,
 	fontDefault,
+	showSplashScreen,
 	tileSizeDefault,
 	tileFixBleedScale,
 	enablePhysicsSolver,
@@ -5206,6 +5394,7 @@ export {
 	setCanvasFixedSize,
 	setCanvasPixelated,
 	setFontDefault,
+	setShowSplashScreen,
 	setGlEnable,
 	setGlOverlay,
 	setTileSizeDefault,