littlejsengine 1.11.9 → 1.11.13

package/examples/typescript/build/examples/typescript/build.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/**
+ * LittleJS Build System
+ */
+'use strict';
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const ROOT_FOLDER = 'examples/typescript';
+const sourceFiles = [
+    'game.js',
+    // add your game's scripts here
+];
+console.log(`Building TypeScript for ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+console.log(`Removing old build filder...`);
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+console.log(`Compiling TypeScript...`);
+child_process.execSync(`npx tsc --outDir "./${BUILD_FOLDER}"`, { stdio: 'inherit' });
+console.log(`Moving js files to root...`);
+for (const file of sourceFiles)
+    fs.copyFileSync(`${BUILD_FOLDER}/${ROOT_FOLDER}/${file}`, `${file}`);
+console.log(`TypeScript built in ${((Date.now() - startTime) / 1e3).toFixed(2)} seconds!`);

package/examples/typescript/build/examples/typescript/game.js

@@ -0,0 +1,102 @@
+/*
+    Little JS TypeScript Demo
+    - A simple starter project
+    - Shows how to use LittleJS with modules
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const { tile, vec2, hsl } = LittleJS;
+// show the LittleJS splash screen
+LittleJS.setShowSplashScreen(true);
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    // get level data from the tiles image
+    const mainContext = LittleJS.mainContext;
+    const tileImage = LittleJS.textureInfos[0].image;
+    mainContext.drawImage(tileImage, 0, 0);
+    const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+        for (pos.y = tileCollisionSize.y; pos.y--;) {
+            // check if this pixel is set
+            const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
+            if (!imageData[4 * i])
+                continue;
+            // set tile data
+            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);
+            LittleJS.setTileCollisionData(pos, 1);
+        }
+    // draw tile layer with new data
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(32);
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
+    tile(0, 16), // tileIndex, tileSize
+    hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
+    hsl(0, 0, 0, 0), hsl(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, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.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
+        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
+        // unlock medals
+        medal_example.unlock();
+    }
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/build.bat

@@ -0,0 +1,5 @@
+rem LittleJS Build Script
+call node build.js
+
+@echo off
+if %ERRORLEVEL% neq 0 ( pause )

package/examples/typescript/build.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+/** 
+ * LittleJS Build System
+ */
+
+'use strict';
+
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const ROOT_FOLDER = 'examples/typescript';
+const sourceFiles =
+[
+    'game.js',
+    // add your game's scripts here
+];
+
+console.log(`Building TypeScript for ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+
+console.log(`Removing old build filder...`);
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+
+console.log(`Compiling TypeScript...`);
+child_process.execSync(`npx tsc --outDir "./${BUILD_FOLDER}"`, {stdio: 'inherit'});
+
+console.log(`Moving js files to root...`);
+for(const file of sourceFiles)
+    fs.copyFileSync(`${BUILD_FOLDER}/${ROOT_FOLDER}/${file}`, `${file}`);
+
+console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);

package/examples/typescript/game.js

