Support => NGUI 3 Support => Topic started by: jmansa on April 18, 2015, 03:06:57 AM
Title: Making a square texture round?
Post by: jmansa on April 18, 2015, 03:06:57 AM
Hi, I am making an game in which a users image will appear loaded from external server and placed on a NGUI texture. This image is a square rectangle and a s such works just fine, but... I would like to show the image as round. I have come so far to think that it has to do with shaders, but I have never worked with shaders before and have no idea where to start or if its the correct way to do. Maybe there is a easier way to approach this.
Hoping for help in this matter and any help is appreciated :-)
Thanks in advance.
Title: Re: Making a square texture round?
Post by: ArenMook on April 18, 2015, 01:15:54 PM
Create a new material, give it Unlit - Transparent Masked shader and for the mask texture choose a circular texture that would be your alpha mask. Assign this material to your UITexture.
Title: Re: Making a square texture round?
Post by: jmansa on April 18, 2015, 02:17:37 PM
Hey thanks, tried it but nothing happens? What am I missing? I have attached 2 images showing what I am doing.
Again, thanks in advance :-)
Title: Re: Making a square texture round?
Post by: Nicki on April 18, 2015, 05:19:49 PM
"skærmbillede" hehe another dane, eh?
The RoundImage material should use the shader that ArenMook mentioned (Unlit/transparent masked) which will give you two texture inputs in the material. Set the base to board-b and the circle to alpha mask.
Remove the board-b from the Texture input on the UITexture, as you're using a custom material instead.
If you need to set it dynamically, access the UITexture's material instead of mainTexture and set the Base there from code.
Title: Re: Making a square texture round?
Post by: jmansa on April 19, 2015, 07:27:17 AM
Oh yes, another dane :-) Got it, it is not called (Unlit/transparent masked) on my version but (Unlit/AlphaMask) :-)
It work s perfect when changing from script like this:
Test.material.SetTexture("_MainTex",NewImg);
But... Is it possible to use the same material for multiple different images, or do I need to create a new material for each image (profileimg)?
Hope you can clarify this and thanks in advance (Takker :-))
Title: Re: Making a square texture round?
Post by: Nicki on April 19, 2015, 08:23:21 AM
When you reference by material instead of sharedMaterial, it should instantiate a new copy instead of using the same one.
Worst case, you can make a new copy with var newMat = Instantiate(material); and set that in the UITexture.
Title: Re: Making a square texture round?
Post by: ArenMook on April 20, 2015, 07:59:56 PM
Depends on what "Test" is. If it's a renderer, then what Nicki said is true. If it's a widget, then "material" points to the shared material. If separate materials are required then they should be created/assigned separately.