littlejsengine 1.11.2 → 1.11.5

package/examples/box2d/gameObjects.js

@@ -13,7 +13,7 @@ function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyText
 {
     size = typeof size == 'number' ? vec2(size) : size; // square
     const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.squareOutline, angle, color, type);
-    o.drawSize = size.scale(1.02); // slightly enarge to cover gaps
+    o.drawSize = size.scale(1.02); // slightly enlarge to cover gaps
     o.addBox(size);
     return o;
 }
@@ -405,7 +405,7 @@ class ClothObject extends Box2dObject
                 const stress = vec2(j.GetReactionForce(1)).length();
                 if (stress > this.maxJointStress || d2 > maxLength2*4)
                 {
-                    // remove stessed joint
+                    // remove stressed joint
                     box2dDestroyJoint(j);
                     joints[i] = 0;
                 }
@@ -463,7 +463,7 @@ function explosion(pos, radius=3, strength=300)
     // smoke
     new ParticleEmitter(
         pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
+        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emitCone
         spriteAtlas.dot,            // tileInfo
         hsl(0,0,0),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -475,7 +475,7 @@ function explosion(pos, radius=3, strength=300)
     // fire
     new ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
+        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emitCone
         spriteAtlas.dot,                // tileInfo
         hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
         hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB

package/examples/box2d/scenes.js

@@ -1,5 +1,5 @@
 /*
-    LittleJS Box2D Example - Secenes
+    LittleJS Box2D Example - Scenes
     - Each scene demonstrates a feature of Box2D
     - Feel free to use tis code in your own projects
     - 0  = Shapes: box, circle, poly, and edge
@@ -122,7 +122,7 @@ function loadScene(_scene)
             const oaB = oB.localToWorld(vec2(0,oB.size.y/2));
             box2dCreatePulleyJoint(oA, oB, aA.pos, aB.pos, oaA, oaB);
 
-            // a line to make it look like conneting rope
+            // a line to make it look like connecting rope
             const line = new EngineObject(vec2(20,15), vec2(10,.2), 0, 0, BLACK);
             line.gravityScale = 0;
             line.renderOrder = -1;

package/examples/breakout/game.js

@@ -24,7 +24,7 @@ function gameInit()
     canvasFixedSize = vec2(1280, 720); // 720p
     levelSize = vec2(38, 20);
     cameraPos = levelSize.scale(.5);
-    paddle = new Paddle(vec2(levelSize.x/2-12,1));
+    paddle = new Paddle(vec2(levelSize.x/2-12, 1));
     score = brickCount = 0;
 
     // spawn bricks

package/examples/breakout/gameObjects.js

@@ -5,27 +5,31 @@
 'use strict';
 
 ///////////////////////////////////////////////////////////////////////////////
-class Wall extends EngineObject
+class PhysicsObject extends EngineObject
 {
-    constructor(pos, size)
+    constructor(pos, size, tileInfo, angle, color)
     {
-        super(pos, size);
-        
-        this.mass = 0; // make object have static physics
+        super(pos, size, tileInfo, angle, color);
         this.setCollision(); // make object collide
-        this.color = hsl(0,0,0,0); // make object invisible
+        this.mass = 0; // make object have static physics
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+class Wall extends PhysicsObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size, 0, 0, new Color(0,0,0,0));
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-class Paddle extends EngineObject
+class Paddle extends PhysicsObject
 {
     constructor(pos)
     {
         super(pos, vec2(5,.5));
-        
-        this.mass = 0; // make object have static physics
-        this.setCollision(); // make object collide
     }
 
     update()
@@ -39,15 +43,12 @@ class Paddle extends EngineObject
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-class Brick extends EngineObject 
+class Brick extends PhysicsObject 
 {
     constructor(pos)
     {
         super(pos, vec2(2,1), tile(1, vec2(32,16)), 0, randColor());
         ++brickCount;
-        
-        this.mass = 0; // make object have static physics
-        this.setCollision(); // make object collide
     }
 
     collideWithObject(o)              
@@ -63,7 +64,7 @@ class Brick extends EngineObject
         const color2 = color1.lerp(hsl(), .5);
         new ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emiteCone
+            this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
@@ -84,22 +85,22 @@ class Brick extends EngineObject
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-class Ball extends EngineObject 
+class Ball extends PhysicsObject 
 {
     constructor(pos)
     {
         super(pos, vec2(.5), tile(0));
 
         // make a bouncy ball
-        this.setCollision();
         this.velocity = vec2(0, -.1);
         this.elasticity = 1;
+        this.mass = 1;
         
         // attach a trail effect
         const color = hsl(0,0,.2);
         this.trailEffect = new ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, 0, 80, PI,                 // emitSize, emitTime, emitRate, emiteCone
+            this.size, 0, 80, PI,                 // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                          // tileIndex, tileSize
             color, color,                         // colorStartA, colorStartB
             color.scale(0), color.scale(0),       // colorEndA, colorEndB
@@ -127,24 +128,22 @@ class Ball extends EngineObject
     {
         // prevent colliding with paddle if moving upwards
         if (o == paddle && this.velocity.y > 0)
-            return 0;
-
-        // speed up
-        const speed = min(1.04*this.velocity.length(), .5);
-        this.velocity = this.velocity.normalize(speed);
-
-        // scale bounce sound pitch by speed
-        sound_bounce.play(this.pos, 1, speed*2);
+            return false;
 
         if (o == paddle)
         {
             // put english on the ball when it collides with paddle
             this.velocity = this.velocity.rotate(.2 * (this.pos.x - o.pos.x));
             this.velocity.y = max(-this.velocity.y, .2);
-            return 0;
+
+            // speed up
+            const speed = min(1.04*this.velocity.length(), .5);
+            this.velocity = this.velocity.normalize(speed);
+            sound_bounce.play(this.pos, 1, speed*2);
+            
+            return false; // prevent default collision code
         }
         
-        // prevent default collision with paddle
-        return 1;
+        return true;
     }
 }

package/examples/breakout/index.html

@@ -7,6 +7,6 @@
 </head><body>
 
 <script src=../../dist/littlejs.js?1105></script>
-<script src=../../plugins/postProcess.js></script>
+<script src=../../plugins/postProcess.js?1105></script>
 <script src=gameObjects.js?1105></script>
 <script src=game.js?1105></script>

package/examples/breakoutTutorial/game.js

@@ -113,7 +113,7 @@ class Brick extends EngineObject
         const color = this.color;
         new ParticleEmitter(
             this.pos, 0,            // pos, angle
-            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
+            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emitCone
             undefined,              // tileInfo
             color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB

package/examples/index.html

@@ -16,8 +16,8 @@ iframe {width:480px; height:270px;}
 <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>
+<a href="module">LittleJS with Modules</a> - Loads LittleJS as a module<br>
 </p>
 <h2>Plugin Demos</h2>
 <p>
@@ -25,12 +25,6 @@ iframe {width:480px; height:270px;}
 <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>
 <h2>Live Demos</h2>
 <p>
 <iframe id=iframe src="breakout"></iframe>

package/examples/module/game.js

@@ -71,7 +71,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LittleJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emiteCone
+        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

package/examples/platformer/game.js

@@ -1,8 +1,8 @@
 /*
     Little JS Platforming Game
     - A basic platforming starter project
-    - Platforming phyics and controls
-    - Includes destructibe terrain
+    - Platforming physics and controls
+    - Includes destructible terrain
     - Control with keyboard, mouse, touch, or gamepad
 */
 

package/examples/platformer/gameCharacter.js

@@ -25,7 +25,7 @@ class Character extends GameObject
         this.dodgeTimer         = new Timer;
         this.dodgeRechargeTimer = new Timer;
         this.deadTimer          = new Timer;
-        this.grendeThrowTimer   = new Timer;
+        this.grenadeThrowTimer   = new Timer;
         this.drawSize = vec2(1);
         this.color = hsl(rand(),1,.7);
         this.renderOrder = 10;
@@ -82,14 +82,14 @@ class Character extends GameObject
                 if (!this.groundObject && this.getAliveTime() > .2)
                     this.velocity.y += .2;
             }
