littlejsengine 1.9.9 → 1.10.2

package/examples/box2d/scenes.js

@@ -1,6 +1,18 @@
 /*
     LittleJS Box2D Example - Secenes
     - Each scene demonstrates a feature of Box2D
+    - Feel free to use tis code in your own projects
+    - 0  = Shapes: box, circle, poly, and edge
+    - 1  = Pyramid stack
+    - 2  = Dominoes chain reaction
+    - 3  = Car with controls
+    - 4  = Rope with box attached
+    - 5  = Raycasts in all directions
+    - 6  = Joints demo with every joint type
+    - 7  = Contacts begin and end callbacks
+    - 8  = Mobile object with multiple bodies
+    - 9  = Cloth object grid using rope joints
+    - 10 = Softbody object grid using weld joints
 */
 
 'use strict';
@@ -15,8 +27,8 @@ function loadScene(_scene)
 
     // destroy old scene
     engineObjectsDestroy();
-    carWheelJoint = 0;
     mouseJoint = 0;
+    car = 0;
     
     // create walls
     groundObject = spawnBox(vec2(0,-4), vec2(1e3,8), hsl(0,0,.2), box2dBodyTypeStatic);
@@ -54,7 +66,7 @@ function loadScene(_scene)
     if (scene == 3)
     {
         sceneName = 'Car';
-        spawnCar(vec2(10,2));
+        car = new CarObject(vec2(10,2));
         spawnBox(vec2(20,0), vec2(10,2), randColor(), box2dBodyTypeStatic, false, -.2);
         spawnPyramid(vec2(32,0), 6);
     }
