LifeBars nifty

Hi!
My problem here is that I need to implement a strategy game like life bars.
I was looking for a way to do it with nifty GUI, because I’ve been using it, and I really like the way to work with it. However, I can’t find a way to create an Element and move it around as I like.
I read in many places that once you create a new Element, you cannot move it out of it’s panel. I tried not to believe that, or to figure out another possibility, but I couldn’t find one.
So… before trying to go manually and print my life bars by my own without nifty help, I was thinking that maybe someone could give me some clue about what should I try, or read or wherever…

PS. If I’m a bit confusing about what I try to do, I leave this picture, so maybe I can explain myself better. (Note that those life bar are moving always on top of the unit. That’s the issue here… :frowning: )

You can handle these very well with BillBoard-Controls Just add one to a spatial (e.g. two quads (a green one, that shrinks/grows with the current hp, and a black one) and it will always face the camera.
This way, you can directly attach them to your model and everything stays fine. :slight_smile:

5 Likes

I’ve done something very similar in nifty, its fine.

Create a new layer - absolulte positioning.

Add your health bars inside the layer.

Adjust the x/y position of the health bars each frame as required. (Might need to adjust constraintX and constraintY rather than x/y directly depending on what you are doing).

Call relayout on the layer once you’ve moved all the controls.

2 Likes

yh, you can use cam.getScreenCoordinates (Vector3f worldPos); to find where to put it on the screen

1 Like

[java]
@Override
public UpdateResult update(float tpf) {
Camera cam = AppContext.getJme3().getCamera();
target = cam.getScreenCoordinates(spatial.getWorldTranslation(), target);

        if (target.equals(oldTarget))
            return UpdateResult.CONTINUE;
        
        oldTarget.set(target);
        
        int x = (int)target.x + xOffset;
        int y = (int)target.y + yOffset;
        
        if (x  cam.getWidth() || y  cam.getHeight()) {
            if (!panel.isVisible())
                return UpdateResult.CONTINUE;
            
            panel.setVisible(false);
        } else {
            if (!panel.isVisible())
                panel.setVisible(true);
            
            panel.setConstraintX(new SizeValue(x+"px"));
            panel.setConstraintY(new SizeValue((cam.getHeight()-y)+"px"));
        }
        
        return UpdateResult.RELAYOUT;
    }

[/java]
This is used inside a framework so will need a bit of adjusting to fit your program, you should be able to work it out from this though. The return value is just telling the surrounding framework whether the screen needs relayout or not. It calls update on all these panels and then at the end if any said they needed relayout it calls relayout once.

3 Likes

I need something like that too for the AgentKeeper Project. So thanks @flashito to start this conversation :slight_smile:

Aht that looks cool @zarch.
So you use a Control to update the Nifty-Layer or is that Code inside an Nifty-Control?
So @destroflyer mentioned the BillBoard-Controls who can do that too.

Which one is easier to handle,

  • the Nifty Layer-Lifebar
  • Quad controlled by BillBoard-Control

consider that I want the lifebar dynamic created, update and deleted with its owner, an concrete Creature in the Scene?

Both are fairly easy to do - and you can use the tbtQuad in lemur to do 9 patch style stuff with images in the billboard as well.

We use a mix of both in HeroDex depending on the requirements.

The main difference is whether you want the lifebar to always be on top of things, or if you want them in the scene. For example we have messages that come up during a match that we need cards to be able to come in front of - so they are in the scene graph using billboards. On the other hand we have other things that want to be always on top so they use nifty panels.

I have a NiftyPopupState AppState that manages all sorts of different nifty pseudo-popups, including the spatial following ones.

It loops through all active pseudo-popups each turn calling update on them, and then relayouts the screen if required.

The main difference is whether you want the lifebar to always be on top of things, or if you want them in the scene.
I use billboard controls and a custom geometry comparator - This way, my selection markers and life point bars are always on top. I prefer to integrate the lifebars into the scene since I don't have to update nifty so much - I add them to the my object's node and if I hide it, the lifebar disappears too. If you add those in the GUI, you will always have to update it according to visibility, position, scale and so on which is done by using a jME node automatically...
1 Like

Thank you very much for the responses :slight_smile:

I was thinking and doing some tests to check what is better. I finally think that I’m going with the BillBoard-Control because of:

I add them to the my object’s node and if I hide it, the lifebar disappears too. If you add those in the GUI, you will always have to update it according to visibility, position and so on…

I’m right now not able to do it, but when I’m ready, I’ll post some pictures.

Thanks again :slight_smile:

Since some people don’t like Nifty and it might be replaced with something else, it’s probably a good idea to avoid Nifty itself.
I’d try attaching billboards to the Gui root node instead - that node is in a viewport that has its coordinate system scaled to screen pixel sizes, and it should be possible to add your own Spatials. Nifty does live as a child of this node, too. (Disclaimer: I haven’t tried this myself, so this is more an “that’s an interesting experimental direction” advice rather than a recipe ready to be used.)

For my own stuff, I’ll probably stick with lifebars as in-scene billboards. I want the bars to be smaller if the creature is farther away. Maybe I’ll go @destroflyer’s route to make sure that they always show even if the creature is hidden beneath something else - do you have the code of your comparator somewhere, or is that approach so trivial that posting code wouldn’t be worth it?

I want the bars to be smaller if the creature is farther away

Definitely. That’s also one of the main reason because I’m choosing billboards.

Since some people don’t like Nifty and it might be replaced with something else,

One more reason there. But I like nifty :(. After that I suppose that I should put “by hand” the nifty libraries. Anyway, it’s good to always see movement over there :slight_smile:

@toolforger said: Since some people don't like Nifty and it might be replaced with something else, it's probably a good idea to avoid Nifty itself.
This isn't true. The content of this post is meant to be read as a straight information or question without an implicit dismissive stance or interest in having the other party feel offended unless there's emotes that hint otherwise or there's an increased use of exclamation marks and all-capital words.

i love nifty! It can make almost everything…

Erlend hates Nifty, and it IS buggy and has some serious architectural issues. So it stands to reason that Nifty will get replaced as soon as a viable replacement becomes available.
If you mean that’s not gonna happen anytime soon: Couldn’t imagine otherwise.

Do you have any idea whether using Nifty would be a performance load? I remember you talking about Nifty being overly specific with rendering order and hence preventing some optimizations, but I don’t know whether that applies in this case.

Nifty isn’t going to be removed from jME.

If a good alternative emerges (as seems to be happening) then it might be provided as well.

@destroflyer said: I use billboard controls and a custom geometry comparator - This way, my selection markers and life point bars are always on top. I prefer to integrate the lifebars into the scene since I don't have to update nifty so much - I add them to the my object's node and if I hide it, the lifebar disappears too. If you add those in the GUI, you will always have to update it according to visibility, position, scale and so on which is done by using a jME node automatically...

You turn off depth write and depth test as well on the billboard controls? What happens if they pass into/through each other?

I’ve never had any real problems with Nifty’s performance, having said that Void is working on some massive speed improvements to Nifty at the moment - seems to be getting some impressive results based on figures so far.

Hi!
In the meantime I’ve been doing my life bars with BillBoard Control, and as I promised (Yes, I’m very excited about that :smiley: ) I’m updating an image with the results

Thanks again for the help

P.S. -> The performance was not worth to be mentioned (I tried with and without [More than just one little guy over there] and I felt no difference)
P.S.2 -> Don’t laugh at my model, I did it myself, even the textures :D:D. I’m proud of it hehehe

Should I change the state to solved?

@toolforger said: Erlend hates Nifty
Where do you take this from? When did you talk last with @erlend_sh about nifty :? The content of this post is meant to be read as a straight information or question without an implicit dismissive stance or interest in having the other party feel offended unless there's emotes that hint otherwise or there's an increased use of exclamation marks and all-capital words.
@normen said: Where do you take this from? When did you talk last with @erlend_sh about nifty :? The content of this post is meant to be read as a straight information or question without an implicit dismissive stance or interest in having the other party feel offended unless there's emotes that hint otherwise or there's an increased use of exclamation marks and all-capital words.

I think that is a general assumption about everyone unless stated otherwise (this is a joke)

On topic… can’t you just use the example given for the loading bar? It’s pretty much a health indicator.