-            if (this.pressingThrow && !this.wasPressingThrow && !this.grendeThrowTimer.active())
+            if (this.pressingThrow && !this.wasPressingThrow && !this.grenadeThrowTimer.active())
             {
-                // throw greande
+                // throw grenade
                 const grenade = new Grenade(this.pos);
                 grenade.velocity = this.velocity.add(vec2(this.getMirrorSign(),rand(.8,.7)).normalize(.2+rand(.02)));
                 grenade.angleVelocity = this.getMirrorSign() * rand(.8,.5);
                 sound_jump.play(this.pos);
-                this.grendeThrowTimer.set(1);
+                this.grenadeThrowTimer.set(1);
             }
             this.wasPressingThrow = this.pressingThrow;
         }
@@ -276,7 +276,7 @@ class Character extends GameObject
             if (getTileCollisionData(pos.add(vec2(0,1)))      // above
                 && !getTileCollisionData(pos.add(vec2(1,0)))  // left
                 && !getTileCollisionData(pos.add(vec2(1,0)))) // right
-                return false; // dont collide if something above it and nothing to left or right
+                return false; // don't collide if something above it and nothing to left or right
 
             // allow standing on top of ladders
             return !this.climbingLadder;

package/examples/platformer/gameEffects.js

@@ -1,6 +1,6 @@
 /*
     LittleJS Platformer Example - Effects
-    - Plays different particle effects which can be persistant
+    - Plays different particle effects which can be persistent
     - Destroys terrain and makes explosions
     - Outlines tiles based on neighbor types
     - Generates parallax background layers
@@ -39,7 +39,7 @@ function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new ParticleEmitter(
-        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emitCone
         0,                      // tileInfo
         color, color2,          // colorStartA, colorStartB
         color, color2,          // colorEndA, colorEndB
@@ -97,7 +97,7 @@ function explosion(pos, radius=3)
     // smoke
     new ParticleEmitter(
         pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
+        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emitCone
         0,                          // tileInfo
         hsl(0,0,0), hsl(0,0,0),     // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -109,7 +109,7 @@ function explosion(pos, radius=3)
     // fire
     new ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emiteCone
+        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emitCone
         0,                              // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
         rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB

package/examples/platformer/gameObjects.js

@@ -239,7 +239,7 @@ class Weapon extends EngineObject
 
         // shell effect
         this.addChild(this.shellEmitter = new ParticleEmitter(
-            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
+            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emitCone
             0,                       // tileInfo
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorEndA, colorEndB
@@ -360,7 +360,7 @@ class Bullet extends EngineObject
 
         // spark effects
         const emitter = new ParticleEmitter(
-            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emitCone
             0,                      // tileInfo
             rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
             rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB

package/examples/puzzle/game.js

@@ -37,7 +37,7 @@ const tileColors =
     rgb(1,1,0),
     rgb(0,1,0),
     rgb(0,.6,1),
-    rgb(.6,0,1),
+    rgb(.8,0,1),
     rgb(.5,.5,.5),
 ];
 const tileTypeCount = tileColors.length;
@@ -216,7 +216,7 @@ function gameRender()
         drawTile(drawPos, vec2(.5), tile(data, 64), color2);
     }
 
-    // draw a grey square at top to cover up incomming tiles
+    // draw a grey square at top to cover up incoming tiles
     drawRect(cameraPos.subtract(cameraOffset).add(vec2(0,levelSize.y)), levelSize, backgroundColor);
 }
 
@@ -294,7 +294,7 @@ function clearMatches()
             const color2 = color1.lerp(hsl(), .5);
             new ParticleEmitter(
                 pos.add(vec2(.5)), 0,  // pos, angle
-                .5, .1, 200, PI,       // emitSize, emitTime, emitRate, emiteCone
+                .5, .1, 200, PI,       // emitSize, emitTime, emitRate, emitCone
                 0,                     // tileInfo
                 color1, color2,                      // colorStartA, colorStartB
                 color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB

package/examples/starter/game.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+// show the LittleJS splash screen
+setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
 tileFixBleedScale = .5;
@@ -64,13 +66,13 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 0, PI,              // emitSize, emitTime, emitRate, emiteCone
+        0, 0, 500, 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, PI,        // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true         // fadeRate, randomness, collide, additive
+        .05, .8, true, true         // fadeRate, randomness, collide, additive
     );
     particleEmitter.elasticity = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
@@ -109,55 +111,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    drawRect(vec2(16,8), vec2(202,214), hsl(0,0,.6), 0, false);
+    drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
     
+    // draw the logo as a tile
+    drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    drawNineSlice(vec2(10,10), vec2(4,4), tile(1))
-}
-
-function drawNineSlice(pos, size, tileInfo, context=overlayContext)
-{
-  // calculate the size of a slice
-  const s = tileInfo.size.x / 3;
-
-  // define the 9 parts as [x, y, width, height]
-  const part1 = [0, 0, s, s];
-  const part2 = [s, 0, s, s];
-  const part3 = [s * 2, 0, s, s];
-  const part4 = [0, s, s, s];
-  const part5 = [s, s, s, s];
-  const part6 = [s * 2, s, s, s];
-  const part7 = [0, s * 2, s, s];
-  const part8 = [s, s * 2, s, s];
-  const part9 = [s * 2, s * 2, s, s];
-
-  // target width/height (try different values!)
-  const width = 16 * size.x;
-  const height = 16 * size.y;
-
-  const img = tileInfo.getTextureInfo().image;
-
-  const originPos = pos.subtract(size.divide(vec2(2))).add(vec2( - 0.5));
-
-  // draw the corners
-  //context.imageSmoothingEnabled = false
-  context.drawImage(img, ...part1, originPos.x + 0, originPos.y + 0, s + 1, s + 1); // top left
-  context.drawImage(img, ...part3, originPos.x + width - s, originPos.y + 0, s + 1, s + 1); // top right
-  context.drawImage(img, ...part7, originPos.x + 0, originPos.y + height - s, s + 1, s + 1); // bottom left
-  context.drawImage(img, ...part9, originPos.x + width - s, originPos.y + height - s, s + 1, s + 1); // bottom right
-
-  // draw the edges
-  context.drawImage(img, ...part2, originPos.x + s, originPos.y + 0, width - 2 * s + 1, s + 1); // top
-  context.drawImage(img, ...part8, originPos.x + s, originPos.y + height - s, width - 2 * s + 1, s + 1); // bottom
-  context.drawImage(img, ...part4, originPos.x + 0, originPos.y + s, s + 1, height - 2 * s + 1); // left
-  context.drawImage(img, ...part6, originPos.x + width - s, originPos.y + s, s + 1, height - 2 * s + 1); // right
-
-  // draw the center
-  context.drawImage(img, ...part5, originPos.x + s, originPos.y + s, width - 2 * s + 1, height - 2 * s + 1);
+    // draw to overlay canvas for hud rendering
+    drawTextScreen('LittleJS Demo', 
+        vec2(mainCanvasSize.x/2, 70), 80,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/jsconfig.json

@@ -5,6 +5,7 @@
     "./src/*.js",
     "./plugins/*.js",
     "./examples/**/*.js",
