UEFN Progress Bar with Only a Material and Verse

Summary

This tutorial explains how to create a progress bar using Unreal Engine 5, focusing on using material nodes to adjust the progress bar's appearance. The video covers scaling the bar based on input values, manipulating UVs, and setting up a random value system for dynamic changes. It demonstrates how to integrate custom materials and nodes, update the bar's scale, and handle user inputs with button interactions. The tutorial also addresses common mistakes and offers practical coding tips for working with progress props in game development.

Takeaways

• 🎨 The video tutorial demonstrates how to create a progress bar using Unreal Engine's material system.
• 🔧 The progress bar's value is controlled by the Y scale, which can be set to any value between 0 and 500.
• 🖼️ The progress bar uses a texture that is masked to show the appropriate value, with the top half always white and the bottom half changing.
• 🔄 The tutorial explains how to use nodes to split up UVs and position the texture correctly based on the value.
• 📐 The material is created using a combination of nodes, including a multiply node for emissive color and an opacity mask.
• 🔧 The material nodes are sourced from the scaler test debug scaler values, and the tutorial mentions flipping the numbers due to inversion.
• 🖥️ The tutorial guides viewers on how to use a website, blueprint.com, to copy and paste material code for use in Unreal Engine.
• 🛠️ A custom C++ class named 'ProgressProp' is created to handle the progress bar's functionality, including updating its value and transform.
• 🎮 The tutorial includes a button device example to interact with the progress bar, simulating player input.
• 🔄 The 'Update Transform' function is highlighted for reusability, adjusting the progress bar's scale and position based on the new value.
• 🔚 The tutorial concludes with a discussion on handling the button press event, updating the progress bar, and cleaning up resources when the progress is complete.

Q & A

What is the main focus of the video tutorial?

The main focus of the video tutorial is to create a progress bar using Unreal Engine 5, which can be controlled and displayed based on the Y scale value.

How does the progress bar's value get set in the video?

The progress bar's value is set by using the object skill and feeding it into a series of nodes, which manipulate the UV to display the correct portion of the texture based on the input value.

What is the purpose of masking the top half of the bar in the tutorial?

The top half of the bar is masked to always remain white, while the bottom half changes based on the number value, indicating the progress.

How does the progress bar keep facing the camera in the video?

The progress bar keeps facing the camera by using nodes that are part of the scaler test debug scaler values, which are designed to maintain the orientation relative to the camera or player.

Why are the numbers inverted in the progress bar texture?

The numbers are inverted possibly due to the way the data or values are calculated, necessitating a flip at some point in the process.

What is the role of the 'scaler test debug scaler values' node in the tutorial?

The 'scaler test debug scaler values' node is used to provide the necessary values for the progress bar, and in Unreal Engine 5, it allows for a deeper inspection of the node's functionality.

How does the tutorial handle updating the progress bar's value?

The tutorial handles updating the progress bar's value by creating a new class called 'progress prop' with a variable to hold the new skill value, and using a button device to trigger updates.

What is the significance of the 'update transform' function in the video?

The 'update transform' function is significant as it allows for the reusability of code to adjust the scale, rotation, and position of the progress bar based on the changing values.

How does the tutorial ensure that only one player can update the progress bar at a time?

The tutorial ensures that only one player can update the progress bar at a time by using a logic statement that checks if the progress bar is currently updating.

What is the final step in the tutorial for making the progress bar functional?

The final step in the tutorial is to create a mesh and blueprint that includes a plane rotated 90 degrees on the X-axis, applying the correct material, and connecting all necessary components to achieve the desired functionality.

Outlines

00:00

🎨 Creating a Dynamic Progress Bar in Unreal Engine

This paragraph introduces the process of creating a dynamic progress bar using Unreal Engine. The focus is on utilizing a material and setting its value based on the Y scale. The technique involves splitting up UVs and using a row of numbers to display the progress accurately. The progress bar is masked to show the top half as a constant white, while the bottom half changes based on the input value. A limit is set to remap values, with 500 representing half completion and 300 showing a full sweep across the texture. The nodes are designed to always face the camera or player, and the tutorial references a scaler test debug scaler values node. The numbers are inverted, which is addressed by flipping them in Affinity Photo. The material is then imported into a website for further customization. The tutorial also covers feeding the material to the correct pins in Unreal Engine, setting up the emissive color, opacity mask, and position offset on a plane.

