UISpriteElement

class UISpriteElement extends Sprite

This is a basic sprite based button which you can use in your Game UI.

Constructor

new UISpriteElement(x: number, y: number, settings: object) → {}

 // create a basic GUI Object
 class myButton extends UISpriteElement {
    constructor(x, y) {
       // call the UISpriteElement parent constructor
       super(x, y, {
          image: "button",
          framewidth: 100,
          frameheight: 50
       });
    }

    // output something in the console
    // when the object is clicked
    onClick(event) {
       console.log("clicked!");
       // don't propagate the event
       return false;
    }
 });

 // add the object at pos (10,10)
 world.addChild(new myButton(10,10));

Parameters:
Name	Type	Description
x	number	the x coordinate of the UISpriteElement Object
y	number	the y coordinate of the UISpriteElement Object
settings	object	See Sprite

Summary

Properties from UISpriteElement

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

Methods from UISpriteElement

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

Properties inherited from Sprite

boolean	animationpause = false
number	animationspeed = 100
boolean	isVideo = false
Vector2d	offset = <0.0,0.0>
TextureAtlas	source = undefined

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 Sprite

number	addAnimation(name: string, index: Array<number> \| Array<string> \| Array<object>, animationspeed: number)
Sprite	flicker(duration: number, callback: Function)
number	getCurrentAnimationFrame()
boolean	isCurrentAnimation(name: string)
boolean	isFlickering()
	pause() play or resume the current animation or video
	play() play or resume the current animation or video
Sprite	reverseAnimation(name: string)
Sprite	setAnimationFrame(index: number)
Sprite	setCurrentAnimation(name: string, resetAnim: string \| Function, preserve_dt: boolean)
Sprite	setRegion(region: object)
	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)
Bounds	updateBounds(absolute: boolean)

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 uispriteelement.js:76

floating: boolean = true

boolean

if this UISpriteElement should use screen coordinates or local coordinates (Note: any UISpriteElement elements added to a floating parent container should have their floating property to false)

See: Renderable.floating

holdThreshold uispriteelement.js:51

holdThreshold: number = 250

number

Tap and hold threshold timeout in ms

hover uispriteelement.js:65

hover: boolean = false

boolean

true if the pointer is over the object

isClickable uispriteelement.js:44

isClickable: boolean = true

boolean

object can be clicked or not

isHoldable uispriteelement.js:58

isHoldable: boolean = false

boolean

object can be tap and hold

Public Methods

onClick uispriteelement.js:107

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 uispriteelement.js:188

onHold() → {}

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

onOut uispriteelement.js:145

onOut(event: Pointer) → {}

function called when the pointer is leaving the object area

Parameters:
Name	Type	Description
event	Pointer	the event object

onOver uispriteelement.js:126

onOver(event: Pointer) → {}

function called when the pointer is over the object

Parameters:
Name	Type	Description
event	Pointer	the event object

onRelease uispriteelement.js:167

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