littlejsengine 1.2.3 → 1.2.9

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}
@@ -843,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
      */
@@ -931,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}
@@ -1272,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;
@@ -1353,7 +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 rotate the object
+     *  @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
@@ -1588,7 +1615,7 @@ declare const gl_VERTEX_BYTE_STRIDE: number;
 /** Name of engine */
 declare const engineName: "LittleJS";
 /** Version of engine */
-declare const engineVersion: "1.2.3";
+declare const engineVersion: "1.2.9";
 /** Frames per second to update objects
  *  @default */
 declare const frameRate: 60;

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?102></script>
-<script src=game.js?102></script>
-<script src=gameObjects.js?102></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/gameEffects.js

@@ -203,7 +203,7 @@ function decorateTile(pos)
 
         // make pixel perfect outlines
         const size = i&1 ? vec2(2, 16) : vec2(16, 2);
-        tileLayer.context.fillStyle = levelGroundColor.mutate(.1).rgba();
+        tileLayer.context.fillStyle = levelGroundColor.mutate(.1);
         const drawPos = pos.scale(16)
             .add(vec2(i==1?14:0,(i==0?14:0)))
             .subtract((i&1? vec2(0,8-size.y/2) : vec2(8-size.x/2,0)));
@@ -228,8 +228,8 @@ function drawSky()
 {
     // fill background with a gradient
     const gradient = mainContext.fillStyle = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
-    gradient.addColorStop(0, skyColor.rgba());
-    gradient.addColorStop(1, horizonColor.rgba());
+    gradient.addColorStop(0, skyColor);
+    gradient.addColorStop(1, horizonColor);
     mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
 }
 
@@ -257,7 +257,7 @@ function drawStars()
             (randSeeded(w)+time*speed)%w-extraSpace,
             (randSeeded(h)+time*speed*randSeeded())%h-extraSpace);
 
-        mainContext.fillStyle = color.rgba();
+        mainContext.fillStyle = color;
         if (size < 9)
             mainContext.fillRect(screenPos.x, screenPos.y, size, size);
         else
@@ -285,8 +285,8 @@ function initParallaxLayers()
         const layerColor = levelColor.mutate(.2).lerp(skyColor,.95-i*.15);
         const gradient = tileParallaxLayer.context.fillStyle = 
             tileParallaxLayer.context.createLinearGradient(0,0,0,tileParallaxLayer.canvas.height = parallaxSize.y);
-        gradient.addColorStop(0,layerColor.rgba());
-        gradient.addColorStop(1,layerColor.subtract(new Color(1,1,1,0)).mutate(.1).clamp().rgba());
+        gradient.addColorStop(0,layerColor);
+        gradient.addColorStop(1,layerColor.subtract(new Color(1,1,1,0)).mutate(.1).clamp());
 
         // draw mountains ranges
         let groundLevel = startGroundLevel, groundSlope = rand(-1,1);

package/examples/platformer/index.html

@@ -5,9 +5,9 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?102></script>
-<script src=gameObjects.js?102></script>
-<script src=gamePlayer.js?102></script>
-<script src=gameEffects.js?102></script>
-<script src=gameLevel.js?102></script>
-<script src=game.js?102></script>
+<script src=../../engine/engine.all.js?104></script>
+<script src=gameObjects.js?104></script>
+<script src=gamePlayer.js?104></script>
+<script src=gameEffects.js?104></script>
+<script src=gameLevel.js?104></script>
+<script src=game.js?103></script>

package/examples/puzzle/game.js

@@ -43,7 +43,7 @@ function gameInit()
 {
     // setup canvas
     canvasFixedSize = vec2(1920, 1080); // 1080p
-    mainCanvas.style.background = backgroundColor.rgba();
+    mainCanvas.style.background = backgroundColor;
 
     // load high score
     bestScore = localStorage[highScoreKey] || 0;

package/examples/puzzle/index.html

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

package/examples/stress/index.html

@@ -5,7 +5,7 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?102></script>
+<script src=../../engine/engine.all.min.js?104></script>
 <script>
 
 /*

package/index.html

@@ -6,21 +6,21 @@
 </head><body>
 
 <!-- LittleJS engine scripts -->
-<script src=engine/engineDebug.js?102></script>
-<script src=engine/engineUtilities.js?102></script>
-<script src=engine/engineSettings.js?102></script>
-<script src=engine/engineObject.js?102></script>
-<script src=engine/engineDraw.js?102></script>
-<script src=engine/engineInput.js?102></script>
-<script src=engine/engineAudio.js?102></script>
-<script src=engine/engineTileLayer.js?102></script>
-<script src=engine/engineParticles.js?102></script>
-<script src=engine/engineMedals.js?102></script>
-<script src=engine/engineWebGL.js?102></script>
-<script src=engine/engine.js?102></script>
+<script src=engine/engineDebug.js?105></script>
+<script src=engine/engineUtilities.js?105></script>
+<script src=engine/engineSettings.js?105></script>
+<script src=engine/engineObject.js?105></script>
+<script src=engine/engineDraw.js?105></script>
+<script src=engine/engineInput.js?105></script>
+<script src=engine/engineAudio.js?105></script>
+<script src=engine/engineTileLayer.js?105></script>
+<script src=engine/engineParticles.js?105></script>
+<script src=engine/engineMedals.js?105></script>
+<script src=engine/engineWebGL.js?105></script>
+<script src=engine/engine.js?105></script>
 
 <!-- You can also include all engine scripts like this... -->
 <!-- <script src=engine/engine.all.js></script> -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?102></script>
+<script src=game.js?105></script>

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "littlejsengine",
-  "version": "1.2.3",
+  "version": "1.2.9",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "engine/engine.all.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KilledByAPixel/LittleJS.git"
   },
+  "dependencies": {
+    "google-closure-compiler": "^20220502.0.0",
+    "uglify-js": "^3.15.5",
+    "roadroller": "^2.1.0",
+    "ect-bin": "^1.4.1",
+    "typescript": "^4.7.2"
+  },
   "keywords": [
     "HTML5",
     "JavaScript",

package/engine/engineBuildSetup.bat

@@ -1,7 +0,0 @@
-rem Install these tools to build LittleJS
-
-call npm install -g google-closure-compiler
-call npm install -g uglify-js
-call npm install -g roadroller
-call npm install -g ect-bin
-call npm install -g typescript