Skip to main content

Unreal Engine 4 Tutorial: Smooth Zoom using Mouse Wheel for Top Down Template

Well, I had already written a tutorial for implementing Smooth Zoom functionality for Top Down Template. But it was based on keyboard inputs. Since most Top Down PC games use mouse wheel for zoom, I decided to make a tutorial for the same. The core logic here is the same as the one implemented by Ryan Jon for the custom camera in his RTS Community Project. If anyone's interested, they can get the code for the RTS Community Project here:

UE4 RTS Community Project

Anyways, he has replaced the default camera for the characters with a general camera since that's more ideal for developing an RTS game. Since a basic Top Down game with a single playable character does not need a separate custom camera, I decided to implement the same functionality for the default player camera in UE4's Top Down Template. So let's get down to it.

First of all we need to make a custom curve from the content browser. We will be using this curve to define the smooth camera movement while zooming in or out.
 
         
We want the zooming to start slowly, then pick up the pace and then gradually slow down towards the end. As a result, the curve is also defined in the same way. I've used the following values for defining the curve: (0.0, 0.0), (200.0, 0.8) and (1000, 5.0). Then I adjusted the blue hinges at the key values to get the desired angle. Here's the final result:

                                           
Following that, we move on to the 'MyCharacter' blueprint since our default camera is attached to the player character. First we define two custom events, 'ZoomIn' & 'ZoomOut' as you see here:


We'll be calling these functions when the player uses the mouse wheel scrolling. We then create a tick event and two variables. One float variable 'CamBoomLength' to store the updated the arm length for the camera, and a float curve variable 'ZoomCurve' to store the curve we defined earlier. The default value for 'CamBoomLength' is set to 800.0, which is the default value of target arm length. This ensures that the camera doesn't move around at level start to some random value on it's own. We then use an 'FInterp' node to interpolate from the default target arm length of the Spring Arm to the updated value that we will be storing in 'CamBoomLength'. We connect the delta seconds from the event tick to the interp node and set a value for the interp speed as well. Then we update the return value into the spring arm's target arm length. With that, we have added the functionality ready for updating the zoom amount.

Next, we move on to adding functionality for the custom zoom events that we created in the beginning. So this is where we'll be using the zoom curve. We extract the float value from the zoom curve using the target arm length as the input. We then multiply this float value by 100.0, as we're dealing with arm lengths in the range of 100s. We then clamp these values between the minimum and maximum float values for our zoom. Then based on whether 'ZoomIn' or 'ZoomOut' event is called, we subtract or add this value to the target arm length and store it in our custom float variable 'CamBoomLength'. Now we have implemented the logic for getting values for our our new target arm lengths. All that's remaining is to call these events based on player input. We're going to handle that in our player controller blueprint.

So let's go to our 'MyController' blueprint and add mouse input events for mouse wheel up and mouse wheel down. We then call our character class to access our custom zoom events. Now connect the mouse inputs to these events and we have a working smooth zoom system for the Top Down Template. Here's a screenshot of the player controller blueprint:

 
You can also see the zoom system in action in my project:

 
Alright, that's it for this tutorial. I'll be back next week with another dev update. Until then, feel free to check out my Youtube channel for my new dev videos:

Stormrage256' Youtube Channel


Popular posts from this blog

Unreal Engine 4 Tutorial #4: Basic HUD Based Command UI for Top Down Turn Based Games

Hi, welcome back for the next tutorial. And in this tutorial, I'll be explaining how to create a basic Command UI for top down turn based games using HUD blueprints. By the time we reach the end of the tutorial, we'll have a Command UI with movement and fire action commands, and a player character that responds to the commands. Here's a screenshot showing the end product: 


Oh, and this tutorial is gonna be quite big, compared to earlier ones. So I advise everyone to go through the screenshots, before reading through. If it's clear, there's no need to read through the whole thing, partly because I've written this with a beginner audience target in mind. Ofcourse, if you have doubts, I hope they will be clarified in the written description. If not, feel free to ask me in the comments.
So let's get started. Again, I'll be starting with the top down template. First of all, we need to create a new HUD blueprint. If you're a beginner, you can find this by f…

Unreal Engine 4 Tutorial #3: Unit Selection Decals for RTS Games

Hi, welcome back for another UE4 Tutorial. This time, I'll be walking you through how to set up unit selection decals for RTS games. So the decals need to be visible, when a particular unit is selected, and set to hidden as soon as the unit is deselected. For this tutorial, I'm gonna start off from the Unreal Top Down Template.

First of all, I'll be changing the default controls a bit. Instead of using left mouse button to move the units, I'll be using right mouse button for character movement. I already have a decal texture, that I created in GIMP. If you don't have one, you could get my decal texture from the link below:
DropBox: Character Selection Decal Texture
So once you have the texture ready, next step is to set up your decal material. For creating a decal material, we need to set the 'Material Domain' in the details panel to 'Deferred Decal'. I'm also setting the blend mode to 'Emissive' in my case. Then we multiply the texture wit…