As it turned out these posts were related to each other and were both coming from the same gaming company Tygron Serious Gaming located in The Hague, The Netherlands. A couple of emails later we’ve identified some things that they’d like to be improved as well as other things to be added to Nifty. Since some of their existing game assets relied on the direct display of HTML data – which Nifty did not supported – they were especially interested in adding basic HTML support to Nifty.

Everything was very friendly and they especially made it clear from the very beginning that they had no interest in messing with Niftys “openness” in any way. That means that everything we’d change or add to Nifty will still be available for free without any added restrictions. I think this is not something that you can take for granted when dealing with a corporation. So in general that is a very nice attitude! Kudos for them for this!

To discuss all of this in more detail they’ve invited me to The Hague and suddenly I was sitting in a train to the Netherlands to meet everyone involved in the project. Travelling to discuss Nifty related things in a meeting! Amazing!

As expected everybody was nice and friendly. Marieke – their Office Manager – did an excellent job in organizing my travel and Raymond made sure that I’ve ended up at the right place.

Here is a little group photo they did. Look for me in a dark gray shirt in the middle of the picture.

Tygron Nifty GUI Meeting

It was really amazing to see Nifty being used in commercial software running on their big screen in the conference room! And seeing the Java Swing to Nifty GUI converter in action was quite amazing as well!

So what do you, as a Nifty User, get out of this collaboration? Basically two things:

- Niftys memory overhead has been greatly reduced. Nifty is now a lot more GC friendly (improved FPS too)
- The HTML Module is now available and will be a part of Nifty 1.3.1. This adds basic HTML support to Nifty which allows you to generate Nifty elements from basic (!) HTML data.

Well, exciting times for Nifty GUI!

So, I’d like to take this opportunity to (again) thank Maxim, Jeroen and especially Raymond and William for the invitation and of course Marieke for the whole organisation!

Thank you Tygron!
void

About Tygron Serious Gaming

Tygron Serious Gaming is a serious game developer located in The Hague, The Netherlands. It specializes in bringing real-life complex management challenges that have multiple actors with unique tasks and different interests into a ‘multiplayer serious game’, making use of modern game technology.

Nifty gives you an easy to use framework that you can extend with your own ideas. Just like Nifty user zozo64 did. Nifty is missing drag and drop support? No problem! He created his own!

To be honest, he found some bugs too but all of that improved Niftys core systems. So that’s a good thing. We’ll probably bring his work as a standard drag and drop control into the standard controls project soon.

For the moment you can take a look at the code. It’s part of the nifty examples project:

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/java/de/lessvoid/nifty/examples/dragndrop/

And here is a first preview of zozo64 work:

Nifty Basic Drag and Drop from void on Vimeo.

Hudson will svn checkout all relevant nifty projects and will then “mvn clean deploy” them to the nifty maven repository at sf.net. This means that all projects that are already being build with maven and have this in their pom.xml:

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

will automatically get the latest nifty builds!

Currently this means 1.2-SNAPSHOT for Nifty as well as the Nifty Default Controls and the black Style projects and 1.0-SNAPSHOT for the new Nifty Renderer Projects.

Currently the following projects are build each night.

Nifty
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-default-controls/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-style-black/

Nifty Renderer
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-lwjgl-slick-renderer/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-lwjgl-renderer/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-slick-renderer/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-java2d-renderer/

The JME2 Renderer currently has some weird problems being automatically build. So this is not yet available – still working on it:
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-jme-renderer/

If you’re not using Maven you should still be able to get the SNAPSHOT jars from the URLs mentioned above. Just find the sub directory 1.2-SNAPSHOT or 1.0-SNAPSHOT and get the latest JAR from there. Don’t mind the name of the jar tho. It’s automatically generated by Maven and it’s just named with the build date and time.

Good luck!
void

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.

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

So, what’s next with Nifty?

Write more Documentation:

• Programmers Manual / Introduction to Nifty as a little PDF book is planned. Looking forward to this!
• Reference Wiki for all the Effects and Element Attributes and so on

Make it more usable:

• Allow another “language” to define the GUI in (besides XML). Maybe a DSL in groovy or scala or something else
• Fix bugs and other issues
• Improve the Layout Part and make this more easy and accessible

Make it more modular:

• Nifty now depends on Slick for Sound and Image handling. Some people reported that they don’t want to be forced to be dependent on Slick. So to have Slick as an Option would be a plus (this is already prepared for but was too much work to finish for 1.0
• Make even better Slick integration xD
• Split Nifty into even more modules so that you can only use the part you need (effects for instance could be another jar)

And that’s the current plan!

Have fun!

Finally everything is in place again. Changing the loading code was a lot more work than expected. But adding a preprocessing step was the key to solve all the issues and get the code much cleaner.

As an additional benefit nifty now knows for every attribute from which style it came from. So removing a style and replacing it with another one on the fly is supported

We’re now testing the current version in svn with an actual game. When everything works ok the 1.0 release of nifty gui will be available soon – for real this time

In the meantime you can follow nifty development at twitter

• Slick #239
• Lwjgl 2.0.1

Besides that I realized that I’ve already had setup a Nifty Maven Repository at Sourceforge. This was meant to store Nifty releases to allow other Projects that use Maven and Nifty to easily access the Nifty libs. So for instance you just need to add:

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

to your applications pom.xml and it will automatically find the Nifty dependency So far so good.

BUT

Today I realized that I could use the same approach to get Lwjgl and Slick2D easily under Maven control. So when switching the Versions to Slick #239 und Lwjgl 2.0.1 I deployed both libs to the Nifty Maven Repo at Sourceforge!

So what does this mean for you?

It means just one thing. It’s now easier then ever to build Nifty! Just “svn co” it from Sourceforge and execute “mvn package” and it should automatically download all required libs without any changes!

Nifty!

This was possible in older versions of Nifty but was kinda tricky.

With Nifty 1.0 (currently available in svn) this has been improved. There are now special classes available to create and configure the build-in elements like Panel, Text, Label and Image.

Example use:

CreatePanel createPanel = new CreatePanel();
createPanel.setChildLayout("horizontal");
createPanel.setHeight("8px");
createPanel.create(nifty, screen, parent);

There is now even support to dynamically create your controls with a CreateCustomControl class.

Nifty stuff

But as we added feature after feature, well, things got a bit unstable and pretty ugly (To be honest … fubar . So some parts of the controls broke, some demos broke and parts of nifty turned to crap.

I tried to fix it, but especially the loading code (loading xml and creating the runtime nifty object tree from it) got to messed up for any repair.

So we took a break from it.

But now we’re back!

I’ve started rewritting the loader code and everything looks shiny, new and great again. It’s not finished yet (control loading is still missing) but it’s looking much cleaner than the old stuff.

BTW: I’ve invented a small little side project while rewritting the loader. It’s kinda another XML Java Binding Project that is based around my own little XML-Schema Definition called “Lightweight XML Schema” (lwxs). The project still relies on XPP3 for xml parsing. You can basically describe what your xml file looks like (exactly like XSD but much simpler) and then you can easily read a matching XML file to some representation in java. It’s all very simple but made the loader pretty easy

And mind you, only the loader was broken! The Nifty core engine has not been changed and is still pretty solid

So hang on! Great things are about to happen!
void

PS: New Wiki Documentation Project for Nifty GUI started.
PPS: Nifty 1.0 – probably available this year! )