littlejsengine 1.20.0 → 1.22.0

package/src/engineDraw.js

@@ -259,8 +259,9 @@ class TextureInfo
      * @param {boolean} [useWebGL] - Should use WebGL if available?
      * @param {boolean|Array<number>} [wrap] - Should the texture wrap (REPEAT) or clamp (CLAMP_TO_EDGE)? Or the WebGL
      *   modes across and down, like [gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT], as a glTF sampler gives them
+     * @param {boolean} [pixelated] - Hard edged or smooth for this texture alone, undefined follows tilesPixelated
      */
-    constructor(image, useWebGL=true, wrap=false)
+    constructor(image, useWebGL=true, wrap=false, pixelated)
     {
         /** @property {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} - image source */
         this.image = image;
@@ -275,6 +276,10 @@ class TextureInfo
          *  across and down
          *  @type {boolean|Array<number>} */
         this.wrap = wrap;
+        /** @property {boolean|undefined} - Hard edged or smooth for this texture alone, a soft glow in a pixel art
+         *  game or pixel art in a smooth one; undefined follows tilesPixelated
+         *  @type {boolean|undefined} */
+        this.pixelated = pixelated;
         useWebGL && this.createWebGLTexture();
     }
 
@@ -305,15 +310,34 @@ class TextureInfo
         this.wrap = wrap;
         glSetTextureWrap(this.glTexture, wrap);
     }
+
+    /** Make this texture hard edged or smooth on its own, whatever tilesPixelated says for the rest; it is made again
+     *  with the new filtering
+     *  @param {boolean} [pixelated] - undefined follows tilesPixelated again */
+    setPixelated(pixelated)
+    {
+        this.pixelated = pixelated;
+        if (!this.glTexture) return;
+        this.destroyWebGLTexture();
+        this.createWebGLTexture();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
+/**
+ * @callback SpriteAnimationEndCallback - Called once when a SpriteAnimation's play ends
+ * @return {void}
+ * @memberof Draw
+ */
+
 /**
  * SpriteAnimation - Steps a tile through its frames over time: looping, once, or there and back
  * - Driven by the engine time like a Timer, so it pauses with the game and needs no update call
  * - Read tileInfo each frame for the frame to draw, from an object's update or before a drawTile
  * - loop, play and pingPong each start over from the first frame; stop holds the current one
+ * - play(onEnd) calls onEnd once the play ends, on the first read after it, since there is no update to call it
  * - Frames follow each other along the row, as tileInfo.frame counts them
+ * - SpriteAnimator switches between a character's animations by name
  * @example
  * const walk = new SpriteAnimation(tile(0, 16), 4, .1); // four frames, a tenth of a second each
  * const attack = new SpriteAnimation(tile(4, 16), 3, .05).play(); // once, then holds the last frame
@@ -345,6 +369,9 @@ class SpriteAnimation
         /** @property {number|undefined} - The frame held by stop, undefined while running
          *  @type {number|undefined} */
         this.heldFrame = undefined;
+        /** @property {SpriteAnimationEndCallback|undefined} - Called once when a play ends, on the first read after it
+         *  @type {SpriteAnimationEndCallback|undefined} */
+        this.onEnd = undefined;
     }
 
     /** Start over from the first frame and repeat forever
@@ -352,8 +379,14 @@ class SpriteAnimation
     loop() { return this.restart('loop'); }
 
     /** Start over from the first frame, run through once and hold the last frame, last to first at a negative speed
+     *  @param {function():void} [onEnd] - Called once when it ends, on the first read of it after that
      *  @return {SpriteAnimation} */
-    play() { return this.restart('once'); }
+    play(onEnd)
+    {
+        this.restart('once');
+        this.onEnd = onEnd;
+        return this;
+    }
 
     /** Start over from the first frame and run there and back forever
      *  @return {SpriteAnimation} */
@@ -363,7 +396,7 @@ class SpriteAnimation
      *  @return {SpriteAnimation} */
     stop() { this.heldFrame = this.frame; return this; }
 
-    /** Start over from the first frame in a mode
+    /** Start over from the first frame in a mode, with no end callback
      *  @param {string} [mode] - 'loop', 'once' or 'pingPong', the current mode when left out
      *  @return {SpriteAnimation} */
     restart(mode=this.mode)
@@ -371,6 +404,7 @@ class SpriteAnimation
         this.mode = mode;
         this.startTime = time;
         this.heldFrame = undefined;
+        this.onEnd = undefined;
         return this;
     }
 
@@ -382,6 +416,7 @@ class SpriteAnimation
      *  @return {number} */
     get frame()
     {
+        this.isDone; // a read after a play ends calls onEnd, which may start it over
         if (this.heldFrame !== undefined)
             return this.heldFrame;
         const n = this.frameCount, f = floor(this.elapsedFrames);
@@ -397,9 +432,81 @@ class SpriteAnimation
      *  @return {TileInfo} */
     get tileInfo() { return this.firstTile.frame(this.frame); }
 
-    /** True once a play has shown its last frame for its time
+    /** True once a play has shown its last frame for its time, the first read after that calls onEnd
+     *  @return {boolean} */
+    get isDone()
+    {
+        const done = this.mode == 'once' && this.heldFrame === undefined && abs(this.elapsedFrames) >= this.frameCount;
+        if (done && this.onEnd)
+        {
+            const onEnd = this.onEnd;
+            this.onEnd = undefined; // once, and it can start a new play with a callback of its own
+            onEnd();
+        }
+        return done;
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * SpriteAnimator - A character's animations by name, like idle, walk and attack, and the one showing now
+ * - Each clip is a SpriteAnimation and keeps its own mode, loop, play or pingPong
+ * - set starts a clip over only when it changes or a play of it has ended, so it can be called every update
+ * - Read tileInfo each frame for the frame to draw, as with a SpriteAnimation
+ * @example
+ * const hero = new SpriteAnimator({
+ *     idle:   new SpriteAnimation(tile(0, 16), 2, .4),
+ *     walk:   new SpriteAnimation(tile(2, 16), 4, .1),
+ *     attack: new SpriteAnimation(tile(6, 16), 3, .05).play(),
+ * });
+ * hero.set('attack', ()=> hero.set('idle')); // back to idle when the attack ends
+ * // in update: this.tileInfo = hero.tileInfo;
+ * @memberof Draw
+ */
+class SpriteAnimator
+{
+    /** Create an animator from its clips, showing the first one
+     *  @param {Object<string, SpriteAnimation>} clips - The clips by name */
+    constructor(clips)
+    {
+        const names = Object.keys(clips);
+        ASSERT(names.length > 0, 'an animator needs at least one clip');
+        /** @property {Object<string, SpriteAnimation>} - The clips by name */
+        this.clips = clips;
+        /** @property {string} - The name of the clip showing now */
+        this.name = names[0];
+    }
+
+    /** Show a clip, starting it over in its own mode unless it is showing and has not ended
+     *  @param {string} name - The clip's name
+     *  @param {function():void} [onEnd] - Called once when a play clip ends, as with SpriteAnimation.play
+     *  @return {SpriteAnimator} */
+    set(name, onEnd)
+    {
+        ASSERT(this.clips[name], 'no clip named ' + name);
+        if (name == this.name && !this.clip.isDone)
+            return this;
+        this.name = name;
+        this.clip.restart();
+        this.clip.onEnd = onEnd;
+        return this;
+    }
+
+    /** The clip showing now
+     *  @return {SpriteAnimation} */
+    get clip() { return this.clips[this.name]; }
+
+    /** The tile of the frame showing now
+     *  @return {TileInfo} */
+    get tileInfo() { return this.clip.tileInfo; }
+
+    /** The frame of the clip showing now
+     *  @return {number} */
+    get frame() { return this.clip.frame; }
+
+    /** True once the clip showing now is a play that has ended
      *  @return {boolean} */
-    get isDone() { return this.mode == 'once' && this.heldFrame === undefined && abs(this.elapsedFrames) >= this.frameCount; }
+    get isDone() { return this.clip.isDone; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1224,7 +1331,7 @@ async function loadTexture(textureIndex, src)
     const image = new Image;
     if (src)
     {
-        await new Promise(resolve =>
+        await engineAddLoad(new Promise(resolve => // startup waits for it
         {
             image.onload = resolve;
             image.onerror = ()=>
@@ -1234,7 +1341,7 @@ async function loadTexture(textureIndex, src)
             };
             image.crossOrigin = 'anonymous';
             image.src = src;
-        });
+        }));
     }
     
     return textureInfos[textureIndex] = new TextureInfo(image);
@@ -1757,6 +1864,33 @@ class ImageFont
     }
 }
 
+// how strong a light's glow is at a distance from its middle, 0 there to 1 at the edge: a bell, full in the middle
+// and nothing at the edge, fading faster the higher the falloff
+function engineGlowAlpha(r, falloff)
+{
+    const k = 3.5 * falloff, edge = Math.exp(-k);
+    return (Math.exp(-k * r * r) - edge) / (1 - edge);
+}
+
+// the soft round glow of the 2D and 3D lights, one texture for each falloff, rounded to a tenth so a changing falloff
+// makes only a few, each made once from a canvas; undefined headless or without a canvas
+const engineGlowTextures = new Map;
+function engineGlowTexture(falloff=1)
+{
+    ASSERT(isNumber(falloff) && falloff > 0, 'glowFalloff must be a number above 0');
+    const key = max(round(falloff * 10), 1) / 10;
+    let texture = engineGlowTextures.get(key);
+    if (texture || !glContext || typeof OffscreenCanvas == 'undefined') return texture;
+    const size = 64, context = createCanvasContext(size), steps = 16;
+    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    for (let i = 0; i <= steps; ++i)
+        gradient.addColorStop(i / steps, 'rgba(255,255,255,' + engineGlowAlpha(i / steps, key).toFixed(4) + ')');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, size, size);
+    engineGlowTextures.set(key, texture = new TextureInfo(context.canvas, true, false, false));
+    return texture;
+}
+
 // load engine font, called automatically on startup
 async function imageFontInit()
 {

package/src/engineEditor.js

@@ -57,6 +57,14 @@ class LevelEditor
          *  section has Play from mouse, which starts play there, Escape at the mouse and Play at the view center
          *  @type {EditorPlayFromCallback|undefined} */
         this.onPlayFrom = undefined;
+        /** @property {Array<number>|undefined} - The tiles the palette shows, in its order, for a sheet that also holds
+         *  sprites and art that are not level tiles; undefined shows every tile of the sheet
+         *  @type {Array<number>|undefined} */
+        this.paletteTiles = undefined;
+        /** @property {boolean|undefined} - Which level editor opens: true the 3D one, false the 2D one, undefined the
+         *  3D one when a level was loaded with level3DLoad and there is a Render3DPlugin
+         *  @type {boolean|undefined} */
+        this.use3D = undefined;
     }
 
     /** True while the editor is open, the game is paused under it
@@ -253,7 +261,7 @@ function editorMapRestore(map)
     if (!saved) return map;
     // an autosave from before the map's shape was in the hash matches on its tiles and objects, and one from before
     // objects were matches on its tiles; one of a resized map is resized to first
-    const sameFile = saved.hash === record.hash || !saved.width &&
+    const sameFile = saved.hash === record.hash || saved.savedHash === record.hash || !saved.width &&
         (saved.hash === editorMapHash(data, objects) || !saved.objects && saved.hash === editorMapHash(data));
     if ((saved.width ?? map.width) === map.width && (saved.height ?? map.height) === map.height &&
         editorSameData(saved.layers, data) && editorSameData(saved.objects ?? [], objects))
@@ -406,15 +414,17 @@ async function editorRememberedFile(record)
 }
 const editorFileKey = (record)=> (globalThis.location?.pathname ?? '') + ' ' + record.key;
 
-// a map as a file Save wrote is the file from then on: Reset to file goes back to it, the autosave keeps only the
-// edits since, and a reload of it has nothing to apply; a download can not say it replaced the file, so it does not,
-// and neither does a file of another name, a copy, since the game still loads the one it came from
+// a map as a file Save wrote is the file from then on: Reset to file goes back to it, and a reload of it has nothing
+// to apply; a download can not say it replaced the file, so it does not, and neither does a file of another name, a
+// copy, since the game still loads the one it came from; the browser gives a picked file's name and not its folder,
+// so a file of the same name may be a copy too, and the autosave stays, with the hash of the file the game loads and
+// of the file written, until a reload shows which one the game loads
 function editorSetBaseline(record, written)
 {
     if (record.synthetic) return; // a layer made in code has no file to load it from
     const data = editorTileLayerData(written.layers);
     const objects = editorObjectGroups(written.layers).map((group)=> group.objects ?? []);
-    Object.assign(record, {original: data, originalObjects: objects, hash: editorMapHash(data, objects,
+    Object.assign(record, {original: data, originalObjects: objects, savedHash: editorMapHash(data, objects,
         editorMapLayout(written)), originalSize: {width: written.width, height: written.height}});
     record.pending || editorAutosave(record); // edits waiting to be applied keep their autosave
 }
@@ -422,12 +432,21 @@ function editorSetBaseline(record, written)
 // save a map as Tiled JSON: where the browser lets a page write files, Chrome and Edge, to a file picked once and
 // written again on each Save after, even after a reload once the browser gives permission, or picked again with
 // Save As; elsewhere as a download under the name of the file it came from; resolves to how it saved, undefined
-// when the picker was closed
+// when the picker was closed; saves of a map run one at a time in the order asked, so the file ends with the last
 async function editorSave(record, pickAgain=false)
 {
     if (!record) return;
     editorStrokeEnd();
-    const text = editorMapJSON(record), picker = /** @type {any} */ (globalThis).showSaveFilePicker;
+    const text = editorMapJSON(record); // the map as it is now, later edits wait for a later save
+    const saved = (async ()=> { await record.saving; return editorSaveText(record, text, pickAgain); })();
+    record.saving = saved.catch(()=> {});
+    return saved;
+}
+
+// write one save of a map, the one before it done
+async function editorSaveText(record, text, pickAgain)
+{
+    const picker = /** @type {any} */ (globalThis).showSaveFilePicker;
     if (picker)
     {
         try
@@ -527,11 +546,12 @@ function editorAutosave(record)
     while (kept.length > original.length && !kept.at(-1).length)
         kept.pop(); // an Objects layer the editor made, empty again, is not an edit
     const size = record.originalSize, sameSize = map.width === size.width && map.height === size.height;
-    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original))
+    // the map as it was loaded has nothing to keep; one a Save wrote is kept until a reload shows the file has it
+    if (sameSize && editorSameData(data, record.original) && editorSameData(kept, original) && !record.savedHash)
         delete saves[record.key];
     else
-        saves[record.key] = {hash: record.hash, width: map.width, height: map.height, layers: data, objects,
-            nextobjectid: map.nextobjectid};
+        saves[record.key] = {hash: record.hash, savedHash: record.savedHash, width: map.width, height: map.height,
+            layers: data, objects, nextobjectid: map.nextobjectid};
     editorWriteSaves(saves);
 }
 
@@ -1364,8 +1384,8 @@ function editorBrushTile()
 // the brush takes the tile in a cell, an empty cell gives the Erase brush
 function editorPick(layer, pos) { editorBrush = editorStampTile(editorGidAt(layer, pos) || 0); }
 
-// a palette slot into the brush: slot 0 is the Erase brush, slot n tile n - 1, keeping a one tile brush's turn; on
-// an object layer slot n is the nth object type
+// a palette slot into the brush: slot 0 is the Erase brush, slot n the palette's nth tile, keeping a one tile
+// brush's turn; on an object layer slot n is the nth object type
 function editorPalettePick(slot)
 {
     if (editorObjectLayer)
@@ -1376,7 +1396,8 @@ function editorPalettePick(slot)
         return;
     }
     const t = editorBrushTile();
-    editorBrush = editorStampTile(slot ? editorTileToGid(slot - 1, t?.direction, t?.mirror) : 0);
+    const tile = slot && (editorPaletteTiles(editorLayer)[slot - 1]?.tile ?? slot - 1); // every tile, in order
+    editorBrush = editorStampTile(slot ? editorTileToGid(tile, t?.direction, t?.mirror) : 0);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1795,11 +1816,18 @@ function editorPanelInit()
 // the palette's cell size in pixels and how many to a row
 const editorPaletteCell = 30, editorPaletteColumns = 8;
 
