nifty-gui

Switching images with nifty effects in game

// November 1st, 2009 // Uncategorized

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!