How to define world collision shapes in Tiled

Adding collision shape layer to your world in Tiled is pretty simple, for this you simply need to create a new object layer named "collision" and add some basic shapes to it. That's all it takes !

Note that the object layer used for collision name MUST contain the keyword "collision" for the engine to recognize it as a collision object layer.

Once the layer has been created, select it, and just "draw" your level collision map by adding any shape using the object toolbar :

In the below example, note the Rectangular shape (in dotted line) we added below the player position to define the floor area:

Please note that melonJS implements collision detection using the Separating Axis Theorem algorithm. All polygons used for collision are required to be convex with all vertices defined with clockwise winding. A polygon is convex when all line segments connecting two points in the interior do not cross any edge of the polygon (which means that all angles are less than 180 degrees), as shown here below :

A polygon's "winding" is clockwise if its vertices (points) are declared turning to the right.

Also if you need complex shapes to specify the perimeter of the environment, then it is recommended to use separate line segments. Lines can also be used for example when defining platform or wall elements, where you only need a specific side of the object to be collidable.