littlejsengine 1.9.7 → 1.9.9

package/plugins/newgrounds.js

@@ -0,0 +1,169 @@
+/** 
+ * LittleJS Newgrounds API
+ * - NewgroundsMedal extends Medal with Newgrounds API functionality
+ * - Call newgroundsInit to enable Newgrounds functionality
+ * - Uses CryptoJS for encryption if optional cipher is provided
+ * - Keeps connection alive and logs views
+ * - Functions to interact with scoreboards
+ * - Functions to unlock medals
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Newgrounds medal auto unlocks in newgronds API */
+class NewgroundsMedal extends Medal
+{
+    /** Create a medal object and adds it to the list of medals */
+    constructor(id, name, description, icon, src)
+    { super(id, name, description, icon, src); }
+
+    /** Unlocks a medal if not already unlocked */
+    unlock()
+    {
+        super.unlock();
+        newgrounds && newgrounds.unlockMedal(this.id);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+ 
+/** Global Newgrounds object */
+let newgrounds;
+
+/** This can used to enable Newgrounds functionality
+ *  @param {Number} app_id   - The newgrounds App ID
+ *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+ *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
+ *  @memberof Medals */
+function newgroundsInit(app_id, cipher, cryptoJS)
+{ newgrounds = new Newgrounds(app_id, cipher, cryptoJS); }
+
+/** 
+ * Newgrounds API wrapper object
+ * @example
+ * // create a newgrounds object, replace the app id with your own
+ * const app_id = '52123:1ZuSTQ7l';
+ * newgrounds = new Newgrounds(app_id);
+ */
+class Newgrounds
+{
+    /** Create a newgrounds object
+     *  @param {String} app_id   - The newgrounds App ID
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
+    constructor(app_id, cipher, cryptoJS)
+    {
+        ASSERT(!newgrounds, 'there can only be one newgrounds object');
+        ASSERT(!cipher || cryptoJS, 'must provide cryptojs if there is a cipher');
+
+        this.app_id = app_id;
+        this.cipher = cipher;
+        this.cryptoJS = cryptoJS;
+        this.host = location ? location.hostname : '';
+
+        // get session id from url search params
+        const url = new URL(location.href);
+        this.session_id = url.searchParams.get('ngio_session_id');
+
+        if (!this.session_id)
+            return; // only use newgrounds when logged in
+
+        // get medals
+        const medalsResult = this.call('Medal.getList');
+        this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
+        debugMedals && console.log(this.medals);
+        for (const newgroundsMedal of this.medals)
+        {
+            const medal = medals[newgroundsMedal['id']];
+            if (medal)
+            {
+                // copy newgrounds medal data
+                medal.image =       new Image;
+                medal.image.src =   newgroundsMedal['icon'];
+                medal.name =        newgroundsMedal['name'];
+                medal.description = newgroundsMedal['description'];
+                medal.unlocked =    newgroundsMedal['unlocked'];
+                medal.difficulty =  newgroundsMedal['difficulty'];
+                medal.value =       newgroundsMedal['value'];
+
+                if (medal.value) // add value to description
+                    medal.description = medal.description + ` (${ medal.value })`;
+            }
+        }
+    
+        // get scoreboards
+        const scoreboardResult = this.call('ScoreBoard.getBoards');
+        this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
+        debugMedals && console.log(this.scoreboards);
+
+        // keep the session alive with a ping every 5 minutes
+        const keepAliveMS = 5 * 60 * 1e3;
+        setInterval(()=>this.call('Gateway.ping', 0, true), keepAliveMS);
+    }
+
+    /** Send message to unlock a medal by id
+     * @param {Number} id - The medal id */
+    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, true); }
+
+    /** Send message to post score
+     * @param {Number} id    - The scoreboard id
+     * @param {Number} value - The score value */
+    postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, true); }
+
+    /** Get scores from a scoreboard
+     * @param {Number} id       - The scoreboard id
+     * @param {String} [user]   - A user's id or name
+     * @param {Number} [social] - If true, only social scores will be loaded
+     * @param {Number} [skip]   - Number of scores to skip before start
+     * @param {Number} [limit]  - Number of scores to include in the list
+     * @return {Object}         - The response JSON object
+     */
+    getScores(id, user, social=0, skip=0, limit=10)
+    { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
+
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, true); }
+
+    /** Send a message to call a component of the Newgrounds API
+     * @param {String}  component    - Name of the component
+     * @param {Object}  [parameters] - Parameters to use for call
+     * @param {Boolean} [async]      - If true, don't wait for response before continuing
+     * @return {Object}              - The response JSON object
+     */
+    call(component, parameters, async=false)
+    {
+        const call = {'component':component, 'parameters':parameters};
+        if (this.cipher)
+        {
+            // encrypt using AES-128 Base64 with cryptoJS
+            const cryptoJS = this.cryptoJS;
+            const aesKey = cryptoJS['enc']['Base64']['parse'](this.cipher);
+            const iv = cryptoJS['lib']['WordArray']['random'](16);
+            const encrypted = cryptoJS['AES']['encrypt'](JSON.stringify(call), aesKey, {'iv':iv});
+            call['secure'] = cryptoJS['enc']['Base64']['stringify'](iv.concat(encrypted['ciphertext']));
+            call['parameters'] = 0;
+        }
+
+        // build the input object
+        const input =
+        {
+            'app_id':     this.app_id,
+            'session_id': this.session_id,
+            'call':       call
+        };
+
+        // build post data
+        const formData = new FormData();
+        formData.append('input', JSON.stringify(input));
+        
+        // send post data
+        const xmlHttp = new XMLHttpRequest();
+        const url = 'https://newgrounds.io/gateway_v3.php';
+        xmlHttp.open('POST', url, !debugMedals && async);
+        xmlHttp.send(formData);
+        debugMedals && console.log(xmlHttp.responseText);
+        return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
+    }
+}

