UE4 tutorials

UE4 tutorial: Sniper rifle aiming widget

In this tutorial, I'm showing you, how to add an aiming widget most old games with sniper rifles use (like Call of Duty N). This is actualy a very simple tutorial because it's just all about displaying widgets, changing FOV (field of view) and using sensitivity.

1. PART

You'll have to download the aiming widget first. The aiming circle isn't perfectly in the center so you'll have to move it a bit a widget editor. The aiming texture is here:

2. PART

Then open a new widget blueprint and name it whatever you want. Inside you'll need to add a border component:

Anchors has to be set to full size
offset left is -313 px
offset top is -200 px
offset right is -330 px
offset bottom is -200 px

3. PART

The material I'm using as a texture of a border is a simple User Interface material in a masked mode:

4. PART

Then go inside the FPCharacter blueprint and add a new variable IsAiming?, which will tell, if a player is trying to aim or not. You'll have to change it's value to FALSE if player pressed RMB and to TRUE if he released it (i messed that up, it has to be opposite: when pressed -> TRUE, when released -> FALSE. Keep that in mind for the next screenshots, how it's represented):

5. PART

Then add a new timeline node and make an interpolation between max FOV and zoomed FOV (between 100 and 45). Using the float output value we can change cameras FOV with a Set Field of View function:

6. PART

When timeline finishes we'll have to create that aiming widget. So drag a line out of the Finished execution pin and add a Create Widget node and display it to viewport:

7. PART

When we release RMB we have to remove all widgets and reverse the timeline to zoom out:

but that won't solve the problem because we have to hold the RMB until we fully zoom in to remove all widgets. You can see the problem in the video tutorial. So we'll check if the player still wants to aim or not at the end of Add to Viewport node. If it turns TRUE, we'll have to remove all widgets and set the FOV back to default (100):

8. PART

To change the mouse sensitivity, add a new float variable Sensitivity. We'll use it in the camera looking code (not sure why but I think it's because of a smaller output when multiplying so smaller effect when moving mouse):