littlejsengine 1.14.19 → 1.14.28

package/src/engineInput.js

@@ -119,6 +119,11 @@ let mouseDeltaScreen = vec2();
  *  @memberof Input */
 let mouseWheel = 0;
 
+/** True if mouse was inside the document window, set to false when mouse leaves
+ *  @type {boolean}
+ *  @memberof Input */
+let mouseInWindow = true;
+
 /** Returns true if user is using gamepad (has more recently pressed a gamepad button)
  *  @type {boolean}
  *  @memberof Input */
@@ -182,9 +187,9 @@ function inputUpdate()
     if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
         inputClear();
 
-    // update mouse world space position
+    // update mouse world space position and delta
     mousePos = screenToWorld(mousePosScreen);
-    mouseDelta = mouseDeltaScreen.multiply(vec2(1,-1)).rotate(-cameraAngle);
+    mouseDelta = screenToWorldDelta(mouseDeltaScreen);
 
     // update gamepads if enabled
     gamepadsUpdate();
@@ -213,10 +218,10 @@ function inputInit()
     document.addEventListener('mousedown', onMouseDown);
     document.addEventListener('mouseup', onMouseUp);
     document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseleave', onMouseLeave);
     document.addEventListener('wheel', onMouseWheel);
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
-    document.addEventListener('mouseleave', onMouseLeave);
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -238,14 +243,14 @@ function inputInit()
         if (inputWASDEmulateDirection)
             inputData[0][remapKey(e.code)] = 4;
     }
-    function remapKey(c)
+    function remapKey(k)
     {
         // handle remapping wasd keys to directions
         return inputWASDEmulateDirection ?
-            c === 'KeyW' ? 'ArrowUp' :
-            c === 'KeyS' ? 'ArrowDown' :
-            c === 'KeyA' ? 'ArrowLeft' :
-            c === 'KeyD' ? 'ArrowRight' : c : c;
+            k === 'KeyW' ? 'ArrowUp' :
+            k === 'KeyS' ? 'ArrowDown' :
+            k === 'KeyA' ? 'ArrowLeft' :
+            k === 'KeyD' ? 'ArrowRight' : k : k;
     }
     function onMouseDown(e)
     {
@@ -258,7 +263,10 @@ function inputInit()
 
         isUsingGamepad = false;
         inputData[0][e.button] = 3;
+
+        const mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
+        mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
         inputPreventDefault && e.button && e.preventDefault();
     }
     function onMouseUp(e)
@@ -269,18 +277,20 @@ function inputInit()
     }
     function onMouseMove(e)
     {
+        mouseInWindow = true;
+        const mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
-        mouseDeltaScreen = mouseDeltaScreen.add(vec2(e.movementX, e.movementY));
+
+        // when pointer is locked use movementX/Y for delta
+        const movement = pointerLockIsActive() ?
+            vec2(e.movementX, e.movementY) :
+            mousePosScreen.subtract(mousePosScreenLast);
+        mouseDeltaScreen = mouseDeltaScreen.add(movement);
     }
+    function onMouseLeave() { mouseInWindow = false; } // mouse moved off window
     function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
-    function onMouseLeave()
-    {
-        // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(-1);
-        mouseDeltaScreen = vec2(0);
-    }
 }
 
 // convert a mouse or touch event position to screen space
@@ -324,8 +334,8 @@ function gamepadsUpdate()
         else if (touchGamepadStick.lengthSquared() > .3)
         {
             // convert to 8 way dpad
-            sticks[0].x = Math.round(touchGamepadStick.x);
-            sticks[0].y = -Math.round(touchGamepadStick.y);
+            sticks[0].x = round(touchGamepadStick.x);
+            sticks[0].y = -round(touchGamepadStick.y);
             sticks[0] = sticks[0].clampLength();
         }
 
@@ -416,7 +426,7 @@ let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick =
 function touchGamepadButtonCenter()
 {
     // draw right face buttons
-    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadButtonCount <= 2)
         center.x += touchGamepadSize/2;
     return center;
