Let’s Make: UE4: Fading Scenery
Environment fades away if it gets in the way of the camera’s view of the player.
Overview
LET’S MAKE a fading scenery system, in which the objects that sit between the player model and the camera are quickly faded away. Many games use this for a 3/4 perspective which makes moving behind objects or into interior areas much easier to view. The version we are creating is basic and focuses on fading only the environment that is currently needed by the camera by the use of tracing. The fading itself will use a custom actor component which allows us to modify the static mesh actors in a scene rather than needing to add in a separate custom blueprint actor instead of meshes.
- Fades entire mesh between the player and camera
- Unreal Engine 4.7.6
- Blueprint Only
Note that we are switching between two materials on the mesh by using our custom actor component and avoiding any multiple meshes. However, I am still investigating better ways to accomplish the actual fade without requiring two separate materials per unique mesh.
If I find a better solution from the forums or from Epic I’ll include it within this post or another to help bridge the gap from basic prototype to more fully featured idea.
I also would like to note that you can extend the static mesh actor and create a custom mesh that will fade in a similar way. Because the Custom Component Actor is a feature I haven’t used quite yet I figured I would try it out.
Setup
I created my version using the basic Third Person Template as a base so I can have a character and camera already setup. Once we have the project setup we need to create a number of new actors for the fade system.
*Ignore the pickup and game mode blueprints for this tutorial
Create the following assets within the content browser:
- Actor Component
- BP_FadeComponent
- Float Curve
- C_BasicEase
- 2 Materials
- M_FadeMaterial
- M_OpaqueMaterial
- Character
- ThirdPersonCharacter
- (Already present in 3rd person template)
New to Unreal is the ability to create custom components, these can be added directly onto actors within the editor so a new blueprint for the object is not required. In order to create the custom actor component we create a new blueprint in the content browser and find the actor component class to extend.
If the component is setup properly it can be added to different types of actors and still have the same effect making it very useful in this form. Our version will only be setup for static meshes at the moment but it can easily be extended to work for others such as skeletal meshes.
Float Curve / Materials
Below shows how to setup each of the 3 elements we will need before moving onto the more complex parts.
The Float Curve
This curve is a simple ease in and out and will control our fade over time. We will use this curve and move back and forth between 0 – 1 using the value output on the curve as our opacity.
Values at one being fully visible and values at zero being fully faded.
You can change up how the curve works but I have my zero time only go down to about 0.125 meaning my meshes are never fully invisible. I like this better as the player can still see a bit of the mesh once its faded but are still able to easily see through it.
Materials
Within the fade material’s properties, set its blend mode to Translucent, this allows the translucency slot to open up and where the scalar parameter will be connected. Next change the Translucency Lighting Mode to TLM Surface which allows all the shadows and basic lighting to remain on the object when we switch out to this material.
Overall the two materials are very simple and are only created like this so we can test our fade. Normally we would need a mesh to have a material with its own diffuse textures, normal maps, etc. all created in a unique way within the material graph. Once we have this we will need to duplicate it and create a fade material version, setting it up as translucent and adding a scalar parameter labeled “Fade”.
As said before, when the mesh begins to fade out the component will simply switch the materials on the mesh for the fade version and begin to update it over time. When the mesh needs to return to normal it will fade back over time and then switch its material out for the normal version.
Project Settings
The last thing we need to setup is the zoom keybindings within our project settings. You find the project settings within the settings menu on the main toolbar in the editor. Once there we need to create two new input keys within the input tab, one to zoom in and the other out using the scroll wheel up and down.
*Depending on your game you may not need zooming but for ours we are using the third person template and need to zoom in order to test our fading.
Third Person Player Character
Within the third person character we have a lot of basic code already setup to handle movement but now we need to setup our fading system. We will need two static mesh actor variables in order to keep track of what is currently being faded, three new functions, and finally we need to turn off camera collision which is found under our camera arm details.
Camera Collision
The collision is a simple check box found under the camera arm’s properties. We really only turned it off as we won’t want our camera to collide ever. If the game we were creating needed both camera collision as well as checking for specific objects to fade we could create our own trace channel under the Project Settings -> Collision for our objects we will be tracing against, setting the specific meshes collision to stop that trace channel, but at the moment it isn’t needed.
Variables
The two variables created are empty arrays with the type of Static Mesh Actor. These two will store what meshes are currently in the way of the camera and the previously actors from the last check. We need both so we can un-hide the meshes that are no longer in the way by checking the previous against the new ones.
Functions
The main function we call is Update Fade Actors. This function is called on a loop, we can do it every tick but it isn’t really needed, instead I use a timer which calls the tracing less often depending on the loop delay time.
Use the Event Begin Play node and hook it up to a Set Timer Node within our event graph shown below.
The UpdateFadeActors function is one we will now create ourselves, so lets create it and double click it to open it. Because the function is being called from the timer we don’t every have to place it within the event graph, it will automatically find and call it each time our timer loops.
Each time the UpdateFadeActors function is called we start by clearing our current mesh array and then completing a trace from the camera location to the player location, grabbing all of the objects in between. I used the Multi Capsule Trace by Object node to do this as the Trace by channel only gets the first actor and stops.
After we get all of our actors we loop through the list with the forloop node and make sure all the hit actors are static meshes. Again, we can change this later so it can use multiple actors, not just static meshes, but for now its good enough. If we don’t hit anything we branch down to our second function, Set Show Meshes which we will get to later.
As long as everything passes the cast we add it to our list. I used an add unique node which makes sure we aren’t doubling up on any actors but we shouldn’t, this is just a precaution.
Finally we run through our last two functions. Set Show Meshes will find any old actors that are no longer in the way of our trace and let them know they should fade back in to be seen. If we branched to this function earlier we will be setting all previous meshes to be shown as nothing is currently in our way.
The Get Component By Class will use our custom component and the Toggle Hide Mesh will be created shortly so don’t forget to add it in here once setup in the Actor Component section below.
Set Hidden Meshes does the opposite by setting the new blocking array to start fading. Again, the function at the end called Toggle Hide Mesh will be created in our component.
Fade Component
Within our Fade Component is where we do all of our material work. First we need a number of new variables and a function. We need a Boolean to check if the mesh is currently hidden or not, two Materials, a Material Instance Dynamic for the fade, a float curve, static mesh actor, and three floats.
We will go over each of these variables as we get to them.
Fade Material and Curve
The two variables highlighted above should be set to public by clicking the eye. This allows us to use a specific material and curve based on each mesh we add the Fade Component to. Setup the default for the fade material to use the M_FadeMaterial we created earlier as well as the C_BasicEase to use our float curve.
Toggle Hide Mesh Function
This is where we attempt to hide the mesh or show it. The initial branch checks if we are already hidden or showing instead of running through the entire function. After this we update our hidden bool and set to fade material if true. We don’t change the material back to the normal material here as we want it to fade back to opaque before hand.
Component Setup
When the component starts up we need to do a few things, instead of having an Event Begin Play components have an Event Initialize Component. Go ahead and add this node in the event graph. Here we get our owner, which should be a static mesh actor, casting it and adding it to our Parent Mesh variable.
Again if we wanted something other than a static mesh to work we would need to do some extra work here to set it all up correctly.
After this we can use our newly set mesh var to get its original material so we can use it later. Finally we create a new Material Instance Dynamic so we can update the fade on each mesh independently from the others.
Tick
Once we have everything setup we can update the fade and finally get to see it working in action. From the tick I have a delta time variable I like to update so it keeps the graph cleaner but isn’t required, you can just connect delta time to the nodes directly.
The branch allows us to figure out what direction we should be going, either fading out or fading in. This section could also be created a bit better by checking if we are done adding, already at 1, or done subtracting, at 0, so we don’t call extra code. Right now we simply go through and clamp everything which should be enough for this version.
To get the new value we are simply adding the Delta Time * Rate to our current amount. The Fade Rate I have is currently set to 4.0 and thus it fades quite fast. This is better for gameplay as we don’t want the player waiting to see his character for very long.
After we get our new value we set our Current Fade Variable and run it through our Curve to get the ease in and out value, setting the material Scalar Parameter “Fade” to it’s new value.
Finally the last branch will check to see if we are returning to show the mesh and if the opacity is at 1 meaning visible. If both of these are true we set our material back to the original.
EDIT:
In Unreal Engine 4.8.1 the Get Material and Set Material nodes require referencing the static mesh component first before getting the material or setting it. This was the case in the previous versions as well and the StaticMeshComponent can be seen in parenthesis but now the get node appears to be the way to do this. Just to keep up to date here is the updated code for those nodes below.
EDIT Accessed None Parent Mesh:
At this point in time a few people have gotten the error “Accessed None: Parent Mesh” however I have yet to reproduce it. This error could be from the actor trying to access the parent mesh before we are finished setting it up! So lets fix that, and if anything we can add this to our blueprint as a precaution if you aren’t having the issue.
We fix this by checking if we have the variable filled before we try and access it. We can do that by adding in the IsValid node or by using the the Validated Get node. I’ll do it in a few places, one in the Tick to make sure we have the Parent Mesh already as well as in the Toggle Hidden function.
Hopefully this helps alleviate the issue.
Finished Actor Fade
At this point we can grab any static mesh in our level and add our new component to it. Those we don’t want to fade out, like small props or low foliage, just leave as is.
Again the system isn’t perfect and I will be posting it to get some feedback on better practices but should help get people going. It does help by avoiding double meshes, one with the main material and one with the translucent, and by using the actor component this version is flexible and easy to add to static meshes already present in the level.
Things that need to be changed:
- Support meshes with multiple materials by using arrays instead of a single material variable
- Support other types of actors like skeletal meshes or other custom blueprints
- Fade out groups
- Allows interior sections to fade the roof sections of a building all at once, etc.
Cheers!
For the Fading scenery tutorial.
So I tried going through your tutorial, to the best of my ability. I did it through the top-down setup, but I figure that shouldn’t have anything to do with it. When I play through the material does not fade like it should. I am running on 4.8.1. After I play I get an error log where the only error I get many times is:
Error Accessed None ‘ParentMesh’ from node Set Material in graph ‘EventGraph’ in blueprint BP_FadeComponent.
this is the only error.
One problem when I was going through the blueprints was that when trying to connect the ParentMesh variable to the Set Material was that it was adding another node: target to static mesh component. I double checked the variable and I set it up correctly. as well when I went to add the event initialize component It was not an option. I had to create a custom event. Also anytime I added Get Material or Set Material node in the subtext it always referred to it as target is primitive instead of target is StaticMeshActor.
Now Im pretty sure all these things were a result of the 4.8 update. But I was hoping you had an idea about it. If I missed a step or something. Thank you for your time.
Hey Corey it does appear like the updated 4.8.1 has the get / set material issue as well.
When we set the material in the tutorial above we are still accessing the StaticMeshComponent but previously it did not need to show the get node and instead had it in parentheses on the node itself which is confusing now that it does require it.
However it should work the same by allowing the parent mesh to get it’s own static mesh component and then setting the material from there. I have included a picture at the end of the tutorial as a note for this issue.
When it comes to the error: “Accessed None Parent Mesh” it means that it cannot find the static mesh as a parent. This would be a main issue as with out the parent it cannot apply the fade effect to anything. It could be caused by a few issues but here are two easy ones to check:
1.make sure the OnBeginPlay event is hooked up correctly with the owner feeding into the cast node and setting our variable.
2. Make sure we are adding this component to a Static Mesh in the world. Right now it is not setup for other types of meshes like skeletal or custom blueprints.
If both are correct let me know and I can check out your blueprint and see if I can help you out!
Hi Greg,
I am seeing a weird issue with SetShowMeshes. Any idea why I am getting the following error? (See imgur link for screenshot of Blueprint).
http://i.imgur.com/OH9dYYQ.png
That is strange! Looks from your setup it should be good to go! However, I sometimes have issues with for loops if you copy and paste them. Unreal sometimes thinks it is a different actor type and throws errors.
Try dragging out from the “Get Components By Class” array and creating another For Each Loop and see if that helps first! Same thing with the Toggle Hide Mesh, drag out from the For Loop and make sure you can type in and get the correct function to show up there.
If its still an issue I might need to see other parts of the blueprint but check that solution first and see what happens.
Well I seem to have solved that issue per your suggestion. Much appreciated there. It looks like I’m now seeing the same issue as Cory
‘Error Accessed None ‘ParentMesh’ from node Set Material in graph ‘EventGraph’ in blueprint BP_FadeComponent.’
I walked through the logic, and it seems fine. Any thoughts on the attached blueprints? Figure another set of eyes might be the best option.
https://www.dropbox.com/s/s0e52gel41m8fv5/for%20greg.zip?dl=0
Hey Jordan,
I downloaded your files and added them to a new top down project but didn’t get the error you are speaking of. I added a few Fade Components to the pillars that come with the initial level but it looks like there are a few issues in the Fade blueprint which need to be changed before it will work.
If you are still receiving the error check out my edit in the post above and see if that helps you out!
If you need help fixing some of the other errors let me know. I also may be uploading my own files as well for people to check out and deconstruct or use.
Hey Greg, thanks for the info. The error seems fixed now but I’m still not getting the fade to work correctly. I’ll do a second pass at looking at everything, but I’m pretty darn sure it’s all exactly how it should be. Could it be related to 4.8++?
And if you post your blueprints I’d be quite interested in comparing them to mine.
-Jordan
Hey Jordan,
Glad to hear that error is fixed! I haven’t had a chance to go through all of your blueprints but if you get a chance make sure your materials are setup correctly and double check the set hidden meshes function.
I cannot remember if I saw more but I should have my blueprints posted soon as well and you can always go through those!
Greg
Sorry, very new to this. On your fade material picture, you have a value of 1 coming off of the base color. What is that and how are you creating it. Thank you for your tutorial.
nvm. I think…………….i found it. Newb award here.
Glad you found it! Yep, in the material editor I am just using a constant node, which outputs from 0 to 1, meaning black to white. (Just do a search for Constant and it’ll pop up for those who haven’t found it yet)
Normally we would want to create our materials so that we can use texture files and things as well but for the sake of keeping the tutorial shorter I opted to keep it as a simple material.
If there is interest in adding in changes for the materials so the fade uses textures as well as supports multiple materials let me know and I’ll see what I can do. (Although right now it might be a little bit before I have time to make a new tutorial as I am busy for the rest of this month)
Cheers!
Greg
Hi,
I’m using 4.10 version I have already finished the tutorial do I put the opaque material to the static mesh? regarding the Event Initialize component, do build a custom event for that? I can’t seem to find it in the drop down, and lastly I does not apply the hide effect on the collided mesh, but there is no error on the scripts.
Sorry, for me being complete noob, but I have a problem that this method refuses to work in my case. I was considering, that something is wrong in BP, but after several checks from the scratch, there is like absolutly no way to solve it from my side.
I had the same problem with Access none in Set Material, but solved it. It was neccesary just to redirect some nodes from events, so that they would not cross each other in one Exec and Create additional Dynamic material instance before Scalar parameter, not connecting it by white node (otherwise parentmesh error appearce).
But, nevertheless, the objects don`t fade. BP is on them and other settings are like triple-checked. Though, through the debug panel, I saw that hit, hidden meshes and also hidden boolen don`t change their parameter when the character is behind the object with BP on it. So, maybe the problem is there? I tryed to use invisible sphere as an object to check, but no luck.
-Vlad
Hi Greg,
Thank you for your tutorial.
We are making a networking game. We just have this problem. If one character’s camera collides with the object, other characters will also see that object turn to transparent which is not we want. So do you have some solutions for this?
Thanks
Shujian Zhang
event initialize component cant be found in 4.12.5, any idea what replaced it? or why its missing? thank you!
Hi, I’m highly interested in getting trough this tutorial but I’m having problems on the “component setup” part. Is the Event initialize component a custom even? Cause no mater what if i search for it, I can’t find it. Also what was the process on creating the “ParentMesh” variable and “Fade material” because of the way I created those variables it won’t let me link the nodes inside blue prints.
Might be the simplest of mistakes on my part but I’m stuck.
Appreciate any help
Hi! After build lights, i see in log:
LogMaterial:Warning: Material /Game/FadeWall/M_FadeMaterial.M_FadeMaterial missing bUsedWithStaticLighting=True! Default Material will be used in game.
LogMaterial:Warning: The material will recompile every editor launch until resaved.
And my wall not opacity… 4.14
Hi Greg,
Thanks for this tutorial. I need a wall hiding system and I’m not sure if I should implement this or try the location based opacity:
https://www.youtube.com/watch?v=GXbE0IqbA7w&t=1044s&list=WL&index=30
Both have pros and cons. I know this system is a bit older do you still think it’s the way to go now that we are in 4.14. Would you do anything different?
Thanks,
Ryan
Hi Greg,
Thank you so much for this great tutorial!
However I am having some issues with the component I tried applying to one of my static mesh and even use a cube for testing and it didn’t work I tried figuring it out but still can’t find the issue do you know what could be the issue?
Sorry as I am new to game developing and also Unreal Engine 😀
I have one request is that perhaps you can do a video tutorial on this so that it might be clearer for everyone who is keen to learn 🙂 Cheers!
It would be extreeeemely useful to know how to apply this method for use of multiple materials on an object. Thanks, great tutorial, everything works otherwise.
Also ran into an issue. After building the lighting, the fade no longer works. It changes the material as its supposed to but it isn’t transparent anymore just fully opaque. Any ideas?
I ran into that issue also. In my case it was because unreal got pickier with the name of the MIDs produced.
So when you create the Dynamic Material Instance, make sure to give it the name of the owner (which already has to be unique).
So “GetOwner” > “GetObjectName” > “String To Name Conversion” > “Optional Name” of the “Create Dynamic Material Instance”
Hi I have a quick question, with later version did they remove the Set material (for static mesh actor)? Since I cannot find it for the life of me. This is creating a bit of a problem as you can imagine. The other set materials are easy enough to find.
Thanks in advance,
Lukas
PS. love the tutorial
You’ve made my day!
Thank you so much for sharing your experience with us all.
I followed your tutorial with the Rolling ball template, and it’s working great!
I created a custom event initialize component because I couldn’t find one. That was giving off some trouble, so I used event begin play and success.
Thank you so much & have a great day!
There is no TLM Surface Choice in the dropdown in UE 4.23 and up. What is the equivalent?
did you figure it out by any chance? My mesh stops casting shadows when material is switched to that translucent instance