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”
[java]
public class CustomImageMode extends de.lessvoid.nifty.render.image.CompoundImageMode
{
SubImageAreaProvider subImageProvider;
public CustomImageMode(AreaProvider areaProvider,
RenderStrategy renderStrategy)
{
super(areaProvider, renderStrategy);
subImageProvider = (SubImageAreaProvider) areaProvider;
}
@Override
public void setParameters(String arg0)
{
super.setParameters(arg0);
}
@Override
public Size getImageNativeSize(NiftyImage arg0)
{
return super.getImageNativeSize(arg0);
}
boolean lowering = true;
float value = 0;
@Override
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;
subImageProvider.getSourceArea(arg1).setY((int)value);
y += value;
super.render(arg0, arg1, x, y, width, height, color, scale);
}
}
[/java]
The initialisation is done somewhere after the nifty-screen is loaded:
[java]
Element image = _guiCreationService._nifty.getScreen(“screenMission”).findElementByName(“bla”);
SubImageAreaProvider areaProvider = new SubImageAreaProvider();
areaProvider.setParameters(“0,0,120,120”);
ResizeStrategy str = new ResizeStrategy();
image.getRenderer(ImageRenderer.class).getImage().setImageMode(new CustomImageMode(areaProvider, str));
[/java]
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.
BUT
this is a pretty cool feature! And without further ado I’ve added support for this to Nifty 1.3.2! 
See this feature request for details: https://sourceforge.net/tracker/index.php?func=detail&aid=3529920&group_id=223898&atid=1059825
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]
http://i.imgur.com/J1BGY.png
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
image.getImageMode().setParameters(“subImageDirect:100,100,50,50”);[/java]
http://i.imgur.com/3VRyo.png
2 Likes
hehehe, glad I could help. ^^