Class UITextButton

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

Hierarchy (view full)

Constructors

constructor

Properties

GUID alpha alwaysUpdate ancestor anchorPoint autoDepth autoSort autoTransform backgroundColor bindKey bitmapText blendMode body border borderStrokeColor clipping currentTransform dimensions edges enableChildBoundsUpdate floating grabOffset holdThreshold holdTimeout hover hoverOffColor hoverOnColor indices isClickable isDirty isDraggable isHoldable isKinematic isPersistent mask name onChildChange onVisibilityChange points pos released root shader sortOn textAlign textBaseline type updateWhenPaused

Accessors

bottom centerX centerY depth height inViewport isFlippedX isFlippedY isFloating left parentApp right tint top width

Methods

addChild addChildAt angleTo centerOn clone contains containsRectangle copy distanceTo draw equals flipX flipY forEach getAbsolutePosition getBounds getChildAt getChildByGUID getChildByName getChildByProp getChildByType getChildIndex getChildren getIndices getNextChild getOpacity getRootAncestor hasChild isAttachedToRoot isConvex isFinite lookAt moveDown moveToBottom moveToTop moveUp onClick onCollision onDestroyEvent onHold onMove onOut onOver onRelease overlaps postDraw preDraw recalc removeChild removeChildNow reset resize rotate scale scaleV setChildsProperty setOpacity setShape setSize setVertices shift sort swapChildren to2d toIso toPolygon transform translate union update updateBounds

Constructors

constructor

  • new UITextButton(x, y, settings): UITextButton

  • 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.

    Parameters

    • x: number

      x pos of the button

    • y: number

      y pos of the button

    • settings: {
          bindKey: undefined | string;
          borderHeight: undefined | number;
          borderStrokeColor: undefined | string;
          borderWidth: undefined | number;
          fillStyle: undefined | string;
          font: undefined | string;
          hoverOffColor: undefined | string;
          hoverOnColor: undefined | string;
          size: undefined | number;
          text: undefined | string;
          textAlign: undefined | string;
          textBaseline: undefined | string;
      }

      settings object

      • bindKey: undefined | string

        The key to bind the action to (default: none)

      • borderHeight: undefined | number

        Height of the button

      • borderStrokeColor: undefined | string

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

      • borderWidth: undefined | number

        Width of the button

      • fillStyle: undefined | string

        The css value of a tint color to be used to tint the BitmapText

      • font: undefined | string

        The name of the BitmapText font to use

      • hoverOffColor: undefined | string

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

      • hoverOnColor: undefined | string

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

      • size: undefined | number

        The scale factor of the BitmapText

      • text: undefined | string

        The text to display

      • textAlign: undefined | string

        horizontal text alignment

      • textBaseline: undefined | string

        the text baseline

    Returns UITextButton

    Example

    // 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));

Properties

GUID

GUID: string

(G)ame (U)nique (Id)entifier"
a GUID will be allocated for any renderable object added
to an object container (including the me.game.world container)

alpha

alpha: number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn

See

  • Renderable#setOpacity
  • Renderable#getOpacity

Default

1.0

alwaysUpdate

alwaysUpdate: boolean

Whether the renderable object will always update, even when outside of the viewport

Default

false

ancestor

ancestor: Container | Entity

a reference to the parent object that contains this renderable

Default

undefined

anchorPoint

anchorPoint: ObservablePoint

The anchor point is used for attachment behavior, and/or when applying transformations.
The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner

a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.

Note: Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation. To specify a value through Tiled, use a json expression like json:{"x":0.5,"y":0.5}.

Default

<0.5,0.5>

autoDepth

autoDepth: boolean

Specify if the children z index should automatically be managed by the parent container

Default

true

autoSort

autoSort: boolean

Specify if the children list should be automatically sorted when adding a new child

Default

true

autoTransform

autoTransform: boolean

When enabled, an object container will automatically apply any defined transformation before calling the child draw method.

Default

true

Example

// enable "automatic" transformation when the object is activated
onActivateEvent: function () {
    // reset the transformation matrix
    this.currentTransform.identity();
    // ensure the anchor point is the renderable center
    this.anchorPoint.set(0.5, 0.5);
    // enable auto transform
    this.autoTransform = true;
    ....
}

backgroundColor

backgroundColor: Color

define a background color for this container

Default

(0, 0, 0, 0.0)

Example

// add a red background color to this container
this.backgroundColor.setColor(255, 0, 0);

bindKey

bindKey: string

The key to bind the action to

bitmapText

bitmapText: BitmapText

the bitmapText used by the UITextButton class

blendMode

blendMode: string

the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)

Default

"normal"

See

  • CanvasRenderer#setBlendMode
  • WebGLRenderer#setBlendMode

