littlejsengine 1.4.0 → 1.4.6

package/engine/engineParticles.js

@@ -54,6 +54,7 @@ class ParticleEmitter extends EngineObject
      *  @param {Boolean} [additive=0]           - Should particles use addtive blend
      *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
      *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
+     *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
      */
     constructor
     ( 
@@ -83,7 +84,8 @@ class ParticleEmitter extends EngineObject
         collideTiles,
         additive,
         randomColorLinear = 1,
-        renderOrder = additive ? 1e9 : 0
+        renderOrder = additive ? 1e9 : 0,
+        localSpace
     )
     {
         super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
@@ -137,6 +139,8 @@ class ParticleEmitter extends EngineObject
         this.collideTiles      = collideTiles;
         /** @property {Number} - Should particles use addtive blend */
         this.additive          = additive;
+        /** @property {Boolean} - Should it be in local space of emitter */
+        this.localSpace          = localSpace;
         /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
         this.trailScale        = 0;
 
@@ -172,30 +176,38 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
-        const pos = this.emitSize.x != undefined ? // check if vec2 was used for size
-            (new Vector2(rand(-.5,.5), rand(-.5,.5))).multiply(this.emitSize).rotate(this.angle) // box emitter
-            : randInCircle(this.emitSize * .5);                                                  // circle emitter
-        const particle = new Particle(this.pos.add(pos), this.tileIndex, this.tileSize, 
-            this.angle + rand(this.particleConeAngle, -this.particleConeAngle));
+        let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
+            (new Vector2(rand(-.5,.5), rand(-.5,.5)))
+                .multiply(this.emitSize).rotate(this.angle) // box emitter
+            : randInCircle(this.emitSize * .5);             // circle emitter
+        let angle = rand(this.particleConeAngle, -this.particleConeAngle);
+        if (!this.localSpace)
+        {
+            pos = this.pos.add(pos);
+            angle += this.angle;
+        }
+            
+        const particle = new Particle(pos, this.tileIndex, this.tileSize, angle);
 
         // randomness scales each paremeter by a percentage
         const randomness = this.randomness;
         const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
 
         // randomize particle settings
-        const particleTime = randomizeScale(this.particleTime);
-        const sizeStart    = randomizeScale(this.sizeStart);
-        const sizeEnd      = randomizeScale(this.sizeEnd);
-        const speed        = randomizeScale(this.speed);
-        const angleSpeed   = randomizeScale(this.angleSpeed) * randSign();
-        const coneAngle    = rand(this.emitConeAngle, -this.emitConeAngle);
-        const colorStart   = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
-        const colorEnd     = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
+        const particleTime  = randomizeScale(this.particleTime);
+        const sizeStart     = randomizeScale(this.sizeStart);
+        const sizeEnd       = randomizeScale(this.sizeEnd);
+        const speed         = randomizeScale(this.speed);
+        const angleSpeed    = randomizeScale(this.angleSpeed) * randSign();
+        const coneAngle     = rand(this.emitConeAngle, -this.emitConeAngle);
+        const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
+        const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
+        const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
 
         // build particle settings
         particle.colorStart    = colorStart;
         particle.colorEndDelta = colorEnd.subtract(colorStart);
-        particle.velocity      = (new Vector2).setAngle(this.angle + coneAngle, speed);
+        particle.velocity      = (new Vector2).setAngle(velocityAngle, speed);
         particle.angleVelocity = angleSpeed;
         particle.lifeTime      = particleTime;
         particle.sizeStart     = sizeStart;
@@ -211,6 +223,7 @@ class ParticleEmitter extends EngineObject
         particle.renderOrder   = this.renderOrder;
         particle.trailScale    = this.trailScale;
         particle.mirror        = rand()<.5;
+        particle.localSpaceEmitter = this.localSpace && this;
 
         // setup callbacks for particles
         particle.destroyCallback = this.particleDestroyCallback;
@@ -257,20 +270,31 @@ class Particle extends EngineObject
 
         // draw the particle
         this.additive && setBlendMode(1);
+
+        let pos = this.pos, angle = this.angle;
+        if (this.localSpaceEmitter)
+        {
+            // in local space of emitter
+            pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle)); 
+            angle += this.localSpaceEmitter.angle;
+        }
         if (this.trailScale)
         {
             // trail style particles
-            const speed = this.velocity.length();
-            const direction = this.velocity.scale(1/speed);
+            let velocity = this.velocity;
+            if (this.localSpaceEmitter)
+                velocity = velocity.rotate(-this.localSpaceEmitter.angle);
+            const speed = velocity.length();
+            const direction = velocity.scale(1/speed);
             const trailLength = speed * this.trailScale;
             size.y = max(size.x, trailLength);
-            this.angle = direction.angle();
-            drawTile(this.pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileIndex, this.tileSize, color, this.angle, this.mirror);
+            angle = direction.angle();
+            drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileIndex, this.tileSize, color, angle, this.mirror);
         }
         else
