Semi-broken Nifty with last updates

Weird things are happening since last update yesterday. Some buttons don’t have text, some labels are rendered in a different order (z-order?) and image on the GUI node “bleeds through”. Hard to explain that last one…



See for yourself:

http://www.disenthral.com/files/broken.png



You can see to the left of the screen where the information panel (Images + BitmapTexts) blocks text from nifty’s ListBox items. It’s like that panel is rendered between parts of the middle window. Really weird.



EDIT:

Colored BitmapText isn’t rendered from what I’m seeing too. That panel to the left is supposed to have a “title” but it’s not there. Might be because the text is bigger. Odd.



EDIT 2:

Nifty’s hints (text only, the panel do display) don’t seem to render.



As far as the picture shows, I just realized that this is due to the modification I’ve made to NiftyJmeDisplay.java (where I moved the rendering from postQueue(…) to postFrame(…)).



Things are more complex than that… sigh



In the Solar System Scene I have quads to display lens flares and they act the same way as above (that’s after reverting the postQueuee/postFrame modification I did.



Quads on the GUI node seem to do all sort of wonkyness.



EDIT 3:

I’ll test some things in my game and see what happens with the above. There are things I’m doing one way and another way elsewhere. I’ll make everything the same way everywhere and report back in a new reply.

1 Like

So the issue in the screenshot is caused by your modifications. Can you post a screenshot showing the other issues you mentioned? I tested my changes thoroughly so it’s unlikely that I missed anything.

After more thorough tests the problem seems to lie with the latest BitmapText update. (Found here)



I’ve rapidly scanned the changed files but couldn’t finger what exactly could have triggered that behavior. I suspect Nifty’s quads and the BitmapText z-orders are slightly messed up.



Note that I’ve changed the way things are done in my game and only the bitmap text behavior remains. Those quads in my game hiding the text are on guiNode (node + Gui bit bucket) on a different viewport.



Hopefully that’ll be enough info for Momoko_Fan to fix the issue.

The changes I made have been reverted. Behavior remains (Bitmap text).



Just took a screen shot. I’ll point out the issues and will reply here.

@madjack said:
I'm coming back to this right now because it's not possible to have anything undernearth Nifty without changing the rendering order. So if anyone wants to have custom gui elements drawn underneath Nifty without changing Nifty's rendering order is to make a new viewport/camera, add a "gui node", then finally add the gui elements to that node(s), etc.

Why is that bad? That's what i do in Stack3D and it's alright IMO. Separating UI viewports is valid.

@madjack said:
With the recent changes made to Nifty, making it much faster, I'm worrying that those additional viewports and the rest aren't becoming detrimental to speed. That makes a viewport, camera, nodes, etc updating when in reality, a small change to Nifty's rendering would remove the need to have those.

Additional viewport is almost free, that won't lower performance. Only important thing is the number of objects and vertices, and that won't change if you have an additional viewport?

Also the issue is that you need it in this order, but some may want it the other way around.
Changing the rendering order in nifty as you suggest may not be bad, but having one viewport for each ui "layer" offers a lot more flexibility and I would go that way even if your change was in the core.

Glad to hear.



I’ll eagerly wait for the patch.



While I’m at it, I don’t know if you’ve read a thread I started a couple of months ago about Nifty vs Anything on the same Gui node, but my fix was to move Nifty’s rendering from postQueue(…) to postFrame(…) so that way Nifty’s panels and stuff would be above everything and not under everything else.



I’m coming back to this right now because it’s not possible to have anything undernearth Nifty without changing the rendering order. So if anyone wants to have custom gui elements drawn underneath Nifty without changing Nifty’s rendering order is to make a new viewport/camera, add a “gui node”, then finally add the gui elements to that node(s), etc.



With the recent changes made to Nifty, making it much faster, I’m worrying that those additional viewports and the rest aren’t becoming detrimental to speed. That makes a viewport, camera, nodes, etc updating when in reality, a small change to Nifty’s rendering would remove the need to have those.



Maybe I’m missing something here but I don’t see how that could hurt.



Here’s the post where I discuss this:

@nehon said:
Why is that bad? That's what i do in Stack3D and it's alright IMO. Separating UI viewports is valid.

I'm not really saying it's bad, but one would expect custom gui elements to be underneath NIfty, not over it. The way I think of this is that Nifty is the top-most layer and anything on the gui bucket should be rendered beneath it.


Additional viewport is almost free, that won't lower performance. Only important thing is the number of objects and vertices, and that won't change if you have an additional viewport?

You can't say almost free and won't lower performance. That's a slight contradiction. ;) One thing's for sure though, it's more code to maintain.


Also the issue is that you need it in this order, but some may want it the other way around.
Changing the rendering order in nifty as you suggest may not be bad, but having one viewport for each ui "layer" offers a lot more flexibility and I would go that way even if your change was in the core.

Yes, I'm aware of that even if I can't imagine why anyone would want their custom GUI-bucketed to be on top of Nifty.

On the other hand, as I suggested in the other thread, maybe having a flag to render postQueue or postFrame would be ideal.

Actually I can think of cases. Two examples that immediately jumped to mind:



The stats display (lower left corner) should be on top of nifty.



You might want to add JME effects on top of the nifty screen (for example if you did a GUI node level particle style effect, or wanted to lens flare across the screen or something).

I don’t see what’s the issue of having 3 viewports, one for underneath stuff, one for nifty, and one for on top stuff? There’s no performance loss, not even slight.

The issue is that nifty doesn’t have a concept of Z-order (its a huge issue in other aspects as well, but that’s besides the point). Basically it assumes things that render last appear on everything else. That means there’s no interoperability with jME3’s concept of Z-order.

Here’s a screen shot with the issues.



http://www.disenthral.com/files/broken2.png



Here’s another screen shot pre-commit (taken 4 days ago).



http://www.disenthral.com/files/harvest3.png

Ah, I know why. The bitmap text material accidentally has the “depth test” set to enabled on the RenderState. I feel a little bad modifying the materials used by fonts though, as they might be used directly by the application. We may need to have a separate font → material[] map just for nifty …

2 Likes
@zarch said:
Actually I can think of cases. Two examples that immediately jumped to mind:

The stats display (lower left corner) should be on top of nifty.

You might want to add JME effects on top of the nifty screen (for example if you did a GUI node level particle style effect, or wanted to lens flare across the screen or something).


The stats can't really be counted in that case. This is not something you'd want in your game at all times. Except in alpha/beta. Great tool during development, not so much after release. ;)

