littlejsengine 1.15.2 → 1.15.8

package/plugins/uiSystem.js

@@ -1,11 +1,14 @@
 /**
  * LittleJS User Interface Plugin
  * - call new UISystemPlugin() to setup the UI system
+ * - Gamepad and keyboard navigation support
  * - Nested Menus
  * - Text
  * - Buttons
  * - Checkboxes
  * - Images
+ * - Scrollbars
+ * - Video
  * @namespace UISystem
  */
 
@@ -18,6 +21,20 @@
  *  @memberof UISystem */
 let uiSystem;
 
+/** Enable UI system debug drawing
+ *  0=off, 1=normal, 2=show invisible
+ *  @type {number}
+ *  @default
+ *  @memberof UISystem */
+let uiDebug = 0;
+
+/** Enable UI system debug drawing
+ *  0=off, 1=normal, 2=show invisible
+ *  @param {number|boolean} enable
+ *  @memberof UISystem */
+function uiSetDebug(debugMode)
+{ uiDebug = typeof debugMode === 'boolean' ? (debugMode ? 1 : 0) : debugMode; }
+
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * UI System Global Object
@@ -36,6 +53,7 @@ class UISystemPlugin
         ASSERT(!uiSystem, 'UI system already initialized');
         uiSystem = this;
 
+        // default settings
         /** @property {Color} - Default fill color for UI elements */
         this.defaultColor = WHITE;
         /** @property {Color} - Default outline color for UI elements */
@@ -55,7 +73,7 @@ class UISystemPlugin
         /** @property {number} - Default rounded rect corner radius for UI elements */
         this.defaultCornerRadius = 0;
         /** @property {number} - Default scale to use for fitting text to object */
-        this.defaultTextScale = .8;
+        this.defaultTextFitScale = .8;
         /** @property {string} - Default font for UI elements */
         this.defaultFont = fontDefault;
         /** @property {Sound} - Default sound when interactive UI element is pressed */
@@ -64,6 +82,28 @@ class UISystemPlugin
         this.defaultSoundRelease = undefined;
         /** @property {Sound} - Default sound when interactive UI element is clicked */
         this.defaultSoundClick = undefined;
+        /** @property {Color} - Color for shadow */
+        this.defaultShadowColor = CLEAR_BLACK;
+        /** @property {number} - Size of shadow blur */
+        this.defaultShadowBlur = 5;
+        /** @property {Vector2} - Offset of shadow blur */
+        this.defaultShadowOffset = vec2(5);
+        /** @property {number} - If set ui coords will be renormalized to this canvas height */
+        this.nativeHeight = 0;
+
+        // navigation properties
+        /** @property {UIObject} - Object currently selected by navigation (gamepad or keyboard) */
+        this.navigationObject = undefined;
+        /** @property {Timer} - Cooldown timer for navigation inputs */
+        this.navigationTimer = new Timer(undefined, true);
+        /** @property {number} - Time between navigation inputs in seconds */
+        this.navigationDelay = .2;
+        /** @property {boolean} - should the navigation be horizontal, vertical, or both? */
+        this.navigationDirection = 1;
+        /** @property {boolean} - True if user last used navigation instead of mouse */
+        this.navigationMode = false;
+
+        // system state
         /** @property {Array<UIObject>} - List of all UI elements */
         this.uiObjects = [];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -74,50 +114,118 @@ class UISystemPlugin
         this.hoverObject = undefined;
         /** @property {UIObject} - Hover object at start of update */
         this.lastHoverObject = undefined;
-        /** @property {number} - If set ui coords will be renormalized to this canvas height */
-        this.nativeHeight = 0;
+        /** @property {UIObject} - Current confirm menu being shown */
+        this.confirmDialog = undefined;
 
         engineAddPlugin(uiUpdate, uiRender);
 
