Class: UISystemPlugin

Constructor

new UISystemPlugin(contextopt)

Create the global UI system object

Parameters:

Name	Type	Attributes	Description
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>

Source: plugins/uiSystem.js, line 43

Example

// create the ui plugin object
 new UISystemPlugin;

Members

activateOnPress

Properties

Type	Description
boolean	Activate when mouse is pressed down instead of clicked

Source: plugins/uiSystem.js, line 59

activeObject :UIObject|undefined

Type:

UIObject | undefined

Properties

Type	Description
UIObject \| undefined	Object user is currently interacting with

Source: plugins/uiSystem.js, line 129

confirmDialog :UIObject|undefined

Type:

UIObject | undefined

Properties

Type	Description
UIObject \| undefined	Current confirm menu being shown

Source: plugins/uiSystem.js, line 138

defaultButtonColor

Properties

Type	Description
Color	Default button color for UI elements

Source: plugins/uiSystem.js, line 67

defaultColor

Properties

Type	Description
Color	Default fill color for UI elements

Source: plugins/uiSystem.js, line 61

defaultCornerRadius

Properties

Type	Description
number	Default rounded rect corner radius for UI elements

Source: plugins/uiSystem.js, line 78

defaultDisabledColor

Properties

Type	Description
Color	Default color for disabled UI elements

Source: plugins/uiSystem.js, line 71

defaultFont

Properties

Type	Description
string	Default font for UI elements

Source: plugins/uiSystem.js, line 82

defaultGradientColor :Color|undefined

Type:

Color | undefined

Properties

Type	Description
Color \| undefined	Uses a gradient fill combined with color

Source: plugins/uiSystem.js, line 74

defaultHandleSlice :TileSlice|undefined

Type:

TileSlice | undefined

Properties

Type	Description
TileSlice \| undefined	Style to draw slider handles with, undefined for the slider's own slice

Source: plugins/uiSystem.js, line 104

defaultHoverColor

Properties

Type	Description
Color	Default hover color for UI elements

Source: plugins/uiSystem.js, line 69

defaultLineColor

Properties

Type	Description
Color	Default outline color for UI elements

Source: plugins/uiSystem.js, line 63

defaultLineWidth

Properties

Type	Description
number	Default line width for UI elements

Source: plugins/uiSystem.js, line 76

defaultShadowBlur

Properties

Type	Description
number	Size of shadow blur

Source: plugins/uiSystem.js, line 95

defaultShadowColor

Properties

Type	Description
Color	Color for shadow

Source: plugins/uiSystem.js, line 93

defaultShadowOffset

Properties

Type	Description
Vector2	Offset of shadow blur

Source: plugins/uiSystem.js, line 97

defaultSlice :TileSlice|undefined

Type:

TileSlice | undefined

Properties

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

Source: plugins/uiSystem.js, line 101

defaultSoundClick :Sound|undefined

Type:

Sound | undefined

Properties

Type	Description
Sound \| undefined	Default sound when interactive UI element is clicked

Source: plugins/uiSystem.js, line 91

defaultSoundPress :Sound|undefined

Type:

Sound | undefined

Properties

Type	Description
Sound \| undefined	Default sound when interactive UI element is pressed

Source: plugins/uiSystem.js, line 85

defaultSoundRelease :Sound|undefined

Type:

Sound | undefined

Properties

Type	Description
Sound \| undefined	Default sound when interactive UI element is released

Source: plugins/uiSystem.js, line 88

defaultTextColor

Properties

Type	Description
Color	Default text color for UI elements

Source: plugins/uiSystem.js, line 65

defaultTextFitScale

Properties

Type	Description
number	Default scale to use for fitting text to object

Source: plugins/uiSystem.js, line 80

hoverObject :UIObject|undefined

Type:

UIObject | undefined

Properties

Type	Description
UIObject \| undefined	Top most object user is over

Source: plugins/uiSystem.js, line 132

keyInputObject :UIObject|undefined

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

Type:

UIObject | undefined

Source: plugins/uiSystem.js, line 589

lastHoverObject :UIObject|undefined

Type:

UIObject | undefined

Properties

Type	Description
UIObject \| undefined	Hover object at start of update

Source: plugins/uiSystem.js, line 135

nativeHeight

Properties

Type	Description
number	If set ui coords will be renormalized to this canvas height

Source: plugins/uiSystem.js, line 106

navigationDelay

Properties

Type	Description
number	Time between navigation inputs in seconds

Source: plugins/uiSystem.js, line 115

navigationDirection

Properties

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

Source: plugins/uiSystem.js, line 117

navigationMode

Properties

Type	Description
boolean	True if user last used navigation instead of mouse

Source: plugins/uiSystem.js, line 119

navigationObject :UIObject|undefined

Type:

UIObject | undefined

Properties

Type	Description
UIObject \| undefined	Object currently selected by navigation (gamepad or keyboard)

Source: plugins/uiSystem.js, line 111

navigationTimer

Properties

Type	Description
Timer	Cool down timer for navigation inputs