+    "./shortExamples/**/*.js",
   ],
   "exclude": [
   ]

package/package.json

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

package/plugins/box2d.js

@@ -69,7 +69,7 @@ class Box2dObject extends EngineObject
     {
         const isAsleep = !this.getIsAwake();
         const isStatic = this.getIsStatic();
-        const color = rgb(isAsleep,isAsleep,isStatic,.5);
+        const color = rgb(isAsleep?1:0 ,isAsleep?1:0, isStatic?1:0, .5);
         this.box2dDrawFixtures(color);
     }
 
@@ -353,7 +353,7 @@ function box2dBoxCastAll(pos, size)
 
     let queryObjects = [];
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryObjects.length ? '#f00' : '#00f', .02);
     return queryObjects;
 }
 
@@ -374,7 +374,7 @@ function box2dBoxCast(pos, size)
 
     let queryObject;
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryObject ? '#f00' : '#00f', .02);
     return queryObject;
 }
 
@@ -416,7 +416,7 @@ function box2dPointCast(pos, dynamicOnly=true)
             return true; // continue getting results
         if (!fixture.TestPoint(pos.getBox2d()))
             return true; // continue getting results
-        queryResult = fixture.GetBody().object;
+        queryObject = fixture.GetBody().object;
         return false; // stop getting results
     };
 
