HUD Scale to Ratio Blueprint Function
Template:Rating 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.
Contents
Overview
Blueprint Author: TheAgent (talk)
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.