Creating an MMO-style controller III: Camera zoom with the mouse wheel

So part three for this mini series, and the first actual section of coding! Camera Zoom! The overview and list of sections is in this post.

I wanted to start with something relatively simple, and start out with a small victory. The zoom functionality is quite simple, it allows us to get a better view of the level by zooming in and out, but keeping the camera focused on the player.

Implementing the Zoom Controls

Here’s how we zoom: We adjust the length of the CameraBoom component that attaches the camera to the player. Simple.

Start writing this code in your custom PlayerController class, and here is the finished blueprint visual script:

Final blueprint for the mouse wheel zoom

Final blueprint for the mouse wheel zoom

Since we already set up the action events for the mouse wheel, we can populate the action events for MouseScrollUp and MouseScrollDown. Reminder: The mouse scroll wheel is not an axis, and there is a brief explanation why, located here.

Although we know we just want to change the size of the CameraBoom, the important questions are “how do we change it?”, and “by what amount?”.

How we change the arm is the simpler question. With a reference to the CameraBoom, we can call the Set Target Arm Length function to specify a length for the CameraBoom.

What requires a little more thought is the second question, and the solution is “use a little maths”. When we scroll the mouse wheel, we are “clicking” that button several times in a row. Rather than setting an absolute value for the CameraBoom length, we want to change the relative length on each “click”. Additionally, it is important that the result of our change makes sense – we don’t want to try and make the boom arm a negative length, or zoom so far out we cannot see the character properly.

So to address these two points:

  • Update the relative length of the CameraBoom
  • Make sure the length isn’t too small or too large.

Here’s how I did this:

"A little maths" to determine our CameraBoom length

“A little maths” to determine our CameraBoom length

What’s happening here? This block of maths simply calculates a new value for the length of the CameraBoom. Firstly, we attempt to set it to the current length + (ZoomAmount x ZoomSensitivity). Then, we check if this value is valid by using the Clamp function, with two float variables to determine the minimum and maximum CameraBoom length.

If you haven’t see then Clamp function before, it is extremely useful for making sure a setting does not go outside of a specified range. With all the relative and DeltaTime based updates we do in Unreal Engine, this will be a core function you’ll see popping up time and time again.

The ZoomAmount float is the base amount one action increases/decreases the CameraBoom length, and the ZoomSensitivity is a scaling parameter, which we can adjust to our liking.

The defaults I used for these variables:

  • ZoomAmount = 20.0
  • ZoomSensitivity = 1.0
  • MinBoomLength = 50.0
  • MaxBoomLength = 1000.0

Extending the Functionality

If we want to make this smoother, or have a different feel, we could make the scaling parameter ZoomSensitivity a function of its own. This would change the amount you increase or decrease the CameraBoom length depending on how close you are to the maximum or minimum value.

For example, you could zoom in more quickly the further you are away from the character.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s