littlejsengine 1.3.8 → 1.4.5

package/engine/index.d.ts

@@ -70,7 +70,7 @@ declare function setBlendMode(additive?: boolean, useWebGL?: boolean): void;
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-declare function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: string, font?: string): void;
+declare function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: string, font?: string, context?: CanvasRenderingContext2D): void;
 /** Draw text on overlay canvas in world space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -151,6 +151,11 @@ declare function tileCollisionRaycast(posStart: Vector2, posEnd: Vector2, object
  *  @memberof Medals */
 declare function medalsInit(saveName: string): void;
 declare function medalsRender(): void;
+/** This can used to enable Newgrounds functionality
+ *  @param {Number} app_id   - The newgrounds App ID
+ *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+ *  @memberof Medals */
+declare function newgroundsInit(app_id: number, cipher?: string): void;
 declare function glInit(): void;
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
  *  @param {Boolean} [additive=0]
@@ -173,13 +178,6 @@ declare function glCompileShader(source: string, type: any): WebGLShader;
  *  @return {WebGLProgram}
  *  @memberof WebGL */
 declare function glCreateProgram(vsSource: WebGLShader, fsSource: WebGLShader): WebGLProgram;
-/** Create WebGL buffer
- *  @param bufferType
- *  @param size
- *  @param usage
- *  @return {WebGLBuffer}
- *  @memberof WebGL */
-declare function glCreateBuffer(bufferType: any, size: any, usage: any): WebGLBuffer;
 /** Create WebGL texture from an image and set the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
@@ -208,6 +206,11 @@ declare function glCopyToContext(context: CanvasRenderingContext2D, forceDraw?:
  *  @param [rgbaAdditive=0]
  *  @memberof WebGL */
 declare function glDraw(x: any, y: any, sizeX: any, sizeY: any, angle: any, uv0X: any, uv0Y: any, uv1X: any, uv1Y: any, rgba?: number, rgbaAdditive?: number): void;
+/** Set up a post processing shader
+ *  @param {String} shaderCode
+ *  @memberof WebGL */
+declare function glInitPostProcess(shaderCode: string): void;
+declare function glRenderPostProcess(): void;
 /** Start up LittleJS engine with your callback functions
  *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
  *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
@@ -568,6 +571,26 @@ declare class Vector2 {
      * @return {String} */
     toString(digits?: float): string;
 }
+/**
+ * Create a color object with RGBA values
+ * @param {Number} [r=1]
+ * @param {Number} [g=1]
+ * @param {Number} [b=1]
+ * @param {Number} [a=1]
+ * @return {Color}
+ * @memberof Utilities
+ */
+declare function colorRGBA(r?: number, g?: number, b?: number, a?: number): Color;
+/**
+ * Create a color object with HSLA values
+ * @param {Number} [h=0]
+ * @param {Number} [s=0]
+ * @param {Number} [l=1]
+ * @param {Number} [a=1]
+ * @return {Color}
+ * @memberof Utilities
+ */
+declare function colorHSLA(h?: number, s?: number, l?: number, a?: number): Color;
 /**
  * Color object (red, green, blue, alpha) with some helpful functions
  * @example
@@ -637,19 +660,17 @@ declare class Color {
      * @param {Number} [alphaAmount=0]
      * @return {Color} */
     mutate(amount?: number, alphaAmount?: number): Color;
-    /** 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(): string;
-    /** Returns this color expressed as 32 bit integer RGBA value
-     * @return {Number} */
-    rgbaInt(): number;
+    toString(useAlpha?: boolean): string;
     /** Set this color from a hex code
      * @param {String} hex - html hex code
      * @return {Color} */
     setHex(hex: string): Color;
