Animating A Cocktail Glass Or Bottle Of Beer

Solar2D General Questions/Discussion
#1

Hi All,

I need to animate a Cocktail Glass (or bottle of beer) and have it go from full to empty in the space of 60 minutes. The animation should update every second

Should I just use a series of different png files ( 60 * 60 images ) with a delay timer or should I be using sprite sheets or something else.

I would like the image as detailed as possible but obviously want to be as memory efficient as possible.

Any help or guidance would be greatly appreciated and the solution must work with the free version of Corona.

Thanks in advance.

Anil

#2

@anil,

There are so many ways to accomplish this, that I don’t know where to start answering.  The primary problem I have is I’m clueless as to what you are imagining this should look like.  

Please re-post and include some images of empty, partly-full, and full so we all can see what you mean.  Then, you’ll get some better answers.  Make sure the images really convey what you’re looking for.  I understand the words empty and full, but I can imagine a number of ways of express this concept visually.  I want to see what you’re imagining it will look like at any moment in time.

#3

Hi,

Not entirely sure about the graphics at the moment but the app is for a bar.

The concept is that there is will be a Happy Hour screen which will have an image or cartoon of a full cocktail glass or a full bottle of beer.

There will be a timer which will count down from 60 minutes to zero and every second second the countdown timer will count down.

I would like the cocktail/beer to go from being full to being empty as the counter runs down.

My original idea was to create 60 x 60 = 3600 images - starting with the full glass and every second change the image to that with less liquid but that is a lot of work so was wondering if there is a quicker and better way to achieve the end goal. 

If I had a tall rectangular glass then I could just display the empty glass and just fill it with a coloured rectangle as required depending on how much time had elapsed.

Hope this makes some sense.

Here are some images I have randomly downloaded from internet. 

Thanks

#4

Thanks for posting some images that represent what you’re thinking.  

From the first two images (left to right), you posted, it seems like you want the image to look very realistic at every stage from empty to full.  i.e. You won’t be satisfied with simply rendering the unfilled portion as transparent.

In this case, you’ll probably want to acquire images of a glass at multiple stages of ‘fullness’ and simply created a sprite sheet.  Then show the proper image at any specific level of ‘fullness’.  You could try to do some sophisticated rendering tricks, but at the end of the day these will probably produce an unsatisfactory end result and may take longer to produce than a series of images.

I hope this helps.

#5

Hi

Thanks for getting back to me so quicklly.

I thought Spritesheets / Imagesheets would probably be the best way to go but have never used them before.

As you mentioned, the images may well be quite detailed and may be 5k in size for each image.

That being the case aren’t my image sheets going to be way too big? Is there a limit to how big sprite sheets can be?

In the worst case scenario where there are 3600 images (one per second) would I have 1 image sheet with 3600 different sprites?

Realistically, I would probably update the image once or twice per minute so would only have 60-120 images.

So the question really is how best to display 120 images @ 5k each.

Thanks for the continued help.

#6

  1. Not sure I understand what you mean by 5K.  If you mean 5K x 5K, then, you’ve got a problem.  The highest size I would suggest using for an image sheet (a set of images in one texture) is 2K x 2K.  Late gen Apple devices support more, but mid- and even some late- gen Android devices may not.

  2.  I wouldn’t make the images any larger than they will be in the largest cases.  i.e Choose the highest resolution platform you’re targeting and determine the size of the image.  Then, use that at the individual glass size.

Ex: If you knew the image was 1/4 of the screen size, then on and iPad the image would be 1024 x 768.  You could fit 4 of these images on a single sheet and would need 30 sheets for 120 frames.  The good news is they wouldn’t need to be in memory at the same time so you’d be fine.  However, the size I just described is excessive.  

Ex2: If your image only took up 1/8 of the screen, it wold be 512 x 384.  You could probably fit 8 to 12 (depending on how much transparency is in the image) on a single sheet.  This would cut you down to needing 10 to 16 sheets.

  1. You can use multiple image sheets when making sprites, so if you need multiple sheets that is OK.

  2. If you run into problems using sprites, you can always simply delete the old image and replace it with a new one.  i.e. use individual images to save texture memory. i.e. To not load lots of sheets.

#7

Hi Ed,

Thanks for the last reply.

Just to clarify, the sample Cocktail Image I sent was 5k (disk space) with dimensions of 184 x 273.

I don’t think Sprites are going to work and so I will probably go with your suggestion of 3) and I will just display an image and then replace it with another image at a preset timer interval (probably a minute to cut down on the number of images required to 360).

Thanks for all help and suggestions.

#8

I think your best option is to take a look at the LiquidFun demos in the Physics samples folder. You could easily create a rigid glass container, fill it with liquid and just let it drain out. You could even just create the particles in the container with increasingly longer lifetimes so they disappear one per second.

#9

Hi Matt,

Long time no talk - hope you are well.

I will definately check out the LiquidFun demos and may even have to resort to giving you a call or dropping by on the new Saturday morning hangouts!

Thanks

Anil

#10

That’s what they are for - it’s been pretty quiet recently, so get in on the ground floor!

https://plus.google.com/hangouts/_/event/ct1trba0b9j6efuqijojj9aob2s?authuser=0&hl=en

#11

Hi Matt, 

Just checked out the LiquidFun framework.

Unfortunately, as I only have the Starter edition, there is a big gotcha in my instance :

