Any alternatives to UIPanels for hard edge clipping?

[bac9]

I'm implementing a reusable UI based on Android interface guidelines. Many animated elements from the guidelines can easily be implemented using simple layered sprites. For example, here are standard switches using three simple NGUI sprites each:



With other elements, here is a tiny little problem, though. That problem is the extreme use of clipped effects on rectangular clickable elements. Check the following sample animations from the guidelines:

http://material-design.storage.googleapis.com/videos/components-tabs-spec-tabtouch-example_large_xhdpi.mp4
http://material-design.storage.googleapis.com/videos/components-menus-menus-textfield_dropdown_spec_large_xhdpi.mp4
https://material-design.storage.googleapis.com/videos/components-buttons-mainbuttons-buttons-motionraised_large_xhdpi.mp4

Every touch creates an ripple that must be clipped within the touched element. That's where things get tricky. You can imitate it pretty easily using UIPanel, of course:



Except you definitely do not want UIPanels within the hierarchy of every single button, tab, field and card, because you do not want to isolate parts of your widgets into an entirely separate part of depth hierarchy and because you do not want to clutter your panel list with those tiny clip areas. So, is there some lightweight alternative to UIPanel that can only do clipping (not even soft edge, extremely crude rectangular edge clipping, for example depth based, will suffice too - no need for texture-defined masking, no need for circular clipping, nothing like that) without all other rich functionality and hierarchy fragmentation UIPanels bring with them?

[ArenMook]

I have to say the widgets you created look very slick.

In regards to your question... what I would do is have only one extra panel, or at least one panel per touch. When touching something, reposition the panel to match the dimensions of whatever you're touching, and do your animation inside it. When you touch something else, move the panel and repeat the process.

[bac9]

Oh, that's a great idea. Let's say I have a separate UIPanel with a component that can set it's dimensions and position, with a singleton to access it, and a child ripple sprite that can tween through the touch animation. Any touchable widget can call the singleton and invoke a method (using itself as an argument) on touch, which will reposition the UIPanel clip area to dimensions of a widget arriving in the argument and start the ripple animation in the clicked point of the screen. Nice!

[bac9]

Yep, works great!

[ArenMook]

Now this is what I call "creative use of game mechanics".