-// a layer's tiles in order, as the tile infos it draws them with, up to the image's edge and without the blank
-// ones at the end, a tile of one flat color; found once for each layer
+// the tiles a layer's palette shows, each its index and the tile info it draws with: the game's
+// levelEditor.paletteTiles, or every tile up to the image's edge without the blank ones at the end, a tile of one
+// flat color; found once for each layer and list
 function editorPaletteTiles(layer)
 {
-    const live = layer?.live, image = live?.tileInfo?.textureInfo?.image;
+    const live = layer?.live, image = live?.tileInfo?.textureInfo?.image, list = levelEditor.paletteTiles;
+    if (list && live)
+    {
+        if (layer.palette?.list !== list)
+            layer.palette = {list, tiles: list.map((tile)=> ({tile, tileInfo: editorTileInfo(live, tile)}))};
+        return layer.palette.tiles;
+    }
     if (!image) return [];
     if (layer.palette?.image === image) return layer.palette.tiles;
 
@@ -1808,7 +1836,7 @@ function editorPaletteTiles(layer)
     {
         const t = editorTileInfo(live, i);
         if (t.pos.x + t.size.x > image.width || t.pos.y + t.size.y > image.height) break;
-        tiles.push(t);
+        tiles.push({tile: i, tileInfo: t});
     }
     try
     {
@@ -1817,7 +1845,8 @@ function editorPaletteTiles(layer)
         context.drawImage(image, 0, 0);
         const blank = (t)=>
         {
-            const pixels = new Uint32Array(context.getImageData(t.pos.x, t.pos.y, t.size.x, t.size.y).data.buffer);
+            const {pos, size} = t.tileInfo, pixels = new Uint32Array(context.getImageData(pos.x, pos.y, size.x,
+                size.y).data.buffer);
             return pixels.every((p)=> p === pixels[0]);
         };
         while (tiles.length > 1 && blank(tiles.at(-1)))
@@ -1877,15 +1906,16 @@ function editorPaletteDraw(canvas, layer)
     context.moveTo(8, 8), context.lineTo(cell - 8, cell - 8);
     context.moveTo(cell - 8, 8), context.lineTo(8, cell - 8);
     context.stroke();
-    tiles.forEach((t, i)=>
+    tiles.forEach(({tileInfo: {pos, size}}, i)=>
     {
         const slot = i + 1, x = slot % columns * cell, y = (slot / columns | 0) * cell;
-        context.drawImage(image, t.pos.x, t.pos.y, t.size.x, t.size.y, x + 2, y + 2, cell - 4, cell - 4);
+        context.drawImage(image, pos.x, pos.y, size.x, size.y, x + 2, y + 2, cell - 4, cell - 4);
     });
 
-    // the brush's slot outlined, when it is one tile or Erase
+    // the brush's slot outlined, when it is one tile the palette shows or Erase
     const t = editorBrushTile(), erase = !t && editorBrush.width === 1 && editorBrush.height === 1 &&
-        editorBrush.grids[0][0] === 0, selected = erase ? 0 : t ? t.tile + 1 : -1;
+        editorBrush.grids[0][0] === 0, shown = t ? tiles.findIndex((p)=> p.tile === t.tile) : -1;
+    const selected = erase ? 0 : shown >= 0 ? shown + 1 : -1;
     if (selected < 0) return;
     context.strokeStyle = '#4af';
     context.strokeRect(selected % columns * cell + 1, (selected / columns | 0) * cell + 1, cell - 2, cell - 2);

package/src/engineExport.js

@@ -26,6 +26,7 @@ export
     engineObjectsCallback,
     engineObjectsRaycast,
     engineAddPlugin,
+    engineAddLoad,
 
     // Globals
     debug,
@@ -70,8 +71,10 @@ export
     canvasPixelRatio,
     fontDefault,
     showSplashScreen,
+    loadingScreen,
     headlessMode,
     engineManualStep,
+    engineVariableStep,
     tileDefaultSize,
     tileDefaultPadding,
     tileDefaultBleed,
@@ -129,8 +132,10 @@ export
     getCanvasPixelRatio,
     setFontDefault,
     setShowSplashScreen,
+    setLoadingScreen,
     setHeadlessMode,
     setEngineManualStep,
+    setEngineVariableStep,
     setGLEnable,
     setDrawScreenSpace,
     setTileDefaultSize,
@@ -268,6 +273,7 @@ export
     TextureInfo,
     loadTexture,
     SpriteAnimation,
+    SpriteAnimator,
     Shader,
     mainCanvas,
     mainContext,
@@ -329,6 +335,8 @@ export
     glFlush,
     glCopyToContext,
     glSetAntialias,
+    glMaxTextureSize,
+    glClampTextureSize,
     glDraw,
     glDrawUntextured,
     glDrawPointsTransform,

package/src/engineInput.js

@@ -192,7 +192,7 @@ function keyIsDown(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 1);
+    return !!(inputData[device]?.[key] & 1) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was pressed this frame
@@ -205,7 +205,7 @@ function keyWasPressed(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 2);
+    return !!(inputData[device]?.[key] & 2) && !inputCaptureHides(device);
 }
 
 /** Returns true if device key was released this frame
@@ -218,7 +218,7 @@ function keyWasReleased(key, device=0)
     ASSERT(isStringLike(key), 'key must be a number or string');
     ASSERT(typeof key !== 'string' || key.length > 1, "keys are codes like 'KeyW' or 'Space', not characters");
     ASSERT(device > 0 || typeof key !== 'number' || key < 5, 'use code string for keyboard');
-    return !!(inputData[device]?.[key] & 4);
+    return !!(inputData[device]?.[key] & 4) && !inputCaptureHides(device);
 }
 
 /** Returns input vector from arrow keys or WASD if enabled
@@ -421,7 +421,10 @@ function pointerLockRequest()
 /** Request to unlock the pointer
  *  @memberof Input */
 function pointerLockExit()
-{ document.exitPointerLock?.(); }
+{
+    inputLockExit(); // debug builds: the free camera and the 3D editor tell this from Escape
+    document.exitPointerLock?.();
+}
 
 /** Check if pointer is locked (true if locked)
  *  @return {boolean}
@@ -738,6 +741,7 @@ function inputInit()
 
 function inputUpdate()
 {
+    inputCaptureMouse(); // debug builds: the free camera or the 3D editor may have the mouse
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)

package/src/engineLogo.js

@@ -7,6 +7,25 @@
 'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
+// the default loading screen: Loading over a bar across the middle, filled by the part of the loads done
+function drawLoadingScreen(progress)
+{
+    const x = mainContext, w = mainCanvasSize.x, h = mainCanvasSize.y;
+    const barWidth = min(w * .6, 400), barHeight = 12, left = (w - barWidth) / 2, top = h / 2;
+    x.save();
+    x.fillStyle = '#000';
+    x.fillRect(0, 0, w, h);
+    x.fillStyle = x.strokeStyle = '#fff';
+    x.font = '28px ' + fontDefault;
+    x.textAlign = 'center';
+    x.textBaseline = 'bottom';
+    x.fillText('Loading', w / 2, top - 16);
+    x.lineWidth = 2;
+    x.strokeRect(left, top, barWidth, barHeight);
+    x.fillRect(left, top, barWidth * clamp(progress), barHeight);
+    x.restore();
+}
+
 function drawEngineLogo(t)
 {
     const blackAndWhite = 0;

package/src/engineObject.js

@@ -188,9 +188,10 @@ class EngineObject
         // bail if a collision callback destroyed us mid-frame
         if (this.destroyed) return;
 
-        if (this.clampSpeed)
+        // limit max speed to prevent missing collisions, only for what collides: with solids, or with tiles while it
+        // has a mass, which tile collision needs; anything else moves as fast as it is told
+        if (this.clampSpeed && enablePhysicsSolver && (this.collideSolidObjects || this.collideLevel && this.mass))
         {
-            // limit max speed to prevent missing collisions
             this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
             this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
         }