>> Welcome to Unreal Tips and Tricks.
In this presentation, we're going to be looking
at the Sun Position Calculator Plugin
and how we can animate it in runtime
with the help of a slider.
To begin, make sure the plugin is loaded
by going to the top menu bar and clicking on Settings,
and opening the Plugin Browser.
In the Plugin Browser, click on Built-In
and then search for "sun."
If the Sun Position Calculator has not been enabled,
turn it on and restart your Engine.
Once the Engine has opened back up,
go to the Content Browser and click on the
View Options in the lower right-hand corner.
Make sure that Show Plugin Content is turned on
as well as Show Engine Content.
With the View Options now correctly set,
click the folder icon in the Content Browser
to bring up the Search Folders command.
In Search Folders, type "sun" to quickly jump
to the Sun Position Content folder.
In the Sun Position Content folder,
you'll see that we have a new Asset that was made for us
when we enabled the Sun Position Calculator.
Drag and drop this Blueprint into your Level
and as soon as we do that,
the Blueprint is now driving my sun-sky system
I have a nice gizmo that allows me to see where north is,
and what we want to do is make it slightly later in the year
so the sun starts to flip around to the other side of the buildings.
As I increase the months, it not only updates the
Directional Light, but it also updates the Sky Sphere.
Now that we've done that, go ahead and click the back arrow
button in the Content Browser, to get ourselves
back to our content folder.
Now that we have the Sun Position Blueprint
in our scene working, the next step is to
generate our User Interface.
In the Content Browser, click on Add New,
and go into the User Interface folder.
Select the Widget Blueprint to create it.
With the Widget Blueprint made, go ahead and give it a name,
and double click on the Widget Blueprint
to bring up the designer.
In the Widget Designer,
we're going to go ahead and add a Slider
by just dragging it out from the palette.
Then I'm going to make the Slider slightly larger.
Now that we have our User Interface designed,
we're going to jump over to the Graph
and start talking about the Blueprint code
that we need to generate to have that Slider
ultimately drive the BP Sun Position.
Now, the BP Sun Position is obviously a Blueprint,
and to update any of those attributes on that Blueprint
in runtime, we need to create an Object Reference of that data.
This is very easy to do inside of Unreal,
using the Get All Actors Class.
What we're going to do is start off with the Event script,
and just drag out and do a search
for Get All Actors Of Class.
So just type, "get all actors of class"
and now that we've done that, we can specify the class
we want to get, which is going to be the
BP Sun Position, so just come down here and
search for "sun," and we'll grab the BP Sun Position.
What this is going to be is an Array of information.
We want to get a copy of that information,
so all we have to do is drag out of the Actor,
and start to type, "get," and we're going to do Get A Copy,
and that copy is, again, an Array of information
at the first index.
Now that we've done that, the next thing we want to do
is we want to store this information in the variable.
The reason we want to do that is because
Get All Actors of Class can become costly
So all we're going to do is drag out and say,
Promote to Variable.
As soon as we promote that to a variable,
we're going to connect these guys together
and we're going to want to give that variable a name.
You'll notice that as we look at the Variable Type,
its Variable Type is BP Sun Position.
That's why we're going to be able to work with
and manipulate that data. It's exactly the same as the
Actor Class, which makes perfect sense.
What we want to do is give this variable a meaningful name.
What it ends up being is the BP Sun Position Actor.
So we'll just say, "BP Sun Actor."
Awesome! Now we have that information
stored in a way that we can work with it
and we can modify it and use it in Blueprint,
which is exactly what we had to do.
Let's go ahead and slide this up here
and talk about the next chunk of code we want to build.
This is going to be the code that we're going to use to
hook that Slider up to and update the sun.
Very, very cool.
What we will do is, drag out the BP Sun Position Actor,
and we will tell it that we want to get the information from that.
So we've now got our information here,
we're going to use this to do a couple of things.
we're going to drag out and tell it we want to update the sun,
so just search for "update" and click on Update Sun.
We also want to use this to set one of the time variables
on the BP Sun Position.
In this example, I'm going to use hours.
I'll just drag a wire up and search for "hours."
Then select Set Hours.
Ultimately, we want to have that set hours drive
the update of the sun. So we're just going to
hook those guys together, we'll clean these nodes up a bit.
Now that we've done that, the next thing we want to do is
we want to have something drive the hours.
We've obviously made a Slider that's the ideal candidate
to drive the hours, so how do you do that?
If you highlight the Slider variable,
you'll notice that we can create Events.
What we want to do is have an Event that's created
on value change, so all I have to do is click the plus icon
on On Value Changed, and it creates a new
Event node for me on value change.
This is going to ultimately drive the set hours.
So we're going to link those two guys together,
and what I want to do is, the Sliders go from a range of
0 to 1. We don't really want to have a 0 to 1 Slider
because we want the hours to move from morning to night.
What we're going to do is, pull out of the value
and we're going to remap that range by searching for "map,"
and doing a Map Clamped Range.
So again, let's just clean this stuff up a little bit.
We're going to go from 0 to 1,
and we will switch that over to be something like 7 AM,
to 20 hours at night.
Now we'll take this value and have that drive the sun.
Pretty straightforward there, so we can zoom out here.
We've now got everything built the way we want.
Let's go ahead and hit Compile and Save.
Our first chunk of Blueprint code is creating the
Object Reference. Our second chunk of Blueprint Code
is taking that Object Reference and using it to update the sun
and the Slider to basically update the hours.
So it's pretty straightforward.
Now that we've done this, the final thing we need to do
is get that user interface, the Widget Blueprint user interface,
to display on our level when we hit play.
There's a few ways of doing this.
The way that I like to do it is to actually
add another Blueprint into my scene
and have that generate the actual UI.
How do you do that?
If you right-click inside the Content folder,
and click on Blueprint Class, we're going to create a simple
Actor Blueprint and we're going to call this
something meaningful like Blueprint_UI Maker.
So we've got our Blueprint UI Maker. Let's jump in there
and add a few nodes into this guy.
In the Event Graph, what we want to do is on the Event Play,
we want to generate a piece of UI.
So we will go over here and we will say "create."
We're going to create the Widget.
The Widget that we want to create is going to be
this Widget Sun Position Slider that we've already made.
All we have to do now is add this to the viewport.
So drag out and type, "add," pretty straightforward.
Jump up to Add to Viewport, and just title this stuff up.
That looks pretty good.
Now we can go ahead and compile that guy and save it.
So we now have our BP UI Maker
that we could drag and drop into any level on our project.
It will give us the ability to drive that sun position.
Let's go ahead and drag and drop it into this Level.
With that done, we can go and hit Play
and check out how our Slider works with the BP Sun Position.
Here we are in our scene and obviously if I start to
grab this Slider,
you can see as I move through the hours of the day,
that sun updates and notice the background sky also updates,
so it's just a really, really cool tool
and it allows us to do some really fun stuff.
As I select through the daytime here
we can get this really nice light study happening
in our environment.
That's just a really quick example of how we can build
a UI system that gives the ability to update
attributes on Blueprints in runtime
using the Sun Position Calculator Plugin.
Hope you guys enjoyed that. Cheers, everybody.