Greetings everyone,

I want to render only a part of a Image, so I used the subImage-Mode of the imageMode-attribute.

Now the problem is, that this subImage is scaled to the original size of the image which distort the visible part of the image.

This is the original

This is what I want

This is what I get

Is there a way to manage that?

So you wnat it like a image editor ? or you want it for a metail so the gpu could do the cutting?

I want this:

[xml]<image id=“bla” filename=“gui/screensMission/orbRed.png” valign=“bottom” align=“center” visibleToMouse=“true” imageMode=“subImage:0,50,120,70”>[/xml]

and something like “scaling=false” so that I can create the second image. With the image-tag I wrote above, I will get the third image from the first post.

The goal is to create an orb that represents the health-status of the player and can be filled and cleared:

This should look like this:

Ah got it. I’ve hacked into the CompundImageMode.

The example will do the trick. It moves the image on the y-axis while rendering only a sub-part of it.

The example will lower and raise the orb in an interval. This should now be parameterized so that I can enable states like “half-full” “full” or “empty”


public class CustomImageMode extends de.lessvoid.nifty.render.image.CompoundImageMode


SubImageAreaProvider subImageProvider;

public CustomImageMode(AreaProvider areaProvider,

RenderStrategy renderStrategy)


super(areaProvider, renderStrategy);

subImageProvider = (SubImageAreaProvider) areaProvider;



public void setParameters(String arg0)





public Size getImageNativeSize(NiftyImage arg0)


return super.getImageNativeSize(arg0);


boolean lowering = true;

float value = 0;


public void render(RenderDevice arg0, RenderImage arg1, int x,

int y, int width, int height, Color color, float scale)


if(value >= height)


lowering = false;

}else if(value <= 0)


lowering = true;


value += (lowering)? scale : -scale;


y += value;

super.render(arg0, arg1, x, y, width, height, color, scale);




The initialisation is done somewhere after the nifty-screen is loaded:


Element image = _guiCreationService._nifty.getScreen(“screenMission”).findElementByName(“bla”);

SubImageAreaProvider areaProvider = new SubImageAreaProvider();


ResizeStrategy str = new ResizeStrategy();

image.getRenderer(ImageRenderer.class).getImage().setImageMode(new CustomImageMode(areaProvider, str));


Perfomance-test said nothing interesting. The game is as fast as before.

A possible workaround might be to change the image size together with the subImage properties.


this is a pretty cool feature! And without further ado I’ve added support for this to Nifty 1.3.2! :smiley:

See this feature request for details:

There is a new imageMode “subImageDirect” that will render the (sub) image in it’s original size without scaling it to the size of the original image:

[xml]<image id=“logo” filename=“nifty-logo-150x150.png” imageMode=“subImageDirect:0,0,50,50”/>[/xml]

Additionally the parameters of an existing ImageMode can be modified directly which was prepared but not implemented up until now:

[java]// get element and NiftyImage

Element element = nifty.getCurrentScreen().findElementByName(“logo”);

NiftyImage image = element.getRenderer(ImageRenderer.class).getImage();

// change the parameters of the imageMode



hehehe, glad I could help. ^^