Create a Flash game like Mass Attack

October 31, 2007 by Emanuele Feronato
Filed Under Flash •  

If you love to stay updated with latest addicting Flash games, probably you already know Mass Attack.

Mass Attack

Mass Attack is based on the very simple idea of balancing weights on a scale. Just press the mouse button to create a spheric weight. The longer you hold down the mouse the larger the weight that is created.

Maybe you are thinking about physics, but I am showing you how easy can be the engine behind this game.

Let's start with the object we are using:

Mass Attack

ball: it's... the ball

bar: represents the bar where balls will fall

The first step consists in creating some balls that will grow as long as I keep the mouse pressed

PLAIN TEXT
ACTIONSCRIPT:
  1. placed = false;
  2. balls_placed = 0;
  3. _root.onMouseDown = function() {
  4.     if (!placed) {
  5.         will_grow = true;
  6.         bubu = _root.attachMovie("ball", "ball_"+balls_placed, _root.getNextHighestDepth(), {_width:1, _height:1, _x:_root._xmouse, _y:_root._ymouse});
  7.         bubu.will_grow = true;
  8.         bubu.onEnterFrame = function() {
  9.             if ((_root.will_grow) and (this.will_grow)) {
  10.                 this._width++;
  11.                 this._height++;
  12.             }
  13.             else{
  14.                 this.will_grow = false;
  15.                 }
  16.         };
  17.         placed = true;
  18.     }
  19. };
  20. _root.onMouseUp = function() {
  21.     _root.will_grow = false;
  22.     balls_placed++;
  23.     placed = false;
  24. }

