littlejsengine 1.9.1 → 1.9.2

package/examples/platformer/gameLevel.js

@@ -8,214 +8,180 @@
 
 'use strict';
 
-const tileType_ladder  = -1;
-const tileType_empty   = 0;
-const tileType_solid   = 1;
+const tileType_ladder      = -1;
+const tileType_empty       = 0;
+const tileType_solid       = 1;
+const tileType_breakable   = 2;
 
-let player, playerStartPos, tileLayer, tileBackgroundLayer, gameTimer = new Timer;
-let levelSize, levelColor, levelGroundColor, warmup;
+let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex;
+let levelSize, levelColor, levelBackgroundColor, levelOutlineColor, warmup;
 
-let tileBackground;
-const setTileBackgroundData = (pos, data=0)=>
-    pos.arrayCheck(tileCollisionSize) && (tileBackground[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
-const getTileBackgroundData = (pos)=>
-    pos.arrayCheck(tileCollisionSize) ? tileBackground[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
+const setTileData = (pos, layer, data)=>
+    pos.arrayCheck(tileCollisionSize) && (tileData[layer][(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
+const getTileData = (pos, layer)=>
+    pos.arrayCheck(tileCollisionSize) ? tileData[layer][(pos.y|0)*tileCollisionSize.x+pos.x|0]: 0;
 
-///////////////////////////////////////////////////////////////////////////////
-// level generation
-
-function buildTerrain(size)
+function buildLevel()
 {
-    tileBackground = [];
-    initTileCollision(size);
-    let startGroundLevel = 40;
-    let groundLevel = startGroundLevel;
-    let groundSlope = rand(-1,1);
-    let backgroundDelta = 0, backgroundDeltaSlope = 0;
-    for (let x=0; x < size.x; x++)
-    {
-        // pull slope towards start ground level
-        groundLevel += groundSlope = rand() < .05 ? rand(-1,1) :
-            groundSlope + (startGroundLevel - groundLevel)/1e3;
-        
-        // small jump
-        if (rand() < .04)
-            groundLevel += rand(9,-9);
-
-        if (rand() < .03)
-        {
-            // big jump
-            const jumpDelta = rand(19,-19);
-            startGroundLevel = clamp(startGroundLevel + jumpDelta, 20, 80);
-            groundLevel += jumpDelta;
-            groundSlope = rand(-1,1);
-        }
+    // create the level
+    levelColor = randColor(hsl(0,0,.2), hsl(0,0,.8));
+    levelBackgroundColor = levelColor.mutate().scale(.4,1);
+    levelOutlineColor = levelColor.mutate().add(hsl(0,0,.4)).clamp();
 
-        backgroundDelta += backgroundDeltaSlope;
-        if (rand() < .1)
-            backgroundDelta = rand(3, -1);
-        if (rand() < .1)
-            backgroundDelta = 0;
-        if (rand() < .1)
-            backgroundDeltaSlope = rand(-1,1);
-        backgroundDelta = clamp(backgroundDelta, -1, 3)
-
-        groundLevel = clamp(groundLevel, 20, levelSize.y-20);
-        for (let y=0; y < size.y; y++)
-        {
-            const pos = vec2(x,y);
-
-            let frontTile = tileType_empty;
-            if (y < groundLevel)
-                 frontTile = tileType_solid;
-
-            let backTile = tileType_empty;
-            if (y < groundLevel + backgroundDelta)
-                 backTile = tileType_solid;
-            
-            setTileCollisionData(pos, frontTile);
-            setTileBackgroundData(pos, backTile);
-        }
-    }
+    loadLevel();
+    initSky();
+    initParallaxLayers();
+    
+    // apply decoration to all level tiles
+    const pos = vec2();
+    const layerCount = tileLayers.length;
+    for (let layer=layerCount; layer--;)
+    for (pos.x=levelSize.x; pos.x--;)
+    for (pos.y=levelSize.y; pos.y--;)
+        decorateTile(pos, layer);
 
-    // add random holes
-    for (let i=levelSize.x; i--;)
-    {
-        const pos = vec2(rand(levelSize.x), rand(levelSize.y/2, 9));
-        const height = randInt(19,1);
-        const offset = vec2();
-        for (offset.x = randInt(19,1); --offset.x;)
-        for (offset.y = height; --offset.y;)
-            setTileCollisionData(pos.add(offset), tileType_empty);
-    }
+    // warm up level
+    warmup = 1;
+    for (let i = 500; i--;)
+        engineObjectsUpdate();
+    warmup = 0;
 
-    // add ladders
-    for (let ladderCount = 40; ladderCount--;)
-    {
-        // pick random pos
-        const pos = vec2(randInt(levelSize.x), randInt(levelSize.y))
+    // spawn player
+    player = new Player(cameraPos = playerStartPos);
+}
+
+function loadLevel()
+{
+    // load level data from an exported Tiled js file
+    const dataName = Object.keys(TileMaps)[0];
+    const tileMapData = TileMaps[dataName];
+    levelSize = vec2(tileMapData.width, tileMapData.height);
+    initTileCollision(levelSize);
+    engineObjectsDestroy();
 
-        // find good place to put ladders
-        let state = 0, ladderTop;
-        for (; pos.y > 9; --pos.y)
+    // set all level data tiles
+    tileData = [];
+    tileLayers = [];
+    playerStartPos = vec2(1, levelSize.y);
+    const layerCount = tileMapData.layers.length;
+    foregroundLayerIndex = layerCount-1;
+    for (let layer=layerCount; layer--;)
+    {
+        const layerData = tileMapData.layers[layer].data;
+        const tileLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
+        tileLayer.renderOrder = -1e3+layer;
+        tileLayers[layer] = tileLayer;
+        tileData[layer] = [];
+
+        for (let x=levelSize.x; x--;) 
+        for (let y=levelSize.y; y--;)
         {
-            const data = getTileCollisionData(pos);
-            if (state == 0 ||  state == 2)
-                data || state++;   // found empty, go to next state
-            else if (state == 1)
+            const pos = vec2(x,levelSize.y-1-y);
+            const tile = layerData[y*levelSize.x+x];
+
+            if (tile >= 17 && tile <= 20)
             {
-                data && state++;   // found solid, go to next state
-                ladderTop = pos.y;
+                // create object instead of tile
+                const objectPos = pos.add(vec2(.5));
+                if (tile == 17)
+                    playerStartPos = objectPos;
+                if (tile == 18)
+                    new Crate(objectPos);
+                if (tile == 19)
+                    new Enemy(objectPos);
+                if (tile == 20)
+                    new Coin(objectPos);
+                setTileData(pos, layer, 0);
+                continue;
             }
-            else if (state == 3 && data)
+
+            // set the tile data
+            setTileData(pos, layer, tile);
+
+            // get tile type for special tiles
+            let tileType = tileType_empty;
+            if (tile > 0)
+                tileType = tileType_breakable;
+            if (tile == 4)
+                tileType = tileType_ladder;
+            if (tile == 5)
+                tileType = tileType_solid;
+            if (tileType)
             {
-                // found solid again, build ladder
-                for (; ++pos.y <= ladderTop;)
-                    setTileCollisionData(pos, tileType_ladder);
-                break;
+                // set collision for solid tiles
+                if (layer == foregroundLayerIndex)
+                    setTileCollisionData(pos, tileType);
+
+                // randomize tile appearance
+                let direction, mirror, color;
+                if (tileType == tileType_breakable)
+                {
+                    direction = randInt(4);
+                    mirror = randInt(2);
+                    color = layer ? levelColor : levelBackgroundColor;
+                    color = color.mutate(.03);
+                }
+
+                // set tile layer data
+                const data = new TileLayerData(tile-1, direction, mirror, color);
+                tileLayer.setData(pos, data);
             }
         }
+        tileLayer.redraw();
     }
-
-    // spawn crates
-    for (let crateCount=100; crateCount--;)
-        new Crate(vec2((randInt(levelSize.x))+.5, randInt(levelSize.y)));
-
-    // spawn enemies
-    for (let enemyCount=10; enemyCount--;)
-        new Enemy(vec2(rand(levelSize.x), rand(levelSize.y)));
 }
 
-function generateLevel()
+function decorateTile(pos, layer=1)
 {
-    // clear old level
-    engineObjectsDestroy();
+    ASSERT((pos.x|0) == pos.x && (pos.y|0)== pos.y);
+    const tileLayer = tileLayers[layer];
 
-    // randomize ground level hills
-    buildTerrain(levelSize);
-
-    // find starting poing for player
-    playerStartPos = vec2(rand(levelSize.x), levelSize.y);
-    const raycastHit = tileCollisionRaycast(playerStartPos, vec2(playerStartPos.x, 0));
-    playerStartPos = raycastHit.add(vec2(0,1));
-}
-
-function makeTileLayers()
-{
-    // create tile layers
-    tileLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
-    tileLayer.renderOrder = -1e3;
-    tileBackgroundLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
-    tileBackgroundLayer.renderOrder = -2e3;
-
-    const pos = vec2();
-    for (pos.x = levelSize.x; pos.x--;)
-    for (pos.y = levelSize.y; pos.y--;)
+    if (layer == foregroundLayerIndex)
     {
-        // foreground tiles
-        let tileType = getTileCollisionData(pos);
-        if (tileType)
+        const tileType = getTileCollisionData(pos);
+        if (tileType <= 0)
         {
-            let direction, mirror, tileIndex, color;
-            if (tileType == tileType_solid)
-            {
-                tileIndex = 1 + rand()**3*2|0;
-                color = levelColor.mutate(.03);
-                direction = randInt(4);
-                mirror = randInt(2);
-            }
-            else if (tileType == tileType_ladder)
-                tileIndex = 3;
-
-            const data = new TileLayerData(tileIndex, direction, mirror, color);
-            tileLayer.setData(pos, data);
+            // force it to clear if it is empty
+            tileType || tileLayer.setData(pos, new TileLayerData, 1);
+            return;
         }
-        
-        // background tiles
-        tileType = getTileBackgroundData(pos);
-        if (tileType)
+        if (tileType == tileType_breakable)
+        for (let i=4;i--;)
         {
-            const data = new TileLayerData(1 + rand()**3*2|0, randInt(4), randInt(2), levelColor.mutate().scale(.4,1));
-            tileBackgroundLayer.setData(pos, data);
+            // outline towards neighbors of differing type
+            const neighborTileType = getTileCollisionData(pos.add(vec2().setDirection(i)));
+            if (neighborTileType == tileType)
+                continue;
+
+            // make pixel perfect outlines
+            const size = i&1 ? vec2(2, 16) : vec2(16, 2);
+            tileLayer.context.fillStyle = levelOutlineColor.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);
         }
     }
-    tileLayer.redraw();
-    tileBackgroundLayer.redraw();
-
-    if (!glEnable)
+    else
     {
-        // get rid of background if webgl is not enabled
-        tileBackgroundLayer.destroy();
-        tileBackgroundLayer = 0;
+        // make round corners
+        for (let i=4;i--;)
+        {
+            // check corner neighbors
+            const neighborTileDataA = getTileData(pos.add(vec2().setDirection(i)), layer);
+            const neighborTileDataB = getTileData(pos.add(vec2().setAngle((i+1)%4*PI/2)), layer);
+            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;
+            tileLayer.context.clearRect(
+                drawPos.x - s/2, tileLayer.canvas.height - drawPos.y - s/2, s, s);
+        }
     }
 }
-
-function buildLevel()
-{
-    levelSize = vec2(128);
-    levelColor = randColor(new Color(.2,.2,.2), new Color(.8,.8,.8));
-    levelGroundColor = levelColor.mutate().add(new Color(.4,.4,.4)).clamp();
-
-    generateLevel();
-    initSky();
-    initParallaxLayers();
-    
-    // apply decoration to level tiles
-    makeTileLayers();
-    const pos = vec2();
-    for (pos.x=levelSize.x; pos.x--;)
-    for (pos.y=levelSize.y; pos.y-->1;)
-    {
-        decorateBackgroundTile(pos);
-        decorateTile(pos);
-    }
-
-    // warm up level
-    warmup = 1;
-    for (let i = 500; i--;)
-        engineObjectsUpdate();
-    warmup = 0;
-
-    // spawn player
-    player = new Player(cameraPos = playerStartPos);
-}

package/examples/platformer/gameObjects.js

@@ -26,10 +26,10 @@ class GameObject extends EngineObject
         if (!this.isDead() && this.damageTimer.isSet())
         {
             const a = .5*percent(this.damageTimer, .15, 0);
-            this.additiveColor = new Color(a,a,a,0);
+            this.additiveColor = hsl(0,0,a,0);
         }
         else
-            this.additiveColor = new Color(0,0,0,0);
+            this.additiveColor = hsl(0,0,0,0);
 
         // kill if below level
         if (!this.isDead() && this.pos.y < -9)
@@ -68,7 +68,7 @@ class Crate extends GameObject
     { 
         super(pos, vec2(1), tile(2), (randInt(4))*PI/2);
 
-        this.color = (new Color).setHSLA(rand(),1,.8);
+        this.color = hsl(rand(),1,.8);
         this.health = 5;
 
         // make it a solid object for collision
@@ -88,6 +88,41 @@ class Crate extends GameObject
 
 ///////////////////////////////////////////////////////////////////////////////
 
+class Coin extends EngineObject 
+{
+    constructor(pos) 
+    { 
+        super(pos, vec2(1), tile(6));
+        this.color = hsl(.15,1,.5);
+    }
+
+    render()
+    {
+        // make it appear to spin
+        const t = time+this.pos.x/4+this.pos.y/4;
+        drawTile(this.pos, vec2(.1, .6), 0, this.color); // edge of coin
+        drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*PI), 1), this.tileInfo, this.color);
+    }
+
+    update(o)
+    {
+        if (!player)
+                return;
+
+        // check if player in range
+        const d = this.pos.distanceSquared(player.pos);
+        if (d > .5)
+            return; 
+        
+        // award points and destroy
+        ++score;
+        sound_score.play(this.pos);
+        this.destroy();
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 class Enemy extends GameObject 
 {
     constructor(pos) 
@@ -95,7 +130,7 @@ class Enemy extends GameObject
         super(pos, vec2(.9,.9), tile(5));
 
         this.drawSize = vec2(1);
-        this.color = (new Color).setHSLA(rand(), 1, .7);
+        this.color = hsl(rand(), 1, .7);
         this.health = 5;
         this.bounceTime = new Timer(rand(1e3));
         this.setCollision(true, false);
@@ -126,7 +161,7 @@ class Enemy extends GameObject
             return;
 
         ++score;
-        sound_killEnemy.play(this.pos);
+        sound_score.play(this.pos);
         makeDebris(this.pos, this.color, 300);
         this.destroy();
     }
@@ -180,10 +215,10 @@ class Grenade extends GameObject
     {
         drawTile(this.pos, vec2(.5), this.tileInfo, this.color, this.angle);
 
-        // draw additive flash when damaged
+        // draw additive flash exploding
         setBlendMode(true);
         const flash = Math.cos(this.getAliveTime()*2*PI);
-        drawTile(this.pos, vec2(2), tile(0, 16), new Color(1,0,0,.2-.2*flash));
+        drawTile(this.pos, vec2(2), tile(0, 16), hsl(0,1,.5,.2-.2*flash));
         setBlendMode(false);
     }
 }
@@ -212,8 +247,8 @@ class Weapon extends EngineObject
         this.addChild(this.shellEmitter = new ParticleEmitter(
             vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
             0,                       // tileInfo
-            new Color(1,.8,.5), new Color(.9,.7,.5), // colorStartA, colorStartB
-            new Color(1,.8,.5), new Color(.9,.7,.5), // colorEndA, colorEndB
+            rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
+            rgb(1,.8,.5), rgb(.9,.7,.5), // colorEndA, colorEndB
             3, .1, .1, .15, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
             1, .95, 1, 0, 0,    // damp, angleDamp, gravity, particleCone, fade
             .1, 1               // randomness, collide, additive, colorLinear, renderOrder
@@ -230,7 +265,6 @@ class Weapon extends EngineObject
         if (this.recoilTimer.active())
             this.localAngle = lerp(this.recoilTimer.getPercent(), 0, this.localAngle);
 
-
         this.mirror = this.parent.mirror;
         this.fireTimeBuffer += timeDelta;
         if (this.triggerIsDown)
@@ -262,7 +296,7 @@ class Bullet extends EngineObject
     constructor(pos, attacker, velocity, damage) 
     { 
         super(pos, vec2());
-        this.color = new Color(1,1,0);
+        this.color = rgb(1,1,0);
         this.velocity = velocity;
         this.attacker = attacker;
         this.damage = damage;
@@ -270,7 +304,7 @@ class Bullet extends EngineObject
         this.gravityScale = 0;
         this.renderOrder = 100;
         this.drawSize = vec2(.2,.5);
-        this.range = 20;
+        this.range = 5;
         this.setCollision(1,0);
     }
 
@@ -288,7 +322,18 @@ class Bullet extends EngineObject
         this.angle = this.velocity.angle();
         this.range -= this.velocity.length();
         if (this.range < 0)
-            this.kill();
+        {
+            const emitter = new ParticleEmitter(
+                this.pos, 0, .2, .1, 50, PI, tile(0),  // pos, angle, emit info, tileInfo
+                rgb(1,1,.1), rgb(1,1,1),    // colorStartA, colorStartB
+                rgb(1,1,.1,0), rgb(1,1,1,0),// colorEndA, colorEndB
+                .1, .5, .1, .05, 0, // particleTime, sizeStart, sizeEnd, speed, angleSpeed
+                1, 1, .5, PI, .1,   // damping, angleDamping, gravityScale, cone, fadeRate, 
+                .5, 0, 1            // randomness, collide, additive, randomColorLinear
+            );
+
+            this.destroy();
+        }
     }
     
     collideWithObject(o)
@@ -322,9 +367,9 @@ class Bullet extends EngineObject
         // spark effects
         const emitter = new ParticleEmitter(
             this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emiteCone
-            0,                           // tileInfo
-            new Color(1,1,0), new Color(1,0,0), // colorStartA, colorStartB
-            new Color(1,1,0), new Color(1,0,0), // colorEndA, colorEndB
+            0,                      // tileInfo
+            rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
+            rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB
             .2, .2, 0, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
             1, 1, .5, PI, .1,  // damp, angleDamp, gravityScale, particleCone, fade, 
             .5, 1, 1           // randomness, collide, additive, colorLinear, renderOrder

package/examples/platformer/gamePlayer.js

@@ -11,7 +11,7 @@
 
 class Player extends Character
 {
-    update() 
+    update()
     {
         // player controls
         this.holdingJump   = keyIsDown('ArrowUp') || gamepadIsDown(0);
@@ -21,7 +21,8 @@ class Player extends Character
 
         // movement control
         this.moveInput = isUsingGamepad ? gamepadStick(0) : 
-            vec2(keyIsDown('ArrowRight') - keyIsDown('ArrowLeft'), keyIsDown('ArrowUp') - keyIsDown('ArrowDown'));
+            vec2(keyIsDown('ArrowRight') - keyIsDown('ArrowLeft'), 
+            keyIsDown('ArrowUp') - keyIsDown('ArrowDown'));
 
         super.update();
     }