littlejsengine 1.13.1 → 1.13.4

package/src/engineSettings.js

@@ -30,6 +30,13 @@ let cameraScale = 32;
 ///////////////////////////////////////////////////////////////////////////////
 // Display settings
 
+/** Enable applying color to tiles when using canvas2d
+ *  - This is slower but should be the same as webgl rendering
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let canvasColorTiles = true;
+
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default Vector2(1920,1080)
@@ -43,14 +50,21 @@ let canvasMaxSize = vec2(1920, 1080);
  *  @memberof Settings */
 let canvasFixedSize = vec2();
 
-/** Use nearest neighbor canvas scaling for more pixelated look
- *  - Must be set before startup to take effect
+/** Use nearest canvas scaling for more pixelated look
  *  - If enabled sets css image-rendering:pixelated
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let canvasPixelated = true;
 
+/** Use nearest canvas scaling for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let overlayCanvasPixelated = false;
+
 /** Disables texture filtering for crisper pixel art
  *  @type {boolean}
  *  @default
@@ -167,13 +181,13 @@ let particleEmitRateScale = 1;
  *  @memberof Settings */
 let gamepadsEnable = true;
 
-/** If true, the dpad input is also routed to the left analog stick (for better accessability)
+/** If true, the dpad input is also routed to the left analog stick (for better accessibility)
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let gamepadDirectionEmulateStick = true;
 
-/** If true the WASD keys are also routed to the direction keys (for better accessability)
+/** If true the WASD keys are also routed to the direction keys (for better accessibility)
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -291,6 +305,14 @@ function setCameraAngle(angle) { cameraAngle = angle; }
  *  @memberof Settings */
 function setCameraScale(scale) { cameraScale = scale; }
 
+/** Set if tiles should be colorized when using canvas2d
+ *  This can be slower but results should look nearly identical to webgl rendering
+ *  It can be enabled/disabled at any time
+ *  Optimized for performance, and will use faster method if color is white or untextured
+ *  @param {boolean} colorTiles
+ *  @memberof Settings */
+function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
+
 /** Set max size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -301,10 +323,30 @@ function setCanvasMaxSize(size) { canvasMaxSize = size; }
  *  @memberof Settings */
 function setCanvasFixedSize(size) { canvasFixedSize = size; }
 
-/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
  *  @param {boolean} pixelated
  *  @memberof Settings */
