littlejsengine 1.9.9 → 1.10.2

package/plugins/box2d.js

@@ -43,8 +43,9 @@ class Box2dObject extends EngineObject
 
     destroy()
     {
-        // destroy physics body and fixtures
-        box2dWorld.DestroyBody(this.body);
+        // destroy physics body, fixtures, and joints
+        this.body && box2dWorld.DestroyBody(this.body);
+        this.body = 0;
         super.destroy();
     }
 
@@ -91,20 +92,20 @@ class Box2dObject extends EngineObject
     addShape(shape, density, friction, restitution, isSensor)
     {
         const fd = box2dCreateFixtureDef(shape, density, friction, restitution, isSensor);
-        this.addFixture(fd);
+        return this.addFixture(fd);
     }
 
     addBox(size=vec2(1), offset=vec2(), angle=0, density, friction, restitution, isSensor)
     {
         const shape = new box2d.b2PolygonShape();
         shape.SetAsBox(size.x/2, size.y/2, offset.getBox2d(), angle);
-        this.addShape(shape, density, friction, restitution, isSensor);
+        return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
     addPoly(points, density, friction, restitution, isSensor)
     {
         const shape = box2dCreatePolygonShape(points);
-        this.addShape(shape, density, friction, restitution, isSensor);
+        return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
     addRegularPoly(diameter=1, sides=8, density, friction, restitution, isSensor)
@@ -113,7 +114,7 @@ class Box2dObject extends EngineObject
         const radius = diameter/2;
         for (let i=sides; i--;)
             points.push(vec2(radius,0).rotate((i+.5)/sides*PI*2));
-        this.addPoly(points, density, friction, restitution, isSensor);
+        return this.addPoly(points, density, friction, restitution, isSensor);
     }
 
     addRandomPoly(diameter=1, density, friction, restitution, isSensor)
@@ -123,7 +124,7 @@ class Box2dObject extends EngineObject
         const radius = diameter/2;
         for (let i=sides; i--;)
             points.push(vec2(rand(radius/2,radius*1.5),0).rotate(i/sides*PI*2));
-        this.addPoly(points, density, friction, restitution, isSensor);
+        return this.addPoly(points, density, friction, restitution, isSensor);
     }
 
     addCircle(diameter=1, offset=vec2(), density, friction, restitution, isSensor)
@@ -131,18 +132,19 @@ class Box2dObject extends EngineObject
         const shape = new box2d.b2CircleShape();
         shape.set_m_p(offset.getBox2d());
         shape.set_m_radius(diameter/2);
-        this.addShape(shape, density, friction, restitution, isSensor);
+        return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
     addEdge(point1, point2, density, friction, restitution, isSensor)
     {
         const shape = new box2d.b2EdgeShape();
         shape.Set(point1.getBox2d(), point2.getBox2d());
-        this.addShape(shape, density, friction, restitution, isSensor);
+        return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
     addEdgeLoop(points, density, friction, restitution, isSensor)
     {
+        const fixtures = [];
         const getPoint = i=> points[mod(i,points.length)];
         for (let i=0; i<points.length; ++i)
         {
@@ -151,12 +153,15 @@ class Box2dObject extends EngineObject
             shape.set_m_vertex1(getPoint(i+0).getBox2d());
             shape.set_m_vertex2(getPoint(i+1).getBox2d());
             shape.set_m_vertex3(getPoint(i+2).getBox2d());
-            this.addShape(shape, density, friction, restitution, isSensor);
+            const f = this.addShape(shape, density, friction, restitution, isSensor);
+            fixtures.push(f);
         }
+        return fixtures;
     }
 
     addEdgeList(points, density, friction, restitution, isSensor)
     {
+        const fixtures = [];
         for (let i=0; i<points.length-1; ++i)
         {
             const shape = new box2d.b2EdgeShape();
@@ -164,19 +169,37 @@ class Box2dObject extends EngineObject
             points[i+0] && shape.set_m_vertex1(points[i+0].getBox2d());
             points[i+1] && shape.set_m_vertex2(points[i+1].getBox2d());
             points[i+2] && shape.set_m_vertex3(points[i+2].getBox2d());
-            this.addShape(shape, density, friction, restitution, isSensor);
+            const f = this.addShape(shape, density, friction, restitution, isSensor);
+            fixtures.push(f);
         }
+        return fixtures;
     }
 
+    ///////////////////////////////////////////////////////////////////////////////
+    // lists of fixtures and joints
+
+    hasFixtures() { return !box2dIsNull(this.body.GetFixtureList()); }
     getFixtureList()
     {
-        const fixtureList = [];
+        const fixtures = [];
         for (let fixture=this.body.GetFixtureList(); !box2dIsNull(fixture); )
         {
-            fixtureList.push(fixture);
+            fixtures.push(fixture);
             fixture = fixture.GetNext();
         }
-        return fixtureList;
+        return fixtures;
+    }
+
+    hasJoints() { return !box2dIsNull(this.body.GetJointList()); }
+    getJointList()
+    {
+        const joints = [];
+        for (let joint=this.body.GetJointList(); !box2dIsNull(joint); )
+        {
+            joints.push(joint);
+            joint = joint.get_next();
+        }
+        return joints;
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -214,6 +237,19 @@ class Box2dObject extends EngineObject
     setBodyType(type)          { this.body.SetType(type); }
     setSleepingAllowed(isAllowed=true) { this.body.SetSleepingAllowed(isAllowed); }
     setFixedRotation(isFixed=true)     { this.body.SetFixedRotation(isFixed); }
+    setCenterOfMass(center)      { this.setMassData(center) }
+    setMass(mass)                { this.setMassData(undefined, mass) }
+    setMomentOfInertia(I)        { this.setMassData(undefined, undefined, I) }
+    resetMassData()              { this.body.ResetMassData(); }
+    setMassData(localCenter, mass, momentOfInertia)
+    {
+        const data = new box2d.b2MassData();
+        this.body.GetMassData(data);
+        localCenter && data.set_center(localCenter.getBox2d());
+        mass && data.set_mass(mass);
+        momentOfInertia && data.set_I(momentOfInertia);
+        this.body.SetMassData(data);
+    }
     setFilterData(categoryBits=0, ignoreCategoryBits=0, groupIndex=0)
     {
         this.getFixtureList().forEach(fixture=>
@@ -228,17 +264,17 @@ class Box2dObject extends EngineObject
     { this.getFixtureList().forEach(f=>f.SetSensor(isSensor)); }
 
     ///////////////////////////////////////////////////////////////////////////////
-    // physics kinematics
+    // physics force and torque functions
 
     applyForce(force, pos)
     {
-        pos = pos || this.getCenterOfMass();
+        pos ||= this.getCenterOfMass();
         this.setAwake();
         this.body.ApplyForce(force.getBox2d(), pos.getBox2d());
     }
     applyAcceleration(acceleration, pos)
     { 
-        pos = pos || this.getCenterOfMass();
+        pos ||= this.getCenterOfMass();
         this.setAwake();
         this.body.ApplyLinearImpulse(acceleration.getBox2d(), pos.getBox2d());
     }
@@ -270,7 +306,7 @@ class Box2dRaycastResult
     }
 }
 
-// raycast and return a list of all results
+// raycast and return a list of all the results
 function box2dRaycastAll(start, end)
 {
     const raycastCallback = new box2d.JSRayCastCallback();
@@ -293,11 +329,12 @@ function box2dRaycastAll(start, end)
 function box2dRaycast(start, end)
 {
     const raycastResults = box2dRaycastAll(start, end);
-    return raycastResults.length ?
-        raycastResults.reduce((a,b)=>a.fraction < b.fraction ? a : b) : undefined;
+    if (!raycastResults.length)
+        return undefined;
+    return raycastResults.reduce((a,b)=>a.fraction < b.fraction ? a : b);
 }
 
-// box aabb cast and return the all results
+// box aabb cast and return all the objects
 function box2dBoxCastAll(pos, size)
 {
     const queryCallback = new box2d.JSQueryCallback();
@@ -320,7 +357,7 @@ function box2dBoxCastAll(pos, size)
     return queryObjects;
 }
 
-// box aabb cast and return the first result
+// box aabb cast and return the first object
 function box2dBoxCast(pos, size)
 {
     const queryCallback = new box2d.JSQueryCallback();
@@ -341,7 +378,7 @@ function box2dBoxCast(pos, size)
     return queryObject;
 }
 
-// circle cast and return the all results
+// circle cast and return all the objects
 function box2dCircleCastAll(pos, diameter)
 {
     const radius2 = (diameter/2)**2;
@@ -349,17 +386,26 @@ function box2dCircleCastAll(pos, diameter)
     return results.filter(o=>o.pos.distanceSquared(pos) < radius2);
 }
 
-// circle cast and return the first result
+// circle cast and return the first object
 function box2dCircleCast(pos, diameter)
 {
     const radius2 = (diameter/2)**2;
     let results = box2dBoxCastAll(pos, vec2(diameter));
-    results = results.filter(o=>o.pos.distanceSquared(pos) < radius2);
-    results = results.sort((a,b)=>a.pos.distanceSquared(pos)-b.pos.distanceSquared(pos));
-    return results[0];
+
+    let bestResult, bestDistance2;
+    for (const result of results)
+    {
+        const distance2 = result.pos.distanceSquared(pos);
+        if (distance2 < radius2 && (!bestResult || distance2 < bestDistance2))
+        {
+            bestResult = result;
+            bestDistance2 = distance2;
+        }
+    }
+    return bestResult;
 }
 
-// point cast and return the first result
+// point cast and return the first object
 function box2dPointCast(pos, dynamicOnly=true)
 {
     const queryCallback = new box2d.JSQueryCallback();
@@ -384,6 +430,28 @@ function box2dPointCast(pos, dynamicOnly=true)
     return queryResult;
 }
 
+// box aabb cast and return all the fixtures
+function box2dBoxCastAllFixtures(pos, size)
+{
+    const queryCallback = new box2d.JSQueryCallback();
+    queryCallback.ReportFixture = function(fixturePointer)
+    {
+        const fixture = box2d.wrapPointer(fixturePointer, box2d.b2Fixture);
+        if (!queryObjects.includes(fixture))
+            queryObjects.push(fixture); // add if not already in list
+        return true; // continue getting results
+    };
+
+    const aabb = new box2d.b2AABB();
+    aabb.set_lowerBound(pos.subtract(size.scale(.5)).getBox2d());
+    aabb.set_upperBound(pos.add(size.scale(.5)).getBox2d());
+
+    let queryFixtures = [];
+    box2dWorld.QueryAABB(queryCallback, aabb);
+    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    return queryFixtures;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Box2D Joints
 
@@ -394,14 +462,19 @@ function box2dCreateMouseJoint(object, fixedObject, worldPos)
     jointDef.set_bodyA(fixedObject.body);
     jointDef.set_bodyB(object.body);
     jointDef.set_target(worldPos.getBox2d());
-    jointDef.set_maxForce(1e3 * object.getMass());
+    jointDef.set_maxForce(2e3 * object.getMass());
     return box2dCastObject(box2dWorld.CreateJoint(jointDef));
 }
 
+function box2dCreatePinJoint(objectA, objectB, collide=false)
+{
+    return box2dCreateDistanceJoint(objectA, objectB, objectB.pos, undefined, collide);
+}
+
 function box2dCreateDistanceJoint(objectA, objectB, anchorA, anchorB, collide=false)
 {
-    anchorA = anchorA || vec2(objectA.body.GetPosition());
-    anchorB = anchorB || vec2(objectB.body.GetPosition());
+    anchorA ||= vec2(objectA.body.GetPosition());
+    anchorB ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchorA);
     const localAnchorB = objectB.worldToLocal(anchorB);
     const jointDef = new box2d.b2DistanceJointDef();
@@ -416,7 +489,7 @@ function box2dCreateDistanceJoint(objectA, objectB, anchorA, anchorB, collide=fa
 
 function box2dCreateRevoluteJoint(objectA, objectB, anchor, collide=false)
 {
-    anchor = anchor || vec2(objectB.body.GetPosition());
+    anchor ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchor);
     const localAnchorB = objectB.worldToLocal(anchor);
     const jointDef = new box2d.b2RevoluteJointDef();
@@ -431,7 +504,7 @@ function box2dCreateRevoluteJoint(objectA, objectB, anchor, collide=false)
 
 function box2dCreatePrismaticJoint(objectA, objectB, anchor, worldAxis=vec2(0,1), collide=false)
 {
-    anchor = anchor || vec2(objectB.body.GetPosition());
+    anchor ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchor);
     const localAnchorB = objectB.worldToLocal(anchor);
     const localAxisA = objectB.worldToLocalVector(worldAxis);
@@ -448,7 +521,7 @@ function box2dCreatePrismaticJoint(objectA, objectB, anchor, worldAxis=vec2(0,1)
 
 function box2dCreateWheelJoint(objectA, objectB, anchor, worldAxis=vec2(0,1), collide=false)
 {
-    anchor = anchor || vec2(objectB.body.GetPosition());
+    anchor ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchor);
     const localAnchorB = objectB.worldToLocal(anchor);
     const localAxisA = objectB.worldToLocalVector(worldAxis);
@@ -464,7 +537,7 @@ function box2dCreateWheelJoint(objectA, objectB, anchor, worldAxis=vec2(0,1), co
 
 function box2dCreateWeldJoint(objectA, objectB, anchor, collide=false)
 {
-    anchor = anchor || vec2(objectB.body.GetPosition());
+    anchor ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchor);
     const localAnchorB = objectB.worldToLocal(anchor);
     const jointDef = new box2d.b2WeldJointDef();
@@ -479,7 +552,7 @@ function box2dCreateWeldJoint(objectA, objectB, anchor, collide=false)
 
 function box2dCreateFrictionJoint(objectA, objectB, anchor, collide=false)
 {
-    anchor = anchor || vec2(objectB.body.GetPosition());
+    anchor ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchor);
     const localAnchorB = objectB.worldToLocal(anchor);
     const jointDef = new box2d.b2FrictionJointDef();
@@ -493,8 +566,8 @@ function box2dCreateFrictionJoint(objectA, objectB, anchor, collide=false)
 
 function box2dCreateRopeJoint(objectA, objectB, anchorA, anchorB, extraLength=0, collide=false)
 {
-    anchorA = anchorA || vec2(objectA.body.GetPosition());
-    anchorB = anchorB || vec2(objectB.body.GetPosition());
+    anchorA ||= vec2(objectA.body.GetPosition());
+    anchorB ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchorA);
     const localAnchorB = objectB.worldToLocal(anchorB);
     const jointDef = new box2d.b2RopeJointDef();
@@ -509,8 +582,8 @@ function box2dCreateRopeJoint(objectA, objectB, anchorA, anchorB, extraLength=0,
 
 function box2dCreatePulleyJoint(objectA, objectB, groundAnchorA, groundAnchorB, anchorA, anchorB, ratio=1, collide=false)
 {
-    anchorA = anchorA || vec2(objectA.body.GetPosition());
-    anchorB = anchorB || vec2(objectB.body.GetPosition());
+    anchorA ||= vec2(objectA.body.GetPosition());
+    anchorB ||= vec2(objectB.body.GetPosition());
     const localAnchorA = objectA.worldToLocal(anchorA);
     const localAnchorB = objectB.worldToLocal(anchorB);
     const jointDef = new box2d.b2PulleyJointDef();
@@ -641,7 +714,7 @@ function box2dCastObject(object)
 function box2dWarmup(frames=100)
 {
     // run the sim for a few frames to let objects settle
-    for(let i=frames; i--;)
+    for (let i=frames; i--;)
         box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
 }
 
@@ -802,7 +875,8 @@ function box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameR
         engineAddPlugin(box2dUpdate, box2dRender);
         function box2dUpdate()
         {
-            box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
+            if (!paused)
+                box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
         }
         function box2dRender()
         {

package/plugins/postProcess.js

@@ -49,11 +49,6 @@ function initPostProcess(shaderCode, includeOverlay=false)
     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()
@@ -72,8 +67,12 @@ function initPostProcess(shaderCode, includeOverlay=false)
             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);
+        if (glPostIncludeOverlay)
+        {
+            // copy overlay canvas so it will be included in post processing
+            mainContext.drawImage(overlayCanvas, 0, 0);
+            overlayCanvas.width |= 0;
+        }
 
         // setup shader program to draw one triangle
         glContext.useProgram(glPostShader);

package/plugins/uiSystem.js

@@ -0,0 +1,243 @@
+/**
+ * LittleJS User Interface Plugin
+ * - Nested Menus
+ * - Text
+ * - Buttons
+ * - Checkboxes
+ * - Images
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+// ui defaults
+let uiDefaultColor       = WHITE;
+let uiDefaultLineColor   = BLACK;
+let uiDefaultTextColor   = BLACK;
+let uiDefaultButtonColor = hsl(0,0,.5);
+let uiDefaultHoverColor  = hsl(0,0,.7);
+let uiDefaultLineWidth   = 4;
+let uiDefaultFont        = 'arial';
+
+// ui system
+let uiObjects = [];
+let uiContext;
+
+function initUISystem(context=overlayContext)
+{
+    uiContext = context;
+    engineAddPlugin(uiUpdate, uiRender);
+
+    // setup recursive update and render
+    function uiUpdate()
+    {
+        function updateObject(o)
+        {
+            if (!o.visible)
+                return;
+            if (o.parent)
+                o.pos = o.localPos.add(o.parent.pos);
+            o.update();
+            for(const c of o.children)
+                updateObject(c)
+        }
+        uiObjects.forEach(o=> o.parent || updateObject(o));
+    }
+    function uiRender()
+    {
+        function renderObject(o)
+        {
+            if (!o.visible)
+                return;
+            o.render();
+            for(const c of o.children)
+                renderObject(c)
+        }
+        uiObjects.forEach(o=> o.parent || renderObject(o));
+    }
+}
+
+function drawUIRect(pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor)
+{
+    uiContext.fillStyle = color.toString();
+    uiContext.beginPath();
+    uiContext.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
+    uiContext.fill();
+    if (lineWidth)
+    {
+        uiContext.strokeStyle = lineColor.toString();
+        uiContext.lineWidth = lineWidth;
+        uiContext.stroke();
+    }
+}
+
+function drawUILine(posA, posB, thickness=uiDefaultLineWidth, color=uiDefaultLineColor)
+{
+    uiContext.strokeStyle = color.toString();
+    uiContext.lineWidth = thickness;
+    uiContext.beginPath();
+    uiContext.lineTo(posA.x, posA.y);
+    uiContext.lineTo(posB.x, posB.y);
+    uiContext.stroke();
+}
+
+function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=false, additiveColor=BLACK)
+{
+    drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, false, true, uiContext);
+}
+
+function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor, align='center', font=uiDefaultFont)
+{
+    drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, uiContext, size.x);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIObject
+{
+    constructor(localPos, size=vec2())
+    {
+        this.localPos = localPos.copy();
+        this.pos = localPos.copy();
+        this.size = size.copy();
+        this.color      = uiDefaultColor;
+        this.lineColor  = uiDefaultLineColor;
+        this.textColor  = uiDefaultTextColor;
+        this.hoverColor = uiDefaultHoverColor;
+        this.lineWidth  = uiDefaultLineWidth;
+        this.font       = uiDefaultFont;
+        this.visible = true;
+        this.children = [];
+        this.parent = null;
+        uiObjects.push(this);
+    }
+
+    addChild(child)
+    {
+        ASSERT(!child.parent && !this.children.includes(child));
+        this.children.push(child);
+        child.parent = this;
+    }
+
+    removeChild(child)
+    {
+        ASSERT(child.parent == this && this.children.includes(child));
+        this.children.splice(this.children.indexOf(child), 1);
+        child.parent = 0;
+    }
+
+    update()
+    {
+        // track mouse input
+        const mouseWasOver = this.mouseIsOver;
+        this.mouseIsOver = isOverlapping(this.pos, this.size, mousePosScreen);
+        if (this.mouseIsOver && !mouseWasOver)
+            this.onEnter();
+        if (!this.mouseIsOver && mouseWasOver)
+            this.onLeave();
+        if (mouseWasPressed(0) && this.mouseIsOver)
+        {
+            this.mouseIsHeld = true;
+            this.onPress();
+        }
+        else if (this.mouseIsHeld && !mouseIsDown(0))
+        {
+            this.mouseIsHeld = false;
+            if (this.mouseIsOver)
+                this.onClick();
+        }
+    }
+    render()
+    {
+        if (this.size.x && this.size.y)
+            drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+    }
+
+    // callback functions
+    onEnter() {}
+    onLeave() {}
+    onPress() {}
+    onClick() {}
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIText extends UIObject
+{
+    constructor(pos, size, text, align='center', font=fontDefault)
+    {
+        super(pos, size);
+
+        this.text = text;
+        this.align = align;
+        this.font = font;
+        this.lineWidth = 0;
+    }
+    render()
+    {
+        drawUIText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UITile extends UIObject
+{
+    constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false, additiveColor=BLACK)
+    {
+        super(pos, size);
+
+        this.tileInfo = tileInfo;
+        this.color = color;
+        this.angle = angle;
+        this.mirror = mirror;
+        this.additiveColor = additiveColor;
+    }
+    render()
+    {
+        drawUITile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIButton extends UIObject
+{
+    constructor(pos, size, text)
+    {
+        super(pos, size);
+        this.text = text;
+        this.color = uiDefaultButtonColor;
+    }
+    render()
+    {
+        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
+        const color = this.mouseIsOver? this.hoverColor : this.color;
+        drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
+        drawTextScreen(this.text, this.pos, this.size.y*.8, 
+            this.textColor, undefined, undefined, this.align, this.font, uiContext);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UICheckbox extends UIObject
+{
+    constructor(pos, size, checked=false)
+    {
+        super(pos, size);
+        this.checked = checked;
+    }
+    onClick() { this.checked = !this.checked; }
+    render()
+    {
+        drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+        if (this.checked)
+        {
+            // draw an X if checked
+            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
+            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
+        }
+    }
+}