Making a Flash game like Plants Vs Zombies – step 2

In the second part of the series, it’s time to raise money to buy a plant.

Also, we should add a smooth animation to falling suns, fix a bug which made them appear only on certain tiles and make them disappear if they aren’t picked up after a given amount of time.

Fixing the bug on newSun function

As reported by some readers, newSun function had a bug which did not allow to make the sun appear on every tile. It can be fixed assigning the x property this way:

but since we are featuring smooth animation to falling sun, the entire newSun function can be changed this way:

Now y property is set at -20 to make the sun appear outside the visible area, and its final y destination is saved in a variable called destinationY. We’ll see later what to do with it. Also notice the buttonMode property to make the mouse pointer change shape when it’s over the sun.

Collecting suns to raise money

First, we need a new variable to store the amount of player’s money, then we need a text field to display it somewhere. We also need Event and TextField classes to handle frame events and create on the fly text fields.

So these are the libraries we need to import in the package:

and these are the class level variables used in the prototype:

money will store player’s money while moneyText is the dynamic text field to be created.

At this time, let’s take a look at the complete code and discuss new features:

Let’s see what’s new in this code

Line 19: calling addText function (lines 22-27), which simply creates a dynamic text field and thanks to updateMoney function (lines 28-30) called at line 24 displays the current amount of money.

Line 20: adding an ENTER_FRAME listener which calls onEnterFrm function (lines 31-44) at every frame.

Line 32: this for loop scans for all sunContainer‘s children, that is all suns. Every sun has one of these two states: falling or fallen.

A sun is falling when its y property is lower than its destinationY variable (line 34) and in this case it has to keep on falling increasing its y property (line 35).

A sun is fallen when it’s not falling (line 36) and in this case it starts disappearing (line 37, playing with alpha property). Once it’s completely transparent (line 38) the CLICK listener is removed (line 39) and the sun itself is removed from Display List (line 40).

The last modified function is sunClicked, now giving you 5 money for every collected sun (line 63) and updating the text field (line 64).

This is the game:

Collect suns to make money or leave them on the ground and watch them disappear.

Buying your first plant

To build the first plant, first we need two new symbols: one called plantMc which represents the plant, and one called selectorMc to make the player see where he’s going to place the plant.

We also need five more class level variables:

let’s see their meanings:

plantContainer: the DisplayObject used as a container for all plants
plant: the plant itself
movingPlant: the plant the player will move around the game field once he bought it
playerMoving: a boolean value to determine whether the player is moving a plant or not
selector: the selector itself

this is the final source code:

Let’s see the new lines, as usual:

Line 25: Calling addPlants function (lines 40-48)which will add the plants toolbar. At the moment there is only one plant, and it’s a green circle (remember we are playing at “Circles Vs Squares”).

lines 40-48: addPlants function just adds to Display List the only type of plant we can buy and adds a CLICK listener (line 47) which calls onPlantClicked function (lines 28-39) which is the core of this script.

Let’s see how does onPlantClicked function work:

Line 29: you can buy (click) a plant only if you have enough money and you aren’t already placing a plant. In this case, the plant costs 10 money.

Lines 30-31: subtracting the plant cost to your money and updating the text field showing the money you own.

Lines 32-34: adding the selector to Display List, just keeping it invisible.

Lines 34-36: adding the plant to be placed on the game field

Line 37: setting playerMoving to true, to tell the script we are moving the plant.

What happens when playerMoving is true? Something changes in onEnterFrm.

Lines 71-83: this is what happens when playerMoving is true: the bought plant follows the mouse (lines 72-73) while we calculate which tile we are over (lines 74-75). If we are over a tile (line 76), then we show the selector highlighting the tile (lines 77-79), otherwise (line 80) we keep it invisible (line 81).

This is the result:

Collect at least 10 money, then purchase a plant and move it on the game field.

Download the source code. Next time, placing the plants and your first zombie encounter!!

  • joanne

    Thank you, Thank you. You are the flash master!

  • If I don’t have the money and I grab a plant, I can’t collect more money nor leave the plant.

    • Emanuele Feronato

      no, this happens when you HAVE the money

  • gombo

    Hey, how would you remove SunContainer and other container in case you want to clean the game?

    thanks

  • gombo

    Also you are using a “uint” in your enterfrm process, but simple “int” can be 400% faster than uints…

    var begin:Number = getTimer();
    for ( var i:int = 0; i< 5000000; i++ )
    {
    }
    // shows : 61
    trace( getTimer() – begin );

    ——
    var begin:Number = getTimer()
    for ( var i:uint = 0; i< 5000
    {
    }
    // shows : 238
    trace( getTimer() – begin );

    • gombo

      Sorry i cannot edit but my last example was not complete, here it is

      var begin:Number = getTimer()
      for ( var i:uint = 0; i< 5000000; i++)
      {
      }
      // shows : 238
      trace( getTimer() – begin );

  • Awesome , Ready for next step !

  • But there is a problem : Some of the suns become vanish early .

    Also the suns in the last lines become vanish very soon . They should vanish after 20 second or later . (After 20 S , when they are in last line)

  • This is the problem I say

  • WOW, Thanks a lot.
    Farzad Jan, There is no problem with that.

  • how to think, how animation was done in this game? Emanuele small tutorial please :)

  • Denis

    Hi Emanuele, thanks a lot for your tutorials. May I ask you how was done such small and detailed animations on plants and zombies. If it can be done from actionscript please tell us.

  • Pingback: Como hacer juego Flash tipo Plants VS Zombies [Parte 2] | INDIEGAMES()

  • Pingback: ???????????Flash??2 | ?????()

  • David G

    Hey mate,

    If I wanted to make the player wait for 10 seconds before they could click the sun how would I do that?
    My idea is that I’ll take the sun code, user it to ‘plant’ suns in a similar game. Then after 10 seconds when they’ve ‘grown’ i want to harvest them, but don’t want to harvest them straight away?