+        // set object position in parent space
+        function updateTransforms(o)
+        {
+            if (!o.parent) return;
+            o.pos.x = o.localPos.x + o.parent.pos.x;
+            o.pos.y = o.localPos.y + o.parent.pos.y;
+        }
+
         // setup recursive update and render
         // update in reverse order to detect mouse enter/leave
         function uiUpdate()
         {
-            function updateInvisibleObject(o)
+            if (uiSystem.activeObject && !uiSystem.activeObject.visible)
+                uiSystem.activeObject = undefined;
+
+            // reset hover object at start of update
+            uiSystem.lastHoverObject = uiSystem.hoverObject;
+            uiSystem.hoverObject = undefined;
+
+            if (mouseWasPressed(0))
             {
-                // update invisible objects
-                for (const c of o.children)
-                    updateInvisibleObject(c);
-                o.updateInvisible();
+                uiSystem.navigationMode = false;
+                uiSystem.navigationObject = undefined;
             }
-            function updateObject(o)
+
+            // navigation with gamepad/keyboard
+            const navigableObjects = uiSystem.getNavigableObjects();
+            if (!navigableObjects.length)
+                uiSystem.navigationObject = undefined;
+            else
             {
-                if (o.visible)
+                // unselect object if it is no longer navigable
+                if (!navigableObjects.includes(uiSystem.navigationObject))
+                    uiSystem.navigationObject = undefined;
+
+                if (!isTouchDevice)
+                if (uiSystem.navigationMode && !uiSystem.navigationObject)
                 {
-                    // set position in parent space
-                    if (o.parent)
-                        o.pos = o.localPos.add(o.parent.pos);
-                    // update in reverse order to detect mouse enter/leave
-                    for (let i=o.children.length; i--;)
-                        updateObject(o.children[i]);
-                    o.update();
+                    // select first auto focus object
+                    uiSystem.navigationObject = navigableObjects.find(o=>o.navigationAutoSelect);
+                }
+                
+                // navigate with dpad or left stick
+                if (!uiSystem.navigationTimer.active())
+                {
+                    // navigate through list with gamepad or keyboard
+                    const direction = sign(uiSystem.getNavigationDirection());
+                    if (direction)
+                    {
+                        let newNavigationObject;
+                        if (!uiSystem.navigationObject)
+                        {
+                            // use auto select object
+                            newNavigationObject = navigableObjects.find(o=>o.navigationAutoSelect);
+
+                            if (!newNavigationObject)
+                            {
+                                // try first or last object
+                                const newIndex = direction > 0 ? 0 : navigableObjects.length-1;
+                                newNavigationObject = navigableObjects[newIndex];
+                            }
+                        }
+                        else
+                        {
+                            const currentIndex = navigableObjects.indexOf(uiSystem.navigationObject);
+                            const newIndex = mod(currentIndex + direction, navigableObjects.length);
+                            newNavigationObject = navigableObjects[newIndex];
+                        }
+                        
+                        if (uiSystem.navigationObject !== newNavigationObject)
+                        {
+                            uiSystem.navigationMode = true;
+                            uiSystem.hoverObject = undefined;
+                            uiSystem.navigationObject = newNavigationObject;
+                            uiSystem.navigationTimer.set(uiSystem.navigationDelay);
+                            newNavigationObject.soundPress &&
+                                newNavigationObject.soundPress.play();
+                        }
+                    }
                 }
-                else
-                    updateInvisibleObject(o);
+
+                // activate the navigation object when pressed
+                if (uiSystem.navigationObject)
+                if (uiSystem.getNavigationWasPressed())
+                    uiSystem.navigationObject.navigatePressed();
             }
-            // reset hover object at start of update
-            uiSystem.lastHoverObject = uiSystem.hoverObject;
-            uiSystem.hoverObject = undefined;
 
             // update in reverse order so topmost objects get priority
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
-                o.parent || updateObject(o)
+                o.parent || updateObject(o);
             }
 
             // remove destroyed objects
             uiSystem.uiObjects = uiSystem.uiObjects.filter(o=>!o.destroyed);
