You can follow both threads at the Nifty Help Forum at sf.net:

Changing Button Text Thread

Resizing Buttons to Text Thread.

Read the complete blog post for details.

Dynamically changing text was easy and has been added to the ButtonControl. You can now simply change text with the following code from java:

screen.findControl("backButton", ButtonControl.class).setText("New Text");

Automatically resizing Buttons was a bit more involving tho.

Nifty actually has build in support for resizing elements according to other elements. But before we can understand what that means we first need to know a bit about the internal workings of a Nifty Button Control.

A Nifty Button consists of a Panel element with childLayout=”center” and one child element which is a Label element that represents the actual button text. So far so good and the standard style set (nifty-style-black) simply adds a fixed width to the button.

So simply using the Button control:

<control name="button" label="Hello World" />

will give you a button with a style specific fixed width.

You can override this fixed width when you use the button control like that:

<control name="button" width="4532px" label="Hello Large Button World" />

This works pretty good if you don’t need to change the button label text. No matter what you do to a button with a fixed width it will always stay at this width (Unless you change the width constraint from code as one of Jattras code examples shows. And although this works it is a bit cumbersome but until now the only way to achieve resizing buttons).

So what should we do to fix this?

Well, actually there is not really much to do. If you ever used a childLayout=”vertical” on something without setting a width but every child in that special element had a fixed size you already have seen that Nifty actually resizes the parent element!

And this is basically default behaviour in Nifty: Whenever Nifty finds an element without a width (or height) constraint it looks at all the child elements and if they all have a fixed width (or height) it automatically resizes the parent element to the size of all child elements.

And this is just what we need here

As stated above the Button control uses childLayout=”center” and up until now the center layout did not support this kind of auto-resizing feature. But this has been added to svn a moment ago.

So whenever Nifty encounters an element with childLayout=”center” and the child element has a fixed width then it will resize the element to the child width. And this works for our button control too! And it works even when dynamically changing text from within Java

Well, there is one thing to note tho. For backward compatibility the nifty-style-black still sets a fixed width to the button. So to enable the auto resizing you have to override the witdh of the button with an empty String.

Example to enable the auto resizing Button:

<control name="button" width="" label="autoresizing button"/>

And that’s it.

Note:
Another thing to note is, that the change to the center layout logic now requires you to set a width to all elements that use childLayout=”center”. Before this change there was no auto resizing done to elements that use center layout. To prevent the auto resizing that will be used on that elements now you need to specify a width to this elements.

4our game screenshot

good work jattra!

Example:

<onActive name="gradient" direction="vertical">
  <value offset="0%" color="#f00f" />
  <value offset="20%" color="#0f0f" />
  <value offset="60%" color="#00ff" />
  <value offset="70%" color="#ff0f" />
  <value offset="100%" color="#ffff" />
</onActive>

Result:

Awesome!

You can use different Alpha Values for the colors too to make a gradient overlay elements or you could change the blendMode to multiply before applying the gradient with the “blendMode” effect

Have Fun!
void

You can get the latest Snapshot here: http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty/1.1-SNAPSHOT/

In case you’re using Maven you’ve probably already using this in your pom.xml:

<repositories>
  <repository>
    <id>nifty-maven-repo.sourceforge.net</id>
    <url>http://nifty-gui.sourceforge.net/nifty-maven-repo</url>
  </repository>
</repositories>

You only need to change your nifty dependency to snapshot and you’re always using the latest Nifty Build:

<dependency>
  <groupId>lessvoid</groupId>
  <artifactId>nifty</artifactId>
  <version>1.1-SNAPSHOT</version>
</dependency>

Good Luck and Have Fun!
void

Well. So far so good but switching images can be a lot more exciting with nifty effects

So let’s start with adding a new effect and attach it to the image with the onCustom effect:

<image id="inventar" filename="icon1.png">
  <effect>
    <onCustom name="imageSize" startSize="1.7" endSize="1.0" length="150" />
  </effect>
</image>

This adds an “imageSize” effect that starts with a imagesize of 1.7 times the original size and resizes the image back to the original size over the time of 150 ms. The “onCustom” effect means, that we can trigger this effect from java.

So when it comes time to change the image to the rocket launcher, the plasma gun or the BFG9000 we can use the following java code to trigger the effect and change the image:

getElement("inventar").getRenderer(ImageRenderer.class).setImage(iconRocketLauncher)
getElement("inventar").startEffect(EffectEventId.onCustom);

The first line changes the image and the second line triggers the onCustom effect.

I’ve updated the slick overlay example with a little nifty image switching in the right upper border of the screen. You can change the different images with pressing the keys “a”, “b” and “c”.

You can find it here:

http://nifty-gui.sourceforge.net/webstart/nifty-slick-overlay-demo.jnlp

and you can find the updated example in svn or you can browse it online here:

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/java/de/lessvoid/nifty/examples/slick/niftyoverlay/ (Java classes)

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/resources/slick/niftyoverlay/overlay.xml?revision=534&view=markup (Nifty XML for the Screen - overlay.xml)

Nifty!

In the process I just want a moving Nifty GUI Logo like this one

So the logo should resize while fading in and keep on resizing while fading out.

My first try was this xml (only the resizing part is shown with the “imageSize” effect attached to “onStartScreen”):

<onStartScreen name="imageSize" startSize="0.7" endSize="1.0" time="600" neverStopRendering="true" />
<onStartScreen name="imageSize" startSize="1.0" endSize="1.3" time="600" neverStopRendering="true" startDelay="600" />

Which was reasonable but doesn’t work. It doesn’t work because effects with a startDelay are in fact already active. In this case the second onStartScreen imageSize effect overwrites the first one with it’s intial startSize of 1.0 for the time the startDelay is active. Which, yeah, makes sense for most effects but sucks in this case.

What I’d really want to write is this instead:

<onStartScreen name="imageSize" neverStopRendering="true">
  <value time="0" value="0.7" />
  <value time="600" value="1.0" />
  <value time="1200" value="1.3" />
</onStartScreen>

Well, and now you can actually write it like this!

What this does is performing linear interpolation for of the given values. In the example above the value for the imageSize effect starts with 0.7 and changes to 1.0 over a time of 600ms. After that it continues to be interpolated from 1.0 to 1.3 for the next 600ms. When value tags are present they will overwrite the length parameter of the effect. So in the example the imageSize effect will last for 1200ms.

I’ve just commited this to svn. It is still work in progress and is therefore only available for the “imageSize” and the “fade” effect. I’m currently thinking about extending it to other effects where it is appropriate. I’m also considering to not only interpolate float values but to make it more general and the actual values are effect specific, so that you could interpolate color values for instance.

void

Today I added “imageSize” and I’ve started to add little code snippets and animated gifs to the reference page too. So that the explanation makes more sense and you’ll get some code to start with.

I’ll continue to add effects documentation over the coming weeks

And here is the first with gif and code:

http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects#imageSize

Have fun,
void

http://blog.shiring.de

and especially the current GUI demo:

This is pretty awesome

http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects

I’ll try to continue with documenting at least one effect each day

I like his version because it is shorter and much of the details of how the integration with Nifty works (calling render and forwarding input events to Nifty) are hidden from you. However the class NiftyGameState has been designed as a base class for a real Nifty GUI State and was not really planned for overlay rendering.

So I think although both versions work there is still something missing (in both versions). I like the idea of hidding the details on one hand but I’m not sure if using the NiftyGameState is really the way to achieve this.

What do you think?

Click the “Read More” link to see the short version of TestState that Tobse wrote and which is less code than my initial version

package tests;
 
import org.newdawn.slick.*;
import org.newdawn.slick.state.*;
import de.lessvoid.nifty.*;
import de.lessvoid.nifty.effects.EffectEventId;
import de.lessvoid.nifty.elements.Element;
import de.lessvoid.nifty.screen.*;
import de.lessvoid.nifty.slick.NiftyGameState;
 
/**
 * This is the original TestState1 from slick tests extended to a nifty gui overlay. This only
 * implements from ScreenController because we have a quit() onClick action definied in the
 * nifty xml file that is handled in here to quit the demo.
 *
 * @author void
 */
public class TestState2 extends BasicGameState implements ScreenController {
	public static final int ID = 1;
	private GameContainer container;
	private Font font;
	private Color currentColor;
	private Nifty nifty;
	private NiftyGameState niftyGameState;
 
	@Override
	public int getID() {
		return ID;
	}
 
	public void init(GameContainer container, StateBasedGame game) throws SlickException {
		this.container = container;
		font = new AngelCodeFont("menu.fnt", "menu.png");
		currentColor = Color.white;
		niftyGameState = new NiftyGameState(2);
		niftyGameState.fromXml("tests/overlay.xml", this);
		container.getInput().addListener(niftyGameState);
		niftyGameState.init(container, game);
		nifty = niftyGameState.getNifty();
	}
 
	public void render(GameContainer container, StateBasedGame game, Graphics g) throws SlickException {
		g.setFont(font);
		g.setColor(currentColor);
		g.drawString("State Based Game Test", 100, 100);
		g.drawString("1-3 will switch between colors", 100, 300);
		g.drawString("(this is all slick rendering!)", 100, 400);
		g.drawString("and this is more slick text", 360, 650);
		g.drawString("below (!) a nifty-gui overlay", 360, 700);
 
		niftyGameState.render(container, game, g);
	}
 
	public void update(GameContainer container, StateBasedGame game, int delta) throws SlickException {
        }
 
	@Override
	public void enter(GameContainer container, StateBasedGame game) throws SlickException {
		niftyGameState.enter(container, game);
	}
 
	@Override
	public void keyReleased(int key, char c) {
		if (key == Input.KEY_1) {
			currentColor = Color.red;
			getElement("red").startEffect(EffectEventId.onCustom);
		}
		if (key == Input.KEY_2) {
			currentColor = Color.green;
			getElement("green").startEffect(EffectEventId.onCustom);
		}
		if (key == Input.KEY_3) {
			currentColor = Color.blue;
			getElement("blue").startEffect(EffectEventId.onCustom);
		}
	}
 
	private Element getElement(final String id) {
		return nifty.getCurrentScreen().findElementByName(id);
	}
 
	public void bind(Nifty nifty, Screen screen) {}
 
	public void onEndScreen() {}
 
	public void onStartScreen() {}
 
	public void quit() {
		nifty.getCurrentScreen().endScreen(new EndNotify() {
 
			public void perform() {
				container.exit();
			}
		});
	}
}

void