Just finished implementing a periodic table of element with Nifty.
It looks pretty good… But, performance is abysmal. 
First picture shows nothing (everything is behind the camera):
http:///www.disenthral.com/files/withouttable.png
Second picture shows the inventory with the table. Notice the FPS at the bottom left. groan
http:///www.disenthral.com/files/withtable.png
I really like the look so far, but… I’m not sure I can work with that. If i lose that much here, I wonder how it’ll be on slower machines.
Even if my machine is 5 times slower (not unlikely) it is still 30 fps and that might be fine depending on what else you want happening in the game when the table is displayed.
Is it regular images or are you using quads etc?
@jmaasing said:
Even if my machine is 5 times slower (not unlikely) it is still 30 fps and that might be fine depending on what else you want happening in the game when the table is displayed.
Well, if you get 100 FPS, you'd go down to 40 FPS just to display a table. Still playable, but I find it very steep. Losing 3/5th for a table containing ~118 "cells" is harsh.
@perfecticus said:
Is it regular images or are you using quads etc?
This is a nifty screen, so quads.
118 cells * (1 quad + how many labels?)
I think one image would cover it, technically.
@pspeed said:
118 cells * (1 quad + how many labels?)
I think one image would cover it, technically.
Yeah and you can get the screen coordinates where the user clicks if you want interaction on each element.
the object count increases from 45 to 576, try what the others suggest 
Guys, come on. It’s not like I’ve never thought about using a single image! I’m not that damn dumb you know.
I want the thing to be dynamic with a “central” absolute quad that will inform the user about current inventory of each element they have–color changes for individual cell–when hovered above (originally cells will be gray).
I’ll have to ponder on that.
Sounds like a case for ImagePainter (if/when that re-appears from limbo). When the current cell changes redraw the old one into the image B&W and the new one to colour (I wouldn’t recommend redrawing the whole thing each frame but it’s perfect for redrawing on transition).
For reference that’s how I want it to look like to some extent. Dynamic Periodic Table.
For now the only recourse is to make an icon for each element and switch it while hovering.
Edit:
Right now I’m considering two approach for interactivity.
Either:
1 - All cells are gray and change color as you hover above and you have that element in your cargo.
2 - Colorize each element cell you have in your cargo and leave the rest gray.
Solution #2 would be much easier ergonomically. Very easy to see if you have that element as that panel opens, plus as you get more elements it would look much better than all gray.
+90% chance I’ll go with that solution #2, just not dismissing the first right off.
One way of the other, there will still be interactivity when hovering above a cell to inform the user of the current state of the cargo for that particular element.
@zarch, I’ve only rapidly skimmed through your ImagePainter lib. So I wouldn’t know about it, but if you say it could help, I’m glad to hear it.
Create a single image for the full table, use paintBorderImage to paint each box, paintText to fill in the text.
When you need to change the colour of a cell then redraw just that cell in the image.
Can easily colour the cells based on either of the two options you outlined.
(Oh, and I totally agree that #2 would be a much more user-friendly solution if knowing what elements you have is important)
@zarch said:
Create a single image for the full table, use paintBorderImage to paint each box, paintText to fill in the text.
When you need to change the colour of a cell then redraw just that cell in the image.
If I get this right, it would be like an overlay?
@zarch said:
(Oh, and I totally agree that #2 would be a much more user-friendly solution if knowing what elements you have is important)
Considering the elements you gather from planet surfaces are used for crafting and bartering, yeah, they're important as these are pretty much the only way to upgrade your stuff.
With #2 you immediately know what you've got when it opens up. No need to shuffle through until an element is colorized to know you have some of it in your cargo.
At the risk of somehow managing to insult you again,
A single image with the whole table, one quad to show the selected/highlighted one, and separate BitmapText for the non-zero counts (0 could be blank)… would be much faster than what you are doing. Or as zarch says, you can custom paint your UI into an image when it changes oldschool style. You could to that in Java2D also if ImagePainter is lacking some features.
I wasn’t insulted, just have had a hard time in the last few weeks (not that it’s stopped mind you). When the shit hits the fan… Things look grim but I can’t let that stop me.
Anyway.
The reason why I chose the nifty way is because it’s much easier to implement all the goodies that go with what I wanted. All the ingredients to interact are there. I wouldn’t have thought the performance would sink that much to be honest.
Another reason is that I didn’t want to have to come up with an algorithm to keep track of the location of each element on the screen and react to mouse placement as, as I said above, this is already implemented in nifty…
For thoroughness’ sake I’ll make placeholder images for all elements (only 1 image really) and see what that gives. If performance isn’t that bad then I might go that way. The only drawback is asset size. Individual images shouldn’t be more than 3-4k each, but still.
ImagePainter supports the core 90% of Java2d features and it works on Android etc which Java2d doesn’t. It would certainly support what @Madjack needs here or I wouldn’t have suggested it.
I’ve no idea what’s happening with it though as @momoko_fan replied saying he didn’t like how I did the get/set pixel thing (despite it being an implementation of what I originally posted in my proposal which no-one objected to) but then never replied to my explanation for why I did it that way and why the alternative wasn’t actually any better… and the only thing I’ve heard since when I asked for news is that it’s “in development, please wait” which could mean anything…
shrugs
Can’t say I’m happy but it’s out of my hands…
Here’s what the table looks like fully colorized and properly formatted.
At this point it doesn’t really matter, but I guess I want to show off a bit. shrug
http://www.disenthral.com/files/pte.png
Nice. Depending on how you want it to look you might want to put a slight gradient across each cell (keeping the centre colour the same but offsetting the corners slightly). It might make it look a little less flat and will help the colours seem more alive.
Just found something very interesting.
If I remove all background colors, FPS goes to ~300 (± 20).
After removing the background colors and replacing each cell content with a placeholder image things are back to +450 FPS.
In short, labels and background colors are to be used sparingly.
Edit: actually, FPS is back to normal with dips of ± 5 FPS. In short, stable between 490-500.