-function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
+function setCanvasPixelated(pixelated)
+{
+    canvasPixelated = pixelated;
+    if (mainCanvas)
+        mainCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+    if (glCanvas)
+        glCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
+
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
+ *  @param {boolean} pixelated
+ *  @memberof Settings */
+function setOverlayCanvasPixelated(pixelated)
+{ 
+    overlayCanvasPixelated = pixelated; 
+    if (overlayCanvas)
+        overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
 
 /** Disables texture filtering for crisper pixel art
  *  @param {boolean} pixelated
@@ -329,7 +371,12 @@ function setHeadlessMode(headless) { headlessMode = headless; }
 /** Set if webgl rendering is enabled
  *  @param {boolean} enable
  *  @memberof Settings */
-function setGLEnable(enable) { glEnable = enable; }
+function setGLEnable(enable)
+{
+    glEnable = enable;
+    if (glCanvas) // hide glCanvas if webgl is disabled
+        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+}
 
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
@@ -361,7 +408,7 @@ function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
  *  @memberof Settings */
 function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
 
-/** Set how much to bounce when a collision occur
+/** Set how much to bounce when a collision occurs
  *  @param {number} restitution
  *  @memberof Settings */
 function setObjectDefaultRestitution(restitution) { objectDefaultRestitution = restitution; }

package/src/engineUtilities.js

@@ -133,11 +133,12 @@ function isPowerOfTwo(value) { return !(value & (value - 1)); }
  *  @memberof Utilities */
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
-/** Returns true if two axis aligned bounding boxes are overlapping 
+/** Returns true if two axis aligned bounding boxes are overlapping
+ *  this can be used for simple collision detection between objects
  *  @param {Vector2} posA          - Center of box A
  *  @param {Vector2} sizeA         - Size of box A
  *  @param {Vector2} posB          - Center of box B
- *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+ *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
  *  @return {boolean}              - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
@@ -191,10 +192,11 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [frequency] - Frequency of the wave in Hz
  *  @param {number} [amplitude] - Amplitude (max height) of the wave
  *  @param {number} [t=time]    - Value to use for time of the wave
+ *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
-function wave(frequency=1, amplitude=1, t=time)
-{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
+function wave(frequency=1, amplitude=1, t=time, offset=0)
+{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
 
 /** Formats seconds to mm:ss style for display purposes 
  *  @param {number} t - time in seconds
@@ -851,9 +853,7 @@ class Color
     /** Checks if this is a valid color
      * @return {boolean} */
     isValid()
-    { 
-        return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a);
-    }
+    { return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineWebGL.js

@@ -1,12 +1,13 @@
 /**
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
+ * - Will fall back to 2D canvas rendering if webgl is not supported
  * - For normal stuff you won't need to see or call anything in this file
  * - For advanced stuff there are helper functions to create shaders, textures, etc
  * - Can be disabled with glEnable to revert to 2D canvas rendering
  * - Batches sprite rendering on GPU for incredibly fast performance
  * - Sprite transform math is done in the shader where possible
- * - Supports shadertoy style post processing shaders
+ * - Supports shadertoy style post processing shaders via plugin
  * @namespace WebGL
  */
 
@@ -47,6 +48,14 @@ function glInit()
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
+    if (!glContext)
+    {
+        console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
+        glCanvas = glContext = undefined;
+        glEnable = false;
+        return;
+    }
+
     // create the webgl canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
@@ -96,7 +105,7 @@ function glInit()
 // Also used by tile layer rendering when redrawing tiles
 function glPreRender()
 {
-    if (!glEnable || headlessMode) return;
+    if (!glEnable || !glContext) return;
 
     // set up the shader and canvas
     glClearCanvas();
@@ -147,6 +156,8 @@ function glPreRender()
  *  @memberof WebGL */
 function glClearCanvas()
 {
+    if (!glContext) return;
+    
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width=drawCanvas.width, glCanvas.height=drawCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
@@ -160,7 +171,7 @@ function glClearCanvas()
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (headlessMode || texture == glActiveTexture)
+    if (!glContext || texture == glActiveTexture)
         return;
 
     glFlush();
@@ -179,6 +190,8 @@ function glSetTexture(texture, wrap=false)
  *  @memberof WebGL */
 function glCompileShader(source, type)
 {
+    if (!glContext) return;
+
     // build the shader
     const shader = glContext.createShader(type);
     glContext.shaderSource(shader, source);
@@ -197,6 +210,8 @@ function glCompileShader(source, type)
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
+    if (!glContext) return;
+
     // build the program
     const program = glContext.createProgram();
     glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
@@ -215,6 +230,8 @@ function glCreateProgram(vsSource, fsSource)
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
+    if (!glContext) return;
+
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -250,6 +267,7 @@ function glCreateTexture(image)
  *  @memberof WebGL */
 function glDeleteTexture(texture)
 {
+    if (!glContext) return;
     glContext.deleteTexture(texture);
 }
 
@@ -259,6 +277,8 @@ function glDeleteTexture(texture)
  *  @memberof WebGL */
 function glSetTextureData(texture, image)
 {
+    if (!glContext) return;
+
     // build the texture
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -269,7 +289,7 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glEnable || !glInstanceCount) return;
+    if (!glEnable || !glContext || !glInstanceCount) return;
 
     const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
@@ -289,7 +309,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable)
+    if (!glEnable || !glContext)
         return;
 
     glFlush();