Simulating mud/slime with Box2D, bitmaps and filters

This is an attempt to simulate something like mud/slime with Box2D for a game concept I am trying do develop.

I won’t go much in detail with the tutorial because at the moment I am still fine-tuning the effect, but I am showing you a step by step process to achieve a slime-looking effect.

First, let’s create some static objects:

I am just creating some kind of container with a hole in the bottom.

Then, I skin the container with a transparent image and create one little ball at every frame, someone would call them particle. I remove them when they leave the stage to the bottom, and I don’t place more than 200 balls at the same time, although I was able to place about 300 of them without stressing that much my CPU.

At this time I have a continuous flux of balls falling down the container.

Next steps consists in rendering balls on a separate DisplayObject using a Bitmap

Now I can remove the debug draw as all Box2D assets have their own DisplayObject representing them

And now, since I am using a Bitmap, I can add a blur filter to balls

At this time I’m getting a “smoke” effect, but this is not what I want

So the final step is to add a threshold to change some colors of my bitmap balls/smoke, play a bit with transparency and add a better background

And that’s it! Not the best slime ever seen, but it’s dynamically generated by Box2D, this means it has a real mass, which is quite awesome.

How would you improve it?

Download the source code of the last example.

  • luis

    gracias emanuele me fué muy util =)

  • Vicente Benavent

    Really awesome, great effect

  • balajee

    Wow .. That was nice…. work.. congrats…

  • Francois

    Awesome result! Good job!

  • jarray42

    This is absolutly amazing! thank you!

    Keep the good work :D

  • I’d improve it by changing those colors! ;D But otherwise this effect is awesome.

  • Chris

    Hey Emanuele,

    that’s something I’ve been searching for some time ago and came across this site:
    http://www.patrickmatte.com/index.php/2009/06/16/simulating-liquid-with-a-physics-engine-in-actionscript-3/
    which is actually doing exactly what you did (though with APE and not Box2D), but it’s nice to have an example for AS3 aswell!
    Also there was one guy at flashgamelicense (pspmiracle) who did this for his game (Unfreeze me!), but a texture fill instead of a plain color to achieve the effect like in “Where’s my Water”.
    Could you go over how to do this? This would give this effect so much more depth.

    Thanks! :)
    Chris

  • Emanuele Feronato

    Hi Chris,

    I can’t find the game, can you point me to a link to see how it’s done?

  • Hi Emanuele,

    Can you please provide a CS4 version of slime.fla. I don’t have a CS5 on my machine. I’m would love to try out this code of yours.

    Thanks,
    Ai

  • srinivasarao549

    Really awsome boss…
    IS there any way to do the fluid simulation with out box2d?

  • joe

    Super awesome

  • siddhart shekar

    hi.. awesome tutorial… but how can u do this in cocos2d? major part being the blur filter which is part of flash… how can it be replicated in cocos2d? thanks… regds

  • Very awesome- didn’t know how the last step would have even been done, great eye opener!

  • siddharth

    hey!!… where did my post go…lol… nyway reposting

    …AWesome tutorial…. can you show how to do the same in cocos2d… as this uses the flash effects feature… thanks

  • Pingback: Simulating mud/slime with Box2D, bitmaps and filters – Emanuele Feronato « eaflash()

  • Very nice indeed. The threshold effect is surprisingly effective. Thanks!

  • Jarray42

    Hi Emanuele;

    I tried to improve this by reducing the cercle redius:

    addCircle(320+1-Math.random()*2,-10,2);

    And increasing the number of cercles to 1000 for exemple (or even more); however there is the lag ptoblem again T_T

    I tried the grabage collection, but nothing has changed because I don’t want to destroy / remove my particles.

    Is there a way to improve the performance of Box2D here ?

    Oh yes, I heard something about Stage3D with Starling Framework in flash Player11, it seems it can improve the performance of Box2d by using the GPU.

    Thanks :)

  • Chris

    Hey Emanuele,
    unfortunalety you can’t play his game atm, since it’s in active bidding.
    I’ll link you to his FGL-Page:

    http://www.flashgamelicense.com/view_account.php?username=pspmiracle

    Let me know if you can redo this effect.

    Best regards,
    Chris

  • Husky

    Thank you for your sharing! :)

  • Antoan

    I wonder if this is the exact technique used for the green goo in the flash game Oozing Forever :?

  • Very nice! It looks very realistic.

    Thanks for this tutorial!

  • tccHtnn

    how to implement with cocos2D?

  • sosese

    how to make cocos2d Water Please! :(

  • Adding a bevel filter also helps it look cool here’s my example (made mine before I saw yours).

    http://caffeinatednightmare.com/blog/?p=146

  • GunnyWaffle

    This was extremely helpful. However Im trying to do something seemingly impossible with it right now.

    I have dynamically colored slime particles (basically box2d balls with bound sprites) and I cant figure out how to apply the threshold and keep all the colors.

    Would you know of a way to do this? I’m beginning to think that I have to render each color as a separate bitmap somehow and then blend them together.

  • siddharth shekar

    if any one is looking to recreate this is cocos2sd… you can go here… there is on for v1.0 using box2d and 2.0 using chimpunk..

    http://www.cocos2d-iphone.org/forum/topic/32111/page/2?replies=41#post-231632

  • Cody

    Emanuele, could you please help me understand these lines:

    for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
    if (b.GetUserData()!=null) {

    So I’m pretty sure the for loop scans through the worlds box2d bodies, just not sure how it goes about doing so. Also how does the if statement retrieve ONLY water particles. For instance if I added more bodies to the world, it does not map the water bitmap to it.

    Thanks ahead of time!

  • Jose Samo

    Thanks Emmanuele Awesome!! but i got the problem that the bitmap uses a lot of high cpu usage and for mobiles like android, well i didn’t fit me so well. Is there any way to reduce the cpu usage of the bitmap…?

  • Great, thanks & keep up the good work!

  • manolis

    Hallo, very nice post and tutorial. I actually liked this very much but i have a problem. i code in java. i implemented a physics library and i did as you said but i cannot add threshold. could you write how to go from step 4 to step 5 (Only how to add the threshold) in JAVA, C++ or pseydocode please?
    would be very helpfull if you do. Nice website to!

  • Pingback: Water Drop Cocos2d-XCopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery, copyquery.com, android doubt, ios question, sql query, sqlite query, nodejsquery, dns query, update query, insert query, k()

  • Pingback: Water Drop Cocos2d-X - QueryPost.com | QueryPost.com()

  • Elliot Geno

    What about anti-aliasing? How would you handle that?

  • wirher

    Elliot, u can always apply full screen TXAA shader.

  • raneen

    can i do this in libgdx

  • PimajeXenja

    Hello Emanuele! Can this effect be replicated in Stencyl?

  • PimajeXenja

    Hello Emanuele! Can this be done in Stencyl?