A base class for renderable objects.
position of the renderable object (accessible through inherited pos.x property)
position of the renderable object (accessible through inherited pos.y property)
object width
object height
(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)
Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Whether the renderable object will always update, even when outside of the viewport
a reference to the parent object that contains this renderable
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}.
When enabled, an object container will automatically apply any defined transformation before calling the child draw method.
true
// 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;
....
}
the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
the renderable physic body
// define a new Player Class
classPlayerEntityextendsme.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 = newme.Body(this);
// add a default collision shape
this.body.addShape(newme.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);
}
...
}
the renderable default transformation matrix
The edges here are the direction of the nth edge of the polygon, relative to
the nth point. If you want to draw a given edge from the edge value, you must
first translate to the position of the starting point.
If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.
a list of indices for all vertices composing this polygon
when true the renderable will be redrawn during the next update cycle
If true then physic collision and input events will not impact this renderable
make the renderable object persistent over level changes
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.
The name of the renderable
an event handler that is called when the renderable leave or enter a camera viewport
Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.
origin point of the Polygon
(Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)
The shape type (used internally).
Whether to update this object when the game is paused.
bottom coordinate of the Rectangle
absolute center of this rectangle on the horizontal axis
absolute center of this rectangle on the vertical axis
the depth of this renderable on the z axis
height of the Rectangle
Whether the renderable object is visible and within the viewport
returns true if this renderable is flipped on the horizontal axis
returns true if this renderable is flipped on the vertical axis
Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container
The left coordinate of the Rectangle.
returns the parent application (or game) to which this renderable is attached to
the parent application or undefined if not attached to any container/app
right coordinate of the Rectangle
top coordinate of the Rectangle
width of the Rectangle
center the rectangle position around the given coordinates
the x coordinate around which to center this rectangle
the y coordinate around which to center this rectangle
this rectangle
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)
x coordinate or a vector point to check
y coordinate
True if the polygon contain the point, otherwise false
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)
True if the polygon contain the point, otherwise false
Returns true if the rectangle contains the given rectangle
rectangle to test
True if the rectangle contain the given rectangle, otherwise false
copy the position and size of the given rectangle into this one
Source rectangle
new rectangle
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.
a renderer instance
Optionalviewport: anythe viewport to (re)draw
Check if this rectangle is identical to the specified one.
Other rectangle.
true if equals
flip the renderable on the horizontal axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
flip the renderable on the vertical axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
Rotate this renderable towards the given target.
the renderable or position to look at
Reference to this object for method chaining
onCollision callback, triggered in case of collision, when this renderable body is colliding with another one
true if the object should respond to the collision (its position and velocity will be corrected)
// 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
returnfalse;
}
// Make the object solid
returntrue;
},
check if this rectangle is intersecting with the specified one
Other rectangle.
true if overlaps
restore the rendering context after drawing (automatically called by melonJS).
a renderer object
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.
a renderer object
Computes the calculated collision polygon.
This must be called if the points array, angle, or offset is modified manually.
Reference to this object for method chaining
resize the rectangle
new width of the rectangle
new height of the rectangle
this rectangle
Rotate this renderable by the specified angle (in radians).
The angle to rotate (in radians)
Optionalv: anyan optional point to rotate around
Reference to this object for method chaining
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.
a number representing the abscissa of the scaling vector.
Optionaly: number = xa number representing the ordinate of the scaling vector.
Reference to this object for method chaining
scale the renderable around his anchor point
scaling vector
Reference to this object for method chaining
set new value to the Polygon
position of the Polygon
position of the Polygon
array of vector or vertice defining the Polygon
this instance for objecf chaining
Set new dimensions for the rectangle.
The new width of the rectangle.
The new height of the rectangle.
set the vertices defining this Polygon
array of vector or vertice defining the Polygon
this instance for objecf chaining
Shifts the Polygon to the given position vector.
The x coordinate or a vector point to shift to.
Optionaly: numberThe y coordinate. This parameter is required if the first parameter is a number.
apply a 2d projection to this shapen
Reference to this object for method chaining
apply an isometric projection to this shape
Reference to this object for method chaining
multiply the renderable currentTransform with the given matrix
the transformation matrix
Reference to this object for method chaining
Translates the Polygon by the specified offset.
The x offset or a vector point to translate by.
Optionaly: numberThe y offset. This parameter is required if the first parameter is a number.
Reference to this object for method chaining
merge this rectangle with another one
other rectangle to union with
the union(ed) rectangle