littlejsengine 1.14.19 → 1.14.28

package/plugins/box2d.js

@@ -1,9 +1,9 @@
 /**
  * LittleJS Box2D Physics Plugin
  * - Box2dObject extends EngineObject with Box2D physics
- * - Call box2dInit() before engineInit() to enable
+ * - Call box2dInit() to enable
  * - You will also need to include box2d.wasm.js
- * - Uses a super fast web assembly port of Box2D
+ * - Uses a super fast web assembly port of Box2D v2.3.1
  * - More info: https://github.com/kripken/box2d.js
  * - Functions to create polygon, circle, and edge shapes
  * - Contact begin and end callbacks
@@ -35,9 +35,9 @@ function box2dSetDebug(enable) { box2dDebug = enable; }
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Object - extend with your own custom physics objects
- * - A LittleJS object with Box2D physics
- * - Each object has a Box2D body which can have multiple fixtures and joints
+ * - A LittleJS object with Box2D physics, dynamic by default
  * - Provides interface for Box2D body and fixture functions
+ * - Each object can have multiple fixtures and joints
  * @extends EngineObject
  * @memberof Box2D
  */
@@ -51,7 +51,7 @@ class Box2dObject extends EngineObject
      *  @param {Color}    [color]
      *  @param {number}   [bodyType]
      *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