@@ -426,14 +436,13 @@ function touchGamepadButtonCenter()
 function touchInputInit()
 {
     // add non passive touch event listeners
-    let handleTouch = handleTouchDefault;
     document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
     document.addEventListener('touchmove',  (e) => handleTouch(e), { passive: false });
     document.addEventListener('touchend',   (e) => handleTouch(e), { passive: false });
 
     // handle all touch events the same way
     let wasTouching;
-    function handleTouchDefault(e)
+    function handleTouch(e)
     {
         if (!touchInputEnable)
             return;
@@ -453,11 +462,11 @@ function touchInputInit()
         {
             // set event pos and pass it along
             const pos = vec2(e.touches[0].clientX, e.touches[0].clientY);
-            const lastMousePosScreen = mousePosScreen;
+            const mousePosScreenLast = mousePosScreen;
             mousePosScreen = mouseEventToScreen(pos);
             if (wasTouching)
             {
-                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(lastMousePosScreen));
+                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
                 isUsingGamepad = touchGamepadEnable;
             }
             else
@@ -489,7 +498,7 @@ function touchInputInit()
         if (touching)
         {
             touchGamepadTimer.set();
-            if (paused && !wasTouching)
+            if (touchGamepadCenterButton && !wasTouching && paused)
             {
                 // touch anywhere to press start when paused
                 touchGamepadButtons[9] = 1;
@@ -528,7 +537,8 @@ function touchInputInit()
                 if (button < touchGamepadButtonCount)
                     touchGamepadButtons[button] = 1;
             }
-            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
+            else if (touchGamepadCenterButton && !wasTouching && 
+                startCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -583,7 +593,7 @@ function touchGamepadRender()
     const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
     for (let i=0; i<touchGamepadButtonCount; i++)
     {
-        let j = mod(i-1, 4);
+        const j = mod(i-1, 4);
         let button = touchGamepadButtonCount > 2 ? 
             j : min(j, touchGamepadButtonCount-1);
         // fix button locations (swap 2 and 3 to match gamepad layout)

package/src/engineMedals.js

@@ -167,11 +167,11 @@ class Medal
         const descriptionSize = height*.3;
         const pos = vec2(x + medalDisplayIconSize + 2*gap.x, y + gap.y*2 + nameSize/2);
         const textWidth = width - medalDisplayIconSize - 3*gap.x;
-        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, undefined, textWidth);
 
         // draw the description
         pos.y = y + height - gap.y*2 - descriptionSize/2;
-        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, undefined, textWidth);
         context.restore();
     }
 

package/src/engineObject.js

@@ -135,11 +135,10 @@ class EngineObject
     }
 
     /** Update the object physics, called automatically by engine once each frame */
-    update()
+    updatePhysics()
     {
         // child objects do not have physics
-        if (this.parent)
-            return;
+        ASSERT(!this.parent);
 
         if (this.clampSpeed)
         {
@@ -189,7 +188,7 @@ class EngineObject
                     continue;
 
                 // check collision
-                if (!isOverlapping(this.pos, this.size, o.pos, o.size))
+                if (!this.isOverlappingObject(o))
                     continue;
 
                 // notify objects of collision and check if should be resolved
@@ -287,6 +286,27 @@ class EngineObject
                     // test which side we bounced off (or both if a corner)
                     const blockedLayerY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
                     const blockedLayerX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+
+                    if (blockedLayerX)
+                    {
+                        // try to move up a tiny bit
+                        const epsilon = 1e-3;
+                        const maxMoveUp = .1;
+                        const y = floor(oldPos.y-this.size.y/2+1) +
+                            this.size.y/2 + epsilon;
+                        const delta = y - this.pos.y;
+                        if (delta < maxMoveUp)
+                        if (!tileCollisionTest(vec2(this.pos.x, y), this.size, this))
+                        {   
+                            this.pos.y = y;
+                            debugPhysics && debugRect(this.pos, this.size, '#ff0');
+                            return;
+                        }
+
+                        // move to previous position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -this.restitution;
+                    }
                     if (blockedLayerY || !blockedLayerX)
                     {
                         // bounce velocity
@@ -310,18 +330,15 @@ class EngineObject
                             this.groundObject = undefined;
                         }
                     }
-                    if (blockedLayerX)
-                    {
-                        // move to previous position and bounce
-                        this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.restitution;
-                    }
                     debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }
     }
 
