Questions about NiftyGUI

Troubleshooting gui
1

I am having several short questions about Nifty and I thought that some help would greatly help to make up my mind more easily,



I am at the time working with Nifty on JME2. Thank you in advance for your help.


  1. What is the difference between and



    2.1) How can I make text or images bigger? Is there some ‘scale’ attribute I’m missing?



    2.2) I can use height and width to scale images, but it seems to be relative to the size of the screen. Can I tell Nifty to enforce aspect ratio?


  2. Do I need to write a ScreenController for each screen?


  3. Can I make a screen expire? Is there some ‘timeout’ attribute or other mechanism? (at the time I am using my own timer and calling endScreen() when the timer expires, but this forces me to code that logic outside the xml file).


  4. My PNG files show upside-down. Any ideas? May the texture transformation GL state be affecting NiftyGUI rendering? Text is always shown correctly.


  5. I amusing several Nifty objects, in a per-gamestate basis. I have use cases where several gamestates are active and rendering Nifty screens (from several Nifty instances) on top of each other (for instance: hud, console, menu ). Is this possible?



    Thanks!
2

Hello.



I will try to answer some of your questions :



2.1 ) For images :

I think this link will explain you in a better way than me about how we can resize image : link



For text : Text are using a police. You can use your owm custom police if you want but I doubt you can resize texts.

( you can rsize the frame, and the text wll align itself in the center or on on of the border, but it won’t scale )



2.2 ) When you use width and height you can specify if you want % or pixels :

width = “100%”

width = “75px”



3 ) The screen controller is here for intercepting click from your GUI.

For your GUIs that doesn’t have button, you can create one empty class :

[java]

public class EmptyController implements ScreenController

[…]

[/java]





6 ) Yes, it’s possible. On my case, I have a Nifty GUI toolbar that sotore all other GUI displayed on the game :slight_smile:



I will let void256 answer the rest :slight_smile:

1 Like
3
jjmontes said:1) What is the difference between <text> and <label>


It's basically the same. The only difference is, that <label> will apply the "nifty-label" style automatically to the element. So when using <label> instead of <text> you can rely on the font attribute being already set. With <text> you'll need to set it manually.

jjmontes said:2.1) How can I make text or images bigger? Is there some 'scale' attribute I'm missing?


You can set the width/height properties to some absolute px value or to some relative percent value as didialchichi explained above.

jjmontes said:2.2) I can use height and width to scale images, but it seems to be relative to the size of the screen. Can I tell Nifty to enforce aspect ratio?


Percent values are always calculated relative to the direct parent element. So if the parent elements resolved width is 100px and you're using 50% for example for a child element width then it will be 50px width.

There is currently no mechanism available to only set the width or the height of an element and let Nifty calculate the other value using the given aspect ratio of some image. What is possible however is to calculate the width or height relative to the other one:

[java] /**
* Add a WIDTH_SUFFIX to some size value to indicate that this value
* will be calculated in respect to the Width of an element. This
* is only appropriate to a height attribute and this class can only
* detect it's present. Handling must be performed outside of this class.
*/
private static final String WIDTH_SUFFIX = "w";

/**
* Add a HEIGHT_SUFFIX to some size value to indicate that this value
* will be calculated in respect to the Height of an element. This
* is only appropriate to a width attribute and this class can only
* detect it's present. Handling must be performed outside of this class.
*/
private static final String HEIGHT_SUFFIX = "h";[/java]

So you can use something like this:

[xml]<... width="50px" height="10%w" ...>[/xml]

or

[xml]<... width="50%" height="10%w" ...>[/xml]

jjmontes said:3) Do I need to write a ScreenController for each screen?


Maybe :)

You could use the same ScreenController for several screens if it is appropriate for your case. If you don't need any interaction on a Screen or if there is no need to do stuff in onStartScreen() or onEndScreen() you can omit a ScreenController and Nifty will create an empty one for you.

jjmontes said:4) Can I make a screen expire? Is there some 'timeout' attribute or other mechanism? (at the time I am using my own timer and calling endScreen() when the timer expires, but this forces me to code that logic outside the xml file).


No, there is no timeout mechanism for this.

