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 |
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:
-
- me.Body
- me.collision#check
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
-
isDirty :Boolean
-
when true the renderable will be redrawn during the next update cycle
- Inherited From:
- Default Value:
- false
-
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 changepoints
, you must callrecalc
afterwards 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
-
define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.
- Inherited From:
- Default Value:
- (255, 255, 255)
Example
// add a red tint to this renderable this.tint.setColor(255, 128, 128); // remove the tint this.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
- 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
- Inherited From:
-
protected draw(renderer)
-
object draw.
automatically called by the game managerme.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
- 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.- Inherited From:
- See:
-
- me.Matrix2d#scaleX
-
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.- Inherited From:
- See:
-
- me.Matrix2d#scaleY
-
getBounds() → {me.Rect}
-
returns the bounding box for this renderable
- 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
- 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:
-
lookAt(target) → {me.Renderable}
-
Rotate this renderable towards the given target.
Parameters:
Name Type Description target
me.Renderable | me.Vector2d | me.Vector3d the renderable or position to look at
- Inherited From:
-
onClick(event)
-
function called when the object is pressed
to be extended
return false if we need to stop propagating the eventParameters:
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 eventParameters:
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 managerme.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 managerme.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
- 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
- Inherited From:
- See:
-
rotate(angle) → {me.Renderable}
-
Rotate this renderable by the specified angle (in radians).
Parameters:
Name Type Description angle
Number The angle to rotate (in radians)
- 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.
- Inherited From:
-
scaleV(vector) → {me.Renderable}
-
scale the renderable around his anchor point
Parameters:
Name Type Description vector
me.Vector2d scaling vector
- 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
- 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
- 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
- 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()
- 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
- Inherited From:
-
to2d() → {me.Polygon}
-
apply a 2d projection to this shape
- Inherited From:
-
toIso() → {me.Polygon}
-
apply an isometric projection to this shape
- Inherited From:
-
toPolygon() → {me.Polygon}
-
Returns a polygon whose edges are the same as this box.
- Inherited From:
-
transform(matrix) → {me.Renderable}
-
multiply the renderable currentTransform with the given matrix
Parameters:
Name Type Description matrix
me.Matrix2d the transformation matrix
- 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
- Inherited From:
-
translateV(v) → {me.Rect}
-
translate the rect by the specified vector
Parameters:
Name Type Description v
me.Vector2d vector offset
- Inherited From:
-
union(rect) → {me.Rect}
-
merge this rectangle with another one
Parameters:
Name Type Description rect
me.Rect other rectangle to union with
- Inherited From:
-
protected update(dt)
-
update function.
automatically called by the game managerme.game
Parameters:
Name Type Description dt
Number time since the last update in milliseconds.
Returns:
-false
- Inherited From: