UISystemPlugin

UI System Global Object

Constructor

new UISystemPlugin(context)uiSystem.js:53

Create the global UI system object

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

// create the ui plugin object
new UISystemPlugin;

Members

activateOnPress : booleanuiSystem.js:69

Activate when mouse is pressed down instead of clicked

activeObject : UIObject|undefineduiSystem.js:139

Object user is currently interacting with

confirmDialog : UIObject|undefineduiSystem.js:148

Current confirm menu being shown

defaultButtonColor : ColoruiSystem.js:77

Default button color for UI elements

defaultColor : ColoruiSystem.js:71

Default fill color for UI elements

defaultCornerRadius : numberuiSystem.js:88

Default rounded rect corner radius for UI elements

defaultDisabledColor : ColoruiSystem.js:81

Default color for disabled UI elements

defaultFont : stringuiSystem.js:92

Default font for UI elements

defaultGradientColor : Color|undefineduiSystem.js:84

Uses a gradient fill combined with color

defaultHandleSlice : TileSlice|undefineduiSystem.js:114

Style to draw slider handles with, undefined for the slider's own slice

defaultHoverColor : ColoruiSystem.js:79

Default hover color for UI elements

defaultLineColor : ColoruiSystem.js:73

Default outline color for UI elements

defaultLineWidth : numberuiSystem.js:86

Default line width for UI elements

defaultShadowBlur : numberuiSystem.js:105

Size of shadow blur

defaultShadowColor : ColoruiSystem.js:103

Color for shadow

defaultShadowOffset : Vector2uiSystem.js:107

Offset of shadow blur

defaultSlice : TileSlice|undefineduiSystem.js:111

Style to draw UI elements with in place of their rectangle, tinted by their color, undefined for rectangles; needs the drawUtilities plugin

defaultSoundClick : Sound|undefineduiSystem.js:101

Default sound when interactive UI element is clicked

defaultSoundPress : Sound|undefineduiSystem.js:95

Default sound when interactive UI element is pressed

defaultSoundRelease : Sound|undefineduiSystem.js:98

Default sound when interactive UI element is released

defaultTextColor : ColoruiSystem.js:75

Default text color for UI elements

defaultTextFitScale : numberuiSystem.js:90

Default scale to use for fitting text to object

hoverObject : UIObject|undefineduiSystem.js:142

Top most object user is over

keyInputObject : UIObject|undefineduiSystem.js:598

Object to send keyboard input to (typically a UITextInput), which keeps the keys from the game while set. The keyboard listeners are only attached while this is set, so games that never use text input pay no event-handling cost. To end typing in a field, call its stopEditing(), which also fires its onChange and release sound

lastHoverObject : UIObject|undefineduiSystem.js:145

Hover object at start of update

nativeHeight : numberuiSystem.js:116

If set ui coords will be renormalized to this canvas height

navigationDelay : numberuiSystem.js:125

Time between navigation inputs in seconds

navigationDirection : numberuiSystem.js:127

Which way keys and gamepads move the selection: 0 horizontal, 1 vertical, 2 both

navigationMode : booleanuiSystem.js:129

True if user last used navigation instead of mouse

navigationObject : UIObject|undefineduiSystem.js:121

Object currently selected by navigation (gamepad or keyboard)

navigationTimer : TimeruiSystem.js:123

Cool down timer for navigation inputs

uiContext : CanvasRenderingContext2D|OffscreenCanvasRenderingContext2DuiSystem.js:136

Context to render UI elements to

uiObjects : Array<UIObject>uiSystem.js:134

List of all UI elements

Methods

destroyObjects()uiSystem.js:628

Destroy and remove all objects

drawLine(posA, posB, lineWidth, lineColor)uiSystem.js:487

Draw a line to the UI context

posA Vector2
posB Vector2
lineWidth number optional, default uiSystem.defaultLineWidth
lineColor Color optional, default uiSystem.defaultLineColor

drawRect(pos, size, color, lineWidth, lineColor, cornerRadius, gradientColor, shadowColor, shadowBlur, shadowOffset)uiSystem.js:429

Draw a rectangle to the UI context

pos Vector2
size Vector2
color Color optional
lineWidth number optional, default 0
lineColor Color optional
cornerRadius number optional, default 0
gradientColor Color optional
shadowColor Color optional
shadowBlur number optional, default 0
shadowOffset Vector2 optional

drawSlice(slice, pos, size, color)uiSystem.js:472

Draw a TileSlice to the UI context, in place of a rectangle

slice TileSlice
pos Vector2
size Vector2
color Color optional

drawText(text, pos, size, color, lineWidth, lineColor, align, font, fontStyle, applyMaxWidth, textShadow, shadowColor, shadowBlur, shadowOffset)

uiSystem.js:536

Draw text to the UI context

text string
pos Vector2
size Vector2
color Color optional, default uiSystem.defaultColor
lineWidth number optional, default uiSystem.defaultLineWidth
lineColor Color optional, default uiSystem.defaultLineColor
align 'left'|'center'|'right' optional, default center
font string optional, default uiSystem.defaultFont
fontStyle string optional
applyMaxWidth boolean optional, default true
textShadow Vector2 optional
shadowColor Color optional
shadowBlur number optional, default 0
shadowOffset Vector2 optional

drawTile(pos, size, tileInfo, color, angle, mirror, shadowColor, shadowBlur, shadowOffset)uiSystem.js:513

Draw a tile to the UI context

pos Vector2
size Vector2
tileInfo TileInfo
color Color optional, default uiSystem.defaultColor
angle number optional, default 0
mirror boolean optional, default false
shadowColor Color optional
shadowBlur number optional, default 0
shadowOffset Vector2 optional

getNavigableObjects() → Array<UIObject>uiSystem.js:642

Get all navigable UI objects sorted by navigationIndex

getNavigationDirection() → numberuiSystem.js:696

Get navigation direction from gamepad or keyboard

getNavigationOtherDirection() → numberuiSystem.js:721

Get other axis navigation direction from gamepad or keyboard

getNavigationWasPressed() → booleanuiSystem.js:741

Get if navigation button was pressed from gamepad or keyboard

isMouseOverUI() → booleanuiSystem.js:673

Check if the mouse is over a visible UI object that can be hovered, or anywhere while the confirm dialog is open, so a game can leave world clicks on the UI alone, on touch too. The UI uses up a click before objects update and gameUpdatePost, so read world clicks there, or check this in gameUpdate, which runs first. Positions are from the last UI update.

screenToNative(pos) → Vector2uiSystem.js:578

Convert a screen space position to native UI position

pos Vector2

setupDragAndDrop(onDrop, onDragEnter, onDragLeave, onDragOver)uiSystem.js:552

Setup drag and drop event handlers Automatically prevents defaults and calls the given functions

onDrop DragAndDropCallback optional: when a file is dropped
onDragEnter DragAndDropCallback optional: when a file is dragged onto the window
onDragLeave DragAndDropCallback optional: when a file is dragged off the window
onDragOver DragAndDropCallback optional: continuously when dragging over

showConfirmDialog(text, yesCallback, noCallback, size, exitKey) → UIObjectuiSystem.js:756

Show a confirmation dialog with Yes/No buttons Centers the dialog on the screen with darkened background

text string optional, default Are you sure?: The message to display
yesCallback function optional: Called when Yes is clicked
noCallback function optional: Called when No is clicked, or the exit key or gamepad B closes it
size Vector2 optional: Size of the confirmation dialog, the title and buttons are placed by it
exitKey string optional, default Escape: Key that closes the menu as No, gamepad B (button 1) does too

Returns: The confirmation menu object