I got tied of having to deal with various screen resolutions and dealing with lots of added code just to deal with a player resizing their screen. I wanted to build out something more like CSS / HTML where you set the HUD item based on a percentage of the screen you want it to use, and position it by the a percentage offset as well. So I built out a system where the developer puts in a series of values, such as Position Offset X and Y, and Percentage Width and Height. The function then resizes the HUD element based on the overall viewport size real time. Here is the Main Function Inputs and outputs.
The target area is used to tell the function where on the screen you want your element to start and end at. This is useful if for example you have a background image of a scroll for your spells and you want your other individual spell elements to stay Confined within it. You will also see a Is Main View Port bool. This is a simple override that sets the Target Area Min and Max values to the whole viewport, so you don’t have to keep plugging them in.
The Element Pos Percent Offset X and Y are used to say what percentage of the Target Area do you want to offset the Element by. So entering something like Offset X 10 and Offset Y 5 would put the elements start position at 10% from the left of viewport, and 5% down from top.
Element Percentage Width and Height is just as it sounds, what percentage of the screen do you want the elements width and Height to be.
The Element Min Width and Min Height are fail guards against small elements getting pushed to being too small. You can set a minimal flat value for both. The function will scale up and down, but if it tries to scale down below those values it stops scaling and uses those as the value. I’ve debated added a Max as well but, not sure it’s really needed.
Horizontal Position and Verticle Position are place holders currently, but they will let you justify elements to the left, center, or right of the screen, and or position them to the top, middle, or bottom. Still working to hammer them out.
For outputs you see you get an Elemental Width and Height, and you get two sets of x and y. The reason is as mentioned before if you are chaining elements together and you have a scroll and you want to keep all the other elements after it within that container the function will pass out the min and max values for x and y so it can feed the next call to it for function to position the inner elements.
Here is a video of it with a “Health bar” as you can see no matter how big or small I make the viewport the health bar stays in it’s location and adjusts it’s size to match the viewports changing size.
Which by using this Function can make things easier for HP bars etc as you can set the Percentage width to be based off the players health and have it resize to show a player losing health as well.
