1 (edited by parasti 2014-05-04 16:46:53)

Topic: GUI skinning

Documentation moved over to Github.

Sounds brutal, but that's what it has come to.

This past week I've been hacking away on background textures for GUI elements. Mainly because I felt like doing it.

Attached are two screenshots of a GUI that I used for testing, which through sheer luck actually turned out bearable. A ZIP with the GUI files is attached, too. The default GUI in SVN has not been changed, however. I recreated the original GUI as accurately as I could.

http://i.imgur.com/BKevvA6.png
http://i.imgur.com/YxCIZTR.png

So there you have it.

Post's attachments

darknblue.zip 16.86 kb, 103 downloads since 2014-05-04 

2 (edited by Cheeseness 2011-11-07 03:32:56)

Re: GUI skinning

Exciting!

A couple of thoughts (and they're mostly aestheic, so it may not be the type of feedback you were after):

* The sliders for mouse sensitivity have an interesting (though I assume unintentional) effect - see screenshot
* Some of the text in elements comes pretty close to the edge (the text "REPLAY" hangs slightly over the border of its box when viewing a replay). I wonder whether some sort of padding option definable in desc.txt might be worthwhile.
* I'm lamenting the lack of rounded corners on replays and stuff, though I can't imagine a nice way of doing that with the new system (especially since we can how have square corners, rounded corners, star shaped corners, you name it). It looks a bit weird when they do the mouseover throb.
* I'm not a fan of touching borders. It might look better if we throw some padding in there (I'd assume that separating elements would be a better idea than incorporating empty space into the background images).
* Not really digging the blue so much - I personally like that the yellow is tied thematically to the goal (in fact, lately I've been trying to think of ways to more closely visually link goals with GUI buttons).


All that said, your testing GUI is pretty neat smile

Post's attachments

screen00045.png 76.7 kb, 54 downloads since 2011-11-06 

Cheese
==========
cheesetalks.net

3

Re: GUI skinning

parasti wrote:

screen00036.png

Dude, your replays are in reverse order.

4

Re: GUI skinning

Yes, they are. Problem?

Actually I don't think there's a particular order at all, that's probably just a reverse list of what the OS gives us. (Liberal use of "us" here.)

Cheeseness wrote:

The sliders for mouse sensitivity have an interesting (though I assume unintentional) effect - see screenshot

As we established on IRC just now, this is due to mipmapping. (Which probably should be disabled altogether for GUI textures.)

Thanks for the comments!

5

Re: GUI skinning

parasti wrote:

As we established on IRC just now, this is due to mipmapping. (Which probably should be disabled altogether for GUI textures.)

Unfortunately, this makes the corners somewhat jagged. They look much smoother with mipmapping enabled. Is there a different way of preventing the effect Cheeseness was seeing?

Mipmapping enabled vs. disabled:
http://i43.tinypic.com/2z8vm35.png

6 (edited by parasti 2011-11-11 11:23:49)

Re: GUI skinning

Just to clarify, I have also seen the issue but I was sure to have fixed it before committing the code. (Turns out I had simply disabled mipmapping for whatever reason.)

This wireframe shot demonstrates what I believe to be the issue. The triangles in the middle of each button rectangle are small enough for GL to pick a really low resolution mipmap to texture them.

http://i.imgur.com/OwxNk.png

Aside from disabling mipmapping or some involved solution, like, implementing sliders in a way that does not amount to a row of empty buttons, I don't really see other solutions -- unless one is demonstrated in the image you posted.

7

Re: GUI skinning

While there was no secret trick behind that screenshot, I've now found the reason I couldn't reproduce the problem. I'm using an aniso setting of 8, and that makes the necessary difference. Well, almost. If I reduce the resolution to 640x480, a tiny bit of the effect can still be seen on some of the slider buttons. With a setting of 16, that goes away, too. At 0, on the other hand, the effect is very apparent, no matter what the resolution.

8

Re: GUI skinning

Could always fiddle with the images. For example, 256x256 is really excessive, a smaller texture size would blur out the edges and replicate the desired mipmapping effect. Could go crazy and implement down-scaling of GUI textures at load time depending on screen size.

Fiddling with images might work for the opposite case, too. Here I cut up the images of the testing GUI in a way that seems to make the mipmapping artifacts disappear. This seems like a very specific solution, though, not one that can be applied generally.

Post's attachments

testing-gui.zip 34.14 kb, 113 downloads since 2011-11-11 

9 (edited by Elviz 2011-11-13 02:21:38)

Re: GUI skinning

I can confirm that the testing-gui works on my system (Neverball r3692 modified to create the rectangle textures with IF_MIPMAP; mipmap 1, aniso 0).

Wouldn't it be easier, though, to simply force the use of anisotropic filtering for these textures? As indicated in my earlier post it does seem to fix the issue without any need to alter the images. In fact, ever since discovering mipmapping, I've thought of AF as a necessary companion.

If for some strange reason GL_EXT_texture_filter_anisotropic is not available or if it doesn't offer the required degree of filtering (queryable through GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT), disabling mipmapping could still be a fallback option.

BTW, after using your new GUI for a while, switching back to the old one makes the latter look somewhat plain. I attribute this to the missing lines around the widget edges.

10

Re: GUI skinning

It might be easier compared to resolution-based downscaling, but it's not something I want to do. Partly because I'm wary of promoting something from "magically works" status to "solution" status until I fully understand why and how it works, but also because I think that the application of mipmapping is ill-defined for our (GUI) purposes.

Basically we want accurate, consistent depiction without discontinuities. Due to having reasonably-sized triangles right next to heavily compressed or stretched triangles, by using mipmapping we end up with vastly different texture mipmap levels being rendered right next to each other. This is bound to create discontinuities. Anisotropic filtering can improve things but apparently it works off of the same premise if it shows artifacts at all.

Without mipmapping at least all the triangles are textured with the same texture rather than different-sized versions of it. Additionally downscaling the textures might reduce the aliasing we're seeing, kind of like poor man's mipmapping that applies one mipmap level to the entire screen.

(And yeah, it seems that the accented borders serve as an important visual cue that is suddenly missing when going back to the default GUI. On IRC, I believe Cheese and I agreed that this is the sort of change that the default GUI should definitely have as well, even without entailing any other changes.)

11

Re: GUI skinning

parasti wrote:

Additionally downscaling the textures might reduce the aliasing we're seeing, kind of like poor man's mipmapping that applies one mipmap level to the entire screen.

The situation reminds me a bit of when I added a startup graphic to Nuncabola. I couldn't get GL to resize the hourglass image the way I wanted it to (quality-wise), so I ended up downscaling it manually to a specific, screen-dependent size and then drawing the result at 100%. Similarly, I remember that the short-lived mouse pointer looked rather poor when drawn even though the original image was perfectly hi-res.

[...] On IRC, I believe Cheese and I agreed that this is the sort of change that the default GUI should definitely have as well, even without entailing any other changes.

Seems like there are some interesting discussions on IRC. Is there a log somewhere (like the one LWJGL has)?

12

Re: GUI skinning

Elviz wrote:

Seems like there are some interesting discussions on IRC. Is there a log somewhere?

I don't think there is.

13

Re: GUI skinning

Oops, sorry for not replying here. I have logs of everything in IRC. I'd also on and off discussed stuff with parasti via Steam (*cough*), which sadly, doesn't keep logs.

If you're still keen, I can try to hunt up some stuff smile

Cheese
==========
cheesetalks.net

14 (edited by ht-never 2012-10-18 12:19:57)

Re: GUI skinning

Cheeseness wrote:

Can we try and keep threads like this a part of the main conversation? This isn't deviating from the topic in the GUI Skinning thread, and it may be helpful to have there for others who get a bit confused about what goes where..

You used only 2 points in your ellipsis <:-)>

