UIBaseElement

class UIBaseElement extends Container

This is a basic clickable and draggable container which you can use in your game UI. Use this for example if you want to display a panel that contains text, images or other UI elements.

Constructor

new UIBaseElement(x: number, y: number, w: number, h: number) → {}

Parameters:
Name	Type	Description
x	number	The x position of the container
y	number	The y position of the container
w	number	width of the container
h	number	height of the container

Summary

Properties from UIBaseElement

boolean	floating = true
number	holdThreshold = 250
boolean	hover = false
boolean	isClickable = true
boolean	isDraggable = false
boolean	isHoldable = false
boolean	released = false

Methods from UIBaseElement

boolean	onClick(event: Pointer)
	onHold()
	onMove(event: Pointer)
	onOut(event: Pointer)
	onOver(event: Pointer)
boolean	onRelease()

Properties inherited from Container

boolean	autoDepth = true
boolean	autoSort = true
Color	backgroundColor = (0, 0, 0, 0.0)
boolean	clipping = false
boolean	enableChildBoundsUpdate = false
boolean	root = false
string	sortOn = "z"

Properties inherited from Renderable

number	alpha = 1.0
boolean	alwaysUpdate = false
Container \| Entity	ancestor = undefined
ObservableVector2d	anchorPoint = <0.5,0.5>
boolean	autoTransform = true
string	blendMode = "normal"
Body	body
Matrix2d	currentTransform
number	depth
string	GUID
boolean	inViewport = false
boolean	isDirty = true
boolean	isFlippedX
boolean	isFlippedY
boolean	isFloating
boolean	isKinematic = true
boolean	isPersistent = false
Rect \| RoundRect \| Polygon \| Line \| Ellipse	mask = undefined
string	name = ""
Function	onVisibilityChange = undefined
Application	parentApp
ObservableVector3d	pos
GLShader	shader = undefined
Color	tint = (255, 255, 255)
boolean	updateWhenPaused = false

Properties inherited from Rect

number	bottom
number	centerX
number	centerY
number	height
number	left
number	right
number	top
string	type = "Rectangle"
number	width

Properties inherited from Polygon

Array<Vector2d>

points

Methods inherited from Container

Renderable	addChild(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText, z: number)
Renderable	addChildAt(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText, index: number)
	forEach(callback: Function, thisArg: object)
Renderable	getChildAt(index: number)
Renderable	getChildByGUID(guid: string \| RegExp \| number \| boolean)
Array<Renderable>	getChildByName(name: string \| RegExp \| number \| boolean)
Array<Renderable>	getChildByProp(prop: string, value: string \| RegExp \| number \| boolean)
Array<Renderable>	getChildByType(classType: object)
number	getChildIndex(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
Array<Renderable>	getChildren()
Renderable	getNextChild(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
Container	getRootAncestor()
boolean	hasChild(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
boolean	isAttachedToRoot()
	moveDown(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
	moveToBottom(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
	moveToTop(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
	moveUp(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
	onChildChange(index: number)
	removeChild(child: RendRenderable \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapTexterable, keepalive: boolean)
	removeChildNow(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText, keepalive: boolean)
	reset() reset the container, removing all childrens, and reseting transforms.
	setChildsProperty(prop: string, value: object, recursive: boolean)
	sort(recursive: boolean)
	swapChildren(child: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText, child2: Renderable \| Entity \| Sprite \| Collectable \| Trigger \| Draggable \| DropTarget \| NineSliceSprite \| ImageLayer \| ColorLayer \| Light2d \| UIBaseElement \| UISpriteElement \| UITextButton \| Text \| BitmapText)
Bounds	updateBounds(absolute: boolean)
	protected draw(renderer: CanvasRenderer \| WebGLRenderer, viewport: Camera2d)
boolean	protected update(dt: number)

Methods inherited from Renderable

number	angleTo(target: Renderable \| Vector2d \| Vector3d)
number	distanceTo(target: Renderable \| Vector2d \| Vector3d)
Renderable	flipX(flip: boolean)
Renderable	flipY(flip: boolean)
Vector2d	getAbsolutePosition()
Bounds	getBounds()
number	getOpacity()
Renderable	lookAt(target: Renderable \| Vector2d \| Vector3d)
boolean	onCollision(response: ResponseObject, other: Renderable \| Container \| Entity \| Sprite \| NineSliceSprite)
	onDestroyEvent()
	postDraw(renderer: CanvasRenderer \| WebGLRenderer)
	preDraw(renderer: CanvasRenderer \| WebGLRenderer)
Renderable	rotate(angle: number, v: Vector2d \| ObservableVector2d)
Renderable	scale(x: number, y: number)
Renderable	scaleV(v: Vector2d)
	setOpacity(alpha: number)
Renderable	transform(m: Matrix2d)

Methods inherited from Rect

Rect	centerOn(x: number, y: number)
Rect	clone()
boolean	contains(x: number \| Vector2d \| Rect, y: number)
Rect	copy(rect: Rect)
boolean	equals(rect: Rect)
boolean	isFinite()
boolean	overlaps(rect: Rect)
Rect	resize(w: number, h: number)
Rect	setShape(x: number, y: number, w: number \| Vector2d<Array>, h: number)
Polygon	toPolygon()
Rect	union(rect: Rect)

Methods inherited from Polygon

Array<number>	getIndices()
boolean	isConvex()
Polygon	recalc()
Polygon	setVertices(vertices: Array<Vector2d>)
	shift(x: number \| Vector2d, y: number)
Polygon	to2d()
Polygon	toIso()
Polygon	translate(x: number \| Vector2d, y: number)

Public Properties

floating uibaseelement.js:65

floating: boolean = true

boolean

UI base elements use screen coordinates by default (Note: any child elements added to a UIBaseElement should have their floating property to false)

See: Renderable.floating

holdThreshold uibaseelement.js:37

holdThreshold: number = 250

number

Tap and hold threshold timeout in ms

hover uibaseelement.js:51

hover: boolean = false

boolean

true if the pointer is over the object

isClickable uibaseelement.js:23

isClickable: boolean = true

boolean

object can be clicked or not

isDraggable uibaseelement.js:30

isDraggable: boolean = false

boolean

object can be clicked or not

isHoldable uibaseelement.js:44

isHoldable: boolean = false

boolean

object can be tap and hold

released uibaseelement.js:58

released: boolean = false

boolean

false if the pointer is down, or true when the pointer status is up

Public Methods

onClick uibaseelement.js:110

onClick(event: Pointer) → {boolean}

function called when the object is pressed (to be extended)

Parameters:
Name	Type	Description
event	Pointer	the event object

Returns:
Type	Description
boolean	return false if we need to stop propagating the event

onHold uibaseelement.js:225

onHold() → {}

function called when the object is pressed and held
to be extended

onMove uibaseelement.js:149

onMove(event: Pointer) → {}

function called when the pointer is moved over the object

Parameters:
Name	Type	Description
event	Pointer	the event object

onOut uibaseelement.js:182

onOut(event: Pointer) → {}

function called when the pointer is leaving the object area

Parameters:
Name	Type	Description
event	Pointer	the event object

onOver uibaseelement.js:157

onOver(event: Pointer) → {}

function called when the pointer is over the object

Parameters:
Name	Type	Description
event	Pointer	the event object

onRelease uibaseelement.js:204

onRelease() → {boolean}

function called when the object is pressed and released (to be extended)

Returns:
Type	Description
boolean	return false if we need to stop propagating the event