Join Craig Barr for an in-depth discussion in this video Material Editor: Lantern, part of Unreal Essential Training (2016).
- Unreal Engine four contains a very powerful material editor system. Here in this video we want to take a look at how we can work with materials in Unreal Engine four and how we can use a bit of some connections and maybe some more advanced settings into editing a material. Now, if you have access to the content that comes with this course, you'll see that I'm utilizing my project structure here but I'm also utilizing a file called Chapter6_O3Begin. In this file, this is where we're going to dive in a little more deeply into the material editing.
As we've seen how we can create a material but what we want to do within the materials is dive in and begin to do some more advanced creation with some of the materials. So, what I want you to do is open up this materials tab in the content directory. If you don't have access to this, you can wire together something quite simple to follow along as to what's happening here. Now, in the materials I want to dive into this props directory and you can see that we have a material for the car, this beetle and we have other things like a tree stump, we have the row boat and we also have this lantern.
I want to work with this lantern. Now, this lantern is actually this asset right here in this scene. Now, it's sitting in this old row boat here and you can see that the row boat actually has, on the texture, some baked in lighting on it. Now, this lantern is just kind of a static dead lantern. Let's bring some life to this lantern and actually add a flickering light in there, done without lighting. We're actually going to do this through the power of materials within Unreal Engine four. So, let's take a look at how we can work with that.
First thing we want to understand is if I have this asset selected within the viewport, you'll see that we can see under the static mesh that we're utilizing this material, lantern two and we can access this material by double clicking here and, of course, we can access it through the content browser. As I've mentioned before, the content browser really is the core structure of your project. This is where everything is created, organized, maintained and you can create and edit things live within the content browser as well. So, let's go to that lantern material and let's double click on that material.
What's going to happen is it's going to bring up this panel. This is a material editor. This is where we're going to see all of the connections related to that material and as you can see, it's actually quite straightforward for this material. Now, let's take a look at how we can work with this. First thing I want you to do is grab that tab that says lantern and just left mouse button, drag it up to the top and now we have a full screen user interface of the material editor within Unreal Engine four. This material editor is really powerful and it produces some amazing materials out of this and you really are unlimited to what you can do here.
So, let's take a look at some of the basics on how to operate with this. The first thing you're going to see in the top left corner of this UI, is this preview window and in that preview window you'll see the actual asset that we're working with. Now, if we look at the materials applied to this guy, we can see that we have some nice diffuse mapping going on with some nice normal mapping, as well as you can see that there's some nice roughness attached to this. This is all hooked up here in the main material. Now, if you remember the main material is this node.
This is the description of the overall material output and this description exists because of the inputs coming in from the different textures or different functions that are happening out here in the editor space. Now, what are these guys here? Well before we look at those, let's look at how we can visualize this a little better on screen. Up above in the toolbar, you're going to see that there are some familiar icons here. For example, the save, we have a find magnifying glass to find in the CV which is the content browser. There's a search, we have some different icons in here that are a little bit more particular to the visual scripting nodes within Unreal Engine and you're going to see some of these here in other visual scripting areas within Unreal Engine four.
For example, blueprints. What I want you to do is make sure you have stats turned on. If we turn that off, you'll see that down here this little folder clears right out and empties. Click that on, this is going to give you the overall statistics related to whatever node you're highlighting within the editor and that's this space here. Now, the editor, if I click on any of these, you can see that the details panel's going to update on the left hand side here. If we go back to our main material node, it's going to update to that. This detail panel works exactly the same as it would work with a static mesh or a model at the main viewport within the user interface.
Now, within here we want to see how we can navigate and be able to visualize this a little bit better. So, first some of the basics here on how we can can navigate around. Within this editor space right here, you can think of this as a viewport, essentially, for working on a flattened surface if you will. We can use our right mouse button to simply drag it around. So, if we hold down right mouse button, it lets us pan around. Middle mouse button will let us zoom in and, of course, at any time if we want to work with something in here, we can just highlight that and be able to zoom in towards that as well and right mouse button to pan along the connections of everything in here.
So, you can see these nodes but we can't really see what's going on in there. This is where we want to turn on some of these guys, so live update's important. Live update is going to actually give us anything that we do out here, is going to be updated on the nodes here and at the final material and we'll be able to visualize that within our viewport. Let's turn that on because we're going to do some live updates as we work. Now, we also want to turn on live preview. Live preview is going to give us a preview of all of these nodes in here as well.
We're going to actually get a preview as to what's happening in there and the way that we can do that as well is by turning on or showing our connectors here. So, if we turn off live preview, we'll see these connections but we won't see any of these preview nodes update as we work. So, turn on live preview and keep that live. So, now what we want to do is look at how we can work with this material. First thing we should understand is what's happening in this material. This is a pretty simple hookup. We have this lantern base material. If we look at the details panel, you can see that it's using the default hookup of it, being the material domain as its surface.
It's opaque right, so it doesn't have opacity as a live channel and everything that's driven in here, all of these different channels are addressed or being driven by textures. So, you can see here we have a texture sample node and we have texture sample nodes all the way down and these are driving everything from the base color, which is essentially your RGB or your diffuse, all the way down to things like our normal maps and we even have ambient occlusion in there as well. Now, I mentioned the roughness in here, that's being driven by this map here.
That we have a texture map that is driving the overall roughness of this which will coincide with the overall metallic feel of that lantern which is nicely done there, you can see this kind of metallic feel on this as well. Now, let's take a look at how we can work with some of these nodes. So, if at anytime I want to see what's happening with this texture, we can do the same thing that we've done with the materials. Back out in the editor here in the top left, we wanted to work with this lantern material, so we double click that and it brought up an interface that we could work within.
The same thing will happen here with the texture node. If I double click on this texture node, it's going to bring me out and it's going to show me this overall texture sample here and that's in the content browser. So, this is going to show me where that texture exists in the content browser, which is in our texture directory here and double clicking on that is going to bring up this map and we can see here's a pretty nice texture map in here, lots of detail on it and it's going to show us, again, essentially a details panel and a viewport which is just a 2D preview of that texture.
So, let's forget that for right now. We can turn that tab off and just focus back on the material editor. Now, let's do some things here. We want to do something a little more advanced, we want to add a glow to this but not just a glow, a flickering effect all done through materials. So, how can we do that? We can see that we have this emissive color node available here within the lantern. So, what we want to do is look at a couple of ways that we can bring in an emissive node into that lantern. So, maybe what we want to do is kind of split these guys apart, make some space for a new node in here.
Now, if we just open up some space in here by right mouse button moving across, there's a couple of different ways that we can bring in a texture node. I'm going to show you two basic ways. So, if we go back to the main viewport and you can see here we are in the textures directory. We want to find, if we have a specific texture that we want to work with, we can simply take the texture and just make it live within the material editor and the way that we can do that is by clicking over a material. This texture here is this lantern emissive and if I double click on that again, we're going to get a new tab and it's going to show me what that material's all about and it's just simply this kind of light, kind of almost glowy look material but it's just a texture map and we're going to drive that into control our emissive.
So, let's just shut that one down and go back to our main content browser. With that one selected, so it's selected and make sure it's highlighted in the orange. Go back into your lantern tab and in your lantern tab now, you can simply hold down T in just left mouse button click in the viewport and it will drop down whatever's live within that content browser, into the editor. Inversely, as we just saw there, I can hold down right mouse button click in here and I can drop down the same thing without the definition of that texture in there.
Now because I've just dropped that down last, it will actually drop in the same one but at anytime if you need to drop down a node, right mouse button click is going to bring up the editor here and this is where I can drive down and I can find things like texture. We'll open that up and there we have our simple texture sample and I've dropped that in here. Now, the last texture that I've worked with is going to drop into that sample, so that's what's happened here but you can see that in this right mouse button click, if I was unsure of what the name is, I can search for it. I can start to type in something like texture and we're going to get everything related to texture in here and there's our texture sample but anything related to a node that has the word texture in it, is going to pop up there as well.
OK, good, we don't need this texture sample here. We've already brought one in with that map that we want to work with. Let's just leave it right here in this space that we've created with it. Now, that we have this texture node here with our lantern emissive as defined, we can now map this or connect it to our emissive color and the way that will do that is we're going to grab this top connection which represents all of the different channels, RGB and A if you had an alpha channel in here as well. You can see the red for R, G for green, B for blue and this grey is the alpha.
We want to use all of the different channels in here and that's this top button. I should point out you'll see that, just like in everywhere with an Unreal Engine four, you're going to see this little bubble that's going to ask you if you need help you can hold down Ctrl Alt and this is going to give you help on any kind of node that you take a look at. It's going to define anything that has that texture level availability. It'll give you a little help bubble by holding down Ctrl Alt with that. Let's left mouse button click and hold and we're going to drag that right into the emissive color. So, we've now connected that and we can see the difference in here.
We now have this nice little glow. At if any time I want to just take a look at that we'll just go break link and you can see that we had this kind of dead or turned off lantern. Let's click this back into emissive color again and there's our nice glow. That's fine and all but I might want to adjust the brightness of that effect but I definitely want to add something like a flicker to it. The way that we're going to do that is we're going to multiply in a different texture on this and what I want to do is let's right mouse button click and let's find that texture sample again and now we know we can search for it but we also know that it exists underneath the texture node.
Let's go down to texture sample and bring that one in. Now, we don't want this texture that's here. We want to come into the details panel and actually find something that we have in here, a texture that is just a standard cloud material. This one is referred to as RGB cloud. So, I want you to type in RGB and you'll see that we can bring up this RGB clouds texture, let's left click that. That's now place that into our texture sample and we want to use this to blend it with this and the reason why we're going to use this overall cloud appearance to just kind of mask out areas of the emissive and we're going to move that cloud appearance to give it this fake or this feel of flickering.
So, what we're going to do with this cloud right now is let's hook it up and the way we want to hook this up is let's bring down a math function here, which is a multiply. So, I'm going to right mouse button click in here again and we know that I want to use a multiply blend and if you're familiar with the idea of multiply blend, you'll notice that it's very much like the way Photoshop works with blending of images. So, I'm going to find this multiply underneath math here. Again, if you're unsure where things are you can simply start typing to search for it based off of that as well. Now, I want to take this texture sample.
You can see that we have, if I double click on this texture, I have a bunch of different colors in this texture. I don't want all those colors. I don't want a purple, blue, yellow, all these different textures coming in here. I want to just take the red channel because the overall glow of this is more towards the yellow and orange or red type of primary color, so let's stick with red. I'm just going to map that overall red right here into the multiply. Now, the multiply has two inputs, an A and a B.
We want in A, we want this texture sample to be our A multiply and we want our B to be the red channel, which is on this RGB clouds. We're going to drag and drop that into B and we've simply multiplied that together. Now, let's replace this emissive color with the input of this. So, you can see that we're now getting a bit of a different tone. The problem that we're first seeing is because it's doing a multiply function here, it's actually toned down the overall brightness of that. So, that's a bit of a problem.
This is where I do want to add a bit of a control over the brightness of this and, again, we can do this simply with another multiply. So, we can type in multiply in here and we'll bring that down and I'm going to drive the overall RGB channel of this into A and you'll notice that on this multiply and actually let's remap that in, so that we can see our live preview in here. Right now it's going to be exactly the same because it's mapped as zero to one, nothing's changed but what I can do is, anything that's wired into a connector is locked and you can see that constant A because I'm mapped into the A input, I cannot select or do anything with that but B I can and this is where actually we can, let's click that and we can use our left mouse button to start to dial or drive in an overall effect of this and you can see that we're starting to get a brightness on here.
Let's change that to a value of something like 15. That's nice, we're getting a nice bright effect simply by multiplying the overall effect of that texture. You can see we're even getting a nice glow effect here in the viewport. So, we now use that to control the brightness of our texture. We're multiplying it with this cloud texture the R, the red channel from it. Now, let's get this flicker effect going. Let's get some movement happening here. How can we do that? We want to work with the texture coordinates based off of this RGB cloud, so a simple concept.
This texture right now is sitting at zero to one space over top of that value as multiplied against that lantern emissive area. So, as we know it's affecting that space, this place where we're seeing the color on that texture. Well, let's control how we can move this cloud texture around to give a bit of a kind of a masking out effect if you will. So, the first thing we're going to need to do to effect the texture coordinates, is to drop down a texture coordinate node. So, we may have to search for that. So, we can type in here, start typing in something like texture coordinate in here or, if we want, we can look down inside here and we can see that there is a coordinates folder.
So, I click on coordinates and we'll just drag down inside here. There's a texture coordinate node. I'm going to left click that, drop it into space. Now, we haven't wired it up to anything yet but let's take a look at what that node's all about and you see it's very simple. It actually has the power to control a couple different things, mirroring coordinate index, working with different UV channels or UV tiles. We want to work with the actual overall tiling effect of this. So, I'm going to pipe this connection, the one connection into the one connection of the UVs and you'll see nothing's changed because it's a one to one.
We have it, essentially, just tiling itself at the scale that it's at right now, one to one. I actually want to change that. Now, if I dial up this just by left mouse button scrolling, you'll see that this live preview will update. I don't want it to actually be smaller. I want to scale it. So, I want to go down to something like a .2. So, we're actually, by using a smaller value, we're scaling up how this texture is tiled or applied overall and the reason why I want to do that is to be able to have this kind of larger cloud.
You can see the preview is showing us this nice, kind of cloud structure as to what we're going to view or how we're going to effect this overall multiply here. Now, that we've done that, that's great. We need to get some movement. Now, there is an interesting little thing in here, again, under the same node here under coordinates. If we right mouse button click in the editor and go to coordinates here and let's look for something called a panner and there it is there. Once we find panner we'll just left click this and this is an interesting thing. This is, essentially, going to control how we're going to pan this in the X and Y coordinates here.
So, if we click on that panner we can see in our details view we have a speed in X and a speed in Y. Now, we know from the viewport here X is in this direction and Y is going to go in this direction. So, by panning in both those directions, we'll get kind of a nice 3D effect overall on that glow. So, let's wire this in. Going to bring our texture coordinates into the coordinate system. We're not working with time, so we don't need that. Then I'm going to wire this coordinate in the UVs. Now, again, we're looking at our live preview and this is the power here of Unreal Engine four, to be able to preview that material as we go.
So, let's set some speeds. Right now it's at zero. It I start to dial in some of these speeds here, you'll see that we're starting to get an effect. The effect is being controlled by panning, moving this back and forth in the X direction and, as well, I can do this in Y. Now, you see that we start to get a really nice flicker effect. Well, that might be a little too much or maybe we want to go in a different direction here. So, let's actually put this setting in here on this overall kind of panning effect to something like -.6.
There's a little bit too much going on, on this one here, so we're going to put this really small to 0.078. That's actually really nice. It's giving us a really nice feel of kind of a flickering, lit lantern and I think that's going to work out really nice in our scene. So, let's take a look at how that'll work. So, I should just point out that we're seeing all of this live in here, so that we can get a feel of how things are looking. You can see know if I click on live nodes at the top, look at our panner, look at our texture sample. The panner is driving that movement.
It's moving it in X but it's also moving it in Y as well. So, we can get that kind of live node update in there. A pretty nice way to view and work with materials here in Unreal Engine four. Lastly, let's go and check out how this material is going to work. You can see that nothing's happened in the viewport. Why is that? That's because these materials are hard written into our content, into our project. So, in order to work with this here, I need to click save, this is important. Everything I've done here is live within the editor, it's not live within our project but if I hit save on this material, it's now going to save that material to disc, to our content directory and we can see out here now in our viewport, that material is live.
So, I just hit escape so that we're not selecting anything and there we have our material taking effect within the landscape. Now, once we get into adding some lighting to this, this will really come alive and really start to effect the overall landscape. So, there's an overview of the power of creating materials within Unreal Engine four. Utilizing the power of the Unreal material editor and how we can do some really cool advanced effects with the material editor in Unreal Engine four.
- Customizing the Unreal UI
- Creating a new project
- Creating landscapes
- Blocking out levels
- Assembling a scene
- Working with materials and lights
- Adding post-processing effects
- Defining bodies of water
- Adding atmospherics, foliage, and wind
- Working with the Blueprint editor
- Creating cinematics
- Monitoring performance
- Packaging a game for distribution