@@ -99,29 +111,11 @@ function loadScene(_scene)
             l1.renderOrder = l2.renderOrder = -2;
         }
         {
-            // pulley object renders a rope to connected point
-            class PulleyObjects extends Box2dObject
-            {
-                constructor(pos, size, color, connectionPos)
-                {
-                    super(pos, size, tile(3), 0, color);
-                    this.addBox(size);
-                    this.connectionPos = connectionPos;
-                }
-                render()
-                {
-                    // draw rope
-                    const topPos = this.localToWorld(vec2(0,this.size.y/2));
-                    drawLine(topPos, this.connectionPos, .2, BLACK);
-                    super.render();
-                }
-            }
-
             // pulley joint
             const anchorA = vec2(14,15);
             const anchorB = vec2(26,15);
-            const oA = new PulleyObjects(vec2(15,8), vec2(1,2), randColor(), anchorA);
-            const oB = new PulleyObjects(vec2(25,8), vec2(1,2), randColor(), anchorB);
+            const oA = new PulleyJointObjects(vec2(15,8), vec2(1,2), randColor(), anchorA);
+            const oB = new PulleyJointObjects(vec2(25,8), vec2(1,2), randColor(), anchorB);
             const aA = spawnCircle(anchorA, 2, randColor(), box2dBodyTypeStatic);
             const aB = spawnCircle(anchorB, 2, randColor(), box2dBodyTypeStatic);
             const oaA = oA.localToWorld(vec2(0,oA.size.y/2));
@@ -156,31 +150,10 @@ function loadScene(_scene)
             box2dCreateDistanceJoint(o1, o2);
         }
         {
-            // motor object renders a rope to connected point
-            class MotorObject extends Box2dObject
-            {
-                constructor(pos, size, color, otherObject)
-                {
-                    super(pos, size, tile(4), 0, color);
-                    this.addCircle(size.x);
-                    this.connectionPos = pos;
-                    const joint = box2dCreateMotorJoint(otherObject, this);
-                    joint.SetMaxForce(500);
-                    joint.SetMaxTorque(500);
-                }
-                render()
-                {
-                    // draw rope
-                    const width = 2/(1+this.pos.distance(this.connectionPos));
-                    drawLine(this.pos, this.connectionPos, width, BLACK);
-                    super.render();
-                }
-            }
-
             // motor joint
             const o = new Box2dObject(vec2(10,8), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
             o.renderOrder = -2;
-            new MotorObject(vec2(10,8), vec2(2), randColor(), o);
+            new MotorJointObject(vec2(10,8), vec2(2), randColor(), o);
         }
         {
             // friction joint
@@ -194,26 +167,8 @@ function loadScene(_scene)
     if (scene == 7)
     {
         sceneName = 'Contacts';
-        // changes objects color when touched
-        class ContactTester extends Box2dObject
-        {
-            constructor(pos, size, color, contactColor, isSensor=false)
-            {
-                super(pos, size, 0, 0, color, box2dBodyTypeStatic);
-                if (isSensor)
-                {
-                    this.addCircle(size.x);
-                    this.setSensor(isSensor);
-                }
-                else
-                    this.addBox(size);
-                this.contactColor = contactColor;
-            }
-            beginContact(other) { other.color = this.contactColor; }
-            endContact(other)   { other.color = WHITE; }
-        }
-        new ContactTester(vec2(15,8), vec2(5), hsl(0,0,0,.3), RED, true);
-        new ContactTester(vec2(25,8), vec2(5), hsl(0,0,.1), GREEN);
+        new ContactTester(vec2(15,8), vec2(5), RED,  RED);
+        new ContactTester(vec2(25,8), vec2(5), CYAN, CYAN, false, false);
         for (let i=200;i--;)
             spawnRandomObject(vec2(rand(1,39), rand(10,50)));
     }
@@ -221,192 +176,18 @@ function loadScene(_scene)
     {
         sceneName = 'Mobile';
         const pos = vec2(20, 16);
-        const mobile = spawnMobile(pos, 12, 2, 5);
+        const mobile = new MobileObject(pos, 12, 2, 5);
         box2dCreateRevoluteJoint(groundObject, mobile, pos);
     }
-    
-    // helper functions
-    function spawnRandomEdges()
-    {
-        // edge list along bottom
-        const edgePoints = [];
-        edgePoints.push(vec2(40,0));
-        for (let i=40, y=0; i--;)
-            edgePoints.push(vec2(i, y=clamp(y+rand(-2,2),0,5)));
-        edgePoints.push(vec2(0,0));
-        const o = new Box2dObject(vec2(), vec2(), 0, 0, BLACK, box2dBodyTypeStatic);
-        o.addEdgeList(edgePoints);
-    }
-    function spawnRope(startPos, count, angle=PI, color=WHITE, size=vec2(.3,1))
-    {
-        let lastObject = groundObject;
-        for (let i=0; i<count; ++i)
-        {
-            const pos = startPos.add(size.multiply(vec2(0,i+.5)).rotate(-angle));
-            const o = spawnBox(pos, size, color, box2dBodyTypeDynamic, false, angle);
-            o.setFilterData(2, 2);
-            const anchorPos = pos.add(vec2(0,-size.y/2).rotate(-angle));
-            box2dCreateRevoluteJoint(lastObject, o, anchorPos);
-            lastObject = o;
-        }
-        const endPos = lastObject.localToWorld(vec2(0,-size.y/2));
-        box2dCreateRopeJoint(groundObject, lastObject, startPos, endPos);
-        return lastObject;
-    }
-    function spawnPyramid(pos, count)
-    {
-        for (let i=count+1;i--;)
-        for (let j=i;j--;)
-            spawnBox(pos.add(vec2(j-i/2+.5,count-i+.5)), 1, randColor());
-    }
-    function spawnDominoes(pos, count, size=vec2(.5,2))
-    {
-        for (let i=count; i--;)
-            spawnBox(pos.add(vec2(i*size.y*.9,size.y/2)), size, randColor());
-    }
-    function spawnCar(pos)
-    {
-        // car object
-        const car = new Box2dObject(pos, vec2(), 0, 0, randColor());
-        const carPoints = [
-			vec2(-1.5,-.5),
-			vec2(1.5, -.5),
-			vec2(1.5,   0),
-			vec2(0,    .9),
-			vec2(-1.15,.9),
-			vec2(-1.5, .2),
-        ];
-        car.addPoly(carPoints);
-
-        // wheel settings
-        const frequencyHz = 4;
-        const dampingRatio = .7;
-        const wheelDensity = 1;
-        const wheelFriction = 2;
-        const wheelRestitution = 0;
-        const wheelSize = .8;
-
-        // back wheel
-        const wheel1Pos = pos.add(vec2(-1, -.65));
-        const wheel1 = new Box2dObject(wheel1Pos, vec2(wheelSize), tile(4));
-        wheel1.addCircle(wheelSize,vec2(),wheelDensity,wheelFriction,wheelRestitution);
-        const joint1 = box2dCreateWheelJoint(car,wheel1);
-        joint1.SetSpringDampingRatio(dampingRatio);
-        joint1.SetSpringFrequencyHz(frequencyHz);
-        joint1.SetMaxMotorTorque(50);
-        joint1.EnableMotor(true);
-        carWheelJoint = joint1;
-
-        // front wheel
-        const wheel2Pos = pos.add(vec2(1, -.6));
-        const wheel2 = new Box2dObject(wheel2Pos, vec2(wheelSize), tile(4));
-        wheel2.addCircle(wheelSize,vec2(),wheelDensity,wheelFriction,wheelRestitution);
-        const joint2 = box2dCreateWheelJoint(car,wheel2);
-        joint2.SetSpringDampingRatio(dampingRatio);
-        joint2.SetSpringFrequencyHz(frequencyHz);
-    }
-    function spawnMobile(anchor, w, h, depth)
-    {
-        // tall box
-        const pos = anchor.add(vec2(0,-h/2));
-        const o = spawnBox(pos, vec2(h/4, h), randColor(), box2dBodyTypeDynamic, false);
-        if (--depth)
-        {
-            // long box on bottom
-            o.addBox(vec2(w, h/4), vec2(0, -h/2));
-
-            // spawn smaller mobiles attached to each side
-            for(let i=2; i--;)
-            {
-                const a = anchor.add(vec2( w/2*(i?1:-1), -h));
-                const o2 = spawnMobile(a, w/2, h, depth);
-                box2dCreateRevoluteJoint(o, o2, a);
-            }
-        }
-        return o;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Spawn object functions
-
-function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
-{
-    size = typeof size == 'number' ? vec2(size) : size; // square
-    const o = new Box2dObject(pos, size, applyTexture && tile(3), angle, color, type);
-    o.addBox(size);
-    return o;
-}
-
-function spawnCircle(pos, diameter=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
-{
-    const size = vec2(diameter);
-    const o = new Box2dObject(pos, size, applyTexture && tile(2), angle, color, type);
-    o.addCircle(diameter);
-    return o;
-}
-
-function spawnRandomPoly(pos, diameter=1, color=WHITE, type=box2dBodyTypeDynamic, angle=0)
-{
-    const o = new Box2dObject(pos, vec2(), 0, angle, color, type);
-    o.addRandomPoly(diameter);
-    return o;
-}
-
-function spawnRandomObject(pos, scale=1, type=box2dBodyTypeDynamic, angle=0)
-{
-    if (randInt(2))
+    if (scene == 9)
     {
-        const size = vec2(scale*rand(.5,1), scale*rand(.5,1));
-        return spawnBox(pos, size, randColor(), type, true, angle);
+        sceneName = 'Cloth';
+        new ClothObject(vec2(20, 9), vec2(15), vec2(24), randColor());
     }
-    else
-    {
-        const diameter = scale*rand(.5,1);
-        return spawnCircle(pos, diameter, randColor(), type, true, angle);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Effects
-
-const sound_click = new Sound([,.1]);
-const sound_explosion = new Sound([,.2,72,.01,.01,.2,4,,,,,,,1,,.5,.1,.5,.02]);
-
-function explosion(pos, radius=3, strength=300)
-{
-    sound_explosion.play(pos);
-    const objects = box2dCircleCastAll(pos, (radius*2));
-    const newColor = randColor();
-    for (const o of objects)
+    if (scene == 10)
     {
-        const p = percent(o.pos.distance(pos), 2*radius, radius);
-        const force = o.pos.subtract(pos).normalize(p*radius*strength);
-        o.applyForce(force);
-        o.color = newColor;
+        sceneName = 'Softbodies';
+        for(let i=3;i--;)
+            new SoftBodyObject(vec2(20, 3+i*7), vec2(6-i), vec2(9-i), randColor());
     }
-
-    // smoke
-    new ParticleEmitter(
-        pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
-        tile(1),                    // tileInfo
-        hsl(0,0,0),   hsl(0,0,0),   // colorStartA, colorStartB
-        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        1, 1, 2, .1, .1,    // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -.5, PI, .1, // damp, angleDamp, gravity, particleCone, fade
-        1, 0, 0, 0, 1e8     // randomness, collide, additive, colorLinear, renderOrder
-    );
-
-    // fire
-    new ParticleEmitter(
-        pos, 0,                         // pos, angle
-        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
-        tile(1),                        // tileInfo
-        hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
-        hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB
-        .7, 1, .5, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, 0, PI, .05, // damp, angleDamp, gravity, particleCone, fade
-        1, 0, 1, 0, 1e9    // randomness, collide, additive, colorLinear, renderOrder
-    );
-}
+}

package/examples/breakout/game.js

@@ -135,4 +135,4 @@ function setupPostProcess()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/breakout/index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html><head>
-<title>Little JS Breakout Game</title>
+<title>LittleJS Breakout Game</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>
 
-<script src=../../dist/littlejs.js?197></script>
+<script src=../../dist/littlejs.js?1100></script>
 <script src=../../plugins/postProcess.js></script>
-<script src=gameObjects.js?197></script>
-<script src=game.js?197></script>
+<script src=gameObjects.js?1100></script>
+<script src=game.js?1100></script>

package/examples/breakoutTutorial/index.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html><head>
-<title>Little JS Breakout Tutorial</title>
+<title>LittleJS Breakout Tutorial</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>
 
-<script src=../../dist/littlejs.js?197></script>
-<script src=game.js?197></script>
+<script src=../../dist/littlejs.js?1100></script>
+<script src=game.js?1100></script>

package/examples/electron/game.js

@@ -125,4 +125,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/electron/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html><head>
-<title>Little JS Electron Demo</title>
+<title>LittleJS Electron 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>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?197></script>
+<script src=../../dist/littlejs.js?1100></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?197></script>
+<script src=game.js?1100></script>

package/examples/empty/game.js

@@ -44,4 +44,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/empty/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html><head>
-<title>Little JS Hello World Demo</title>
+<title>LittleJS Hello World Demo</title>
+<meta charset=utf-8>
 </head><body>
 
 <script src=../../dist/littlejs.js></script>

package/examples/htmlMenu/game.js

@@ -0,0 +1,67 @@
+/*
+    Little JS HTML Menu Example Project
+    - Setup a simple html menu system
+    - Menu can be toggled
+    - Pauses game when menu is visible
+    - Shows several input types
+*/
+
+'use strict';
+
+// show the LittleJS splash screen
+setShowSplashScreen(true);
+
+// sound effects
+const sound_click = new Sound([1,.5]);
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    // show menu for demo
+    setMenuVisible(true);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+    // play sound when mouse is pressed
+    if (mouseWasPressed(0))
+        sound_click.play(mousePos);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+    // pause game when menu is visible
+    const menuVisible = getMenuVisible();
+    paused = menuVisible;
+
+    // toggle menu visibility
+    if (keyWasPressed('KeyM'))
+        setMenuVisible(!menuVisible);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    // test game rendering
+    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
+    for(let i=0; i<1e3; ++i)
+    {
+        const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
+        drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+    // draw to overlay canvas for hud rendering
+    drawTextScreen('LittleJS HTML Menu Example\nM = Toggle menu', 
+        vec2(mainCanvasSize.x/2, 70), 60,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/htmlMenu/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html><head>
+<title>LittleJS HTML Menu Example</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>
+<style>
+.topDiv
+{
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.menuDiv
+{
+    gap: 20px;
+    padding: 30px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border: 3px solid black;
+    background-color: white;
+}
+</style>
+
+</head><body>
+
+<!-- setup html menu system -->
+<div class="topDiv">
+<div id="menu" class="menuDiv">
+<h1><i style="font-size:30px">Test Menu</i></h1>
+This is an example menu using html elements.
+<input value="Test Input" onchange="alert('New text: ' + this.value)">
+<input type="range" onchange="alert('New value: ' + this.value)">
+<button onclick="alert('Button was clicked!')">Test Button</button>
+<button onclick="setMenuVisible(false)">Exit Menu</button>
+</div>
+</div>
+<script>
+
+// html menu system
+const getMenuVisible =()=> menu.style.visibility != 'hidden';
+const setMenuVisible =(visible)=> menu.style.visibility = visible ? '' : 'hidden';
+
+// hide menu at start
+setMenuVisible(false);
+
+</script>
+
+<!-- Add your game scripts here -->
+<script src=../../dist/littlejs.js?1100></script>
+<script src=game.js?1100></script>

package/examples/index.html

@@ -0,0 +1,33 @@
+<head>
+<title>LittleJS Examples</title>
+<link rel=icon type=image/png href=../favicon.png>
+<body>
+<h1>All LittleJS Engine Examples</h1>
+<p>
+<img src=screenshot.jpg width=500>
+</p>
+<h2>Main Demos</h2>
+<p>
+<a href="starter">Starter</a> - Clean example with only a few things to get you started<br>
+<a href="stress">Stress</a> - Max sprite/object test and music system demo<br>
+<a href="platformer">Platformer</a> - Platformer/shooter with level data from Tiled Editor<br>
+<a href="breakout">Breakout</a> - Block breaking game with post-processing effects<br>
+<a href="breakoutTutorial">Breakout Tutorial</a> - Tutorial Breakout example<br>
+<a href="puzzle">Puzzle</a> - Match 3 puzzle game with HD rendering and high score tracking<br>
+<a href="particles">Particle Designer</a> - Particle system editor and visualizer<br>
+<a href="js13k">JS13K Starter</a> - Special small size demo for JS13K Games<br>
+<a href="empty">Empty</a> - A blank hello world project for LittleJS<br>
+</p>
+<h2>Plugin Demos</h2>
+<p>
+<a href="box2d">Box2D</a> - Box2D plugin demonstration and testbed<br>
+<a href="uiSystem">UI System</a> - A simple hierarchical UI system using LittleJS rendering<br>
+<a href="htmlMenu">HTML UI Menu</a> - Example using html to create an overlay menu<br>
+</p>
+<h2>Environment Demos</h2>
+<p>
+<a href="module">LittleJS using modules</a> - Loads LittleJS as a module<br>
+<a href="typescript">LittleJS using TypeScript</a> - Uses LittleJS type definitions<br>
+<a href="electron">LittleJS building with Electron</a> - Builds to an executable<br>
+</p>
+</body>

package/examples/js13k/game.js

@@ -112,4 +112,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/js13k/index.html

@@ -1,18 +1,21 @@
-<head><title>LittleJS JS13K Project</title></head><body>
+<head>
+<title>LittleJS JS13K Project</title>
+<meta charset=utf-8>
+</head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?197></script>
-<script src=../../src/engineUtilities.js?197></script>
-<script src=../../src/engineSettings.js?197></script>
-<script src=../../src/engineObject.js?197></script>
-<script src=../../src/engineDraw.js?197></script>
-<script src=../../src/engineInput.js?197></script>
-<script src=../../src/engineAudio.js?197></script>
-<script src=../../src/engineTileLayer.js?197></script>
-<script src=../../src/engineParticles.js?197></script>
-<script src=../../src/engineMedals.js?197></script>
-<script src=../../src/engineWebGL.js?197></script>
-<script src=../../src/engine.js?197></script>
+<script src=../../src/engineDebug.js?1100></script>
+<script src=../../src/engineUtilities.js?1100></script>
+<script src=../../src/engineSettings.js?1100></script>
+<script src=../../src/engineObject.js?1100></script>
+<script src=../../src/engineDraw.js?1100></script>
+<script src=../../src/engineInput.js?1100></script>
+<script src=../../src/engineAudio.js?1100></script>
+<script src=../../src/engineTileLayer.js?1100></script>
+<script src=../../src/engineParticles.js?1100></script>
+<script src=../../src/engineMedals.js?1100></script>
+<script src=../../src/engineWebGL.js?1100></script>
+<script src=../../src/engine.js?1100></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?197></script>
+<script src=game.js?1100></script>

package/examples/module/game.js

@@ -128,4 +128,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/module/index.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html><head>
-<title>Little JS Module Demo</title>
+<title>LittleJS Module 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?197 type=module></script>
+<script src=game.js?1100 type=module></script>