Filling a Circle

I’m new to Unity, but I have a strong programming background and am very familiar with iOS development.

I’m trying to create a button that is a circle and has a texture (an example I am using is of a tire). So the button starts off filled with a color (blocking the image below it). When the user taps it, it begins to reveal the image below. If the user taps faster and keeps tapping, eventually the entire image will be revealed. If they stop tapping, the image is slowly covered back up by the color.

In my research, it appears a regular UI button will not work (rectangular). Next I thought of using a sprite for the image and using a mask to reveal the image, but evidently you cannot use masks on sprites (without purchasing a plugin).

Can anyone point me in the right direction of what I’m trying to do? Any help will be much appreciated!

I have attached images to show a rough idea of what I’m talking about.

2752093--198537--Screen Shot 2016-08-14 at 7.26.27 PM.png 2752093--198538--Screen Shot 2016-08-14 at 7.27.16 PM.png 2752093--198539--Screen Shot 2016-08-14 at 7.27.48 PM.png 2752093--198540--Screen Shot 2016-08-14 at 7.28.11 PM.png 2752093--198541--Screen Shot 2016-08-14 at 7.28.21 PM.png

bottom layer: wheel image
middle layer: red rectangle
top layer: white sprite with a hole in it

red sprite and wheel show through the mask sprite

but this would only work if your background is white and there is no other background behind it or objects nearby

Yeah I plan on having something behind it.

You could just have an animation for the red part, a circular sprite in a series of animation frames, it will look like its coming down inside the wheel but really its just adding more red pixels. ie just use sprite animation frames.

Someone gave me exactly what I needed using UI:

"
If I recall from memory, you should be able to do this using the UI button.

Create a button. I’m not sure if it’s automatic, but make sure it has the Image component attached to it. The target graphic of the button will be it’s image and make this image the red circle. Create a child object that’s just the image component which is your tire.

On the image component of your button, change the image type to filled. Play around with the settings so that it is vertically filled the way you need it to be (move the slider to test it).

With that setup done, create a button event to a function. This function will then track the clicks and decrease the fill amount of the image."

Thanks for the help