Class: Renderable

me. Renderable

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
Source:
renderable.js, line 20

Extends

Classes

Error

Members

<static> alwaysUpdate :Boolean

Whether the renderable object will always update, even when outside of the viewport
Type:
  • Boolean
Default Value:
  • false
Source:
renderable.js, line 122

<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.
Type:
Default Value:
  • <0.5,0.5>
Source:
renderable.js, line 163

<static> autoTransform :Boolean

When enabled, an object container will automatically apply any defined transformation before calling the child draw method.
Type:
  • Boolean
Default Value:
  • true
Source:
renderable.js, line 180
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
Type:
Source:
renderable.js, line 43
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
Type:
Source:
renderable.js, line 87

<static> floating :Boolean

Define if a renderable follows screen coordinates (floating)
or the world coordinates (not floating)
Type:
  • Boolean
Default Value:
  • false
Source:
renderable.js, line 152

<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)
Type:
  • String
Source:
renderable.js, line 100

<static> height :Number

height of the Renderable bounding box
Type:
  • Number
Source:
renderable.js, line 581

<static, readonly> inViewport :Boolean

Whether the renderable object is visible and within the viewport
Type:
  • Boolean
Default Value:
  • false
Source:
renderable.js, line 111

<static> isKinematic :Boolean

If true then physic collision and input events will not impact this renderable
Type:
  • Boolean
Default Value:
  • true
Source:
renderable.js, line 33

<static> isPersistent :Boolean

make the renderable object persistent over level changes
Type:
  • Boolean
Default Value:
  • false
Source:
renderable.js, line 142

<static> pos :me.ObservableVector3d

Position of the Renderable relative to its parent container
Type:
Source:
renderable.js, line 259

<static> updateWhenPaused :Boolean

Whether to update this object when the game is paused.
Type:
  • Boolean
Default Value:
  • false
Source:
renderable.js, line 132

<static> width :Number

width of the Renderable bounding box
Type:
  • Number
Source:
renderable.js, line 557

alpha :Number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Type:
  • Number
Default Value:
  • 1.0
Source:
renderable.js, line 209
See:
  • me.Renderable#setOpacity
  • me.Renderable#getOpacity

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable, or undefined if it has not been added to one.
Type:
Default Value:
  • undefined
Source:
renderable.js, line 221

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
Source:
renderable.js, line 501

<static> flipX(flip) → {me.Renderable}

flip the renderable on the horizontal axis (around the center of the renderable)
Parameters:
Name Type Argument Default Description
flip Boolean <optional>
false `true` to flip this renderable.
Source:
renderable.js, line 326
See:
Returns:
Reference to this object for method chaining
Type
me.Renderable

<static> flipY(flip) → {me.Renderable}

flip the renderable on the vertical axis (around the center of the renderable)
Parameters:
Name Type Argument Default Description
flip Boolean <optional>
false `true` to flip this renderable.
Source:
renderable.js, line 340
See:
Returns:
Reference to this object for method chaining
Type
me.Renderable

<static> getBounds() → {me.Rect}

returns the bounding box for this renderable
Source:
renderable.js, line 287
Returns:
bounding box Rectangle object
Type
me.Rect

<static> getOpacity() → {Number}

get the renderable alpha channel value
Source:
renderable.js, line 298
Returns:
current opacity value between 0 and 1
Type
Number

<static> onDestroyEvent()

OnDestroy Notification function
Called by engine before deleting the object
Source:
renderable.js, line 545

<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
Source:
renderable.js, line 514

<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
Source:
renderable.js, line 459

<static> scale(x, y) → {me.Renderable}

scale the renderable around his anchor point
Parameters:
Name Type Argument 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.
Source:
renderable.js, line 371
Returns:
Reference to this object for method chaining
Type
me.Renderable

<static> scaleV(vector) → {me.Renderable}

scale the renderable around his anchor point
Parameters:
Name Type Description
vector me.Vector2d scaling vector
Source:
renderable.js, line 391
Returns:
Reference to this object for method chaining
Type
me.Renderable

<static> setOpacity(alpha)

set the renderable alpha channel value
Parameters:
Name Type Description
alpha Number opacity value between 0.0 and 1.0
Source:
renderable.js, line 309

<static> transform(matrix) → {me.Renderable}

multiply the renderable currentTransform with the given matrix
Parameters:
Name Type Description
matrix me.Matrix2d the transformation matrix
Source:
renderable.js, line 354
See:
  • me.Renderable#currentTransform
Returns:
Reference to this object for method chaining
Type
me.Renderable

<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.
Source:
renderable.js, line 404
Returns:
false