UITextButton

class UITextButton extends UIBaseElement

This is a basic base text button which you can use in your Game UI.

Constructor

new UITextButton(x: number, y: number) → {}

A Bitmap Text Button with an outlined background border, filled with background color. It uses a RoundRect as background and changes the background color on hovering over. The background will be drawn with 0.5 opacity, so that the background of the button is slightly shining through.

 // Create a new Button
 class PlayButton extends UITextButton {
      constructor(x,y) {
          super(x,y, {
              font: 'my-font',
              text: 'Play',
              // if you omit the next two, size is calculated by the size of the text
              borderWidth: 200,
              borderHeight: 20,
              backgroundColor: '#00aa0080',
              hoverColor: '#00ff00ff'
          });
      }

      onClick(){
          state.change(state.PLAY);
      }
 }

 world.addChild(new PlayButton(15,200));

Parameters:
Name	Type	Attributes	Default	Description
x	number			x pos of the button
y	number			y pos of the button
settings.font	string	<optional>		The name of the BitmapText font to use
settings.size	number	<optional>	1	The scale factor of the BitmapText
settings.text	string	<optional>		The text to display
settings.bindKey	string	<optional>		The key to bind the action to (default: none)
settings.hoverOffColor	string	<optional>	"#00aa0080"	The css value of a color to be used if the pointer is not hovering over the button
settings.hoverOnColor	string	<optional>	"#00ff00ff"	The css value of a color to be used if the pointer hovers over the button
settings.borderStrokeColor	string	<optional>	"#000000"	The css value of a color to be used to draw the border
settings.fillStyle	string	<optional>		The css value of a tint color to be used to tint the BitmapText
settings.textAlign	string	<optional>	"center"	horizontal text alignment
settings.textBaseline	string	<optional>	"middle"	the text baseline
settings.borderWidth	number	<optional>		Width of the button
settings.borderHeight	number	<optional>		Height of the button

Summary

Properties from UITextButton

string	bindKey
BitmapText	bitmapText
string	borderStrokeColor
string	hoverOffColor
string	hoverOnColor
string	textAlign = "center"
string	textBaseline = "middle"

Properties inherited from UIBaseElement

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

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 UIBaseElement

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

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

bindKey uitextbutton.js:56

bindKey: string

string

The key to bind the action to

bitmapText uitextbutton.js:100

bitmapText: BitmapText

BitmapText

the bitmapText used by the UITextButton class

borderStrokeColor uitextbutton.js:76

borderStrokeColor: string

string

The css value of a color to be used to draw the border

hoverOffColor uitextbutton.js:62

hoverOffColor: string

string

The css value of a color to be used if the pointer is nothovering over the button

hoverOnColor uitextbutton.js:69

hoverOnColor: string

string

The css value of a color to be used if the pointer hovers over the button

textAlign uitextbutton.js:82

textAlign: string = "center"

string

Set the default text alignment (or justification),
possible values are "left", "right", and "center".

textBaseline uitextbutton.js:91

textBaseline: string = "middle"

string

Set the text baseline (e.g. the Y-coordinate for the draw operation),
possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"