Water, liquid, fluids

[raptorjesus]

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.

[Zaidar]

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.

[lewster32]

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

[george]

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)

https://georgiee.github.io/phaser+box2d/

 

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

 

Regards

George

[raptorjesus]

Thanks, this is just the type of general discussion I was trying to start.  I wanted to see both if could be faked and/or if there's other ways of doing this with Phaser.

[JP91]

I'm trying to simulate a little water movement.https://googledrive.com/host/0B2Br6oKX-RFNVmVRY0pHd3R3TGM/FLUIDOS.html

[dbawel]

Hi,

 

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:

 

http://dev.miaumiau.cat/sph/

 

 

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:

 

http://madebyevan.com/webgl-water/

 

 

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.

[Pooya72]

you asked this question a year ago but as i was looking for the answer and i think other do too share what i found here :

this link has 3 different liquid based examples:

http://gamemechanicexplorer.com/#fluid-1

[george]

Hey,

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.

http://google.github.io/liquidfun/

 

Regards George

[substandardgaussian]

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.

[ForgeableSum]

I know this is an old thread but I'd like to comment:

I don't think any of you guys realize how impractical any of these options are in an actual game. Most of these water effects linked to, while pretty and neat to look at, tie up the renderer completely.