Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (56 votes, average: 4.91 out of 5)
Loading...Loading...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 37 comments

  1. luis

    on May 16, 2012 at 9:47 pm

    gracias emanuele me fué muy util =)

  2. Vicente Benavent

    on May 16, 2012 at 9:51 pm

    Really awesome, great effect

  3. balajee

    on May 16, 2012 at 9:55 pm

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

  4. Francois

    on May 16, 2012 at 9:55 pm

    Awesome result! Good job!

  5. jarray42

    on May 16, 2012 at 10:06 pm

    This is absolutly amazing! thank you!

    Keep the good work :D

  6. Luis

    on May 16, 2012 at 11:07 pm

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

  7. Chris

    on May 16, 2012 at 11:25 pm

    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

  8. Emanuele Feronato

    on May 17, 2012 at 12:08 am

    Hi Chris,

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

  9. www.kotubukimedia.com

    on May 17, 2012 at 1:30 am

    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

  10. srinivasarao549

    on May 17, 2012 at 3:13 am

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

  11. joe

    on May 17, 2012 at 10:25 am

    Super awesome

  12. siddhart shekar

    on May 17, 2012 at 5:33 pm

    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

  13. Chris

    on May 17, 2012 at 11:05 pm

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

  14. siddharth

    on May 18, 2012 at 7:34 am

    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

  15. Simulating mud/slime with Box2D, bitmaps and filters – Emanuele Feronato « eaflash

    on May 18, 2012 at 9:28 am

    […] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like this […]

  16. Samuramu

    on May 18, 2012 at 10:47 am

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

  17. Jarray42

    on May 18, 2012 at 12:01 pm

    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 :)

  18. Chris

    on May 18, 2012 at 1:39 pm

    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

  19. Husky

    on May 21, 2012 at 10:39 am

    Thank you for your sharing! :)

  20. Antoan

    on May 23, 2012 at 11:07 pm

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

  21. Maras

    on July 8, 2012 at 9:11 pm

    Very nice! It looks very realistic.

    Thanks for this tutorial!

  22. tccHtnn

    on July 17, 2012 at 11:59 am

    how to implement with cocos2D?

  23. sosese

    on July 18, 2012 at 9:54 pm

    how to make cocos2d Water Please! :(

  24. SyntheCypher

    on August 7, 2012 at 11:55 pm

    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

  25. GunnyWaffle

    on October 15, 2012 at 1:03 am

    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.

  26. siddharth shekar

    on November 26, 2012 at 10:28 am

    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

  27. Cody

    on December 14, 2012 at 3:48 pm

    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!

  28. Jose Samo

    on January 10, 2013 at 3:23 am

    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…?

  29. Niko Creatifesprit

    on April 16, 2013 at 11:08 pm

    Great, thanks & keep up the good work!

  30. manolis

    on July 30, 2013 at 8:09 pm

    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!

  31. 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

    on November 14, 2013 at 2:21 pm

    […] followed this article, but cocos2d-x doesn’t support for filter or […]

  32. Water Drop Cocos2d-X - QueryPost.com | QueryPost.com

    on November 14, 2013 at 2:28 pm

    […] followed this article‚ but cocos2d-x doesn’t support for filter or […]

  33. Elliot Geno

    on March 21, 2014 at 4:58 am

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

  34. wirher

    on April 17, 2014 at 1:41 pm

    Elliot, u can always apply full screen TXAA shader.

  35. raneen

    on October 7, 2014 at 9:01 pm

    can i do this in libgdx

  36. PimajeXenja

    on November 10, 2014 at 7:54 pm

    Hello Emanuele! Can this effect be replicated in Stencyl?

  37. PimajeXenja

    on November 12, 2014 at 9:39 pm

    Hello Emanuele! Can this be done in Stencyl?

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×