Line 1: A boolean representing the "placed" status of the game. Determines if the last ball is still being placed (so I can't create a new one) or not

Line 2: A simple counter, to keep in mind how many balls I have placed

Line 3: Beginning of the function to be called every time I press the mouse key

Line 4: If placed is false... (if I can place a new ball....)

Line 5: A flag called will_grow is created and set to true. When this variable is true, all balls in the stage will grow (this may come handy in future, if I want to have more than one ball growing at the same time)

Line 6: Attaching the ball movie with its center at the current mouse position and its width and height to 1 (the smallest ball ever!), ad giving it the name bubu (I promised myself to change this name but...)

Line 7: Boolean saying bubu will grow

Line 8: Beginning of the actions to be executed for bubu at every frame

Line 9: If balls in the movie are growing and this ball can grow...

Lines 10-11: Increasing bubu's width and height

Lines 13-14: If not, bubu will cease growing forever

Line 17: Setting placed to true, so I cannot place another ball at the moment (that's because the last one is still growing)

Line 20: Actions to be executed every time the player releases the mouse

Line 21: Balls stop growing

Line 22: Increment the number of balls placed

Line 23: Setting placed to false, so I can add another ball next time I'll press the mouse

Now try to click in the movie and place some balls. As you can see, they are no balls... they are bubbles! They float! Let's add a bit of gravity...

PLAIN TEXT
ACTIONSCRIPT:
  1. placed = false;
  2. balls_placed = 0;
  3. _root.onMouseDown = function() {
  4.     if (!placed) {
  5.         will_grow = true;
  6.         bubu = _root.attachMovie("ball", "ball_"+balls_placed, _root.getNextHighestDepth(), {_width:1, _height:1, _x:_root._xmouse, _y:_root._ymouse});
  7.         bubu.will_grow = true;
  8.         bubu.will_fall = true;
  9.         bubu.onEnterFrame = function() {
  10.             if ((_root.will_grow) and (this.will_grow)) {
  11.                 this._width++;
  12.                 this._height++;
  13.             } else {
  14.                 this.will_grow = false;
  15.                 if (this.will_fall) {
  16.                     this._y += 10;
  17.                     if (this._y>400-this._height/2-1) {
  18.                         this._y = 400-this._height/2-1;
  19.                         this._will_fall = false;
  20.                     }
  21.                 }
  22.             }
  23.         };
  24.         placed = true;
  25.     }
  26. };
  27. _root.onMouseUp = function() {
  28.     _root.will_grow = false;
  29.     balls_placed++;
  30.     placed = false;
  31. }

Line 8: Assigning another flag to bubu. This will determine if the ball will fall

Line 15: The ball stopped growing. Now, if it has to fall...

Line 16: The lamest gravity in the world! I simply move it down by 10 pixels

Lines 17-20: Checking if the ball hits the "ground" (the bottom of the movie), in this case make it stop falling

Well done! Now balls fall, but I have to make them fall on a balance

PLAIN TEXT
ACTIONSCRIPT:
  1. placed = false;
  2. balls_placed = 0;
  3. weight_on_left = 0;
  4. weight_on_right = 0;
  5. _root.attachMovie("bar", "bar1", _root.getNextHighestDepth(), {_x:0, _y:190});
  6. _root.attachMovie("bar", "bar2", _root.getNextHighestDepth(), {_x:250, _y:190});
  7. _root.onMouseDown = function() {
  8.     if (!placed) {
  9.         will_grow = true;
  10.         bubu = _root.attachMovie("ball", "ball_"+balls_placed, _root.getNextHighestDepth(), {_width:1, _height:1, _x:_root._xmouse, _y:_root._ymouse});
  11.         bubu.will_grow = true;
  12.         bubu.will_fall = true;
  13.         if (_root._xmouse<250) {
  14.             bubu.bar = "left";
  15.         } else {
  16.             bubu.bar = "right";
  17.         }
  18.         bubu.onEnterFrame = function() {
  19.             if ((_root.will_grow) and (this.will_grow)) {
  20.                 this._width++;
  21.                 this._height++;
  22.                 if (this.bar == "left") {
  23.                     weight_on_left++;
  24.                 }
  25.                 if (this.bar == "right") {
  26.                     weight_on_right++;
  27.                 }
  28.             } else {
  29.                 this.will_grow = false;
  30.                 if (this.will_fall) {
  31.                     this._y += 10;
  32.                     if (this.bar == "left") {
  33.                         if (this._y>bar1._y-this._height/2) {
  34.                             this._y = bar1._y-this._height/2;
  35.                             this._will_fall = false;
  36.                         }
  37.                     }
  38.                     if (this.bar == "right") {
  39.                         if (this._y>bar2._y-this._height/2) {
  40.                             this._y = bar2._y-this._height/2;
  41.                             this._will_fall = false;
  42.                         }
  43.                     }
  44.                 }
  45.             }
  46.         };
  47.         placed = true;
  48.     }
  49. };
  50. _root.onMouseUp = function() {
  51.     _root.will_grow = false;
  52.     balls_placed++;
  53.     placed = false;
  54. };
  55. _root.onEnterFrame = function() {
  56.     trace("left: "+weight_on_left+" - right: "+weight_on_right);
  57. }

Lines 3-4: Two new varabiles to know the weight on the left side of the balance and the on the right side

Lines 5-6: Attaching balance sides

Lines 13-17: Determining if the ball will fall on the left side or on the right side according to its x position

Lines 22-27: Updating the weight on the left or on the right according to the side where the ball will fall and its size

Lines 32-43: Replacing the check if the ball hit the end of the movie with the check if the ball hit the left (or right) side of the balance

Line 55: Function to be executed at every frame

Line 56: Output a debug string displaying weights on each side of the balance

Now we have balls falling on the balance and we keep in mind how many weight we have on each side of the balance. It's time to make them move!

PLAIN TEXT
ACTIONSCRIPT:
  1. placed = false;
  2. balls_placed = 0;
  3. weight_on_left = 0;
  4. weight_on_right = 0;
  5. _root.attachMovie("bar", "bar1", _root.getNextHighestDepth(), {_x:0, _y:190});
  6. _root.attachMovie("bar", "bar2", _root.getNextHighestDepth(), {_x:250, _y:190});
  7. _root.onMouseDown = function() {
  8.     if (!placed) {
  9.         will_grow = true;
  10.         bubu = _root.attachMovie("ball", "ball_"+balls_placed, _root.getNextHighestDepth(), {_width:1, _height:1, _x:_root._xmouse, _y:_root._ymouse});
  11.         bubu.will_grow = true;
  12.         bubu.will_fall = true;
  13.         if (_root._xmouse<250) {
  14.             bubu.bar = "left";
  15.         } else {
  16.             bubu.bar = "right";
  17.         }
  18.         bubu.onEnterFrame = function() {
  19.             if ((_root.will_grow) and (this.will_grow)) {
  20.                 this._width++;
  21.                 this._height++;
  22.                 if (this.bar == "left") {
  23.                     weight_on_left++;
  24.                 }
  25.                 if (this.bar == "right") {
  26.                     weight_on_right++;
  27.                 }
  28.             } else {
  29.                 this.will_grow = false;
  30.                 if (this.will_fall) {
  31.                     this._y += 10;
  32.                     if (this.bar == "left") {
  33.                         if (this._y>bar1._y-this._height/2) {
  34.                             this._y = bar1._y-this._height/2;
  35.                             this._will_fall = false;
  36.                         }
  37.                     }
  38.                     if (this.bar == "right") {
  39.                         if (this._y>bar2._y-this._height/2) {
  40.                             this._y = bar2._y-this._height/2;
  41.                             this._will_fall = false;
  42.                         }
  43.                     }
  44.                 }
  45.             }
  46.         };
  47.         placed = true;
  48.     }
  49. };
  50. _root.onMouseUp = function() {
  51.     _root.will_grow = false;
  52.     balls_placed++;
  53.     placed = false;
  54. };
  55. _root.onEnterFrame = function() {
  56.     difference = weight_on_left-weight_on_right;
  57.     bar1._y = 190+difference;
  58.     bar2._y = 190-difference;
  59. }

Line 56: Determining the weight difference between the left and the right balances

Line 57: Updating left bar vertical position. That 190 is its default position, the one it will have if left and right bars have the same weight on them

Line 58: Same thing with the right one

And now the main engine is done. You can create balls of different sizes and make them fall on the balance. This will react according to the weight it has on each side.

There are some issues like the balance is updating its position before balls hit it, and you can't throw balls under the balance, but at the moment the main work of this beautiful one day game is done.

If you want to convert it in a real game feel free to send me your examples and I'll publish it on the site.

About this engine, I have one idea or two that I will discuss in a future tutorial.

Meanwhile, take the full sources and give me feedback.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

16 Responses to “Create a Flash game like Mass Attack”

  1. chaew on October 31st, 2007 10:41 pm

    nice one! I think I could probably use this engine quite effectively to make a cool game. Also, I was wondering whether you could create any tutorials for a shooting game emanuele, thnx.

  2. Ed on October 31st, 2007 10:55 pm

    These tutorials are great, but you should concentrate on a few! You’ve started loads and I’d really like to see some things like the tower defense tutorial finished.

    Keep up the tutorials though, they’re the best! =)

  3. Michael on November 1st, 2007 2:50 am

    Wow, addicting game alright, lol. I got all completely perfect balances up until level 5, then got kinda stuck. Such a good feeling when you get perfect balance with one weight, lol.

    Great tutorial. Always interesting seeing how easy a complex concept can actually be when you just think and break it down.

  4. Josh on November 1st, 2007 6:06 pm

    I agree with Ed i would like to see tower defense finished. I don’t think anyone has another tutorial for that.

  5. Splashy5 on November 3rd, 2007 3:11 am

    how could you make it so they explode after 3 seconds???

  6. Alejandro on November 5th, 2007 5:54 pm

    You can modify this
    _root.onMouseUp = function() {
    _root.will_grow = false;
    balls_placed++;
    placed = false;
    idDestroy=setInterval(destroyBall,3000)
    }

    just added a timer that calls to the function destroyBall…
    then, just add the function
    function destroyBall(){
    bubu.removeMovieClip()
    }

  7. Alejandro on November 5th, 2007 6:13 pm

    Remember to do:
    clearInterval(idDestroy)
    before the removeMovieClip

    Sorry

  8. Web Tasarımı on November 7th, 2007 1:04 pm

    Realy good tutorial, thanks for publishing.
    Actionscript is amazing.

  9. Eric on November 15th, 2007 6:48 am

    Hi there!
    Can send another part of this tutorial. There is a certain glitch in this tute. When you put the weight on any side, the balances keep falling till the mouse is pressed. Can you teach us to make it fall/rise when the mouse button is released. Also can you teach us to make it bounce on falling.

  10. Oskar Koli on January 31st, 2008 7:43 pm

    Nice tutorial,
    was just wondering that if I made the balls into squares how coud I do so that the player could jump on them with a movie clip using the arrow keys?

  11. Oskar Koli on February 1st, 2008 3:43 pm

    nvm mind that I figured it out :D

  12. Russell on May 17th, 2008 2:25 pm

    hi,

    I am a newbee in flash gaming and actionscripting…I would really wish to make a game like mass attack some day.

    Please could you guide me with matching the mass on right and left and also the levels.

    Please.
    Many thanks..

  13. Russell on May 18th, 2008 9:55 am

    Ok I figured it out…
    Anyone can help me with randomly placing balls of random masses in the left bar please..

    Regards,

  14. Russell on May 20th, 2008 9:17 am

    can anyone guide me with randon weight appearing in left side?

    anyone…help highly appreciated..

  15. Russell on May 23rd, 2008 8:43 am

    Thanks guys… I found out myself…

Leave a Reply




Trackbacks

  1. GiuseppeSorce » Blog Archive » Create a Flash game like Mass Attack on October 31st, 2007 10:55 pm

    [...] Seguitelo passo dopo passo su Flash Game like Mass Attack [...]