Welcome back, everyone! This is part 2 of my tutorial mini-series about how to make things move nicely using your awesome powers of math! (See part 1 here)
As with part 1 of this series, I’m going to assume that you know at least the basics of Unreal Engine Blueprints already – if not, check out this official video tutorial series by the Unreal Engine team, which should get you started! And since I only just set it up a few days ago: If you want me to keep you up-to-date with new tutorials I release, why don’t you subscribe to my mailing list? You’ll get notified when I post cool new tutorials or other interesting stuff!
Just to catch you up, I’m using this asset here to demonstrate a few simple ways of how to animate something using only blueprints and math:
(Shown at 8x speed)
In the first part, I showed you how to create a nice swiveling motion. This second part is a bit simpler, and it will teach you how to improve that swiveling effect by adding some soft bobbing motion. Let’s turn off the swiveling for a moment, so you can see what the bobbing motion looks like all by itself:
Looks simple enough, right? And it also moves kind of unpredictably, which is exactly what we want. So, how do?
Who’s this Bob guy?
Let’s define bobbing motion as smooth up and down movement, like what happens when you put an apple in a big bowl of water, and then punch it slightly, but not in a mean way. It’ll start bobbing up and down a bit! Bad example, probably, but I think you know what I mean, right?
So, how do we do this? We’ll need to use our awesome knowledge of sine functions that we either already had or acquired in part 1 of this tutorial.
As always, illustrations help! Did you know that sine functions can be expressed like this?
Let’s look at the right part of it first. On this graph, the X axis (the horizontal one), tracks the rotation angle. If you’re curious about the π stuff, don’t worry about that for now – that’s a different way to write angles, called “radians”, which you might have heard of. For ease of explanation, we’ll just use degrees – but if you’re curious:
You may remember from your math classes that the circumference of a circle is equal to its radius, multiplied with 2 π, or in equation form:
c = 2 π r
Think of radians simply as the length of circumference, relative to the circle’s radius, you get at a circle section of that angle. As you can see in the animation above, at 360°, the radian value is exactly = 2 π, which is exactly the value for the circumference of a full circle. If we only take a half circle, i.e. a 180° angle, the radian value is half that = π.
Some functions in UE4 use radian input instead of degrees, and for some others (such as the trigonometric functions like sine, cosine, and tangent) there are two versions – one for degrees, and one for radians. Just something to be aware of!
So, what interests us here is purely the vertical movement on the Y-axis over time. Sine functions are a great way to create cyclical motion, and that’s exactly what we want. Take a look at how it looks if you animate a point using just a sine wave:
The fun begins when you start to layer multiple sine waves with different periods, phases and amplitudes on top of one another, and that’s just what we’re going to do! Why, you wonder? Take a look:
Layering multiple sine waves
To explain why layering multiple sine wave functions is cool and useful, let’s do a quick recap on the words we use to describe certain attributes of sine functions.
Amplitude is the height of the wave’s peaks. Perhaps you’ve also heard this in the context of audio already – that’s because sound waves are waves too! And the higher the amplitude, the stronger the pressure in the air that carries the sound, and therefore, the louder the sound. Makes sense, right?
Period is how long it takes for the function to do exactly one full cycle. Frequency, which you’ve probably heard more… frequently (I’m sorry) is used to describe the amount of full cycles per second. So basically, period and frequency are the inverse of each other – period is “seconds per cycle”, and frequency is “cycles per second.” When I build blueprint tools, I tend to use either, depending on which one gives users the easier to understand number. (Remember: Build easy-to-use tools! The rest of your team will thank you. Or just take it for granted, because you’ve spoiled them… oops.) For example, a frequency of 0.0167 is a lot less convenient for making small adjustments to than a period of 60 🙂
Phase, lastly, is the horizontal offset. Unmodified, the sine function starts at 0/0, and then starts swinging upwards. With a phase of e.g. 0.5 as shown above, that 0/0 point is offset by 0.5 units to the right – or if we’re looking at it as a movement over time, it comes 0.5 seconds later.
Since we’re going to need it later, here’s how you express those attributes mathematically in a function:
y = [amplitude] * sin ( ( [frequency] * x ) – [phase] )
For ease of explanation, we’re going to ignore amplitude and phase for now, and just look at what combining multiple sine functions with different frequencies gets us! Let’s start with this sine function here:
As you can see, it has a period of about 2.3. Here’s another sine function:
This one has a much higher period, which is why it looks so much flatter – its period is about 20.
Now I wonder what happens if we just add the two functions together…
Can you see what’s happening? The function with the shorter period looks like it’s doing some oscillation of its own, in the same pattern as the other function! Let’s add another one:
And now, we’re getting somewhere! Doesn’t that already look pretty irregular? There are of course still recognizable peaks and valleys, but it’s a lot harder to make out the overall repeating pattern now. Which is why we’re going to use three functions with configurable periods and amplitudes to give our rock a nice, irregular-seeming up-and-down movement.
Alright! Enough graphs, time to look at some Blueprint graphs instead!
3D Widgets: Drag & drop instead of type & hope
Before we go on – Do you want to know how to make these nice little handles that let you move stuff around without manually typing values by hand?
Those are 3D Widgets, which are available for any Vector or Transform variable set as “editable.” Just select the variable in the My Blueprint list, and enable the option!
That will create one of those widgets for each such exposed variable. It even works for arrays! With vector widgets, you can only move them, but Transform widgets can be rotated and scaled as well. That can be quite useful when you’re building tools!
Note that I’ve also set the “Advanced Display” flag for this variable, so that it doesn’t show up in the Details panel unless users click on the little triangle button that expands the advanced options.
The second part of making parts of your Blueprint adjustable like that is to do something with the value of that 3D Widget’s vector variable, and in our case that means we have to set our TopMesh to the new default location in the Construction Script, and that’s all. Whenever a variable in a blueprint is changed, the construction script is executed again, so the location of the Top Mesh component is set to the new relative location the widget was just set to. Just like this:
Bobbing, coming soon to a UE4 near you!
So how do we do this bobbing thing in UE4 then? Simple! We are going to re-use a lot of the things we learned in part one for this. First off, let me show you the part of our Blueprint that is responsible for the bobbing movement. This is the relevant part of the Tick event:
Don’t worry, it looks more complicated than it is, and we’re going to pick through it bit by bit. If you ever find yourself looking at a Blueprint and wondering what the hell is even going on, here’s a useful tip for you: most Blueprints can be best understood by working backwards! Start at the executable functions (the ones with the white “execution wires” going into and out of them), which tell you WHAT is being done. Most of the time, those have really helpful tooltips too, if you hover your mouse over them and their variables. Think of executable (also known as “impure”) functions as one line of code. They basically say: “And now, do this!” Any wires that go into these functions ‘only’ specify HOW that function is supposed to do its job.
So then, let’s start with the “What” in this case, and work backwards through the “How’s”!
Fairly straightforward, I hope. We add two vectors, “Top Mesh Location” and one that we’re creating right there on the spot (with some more math that we’ll get to in a bit), and setting that as the new relative location of our floating rock mesh.
Next up, HOW do we calculate that vector which we add to our Top Mesh Location vector?
Look closely – it’s just three sine functions which we’re all adding together, just like in the graphical example above! Each one is also multiplied with its own amplitude variable, which just means that the output of the sine – which is in the -1 to 1 range – gets multiplied with it. So the amplitude variable is the distance in world units that each wave function makes the rock move upwards and downwards.
Lastly, here’s how we calculate the “Bobbing Cycle” variables:
If you remember part 1, this is almost exactly the same thing we did for calculating the progress of the swivel motion! That’s because it is 🙂 Each “Bobbing Cycle” gets something added to it on every tick. We multiply Delta Time (Get World Delta Seconds has the same output as the Tick event’s Delta Time output, so if you want to get rid of some wires…) with 360, so that one second equals one full rotation, and then divide it by each bobbing cycle’s period to make sure that each cycle takes [period] seconds. That then gets added to the existing Bobbing Cycle variable, which loops back to 0 when it reaches 360. All stuff we’ve done before, at this point!
And if you combine this with the swivel motion we did in part 1, you get a very nice, seemingly irregular movement of the stone, all without even touching any animation tools. It’s The Awesome Power Of Math™ at work for you!
Well then! That’s it for now. Part 3, coming soon, will finally go into how to create those little orbiting rocky bits. It’s really very simple, but in the process you’ll learn a lot about how to customize things, and about random seeds which might give you a start on creating procedurally generated content in Unreal Engine 4! If you subscribe to my mailing list, you don’t even have to check back here yourself to see if it’s out yet – just saying!