-            drawTile(this.pos, size, this.tileIndex, this.tileSize, color, this.angle, this.mirror);
+            drawTile(pos, size, this.tileIndex, this.tileSize, color, angle, this.mirror);
         this.additive && setBlendMode();
-        debugParticles && debugRect(this.pos, size, '#f005', 0, this.angle);
+        debugParticles && debugRect(pos, size, '#f005', 0, angle);
 
         if (p == 1)
         {

package/engine/engineTileLayer.js

@@ -254,7 +254,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
     redrawEnd()
     {
         ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-        glCopyToContext(mainContext, 1);
+        glEnable && glCopyToContext(mainContext, 1);
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal

package/engine/engineUtilities.js

@@ -435,10 +435,10 @@ class Color
      * @return {Array} */
     getHSLA()
     {
-        const r = this.r;
-        const g = this.g;
-        const b = this.b;
-        const a = this.a;
+        const r = clamp(this.r);
+        const g = clamp(this.g);
+        const b = clamp(this.b);
+        const a = clamp(this.a);
         const max = Math.max(r, g, b);
         const min = Math.min(r, g, b);
         const l = (max + min) / 2;
@@ -474,20 +474,13 @@ class Color
         ).clamp();
     }
 
-    /** Returns this color expressed as an CSS color value
+    /** Returns this color expressed as a hex color code
+     * @param {Boolean} [useAlpha=1] - if alpha should be included in result
      * @return {String} */
-    toString()      
+    toString(useAlpha = 1)      
     { 
-        ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
-        return `rgb(${this.r*255|0},${this.g*255|0},${this.b*255|0},${this.a})`; 
-    }
-    
-    /** Returns this color expressed as 32 bit integer RGBA value
-     * @return {Number} */
-    rgbaInt()  
-    {
-        ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
-        return (this.r*255|0) + (this.g*255<<8) + (this.b*255<<16) + (this.a*255<<24); 
+        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
+        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
     }
 
     /** Set this color from a hex code
@@ -495,21 +488,24 @@ class Color
      * @return {Color} */
     setHex(hex)
     {
-        const fromHex = (a)=> parseInt(hex.slice(a,a+2), 16)/255;
+        const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
         this.r = fromHex(1);
         this.g = fromHex(3),
         this.b = fromHex(5);
-        this.a = 1;
-        ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1);
+        this.a = hex.length > 7 ? fromHex(7) : 1;
         return this;
     }
-
-    /** Returns this color expressed as a hex code
-     * @return {String} */
-    getHex()
+    
+    /** Returns this color expressed as 32 bit RGBA value
+     * @return {Number} */
+    rgbaInt()  
     {
-        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
-        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
+        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;
+        return r + g + b + a;
     }
 }
 

package/engine/engineWebGL.js

@@ -27,15 +27,13 @@ let glContext;
 let glTileTexture;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
 // Init WebGL, called automatically by the engine
 function glInit()
 {
-    if (!glEnable) return;
-
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl', {antialias: false});
@@ -68,24 +66,11 @@ function glInit()
     );
 
     // init buffers
