Renderable

class Renderable extends Rect

A base class for renderable objects.

Constructor

new Renderable(x: number, y: number, width: number, height: number) → {}

Parameters:
Name	Type	Description
x	number	position of the renderable object (accessible through inherited pos.x property)
y	number	position of the renderable object (accessible through inherited pos.y property)
width	number	object width
height	number	object height

Summary

Properties from Renderable

number	alpha = 1.0
boolean	alwaysUpdate = false
Container \| Entity	ancestor = undefined
ObservableVector2d	anchorPoint = <0.5,0.5>
boolean	autoTransform = true
string	blendMode = "normal"
Body	body
Matrix2d	currentTransform
number	depth
boolean	floating = false
string	GUID
boolean	inViewport = false
boolean	isDirty = true
boolean	isFlippedX
boolean	isFlippedY
boolean	isFloating
boolean	isKinematic = true
boolean	isPersistent = false
Rect \| RoundRect \| Polygon \| Line \| Ellipse	mask = undefined
string	name = ""
Function	onVisibilityChange = undefined
Application	parentApp
ObservableVector3d	pos
GLShader	shader = undefined
Color	tint = (255, 255, 255)
boolean	updateWhenPaused = false

Methods from Renderable

number	angleTo(target: Renderable \| Vector2d \| Vector3d)
number	distanceTo(target: Renderable \| Vector2d \| Vector3d)
	draw(renderer: CanvasRenderer \| WebGLRenderer, viewport: Camera2d)
Renderable	flipX(flip: boolean)
Renderable	flipY(flip: boolean)
Vector2d	getAbsolutePosition()
Bounds	getBounds()
number	getOpacity()
Renderable	lookAt(target: Renderable \| Vector2d \| Vector3d)
boolean	onCollision(response: ResponseObject, other: Renderable \| Container \| Entity \| Sprite \| NineSliceSprite)
	onDestroyEvent()
	postDraw(renderer: CanvasRenderer \| WebGLRenderer)
	preDraw(renderer: CanvasRenderer \| WebGLRenderer)
Renderable	rotate(angle: number, v: Vector2d \| ObservableVector2d)
Renderable	scale(x: number, y: number)
Renderable	scaleV(v: Vector2d)
	setOpacity(alpha: number)
Renderable	transform(m: Matrix2d)
boolean	update(dt: number)
Bounds	updateBounds(absolute: boolean)

Properties inherited from Rect

number	bottom
number	centerX
number	centerY
number	height
number	left
number	right
number	top
string	type = "Rectangle"
number	width

Properties inherited from Polygon

Array<Vector2d>

points

Methods inherited from Rect

Rect	centerOn(x: number, y: number)
Rect	clone()
boolean	contains(x: number \| Vector2d \| Rect, y: number)
Rect	copy(rect: Rect)
boolean	equals(rect: Rect)
boolean	isFinite()
boolean	overlaps(rect: Rect)
Rect	resize(w: number, h: number)
Rect	setShape(x: number, y: number, w: number \| Vector2d<Array>, h: number)
Polygon	toPolygon()
Rect	union(rect: Rect)

Methods inherited from Polygon

Array<number>	getIndices()
boolean	isConvex()
Polygon	recalc()
Polygon	setVertices(vertices: Array<Vector2d>)
	shift(x: number \| Vector2d, y: number)
Polygon	to2d()
Polygon	toIso()
Polygon	translate(x: number \| Vector2d, y: number)

Public Properties

alpha renderable.js:174

alpha: number = 1.0

number

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

See:

alwaysUpdate renderable.js:126

alwaysUpdate: boolean = false

boolean

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

ancestor renderable.js:184

ancestor: Container | Entity = undefined

Container | Entity

a reference to the parent object that contains this renderable

anchorPoint renderable.js:44

anchorPoint: ObservableVector2d = <0.5,0.5>

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.

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

autoTransform renderable.js:155

autoTransform: boolean = true

boolean

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

// 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;
    ....
}

blendMode renderable.js:221

