Beginners Devlog 2: Tilemap Shadows in Phaser 3 - Come on the Sunny Side

As i tried to build my first game, i fiddled around with RPG Maker and there is a shadow-tool in the editor that creates half transparent tiles on a higher level to simulate a shadow. I looked for this feature in Tiled editor but couldn't find it (... is there one?).

The RPG Maker shadow solution is also very basic. For example: The character sprites, even if they are standing in shadow, are never tinted like that. The shadows are only for "decoration" in the map and have no influence on the game at all. So i was eager to do it a bit better than that. And that is how it looks like now, it's not perfect, but i think it's even better than in RPG Maker.

My solution was to create my own little tileset with Aseprite. I just did it like in RPG Maker and build a set with black 50% alpha tiles like a wall tileset. And then put the tiles on a layer above the others on the right side of every building.

It's sounds like a simple solution but it escalated quickly, because the first version worked for most situations but not for all ... Look at this situation when the player is standing outside the shadow but the head is shadowed because of the tile overlay. I didn't like it when i walked on the sidewalk and at every building this glitch happened. Of course the same thing happening if you stand on the upper corner of a building and the head is already in the sun but the body still looks shadowed.

So i tried to fix that problem ... I moved the shadow layer under (!) the character (setDepth in Phaser) and then i had the behaviour like in RPG Maker (... the shadow never effects the player sprite). Then i build a little fix based on a tilemap collision check. Every time the player stands on a shadow tile i tint him with setTint()-method on the sprite object.

The collider is only on the shadows layer and it checks if there is any tile put on the position (tile.index !== -1) ... because on this layer are only shadows. Else clear the tint ... it works but i am not sure if it's a very performance consuming solution for that little improvement. But for now i am quite happy with it and let it like that for now.

Even such tiny things like the shadow handling could get hard quickly :) ... but i like to get every little detail as good as possible. If you have questions and even better ideas to do that, just leave a comment below.