Suppose you have a nice way to move your 2D particles in order to simulate a fluid (like water). Any ideas on how to render it?

This is for a 2D game, where the perspective is from the side, like this. The water will be contained in boxes that can be broken in order to let it fall down and interact with other objects. The simplest way that comes to my mind is to use a small image for each particle. I am interested in hearing more ways of rendering water.


Check out how PixelJunk Shooter did it (including simulation) in this presentation (PDF) at GDC2010.

Sample PixelJunk Shooter Image

  • 1
    \$\begingroup\$ Didn't know PixelJunk...really a nice pres. Thank you! \$\endgroup\$
    – luke
    Mar 28 '12 at 11:51
  • \$\begingroup\$ A link to the trailer :) \$\endgroup\$ Mar 28 '12 at 12:40
  • 2
    \$\begingroup\$ youtube.com/watch?v=HBPQ7GRPTEw \$\endgroup\$
    – Jimmy
    Mar 28 '12 at 20:16
  • \$\begingroup\$ What are SPU, PPU, SPURS ? \$\endgroup\$ Apr 2 '12 at 15:35
  • \$\begingroup\$ @MartjinCourteaux: they're part of the PS3's Cell CPU. Think of them like GPU shaders, albeit there are some key differences. \$\endgroup\$ Apr 3 '12 at 19:13

George Duckett's answer is far more direct and really well presented if you need fully-simulated water in your game. For simulated shallow-water physics with minimal accuracy (less realism, more playful), this image gave me an incredible moment of clarity:


  • \$\begingroup\$ Simple and nice! Didn't really think to use such a simple post-processing step...just wonder if a device like iPhone will handle this. It seems to be a good starting point. Thx. \$\endgroup\$
    – luke
    Mar 29 '12 at 8:36
  • \$\begingroup\$ I can vouch for this approach. I used it once in a project and it worked beautifully. Add a bevel filter and you can have a nice meniscus on your blobs as well. \$\endgroup\$ Apr 3 '12 at 21:18
  • \$\begingroup\$ Super cool! But I'm not sure how well it would accommodate a character strolling through it. It would push all the spheres to one side, wouldn't it? \$\endgroup\$
    – Max
    Sep 19 '16 at 5:42

Or, for a quick and easy approach: Use metaballs!

3d metaballs


Grant Kot has put some of his fluid simulation code up on Github with implementations in both javascript (canvas) and C++ with OpenFrameworks: https://github.com/kotsoft

He has a few demos up on his youtube account: http://youtu.be/HqWheJSEiaw

I have no idea how it works, but I know it runs fast and there's all sorts of variations to build with it. A good keyword to search for might be "multigrid particles".

  • \$\begingroup\$ I really like how Grant Kot simulates fluids! Even if the rendering is minimal, at least on the applet on that web pages. It as a lot of paremeters to control the simulation. Worth a deeper look at it. Thx. \$\endgroup\$
    – luke
    Mar 29 '12 at 20:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .