littlejsengine 1.2.0 → 1.3.0

package/engine/index.d.ts

@@ -60,7 +60,19 @@ declare function drawCanvas2D(pos: Vector2, size: Vector2, angle: number, mirror
  *  @param {Boolean} [useWebGL=glEnable]
  *  @memberof Draw */
 declare function setBlendMode(additive?: boolean, useWebGL?: boolean): void;
+/** Draw text on overlay canvas in screen space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @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;
 /** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size=1]
@@ -69,7 +81,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 drawText(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: string, font?: string): void;
+declare function drawText(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: string, font: any): void;
 /** Toggle fullsceen mode
  *  @memberof Draw */
 declare function toggleFullscreen(): void;
@@ -551,6 +563,10 @@ declare class Vector2 {
      * @param {Vector2} arraySize
      * @return {Boolean} */
     arrayCheck(arraySize: Vector2): boolean;
+    /** Returns this vector expressed as a string
+     * @param {float} digits - precision to display
+     * @return {String} */
+    toString(digits?: float): string;
 }
 /**
  * Color object (red, green, blue, alpha) with some helpful functions
@@ -606,7 +622,7 @@ declare class Color {
      * @param {Number} percent
      * @return {Color} */
     lerp(c: any, p: any): Color;
-    /** Sets this color given a hue, saturation, lightness , and alpha
+    /** Sets this color given a hue, saturation, lightness, and alpha
      * @param {Number} [hue=0]
      * @param {Number} [saturation=0]
      * @param {Number} [lightness=1]
@@ -618,12 +634,19 @@ declare class Color {
      * @param {Number} [alphaAmount=0]
      * @return {Color} */
     mutate(amount?: number, alphaAmount?: number): Color;
-    /** Returns this color expressed as an rgba string
+    /** Returns this color expressed as an CSS color value
      * @return {String} */
-    rgba(): string;
-    /** Returns this color expressed as 32 bit integer value
+    toString(): string;
+    /** Returns this color expressed as 32 bit integer RGBA value
      * @return {Number} */
     rgbaInt(): number;
+    /** Returns this color expressed as a hex code
+     * @return {String} */
+    hex(): string;
+    /** Set this color from a hex code
+     * @param {String} hex - html hex code
+     * @return {Color} */
+    setHex(hex: string): Color;
 }
 /**
  * Timer object tracks how long has passed since it was set
@@ -660,6 +683,9 @@ declare class Timer {
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
     getPercent(): number;
+    /** Returns this timer expressed as a string
+     * @return {String} */
+    toString(): string;
 }
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
@@ -760,6 +786,10 @@ declare let inputWASDEmulateDirection: number;
  *  @default
  *  @memberof Settings */
 declare let touchGamepadEnable: number;
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @default
+ *  @memberof Settings */
+declare let touchGamepadAnalog: number;
 /** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */
