Be prepared for collision changes coming in v1.2.0!

[Jay Oster]

I'm super happy to announce some of the changes you can expect to see in the next major release of melonJS, and especially thrilled about the new collision system. However, I think we all might have trouble with the upgrade path if we aren't prepared for these changes. So in the interest of making the upgrade as smooth as possible for everyone, I'm going to make a few recommendations at the end of this post on what you can do to ease the transition. We decided not to use a "deprecation" pattern when we make breaking changes within the engine, because it keeps our code base small and clean. But that also means that it can be harsh and difficult to update existing games to use newer versions of the engine. To remedy that, we'd like to announce some of these breaking features, to give you some time to prepare for the changes.

So lets begin! The first big change to discuss is the collision system. melonJS has always used a simple tile-based collision system which is easy to understand once you see it in the tutorial. And almost all games made with melonJS have been built with collisions defined as a special tile layer within the map. (There are some notable exceptions, including a few games I've built with collisions handled by an entirely separate physics engine.) Version 1.2.0 throws everything away related to the old tile-based collision layer. Replacing it will be an object layer (also named "collision") that may contain any Tiled-supported shape; Rectangles, Ellipses, Polygons, and Poly-Lines. These shapes can be rotated and scaled freely, giving an infinite number of configurations for your world's shape! You're no longer limited to straight lines and 45-degree angles. And it's also very easy to stretch one giant rectangle to cover your ground, or place a wall; you don't have to deal with complicated patterns or limit yourself to a specific tile size just for collisions. All around it's a great advancement for melonJS, and will mark the first time the engine can do proper collision support for isometric maps.

As for what you can do to prepare for this amazing change? Simple! Add a new object layer to your maps, name it "collision", and add all of your world shapes to it. You can leave both the new and old collision layers in your maps until after the update. Then just delete the old collision layer and its tileset when you're ready.

melonJS 1.2.0 is scheduled for release at the end of the month. A beta is coming in the next few days! Stay tuned.

[Jay Oster]

Here's an example of what the platformer map now looks like in the Tiled map editor with the new shape-based collision layer:

There are red outlines around the ground blocks and floating blocks which define the collision shapes. Some interesting pieces are the small hill, which is created as part of a large 5-sided polygon. And the pillar with the coin, which uses a single-segment Poly-Line. These Poly-Lines are given custom properties (we called it "platform", and gave it a value of "true" because why not...) that user code within the Platformer example inspects, and treats the collision handling in a special way.

Any platform tiles in your current maps need to be handled similarly for the new collision system. The code for implementing the custom "platform" collisions is here: https://github.com/melonjs/melonJS/blob/1824472c50c7a3c7fda1193f7c34d429dbc420ee/examples/platformer/js/entities/entities.js#L116-L134 This code handles the one-way collision, and allows dropping through the platform when holding the "down" key.

And finally, like platforms, ladder tiles are also no longer supported directly by the engine. But they can be implemented using custom collision handlers and a state machine for handling control inputs. (See this thread: https://groups.google.com/d/msg/melonjs/YQ0zE8T3vsc/5YOT9BuRqe0J)