Source: plugins/uiSystem.js, line 113

uiContext

Properties

Type	Description
CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	Context to render UI elements to

Source: plugins/uiSystem.js, line 126

uiObjects :Array.<UIObject>

Type:

Array.<UIObject>

Properties

Type	Description
Array.<UIObject>	List of all UI elements

Source: plugins/uiSystem.js, line 124

Methods

drawLine(posA, posB, lineWidthopt, lineColoropt)

Draw a line to the UI context

Parameters:

Name	Type	Attributes	Default
`posA`	Vector2
`posB`	Vector2
`lineWidth`	number	<optional>	uiSystem.defaultLineWidth
`lineColor`	Color	<optional>	uiSystem.defaultLineColor

Source: plugins/uiSystem.js, line 472

drawRect(pos, size, coloropt, lineWidthopt, lineColoropt, cornerRadiusopt, gradientColoropt, shadowColoropt, shadowBluropt, shadowOffsetopt)

Draw a rectangle to the UI context

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2
`color`	Color	<optional>
`lineWidth`	number	<optional>	0
`lineColor`	Color	<optional>
`cornerRadius`	number	<optional>	0
`gradientColor`	Color	<optional>
`shadowColor`	Color	<optional>
`shadowBlur`	number	<optional>	0
`shadowOffset`	Vector2	<optional>

Source: plugins/uiSystem.js, line 414

drawSlice(slice, pos, size, coloropt)

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

Parameters:

Name	Type	Attributes
`slice`	TileSlice
`pos`	Vector2
`size`	Vector2
`color`	Color	<optional>

Source: plugins/uiSystem.js, line 457

drawText(text, pos, size, coloropt, lineWidthopt, lineColoropt, alignopt, fontopt, fontStyleopt, applyMaxWidthopt, textShadowopt, shadowColoropt, shadowBluropt, shadowOffsetopt)

Draw text to the UI context

Parameters:

Name	Type	Attributes	Default
`text`	string
`pos`	Vector2
`size`	Vector2
`color`	Color	<optional>	uiSystem.defaultColor
`lineWidth`	number	<optional>	uiSystem.defaultLineWidth
`lineColor`	Color	<optional>	uiSystem.defaultLineColor
`align`	'left' \| 'center' \| 'right'	<optional>	center
`font`	string	<optional>	uiSystem.defaultFont
`fontStyle`	string	<optional>
`applyMaxWidth`	boolean	<optional>	true
`textShadow`	Vector2	<optional>
`shadowColor`	Color	<optional>
`shadowBlur`	number	<optional>	0
`shadowOffset`	Vector2	<optional>

Source: plugins/uiSystem.js, line 521

drawTile(pos, size, tileInfo, coloropt, angleopt, mirroropt, shadowColoropt, shadowBluropt, shadowOffsetopt)

Draw a tile to the UI context

Parameters:

Name	Type	Attributes	Default
`pos`	Vector2
`size`	Vector2
`tileInfo`	TileInfo
`color`	Color	<optional>	uiSystem.defaultColor
`angle`	number	<optional>	0
`mirror`	boolean	<optional>	false
`shadowColor`	Color	<optional>
`shadowBlur`	number	<optional>	0
`shadowOffset`	Vector2	<optional>

Source: plugins/uiSystem.js, line 498

getNavigableObjects() → {Array.<UIObject>}

Get all navigable UI objects sorted by navigationIndex

Source: plugins/uiSystem.js, line 634

Returns:

Type:: Array.<UIObject>

getNavigationDirection() → {number}

Get navigation direction from gamepad or keyboard

Source: plugins/uiSystem.js, line 688

Returns:

Type:: number

getNavigationOtherDirection() → {number}

Get other axis navigation direction from gamepad or keyboard

Source: plugins/uiSystem.js, line 713

Returns:

Type:: number

getNavigationWasPressed() → {boolean}

Get if navigation button was pressed from gamepad or keyboard

Source: plugins/uiSystem.js, line 733

Returns:

Type:: boolean

isMouseOverUI() → {boolean}

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.

Source: plugins/uiSystem.js, line 665

Returns:

Type:: boolean

screenToNative(pos) → {Vector2}

Convert a screen space position to native UI position

Parameters:

Name	Type	Description
`pos`	Vector2

Source: plugins/uiSystem.js, line 569

Returns:

Type:: Vector2

setupDragAndDrop(onDropopt, onDragEnteropt, onDragLeaveopt, onDragOveropt)

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

Parameters:

Name	Type	Attributes	Description
`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

Source: plugins/uiSystem.js, line 543

showConfirmDialog(textopt, yesCallbackopt, noCallbackopt, sizeopt, exitKeyopt) → {UIObject}

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

Parameters:

Name	Type	Attributes	Default	Description
`text`	string	<optional>	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>	Escape	Key that closes the menu as No, gamepad B (button 1) does too

Source: plugins/uiSystem.js, line 748

Returns:

The confirmation menu object

Type:: UIObject