Simulating mud/slime with Box2D, bitmaps and filters

Emanuele Feronato Actionscript 3, Box2D, Flash

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.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 37

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

  2. Post
    Author
  3. 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

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

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

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

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

  8. 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!

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

  10. 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!

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

  12. Pingback: Water Drop Cocos2d-X - QueryPost.com | QueryPost.com

Leave a Reply

Your email address will not be published. Required fields are marked *