5

I am making a game in unity and am having this issue. The users can upload an profile image from there device to my backenserver to personalize there account. This part is working just fine, but...

The picture is square rectangle but I would like to show the image as round, or with rounded corners when it is showed in the game? Can this be done in Unity with c# or is this not possible?

2 Answers 2

5

It's relatively simple. You need to use alpha masking, which is a method of making selected parts of some geometry transparent using alpha blending.

You need to create an alpha mask. This is an image that is white where you want the user's profile picture to be fully opaque, and black where you want it to be fully transparent (around the corners, in your case). If you use an 8-bit alpha mask, you can use the 254 shades of grey between black and white to fully blend between opaque and transparent, giving your corners that nice, rounded look you're shooting for.

Create your alpha mask in the 2D graphics editor of your choice. In your Unity shader, bind both the user's profile picture and your alpha mask. Create a pixel shader, and in it, take the RGB component from the user's profile picture, and the alpha value from your mask:

sampler2D userProfilePic;
sampler2D roundedCornersAlphaMask;

struct PS_IN
{
    float4 position : SV_POSITION;
    float2 texCoord : TEXCOORD0;
};

float4 PixelShader(PS_IN input) : SV_Target
{
    fixed4 profilePicSample = tex2D(userProfilePic, input.texCoord);
    fixed4 alphaMaskSample = tex2D(roundedCornersAlphaMask, input.texCoord);

    return fixed4(
        profilePicSample.r,
        profilePicSample.g,
        profilePicSample.b,
        alphaMaskSample.r);
}

This seems to be a more detailed article on what you want to do - it has a more complete shader example, too: Unity3D: Unlit Alpha Mask Shader

2
  • 1
    Thanks, think this is what I am looking for, although... First of all I have never been working with shaders before so I am kind a lost, secondly... It needs to be put on a NGUI texture? Don't know where to start :-/
    – Mansa
    Apr 18, 2015 at 7:52
  • Why black? Can it not be white where the image would be and transparent where the transparency would be?
    – Yes Barry
    Apr 12, 2021 at 17:32
0

here comes the worst hack suggestion ever.

  • Have an image with the middle transparent, but the corners in a rounded fashion, not transparent.
  • Put it in front of the profile image (between the profile image and the camera)
  • The corners will not be visible because the picture on top will hide them.

of course the colour of the picture on top will have to blend in with the other things in your scene, but that is something I would try.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.