Scale Hud

Troubleshooting gui
1

Ive made a method to create a text as how I want it. It works fine, but when I change the resolution, the HUD isnt at the position its supposed to be.
Is there an easy way to correct the position?

        public static BitmapText createText(String text, double multiplier, String color, String alignX, String alignY, int x, int y){

     float size = (float) multiplier;
    
    BitmapText hudText = new BitmapText(Main.app.getGuiFont(), false);
    hudText.setSize(Main.app.getGuiFont().getCharSet().getRenderedSize()*size);  
    hudText.setText(text); 
    hudText.setColor(getColor(color));  
    
    float posX = getPos("x",alignX, hudText);  
    float posY = getPos("y",alignY, hudText);  
    posX += x;
    posY += y;              
    hudText.setLocalTranslation(posX, posY, 0);
    Node node = Main.app.getGuiNode();
    node.attachChild(hudText);
    //guiNode.attachChild(hudText);
    
    return hudText;
}
2

Position it relative to screen size?

Scale it relative to screen size?

Both?

3

getPos() basically returns something like:

pos = Main.app.getSettings().getWidth()/2-hudText.getLineWidth()/2;

then with

    posX += x;

I change the position slightly

4

I don’t understand what part you don’t understand. And you haven’t really said what effect you are going for.

So I will repeat myself (for the last time before giving up completely):
Position it relative to screen size?

Scale it relative to screen size?

Both?

5

wrong%20HUD%20position

I try to make the position always stay on the same position, no matter which resolution I use. The text should be in the middle of the shader

And I think the position is relative yes, since I use the settings.getWidth() and getHeight() functions to get the screensizes.
This cmd here

    hudText.setSize(Main.app.getGuiFont().getCharSet().getRenderedSize()*size);

should make scale relative or am I wrong?

6

DO YOU WANT THE TEXT TO BE THE SAME SIZE OR JUST MOVED?

Good luck with your game.

7

I’m sorry I try my best :smiley:

moved and if u use a lower resolution the text of course should become smaller also.

8

Have you tried setting the text size and position to a predefined percentage of the current screen size?

E.g:

//position will always be the center of the screen
float positionX = app.getContext().getSettings().getWidth() * 0.5f;
float positionY = app.getContext().getSettings().getHeight() * 0.5f;

You can use a similar approach for the text size.

9

Thanks I will try that now :smiley:

10

I think I figured it out, I need something like:

    float sizeX = (float) Main.app.getContext().getSettings().getWidth(); 
    sizeX = sizeX/1980;      
    float sizeY = (float) Main.app.getContext().getSettings().getHeight();       
    sizeY = sizeY/1080;
    

    float x = (float) xInt * sizeX;
    float y = (float) yInt * sizeY;
    float size = (float) multiplier;
    size *= sizeX;
    
    
    hudText.setSize(Main.app.getGuiFont().getCharSet().getRenderedSize()*size);
11 
Node myGui = new Node("myGui");
guiNode.attachChild(myGui);
float guiScale = scale calculated from screen size and 1980x1080 view size
myGui.setLocalScale(guiScale);

BitmapText yourText = ....
yourText.setLocalTranslation(location in 1980x1080 space)
myGui.attachChild(yourText);

Just do all of your screen setup in some theoretical view space and then scale it. Way less complicated.

You will still probably want to position things relative to a calculated width and height when you figure out that you want to deal with different aspect ratios. But that’s not so hard either.