+    /** Update the object, called automatically by engine once each frame. Does nothing by default. */
+    update() {}
+
     /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
     render()
     {
@@ -373,10 +390,24 @@ class EngineObject
      */
     collideWithObject(object) { return true; }
 
+    /** Get this object's up vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getUp(scale=1) { return vec2().setAngle(this.angle, scale); }
+
+    /** Get this object's right vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getRight(scale=1) { return vec2().setAngle(this.angle+PI/2, scale); }
+
     /** How long since the object was created
      *  @return {number} */
     getAliveTime() { return time - this.spawnTime; }
 
+    /** Get the speed of this object
+     *  @return {number} */
+    getSpeed() { return this.velocity.length(); }
+
     /** Apply acceleration to this object (adjust velocity, not affected by mass)
      *  @param {Vector2} acceleration */
     applyAcceleration(acceleration)
@@ -421,6 +452,20 @@ class EngineObject
         child.parent = 0;
     }
 
+    /** Check if overlapping another engine object
+     *  Collisions are resoloved to prevent overlaps
+     *  @param {EngineObject} object
+     *  @return {boolean} */
+    isOverlappingObject(object)
+    { return this.isOverlapping(object.pos, object.size); }
+
+    /** Check if overlapping a point or aligned bounding box
+     *  @param {Vector2} pos          - Center of box
+     *  @param {Vector2} [size=(0,0)] - Size of box, uses a point if undefined
+     *  @return {boolean} */
+    isOverlapping(pos, size=vec2())
+    { return isOverlapping(this.pos, this.size, pos, size); }
+
     /** Set how this object collides
      *  @param {boolean} [collideSolidObjects] - Does it collide with solid objects?
      *  @param {boolean} [isSolid]             - Does it collide with and block other objects? (expensive in large numbers)

package/src/engineParticles.js

@@ -152,19 +152,34 @@ class ParticleEmitter extends EngineObject
         this.particleCreateCallback = undefined;
         /** @property {number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
+        /** @property {number} - Percentage of velocity to pass to particles (0-1) */
+        this.velocityInheritance = 0;
+
+        // track previous position and angle
+        this.previousAngle = this.angle;
+        this.previousPos = this.pos.copy();
     }
 
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
-        // only do default update to apply parent transforms
-        this.parent && super.update();
+        if (this.velocityInheritance)
+        {
+            // pass emitter velocity to particles
+            const p = this.velocityInheritance;
+            this.velocity.x = p * (this.pos.x - this.previousPos.x);
+            this.velocity.y = p * (this.pos.y - this.previousPos.y);
+            this.angleVelocity = p * (this.angle - this.previousAngle);
+            this.previousAngle = this.angle;
+            this.previousPos.x = this.pos.x;
+            this.previousPos.y = this.pos.y;
+        }
 
         // update emitter
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
-            if (this.emitRate * particleEmitRateScale)
+            if (this.emitRate && particleEmitRateScale)
             {
                 const rate = 1/this.emitRate/particleEmitRateScale;
                 for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
@@ -217,7 +232,7 @@ class ParticleEmitter extends EngineObject
         const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
         particle.velocity      = vec2().setAngle(velocityAngle, speed);
         particle.angleVelocity = angleSpeed;
-        if (!this.localSpace)
+        if (!this.localSpace && this.velocityInheritance > 0)
         {
             // apply emitter velocity to particle
             particle.velocity.x += this.velocity.x;
@@ -302,8 +317,6 @@ class Particle extends EngineObject
     /** Update the object physics, called automatically by engine once each frame */
     update()
     {
-        super.update();
-
         if (this.collideTiles || this.collideSolidObjects)
         {
             // only apply max circular speed if particle can collide
@@ -315,6 +328,16 @@ class Particle extends EngineObject
                 this.velocity.y *= s;
             }
         }
+
+        if (this.lifeTime > 0 && time - this.spawnTime > this.lifeTime)
+        {
+            // destroy particle when its time runs out
+            const c = this.colorEnd;
+            this.color.set(c.r, c.g, c.b, c.a);
+            this.size.set(this.sizeEnd, this.sizeEnd);
+            this.destroyCallback && this.destroyCallback(this);
+            this.destroyed = 1;
+        }
     }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
@@ -323,7 +346,7 @@ class Particle extends EngineObject
         // lerp color and size
         const p1 = this.lifeTime > 0 ? min((time - this.spawnTime) / this.lifeTime, 1) : 1, p2 = 1-p1;
         const radius = p2 * this.sizeStart + p1 * this.sizeEnd;
-        this.size.x = this.size.y = radius;
+        const size = vec2(radius);
         this.color.r = p2 * this.colorStart.r + p1 * this.colorEnd.r;
         this.color.g = p2 * this.colorStart.g + p1 * this.colorEnd.g;
         this.color.b = p2 * this.colorStart.b + p1 * this.colorEnd.b;
@@ -343,7 +366,7 @@ class Particle extends EngineObject
         {
             // in local space of emitter
             const a = this.localSpaceEmitter.angle;
-            const c = Math.cos(a), s = Math.sin(a);
+            const c = cos(a), s = sin(a);
             pos = this.localSpaceEmitter.pos.add(
                 new Vector2(pos.x*c - pos.y*s, pos.x*s + pos.y*c));
             angle += this.localSpaceEmitter.angle;
@@ -359,21 +382,14 @@ class Particle extends EngineObject
             {
                 // stretch in direction of motion
                 const trailLength = speed * this.trailScale;
-                this.size.y = max(this.size.x, trailLength);
-                angle = Math.atan2(direction.x, direction.y);
-                drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+                size.y = max(size.x, trailLength);
+                angle = atan2(direction.x, direction.y);
+                drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
             }
         }
         else
-            drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+            drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
         this.additive && setBlendMode();
-        debugParticles && debugRect(pos, this.size, '#f005', 0, angle);
-
-        if (p1 === 1)
-        {
-            // destroy particle when its time runs out
-            this.destroyCallback && this.destroyCallback(this);
-            this.destroyed = 1;
-        }
+        debugParticles && debugRect(pos, size, '#f005', 0, angle);
     }
 }

