View source for HUD Scale to Ratio Blueprint Function

{{Rating|Type=Article|Versions=(please verify)}}
'''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:'' [[User:TheAgent|TheAgent]] ([[User talk: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 [[HUD, Canvas, Code Sample of 800+ Lines, Create Buttons & Draw Materials|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

[[File:FinishedFunction.jpg|thumbnail|left|function]]<br /><br /><br /><br /><br /><br /><br />
<br />
<br />



== Editing Function==

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


'''Create Variables'''<br />

On the top left create two floats and name them:

*RatioX
*RatioY

Then create a struct vector2D called:

*ScreenDimensions<br />


'''Now set up the net work like in the image below'''<br />
<br />
<br />
[[File:Completedfunction.jpg|thumbnail|left|completed]]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />


== 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.

[[Category:Tutorials]]
[[Category:Blueprint]]
[[Category:Community Created Content]]