nifty-gui

There is a new Effect available in SVN now. The “gradient” Effect allows you to draw vertical or horizontal gradients. You can use different colors and a percentage or pixel value for the position where the specific color should be.

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

To get access to the latest and greates Nifty, Snapshots (= Development Versions) are now available at the Nifty Maven Repository I’ve set up at sourceforge.net.

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

Someone over at the nifty forums asked how to switch images from java. You can find the thread and my answer here.

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!

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.

Read the rest of this entry »

Ok, I was not able to add a effect reference each day but there was some progress, which is good.

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

Shiring is a 2D MMORPG that uses Nifty GUI for it’s user interface. Check out it’s blog

http://blog.shiring.de

and especially the current GUI demo:

This is pretty awesome

I started to document the different nifty effects in the nifty wiki:

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

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

Nifty and Slick User Tobse pointed out that you can use the NiftyGameState to create overlays too.

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

Read the rest of this entry »

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.

Read the rest of this entry »

Well, Nifty 1.0 should be quite stable now. It’s probably not perfect yet but you already get a whole lot to play with already

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!