...

So let's continue here the conversation

~DEV

15

Re: GUI skinning

Here's a quick stab at some glassy looking hilite states. A bit 90's I know, but what the heck. :-)
download the zip and throw it in your `.neverball-dev` directory

http://s18.postimg.org/kvihjjt89/buttons.png

Post's attachments

tones-gui.zip 23.23 kb, 99 downloads since 2014-03-29 

16

Re: GUI skinning

Ha ha, that is awesome!

17

Re: GUI skinning

That's quite nice.

(And Aqua debuted in... Januay 2000. Just barely not 90's. big_smile )

18

Re: GUI skinning

I popped a doc up into the neverball-docs repository covering this stuff.

Cheese
==========
cheesetalks.net

19

Re: GUI skinning

Note that this info is slightly out of date since the GUI theme config option was added.

BTW, $NEVERBALL_HOME hasn't been a recognized environment or other variable name at any point. It's a myth.

20

Re: GUI skinning

parasti wrote:

Note that this info is slightly out of date since the GUI theme config option was added.

Ah, you're right. I completely missed that that went in last month.

parasti wrote:

BTW, $NEVERBALL_HOME hasn't been a recognized environment or other variable name at any point. It's a myth.

Cool. Feel free to update the doc. IMO it'd be better to have a Paths.md doc that describes that and other locations that are important to Neverball than to list all platforms' Neverball home folder locations.

Cheese
==========
cheesetalks.net

21

Re: GUI skinning

Like manual.txt in the main repo? I don't know how up to date that is, but that's where that stuff is covered. Contrary to the repo being called neverball-docs, my focus is solely on mapping documentation.

22

Re: GUI skinning

parasti wrote:

Contrary to the repo being called neverball-docs, my focus is solely on mapping documentation.

Odd. I was sure it was you who put background stuff in there smile

Either way, there's nothing wrong with you focusing on mapping stuff and leaving the adding of other resources to others.

Cheese
==========
cheesetalks.net

23

Re: GUI skinning

Cheeseness wrote:

Odd. I was sure it was you who put background stuff in there smile

Same thing.

24

Re: GUI skinning

I updated the instructions and my test GUI, and here's an updated version of tones-gui.zip just cuz. All of this stuff is implemented in the nightly build.

Post's attachments

tones-gui.zip 23.42 kb, 90 downloads since 2014-05-04