Advertisement Jump to content
Sign in to follow this  
mixedup

paint pouring out of a tipping bucket graphics? ideas to how to make?

This topic is 1882 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Any advice/ideas re what technique to use to do the graphics effects of paint pouring out of the bucket?  Say for example:

 

- you have a transparent/glass bucket/container

- it has colored paint/liquid in it

- then you tilt the container over say 45 degrees and the paint/liquid starts pouring out and down

 

Will be on IOS and using Corona SDK, but really the question is about what graphics technique might be best to use, images, sprites, polygons with fills....

 

 

Share this post


Link to post
Share on other sites
Advertisement

but really the question is about what graphics technique might be best to use, images, sprites, polygons with fills....

Liquid simulation. It is more of a physics techniquie than a graphics technique, though.

 

As for the graphics rendering part, I believe the most used techinque is called "screen space fluid rendering". It is based on rendering a 3D cloud of point sprites or spheres, where the possition of each point/sphere comes from the physics part of the simulation.

 

Here's the first google result for "Corona SDK liquid simulation": http://developer.coronalabs.com/code/liquid-simulation-corona-sdk

 

If your animation will always look the same way, you can also use a pre-recorded animated model. Although, I don't know to what extent 3D animation tools allow recording and programatic playback of liquid simulations.

Edited by tonemgub

Share this post


Link to post
Share on other sites

thanks the liquid simulation seems quite good - main concern will be it'll need physics and if have enough things happening on the screen I'm not sure how performance will be, but I guess it performance wasn't an issue it might be the best approach then

 

If I wanted something less intensive without physics however, wondering what basic non-physics graphic approach might be the best?  Perhaps a chain of 10 blog type images that rendered/blended together.  That is almost like a piece of string pulled out of the bucket with images attached and spaced along the string...

Share this post


Link to post
Share on other sites

Perhaps a chain of 10 blog type images that rendered/blended together. That is almost like a piece of string pulled out of the bucket with images attached and spaced along the string...

In your case, I would use a mesh for the bucket, and one for the paint flowing out of the bucket, that looks like a stream of paint. The paint-stream mesh would get a paint like material (maybe with a bump map for paint lumps, a high specular intensity for lighting etc) , and to animate it flowing, I would use uv-displacement (it can be easily implemented in a pixel shader).

 

You could also add a mesh for the paint that is inside the bucket, and then use some dynamic scaling on both paint meshes, based on angle of the bucket and amount of paint that is still in the bucket. The math for this would be based on simple, intuitive rules, like these:

- as the angle of the bucket increases, the width of the stream mesh increases, and so does the speed at which level of paint in the bucket decreases

- as the angle of the bucket decreases, the oppsite of the above happens

- as the level of paint in the bucket decreases, the width of the stream decreases.

etc...

 

You could also use vertex blending between the two paint meshes, to make a smooth transition between them.

 

However, the biggest problem with this method would be fitting the paint and bucket meshes togeteher, because you have to be careful to avoid intersections, and to make the water inside the bucket fit the edges of the bucket...

 

You'll also have to handle placing the stream mesh at the correct position around the bucket - the stream should flow from the direction in which the bucket is tilted.

Edited by tonemgub

Share this post


Link to post
Share on other sites

thanks for a great response - I must admit I'm having to google some of the techniques you mention :)   Would I be on the right track re my understanding here:

 

a) use a mesh - so this would be (well in Corona SDK for me) creating a set of polygon(2) that represent the outline of the item (e.g. bucket, or end-to-end flow of pain). 

 

b) paint-stream mesh would get a paint like material - so this would be then using photoshop type effects to apply to the mesh (Corona Graphics 2.0 now has some of this http://www.coronalabs.com/2d/).   Or perhaps you meant to use images to render as a photoshop like "pattern" within the object area?

 

c)  bump map - assume this would be an effect you could apply to an image you might use 

 

d) uv-displacement - bit beyond me?  an effect for images?  Not sure if Corona Graphics 2.0 can help me out here)

 

e) vertex blending between the two paint meshes - is this just the type of blending mode you would use?  I'd have to rely on what is available in Corona I assume>

 

 

thanks 

Share this post


Link to post
Share on other sites

a) use a mesh - so this would be (well in Corona SDK for me) creating a set of polygon(2) that represent the outline of the item (e.g. bucket, or end-to-end flow of pain).

Yes, a mesh is a set of polygons representing the "outline" of an object.

 

 


b) paint-stream mesh would get a paint like material - so this would be then using photoshop type effects to apply to the mesh (Corona Graphics 2.0 now has some of this http://www.coronalabs.com/2d/). Or perhaps you meant to use images to render as a photoshop like "pattern" within the object area?

 

c)  bump map - assume this would be an effect you could apply to an image you might use

Yes, and you would also apply such an effect to the bucket, to make it transparent. The bump map is one of the many types of textures (images) that are composited/blended together to create a "material" that can be applied to the object's polygons. You can find more info on wikipedia: http://en.wikipedia.org/wiki/Bump_mapping . And you will also need at least a "diffuse texture", and a "specular texture", for phong shading: http://en.wikipedia.org/wiki/Phong_shading

 

 


d) uv-displacement - bit beyond me? an effect for images? Not sure if Corona Graphics 2.0 can help me out here)

Start by reading this article about how textures are mapped to objects: http://en.wikipedia.org/wiki/UV_mapping

Once you understand that, understaing "UV-displacement" is simple: it is just a simple addition of a certain (constant, or time-deta dependent) value to either or both of  the u or v coordinates every frame, to create the illusion that the texture "flows" in a certain direction across the surface of the object.

 

 


e) vertex blending between the two paint meshes - is this just the type of blending mode you would use? I'd have to rely on what is available in Corona I assume>

Vertex blending is a way of blending the vertices of two meshes together. The best description I can find is here: http://msdn.microsoft.com/en-us/library/windows/desktop/bb174594(v=vs.85).aspx . This article mostly refers to Microsoft's Direct3D9, but if you ignore Direct3D-specific details, that article is pretty good for understanding the technique.

 

You probably can't use Corona Graphics 2.0 for this, as it only supports 2D grapchis. The techniques I described are for 3D graphics. Maybe you can find a way to implement their 2D-equivalent, but the way 2D APIs work are completely different from 3D.

 

For 2D graphics, you'd mostly use pre-rendered animations, and to play them back, you can use this library (as someone suggested on stackoverflow): http://www.coronalabs.com/blog/2010/06/01/improved-movieclip-library/

 

I'm sorry I can't help you more with Corona SDK. I don't have any experience with it.

Edited by tonemgub

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!