+
+            function updateObject(o)
+            {
+                if (!o.visible) return;
+
+                // update in reverse order to detect mouse enter/leave
+                updateTransforms(o);
+                for (let i=o.children.length; i--;)
+                    updateObject(o.children[i]);
+                o.update();
+            }
         }
         function uiRender()
         {
@@ -134,15 +242,29 @@ class UISystemPlugin
 
             function renderObject(o)
             {
-                if (!o.visible)
-                    return;
-                if (o.parent)
-                    o.pos = o.localPos.add(o.parent.pos);
+                if (!o.visible) return;
+
+                // render object and children
+                updateTransforms(o);
                 o.render();
                 for (const c of o.children)
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
+
+            if (uiDebug > 0)
+            {
+                // debug render all objects
+                function renderDebug(o, visible=true)
+                {
+                    visible &&= !!o.visible;
+                    updateTransforms(o);
+                    o.renderDebug(visible);
+                    for (const c of o.children)
+                        renderDebug(c, visible);
+                }
+                uiSystem.uiObjects.forEach(o=> o.parent || renderDebug(o));
+            }
             context.restore();
         }
     }
@@ -154,8 +276,11 @@ class UISystemPlugin
     *  @param {number}  [lineWidth]
     *  @param {Color}   [lineColor]
     *  @param {number}  [cornerRadius]
-    *  @param {Color}   [gradientColor] */
-    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor)
+    *  @param {Color}   [gradientColor]
+    *  @param {Color}   [shadowColor]
+    *  @param {number}  [shadowBlur]
+    *  @param {Color}   [shadowOffset] */
+    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
         ASSERT(isVector2(pos), 'pos must be a vec2');
         ASSERT(isVector2(size), 'size must be a vec2');
@@ -177,13 +302,23 @@ class UISystemPlugin
         }
         else
             context.fillStyle = color.toString();
+        if (shadowBlur || shadowOffset.x || shadowOffset.y)
+        if (shadowColor.a > 0)
+        {
+            // setup shadow
+            context.shadowColor = shadowColor.toString();
+            context.shadowBlur = shadowBlur;
+            context.shadowOffsetX = shadowOffset.x;
+            context.shadowOffsetY = shadowOffset.y;
+        }
         context.beginPath();
         if (cornerRadius && context['roundRect'])
             context['roundRect'](pos.x-size.x/2, pos.y-size.y/2, size.x, size.y, cornerRadius);
         else
             context.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
         context.fill();