package/plugins/postProcess.js

@@ -0,0 +1,102 @@
+/**
+ * LittleJS Post Processing Plugin
+ * - Supports shadertoy style post processing shaders
+ * - call glInitPostProcess
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+// post processing - can be enabled to pass other canvases through a final shader
+
+let glPostShader, glPostTexture, glPostIncludeOverlay;
+
+/** Set up a post processing shader
+ *  @param {String} shaderCode
+ *  @param {Boolean} includeOverlay
+ *  @memberof WebGL */
+function initPostProcess(shaderCode, includeOverlay=false)
+{
+    ASSERT(!glPostShader, 'can only have 1 post effects shader');
+    if (headlessMode) return;
+    
+    if (!shaderCode) // default shader pass through
+        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
+
+    // create the shader
+    glPostShader = glCreateProgram(
+        '#version 300 es\n' +            // specify GLSL ES version
+        'precision highp float;'+        // use highp for better accuracy
+        'in vec2 p;'+                    // position
+        'void main(){'+                  // shader entry point
+        'gl_Position=vec4(p+p-1.,1,1);'+ // set position
+        '}'                              // end of shader
+        ,
+        '#version 300 es\n' +            // specify GLSL ES version
+        'precision highp float;'+        // use highp for better accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time
+        'out vec4 c;'+                   // out color
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
+        'c.a=1.;'+                       // always use full alpha
+        '}'                              // end of shader
+    );
+
+    // create buffer and texture
+    glPostTexture = glCreateTexture(undefined);
+    glPostIncludeOverlay = includeOverlay;
+
+    // hide the original 2d canvas
+    mainCanvas.style.visibility = 'hidden';
+    if (glPostIncludeOverlay)
+        overlayCanvas.style.visibility = 'hidden';
+
+    // Render the post processing shader, called automatically by the engine
+    engineAddPlugin(undefined, postProcessRender);
+    function postProcessRender()
+    {
+        if (headlessMode) return;
+        
+        // prepare to render post process shader
+        if (glEnable)
+        {
+            glFlush(); // clear out the buffer
+            mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
+        }
+        else
+        {
+            // set the viewport
+            glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+        }
+
+        // copy overlay canvas so it will be included in post processing
+        glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
+
+        // 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);
+
+        // 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);
+
+        // 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);
+
+        // 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);
+    }
+}

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.7';
+const engineVersion = '1.9.9';
 
 /** Frames per second to update
  *  @type {Number}
@@ -84,6 +84,22 @@ function setPaused(isPaused) { paused = isPaused; }
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
+// plugin hooks
+
+const pluginUpdateList = [], pluginRenderList = [];
+
+/** Add a new update function for a plugin
+ *  @param {Function} [updateFunction]
+ *  @param {Function} [renderFunction]
+ *  @memberof Engine */
+function engineAddPlugin(updateFunction, renderFunction)
+{
+    updateFunction && pluginUpdateList.push(updateFunction);
+    renderFunction && pluginRenderList.push(renderFunction);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Main engine functions
 
 /** Startup LittleJS engine with your callback functions
  *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
@@ -159,6 +175,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
                 // update game and objects
                 inputUpdate();
                 gameUpdate();
+                pluginUpdateList.forEach(f=>f());
                 engineObjectsUpdate();
 
                 // do post update
@@ -180,8 +197,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             for (const o of engineObjects)
                 o.destroyed || o.render();
             gameRenderPost();
-            glRenderPostProcess();
-            medalsRender();
+            pluginRenderList.forEach(f=>f());
             touchGamepadRender();
             debugRender();
             glCopyToContext(mainContext);
@@ -253,10 +269,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     const styleBody = 
         'margin:0;overflow:hidden;' + // fill the window
         'background:#000;' +          // set background color
-        'touch-action:none;' +        // prevent mobile pinch to resize
-        'user-select:none;' +         // prevent mobile hold to select
+        'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
-        '-webkit-touch-callout:none'; // compatibility for ios
+        (!touchInputEnable ? '' :     // no touch css setttings
+        'touch-action:none;' +        // prevent mobile pinch to resize
+        '-webkit-touch-callout:none');// compatibility for ios
     document.body.style.cssText = styleBody;
     document.body.appendChild(mainCanvas = document.createElement('canvas'));
     mainContext = mainCanvas.getContext('2d');
@@ -471,21 +488,23 @@ function drawEngineSplashScreen(t)
     x.setLineDash([99*p2,99]);
 
     // cab top
-    rect(7,17,18,-8,color(2,2));
-    rect(7,9,18,4,color(2,3));
-    rect(25,9,8,8,color(2,1));
-    rect(25,9,-18,8);
-    rect(25,9,8,8);
+    rect(7,16,18,-8,color(2,2));
+    rect(7,8,18,4,color(2,3));
+    rect(25,8,8,8,color(2,1));
+    rect(25,8,-18,8);
+    rect(25,8,8,8);
 
     // cab
-    rect(25,17,7,22,color());
-    rect(11,40,14,-23,color(1,1));
-    rect(11,17,14,17,color(1,2));
-    rect(11,17,14,9,color(1,3));
-    rect(15,31,6,-9,color(2,2));
-    circle(15,23,5,0,PI/2,color(2,4),1);
-    rect(25,17,-14,23);
-    rect(21,22,-6,9);
+    rect(25,16,7,23,color());
+    rect(11,39,14,-23,color(1,1));
+    rect(11,16,14,18,color(1,2));
+    rect(11,16,14,8,color(1,3));
+    rect(25,16,-14,24);
+
+    // cab window
+    rect(15,29,6,-9,color(2,2));
+    circle(15,21,5,0,PI/2,color(2,4),1);
+    rect(21,21,-6,9);
 
     // little stack
     rect(37,14,9,6,color(3,2));
@@ -493,16 +512,16 @@ function drawEngineSplashScreen(t)
     rect(37,14,9,6);
 
     // big stack
-    rect(50,20,10,-8,color(0,1))
-    rect(50,20,6.5,-8,color(0,2))
-    rect(50,20,3.5,-8,color(0,3))
-    rect(50,20,10,-8)
-    circle(55,2,11.4,.5,PI-.5,color(3,3))
-    circle(55,2,11.4,.5,PI/2,color(3,2),1)
-    circle(55,2,11.4,.5,PI-.5)
-    rect(45,7,20,-7,color(0,2))
-    rect(45,-1,20,4,color(0,3))
-    rect(45,-1,20,8)
+    rect(50,20,10,-8,color(0,1));
+    rect(50,20,6.5,-8,color(0,2));
+    rect(50,20,3.5,-8,color(0,3));
+    rect(50,20,10,-8);
+    circle(55,2,11.4,.5,PI-.5,color(3,3));
+    circle(55,2,11.4,.5,PI/2,color(3,2),1);
+    circle(55,2,11.4,.5,PI-.5);
+    rect(45,7,20,-7,color(0,2));
+    rect(45,-1,20,4,color(0,3));
+    rect(45,-1,20,8);
 
     // engine
     for (let i=5; i--;)

package/src/engineAudio.js

@@ -112,7 +112,17 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate);
+        this.gainNode = audioContext.createGain();
+        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
+    }
+
+    /** Set the sound volume
+     *  @param {Number}  [volume] - How much to scale volume by
+     */
+    setVolume(volume=1)
+    {
+        if (this.gainNode)
+            this.gainNode.gain.value = volume;
     }
 
     /** Stop the last instance of this sound that was played */
@@ -300,15 +310,16 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
 let audioSuspended = false;
 
 /** Play cached audio samples with given settings
- *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
- *  @param {Number}  [volume] - How much to scale volume by
- *  @param {Number}  [rate] - The playback rate to use
- *  @param {Number}  [pan] - How much to apply stereo panning
- *  @param {Boolean} [loop] - True if the sound should loop when it reaches the end
- *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
+ *  @param {Array}    sampleChannels - Array of arrays of samples to play (for stereo playback)
+ *  @param {Number}   [volume] - How much to scale volume by
+ *  @param {Number}   [rate] - The playback rate to use
+ *  @param {Number}   [pan] - How much to apply stereo panning
+ *  @param {Boolean}  [loop] - True if the sound should loop when it reaches the end
+ *  @param {Number}   [sampleRate=44100] - Sample rate for the sound
+ *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR, gainNode) 
 {
     if (!soundEnable || headlessMode) return;
 
@@ -334,11 +345,8 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // set master gain volume
-    setSoundVolume(soundVolume);
-
     // create and connect gain node
-    const gainNode = audioContext.createGain();
+    gainNode = gainNode || audioContext.createGain();
     gainNode.gain.value = volume;
     gainNode.connect(audioGainNode);
 

package/src/engineBuild.js

@@ -137,7 +137,7 @@ function closureCompilerStep(filename)
     fs.copyFileSync(filename, filenameTemp);
     try
     {
-        child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=*`);
+        child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --warning_level=VERBOSE --jscomp_off=*`);
         fs.rmSync(filenameTemp);
     }
     catch (e) { handleError(e, 'Failed to run Closure Compiler step!'); }

package/src/engineDebug.js

@@ -76,6 +76,20 @@ function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
     debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
 }
 
+/** Draw a debug poly in world space
+ *  @param {Vector2} pos
+ *  @param {Array}   points
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
+ *  @param {Boolean} [fill]
+ *  @memberof Debug */
+function debugPoly(pos, points, color='#fff', time=0, angle=0, fill=false)
+{
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    debugPrimitives.push({pos, points, color, time:new Timer(time), angle, fill});
+}
+
 /** Draw a debug circle in world space
  *  @param {Vector2} pos
  *  @param {Number}  [radius]
@@ -85,7 +99,7 @@ function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
  *  @memberof Debug */
 function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings');
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
 }
 
