Hōrō - 放浪
How the field of view fog is achieved.
This post is not a beginner tutorial, it is just an explanation about how I achieved the smooth fog effect in the game.
To start off the game is grid based. The map is a rectangle of tiles, and these tiles represent walls, floors, and water. The game uses an FOV algorithm that you can find here. Every time the FOV updates I have a list of positions that are now visible. The tilemap displays visited tiles, which starts out blank, and the fog is an overlay on top of the of the game.
The fog in the game is actually an image, the image is the same size as the map rectangle, every pixel represents a position on the map. This image has filtering enabled, so when it's scaled up it will look blurry, but this is intentional as you will see later. I fill the image completely with black, and then loop through the visible tiles and set the corresponding pixels to white in the fog image. I then scale the image up by 2, which helps round off the corners a bit. The image is then drawn on top of the game so that the image matches up perfectly with the visible tilemap.
This is what the fog image looks like without the palette shader and without the fog shader.
The fog is rendered as completely black and as you can see here the shader uses the fog image to set the fog alpha. The visible area is set to an alpha of 0, while the alpha outside of the visible area is set to 0.5. If a tile has been seen before it will be darkened, otherwise it will be black because no tile is being rendered there.
And finally the fog shader uses the step function to sharpen the blurry image, giving the fog nice rounded corners.
As for the smooth transition between fog that happens as you walk. I keep the previous fog image and interpolate it with the new fog image over time every time the FOV updates. This makes the image fade from the old fog image to the new fog image, and because of the filtering on the image and the shader sharpening the edges it creates a nice smooth animation when the fog is fading.
I hope this post was helpful, thanks for reading!
Comments
Log in with itch.io to leave a comment.
Nice, super simple approach. I'd be curious what performance would look on the scale of something like an RTS, but I'd imagine something like an RPG with maps like this would be totally workable. It's just an image after all. :)
Yeah as you mentioned it's just an image, so it should be really cheap to render this even on very big maps. The performance depends more on the FOV algorithm you use and how often you update it. The one I'm using is pretty expensive, O(n^3), where n is the radius of the vision circle. But since the radius is pretty small and I only run it on the player's location, it's not too bad.