-        if (lineWidth)
+        context.shadowColor = '#0000';
+        if (lineWidth && lineColor.a > 0)
         {
             context.strokeStyle = lineColor.toString();
             context.lineWidth = lineWidth;
@@ -218,10 +353,24 @@ class UISystemPlugin
     *  @param {TileInfo} tileInfo
     *  @param {Color}    [color=uiSystem.defaultColor]
     *  @param {number}   [angle]
-    *  @param {boolean}  [mirror] */
-    drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false)
+    *  @param {boolean}  [mirror]
+    *  @param {Color}    [shadowColor]
+    *  @param {number}   [shadowBlur]
+    *  @param {Color}    [shadowOffset] */
+    drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
-        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, uiSystem.uiContext);
+        const context = uiSystem.uiContext;
+        if (shadowBlur || shadowOffset.x || shadowOffset.y)
+        if (shadowColor.a > 0)
+        {
+            // setup shadow
+            context.shadowColor = shadowColor.toString();
+            context.shadowBlur = shadowBlur;
+            context.shadowOffsetX = shadowOffset.x;
+            context.shadowOffsetY = shadowOffset.y;
+        }
+        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, context);
+        context.shadowColor = '#0000';
     }
 
     /** Draw text to the UI context
@@ -236,12 +385,27 @@ class UISystemPlugin
     *  @param {string}  [fontStyle]
     *  @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)
+    *  @param {Color}   [shadowColor]
+    *  @param {number}  [shadowBlur]
+    *  @param {Color}   [shadowOffset] */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, fontStyle='', applyMaxWidth=true, textShadow=undefined, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
-        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);
+        const context = uiSystem.uiContext;
+        if (shadowColor.a > 0)
+        {
+            if (textShadow)
+                drawTextScreen(text, pos.add(textShadow), size.y, shadowColor, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, context);
+            if (shadowBlur || shadowOffset.x || shadowOffset.y)
+            {
+                // setup shadow
+                context.shadowColor = shadowColor.toString();
+                context.shadowBlur = shadowBlur;
+                context.shadowOffsetX = shadowOffset.x;
+                context.shadowOffsetY = shadowOffset.y;
+            }
+        }
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth ? size.x : undefined, 0, context);
+        context.shadowColor = '#0000';
     }
 
     /**
@@ -255,7 +419,7 @@ class UISystemPlugin
     *  @param {DragAndDropCallback} [onDrop] - when a file is dropped
     *  @param {DragAndDropCallback} [onDragEnter] - when a file is dragged onto the window
     *  @param {DragAndDropCallback} [onDragLeave] - when a file is dragged off the window
-    *  @param {DragAndDropCallback} [onDragOver] - continously when dragging over */
+    *  @param {DragAndDropCallback} [onDragOver] - continuously when dragging over */
     setupDragAndDrop(onDrop, onDragEnter, onDragLeave, onDragOver)
     {
         function setCallback(callback, listenerType)
@@ -271,8 +435,7 @@ class UISystemPlugin
 
     /** Convert a screen space position to native UI position
      *  @param {Vector2} pos
-     *  @return {Vector2}
-     */
+     *  @return {Vector2} */
     screenToNative(pos)
     {
         if (!uiSystem.nativeHeight)
@@ -295,6 +458,157 @@ class UISystemPlugin
         for (const o of this.uiObjects)
             o.parent || o.destroy();
         this.uiObjects = this.uiObjects.filter(o=>!o.destroyed);
+        this.activeObject = undefined;
+        this.hoverObject = undefined;
+        this.lastHoverObject = undefined;
+    }
+
+    /** Get all navigable UI objects sorted by navigationIndex
+     *  @return {Array<UIObject>} */
+    getNavigableObjects()
+    {
+        function getNavigableRecursive(o)
+        {
+            if (!o.visible || o.disabled)
+                return; // skip children if parent is invisible or disabled
+
+            if (o.isInteractive() && o.navigationIndex !== undefined)
+                objects.push(o);
+            for (let i=o.children.length; i--;)
+                getNavigableRecursive(o.children[i]);
+        }
+
+        // get all the valid navigable objects recursively
+        let objects = [];
+        for (let i = uiSystem.uiObjects.length; i--;)
+        {
+            const o = uiSystem.uiObjects[i];
+            if (uiSystem.confirmDialog && o !== uiSystem.confirmDialog)
+                continue;
+            o.parent || getNavigableRecursive(o);
+        }
+
+        // sort by navigationIndex (lower numbers first)
+        objects.sort((a, b)=> a.navigationIndex - b.navigationIndex);
+        return objects;
+    }
+
+    /** Get navigation direction from gamepad or keyboard
+     *  @return {number} */
+    getNavigationDirection()
+    {
+        const vertical = uiSystem.navigationDirection === 1;
+        const both = uiSystem.navigationDirection === 2;
+        if (isUsingGamepad)
+        {
+            const stick = gamepadStick(0, gamepadPrimary);
+            const dpad = gamepadDpad(gamepadPrimary);
+            if (both)
+                return -(stick.y || dpad.y) || (stick.x || dpad.x);
+            return vertical ? -(stick.y || dpad.y) : (stick.x || dpad.x);
+        }
+        const up = 'ArrowUp', down = 'ArrowDown', left = 'ArrowLeft', right = 'ArrowRight';
+        if (both)
+        {
+            return keyIsDown(up) || keyIsDown(left) ? -1 : 
+                keyIsDown(down) || keyIsDown(right) ? 1 : 0;
+        }
+        const back = vertical ? up : left;
+        const forward = vertical ? down : right;
+        return keyIsDown(back) ? -1 : keyIsDown(forward) ? 1 : 0;
+    }
+
+    /** Get other axis navigation direction from gamepad or keyboard
+     *  @return {Vector2} */
+    getNavigationOtherDirection()
+    {
+        if (uiSystem.navigationDirection === 2)
+            return 0; // other direction disabled
+
+        const vertical = uiSystem.navigationDirection === 1;
+        if (isUsingGamepad)
+        {
+            const stick = gamepadStick(0, gamepadPrimary);
+            const dpad = gamepadDpad(gamepadPrimary);
+            return !vertical ? (stick.y || dpad.y) : (stick.x || dpad.x);
+        }
+        const back = !vertical ? 'ArrowUp' : 'ArrowLeft';
+        const forward = !vertical ? 'ArrowDown' : 'ArrowRight';
+        return keyIsDown(back) ? -1 : keyIsDown(forward) ? 1 : 0;
+    }
+
+    /** Get if navigation button was pressed from gamepad or keyboard
+     *  @return {boolean} */
+    getNavigationWasPressed()
+    {
+        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) : 
+            keyWasPressed('Space') || keyWasPressed('Enter');
+    }
+        
+    /** Show a confirmation dialog with Yes/No buttons
+     *  Centers the dialog on the screen with darkened background
+     *  @param {string} [text] - The message to display
+     *  @param {Function} [yesCallback] - Called when Yes is clicked
+     *  @param {Function} [noCallback] - Called when No is clicked
+     *  @param {Vector2} [size] - Size of the confirmation dialog
+     *  @param {string} [exitKey] - Key that can exit the menu
+     *  @return {UIObject} The confirmation menu object
+     */
+    showConfirmDialog(text='Are you sure?', yesCallback, noCallback, size=vec2(500,250), exitKey='Escape')
+    {
+        ASSERT(!uiSystem.confirmDialog);
+
+        const savedNavigationDirection = uiSystem.navigationDirection;
+
+        // allow both axies for navigation
+        uiSystem.navigationDirection = 2;
+
+        // confirm menu
+        const confirmMenu = new UIObject(vec2(), size);
+        uiSystem.confirmDialog = confirmMenu;
+        confirmMenu.onRender = ()=> 
+        {
+            confirmMenu.pos = uiSystem.screenToNative(mainCanvasSize.scale(.5));
+            const backgroundColor = hsl(0,0,0,.7);
+            uiSystem.drawRect(vec2(), vec2(1e9), backgroundColor);
+        }
+        confirmMenu.onUpdate = ()=>
+        {
+            if (keyWasPressed(exitKey))
+                closeMenu();
+        }
+        confirmMenu.isMouseOverlapping = ()=> true; // always hover
+        
+        // title text
+        const gap = 50;
+        const textTitle = new UIText(vec2(0,-50), vec2(size.x-gap,70), text);
+        confirmMenu.addChild(textTitle);
+        
+        // yes button
+        const buttonYes = new UIButton(vec2(-80,50), vec2(120,70), 'Yes');
+        buttonYes.textHeight = 40;
+        buttonYes.navigationIndex = 1;
+        buttonYes.hoverColor = hsl(0,1,.5);
+        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); }; 
+        confirmMenu.addChild(buttonYes);
+        
+        // no button
+        const buttonNo = new UIButton(vec2(80,50), vec2(120,70), 'No');
+        buttonNo.textHeight = 40;
+        buttonNo.navigationIndex = 2;
+        buttonNo.navigationAutoSelect = true;
+        buttonNo.onClick = ()=> { closeMenu(); noCallback && noCallback(); };
+        confirmMenu.addChild(buttonNo);
+
+        // close menu and return to normal navigation
+        function closeMenu()
+        {
+            ASSERT(uiSystem.confirmDialog === confirmMenu);
+            confirmMenu.destroy();
+            uiSystem.confirmDialog = undefined;
+            uiSystem.navigationDirection = savedNavigationDirection;
+            inputClear();
+        }
     }
 }
 
