Issue with mask, not even sure if this is possible

Getting Started Newbie Questions
#1

Imagine a backgound scene that includes a bottle (or urn, or other irregularly shaped item). I want to show the bottle as being full of liquid - represented by just a translucent blue color - to a progromatically contolled level, anywhere from 0% to 100% full. You could even consider this a sort of weird progress bar if you wanted :slight_smile:

So, in the REAL world, I’d have three elements making a sandwich: from back to front, the image of the bottle, a blue piece of cellophane, and on top the “background” image with a cut-out where the bottle would be. By moving the middle cellophane layer I can simulate the liquid level rising and falling inside the bottle.

So, can I do this in Corona? And if so, how would you suggest I go about it? I have an idea this uses masks (and indeed have the bottle mask ready), but I’m unclear on the details, the examples don’t seem to handle something like this.

Thank you in advance for any suggestions.

#2

You can do this without masks.  You can have your background image, your liquid image and your front image.  They would use alpha transparency to let the holes show through.  Then as you fill/empty your liquid, if it’s a solid color (can still be partially transparent, I’m talking solid as in no patterns) you can use the :scale() method on the image to shrink or stretch the layer.

I think it would probably be easier to have a mask on the liquid layer and then move the mask up and down as needed.

#3

Let’s the say the bottle is in the shape of a cat. If the liquid is also the shape of a cat and I scale it, then I have a small cat inside a larger cat - that’s not what I want. I want the cat bottle to be x% full of liquid - think of a progress bar shaped like a cat. Or am I misunderstanding what you’re saying?

Do you know of an example demonstrating this?

#4

In that case you will need a mask.  There is a sample app in the SampleCode/Graphics called “Flashlight” that should get you started.

#5

Actually after thinking about it, I followed your first suggestion. I took the original image and made it into two separate images, one of just the inside of the bottle with everything else transparent, and another of everything except the bottle, with the bottle space being transparent. Then I make a “sandwich” out of those two layers with a rectangle representing the water between them. By changing the height of the rectangle I get the illusion of the bottle filling and emptying. Neat!

Thanks for your help.

#6

You can do this without masks.  You can have your background image, your liquid image and your front image.  They would use alpha transparency to let the holes show through.  Then as you fill/empty your liquid, if it’s a solid color (can still be partially transparent, I’m talking solid as in no patterns) you can use the :scale() method on the image to shrink or stretch the layer.

I think it would probably be easier to have a mask on the liquid layer and then move the mask up and down as needed.

#7

Let’s the say the bottle is in the shape of a cat. If the liquid is also the shape of a cat and I scale it, then I have a small cat inside a larger cat - that’s not what I want. I want the cat bottle to be x% full of liquid - think of a progress bar shaped like a cat. Or am I misunderstanding what you’re saying?

Do you know of an example demonstrating this?

#8

In that case you will need a mask.  There is a sample app in the SampleCode/Graphics called “Flashlight” that should get you started.

#9

Actually after thinking about it, I followed your first suggestion. I took the original image and made it into two separate images, one of just the inside of the bottle with everything else transparent, and another of everything except the bottle, with the bottle space being transparent. Then I make a “sandwich” out of those two layers with a rectangle representing the water between them. By changing the height of the rectangle I get the illusion of the bottle filling and emptying. Neat!

Thanks for your help.