@@ -95,7 +109,11 @@ function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
  *  @param {Number}  [time]
  *  @param {Number}  [angle]
  *  @memberof Debug */
-function debugPoint(pos, color, time, angle) {debugRect(pos, undefined, color, time, angle);}
+function debugPoint(pos, color, time, angle)
+{
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    debugRect(pos, undefined, color, time, angle);
+}
 
 /** Draw a debug line in world space
  *  @param {Vector2} posA
@@ -106,19 +124,20 @@ function debugPoint(pos, color, time, angle) {debugRect(pos, undefined, color, t
  *  @memberof Debug */
 function debugLine(posA, posB, color, thickness=.1, time)
 {
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
     debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
 }
 
-/** Draw a debug axis aligned bounding box in world space
+/** Draw a debug combined axis aligned bounding box in world space
  *  @param {Vector2} pA - position A
  *  @param {Vector2} sA - size A
  *  @param {Vector2} pB - position B
  *  @param {Vector2} sB - size B
  *  @param {String}  [color]
  *  @memberof Debug */
-function debugAABB(pA, sA, pB, sB, color)
+function debugOverlap(pA, sA, pB, sB, color)
 {
     const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
     const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
@@ -136,7 +155,7 @@ function debugAABB(pA, sA, pB, sB, color)
  *  @memberof Debug */
 function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings');
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
@@ -235,7 +254,7 @@ function debugRender()
                 const stickScale = 1;
                 const buttonScale = .2;
                 const centerPos = cameraPos;
-                const sticks = stickData[i];
+                const sticks = gamepadStickData[i];
                 for (let j = sticks.length; j--;)
                 {
                     const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
@@ -255,6 +274,7 @@ function debugRender()
         }
     }
 
