Worms-like destructible terrain in Flash

Emanuele Feronato Actionscript 3, Flash, Game design, Users contributions

Do you remember Worms game and its destructible terrain?

Jordi Sanglas Molist explains us how to create a basic destructible terrain with AS3

« Today, browsing the “most popular” posts, I found “Create a flash artillery game – step 1“, where you talked about making a game similar to Worms.

Then, I thought: “How will I make a destructible terrain?”

After looking for some information, I realized I should use a Bitmap. So I started with a really basic prototype:

– The character falls if he doesn’t touch the ground
– You can press at any point of the terrain to make a hole (because I don’t still have weapons)

The code is fully commented (and there are only 59 miserable lines), so you won’t have any problem to understand it.

I’ll be three days on holiday, so on Sunday I’ll start writing the next part, which I think it may talk about moving the character.

I think I’ll do it in that way: if you press the right arrow and in the right the obstacle is less than X
pixels height, you can move. I’ll try if that works. »

I am looking forward for character movement, meanwhile this is the script:

And this is the result:

Click on the terrain to create holes and watch your “worm” falling down.

Download the source code.

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!

Comments 32

  1. Poupi

    I’m reading this blog since a long time, and your work is just amazing.
    I can’t believe that the basics of Worms’ engine are so… easy !

  2. Bivis

    Nice! I always though that it was difficult… but is very easy!!!

    I have a question on a thing: How is the performance of the BlendMode.ERASE ???
    I’ve clicked a lot on terrain and didn’t have any problem with performance. But in a more complex game can we have some problems?

    If yes.. there’s a way to build again the terrain, but this time with the holes in itself?

    Thanks by nice tutorial!

    1. Jordi Sanglas Molist

      I was also worried about the performance, but I think that the function BitmapData.draw() calculates only the final pixels: it doesn’t matter how you got to them.

      I’m not sure, but I guess that flash would have included a method to delete again the circles if they were still there. However, that’s a good observation.

  3. Kaustav

    Hey nice tut!

    A while ago i did a worms-like destructible terrain too. I didnt use bitmaps though, only vectors. It may be simpler.

    All i did, was create a ball over the place where one clicks. Every time one clicks, a new ball is placed. All of the balls are part of the same movieclip.

    Then, the hero would ‘hit the ground’ when he is touching the ground AND NOT the balls. Voila! Destructible terrain!

    It worked pretty well, and you can destroy terrain in any shape. No need for bitmaps! It seems to be fast also.

    What do you think?

    1. Jordi Sanglas Molist

      That’s also a great idea (it may be easier). I didn’t think about that strategy. However, as I started using bitmaps, I’ll continue with it. If you use bitmaps, the result is the same (you can also destroy the terrain in any shape). Speed? I think in both cases it’s fast: as I said in Bivis’ reply, I guess that the circles disappear after the BitmapData.draw() function.

      I’m only 15 and I hardly ever find good tutorials to learn programming languages, so I always miss lots of things.

  4. Post
    Author
    Emanuele Feronato

    Kaustav’s idea should work, but you’ll need to apply a mask to the terrain if you have a background image… and it won’t work if you simply use the “holes” movieclip as a mask… interesting idea anyway…

  5. Kaustav

    True, the images do make a problem. And bitmap is probably faster once you start to use many circles, since you still have to check through each one, while on a bitmap, once a pixel is destroyed, its done.

    On the plus side, it might be easier for collision detection, since you can easily make physics for the inside of circles.

    In any case, i still think bitmap is better. I want to see how you make the character move, it was difficult for make to make smooth movement.

  6. Jodi Houareau

    Awesome tut, exactly what I’ve been looking for!

    I’ve been trying to empliment the stardust particle engine for the explosion when terrain is destroyed, its quite tricky though. Maybe you can include something like that in one of you future tuts.

    Great work, Thanks

    1. Jordi Sanglas Molist

      I sent part 2 to Emanuele Feronato two or three weeks ago, I’m also waiting. Part 2 is about character movement (I also solved a bug). Part 3 will be about the explosion impulse.

      Well, I’m sorry. I don’t know when is he going to post that.

      1. Jodi Houareau

        Ah okay, thanks Jordi. Appreciate the feedback. Interested to see how this develops. Keep up the good work!

  7. Jordi Sanglas Molist

    As I don’t know when Emanuele will post my second part, maybe you can give me your e-mail address or tell me how to send the tutorial to you.

    I’m stuck in part 3. I looked for some information about the explosion impulse and how to calculate it, but I didn’t find anything.

      1. Jordi Sanglas Molist

        I sent you part 2, but I don’t know if you’ll receive it (I tried to send other e-mails to my family, and they got them).

  8. Post
    Author
    1. Jordi Sanglas Molist

      I sent you two e-mails, so I thought you were busy.

      I sent the 2nd part again. Did you receive it now?

  9. Post
    Author
    Emanuele Feronato

    I am still not receiving the file. If someone has received it, can you please forward to info[at]emanueleferonato.com?

  10. Jordi Sanglas Molist

    I really don’t know what’s happening. I received Emanuele’s mail (about freewebspace), but it seems that you don’t receive my messages. I did a last try, using a hotmail account (instead of telefonica). If it doesn’t work, I’ll upload it on freewebspace.

  11. Pingback: Worms-like destructible terrain in Flash – Part 2 - Emanuele Feronato

  12. rise4peace

    Hi Emanuele,

    Your tutorials are extremely helpful and I appreciate the knowledge you’ve provided.

    I’ve been trying to figure out how to use the translate function in order to achieve a slicing effect with a game I am developing.

    In a nutshell, I’m trying to replicate the functionality of a missile falling from the sky and penetrating through a users shield, just like what happens in space invaders, and for the life of me I’m coming up short.

    Using your tutorial I’ve gone ahead and added code that makes the blue rectanle fall from the top of the screen. I then use the fall event to which I’ve added a penetrateBase() function which gets triggered when the missile touches the base using your hitTest checks.

    The penetrateBase() function looks like this:
    public function penetrateBase()
    {
    trace(“hitting shield”);
    character.y++;
    characterMatrix = new Matrix();
    characterMatrix.translate(character.x, character.y);
    terrain_bmpd.draw(character, characterMatrix, null, BlendMode.ERASE);
    }

    Unfortunately when I run the code, the missile falls correctly and penetrates the base, but instead of removing a vertical slice from the base, the base is left untouched.

    I know I’m pretty close, I’m almost positive I’m getting hung up on translating the coordinates properly for the falling missile and its intersection with the base.

    Any suggestions would be greatly appreciated.

    cheers,

    rise4peace

  13. Gabi Barrientos

    This is so awesome!
    I’ve been waiting for this tutorial for so long!

    I’ve been working on a multi player game engine which is supposed to be a mix between worms and lemmings, and i could not get this part right myself.

    Thank you so much!

  14. Ben

    I was working on something similar based on the game DeathTank that came with Duke Nukem on the Saturn.

    This was only an exercise, but managed to get something similar. I never got round to implementing the movement restriction based on the angle, and the angle of the “tank” is not offset…

    http://flashpimp.co.uk/flashtank/

    note the nuke takes longer than the shell to charge. The game also works with multiple players, and I built a SocketServer in AIR to broadcast movement to all players. Haven’t got round to finishing it yet as I have been busy on other stuff!

  15. Christian Scholz-Flöter

    Thanks for sharing!

    Somehow I can click 24 times to generate a hole in my Bitmap. After that, a click does not have any effect any more. Does anyone have an explanation for this strange behaviour?

    Code:

    var hole:Sprite = new Sprite();
    var hole_matrix:Matrix;
    var polyData:Poly = new Poly(0,0);
    var polyBmp:Bitmap = new Bitmap(polyData);
    stage.addChild(polyBmp);
    stage.addEventListener(MouseEvent.CLICK, onClick);
    function onClick(e:MouseEvent):void {
    hole_matrix=new Matrix();
    hole.graphics.beginFill(0x000000, 1);
    hole_matrix.translate(e.stageX-polyBmp.x,e.stageY-polyBmp.y);
    hole.graphics.drawCircle(0,0,30);
    polyData.draw( hole, hole_matrix, null, BlendMode.ERASE);
    }

    Poly is a PNG-Bitmap symbol in my library with a linkage class name “Poly”.

  16. Pingback: How to create a destructible Texture in XNA « Bayinx

  17. Pingback: How to create a destructible Texture in XNA | XNA Hero

  18. Pingback: Cloudy Pixel Games » Tutorial #1:Pixel Perfect Collision with Flixel Part 1

Leave a Reply

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