NiftyGUI works partially

[Dodikles]

Hi monkeys,



I play around with nifty and it really works well. But now I encountered a peculiar bug that I cannot explain.



My GUI is divided into three parts at the bottom, and the bottom right part is supposed to hold three images and beneath them a label.

Look here:



The label is apparently not visible. Don’t know why…





But if I change the order (label above the three pictures) all three pictures and the labels are not visible:







The part that does that in the xml is:

[xml]

<panel id=“front_layer_rpanel” height=“20%” width=“20%” align=“right” valign=“bottom” childLayout=“vertical” visibleToMouse=“true”>







<panel id=“front_layer_rpanel_top” height=“50%” width=“100%” align=“center” valign=“top” childLayout=“horizontal” visibleToMouse=“true”>

<label id=“label_desc” text=“Hallo1234567890” font=“gui/fonts/arabic/arabic_32.fnt” color="#f00f"> </label>

</panel>







<panel id=“front_layer_rpanel_bottom” height=“50%” width=“100%” align=“center” valign=“bottom” childLayout=“horizontal” visibleToMouse=“true”>

<image id=“image_build” filename=“textures/0.tga” height=“70%” width=“25%” align=“left” valign=“center” />

<panel width=“10%” />

<image id=“image_unit” filename=“textures/1.tga” height=“70%” width=“25%” align=“center” valign=“center”/>

<panel width=“10%” />

<image id=“image_money” filename=“textures/2.tga” height=“70%” width=“25%” align=“right” valign=“center” />

</panel>







</panel>

[/xml]



The paths to the textures and the *.fnt-file with corresponding pngs is definitely correct!



The questions are now:

1. why is the label not visible?
   
2. why is it completely messed up when I change the order of the two subpanels? (which I guess results from problem 1.)
   
   
   
   Thanks for suggestions

[Dodikles]

I will just continue with abusing my thread



After tweaking and such my problem from above still persists. If I use smaller resolutions the “gap” closes but from some resolution on the gap always is there. Well, I will just accept it at the moment.



And two bug reports:



1)

If I use the ImageSizePulsate effect, nifty won’t let me use float values for the parameters! I get an IntParseError

Works:

[xml] <onHover name=“imageSizePulsate” startSize=“1” endSize=“2”/> [/xml]

Works not:

[xml] <onHover name=“imageSizePulsate” startSize=“1” endSize=“1.2”/> [/xml]



2)

If I use the imageSize effect, nifty does sth. strange:

[xml] <onHover name=“imageSize” startSize=“1” endSize=“10”/> [/xml]

My image will just become bigger about two times, no matter what parameters I set for startSize or endSize.





Cheers

[void256]

in case you’re using one of the latest jme3 builds with nifty 1.3 then you’ll need to use:



[xml]<control name=“label”…[/xml]



instead of the <label> tag. You can find about the “why” on the nifty blog.



I guess you’re right with 2. being a subsequent fault of 1. Can you confirm this?

[void256]

Gern geschehen!



Yeah, the default controls are now required for the label. BUT if you want to use your own font anyway then you can still use the <text … > element which should actually work the same as the label. Sorry about the confusion tho



Slashed and hacked letters are probably a problem of the font image being flipped in y or something. For some odd reason newer versions of hiero flip the image.

[normen]

void256 said:
in case you're using one of the latest jme3 builds with nifty 1.3 then you'll need to use:

Alpha-4 is out, everybody does now ;)

[Dodikles]

Hi void,



yes, that solved it. Danke dir



I still had to add [xml]<useControls filename=“nifty-default-controls.xml” />[/xml] because another error occured with “label-control” not defined or sth.



But my text is a complete mess. I used Hiero 2.0 and the letters look slashed and hacked Will look further into this!

[Dodikles]

Ahh good. After flipping those PNGs the font came out real nice



Just a question out of interest: if I specify many text-tags with the same font in one or multiple screens (and also across different xml-files), will this affect the performance/memory footprint whatsoever or is it internally cached so it doesn’t matter?



And another: if I want to be as resolution independent as I can be, should I just create a big font (size > 50) and use width and height accordingly to scale them to the proper size in the gui? Better than providing multiple font sizes and even more better than scaling up small-sized fonts

[void256]

Fonts are cached inside of Nifty (and I think in JME3 too). So using the same font file several times is basically free



I’m not quite sure (and on my way into bed - so I can’t check xD) but I think width/height properties won’t scale the actual font size. iirc then fonts are always rendered in the original font size. You’ll need to use the “textSize” effect for this I think.

[Dodikles]

Cool, thanks for the answer. That is very good to know.

Also just implemented a GUIController which changes the label’s text when I click on cities. Very nifty



But tried the “textSize=12” or sth. and it didn’t do anything

[void256]

“textSize” is an effect and not an attribute - although when I now think about it again… I wonder why it’s not an attribute. Would be useful I suppose



[xml]<onActive name=“textSize” startSize=“2.0” endSize=“2.0” />[/xml]

[Dodikles]

Yes, being an attribute is useful when dealing with different resolutions and aspect ratios. Sadly I have to google and go through the wiki and forum threads to grab my nifty gui code pieces together because 1.3 documentation is not complete. Not complaining though, your work is appreciated a lot!

[Dodikles]

Hi,



so I continued my work and added some nice images to it. But now there is a new question. Looky here (click to enlarge):



Note that between those three bottom parts there is a slight vertical “cut” i.e. area not covered in the GUI although the widths of the three panels are 20%,60%,20% and therefore should take up the whole space in theory. I should also mention that I use subImages for the three background roman style parts.



Is this intended behavior?

[baalgarnaal]

I tried staring at your screenshot but I don’t really see a gap, just a slight offset in the image parts on the side, as it seems the left one is a bit moved down and the right one is in place but an ugly line appears as some kind of image edge.



Just an idea for a work around, how about extending the middle part to go over the full width of the screen (100%) and then put the left and right side panels on top of it, thus removing the necessity of getting a perfect alignment? That way you get rid of the bad alignment trouble for sure, just remove the bits that had to match the middle part from the side bits and you are done

[Dodikles]

Hey,



yeah the screenshot was suboptimal. Here’s a better one:





The problem is between the middle part and the right part. And I use subimages which mean that its not a image edge or something like that. And of course I can avoid this by hacking it into it



Just wanted to check if things like that could happen when it comes to pixel calculation in the niftygui-opengl interna.



Now my next problem is calling GUI functions from Java. My image doesn’t want to get the onClick message to my GuiController. Ahh, nice headaches

[void256]

I too don’t see something odd on this screenshot Can you maybe enlarge it and draw awesome red arrows on it pointing to the problem area? and make sure you send the xml snippet too!



About your bug reports: These are no bugs but features! “startSize” and “endSize” are Nifty SizeValues! So you’ll need to append px to it to get absolute values (startSize=“20px”) or % like endSize=“50%”. So to start with the original Size and scale the image to the duplicate size you should use startSize=“100%” and endSize=“200%”.