Line around image edge in transparent png

Hello all,



When I display an image with a transparent background an ugly white line appears at the edge: (from the jME3 layout preview)

Photobucket



Here is the code:

[xml]<?xml version=“1.0” encoding=“UTF-8”?>

<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>

<screen id=“start” controller=“mygame.Main”>

<layer id=“wtf” backgroundColor="#0005" childLayout=“vertical”>

<panel id=“topMargin” height=“1%” width=“80%” align=“center” valign=“top” backgroundColor="#f00f" childLayout=“center” visibleToMouse=“true”/>

<panel id=“input” height=“34%” width=“80%” align=“center” valign=“top” backgroundColor="#020f" childLayout=“center” visibleToMouse=“true”>



<image filename=“Interface/mouseInverted_v4.png”/>

</panel>

</layer>

</screen>

</nifty>

[/xml]



This image was generated by me on Inkscape but I also tried a image from the web, also png with transparent background and I get the same.



Is this a problem with the image or the xml?

Have you checked it looks the same when you run the app?



It must be something in your system setup or in the image as I use transparent images all over the place in Nifty and never see this…

I’m learning nifty now and am still in layout learning (xml) so it will be a while before I can test in the app. But when I do I’ll post back.