littlejsengine 1.11.10 → 1.11.17

package/src/engineDraw.js

@@ -160,6 +160,8 @@ class TextureInfo
         this.image = image;
         /** @property {Vector2} - size of the image */
         this.size = vec2(image.width, image.height);
+        /** @property {Vector2} - inverse of the size, cached for rendering */
+        this.sizeInverse = vec2(1/image.width, 1/image.height);
         /** @property {WebGLTexture} - webgl texture */
         this.glTexture = glEnable && glCreateTexture(image);
     }
@@ -205,19 +207,19 @@ function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
  *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
  *  @param {number}  [angle]                    - Angle to rotate by
  *  @param {boolean} [mirror]                   - If true image is flipped along the Y axis
- *  @param {Color}   [additiveColor=(0,0,0,0)]  - Additive color to be applied
+ *  @param {Color}   [additiveColor]            - Additive color to be applied if any
  *  @param {boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
  *  @param {boolean} [screenSpace=false]        - If true the pos and size are in screen space
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
-    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
+    angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
     ASSERT(typeof tileInfo !== 'number' || !tileInfo, 
         'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
     ASSERT(isVector2(pos) && isVector2(size));
-    ASSERT(isColor(color) && isColor(additiveColor));
+    ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)));
 
     const textureInfo = tileInfo && tileInfo.getTextureInfo();
     if (useWebGL)
@@ -228,21 +230,30 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
             pos = screenToWorld(pos);
             size = size.scale(1/cameraScale);
         }
