Skip to main content

Unreal Engine Tutorial: Create Circular Ring Material without Textures

Hi, welcome back for another tutorial. It's been quite a while since I put up a tutorial as I've been busy working on toolkits for the Marketplace. One of my earlier tutorials [link: Unit Selection Decals for RTS Games] had focused on how to create ring materials using textures, as well as using them to display unit selection decals for RTS games. However, a drawback associated with using textures was that it prevented the user from changing the inner & outer radius of the ring. And during prototyping stages of a product, it's far better to implement structures that can be changed easily from within the engine so that you don't have to create a new asset from an external package every time you need to test out a new idea. I've found this approach quite useful while working on my own products. Hence, this tutorial focuses on creating a ring material that can be adjusted both from within the material editor as well as dynamically at runtime.

Alright before we get started, I'm going to use the default Top Down Template that comes free with the Unreal Engine, as the top down view is a good example for showcasing the uses of a ring material. We're going to be creating a decal material here. So the first step is to create a new material from the content browser & adjust it's default properties from the detail panel. Under the 'Material' category of the details panel, set 'Material Domain' to 'Deferred Decal' & 'Decal Blend Node' to 'Emissive' as shown in the screenshot below.

Now right click within the material editor & create two 'RadialGradientExponential' nodes. This node is normally used to produce radial gradients, but we're just going to use them to create two circles. The gradient effect can be negated by increasing the density of both these gradients. For that, just create a new constant expression & set it's value to 100. Connect it to the 'Density' input of both the gradient nodes. Now with that taken care of, we need to specify the outer & inner radius of the ring material. Create two scalar parameters 'OuterRadius' & 'InnerRadius' with the values 0.5 & 0.4 respectively. Connect these two to the 'Radius' input of the gradient nodes. Now subtract the inner radius gradient node from the outer radius gradient node & connect this to the 'Opacity' parameter of the material.

We have thus implemented the core logic for the ring material. Now on to the emissivity & opacity to wrap it up. First, create a vector parameter named 'BaseColor' & a scalar parameter named 'Emissivity' with the default value of 2. Multiple both of them & then multiply it's output with the result of the subtract node we added for the gradients. Connect the result to the 'Emissive' parameter of the material & we have created a circular ring material.

This next step is not necessary, but I created two material instances using this material: one for the unit selection decal & the other for displaying attack range. 

Alright, now select the Top Down Character & add two 'Decal' components to it: a Unit Selection Decal & a Range Display Decal. Set the Z value of both to -98 cm & pitch value to -90 degrees. The pitch value is changed because the default orientation of the decal component spawns it in an invisible plane. Since the default dimensions are too small for our needs, we can scale up the Unit Selection & Range Display Decal to (1, 50, 50) & (1, 400, 400). As you may have noticed, we do not scale up the X value. This is because we don't want the decal to be drawn on surrounding objects. Setting it to one allows it to behave in such a way that it gets cut off by the obstacles in it's path instead of painting over them.

Now if you play in the editor, you should be able to see both the unit selection & range display decals display & move along with your character as shown in the screenshot below:

Alright, so that's it for this tutorial. I'll be continuing on with the Unreal Engine diaries series for concepts that do not require a whole tutorial. But I have some ideas for new tutorials as well & if possible, will try to upload them some time during this coming week. Until then, goodbye & have a great weekend. :)

Popular posts from this blog

Unreal Engine 4 Tutorial: Smooth Zoom using Mouse Wheel for Top Down Template

Well, I had already written a tutorial for implementing Smooth Zoom functionality for Top Down Template. But it was based on keyboard inputs. Since most Top Down PC games use mouse wheel for zoom, I decided to make a tutorial for the same. The core logic here is the same as the one implemented by Ryan Jon for the custom camera in his RTS Community Project. If anyone's interested, they can get the code for the RTS Community Project here:

UE4 RTS Community Project

Anyways, he has replaced the default camera for the characters with a general camera since that's more ideal for developing an RTS game. Since a basic Top Down game with a single playable character does not need a separate custom camera, I decided to implement the same functionality for the default player camera in UE4's Top Down Template. So let's get down to it.

First of all we need to make a custom curve from the content browser. We will be using this curve to define the smooth camera movement while zooming …

Unreal Engine 4 Tutorial #4: Basic HUD Based Command UI for Top Down Turn Based Games

Hi, welcome back for the next tutorial. And in this tutorial, I'll be explaining how to create a basic Command UI for top down turn based games using HUD blueprints. By the time we reach the end of the tutorial, we'll have a Command UI with movement and fire action commands, and a player character that responds to the commands. Here's a screenshot showing the end product: 

Oh, and this tutorial is gonna be quite big, compared to earlier ones. So I advise everyone to go through the screenshots, before reading through. If it's clear, there's no need to read through the whole thing, partly because I've written this with a beginner audience target in mind. Ofcourse, if you have doubts, I hope they will be clarified in the written description. If not, feel free to ask me in the comments.
So let's get started. Again, I'll be starting with the top down template. First of all, we need to create a new HUD blueprint. If you're a beginner, you can find this by f…

Unreal Engine 4 Tutorial #3: Unit Selection Decals for RTS Games

Hi, welcome back for another UE4 Tutorial. This time, I'll be walking you through how to set up unit selection decals for RTS games. So the decals need to be visible, when a particular unit is selected, and set to hidden as soon as the unit is deselected. For this tutorial, I'm gonna start off from the Unreal Top Down Template.

First of all, I'll be changing the default controls a bit. Instead of using left mouse button to move the units, I'll be using right mouse button for character movement. I already have a decal texture, that I created in GIMP. If you don't have one, you could get my decal texture from the link below:
DropBox: Character Selection Decal Texture
So once you have the texture ready, next step is to set up your decal material. For creating a decal material, we need to set the 'Material Domain' in the details panel to 'Deferred Decal'. I'm also setting the blend mode to 'Emissive' in my case. Then we multiply the texture wit…