@@ -424,10 +424,10 @@ function box2dPointCast(pos, dynamicOnly=true)
     aabb.set_lowerBound(pos.getBox2d());
     aabb.set_upperBound(pos.getBox2d());
 
-    let queryResult;
-    debugRaycast && debugRect(pos, vec2(), queryResult ? '#f00' : '#00f', .02);
+    let queryObject;
+    debugRaycast && debugRect(pos, vec2(), queryObject ? '#f00' : '#00f', .02);
     box2dWorld.QueryAABB(queryCallback, aabb);
-    return queryResult;
+    return queryObject;
 }
 
 // box aabb cast and return all the fixtures
@@ -437,8 +437,8 @@ function box2dBoxCastAllFixtures(pos, size)
     queryCallback.ReportFixture = function(fixturePointer)
     {
         const fixture = box2d.wrapPointer(fixturePointer, box2d.b2Fixture);
-        if (!queryObjects.includes(fixture))
-            queryObjects.push(fixture); // add if not already in list
+        if (!queryFixtures.includes(fixture))
+            queryFixtures.push(fixture); // add if not already in list
         return true; // continue getting results
     };
 
@@ -448,7 +448,7 @@ function box2dBoxCastAllFixtures(pos, size)
 
     let queryFixtures = [];
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryFixtures.length ? '#f00' : '#00f', .02);
     return queryFixtures;
 }
 

