Continuing the RPG-JS topic, this time not blockchain specific but rather Tiled map editor focused, mostly, with todays topic - collisions!
For real though, collisions certainly have purpose and are an important factor in preventing your in-game character from breaking outwith the intended boundaries you are intend to impose within Tiled.
For example, you don't want a character to be able to walk on water, walk over a building or run up a sheer cliff face, would you? No.
So let's get into how to properly implement collisions shall we?
Launch Tiled, open a world and map, and select a tile from within your Tilesets tile selector like so:
Depending on how your Tileset has been configured, there may already exist some custom properties such as collision:
This custom property applied to a tile prevents your character from walking on it. Simple.
If you further add a custom property of z: 1 then your character will also walk behind the tile, intended for walking behind buildings for example.
Please remember to not try editing the tileset from within the right-hand sidebar tile editor window, rather select the tileset TSX file in the file sidebar, which will launch the TSX file into full screen - ready for you to edit custom properties into!
Now, a problem that I've run into when relying on this tile collision custom property is that if you're working with many tile layers that some layers above/below the tile with a collision may cancel the collision out.
So, if you're working with a single layer you can safely consider solely using the collision custom property to successfully implement character collision functionality.
However, if you're like me and are working with a dozen layers then you may want to try out the second method of implementing collisions...
What? Shapes? Yes, shapes!
Objects (edited via the object layer) are considered shapes by RPG-JS, they offer us the ability to easily draw rectangles, circles or custom polygons which either trigger a player function and/or have custom properties.
So, check out this shop cellar I've created for this example:
You can see that I've created 4 rectangle shapes, named wall#, each has the following properties:
And if the user somehow triggers the inShape player function, despite the collision custom property flag being set to true (boolean), then throw in this small chunk of code to avoid this edge case:
if (shape.name.includes("wall") || shape.name.includes("collision")) {
return; // avoid processing collision shapes
}
So you may notice that I check for wall and collision, that's because I switched naming conventions mid way through building my gallery.. lol!
Create one shape, give it a name like wall or collision, add the custom boolean collision property, then start copy/pasting it to save some time typing wall/collision repetitively.
Please bear in mind though, that all shapes need to have an unique name, so copy/pasting the one object called "wall" will result in just one wall existing and the rest being removed by the RPG-JS JSX compiler.
There's some more advanced Tiled functionality for implementing tile based collisions, however I've not had luck using it yet and have gotten into the stride of using collision shapes now..
https://doc.mapeditor.org/en/stable/manual/editing-tilesets/#tile-collision-editor
Reply below if you have luck using the tile collision editor!
Have any questions? Comment below!
These developments were brought to you by the NFTEA Gallery.
Consider collecting an NFTEA NFT to or donate to the following BTS or EOS blockchain accounts directly, to continued developments.