Simulating Filling a Vessel with water

Hi there,

I’d like to add a widget to my game that simulates filling a tansparent vase with water.  I’m find with just gradually changing the tint at the base of the vase and move it up to the top of the vase over time.

I’ve read up on masks and containers and I just can’t figure it out.

Does anyone have any ideas or samples?

Thanks!

Arthur

@Arthur,

I puzzled over this for a bit but don’t have an answer yet.  However, I think that one possible solution might lie in the proper application of custom blend modes:

http://docs.coronalabs.com/daily/api/type/ShapeObject/blendMode.html

Page down to the section titled ‘Custom Blend Modes

Also, if anyone has already figure this out, please share!  This is a great question.

Thanks Ed,

That seems like it might have promise, but I get hung up on how to you apply it from the bottom up in bits?  My goal is to use the vessel as a meter informing the player of their progress.  The more water in it, the farther along they are.

What I played around with was this:

I made a transparent vase

I made a alpha mask of that vase (straight black and white with the vase cut out).

I made a dark blue rectangle programmatically

I applied the mask to the rectangle

and that’s when I realized that ain’t gonna work!

I was hoping to move the rectangle up through the mask bit by bit until it reached the top.  I would put mask and rectangle behind the vase display object.  In theory this would have worked except I come to find out that when you apply the mask to the rectangle they become married… Unless I’m missing something…

Regards,

Arthur

I basically figured this out this morning.  I essentially did what I said above, but in order to get the mask/sliding effect to stay in the same place I set the y coordinates on the mask opposite of what I’m masking.  So like this:

transparent object stays in place at where ever.

fill color is a rectangle set at same coordinates at object

mask is place over rectangle.

slide rectangle and mask like this to reveal color.

rectangle.y + 50

mask.y - 50

I sent the fill color with and alpha of around .75 on top of the object I want to fill.

I imagine you could do this with a rectangular animation if you want to.  I may try later.

Arthur

@Arthur,

I puzzled over this for a bit but don’t have an answer yet.  However, I think that one possible solution might lie in the proper application of custom blend modes:

http://docs.coronalabs.com/daily/api/type/ShapeObject/blendMode.html

Page down to the section titled ‘Custom Blend Modes

Also, if anyone has already figure this out, please share!  This is a great question.

Thanks Ed,

That seems like it might have promise, but I get hung up on how to you apply it from the bottom up in bits?  My goal is to use the vessel as a meter informing the player of their progress.  The more water in it, the farther along they are.

What I played around with was this:

I made a transparent vase

I made a alpha mask of that vase (straight black and white with the vase cut out).

I made a dark blue rectangle programmatically

I applied the mask to the rectangle

and that’s when I realized that ain’t gonna work!

I was hoping to move the rectangle up through the mask bit by bit until it reached the top.  I would put mask and rectangle behind the vase display object.  In theory this would have worked except I come to find out that when you apply the mask to the rectangle they become married… Unless I’m missing something…

Regards,

Arthur

I basically figured this out this morning.  I essentially did what I said above, but in order to get the mask/sliding effect to stay in the same place I set the y coordinates on the mask opposite of what I’m masking.  So like this:

transparent object stays in place at where ever.

fill color is a rectangle set at same coordinates at object

mask is place over rectangle.

slide rectangle and mask like this to reveal color.

rectangle.y + 50

mask.y - 50

I sent the fill color with and alpha of around .75 on top of the object I want to fill.

I imagine you could do this with a rectangular animation if you want to.  I may try later.

Arthur