Class: Button
Extends
Composite
Implements
IText
ButtonOptions
Constructors
new Button()
new Button(
options
):Button
A simple button of rectangle with text centered inside.
Parameters
• options: ButtonOptions
Returns
Overrides
Composite.constructor
Remarks
This composite node is composed of a rectangle and text. To respond to user taps, the isUserInteractionEnabled property must be set to true and an appropriate callback must be set to handle the tap event.
Source
addons/src/composites/button.ts:62
Properties
_alpha
_alpha:
number
Inherited from
Composite._alpha
Source
core/dist/index.d.ts:2538
_backgroundColor
private
_backgroundColor:RgbaColor
=WebColors.Black
Source
addons/src/composites/button.ts:40
_cornerRadius
private
_cornerRadius:number
=9
Source
addons/src/composites/button.ts:41
_draggable
protected
_draggable:boolean
Inherited from
Composite._draggable
Source
core/dist/index.d.ts:2541
_fontColor
private
_fontColor:RgbaColor
=WebColors.White
Source
addons/src/composites/button.ts:44
_fontName
private
_fontName:undefined
|string
Source
addons/src/composites/button.ts:45
_fontNames
private
_fontNames:undefined
|string
[]
Source
addons/src/composites/button.ts:46
_fontSize
private
_fontSize:number
=20
Source
addons/src/composites/button.ts:42
_game?
optional
_game:Game
Inherited from
Composite._game
Source
core/dist/index.d.ts:2544
_hidden
protected
_hidden:boolean
Inherited from
Composite._hidden
Source
core/dist/index.d.ts:2542
_interpolation
private
_interpolation:StringInterpolationMap
={}
Source
addons/src/composites/button.ts:47
_isUserInteractionEnabled
protected
_isUserInteractionEnabled:boolean
Inherited from
Composite._isUserInteractionEnabled
Source
core/dist/index.d.ts:2540
_localize
private
_localize:boolean
=true
Source
addons/src/composites/button.ts:48
_position
_position:
Point
Inherited from
Composite._position
Source
core/dist/index.d.ts:2536
_scale
_scale:
number
Inherited from
Composite._scale
Source
core/dist/index.d.ts:2537
_size
protected
_size:Size
Inherited from
Composite._size
Source
core/dist/index.d.ts:2548
_text
private
_text:string
=""
Source
addons/src/composites/button.ts:43
_zRotation
_zRotation:
number
Inherited from
Composite._zRotation
Source
core/dist/index.d.ts:2539
absoluteAlpha
absoluteAlpha:
number
Inherited from
Composite.absoluteAlpha
Source
core/dist/index.d.ts:2550
absoluteAlphaChange
absoluteAlphaChange:
number
Inherited from
Composite.absoluteAlphaChange
Source
core/dist/index.d.ts:2551
absolutePosition
absolutePosition:
Point
Inherited from
Composite.absolutePosition
Source
core/dist/index.d.ts:2547
absoluteScale
absoluteScale:
number
Inherited from
Composite.absoluteScale
Source
core/dist/index.d.ts:2549
actions
actions:
Action
[]
Inherited from
Composite.actions
Source
core/dist/index.d.ts:2552
backgroundPaint?
private
optional
backgroundPaint:Paint
Source
addons/src/composites/button.ts:49
children
children:
M2Node
[]
Inherited from
Composite.children
Source
core/dist/index.d.ts:2546
compositeType
compositeType:
string
="Button"
Overrides
Composite.compositeType
Source
addons/src/composites/button.ts:37
constructionIso8601TimeStamp
constructionIso8601TimeStamp:
string
Inherited from
Composite.constructionIso8601TimeStamp
Source
core/dist/index.d.ts:2533
constructionSequence
constructionSequence:
number
Inherited from
Composite.constructionSequence
Source
core/dist/index.d.ts:2534
constructionTimeStamp
constructionTimeStamp:
number
Inherited from
Composite.constructionTimeStamp
Source
core/dist/index.d.ts:2532
dragging
dragging:
boolean
Is the node in a dragging state?
Inherited from
Composite.dragging
Source
core/dist/index.d.ts:2577
draggingLastPointerOffset
draggingLastPointerOffset:
Point
What was the previous pointer offset when the node was in a dragging state?
Inherited from
Composite.draggingLastPointerOffset
Source
core/dist/index.d.ts:2575
eventListeners
eventListeners:
M2NodeEventListener
<M2NodeEvent
>[]
Inherited from
Composite.eventListeners
Source
core/dist/index.d.ts:2554
isDrawable
isDrawable:
boolean
Inherited from
Composite.isDrawable
Source
core/dist/index.d.ts:124
isShape
isShape:
boolean
Inherited from
Composite.isShape
Source
core/dist/index.d.ts:2528
isText
isText:
boolean
=true
Overrides
Composite.isText
Source
addons/src/composites/button.ts:38
layout
layout:
Layout
FOR INTERNAL USE ONLY
Implementation of
Inherited from
Composite.layout
Source
core/dist/index.d.ts:2543
loopMessages
loopMessages:
Set
<string
>
Inherited from
Composite.loopMessages
Source
core/dist/index.d.ts:2558
name
name:
string
Name of the node. Only needed if the node will be referred to by name in a later function
Implementation of
Inherited from
Composite.name
Source
core/dist/index.d.ts:2535
needsInitialization
needsInitialization:
boolean
Inherited from
Composite.needsInitialization
Source
core/dist/index.d.ts:2556
nodeEvents
nodeEvents:
M2Event
<M2Node
>[]
Inherited from
Composite.nodeEvents
Source
core/dist/index.d.ts:2559
options
options:
M2NodeOptions
Inherited from
Composite.options
Source
core/dist/index.d.ts:2531
parent?
optional
parent:M2Node
Inherited from
Composite.parent
Source
core/dist/index.d.ts:2545
pressed
pressed:
boolean
Is the node in a pressed state? E.g., did the user put the pointer down on the node and not yet release it?
Inherited from
Composite.pressed
Source
core/dist/index.d.ts:2562
pressedAndWithinHitArea
pressedAndWithinHitArea:
boolean
Is the node in a pressed state AND is the pointer within the node's hit area? For example, a user may put the pointer down on the node, but then move the pointer, while still down, beyond the node's hit area. In this case, pressed = true, but pressedAndWithinHitArea = false.
Inherited from
Composite.pressedAndWithinHitArea
Source
core/dist/index.d.ts:2568
pressedInitialPointerOffset
pressedInitialPointerOffset:
Point
When the node initially enters the pressed state, what is the pointer offset? (offset from the canvas's origin to the pointer position). We save this because it will be needed if this press then led to a drag.
Inherited from
Composite.pressedInitialPointerOffset
Source
core/dist/index.d.ts:2572
queuedAction?
optional
queuedAction:Action
Inherited from
Composite.queuedAction
Source
core/dist/index.d.ts:2553
toString()
toString: () =>
string
Overrides toString() and returns a human-friendly description of the node.
Remarks
Inspiration from https://stackoverflow.com/a/35361695
Returns
string
Inherited from
Composite.toString
Source
core/dist/index.d.ts:2619
type
readonly
type:Composite
=M2NodeType.Composite
Inherited from
Composite.type
Source
core/dist/index.d.ts:122
userData
userData:
any
Inherited from
Composite.userData
Source
core/dist/index.d.ts:2557
uuid
Internal
readonly
uuid:string
Unique identifier (UUID). Will be generated automatically. For m2c2kit library use only
Implementation of
Inherited from
Composite.uuid
Source
core/dist/index.d.ts:2555
withinHitArea
withinHitArea:
boolean
Inherited from
Composite.withinHitArea
Source
core/dist/index.d.ts:2563
Accessors
alpha
get
alpha():number
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
set
alpha(alpha
):void
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
Parameters
• alpha: number
Returns
number
Source
core/dist/index.d.ts:2876
ancestors
get
ancestors():M2Node
[]
Returns all ancestor nodes, not including the node itself.
Returns
M2Node
[]
Source
core/dist/index.d.ts:2674
anchorPoint
get
anchorPoint():Point
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
set
anchorPoint(anchorPoint
):void
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
Parameters
• anchorPoint: Point
Returns
Point
Source
core/dist/index.d.ts:134
backgroundColor
get
backgroundColor():RgbaColor
Background color of button. Default is WebColors.Black
set
backgroundColor(backgroundColor
):void
Background color of button. Default is WebColors.Black
Parameters
• backgroundColor: RgbaColor
Returns
RgbaColor
Source
addons/src/composites/button.ts:168
canvasKit
get
canvasKit():CanvasKit
Gets the scene that contains this node by searching up the ancestor tree recursively. Throws exception if node is not part of a scene.
Returns
CanvasKit
Scene that contains this node
Source
core/dist/index.d.ts:2866
completeNodeOptions
get
completeNodeOptions():object
Returns
object
alpha?
optional
alpha:number
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
anchorPoint?
optional
anchorPoint:Point
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
backgroundColor
backgroundColor:
RgbaColor
cornerRadius
cornerRadius:
number
draggable?
optional
draggable:boolean
Can the node be dragged?
fontColor?
optional
fontColor:RgbaColor
Color of text. Default is Constants.DEFAULT_FONT_COLOR (WebColors.Black)
fontName?
optional
fontName:string
Name of font to use for text. Must have been previously loaded
fontNames
fontNames:
undefined
|string
[]
fontSize?
optional
fontSize:number
Size of text. Default is Constants.DEFAULT_FONT_SIZE (16)
hidden?
optional
hidden:boolean
Is the node, and its children, hidden? (not displayed). Default is false
interpolation?
optional
interpolation:StringInterpolationMap
Map of placeholders to values for use in string interpolation during localization.
isUserInteractionEnabled?
optional
isUserInteractionEnabled:boolean
Does the node respond to user events, such as taps? Default is false
layout?
optional
layout:Layout
FOR INTERNAL USE ONLY
localize?
optional
localize:boolean
If true, try to use a localized version of the text. Default is true.
name?
optional
name:string
Name of the node. Only needed if the node will be referred to by name in a later function
position?
optional
position:Point
Position of the node within its parent coordinate system. Default is (0, 0)
scale?
optional
scale:number
Scale of the node. Default is 1.0
size
size:
Size
suppressEvents?
optional
suppressEvents:boolean
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
text?
optional
text:string
Text to be displayed
uuid?
Internal
optional
uuid:string
Unique identifier (UUID). Will be generated automatically. For m2c2kit library use only
zPosition?
optional
zPosition:number
Value along the z-axis to determine drawing and tap order. Larger values are on top.
zRotation?
optional
zRotation:number
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
Source
addons/src/composites/button.ts:100
cornerRadius
get
cornerRadius():number
Corner radius of button; can be used to make rounded corners. Default is 9
set
cornerRadius(cornerRadius
):void
Corner radius of button; can be used to make rounded corners. Default is 9
Parameters
• cornerRadius: number
Returns
number
Source
addons/src/composites/button.ts:216
descendants
get
descendants():M2Node
[]
Returns all descendant nodes.
Remarks
Descendants are children and children of children, recursively.
Returns
M2Node
[]
Source
core/dist/index.d.ts:2670
draggable
get
draggable():boolean
Can the node be dragged?
set
draggable(draggable
):void
Can the node be dragged?
Parameters
• draggable: boolean
Returns
boolean
Source
core/dist/index.d.ts:2882
fontColor
get
fontColor():RgbaColor
Color of button text. Default is WebColors.White
set
fontColor(fontColor
):void
Color of button text. Default is WebColors.White
Parameters
• fontColor: RgbaColor
Returns
RgbaColor
Source
addons/src/composites/button.ts:180
fontName
get
fontName():undefined
|string
Name of font to use for text. Must have been previously loaded
set
fontName(fontName
):void
Name of font to use for text. Must have been previously loaded
Parameters
• fontName: undefined
| string
Returns
undefined
| string
Source
addons/src/composites/button.ts:192
fontNames
get
fontNames():undefined
|string
[]
Names of multiple fonts to use for text. For example, if a text font and an emoji font are to be used together. Must have been previously loaded
set
fontNames(fontNames
):void
Names of multiple fonts to use for text. For example, if a text font and an emoji font are to be used together. Must have been previously loaded
Parameters
• fontNames: undefined
| string
[]
Returns
undefined
| string
[]
Source
addons/src/composites/button.ts:204
fontSize
get
fontSize():number
Size of button text. Default is 20.
set
fontSize(fontSize
):void
Size of button text. Default is 20.
Parameters
• fontSize: number
Returns
number
Source
addons/src/composites/button.ts:228
game
get
game():Game
The game which this node is a part of.
Remarks
Throws error if node is not part of the game object.
Returns
Game
Source
core/dist/index.d.ts:2607
hidden
get
hidden():boolean
Is the node, and its children, hidden? (not displayed). Default is false
set
hidden(hidden
):void
Is the node, and its children, hidden? (not displayed). Default is false
Parameters
• hidden: boolean
Returns
boolean
Source
core/dist/index.d.ts:2880
interpolation
get
interpolation():StringInterpolationMap
Map of placeholders to values for use in string interpolation during localization.
set
interpolation(interpolation
):void
Map of placeholders to values for use in string interpolation during localization.
Parameters
• interpolation: StringInterpolationMap
Returns
StringInterpolationMap
Source
addons/src/composites/button.ts:240
isUserInteractionEnabled
get
isUserInteractionEnabled():boolean
Does the node respond to user events, such as taps? Default is false
set
isUserInteractionEnabled(isUserInteractionEnabled
):void
Does the node respond to user events, such as taps? Default is false
Parameters
• isUserInteractionEnabled: boolean
Returns
boolean
Source
core/dist/index.d.ts:2878
localize
get
localize():boolean
If true, try to use a localized version of the text. Default is true.
set
localize(localize
):void
If true, try to use a localized version of the text. Default is true.
Parameters
• localize: boolean
Returns
boolean
Source
addons/src/composites/button.ts:261
parentSceneAsNode
get
parentSceneAsNode():M2Node
Returns
M2Node
Source
core/dist/index.d.ts:2867
position
get
position():Point
Position of the node within its parent coordinate system. Default is (0, 0)
set
position(position
):void
Position of the node within its parent coordinate system. Default is (0, 0)
Parameters
• position: Point
Returns
Point
Source
core/dist/index.d.ts:2870
scale
get
scale():number
Scale of the node. Default is 1.0
set
scale(scale
):void
Scale of the node. Default is 1.0
Parameters
• scale: number
Returns
number
Source
core/dist/index.d.ts:2874
size
get
size():Size
Size of button. Default is 200 wide by 50 high.
set
size(size
):void
Size of button. Default is 200 wide by 50 high.
Parameters
• size: Size
Returns
Size
Source
core/dist/index.d.ts:2868
suppressEvents
get
suppressEvents():boolean
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
set
suppressEvents(value
):void
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
Parameters
• value: boolean
Returns
boolean
Source
core/dist/index.d.ts:2884
text
get
text():string
Text to be displayed
set
text(text
):void
Text to be displayed
Parameters
• text: string
Returns
string
Source
addons/src/composites/button.ts:156
zPosition
get
zPosition():number
Value along the z-axis to determine drawing and tap order. Larger values are on top.
set
zPosition(zPosition
):void
Value along the z-axis to determine drawing and tap order. Larger values are on top.
Parameters
• zPosition: number
Returns
number
Source
core/dist/index.d.ts:136
zRotation
get
zRotation():number
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
set
zRotation(zRotation
):void
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
Parameters
• zRotation: number
Returns
number
Source
core/dist/index.d.ts:2872
Methods
addChild()
addChild(
child
):void
Adds a child to this parent node. Throws exception if the child's name is not unique with respect to other children of this parent, or if the child has already been added to another parent.
Parameters
• child: M2Node
The child node to add
Returns
void
Inherited from
Composite.addChild
Source
core/dist/index.d.ts:2627
addEventListener()
addEventListener<
T
>(type
,callback
,callbackOptions
?):void
Type parameters
• T extends M2NodeEvent
Parameters
• type: string
• callback
• callbackOptions?: CallbackOptions
Returns
void
Inherited from
Composite.addEventListener
Source
core/dist/index.d.ts:2799
descendant()
descendant<
T
>(name
):T
Searches all descendants by name and returns first matching node.
Type parameters
• T extends M2Node
Parameters
• name: string
Name of the descendant node to return
Returns
T
Inherited from
Composite.descendant
Remarks
Descendants are children and children of children, recursively. Throws exception if no descendant with the given name is found.
Source
core/dist/index.d.ts:2664
dispose()
dispose():
void
Returns
void
Overrides
Composite.dispose
Source
addons/src/composites/button.ts:152
draw()
draw(
canvas
):void
Parameters
• canvas: Canvas
Returns
void
Overrides
Composite.draw
Source
addons/src/composites/button.ts:314
drawChildren()
drawChildren(
canvas
):void
Draws each child node that is Drawable and is not hidden, by zPosition order (highest zPosition on top).
Parameters
• canvas: Canvas
CanvasKit canvas
Returns
void
Inherited from
Composite.drawChildren
Source
core/dist/index.d.ts:2821
duplicate()
duplicate(
newName
?):Button
Duplicates a node using deep copy.
Parameters
• newName?: string
optional name of the new, duplicated node. If not provided, name will be the new uuid
Returns
Overrides
Composite.duplicate
Remarks
This is a deep recursive clone (node and children). The uuid property of all duplicated nodes will be newly created, because uuid must be unique.
Source
addons/src/composites/button.ts:283
getDrawableOptions()
protected
getDrawableOptions():DrawableOptions
Returns
DrawableOptions
Inherited from
Composite.getDrawableOptions
Source
core/dist/index.d.ts:2859
getNodeOptions()
protected
getNodeOptions():M2NodeOptions
Returns
M2NodeOptions
Inherited from
Composite.getNodeOptions
Source
core/dist/index.d.ts:2858
getTextOptions()
protected
getTextOptions():TextOptions
Returns
TextOptions
Inherited from
Composite.getTextOptions
Source
core/dist/index.d.ts:2860
handleCompositeEvent()
handleCompositeEvent(
event
):void
Event handler for custom events a Composite
may generate.
Parameters
• event: CompositeEvent
event to handle
Returns
void
Inherited from
Composite.handleCompositeEvent
Remarks
If the Composite
generates custom events, this method is
necessary for the Composite
to work in replay mode.
Source
core/dist/index.d.ts:150
initialize()
initialize():
void
Returns
void
Overrides
Composite.initialize
Source
addons/src/composites/button.ts:113
involvedInActionAffectingAppearance()
involvedInActionAffectingAppearance():
boolean
Determines if this node or ancestor is part of an active action that affects it appearance.
Returns
boolean
true if part of active action affecting appearance
Inherited from
Composite.involvedInActionAffectingAppearance
Remarks
This is used to determine if the node should be rendered with anti-aliasing or not. Anti-aliasing on some devices causes a new shader to be compiled during the action, which causes jank.
Source
core/dist/index.d.ts:2685
involvedInSceneTransition()
involvedInSceneTransition():
boolean
Determines if the node is a transitioning Scene or a descendant of a transitioning Scene.
Returns
boolean
true if transitioning
Inherited from
Composite.involvedInSceneTransition
Source
core/dist/index.d.ts:2692
onDrag()
onDrag(
callback
,options
?):void
Executes a callback when the user continues dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onDrag
Source
core/dist/index.d.ts:2791
onDragEnd()
onDragEnd(
callback
,options
?):void
Executes a callback when the user stop dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onDragEnd
Source
core/dist/index.d.ts:2798
onDragStart()
onDragStart(
callback
,options
?):void
Executes a callback when the user begins dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onDragStart
Source
core/dist/index.d.ts:2784
onPointerDown()
onPointerDown(
callback
,options
?):void
Executes a callback when the pointer first is down on the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onPointerDown
Remarks
PointerDown is a pointer down (mouse click or touches begin) within the bounds of the node. It occurs under the same conditions as TapDown.
Source
core/dist/index.d.ts:2749
onPointerLeave()
onPointerLeave(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse or touches) outside the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onPointerLeave
Source
core/dist/index.d.ts:2777
onPointerMove()
onPointerMove(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse or touches) within the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onPointerMove
Source
core/dist/index.d.ts:2769
onPointerUp()
onPointerUp(
callback
,options
?):void
Executes a callback when the user releases a press from the node within the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onPointerUp
Remarks
PointerUp is a pointer up (mouse click release or touches end) within the bounds of the node. It does not require that there was a previous PointerDown on the node.
Source
core/dist/index.d.ts:2761
onTapDown()
onTapDown(
callback
,options
?):void
Executes a callback when the user presses down on the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
CallbackOptions
Returns
void
Inherited from
Composite.onTapDown
Remarks
TapDown is a pointer down (mouse click or touches begin) within the bounds of the node.
Source
core/dist/index.d.ts:2702
onTapLeave()
onTapLeave(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse, touches) beyond the bounds of the node while the pointer is down.