package/plugins/newgrounds.js

@@ -12,7 +12,7 @@
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Newgrounds medal auto unlocks in newgronds API */
+/** Newgrounds medal auto unlocks in newgrounds API */
 class NewgroundsMedal extends Medal
 {
     /** Create a medal object and adds it to the list of medals */

package/plugins/postProcess.js

@@ -76,26 +76,26 @@ function initPostProcess(shaderCode, includeOverlay=false)
 
         // setup shader program to draw one triangle
         glContext.useProgram(glPostShader);
-        glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
-        glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, 1);
-        glContext.disable(gl_BLEND);
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+        glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
+        glContext.disable(glContext.BLEND);
 
         // set textures, pass in the 2d canvas and gl canvas in separate texture channels
-        glContext.activeTexture(gl_TEXTURE0);
-        glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
-        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
+        glContext.activeTexture(glContext.TEXTURE0);
+        glContext.bindTexture(glContext.TEXTURE_2D, glPostTexture);
+        glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
 
         // set vertex position attribute
         const vertexByteStride = 8;
         const pLocation = glContext.getAttribLocation(glPostShader, 'p');
         glContext.enableVertexAttribArray(pLocation);
-        glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, false, vertexByteStride, 0);
+        glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
 
         // set uniforms and draw
         const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
         glContext.uniform1i(uniformLocation('iChannel0'), 0);
         glContext.uniform1f(uniformLocation('iTime'), time);
         glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-        glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
+        glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
     }
 }

package/shortExamples/base.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html><head><meta charset=utf-8></head><body>
+
+<!-- LittleJS Engine -->
+<script src=../src/engineDebug.js?1105></script>
+<script src=../src/engineUtilities.js?1105></script>
+<script src=../src/engineSettings.js?1105></script>
+<script src=../src/engineObject.js?1105></script>
+<script src=../src/engineDraw.js?1105></script>
+<script src=../src/engineInput.js?1105></script>
+<script src=../src/engineAudio.js?1105></script>
+<script src=../src/engineTileLayer.js?1105></script>
+<script src=../src/engineParticles.js?1105></script>
+<script src=../src/engineMedals.js?1105></script>
+<script src=../src/engineWebGL.js?1105></script>
+<script src=../src/engine.js?1105></script>\
+<script>
+
+'use strict';
+
+// use fixed size canvas for examples
+canvasFixedSize = vec2(960, 540);
+
+// allow improved scaling
+canvasPixelated = false;
+
+// disable watermark
+showWatermark = false;
+
+// these functions can be overridden for each example
+function gameInit() {}
+function gameUpdate() {}
+function gameUpdatePost() {}
+function gameRender() {}
+function gameRenderPost() {}
+
+</script>

package/shortExamples/code/blending.js

@@ -0,0 +1,12 @@
+function gameRender()
+{
+    // additive blend
+    setBlendMode(1);
+    drawTile(vec2(1, 3), vec2(6), tile(0), rgb(1,0,0));
+    drawTile(vec2(-1,3), vec2(6), tile(0), rgb(0,0,1));
+
+    // alpha blend
+    setBlendMode(0);
+    drawTile(vec2(1, -3), vec2(6), tile(0), rgb(1,0,0,.5));
+    drawTile(vec2(-1,-3), vec2(6), tile(0), rgb(0,0,1,.5));
+}