package/src/engineRelease.js

@@ -38,4 +38,5 @@ function debugShowErrors(){}
 function debugVideoCaptureIsActive(){ return false; }
 function debugVideoCaptureStart (){}
 function debugVideoCaptureStop  (){}
-function debugVideoCaptureUpdate(){}
+function debugVideoCaptureUpdate(){}
+function debugProtectConstant(o){ return o; }

package/src/engineSettings.js

@@ -216,6 +216,14 @@ let touchInputEnable = true;
  *  @memberof Settings */
 let touchGamepadEnable = false;
 
+/** True if touch gamepad should have start button in the center
+ *  - When the game is paused, any touch will press the button
+ *  - This can function as a way to pause/unpause the game
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadCenterButton = true;
+
 /** True if touch gamepad should be analog stick or false to use if 8 way dpad
  *  @type {boolean}
  *  @default
@@ -391,9 +399,14 @@ function setHeadlessMode(headless) { headlessMode = headless; }
  *  @memberof Settings */
 function setGLEnable(enable)
 {
+    if (enable && !glCanBeEnabled)
+    {
+        console.warn('Can not enable WebGL if it was disabled on start.');
+        return;
+    }
     glEnable = enable;
     if (glCanvas) // hide glCanvas if WebGL is disabled
-        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+        glCanvas.style.display = enable ? '' : 'none';
 }
 
 /** Set how many sided polygons to use when drawing circles and ellipses with WebGL
@@ -481,6 +494,12 @@ function setTouchInputEnable(enable) { touchInputEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
 
+/** True if touch gamepad should have start button in the center
+ *  - This can function as a way to pause/unpause the game
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setTouchGamepadCenterButton(enable) { touchGamepadCenterButton = enable; }
+
 /** Set if touch gamepad should be analog stick or 8 way dpad
  *  @param {boolean} analog
  *  @memberof Settings */

