UI Texture not getting correct alpha on material

As the title says, im trying to follow a heart life system tutorial and my textures are not clipping correctly…

This is how my material and graph looks if i simply follow the tutorial:


This is how it looks with an alpha mask:


This is how it looks on the GUI Widget:


And this is how it looks if i simply put the images without a material:


So after checking that, here is how the image looks when applied to the blueprint vs how it looks on the folder:


So as you can see, the problem is not the image itself, any clues on how can i go around to fix it?

If you stack your alpha heart and the opacity mask texture in photoshop I think you’ll see that the mask is bigger than the heart. The results in the material look correct based on the thumbnails I’m seeing. The heart images have a white border around them.

Nope is not, i made it the same layer inside photoshop:


As you can see, is just the merged images with a color overlay
EDIT: Also, here is the alpha layer inside unreal engine as a separate image over the other 2:

As you can see, they are the exact same size
EDIT 2: In fact, when viewing it in the widgets, the alpha mask applies properly, but the textures do not the white contour is the alpha mask being the right size

What size are the textures? Did you turn on “Power of 2”, which would change the border size?

Another thing you can try is to use the alpha channel from the Texture Sampler as the input for Opacity Mask, if you already have the alpha anyways. Save yourself the trouble of another texture file just to mask.

Also, the texture in Photoshop looks like it has a feathered falloff for the alpha transparency. Opacity Mask is pure black and white, so maybe the opacity map you’ve created is actually wider than the pixels you truly want to render.

Looking more closely at the material graph I think it’s just an error there. You’re taking a texture file that has a thick white border (value of “1”) and using “add” to put it on top of your main texture map. So those border pixels will always be greater than 1. If you want to use it as a mask, you can put it into a “Lerp” node to blend / stack textures on top of one another. Or you can use “Multiply” to turn all the inside pixels black and leave the outside pixels the same value.

So get rid of that Add.

1 Like