-    const glVertexData = new ArrayBuffer(gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE);
-    glCreateBuffer(gl_ARRAY_BUFFER, glVertexData.byteLength, gl_DYNAMIC_DRAW);
+    glVertexData = new ArrayBuffer(gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE);
+    glArrayBuffer = glContext.createBuffer();
     glPositionData = new Float32Array(glVertexData);
     glColorData = new Uint32Array(glVertexData);
-
-    // setup the vertex data array
-    let offset = glBatchCount = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
-    {
-        const location = glContext.getAttribLocation(glShader, name);
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
-        offset += size*typeSize;
-    }
-    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+    glBatchCount = 0;
 }
 
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
@@ -93,8 +78,6 @@ function glInit()
  *  @memberof WebGL */
 function glSetBlendMode(additive)
 {
-    if (!glEnable) return;
-        
     // setup blending
     glAdditive = additive;
 }
@@ -105,8 +88,6 @@ function glSetBlendMode(additive)
  *  @memberof WebGL */
 function glSetTexture(texture=glTileTexture)
 {
-    if (!glEnable) return;
-    
     // must flush cache with the old texture to set a new one
     if (texture != glActiveTexture)
         glFlush();
@@ -121,8 +102,6 @@ function glSetTexture(texture=glTileTexture)
  *  @memberof WebGL */
 function glCompileShader(source, type)
 {
-    if (!glEnable) return;
-
     // build the shader
     const shader = glContext.createShader(type);
     glContext.shaderSource(shader, source);
@@ -141,8 +120,6 @@ function glCompileShader(source, type)
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
-    if (!glEnable) return;
-
     // build the program
     const program = glContext.createProgram();
     glContext.attachShader(program, glCompileShader(vsSource, gl_VERTEX_SHADER));
@@ -155,35 +132,16 @@ function glCreateProgram(vsSource, fsSource)
     return program;
 }
 
-/** Create WebGL buffer
- *  @param bufferType
- *  @param size
- *  @param usage
- *  @return {WebGLBuffer}
- *  @memberof WebGL */
-function glCreateBuffer(bufferType, size, usage)
-{
-    if (!glEnable) return;
-
-    // build the buffer
-    const buffer = glContext.createBuffer();
-    glContext.bindBuffer(bufferType, buffer);
-    glContext.bufferData(bufferType, size, usage);
-    return buffer;
-}
-
 /** Create WebGL texture from an image and set the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
-    if (!glEnable || !image || !image.width) return;
-
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
-    glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+    image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
         
     // use point filtering for pixelated rendering
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
@@ -196,16 +154,31 @@ function glCreateTexture(image)
 // called automatically by engine before render
 function glPreRender(width, height, cameraX, cameraY, cameraScale)
 {
-    if (!glEnable) return;
-
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
     glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
     glContext.useProgram(glShader);
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, glVertexData.byteLength, gl_DYNAMIC_DRAW);
     glSetBlendMode();
+    
+    // set vertex attributes
+    let offset = 0;
+    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    {
+        const location = glContext.getAttribLocation(glShader, name);
+        glContext.enableVertexAttribArray(location);
+        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        offset += size*typeSize;
+    }
+    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
+    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
     // build the transform matrix
     const sx = 2 * cameraScale / width;
@@ -224,7 +197,7 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glEnable || !glBatchCount) return;
+    if (!glBatchCount) return;
 
     const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
@@ -244,7 +217,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glBatchCount && !forceDraw) return;
+    if (!glBatchCount && !forceDraw) return;
     
     glFlush();
     
@@ -268,8 +241,6 @@ function glCopyToContext(context, forceDraw)
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffffff, rgbaAdditive=0)
 {
-    if (!glEnable) return;
-
     // flush if there is no room for more verts or if different blend mode
     if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
@@ -318,6 +289,90 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// post processing - can be enabled to pass other canvases through a final shader
+
+let glPostShader, glPostArrayBuffer, glPostTexture;
+
+/** Set up a post processing shader
+ *  @param {String} shaderCode
+ *  @memberof WebGL */
+function glInitPostProcess(shaderCode)
+{
+    ASSERT(!glPostShader); // can only have 1 post effects shader
+
+    if (!shaderCode) // default shader
+        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture2D(iChannel0,p/iResolution.xy);}';
+
+    // create the shader
+    glPostShader = glCreateProgram(
+        'precision highp float;'+        // use highp for better accuracy
+        'attribute vec2 p;'+             // position
+        'void main(){'+                  // shader entry point
+        'gl_Position=vec4(p,1,1);'+      // set position
+        '}'                              // end of shader
+        ,
+        'precision highp float;'+        // use highp for better accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time passed
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(gl_FragColor,gl_FragCoord.xy);'+ // call post process function
+        'gl_FragColor.a=1.;'+            // always use full alpha
+        '}'                              // end of shader
+    );
+
+    // create buffer and texture
+    glPostArrayBuffer = glContext.createBuffer();
+    glPostTexture = glCreateTexture();
+
+    // hide the original 2d canvas
+    mainCanvas.style.visibility = 'hidden';
+}
+
+// Render the post processing shader, called automatically by the engine
+function glRenderPostProcess()
+{
+    if (!glPostShader)
+        return;
+    
+    // prepare to render post process shader
+    const width = mainCanvas.width, height = mainCanvas.height;
+    if (glEnable)
+    {
+        glFlush(); // clear out the buffer
+        mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
+    }
+    else
+        glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height); // set viewport
+
+    // setup shader program to draw one triangle
+    glContext.useProgram(glPostShader);
+    glContext.disable(gl_BLEND);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glPostArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, new Float32Array([-3,1,1,-3,1,1]), gl_STATIC_DRAW);
+    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, true);
+
+    // set textures, pass in the 2d canvas and gl canvas in separate texture channels
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
+    glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
+
+    // set vertex position attribute
+    const vertexByteStride = 8;
+    const pLocation = glContext.getAttribLocation(glPostShader, 'p');
+    glContext.enableVertexAttribArray(pLocation);
+    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, 0, vertexByteStride, 0);
+
+    // set uniforms and draw
+    const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
+    glContext.uniform1i(uniformLocation('iChannel0'), 0);
+    glContext.uniform1f(uniformLocation('iTime'), time);
+    glContext.uniform3f(uniformLocation('iResolution'), width, height, 1);
+    glContext.drawArrays(gl_TRIANGLES, 0, 3);
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // store gl constants as integers so their name doesn't use space in minifed
 const 
@@ -328,6 +383,7 @@ gl_ONE_MINUS_SRC_ALPHA = 771,
 gl_BLEND = 3042,
 gl_TEXTURE_2D = 3553,
 gl_UNSIGNED_BYTE = 5121,
+gl_BYTE = 5120,
 gl_FLOAT = 5126,
 gl_RGBA = 6408,
 gl_NEAREST = 9728,
@@ -338,12 +394,16 @@ gl_TEXTURE_WRAP_S = 10242,
 gl_TEXTURE_WRAP_T = 10243,
 gl_COLOR_BUFFER_BIT = 16384,
 gl_CLAMP_TO_EDGE = 33071,
+gl_TEXTURE0 = 33984,
+gl_TEXTURE1 = 33985,
 gl_ARRAY_BUFFER = 34962,
+gl_STATIC_DRAW = 35044,
 gl_DYNAMIC_DRAW = 35048,
 gl_FRAGMENT_SHADER = 35632, 
 gl_VERTEX_SHADER = 35633,
 gl_COMPILE_STATUS = 35713,
 gl_LINK_STATUS = 35714,
+gl_UNPACK_FLIP_Y_WEBGL = 37440,
 
 // constants for batch rendering
 gl_VERTICES_PER_QUAD = 6,