Hello, this is Hyunjin Kim, who will teach Unreal Engine basics for implementing realistic content
In this lesson, we will change the actor's appearance by applying the model created by the art group
We'll also create a background actor and make that background scroll infinitely
Lastly, we will learn how to use simple widgets
Changing Appearance by Applying the Model
This time, let's change the appearance by applying the model
Run the Epic Games Launcher
Next, select the Marketplace tab
Then, click the mouse in the content search box, search for AutoMotive, and press Enter
Then, in the second item, you will find something called Automotive Materials
Select the relevant item and click the free button
Then, the button changes to the Add to Project button, where you can immediately add it to the project
Then, if you purchase a paid or free asset, you can check it in this library tab
You probably have it created in your archive
So, if you purchase a lot, you can't check it right away
So if you click the mouse in this library search and search for Automotive, you can see something like this
Then click the Add to Project button
It says no compatible user projects found, so click Show all projects here
Then, all projects on my PC will appear
Here, select First Project, then click Select Version
Then select the highest version, and click Add to Project
Then, the download will proceed
Since we only use the model here
It doesn't matter if the Unreal version is compatible
Once the download is complete, open our project
In the content browser window, you can see that the Automotive Materials folder has been created
When you purchase an asset from the marketplace and add it
Most levels are created in a preview format by the company that created the asset, saying, "This is how our asset looks."
The asset we just downloaded also has levels
After selecting the Automotive Materials folder, you will find a Maps folder
If you double-click the maps folder, you will see an overview-level
Double-click the level, and now, we have laid out the assets in a preview form like this
So we can select one we like here
And then write down in the details window what model we are using
Then what material we are using
I wrote material like this
After selecting Actual Practice folder, open Actual Level
After double clicking BP AI Actor, I will change the look
At Component, select Static Mesh Component, then on the right Detail Window's Static Mesh Drop Down
There will be only one model you write here
sm_shader all should be added
When you see on the viewport, you can see that the shape has changed like this
I will change the Material as well
mi_car paint_cherry
Choose this and then
Add Mi_metal_painted
Finally, it's all the same, mi_metal forested reflective
Then you can see that its color is changed to red
Next, I will make this eye shape look to the left from where I'm looking
Because this AI actor will be coming down in this direction
So, in this transform, we can rotate this to this blue axis
So that we will rotate it by 90º
Then, if you save and press the compile button, move to the Actual Level, and start
AI Actor comes out
With the Unreal mark like this
You can see the model is in a changed state
Download the Player and Bullet Asset you like
Then, take the time to change the Static Mesh and Materials
Move the Background to Scroll from Top to Bottom
This time, I will move the background to scroll from top to bottom
For example, let's say there is something like this
Let's say this height is set to 100
Let's say the coordinates of this background actor are
0, 0, 0
You have to
Scroll this from front to back like this
Which direction does it move?
Forward minus direction, right? We can make it move backward
Then, only the value corresponding to this x among these coordinates will be changed
Then, we will copy something exactly like this and place it on top
At a distance of exactly 100
The coordinates of this actor will be 100, 0, 0
When we play, we will make the screen visible like this, but if we overlap them here, they won't be able to move
So we'll express them next to here
So, let's say this background is visible here, and then the player is here
At this time, when you press the play button, we will create blueprint nodes
So that these backgrounds move in the opposite direction of the forward vector
So, let's move this
When you move this
You will see this background scrolling in that blue area
Then, let's say the background above this
Has reached the same level as the first background
So, the background above this will have an x ​​coordinate close to 0
And the background below
Will have an x ​​value close to minus 100
So what to do at this time is
If you think that the x value is smaller than minus 100
You put the background up like this
You have to move it twice as much as this height
Because the background which is up here has a value of 100, and we have to go up on more level, so it has to be 100
So we move it twice as much as this height
When?
When this Actor's x value is smaller than -100, you have to move twice as much as this height
If this continues, we can make them look like they're moving infinitely with these two Actors
We will make in this way
First, we will move this floor
Now, the Blueprint is not applied to this floor
When we put the cube from Place Actor, this Actor can't see the Blueprint file as well
You can make these Actors with Blueprint After selecting the floor, you can see the icon next to the add button in Detail
If you use the icon, it asks if you are going to make a Blueprint based on this status
Write the Blueprint name
I will say BP_flow, then select
This is the same shape as before and made with a Blueprint
You must move it backward when you come to the Event Graph
Press the right key to get Get Actor Location
Then, press the right key and add the Forward Vector
To Get Actor
Next, place the mouse on the Return Value of the Get Actor Forward Vector and drag it
Then use Multiply to add Multiply node
Then right-click and select
Make Literal Float
Please write -1 here and connect
Then press the 'plus' button in Variables
And call it Scroll Speed
Set the data type to Float
After compiling, set the Scroll Speed to 100
If it's a bit slow, I'll change it later
So I will drag this Scroll Speed to Get
Then, multiply these two, so drag and drop from the yellow pin above, then search for Multiply
Add a multiply node, and then connect the Scroll Speed to multiply it
After that, I will multipy it with Delta Time, drag it from the yellow pin adn ad Multiply node
Add Delta Seconds and organize the nodes
Next, I will plus these two by dragging from the yellow pin
Add the Add node and connect Get Actor Location
Just set this final value to the Actor
Press the right key to search for Set Actor Location Node
Connect the final value to the New Location
Next, I will connect the execution pin of the Event Tick to the execution pin of the Set Actor Location
I just made it move backward, and compile
Then run it, and it appears just to move forward even if the player is still
It's slow, so I'll make it a little faster
Select BP Floor and then set this speed value to 500
Compile and then play again
It goes a little bit faster, but there's only one, so if it keep going like this
The background disappears, right?
So, what should I do? Place one more on top
After selecting BP Floor at Outliner, press Alt, left-click and place the red axis like this
When you put this perfectly, its size is 8,000, so select this copied flower
I'll set this red x value of Transform Location to 8,000
Then, you can see that it is attached exactly like this
Let's press Play again
Here, if you press F8
You can freely adjust the camera viewpoint and can see it go like this
You can see these two floors are both moving
Now, I will go to BP Flower and put a condition
What condition?
Among the locations, if x value
Gets smaller than -8,000
Then plus 16,000 and put this up
I will stop this running on Event Tick for a moment, then right-click and put in Sequence
Add the Sequence, and then run
Then, connect the Then 0 execution pin to Set Actor Location
And pull it out this way
Then, put the condition at Then 2
First, right-click and bring the current location of Set Actor Location
Then, I will compare the x values Return value returns the vector which has x, y, z
By right-click and do Split Struct Pin, x, y, and z value can be checked individually
Here, drag the mouse on the pin called Return Value X and search for the inequality sign: Is the left side smaller?
I'll put Less
And then I'll plug in the numbers directly here
Just enter -8,000
This is the current position and is true if the x value is less than -8000
Otherwise, it is false
Press the right key and search for if you need to add a branch node
Then, insert this compared value into the condition like this
Connect the Then 1 execution pin to enable this branch node to be executed
I will also organize the nodes like this
If it becomes true by becoming smaller than -8000
Increase it by 16,000
Right-click to get the Get Actor Location value
Then, drag the mouse on Return Value and add a plus add node
We only need to increase the x value by 16000, so we will write that value here
The remaining y and z are 0, so they will remain the sam
Then, you can set this value again, right?
Right-click, then Set Actor Location
Here, let's connect this added value to the New Location
And connect from the true execution pin to the Set Actor Location execution pin
Compile, go to Actual Level, play
Press F8 to exit, and then watch this first one
The moment the X value reached -8,000, it came back up here, right?
The moment it gets to -8,000
It comes up here like this
It's so slow right now that it's taking a long time, so let's take a quick look at this as we play it
After selecting the BP Floor top component for BP Floor
I will set this speed value to 5,000
Compile, play again
How does it look?
It seems like it keeps moving and scrolling infinitely, right?
This method allows
A scrolling background
To be expressed with only small resources
For these things to be realized, the art profession must make them well
How? The part that continues here contains an if shape
Even if it just meets like this, it has to be made in such a way that it connects as one
So it doesn't feel like it's broken
But feels like it's connected
Let's set this speed value back to 500 on the BP Floor
Forming Widget
This time, we will form the UI
Using a widget and simply visually express
How many AI actors are destroyed when the bullet actor
Collides with the AI ​​actor
After moving to Actual Level
Right-click in the content browser window, and this time
At the User Interface menu
Select Widget Blueprint
Next, I will select User Widget under Common
Let's name it WBP_Main
Double-click to open it
Unlike a regular Blueprint, there is no Viewport
Only a Designer tab
Here, we form the screen for the UI
There is a list on the left of what UI and widget to use
First, let's expand this panel, then drag the canvas panel
And drop it on WBP_Main in the Hierarchy window below
Then it is added like this
After selecting the canvas panel
You will see an arrow like this on the right side of this designer window
You can adjust the size by moving the arrow
Leave it as default for now
Then, form the UI within this screen
Let's put a text in the top left corner
In the Palette, there is Text in the Common menu
If you drag the Text and place it in the designer window, it will become a child of this canvas
You can change the position like this with the mouse
And if you look to the right, you can also edit the values ​​with positions x and y
Let's take a look at some frequently used options
First, we have Anchors
If we expand this, it is currently set to 0 0 0 0
What this means is
I'm currently a Child of a canvas panel
I'm going to calculate the coordinates based on the top left corner of the Parent
If I click on Anchors here and then select the center shape like this
These Anchors will change to 0.5 0.5 0.5 0.5
This means I will calculate the coordinates by centering the canvas panel as the center
So, if you look at the coordinates now
Position x is -920, and position y is -508
If you change this, the positions x and y will change
Let's put it back to the top left
If you look at the Alignment value, it is currently set to 0.0
Meaning if I position it at 100, 100
I will center it at the top left and place it at that position
If you really put 100, 100 so that the top left corner is at 100, 100
It will be arranged like this
If you enter 0, 0, it will be placed exactly in the upper left corner
So, if you put 0, 0, you can see that it is placed exactly in the upper left corner like this
So, you can adjust these Anchors and Alignment to place them appropriately
This contains the basic text called Text Block
You will see ‘There is text in the content on the right,’ the content written goes in there
So, I'll put the content, AIActor
Disappeared
Number
Then, put in colon
The current size of this text is
40 of 151, but it is out of range
So, you can increase this size a little or if you check the size of the contents
The size will automatically change to match the size
Instead, this number does not change
And then I'll put one more text I dragged it and put it into the canvas panel
Let me change this name a little bit
Select the Text Block you added, and then at the top of this Details, Text Block_83
Let's call it Remove Count
So I'll place it here
The default value will be 0, not Text Block
And then, I'm going to click on Size To Content
So what we're doing is we're going to change this value to 1, 2, 3, 4 when the Bullet and the AI ​​actor are out of collision
It may not be visible because it is white
So select the text for the number of missing AI actors, then there is Color and Opacity in Appearance on the right
If you click on this white part, the Color Picker will appear, and then you can change it to the color you want
Select this count as well, and then change the color
Compile and save, then go to the Action Level
And double-click BP Player to open it
So, at Begin Player, we will set the initial input
Run the bullet timer, and then create the main widget
If you press the right key and search for Create Widget
A Create Widget will appear, add that node
And select Select Class from this Class item
Then, if we search for the WBP_Main we created, we will find one
The idea is to create WBP Main
However, once this widget is created, it will not be visible on the screen
After creating it, you need to paste it on this screen
So, I'll right-click the Return Value where this widget was created and briefly put it in Variables
Promote to Variable, a variable is created like this, and the data type is WBP Main
I will change your name
I'll call it Main Widget
Then, with this widget created, drag it from the blue pin
And search for Add to the viewport
Then, select Add to Viewport in the User Interface section below
Select
This means
Widget
Create
Attach
To the screen
Attach the execution pin of Set Timer By Function Name to Create the WBP Main Widget Node
Compile
If you move to Actual Level, and press the Run button
You can see the number of missing actors in the upper left corner like this
It overlaps something else, so I'll slightly move its position
Let's go to WBP Main
Hold down Ctrl, select both with a mouse click
And then scroll down
And I'll increase the font size a little
If you select the Disappeared Number text and open the font under the color you changed, an option will appear
So, you can choose the font shape, make it thicker
And then, if you select the size and select 50, the font will become larger
You can also rearrange this number and change the font size to 50
Reposition it appropriately
Compile and Play again, it looks bigger and more visible
Now, all you have to do is raise those numbers
Let's create a BP Play function
After pressing the Plus button on Function, we will name it AddCount
And I'll also create a variable
Let's press the plus button in Variables
And name it RemoveCount
Next, I'll drop down Boolean and change it to Integer
This Add Count function increases this RemoveCount by one
And expresses the increased value on the main widget
Drag RemoveCount to Get
Then drag the green pin with the mouse, search for plus, and add Add node
Next, it will increase by one, so change the part from 0 to 1
What should we do with the added value again?
Set again to this RemoveCount
Connect the added result to RemoveCount
Next, connect the execution pin so that it can be connected
Then bring the main widget variables on the left
To get
Next, we changed the variable name that the main widget has
To RemoveCount
But we can't search it
It's because
Go to WBP Main
And select this text called RemoveCount
Then, if you look at Details, there is an option called is variable next to the name
You must check the relevant item to use it like a variable in Blueprint
Check, compile, and then move to BP Player
Then, if you drag and drop it again from the main widget
And search for
RemoveCount, Get Remove Count will appear like this
Click
It is saying, "Main Widget, give me the RemoveCount text among the texts you have"
Then, "RemoveCount Text, I will set the value to you"
So, search for
And add another node
Called Set Text
So
To In Text here
Connect the RemoveCount value with 1 added
Let me organize the nodes
Next, let’s connect the execution pin
Compile and executing does not mean that the Add Count function will work
Because someone has to call and use this function, we haven't used it yet, so we just created it
Who should call this Add count?
BP Bullet should
This is because BP Bullet Blueprint has
The role of destroying AI actors when they collide with them
At this point, I'll cut it off briefly before destroying myself
And I'll find the Player Actor
Next, the Add Count function of the Player Actor will be executed
Click right to add Get Actor Of Class Node
Then select Select Class in the Actor Class item
And select BP_Player
Then, Get Actor Of Class
Searches for the Player placed in the Level and throws it as this Return Value
Then, search for
“Player, execute a function called Add Count among the functions you have” and add it
Add
So, destroy the AI ​​Actor
Find the Player
Increase Count
And then connect to destroy myself
Compile, go to Actual Level, and press play then whenever the bullet is hit
You can see that the missing count increases
In this way, you can express data or situations using widgets
Let's come to WBP Main and add a button
There is a button in the Common tab, drag it
And drop it on the canvas panel.
Then, place it below the area where the missing count is output and adjust the size
With the mouse
Next, if you look at Details, there is a Background Color, and you can change the color after selecting the color
I'm going to add a text here, and I'm going to select the text widget and put it under this button
It is added like this
After selecting the text, I will say Stop the text
Under Detail and Content
If we press this button, it will cause what we're playing to stop
Press the Compile button, then select the button
And check Is Variable in the Detail on the right
If you check this, an Event will appear below
Here, an item can receive an event that says it was clicked
When you press the plus button in On Clicked
An event node is automatically added like this
Then, come to this Graph window
WBP Widget Blueprint is divided into the Designer tab and Graph tab
So, when you check the appearance, you can select the Designer tab, and then when you code something
You can select the Graph tab
What should I do now? Press the right key
And search for Quick Game, a node appears, and then connect this execution pin, when you click the button
This On Clicked Event is called, the node called Quick Game is executed, and the process ends
If you press the compile button, go to Actual Level, and then press Play again, you can see a button like this
When you move the mouse over something, the color changes, and when you click
The process ends like this
I will summarize what we learned in this lesson
We learned how to change the appearance of the Static Mesh Component by changing the Static Mesh and Material
You learned how to create a background actor and an infinite scrolling feature
We learned how to express the current user status using a widget
Change appearance by applying model Appearance change
Component - Static Mesh Component - Detail - Static Mesh Drop Down then set
Move the background to scroll from top to bottom Setting
Create a BluePrint node so that the backgrounds move in the opposite direction of the Forward Vector
Flow - Detail - Icon next to the Add button - Create BluePrint
Form Widget Setting
Contents Browser - Mouse right click - User Interface - Widget BluePrint - User Widget
Add Text: Palette - Common - Drag Text
Anchors: Select where to calculate coordinates based on the canvas
Alignmenet Menu: Text placement numerical settings
Content - Text: Content change