body

body: Body

the renderable physic body

Example

// define a new Player Class
 class PlayerEntity extends me.Sprite {
     // constructor
     constructor(x, y, settings) {
         // call the parent constructor
         super(x, y , settings);

         // define a basic walking animation
         this.addAnimation("walk",  [...]);
         // define a standing animation (using the first frame)
         this.addAnimation("stand",  [...]);
         // set the standing animation as default
         this.setCurrentAnimation("stand");

         // add a physic body
         this.body = new me.Body(this);
         // add a default collision shape
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));
         // configure max speed, friction, and initial force to be applied
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);
         this.body.force.set(3, 0);
         this.isKinematic = false;

         // set the display to follow our position on both axis
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
     }

     ...

}

border

border: RoundRect

borderStrokeColor

borderStrokeColor: string

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

clipping

clipping: boolean

Specify if the container draw operation should clip his children to its own bounds

Default

false

currentTransform

currentTransform: Matrix2d

the renderable default transformation matrix

dimensions

dimensions: TextMetrics

edges

edges: Vector2d[]

The edges here are the direction of the nth edge of the polygon, relative to the nth point. If you want to draw a given edge from the edge value, you must first translate to the position of the starting point.

enableChildBoundsUpdate

enableChildBoundsUpdate: boolean

Specify if the container bounds should automatically take in account all child bounds when updated (this is expensive and disabled by default, only enable if necessary)

Default

false

floating

floating: boolean

If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.

Default

false

grabOffset

grabOffset: undefined | Vector2d

holdThreshold

holdThreshold: number

Tap and hold threshold timeout in ms

Default

250

holdTimeout

holdTimeout: number

hover

hover: boolean

true if the pointer is over the object

Default

false

hoverOffColor

hoverOffColor: string

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

hoverOnColor

hoverOnColor: string

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

indices

indices: number[]

a list of indices for all vertices composing this polygon

isClickable

isClickable: boolean

object can be clicked or not

Default

true

isDirty

isDirty: boolean

when true the renderable will be redrawn during the next update cycle

Default

true

isDraggable

isDraggable: boolean

object can be clicked or not

Default

false

isHoldable

isHoldable: boolean

object can be tap and hold

Default

false

isKinematic

isKinematic: boolean

If true then physic collision and input events will not impact this renderable

Default

true

isPersistent

isPersistent: boolean

make the renderable object persistent over level changes

Default

false

mask

mask:
    | Polygon
    | Rect
    | Ellipse
    | Line
    | RoundRect

A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.

Default

undefined

Example

// apply a mask in the shape of a Star
myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
   // draw a star
   {x: 0, y: 0},
   {x: 14, y: 30},
   {x: 47, y: 35},
   {x: 23, y: 57},
   {x: 44, y: 90},
   {x: 0, y: 62},
   {x: -44, y: 90},
   {x: -23, y: 57},
   {x: -47, y: 35},
   {x: -14, y: 30}
]);

name

name: string

The name of the renderable

Default

""

onChildChange

onChildChange: (() => void)

a callback to be extended, triggered after a child has been added or removed

onVisibilityChange

onVisibilityChange: Function

an event handler that is called when the renderable leave or enter a camera viewport

Default

undefined

Example

this.onVisibilityChange = function(inViewport) {
    if (inViewport === true) {
        console.log("object has entered the in a camera viewport!");
    }
};

points

points: Vector2d[]

Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.

pos

pos: Vector2d

origin point of the Polygon

released

released: boolean

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

Default

false

root

root: boolean

whether the container is the root of the scene

Default

false

shader

shader: GLShader

(Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)

Default

undefined

sortOn

sortOn: string

The property of the child object that should be used to sort on this container value : "x", "y", "z"

Default

"z"

textAlign

textAlign: string

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

Default

"center"

textBaseline

textBaseline: string

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

Default

"middle"

type

type: string = "Rectangle"

The shape type (used internally).

updateWhenPaused

updateWhenPaused: boolean

Whether to update this object when the game is paused.

Default

false

Accessors

bottom

centerX

centerY

depth

height

inViewport

isFlippedX

isFlippedY

isFloating

  • get isFloating(): boolean

  • Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container

    Returns boolean

    See

    Renderable#floating

left

parentApp

right

tint

top

width

Methods

addChild

  • addChild(child, z?): Renderable

  • Add a child to the container
    if auto-sort is disable, the object will be appended at the bottom of the list. Adding a child to the container will automatically remove it from its other container. Meaning a child can only have one parent. This is important if you add a renderable to a container then add it to the World container it will move it out of the orginal container. Then when the World container reset() method is called the renderable will not be in any container.
    if the given child implements a onActivateEvent method, that method will be called once the child is added to this container.

    Parameters

    • child: any

      Child to be added

    • Optionalz: number

      forces the z index of the child to the specified value

    Returns Renderable

    the added child

