Sunset tutorial in Unreal Engine 4 with trueSKY

Welcome back to another trueSKY tutorial! This week, we will be creating a sunset scene. For this tutorial, I have found an image on Wikipedia (Attribution: Jessie Eastland), and it is a great scene to replicate.

I will be using Unreal Engine 4 to create this sunset, with the latest version of trueSKY. Want to follow along? Try trueSKY now for 30 days! You can even follow our guide on installing trueSKY in UE4. I will not be focusing on the clouds in this tutorial, as there will be a lot to cover with the sky. If you would like to learn more about how to make clouds, check out last week’s tutorial – Creating Cumulus Clouds with trueSKY

You can presume that for any values I do not talk about, that they have been left at the default value.

In this tutorial, I will cover:

Adjusting the Sun’s Properties
Progressing Time
Changing the Colours of the Sky

The Sun

Firstly, we need to change the size of the sun. From the picture, you can see the sun appears very large. One method of changing the size of the sun would be to enable Adjust Sun Radius in the trueSKYSequence Actor settings. This means the sun will automatically adjust in size to keep the total irradiance the same, while we adjust the diameter and radiance. For a similar sized sun to the picture, I have set the Max Sun Radiance to 500. 

Alternatively, if you would just like to alter the Sun’s diameter by hand, there is a diameter setting in the Sky Layer properties. Your sun will be very bright if you increase the radius without adjusting the radiance,  so be careful your scene is still lit appropriately. For my scene, I have used the first method, so I do not to worry about the light settings.

Now our sun is the right size, we need to set the sun’s position when it sets.

Sun’s Position

There are a few ways to set the suns position in the sky. Firstly, we could manually edit the sun’s position. In a sky keyframe, you can disable Automatic Sun Position, and then position the sun yourself. However, if you leave some keyframes as automatic, the sun may appear to take an unusual route. We can check this by enabling the Celestial Debug setting within Windows->Overlays->Celestial Display. This will show us the path the sun and moon are on, depicted by the yellow and blue lines. The circles are the positions set by the different sky keyframes. As you can see in the image on the right, as we have altered only one position, so the path is no longer uniform.

 

However, in my scene, I am going to adjust the start time so on play it begins just before the sunset. This allows me to use the default positions of the sun, and I can customize the exact time I will start my level at.

To do this, I am going to use trueSKY’s Demo blueprint, which will automatically progress time based on a start time and a factor at which time will progress. Time management in trueSKY is large enough for it’s own example, and will be covered in the future. For now, we can use the trueSKY Demo blueprint found in your trueSKY folder.  If your trueSKY folder is empty, you can enable “Show Engine Content” and “Show plugin Content” from the view options in the bottom right of the content browser, then search for the trueSKY plugin content folder.

Alternatively, you can find the trueSKY content in your Unreal Engine Directory  -> Plugins -> TrueSkyPlugin -> Content, which you can then copy into your project’s content folder.

 

Progressing Time

The trueSKY Demo blueprint has two variables, “Time Hours” and “Time Factor”. Time hours is the the time the project will start at. For my scene, I want to set my Time Hours to 17.5 (17:30). This will allow my sun to start high before falling below the horizon, where it will set at 18:06. If your times are different, maybe our Start Date, Timezone or Origin Positions are different. These can all be customized to adjust the time and position the sun will set.

Time Factor dictates how fast time will progress for trueSKY. A value of 1 is real time, so one second will equal one second in trueSKY. A value of 60 will mean a minute is progressed every second, and a value of 3600 (Very Fast!) will mean an hour in trueSKY progresses every second! I am going to set Time Factor to 250, which will make my sunset last around 10 seconds.

Sunset Colours

In trueSKY, the colours of the sky are determined by the Zenith and Horizon. Zenith is the colour of the sky directly above you, while the Horizon is, believe it or not, the colour of the horizon. These values can be found at the bottom of the settings in a Sky Keyframe. Make sure to select the sky keyframe at the point you want to edit, so near the time of sunset. Alternatively, just create a new Sky Keyframe at the exact time the sun sets. To edit the colours, we need to Enable Store as Colours. This will allow us to manually set the colours we want.

For my Zenith, I have gone with #ff0000 (solid red). Although this is a strong colour, setting the Horizon to #fa6400 (Dark Orange) allows the sky to blends nicely to produce colours similar to the reference image. To set the horizon, I used the “Pick Screen Colour” option within the colour selector, and clicked on the orange in the reference image. I have also increased the Horizon intensity to 5, making sure the sky is not overpowered by the zenith colour.

*Note: There is currently a bug which causes the Zenith and Horizon values to not immediately update the scene when they are altered. While we fix the issue, there is a simple workaround. Changing any of the other values in the sky keyframe (for example, the Sea Temperature) will cause the scene to update, displaying the changes made to the Colours. You can then revert the change you just made. This will be fixed in the next update*

As Sky colour is keyframe based, the colours are determined by blending the values of the two closest keyframes. So if needed, you can also alter the colours of the previous and next keyframes. This will reduce unusual results from colour blending.

Finished Sunset

Putting everything together, we now have our Sunset! My choices are just a reference, as there are many different settings I have not touched! Please experiment and test all the different variables available to you.

For example, if you dislike the amount of bloom being produced by your sun, you can change this through UE4’s bloom settings. To access these, add a post process material to the world, making sure to enable infinite extent. You can then just disable/decrease the bloom intensity setting. There are lots of other setting in Unreal’s post processing to alter, such as Lens flares or Depth of Field.

 

trueSKY Showcase

This week we are taking a look at a project by DragonClaw Studios, named Twilight Star: Heart of Eir. The team at DragonClaw studios have been using trueSKY with UE4 to produce a unique fantasy world. Twilight Star is a narrative rich experience, aimed to spark your nostalgia while maintaining a modern play style. Take a look at some images of their world below!


WaterfallScene

Discover a wealth of original concepts within the hand-crafted, magically infused fantasy universe that is Twilight Star. To learn more, head over to the Dragonclaw Studio’s Website, Instagram or even watch their team working live on Mixer.

Thank you for taking the time to read our blog. We are hard at work here at Simul on lots of exciting projects. If you would like to join our Slack, Contact us or send an email to Contact@simul.co with the email you would like to join with.