05:10

💻 Coding the Progress Prop in Unreal Engine

Paragraph 2 delves into the coding aspect of the progress bar, focusing on creating a new class called 'progress prop' with a float variable to hold the skill value. The tutorial explains how to initialize the prop's transform and scale values, and how to create a function to update the transform based on the changing values. It also covers the use of special math and random modules for giving random values to the progress prop. The logic is set up to ensure only one player can update the progress at a time. The paragraph details the process of initializing the prop, handling button interactions, and updating the progress bar's value and position. It also discusses creating a new function to update the transform and how to handle cases where the progress reaches zero or beyond.

10:15

🔧 Handling Button Interactions and Updating the Progress Bar

Paragraph 3 continues the coding tutorial by focusing on handling button interactions to update the progress bar. It describes setting a new random value for demonstration purposes, which would be replaced with agent data in a final game. The paragraph explains the process of updating the position and creating a new function to handle the progress update. It also covers the conditions for when the progress value goes below zero, such as disabling the button or making the progress bar invisible. The tutorial corrects a mistake in the code regarding updating the transform with the new value instead of the amount. The paragraph concludes with spawning the update function every time the player presses the button and the progress is not currently updating.

15:16

🛠️ Creating the Mesh and Blueprint for the Progress Bar

The final paragraph outlines the steps to create the mesh and blueprint for the progress bar. It starts with creating a plane that is rotated 90 degrees on the x-axis to form a rectangle. The tutorial then guides through creating a blueprint for the StMesh class, adding the rectangle, and setting the correct material. It discusses scaling the progress bar in the verse code and connecting all the necessary components, including the button and the progress prop itself, to achieve the desired result. The paragraph concludes with a reminder to the viewer about the tutorial's purpose and a look forward to the next tutorial.

Keywords

💡Progress Bar

A progress bar is a graphical representation that shows the progress of a task, typically displayed as a filled bar that grows as the task progresses. In the video, the progress bar is created using a material and is manipulated based on the Y scale value, which determines how much of the bar is filled. The script mentions setting the progress bar's value by feeding it into nodes, which control the masking of the bar's texture to reflect the current value.

💡Material

In the context of video game development, a material refers to a set of properties that define the appearance of an object in a 3D environment. The video discusses creating a progress bar material that changes based on a numerical value, using UV mapping to align the texture correctly and masking techniques to show the progress.

💡UV Mapping

UV mapping is the process of projecting a 2D image (texture) onto a 3D model. In the video, UV mapping is used to correctly position the numbers and the progress bar texture on a 3D object. The script describes splitting up the UV to use specific numbers from a texture sheet at the correct location on the 3D model.

💡Masking

Masking in 3D graphics is the technique of hiding or revealing parts of a texture or object. The video script explains using masking to control which part of the progress bar texture is visible, with the top half always being white and the bottom half changing based on the progress value.

💡Nodes

Nodes are fundamental building blocks in many 3D and game development software, used to create and control various aspects of a scene or object. The script mentions using nodes to split up the UV, control the masking, and manipulate the material properties of the progress bar.

💡Scaler Test Debug

The scaler test debug seems to refer to a tool or feature within the development environment used for testing and debugging scaling values. The video script discusses using data from this tool to create the progress bar material and ensure that the numbers and bar scale correctly.

💡Unreal Engine 5

Unreal Engine 5 is a game engine developed by Epic Games, used for creating high-quality 3D environments and games. The video script mentions using Unreal Engine 5 to inspect nodes and understand the calculations behind the progress bar's functionality, indicating that the engine provides tools for detailed node inspection and debugging.

💡Blueprint

In Unreal Engine, a blueprint is a visual scripting tool that allows developers to design game logic without writing traditional code. The script describes using blueprints to create a new material, set up the progress bar's functionality, and handle button interactions that update the progress bar.