jjmontes said:5) My PNG files show upside-down. Any ideas? May the texture transformation GL state be affecting NiftyGUI rendering? Text is always shown correctly.


GL State does influence everything Nifty renderes. It's your job to proper initialize GL for 2d Ortho Mode before calling Niftys rendering method. I don't know right now how the JME2 renderer handles this however.

However upside down images are probably a problem with the JME2 Nifty renderer adapter and not Nifty itself. Images are loaded by the JME2 Nifty renderer. Maybe the code to load images does not read your png files correctly?

jjmontes said:6) I am using several Nifty objects, in a per-gamestate basis. I have use cases where several gamestates are active and rendering Nifty screens (from several Nifty instances) on top of each other (for instance: hud, console, menu ). Is this possible?


Should be possible but the prefered way would be to use different screens for this (maybe using layers) and only using one Nifty instance.
1 Like
4
void256 said:
You can set the width/height properties to some absolute px value or to some relative percent value as didialchichi explained above.

Mmm this doesn't seem to work for texts. I was kind of looking for some method to increase/decrease text size without using a different font.

void256 said:
No, there is no timeout mechanism for this.


I think timed screens could be useful. I guess I could implement it on a method on the controller? Where should I call that method... can I do it on "onScreenStart()"?

void256 said:
GL State does influence everything Nifty renderes. It's your job to proper initialize GL for 2d Ortho Mode before calling Niftys rendering method. I don't know right now how the JME2 renderer handles this however.

Thanks for your help guys.

I'll check that. Thank you for pointing me..

void256 said:
Should be possible but the prefered way would be to use different screens for this (maybe using layers) and only using one Nifty instance.

I am finally using multiple inscances and it works wondefully. There are a few use cases where this is the only way to achieve certain layouts, where several GUI layers are interleaved with other 3D objects being drawn by JME. Thus I'd sugest this technique should perharps be officially supported if possible.
5

There is a textSize effect you could use to scale fonts/texts. Nifty currently only support bitmap based fonts so don’t expect too much quality of this effect when scaling very big :slight_smile:



I’m not convinced of a timeout for screen. Can you explain this a bit further? You simply want to end a screen after a specific time?

6

It seems textSize effect could do it for simple things, I had thought of it, but imho it doesn’t always seem as convenient or intuitive as setting size at element level.



My use case for timeout screens is that I am using Nifty for introductory screens. I want to show those for a certain time (2 sec) and then end the screen or switch to the following one. But I’m doing that externally now and is jut ok.



(I was speaking about something like: … )



Thanks for your help!

7

The nifty examples did that by adding an onEndScreen effect with a startDelay=“1500”. So instead of setting a timeout for the screen to end automatically you could end it manually by switching to the next screen (nifty.gotoScreen(“the-next-one”)) and simply “hold” the current screen for any amout of time with the use of the startDelay attribute of the effect. The effect won’t start for the given amout of time and therefore the screen won’t end at all.



You could use the “nop” effect for this too which changes nothing at all but just waits for the given startDelay to end, then starts, does nothing and the screen finally ends. The same mechanism would work in onStartScreen too.

8

I knew there had to be something… :smiley:



I am also missing a way to call methods on the ScreenController reacting to event (like onStartScreen). I know I can attach listeners from code, but reflection would allow users to skip that registration process and simply call methods on the controller. Does this make sense?



(Sorry for asking so much but this really helps me getting the idea).

9

Ok, I’m not sure I understood that correctly :slight_smile:



What you can do is call a method back on the ScreenController when an effect starts or ends:



onStartEffect: For special effects you can attach a callback to the effect that is executed when the effect is about to be started. The callback is resolved with the current ScreenController.

onEndEffect: For special effects you can attach a callback to the effect that is executed when the effect has ended. The callback is resolved with the current ScreenController.



Example:



[xml]<onShow name=“fade” start="#0" end="#A" length=“3000” startDelay=“1000” onEndEffect=“someMethod()” />[/xml]



Which will call someMethod() on the currentScreenController when that fade effect ends.



You can find this and other attributes you can set on an effect in the nifty wiki effects reference.

10
It seems textSize effect could do it for simple things, I had thought of it, but imho it doesn’t always seem as convenient or intuitive as setting size at element level.

hello could you give us an example of how you implemented this ?