Water, liquid, fluids

Recommended Posts

Has anyone achieved water in their game with phaser?


How could it be done?  Is it possible for waves to form/it able to drain out and stuff, and what about collisions?  Can you detect collisions with water/liquid in Phaser?


I know it's like 3-4 questions in one!  I searched a couple times for this in the forum and didn't see anything on this.



Hopefully some good responses, I'd love to incorporate water into a game and do some things like Ecco the Dolphin or Sonic games did.

Share this post

Link to post
Share on other sites

I have no idea if it can help you or not, but I know gamedevtuts made a tuto about water couple in January.


It's in Unity, but I hope you maybe take some of the concepts here. No idea.


I just know that recreating water behavior can be really intense in ressource if you want some level of reality. But the solution brought in the tutorial seems interesting, even if I didn't give it more than a look to the final result, it seemed quite good.


TL;DR : Here is the link http://gamedevelopment.tutsplus.com/tutorials/creating-dynamic-2d-water-effects-in-unity--gamedev-14143


If you have any new thing on this don't hesitate to keep us to date.

Share this post

Link to post
Share on other sites

Fluid simulation is a tricky and complex topic, though the type of dynamics you're after would probably best be represented by a smoothed particle system. The basic idea is that you create a load of circular particles to represent the fluid, but visually represent it as a single smoothed mass, taking into account boundaries (so the fluid 'sticks' to nearby edges, rather than gets rounded) - this would certainly be possible using P2 physics for the simulation, and a choice of a triangulation method, BitmapData or maybe a shader to render the smoothed effect.


I think to answer a lot of the questions put in the forum lately regarding 'can x be done in Phaser' the answer is pretty much always 'yes'. Phaser doesn't apply any limitations on what you can create, as it's just JavaScript, Canvas and WebGL at its heart - and these are all accessible pretty easily should you wish to go a little deeper under the abstractions that Phaser provides. Before asking the question, see if it's been done before anywhere else. Chances are, there'll be an open source project doing exactly what you're after, and there's a good chance someone's done it in JavaScript too. From there you can just join the dots :)

Share this post

Link to post
Share on other sites

Well your questions are very general. But my first thought on this: Forget about simulating water. Think about faking it. Maybe create some layers of water and use sin & cos to animate them continuously in an organic way. Do the same with your characters or objects in the water. Think out of the box, out of the simulation box.


If you really want to get into that topic of fluid simulation, you will have a hard time and later problems with the performance I guess. Maybe buoyancy is fine for your start ? This concept could be easier to grasp. It's basically about inverted gravity to simulate objects floating in water. You can see buoyancy in action in several box2d simulations. But beware of it: Box2D is currently not available in Phaser and p2 doesn't support buoyancy yet.


I did the integration of box2d as a basic proof of concept after Rich changed Phaser to let it handle multiple physics engines. By using Box2D you could use buoyancy (actually I tested it in the following example, before releasing it, search for the method testBuoyancy)



The PR to integrate box2d is closed for now on phaser's github repos, until someone finds time to integrate it. https://github.com/photonstorm/phaser/pull/545




Share this post

Link to post
Share on other sites



I don't know if anyone has viewed this WebGL fluid generator, but it's valuable to open up the controls and look at the particle attributes.  If you want to further understand how these attributes work together, adjust the parameters and move the sphere.  It's also valuable to view the simulation by clicking the bottom checkbox labeled "show simulation."  This is the best controllable WebGL fluid simulator I've seen yet.


Here's the link to copy into your browser:





For another example (I'm sure many have seen), the following is excellent, but doesn't demonstrate what the characteristics are in creating fluids - but well worth viewing if you haven't seen this:





My understanding of particle fluids, ray tracing, caustics, etc. came from Dynamation (bought by Alias and then Autodesk), but I recommend downloading a trial version of Maya for free, and building a fluid simulation in Maya.  I've seen several fluid tutorials online.  This will provide practically anyone with a fairly good understanding of particle fluids.  It's all very doable now in BabylonJS.


Have fun!


David B.

Share this post

Link to post
Share on other sites


yeah, that's a nice way to implement liquid like behavior. I found a similar technique demonstrated with each step here in flash: http://www.patrickmatte.com/stuff/physicsLiquid/ This was mentioned in this informative thread http://gamedev.stackexchange.com/questions/26316/how-to-render-2d-particles-as-fluid


For a recent pixi js project I integrated Google Liquid Fun with box2d. That combined with a nice water shader and you get superb liquids like water, pudding or powder with real physics. The screen attached shows the liquid in a container. And sorry, that's from an internal testing prototype, therefore all the angry birds assets. 


Here is the Testbed of LiquidFun.



Regards George


Share this post

Link to post
Share on other sites

If you want to be particular barebones about it and don't want to introduce any other frameworks, you could use a Phaser.Rope object with careful application of particle emitters to create a simple wavy water/splash effect. It won't really behave like water mostly, but for certain things it'll give enough of an illusion.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.