-        
         if (textureInfo)
         {
             // calculate uvs and render
-            const sizeInverse = vec2(1).divide(textureInfo.size);
+            const sizeInverse = textureInfo.sizeInverse;
             const x = tileInfo.pos.x * sizeInverse.x;
             const y = tileInfo.pos.y * sizeInverse.y;
             const w = tileInfo.size.x * sizeInverse.x;
             const h = tileInfo.size.y * sizeInverse.y;
-            const tileImageFixBleed = sizeInverse.scale(tileFixBleedScale);
             glSetTexture(textureInfo.glTexture);
-            glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                x + tileImageFixBleed.x,     y + tileImageFixBleed.y, 
-                x - tileImageFixBleed.x + w, y - tileImageFixBleed.y + h, 
-                color.rgbaInt(), additiveColor.rgbaInt()); 
+            if (tileFixBleedScale)
+            {
+                const tileImageFixBleedX = sizeInverse.x*tileFixBleedScale;
+                const tileImageFixBleedY = sizeInverse.y*tileFixBleedScale;
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
+                    x + tileImageFixBleedX,     y + tileImageFixBleedY, 
+                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h, 
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+            }
+            else
+            {
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
+                    x, y, x + w, y + h, 
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+            }
         }
         else
         {
@@ -454,16 +465,15 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
 {
     context.fillStyle = color.toString();
-    context.lineWidth = lineWidth;
     context.strokeStyle = lineColor.toString();
+    context.lineWidth = lineWidth;
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
     context.lineJoin = 'round';
 
-    pos = pos.copy();
-
     const lines = (text+'').split('\n');
+    pos = pos.copy();
     pos.y -= (lines.length-1) * size/2; // center text vertically
     lines.forEach(line=>
     {
@@ -533,7 +543,10 @@ class FontImage
     {
         // load default font image
         if (!engineFontImage)
-            (engineFontImage = new Image).src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
+        {
+            engineFontImage = new Image;
+            engineFontImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
+        }
 
         this.image = image || engineFontImage;
         this.tileSize = tileSize;

package/src/engineExport.js

@@ -1,8 +1,9 @@
 /**
  * LittleJS Module Export
- * - Export engine as a module
  */
 
+'use strict';
+
 export
 {
 	// Engine
@@ -43,6 +44,10 @@ export
 	debugSaveCanvas,
 	debugSaveText,
 	debugSaveDataURL,
+	debugShowErrors,
+	debugVideoCaptureIsActive,
+	debugVideoCaptureStart,
+	debugVideoCaptureStop,
 
 	// Settings
 	cameraPos,
@@ -82,7 +87,6 @@ export
 	medalDisplayTime,
 	medalDisplaySlideTime,
 	medalDisplaySize,
-	medalDisplayIconSize,
 
 	// Setters for globals
 	setCameraPos,
@@ -123,7 +127,6 @@ export
 	setMedalDisplayTime,
 	setMedalDisplaySlideTime,
 	setMedalDisplaySize,
-	setMedalDisplayIconSize,
 	setMedalsPreventUnlock,
 	setShowWatermark,
 	setDebugKey,
@@ -218,6 +221,7 @@ export
 	glCopyToContext,
 	glCreateProgram,
 	glCreateTexture,
+	glSetTextureData,
 	glDraw,
 	glFlush,
 	glSetTexture,
@@ -247,7 +251,8 @@ export
 	mousePosScreen,
 	mouseWheel,
 	isUsingGamepad,
-	preventDefaultInput,
+	inputPreventDefault,
+	setInputPreventDefault,
 	gamepadIsDown,
 	gamepadWasPressed,
 	gamepadWasReleased,
@@ -260,14 +265,15 @@ export
 	// Audio
 	Sound,
 	SoundWave,
-	Music,
 	playAudioFile,
 	speak,
 	speakStop,
 	getNoteFrequency,
-	audioContext,
 	playSamples,
 	zzfx,
+	zzfxG,
+	zzfxR,
+	audioContext,
 
 	// Base Object
 	EngineObject,

package/src/engineInput.js

@@ -97,10 +97,16 @@ let mouseWheel = 0;
  *  @memberof Input */
 let isUsingGamepad = false;
 
-/** Prevents input continuing to the default browser handling (false by default)
+/** Prevents input continuing to the default browser handling (true by default)
  *  @type {boolean}
  *  @memberof Input */
-let preventDefaultInput = false;
+let inputPreventDefault = true;
+
+/** Prevents input continuing to the default browser handling
+ *  This is useful to disable for html menus so the browser can handle input normally
+ *  @param {boolean} preventDefault
+ *  @memberof Input */
+function setInputPreventDefault(preventDefault) { inputPreventDefault = preventDefault; }
 
 /** Returns true if gamepad button is down
  *  @param {number} button
@@ -180,7 +186,6 @@ function inputInit()
             if (inputWASDEmulateDirection)
                 inputData[0][remapKey(e.code)] = 3;
         }
-        preventDefaultInput && e.preventDefault();
     }
 
     onkeyup = (e)=>
@@ -210,7 +215,7 @@ function inputInit()
         isUsingGamepad = false; 
         inputData[0][e.button] = 3; 
         mousePosScreen = mouseEventToScreen(e); 
-        e.button && e.preventDefault();
+        inputPreventDefault && e.button && e.preventDefault();
     }
     onmouseup     = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
     onmousemove   = (e)=> mousePosScreen = mouseEventToScreen(e);
@@ -394,7 +399,7 @@ function touchInputInit()
         wasTouching = touching;
 
         // prevent default handling like copy and magnifier lens
-        if (document.hasFocus()) // allow document to get focus
+        if (inputPreventDefault && document.hasFocus()) // allow document to get focus
             e.preventDefault();
         
         // must return true so the document will get focus

package/src/engineMedals.js

@@ -134,8 +134,9 @@ class Medal
     {
         const context = overlayContext;
         const width = min(medalDisplaySize.x, mainCanvas.width);
+        const height = medalDisplaySize.y;
         const x = overlayCanvas.width - width;
-        const y = -medalDisplaySize.y*hidePercent;
+        const y = -height*hidePercent;
 
         // draw containing rect and clip to that region
         context.save();
@@ -143,25 +144,34 @@ class Medal
         context.fillStyle = new Color(.9,.9,.9).toString();
         context.strokeStyle = new Color(0,0,0).toString();
         context.lineWidth = 3;
-        context.rect(x, y, width, medalDisplaySize.y);
+        context.rect(x, y, width, height);
         context.fill();
         context.stroke();
         context.clip();
 
-        // draw the icon and text
-        this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
-        const pos = vec2(x+medalDisplayIconSize+30, y+28);
-        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, undefined, 'left');
-        pos.y += 32;
-        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, undefined, 'left');
+        // draw the icon
+        const gap = vec2(.1, .05).scale(height);
+        const medalDisplayIconSize = height - 2*gap.x;
+        this.renderIcon(vec2(x + gap.x + medalDisplayIconSize/2, y + height/2), medalDisplayIconSize);
+
+        // draw the name
+        const nameSize = height*.5;
+        const descriptionSize = height*.3;
+        const pos = vec2(x + medalDisplayIconSize + 2*gap.x, y + gap.y*2 + nameSize/2);
+        const textWidth = width - medalDisplayIconSize - 3*gap.x;
+        drawTextScreen(this.name, pos, nameSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
+
+        // draw the description
+        pos.y = y + height - gap.y*2 - descriptionSize/2;
+        drawTextScreen(this.description, pos, descriptionSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
         context.restore();
     }
 
     /** Render the icon for a medal
      *  @param {Vector2} pos - Screen space position
-     *  @param {Number} [size=medalDisplayIconSize] - Screen space size
+     *  @param {Number} size - Screen space size
      */
-    renderIcon(pos, size=medalDisplayIconSize)
+    renderIcon(pos, size)
     {
         // draw the image or icon
         if (this.image)

package/src/engineObject.js

@@ -173,7 +173,8 @@ class EngineObject
         if (this.groundObject)
         {
             // apply friction in local space of ground object
-            const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
+            const groundSpeed = this.groundObject != this && this.groundObject.velocity ? 
+                this.groundObject.velocity.x : 0;
             this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
             this.groundObject = undefined;
             //debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
@@ -300,6 +301,7 @@ class EngineObject
                             this.pos.y = (oldPos.y-this.size.y/2|0)+this.size.y/2+epsilon;
 
                             // set ground object to self for tile collision
+                            // TODO: rework system so tile collision is its own object
                             this.groundObject = this;
                         }
                         else

package/src/engineParticles.js

@@ -166,7 +166,12 @@ class ParticleEmitter extends EngineObject
         else
             this.destroy();
 
-        debugParticles && debugRect(this.pos, vec2(this.emitSize), '#0f0', 0, this.angle);
+        if (debugParticles)
+        {
+            // show emitter bounds
+            const emitSize = typeof this.emitSize === 'number' ? vec2(this.emitSize) : this.emitSize;
+            debugRect(this.pos, emitSize, '#0f0', 0, this.angle);
+        }
     }
 
     /** Spawn one particle

package/src/engineRelease.js

@@ -32,4 +32,9 @@ function debugClear      (){}
 function debugScreenshot (){}
 function debugSaveCanvas (){}
 function debugSaveText   (){}
-function debugSaveDataURL(){}
+function debugSaveDataURL(){}
+function debugShowErrors(){}
+function debugVideoCaptureIsActive(){ return false; }
+function debugVideoCaptureStart (){}
+function debugVideoCaptureStop  (){}
+function debugVideoCaptureUpdate(){}

package/src/engineSettings.js

@@ -64,6 +64,7 @@ let fontDefault = 'arial';
 let showSplashScreen = false;
 
 /** Disables all rendering, audio, and input for servers
+ *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -73,12 +74,14 @@ let headlessMode = false;
 // WebGL settings
 
 /** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
+ *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let glEnable = true;
 
 /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
+ *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -179,6 +182,7 @@ let inputWASDEmulateDirection = true;
 
 /** True if touch input is enabled for mobile devices
  *  - Touch events will be routed to mouse events
+ *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -186,7 +190,7 @@ let touchInputEnable = true;
 
 /** True if touch gamepad should appear on mobile devices
  *  - Supports left analog stick, 4 face buttons and start button (button 9)
- *  - Must be set by end of gameInit to be activated
+ *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -264,12 +268,6 @@ let medalDisplaySlideTime = .5;
  *  @memberof Settings */
 let medalDisplaySize = vec2(640, 80);
 
-/** Size of icon in medal display
- *  @type {number}
- *  @default
- *  @memberof Settings */
-let medalDisplayIconSize = 50;
-
 /** Set to stop medals from being unlockable (like if cheats are enabled)
  *  @type {boolean}
  *  @default
@@ -445,8 +443,8 @@ function setSoundEnable(enable) { soundEnable = enable; }
 function setSoundVolume(volume)
 {
     soundVolume = volume;
-    if (soundEnable && !headlessMode && audioGainNode)
-        audioGainNode.gain.value = volume; // update gain immediately
+    if (soundEnable && !headlessMode && audioMasterGain)
+        audioMasterGain.gain.value = volume; // update gain immediately
 }
 
 /** Set default range where sound no longer plays
@@ -474,11 +472,6 @@ function setMedalDisplaySlideTime(time) { medalDisplaySlideTime = time; }
  *  @memberof Settings */
 function setMedalDisplaySize(size) { medalDisplaySize = size; }
 
-/** Set size of icon in medal display
- *  @param {number} size
- *  @memberof Settings */
-function setMedalDisplayIconSize(size) { medalDisplayIconSize = size; }
-
 /** Set to stop medals from being unlockable
  *  @param {boolean} preventUnlock
  *  @memberof Settings */

package/src/engineUtilities.js

@@ -91,7 +91,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @returns {number}
  *  @memberof Utilities */
 function lerpWrap(percent, valueA, valueB, wrapSize=1)
-{ return valueB + clamp(percent) * distanceWrap(valueA, valueB, wrapSize); }
+{ return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize); }
 
 /** Returns signed wrapped distance between the two angles passed in
  *  @param {number} angleA
@@ -289,23 +289,17 @@ class RandomGenerator
 ///////////////////////////////////////////////////////////////////////////////
 
 /** 
- * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- * @param {Vector2|number} [x]
- * @param {number} [y]
+ * Create a 2d vector, can take 1 or 2 scalar values
+ * @param {number} [x]
+ * @param {number} [y] - if y is undefined, x is used for both
  * @return {Vector2}
  * @example
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
- * let b = vec2(a);    // copy a into b
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
  * @memberof Utilities
  */
-function vec2(x=0, y)
-{
-    return typeof x == 'number' ? 
-        new Vector2(x, y == undefined? x : y) : 
-        new Vector2(x.x, x.y);
-}
+function vec2(x=0, y) { return new Vector2(x, y == undefined? x : y); }
 
 /** 
  * Check if object is a valid Vector2

package/src/engineWebGL.js

@@ -106,12 +106,12 @@ function glPreRender()
 
     // set vertex attributes
     let offset = glAdditive = glBatchAdditive = 0;
-    let initVertexAttribArray = (name, type, typeSize, size)=>
+    const initVertexAttribArray = (name, type, typeSize, size)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
         const stride = typeSize && gl_INSTANCE_BYTE_STRIDE; // only if not geometry
         const divisor = typeSize && 1; // only if not geometry
-        const normalize = typeSize==1; // only if color
+        const normalize = typeSize == 1; // only if color
         glContext.enableVertexAttribArray(location);
         glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
         glContext.vertexAttribDivisor(location, divisor);
@@ -210,14 +210,14 @@ function glCreateTexture(image)
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
-        glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
+        glSetTextureData(texture, image);
     else
     {
         // create a white texture
         const whitePixel = new Uint8Array([255, 255, 255, 255]);
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
-
+    
     // use point filtering for pixelated rendering
     const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
@@ -225,6 +225,18 @@ function glCreateTexture(image)
     return texture;
 }
 
+/** Set WebGL texture data from an image
+ *  @param {WebGLTexture} texture
+ *  @param {HTMLImageElement} image
+ *  @memberof WebGL */
+function glSetTextureData(texture, image)
+{
+    // build the texture
+    ASSERT(!!image && image.width > 0, 'Invalid image data.');
+    glContext.bindTexture(glContext.TEXTURE_2D, texture);
+    glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
+}
+
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
  *  @memberof WebGL */
 function glFlush()
@@ -278,10 +290,10 @@ function glSetAntialias(antialias=true)
  *  @param {Number} uv0Y
  *  @param {Number} uv1X
  *  @param {Number} uv1Y
- *  @param {Number} rgba
- *  @param {Number} [rgbaAdditive=0]
+ *  @param {Number} [rgba=-1] - white is -1
+ *  @param {Number} [rgbaAdditive=0] - black is 0
  *  @memberof WebGL */
-function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=-1, rgbaAdditive=0)
 {
     ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');