Not sure if I should use UI or SpriteRenderer. need to detect collisions.

I’m in a weird situation and i’m not sure what’s the proper method to use.

In my 2D game, i have a spoon, and i have a Cup.
The cup got a liquid sprite at the top, and i want to stir the liquid (start an animation) when the spoon touches the liquid, when i drag it there.

So far, i’ve made my whole game by just using UI.
but at first, i tried making the cup/spoon on the world layer (Not UI), but i ran into a problem:
I can’t use masks!
masks exist only in UI, and i need a mask for the spoon to be “half in”.

So next, i gave everything an Image component and moved it to the canvas.
but now i have a different problem:
there’s no collider triggers in UI!
and now i can’t know when the spoon is where the liquid is.

So, what is the correct way? which way should i use going forward?
And is there no easier way to mask sprites outside UI then use a complex shader? (that i don’t know how to use)

I would use sprites, and yes, you could do a mask like that with a shader, but in most cases it’s easier to simply put another sprite on top.

In other words, divide your cup into a “back” sprite and a “foreground” sprite. Then simply layer the spoon between them.

You will of course still need to make sure the spoon doesn’t poke out the side of the cup (though if your cup doesn’t move around, the “foreground” could actually include a bit of the table/desk/whatever around it as well). But you can do this in code, just by limiting the position of the spoon.