@@ -0,0 +1,102 @@
+/*
+    Little JS TypeScript Demo
+    - A simple starter project
+    - Shows how to use LittleJS with modules
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const { tile, vec2, hsl } = LittleJS;
+// show the LittleJS splash screen
+LittleJS.setShowSplashScreen(true);
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    // get level data from the tiles image
+    const mainContext = LittleJS.mainContext;
+    const tileImage = LittleJS.textureInfos[0].image;
+    mainContext.drawImage(tileImage, 0, 0);
+    const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+        for (pos.y = tileCollisionSize.y; pos.y--;) {
+            // check if this pixel is set
+            const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
+            if (!imageData[4 * i])
+                continue;
+            // set tile data
+            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);
+            LittleJS.setTileCollisionData(pos, 1);
+        }
+    // draw tile layer with new data
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(32);
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
+    tile(0, 16), // tileIndex, tileSize
+    hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
+    hsl(0, 0, 0, 0), hsl(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, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.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
+        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
+        // unlock medals
+        medal_example.unlock();
+    }
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/game.ts

@@ -0,0 +1,134 @@
+/*
+    Little JS TypeScript Demo
+    - A simple starter project
+    - Shows how to use LittleJS with modules
+*/
+
+'use strict';
+
+// import module
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const {tile, vec2, hsl} = LittleJS;
+
+// show the LittleJS splash screen
+LittleJS.setShowSplashScreen(true);
+
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
+
+// sound effects
+const sound_click = new LittleJS.Sound([1,.5]);
+
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+
+// game variables
+let particleEmitter;
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    // create tile collision and visible tile layer
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+
+    // get level data from the tiles image
+    const mainContext = LittleJS.mainContext;
+    const tileImage = LittleJS.textureInfos[0].image;
+    mainContext.drawImage(tileImage, 0, 0);
+    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+    for (pos.y = tileCollisionSize.y; pos.y--;)
+    {
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        if (!imageData[4*i])
+            continue;
+        
+        // set tile data
+        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);
+        LittleJS.setTileCollisionData(pos, 1);
+    }
+
+    // draw tile layer with new data
+    tileLayer.redraw();
+
+    // move camera to center of collision
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(32);
+
+    // enable gravity
+    LittleJS.setGravity(-.01);
+
+    // create particle emitter
+    particleEmitter = new LittleJS.ParticleEmitter(
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
+        tile(0, 16),                // tileIndex, tileSize
+        hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(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, true, true   // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.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
+        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
+
+        // unlock medals
+        medal_example.unlock();
+    }
+
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html><head>
+<title>LittleJS TypeScript Demo</title>
+<meta charset=utf-8>
+<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 type=module></script>

package/examples/typescript/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "es2020",
+    "target": "es2020",
+    "outDir": "build"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.11.9",
+  "version": "1.11.13",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/newgrounds.js

@@ -10,12 +10,26 @@
 
 'use strict';
 
-///////////////////////////////////////////////////////////////////////////////
+/** Global Newgrounds object
+ *  @type {Newgrounds}
+ *  @memberof Medal */
+let newgrounds;
 
-/** Newgrounds medal auto unlocks in newgrounds API */
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Newgrounds medal auto unlocks in newgrounds API
+ * Particle Emitter - Spawns particles with the given settings
+ * @extends Medal
+ */
 class NewgroundsMedal extends Medal
 {
-    /** Create a medal object and adds it to the list of medals */
+    /** Create a newgrounds medal object and adds it to the list of medals
+     *  @param {Number} id            - The unique identifier of the medal
+     *  @param {String} name          - Name of the medal
+     *  @param {String} [description] - Description of the medal
+     *  @param {String} [icon]        - Icon for the medal
+     *  @param {String} [src]         - Image location for the medal
+     */
     constructor(id, name, description, icon, src)
     { super(id, name, description, icon, src); }
 
@@ -28,36 +42,26 @@ class NewgroundsMedal extends Medal
 }
 
 ///////////////////////////////////////////////////////////////////////////////
- 
-/** Global Newgrounds object */
-let newgrounds;
-
-/** This can used to enable Newgrounds functionality
- *  @param {Number} app_id   - The newgrounds App ID
- *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
- *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
- *  @memberof Medals */
-function newgroundsInit(app_id, cipher, cryptoJS)
-{ newgrounds = new Newgrounds(app_id, cipher, cryptoJS); }
-
 /** 
- * Newgrounds API wrapper object
- * @example
- * // create a newgrounds object, replace the app id with your own
- * const app_id = '52123:1ZuSTQ7l';
- * newgrounds = new Newgrounds(app_id);
+ * Newgrounds API object
  */
 class Newgrounds
 {
-    /** Create a newgrounds object
-     *  @param {String} app_id   - The newgrounds App ID
-     *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
-     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
+    /** Create the global newgrounds object
+     *  @param {string} app_id     - The newgrounds App ID
+     *  @param {string} [cipher]   - The encryption Key (AES-128/Base64)
+     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher 
+     *  @example
+     *  // create the newgrounds object, replace the app id with your own
+     *  const app_id = 'your_app_id_here';
+     *  new Newgrounds(app_id);
+     */
     constructor(app_id, cipher, cryptoJS)
     {
         ASSERT(!newgrounds, 'there can only be one newgrounds object');
         ASSERT(!cipher || cryptoJS, 'must provide cryptojs if there is a cipher');
 
+        newgrounds = this; // set global newgrounds object
         this.app_id = app_id;
         this.cipher = cipher;
         this.cryptoJS = cryptoJS;
@@ -104,20 +108,20 @@ class Newgrounds
     }
 
     /** Send message to unlock a medal by id
-     * @param {Number} id - The medal id */
+     * @param {number} id - The medal id */
     unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, true); }
 
     /** Send message to post score
-     * @param {Number} id    - The scoreboard id
-     * @param {Number} value - The score value */
+     * @param {number} id    - The scoreboard id
+     * @param {number} value - The score value */
     postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, true); }
 
     /** Get scores from a scoreboard
-     * @param {Number} id       - The scoreboard id
-     * @param {String} [user]   - A user's id or name
-     * @param {Number} [social] - If true, only social scores will be loaded
-     * @param {Number} [skip]   - Number of scores to skip before start
-     * @param {Number} [limit]  - Number of scores to include in the list
+     * @param {number} id       - The scoreboard id
+     * @param {string} [user]   - A user's id or name
+     * @param {number} [social] - If true, only social scores will be loaded
+     * @param {number} [skip]   - Number of scores to skip before start
+     * @param {number} [limit]  - Number of scores to include in the list
      * @return {Object}         - The response JSON object
      */
     getScores(id, user, social=0, skip=0, limit=10)