-    /** Returns this color expressed as a hex code
-     * @return {String} */
-    getHex(): string;
+    /** Returns this color expressed as 32 bit RGBA value
+     * @return {Number} */
+    rgbaInt(): number;
 }
 /**
  * Timer object tracks how long has passed since it was set
@@ -689,6 +710,9 @@ declare class Timer {
     /** Returns this timer expressed as a string
      * @return {String} */
     toString(): string;
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
+     * @return {Number} */
+    valueOf(): number;
 }
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
@@ -933,7 +957,7 @@ declare class EngineObject {
      *  @param {Vector2} pos      - tile where the raycast is
      *  @return {Boolean}         - true if the raycast should hit */
     collideWithTileRaycast(tileData: number, pos: Vector2): boolean;
-    /** Called to check if a tile raycast hit
+    /** Called to check if a object collision should be resolved
      *  @param {EngineObject} object - the object to test against
      *  @return {Boolean}            - true if the collision should be resolved
      */
@@ -959,8 +983,8 @@ declare class EngineObject {
      *  @param {EngineObject} child */
     removeChild(child: EngineObject): void;
     /** Set how this object collides
-     *  @param {boolean} [collideSolidObjects=0] - Does it collide with solid objects
-     *  @param {boolean} [isSolid=0]             - Does it collide with and block other objects (expensive in large numbers)
+     *  @param {boolean} [collideSolidObjects=1] - Does it collide with solid objects
+     *  @param {boolean} [isSolid=1]             - Does it collide with and block other objects (expensive in large numbers)
      *  @param {boolean} [collideTiles=1]        - Does it collide with the tile collision */
     setCollision(collideSolidObjects?: boolean, isSolid?: boolean, collideTiles?: boolean): void;
     collideSolidObjects: boolean;
@@ -1018,13 +1042,13 @@ declare function worldToScreen(worldPos: Vector2): Vector2;
 declare let engineFontImage: any;
 declare class FontImage {
     /** Create an image font
-     *  @param {Image}   [image] - The image the font is stored in, if undefined the default font is used
+     *  @param {HTMLImageElement}   [image] - The image the font is stored in, if undefined the default font is used
      *  @param {Vector2} [tileSize=vec2(8)] - The size of the font source tiles
      *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
      *  @param {Number}  [startTileIndex=0] - Tile index in image where font starts
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
-    constructor(image?: new (width?: number, height?: number) => HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, startTileIndex?: number, context?: CanvasRenderingContext2D);
+    constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, startTileIndex?: number, context?: CanvasRenderingContext2D);
     image: any;
     tileSize: Vector2;
     paddingSize: Vector2;
@@ -1136,10 +1160,10 @@ declare const stickData: any[];
 /** Pulse the vibration hardware if it exists
  *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
  *  @memberof Input */
-declare function vibrate(pattern?: number): any;
+declare function vibrate(pattern?: number): boolean;
 /** Cancel any ongoing vibration
  *  @memberof Input */
-declare function vibrateStop(): any;
+declare function vibrateStop(): boolean;
 /** True if a touch device has been detected
  *  @const {boolean}
  *  @memberof Input */
@@ -1419,8 +1443,9 @@ declare 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(pos: any, angle?: number, emitSize?: number, emitTime?: number, emitRate?: number, emitConeAngle?: number, tileIndex?: number, tileSize?: number, colorStartA?: Color, colorStartB?: Color, colorEndA?: Color, colorEndB?: Color, particleTime?: number, sizeStart?: number, sizeEnd?: number, speed?: number, angleSpeed?: number, damping?: number, angleDamping?: number, gravityScale?: number, particleConeAngle?: number, fadeRate?: number, randomness?: number, collideTiles?: boolean, additive?: boolean, randomColorLinear?: boolean, renderOrder?: number);
+    constructor(pos: any, angle?: number, emitSize?: number, emitTime?: number, emitRate?: number, emitConeAngle?: number, tileIndex?: number, tileSize?: number, colorStartA?: Color, colorStartB?: Color, colorEndA?: Color, colorEndB?: Color, particleTime?: number, sizeStart?: number, sizeEnd?: number, speed?: number, angleSpeed?: number, damping?: number, angleDamping?: number, gravityScale?: number, particleConeAngle?: number, fadeRate?: number, randomness?: number, collideTiles?: boolean, additive?: boolean, randomColorLinear?: boolean, renderOrder?: number, localSpace?: boolean);
     /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
     emitSize: number;
     /** @property {Number} - How long to stay alive (0 is forever) */
@@ -1459,6 +1484,8 @@ declare class ParticleEmitter extends EngineObject {
     collideTiles: boolean;
     /** @property {Number} - Should particles use addtive blend */
     additive: boolean;
+    /** @property {Boolean} - Should it be in local space of emitter */
+    localSpace: boolean;
     /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
     trailScale: number;
     emitTimeBuffer: number;
@@ -1486,10 +1513,6 @@ declare const medals: any[];
 /** Set to stop medals from being unlockable (like if cheats are enabled)
  *  @memberof Medals */
 declare let medalsPreventUnlock: any;
-/** This can used to enable Newgrounds functionality
- *  @type {Newgrounds}
- *  @memberof Medals */
-declare let newgrounds: Newgrounds;
 declare let medalsDisplayQueue: any[];
 declare let medalsSaveName: any;
 declare let medalsDisplayTimeLast: any;
@@ -1534,6 +1557,7 @@ declare class Medal {
     renderIcon(x: number, y: number, size?: number): void;
     storageKey(): string;
 }
+declare let newgrounds: any;
 /**
  * Newgrounds API wrapper object
  * @example
@@ -1595,11 +1619,16 @@ declare let glContext: WebGLRenderingContext;
 declare let glTileTexture: WebGLTexture;
 declare let glActiveTexture: any;
 declare let glShader: any;
+declare let glArrayBuffer: any;
+declare let glVertexData: any;
 declare let glPositionData: any;
 declare let glColorData: any;
 declare let glBatchCount: any;
 declare let glBatchAdditive: any;
 declare let glAdditive: any;
+declare let glPostShader: any;
+declare let glPostArrayBuffer: any;
+declare let glPostTexture: any;
 declare const gl_ONE: 1;
 declare const gl_TRIANGLES: 4;
 declare const gl_SRC_ALPHA: 770;
@@ -1607,6 +1636,7 @@ declare const gl_ONE_MINUS_SRC_ALPHA: 771;
 declare const gl_BLEND: 3042;
 declare const gl_TEXTURE_2D: 3553;
 declare const gl_UNSIGNED_BYTE: 5121;
+declare const gl_BYTE: 5120;
 declare const gl_FLOAT: 5126;
 declare const gl_RGBA: 6408;
 declare const gl_NEAREST: 9728;
@@ -1617,12 +1647,16 @@ declare const gl_TEXTURE_WRAP_S: 10242;
 declare const gl_TEXTURE_WRAP_T: 10243;
 declare const gl_COLOR_BUFFER_BIT: 16384;
 declare const gl_CLAMP_TO_EDGE: 33071;
+declare const gl_TEXTURE0: 33984;
+declare const gl_TEXTURE1: 33985;
 declare const gl_ARRAY_BUFFER: 34962;
+declare const gl_STATIC_DRAW: 35044;
 declare const gl_DYNAMIC_DRAW: 35048;
 declare const gl_FRAGMENT_SHADER: 35632;
 declare const gl_VERTEX_SHADER: 35633;
 declare const gl_COMPILE_STATUS: 35713;
 declare const gl_LINK_STATUS: 35714;
+declare const gl_UNPACK_FLIP_Y_WEBGL: 37440;
 declare const gl_VERTICES_PER_QUAD: 6;
 declare const gl_INDICIES_PER_VERT: 6;
 declare const gl_MAX_BATCH: number;
@@ -1630,7 +1664,7 @@ declare const gl_VERTEX_BYTE_STRIDE: number;
 /** Name of engine */
 declare const engineName: "LittleJS";
 /** Version of engine */
-declare const engineVersion: "1.3.8";
+declare const engineVersion: "1.4.5";
 /** Frames per second to update objects
  *  @default */
 declare const frameRate: 60;
@@ -1655,5 +1689,5 @@ declare let tileImageSize: any;
 declare let tileImageFixBleed: any;
 declare let averageFPS: any;
 declare let drawCount: any;
-declare const styleBody: string;
+declare const styleBody: "margin:0;overflow:hidden;background:#000";
 declare const styleCanvas: "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)";

package/examples/breakout/game.js

@@ -4,12 +4,12 @@
 
 'use strict';
 
-let levelSize, ball, paddle, score, blockCount;
+let levelSize, ball, paddle, score, brickCount;
 
 // sound effects
-const sound_start      = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
-const sound_breakBlock = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
-const sound_bounce     = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
+const sound_start  = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
+const sound_break  = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
+const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
@@ -18,13 +18,15 @@ function gameInit()
     levelSize = vec2(72, 40);
     cameraPos = levelSize.scale(.5);
     paddle = new Paddle(vec2(levelSize.x/2-12,2));
-    score = blockCount = 0;
+    score = brickCount = 0;
 
-    // spawn blocks
+    // spawn bricks
     const pos = vec2();
     for (pos.x = 6; pos.x <= levelSize.x-6; pos.x += 4)
     for (pos.y = levelSize.y/2; pos.y <= levelSize.y-4; pos.y += 2)
-        new Block(pos);
+        new Brick(pos);
+
+    initPostProcess(); // set up a post processing shader
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -48,8 +50,8 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a the background
-    drawRect(cameraPos, levelSize.scale(2), new Color(.4,.4,.4));
-    drawRect(cameraPos, levelSize, new Color(.1,.1,.1));
+    drawRect(cameraPos, levelSize.scale(2), new Color(.5,.5,.5));
+    drawRect(cameraPos, levelSize, new Color(.05,.05,.05));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -58,12 +60,62 @@ function gameRenderPost()
     // use built in image font for text
     const font = new FontImage;
     font.drawText('Score: ' + score, cameraPos.add(vec2(0,22)), .2, 1);
-    if (!blockCount)
+    if (!brickCount)
         font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .25, 1);
     else if (!ball)
         font.drawText('Click to Play', cameraPos.add(vec2(0,-5)), .25, 1);
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// an example shader that can be used to apply a post processing effect
+function initPostProcess()
+{
+    const televisionShader = `
+    // Simple TV Shader Code
+    float hash(vec2 p)
+    {
+        p=fract(p*.3197);
+        return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
+    }
+    float noise(vec2 p)
+    {
+        vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
+        return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
+    }
+    void mainImage(out vec4 c, vec2 p)
+    {
+        p /= iResolution.xy;
+
+        // apply fuzz as horizontal offset
+        const float fuzz = .001;
+        const float fuzzScale = 800.;
+        p.x += fuzz*(noise(vec2(p.y*fuzzScale, iTime*9.))*2.-1.);
+
+        // init output color
+        c = texture2D(iChannel0, p);
+
+        // chromatic aberration
+        const float chromatic = .003;
+        c.r = texture2D(iChannel0, p - vec2(chromatic, 0)).r;
+        c.b = texture2D(iChannel0, p + vec2(chromatic, 0)).b;
+
+        // tv static noise
+        const float staticNoise = .1;
+        c += staticNoise * hash(vec2(p + mod(iTime, 1e3)));
+
+        // scan lines
+        const float scanlineScale = 800.;
+        const float scanlineAlpha = .1;
+        c *= 1. + scanlineAlpha*sin(p.y*scanlineScale);
+
+        // black vignette around the outside
+        const float vignette = 2.;
+        float dx = 2.*p.x - 1., dy = 2.*p.y - 1.;
+        c *= 1.-pow((dx*dx + dy*dy)/vignette, 6.);
+    }`;
+    glInitPostProcess(televisionShader);
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png?1');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/breakout/gameObjects.js

@@ -12,7 +12,7 @@ class Paddle extends EngineObject
         super(pos, vec2(8,1));
 
         // set to collide
-        this.setCollision(1,1);
+        this.setCollision();
         this.mass = 0;
     }
 
@@ -29,40 +29,42 @@ class Paddle extends EngineObject
             this.pos.x = mousePos.x;
         }
         this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
+        super.update();
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-class Block extends EngineObject 
+class Brick extends EngineObject 
 {
     constructor(pos)
     {
         super(pos, vec2(4,2), 1, vec2(32,16), 0, randColor());
 
         // set to collide
-        this.setCollision(1,1);
+        this.setCollision();
         this.mass = 0;
-        ++blockCount;
+        ++brickCount;
     }
 
     collideWithObject(o)              
     {
-        // destroy block when hit with ball
+        // destroy brick when hit with ball
         this.destroy();
         ++score;
-        --blockCount;
-        sound_breakBlock.play(this.pos);
+        --brickCount;
+        sound_break.play(this.pos);
 
         const color1 = this.color;
         const color2 = color1.lerp(new Color, .5);
         new ParticleEmitter(
-            this.pos, 0, this.size, .1, 200, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
+            this.pos, 0,                          // emitPos, emitAngle
+            this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emiteCone
             0, vec2(16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .2, 1, 1, .1, .05,    // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-            .99, .95, .4, PI, .1, // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-            1, 0, 1               // randomness, collide, additive, randomColorLinear, renderOrder
+            .2, 1, 2, .1, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+            .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
+            .1, .5, 0, 1        // fadeRate, randomness, collide, additive
         );
         
         return 1;
@@ -77,7 +79,7 @@ class Ball extends EngineObject
         super(pos, vec2(1), 0);
 
         // make a bouncy ball
-        this.setCollision(1);
+        this.setCollision();
         this.velocity = vec2(randSign(), -1).scale(.2);
         this.elasticity = 1;
         this.damping = 1;

package/examples/breakout/index.html

@@ -5,6 +5,6 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?111></script>
-<script src=game.js?111></script>
-<script src=gameObjects.js?111></script>
+<script src=../../engine/engine.all.js?118></script>
+<script src=gameObjects.js?118></script>
+<script src=game.js?118></script>

package/examples/empty/game.js

@@ -0,0 +1,35 @@
+/*
+    LittleJS Empty Project Example
+*/
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    drawTextScreen('LittleJS Empty Project', mainCanvasSize.scale(.5), 80);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/empty/index.html

@@ -0,0 +1,9 @@
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
+<link rel=icon type=image/png href=../../favicon.png>
+</head><body>
+
+<script src=../../engine/engine.all.js></script>
+<script src=game.js></script>

package/examples/module/game.js

@@ -0,0 +1,122 @@
+/*
+    LittleJS Hello World Starter Game
+*/
+
+'use strict';
+
+// import module
+import * as LittleJS from '../../engine/engine.all.module.js';
+const Vector2 = LittleJS.Vector2;
+const Color   = LittleJS.Color;
+const Timer   = LittleJS.Timer;
+const vec2    = LittleJS.vec2;
+
+// sound effects
+const sound_click = new LittleJS.Sound([.5,.5]);
+
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+
+// game variables
+let particleEmiter;
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    // create tile collision and visible tile layer
+    LittleJS.initTileCollision(vec2(32, 16));
+    const tileLayer = new LittleJS.TileLayer(vec2(), LittleJS.tileCollisionSize);
+    const pos = vec2();
+
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    const mainContext = LittleJS.mainContext;
+    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
+    for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
+    {
+        const data = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
+        if (data[0])
+        {
+            LittleJS.setTileCollisionData(pos, 1);
+
+            const tileIndex = 1;
+            const direction = LittleJS.randInt(4)
+            const mirror = LittleJS.randInt(2);
+            const color = LittleJS.randColor();
+            const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+            tileLayer.setData(pos, data);
+        }
+    }
+    tileLayer.redraw();
+
+    // move camera to center of collision
+    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(32);
+
+    // enable gravity
+    LittleJS.setGravity(-.01);
+
+    // create particle emitter
+    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0,9));
+    particleEmiter = new LittleJS.ParticleEmitter(
+        center, 0,                              // emitPos, emitAngle
+        1, 0, 500, Math.PI,                     // emitSize, emitTime, emitRate, emiteCone
+        0, vec2(16),                            // tileIndex, tileSize
+        new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
+        new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
+        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
+        .05, .5, 1, 1         // fadeRate, randomness, collide, additive
+    );
+    particleEmiter.elasticity = .3; // bounce when it collides
+    particleEmiter.trailScale = 2;  // stretch in direction of motion
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+    if (LittleJS.mouseWasPressed(0))
+    {
+        // play sound when mouse is pressed
+        sound_click.play(LittleJS.mousePos);
+
+        // change particle color and set to fade out
+        particleEmiter.colorStartA = new Color;
+        particleEmiter.colorStartB = LittleJS.randColor();
+        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1,0);
+        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1,0);
+
+        // unlock medals
+        medal_example.unlock();
+    }
+
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmiter.pos = LittleJS.mousePos;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with Modules', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/module/index.html

@@ -0,0 +1,9 @@
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
+<link rel=icon type=image/png href=../../favicon.png>
+</head><body>
+
+<!-- Add your game scripts here -->
+<script src=game.js?118 type=module></script>