nifty-gui

Jattra tries to dynamically change button text from within Java and he needs a Button that automatically resizes according to the width of the changed text.

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.
(more…)

Well, I’m currently rewriting the old Nifty Introduction Demonstration that somehow didn’t survive my last blog server switch It was posted right here but the jnlp disappear. The demo explained some basic concepts of Nifty and it was written in Nifty I’m rewritting it now to update it to the current Nifty Standards.

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.

(more…)

Nifty can be used as a standalone GUI. So when your game enters its menu or option screens Nifty is all there is on the screen and all user input is handled by Nifty.

When using Nifty together with Slick2d this is represented by the NiftyGameState class. Using this class your Slick2d StateBasedGame can easliy switch from your in game state to the NiftyGameState and display the GUI.

But this is not the only way Nifty can be used. You can easily use Nifty to render your in-game GUI too! Nifty plays well with others (as long as they use OpenGL/lwjgl for rendering that is).

It’s not complicated at all and I wanted to write example code that demonstrates how easy it is for a long time. Motivated by a question at the Nifty Forum at souceforge.net I did now

What’s demonstrated in the new slick example is, how you can use Nifty to render a GUI on top of a normal slick GameState.

Here is a screenshot of the example which renderes Text from within Slick that changes color when you press the keys 1-3. On top of this it renders a Nifty GUI that responds to mouse events. Additionally if you press 1-3 the colored Nifty boxes start to shake

Slick Overlay with Nifty GUI

You can try it out with the Webstart:

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

and you can find the 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)

Keep reading the full Article to see the details on how we get this to work and what you need to consider.

(more…)

At the moment the current “nifty.jar” is about 435 KB in size. This is because the jar contains some xml style definitions for the standard nifty controls and resource files like images and fonts. If you won’t use the standard controls or images this is a waste of filesize.

So now we’ve extracted the resources into a separate “nifty-default-styles.jar”. The “nifty.jar” now only contains the actual code and is only 280 KB big

Now you’ll need both jars in your classpath when you want to use the default styles but you can add your own of course.

Currently only available in svn or in the latest 0.0.5-snapshot.

Nifty

Nifty GUI uses XML to store the layout of your GUI. To connect such a XML description with some class in Java there is the ScreenController Interface you need to provide:

/**
 * ScreenController Interface all screen controllers should support.
 * @author void
 */
public interface ScreenController {
  /**
   * Bind this ScreenController to a screen. This happens
   * when the Screen got the onStartScreen() method.
   * @param nifty nifty
   * @param screen screen
   */
  void bind(Nifty nifty, Screen screen);
 
  /**
   * called when all start effects are ended and the screen
   * is ready for interactive manipulation.
   */
  void onStartScreen();
 
  /**
   * called when the onEndScreen effects ended and this screen is done.
   */
  void onEndScreen();
}

To let Nifty know what ScreenController class you want to use for a Nifty Screen there is the “controller” attribute on the xml tag:

...
<nifty>
  <screen id="start" controller="com.mypackage.HelloWorldStartScreen">
  ...
  </screen>
</nifty>

To resolve the concrete ScreenController instance Nifty can use two different ways:

1. Nifty creates a new instance of the given ScreenController class and registers this instance with the Screen
2. You can give Nifty a ScreenController instance that matches the class given in the controller attribute. Nifty will first look for an existing instance and creates a new class only when it can’t find one.

