HUD Scale to Ratio Blueprint Function

HUD Scale to Ratio Blueprint Function.

Create a function that automatically outputs a scale and position for any canvas object no matter the screen resolution.

Overview

Blueprint Author: ()

Hello,

In this tutorial I will show you how to set up a function that will scale and reposition any canvas object to the screen resolution.

Features include:

• Offset for X Position
• Offset for Y Position
• Desired Scale

Have a HUD ready that is already blueprinted

If you do not have a HUD created, or do not know how to make one; please refer to this tutorial.

Create a function inside of your HUD Blueprint EventGraph

On the top left of your Blueprint graph click on the Add Function button and name it ScaleToRatio

Add 3 float inputs for the function and name them:

• OffSetX
• OffSetY
• Scale

Then add 3 Outputs and name them:

• PositionX
• PositionY
• OutScale

The resulting function should look like this

Editing Function

Double click on the function to open it. You should have a ScaleToRatio and Return node connected to each other.

Create Variables
On the top left create two floats and name them:

• RatioX
• RatioY

Then create a struct vector2D called:

• ScreenDimensions

Now set up the net work like in the image below

Whats Happening?

• Getting the viewport size and converting it into a vector2D (ScreenDimensions) helps us get the width and height of the viewport or monitor.

• We then break the vector2D and divide the current height and width of the viewport by a static resolution. By default I used 1280x720 as it gives the best results, it is also common.

• We then use the resulted ratio to multiply against the X and Y position of the desired Offsets. The same is done with scale.

• This multiplication will adjust the position so it always appears in the correct location and size no matter the size of the viewport.