addChildAt

angleTo

centerOn

clone

contains

  • contains(x, y): boolean

  • Returns true if the polygon contains the given point.
    (Note: it is highly recommended to first do a hit test on the corresponding
    bounding rect, as the function can be highly consuming with complex shapes)

    Parameters

    • x: number

      x coordinate or a vector point to check

    • y: number

      y coordinate

    Returns boolean

    True if the polygon contain the point, otherwise false

    Example

    if (polygon.contains(10, 10)) {
      // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
      // do something
    }
  • contains(vector): boolean

  • Returns true if the polygon contains the given point.
    (Note: it is highly recommended to first do a hit test on the corresponding
    bounding rect, as the function can be highly consuming with complex shapes)

    Parameters

    Returns boolean

    True if the polygon contain the point, otherwise false

    Example

    if (polygon.contains(10, 10)) {
      // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
      // do something
    }

containsRectangle

copy

distanceTo

draw

equals

flipX

flipY

forEach

  • forEach(callback, thisArg?): void

  • The forEach() method executes a provided function once per child element.
    the callback function is invoked with three arguments:

    • The current element being processed in the array
    • The index of element in the array.
    • The array forEach() was called upon.

    Parameters

    • callback: Function

      fnction to execute on each element

    • OptionalthisArg: object

      value to use as this(i.e reference Object) when executing callback.

    Returns void

    Example

    // iterate through all children of this container
    container.forEach((child) => {
       // do something with the child
       child.doSomething();
    });
    container.forEach((child, index) => { ... });
    container.forEach((child, index, array) => { ... });
    container.forEach((child, index, array) => { ... }, thisArg);

getAbsolutePosition

getBounds

getChildAt

getChildByGUID

getChildByName

getChildByProp

  • getChildByProp(prop, value): Renderable[]

  • return the child corresponding to the given property and value.
    note : avoid calling this function every frame since it parses the whole object tree each time

    Parameters

    • prop: string

      Property name

    • value:
          | string
          | number
          | boolean
          | RegExp

      Value of the property

    Returns Renderable[]

    Array of childs

    Example

    // get the first child object called "mainPlayer" in a specific container :
    let ent = myContainer.getChildByProp("name", "mainPlayer");

    // or query the whole world :
    let ent = container.getChildByProp("name", "mainPlayer");

    // partial property matches are also allowed by using a RegExp.
    // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
    let allCoins = container.getChildByProp("name", /coin/i);

    // searching for numbers or other data types :
    let zIndex10 = container.getChildByProp("z", 10);
    let inViewport = container.getChildByProp("inViewport", true);

getChildByType

getChildIndex

getChildren

getIndices

getNextChild

getOpacity

getRootAncestor

hasChild

isAttachedToRoot

isConvex

isFinite

lookAt

moveDown

moveToBottom

moveToTop

moveUp

onClick

onCollision

  • onCollision(): boolean

  • onCollision callback, triggered in case of collision, when this renderable body is colliding with another one

    Returns boolean

    true if the object should respond to the collision (its position and velocity will be corrected)

    Example

    // colision handler
    onCollision(response) {
        if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
            // makes the other object solid, by substracting the overlap vector to the current position
            this.pos.sub(response.overlapV);
            this.hurt();
            // not solid
            return false;
        }
        // Make the object solid
        return true;
    },

onDestroyEvent

onHold

onMove

onOut

onOver

onRelease

overlaps

postDraw

preDraw

recalc

removeChild

removeChildNow

  • removeChildNow(child, keepalive?): void

  • Removes (and optionally destroys) a child from the container.
    (removal is immediate and unconditional)
    Never use keepalive=true with objects from pool. Doing so will create a memory leak.

    Parameters

    • child: any

      Child to be removed

    • Optionalkeepalive: boolean

      True to prevent calling child.destroy()

    Returns void

reset

resize

rotate

scale

  • scale(x, y?): Renderable

  • scale the renderable around his anchor point. Scaling actually applies changes to the currentTransform member wich is used by the renderer to scale the object when rendering. It does not scale the object itself. For example if the renderable is an image, the image.width and image.height properties are unaltered but the currentTransform member will be changed.

    Parameters

    • x: number

      a number representing the abscissa of the scaling vector.

    • Optionaly: number = x

      a number representing the ordinate of the scaling vector.

    Returns Renderable

    Reference to this object for method chaining

scaleV

setChildsProperty

setOpacity

setShape

setSize

setVertices

shift

sort

swapChildren

to2d

toIso

toPolygon

transform

translate

union

Protectedupdate

updateBounds

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods