me.Renderable(x, y, width, height)

new Renderable(x, y, width, height)

A base class for renderable objects.

Parameters:
Name Type Description
x Number

position of the renderable object

y Number

position of the renderable object

width Number

object width

height Number

object height

Extends

Members

static alwaysUpdate :Boolean

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

Default Value:
  • false

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

Default Value:
  • <0.5,0.5>

static autoTransform :Boolean

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

Default Value:
  • true
Example
// enable "automatic" transformation when the object is activated
onActivateEvent: function () {
    // reset the transformation matrix
    this.renderable.currentTransform.identity();
    // ensure the anchor point is the renderable center
    this.renderable.anchorPoint.set(0.5, 0.5);
    // enable auto transform
    this.renderable.autoTransform = true;
    ....
},
// add a rotation effect when updating the entity
update : function (dt) {
    ....
    this.renderable.currentTransform.rotate(0.025);
    ....
    return this._super(me.Entity, 'update', [dt]);
},

static body :me.Body

the renderable physic body

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);
     },

     ...

}

static currentTransform :me.Matrix2d

the renderable default transformation matrix

static 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 Value:
  • false

static 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)

static height :Number

height of the Renderable bounding box

static, readonly inViewport :Boolean

Whether the renderable object is visible and within the viewport

Default Value:
  • false

static isKinematic :Boolean

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

Default Value:
  • true

static isPersistent :Boolean

make the renderable object persistent over level changes

Default Value:
  • false

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

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}
]);

static name :String

The name of the renderable

Default Value:
  • ""

static onVisibilityChange :function

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

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

static pos :me.ObservableVector3d

Position of the Renderable relative to its parent container

static tint :me.Color

apply a tint to this renderable (WebGL Only)

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

static updateWhenPaused :Boolean

Whether to update this object when the game is paused.

Default Value:
  • false

static width :Number

width of the Renderable bounding box

alpha :Number

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

Default Value:
  • 1.0
See:
  • me.Renderable#setOpacity
  • me.Renderable#getOpacity

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable

Default Value:
  • undefined

Methods

protected, static draw(renderer)

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

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

a renderer object

static 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

See:

static 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

See:

static getBounds() → {me.Rect}

returns the bounding box for this renderable

Returns:
me.Rect -

bounding box Rectangle object

static getOpacity() → {Number}

get the renderable alpha channel value

Returns:
Number -

current opacity value between 0 and 1

static onDestroyEvent()

OnDestroy Notification function
Called by engine before deleting the object

protected, static 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

protected, static 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

static scale(x, yopt) → {me.Renderable}

scale the renderable around his anchor point

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

static 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

static setOpacity(alpha)

set the renderable alpha channel value

Parameters:
Name Type Description
alpha Number

opacity value between 0.0 and 1.0

static 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

See:
  • me.Renderable#currentTransform

protected, static 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