@@ -350,7 +664,13 @@ class UIObject
         /** @property {number} - Override for text height */
         this.textHeight = undefined;
         /** @property {number} - Scale text to fit in the object */
-        this.textScale = uiSystem.defaultTextScale;
+        this.textFitScale = uiSystem.defaultTextFitScale;
+        /** @property {Vector2} - How much to offset the text shadow or undefined */
+        this.textShadow = undefined;
+        /** @property {number} - Color for text line drawing  */
+        this.textLineColor = uiSystem.defaultLineColor.copy();
+        /** @property {number} - Width for text line drawing */
+        this.textLineWidth = 0;
         /** @property {boolean} - Should this object be drawn */
         this.visible  = true;
         /** @property {Array<UIObject>} - A list of this object's children */
@@ -371,15 +691,22 @@ class UIObject
         this.dragActivate = false;
         /** @property {boolean} - True if this can be a hover object */
         this.canBeHover = true;
-        uiSystem.uiObjects.push(this);
+        /** @property {Color} - Color for shadow, undefined if no shadow */
+        this.shadowColor = uiSystem.defaultShadowColor?.copy();
+        /** @property {number} - Size of shadow blur */
+        this.shadowBlur = uiSystem.defaultShadowBlur;
+        /** @property {Vector2} - Offset of shadow blur */
+        this.shadowOffset = uiSystem.defaultShadowOffset?.copy();
+        /** @property {number} - Optional navigation order index, lower values are selected first */
+        this.navigationIndex = undefined;
+        /** @property {boolean} - Should this be auto selected by navigation? Must also have valid navigation index. */
+        this.navigationAutoSelect = false;
         
