HUD Scale to Ratio Blueprint Function

From Epic Wiki

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 .

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

function










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


completed









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.