littlejsengine 1.8.5 → 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,12 +10,18 @@
 [![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! 🚂
 
+### 🚀 Join the First Ever LittleJS Game Jam
+
+*The LittleJS Game Jam will take place From Nov 11 to Dec 12! Unleash your creativity and develop amazing games using the LittleJS game engine. 🕹️🎮 [Sign up today and get more info about the jam on itch.io!](https://itch.io/jam/littlejs-game-jam)*
+
 <div align="center">
 
 ## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial/README.md)
@@ -27,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 */
@@ -795,9 +804,9 @@ declare module "littlejs.esm" {
          * @return {Boolean} */
         arrayCheck(arraySize: Vector2): boolean;
         /** Returns this vector expressed as a string
-         * @param {float} digits - precision to display
+         * @param {Number} digits - precision to display
          * @return {String} */
-        toString(digits?: float): string;
+        toString(digits?: number): string;
     }
     /**
      * Color object (red, green, blue, alpha) with some helpful functions
@@ -1225,7 +1234,7 @@ declare module "littlejs.esm" {
      *  @return {WebGLProgram}
      *  @memberof WebGL */
     export function glCreateProgram(vsSource: WebGLShader, fsSource: WebGLShader): WebGLProgram;
-    /** Create WebGL texture from an image and set the texture settings
+    /** Create WebGL texture from an image and init the texture settings
      *  @param {Image} image
      *  @return {WebGLTexture}
      *  @memberof WebGL */
@@ -1475,7 +1484,7 @@ declare module "littlejs.esm" {
          *  @param {Boolean} [loop=1] - True if the music should loop
          *  @return {AudioBufferSourceNode} - The audio source node
          */
-        play(volume?: number, loop?: boolean): AudioBufferSourceNode;
+        playMusic(volume?: number, loop?: boolean): AudioBufferSourceNode;
     }
     /** Play an mp3, ogg, or wav audio from a local file or url
      *  @param {String}  url - Location of sound file to play
@@ -1590,7 +1599,7 @@ declare module "littlejs.esm" {
         angleVelocity: number;
         spawnTime: number;
         children: any[];
-        collideTiles: number;
+        collideTiles: boolean;
         /** Update the object transform and physics, called automatically by engine once each frame */
         update(): void;
         groundObject: any;
@@ -1775,17 +1784,17 @@ declare module "littlejs.esm" {
         /** Draw directly to the 2D canvas in world space (bipass webgl)
          *  @param {Vector2}  pos
          *  @param {Vector2}  size
-         *  @param {Number}   [angle=0]
-         *  @param {Boolean}  [mirror=0]
+         *  @param {Number}   angle
+         *  @param {Boolean}  mirror
          *  @param {Function} drawFunction */
-        drawCanvas2D(pos: Vector2, size: Vector2, angle?: number, mirror?: boolean, drawFunction: Function): void;
+        drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror: boolean, drawFunction: Function): void;
         /** Draw a tile directly onto the layer canvas
-         *  @param {Vector2} pos
-         *  @param {Vector2} [size=Vector2(1,1)]
+         *  @param {Vector2}  pos
+         *  @param {Vector2}  [size=Vector2(1,1)]
          *  @param {TileInfo} [tileInfo]
-         *  @param {Color}   [color=Color()]
-         *  @param {Number}  [angle=0]
-         *  @param {Boolean} [mirror=0] */
+         *  @param {Color}    [color=Color()]
+         *  @param {Number}   [angle=0]
+         *  @param {Boolean}  [mirror=0] */
         drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean): void;
         /** Draw a rectangle directly onto the layer canvas
          *  @param {Vector2} pos
@@ -1879,8 +1888,6 @@ declare module "littlejs.esm" {
         fadeRate: number;
         /** @property {Number} - Apply extra randomness percent */
         randomness: number;
-        /** @property {Number} - Do particles collide against tiles */
-        collideTiles: boolean;
         /** @property {Number} - Should particles use addtive blend */
         additive: boolean;
         /** @property {Boolean} - Should it be in local space of emitter */

package/build/littlejs.esm.js

@@ -819,7 +819,7 @@ class Vector2
     arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; }
 
     /** Returns this vector expressed as a string
-     * @param {float} digits - precision to display
+     * @param {Number} digits - precision to display
      * @return {String} */
     toString(digits=3) 
     { if (debug) { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }}
@@ -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 */
@@ -1599,7 +1609,7 @@ class EngineObject
         // init other internal object stuff
         this.spawnTime = time;
         this.children = [];
-        this.collideTiles = 1;
+        this.collideTiles = false;
 
         // add to list of objects
         engineObjects.push(this);
@@ -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;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2547,23 +2557,33 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Keyboard event handlers
 
-onkeydown = (e)=>
 {
-    if (debug && e.target != document.body) return;
-    e.repeat || (inputData[isUsingGamepad = 0][remapKey(e.which)] = 3);
-    preventDefaultInput && e.preventDefault();
-}
+    onkeydown = (e)=>
+    {
+        if (debug && e.target != document.body) return;
+        if (!e.repeat)
+        {
+            inputData[isUsingGamepad = 0][e.which] = 3;
+            if (inputWASDEmulateDirection)
+                inputData[0][remapKey(e.which)] = 3;
+        }
+        preventDefaultInput && e.preventDefault();
+    }
 
-onkeyup = (e)=>
-{
-    if (debug && e.target != document.body) return;
-    inputData[0][remapKey(e.which)] = 4;
-}
+    onkeyup = (e)=>
+    {
+        if (debug && e.target != document.body) return;
+        inputData[0][e.which] = 4;
+        if (inputWASDEmulateDirection)
+            inputData[0][remapKey(e.which)] = 4;
+    }
 
-function remapKey(c)
-{ 
-    return inputWASDEmulateDirection ? 
-        c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c; 
+    // handle remapping wasd keys to directions
+    function remapKey(c)
+    { 
+        return inputWASDEmulateDirection ? 
+            c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c; 
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3062,7 +3082,7 @@ class Music extends Sound
      *  @param {Boolean} [loop=1] - True if the music should loop
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(volume, loop = 1)
+    playMusic(volume, loop = 1)
     { return super.play(0, volume, 1, 1, loop); }
 }
 
@@ -3709,10 +3729,10 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
-     *  @param {Number}   [angle=0]
-     *  @param {Boolean}  [mirror=0]
+     *  @param {Number}   angle
+     *  @param {Boolean}  mirror
      *  @param {Function} drawFunction */
-    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
+    drawCanvas2D(pos, size, angle, mirror, drawFunction)
     {
         const context = this.context;
         context.save();
@@ -3726,12 +3746,12 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
 
     /** Draw a tile directly onto the layer canvas
-     *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
+     *  @param {Vector2}  pos
+     *  @param {Vector2}  [size=Vector2(1,1)]
      *  @param {TileInfo} [tileInfo]
-     *  @param {Color}   [color=Color()]
-     *  @param {Number}  [angle=0]
-     *  @param {Boolean} [mirror=0] */
+     *  @param {Color}    [color=Color()]
+     *  @param {Number}   [angle=0]
+     *  @param {Boolean}  [mirror=0] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
@@ -3894,7 +3914,7 @@ class ParticleEmitter extends EngineObject
         this.fadeRate          = fadeRate;
         /** @property {Number} - Apply extra randomness percent */
         this.randomness        = randomness;
-        /** @property {Number} - Do particles collide against tiles */
+        /** @property {Boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
         /** @property {Number} - Should particles use addtive blend */
         this.additive          = additive;
@@ -4382,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;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -4419,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;
 }
 
@@ -4450,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
 
@@ -4520,7 +4540,7 @@ function glCreateProgram(vsSource, fsSource)
     return program;
 }
 
-/** Create WebGL texture from an image and set the texture settings
+/** Create WebGL texture from an image and init the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
@@ -4529,7 +4549,8 @@ function glCreateTexture(image)
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
-    image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+    if (image)
+        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
         
     // use point filtering for pixelated rendering
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
@@ -4537,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;
 }
 
@@ -4551,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;
@@ -4607,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;
     }
@@ -4812,7 +4833,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.5';
+const engineVersion = '1.8.8';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4995,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
@@ -5016,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 = ()=> 
@@ -5033,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();
@@ -5111,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();
 }
 
 /** 
@@ -5158,6 +5356,7 @@ export {
 	canvasFixedSize,
 	canvasPixelated,
 	fontDefault,
+	showSplashScreen,
 	tileSizeDefault,
 	tileFixBleedScale,
 	enablePhysicsSolver,
@@ -5195,6 +5394,7 @@ export {
 	setCanvasFixedSize,
 	setCanvasPixelated,
 	setFontDefault,
+	setShowSplashScreen,
 	setGlEnable,
 	setGlOverlay,
 	setTileSizeDefault,