Image icon using nifty gui panel have problems

General Discussion
1

hi there

I want to show an image in a nifty panel as a image button but quality is so bad …

how to fix that?

2

Try using an image of higher quality.

4 Likes
3

By default Nifty doesn’t use linear filtering on the images. Use it and enjoy the increased visual fidelity. For single image you load you can use:

NiftyImage newImage = nifty.getRenderEngine().createImage("new-image.png", true);

Notice the last parameter used. There might have been a global flag to turn on but I can’t recall now.

1 Like
4

No
how to have good quality when I use image elment in nifty not in jme gui!

    ImageCreator im6 = new ImageCreator("zoom tools");

    im6.setFilename("Interface/hud/zoom.png");

    im6.setWidth(
            "96%");
    im6.setHeight(
            "96%");

    im6.create(nifty, screen, I_P_6_e);
5

You aren’t giving us nearly enough information to go on. Can you provide a screenshot of what you are talking about?

6

^ I have no idea what you mean by this? Nifty is the default GUI system in JME, but not the only option. The term “JME GUI” you referenced is unknown to me. Maybe you should attach some screen shots on what you really mean? Like the image you use and how it comes up in Nifty?

7

Have you tried:

im6.set("filter", "true");

It’ll set the linear filtering as true. You can also set it global options, when you init Nifty. I used this with Nifty 1.4.

8

I did it but nothing changed…

9

10

I think it most be there something like anti aliasing in nifty gui …

11

Is it shrinking the icon? Can you pre-scale it in Gimp to the exact size you want so it doesn’t do scaling? I wouldn’t personally assume Nifty can do high quality scaling.

12

I believe this is the solution, your screen shot shows the scaling effects of Nearest (neighbour) filtering.

You should try defining your images a different way, like that suggested above, to ensure that ‘filtering’ (or Linear Filtering) is enabled in Nifty for your image.

13

Maybe this is it, this is how I instantiate NiftyDisplay:

        // Batching
        BatchRenderConfiguration config = new BatchRenderConfiguration();
        config.atlasHeight = 2048;
        config.atlasWidth = 2048;
        config.fillRemovedImagesInAtlas = false;
        config.disposeImagesBetweenScreens = false;
        config.useHighQualityTextures = true;

        // Init Nifty
        niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(assetManager,
                inputManager,
                getAudioRenderer(),
                getGuiViewPort(), config);

        // Attach the nifty display to the gui view port as a processor
       getGuiViewPort().addProcessor(niftyDisplay);
14

my game have to be good looking in 16:9 , 8:5 and 5:4 aspect ratio …
tell how can I calculate the size of each icon and have a pre-scale images for each resolutions ?

and again i ask how to show high quality image icon in nifty GUI?
please some one help me …

15

You already tried to instantiate Nifty with useHighQualityTextures = true;?

16

yes

but game crashed with an exeption

java.lang.ClassCastException: com.jme3.niftygui.RenderFontJme 
cannot be cast to de.lessvoid.nifty.render.batch.BatchRenderFont
17

What version of Nifty? Or JME for that matter…?

18

Product Version: jMonkeyEngine SDK 3.1.0-beta2-b001-SNAPSHOT
Java: 1.8.0_77; Java HotSpot™ 64-Bit Server VM 25.77-b03
Runtime: Java™ SE Runtime Environment 1.8.0_77-b03
System: Windows 10 version 10.0 running on amd64; Cp1252; en_US (jmonkeyplatform)
User directory: C:\Users\yn\AppData\Roaming.jmonkeyplatform\3.1.0-beta2-b001-SNAPSHOT
Cache directory: C:\Users\yn\AppData\Roaming.jmonkeyplatform\3.1.0-beta2-b001-SNAPSHOT\var\cache

19

and nifty 1.4.2

20

Hmm, should work then. Well, what I can suggest is that do your own component out of your image buttons. Now you are using ImageCreator. Just arrange your code differently so you can set the filter attribute. It certainly worked for me. I’ve never used ImageCreator class myself.

Either in code or XML component, using the regular image type lets you use the filter attribute.

1 Like