💡Emissive Color

Emissive color refers to the color emitted by an object without the need for external light sources. In the video, the multiply node is set to control the emissive color of the progress bar, which affects how the bar's material appears when unlit.

💡Opacity Mask

An opacity mask is used to control the transparency of an object or texture. The video script explains using an opacity mask to determine which parts of the progress bar texture are visible, based on the progress value.

💡Transform

In 3D modeling, a transform refers to the set of operations that modify an object's position, rotation, and scale. The video script discusses updating the transform of the progress bar to change its scale based on the progress value, using functions to calculate and apply the new transform.

Highlights

Introduction to creating a progress bar using a material in Unreal Engine.

Setting the progress bar value based on the Y scale using object skill and nodes.

UV mapping to position a row of numbers correctly for the progress bar texture.

Masking the top half of the bar to always be white, with the bottom half changing based on the value.

Limit and remapping the progress bar to show different values across the texture.

Nodes keeping the progress bar facing the camera or player.

Using scaler test debug scaler values for the progress bar.

Inverting numbers for correct data representation in the progress bar.

Customizing numbers in Affinity Photo and transferring the material to a website.

Sharing a link to blueprint.com for accessing the material code.

Setting up the material in Unreal Engine by pasting the copied code.

Configuring the material with mask and unlit settings.

Using a multiply node for emissive color and opacity mask.

Setting the W position offset on the plane for the progress bar.

Creating a new class 'Progress Prop' with a variable to hold the skill value.

Using special math and random modules for updating the progress bar.

Initializing the progress prop with initial scale values.

Creating a function to update the transform of the progress prop.

Handling button presses to update the progress bar with random or agent data.

Updating the progress bar's position and scale based on new values.

Creating a new transform function to handle the progress bar's movement.

Disabling the button when the progress bar reaches zero.

Finalizing the progress bar setup with a new progress prop class.

Creating a mesh and blueprint to implement the progress bar in the scene.

Rotating a plane to create the correct orientation for the progress bar.

Applying the progress bar material to the plane in the blueprint.

Connecting the button and progress bar in the blueprint for interactivity.

Conclusion and invitation to the next tutorial.

Transcripts

in this video we're going to create this

progress bar and it just uses a material

and first so let's dive straight into

it with this progress bar or unlock bar

or whatever you can set the value based

on the Y scale so if I put in 13 or 14

it will be that value over there the way

I can do that is by

using the object

skill and feeding them into a bunch of

uh

nodes so that we will split up the

UV and basically use

uh this row of

numbers at the correct spot this is the

progress bar it is basically this

texture and um

I'm

masking the top half and the part of the

um bar to whatever value comes in right

so the top part will always be White and

the other half will change based on the

uh number value so I've set here a limit

and remapping that

limit 500 will be half and

then 300 it will you know swipe acoss

cross the

texture now one of the cool things is

that with this line these nodes uh it

will keep facing to the camera or to the

player a big chunk of this these nodes

are coming from the scaler test debug

scaler values this node and if you

double click on it is uh unable to check

it but with Unreal Engine 5 we can look

into this node and see what's happening

so I took most of the notes for example

this part from that and this

part the weird thing though is that the

numbers are inverted and maybe that's

the way it's been it's calculating the

um the data or the numbers so it needs

to flip them at some

point so I went ahead and do did the

same thing in Affinity photo

and uh my custom

numbers so I went and copied the

material over into this website

blueprint.com and I will share this link

so you can you know go over here look at

it on

the code to copy copy it

over select everything contrl

C go back to

to ufn go to materials create a new

material and paste it over here then it

will give you everything you need for

this material now we need to feed it to

the correct uh pins over here in example

we going to say set it to mask and to

unlit

now this multiply node will be emissive

color and this will be the opacity

mask and the last part is over here and

it will be W position

offset on this plane it doesn't show

anything but here on the cube it does

show the material when you don't have

the

texture set here you can set the numbers

texture

and here you can set the bar

texture get rid of this stuff uh yep um

in my example I'm using the

button to update it it can be anything

of course

Buton device

and we using the prop progress

