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.
Blueprint Author: ()
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.
- 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.
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:
Then add 3 Outputs and name them:
The resulting function should look like this
Double click on the function to open it. You should have a ScaleToRatio and Return node connected to each other.
On the top left create two floats and name them:
Then create a struct vector2D called:
Now set up the net work like in the image below
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.