+    let debugObject;
     if (debugOverlay)
     {
         const saveContext = mainContext;
@@ -265,11 +285,13 @@ function debugRender()
         debugRect(cameraPos, cameraSize.subtract(vec2(.1)), '#f008');
 
         // mouse pick
-        let bestDistance = Infinity, bestObject;
+        let bestDistance = Infinity;
         for (const o of engineObjects)
         {
             if (o.canvas || o.destroyed)
                 continue;
+
+            o.renderDebugInfo();
             if (!o.size.x || !o.size.y)
                 continue;
 
@@ -277,33 +299,15 @@ function debugRender()
             if (distance < bestDistance)
             {
                 bestDistance = distance;
-                bestObject = o;
+                debugObject = o;
             }
-
-            // show object info
-            const size = vec2(max(o.size.x, .2), max(o.size.y, .2));
-            const color1 = new Color(o.collideTiles?1:0, o.collideSolidObjects?1:0, o.isSolid?1:0, o.parent?.2:.5);
-            const color2 = o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8);
-            drawRect(o.pos, size, color1, o.angle, false);
-            drawRect(o.pos, size.scale(.8), color2, o.angle, false);
-            o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5), false);
-        }
-        
-        if (bestObject)
-        {
-            const raycastHitPos = tileCollisionRaycast(bestObject.pos, mousePos);
-            raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), new Color(0,1,1,.3));
-            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5), 0, false);
-            drawLine(mousePos, bestObject.pos, .1, raycastHitPos ? new Color(1,0,0,.5) : new Color(0,1,0,.5), false);
-
-            const debugText = 'mouse pos = ' + mousePos + 
-                '\nmouse collision = ' + getTileCollisionData(mousePos) + 
-                '\n\n--- object info ---\n' +
-                bestObject.toString();
-            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, 'center', 'monospace');
         }
 
-        glCopyToContext(mainContext = saveContext);
+        if (tileCollisionSize.x > 0 && tileCollisionSize.y > 0)
+            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(0,0,1,.5), 0, false);
+        mainContext = saveContext;
+
+        //glCopyToContext(mainContext = saveContext);
     }
 
     {
@@ -318,6 +322,7 @@ function debugRender()
             const pos = worldToScreen(p.pos);
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
+            overlayContext.scale(1, -1);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
 
             if (p.text != undefined)
@@ -327,7 +332,20 @@ function debugRender()
                 overlayContext.textBaseline = 'middle';
                 overlayContext.fillText(p.text, 0, 0);
             }
-            else if (p.size == 0 || p.size.x === 0 && p.size.y === 0 )
+            else if (p.points != undefined)
+            {
+                // poly
+                overlayContext.beginPath();
+                for (const point of p.points)
+                {
+                    const p2 = point.scale(cameraScale).floor();
+                    overlayContext.lineTo(p2.x, p2.y);
+                }
+                overlayContext.closePath();
+                p.fill && overlayContext.fill();
+                overlayContext.stroke();
+            }
+            else if (p.size == 0 || p.size.x === 0 && p.size.y === 0)
             {
                 // point
                 overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
@@ -336,7 +354,8 @@ function debugRender()
             else if (p.size.x != undefined)
             {
                 // rect
-                const w = p.size.x*cameraScale|0, h = p.size.y*cameraScale|0;
+                const s = p.size.scale(cameraScale).floor();
+                const w = s.x, h = s.y;
                 p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
                 overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
             }
@@ -355,6 +374,22 @@ function debugRender()
         // remove expired primitives
         debugPrimitives = debugPrimitives.filter(r=>r.time<0);
     }
+    
+    if (debugObject)
+    {
+        const saveContext = mainContext;
+        mainContext = overlayContext;
+        const raycastHitPos = tileCollisionRaycast(debugObject.pos, mousePos);
+        raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), rgb(0,1,1,.3));
+        drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5), false);
+
+        const debugText = 'mouse pos = ' + mousePos + 
+            '\nmouse collision = ' + getTileCollisionData(mousePos) + 
+            '\n\n--- object info ---\n' +
+            debugObject.toString();
+        drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
+        mainContext = saveContext;
+    }
 
     {
         // draw debug overlay