littlejsengine 1.11.13 → 1.12.4

package/examples/platformer/gameEffects.js

@@ -10,42 +10,47 @@
 
 'use strict';
 
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+import * as GameLevel from './gameLevel.js';
+const {vec2, hsl, rgb} = LJS;
+
 ///////////////////////////////////////////////////////////////////////////////
 // sound effects
 
-const sound_shoot =        new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
-const sound_destroyObject =new Sound([.5,,1e3,.02,,.2,1,3,.1,,,,,1,-30,.5,,.5]);
-const sound_die =          new Sound([.5,.4,126,.05,,.2,1,2.09,,-4,,,1,1,1,.4,.03]);
-const sound_jump =         new Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
-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_score =        new Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
+export const sound_shoot =        new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
+export const sound_destroyObject =new LJS.Sound([.5,,1e3,.02,,.2,1,3,.1,,,,,1,-30,.5,,.5]);
+export const sound_die =          new LJS.Sound([.5,.4,126,.05,,.2,1,2.09,,-4,,,1,1,1,.4,.03]);
+export const sound_jump =         new LJS.Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
+export const sound_dodge =        new LJS.Sound([.4,.2,150,.05,,.05,,,-1,,,,,4,,,,,.02]);
+export const sound_walk =         new LJS.Sound([.3,.1,50,.005,,.01,4,,,,,,,,10,,,.5]);
+export const sound_explosion =    new LJS.Sound([2,.2,72,.01,.01,.2,4,,,,,,,1,,.5,.1,.5,.02]);
+export const sound_grenade =      new LJS.Sound([.5,.01,300,,,.02,3,.22,,,-9,.2,,,,,,.5]);
+export const sound_score =        new LJS.Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
 
 ///////////////////////////////////////////////////////////////////////////////
 // special effects
 
-const persistentParticleDestroyCallback = (particle)=>
+export 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');
+    LJS.ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
     if (particle.groundObject)
-        tileLayers[foregroundLayerIndex].drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
+        GameLevel.foregroundTileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
 }
 
