Remove corners from an image.

Hi! My name is Myles, and I am creating a league of legends inspired idle clicker game. While developing the character profile icon, I have them set as sprites. The issue however, is that these sprites (downloadable by riot) are square. In the game, these icons need to fit a circular mold, as seen below.



I am not experienced with materials, or any image manipulation for that matter (unless i’m in like photoshop). I had two images I was using, but I photoshopped them to the circular design i needed, but there are a TON of champions in the game, and going one by one and photoshopping them can’t be the answer. Too much manual labor, and when I add availability to be that character, I would have to have each one pre-cut.

It looks like this →


And I need them to look like this →

Any Ideas?

This is also displayed in my Main UI, and am happy to upload my blueprint layout if needed.

Best,
Stridingg/Myles

Hi Myles, Welcome to the Forums,

Good question - My first idea would be to use a ‘Sphere Gradient’ as a mask in your material.


Does that work in the context of what you’re doing? (It’s been a while since I’ve used UMG)

1 Like

Sorry I work overnights, I’ll look into this tomorrow on my day off and see if this is something that could be implemented! I appreciate your suggestion and will update when possible!

1 Like

Unfortunately, I don’t believe the solution would work for me as I just don’t have enough experience around materials, textures, or how they work. I ended up manually doing all of them, which yes it took time but I may have a use for their square counterparts nonetheless. So not entirely a waste, but currently no shortcut solution, I do appreciate your input though!

In case anyone else comes across this post, you only need to create a very simple material


Create material instances for each hero and set the corresponding texture.


and know that widget images support materials

2 Likes