As for effect, often times you would need an additional viewport for that. Not always though, granted.

@Momoko_Fan said:
I don't see what's the issue of having 3 viewports, one for underneath stuff, one for nifty, and one for on top stuff? There's no performance loss, not even slight.

You're right. I can't say 2-3 FPS is really noticeable. Not denying it.

It's just a bit more code to maintain. Not that important, but still true.


The issue is that nifty doesn't have a concept of Z-order (its a huge issue in other aspects as well, but that's besides the point). Basically it assumes things that render last appear on everything else. That means there's no interoperability with jME3's concept of Z-order.

I couldn't agree more on that. I have several draggables in my GUI and it looks like shit when they overlap because of that lack of z-order (the most recently dragged/clicked-on should be above the rest, it's not) and that makes me (almost) rage.

Fortunately I heard through the grapevine that this should be implemented in a future version of Nifty. Hopefully what I've heard will come to pass before Disenthral gets to release. If not, I'll have to ditch the whole thing simply because I think that's unacceptable for me to deliver a game with a gui that will look like this.

Anyway. I consider this subject closed.

Thanks to everyone for their input. :)
@madjack said:
It's just a bit more code to maintain. Not that important, but still true.

I think you over estimate what this implies.
You just have to create a new viewport for nifty. So basically that's 3 or 4 lines of code when you initialize Nifty, then you let nifty handle the rest.
@madjack said:
I couldn't agree more on that. I have several draggables in my GUI and it looks like shit when they overlap because of that lack of z-order (the most recently dragged/clicked-on should be above the rest, it's not) and that makes me (almost) rage.

Fortunately I heard through the grapevine that this should be implemented in a future version of Nifty. Hopefully what I've heard will come to pass before Disenthral gets to release. If not, I'll have to ditch the whole thing simply because I think that's unacceptable for me to deliver a game with a gui that will look like this.


You do have control over Nifty's rendering order. Things are always drawn in the order they were added to their parent. Just remove the draggable from it's parent then add it back on at the end. That will cause nifty to draw it last, putting it on top of all the other panels.
@madjack said:
The stats can't really be counted in that case. This is not something you'd want in your game at all times. Except in alpha/beta. Great tool during development, not so much after release. ;)


I'm always going to have them there, just turned off by default and an option to turn them on. And even during development I don't want to not be able to see the framerate just because I have a nifty thing down in the bottom left of the screen...

Really the behaviour needs to be controllable somehow or someone will always be unhappy...
@zarch said:
I'm always going to have them there, just turned off by default and an option to turn them on.

That's what I meant. Not remove it completely of course.


Really the behaviour needs to be controllable somehow or someone will always be unhappy…

Whatever you do, whatever you offer, someone will always be unhappy.

@zarch said:
Things are always drawn in the order they were added to their parent...

There are ways to counter many things, this is one. A GUI implementation without a basic z-order? Huge lack of foresight.

@nehon said:
I think you over estimate what this implies.
You just have to create a new viewport for nifty. So basically that's 3 or 4 lines of code when you initialize Nifty, then you let nifty handle the rest.

I was thinking the other way around; custom GUI elements + viewport + camera + gui node. But, as I said, it's "a bit more code to maintain" and I do think 5-10 lines qualify for "a bit". ;)

@madjack: I actually know how to fix this issue very quickly … There’s just one problem, I can’t reproduce it. I tried to layout text on top of other text, but I see no leaking of text on top of elements like I expected. Perhaps you can give me a small section of your nifty XML file with the issue?

@madjack: Apparently there were some issues with the notification emails so let me try this again …

Sorry for the delay.



The map area seen in the previous posts are not part of Nifty. They are quads. Nifty’s stuff is drawn above it, but the bitmap text (Nifty’s labels, etc) has its depth wrong vs nifty elements’ (panels) depth.

@madjack said:
Sorry for the delay.

The map area seen in the previous posts are not part of Nifty. They are quads. Nifty's stuff is drawn above it, but the bitmap text (Nifty's labels, etc) has its depth wrong vs nifty elements' (panels) depth.

So the nifty labels have incorrect depth vs other nifty elements. Can you send me an XML file that demonstrates this issue? I was not able to reproduce it myself.