top of page

Ball/ Player Silhouette

After play tests, we had feedback complaining about the lack of visibility of the enemy player, and ammo pickups. Resulting in players spending less time playing, having fun, and staying within the flow state -- but instead searching for needed objects. I worked on developing a shader, aimed to mitigate this issue. Marking the silhouette of the player/ ammo at all times, even when behind objects


Below is the final rendition of said shader, as you can see, there are some issues. Which I tried to resolve, but couldn't. For starters, the players silhouette fades away when in motion behind assets. This is exaggerated further by the thickness of said silhouette.


The silhouette is so thin due to the core premise of how this shader works. The beginning of the shader tests the depth of the asset, in relation to its surroundings. This is done per pixel, vertically and horizontally (to understand outline detection theory see this video). This creates a filled white mask for the character. Afterwards, another mask, this time black, sits inside the white mask. This mask is dependent on the number of pixels between the two- which frequently varies- depending on screen resolution, or distance to said asset. Below is an example. This mask can then be tinted any colour; only the white outline will be affected.


The above silhouette example seems so thin as it was rendered at a high resolution. In game, where players sit far away from one another, the mask is thicker, as there are less pixels available with distance. Fortunately, negating this issue.


The fading issue is caused by tone mapping. Currently, I am using "After Tone Mapping" to get this effect. Switching to "Before Tone Mapping" removes the fading issue, but introduces a new one. The silhouette jitters, which is very prominent at distance- when it's thicker. For it's use case, the fading isn't a issue- which is barely noticeable in game.

The example below is rendered at a lower resolution than prior, displaying how the line thickens, in relation to pixels available.


The first rendition of this shader only masked and highlighted the player, if they were obstructed, by reading their depth within the scene. This was much simpler to execute, but performed much worse in game.


The advantage being that the player and ball are much more visible to the player when obstructed. However, this is only when obstructed by another asset. Based on feedback, players desired constant "assisted visibility". Obviously, having the players constantly be masked a flat red wouldn't be optimal. The finalised shader combines the best of both worlds; constant visibility without being obnoxious.


I attempted to apply the same methods I used for cell shading to achieve this effect, but with every attempt I couldn't get the look I desired, as it functions of different principles. But, I'm very happy with the final result I did achieve, and it manages it's purpose.

References







bottom of page