koobas.hobune.stream
How to implement a movable (!) 2D mask?
Hi everyone,
we've been working on a little side project over the last years called "Die Brille" ("The Glasses"), which is a small interactive book app for kids. We've build a small Flash/AIR based prototype quite a while ago but since Flash has become mostly irrelevant for our daily work and we've picked up Unity, recently, we're currently evaluating to port the app over.
But we've already hit our first wall and I'm hoping some of you guys can point us to a good solution for what we're trying to do here, since the web didn't have much to offer for our apparently rather specific needs:
As you can see in the GIF above, we have a layer containing a background (the one with the lollipops) with 2D animations on top (the little helicopter thingy), covered by another image (the one with the roses). On top of that we have a PNG that's actually just a frame of a giant pair of glasses. This frame can be moved up and down with a slider.
Now, what we need to achieve in Unity is, that the image that covers the animations (the one with the roses) be masked away dynamically from the pair of glasses upward following the shape of the glasses and, thus, uncovering the animations behind it.
We've found some approaches on this forum all of which didn't seem to be doing exactly what we were looking for. Most of them involve shaders, but giving them a try we never managed to move the mask dynamically and keep the images in position (we're quite new to shaders, I admit).
Using two cameras doesn't seem to be an alternative, either. It was mentioned that this would cut down on performance tremendously.
We've found an approach that somewhat works with a simple line from left to right, but it seemed to dim down the whole image and we'd need something that works with a custom shape - the glasses (bitmap or polygon based).
So, if anyone has an idea how we could make this work we'd be very glad to hear about it!
Thanks a lot.
Michel
How about using an alpha cuttoff mask? The mask will be graduated from black to white and follow the shape of the glasses. You can get most of what you need by examining the answer and the package provided:
Also I would not be quick to discount a second camera.
Thanks, @robertbu. We've evaluated the suggested solutions and build a small prototype. With the examples suggested in the links you listed, it all seems to boil down to a Photoshop problem, essentially. But I guess, we'll figure that out as well. I'll post an update once we've got it all working smoothly.
[UPDATE 6.11.:] So, once we knew what to look for, we came across this Unity Answers post, which links to a lifebar template. After analyzation of the template, we eventually managed to create the following image with illustrator and saved it as alpha mask within the covering image (the one with the roses). The final image with the mask needs to be in TIFF format:
It now works exactly as desired and performs pretty well even on iPad 1.
Thanks again @robertbu for pointing us into the right direction.
