ImageLayout collision edges

I’m experimenting with making a character creation with drawn fellows like this nice gentleman here.

image

He’s split to head, chin/neck, nose, eyes, torso and hair.

image

But alas, when you put all those together and scale the game window down so the images are no longer in their original sizes, this happens!

image

These outlines do not appear if you use Slice as the ScaleType of images and the images are in 100% size. Tried all I could imagine to get rid of them but to no avail.
Anybody have similiar experiences or some tricks up their sleeves to make those vile beings vanish?

This is an issue with the color of the image’s transparent background being blended with the edge of the image. That is, let’s say you have a black pixel with transparency all the way up next to a brown pixel that’s opaque. When it’s scaled down so they have to be blended together, instead of doing the logical decision and taking transparency into account, Roblox blends transparency independently of color and makes it a mix of black and brown with 50% transparency.

You can manually change the color of transparent pixels or try something like PixelFix.

2 Likes

I took this into account and used hard edges with the colors, so there are no different shades by the edges. The images also overlap and their collision points cause those dark lines, not blended colors. :lying_face: Thank ya for guidance though!
Edit: This is how clear the edges are of any transparent pixels