-        /** @property {Vector2} - How much to offset the text shadow or undefined */
-        this.textShadow = undefined;
+        uiSystem.uiObjects.push(this);
     }
 
     /** Add a child UIObject to this object
-     *  @param {UIObject} child
-     */
+     *  @param {UIObject} child */
     addChild(child)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -388,8 +715,7 @@ class UIObject
     }
 
     /** Remove a child UIObject from this object
-     *  @param {UIObject} child
-     */
+     *  @param {UIObject} child */
     removeChild(child)
     {
         ASSERT(child.parent === this && this.children.includes(child));
@@ -397,7 +723,6 @@ class UIObject
         child.parent = undefined;
     }
 
-
     /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
     destroy()
     {
@@ -413,9 +738,9 @@ class UIObject
             child.destroy();
         }
     }
+
     /** Check if the mouse is overlapping a box in screen space
-     *  @return {boolean} - True if overlapping
-     */
+     *  @return {boolean} - True if overlapping */
     isMouseOverlapping()
     {
         if (!mouseInWindow) return false;
@@ -432,11 +757,16 @@ class UIObject
         // call the custom update callback
         this.onUpdate();
 
+        // unset active if disabled
+        if (this.disabled && this == uiSystem.activeObject)
+            uiSystem.activeObject = undefined;
+
         const wasHover = uiSystem.lastHoverObject === this;
         const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (this.canBeHover)
+        if (!uiSystem.navigationMode) // no mouse hover in navigation mode
         if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         if (!uiSystem.hoverObject && this.isMouseOverlapping())
             uiSystem.hoverObject = this;
@@ -450,8 +780,7 @@ class UIObject
                     {
                         if (!this.dragActivate || (!wasHover || mouseWasPressed(0)))
                             this.onPress();
-                        if (this.soundPress)
-                            this.soundPress.play();
+                        this.soundPress && this.soundPress.play();
                         if (uiSystem.activeObject && !isActive)
                             uiSystem.activeObject.onRelease();
                         uiSystem.activeObject = this;
@@ -460,10 +789,10 @@ class UIObject
                 if (!mouseDown && this.isActiveObject() && this.interactive)
                 {
                     this.onClick();
-                    if (this.soundClick)
-                        this.soundClick.play();
+                    this.soundClick && this.soundClick.play();
                 }
             }
+
             // clear mouse was pressed state even when disabled
             mousePress && inputClearKey(0,0,0,1,0);
         }
@@ -471,8 +800,7 @@ class UIObject
         if (!mouseDown || (this.dragActivate && !this.isHoverObject()))
         {
             this.onRelease();
-            if (this.soundRelease)
-                this.soundRelease.play();
+            this.soundRelease && this.soundRelease.play();
             uiSystem.activeObject = undefined;
         }
 