prop if

prop we create a new class as

well uh progress

prop we need a variable

float with the

um yeah the new skill value or and the

initial skill value that be a th in my

case we want to

update the

transform of the prop so the value

changes in a

transform a

transform okay let's get in the

additional Things We Want U modules we

want to use in our code this is special

math and random and the random is just

for the example here so that the player

will give random values to this progress

prop and one a bull or a

logic that states if it it is updating

or not so just one player can uh use it

at a

time the first function is to initialize

it uh in it prop

uh the

button and

interative with

event subscribe to that

andle uh button fine that's

fine andle button agent is always the

thing that comes through

and in this example will just give a

random value but in the final game you

want here to get the agents data and

feed it whatever value it

holds to update this

bar and initialize I'm going to give it

the initial you know uh scale values in

it

transform and for this I'm going to

create another function to update the

transform so

so I will mark this

out this

is come back to that

later going to create a special function

that we can reuse update

transform if the

amount that is changing and we return

the

transform now we want to

uh move

it um or use the move to

function for the prop but we don't want

to change the rotation of the position

or the position so we want to save

those the

rotation uh progress prop get

transform

form rotation

progress Pro get

transform

translation now we want to create a new

transform and that is

transform and return

that new transform

now do we want

to adjust

this first the

scale which is a vector

three and

the uh

rotation which is the rotation and the

translation which is the position

and for the scale the X will be you know

we scaled it up when we can do it here

or uh in the blueprint for now let's

just do it here DX was four the Y is of

course the uh

amount and the Z is also

four so we're going to use this function

here to

update one

function let to update

our

yeah so the initial value is in this

case new

value so at the end it prob it will set

a th000 on the Y for the skill

and then we teleport

that

value prop teleport

to in it

transform

form yes

sir now the fun part is handle button

so if it's not updating is

updating is

false

itating uh just set a new random value

this is new

random this is for demo purposes and the

in a final game final idea you want to

give or get the agent data and give that

value but for now this

is

fine and we want to update the uh

position so we spawn a new function it

is date

prop with the amount

suspend and we going to set this

updating to

true we're going to set a new

value which was thousand in the

beginning we want to set it to the new

value minus the amount here

and two things can happen if the

value the new value is lower than zero

that means like it's over right the

progress is done so we want to take that

into account if it's not below zero we

want to

um update the progress bar so if the new

value is equal to Z

we want to do something and else we want

to

do the update the update this a new

[Music]

transform we reuse the

function with the

amount then we're going to move the prop

progress prop move to

new

transform uh with a Time

SO2

seconds and if it's done we set is

updating

to

false now if the value is lower than

zero we can for example um disable the

button we can

also you know there is a last part right

there is a small part that needs to be

filled

up so

transform update transform weuse the

function and the value is zero so we

want y to be zero now and then we going

to do uh progress prop move

to transform

and if that's happen so it will be

invisible

progress prop

dispos so we created update prop and now

we're going to spawn that every time the

player is pressing the button and it's

not

updating

dat

prop with the amount which is a new

random

value so I made one little mistake in

this code and this is when updating prop

we don't want to update the transform

with the amount but with a new value so

change that to new value and now it

should work on

begin uh

new progress

prop progress

prop and it

needs two things the

button and the progress prop

itself so I'm feeding these two

editables into this new class here and

new

progress prop it's just one function I

need to start it off to kick it off and

that's the in init

prop now let's create the mesh and the

blueprint to make this work and first of

all we need a plane that is rotated so

we're going to get a

rectangle we zeroed it

out and we just want to rotate it on on

the x-axis like so 90°

accept and then we can over here make

the

transform we're going to use this going

to create a blueprint for this blueprint

class St

mesh and while we select a rectangle we

going to add it over here

and we going to set the correct material

so M

example and here is

it now let's grab everything we need it

is the

progress it will be scaled in the verse

code but we can do for example you

know scale it up just see what's going

on and remember this is the value

we need the

button

and the first

device example

device this will now the

button this one

and

progress and with everything connected

we get the result we

want I hope you like this tutorial and

I'll see you in the next one