blendMode: string = "normal"

string

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

See:

body renderable.js:67

body: Body

Body

the renderable physic body

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

      ...

 }

currentTransform renderable.js:59

currentTransform: Matrix2d

Matrix2d

the renderable default transformation matrix

depth renderable.js:317

depth: number

number

the depth of this renderable on the z axis

floating renderable.js:147

floating: boolean = false

boolean

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

GUID renderable.js:105

GUID: string

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)

inViewport renderable.js:329

inViewport: boolean = false

boolean

Whether the renderable object is visible and within the viewport

isDirty renderable.js:250

isDirty: boolean = true

boolean

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

isFlippedX renderable.js:346

isFlippedX: boolean

boolean

returns true if this renderable is flipped on the horizontal axis

See: Renderable#flipX

isFlippedY renderable.js:356

isFlippedY: boolean

boolean

returns true if this renderable is flipped on the vertical axis

See: Renderable#flipY

isFloating renderable.js:290

isFloating: boolean

boolean

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

See: Renderable#floating

isKinematic renderable.js:243

isKinematic: boolean = true

boolean

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

isPersistent renderable.js:140

isPersistent: boolean = false

boolean

make the renderable object persistent over level changes

mask renderable.js:191

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

Rect | RoundRect | Polygon | Line | 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.

// 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 renderable.js:230

name: string = ""

string

The name of the renderable

onVisibilityChange renderable.js:113

onVisibilityChange: Function = undefined

Function

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

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

parentApp renderable.js:276

parentApp

returns the parent application (or game) to which this renderable is attached to

Returns:
Type	Description
Application	the parent application or undefined if not attached to any container/app

pos renderable.js:33

pos: ObservableVector3d

ObservableVector3d

Position of the Renderable relative to its parent container

shader renderable.js:214

shader: GLShader = undefined

GLShader

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

tint renderable.js:299

tint: Color = (255, 255, 255)

Color

define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.

// add a red tint to this renderable
this.tint.setColor(255, 128, 128);
// remove the tint
this.tint.setColor(255, 255, 255);

updateWhenPaused renderable.js:133

updateWhenPaused: boolean = false

boolean

Whether to update this object when the game is paused.

Public Methods

angleTo renderable.js:444

angleTo(target: Renderable | Vector2d | Vector3d) → {number}

return the angle to the specified target

Parameters:
Name	Type	Description
target	Renderable \| Vector2d \| Vector3d

Returns:
Type	Description
number	angle in radians

distanceTo renderable.js:465

distanceTo(target: Renderable | Vector2d | Vector3d) → {number}

return the distance to the specified target

Parameters:
Name	Type	Description
target	Renderable \| Vector2d \| Vector3d

Returns:
Type	Description
number	distance

draw renderable.js:710

draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d) → {}

Draw this renderable (automatically called by melonJS). All draw operations for renderable are made respectively to the position or transforms set or applied by the preDraw method. The main draw loop will first call preDraw() to prepare the context for drawing the renderable, then draw() to draw the renderable, and finally postDraw() to clear the context. If you override this method, be mindful about the drawing logic; for example if you draw a shape from the draw method, you should make sure that your draw it at the 0, 0 coordinates.

Parameters:
Name	Type	Attributes	Description
renderer	CanvasRenderer \| WebGLRenderer		a renderer instance
viewport	Camera2d	<optional>	the viewport to (re)draw

See:

flipX renderable.js:407

flipX(flip: boolean) → {Renderable}

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

Parameters:
Name	Type	Attributes	Default	Description
flip	boolean	<optional>	true	`true` to flip this renderable.

Returns:
Type	Description
Renderable	Reference to this object for method chaining

See: Matrix2d#scaleX

flipY renderable.js:419

flipY(flip: boolean) → {Renderable}

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

Parameters:
Name	Type	Attributes	Default	Description
flip	boolean	<optional>	true	`true` to flip this renderable.

Returns:
Type	Description
Renderable	Reference to this object for method chaining

See: Matrix2d#scaleY

