Hi,
I have a Button widget. I want to dynamically expand the button based on what text is displayed. The button has a background texture cut up into 3 pieces, where the middle part of the texture is where it will expand.
1. I created an atlas with "Padding" 0 and "Trim Alpha" unchecked, that contains these 3 png files, font files, and other files.
2. I created a Button widget, and duplicated the Background object, so there is now 3 Background objects. Each one will use a different sprite, (top, middle, and bottom).
3. I set each background object to the same X scale (so it's same in width).
4. Then I moved each background to one on top of another, so it is pieced together without any spacing inbetween.
5. Play the game, and I see this black line artifact between my middle and bottom pieces.
Texture sizes, Top = 397 x 89, Middle 397 x 65, Bottom = 397 x 61
Zooming into the button backgrounds, I can see the textures have this greying gradient around the rim of the textures. But when I look at my original textures, they don't have any grey outline.
Here's some images on my Dropbox account
Button in editor:

Button in editor zoomed in:

Button while in Play mode:

Original art:
Top:

Middle:

Bottom:

How do I make sure these artifacts disappear?
Is there some texture compression that needs to be disabled?
Is there a better way to piece backgrounds together?
Thanks for any help provided.