[SOLVED] Dynamic HUD with Lemur?

User Code & Projects lemur
1

Hi

I want to make a HUD for adding GUI items and widgets on the screen and I want items to dynamically get aligned when screen size changes.

I want something like this

those black circles can be any kind of Lemur panels (container, button, progress bar, label).

Notice the fill mode, on the left/right sides, I want to be able to align(fill) items from the top, center, and bottom, and on the top side, I want to be able to align(fill) items from the left, center and right.

I am curious if I can base it on something like DebugHudState from SiO2 but I am not sure how to do the alignment.

Any advice?

Regards

2

The latest DebugHudState will automatically resize itself for different resolutions even if they change after creation. So it’s definitely a good place to start for forking or whatever.

As for the other, you may get pretty far putting border layouts in your border layout (Xzibit.jpg “yo, dawg”)… as in each of the top, bottom, left, right panels would also be a border layout.

So, Top + Left would be the left border of the screen’s top border and so on.

The “center” of those panels would be stretched any how the thing in it grows could depend on the dynamic insets you give it.

2 Likes
3

Thanks, going to try this out.

4

hm, I have not used DynamicInsetsComponent before, so I suppose you mean something like this for top screen border.

center.setInsetsComponent(new DynamicInsetsComponent(0f, 1f, 0f, 1f));

5

I think it’s unhappy with zeroes but honestly, I haven’t used it in a while either as it doesn’t often come up in my own layouts.

It’s supposed to use those numbers to proportion available space around the real component. So 0.5 or 1 all around should be fine if you want something centered.

1 Like
6

I see. Thanks.

7

I made a simple test

@Override
public void simpleInitApp() {
    GuiGlobals.initialize(this);
    BaseStyles.loadGlassStyle();
    GuiGlobals.getInstance().getStyles().setDefaultStyle("glass");

    guiViewPort.addProcessor(reshapeListener);

    screen = new Container(new BorderLayout());
    screen.setBackground(null);

    screen.setLocalTranslation(0, cam.getHeight(), zOffset);

    Container topBar = screen.addChild(new Container(new BorderLayout()), BorderLayout.Position.North); 
    topBar.setBackground(null);

    Container topLeft = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.None, FillMode.None)), BorderLayout.Position.West);
    topLeft.setBackground(null);

    Container topCenter = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.None, FillMode.None)), BorderLayout.Position.Center);
    topCenter.setInsetsComponent(new DynamicInsetsComponent(0.5f, 0.5f, 0.5f, 0.5f));
    topCenter.setBackground(null);

    Container topRight = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.None, FillMode.None)), BorderLayout.Position.East);
    topRight.setBackground(null);

    topLeft.addChild(new Button("Left"));
    topLeft.addChild(new Button("Left 2"));
    topLeft.addChild(new Button("Left 3"));
    topLeft.addChild(new Button("Left 4"));
    topCenter.addChild(new Button("Center"));
    topRight.addChild(new Button("Right"));

    guiNode.attachChild(screen);
    resetScreenSize();
}

As the left side grows the center is moving toward the right, is there a way I can force the center panel to be always at the “center” of the screen?

Edit:

With a slight change in the layout, I could fix it.

I changed the top panel from a border layout to a spring grid layout with FillMode.ForcedEven and also added a dynamic inset to it’s left and right borders.

    Container topBar = screen.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.ForcedEven, FillMode.None)), BorderLayout.Position.North);
    topBar.setBackground(null);

    Container topLeft = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.Proportional, FillMode.None)));
    topLeft.setInsetsComponent(new DynamicInsetsComponent(0.5f, 0f, 0.5f, 1f));
    topLeft.setBackground(null);

    Container topCenter = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.Proportional, FillMode.None)));
    topCenter.setInsetsComponent(new DynamicInsetsComponent(05f, 0.5f, 0.5f, 0.5f));
    topCenter.setBackground(null);

    Container topRight = topBar.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y, FillMode.Proportional, FillMode.None)));
    topRight.setInsetsComponent(new DynamicInsetsComponent(0.5f, 1f, 0.5f, 0f));
    topRight.setBackground(null);

1 Like