getAbsolutePosition renderable.js:621

getAbsolutePosition() → {Vector2d}

return the renderable absolute position in the game world

Returns:
Type	Description
Vector2d

getBounds renderable.js:366

getBounds() → {Bounds}

returns the bounding box for this renderable

Returns:
Type	Description
Bounds	bounding box Rectangle object

getOpacity renderable.js:384

getOpacity() → {number}

get the renderable alpha channel value

Returns:
Type	Description
number	current opacity value between 0 and 1

lookAt renderable.js:486

lookAt(target: Renderable | Vector2d | Vector3d) → {Renderable}

Rotate this renderable towards the given target.

Parameters:
Name	Type	Description
target	Renderable \| Vector2d \| Vector3d	the renderable or position to look at

Returns:
Type	Description
Renderable	Reference to this object for method chaining

onCollision renderable.js:755

onCollision(response: ResponseObject, other: Renderable | Container | Entity | Sprite | NineSliceSprite) → {boolean}

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

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

Parameters:
Name	Type	Description
response	ResponseObject	the collision response object
other	Renderable \| Container \| Entity \| Sprite \| NineSliceSprite	the other renderable touching this one (a reference to response.a or response.b)

Returns:
Type	Description
boolean	true if the object should respond to the collision (its position and velocity will be corrected)

onDestroyEvent renderable.js:844

onDestroyEvent() → {}

OnDestroy Notification function
Called by engine before deleting the object

postDraw renderable.js:727

postDraw(renderer: CanvasRenderer | WebGLRenderer) → {}

restore the rendering context after drawing (automatically called by melonJS).

Parameters:
Name	Type	Description
renderer	CanvasRenderer \| WebGLRenderer	a renderer object

See:

preDraw renderable.js:652

preDraw(renderer: CanvasRenderer | WebGLRenderer) → {}

Prepare the rendering context before drawing (automatically called by melonJS). This will apply any defined transforms, anchor point, tint or blend mode and translate the context accordingly to this renderable position.

Parameters:
Name	Type	Description
renderer	CanvasRenderer \| WebGLRenderer	a renderer object

See:

rotate renderable.js:507

rotate(angle: number, v: Vector2d | ObservableVector2d) → {Renderable}

Rotate this renderable by the specified angle (in radians).

Parameters:
Name	Type	Attributes	Description
angle	number		The angle to rotate (in radians)
v	Vector2d \| ObservableVector2d	<optional>	an optional point to rotate around

Returns:
Type	Description
Renderable	Reference to this object for method chaining

scale renderable.js:522

scale(x: number, y: number) → {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:
Type	Description
Renderable	Reference to this object for method chaining

scaleV renderable.js:539

scaleV(v: Vector2d) → {Renderable}

scale the renderable around his anchor point

Parameters:
Name	Type	Description
v	Vector2d	scaling vector

Returns:
Type	Description
Renderable	Reference to this object for method chaining

setOpacity renderable.js:392

setOpacity(alpha: number) → {}

set the renderable alpha channel value

Parameters:
Name	Type	Description
alpha	number	opacity value between 0.0 and 1.0

transform renderable.js:431

transform(m: Matrix2d) → {Renderable}

multiply the renderable currentTransform with the given matrix

Parameters:
Name	Type	Description
m	Matrix2d	the transformation matrix

Returns:
Type	Description
Renderable	Reference to this object for method chaining

See: Renderable#currentTransform

update renderable.js:549

update(dt: number) → {boolean}

update function (automatically called by melonJS).

Parameters:
Name	Type	Description
dt	number	time since the last update in milliseconds.

Returns:
Type	Description
boolean	true if the renderable is dirty

updateBounds renderable.js:558

updateBounds(absolute: boolean) → {Bounds}

update the bounding box for this shape.

Parameters:
Name	Type	Attributes	Default	Description
absolute	boolean	<optional>	true	update the bounds size and position in (world) absolute coordinates

Returns:
Type	Description
Bounds	this shape bounding box Rectangle object