Monaco style Fog of War?

For those unaware, basically its a top down game where only line of sight is displayed. The areas that aren’t in sight are replaced with a blueprint texture of the level.


Is it possible to implement this in Unreal Engine?

Monaco does it by using a triangle fan linked to all edges from the location of the character. The fan is then used as a mask for the lighting.
Is it possible to create a triangle fan using the material system?

If not, the lighting system in Unreal Engine is amazing. Is it possible to set up a shader that can tell how well lit things are and make the mask based off of that. My thought there is the lighting system would handle line of sight, and this could be used to make the mask.

It should indeed be possible to generate those fan shapes using the material editor. What you’d be looking for is the vectortoradialvalue material function. You would use worldposition minus character position to get a coordinate plane centered around your character. Those coordinates would give you the ability to create a radial gradient. To rotate it, you’d rotate the worldcoordinates. One way would be componentmask rg and use a texture rotator node. Or you could use a vector3 with the rotateaboutaxis node and add the results of that back to the worldcoordinates. You’d need to solve the offsets to rotate it the right amount by adding half the Desired FOV of the cone to the rotation.

You could do this within a translucent plane or foreground plane with a post process style approach by doing the same as above using worldpositionbehindtranslucency. Using that node you can do all sorts of things like project onto the world.

It is probably just as easy to do this using a vertex shader using a mesh that writes custom depth and do the darkening using post processing.

Also if these are for lights, you could do the same thing in the lights light function using light vector instead.

This should be possible, something similar to luigui’s Mansion?

I would make a mesh the size of the area you want to light up, then set that invisible and to Custom Depth Render, then within the post process blendable material use the Custom Depth pass to mix the regular screen output (as seen within the lit up area) with a darker version of itself/or a texture…

Thus the end result would be that where the mesh is located, the world appears normal, and elsewhere it appears dark/2D map.

That would be the easiest way to go IMO, but you’d have real issues getting that shape to adjust to whether or not an object is blocking it, and getting the 2D map to align correctly to the geometry may take some time.

Perhaps alternatively you could use lights, and then use some kind of light pass in post processing to filter out which areas are visible and which aren’t, and then set it up likewise.

Point being, IMO your solution is somewhere in post process blendables.

This is where Im up to so far, and now Im stumped. It is having the effect of splitting between black and white, but doesnt seem to centre around the character

I’ve tried changing the normalized rotation axis but that just changed the direction of the split

Can someone help me with the broken math please?

I left out a few steps.

Add a sphere mask node. Put your radial value into a. For B put the desired forward angle, 0-1. So 0.25 would be 90 degrees etc. then set the radius in degrees mapped 0-1 which would be the width of half your cone. Hardness is either percent or 0-1.

You will have a seam facing on one side of this radial value, so I suggest you rotate it 180 past your desired forward point.

Also you should subtract actor position before rotateaboutaxis.

As hourences mentioned, you could do this using the lights too. A spotlight might get you close,it is basically a triangular cone on a pointlight although it will fall off on all 3 axes which may not be 2d like you want.

Here is where Im up to now.

Something seems to be happening as it is giving me an outline of the blocks, but its in the vertical plane, and the outline doesnt move with the character.

Also, I cant figure out why you are talking about spotlights or cones. I’m trying to light up the full 360 view. I realize the first screenshot shows the guy with his back against the wall, so it looks like a cone. Here is a vid of the effect Im after in motion (sorry if you do get what I mean but I’m getting the wrong end of the stick). Jump to 2:48 to see the effect

You initially asked how to make triangle shapes in the material editor, thats all the math I described does. In the first screenshot you posted, I thought there were 2 triangular cones, a green one and a purple one, both with a small spotlight FOV. If you want a full 360 view then you probably just want to use a regular pointlight, and use the post processing system to blend differenly based on the lighting version of the scene. I’m not sure what benefit this trianglar cone has for you, but this is what it looks like:


I am also not sure what you are trying to do by feeding the sphere mask back into another radial function. You probably want to multiply “Vector converted to angle” by “Linear Distance” though would be my guess, maybe with a Power node applied to Linear distance to make it nonlinear for visual reasons etc.

Ah, so that’s were the confusion came in. I initially asked if it was possible to implement a triangle fan :). Triangle Fans (Direct3D 9) - Win32 apps | Microsoft Docs. The idea in monaco is that it is able to detect all parallel edges to a player, and then it uses each vertex as an edge. If a vertex is behind a plane, it isn’t added to the fan. When each vertex is linked back to the centre point (the player), this gives a fan mask.

The fan covers only the areas where the player has line of sight.

I feed the value into a radial gradient because you suggested it in your first post, and then your second post you said you missed some steps and that I’d need a sphere mask in there. Blind leading the blind so to speak (neither of us knew where the other was headed). I’ll have a go with point-lights tomorrow and see if I can get it to blend things out.

Ah my bad :slight_smile: Sorry I didn’t know you meant a specific feature like that.

Short answer is that yes you can create that fan mesh using a BP, but you’d have to do it manually using the CustomMeshComponent in blueprints. CustomMesh is still very early, there is no smoothing groups or collision or anything. But in your case that probably doesn’t matter.

I’m not sure about tracing to individual vertices on mesh, but I’m sure it is possible to figure out which points are need using either traces or some intelligent modular grid system. Or you could define edges within geometry BPs or just use the box extents as a test etc.

I have done lots of experimentation with CustomMesh, but everything I want to do with it isn’t really supported yet :slight_smile:

Custommesh diamond square algorithm:

Custommesh hydraulic erosion algorithm:

Can’t really even display these lit with a texture yet because the normals are all random. It just uses worldposition Z rescaled to 0-1 using the min/max of the custommesh verts to display the height value.

Blueprint Implementation

So I’ve managed to implement this in a hackey way using just blueprints and it works nicely.

Summary of implementation:

  1. Made a “fan” of 1° angle 3ds max, with the pivot at the pointy end.
  2. Using construction script, spawned and arranged the “fans” to get the desired angles.
  3. On every tick, a trace would check each fan’s path if it was obstructed or not and would scaleaccordingly.

it works ^^

That’s super cool. Can you post the Blueprint? :slight_smile: