littlejsengine 1.9.1 → 1.9.3

package/examples/platformer/gameEffects.js

@@ -21,7 +21,7 @@ const sound_dodge =        new Sound([.4,.2,150,.05,,.05,,,-1,,,,,4,,,,,.02]);
 const sound_walk =         new Sound([.3,.1,50,.005,,.01,4,,,,,,,,10,,,.5]);
 const sound_explosion =    new Sound([2,.2,72,.01,.01,.2,4,,,,,,,1,,.5,.1,.5,.02]);
 const sound_grenade =      new Sound([.5,.01,300,,,.02,3,.22,,,-9,.2,,,,,,.5]);
-const sound_killEnemy =    new Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
+const sound_score =        new Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
 
 ///////////////////////////////////////////////////////////////////////////////
 // special effects
@@ -31,15 +31,15 @@ const persistentParticleDestroyCallback = (particle)=>
     // copy particle to tile layer on death
     ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
     if (particle.groundObject)
-        tileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
+        tileLayers[foregroundLayerIndex].drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
 }
 
-function makeBlood(pos, amount) { makeDebris(pos, new Color(1,0,0), 50, .1, 0); }
-function makeDebris(pos, color = new Color, amount = 100, size=.2, elasticity = .3)
+function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
+function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 {
-    const color2 = color.lerp(new Color, .5);
+    const color2 = color.lerp(hsl(), .5);
     const emitter = new ParticleEmitter(
-        pos, 0, 1, .1, 100, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
         0,                      // tileInfo
         color, color2,          // colorStartA, colorStartB
         color, color2,          // colorEndA, colorEndB
@@ -58,8 +58,6 @@ function explosion(pos, radius=3)
 {
     ASSERT(radius > 0);
 
-    const damage = radius*2;
-
     // destroy level
     for (let x = -radius; x < radius; ++x)
     {
@@ -80,6 +78,7 @@ function explosion(pos, radius=3)
     // kill/push objects
     engineObjectsCallback(pos, radius*3, (o)=> 
     {
+        const damage = radius*2;
         const d = o.pos.distance(pos);
         if (o.isGameObject)
         {
@@ -99,11 +98,11 @@ function explosion(pos, radius=3)
 
     // smoke
     new ParticleEmitter(
-        pos, 0,                                 // pos, angle
-        radius/2, .2, 50*radius, PI,            // emitSize, emitTime, emitRate, emiteCone
-        0,                                      // tileInfo
-        new Color(0,0,0), new Color(0,0,0),     // colorStartA, colorStartB
-        new Color(0,0,0,0), new Color(0,0,0,0), // colorEndA, colorEndB
+        pos, 0,                     // pos, angle
+        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
+        0,                          // tileInfo
+        hsl(0,0,0), hsl(0,0,0),     // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
         1, .5, 2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .9, 1, -.3, PI, .1,  // damp, angleDamp, gravity, particleCone, fade
         .5, 0, 0, 0, 1e8     // randomness, collide, additive, colorLinear, renderOrder
@@ -111,11 +110,11 @@ function explosion(pos, radius=3)
 
     // fire
     new ParticleEmitter(
-        pos, 0,                                 // pos, angle
-        radius/2, .1, 100*radius, PI,           // emitSize, emitTime, emitRate, emiteCone
-        0,                                      // tileInfo
-        new Color(1,.5,.1), new Color(1,.1,.1), // colorStartA, colorStartB
-        new Color(1,.5,.1,0), new Color(1,.1,.1,0), // colorEndA, colorEndB
+        pos, 0,                         // pos, angle
+        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emiteCone
+        0,                              // tileInfo
+        rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
+        rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
         .7, .8, .2, .2, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
         .9, 1, -.2, PI, .05,  // damp, angleDamp, gravity, particleCone, fade
         .5, 0, 1, 0, 1e9      // randomness, collide, additive, colorLinear, renderOrder
@@ -132,186 +131,128 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
     // destroy tile
     const tileType = getTileCollisionData(pos);
 
-    if (!tileType) return 1;                  // empty
+    if (!tileType || tileType == tileType_solid)
+        return 1;
 
+    const tileLayer = tileLayers[foregroundLayerIndex];
     const centerPos = pos.add(vec2(.5));
     const layerData = tileLayer.getData(pos);
-    if (layerData)
-    {
-        makeDebris(centerPos, layerData.color.mutate());
-        makeSound && sound_destroyObject.play(centerPos);
-
-        setTileCollisionData(pos, tileType_empty);
-        tileLayer.setData(pos, new TileLayerData, 1); // set and clear tile
-
-        // cleanup neighbors
-        if (cleanNeighbors)
-        {
-            for (let i=-1;i<=1;++i)
-            for (let j=-1;j<=1;++j)
-                decorateTile(pos.add(vec2(i,j)));
-        }
-    }
-
-    return 1;
-}
-
-function decorateBackgroundTile(pos)
-{
-    if (!tileBackgroundLayer)
+    if (!layerData)
         return;
 
-    const tileData = getTileBackgroundData(pos);
-    if (tileData <= 0)
-        return;
+    // create effects
+    makeDebris(centerPos, layerData.color.mutate());
+    makeSound && sound_destroyObject.play(centerPos);
 
-    // make round corners
-    for (let i=4;i--;)
-    {
-        // check corner neighbors
-        const neighborTileDataA = getTileBackgroundData(pos.add(vec2().setAngle(i*PI/2)));
-        const neighborTileDataB = getTileBackgroundData(pos.add(vec2().setAngle((i+1)%4*PI/2)));
-        if (neighborTileDataA > 0 || neighborTileDataB > 0)
-            continue;
-
-        const directionVector = vec2().setAngle(i*PI/2+PI/4, 10).floor();
-        const drawPos = pos.add(vec2(.5))          // center
-            .scale(16).add(directionVector).floor(); // direction offset
-
-        // clear rect without any scaling to prevent blur from filtering
-        const s = 2;
-        tileBackgroundLayer.context.clearRect(
-            drawPos.x - s/2, tileBackgroundLayer.canvas.height - drawPos.y - s/2, s, s);
-    }
-}
+     // set and clear tile
+    tileLayer.setData(pos, new TileLayerData, 1);
+    setTileCollisionData(pos, tileType_empty);
+    setTileData(pos, foregroundLayerIndex, 0);
 
-function decorateTile(pos)
-{
-    ASSERT((pos.x|0) == pos.x && (pos.y|0)== pos.y);
-    const tileData = getTileCollisionData(pos);
-    if (tileData <= 0)
+    // cleanup neighbors
+    if (cleanNeighbors)
     {
-        tileData || tileLayer.setData(pos, new TileLayerData, 1); // force it to clear if it is empty
-        return;
+        for (let i=-1;i<=1;++i)
+        for (let j=-1;j<=1;++j)
+            decorateTile(pos.add(vec2(i,j)));
     }
 
-    for (let i=4;i--;)
-    {
-        // outline towards neighbors of differing type
-        const neighborTileData = getTileCollisionData(pos.add(vec2().setAngle(i*PI/2)));
-        if (neighborTileData == tileData)
-            continue;
-
-        // make pixel perfect outlines
-        const size = i&1 ? vec2(2, 16) : vec2(16, 2);
-        tileLayer.context.fillStyle = levelGroundColor.mutate(.1);
-        const drawPos = pos.scale(16)
-            .add(vec2(i==1?14:0,(i==0?14:0)))
-            .subtract((i&1? vec2(0,8-size.y/2) : vec2(8-size.x/2,0)));
-        tileLayer.context.fillRect(
-            drawPos.x, tileLayer.canvas.height - drawPos.y, size.x, -size.y);
-    }
+    return 1;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // sky with background gradient, stars, and planets
 
-let skySeed, skyColor, horizonColor;
-
-function initSky()
+class Sky extends EngineObject
 {
-    skySeed = rand(1e9);
-    skyColor = randColor(new Color(.5,.5,.5), new Color(.9,.9,.9));
-    horizonColor = skyColor.subtract(new Color(.05,.05,.05)).mutate(.3).clamp();
-}
+    constructor() 
+    {
+        super();
 
-function drawSky()
-{
-    // fill background with a gradient
-    const gradient = mainContext.fillStyle = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
-    gradient.addColorStop(0, skyColor);
-    gradient.addColorStop(1, horizonColor);
-    mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
-}
+        this.renderOrder = -1e4;
+        this.seed = randInt(1e9);
+        this.skyColor = randColor(hsl(0,0,.5), hsl(0,0,.9));
+        this.horizonColor = this.skyColor.subtract(hsl(0,0,.05,0)).mutate(.3);
+    }
 
-function drawStars()
-{
-    // draw stars and planets
-    const random = new RandomGenerator(skySeed);
-    const largeStarCount = 9;
-    for (let i = 1e3; i--;)
+    render()
     {
-        let size = random.float(6, 1);
-        let speed = random.float() < .9 ? random.float(5) : random.float(99,9);
-        let color = (new Color).setHSLA(random.float(.2,-.3), random.float()**9, random.float(1,.5), random.float(.9,.3));
-        if (i < largeStarCount)
-        {
-            // large planets and suns
-            size = random.float()**3*99 + 9;
-            speed = random.float(5);
-            color = (new Color).setHSLA(random.float(), random.float(), random.float(1,.5)).add(skyColor.scale(.5)).clamp();
-        }
+        // fill background with a gradient
+        const gradient = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
+        gradient.addColorStop(0, this.skyColor);
+        gradient.addColorStop(1, this.horizonColor);
+        mainContext.save();
+        mainContext.fillStyle = gradient;
+        mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
+        mainContext.globalCompositeOperation = 'lighter';
         
-        const extraSpace = 200;
-        const w = mainCanvas.width+2*extraSpace, h = mainCanvas.height+2*extraSpace;
-        const screenPos = vec2(
-            (random.float(w)+time*speed)%w-extraSpace,
-            (random.float(h)+time*speed*random.float())%h-extraSpace);
-
-        mainContext.fillStyle = color;
-        if (size < 9)
-            mainContext.fillRect(screenPos.x, screenPos.y, size, size);
-        else
+        // draw stars
+        const random = new RandomGenerator(this.seed);
+        for (let i=1e3; i--;)
         {
-            mainContext.arc(screenPos.x, screenPos.y, size, 0, 9);
-            mainContext.fill();
-            mainContext.beginPath();
+            const size = random.float(.5,2)**2;
+            const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
+            const color = hsl(random.float(-.3,.2), random.float(), random.float());
+            const extraSpace = 50;
+            const w = mainCanvas.width+2*extraSpace, h = mainCanvas.height+2*extraSpace;
+            const screenPos = vec2(
+                (random.float(w)+time*speed)%w-extraSpace,
+                (random.float(h)+time*speed*random.float())%h-extraSpace);
+            mainContext.fillStyle = color;
+            mainContext.fillRect(screenPos.x, screenPos.y, size, size);
         }
+        mainContext.restore();
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // parallax background mountain ranges
 
-let tileParallaxLayers;
-
-function initParallaxLayers()
+class ParallaxLayer extends EngineObject
 {
-    tileParallaxLayers = [];
-    for (let i=3; i--;)
+    constructor(index) 
     {
-        // setup the layer
-        const parallaxSize = vec2(600,300), startGroundLevel = rand(99,120)+i*30;
-        const tileParallaxLayer = tileParallaxLayers[i] = new TileLayer(vec2(), parallaxSize);
-        tileParallaxLayer.renderOrder = -3e3+i;
-        tileParallaxLayer.canvas.width = parallaxSize.x;
+        super();
+
+        const size = vec2(1024,512);
+        this.size = size;
+        this.index = index;
+        this.renderOrder = -3e3 + index;
+        this.canvas = document.createElement('canvas');
+        this.context = this.canvas.getContext('2d');
+        this.canvas.width = size.x;
+        this.canvas.height = size.y;
 
         // create a gradient
-        const layerColor = levelColor.mutate(.2).lerp(skyColor,.95-i*.15);
-        const gradient = tileParallaxLayer.context.fillStyle = 
-            tileParallaxLayer.context.createLinearGradient(0,0,0,tileParallaxLayer.canvas.height = parallaxSize.y);
+        const o1 = 40-20*index;
+        const o2 = 100-30*index;
+        const gradient = this.context.createLinearGradient(0,size.y/2-o1,0,size.y/2+o2);
+        const layerColor = levelColor.mutate(.1).lerp(sky.skyColor,1-index*.15);
         gradient.addColorStop(0,layerColor);
-        gradient.addColorStop(1,layerColor.subtract(new Color(1,1,1,0)).mutate(.1).clamp());
-
-        // draw mountains ranges
-        let groundLevel = startGroundLevel, groundSlope = rand(-1,1);
-        for (let x=parallaxSize.x;x--;)
-            tileParallaxLayer.context.fillRect(x,groundLevel += groundSlope = rand() < .05 ? rand(1, -1) :
-                groundSlope + (startGroundLevel - groundLevel)/2e3, 1, parallaxSize.y)
+        gradient.addColorStop(1,layerColor.mutate(.5).scale(.1,1));
+        this.context.fillStyle = gradient;
+
+        // draw procedural mountains ranges
+        let groundLevel = size.y/2, groundSlope = rand(-1,1);
+        for (let i=size.x; i--;)
+            this.context.fillRect(i, groundLevel += groundSlope = rand() < .3 ? rand(1,-1) :
+                groundSlope + (size.y/2 - groundLevel)/300, 1, size.y);
     }
-}
 
-function updateParallaxLayers()
-{
-    tileParallaxLayers.forEach((tileParallaxLayer, i)=>
+    render()
     {
-        const distance = 4+i;
-        const parallax = vec2(150,30).scale((i*i+1));
-        const cameraDeltaFromCenter = cameraPos.subtract(levelSize.scale(.5)).divide(levelSize.scale(-.5).divide(parallax));
-        tileParallaxLayer.scale = vec2(distance/cameraScale);
-        tileParallaxLayer.pos = cameraPos
-            .subtract(tileParallaxLayer.size.multiply(tileParallaxLayer.scale).scale(.5))
-            .add(cameraDeltaFromCenter.scale(1/cameraScale))
-            .subtract(vec2(0,150/cameraScale))
-    });
+        // position layer based on camera distance from center of level
+        const parallax = vec2(1e3,-100).scale(this.index**2);
+        const cameraDeltaFromCenter = cameraPos
+            .subtract(levelSize.scale(.5))
+            .divide(levelSize.divide(parallax));
+        const scale = this.size.scale(2+2*this.index);
+        const pos = mainCanvasSize.scale(.5)         // center screen
+           .add(vec2(-scale.x/2,-scale.y/2))         // center layer 
+           .add(cameraDeltaFromCenter.scale(-.5))    // apply parallax
+           .add(vec2(0,(this.index*.1)*this.size.y)); // separate layers
+        
+        // draw the parallax layer onto the main canvas
+        mainContext.drawImage(this.canvas, pos.x, pos.y, scale.x, scale.y);
+    }
 }