Scaling HUD elements

Development Programming & Scripting
1

HI, i am working on HUD blueprint. And i have some HUD elements that doesnt display where they should when trying differrent resolutions. So i want to make HUD elements to scale according to resolution. Any idea, theory or book on how to set HUD elements no matter what resolution is?

2

I have a function that I use for this:

Find it here.

3

I draw textures on screen, not materials. So i need to try and change the blueprint to see if it will work.

Thank you for your andswer

4

It not what i was looking for, but it does the job for somebody.

5

You can use the Canvas->SizeX/SizeY to get the current resolution of the screen. You can then use these to offset your textures on the screen.

For example, Canvas->SizeX * 0.5f, would be the center of the screen on the X axis, so you could position them based on that. However, I think textures are positioned from the top left, so you would have to take the size of the texture into account.

I’ve found that having a FVector4 that you can edit in a HUD blueprint is helpful, as you can use the X/Y as the position of the texture (offset with Canvas->SizeX/Y to make sure it scales position with resolution) and the Z/W to scale your texture to your recommended size.

There may be many better ways of achieving this, but I haven’t found any and I use this method for now.

6

The first section has a scale function that will scale down what you draw based on the idea screen size your interface is originally for.

7

Its not a problem to get resolution of the screen, and its not a problem to set some element in the middle of the screen
Pseudo code: ( desktopSIze.X / 2 ) - ( TextureSize.X / 2 ); and same for Y.

I will edit this answer latter and will add pictures to better explain problem i have.

8

Here is my attempt:

8597-123.jpg
8597-123.jpg1061×511 99.6 KB

It checks whether the horizontal or vertical size is smaller and uses the smaller one (to keep the aspect ration right). Then simply add the scale variable to your textures/texts/other stuff and for the position simply multiply it by the scale variable.

9

This is the way I do it and it seems to work fine.

I just use percentages. This is best described using an example. Lets say I want an inventory bar the the bottom of the screen and centered. I want it to be 8 square textures to resemble slots. Here we go.

//We get the screen width and height
float ScreenX = Canvas->Size.X;
float ScreenY = Canvas->Size.Y;


// now I use percent of screen to place the initial texture
// 80% down from top
float startTexturePosY = 0.80f * ScreenY;
// 25% right from left
float startTexturePosX = 0.25f * ScreenX;

Since we want to have a 25% screen width open space on the left and right, that leaves 50% screen space for the 8 tiles.

empty         8 tiles          empty
|--25%--||-------50%---------||--25%--|


float TextureWidth = (0.50f * ScreenX) / 8.0f;

// now we paint them in a loop
for(int i = 0; i < 8; i++){
    float XPos = StartTexturePosX + (i * TextureWidth);
    float YPos = StartTexturePosY;

    // I can't remember all the params for the function
    Canvas->DrawTile(TheTexture, XPos, YPos, TextureWidth, TextureWidth, 0, 0, TheTexture->GetSurfaceWidth(), TheTexture->GetSurfaceHeight(), BlendModeWhatever);

}

Keep in mind, the width/height of the texture is based on the width space available for the 8 tiles. You have to test to be sure you didn’t place the textures too low in the Y coordinate and clip off the bottom of the screen.

This will work for all resolutions… just test it and run it in an external editor window and drag the resolution all over the place. It works fine for all my needs.

Edit:
Forgot words, typo.

10

Since UMG is now stable, this question becomes obsolete