@@ -127,9 +131,9 @@ class Newgrounds
     logView() { return this.call('App.logView', {'host':this.host}, true); }
 
     /** Send a message to call a component of the Newgrounds API
-     * @param {String}  component    - Name of the component
+     * @param {string}  component    - Name of the component
      * @param {Object}  [parameters] - Parameters to use for call
-     * @param {Boolean} [async]      - If true, don't wait for response before continuing
+     * @param {boolean} [async]      - If true, don't wait for response before continuing
      * @return {Object}              - The response JSON object
      */
     call(component, parameters, async=false)
@@ -162,7 +166,12 @@ class Newgrounds
         const xmlHttp = new XMLHttpRequest();
         const url = 'https://newgrounds.io/gateway_v3.php';
         xmlHttp.open('POST', url, !debugMedals && async);
-        xmlHttp.send(formData);
+        try { xmlHttp.send(formData); }
+        catch(e)
+        {
+            debugMedals && console.log('newgrounds call failed', e);
+            return;
+        }
         debugMedals && console.log(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }

package/plugins/postProcess.js

@@ -2,6 +2,7 @@
  * LittleJS Post Processing Plugin
  * - Supports shadertoy style post processing shaders
  * - call initPostProcess to set it up
+ * @namespace PostProcessPlugin
  */
 
 'use strict';
@@ -9,12 +10,25 @@
 ///////////////////////////////////////////////////////////////////////////////
 // post processing - can be enabled to pass other canvases through a final shader
 
-let glPostShader, glPostTexture, glPostIncludeOverlay;
+/** Shader for post processing
+ *  @type {WebGLProgram}
+ *  @memberof PostProcessPlugin */
+let glPostShader;
+
+/** Texture for post processing
+ *  @type {WebGLTexture}
+ *  @memberof PostProcessPlugin */
+let glPostTexture;
+
+/** Should overlay canvas be included in post processing
+ *  @type {boolean}
+ *  @memberof PostProcessPlugin */
+let glPostIncludeOverlay;
 
 /** Set up a post processing shader
- *  @param {String} shaderCode
- *  @param {Boolean} includeOverlay
- *  @memberof WebGL */
+ *  @param {string} shaderCode
+ *  @param {boolean} [includeOverlay]
+ *  @memberof PostProcessPlugin */
 function initPostProcess(shaderCode, includeOverlay=false)
 {
     ASSERT(!glPostShader, 'can only have 1 post effects shader');