a 2D orthographic camera
ReadonlyAXIS Axis definition
(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);
}
...
}
Camera bounds
the renderable default transformation matrix
Camera damping for smooth transition [0 .. 1]. 1 being the maximum value and will snap the camera to the target position
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.
the furthest point relative to the camera.
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
the closest point relative to the camera
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
the default camera projection matrix (2d cameras use an orthographic projection by default).
(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
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
Check if this rectangle is identical to the specified one.
Other rectangle.
true if equals
fadeIn effect
fade to the specified color
a CSS color value
Optionalduration: number = 1000expressed in milliseconds
OptionalonComplete: Functioncallback once effect is over
fadeOut(flash) effect
screen is filled with the specified color and slowly goes back to normal
a CSS color value
Optionalduration: number = 1000expressed in milliseconds
OptionalonComplete: Functioncallback once effect is over
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
set the camera position around the specified object
the renderable to focus the camera on
set the camera to follow the specified renderable.
(this will put the camera center around the given target)
renderable or position vector to follow
Optionalaxis: numberWhich axis to follow (see Camera2d.AXIS)
Optionaldamping: numberdefault damping value
check if the specified renderable is in the camera
to be checked against
Optionalfloating: boolean = obj.floatingif visibility check should be done against screen coordinates
true if within the viewport
convert the given "local" (screen) coordinates into world coordinates
the x coordinate of the local point to be converted
the y coordinate of the local point to be converted
Optionalv: Vector2d an optional vector object where to set the converted value
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
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 the camera boundaries (set to the world limit by default). the camera is bound to the given coordinates and cannot move/be scrolled outside of it.
world left limit
world top limit
world width limit
world height limit
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 the vertices defining this Polygon
array of vector or vertice defining the Polygon
this instance for objecf chaining
shake the camera
maximum offset that the screen can be moved while shaking
expressed in milliseconds
Optionalaxis: numberspecify on which axis to apply the shake effect (see Camera2d.AXIS)
OptionalonComplete: Functioncallback once shaking effect is over
Optionalforce: booleanif true this will override the current effect
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.
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