@@ -839,7 +869,7 @@ declare class EngineObject {
      *  @param {Vector2} [size=objectDefaultSize]    - World space size of the object
      *  @param {Number}  [tileIndex=-1]              - Tile to use to render object, untextured if -1
      *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
-     *  @param {Number}  [angle=0]                   - Angle to rotate the object
+     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
      *  @param {Color}   [color]                     - Color to apply to tile when rendered
      *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
      */
@@ -927,6 +957,7 @@ declare class EngineObject {
     setCollision(collideSolidObjects?: boolean, isSolid?: boolean, collideTiles?: boolean): void;
     collideSolidObjects: boolean;
     isSolid: boolean;
+    toString(): string;
 }
 /** Tile sheet for batch rendering system
  *  @type {Image}
@@ -974,6 +1005,7 @@ declare function worldToScreen(worldPos: Vector2): Vector2;
  * // draw text
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
  */
+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
@@ -983,7 +1015,7 @@ declare class FontImage {
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image?: new (width?: number, height?: number) => HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, startTileIndex?: number, context?: CanvasRenderingContext2D);
-    image: new (width?: number, height?: number) => HTMLImageElement;
+    image: any;
     tileSize: Vector2;
     paddingSize: Vector2;
     startTileIndex: number;
@@ -1102,7 +1134,6 @@ declare const isTouchDevice: boolean;
 declare let touchGamepadTimer: Timer;
 declare let touchGamepadButtons: any[];
 declare let touchGamepadStick: Vector2;
-declare let touchGamepadAnalog: number;
 /**
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
  * <br>
@@ -1268,12 +1299,12 @@ declare class TileLayerData {
  */
 declare class TileLayer extends EngineObject {
     /** Create a tile layer object
-     *  @param {Vector2} [position=new Vector2()]   - World space position
-     *  @param {Vector2} [size=objectDefaultSize]   - World space size
-     *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
-     *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
-     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
-     */
+        *  @param {Vector2} [position=new Vector2()]   - World space position
+        *  @param {Vector2} [size=tileCollisionSize]   - World space size
+        *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+        *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
+        *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+        */
     constructor(pos: any, size?: Vector2, tileSize?: Vector2, scale?: Vector2, renderOrder?: number);
     /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
     canvas: HTMLCanvasElement;
@@ -1337,9 +1368,9 @@ declare class TileLayer extends EngineObject {
  * let pos = vec2(2,3);
  * let particleEmiter = new ParticleEmitter
  * (
- *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
  *     0, vec2(16),                            // tileIndex, tileSize
- *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     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,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate,
@@ -1349,6 +1380,7 @@ declare class TileLayer extends EngineObject {
 declare class ParticleEmitter extends EngineObject {
     /** Create a particle system with the given settings
      *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [angle=0]          - Angle to emit the particles
      *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
      *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
      *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
@@ -1375,7 +1407,7 @@ declare class ParticleEmitter extends EngineObject {
      *  @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)
      */
-    constructor(pos: any, 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);
     /** @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) */
@@ -1410,6 +1442,8 @@ declare class ParticleEmitter extends EngineObject {
     fadeRate: number;
     /** @property {Number} - Apply extra randomness percent */
     randomness: number;
+    /** @property {Number} - Do particles collide against tiles */
+    collideTiles: boolean;
     /** @property {Number} - Should particles use addtive blend */
     additive: boolean;
     /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
@@ -1514,8 +1548,6 @@ declare class Newgrounds {
      * @param {Number} id    - The scoreboard id
      * @param {Number} value - The score value */
     postScore(id: number, value: number): any;
-    /** Send message to log a view */
-    logView(): any;
     /** Get scores from a scoreboard
      * @param {Number} id         - The scoreboard id
      * @param {String} [user=0]   - A user's id or name
@@ -1525,6 +1557,8 @@ declare class Newgrounds {
      * @return {Object}           - The response JSON object
      */
     getScores(id: number, user?: string, social?: number, skip?: number, limit?: number): any;
+    /** Send message to log a view */
+    logView(): any;
     /** Send a message to call a component of the Newgrounds API
      * @param {String}  component      - Name of the component
      * @param {Object}  [parameters=0] - Parameters to use for call
@@ -1583,7 +1617,7 @@ declare const gl_VERTEX_BYTE_STRIDE: number;
 /** Name of engine */
 declare const engineName: "LittleJS";
 /** Version of engine */
-declare const engineVersion: "1.2.0";
+declare const engineVersion: "1.3.0";
 /** Frames per second to update objects
  *  @default */
 declare const frameRate: 60;
@@ -1609,4 +1643,4 @@ declare let tileImageFixBleed: any;
 declare let averageFPS: any;
 declare let drawCount: any;
 declare const styleBody: string;
-declare const styleCanvas: "position:absolute";
+declare const styleCanvas: "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)";

package/examples/breakout/gameObjects.js

@@ -56,11 +56,11 @@ class Block extends EngineObject
         const color1 = this.color;
         const color2 = color1.lerp(new Color, .5);
         new ParticleEmitter(
-            this.pos, this.size, .1, 200, PI,     // pos, emitSize, emitTime, emitRate, emiteCone
+            this.pos, 0, this.size, .1, 200, PI,  // pos, angle, 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
+            .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
         );

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?97></script>
-<script src=game.js?97></script>
-<script src=gameObjects.js?97></script>
+<script src=../../engine/engine.all.js?104></script>
+<script src=game.js?104></script>
+<script src=gameObjects.js?104></script>

package/examples/particles/index.html

@@ -0,0 +1,366 @@
+<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>
+<style>
+input
+{
+    width:99px;
+}
+button
+{
+    margin:1px;
+}
+</style>
+</head><body>
+
+<script src=../../engine/engineDebug.js?104></script>
+<script src=../../engine/engineUtilities.js?104></script>
+<script src=../../engine/engineSettings.js?104></script>
+<script src=../../engine/engineObject.js?104></script>
+<script src=../../engine/engineDraw.js?104></script>
+<script src=../../engine/engineInput.js?104></script>
+<script src=../../engine/engineAudio.js?104></script>
+<script src=../../engine/engineTileLayer.js?104></script>
+<script src=../../engine/engineParticles.js?104></script>
+<script src=../../engine/engineMedals.js?104></script>
+<script src=../../engine/engineWebGL.js?104></script>
+<script src=../../engine/engine.js?104></script>
+<script>
+
+'use strict';
+
+let particleEditor = 0, particleSystem, particleSystemDiv, particleSystemCode;
+let inputCondense;
+let restartTimer = new Timer();
+const storagePrefix = 'particles_';
+
+const particleSettings = [];
+function addSetting(name, type, min, max, step, description)
+{
+    particleSettings.push({name, type:type||'number', min, max, step, description});
+}
+
+addSetting('emitSize',         '', 0, 1e9, .1);
+addSetting('emitTime',         '', 0, 1e9, .1);
+addSetting('emitRate',         '', 0, 1e9, 1);
+addSetting('emitConeAngle',    '', 0, 1e9, .01);
+addSetting('tileIndex',        '', -1, 1e9, 1);
+addSetting('tileSizeX',        '', 0, 1e9, 1);
+addSetting('tileSizeY',        '', 0, 1e9, 1);
+addSetting('colorStartA',      'color');
+addSetting('colorStartB',      'color');
+addSetting('colorEndA',        'color');
+addSetting('colorEndB',        'color');
+addSetting('colorAlphaStartA', 'alpha', 0,    1,   .01);
+addSetting('colorAlphaStartB', 'alpha', 0,    1,   .01);
+addSetting('colorAlphaEndA',   'alpha', 0,    1,   .01);
+addSetting('colorAlphaEndB',   'alpha', 0,    1,   .01);
+addSetting('particleTime',     '', 0,    1e9, .1);
+addSetting('sizeStart',        '', 0,    1e9, .01);
+addSetting('sizeEnd',          '', 0,    1e9, .01);
+addSetting('speed',            '', 0,    1e9, .01);
+addSetting('angleSpeed',       '', 0,    1e9, .01);
+addSetting('damping',          '', 0,    1,   .01);
+addSetting('angleDamping',     '', 0,    1,   .01);
+addSetting('gravityScale',     '', -1e9, 1e9, .1);
+addSetting('particleConeAngle','', 0,    1e9, .1);
+addSetting('fadeRate',         '', 0,    1,   .01);
+addSetting('randomness',       '', 0,    1,   .01);
+addSetting('collideTiles',     'checkbox');
+addSetting('additive',         'checkbox');
+addSetting('randomColorLinear','checkbox');
+
+function makeEmitter()
+{
+    particleSystem = new ParticleEmitter(cameraPos);
+    particleSystem.emitConeAngle =
+        particleSystem.particleConeAngle = 3.14;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    makeEmitter();
+    gravity = -.01;
+    cameraScale = 50;
+
+    const div = particleSystemDiv = document.createElement('div');
+    div.innerHTML = '<big><b>LittleJS Particle Tool';
+    div.style = 'position:absolute;top:10;left:10;color:#fff';
+    document.body.appendChild(div);
+
+    for (const setting of particleSettings)
+    {
+        const input = setting.input = document.createElement('input');
+        const name = setting.name;
+        input.oninput = (e)=> updateParticles();
+        input.type = setting.type == 'alpha' ? 'number' : setting.type;
+        if (setting.min !== undefined)
+            input.min = setting.min;
+        if (setting.max !== undefined)
+            input.max = setting.max;
+        if (setting.step !== undefined)
+            input.step = setting.step;
+        if (name == 'emitConeAngle' || name  == 'particleConeAngle')
+            particleSystem[name] = 3.14; // simplify pi
+
+        div.appendChild(document.createElement('br'));
+        div.appendChild(input);
+        div.appendChild(document.createTextNode(' ' + name));
+    }
+
+    div.appendChild(document.createElement('br'));
+    div.appendChild(document.createElement('br'));
+
+    {
+        const button = document.createElement('button')
+        div.appendChild(button);
+        button.innerHTML = 'Copy To Clipboard';
+        button.onclick = (e)=> navigator.clipboard.writeText(particleSystemCode.value);
+    }
+    {
+        const button = document.createElement('button');
+        div.appendChild(button);
+        button.innerHTML = 'Reset';
+        button.onclick = (e)=>
+        {
+            if (!confirm('Reset to default?'))
+                return;
+            particleSystem.destroy();
+            makeEmitter();
+            updateInputs(0);
+            cameraScale = 50;
+        }
+    }
+    {
+        inputCondense = document.createElement('input');
+        div.appendChild(inputCondense);
+        inputCondense.checked = 'true';
+        inputCondense.type = 'checkbox';
+        inputCondense.style.width = 'initial';
+        inputCondense.oninput = (e)=> updateParticles();
+        div.appendChild(document.createTextNode(' Condense'));
+    }
+    
+    //div.appendChild(document.createTextNode('JavaScript Code... '));
+    div.appendChild(document.createElement('br'));
+    div.appendChild(particleSystemCode = document.createElement('textarea'));
+    particleSystemCode.style.width = 500;
+    particleSystemCode.style.height = 100;
+    particleSystemCode.disabled = true;
+
+    updateInputs(0);
+
+    // load from storage
+    for (const setting of particleSettings)
+    {
+        const type = setting.type;
+        const storageName = storagePrefix + setting.name;
+        const savedValue = localStorage[storageName];
+        if (savedValue == undefined)
+            continue;
+
+        if (type == 'checkbox')
+            setting.input.checked = savedValue == 'true';
+        else
+            setting.input.value = savedValue;
+    }
+
+    updateParticles();
+}
+
+function updateParticles()
+{
+    for (const setting of particleSettings)
+    {
+        const input = setting.input;
+        const name = setting.name;
+        const type = setting.type;
+        const inputFloat = parseFloat(input.value) || 0;
+        if (type == 'color')
+        {
+            const color = new Color().setHex(input.value);
+            particleSystem[name].r = color.r;
+            particleSystem[name].g = color.g;
+            particleSystem[name].b = color.b;
+        }
+        else if (type == 'alpha')
+        {
+            if (name == 'colorAlphaStartA')
+                particleSystem.colorStartA.a = clamp(inputFloat);
+            else if (name == 'colorAlphaStartB')
+                particleSystem.colorStartB.a = clamp(inputFloat);
+            else if (name == 'colorAlphaEndA')
+                particleSystem.colorEndA.a   = clamp(inputFloat);
+            else if (name == 'colorAlphaEndB')
+                particleSystem.colorEndB.a   = clamp(inputFloat);
+        }
+        else if (name == 'tileSizeX')
+        {
+            particleSystem.tileSize = vec2(parseInt(input.value), particleSystem.tileSize.y);
+        }
+        else if (name == 'tileSizeY')
+        {
+            particleSystem.tileSize = vec2(particleSystem.tileSize.x, parseInt(input.value));
+        }
+        else if (type == 'checkbox')
+            particleSystem[name] = input.checked ? 1 : 0;
+        else if (name == 'emitRate')
+            particleSystem[name] = min(inputFloat,1e3);
+        else
+            particleSystem[name] = clamp(inputFloat, setting.min, setting.max);
+    }
+    updateInputs();
+}
+
+function updateInputs(save=1)
+{
+    for (const setting of particleSettings)
+    {
+        const input = setting.input;
+        const name = setting.name;
+        const type = setting.type;
+        
+        if (type == 'color')
+        {
+            const color = particleSystem[name];
+            input.value = color.hex();
+        }
+        else if (type == 'alpha')
+        {
+            if (name == 'colorAlphaStartA')
+                input.value = particleSystem.colorStartA.a;
+            else if (name == 'colorAlphaStartB')
+                input.value = particleSystem.colorStartB.a;
+            else if (name == 'colorAlphaEndA')
+                input.value = particleSystem.colorEndA.a;
+            else if (name == 'colorAlphaEndB')
+                input.value = particleSystem.colorEndB.a;
+        }
+        else if (name == 'tileSizeX')
+            input.value = particleSystem.tileSize.x;
+        else if (name == 'tileSizeY')
+            input.value = particleSystem.tileSize.y;
+        else if (type == 'checkbox')
+            input.checked = particleSystem[name];
+        else
+            input.value = particleSystem[name] || '0';
+
+        if (save)
+        {
+            const storageName = storagePrefix + setting.name;
+            localStorage[storageName] = type == 'checkbox' ? 
+                input.checked : input.value;
+        }
+    }
+    particleSystemCode.value = getCode();
+}
+
+function getCode()
+{
+    const condense = inputCondense.checked;
+    let code = '';
+
+    // https://www.codingem.com/javascript-how-to-limit-decimal-places/
+    Number.prototype.round = function(n) {
+        const d = Math.pow(10, n);
+        return Math.round((this + Number.EPSILON) * d) / d;
+    }
+
+    code = 'new ParticleEmitter(';
+    if (condense)
+        code += 'vec2(), 0, ';
+    else
+        code += '\n  vec2(), 0,\t//position, angle\n';
+
+    let count = 0;
+    for (const setting of particleSettings)
+    {
+        const name = setting.name;
+        const type = setting.type;
+        let value;
+        if (name == 'tileSizeX' || type == 'alpha')
+            continue;
+
+        if (name == 'tileSizeY')
+            value = `vec2(${particleSystem.tileSize.x}, ${particleSystem.tileSize.y})`;
+        else if (type == 'color')
+        {
+            const c = particleSystem[name];
+            const p = 3;
+            value = `new Color(${c.r.round(p)}, ${c.g.round(p)}, ${c.b.round(p)}, ${c.a.round(p)})`;
+        }
+        else if (type == 'checkbox')
+            value = particleSystem[name] ? 1 : 0;
+        else
+            value = particleSystem[name].round(3);
+        if (!condense)
+            code += '  ';
+        code += value;
+
+        const isEnd = name == 'randomColorLinear';
+        if (!condense)
+        {
+            code += ',\t// ' + name;
+            if (!isEnd)
+                code += '\n';
+        }
+        else if (!isEnd)
+            code += ', ';
+    }
+
+
+    if (condense)
+        code += ');';
+    else
+        code += '\n); // particle emitter';
+
+    return code;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+    if (!restartTimer.isSet() && particleSystem.destroyed)
+        restartTimer.set(1);
+    else if (restartTimer.elapsed())
+    {
+        restartTimer.unset()
+        makeEmitter();
+        updateParticles();
+    }
+
+    if (document.activeElement == document.body)
+    {
+        particleSystem.pos = mouseIsDown(0) ? mousePos : vec2();
+        if (mouseWheel)
+        {
+            cameraScale -= sign(mouseWheel)*cameraScale/5;
+            cameraScale = clamp(cameraScale, 10, 300);
+        }
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+
+</script>

package/examples/platformer/game.js

@@ -73,18 +73,18 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    const drawText = (text, x, y, size=70) =>
+    const drawText = (text, x, y, size=50) =>
     {
         overlayContext.textAlign = 'center';
         overlayContext.textBaseline = 'top';
         overlayContext.font = size + 'px arial';
         overlayContext.fillStyle = '#fff';
-        overlayContext.lineWidth = 3;
+        overlayContext.lineWidth = 2;
         overlayContext.strokeText(text, x, y);
         overlayContext.fillText(text, x, y);
     }
-    drawText('Score: ' + score,   overlayCanvas.width*1/3, 20);
-    drawText('Deaths: ' + deaths, overlayCanvas.width*2/3, 20);
+    drawText('Score: ' + score,   overlayCanvas.width*1/4, 20);
+    drawText('Deaths: ' + deaths, overlayCanvas.width*3/4, 20);
 }
 
 ///////////////////////////////////////////////////////////////////////////////