physics.newParticleSystem()

TypeFunctionLibraryphysics.*Return valueParticleSystemRevision2015.2561Keywords newParticleSystem, physics, particle, LiquidFun See alsoobject:createParticle()   object:createGroup()

Note

This feature is restricted to CoronaCards and the Corona SDK Pro and Corona Enterprise subscription tiers.

Unfortunately, I can’t justify the £49/month for the Pro subscription purely for a cool liquid effect.

Thanks

Anil

#12

@anil,

Disk space isn’t the issue.  I was talking about the width and height of the sheet.  The size of an image on disk does not correlate to the memory used when it is displayed.  However, you have limits on the dimensions of any individual texture and a good guidline is 

2048 x 2048 pixels.  In such a texture, you could fit: 77+ images (probably more because they will be intelligently places to not waste transparent spaces.  Assuming you got an even 80, that means you could do the whole animation with two sheets of 2048x2048.  

i.e. This is totally reasonable.

#13

@anil,

There are so many ways to accomplish this, that I don’t know where to start answering.  The primary problem I have is I’m clueless as to what you are imagining this should look like.  

Please re-post and include some images of empty, partly-full, and full so we all can see what you mean.  Then, you’ll get some better answers.  Make sure the images really convey what you’re looking for.  I understand the words empty and full, but I can imagine a number of ways of express this concept visually.  I want to see what you’re imagining it will look like at any moment in time.

#14

Hi,

Not entirely sure about the graphics at the moment but the app is for a bar.

The concept is that there is will be a Happy Hour screen which will have an image or cartoon of a full cocktail glass or a full bottle of beer.

There will be a timer which will count down from 60 minutes to zero and every second second the countdown timer will count down.

I would like the cocktail/beer to go from being full to being empty as the counter runs down.

My original idea was to create 60 x 60 = 3600 images - starting with the full glass and every second change the image to that with less liquid but that is a lot of work so was wondering if there is a quicker and better way to achieve the end goal. 

If I had a tall rectangular glass then I could just display the empty glass and just fill it with a coloured rectangle as required depending on how much time had elapsed.

Hope this makes some sense.

Here are some images I have randomly downloaded from internet. 

Thanks

#15

Thanks for posting some images that represent what you’re thinking.  

From the first two images (left to right), you posted, it seems like you want the image to look very realistic at every stage from empty to full.  i.e. You won’t be satisfied with simply rendering the unfilled portion as transparent.

In this case, you’ll probably want to acquire images of a glass at multiple stages of ‘fullness’ and simply created a sprite sheet.  Then show the proper image at any specific level of ‘fullness’.  You could try to do some sophisticated rendering tricks, but at the end of the day these will probably produce an unsatisfactory end result and may take longer to produce than a series of images.

I hope this helps.

#16

Hi

Thanks for getting back to me so quicklly.

I thought Spritesheets / Imagesheets would probably be the best way to go but have never used them before.

As you mentioned, the images may well be quite detailed and may be 5k in size for each image.

That being the case aren’t my image sheets going to be way too big? Is there a limit to how big sprite sheets can be?

In the worst case scenario where there are 3600 images (one per second) would I have 1 image sheet with 3600 different sprites?

Realistically, I would probably update the image once or twice per minute so would only have 60-120 images.

So the question really is how best to display 120 images @ 5k each.

Thanks for the continued help.

#17

  1. Not sure I understand what you mean by 5K.  If you mean 5K x 5K, then, you’ve got a problem.  The highest size I would suggest using for an image sheet (a set of images in one texture) is 2K x 2K.  Late gen Apple devices support more, but mid- and even some late- gen Android devices may not.

  2.  I wouldn’t make the images any larger than they will be in the largest cases.  i.e Choose the highest resolution platform you’re targeting and determine the size of the image.  Then, use that at the individual glass size.

Ex: If you knew the image was 1/4 of the screen size, then on and iPad the image would be 1024 x 768.  You could fit 4 of these images on a single sheet and would need 30 sheets for 120 frames.  The good news is they wouldn’t need to be in memory at the same time so you’d be fine.  However, the size I just described is excessive.  

Ex2: If your image only took up 1/8 of the screen, it wold be 512 x 384.  You could probably fit 8 to 12 (depending on how much transparency is in the image) on a single sheet.  This would cut you down to needing 10 to 16 sheets.

  1. You can use multiple image sheets when making sprites, so if you need multiple sheets that is OK.

  2. If you run into problems using sprites, you can always simply delete the old image and replace it with a new one.  i.e. use individual images to save texture memory. i.e. To not load lots of sheets.

#18

Hi Ed,

Thanks for the last reply.

Just to clarify, the sample Cocktail Image I sent was 5k (disk space) with dimensions of 184 x 273.

I don’t think Sprites are going to work and so I will probably go with your suggestion of 3) and I will just display an image and then replace it with another image at a preset timer interval (probably a minute to cut down on the number of images required to 360).

Thanks for all help and suggestions.

#19

I think your best option is to take a look at the LiquidFun demos in the Physics samples folder. You could easily create a rigid glass container, fill it with liquid and just let it drain out. You could even just create the particles in the container with increasingly longer lifetimes so they disappear one per second.

#20

Hi Matt,

Long time no talk - hope you are well.

I will definately check out the LiquidFun demos and may even have to resort to giving you a call or dropping by on the new Saturday morning hangouts!

Thanks

Anil