littlejsengine 1.17.5 → 1.17.11

package/examples/electron/index.html

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

package/examples/index.html

@@ -103,7 +103,7 @@ const exampleList =
     new ExampleInfo('Font Image', 'fontImage.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
     new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
     new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),
-    new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mose', false, 'ui, input, control'),
+    new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mouse', false, 'ui, input, control'),
     new ExampleInfo('Debug Drawing', 'debugDraw.js', 'Debug drawing system', false, 'debug, circle, line, rectangle'),
     new ExampleInfo('--- ADVANCED ---'),
     new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangle'),
@@ -113,7 +113,7 @@ const exampleList =
     new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Step Sequencer', 'sequencer.js', 'Simple music loop creation tool', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Music Player', 'musicPlayer.js', 'Music player with audio seeking and drag and drop', false, 'sound, loading, audio, ui'),
-    new ExampleInfo('--- MINI GAMES ---'),
+    new ExampleInfo('--- GAMES ---'),
     new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing', false, 'objects, collision'),
     new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view', false, 'objects, gravity, level, tiles, camera'),
     new ExampleInfo('Top Down Game', 'topDown.js', 'Top-down style camera', false, 'objects, movement, exploration'),

package/examples/particles/index.html

@@ -72,7 +72,7 @@ addSetting('gravityScale',     '', -1e9, 1e9, .1, 'How much does gravity effect
 addSetting('particleConeAngle','', 0,    1e9, .1, 'Cone for start particle angle');
 addSetting('fadeRate',         '', 0,    1,   .01,'How quickly particles fade in percent of life');
 addSetting('randomness',       '', 0,    1,   .01,'Apply extra randomness percent');
-addSetting('additive',         'checkbox',0,0,0,  'Should particles use addtive blend?');
+addSetting('additive',         'checkbox',0,0,0,  'Should particles use additive blend?');
 addSetting('randomColorLinear','checkbox',0,0,0,  'Should color be randomized linearly?');
 
 function makeEmitter()

package/examples/platformer/gameEffects.js

@@ -46,7 +46,7 @@ export function makeDebris(pos, color = hsl(), amount = 50, size=.2, restitution
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new LJS.ParticleEmitter(
-        pos, 0, 1, .1, amount/.1, 3.14, // pos, angle, size, time, rate, cone
+        pos, 0, .5, .1, amount/.1, 3.14, // pos, angle, size, time, rate, cone
         0,                     // tileInfo
         color, color2,         // colorStartA, colorStartB
         color, color2,         // colorEndA, colorEndB
@@ -269,9 +269,9 @@ export class ParallaxLayer extends LJS.CanvasLayer
         const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter)
             .divide(levelCenter.scale(-1).divide(parallax));
         const scale = distance/LJS.cameraScale;
-        const positonOffset = vec2(0, 2-depth);
+        const positionOffset = vec2(0, 2-depth);
         const cameraOffset = cameraDeltaFromCenter.scale(1/LJS.cameraScale);
-        this.pos = LJS.cameraPos.add(positonOffset).add(cameraOffset);
+        this.pos = LJS.cameraPos.add(positionOffset).add(cameraOffset);
         this.size = canvasSize.scale(scale);
         super.render();
     }

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.17.5></script>
+<script src=../../dist/littlejs.js?1.17.11></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/colors.js

@@ -14,7 +14,7 @@ function gameRender()
     drawRect(vec2( 4, 0), vec2(3), hsl(.6,.5,.5));
     drawRect(vec2( 8, 0), vec2(3), hsl(0,0,1));
 
-    // color lerpping
+    // color lerping
     for (let i=5; i--;)
     {
         const color1 = RED;

package/examples/shorts/fontImage.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // draw text with built in engine font image
-    const font = engineFontImage
+    const font = engineFontImage;
     font.drawText('Engine Font', vec2(0,3), 2);
 
     // show every character in the font

package/examples/shorts/fps.js

@@ -33,7 +33,7 @@ function gameUpdate()
 function gameRender()
 {
     {
-        // draw horizontal slizes to create floor and ceiling
+        // draw horizontal slices to create floor and ceiling
         const h = 9;
         let pos = vec2(), size = vec2(39, .15), color = rgb();
         for (let y=-h; y<h; y+=.1)

package/examples/shorts/music.js

@@ -1,5 +1,5 @@
 const musicSound = new Sound('song.mp3');
-let musicVolume = 1, musicInstance;
+let musicVolume = .8, musicInstance;
 
 function gameInit()
 {
@@ -15,13 +15,14 @@ function gameInit()
     const center = mainCanvasSize.scale(.5);
     musicPlayer = new UIObject(center, vec2(500, 220));
 
-    // infomation text
+    // information text
     infoText = new UIText(vec2(0, -70), vec2(400, 50));
     musicPlayer.addChild(infoText);
 
     // volume slider
     const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30), 
         musicVolume, 'Music Volume');
+    volumeSlider.fillMode = true;
     musicPlayer.addChild(volumeSlider);
     volumeSlider.onChange = ()=> 
     {

package/examples/shorts/musicPlayer.js

@@ -1,5 +1,5 @@
 
-let musicVolume = 1, musicSound, musicInstance;
+let musicVolume = .8, musicSound, musicInstance;
 
 function gameInit()
 {
@@ -28,6 +28,7 @@ function gameInit()
     // volume slider
     const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30),
         musicVolume, 'Music Volume');
+    volumeSlider.fillMode = true;
     musicPlayer.addChild(volumeSlider);
     volumeSlider.onChange = ()=> 
     {

package/examples/shorts/parallax.js

@@ -64,8 +64,8 @@ class ParallaxLayer extends CanvasLayer
         const distance = 3 + depth;
         const parallax = vec2(.2, .05).scale(depth**2+1);
         const cameraDeltaFromCenter = viewerPos.multiply(parallax);
-        const positonOffset = vec2(0, 4-depth*3);
-        this.pos = cameraDeltaFromCenter.add(positonOffset)
+        const positionOffset = vec2(0, 4-depth*3);
+        this.pos = cameraDeltaFromCenter.add(positionOffset)
         this.size = canvasSize.scale(distance/cameraScale);
         super.render();
     }

package/examples/shorts/tiltedView.js

@@ -7,7 +7,7 @@ class GameObject extends EngineObject
 
     render()
     {
-        // adjust draw postion to be at the bottom of the object
+        // adjust draw position to be at the bottom of the object
         const drawSize = this.drawSize || this.size;
         const offset = this.getUp(drawSize.y/2);
         const pos = this.pos.add(offset);

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.17.5></script>
+<script src=../../dist/littlejs.js?1.17.11></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
@@ -32,4 +32,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.17.5></script>
+<script src=game.js?1.17.11></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.17.5",
+  "version": "1.17.11",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/box2d.js

@@ -612,11 +612,11 @@ class Box2dStaticObject extends Box2dObject
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
- * Box2D Kiematic Object - Box2d with a kinematic physics body
+ * Box2D Kinematic Object - Box2d with a kinematic physics body
  * @extends Box2dObject
  * @memberof Box2D
  */
-class Box2dKiematicObject extends Box2dObject 
+class Box2dKinematicObject extends Box2dObject 
 {
     /** Create a LittleJS object with Box2d physics
      *  @param {Vector2}  [pos]
@@ -668,20 +668,19 @@ class Box2dTileLayer extends Box2dStaticObject
         this.destroyAllFixtures();
 
         // create box2d object for this layer
-        const size = this.tileLayer.size;
         this.pos = this.tileLayer.pos.copy();
-        this.size = size.copy();
+        this.size = this.tileLayer.size.copy();
 
         // track which tiles have been processed
         const processed = [];
-        const getIndex = (x, y)=> x + y * size.x;
+        const getIndex = (x, y)=> x + y * this.size.x;
         const isSolidUnprocessed = (x, y)=>
             !processed[getIndex(x, y)] &&
             this.tileLayer.getCollisionData(vec2(x, y)) > 0;
 
         // combine tiles into larger boxes
-        for (let x = 0; x < size.x; ++x)
-        for (let y = 0; y < size.y; ++y)
+        for (let x = 0; x < this.size.x; ++x)
+        for (let y = 0; y < this.size.y; ++y)
         {
             if (!isSolidUnprocessed(x, y)) continue;
 

package/plugins/pluginExport.js

@@ -37,7 +37,8 @@ export
     Box2dPlugin,
     Box2dObject,
     Box2dStaticObject,
-    Box2dKiematicObject,
+    Box2dKinematicObject,
+    Box2dTileLayer,
     Box2dRaycastResult,
     Box2dJoint,
     Box2dTargetJoint,

package/plugins/postProcess.js

@@ -24,7 +24,7 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+    *  @param {boolean} [includeMainCanvas] - combine mainCanvas onto glCanvas
     *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
     *  @example
     *  // create the post process plugin object

package/plugins/uiSystem.js

@@ -96,7 +96,7 @@ class UISystemPlugin
         // navigation properties
         /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
         this.navigationObject = undefined;
-        /** @property {Timer} - Cooldown timer for navigation inputs */
+        /** @property {Timer} - Cool down timer for navigation inputs */
         this.navigationTimer = new Timer(undefined, true);
         /** @property {number} - Time between navigation inputs in seconds */
         this.navigationDelay = .2;
@@ -562,7 +562,7 @@ class UISystemPlugin
 
         const savedNavigationDirection = uiSystem.navigationDirection;
 
-        // allow both axies for navigation
+        // allow both axes for navigation
         uiSystem.navigationDirection = 2;
 
         // confirm menu
@@ -657,7 +657,7 @@ class UIObject
         this.lineWidth = uiSystem.defaultLineWidth;
         /** @property {number} - Corner radius for rounded rects */
         this.cornerRadius = uiSystem.defaultCornerRadius;
-        /** @property {string} - Font for this objecct */
+        /** @property {string} - Font for this object */
         this.font = uiSystem.defaultFont;
         /** @property {string} - Font style for this object or undefined */
         this.fontStyle = undefined;
@@ -1145,6 +1145,8 @@ class UIScrollbar extends UIObject
         this.value = value;
         /** @property {Color} - Color for the handle part of the scrollbar */
         this.handleColor = handleColor.copy();
+        /** @property {boolean} - Should it fill up like a progress bar? */
+        this.fillMode = false;
 
         // set properties
         this.text = text;
@@ -1190,19 +1192,30 @@ class UIScrollbar extends UIObject
 
         // handle horizontal or vertical scrollbar
         const isHorizontal = this.size.x > this.size.y;
-        const handleSize = isHorizontal ? this.size.y : this.size.x;
-        const barSize = isHorizontal ? this.size.x : this.size.y;
-        const centerPos = isHorizontal ? this.pos.x : this.pos.y;
-        
-        // draw the scrollbar handle
-        const handleWidth = barSize - handleSize;
-        const p1 = centerPos - handleWidth/2;
-        const p2 = centerPos + handleWidth/2;
-        const handlePos = isHorizontal ? 
-            vec2(lerp(p1, p2, this.value), this.pos.y) :
-            vec2(this.pos.x, lerp(p2, p1, this.value))
-        const handleColor = this.disabled ? this.disabledColor : this.handleColor;
-        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        const barWidth = isHorizontal ? this.size.x : this.size.y;
+        const handleWidth = isHorizontal ? this.size.y : this.size.x;
+        if (this.fillMode)
+        {
+            // draw progress bar
+            const minWidth = min(handleWidth, this.cornerRadius * 2);
+            const progressWidth = lerp(minWidth, barWidth, this.value);
+            const p = (progressWidth - barWidth) * (isHorizontal ? .5 : -.5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = isHorizontal ? 
+                vec2(progressWidth, this.size.y) : vec2(this.size.x, progressWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
+        else
+        {
+            // draw the scrollbar handle
+            const value = clamp(isHorizontal ? this.value : 1 - this.value);
+            const p = (barWidth - handleWidth) * (value - .5);
+            const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p));
+            const color = this.disabled ? this.disabledColor : this.handleColor;
+            const drawSize = vec2(handleWidth);
+            uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
+        }
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
@@ -1224,7 +1237,7 @@ class UIScrollbar extends UIObject
  * @extends UIObject
  * @example
  * // Create a video player UI object
- * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'video.mp4', true);
  * video.play();
  * @memberof UISystem
  */
@@ -1265,12 +1278,11 @@ class UIVideo extends UIObject
     
     /** Play or resume the video
      *  @return {Promise} Promise that resolves when playback starts */
-    play()
+    async play()
     {
         // try to play the video, catch any errors (autoplay may be blocked)
-        const promise = this.video.play();
-        promise?.catch(()=>{});
-        return promise;
+        try { await this.video.play(); }
+        catch(e) {}
     }
     
     /** Pause the video */

package/reference.md

@@ -371,14 +371,14 @@ engineObjectsDestroy()
 ```javascript
 
 // Canvas Layer
-CanvasLayer(position, size) // Create a canvas layer object
+CanvasLayer(pos, size)      // Create a canvas layer object
 CanvasLayer.canvas          // The canvas used by this layer
 CanvasLayer.context         // The 2D context of the canvas
 CanvasLayer.getImageData()  // Get image data from canvas
 CanvasLayer.updateWebGL()   // Creates or updates WebGL texture
 
 // LittleJS Layer System
-TileLayer(position, size, tileInfo, scale)     // Create a tile layer object
+TileLayer(pos, size, tileInfo, scale)          // Create a tile layer object
 TileLayer.setData(layerPos, data, redraw)      // Set data at position
 TileLayer.clearData(layerPos, redraw)          // Clear data at position
 TileLayer.getData(layerPos)                    // Get data at position
@@ -393,12 +393,12 @@ TileLayerData(tile, direction=0, mirror=false, color=WHITE) // Create tile data
 TileLayerData.clear()                                       // Clear this tile data
 
 // Tile Collision Layer
-TileCollisionLayer(position, size, tileInfo=tile()) // Create a tile collision layer object
+TileCollisionLayer(pos, size, tileInfo=tile())      // Create a tile collision layer object
 TileCollisionLayer.setCollisionData(pos, data=1)    // Set tile collision data at pos
 tileCollisionGetData(pos)                           // Get tile collision data at pos
 tileCollisionTest(pos, size=(0,0), object)          // Check if collision should occur
 tileCollisionRaycast(posStart, posEnd, object)      // Return the center of tile if hit
-tileLayersLoad(tileMapData, tileInfo)            // Load tile layers from exported data
+tileLayersLoad(tileMapData, tileInfo)               // Load tile layers from exported data
 
 ```
 
@@ -408,8 +408,8 @@ tileLayersLoad(tileMapData, tileInfo)            // Load tile layers from export
 
 ```javascript
 // Particle Emitter Object
-ParticleEmitter(position, angle, ...settings) // Create a particle system
-ParticleEmitter.emitParticle()                // Spawn one particle
+ParticleEmitter(pos, angle, ...settings) // Create a particle system
+ParticleEmitter.emitParticle()           // Spawn one particle
 
 // Particle Settings
 particleEmitRateScale = 1 // Scales particles emit rate