Is it really this complicated to create 4 buttons?

Hi!



I want to create an ingame menu like this:

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

(Please comment on my paint skills too :P)



Anyways, as it seem, niftly does not include the basic set position ability.

Instead, to create a button I need to create 14 different layers with different size to be able to create ONE button.

This sounds like a pure waste of life so I wounder if I had understood the system wrong?



To create the 4 buttons for classes in the image shown, I have to:

  1. Create a layer, thats positioned in the left, it’s size is about 25% width and 50% height.
  2. Inside that I need to create a new window. width 100% and height 50%
  3. Inside that I need another window. 100%width, height 50%
  4. Inside THAT I can finaly place my stupid button.

    Illustration bellow:

    http://i52.tinypic.com/w71xll.png





    Is this the way to do it?

if you mean “panel” when you say “window” then yes, this is the way it works.



you can always create a layer (or panel) with childLayout=“absolute” and position the elements in this layer by simply given them x, y, width and height properties if this is something you’re more comfortable with.



EDIT:



Not sure why you need 14 layers tho - care to share your XML-File? :wink:

im also using nifty a lot atm for my menus (still getting the hang of it). Is there a way to get the buttons to be resolution dependent using static xml? my buttons and text are always the same size regardless. I can set the width and height to a % but the text stays the same size, thanks for any info

@wezrule:

not yet but working on it … for 1.3.1

2 Likes

kk, guess ill use panels or something then :P, thanks

Just wanted to point a minor thing out…



NOTE: This is a common problem across the internet, so I just wanted you to know I’m not trying to pick on you.



It’s “you’re dead” unless of course you’re trying to specify the number of corpses the player has created.



The word “your” is a possessive term signifying that something belongs to you.



The conjunction “you’re” or “you are” describes a state of being, in this case dead.



So in your (as in belonging to you) menu screen draft you’re (you are) basically stating that the user somehow has possession of dead. The statement is a valid statement but not in the context you are going for.





Again, not trying to single you out but this is a world-wide problem and I try to bring this up whenever I can.





-Feen

1 Like

I tried to do that way with mant panels.

Problems is, if I add one button, the button below will be deleted.



I have soldier, then heavyload class. Soldier is on top and heavyload below.

If I try that, then the soldier button will be there, but the heavyload will be gone and the text placed in the top of the screen, half cut off.



If I switch place on the two panels, then the heavyload will work fine but soldier will disappear.

Heres how I place them:

[xml]

<panel id="panel" height="50%" width="100%" align="left" valign="top" childLayout="center" visibleToMouse="true">







<panel id="panel2" height="50%" width="100%" align="left" valign="bottom" childLayout="center" visibleToMouse="true">



<panel childLayout="center" width="100%" height="50%" backgroundColor="#a2a2a2" valign="center">

<text id="text" font="aurulent-sans-16.fnt" color="#000f" text="Heavyload Class" align="center" valign="center" childLayout="center"/>

<control id="backButton" name="button" label="Heavyload" align="left">

<interact onClick="back()" />

</control>



</panel>



</panel>





<panel id="panel" height="50%" width="100%" align="left" valign="top" childLayout="center" visibleToMouse="true">



<panel childLayout="center" width="100%" height="50%" backgroundColor="#a2a2a2" valign="center">

<text id="text" font="aurulent-sans-16.fnt" color="#000f" text="Soldier Class" align="center" valign="center" childLayout="center"/>

<control id="backButton" name="button" label="Soldier" align="left">

<interact onClick="back()" />

</control>



</panel>



</panel>

[/xml]



the panels that I switch is panel and panel2.

Heres whole code if you wish to see:

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

<nifty>

<screen id="start" controller="jme3test.niftygui.TestNiftyGui">



<layer id="layer" backgroundColor="#0000" childLayout="center">

<panel id="panel" height="50%" width="25%" align="left" valign="top" childLayout="center" visibleToMouse="true">

<panel id="panel" height="50%" width="100%" align="left" valign="top" childLayout="center" visibleToMouse="true">







<panel id="panel2" height="50%" width="100%" align="left" valign="bottom" childLayout="center" visibleToMouse="true">



<panel childLayout="center" width="100%" height="50%" backgroundColor="#a2a2a2" valign="center">

<text id="text" font="aurulent-sans-16.fnt" color="#000f" text="Heavyload Class" align="center" valign="center" childLayout="center"/>

<control id="backButton" name="button" label="Heavyload" align="left">

<interact onClick="back()" />

</control>



</panel>



</panel>





<panel id="panel" height="50%" width="100%" align="left" valign="top" childLayout="center" visibleToMouse="true">



<panel childLayout="center" width="100%" height="50%" backgroundColor="#a2a2a2" valign="center">

<text id="text" font="aurulent-sans-16.fnt" color="#000f" text="Soldier Class" align="center" valign="center" childLayout="center"/>

<control id="backButton" name="button" label="Soldier" align="left">

<interact onClick="back()" />

</control>



</panel>



</panel>



</panel>

</panel>

</layer>

</screen>

<screen id="end"></screen>

</nifty>[/xml]

And yea, I know your and you’re but sometimes I write instead of think :stuck_out_tongue:

O_o



You seem to be obsessed with childLayout=“center” :slight_smile:



The drawback with using the center childLayout is, that it will only really care about the very first child element. But when you use another panel as the first (and only child) you can indeed use a different childLayout.



Something like that:



[xml]<panel id=“parent-stuff” childlayout=“center” …>

<panel id=“centered-stuff” childLayout=“vertical” …>

<text id=“first-text” … />

<text id=“second-text” …/>

<text id=“third-text” …/>

</panel>

</panel>[/xml]



The “centered-stuff” panel will be centered in “parent-stuff” while “first-text”, “second-text” and “third-text” will be aligned vertical in the “centered-stuff” panel.



I’ve left out all of the width and height values because you’ll need to adjust them so that it fits you screen layout but this is the basic idea.