me.GUI_Object(x, y, settings)

new GUI_Object(x, y, settings)

GUI Object
A very basic object to manage GUI elements
The object simply register on the "pointerdown"
or "touchstart" event and call the onClick function"

Parameters:
Name Type Description
x Number

the x coordinate of the GUI Object
y Number

the y coordinate of the GUI Object
settings Object

See me.Sprite
Example
// create a basic GUI Object
var myButton = me.GUI_Object.extend(
{
   init:function (x, y)
   {
      var settings = {}
      settings.image = "button";
      settings.framewidth = 100;
      settings.frameheight = 50;
      // super constructor
      this._super(me.GUI_Object, "init", [x, y, settings]);
      // define the object z order
      this.pos.z = 4;
   },

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

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

Extends

Members

alpha :Number

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

Inherited From:
Default Value:
  • 1.0
See:

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable

Inherited From:
Default Value:
  • undefined

anchorPoint :me.ObservableVector2d

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.

Inherited From:
Default Value:
  • <0.5,0.5>

animationpause :Boolean

pause and resume animation

Inherited From:
Default Value:
  • false

animationspeed :Number

animation cycling speed (delay between frame in ms)

Inherited From:
Default Value:
  • 100

body :me.Body

the renderable physic body

Inherited From:
See:
Example
// define a new Player Class
 game.PlayerEntity = me.Sprite.extend({
     // constructor
     init:function (x, y, settings) {
         // call the parent constructor
         this._super(me.Sprite, 'init', [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 and friction
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);

         // enable physic collision (off by default for basic me.Renderable)
         this.isKinematic = false;

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

     ...

}

currentTransform :me.Matrix2d

the renderable default transformation matrix

Inherited From:

holdThreshold :number

Tap and hold threshold timeout in ms

Default Value:
  • 250

hover :boolean

true if the pointer is over the object

Default Value:
  • false

isClickable :boolean

object can be clicked or not

Default Value:
  • true

isHoldable :boolean

object can be tap and hold

Default Value:
  • false

mask :me.Rect|me.Polygon|me.Line|me.Ellipse

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.

Inherited From:
Default Value:
  • 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}
]);

offset :me.Vector2d

global offset for the position to draw from on the source image.

Inherited From:
Default Value:
  • <0.0,0.0>

onVisibilityChange :function

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

Inherited From:
Default Value:
  • undefined
Example
this.onVisibilityChange = function(inViewport) {
    if (inViewport === true) {
        console.log("object has entered the in a camera viewport!");
    }
};

points :Array.<me.Vector2d>

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

Inherited From:

pos :me.ObservableVector3d

Position of the Renderable relative to its parent container

Inherited From:

source :me.video.renderer.Texture

The source texture object this sprite object is using

Inherited From:

tint :me.Color

apply a tint to this renderable (WebGL Only)

Inherited From:
Default Value:
  • undefined
Example
// add a red tint to this renderable
this.renderable.tint = new me.Color(255, 128, 128);
// disable the tint
this.renderable.tint.setColor(255, 255, 255);

Methods

addAnimation(name, index, animationspeedopt) → {Number}

add an animation
For fixed-sized cell sprite sheet, the index list must follow the logic as per the following example :

Parameters:
Name Type Attributes Description
name String

animation id
index Array.<Number> | Array.<String> | Array.<Object>

list of sprite index or name defining the animation. Can also use objects to specify delay for each frame, see below
animationspeed Number <optional>

cycling speed for animation in ms
Returns:
Number -

frame amount of frame added to the animation (delay between each frame).

Inherited From:
See:
Example
// walking animation
this.addAnimation("walk", [ 0, 1, 2, 3, 4, 5 ]);
// standing animation
this.addAnimation("stand", [ 11, 12 ]);
// eating animation
this.addAnimation("eat", [ 6, 6 ]);
// rolling animation
this.addAnimation("roll", [ 7, 8, 9, 10 ]);
// slower animation
this.addAnimation("roll", [ 7, 8, 9, 10 ], 200);
// or get more specific with delay for each frame. Good solution instead of repeating:
this.addAnimation("turn", [{ name: 0, delay: 200 }, { name: 1, delay: 100 }])
// can do this with atlas values as well:
this.addAnimation("turn", [{ name: "turnone", delay: 200 }, { name: "turntwo", delay: 100 }])
// define an dying animation that stop on the last frame
this.addAnimation("die", [{ name: 3, delay: 200 }, { name: 4, delay: 100 }, { name: 5, delay: Infinity }])
// set the standing animation as default
this.setCurrentAnimation("stand");

clone() → {me.Rect}

clone this rectangle

Returns:
me.Rect -

new rectangle

Inherited From:

contains(rect) → {boolean}

check if this rectangle contains the specified one

Parameters:
Name Type Description
rect me.Rect
Returns:
boolean -

true if contains

Inherited From:

containsPoint(x, y) → {boolean}

check if this rectangle contains the specified point

Parameters:
Name Type Description
x Number

x coordinate
y Number

y coordinate
Returns:
boolean -

true if contains

Inherited From:

containsPointV(point) → {boolean}

check if this Polygon contains the specified point

Parameters:
Name Type Description
point me.Vector2d
Returns:
boolean -

true if contains

Inherited From:

copy(rect) → {me.Rect}

copy the position and size of the given rectangle into this one

Parameters:
Name Type Description
rect me.Rect

Source rectangle
Returns:
me.Rect -

new rectangle

Inherited From:

protected draw(renderer)

object draw.
automatically called by the game manager me.game

Parameters:
Name Type Description
renderer me.CanvasRenderer | me.WebGLRenderer

a renderer object
Inherited From:

equals(rect) → {boolean}

check if this rectangle is identical to the specified one

Parameters:
Name Type Description
rect me.Rect
Returns:
boolean -

true if equals

Inherited From:

flicker(duration, callback) → {me.Sprite}

make the object flicker

Parameters:
Name Type Description
duration Number

expressed in milliseconds
callback function

Function to call when flickering ends
Returns:
me.Sprite -

Reference to this object for method chaining

Inherited From:
Example
// make the object flicker for 1 second
// and then remove it
this.flicker(1000, function () {
    me.game.world.removeChild(this);
});

flipX(flipopt) → {me.Renderable}

flip the renderable on the horizontal axis (around the center of the renderable)

Parameters:
Name Type Attributes Default Description
flip Boolean <optional>
 false

true to flip this renderable.
Returns:
me.Renderable -

Reference to this object for method chaining

Inherited From:
See:

flipY(flipopt) → {me.Renderable}

flip the renderable on the vertical axis (around the center of the renderable)

Parameters:
Name Type Attributes Default Description
flip Boolean <optional>
 false

true to flip this renderable.
Returns:
me.Renderable -

Reference to this object for method chaining

Inherited From:
See:

getBounds() → {me.Rect}

returns the bounding box for this renderable

Returns:
me.Rect -

bounding box Rectangle object

Inherited From:

getCurrentAnimationFrame() → {Number}

return the current animation frame index.

Returns:
Number -

current animation frame index

Inherited From:

getIndices(a) → {me.Polygon}

returns a list of indices for all triangles defined in this polygon

Parameters:
Name Type Description
a Array.<Vector2d>

list of vector
Returns:
me.Polygon -

this Polygon

Inherited From:

getOpacity() → {Number}

get the renderable alpha channel value

Returns:
Number -

current opacity value between 0 and 1

Inherited From:

isCurrentAnimation(name) → {Boolean}

return true if the specified animation is the current one.

Parameters:
Name Type Description
name String

animation id
Returns:
Boolean
Inherited From:
Example
if (!this.isCurrentAnimation("walk")) {
    // do something funny...
}

isFinite() → {boolean}

determines whether all coordinates of this rectangle are finite numbers.

Returns:
boolean -

false if all coordinates are positive or negative Infinity or NaN; otherwise, true.

Inherited From:

isFlickering() → {Boolean}

return the flickering state of the object

Returns:
Boolean
Inherited From:

onClick(event)

function called when the object is pressed
to be extended
return false if we need to stop propagating the event

Parameters:
Name Type Description
event Event

the event object

onHold()

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

onOut(event)

function called when the pointer is leaving the object area

Parameters:
Name Type Description
event Event

the event object

onOver(event)

function called when the pointer is over the object

Parameters:
Name Type Description
event Event

the event object

onRelease(event)

function called when the object is pressed and released
to be extended
return false if we need to stop propagating the event

Parameters:
Name Type Description
event Event

the event object

overlaps(rect) → {boolean}

check if this rectangle is intersecting with the specified one

Parameters:
Name Type Description
rect me.Rect
Returns:
boolean -

true if overlaps

Inherited From:

protected postDraw(renderer)

restore the rendering context after drawing.
automatically called by the game manager me.game

Parameters:
Name Type Description
renderer me.CanvasRenderer | me.WebGLRenderer

a renderer object
Inherited From:

protected preDraw(renderer)

prepare the rendering context before drawing (apply defined transforms, anchor point).
automatically called by the game manager me.game

Parameters:
Name Type Description
renderer me.CanvasRenderer | me.WebGLRenderer

a renderer object
Inherited From:

resize(w, h) → {me.Rect}

resize the rectangle

Parameters:
Name Type Description
w Number

new width of the rectangle
h Number

new height of the rectangle
Returns:
me.Rect -

this rectangle

Inherited From:

reverseAnimation(nameopt) → {me.Sprite}

reverse the given or current animation if none is specified

Parameters:
Name Type Attributes Description
name String <optional>

animation id
Returns:
me.Sprite -

Reference to this object for method chaining

Inherited From:
See:

rotate(angle) → {me.Polygon}

Rotate this Polygon (counter-clockwise) by the specified angle (in radians).

Parameters:
Name Type Description
angle Number

The angle to rotate (in radians)
Returns:
me.Polygon -

Reference to this object for method chaining

Inherited From:

scale(x, yopt) → {me.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:
Name Type Attributes Default Description
x Number

a number representing the abscissa of the scaling vector.
y Number <optional>
 x

a number representing the ordinate of the scaling vector.
Returns:
me.Renderable -

Reference to this object for method chaining

Inherited From:

scaleV(vector) → {me.Renderable}

scale the renderable around his anchor point

Parameters:
Name Type Description
vector me.Vector2d

scaling vector
Returns:
me.Renderable -

Reference to this object for method chaining

Inherited From:

setAnimationFrame(indexopt) → {me.Sprite}

force the current animation frame index.

Parameters:
Name Type Attributes Default Description
index Number <optional>
 0

animation frame index
Returns:
me.Sprite -

Reference to this object for method chaining

Inherited From:
Example
// reset the current animation to the first frame
this.setAnimationFrame();

setCurrentAnimation(name, onCompleteopt) → {me.Sprite}

set the current animation this will always change the animation & set the frame to zero

Parameters:
Name Type Attributes Description
name String

animation id
onComplete String | function <optional>

animation id to switch to when complete, or callback
Returns:
me.Sprite -

Reference to this object for method chaining

Inherited From:
Example
// set "walk" animation
this.setCurrentAnimation("walk");

// set "walk" animation if it is not the current animation
if (this.isCurrentAnimation("walk")) {
    this.setCurrentAnimation("walk");
}

// set "eat" animation, and switch to "walk" when complete
this.setCurrentAnimation("eat", "walk");

// set "die" animation, and remove the object when finished
this.setCurrentAnimation("die", (function () {
   me.game.world.removeChild(this);
   return false; // do not reset to first frame
}).bind(this));

// set "attack" animation, and pause for a short duration
this.setCurrentAnimation("die", (function () {
   this.animationpause = true;

   // back to "standing" animation after 1 second
   setTimeout(function () {
       this.setCurrentAnimation("standing");
   }, 1000);

   return false; // do not reset to first frame
}).bind(this));

setOpacity(alpha)

set the renderable alpha channel value

Parameters:
Name Type Description
alpha Number

opacity value between 0.0 and 1.0
Inherited From:

setPoints(points) → {me.Rect}

resize the rectangle to contain all the given points coordinates.

Parameters:
Name Type Description
points Array.<me.Vector2d>

array of vector defining a shape
Returns:
me.Rect -

this shape bounding box Rectangle object

Inherited From:

setRegion(region) → {me.Sprite}

change the current texture atlas region for this sprite

Parameters:
Name Type Description
region Object

typically returned through me.Texture.getRegion()
Returns:
me.Sprite -

Reference to this object for method chaining

Inherited From:
See:
  • me.Texture.getRegion
Example
// change the sprite to "shadedDark13.png";
mySprite.setRegion(game.texture.getRegion("shadedDark13.png"));

setShape(x, y, w|points, hopt) → {me.Rect}

set new value to the rectangle shape

Parameters:
Name Type Attributes Description
x Number

position of the Rectangle
y Number

position of the Rectangle
w|points Number | Array

width of the rectangle, or an array of vector defining the rectangle
h Number <optional>

height of the rectangle, if a numeral width parameter is specified
Returns:
me.Rect -

this rectangle

Inherited From:

to2d() → {me.Polygon}

apply a 2d projection to this shape

Returns:
me.Polygon -

Reference to this object for method chaining

Inherited From:

toIso() → {me.Polygon}

apply an isometric projection to this shape

Returns:
me.Polygon -

Reference to this object for method chaining

Inherited From:

toPolygon() → {me.Polygon}

Returns a polygon whose edges are the same as this box.

Returns:
me.Polygon -

a new Polygon that represents this rectangle.

Inherited From:

transform(matrix) → {me.Renderable}

multiply the renderable currentTransform with the given matrix

Parameters:
Name Type Description
matrix me.Matrix2d

the transformation matrix
Returns:
me.Renderable -

Reference to this object for method chaining

Inherited From:
See:

translate(x, y) → {me.Rect}

translate the rect by the specified offset

Parameters:
Name Type Description
x Number

x offset
y Number

y offset
Returns:
me.Rect -

this rectangle

Inherited From:

translateV(v) → {me.Rect}

translate the rect by the specified vector

Parameters:
Name Type Description
v me.Vector2d

vector offset
Returns:
me.Rect -

this rectangle

Inherited From:

union(rect) → {me.Rect}

merge this rectangle with another one

Parameters:
Name Type Description
rect me.Rect

other rectangle to union with
Returns:
me.Rect -

the union(ed) rectangle

Inherited From:

protected update(dt)

update function.
automatically called by the game manager me.game

Parameters:
Name Type Description
dt Number

time since the last update in milliseconds.
Returns:
-

false

Inherited From: