layer data in JSON format (http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#layer)
layer data in JSON format (http://docs.mapeditor.org/en/stable/reference/tmx-map-format/#layer)
width of each tile in pixels
height of each tile in pixels
"isometric" or "orthogonal"
tileset as defined in Tiled
z-index position
(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}
.
All animated tilesets in this layer
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
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);
}
...
}
the layer class
the renderable default transformation matrix
The edges here are the direction of the n
th edge of the polygon, relative to
the n
th 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
Layer contains tileset animations
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.
undefined
// 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}
]);
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 recalc
afterwards so that the changes get applied correctly.
origin point of the Polygon
the order in which tiles on orthogonal tile layers are rendered. (valid values are "left-down", "left-up", "right-down", "right-up")
(Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)
The Layer corresponding Tilesets
The shape type (used internally).
Whether to update this object when the game is paused.
Horizontal layer offset in tiles
Vertical layer offset in tiles
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
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
Return the Tile object at the specified tile coordinates
x position of the tile (in Tile unit)
x position of the tile (in Tile unit)
Optional
boundsCheck: numbercheck first if within the layer bounds
corresponding tile or null if there is no defined tile at the position or if outside of the layer bounds
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
flip the renderable on the horizontal axis (around the center of the renderable)
Optional
flip: 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)
Optional
flip: boolean = truetrue
to flip this renderable.
Reference to this object for method chaining
Return the Tile object at the specified position
X coordinate (in world/pixels coordinates)
Y coordinate (in world/pixels coordinates)
corresponding tile or null if there is no defined tile at the coordinate or if outside of the layer bounds
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
return false;
}
// Make the object solid
return true;
},
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)
Optional
v: 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.
Optional
y: 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 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.
Optional
y: 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.
Optional
y: numberThe y offset. This parameter is required if the first parameter is a number.
Reference to this object for method chaining
a TMX Tile Layer Object Tiled QT 0.7.x format