Character vision in top down game

I have been working partly on a small game from time to time. You could say this is my passion project and something I work on small portions at the time. I have a love for games such as Diablo, Fallout 2 and Ice Wind Dale. That’s why I was interested in doing a top down game myself. It might be time to share some stuff I have done on this game, a couple of cool things. I want to start off by showing my circle of vision for my character. Later I will show off my inventory and then I will show other things like attributes and character system.

My characters vision is really simple. I have a circle in the middle that gives my character vision. This shows everything as is, normal colors, all enemies and items. Outside the circle however it is grey and dark, enemies don’t show and neither does items. Look at the YouTube video for a demonstration. This is done with the help of two things. Character sphere that overlaps items/enemies and post process effects material that makes everything outside the circle dark and de-saturated.

The material contains a spheremask that tells the material that everything outside the mask is de-saturated and dark, everything inside is just rendered normally. This is a post process material and is attached to an unbound post process volume. It also needs to follow the character and have a radius that can be adjusted runtime. I did this by making a material collection that I updated the vector location and float radius from my characters position. This way I can tell the post process material where it should show up in world. The radius comes in handy and is updated when the character equips and item that has +100 vision. Look at the YouTube video on the top to see this demonstrated.

The overlap is really simple. When enemies and items come inside the sphere they are visible, when they go outside the sphere they are not visible any more.

In time I will add more features as well, but I think this turned out pretty well for now.

Cheers .. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *