Display PNGs with Lemur, easily?

Hello guys. As a beginner it’s usually hard to make nice GUI elements using Lemur alone. So I decided to draw some complex GUI elements with Photoshop into .PNGs and insert them into my app. Those PNGs are only for display and decoration, no interactions applied. For I need some other simple buttons and something else made with Lemur, I tried to found out a way to display PNGs via Lemur. Could any plz point out an easy way to do this? The methods I searched are just too hard to realize for a dummy beginner like me. Thanks.

Hello! The best part about lemur is that it’s integrated with the standard way jmonkey works. Displaying images can be done abunch of ways, But probably the easiest would be to create a panel and set the background as an Icon component for your image, specify the size and attach this directly to your gui node. Also see the quad background or tbt components.

1 Like

Thank you and I successfully inserted PNGs in my app! But a new question appeared(may be really silly) that, I can’t reposition those elements… For example, I got want a button to be at the center of an image. All my GUI elements are children of a Container window to make it easy to remove GUI. I read the doc and found nothing to position a button but setLocalTranslation. So I wrote code like:

        // window is a Container positioned at the Up-Left of the screen
        guiNode.attachChild(window);
        IconComponent im = new IconComponent("Textures/test.jpg");
        
        Button clickMe = new Button("Click Me");
        window.addChild(clickMe);
        clickMe.setFont(assets.alignFont);
        clickMe.addClickCommands(new Command<Button>() {
                @Override
                public void execute(Button source) {
                        System.out.println("do something");
                }
        });
        clickMe.setLocalTranslation(200, 200, 0);
        
        Panel pn=new Panel();
        pn.setBackground(im);
        pn.setLocalScale(1f);
        pn.setLocalTranslation(0, 0, 1);
        window.addChild(pn);

I suppose this could make the button hover somewhere on the Panel, but it doesn’t work.


The GUI elements positions just in the order I add them to window.
I then tried to put the button in a Container, but it remains like this. So what’s the proper way to position elements in Lemur?
Thanks for your help!

The problem you are encountering is because you are adding elements to a container. Containers are used to automatically lay out elements according to their assigned Gui Layout. If you want to control the position of the elements yourself, add them to a jMonkey Scene Node instead. Remember, all lemur elements are jmonkey spatials and can be treated as such. Nodes are the easiest way to break down a “scene” of gui elements and you can easily attach/remove children from the node and attach/remove the node from the guiNode to make it visible.

2 Likes

Got it! Thanks a bunch! :rofl:

But if you just want to center a component then that can be done automatically. That’s what layouts are for.

For example, probably you could have set a DynamicInsetsComponent to your label to center it.

Have you taken a look at the Lemur demos yet?

There might be some useful tips in there.

2 Likes