-function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
-function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
+export function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
+export function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 {
     const color2 = color.lerp(hsl(), .5);
-    const emitter = new ParticleEmitter(
-        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emitCone
-        0,                      // tileInfo
-        color, color2,          // colorStartA, colorStartB
-        color, color2,          // colorEndA, colorEndB
-        3, size,size, .1, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
-        1, .95, .4, PI, 0,      // damp, angleDamp, gravity, particleCone, fade
-        .5, 1                   // randomness, collide, additive, colorLinear, renderOrder
+    const emitter = new LJS.ParticleEmitter(
+        pos, 0, 1, .1, amount/.1, 3.14, // pos, angle, emitSize, emitTime, emitRate, emitCone
+        0,                     // tileInfo
+        color, color2,         // colorStartA, colorStartB
+        color, color2,         // colorEndA, colorEndB
+        3, size,size, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .95, .4, 3.14, 0,   // damp, angleDamp, gravity, particleCone, fade
+        .5, 1                  // randomness, collide, additive, colorLinear, renderOrder
     );
     emitter.elasticity = elasticity;
     emitter.particleDestroyCallback = persistentParticleDestroyCallback;
@@ -54,9 +59,9 @@ function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 
 ///////////////////////////////////////////////////////////////////////////////
 
-function explosion(pos, radius=3)
+export function explosion(pos, radius=3)
 {
-    ASSERT(radius > 0);
+    LJS.ASSERT(radius > 0);
 
     sound_explosion.play(pos);
 
@@ -74,11 +79,11 @@ function explosion(pos, radius=3)
     {
         const h = (cleanupRadius**2 - x**2)**.5;
         for (let y = -h; y < h; ++y)
-            decorateTile(pos.add(vec2(x,y)).floor());
+            GameLevel.decorateTile(pos.add(vec2(x,y)).floor());
     }
 
     // kill/push objects
-    engineObjectsCallback(pos, radius*3, (o)=> 
+    LJS.engineObjectsCallback(pos, radius*3, (o)=> 
     {
         const damage = radius*2;
         const d = o.pos.distance(pos);
@@ -89,52 +94,52 @@ function explosion(pos, radius=3)
         }
 
         // push
-        const p = percent(d, 2*radius, radius);
+        const p = LJS.percent(d, 2*radius, radius);
         const force = o.pos.subtract(pos).normalize(p*radius*.2);
         o.applyForce(force);
     });
 
     // smoke
-    new ParticleEmitter(
-        pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emitCone
-        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
+    new LJS.ParticleEmitter(
+        pos, 0,                       // pos, angle
+        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, emitRate, emitCone
+        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, 3.14, .1, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 0, 1e8      // randomness, collide, additive, colorLinear, renderOrder
     );
 
     // fire
-    new ParticleEmitter(
+    new LJS.ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emitCone
+        radius/2, .1, 100*radius, 3.14, // emitSize, emitTime, emitRate, emitCone
         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
+        .7, .8, .2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0, 1e9       // randomness, collide, additive, colorLinear, renderOrder
     );
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
+export function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
 {
     // pos must be an int
     pos = pos.floor();
 
     // destroy tile
-    const tileType = getTileCollisionData(pos);
+    const layer = GameLevel.foregroundTileLayer;
+    const tileType = layer.getCollisionData(pos);
     if (!tileType)
         return true;
 
-    const tileLayer = tileLayers[foregroundLayerIndex];
     const centerPos = pos.add(vec2(.5));
-    const layerData = tileLayer.getData(pos);
-    if (!layerData || tileType == tileType_solid)
+    const layerData = layer.getData(pos);
+    if (!layerData || tileType == GameLevel.tileType_solid)
         return false;
 
     // create effects
@@ -142,15 +147,15 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
     makeSound && sound_destroyObject.play(centerPos);
 
      // set and clear tile
-    tileLayer.setData(pos, new TileLayerData, 1);
-    setTileCollisionData(pos, tileType_empty);
+    layer.setData(pos, new LJS.TileLayerData, 1);
+    layer.setCollisionData(pos, GameLevel.tileType_empty);
 
     // cleanup neighbors
     if (cleanNeighbors)
     {
         for (let i=-1;i<=1;++i)
         for (let j=-1;j<=1;++j)
-            decorateTile(pos.add(vec2(i,j)));
+            GameLevel.decorateTile(pos.add(vec2(i,j)));
     }
 
     return true;
@@ -159,52 +164,54 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
 ///////////////////////////////////////////////////////////////////////////////
 // sky with background gradient, stars, and planets
 
-class Sky extends EngineObject
+export class Sky extends LJS.EngineObject
 {
     constructor() 
     {
         super();
 
         this.renderOrder = -1e4;
-        this.seed = randInt(1e9);
-        this.skyColor = randColor(hsl(0,0,.5), hsl(0,0,.9));
+        this.seed = LJS.randInt(1e9);
+        this.skyColor = LJS.randColor(hsl(0,0,.5), hsl(0,0,.9));
         this.horizonColor = this.skyColor.subtract(hsl(0,0,.05,0)).mutate(.3);
     }
 
     render()
     {
         // fill background with a gradient
-        const gradient = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
+        const canvas = LJS.mainCanvas;
+        const context = LJS.mainContext;
+        const gradient = context.createLinearGradient(0, 0, 0, canvas.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';
+        context.save();
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        context.globalCompositeOperation = 'lighter';
         
         // draw stars
-        const random = new RandomGenerator(this.seed);
+        const random = new LJS.RandomGenerator(this.seed);
         for (let i=1e3; i--;)
         {
             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 w = canvas.width+2*extraSpace, h = canvas.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);
+                (random.float(w)+LJS.time*speed)%w-extraSpace,
+                (random.float(h)+LJS.time*speed*random.float())%h-extraSpace);
+            context.fillStyle = color;
+            context.fillRect(screenPos.x, screenPos.y, size, size);
         }
-        mainContext.restore();
+        context.restore();
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // parallax background mountain ranges
 
-class ParallaxLayer extends EngineObject
+export class ParallaxLayer extends LJS.EngineObject
 {
     constructor(index) 
     {
@@ -223,15 +230,15 @@ class ParallaxLayer extends EngineObject
         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);
+        const layerColor = GameLevel.levelColor.mutate(.1).lerp(GameLevel.sky.skyColor,1-index*.15);
         gradient.addColorStop(0,layerColor);
         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);
+        let groundLevel = size.y/2, groundSlope = LJS.rand(-1,1);
         for (let i=size.x; i--;)
-            this.context.fillRect(i, groundLevel += groundSlope = rand() < .3 ? rand(1,-1) :
+            this.context.fillRect(i, groundLevel += groundSlope = LJS.rand() < .3 ? LJS.rand(1,-1) :
                 groundSlope + (size.y/2 - groundLevel)/300, 1, size.y);
     }
 
@@ -239,16 +246,16 @@ class ParallaxLayer extends EngineObject
     {
         // 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 cameraDeltaFromCenter = LJS.cameraPos
+            .subtract(GameLevel.levelSize.scale(.5))
+            .divide(GameLevel.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
+        const pos = LJS.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);
+        LJS.mainContext.drawImage(this.canvas, pos.x, pos.y, scale.x, scale.y);
     }
 }

package/examples/platformer/gameLevel.js

@@ -7,43 +7,56 @@
 
 'use strict';
 
-const tileType_ladder    = -1;
-const tileType_empty     = 0;
-const tileType_solid     = 1;
-const tileType_breakable = 2;
-
-let player, playerStartPos, tileLayers, foregroundLayerIndex, sky;
-let levelSize, levelColor, levelBackgroundColor, levelOutlineColor;
-
-function buildLevel()
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+import * as GameObjects from './gameObjects.js';
+import * as GameEffects from './gameEffects.js';
+import * as Game from './game.js';
+const {vec2, hsl, tile} = LJS;
+
+export const tileType_ladder    = -1;
+export const tileType_empty     = 0;
+export const tileType_solid     = 1;
+export const tileType_breakable = 2;
+
+export let playerStartPos, tileLayers, foregroundTileLayer, sky;
+export let levelSize, levelColor, levelBackgroundColor, levelOutlineColor;
+
+export function buildLevel()
 {
     // destroy all objects
-    engineObjectsDestroy();
+    LJS.engineObjectsDestroy();
 
     // create the level
-    levelColor = randColor(hsl(0,0,.2), hsl(0,0,.8));
+    levelColor = LJS.randColor(hsl(0,0,.2), hsl(0,0,.8));
     levelBackgroundColor = levelColor.mutate().scale(.4,1);
     levelOutlineColor = levelColor.mutate().add(hsl(0,0,.4)).clamp();
-    loadLevel();
+    buildLevelData();
 
     // create sky object with gradient and stars
-    sky = new Sky;
+    sky = new GameEffects.Sky;
 
     // create parallax layers
     for (let i=3; i--;)
-        new ParallaxLayer(i);
-
-    // spawn player
-    player = new Player(playerStartPos);
-    cameraPos = getCameraTarget();
+        new GameEffects.ParallaxLayer(i);
 }
 
-function loadLevel(level=0)
+function buildLevelData()
 {
     // load level data from an exported Tiled js file
-    const tileMapData = TileMaps['gameLevelData'];
+    let tileMapData = Game.gameLevelData;
+    if (!tileMapData)
+    {
+        // default level data if loading failed
+        tileMapData = {};
+        tileMapData.width = 100;
+        tileMapData.height = 20;
+        tileMapData.layers = [{data:[]}];
+        for(let i=100*20;i--;)
+            tileMapData.layers[0].data[i] = i>100 ? 2 : 0;
+    }
+
     levelSize = vec2(tileMapData.width, tileMapData.height);
-    initTileCollision(levelSize);
 
     // create table for tiles in the level tilemap
     const tileLookup =
@@ -62,11 +75,18 @@ function loadLevel(level=0)
     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));
+        let tileLayer;
+        if (layer < layerCount-1)
+            tileLayer = new LJS.TileLayer(vec2(), levelSize, tile(0,16,1));
+        else
+        {
+            // only foreground layer has collision
+            tileLayer = new LJS.TileCollisionLayer(vec2(), levelSize, tile(0,16,1));
+            foregroundTileLayer = tileLayer;
+        }
         tileLayer.renderOrder = -1e3+layer;
         tileLayers[layer] = tileLayer;
 
@@ -83,11 +103,11 @@ function loadLevel(level=0)
                 if (tile == tileLookup.player)
                     playerStartPos = objectPos;
                 if (tile == tileLookup.crate)
-                    new Crate(objectPos);
+                    new GameObjects.Crate(objectPos);
                 if (tile == tileLookup.enemy)
-                    new Enemy(objectPos);
+                    new GameObjects.Enemy(objectPos);
                 if (tile == tileLookup.coin)
-                    new Coin(objectPos);
+                    new GameObjects.Coin(objectPos);
                 continue;
             }
             
@@ -102,21 +122,21 @@ function loadLevel(level=0)
             if (tileType)
             {
                 // set collision for solid tiles
-                if (layer == foregroundLayerIndex)
-                    setTileCollisionData(pos, tileType);
+                if (tileLayer == foregroundTileLayer)
+                    tileLayer.setCollisionData(pos, tileType);
 
                 // randomize tile appearance
                 let direction, mirror, color;
                 if (tileType == tileType_breakable)
                 {
-                    direction = randInt(4);
-                    mirror = randInt(2);
+                    direction = LJS.randInt(4);
+                    mirror = LJS.randInt(2);
                     color = layer ? levelColor : levelBackgroundColor;
                     color = color.mutate(.03);
                 }
 
                 // set tile layer data
-                const data = new TileLayerData(tile-1, direction, mirror, color);
+                const data = new LJS.TileLayerData(tile-1, direction, mirror, color);
                 tileLayer.setData(pos, data);
             }
         }
@@ -131,25 +151,27 @@ function loadLevel(level=0)
         decorateTile(pos, layer);
 }
 
-function decorateTile(pos, layer=1)
+export function decorateTile(pos, layer=1)
 {
-    ASSERT((pos.x|0) == pos.x && (pos.y|0)== pos.y);
+    LJS.ASSERT((pos.x|0) == pos.x && (pos.y|0)== pos.y);
     const tileLayer = tileLayers[layer];
+    if (!tileLayer)
+        return;
 
-    if (layer == foregroundLayerIndex)
+    if (tileLayer == foregroundTileLayer)
     {
-        const tileType = getTileCollisionData(pos);
+        const tileType = tileLayer.getCollisionData(pos);
         if (tileType <= 0)
         {
             // force it to clear if it is empty
-            tileType || tileLayer.setData(pos, new TileLayerData, 1);
+            tileType || tileLayer.setData(pos, new LJS.TileLayerData, 1);
             return;
         }
         if (tileType == tileType_breakable)
         for (let i=4;i--;)
         {
             // outline towards neighbors of differing type
-            const neighborTileType = getTileCollisionData(pos.add(vec2().setDirection(i)));
+            const neighborTileType = tileLayer.getCollisionData(pos.add(vec2().setDirection(i)));
             if (neighborTileType == tileType)
                 continue;
 
@@ -174,7 +196,7 @@ function decorateTile(pos, layer=1)
             if (neighborTileDataA > 0 || neighborTileDataB > 0)
                 continue;
 
-            const directionVector = vec2().setAngle(i*PI/2+PI/4, 10).floor();
+            const directionVector = vec2().setAngle((i+.5)*LJS.PI/2, 10).floor();
             const drawPos = pos.add(vec2(.5))            // center
                 .scale(16).add(directionVector).floor(); // direction offset
 
@@ -185,3 +207,10 @@ function decorateTile(pos, layer=1)
         }
     }
 }
+
+export function getCameraTarget()
+{
+    // camera is above player
+    const offset = 100/LJS.cameraScale*LJS.percent(LJS.mainCanvasSize.y, 300, 600);
+    return Game.player.pos.add(vec2(0, offset));
+}

package/examples/platformer/{gameLevelData.js → gameLevelData.json}

@@ -1,13 +1,3 @@
-(function(name,data){
- if(typeof onTileMapLoaded === 'undefined') {
-  if(typeof TileMaps === 'undefined') TileMaps = {};
-  TileMaps[name] = data;
- } else {
-  onTileMapLoaded(name,data);
- }
- if(typeof module === 'object' && module && module.exports) {
-  module.exports = data;
- }})("gameLevelData",
 { "compressionlevel":-1,
  "height":64,
  "infinite":false,
@@ -178,4 +168,4 @@
  "type":"map",
  "version":"1.10",
  "width":256
-});
+}