GUI Layout Issue

Troubleshooting gui
1

[xml]<screen id=“start” controller=“makeza.client.Main”>

<layer id=“layer” backgroundColor="#96E034" childLayout=“center”>

<image filename=“Interface/Nifty/Logo.png” align=“center” valign=“center” ></image>

<text id=“text” font=“aurulent-sans-16.fnt” color="#000f" text=“Connecting…” align=“right” valign=“top” ></text>

</layer>

</screen>[/xml]

You would expect that (when put into the proper nifty tags) to produce a image in the center of the screen, and the text “Connecting…” at the top center of the screen.



However, instead of that, the image is in the center of the screen, where it should be, but the text is on the upper left corner, so that 3/4ths cannot be seen. Here’s a image:



Any ideas why it’s doing this?

2

Put the text in a panel

1 Like
3

[xml]<?xml version="1.0" encoding="UTF-8"?>

<nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd

http://nifty-gui.sourceforge.net/nifty.xsd">

<screen id="start" controller="makeza.client.Main">

<layer id="layer" backgroundColor="#96E034" childLayout="center">

<panel id="panel" height="20px" width="270px" align="center" valign="center" backgroundColor="#f60f" childLayout="center" visibleToMouse="false">

<effect>

<onEndScreen name="move" mode="out" direction="bottom" length="300" startDelay="0" inherit="true"/>

</effect>

<image filename="Interface/Nifty/Logo.png" align="center" valign="center" ></image>

<text id="text" font="aurulent-sans-16.fnt" color="#000f" name="status" text="Connecting…" align="center" valign="top" />

</panel>

</layer>

</screen>

<screen id="end">

</screen>

</nifty>[/xml]



I just tried that, it made no difference except that you could see the panel behind the image. The text was still in the upper left corner.

4

You cannot have more than 1 child element inside a panel/screen/layer defined as childLayout=“center”.

1 Like
5

How can I have more then one?

6

Ah, I got it, thanks!

7

There is a similar issue with the Nifty GUI tutorial code, if someone would like to correct it.



https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:nifty_gui_xml_layout



The HUD foreground layer has childLayout=“vertical” but later inserts the left and right panels with height=“100%”. It causes the right panel to go offscreen and looks like the effect in this post. I switched the childLayout to “horizontal” and it was fine. I’m ashamed to mention how long it took me to figure that out.

1 Like
8
@veloran said:
There is a similar issue with the Nifty GUI tutorial code, if someone would like to correct it.

https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:nifty_gui_xml_layout

The HUD foreground layer has childLayout="vertical" but later inserts the left and right panels with height="100%". It causes the right panel to go offscreen and looks like the effect in this post. I switched the childLayout to "horizontal" and it was fine. I'm ashamed to mention how long it took me to figure that out.


Just ran into the same problem & have since fixed the problematic xml code in question.