improve docs

docs/index.css

@@ -0,0 +1,6 @@
+
+
+.prettyprint.source,
+.prettyprint code {
+    background-color: #f00;
+}

docs/static/index.css

@@ -0,0 +1,4 @@
+
+
+.prettyprint.source,
+.prettyprint code { background-color: #f00;}

engine/engine.js

@@ -22,7 +22,7 @@
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.4';
+const engineVersion = '1.1.5';
 
 /** Frames per second to update objects
  *  @default */

engine/engineAudio.js

@@ -10,26 +10,30 @@
 
 'use strict';
 
-/** Sound Object - Stores a zzfx sound for later use and can be played positionally */
+/** 
+ * Sound Object - Stores a zzfx sound for later use and can be played positionally
+ * @example
+ * // create a sound
+ * const sound_example = new Sound([.5,.5]);
+ * 
+ * // play the sound
+ * sound_example.play();
+ */
 class Sound
 {
-    /**
-     * Create a sound object and cache the zzfx samples for later use
-     * @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
-     * @param {Number} [range=defaultSoundRange] - World space max range of sound, will not play if camera is farther away
-     * @param {Number} [taper=defaultSoundTaper] - At what percentage of range should it start tapering off
-     * @example
-     * // create a sound
-     * const sound_example = new Sound([.5,.5]);
-     * 
-     * // play the sound
-     * sound_example.play();
+    /** Create a sound object and cache the zzfx samples for later use
+     *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
+     *  @param {Number} [range=defaultSoundRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {Number} [taper=defaultSoundTaper] - At what percentage of range should it start tapering off
      */
     constructor(zzfxSound, range=defaultSoundRange, taper=defaultSoundTaper)
     {
         if (!soundEnable) return;
 
+        /** @property {Number} - World space max range of sound, will not play if camera is farther away */
         this.range = range;
+
+        /** @property {Number} - At what percentage of range should it start tapering off */
         this.taper = taper;
 
         // get randomness from sound parameters
@@ -89,37 +93,38 @@ class Sound
     }
 }
 
-/** Music Object - Stores a zzfx music track for later use */
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * @example
+ * // create some music
+ * const music_example = new Music(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 1, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music
+ * music_example.play();
+ */
 class Music
 {
-    /**
-     * Create a music object and cache the zzfx music samples for later use
-     * @param {Array} zzfxMusic - Array of zzfx music parameters
-     * @example
-     * // create some music
-     * const music_example = new Music(
-     * [
-     *     [                         // instruments
-     *       [,0,400]                // simple note
-     *     ], 
-     *     [                         // patterns
-     *         [                     // pattern 1
-     *             [                 // channel 0
-     *                 0, -1,        // instrument 0, left speaker
-     *                 1, 0, 9, 1    // channel notes
-     *             ], 
-     *             [                 // channel 1
-     *                 0, 1,         // instrument 1, right speaker
-     *                 0, 12, 17, -1 // channel notes
-     *             ]
-     *         ],
-     *     ],
-     *     [0, 0, 0, 0], // sequence, play pattern 0 four times
-     *     90            // BPM
-     * ]);
-     * 
-     * // play the music
-     * music_example.play();
+    /** Create a music object and cache the zzfx music samples for later use
+     *  @param {Array} zzfxMusic - Array of zzfx music parameters
      */
     constructor(zzfxMusic)
     {

engine/engineDebug.js

@@ -1,5 +1,5 @@
 /** 
- *  LittleJS Medal System
+ *  LittleJS Debug System
  *  <br> - Debug overlay with mouse pick
  *  <br> - Debug primitive rendering
  *  <br> - Save screenshots to disk
@@ -270,12 +270,12 @@ const debugRender = ()=>
             const printVec2 = (v)=> '(' + (v.x>0?' ':'') + (v.x).toFixed(2) + ',' + (v.y>0?' ':'')  + (v.y).toFixed(2) + ')';
             const args = [.5, new Color, .05, undefined, undefined, 'monospace'];
 
-            drawText('pos = ' + printVec2(bestObject.pos) 
+            drawOverlayText('pos = ' + printVec2(bestObject.pos) 
                 + (bestObject.angle>0?'  ':' ') + (bestObject.angle*180/PI).toFixed(1) + '°', 
                 pos = pos.add(height), ...args);
-            drawText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
-            drawText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height), ...args);
+            drawOverlayText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
+            drawOverlayText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
+            drawOverlayText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height), ...args);
             mainContext = saveContext;
         }
 

engine/engineDraw.js

@@ -53,21 +53,22 @@ const screenToWorld = (screenPos)=>
 const worldToScreen = (worldPos)=>
     worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
 
-/** Draw textured tile centered on pos
+/** Draw textured tile centered on pos, with color applied if using WebGL
  *  @param {Vector2} pos - Center of the tile
  *  @param {Vector2} [size=new Vector2(1,1)] - Size of the tile
  *  @param {Number}  [tileIndex=-1] - Tile index to use, negative is untextured
  *  @param {Vector2} [tileSize=defaultTileSize] - Tile size in source pixels
- *  @param {Color}   [color=new Color(1,1,1)]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [mirror=0]
- *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+ *  @param {Color}   [color=new Color(1,1,1)] - Color to modulate with
+ *  @param {Number}  [angle=0] - Angle to rotate by
+ *  @param {Boolean} [mirror=0] - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=new Color(0,0,0,0)] - Additive color applied
+ *  @param {Boolean} [useWebGL=glEnable] - Use accelerated WebGL rendering if enabled
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror, 
-    additiveColor=new Color(0,0,0,0))
+    additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
 {
     showWatermark && ++drawCount;
-    if (glEnable)
+    if (useWebGL && glEnable)
     {
         if (tileIndex < 0)
         {
@@ -123,10 +124,11 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, col
  *  @param {Vector2} [size=new Vector2(1,1)]
  *  @param {Color}   [color=new Color(1,1,1)]
  *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle)
+function drawRect(pos, size, color, angle, useWebGL)
 {
-    drawTile(pos, size, -1, defaultTileSize, color, angle);
+    drawTile(pos, size, -1, defaultTileSize, color, angle, 0, 0, useWebGL);
 }
 
 /** Draw textured tile centered on pos in screen space
@@ -138,37 +140,40 @@ function drawRect(pos, size, color, angle)
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [mirror=0]
  *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor)
+function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor);
+    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
 }
 
 /** Draw colored untextured rectangle in screen space
  *  @param {Vector2} pos
  *  @param {Vector2} [size=new Vector2(1,1)]
  *  @param {Color}   [color=new Color(1,1,1)]
  *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawRectScreenSpace(pos, size, color, angle)
+function drawRectScreenSpace(pos, size, color, angle, useWebGL)
 {
-    drawTileScreenSpace(pos, size, -1, defaultTileSize, color, angle);
+    drawTileSrceenSpace(pos, size, -1, defaultTileSize, color, angle, 0, 0, useWebGL);
 }
 
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {Number}  [thickness=.1]
  *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color)
+function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle());
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), 0, 0, useWebGL);
 }
 
-/** Draw directly to a 2d canvas context in world space (bipass webgl)
+/** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
  *  @param {Number}   angle
@@ -198,7 +203,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=defaultFont)
+function drawOverlayText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=defaultFont)
 {
     pos = worldToScreen(pos);
     overlayContext.font = size*cameraScale + 'px '+ font;
@@ -214,7 +219,7 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-/** Enable additive or regular blend mode
+/** Enable normal or additive blend mode
  *  @param {Boolean} [additive=0]
  *  @memberof Draw */
 function setBlendMode(additive)

engine/engineMedals.js

@@ -38,22 +38,23 @@ function medalsInit(saveName)
     debugMedals || medals.forEach(medal=> medal.unlocked = localStorage[medal.storageKey()]);
 }
 
-/** Medal Object - Tracks an unlockable medal */
+/** 
+ * Medal Object - Tracks an unlockable medal 
+ * @example
+ * // create a medal
+ * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
+ * 
+ * // unlock the medal
+ * medal_example.unlock();
+ */
 class Medal
 {
-    /**
-     * Create an 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
-     * @example
-     * // create a medal
-     * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
-     * 
-     * // unlock the medal
-     * medal_example.unlock();
+    /** Create an 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)
     {
@@ -170,19 +171,19 @@ function medalsRender()
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Newgrounds API wrapper object */
+/** 
+ * Newgrounds API wrapper object
+ * @example
+ * // create a newgrounds object, replace the app id and cipher with your own
+ * const app_id = '53123:1ZuSTQ9l';
+ * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
+ * newgrounds = new Newgrounds(app_id, cipher);
+ */
 class Newgrounds
 {
-    /**
-     * Create a newgrounds object
-     * @param {Number} app_id - The newgrounds App ID
-     * @param {String} [cipher] - The encryption Key (AES-128/Base64)
-     * @example
-     * // create a newgrounds object, replace the app id and cipher with your own
-     * const app_id = '53123:1ZuSTQ9l';
-     * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
-     * newgrounds = new Newgrounds(app_id, cipher);
-     */
+    /** Create a newgrounds object
+     *  @param {Number} app_id - The newgrounds App ID
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64) */
     constructor(app_id, cipher)
     {
         ASSERT(!newgrounds && app_id);