package/src/engineTileLayer.js

@@ -47,23 +47,23 @@ function tileCollisionTest(pos, size=vec2(), object, solidOnly=true)
     }
 }
 
-/** Return the center of first tile hit, undefined if nothing was hit.
- *  This does not return the exact intersection, but the center of the tile hit.
+/** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+ *  The point will be inside the colliding tile if it hits (may have a tiny shift)
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object] - An object or undefined for generic test
+ *  @param {Vector2}      [normal] - Optional normal of the surface hit
  *  @param {boolean}      [solidOnly=true] - Only check solid layers if true
- *  @return {Vector2}
+ *  @return {Vector2|undefined} - position of the center of the tile hit or undefined if no hit
  *  @memberof TileLayers */
-function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
+function tileCollisionRaycast(posStart, posEnd, object, normal, solidOnly=true)
 {
     for (const layer of tileCollisionLayers)
     {
         if (!solidOnly || layer.isSolid)
         {
-            const hitPos = layer.collisionRaycast(posStart, posEnd, object)
-            if (hitPos)
-                return hitPos;
+            const hitPos = layer.collisionRaycast(posStart, posEnd, object, normal)
+            if (hitPos) return hitPos;
         }
     }
 }
@@ -201,6 +201,8 @@ class CanvasLayer extends EngineObject
         /** @property {TextureInfo} - Texture info to use for this object rendering */
         const useWebGL = false; // do not use webgl by default
         this.textureInfo = new TextureInfo(this.canvas, useWebGL);
+        /** @property {boolean} - True if WebGL texture needs to be refreshed */
+        this.refreshWebGL = false;
 
         // disable physics by default
         this.mass = this.gravityScale = this.friction = this.restitution = 0;