To register ScreenController instances with Nifty there are additional parameters on the “fromXml()” method of the Nifty class. This way you can even add multiple different instances for use in multiple Nifty screens.

  /**
   * load xml.
   * @param filename file to load
   * @param controllers controllers to use
   */
  public void fromXml(final String filename, final ScreenController ... controllers) {
...

Note: You still need the controller attribute in the xml so that Nifty can connect the screen with your ScreenController instance.

Note: In case you use anonymous inner classes like in this example here:

class MyStuff {
...
nifty.fromXml("menu.xml", new ScreenController() {
    public void bind(Nifty nifty, Screen screen) {
...

the classname then turns to “MyStuff$1″.

Old Nifty XML - pretty ugly

Nifty XML with Style - a lot better

Nifty XML Style Definition

<!-- main menu style -->
<!--
  <attributes childLayout="vertical" align="center" valign="center" height="50%" />

  <effect>
    <onStartScreen name="hide" length="500" inherit="true" startDelay="1000" />
    <onStartScreen name="fade" startColor="#fff0" endColor="#ffff" length="1000" startDelay="500" inherit="true" />
    <onEndScreen name="fade" startColor="#ffff" endColor="#fff0" length="500" inherit="true" />
  </effect>
-->
 
<!-- menu item style -->
<!--
  <attributes align="center" />

  <hover width="200%" falloffConstraint="horizontal" />
  <effect>
    <onFocus name="pulsate" hoverWidth="200%" width="200%" period="500" startColor="#3c000000" endColor="#ff7c00ff" timeType="infinite" cycle="false" />
  </effect>
-->

Well, no, not “dry” … but “DRY - (D)on’t (R)epeat (Y)ourself” =)

Suppose for some reason you need a lot of red colored panels in your nifty screen. At the moment you’ll need to do something like this:

 ... 
 ... 
 ... 
...
 ...

So far so good, but what if you change your mind and want green panels instead? Ugly - no, not the color - but you’ll now have to change all this backgroundColor definitions. Quite ugly.

Introducing Nifty Styles
So what we really want, is to specify the color of the panels only one time and use it multiple times.
So with Nifty 0.0.3 you’ll be able to use style definitions to get DRY =)

<!--
  <attributes backgroundColor="#f00f">
</attributes>
-->
 ...

This way you can define common attributes once and use them multiple times! This principle will be extended to attributes, effects, fonts and so on. This is not only nifty but will naturally lead to UI-skins! Imagine you have all your style definitions in one big “style.xml”. So you could define colors, fonts, effects, etc. once in this file. Changing this single file or including another style.xml whould change your whole UI!

Nifty indeed

And still work in Progress too =)

In a previous blog post I’ve talked about that composition/delegation has some benefits over inheritance. Today I realized that I actually was right

As I was playing around in Nifty I’ve noticed that my TextElements don’t support coloured backgrounds. As a matter of fact the TextRenderer just didn’t support it. The first thought was to simply add this feature. But then I realized that the missing functionality was right there in front of me. I already implemented backgroundColor (and even backgroundImage) for Panels in the PanelRenderer.

So it occurred to me that I only have to combine them both in some nifty composition and be done.

So I’ve just changed the Element class to support not only a single ElementRenderer but several! And by the way I discovered the “varargs declaration” in Java:

public Element(
    final String newId,
    final Element newParent,
    final ElementRenderer ... newElementRenderer) {
  ...
}

You can use it this way:

Element element = new Element("myId", parent, new PanelRenderer(), new TextRenderer());

Nifty indeed

The feature to play soundeffects and probably music in Nifty was in the back of my head from the very beginning. And today I’ve added it and it worked like a breeze

Well, at first I went for something like adding it parallel to visual effects. Something like that:

<element>
  ...
  <effect>
    <onstartscreen name="fade"></onstartscreen>
  </effect>
  <onclicksound name="bleep"></onclicksound>
</element>

But then it occurred to me, that a sound *effect* is only a special kind of an effect! So I’ve quickly added a new kind of an effect: “PlaySound” and voila:

<element>
  ...
  <effect>
    <onstartscreen name="fade"></onstartscreen>
    <onclick name="playSound" sound="bleep"></onclick>
  </effect>
</element>

Feels good. Looks good. Is good. Was very quick to implement too!

Sometimes life is good!

Check the following code fragment:

    // get post mode and default to post = true, when nothing is given
    boolean post = true;
    if (effectType.isSetPost()) {
      if (PostType.FALSE == effectType.getPost()) {
        post = false;
      } else if (PostType.TRUE == effectType.getPost()) {
        post = true;
      }
    }

Although there’s no code duplicated in there (the root of all software evil), there is still some information duplicated. The comment repeats the same information as the code! And duplicate information is not good. If I want to change the default value I need to change two lines: the actual code and the comment. And maybe I forget to change one part and voila introduced inconsistence. Which comes back to me someday and is going to bite me.

So what to do, to make it still readable and easily changeable?

(more…)