Class TMXLayer

a TMX Tile Layer Object Tiled QT 0.7.x format

Hierarchy (view full)

Constructors

Properties

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)

alpha: number

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

  • Renderable#setOpacity
  • Renderable#getOpacity
1.0
alwaysUpdate: boolean

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

false
ancestor: Container | Entity

a reference to the parent object that contains this renderable

undefined
anchorPoint: ObservablePoint

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

<0.5,0.5>
animatedTilesets: TMXTileset[]

All animated tilesets in this layer

autoTransform: boolean

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;
....
}
blendMode: string

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

"normal"
  • CanvasRenderer#setBlendMode
  • WebGLRenderer#setBlendMode
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);
}

...

}
canvasRenderer: undefined | CanvasRenderer
class: string

the layer class

cols: number
currentTransform: Matrix2d

the renderable default transformation matrix

edges: Vector2d[]

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.

floating: boolean

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

false
height: number
indices: number[]

a list of indices for all vertices composing this polygon

isAnimated: boolean

Layer contains tileset animations

isDirty: boolean

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

true
isKinematic: boolean

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

true
isPersistent: boolean

make the renderable object persistent over level changes

false
layerData: any[]
mask:
    | Polygon
    | Rect
    | Ellipse
    | Line
    | RoundRect

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}
]);
maxTileSize: {
    height: number;
    width: number;
}
name: any

The name of the renderable

""
onVisibilityChange: Function

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

undefined
this.onVisibilityChange = function(inViewport) {
if (inViewport === true) {
console.log("object has entered the in a camera viewport!");
}
};
orientation: string
points: Vector2d[]

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

preRender: any
renderer: any
renderorder: string

the order in which tiles on orthogonal tile layers are rendered. (valid values are "left-down", "left-up", "right-down", "right-up")

"right-down"
rows: number
shader: GLShader

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

undefined
tileheight: any
tileset: any
tilesets: TMXTilesetGroup

The Layer corresponding Tilesets

tilewidth: any
type: string = "Rectangle"

The shape type (used internally).

updateWhenPaused: boolean

Whether to update this object when the game is paused.

false
width: number
x: number

Horizontal layer offset in tiles

0
y: number

Vertical layer offset in tiles

0

Accessors

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

    Returns boolean

    Renderable#floating

Methods

  • Return the Tile object at the specified tile coordinates

    Parameters

    • x: number

      x position of the tile (in Tile unit)

    • y: number

      x position of the tile (in Tile unit)

    • OptionalboundsCheck: number

      check first if within the layer bounds

    Returns Tile

    corresponding tile or null if there is no defined tile at the position or if outside of the layer bounds

    // return the first tile at offset 0, 0
    let tile = layer.cellAt(0, 0);
  • clear the tile at the specified position

    Parameters

    • x: number

      X coordinate (in map coordinates: row/column)

    • y: number

      Y coordinate (in map coordinates: row/column)

    Returns void

    me.game.world.getChildByType(me.TMXLayer).forEach(function(layer) {
    // clear all tiles at the given x,y coordinates
    layer.clearTile(x, y);
    });
  • 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)

    Parameters

    • x: number

      x coordinate or a vector point to check

    • y: number

      y coordinate

    Returns boolean

    True if the polygon contain the point, otherwise false

    if (polygon.contains(10, 10)) {
    // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
    // do something
    }
  • 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)

    Parameters

    Returns boolean

    True if the polygon contain the point, otherwise false

    if (polygon.contains(10, 10)) {
    // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
    // do something
    }
  • Return the Tile object at the specified position

    Parameters

    • x: number

      X coordinate (in world/pixels coordinates)

    • y: number

      Y coordinate (in world/pixels coordinates)

    Returns Tile

    corresponding tile or null if there is no defined tile at the coordinate or if outside of the layer bounds

    // get the TMX Map Layer called "Front layer"
    let layer = me.game.world.getChildByName("Front Layer")[0];
    // get the tile object corresponding to the latest pointer position
    let tile = layer.getTile(me.input.pointer.x, me.input.pointer.y);
  • return a new the Tile object corresponding to the given tile id

    Parameters

    • tileId: number

      tileId

    • x: number

      X coordinate (in world/pixels coordinates)

    • y: number

      Y coordinate (in world/pixels coordinates)

    Returns Tile

    the tile object

  • Return the TileId of the Tile at the specified position

    Parameters

    • x: number

      X coordinate (in world/pixels coordinates)

    • y: number

      Y coordinate (in world/pixels coordinates)

    Returns number

    TileId or null if there is no Tile at the given position

  • Returns true if the vertices composing this polygon form a convex shape (vertices must be in clockwise order).

    Returns null | boolean

    true if the vertices are convex, false if not, null if not computable

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

    Returns boolean

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

    • x: number

      a number representing the abscissa of the scaling vector.

    • Optionaly: number = x

      a number representing the ordinate of the scaling vector.

    Returns Renderable

    Reference to this object for method chaining

  • Set the TMX renderer for this layer object

    Parameters

    • renderer: TMXRenderer

    Returns void

    // use the parent map default renderer
    let layer = new me.TMXLayer(...);
    layer.setRenderer(map.getRenderer());
  • assign the given Tile object to the specified position

    Parameters

    • tile: Tile

      the tile object to be assigned

    • x: number

      x coordinate (in world/pixels coordinates)

    • y: number

      y coordinate (in world/pixels coordinates)

    Returns Tile

    the tile object