@@ -234,8 +236,15 @@ class CanvasLayer extends EngineObject
     *  @memberof Draw */
     draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
     {
-        // draw the canvas layer as a single tile that uses the whole texture
         const useWebGL = glEnable && this.textureInfo.hasWebGL();
+        if (useWebGL && this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
+        // draw the canvas layer as a single tile that uses the whole texture
         const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
@@ -305,9 +314,18 @@ class CanvasLayer extends EngineObject
     { this.drawTile(pos, size, undefined, color, angle); }
 
     /** Create or update the WebGL texture for this layer
-     *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
-    useWebGL(enable=true)
+     *  @param {boolean} [enable] - enable WebGL rendering and update the texture 
+     *  @param {boolean} [immediate] - shoulkd the texture be updated immediately
+     */
+    useWebGL(enable=true, immediate=false)
     {
+        if (!immediate && enable && this.textureInfo.hasWebGL())
+        {
+            // refresh the texture when needed
+            this.refreshWebGL = true;
+            return;
+        }
+
         if (enable)
             this.textureInfo.createWebGLTexture();
         else
@@ -338,7 +356,7 @@ class TileLayer extends CanvasLayer
     */
     constructor(position, size, tileInfo=tile(), renderOrder=0)
     {
-        const canvasSize = size.multiply(tileInfo.size);
+        const canvasSize = tileInfo ? size.multiply(tileInfo.size) : size;
         super(position, size, 0, renderOrder, canvasSize);
 
         // set tile info
@@ -391,6 +409,13 @@ class TileLayer extends CanvasLayer
     {
         ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
 
+        if (this.refreshWebGL)
+        {
+            // update the WebGL texture
+            this.textureInfo.createWebGLTexture();
+            this.refreshWebGL = false;
+        }
+
         // draw the tile layer as a single tile
         const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         const size = this.drawSize || this.size;
@@ -427,8 +452,9 @@ class TileLayer extends CanvasLayer
         drawCanvas = this.canvas;
         drawContext = this.context;
         cameraPos = this.size.scale(.5);
-        cameraScale = this.tileInfo.size.x;
-        mainCanvasSize = this.size.multiply(this.tileInfo.size);
+        const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
+        cameraScale = tileSize.x;
+        mainCanvasSize = this.size.multiply(tileSize);
         if (clear)
         {
             // clear and set size
@@ -588,65 +614,44 @@ class TileCollisionLayer extends TileLayer
             // check if the object should collide with this tile
             const tileData = this.collisionData[y*this.size.x+x];
             if (tileData)
-            if (!object || object.collideWithTile(tileData, hitPos.set(x, y)))
+            if (!object || object.collideWithTile(tileData, 
+                hitPos.set(x + this.pos.x, y + this.pos.y)))
                 return true;
         }
         return false;
     }
 
-    /** Return the center of first tile hit, undefined if nothing was hit.
-    *  This does not return the exact intersection, but the center of the tile hit.
+    /** Return the exact position of the boudnary of first tile hit, undefined if nothing was hit.
+    *  The point will be inside the colliding tile if it hits (may have a tiny shift)
     *  @param {Vector2}      posStart
     *  @param {Vector2}      posEnd
-    *  @param {EngineObject} [object]
-    *  @return {Vector2} */
-    collisionRaycast(posStart, posEnd, object)
+    *  @param {EngineObject} [object] - An object or undefined for generic test
+    *  @param {Vector2}      [normal] - Optional normal of the surface hit
+    *  @return {Vector2|undefined} */
+    collisionRaycast(posStart, posEnd, object, normal)
     {
         ASSERT(isVector2(posStart) && isVector2(posEnd), 'positions must be Vector2s');
         ASSERT(!object || object instanceof EngineObject, 'object must be an EngineObject');
-        
-        // transform to local layer space
-        const posStartX = posStart.x - this.pos.x;
-        const posStartY = posStart.y - this.pos.y;
-        const posEndX   = posEnd.x   - this.pos.x;
-        const posEndY   = posEnd.y   - this.pos.y;
-
-        // test if a ray collides with tiles from start to end
-        const deltaX = posEndX - posStartX;
-        const deltaY = posEndY - posStartY;
-        const totalLength = (deltaX**2 + deltaY**2)**.5;
-        const unitX = abs(totalLength/deltaX);
-        const unitY = abs(totalLength/deltaY);
-
-        // setup iteration variables
-        const pos = posStart.floor(), signDeltaX = sign(deltaX), signDeltaY = sign(deltaY);
-        let xi = unitX * (deltaX < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1) || 0;
-        let yi = unitY * (deltaY < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1) || 0;
-
-        // use line drawing algorithm to test for collisions
-        while (true)
+
+        const localPos = new Vector2;
+        const collisionTest = (pos)=>
         {
             // check for tile collision
-            const tileData = this.getCollisionData(pos);
-            if (tileData && (!object || object.collideWithTile(tileData, pos)))
-            {
-                pos.x += .5; pos.y += .5;
-                debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
-                debugRaycast && debugPoint(pos, '#ff0');
-                return pos;
-            }
-
-            // check if past the end
-            if (xi >= totalLength && yi >= totalLength)
-                break;
-
-            // get coordinates of next tile to check
-            if (xi > yi)
-                pos.y += signDeltaY, yi += unitY;
-            else
-                pos.x += signDeltaX, xi += unitX;
+            localPos.set(pos.x - this.pos.x, pos.y - this.pos.y);
+            const tileData = this.getCollisionData(localPos);
+            return tileData && (!object || object.collideWithTile(tileData, pos));
         }
-
         debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
+        const hitPos = lineTest(posStart, posEnd, collisionTest, normal);
+        if (hitPos)
+        {
+            const tilePos = hitPos.floor().add(vec2(.5));
+            debugRaycast && debugRect(tilePos, vec2(1), '#f008');
+            debugRaycast && debugLine(posStart, hitPos, '#f00', .02);
+            debugRaycast && debugPoint(hitPos, '#0f0');
+            debugRaycast && normal && 
+                debugLine(hitPos, hitPos.add(normal), '#ff0', .02);
+            return hitPos;
+        }
     }
 }