@@ -484,29 +812,40 @@ class UIObject
     /** Render the object, called automatically by plugin once each frame */
     render()
     {
-        if (!this.size.x || !this.size.y) return;
+        // call the custom render callback
+        this.onRender();
 
-        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, this.gradientColor);
-    }
+        if (!this.size.x || !this.size.y) return;
 
-    /** Special update when object is not visible */
-    updateInvisible()
-    {
-        // reset input state when not visible
-        if (this.isActiveObject())
-            uiSystem.activeObject = undefined;
+        const isNavigationObject = this.isNavigationObject();
+        const lineColor = isNavigationObject ? this.color :
+            this.interactive && this.isActiveObject() && !this.disabled ?
+            this.color : this.lineColor;
+        const color = isNavigationObject ? this.hoverColor :
+            this.disabled ? this.disabledColor : 
+            this.interactive ? 
+                this.isHoverObject() ? this.hoverColor : 
+                this.isActiveObject() ? this.activeColor || this.color : 
+                this.color : this.color;
+        const lineWidth = this.lineWidth * (isNavigationObject ? 1.5 : 1);
+        
+        uiSystem.drawRect(this.pos, this.size, color, lineWidth, lineColor, this.cornerRadius, this.gradientColor, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 
     /** Get the size for text with overrides and scale
-     *  @return {Vector2}
-     */
+     *  @return {Vector2} */
     getTextSize()
     {
         return vec2(
-            this.textWidth  || this.textScale * this.size.x, 
-            this.textHeight || this.textScale * this.size.y);
+            this.textWidth  || this.textFitScale * this.size.x, 
+            this.textHeight || this.textFitScale * this.size.y);
+    }
+
+    /** Called when the navigation button is pressed on this object */
+    navigatePressed()
+    {
+        this.onClick();
+        this.soundClick && this.soundClick.play();
     }
 
     /** @return {boolean} - Is the mouse hovering over this element */
@@ -515,9 +854,51 @@ class UIObject
     /** @return {boolean} - Is the mouse held onto this element */
     isActiveObject() { return uiSystem.activeObject === this; }
 
-    /** Called each frame when object updates */
+    /** @return {boolean} - Is the gamepad or keyboard navigation object */
+    isNavigationObject() { return uiSystem.navigationObject === this; }
+
+    /** @return {boolean} - Can it be interacted with */
+    isInteractive() { return this.interactive && this.visible && !this.disabled;}
+
+    /** Returns string containing info about this object for debugging
+     *  @return {string} */
+    toString()
+    {
+        if (!debug) return;
+        
+        let text = 'type = ' + this.constructor.name;
+        if (this.text)
+            text += '\ntext = ' + this.text;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.localPos.x || this.localPos.y)
+            text += '\localPos = ' + this.localPos;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
+    }
+
+    /** Called if uiDebug is enabled
+     *  @param {boolean} visible */
+    renderDebug(visible=true)
+    {
+        // apply color based on state
+        const color = 
+            !visible ? GREEN :
+            this.isHoverObject() ? YELLOW : 
+            this.disabled ? PURPLE :
+            this.interactive ? RED : BLUE;
+        uiSystem.drawRect(this.pos, this.size, CLEAR_BLACK, 4, color);
+    }
+
+    /** Called each frame before object updates */
     onUpdate() {}
 
+    /** Called each frame before object renders */
+    onRender() {}
+
     /** Called when the mouse enters the object */
     onEnter() {}
 
@@ -565,16 +946,25 @@ class UIText extends UIObject
         this.align = align;
         this.font = font;
 
-        // make text not outlined by default
-        this.lineWidth = 0;
         // text can not be a hover object by default
         this.canBeHover = false;
+        
+        // no background by default
+        this.color = CLEAR_BLACK;
+        this.shadowColor = CLEAR_BLACK;
+        this.gradientColor = undefined;
+        this.lineWidth = 0;
+
+        // use max fit scale by default
+        this.textFitScale = 1;
     }
     render()
     {
-        // only render the text
+        super.render();
+
+        // 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, true, this.textShadow);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 }
 
@@ -610,10 +1000,13 @@ class UITile extends UIObject
         this.mirror = mirror;
         // set properties
         this.color = color.copy();
+
+        // no shadow by default
+        this.shadowColor = CLEAR_BLACK;
     }
     render()
     {
-        uiSystem.drawTile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror);
+        uiSystem.drawTile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 }
 
@@ -638,6 +1031,9 @@ class UIButton extends UIObject
         ASSERT(isString(text), 'ui button must be a string');
         ASSERT(isColor(color), 'ui button color must be a color');
 
+        /** @property {Vector2} - Text offset for the button */
+        this.textOffset = vec2();
+
         // set properties
         this.text = text;
         this.color = color.copy();
@@ -649,8 +1045,8 @@ 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, true, this.textShadow);
+        uiSystem.drawText(this.text, this.pos.add(this.textOffset), textSize, 
+            this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
 }
 
@@ -704,7 +1100,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.textShadow);
+            this.textColor, this.textLineWidth, this.textLineColor, 'left', this.font, this.fontStyle, false, this.textShadow);
     }
 }
 
@@ -746,7 +1142,11 @@ class UIScrollbar extends UIObject
     update()
     {
         super.update();
-        if (this.isActiveObject() && this.interactive)
+        if (!this.interactive)
+            return;
+
+        const oldValue = this.value;
+        if (this.isActiveObject())
         {
             // handle horizontal or vertical scrollbar
             const isHorizontal = this.size.x > this.size.y;
@@ -758,14 +1158,19 @@ class UIScrollbar extends UIObject
             const handleWidth = barSize - handleSize;
             const p1 = centerPos - handleWidth/2;
             const p2 = centerPos + handleWidth/2;
-            const oldValue = this.value;
-
             const p = uiSystem.screenToNative(mousePosScreen);
             this.value = isHorizontal ? 
                 percent(p.x, p1, p2) :
                 percent(p.y, p2, p1);
-            this.value === oldValue || this.onChange();
         }
+        else if (this.isNavigationObject())
+        {
+            // gamepad/keyboard navigation adjustment
+            const direction = uiSystem.getNavigationOtherDirection();
+            if (!uiSystem.navigationTimer.active())
+                this.value = clamp(this.value + direction*.01);
+        }
+        this.value === oldValue || this.onChange();
     }
     render()
     {
@@ -790,7 +1195,14 @@ class UIScrollbar extends UIObject
         // 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, true, this.textShadow);
+            this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow);
+    }
+    navigatePressed()
+    {
+        // toggle value between 0 and 1
+        this.value = this.value ? 0 : 1;
+        this.onRelease();
+        super.navigatePressed();
     }
 }
 
@@ -824,7 +1236,7 @@ class UIVideo extends UIObject
         this.color = BLACK; // default to black background
         this.cornerRadius = 0; // default to no corner radius
 
-        /** @property {float} - The video volume */
+        /** @property {number} - The video volume */
         this.volume = volume;
 
         // create video element
@@ -857,7 +1269,7 @@ class UIVideo extends UIObject
     
     /** Check if video is currently loading
      *  @return {boolean} */
-    isLoadng()
+    isLoading()
     { return this.video.readyState < this.video.HAVE_CURRENT_DATA; }
     
     /** Check if video is currently paused
@@ -867,7 +1279,7 @@ class UIVideo extends UIObject
     /** Check if video is currently playing
      *  @return {boolean} */
     isPlaying()
-    { return !this.isPaused() && !this.hasEnded() && !this.isLoadng(); }
+    { return !this.isPaused() && !this.hasEnded() && !this.isLoading(); }
     
     /** Check if video has ended playing
      *  @return {boolean} */
@@ -916,7 +1328,7 @@ class UIVideo extends UIObject
     {
         super.render();
 
-        if (this.isLoadng())
+        if (this.isLoading())
             return;
         const context = uiSystem.uiContext;
         const s = this.size;