+    constructor(pos=vec2(), size=vec2(), tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
     {
         super(pos, size, tileInfo, angle, color, renderOrder);
 
@@ -63,24 +63,27 @@ class Box2dObject extends EngineObject
         this.body = box2d.world.CreateBody(bodyDef);
         this.body.object = this;
         this.lineColor = BLACK;
+        box2d.objects.push(this);
+        
+        // edge lists and loops for drawing
+        this.edgeLists = [];
+        this.edgeLoops = [];
     }
 
     /** Destroy this object and its physics body */
     destroy()
     {
+        if (this.destroyed)
+            return;
+
         // destroy physics body, fixtures, and joints
-        this.body && box2d.world.DestroyBody(this.body);
-        this.body = 0;
+        ASSERT(this.body, 'Box2dObject has no body to destroy');
+        box2d.world.DestroyBody(this.body);
         super.destroy();
     }
 
-    /** Copy box2d update sim data */
-    update()
-    {
-        // use box2d physics update instead of normal engine update
-        this.pos = box2d.vec2From(this.body.GetPosition());
-        this.angle = -this.body.GetAngle();
-    }
+    /** Box2d objects updated with Box2d world step */
+    updatePhysics() {}
 
     /** Render the object, uses box2d drawing if no tile info exists */
     render()
@@ -106,10 +109,23 @@ class Box2dObject extends EngineObject
      *  @param {Color}  [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, lineColor, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
-        this.getFixtureList().forEach(fixture=>
-            box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context));
+        // draw non-edge fixtures
+        this.getFixtureList().forEach((fixture)=>
+        {
+            const shape = box2d.castObjectType(fixture.GetShape());
+            if (shape.GetType() !== box2d.instance.b2Shape.e_edge)
+            {
+                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context);
+            }
+        });
+
+        // draw edges using a single draw line for better connections
+        this.edgeLists.forEach(points=>
+            drawLineList(points, lineWidth, lineColor, false, this.pos, this.angle));
+        this.edgeLoops.forEach(points=>
+            drawLineList(points, lineWidth, lineColor, true, this.pos, this.angle));
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -134,6 +150,10 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addShape(shape, density=1, friction=.2, restitution=0, isSensor=false)
     {
+        ASSERT(isNumber(density), 'density must be a number');
+        ASSERT(isNumber(friction), 'friction must be a number');
+        ASSERT(isNumber(restitution), 'restitution must be a number');
+
         const fd = new box2d.instance.b2FixtureDef();
         fd.set_shape(shape);
         fd.set_density(density);
@@ -153,6 +173,11 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addBox(size=vec2(1), offset=vec2(), angle=0, density, friction, restitution, isSensor)
     {
+        ASSERT(isVector2(size), 'size must be a Vector2');
+        ASSERT(size.x > 0 && size.y > 0, 'size must be positive');
+        ASSERT(isVector2(offset), 'offset must be a Vector2');
+        ASSERT(isNumber(angle), 'angle must be a number');
+
         const shape = new box2d.instance.b2PolygonShape();
         shape.SetAsBox(size.x/2, size.y/2, box2d.vec2dTo(offset), angle);
         return this.addShape(shape, density, friction, restitution, isSensor);
@@ -166,6 +191,8 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addPoly(points, density, friction, restitution, isSensor)
     {
+        ASSERT(isArray(points), 'points must be an array');
+
         function box2dCreatePolygonShape(points)
         {
             function box2dCreatePointList(points)
@@ -201,6 +228,9 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addRegularPoly(diameter=1, sides=8, density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+        ASSERT(isNumber(sides) && sides>2, 'sides must be a positive number greater than 2');
+
         const points = [];
         const radius = diameter/2;
         for (let i=sides; i--;)
@@ -216,6 +246,8 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addRandomPoly(diameter=1, density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+
         const sides = randInt(3, 9);
         const points = [];
         const radius = diameter/2;
@@ -233,6 +265,9 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addCircle(diameter=1, offset=vec2(), density, friction, restitution, isSensor)
     {
+        ASSERT(isNumber(diameter) && diameter>0, 'diameter must be a positive number');
+        ASSERT(isVector2(offset), 'offset must be a Vector2');
+        
         const shape = new box2d.instance.b2CircleShape();
         shape.set_m_p(box2d.vec2dTo(offset));
         shape.set_m_radius(diameter/2);
@@ -248,53 +283,63 @@ class Box2dObject extends EngineObject
      *  @param {boolean} [isSensor] */
     addEdge(point1, point2, density, friction, restitution, isSensor)
     {
+        ASSERT(isVector2(point1), 'point1 must be a Vector2');
+        ASSERT(isVector2(point2), 'point2 must be a Vector2');
+
         const shape = new box2d.instance.b2EdgeShape();
         shape.Set(box2d.vec2dTo(point1), box2d.vec2dTo(point2));
         return this.addShape(shape, density, friction, restitution, isSensor);
     }
 
-    /** Add an edge loop to the body, an edge loop connects the end points
+    /** Add an edge list to the body
      *  @param {Array<Vector2>} points
      *  @param {number}  [density]
      *  @param {number}  [friction]
      *  @param {number}  [restitution]
      *  @param {boolean} [isSensor] */
-    addEdgeLoop(points, density, friction, restitution, isSensor)
+    addEdgeList(points, density, friction, restitution, isSensor)
     {
-        const fixtures = [];
-        const getPoint = i=> points[mod(i,points.length)];
-        for (let i=0; i<points.length; ++i)
+        ASSERT(isArray(points), 'points must be an array');
+        const fixtures = [], edgePoints = [];
+        for (let i=0; i<points.length-1; ++i)
         {
             const shape = new box2d.instance.b2EdgeShape();
-            shape.set_m_vertex0(box2d.vec2dTo(getPoint(i-1)));
-            shape.set_m_vertex1(box2d.vec2dTo(getPoint(i+0)));
-            shape.set_m_vertex2(box2d.vec2dTo(getPoint(i+1)));
-            shape.set_m_vertex3(box2d.vec2dTo(getPoint(i+2)));
+            points[i-1] && shape.set_m_vertex0(box2d.vec2dTo(points[i-1]));
+            points[i+0] && shape.set_m_vertex1(box2d.vec2dTo(points[i+0]));
+            points[i+1] && shape.set_m_vertex2(box2d.vec2dTo(points[i+1]));
+            points[i+2] && shape.set_m_vertex3(box2d.vec2dTo(points[i+2]));
             const f = this.addShape(shape, density, friction, restitution, isSensor);
             fixtures.push(f);
+            edgePoints.push(points[i].copy());
         }
+        edgePoints.push(points[points.length-1].copy());
+        this.edgeLists.push(edgePoints);
         return fixtures;
     }
 
-    /** Add an edge list to the body
+    /** Add an edge loop to the body, an edge loop connects the end points
      *  @param {Array<Vector2>} points
      *  @param {number}  [density]
      *  @param {number}  [friction]
      *  @param {number}  [restitution]
      *  @param {boolean} [isSensor] */
-    addEdgeList(points, density, friction, restitution, isSensor)
+    addEdgeLoop(points, density, friction, restitution, isSensor)
     {
-        const fixtures = [];
-        for (let i=0; i<points.length-1; ++i)
+        ASSERT(isArray(points), 'points must be an array');
+        const fixtures = [], edgePoints = [];
+        const getPoint = i=> points[mod(i,points.length)];
+        for (let i=0; i<points.length; ++i)
         {
             const shape = new box2d.instance.b2EdgeShape();
-            points[i-1] && shape.set_m_vertex0(box2d.vec2dTo(points[i-1]));
-            points[i+0] && shape.set_m_vertex1(box2d.vec2dTo(points[i+0]));
-            points[i+1] && shape.set_m_vertex2(box2d.vec2dTo(points[i+1]));
-            points[i+2] && shape.set_m_vertex3(box2d.vec2dTo(points[i+2]));
+            shape.set_m_vertex0(box2d.vec2dTo(getPoint(i-1)));
+            shape.set_m_vertex1(box2d.vec2dTo(getPoint(i+0)));
+            shape.set_m_vertex2(box2d.vec2dTo(getPoint(i+1)));
+            shape.set_m_vertex3(box2d.vec2dTo(getPoint(i+2)));
             const f = this.addShape(shape, density, friction, restitution, isSensor);
             fixtures.push(f);
+            i < points.length && edgePoints.push(points[i].copy());
         }
+        this.edgeLoops.push(edgePoints);
         return fixtures;
     }
 
@@ -329,6 +374,10 @@ class Box2dObject extends EngineObject
      *  @return {number} */
     getBodyType() { return this.body.GetType(); }
     
+    /** Get the speed of this object
+     *  @return {number} */
+    getSpeed() { return this.getLinearVelocity().length(); }
+
     ///////////////////////////////////////////////////////////////////////////////
     // physics set functions
 
@@ -344,33 +393,40 @@ class Box2dObject extends EngineObject
     
     /** Sets the position
      *  @param {Vector2} pos */
-    setPosition(pos) { this.setTransform(pos, this.body.GetAngle()); }
+    setPosition(pos)
+    { this.setTransform(pos, this.body.GetAngle()); }
 
     /** Sets the angle
      *  @param {number} angle */
-    setAngle(angle) { this.setTransform(box2d.vec2From(this.body.GetPosition()), -angle); }
+    setAngle(angle)
+    { this.setTransform(box2d.vec2From(this.body.GetPosition()), -angle); }
 
     /** Sets the linear velocity
      *  @param {Vector2} velocity */
-    setLinearVelocity(velocity) { this.body.SetLinearVelocity(box2d.vec2dTo(velocity)); }
+    setLinearVelocity(velocity)
+    { this.body.SetLinearVelocity(box2d.vec2dTo(velocity)); }
 
     /** Sets the angular velocity
      *  @param {number} angularVelocity */
-    setAngularVelocity(angularVelocity) { this.body.SetAngularVelocity(angularVelocity); }
+    setAngularVelocity(angularVelocity)
+    { this.body.SetAngularVelocity(angularVelocity); }
 
     /** Sets the linear damping
      *  @param {number} damping */
-    setLinearDamping(damping) { this.body.SetLinearDamping(damping); }
+    setLinearDamping(damping)
+    { this.body.SetLinearDamping(damping); }
 
     /** Sets the angular damping
      *  @param {number} damping */
-    setAngularDamping(damping) { this.body.SetAngularDamping(damping); }
+    setAngularDamping(damping)
+    { this.body.SetAngularDamping(damping); }
 
     /** Sets the gravity scale
      *  @param {number} [scale] */
-    setGravityScale(scale=1) { this.body.SetGravityScale(this.gravityScale = scale); }
+    setGravityScale(scale=1)
+    { this.body.SetGravityScale(this.gravityScale = scale); }
 
-    /** Should this body be treated like a bullet for continuous collision detection?
+    /** Should be like a bullet for continuous collision detection?
      *  @param {boolean} [isBullet] */
     setBullet(isBullet=true) { this.body.SetBullet(isBullet); }
 
@@ -384,11 +440,13 @@ class Box2dObject extends EngineObject
 
     /** Set whether the body is allowed to sleep
      *  @param {boolean} [isAllowed] */
-    setSleepingAllowed(isAllowed=true) { this.body.SetSleepingAllowed(isAllowed); }
+    setSleepingAllowed(isAllowed=true)
+    { this.body.SetSleepingAllowed(isAllowed); }
     
     /** Set whether the body can rotate
      *  @param {boolean} [isFixed] */
-    setFixedRotation(isFixed=true) { this.body.SetFixedRotation(isFixed); }
+    setFixedRotation(isFixed=true)
+    { this.body.SetFixedRotation(isFixed); }
 
     /** Set the center of mass of the body
      *  @param {Vector2} center */
@@ -400,10 +458,11 @@ class Box2dObject extends EngineObject
     
     /** Set the moment of inertia of the body
      *  @param {number} momentOfInertia */
-    setMomentOfInertia(momentOfInertia) { this.setMassData(undefined, undefined, momentOfInertia) }
+    setMomentOfInertia(momentOfInertia)
+    { this.setMassData(undefined, undefined, momentOfInertia) }
     
     /** Reset the mass, center of mass, and moment */
-    resetMassData()  { this.body.ResetMassData(); }
+    resetMassData() { this.body.ResetMassData(); }
     
     /** Set the mass data of the body
      *  @param {Vector2} [localCenter]
@@ -1045,6 +1104,50 @@ class Box2dPrismaticJoint extends Box2dJoint
     getMotorForce(time) { return this.box2dJoint.GetMotorForce(1/time); }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Static Object - Box2d with a static physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dStaticObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeStatic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * Box2D Kiematic Object - Box2d with a kinematic physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dKiematicObject extends Box2dObject 
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeKinematic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Box2D Wheel Joint
@@ -1407,6 +1510,7 @@ class Box2dPlugin
         box2d = this;
         this.instance = instance;
         this.world = new box2d.instance.b2World();
+        this.objects = [];
 
         /** @property {number} - Velocity iterations per update*/
         this.velocityIterations = 8;
@@ -1649,9 +1753,10 @@ class Box2dPlugin
 
     /** converts a box2d vec2 pointer to a Vector2
      *  @param {Object} v */
-    vec2FromPointer(v)
+    vec2FromPointer(vp)
     {
-        return box2d.vec2From(box2d.instance.wrapPointer(v, box2d.instance.b2Vec2));
+        const v = box2d.instance.wrapPointer(vp, box2d.instance.b2Vec2);
+        return box2d.vec2From(v);
     }
 
     /** converts a Vector2 to a box2 vec2
@@ -1725,8 +1830,23 @@ async function box2dInit()
     // add the box2d plugin to the engine
     function box2dUpdate()
     {
-        if (!paused)
-            box2d.step();
+        if (paused)
+            return;
+
+        box2d.step();
+
+        // remove destroyed objects
+        box2d.objects = box2d.objects.filter(o=>!o.destroyed);
+        
+        // copy box2d physics results to engine objects
+        for (const o of box2d.objects)
+        {
+            if (o.body)
+            {
+                o.pos = box2d.vec2From(o.body.GetPosition());
+                o.angle = -o.body.GetAngle();
+            }
+        }
     }
     function box2dRender()
     {

package/plugins/pluginExport.js

@@ -33,6 +33,8 @@ export
     box2dInit,
     Box2dPlugin,
     Box2dObject,
+    Box2dStaticObject,
+    Box2dKiematicObject,
     Box2dRaycastResult,
     Box2dJoint,
     Box2dTargetJoint,

package/plugins/uiSystem.js

@@ -145,12 +145,12 @@ class UISystemPlugin
     /** Draw a rectangle to the UI context
     *  @param {Vector2} pos
     *  @param {Vector2} size
-    *  @param {Color}   [color=uiSystem.defaultColor]
-    *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
-    *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius]
-    *  @param {Color}   [gradientColor=uiSystem.defaultGradientColor] */
-    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius, gradientColor=uiSystem.defaultGradientColor)
+    *  @param {Color}   [color]
+    *  @param {number}  [lineWidth]
+    *  @param {Color}   [lineColor]
+    *  @param {number}  [cornerRadius]
+    *  @param {Color}   [gradientColor] */
+    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor)
     {
         ASSERT(isVector2(pos), 'pos must be a vec2');
         ASSERT(isVector2(size), 'size must be a vec2');
@@ -229,10 +229,14 @@ class UISystemPlugin
     *  @param {string}  [align]
     *  @param {string}  [font=uiSystem.defaultFont]
     *  @param {string}  [fontStyle]
-    *  @param {boolean} [applyMaxWidth=true] */
-    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true)
+    *  @param {boolean} [applyMaxWidth=true]
+    *  @param {Vector2} [textShadow]
+     */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true, textShadow=undefined)
     {
-        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
+        if (textShadow)
+            drawTextScreen(text, pos.add(textShadow), size.y, BLACK, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, uiSystem.uiContext);
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, uiSystem.uiContext);
     }
 
     /**
@@ -259,6 +263,25 @@ class UISystemPlugin
         setCallback(onDragLeave, 'dragleave');
         setCallback(onDragOver,  'dragover');
     }
+
+    /** Convert a screen space position to native UI position
+     *  @param {Vector2} pos
+     *  @return {Vector2}
+     */
+    screenToNative(pos)
+    {
+        if (!uiSystem.nativeHeight)
+            return pos;
+    
+        const s = mainCanvasSize.y / uiSystem.nativeHeight;
+        const sInv = 1/s;
+        const p = pos.copy();
+        p.x += s*mainCanvasSize.x/2;
+        p.x *= sInv;
+        p.y *= sInv;
+        p.x -= sInv*mainCanvasSize.x/2;
+        return p;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -335,6 +358,9 @@ class UIObject
         /** @property {boolean} - True if this can be a hover object */
         this.canBeHover = true;
         uiSystem.uiObjects.push(this);
+        
+        /** @property {Vector2} - How much to offset the text shadow or undefined */
+        this.textShadow = undefined;
     }
 
     /** Add a child UIObject to this object
@@ -362,24 +388,20 @@ class UIObject
      */
     isMouseOverlapping()
     {
+        if (!mouseInWindow) return false;
+
         const size = !isTouchDevice ? this.size :
                 this.size.add(vec2(this.extraTouchSize || 0));
-        if (!uiSystem.nativeHeight)
-            return isOverlapping(this.pos, size, mousePosScreen);
-
-        const s = mainCanvasSize.y / uiSystem.nativeHeight;
-        const sInv = 1/s;
-        let pos = mousePosScreen.copy();
-        pos.x += s*mainCanvasSize.x/2;
-        pos.x *= sInv;
-        pos.y *= sInv;
-        pos.x -= sInv*mainCanvasSize.x/2;
+        const pos = uiSystem.screenToNative(mousePosScreen);
         return isOverlapping(this.pos, size, pos);
     }
 
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
+        // call the custom update callback
+        this.onUpdate();
+
         const wasHover = uiSystem.lastHoverObject === this;
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
@@ -436,7 +458,7 @@ class UIObject
 
         const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
         const color = this.disabled ? this.disabledColor : this.interactive ? this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius, this.gradientColor);
     }
 
     /** Special update when object is not visible */
@@ -463,6 +485,9 @@ class UIObject
     /** @return {boolean} - Is the mouse held onto this element */
     isActiveObject() { return uiSystem.activeObject === this; }
 
+    /** Called each frame when object updates */
+    onUpdate() {}
+
     /** Called when the mouse enters the object */
     onEnter() {}
 
@@ -517,8 +542,9 @@ class UIText extends UIObject
     }
     render()
     {
+        // only render the text
         const textSize = this.getTextSize();
-        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -594,7 +620,7 @@ class UIButton extends UIObject
         // draw the text scaled to fit
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -648,7 +674,7 @@ class UICheckbox extends UIObject
         const textSize = this.getTextSize();
         const pos = this.pos.add(vec2(this.size.x,0));
         uiSystem.drawText(this.text, pos, textSize, 
-            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false);
+            this.textColor, 0, undefined, 'left', this.font, this.fontStyle, false, this.textShadow);
     }
 }
 
@@ -703,9 +729,11 @@ class UIScrollbar extends UIObject
             const p1 = centerPos - handleWidth/2;
             const p2 = centerPos + handleWidth/2;
             const oldValue = this.value;
+
+            const p = uiSystem.screenToNative(mousePosScreen);
             this.value = isHorizontal ? 
-                percent(mousePosScreen.x, p1, p2) :
-                percent(mousePosScreen.y, p2, p1);
+                percent(p.x, p1, p2) :
+                percent(p.y, p2, p1);
             this.value === oldValue || this.onChange();
         }
     }
@@ -727,11 +755,11 @@ class UIScrollbar extends UIObject
             vec2(lerp(p1, p2, this.value), this.pos.y) :
             vec2(this.pos.x, lerp(p2, p1, this.value))
         const handleColor = this.disabled ? this.disabledColor : this.handleColor;
-        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
+        uiSystem.drawRect(handlePos, vec2(handleSize), handleColor, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor);
 
         // draw the text scaled to fit on the scrollbar
         const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
-            this.textColor, 0, undefined, this.align, this.font, this.fontStyle);
+            this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }